/* ============================================================
   KAVURALIM — GLOBAL (Kahve Kavurucu Yönetim Paneli)
   Coffee-native renk paleti: espresso · roast · crema · amber
============================================================ */

:root {
    /* ============================================================
       ⚠️ RENK TEK MERKEZDEN → css/theme.css (:root)
       Bu değişkenler artık sabit HEX değil, theme.css token'larına BAĞLI.
       Temayı değiştirmek için theme.css'teki --brand / --surface-ink /
       --data-* değerlerini düzenle → sidebar, modal, formlar dahil TÜM
       panel otomatik güncellenir. (Fallback HEX'ler theme.css yoksa diye.)
    ============================================================ */
    /* --- Ana palet --- */
    --espresso:      var(--surface-ink, #241812);   /* sidebar / koyu yüzey */
    --roast:         #3E2A20;   /* orta kavrum */
    --roast-soft:    #5A4335;   /* yumuşak kahve */
    --crema:         #E9DCC9;   /* köpük — açık yüzey */
    --latte:         var(--surface-0, #F6F1E9);   /* ana zemin */
    --milk:          var(--surface-1, #FFFDF9);   /* kart / kağıt beyazı */

    /* --- Accent — theme.css --brand'e bağlı --- */
    --amber:         var(--brand, #C8791E);        /* birincil vurgu */
    --amber-deep:    var(--brand-deep, #A75F14);   /* hover */
    --amber-soft:    var(--brand-tint, rgba(200, 121, 30, 0.14));
    --ember:         var(--data-4, #B5451F);       /* ikincil sıcaklık */

    /* --- Durum renkleri — theme.css'e bağlı --- */
    --danger:        var(--neg, #C0392B);   /* pişmiş kızıl */
    --success:       var(--data-3, #6E8B3D);   /* yeşil çekirdek */
    --warn:          var(--data-5, #D9A441);   /* karamel uyarı */

    /* --- Rol atamaları (eski değişken adları korundu) --- */
    --bg-main:       var(--latte);
    --primary:       var(--espresso);
    --accent:        var(--amber);
    --text-dark:     #2B211B;
    --text-soft:     #7A6A5D;
    --border:        #E4D8C6;
    --card-bg:       var(--milk);

    --radius:        14px;
    --shadow-sm:     0 2px 8px rgba(58, 40, 28, 0.06);
    --shadow-md:     0 10px 30px rgba(58, 40, 28, 0.10);
    --shadow-lg:     0 24px 50px rgba(45, 30, 20, 0.16);
    --font:          'Poppins', 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: var(--font); }

body {
    background-color: var(--bg-main);
    color: var(--text-dark);
    /* İnce kahve dokusu — çok hafif, dikkat dağıtmaz */
    background-image:
        radial-gradient(circle at 12% 18%, rgba(200, 121, 30, 0.04), transparent 40%),
        radial-gradient(circle at 88% 82%, rgba(62, 42, 32, 0.04), transparent 42%);
    background-attachment: fixed;
}

/* ============================================================
   MODAL — Bulanık cam köpük efekti
============================================================ */
.modern-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(36, 24, 18, 0.42);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    z-index: 2000;
    display: none;
    justify-content: center;
    align-items: flex-start;     /* uzun içerik taşarsa üstten başlasın */
    padding: 40px 15px;
    overflow-y: auto;            /* modal viewport'tan uzunsa KENDİ İÇİNDE kaydır */
    -webkit-overflow-scrolling: touch;
}
/* Açıkken flex — JS display:flex yapıyor; ortalama yatayda, dikeyde akışlı */
.modern-modal-overlay[style*="flex"] { align-items: flex-start; }

.modern-modal-content {
    background: var(--milk);
    color: var(--text-dark);
    padding: 30px 40px;
    border-radius: 18px;
    width: 100%;
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    transform: translateY(-20px);
    opacity: 0;
    animation: modalGiris 0.32s forwards cubic-bezier(0.22, 1, 0.36, 1);
}

/* Modal üst kenarına ince kavrum çizgisi */
.modern-modal-content::before {
    content: '';
    display: block;
    height: 4px;
    width: 54px;
    margin: -14px auto 18px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--amber), var(--ember));
}

@keyframes modalGiris {
    to { transform: translateY(0); opacity: 1; }
}

/* ============================================================
   FORM ELEMANLARI
============================================================ */
.modern-input {
    width: 100%; padding: 12px 15px; margin-top: 5px;
    background: var(--latte);
    border: 1.5px solid var(--border);
    color: var(--text-dark);
    border-radius: 10px;
    outline: none; font-family: inherit;
    font-size: 16px; /* iOS zoom önleme */
    transition: all 0.25s ease;
}
.modern-input::placeholder { color: #B4A594; }
.modern-input:focus {
    border-color: var(--amber);
    background: var(--milk);
    box-shadow: 0 0 0 3px var(--amber-soft);
}

.modern-label { font-size: 13px; color: var(--text-soft); font-weight: 600; }

/* ============================================================
   BUTONLAR
============================================================ */
.modern-btn {
    padding: 12px 25px; border: none; border-radius: 10px;
    font-weight: 700; font-size: 15px; cursor: pointer;
    letter-spacing: 0.2px;
    transition: all 0.25s ease;
}
.modern-btn-primary {
    background: linear-gradient(135deg, var(--amber) 0%, var(--amber-deep) 100%);
    color: #fff;
    box-shadow: 0 4px 14px rgba(200, 121, 30, 0.28);
}
.modern-btn-primary:hover {
    filter: brightness(1.04);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(200, 121, 30, 0.38);
}
.modern-btn-cancel {
    background: transparent;
    border: 1.5px solid var(--danger);
    color: var(--danger);
}
.modern-btn-cancel:hover {
    background: rgba(192, 57, 43, 0.08);
    transform: translateY(-2px);
}

/* ============================================================
   MOBİL
============================================================ */
@media (max-width: 600px) {
    .modern-modal-content {
        padding: 24px 18px;
        border-radius: 16px;
        max-height: 88vh;
    }
    .modern-btn { padding: 11px 18px; font-size: 14px; }
}

/* ============================================================
   TABLO SATIR SEÇME
============================================================ */
.selectable-row {
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.selectable-row:hover { background-color: #FBF6EE; }
.selectable-row.selected-row {
    background-color: var(--amber-soft) !important;
    border-left: 4px solid var(--amber) !important;
}