/* ============================================================
   SHEET-MAIN.CSS - Karakter Kağıdı Ana Düzeni (Layout & Header)
   ============================================================ */

/* Temel Layout */
.character-sheet-layout {
    width: 100%; max-width: 1200px;
    margin: 20px auto; padding: 0 20px;
    color: #eee; box-sizing: border-box;
}

/* Grid Layout */
.sheet-grid {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr); 
    gap: 20px; align-items: start;
}
.sheet-sidebar, .sheet-main-content { min-width: 0; }

/* --- HEADER --- */
.sheet-header-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #1e1e1e;
    padding: 15px 20px;
    border-radius: 8px;
    border-bottom: 3px solid #b52b2b;
    margin-bottom: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    flex-wrap: wrap;
    gap: 15px;
}

.header-section { display: flex; align-items: center; gap: 10px; }
.left-tools { flex: 1; justify-content: flex-start; }
.share-group { display: flex; gap: 5px; }
.btn-icon-text { padding: 6px 12px; font-size: 0.85em; display: flex; align-items: center; gap: 5px; }

.center-identity {
    flex: 2; justify-content: center; text-align: center;
    flex-direction: row; gap: 15px;
}
.sheet-avatar img {
    width: 70px; height: 70px; border-radius: 50%;
    border: 2px solid #b52b2b; object-fit: cover;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.identity-text h1 { margin: 0; font-size: 1.6em; color: #fff; line-height: 1.1; }
.identity-text .sheet-subtitle { color: #aaa; font-size: 0.9em; margin-top: 3px; }

.right-rest { flex: 1; justify-content: flex-end; }

/* Butonlar */
.edit-mode-btn {
    background: transparent; border: 1px solid #444; color: #888;
    padding: 6px 12px; font-size: 0.85em; cursor: pointer; border-radius: 4px;
    transition: all 0.2s; white-space: nowrap;
}
.edit-mode-btn:hover { border-color: #e67e22; color: #e67e22; }

.rest-btn {
    background: #333; border: 1px solid #555; color: #ccc;
    padding: 8px 12px; border-radius: 4px; cursor: pointer;
    font-size: 0.8em; text-transform: uppercase; font-weight: bold;
    transition: background 0.2s; white-space: nowrap;
}
.rest-btn:hover { background: #b52b2b; color: #fff; border-color: #b52b2b; }

/* --- RESPONSIVE LAYOUT --- */
@media (max-width: 1100px) {
    .character-sheet-layout { padding: 0 10px; }
    .sheet-grid { grid-template-columns: 240px minmax(0, 1fr); gap: 15px; }
}

@media (max-width: 850px) {
    .sheet-header-main { flex-direction: column; gap: 15px; padding: 15px; }
    .header-section { width: 100%; justify-content: center !important; }
    
    .left-tools { order: 1; border-bottom: 1px solid #333; padding-bottom: 10px; margin-bottom: 5px; }
    .center-identity { order: 2; flex-direction: column; gap: 5px; }
    .right-rest { order: 3; margin-top: 5px; }
    
    .left-tools button, .share-group button, .right-rest button { flex: 1; justify-content: center; }
    .hide-on-mobile { display: inline; }
    .sheet-avatar img { width: 90px; height: 90px; }

    .sheet-grid { display: flex; flex-direction: column; gap: 20px; width: 100%; }
    .sheet-sidebar { width: 100%; display: flex; flex-direction: column; gap: 15px; }
    .sheet-main-content { width: 100%; min-width: 0; flex: 1 1 auto; margin: 0; }
    
    .character-sheet-layout { margin: 0; padding: 0; overflow-x: hidden; }
}

/* Sürüklenebilir Tab Stili */
.sheet-tabs button[draggable="true"] {
    cursor: grab; /* Tutma eli ikonu */
}

.sheet-tabs button[draggable="true"]:active {
    cursor: grabbing; /* Tutarken sıkılmış el ikonu */
}


/* --- MODERN TABLO STİLLERİ --- */
.table-responsive {
    overflow-x: auto;
    margin: 15px 0;
    border-radius: 8px;
    border: 1px solid #333;
}

.feature-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
    background-color: #1a1a1a;
    color: #e0e0e0;
}

.feature-table caption {
    caption-side: top;
    font-weight: bold;
    padding: 10px;
    color: #b52b2b; /* Sitenin kırmızı vurgusu */
    text-transform: uppercase;
    letter-spacing: 1px;
    background: #111;
    border-bottom: 2px solid #b52b2b;
}

.feature-table th {
    background-color: #252525;
    color: #fff;
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #444;
    font-weight: 600;
}

.feature-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #333;
    vertical-align: top;
}

/* Satır renklendirmesi (Zebra Striping) */
.feature-table tr:nth-child(even) {
    background-color: #222;
}

.feature-table tr:hover {
    background-color: #2a2a2a; /* Üzerine gelince hafif aydınlat */
}

/* Mobilde tablo bozulmasın */
.feature-table td p {
    margin: 0; 
}



/* --- ALT BAŞLIK STİLLERİ --- */
.feature-subsection {
    margin-top: 10px;
    margin-bottom: 5px;
    padding-left: 5px;
    border-left: 2px solid #444; /* Sol tarafa ince bir çizgi */
}

.feature-sub-title {
    color: #e67e22; /* Turuncu vurgu (veya #b52b2b kırmızı yapabilirsin) */
    font-weight: bold;
    font-size: 1em; /* Normal yazıdan çok az büyük */
    margin: 0 0 5px 0;
    display: block;
    text-transform: capitalize;
}

.feature-subsection p {
    margin-bottom: 8px;
}

/* --- FORMÜL KUTUSU STİLİ (Flexbox / Responsive) --- */
.mechanic-formula-box {
    display: flex;             /* Esnek kutu modeli */
    flex-wrap: wrap;           /* Sığmazsa aşağı kaydır */
    justify-content: center;   /* Yatayda ortala */
    align-items: baseline;     /* Metin taban çizgisine göre hizala */
    gap: 8px;                  /* Başlık ve içerik arası boşluk */
    
    background: rgba(0,0,0,0.05); 
    padding: 8px 12px;         /* Kenarlardan biraz daha boşluk */
    border-radius: 4px; 
    margin: 5px 0;             /* Kutular arası dikey boşluk */
    text-align: center; 
    font-size: 0.9em; 
    color: #ccc; 
    border: 1px dashed #ccc;
}

.mechanic-formula-box strong {
    display: inline;           /* Artık blok değil, yan yana gelebilir */
    margin: 0;                 /* Margin'i sıfırladık, boşluğu 'gap' hallediyor */
    font-size: 1.1em;
    white-space: nowrap;       /* Başlığın kendi içinde kırılmasını engelle */
}



.resources-dashboard {
    margin-top: 20px;
    background: rgba(0,0,0,0.02);
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #ddd;
}

.res-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

.res-card {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.res-info h5 {
    margin: 0;
    font-size: 0.95em;
    font-weight: bold;
    color: #333;
}

.res-meta {
    font-size: 0.75em;
    color: #666;
    margin-top: 2px;
}

.res-controls {
    display: flex;
    align-items: center;
    gap: 5px;
    background: #f5f5f5;
    border-radius: 15px;
    padding: 2px;
}

.res-btn {
    width: 24px;
    height: 24px;
    border: none;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
    font-weight: bold;
    color: #b52b2b;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.res-btn:hover {
    background: #b52b2b;
    color: white;
}

.res-value {
    font-weight: bold;
    font-size: 1.1em;
    min-width: 30px;
    text-align: center;
}

.res-value .max {
    font-size: 0.7em;
    color: #999;
    font-weight: normal;
}

/* Dinlenme Butonları */
.btn-rest {
    padding: 8px 15px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    color: white;
    transition: transform 0.1s;
}
.btn-rest:active { transform: scale(0.96); }
.btn-rest.short { background-color: #d68c29; } /* Turuncu tonu */
.btn-rest.long { background-color: #4a3b72; } /* Mor tonu */

/* Modal Stilleri */
.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content {
    background: #1e1e1e; /* Koyu tema */
    color: #eee;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #444;
    width: 300px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}

.dice-selector {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin: 15px 0;
    font-size: 1.5em;
}

.qty-btn {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: none;
    background: #333;
    color: white;
    cursor: pointer;
    font-size: 1.2em;
}
.qty-btn:hover { background: #555; }

.modal-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
}

.btn-confirm { background: #2f855a; color: white; padding: 8px 16px; border:none; border-radius:4px; cursor:pointer;}
.btn-cancel { background: #c53030; color: white; padding: 8px 16px; border:none; border-radius:4px; cursor:pointer;}

/* Modal Arka Planı */
.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100vh;
    background: rgba(0, 0, 0, 0.85); /* Arkası karanlık olsun */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    backdrop-filter: blur(2px);
}

/* Modal Kutusu */
.modal-content {
    background: #1a1a1a;
    border: 1px solid #333;
    padding: 25px;
    border-radius: 12px;
    width: 320px;
    text-align: center;
    color: #e0e0e0;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

.rest-stats {
    display: flex;
    justify-content: space-around;
    margin: 15px 0;
    font-size: 0.9em;
    background: #252525;
    padding: 10px;
    border-radius: 6px;
}

.dice-control-area {
    margin: 20px 0;
}

.stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-top: 5px;
}

.step-btn {
    background: #444;
    border: none;
    color: white;
    width: 30px; height: 30px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.2em;
}

.step-val {
    font-size: 1.5em;
    font-weight: bold;
    min-width: 30px;
}

.modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.modal-actions button {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
}

.cancel-btn { background: #c62828; color: white; }
.confirm-btn { background: #2e7d32; color: white; }

.step-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}


/* ============================================================
   MOBİL İÇİN ÖZEL YERLEŞİM (SONUÇ KAĞIDI DÜZENİ)
   ============================================================ */

@media (max-width: 850px) {
    
    /* 1. En dış katmanı Flex Container yapıyoruz */
    .character-sheet-layout {
        display: flex;
        flex-direction: column;
    }

    /* 2. SİHİRLİ DOKUNUŞ: Ara katmanları "yok" sayıyoruz (display: contents).
       Böylece 'sheet-header', 'sidebar' ve 'main-content' içindeki her şey
       aynı seviyede kardeş gibi davranır ve sıralanabilir hale gelir. */
    .sheet-grid,
    .sheet-main-content {
        display: contents; 
    }

    /* --- SIRALAMA (ORDER) AYARLARI --- */
    
    /* SIRA 1: Başlık (İsim, Avatar) */
    .sheet-header-main {
        order: 1;
        margin-bottom: 10px;
    }

    /* SIRA 2: Savaş İstatistikleri (Can, AC, Hız - İstediğin Gibi En Tepeye) */
    .combat-stats-row {
        order: 2;
        margin-bottom: 15px;
        /* Kutuları mobilde yan yana (2x2) dizelim */
        display: grid;
        grid-template-columns: 1fr 1fr; 
        gap: 8px;
        padding: 0 10px; /* Kenarlardan hafif boşluk */
    }
    
    /* SIRA 3: Kurtulma Zarları */
    .saving-throws-panel {
        order: 3;
        margin-bottom: 20px;
        padding: 0 10px;
    }

    /* SIRA 4: Sol Menü (Statlar ve Skiller) */
    .sheet-sidebar {
        order: 4;
        width: 100%;
        margin-bottom: 20px;
        border-right: none;
        padding: 0 10px;
        
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    /* SIRA 5: Sekmeler (Tabs) - Yapışkan Olsun */
    .sheet-tabs {
        order: 5;
        position: sticky;
        top: 0;
        z-index: 100;
        background: #121212;
        padding-top: 10px;
        margin-bottom: 15px;
        border-bottom: 1px solid #333;
        border-top: 1px solid #333; /* Üste de çizgi atalım belli olsun */
    }

    /* SIRA 6: Sekme İçeriği */
    .sheet-tab-content {
        order: 6;
        padding: 0 10px 40px 10px; /* Alttan biraz boşluk */
    }

    /* --- GÖRSEL DÜZELTMELER (MOBİL) --- */
    
    /* Can puanı kutusu (HP) çok dar kalmasın, tam satır kaplasın */
    .combat-stats-row .hp-box {
        grid-column: 1 / -1; /* Tüm satırı kapla */
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
        background: #1f1f1f; /* Biraz daha belirgin olsun */
    }

    /* Stat kutularını (STR, DEX...) yan yana diz */
    .sheet-sidebar .ability-scores-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 3 Yan yana */
        gap: 8px;
    }
}