/* =========================================
   KURUMSAL TEMA VE FONTLAR (AÇIK TEMA)
   ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Pathway+Extreme:wght@400;600;700&display=swap');

:root {
    --primary: #960b00;     /* Ana Renk: Bordo */
    --accent: #90fcfc;      /* Vurgu Rengi: Açık Camgöbeği */
    --bg-main: #e2e2e2;     /* Ana Arka Plan */
    --bg-card: #f9f9f9;     /* Kartlar ve Modallar */
    --bg-box: #ffffff;      /* Kart içi ufak kutular (Tam beyaz) */
    --success: #1bce28;     /* Başarılı (Yeşil) */
    --danger: #960b00;      /* Hata (Bordo ile aynı tuttuk) */
    --warning: #ff970d;     /* Bekleyen (Turuncu) */
    --text-main: #222222;   /* Ana Metin (Koyu Gri/Siyah) */
    --text-muted: #666666;  /* Pasif Metin */
    --border-color: #d1d1d1;/* Çizgiler */
    --radius: 8px;          /* Hafif yuvarlatılmış modern köşeler */
}

/* Temel Gövde ve Yazı Tipleri */
body {
    font-family: 'Inter', sans-serif !important;
    background-color: var(--bg-main) !important;
    color: var(--text-main) !important;
}

h1, h2, h3, h4, h5, h6, strong, b {
    font-family: 'Pathway Extreme', sans-serif !important;
    color: var(--primary) !important;
}





/* =========================================
   1. GENEL AYARLAR
   ========================================= */
body {
    background-color: #121212;
    color: #e0e0e0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    padding-bottom: 80px; /* Mobilde alt menü/scroll payı */
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 15px;
}

/* =========================================
   2. DASHBOARD & KARTLAR
   ========================================= */
.dashboard-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.dash-card {
    background: #1e1e1e;
    border: 1px solid #333;
    border-radius: 12px;
    padding: 20px;
    min-height: 140px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    flex: 1 1 300px; /* Genişleyebilir, min 300px */
    position: relative;
    transition: transform 0.2s, box-shadow 0.2s;
}

.dash-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    border-color: #555;
}

.dash-header {
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    margin-bottom: 15px;
    align-items: center;
    font-size: 1.1em;
}

.badge-count {
    background: #e74c3c;
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.8em;
    font-weight: bold;
    margin-left: 5px;
}

/* =========================================
   3. MODAL (AÇILIR PENCERE & Z-INDEX AYARLARI)
   ========================================= */
.modal {
    display: none; /* Önce tamamen gizle */
    position: fixed;
    z-index: 10000; /* SweetAlert'in altında kalması için düşürüldü */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    /* Tıklamaları engellememesi için şu iki satırı kontrol et: */
    pointer-events: none; /* Kapalıyken tıklamayı geçirmeli */
}

/* Sadece aktif olduğunda tıklamaları kabul etmeli */
.modal.active, .modal[style*="display: block"], .modal[style*="display: flex"] {
    display: flex !important;
    pointer-events: auto; /* Açıkken tıklanabilir olmalı */
}

.modal-content {
    background-color: #1e1e1e;
    padding: 25px;
    border-radius: 12px;
    width: 90%;
    max-width: 600px;
    max-height: 85vh; /* Ekrandan taşmaması için */
    overflow-y: auto; /* İçerik çoksa içeride scroll çıksın */
    border: 1px solid #444;
    box-shadow: 0 0 30px rgba(0,0,0,0.8);
    position: relative;
    margin: auto; /* Merkeze kilitle */
}

.close-btn {
    float: right;
    font-size: 28px;
    cursor: pointer;
    color: #aaa;
    line-height: 20px;
}

.close-btn:hover { color: white; }

/* =========================================
   4. FORMLAR VE BUTONLAR
   ========================================= */
input, select, textarea {
    background-color: #2a2a2a;
    border: 1px solid #444;
    color: white;
    padding: 12px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 15px;
    border-radius: 6px;
    font-family: inherit;
}

input:focus, select:focus, textarea:focus {
    border-color: #4a90e2;
    outline: none;
}

.btn {
    padding: 12px;
    border-radius: 6px;
    border: none;
    font-weight: bold;
    cursor: pointer;
    width: 100%;
    transition: opacity 0.2s;
    font-size: 1em;
}

.btn:hover { opacity: 0.9; }

/* =========================================
   5. SANATÇI TAKVİMİ (AKILLI GÖRÜNÜM)
   ========================================= */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    margin-top: 10px;
}

.calendar-day {
    background: #252525;
    min-height: 100px; /* Masaüstünde uzun */
    padding: 5px;
    border: 1px solid #333;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.calendar-day:hover { border-color: #777; }

.day-number {
    font-weight: bold;
    margin-bottom: 5px;
    color: #888;
    align-self: flex-start;
}

/* Masaüstü: Yazı Göster */
.desktop-event {
    font-size: 0.75em;
    padding: 2px 4px;
    margin-bottom: 2px;
    border-radius: 3px;
    color: black;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

/* Mobil: Nokta Göster (Varsayılan gizli) */
.mobile-dots {
    display: none; /* Masaüstünde gizle */
    gap: 3px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: auto; /* Alta it */
    width: 100%;
}

.dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

/* =========================================
   6. MOBİL UYUMLULUK (RESPONSIVE)
   ========================================= */
@media (max-width: 768px) {
    /* Grid Tek Kolona Düşer */
    .dashboard-grid {
        flex-direction: column;
    }

    /* Mobil Kart Sıralaması */
    .mobile-order-1 { order: 1; }
    .mobile-order-2 { order: 2; }
    .mobile-order-3 { order: 3; }
    .mobile-order-4 { order: 4; }
    .mobile-order-5 { order: 5; }
    .mobile-order-6 { order: 6; }

    /* Takvim Değişimi */
    .calendar-day {
        min-height: 60px; /* Mobilde kısalır */
        align-items: center;
        justify-content: center;
        padding: 2px;
    }
    
    .desktop-event { display: none; } /* Yazıyı gizle */
    .mobile-dots { display: flex; }   /* Noktayı aç */
    
    .day-number { margin-bottom: 2px; font-size: 0.9em; align-self: center; }
}

/* --- HAFTALIK TABLO DÜZENLEMESİ --- */
.weekly-table-wrapper {
    overflow-x: auto;
    background: #1a1a1a;
    border-radius: 8px;
    border: 1px solid #333;
}

.styled-table {
    width: 100%;
    border-collapse: separate; /* Sticky için gerekli */
    border-spacing: 0;
    min-width: 800px; /* Çok sıkışmayı önler */
}

.styled-table th, .styled-table td {
    padding: 12px;
    border-bottom: 1px solid #333;
    border-right: 1px solid #333;
    vertical-align: top; /* İçeriği yukarı hizala */
}

.styled-table th {
    background: #252525;
    color: #aaa;
    font-weight: bold;
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Tarih Sütunu Sabitleme */
.styled-table td:first-child, 
.styled-table th:first-child {
    position: sticky;
    left: 0;
    background: #222;
    z-index: 11; /* Diğerlerinden üstte */
    border-right: 2px solid #444;
    font-weight: bold;
    color: #fff;
    width: 80px;
    min-width: 80px;
}

/* Hücre İçi Düzen */
.cell-content {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-height: 60px;
    justify-content: space-between;
}

/* Randevu Kutucuğu */
.booking-item {
    display: block; /* Alt alta inmesi için */
    background: #4a90e2;
    color: #000;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.85em;
    font-weight: bold;
    margin-bottom: 4px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    white-space: normal; /* Metin sığmazsa alt satıra geçsin */
    line-height: 1.2;
}

.booking-item:hover {
    filter: brightness(1.1);
}

/* Kapalı Gün Etiketi */
.blocked-tag {
    background: #e74c3c;
    color: white;
    padding: 6px;
    border-radius: 4px;
    text-align: center;
    font-weight: bold;
    font-size: 0.9em;
    display: block;
}

/* Aç/Kapat Butonları */
.action-btn {
    width: 100%;
    padding: 4px;
    margin-top: 5px;
    border: none;
    border-radius: 4px;
    font-size: 0.75em;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: bold;
    opacity: 0.7;
    transition: 0.2s;
}

.action-btn:hover { opacity: 1; }
.btn-close { background: #333; color: #e74c3c; border: 1px solid #444; }
.btn-open { background: #333; color: #4ba862; border: 1px solid #444; }

/* MODAL SİSTEMİ %100 FİX */
body .modal {
    display: none !important; /* Önce her şeyi gizle */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.92) !important;
    z-index: 100000 !important; /* Modal katmanı */
    justify-content: center !important;
    align-items: center !important;
}

/* Sadece JS ile 'active' sınıfı gelince göster */
body .modal.active {
    display: flex !important;
}

.modal-content {
    background: #1a1a1a !important;
    border: 1px solid #444 !important;
    padding: 30px !important;
    border-radius: 15px !important;
    width: 90% !important;
    max-width: 800px !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
}

.swal2-container {
    z-index: 999999 !important; /* Modal'ın (100000) her zaman üstünde olması için yükseltildi */
}

/* =========================================
   8. MOBİL UI/UX OPTİMİZASYONLARI (V1 CANLIYA ALIM İÇİN)
   ========================================= */
@media screen and (max-width: 768px) {
    /* 1. "Kalın Parmak" Optimizasyonu & iOS Zoom Engelleme */
    input, select, textarea, button, .btn {
        font-size: 16px !important; 
    }
    
    input, select, button, .btn {
        min-height: 44px; 
    }
    
    /* 2. Modalların (Kutucukların) Mobilde Sıkışmasını Önleme */
    .modal-content {
        width: 95% !important; 
        max-width: 100% !important;
        max-height: 90vh !important; 
        padding: 15px !important; 
        scroll-behavior: smooth; 
        -webkit-overflow-scrolling: touch; 
    }

    /* 3. Büyük Tabloların Taşmasını Engelleme (Yatay Kaydırma) */
    .table-responsive, 
    .weekly-table-wrapper, 
    #admin-brain-calendar, 
    #admin-setup-slots-list,
    #finance-dynamic-content {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        display: block;
        width: 100%;
    }

    /* 4. Dashboard (Ana Ekran) Kartlarının Düzeni */
    .dashboard-grid {
        gap: 10px !important; 
    }
    
    /* İŞTE O BOŞLUKLARI YOK EDEN KOD BURASI */
    .dash-card {
        padding: 15px !important; 
        min-height: 0 !important;
        height: auto !important;
        flex: unset !important; /* İŞTE SİHİRLİ DOKUNUŞ: 300px zorlamasını iptal eder */
        width: 100% !important; /* Ekrana tam oturmasını sağlar */
        box-sizing: border-box !important;
        margin-bottom: 5px !important;
    }
    
    /* 5. Mobilde Sekme (Tab) Butonlarını Ekrana Sığdırma */
    .ops-tab-btn, .finance-tab-btn {
        padding: 8px !important;
        font-size: 0.8em !important;
        flex: 1; 
        text-align: center;
        white-space: nowrap; 
    }
}


/* =========================================
   TEMA DÖNÜŞTÜRÜCÜ V2 - KESİN ÇÖZÜM
   (Tüm koyu alanları, neon renkleri ve inatçı elementleri ezer)
   ========================================= */

/* 1. ANA ARKA PLANLAR (Kartlar, Modallar, Listeler) */
.card, .modal-content, .swal2-popup, .dash-card, 
.list-group-item, .dropdown-menu, .offcanvas,
[style*="background:#1"], [style*="background:#2"], [style*="background:#3"] {
    background-color: var(--bg-card) !important; /* Hafif Kırık Beyaz */
    color: var(--text-main) !important;          /* Koyu Gri Yazı */
    border-color: var(--border-color) !important; /* İnce Gri Çizgi */
    box-shadow: 0 5px 15px rgba(0,0,0,0.05) !important; /* Hafif Gölge */
}

/* 2. FORM ELEMANLARI VE İÇ KUTULAR (Inputlar, Takvim Günleri) */
.card-body, .modal-body, .modal-header, .modal-footer,
input, select, textarea, .form-control, .input-group-text,
.fc-daygrid-day, /* Takvim günleri */
.fc-col-header-cell /* Takvim başlıkları */ {
    background-color: var(--bg-box) !important; /* Tam Beyaz */
    color: var(--text-main) !important;          /* Koyu Gri Yazı */
    border: 1px solid var(--border-color) !important;
}

/* Form elemanlarına odaklanınca (tıklayınca) */
input:focus, select:focus, textarea:focus, .form-control:focus {
    border-color: var(--primary) !important; /* Bordo Kenarlık */
    box-shadow: 0 0 0 3px rgba(150, 11, 0, 0.1) !important; /* Hafif Bordo Işık */
}

/* 3. BAŞLIKLAR VE İKONLAR (Ana Bordo Renk) */
h1, h2, h3, h4, h5, h6, 
.card-title, .modal-title, .swal2-title, 
.offcanvas-title,
i, .fa, .fas, .far, .bi {
    color: var(--primary) !important; /* Hepsi Bordo Olsun */
}

/* 4. DÜZ METİNLER, ETİKETLER VE RAKAMLAR (Koyu Gri) */
body, p, span, div, li, td, th, label, small,
.fc-daygrid-day-number, /* Takvimdeki rakamlar */
.text-muted, a {
    color: var(--text-main) !important;
}

/* 5. BUTONLAR (Ana Renk ve Parlak Hover) */
.btn, .btn-primary, .btn-success, .btn-danger, .btn-warning, 
.swal2-confirm, .swal2-deny, .swal2-cancel,
button[style*="background:"] {
    background-color: var(--primary) !important; /* Bordo Zemin */
    border: none !important;
    color: white !important; /* Beyaz Yazı */
    font-family: 'Pathway Extreme', sans-serif !important;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Butonların üzerine gelince */
.btn:hover, .swal2-styled:hover, button:hover {
    background-color: var(--accent) !important; /* Parlak Camgöbeği */
    color: var(--text-main) !important; /* Üzerinde Siyah Yazı (Okunması için) */
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(144, 252, 252, 0.4) !important;
}

/* 6. GÖREV VE STOK KUTUCUKLARI (Özel Düzeltme) */
/* Kutuların içindeki başlık ve sayıları koyu renk yap */
.dash-card .d-flex > div > span:first-child, /* Başlık (Örn: Bekleyen) */
.dash-card .d-flex > div > span:last-child  /* Sayı (Örn: 0) */ {
    color: var(--text-main) !important;
    font-family: 'Inter', sans-serif !important;
}
/* Kutuların kendi zeminini beyaz yap */
.dash-card .d-flex > div[style*="border-left"] {
    background-color: var(--bg-box) !important;
}

/* 7. TAKVİM VE LİSTE ÇİZGİLERİ */
.fc-theme-standard td, .fc-theme-standard th,
.list-group-item, table.table td, table.table th {
    border-color: var(--border-color) !important;
}
/* Bugünü takvimde hafif bordo ile işaretle */
.fc .fc-daygrid-day.fc-day-today {
    background-color: rgba(150, 11, 0, 0.05) !important;
}

/* 8. DİĞER İNCE AYARLAR */
.badge { color: white !important; } /* Rozet yazıları beyaz kalsın */
.text-white { color: var(--text-main) !important; } /* "text-white" class'ını ez */
::-webkit-scrollbar-track { background: var(--bg-main); }
::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 10px; }


/* =========================================
   TEMA DÖNÜŞTÜRÜCÜ V3 - İNATÇI SİYAHLARI YOK ET (HOVER, TAKVİM, AKORDİYON)
   ========================================= */

/* 1. Müşteri ve Randevu Listelerindeki Hover (Mouse İle Gezinme) Sorunu */
/* JS'in onmouseover ile anlık eklediği koyu renkleri kesin olarak ezer */
div[onmouseover]:hover {
    background-color: var(--bg-main) !important; /* Üzerine gelince açık gri (ana arka plan) olsun */
    color: var(--text-main) !important;
}
div[onmouseover] {
    background-color: var(--bg-box) !important; /* Normal hali tam beyaz olsun */
    border-color: var(--border-color) !important;
}

/* 2. Takvim Günleri (Koyu Gri Kalan Arka Planlar) */
.calendar-day, .calendar-day-empty {
    background-color: var(--bg-box) !important; /* Günlerin içi tam beyaz */
    border: 1px solid var(--border-color) !important; /* İnce gri çerçeve */
    color: var(--text-main) !important;
}
.calendar-day:hover {
    background-color: var(--bg-main) !important; /* Üzerine gelince açık gri */
}

/* 3. Finans Akordiyonları (Manuel İşlem ve Aylık Özetler) */
#manual-finance-form-body,
[id^="month-acc-"], /* Aylık özetlerin açılan iç siyah kısımları */
#finance-list-content {
    background-color: var(--bg-box) !important; /* İç kısımlar bembeyaz olsun */
    border-color: var(--border-color) !important;
}

/* Akordiyon Başlıkları (Tıklanan üst kısımlar) */
[onclick^="toggleMonthAccordion"], 
[onclick^="toggleManualFinanceForm"],
[onclick^="toggleFinanceAccordion"],
[onclick^="toggleTaskAccordion"] {
    background-color: var(--bg-main) !important; /* Tıklanacak yerler hafif gri */
    border-color: var(--border-color) !important;
}

/* 4. Stok Takibi (Koyu Kalan Başlıklar ve Tablolar) */
.stock-category-header, 
.stock-table th, 
thead tr th {
    background-color: var(--bg-main) !important; /* Başlıklar açık gri */
    color: var(--primary) !important; /* Bordo yazı */
    border-color: var(--border-color) !important;
    font-family: 'Pathway Extreme', sans-serif !important;
}
.stock-table td, 
.stock-table tr,
table.styled-table tbody tr {
    background-color: var(--bg-box) !important; /* Tablo içi beyaz */
    border-color: var(--border-color) !important;
    color: var(--text-main) !important; /* Yazılar siyah */
}

/* 5. Gözden Kaçan Açık Renkli Yazılar (Beyaz kalan metinleri siyah/koyu gri yapar) */
[style*="color:white"], [style*="color: white"], 
[style*="color:#fff"], [style*="color: #fff"],
[style*="color:#ccc"], [style*="color:#ddd"] {
    color: var(--text-main) !important; 
}

/* =========================================
   TEMA DÖNÜŞTÜRÜCÜ V4 - KART VE BAŞLIK STANDARTLARI (Kusursuz Hizalama)
   ========================================= */

/* 1. Kartların Genel Dış Yapısı */
.dash-card {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    padding: 20px !important; /* Hepsine tam eşit ve ferah bir iç boşluk */
    box-shadow: 0 4px 15px rgba(0,0,0,0.02) !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important; /* Yan yana durduklarında aynı boyda uzamalarını sağlar */
}

/* 2. Kartların Üst Başlık Satırı (Hepsinin altını şık bir çizgiyle ayırıyoruz) */
.dash-card > div:first-child {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 15px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid var(--border-color) !important; /* Başlık ile içerik arasına zarif bir çizgi */
    width: 100% !important;
}

/* 3. Kart Başlık Yazıları (Sol Üst: "Görevlerim", "Temizlik" vb.) */
.dash-card > div:first-child h3,
.dash-card > div:first-child > div:first-child,
.dash-card > div:first-child > strong {
    font-family: 'Pathway Extreme', sans-serif !important;
    font-size: 1.15rem !important; /* Tüm başlıklar milimetrik olarak aynı boyutta */
    font-weight: 700 !important;   /* Hepsi kalın */
    color: var(--primary) !important; /* Kurumsal Bordo rengimiz */
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important; /* İkon ile metin arası ideal boşluk */
    letter-spacing: 0.2px !important;
    line-height: 1 !important;
}

/* 4. Kart Sağ Üst Yönlendirme Linkleri ("Tümü", "Güncelle" vb.) */
.dash-card > div:first-child span:last-child,
.dash-card > div:first-child a:last-child {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: var(--text-muted) !important; /* Pasif gri ton */
    cursor: pointer !important;
    text-transform: uppercase !important; /* Daha ciddi durması için büyük harf */
    letter-spacing: 0.5px !important;
    transition: color 0.2s ease !important;
}

/* Linklerin üzerine (hover) gelince */
.dash-card > div:first-child span:last-child:hover,
.dash-card > div:first-child a:last-child:hover {
    color: var(--primary) !important; /* Tıklanabilir olduklarını Bordo ile belli et */
}

/* ====================================================================
   TEMA DÖNÜŞTÜRÜCÜ V5 - İNATÇI SİYAHLARI, HOVER'LARI VE BAŞLIKLARI EZME
   ==================================================================== */

/* ---------------------------------------------------
   1. MOUSE İLE ÜZERİNE GELİNCE SİYAH OLAN KUTULAR (HOVER FİX)
   (Müşteri Listesi ve Randevu Geçmişi)
--------------------------------------------------- */
div[onmouseover] {
    background-color: var(--bg-box) !important; /* Normalde beyaz */
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
}
div[onmouseover]:hover {
    background-color: #f1f1f1 !important; /* Üzerine gelince çok hafif gri olsun, siyah olmasın */
    color: var(--text-main) !important;
    transform: translateY(-1px) !important; /* Hafif yukarı kalkma efekti */
}

/* ---------------------------------------------------
   2. FİNANSAL DURUM AKORDİYONLARI VE İÇLERİ
   (Manuel İşlem Ekle ve Aylık Özetler)
--------------------------------------------------- */
#manual-finance-form-body,
div[id^="month-acc-"], 
#finance-list-content {
    background-color: var(--bg-box) !important; /* İçi tam beyaz */
    border: 1px solid var(--border-color) !important;
    color: var(--text-main) !important;
}
/* Finans akordiyonu içindeki yazıları siyah yap */
#manual-finance-form-body div, 
#manual-finance-form-body span, 
div[id^="month-acc-"] div, 
div[id^="month-acc-"] span,
#finance-archives-container h4 {
    color: var(--text-main) !important;
}
/* Gelir/Gider yeşil ve kırmızı renklerini koru */
div[id^="month-acc-"] span[style*="color:#4ba862"], 
div[id^="month-acc-"] span[style*="color:#4ba862"] { color: var(--success) !important; font-weight: bold !important;}
div[id^="month-acc-"] span[style*="color:#e74c3c"],
div[id^="month-acc-"] span[style*="color:red"] { color: var(--danger) !important; font-weight: bold !important;}

/* ---------------------------------------------------
   3. STOK TAKİBİ MODALI (Siyah Kalan Tablo ve Başlıklar)
--------------------------------------------------- */
.stock-category-header {
    background-color: #f1f1f1 !important; /* Açık gri başlık arka planı */
    color: var(--primary) !important; /* Bordo yazı */
    border-color: var(--border-color) !important;
    font-family: 'Pathway Extreme', sans-serif !important;
    font-weight: 700 !important;
}
.stock-table th {
    background-color: #eaeaea !important;
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
}
.stock-table td, .stock-table tr {
    background-color: var(--bg-box) !important; /* Beyaz tablo içi */
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
}
.stock-table td b { color: var(--text-main) !important; }
.stock-table td small { color: var(--text-muted) !important; }

/* ---------------------------------------------------
   4. TAKVİM GÜNLERİ VE ARKA PLANI
--------------------------------------------------- */
#my-calendar-grid {
    background-color: var(--bg-card) !important;
}
.calendar-day, .calendar-day-empty {
    background-color: var(--bg-box) !important; /* Günlerin içi beyaz */
    border: 1px solid var(--border-color) !important;
    color: var(--text-main) !important;
}
.calendar-day:hover {
    background-color: #f1f1f1 !important;
}
.calendar-day .day-number {
    color: var(--text-main) !important;
    font-weight: bold !important;
}

/* ---------------------------------------------------
   5. KART BAŞLIKLARI STANDARTLAŞTIRMA (BOLD VE BORDO)
   (Görevlerim, Temizlik, Stok Takibi vb. Başlıklar)
--------------------------------------------------- */
.dash-card > div:first-child {
    border-bottom: 2px solid var(--border-color) !important; /* Başlık altına belirgin çizgi */
    padding-bottom: 12px !important;
    margin-bottom: 15px !important;
}
/* Sol Üst Başlıklar */
.dash-card > div:first-child h3,
.dash-card > div:first-child > div:first-child,
.dash-card > div:first-child strong {
    font-family: 'Pathway Extreme', sans-serif !important;
    font-size: 1.25rem !important; /* Hepsini aynı boyuta getirir */
    font-weight: 700 !important;   /* Hepsini BOLD (Kalın) yapar */
    color: var(--primary) !important; /* Hepsini Bordo yapar */
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
/* Sağ Üst Linkler (Tümü, Yönet, Genişlet) */
.dash-card > div:first-child span:last-child,
.dash-card > div:first-child a:last-child {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important; /* Yarı kalın */
    color: var(--primary) !important; /* Bordo renk */
    opacity: 0.8 !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
}
.dash-card > div:first-child span:last-child:hover { opacity: 1 !important; }

/* ---------------------------------------------------
   6. BEYAZ/GRİ KALAN YAZILARI SİYAH YAPMA (CATCH-ALL)
--------------------------------------------------- */
/* JS ile inatla beyaz gelen yazıları koyu gri/siyah yapar */
div[style*="color:white"], div[style*="color: white"], 
span[style*="color:white"], span[style*="color: white"],
div[style*="color:#fff"], span[style*="color:#fff"],
div[style*="color:#ccc"], span[style*="color:#ccc"],
div[style*="color:#ddd"], span[style*="color:#ddd"],
div[style*="color:#aaa"], span[style*="color:#aaa"] {
    color: var(--text-main) !important;
}

/* BUTONLARIN YAZILARINI KORU (Buton yazıları beyaz kalmalı) */
.btn, button, .swal2-confirm {
    color: white !important;
}

/* ====================================================================
   TEMA DÖNÜŞTÜRÜCÜ V6 - KESİN ÇÖZÜM (HOVER, AKORDİYON VE BAŞLIK STANDARDI)
   ==================================================================== */

/* ---------------------------------------------------
   1. KART BAŞLIKLARI KUSURSUZ STANDART (Görseldeki Gibi)
--------------------------------------------------- */
.dash-card > div:first-child {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 1px solid var(--border-color) !important; /* Altına ince şık çizgi */
    padding-bottom: 10px !important;
    margin-bottom: 15px !important;
    width: 100% !important;
}

/* Sol Taraftaki Başlık (Örn: Müşterilerim, Görevlerim) */
.dash-card > div:first-child h3,
.dash-card > div:first-child > div:first-child,
.dash-card > div:first-child strong {
    font-family: 'Pathway Extreme', sans-serif !important;
    font-size: 1.25rem !important; /* Tüm başlıklar aynı ve ideal boyutta */
    font-weight: 700 !important;   /* Hepsi ekstra kalın (Bold) */
    color: var(--primary) !important; /* Ana marka rengin: Bordo */
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: transparent !important;
}

/* Sağ Taraftaki Link (Örn: Yönet ↗, Tümü) */
.dash-card > div:first-child span:last-child,
.dash-card > div:first-child a:last-child {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: var(--text-main) !important; /* Koyu gri, tam istediğin gibi */
    text-transform: none !important;
    cursor: pointer !important;
    transition: 0.2s !important;
}
.dash-card > div:first-child span:last-child:hover { color: var(--primary) !important; }

/* ---------------------------------------------------
   2. FAREYLE ÜZERİNE GELİNCE SİYAHLAŞAN LİSTELER (HOVER FİX)
   (Randevu Geçmişi, Müşteri Listesi vb.)
--------------------------------------------------- */
div[onmouseout] {
    background-color: var(--bg-box) !important; /* Normal hali bembeyaz */
    border: 1px solid var(--border-color) !important;
}
div[onmouseout]:hover, div[onmouseover]:hover {
    background-color: #f1f1f1 !important; /* Üzerine gelince koyu siyah DEĞİL, çok açık gri olsun */
    transform: translateY(-1px);
}
/* İçindeki yazıların zorla beyaz olmasını engelle */
div[onmouseout] div, div[onmouseout] span, div[onmouseout] small {
    color: var(--text-main) !important;
}

/* ---------------------------------------------------
   3. FİNANS VE STOK AKORDİYONLARI (İnatçı Siyahlar)
--------------------------------------------------- */
/* Manuel İşlem ve Aylık Özetlerin İçi */
#manual-finance-form-body, 
div[id^="month-acc-"], 
#finance-list-content,
#finance-archives-container {
    background-color: var(--bg-box) !important; /* Beyaz Zemin */
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
}

/* Akordiyonlara Tıklanan Üst Kısımlar */
[onclick^="toggleMonthAccordion"], 
[onclick^="toggleManualFinanceForm"], 
[onclick^="toggleFinanceAccordion"] {
    background-color: #f9f9f9 !important; /* Açık Gri */
    color: var(--text-main) !important;
    border: 1px solid var(--border-color) !important;
}
[onclick^="toggleMonthAccordion"] div, [onclick^="toggleManualFinanceForm"] strong {
    color: var(--text-main) !important;
}

/* Stok Takibi Modalı İçindeki Tablolar */
.stock-category-header {
    background-color: #f1f1f1 !important;
    color: var(--primary) !important; /* Bordo Başlık */
    border-bottom: 2px solid var(--border-color) !important;
    font-weight: 700 !important;
    font-family: 'Pathway Extreme', sans-serif !important;
}
.stock-table th { background-color: #eaeaea !important; color: var(--text-main) !important; }
.stock-table td, .stock-table tr { background-color: var(--bg-box) !important; color: var(--text-main) !important; border-color: var(--border-color) !important; }

/* ---------------------------------------------------
   4. TAKVİM GÜNLERİ ARKA PLANI
--------------------------------------------------- */
#my-calendar-grid { background-color: transparent !important; }
#my-calendar-grid > div {
    background-color: var(--bg-box) !important; /* Takvim kutuları beyaz */
    border: 1px solid var(--border-color) !important;
    color: var(--text-main) !important;
}
#my-calendar-grid > div:hover { background-color: #f5f5f5 !important; }
.calendar-day .day-number { color: var(--text-main) !important; font-weight: bold !important; }

/* ---------------------------------------------------
   5. DETAY PENCERELERİNDEKİ KOYU KUTULAR 
   (Müşteri Hakkında, Randevu Notu vb.)
--------------------------------------------------- */
div[style*="background:#3a1c1c"], 
div[style*="background:#1a2e3a"], 
div[style*="background:#252525"],
div[style*="background:#222"] {
    background-color: #f9f9f9 !important; /* Açık gri/beyaz zemin */
    border: 1px solid var(--border-color) !important;
    color: var(--text-main) !important;
}

/* ---------------------------------------------------
   6. BEYAZ KALAN TÜM İNATÇI YAZILARI SİYAH YAP (CATCH-ALL)
--------------------------------------------------- */
div[style*="color:white"], div[style*="color: white"],
div[style*="color:#fff"], div[style*="color:#ccc"],
div[style*="color:#aaa"], div[style*="color:#ddd"],
span[style*="color:white"], span[style*="color: white"],
span[style*="color:#fff"], span[style*="color:#ccc"],
span[style*="color:#aaa"], span[style*="color:#ddd"] {
    color: var(--text-main) !important;
}

/* YUKARIDAKİ KURAL BUTONLARI BOZMASIN DİYE KORUMA */
button, .btn, .swal2-confirm { color: white !important; }

/* ====================================================================
   TEMA DÖNÜŞTÜRÜCÜ V7 - GİZLİLİK FİXİ (SANATÇI KARTLARINI TEMİZLEME)
   ==================================================================== */

/* JS tarafından "gizlenmesi" emredilen kartların inatla görünmesini engeller */
.dash-card[style*="display: none"],
.dash-card[style*="display:none"] {
    display: none !important;
}

/* ====================================================================
   TEMA DÖNÜŞTÜRÜCÜ V8 - PENCERELERİ (MODAL) EN ÖNE ALMA FİXİ
   ==================================================================== */

/* Tüm açılır pencereleri (modalları) sayfanın en üst katmanına taşır */
.modal {
    z-index: 100000 !important; 
}

/* Randevu Ekleme ve Düzenleme formuna VIP öncelik verir (Her şeyin üstüne çıkar) */
#booking-form-modal {
    z-index: 100005 !important; 
}

/* ---------------------------------------------------
   7. BİLDİRİM BAŞLIKLARI DÜZELTMESİ (Zorla Siyah/Koyu Gri Yap)
--------------------------------------------------- */
#dash-notif-preview strong,
#all-notifications-list strong {
    color: var(--text-main) !important; /* Bildirim başlıklarını her zaman siyah/koyu gri yapar */
}

/* ---------------------------------------------------
   8. TÜM DASHBOARD KART BAŞLIKLARINI KESİN EŞİTLEME
   (Randevularım, Bildirimler, Finans, Müşteriler vb.)
--------------------------------------------------- */
.dash-card h1, 
.dash-card h2, 
.dash-card h3, 
.dash-card h4, 
.dash-card h5, 
.dash-card h6,
.dash-card .card-title,
.dash-card > div:first-child > span:first-child,
.dash-card > div:first-child > div:first-child,
.dash-card > div:first-child > strong {
    color: var(--primary) !important; /* İmza rengimiz: Bordo */
    font-family: 'Pathway Extreme', sans-serif !important;
    font-size: 1.2rem !important; /* Hepsini aynı ideal puntoya sabitler */
    font-weight: 700 !important; /* Hepsini ekstra kalın (Bold) yapar */
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    letter-spacing: 0.3px !important; /* Harfler arası kurumsal boşluk */
}

/* ====================================================================
   SETUP DURUMU (MÜSAİTLİK KUTUSU) AÇIK TEMA DÜZELTMESİ
   ==================================================================== */
#setup-availability-box,
#admin-setup-availability-box {
    background-color: var(--bg-box) !important; /* Tam beyaz zemin */
    border: 1px solid var(--border-color) !important; /* Etrafına ince gri çizgi */
    border-left: 4px solid var(--primary) !important; /* Soluna kalın Bordo vurgu çizgisi */
}

/* İçindeki Başlığı Bordo Yap */
#setup-availability-box small,
#admin-setup-availability-box strong {
    color: var(--primary) !important; 
    font-size: 0.95em !important;
}

/* "Kayıt yok" veya diğer uyarı metinlerini düzelt */
#setup-slots-list span,
#admin-setup-slots-list span {
    color: var(--text-main) !important; /* Yazıları net okunur siyah/koyu gri yap */
    font-weight: 500 !important;
}

/* ====================================================================
   SETUP DURUMU: "DOLU" VE "BEKLEYEN" ROZETLERİ DÜZELTMESİ
   ==================================================================== */
#setup-slots-list > div,
#admin-setup-slots-list > div {
    background-color: var(--bg-main) !important; /* Temanın soft açık gri arka planı */
    color: var(--text-main) !important; /* Yazıları net koyu gri/siyah yap */
    font-weight: 600 !important; /* Yazıyı biraz kalınlaştırarak belirginleştir */
}

/* Alt kısımdaki "30dk boşluk olmalıdır" yazısını da temaya uygun soft gri yap */
#setup-slots-list small,
#admin-setup-slots-list small {
    color: var(--text-muted) !important; 
}

/* ====================================================================
   KART SIRALAMASI VE KUSURSUZ GRID DÜZENİ (ÇAKIŞMA FİXİ)
   ==================================================================== */

/* 1. Ana Taşıyıcı: Kusursuz Grid Sistemi */
#main-dashboard {
    display: grid !important;
    /* minmax(0, 1fr) ayarı, içindeki kartların grid sınırlarını patlatmasını %100 engeller */
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important; 
    gap: 20px !important;
    align-items: stretch !important; /* Tüm kartların boyunu en uzuna göre eşitler */
    width: 100% !important;
}

/* 2. Kartların Standart Boyutları ve Korumaları */
#main-dashboard .dash-card {
    width: 100% !important;
    min-width: 0 !important; /* HTML içindeki inatçı min-width kodlarını ezer */
    height: 100% !important; /* Grid hücresini tam kaplar, yanındakiyle eşit boyda olur */
    min-height: 180px !important; /* Kartların çok basık olmasını engeller */
    margin: 0 !important;
    flex: unset !important; /* Eski flex yapısından kalan artıkları temizler */
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important; /* İçeriğin kart dışına taşmasını kesin olarak önler */
    position: relative !important;
    z-index: 1 !important;
}

/* 3. İçerik Çoksa Kartı Büyütmek Yerine İçeride Şık Bir Kaydırma (Scroll) Çıksın */
#main-dashboard .dash-card > div:nth-child(2) {
    flex: 1;
    overflow-y: auto;
    padding-right: 5px; /* Scrollbar içeriğe değmesin diye pay */
}
#main-dashboard .dash-card > div:nth-child(2)::-webkit-scrollbar { width: 4px; }
#main-dashboard .dash-card > div:nth-child(2)::-webkit-scrollbar-track { background: transparent; }
#main-dashboard .dash-card > div:nth-child(2)::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }

/* -------------------------------------------
   A. ASİSTAN WEB SIRALAMASI
------------------------------------------- */
body.role-asst #card-next-appt { order: 1; }  
body.role-asst #card-notifs { order: 2; }     
body.role-asst #card-clients { order: 3; }    
body.role-asst #card-tasks { order: 4; }      
body.role-asst #card-cleaning { order: 5; }   
body.role-asst #card-stock { order: 6; }      
body.role-asst #card-finance { order: 7; }    
body.role-asst #card-perf { order: 8; }       
body.role-asst #card-weekly-status { order: 99; } 

/* -------------------------------------------
   B. SANATÇI WEB SIRALAMASI
------------------------------------------- */
body.role-artist #card-next-appt { order: 1; } 
body.role-artist #card-notifs { order: 2; }    
body.role-artist #card-clients { order: 3; }   
body.role-artist #card-finance { order: 4; }   
body.role-artist #card-perf { order: 5; }      

/* ====================================================================
   TABLET VE MOBİL EKRANLAR İÇİN DÜZEN
   ==================================================================== */
   
/* Tablet Düzeni (769px - 1024px Arası) - 3 Sütun Sıkışmasın Diye 2 Sütuna Düşer */
@media screen and (max-width: 1024px) and (min-width: 769px) {
    #main-dashboard {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important; 
    }
}

/* Mobil Düzen (768px Altı) - Tamamen Alt Alta İner */
@media screen and (max-width: 768px) {
    #main-dashboard {
        grid-template-columns: minmax(0, 1fr) !important; /* Mobilde Tek Sütun */
        gap: 15px !important;
    }
    #main-dashboard .dash-card {
        min-height: auto !important; /* Mobilde içerik kadar uzasın */
    }
    
    /* C. ASİSTAN MOBİL SIRALAMASI */
    body.role-asst #card-next-appt { order: 1; }
    body.role-asst #card-notifs { order: 2; }
    body.role-asst #card-tasks { order: 3; }
    body.role-asst #card-cleaning { order: 4; }
    body.role-asst #card-stock { order: 5; }
    body.role-asst #card-clients { order: 6; }
    body.role-asst #card-finance { order: 7; }
    body.role-asst #card-perf { order: 8; }
    body.role-asst #card-weekly-status { order: 99; }

    /* D. SANATÇI MOBİL SIRALAMASI */
    body.role-artist #card-next-appt { order: 1; }
    body.role-artist #card-notifs { order: 2; }
    body.role-artist #card-finance { order: 3; }
    body.role-artist #card-clients { order: 4; }
    body.role-artist #card-perf { order: 5; }
}

/* ====================================================================
   ROL BAZLI GİZLİLİK KORUMASI (SANATÇI PANELİ DÜZELTMESİ)
   ==================================================================== */
body.role-artist #main-dashboard #card-tasks,
body.role-artist #main-dashboard #card-cleaning,
body.role-artist #main-dashboard #card-stock,
body.role-artist #main-dashboard #card-weekly-status {
    display: none !important;
}

/* ====================================================================
   FİNANSAL DURUM MODALI: MOBİL 2x2 KUTUCUK DÜZENİ
   ==================================================================== */
.finance-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

@media screen and (max-width: 768px) {
    .finance-metrics-grid {
        grid-template-columns: repeat(2, 1fr); /* Mobilde 2 sütun (2x2) yapar */
    }
}

/* ====================================================================
   SWAL (POP-UP) KAPATMA BUTONU GÖRÜNÜRLÜK FİXİ
   ==================================================================== */
.swal2-close {
    color: var(--text-main) !important; /* Çarpı işaretini koyu gri yap */
    font-size: 2em !important;          /* Biraz daha belirginleştir */
    transition: color 0.2s ease !important;
}

.swal2-close:hover {
    color: var(--primary) !important;   /* Üzerine gelince Bordo olsun */
    background: transparent !important; /* Arka planı şeffaf kalsın */
}

/* Pencere içindeki yazıları zorla koyu gri yap (Gözden kaçan beyazlıklar için ekstra koruma) */
.swal2-html-container {
    color: var(--text-main) !important;
}

/* ====================================================================
   YENİ RANDEVU FORMU: MÜŞTERİ NOTU KUTUSU DÜZELTMESİ
   ==================================================================== */
#booking-client-info-display {
    background-color: #fdedec !important; /* Soft bordo/pembe pastel zemin */
    border: 1px solid #fadbd8 !important; /* İnce soft çerçeve */
    border-left: 4px solid var(--primary) !important; /* Soluna kurumsal bordo çizgi */
    padding: 12px 15px !important;
    margin-bottom: 15px !important;
    border-radius: 8px !important;
    color: var(--text-main) !important; /* Ana metni koyu gri yap */
}

/* "Müşteri Notu:" başlık yazısını bordo yap */
#booking-client-info-display strong {
    color: var(--primary) !important;
    font-weight: 700 !important;
    display: inline-block;
    margin-bottom: 4px;
}

/* İçerideki not metnini okunabilir yap */
#booking-client-note-text {
    color: var(--text-main) !important;
    font-style: italic;
    font-size: 0.95em;
    display: block;
}

/* Müşteri Detay Modalındaki Gereksiz Boşlukları Temizle */
#client-detail-modal .modal-content > div {
    margin-top: 10px !important;
    margin-bottom: 0px !important;
}

#detail-history-list {
    margin-top: 10px !important;
    padding-bottom: 0px !important;
}

#client-detail-modal h4 {
    margin-top: 20px !important;
    margin-bottom: 5px !important;
}

/* ====================================================================
   YENİ MÜŞTERİ EKLEME FORMU - ÖNCELİK VE TEMA DÜZELTMESİ
   ==================================================================== */

/* Formun Yeni Kiralama Modalının Önünde Açılmasını Sağlar */
#add-client-form {
    width: 90% !important;
    max-width: 420px !important;
    max-height: 90vh; /* Ekran boyunu aşmasın */
    overflow-y: auto; /* İçerik çoksa kendi içinde kaysın */
    background: var(--bg-card) !important;
    border-radius: 15px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2) !important;
    margin: auto !important; /* Ortalamayı garanti et */
}

/* Form açıldığında arka planı bir miktar karartmak için (Opsiyonel) */
#add-client-form::before {
    content: "";
    position: fixed;
    top: -100vh; left: -100vw;
    width: 300vw; height: 300vh;
    background: rgba(0,0,0,0.4);
    z-index: -1;
}

/* Inputların Tema Uyumu */
#add-client-form input, 
#add-client-form textarea {
    background: var(--bg-box) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-color) !important;
}

#add-client-form label {
    color: var(--text-muted) !important;
    font-weight: 600 !important;
}

#add-client-modal {
    display: none; /* Başlangıçta gizli */
    position: fixed !important;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.5); /* Arkayı hafif karart */
    z-index: 200005 !important;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Dışarı taşmaları engelle */
}


/* ====================================================================
   TEMA DÖNÜŞTÜRÜCÜ V9 - ADMİN PANELİ KESİN AÇIK TEMA SİHİRBAZI
   ==================================================================== */

/* 1. İnatçı Siyah/Koyu Gri Arka Planları Beyaz veya Açık Griye Çevir */
[style*="background:#111"], [style*="background: #111"],
[style*="background:#151515"], [style*="background: #151515"],
[style*="background:#181818"], [style*="background: #181818"],
[style*="background:#1a1a1a"], [style*="background: #1a1a1a"],
[style*="background:#1e1e1e"], [style*="background: #1e1e1e"],
[style*="background:#222"], [style*="background: #222"],
[style*="background:#252525"], [style*="background: #252525"],
[style*="background:#2a2a2a"], [style*="background: #2a2a2a"],
[style*="background:#333"], [style*="background: #333"] {
    background-color: var(--bg-box) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}

/* Koyu Çerçeveleri (Borders) Açık Gri Yap */
[style*="border:1px solid #222"], [style*="border: 1px solid #222"],
[style*="border:1px solid #333"], [style*="border: 1px solid #333"],
[style*="border:1px solid #444"], [style*="border: 1px solid #444"],
[style*="border:1px solid #555"], [style*="border: 1px solid #555"],
[style*="border-bottom:1px solid #333"], [style*="border-bottom: 1px solid #333"],
[style*="border-bottom:1px solid #444"], [style*="border-bottom: 1px solid #444"],
[style*="border-top:1px solid #333"], [style*="border-top: 1px solid #333"],
[style*="border-top:1px solid #444"], [style*="border-top: 1px solid #444"] {
    border-color: var(--border-color) !important;
}

/* 2. Admin Paneli Metin Renklerini Düzelt (Koyu grileri netleştir) */
[style*="color:#888"], [style*="color: #888"],
[style*="color:#666"], [style*="color: #666"],
[style*="color:#555"], [style*="color: #555"] {
    color: var(--text-muted) !important;
}

/* 3. Eski Neon Renkleri Soft Kurumsal Renklere Dönüştür (YAZILAR) */
[style*="color:#00d4ff"], [style*="color: #00d4ff"] { color: var(--primary) !important; }      /* Neon Mavi -> Bordo */
[style*="color:#00ff40"], [style*="color: #00ff40"] { color: var(--success) !important; }      /* Neon Yeşil -> Soft Yeşil */
[style*="color:#ff4500"], [style*="color: #ff4500"] { color: var(--danger) !important; }       /* Neon Turuncu -> Soft Kırmızı */
[style*="color:#ffb700"], [style*="color: #ffb700"] { color: var(--warning) !important; }      /* Neon Sarı -> Soft Sarı */
[style*="color:#ffd700"], [style*="color: #ffd700"] { color: var(--warning) !important; }      /* Altın Sarısı -> Soft Sarı */
[style*="color:#d400ff"], [style*="color: #d400ff"] { color: var(--primary) !important; }      /* Neon Mor -> Bordo */

/* 4. Eski Neon Renkleri Soft Kurumsal Renklere Dönüştür (ARKA PLAN VE BUTONLAR) */
[style*="background:#00d4ff"], [style*="background: #00d4ff"] { background-color: var(--primary) !important; color: white !important; border: none !important; }
[style*="background:#00ff40"], [style*="background: #00ff40"] { background-color: var(--success) !important; color: white !important; border: none !important; }
[style*="background:#ff4500"], [style*="background: #ff4500"] { background-color: var(--danger) !important; color: white !important; border: none !important; }
[style*="background:#ffb700"], [style*="background: #ffb700"] { background-color: var(--warning) !important; color: white !important; border: none !important; }
[style*="background:#ffd700"], [style*="background: #ffd700"] { background-color: var(--warning) !important; color: white !important; border: none !important; }
[style*="background:#d400ff"], [style*="background: #d400ff"] { background-color: var(--primary) !important; color: white !important; border: none !important; }

/* Dashboard Kart Çerçevelerini Temizle */
[style*="border-color: #00ff40"], [style*="border-color:#00ff40"],
[style*="border-color: #ff4500"], [style*="border-color:#ff4500"],
[style*="border-color: #ffb700"], [style*="border-color:#ffb700"],
[style*="border-color: #ffd700"], [style*="border-color:#ffd700"],
[style*="border-color: #00d4ff"], [style*="border-color:#00d4ff"],
[style*="border-color: #d400ff"], [style*="border-color:#d400ff"] {
    border-color: var(--border-color) !important;
}

/* 5. Girdi Alanları (Input, Select, Textarea) - Siyah ve Gri Kalanları Kurtar */
input, select, textarea, .swal2-input, .swal2-textarea {
    background-color: var(--bg-box) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-color) !important;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--primary) !important;
}

/* 6. Buton İstisnaları (İptal Butonları vb. koyu gri kalanları düzelt) */
button[style*="background:#333"], button[style*="background: #333"],
button[style*="background:#444"], button[style*="background: #444"] {
    background-color: var(--bg-main) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-color) !important;
}

/* 7. Genel Takvim ve Geniş Tablolar */
.full-width-card {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
}
#general-calendar-grid > div {
    background-color: var(--bg-box) !important;
    border: 1px solid var(--border-color) !important;
}
#general-calendar-grid > div > div:first-child {
    color: var(--text-main) !important;
}

/* 8. Admin Özel Başlıklar (YÖNETİCİ PANELİ yazısı) */
header h1 {
    color: var(--primary) !important;
    font-family: 'Pathway Extreme', sans-serif !important;
    font-weight: 700 !important;
}

/* ====================================================================
   ADMİN PANELİ KESİN AÇIK TEMA DÜZELTMELERİ (TAM KAPSAMLI)
   ==================================================================== */

/* 1. Tüm Liste Kutuları (Personel, İstekler, Duyurular, Müşteriler) */
#modal-user-list > div,
#modal-pending-list > div,
#announce-history-list > div,
#admin-client-list > div,
#ops-live-list > div,
#matrix-assigned-list > div,
#user-history-list > div,
#admin-notif-list > div,
#health-check-list > div,
#debt-list-container > div,
#credit-list-container > div,
#client-detail-modal .modal-content > div[style*="background"] {
    background-color: var(--bg-box) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03) !important;
    color: var(--text-main) !important;
    transition: background 0.2s !important;
}

/* Kartların üzerine gelince (Hover) hafif grileşme efekti */
#modal-user-list > div:hover,
#admin-client-list > div:hover,
#ops-live-list > div:hover {
    background-color: #f1f1f1 !important;
}

/* 2. Kart İçindeki Tüm Yazıları Okunabilir (Koyu) Yap */
#modal-user-list > div *,
#modal-pending-list > div *,
#announce-history-list > div *,
#admin-client-list > div *,
#ops-live-list > div *,
#admin-notif-list > div *,
#client-detail-modal .modal-content > div *,
#check-daily-schedule *,
#check-request-info * {
    color: var(--text-main) !important;
}

/* Renkli İkon ve Özel Rozetleri Koru */
#modal-user-list > div button,
#modal-pending-list > div button,
#ops-live-list span[style*="background"],
#announce-history-list span[style*="background"],
#admin-client-list span[style*="background"] {
    color: white !important; 
    border-color: var(--border-color) !important;
}
#admin-client-list span[style*="background"] { background-color: var(--primary) !important; color: white !important; }
#ops-live-list span[style*="color:#f39c12"] { color: #d35400 !important; border-color: #d35400 !important; }
#ops-live-list span[style*="color:#4ba862"] { color: #2e7d32 !important; border-color: #2e7d32 !important; }

/* 3. FİNANSAL YÖNETİM (P&L ve Tablolar) */
#pl-header-row th {
    background-color: var(--bg-main) !important;
    color: var(--primary) !important;
    border: 1px solid var(--border-color) !important;
    font-family: 'Pathway Extreme', sans-serif !important;
}
#pl-body tr, #pl-body td {
    background-color: var(--bg-box) !important;
    color: var(--text-main) !important;
    border-bottom: 1px dashed var(--border-color) !important;
}
#pl-body tr[style*="background:rgba"] td {
    background-color: var(--bg-card) !important;
    font-weight: bold !important;
}
.finance-tab > div[style*="display:flex"] > div[style*="background:#22"] {
    background-color: var(--bg-box) !important;
    border: 1px solid var(--border-color) !important;
}
.finance-tab b { color: var(--primary) !important; }
.finance-tab small { color: var(--text-muted) !important; }

/* 4. OPERASYON MERKEZİ ÜST KUTULARI */
#ops-tab-live > div > div:nth-child(2), /* Hızlı Shift Ekle */
#ops-tab-live > div > div:first-child > div:first-child /* Filtre Kutusu */ {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
}
#ops-tab-live select, #ops-tab-live input, #admin-shift-form label, #ops-tab-live span {
    background-color: var(--bg-box) !important;
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
}

/* 5. HAFTALIK SETUP TABLOSU (Admin Ekranındaki Siyah Tablo) */
.weekly-table-wrapper {
    background-color: transparent !important;
    border: none !important;
}
.styled-table th {
    background-color: var(--bg-main) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-color) !important;
    font-family: 'Pathway Extreme', sans-serif !important;
}
.styled-table td {
    background-color: var(--bg-box) !important;
    border: 1px solid var(--border-color) !important;
}
.styled-table td:first-child, .styled-table th:first-child {
    background-color: var(--bg-card) !important;
    color: var(--primary) !important;
    border-right: 2px solid var(--border-color) !important;
}
.action-btn.btn-close {
    background-color: var(--bg-main) !important;
    color: var(--danger) !important;
    border: 1px solid var(--border-color) !important;
    font-weight: bold !important;
}
.action-btn.btn-open {
    background-color: #eafaf1 !important;
    color: var(--success) !important;
    border: 1px solid var(--border-color) !important;
    font-weight: bold !important;
}

/* ====================================================================
   MODERN SEKME (TAB) TASARIMI - OPERASYON MERKEZİ
   ==================================================================== */

/* Sekmeleri Saran Kutu (Ekrana sığmadığında alt satıra geçmesini sağlar) */
div:has(> .ops-tab-btn) {
    flex-wrap: wrap !important;
    margin-bottom: 20px !important;
    gap: 8px !important;
}

/* Standart (Pasif) Sekme Görünümü */
.ops-tab-btn {
    flex: 1;
    min-width: 120px; /* Mobilde çok sıkışmalarını engeller */
    background-color: var(--bg-main) !important; /* Soft Gri Zemin */
    color: var(--text-muted) !important; /* Koyu Gri Yazı */
    border: 1px solid var(--border-color) !important;
    padding: 10px 5px !important;
    font-family: 'Pathway Extreme', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    border-radius: 8px !important; /* Modern Yuvarlak Hatlar */
    box-shadow: none !important;
    text-transform: none !important;
    transition: all 0.3s ease !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* Fareyle Üzerine Gelindiğinde (Hover) */
.ops-tab-btn:hover {
    color: var(--primary) !important;
    background-color: var(--bg-box) !important; /* Beyaza parlar */
    border-color: var(--primary) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05) !important;
}

/* Aktif (Seçili) Sekme Görünümü */
.ops-tab-btn.active {
    background-color: var(--primary) !important; /* Kurumsal Bordo Zemin */
    color: #ffffff !important; /* Tam Beyaz Yazı */
    border-color: var(--primary) !important;
    font-weight: 700 !important;
    box-shadow: 0 5px 15px rgba(150, 11, 0, 0.25) !important; /* Bordo Parlama Efekti */
    transform: translateY(-2px) !important;
}

/* ====================================================================
   ADMİN MODALLARI İÇİN MOBİL UYUMLULUK (RESPONSIVE) SİHİRBAZI
   ==================================================================== */

@media screen and (max-width: 768px) {
    /* 1. Modal İç Boşlukları ve Boyutları Optimize Et */
    .modal-content {
        width: 95% !important;
        padding: 15px !important; /* Mobilde devasa boşlukları kıs */
        border-radius: 12px !important;
    }

    /* 2. Form İçindeki Yan Yana Inputları Alt Alta İndir */
    /* (Örn: Başlangıç/Bitiş saatleri, Tutar/Depozito kutuları) */
    .modal-content .input-group[style*="display:flex"],
    .modal-content .input-group[style*="display: flex"],
    .modal-content form div[style*="display:flex"],
    .modal-content form div[style*="display: flex"] {
        flex-direction: column !important;
        gap: 10px !important;
    }

    /* 3. İstatistik ve Finans Kutularını Alt Alta Diz */
    /* (Finansal Genel Bakış, Personel Geçmişi kutucukları vb.) */
    .modal-content div[style*="display:flex; gap:10px; margin-bottom:20px;"],
    .modal-content div[style*="display: flex; gap: 10px; margin-bottom: 20px;"],
    .modal-content div[style*="display:flex; gap:10px; margin-bottom:15px;"],
    .modal-content div[style*="display: flex; gap: 10px; margin-bottom: 15px;"],
    .finance-tab > div[style*="display:flex; gap:20px;"],
    #task-stats-wrapper {
        flex-direction: column !important;
    }

    /* Kutuların kendisini %100 genişliğe yay */
    .fin-metric-box, 
    .modal-content div[style*="flex:1;"] {
        width: 100% !important;
        box-sizing: border-box !important;
        margin-bottom: 5px !important;
    }

    /* 4. Operasyon Merkezi (Team Modal) Mobil Düzeni */
    #team-modal .modal-content { padding: 0 !important; }
    #team-modal .ops-tab-btn {
        flex: 1 1 100% !important; /* Sekmeleri mobilde alt alta al */
    }
    
    /* Operasyon Merkezi: Sol(Liste) ve Sağ(Hızlı Ekle) Panellerini Alt Alta Al */
    #ops-tab-live > div[style*="display:flex"] {
        flex-direction: column !important;
    }
    #ops-tab-live > div > div {
        min-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 5. Butonları Ekrana Tam Yay */
    /* Modal içindeki Onayla, Reddet, İptal, Kaydet gibi yan yana butonlar */
    .modal-content div[style*="display:flex; gap:10px; margin-top:20px;"],
    .modal-content div[style*="display: flex; gap: 10px; margin-top: 20px;"],
    .modal-content div[style*="display:flex; justify-content:end; gap:10px;"] {
        flex-direction: column !important;
        width: 100% !important;
    }
    .modal-content button, 
    .modal-content .btn {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 8px !important;
    }

    /* 6. Finans ve Takvim Tablolarında Taşmayı Önle (Yatay Kaydırma Ekle) */
/* SADECE kapsayıcı div'e (table-responsive) kaydırma veriyoruz, tablonun yapısını bozmuyoruz! */
.table-responsive {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch; 
}

/* Tabloların ve gövdelerinin (tbody) orijinal tablo dizilimini koruması şarttır! */
.styled-table, #pl-table {
    display: table !important;
    width: 100% !important;
}
#shift-matrix-body, #weekly-matrix-body, #monthly-matrix-body {
    display: table-row-group !important;
}
    
    /* 7. Başlık ve (X) Kapatma Butonu Düzenini Koru */
    /* Başlıkların alt alta inmesini engeller, yan yana tutar */
    .modal-content > div[style*="display:flex; justify-content:space-between"] {
        flex-direction: row !important;
        align-items: center !important;
    }

    /* 8. Manuel Rezervasyon Modalı (Admin Booking) Düzeltmesi */
    #admin-booking-form div[style*="display:flex; gap:10px; margin-bottom:15px;"],
    #admin-booking-form div[style*="display:flex; gap:10px; margin-bottom:20px;"] {
        flex-direction: column !important;
    }
    /* =========================================================
       KULLANICI LİSTESİ MOBİL DÜZELTME (Yan Yana Butonlar)
       ========================================================= */
    .user-card-item {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    
    .user-card-actions {
        flex-direction: row !important; /* Butonları yan yana dizer */
        width: 100% !important;
        gap: 6px !important; /* Butonlar arası boşluk */
        justify-content: space-between !important;
    }
    
    .user-card-actions button {
        flex: 1 !important; /* Ekrana eşit genişlikte yayılmalarını sağlar */
        width: auto !important;
        margin: 0 !important;
        padding: 8px 4px !important; /* Ekrana sığmaları için iç boşluk daraltıldı */
        font-size: 0.75rem !important; /* Yazı boyutu mobilde taşmasın diye küçültüldü */
        white-space: nowrap !important; /* Metnin alt satıra kırılmasını engeller */
    }
    /* Admin Paneli Header: Mobilde Yedekle Butonunu Gizle */
    #btn-admin-backup {
        display: none !important;
    }
    /* =========================================================
       OPERASYON MERKEZİ MOBİL KUSURSUZLUK (Responsive Fixes)
       ========================================================= */
       
    /* 1. Görevler Tabı Sıralaması (Flex Order) */
    #ops-live-wrapper {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }
    #ops-quick-task-wrap {
        order: 1 !important; /* Hızlı Görev En Üstte */
    }
    #ops-shift-wrap {
        order: 2 !important; /* Shift Ekle Ortada */
        width: 100% !important;
        box-sizing: border-box !important;
    }
    #ops-main-content-wrap {
        order: 3 !important; /* Filtre ve Liste En Altta */
        width: 100% !important;
    }

    /* 2. Temizlik Tabı Düzeni */
    #cleaning-top-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 15px !important;
    }
    #cleaning-warning-area {
        margin-right: 0 !important;
    }
    #btn-add-cleaning-def {
        width: 100% !important;
    }

    /* 3. Stok Takip Düzeni ve Tablo Taşması */
    #stock-top-bar {
        flex-direction: column !important;
        justify-content: center !important;
    }
    #stock-header-left {
        width: 100% !important;
        margin-bottom: 10px !important;
    }
    #stock-header-right {
        width: 100% !important;
        justify-content: space-between !important;
    }
    #stock-header-right button {
        flex: 1 !important;
    }
    /* Stok tablolarını kaydırılabilir yap */
    #stock-container .styled-table {
        min-width: 550px !important; 
    }
    #stock-container > div > div:nth-child(2) {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* 4. Shift ve Temizlik Tablolarında Sol Sütunu Sabitle (Sticky) */
    #shift-matrix-header th:first-child, #shift-matrix-body td:first-child,
    #weekly-matrix-header th:first-child, #weekly-matrix-body td:first-child,
    #monthly-matrix-header th:first-child, #monthly-matrix-body td:first-child {
        position: sticky !important;
        left: 0 !important;
        z-index: 10 !important;
        background: var(--bg-card) !important;
        border-right: 2px solid var(--border-color) !important;
        box-shadow: 2px 0 5px rgba(0,0,0,0.05) !important;
    }
    #shift-matrix-header th, #shift-matrix-body td {
        min-width: 80px; 
        text-align: center;
    }

    /* 5. Operasyon Merkezi İçeriğinin Scroll Mantığı (Sekmeleri Sabitlikten Kurtar) */
    #team-modal-content {
        display: block !important;
        height: auto !important;
        overflow-y: visible !important;
    }
    #team-modal-content > div:nth-child(2) {
        overflow-y: visible !important;
    }
    /* Operasyon Merkezi: Üst sekmelerin mobilde ekrana yapışmasını (sticky) iptal et */
    #team-modal-content > div:first-child {
        position: relative !important; 
        z-index: 1 !important;
    }
    /* 6. Operasyon Merkezi: Görevler Filtre Alanı Mobil Düzeni */
    #ops-filters-wrap {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding: 12px !important;
    }
    #ops-filters-wrap > div {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    #ops-date-filter-box {
        flex-direction: row !important;
        justify-content: space-between !important;
        padding: 8px !important;
    }
    /* Mobilde iki tarih yan yana tam sığsın */
    #ops-date-filter-box input[type="date"] {
        width: 45% !important; 
        min-width: 0 !important;
        padding: 5px !important;
        font-size: 0.8rem !important;
    }

    /* =========================================================
       OPERASYON MERKEZİ SHIFT TABLOSU KESİN HİZALAMA (GÜNCELLENDİ)
       ========================================================= */
       
    #ops-tab-shifts .table-responsive {
        border-radius: 8px !important;
        border: 1px solid var(--border-color) !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        background: var(--bg-box) !important;
    }
    
    /* TABLOYU ZORLA SABİTLE */
    #ops-tab-shifts .styled-table {
        table-layout: fixed !important; 
        width: max-content !important; 
        min-width: 100% !important;
        border-collapse: collapse !important; 
    }

    #ops-tab-shifts .styled-table th, 
    #ops-tab-shifts .styled-table td {
        box-sizing: border-box !important; /* KRİTİK: Paddingleri genişliğe dahil et */
        border-right: 1px solid var(--border-color) !important; 
        border-bottom: 1px solid var(--border-color) !important; 
        padding: 6px !important; /* Her hücrede eşit boşluk */
    }
    
    /* ASIL ÇÖZÜM: Gün Sütunlarının (Hem Başlık Hem Kutu) Genişliğini Eşitle */
    #ops-tab-shifts .styled-table th:not(:first-child), 
    #ops-tab-shifts .styled-table td:not(:first-child) {
        width: 70px !important;
        min-width: 70px !important;
        max-width: 70px !important;
        overflow: hidden !important;
    }

    /* SOL SÜTUNU KESİN OLARAK SABİTLE (STICKY) */
    #shift-matrix-header th:first-child, 
    #shift-matrix-body td:first-child {
        position: sticky !important;
        left: 0 !important;
        background-color: var(--bg-card) !important;
        width: 110px !important; 
        min-width: 110px !important;
        max-width: 110px !important;
        border-right: 2px solid var(--border-color) !important; 
        z-index: 10 !important;
        box-shadow: 2px 0 5px rgba(0,0,0,0.05) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    #shift-matrix-header th:first-child {
        z-index: 12 !important; 
        background-color: var(--bg-main) !important;
    }

    /* =========================================================
   SHIFT TAKVİMİ: SOL SÜTUNU BETON GİBİ SABİTLE
   ========================================================= */

/* Tablo taşıyıcısının sticky özelliğini desteklemesi için */
#ops-tab-shifts .table-responsive {
    overflow-x: auto !important;
    position: relative !important;
    border: 1px solid var(--border-color) !important;
}

#ops-tab-shifts .styled-table {
    border-collapse: separate !important; /* Sticky için 'separate' daha sağlıklıdır */
    border-spacing: 0 !important;
}

/* SOL SÜTUN (ASİSTAN İSİMLERİ) */
#shift-matrix-header th:first-child, 
#shift-matrix-body td:first-child {
    position: sticky !important;
    left: 0 !important;
    background-color: #f9f9f9 !important; /* Arka planı düz renk yap (Saydam olmamalı) */
    z-index: 10 !important;
    border-right: 2px solid var(--border-color) !important;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1) !important; /* Sağa doğru hafif gölge */
    min-width: 120px !important;
    max-width: 120px !important;
}

/* SOL ÜST KÖŞE (ASİSTANLAR BAŞLIĞI) */
/* Diğer tüm başlıklardan ve hücrelerden daha üstte durmalı */
#shift-matrix-header th:first-child {
    z-index: 20 !important;
    background-color: var(--bg-main) !important;
}
}

/* =========================================================
   SHIFT TAKVİMİ: SOL SÜTUNU KESİN SABİTLE (STICKY FIX)
   ========================================================= */

/* Sticky özelliğinin tablolarda bozulmaması için collapse yerine separate kullanıyoruz */
#ops-tab-shifts .styled-table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

/* SOL SÜTUN (ASİSTAN İSİMLERİ) - Ekrana Kilitler */
#shift-matrix-body td:first-child {
    position: sticky !important;
    left: 0 !important;
    background-color: var(--bg-box) !important; /* Şeffaflığı önler, altından geçenleri gizler */
    z-index: 10 !important;
    border-right: 2px solid var(--border-color) !important;
    box-shadow: 3px 0 6px rgba(0,0,0,0.05) !important; /* Kaydırıldığını hissettiren sağ gölge */
}

/* SOL ÜST KÖŞE (ASİSTANLAR BAŞLIĞI) - En üst katmanda kalmalı */
#shift-matrix-header th:first-child {
    position: sticky !important;
    left: 0 !important;
    background-color: var(--bg-main) !important;
    z-index: 15 !important; /* Diğer her şeyin üstünde olmalı */
    border-right: 2px solid var(--border-color) !important;
    box-shadow: 3px 0 6px rgba(0,0,0,0.05) !important;
}

/* =========================================================
   OPERASYON MERKEZİ - TEMİZLİK TABLOSU KESİN HİZALAMA
   ========================================================= */

#ops-tab-cleaning .table-responsive {
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
}

/* Tabloyu sabitle ve daralmayı (sıkışmayı) önle */
#ops-tab-cleaning .styled-table {
    table-layout: fixed !important;
    width: max-content !important; 
    min-width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

/* Tüm hücrelerin sınırlarını belirle */
#ops-tab-cleaning .styled-table th,
#ops-tab-cleaning .styled-table td {
    box-sizing: border-box !important;
    padding: 6px !important;
    border-right: 1px solid var(--border-color) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

/* 1. SÜTUN HARİÇ TÜM HAFTA/AY SÜTUNLARINI EŞİTLE */
#ops-tab-cleaning .styled-table th:not(:first-child),
#ops-tab-cleaning .styled-table td:not(:first-child) {
    width: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;
    text-align: center !important;
}

/* SADECE İLK SÜTUNU (GÖREV ADI) GENİŞ TUT VE SOLA SABİTLE (STICKY) */
#weekly-matrix-header th:first-child, #weekly-matrix-body td:first-child,
#monthly-matrix-header th:first-child, #monthly-matrix-body td:first-child {
    position: sticky !important;
    left: 0 !important;
    width: 140px !important;
    min-width: 140px !important;
    max-width: 140px !important;
    background-color: var(--bg-card) !important;
    z-index: 10 !important;
    border-right: 2px solid var(--border-color) !important;
    white-space: normal !important; /* Çok uzun başlıklar alt satıra geçsin */
    text-align: left !important;
}

/* Başlık satırındaki ilk hücrenin Z-index'ini yükselt ki kaydırırken üstte kalsın */
#weekly-matrix-header th:first-child,
#monthly-matrix-header th:first-child {
    z-index: 12 !important;
    background-color: var(--bg-main) !important;
}

/* Açılır menülerin (Select) hücreye tam ve kusursuz oturması */
#ops-tab-cleaning .styled-table td select {
    width: 100% !important;
    margin: 0 !important;
    padding: 5px !important;
    box-sizing: border-box !important;
    border-radius: 4px !important;
}

/* =========================================================
   1. TEMİZLİK TABLOSU HİZALAMA VE KAYMA FIX
   ========================================================= */
/* Tablo parçalarının zorla "block" yapılmasını engelliyoruz */
#ops-tab-cleaning .styled-table {
    display: table !important;
    table-layout: fixed !important;
    width: max-content !important;
    min-width: 100% !important;
    border-collapse: separate !important;
}
#ops-tab-cleaning .styled-table thead { display: table-header-group !important; }
#ops-tab-cleaning .styled-table tbody,
#weekly-matrix-body, 
#monthly-matrix-body { 
    display: table-row-group !important; 
}
#ops-tab-cleaning .styled-table tr { display: table-row !important; }

/* Hücrelerin genişliklerini zorla eşitliyoruz */
#ops-tab-cleaning .styled-table th,
#ops-tab-cleaning .styled-table td {
    display: table-cell !important;
    width: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;
    padding: 6px !important;
    text-align: center !important;
    vertical-align: middle !important;
}

/* Sadece ilk sütun (Görev isimleri) geniş ve sola yapışık kalsın */
#ops-tab-cleaning .styled-table th:first-child,
#ops-tab-cleaning .styled-table td:first-child {
    width: 140px !important;
    min-width: 140px !important;
    max-width: 140px !important;
    position: sticky !important;
    left: 0 !important;
    z-index: 10 !important;
    text-align: left !important;
    background-color: var(--bg-card) !important;
}
#ops-tab-cleaning .styled-table th:first-child {
    z-index: 12 !important;
    background-color: var(--bg-main) !important;
}
#ops-tab-cleaning .styled-table td select {
    width: 100% !important;
    min-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

/* =========================================================
   2. ADMIN KONTROL MERKEZİ TAKVİM MOBİL GRID FIX
   ========================================================= */
/* Mobilde "display: block" olan takvimi zorla "grid" yapıyoruz */
@media screen and (max-width: 768px) {
    #admin-brain-calendar {
        display: grid !important; 
        grid-template-columns: repeat(7, 1fr) !important;
        gap: 3px !important;
        width: 100% !important;
        min-width: 100% !important;
        overflow-x: hidden !important; /* Yatay kaydırmayı kapat */
    }
    
    /* Gün kutucuklarının mobildeki görünümü */
    #admin-brain-calendar .calendar-day {
        min-height: 55px !important;
        padding: 2px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    /* Pzt, Sal, Çar gibi gün isimlerinin mobilde sığması için */
    #admin-brain-calendar > div:nth-child(-n+7) {
        font-size: 0.7em !important;
        padding: 4px 0 !important;
        min-height: auto !important;
        white-space: nowrap !important;
    }
}

/* =========================================================
   3. ADMIN KONTROL MERKEZİ - DİNAMİK TAKVİM (Masaüstü & Mobil)
   ========================================================= */

/* Ana Grid Yapısı: Ekrana %100 oturur, dışarı taşmaz */
.brain-calendar-grid {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 1px !important;
    background: var(--border-color) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Gün Başlıkları (Pzt, Sal, Çar vb.) */
.brain-cal-header {
    background: var(--bg-main) !important;
    color: var(--text-muted) !important;
    text-align: center !important;
    padding: 8px 2px !important;
    font-size: 0.75em !important;
    font-weight: bold !important;
}

/* Boş Gün Kutuları */
.brain-cal-empty {
    background: var(--bg-card) !important;
}

/* Her Bir Gün Kutusu */
.brain-cal-day {
    background: var(--bg-card) !important;
    min-height: 85px !important;
    padding: 4px !important;
    display: flex !important;
    flex-direction: column !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
    overflow: hidden !important;
}
.brain-cal-day:hover { background: #f1f1f1 !important; }

/* Gün Numarası */
.brain-day-num {
    text-align: right !important;
    font-size: 0.85em !important;
    margin-bottom: 4px !important;
    font-family: 'Pathway Extreme', sans-serif !important;
}

/* MASAÜSTÜ: Yazılı Görev Görünümü */
.brain-desktop-event {
    font-size: 0.7em !important;
    padding: 3px 4px !important;
    margin-top: 3px !important;
    border-radius: 4px !important;
    background: var(--bg-main) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* MOBİL: Nokta Kapsayıcısı (Varsayılan gizli) */
.brain-mobile-dots {
    display: none !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    margin-top: auto !important;
    padding-top: 5px !important;
}

/* MOBİL: Tekil Nokta */
.brain-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
}

/* ================== MOBİL UYUMLULUK KONTROLÜ ================== */
@media screen and (max-width: 768px) {
    /* Kutuları daralt ve merkezle */
    .brain-cal-day {
        min-height: 50px !important;
        padding: 2px !important;
        justify-content: space-between !important;
    }
    .brain-cal-header {
        font-size: 0.65em !important;
        padding: 4px 0 !important;
    }
    .brain-day-num {
        font-size: 0.75em !important;
        margin-bottom: 0 !important;
        align-self: center !important;
    }
    /* MASAÜSTÜ yazılarını GİZLE */
    .brain-desktop-event {
        display: none !important;
    }
    /* MOBİL noktalarını GÖSTER */
    .brain-mobile-dots {
        display: flex !important;
    }
}

/* =========================================================
   STOK TABLOSU MOBİL GİZLEME VE HİZALAMA
   ========================================================= */
@media screen and (max-width: 768px) {
    /* Mobilde "Haftalık Hız" sütunlarını tamamen yok et */
    .stock-hide-mobile {
        display: none !important;
    }
    
    /* Tablonun daha önceden atanmış "min-width: 550px" zorlamasını ez ve ekrana sığdır */
    #stock-container .styled-table {
        min-width: 100% !important;
        width: 100% !important;
        font-size: 0.75em !important; /* Mobilde yazıları bir tık küçült ki her şey rahat sığsın */
    }
    
    /* Mobilde hücre içi boşlukları (padding) daraltarak alan kazan */
    #stock-container .styled-table th,
    #stock-container .styled-table td {
        padding: 8px 4px !important;
    }
}

/* =========================================================
   STOK TABLOSU GÜNCELLEMELERİ (WEB GENİŞLİK VE İKONLAR)
   ========================================================= */

/* Web sürümünde tablonun sağda boşluk bırakmayıp %100 yayılması için */
#stock-container .styled-table {
    width: 100% !important;
    min-width: 100% !important;
    table-layout: auto !important;
}

/* Minimalist İşlem İkonları (Arka plansız, şık SVG'ler) */
.action-icon-btn {
    background: transparent !important;
    border: none !important;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    outline: none;
}

/* Kalem (Düzenle) İkonu Efekti */
.action-icon-btn.edit-btn {
    color: var(--primary) !important;
}
.action-icon-btn.edit-btn:hover {
    background: rgba(150, 11, 0, 0.08) !important;
    transform: scale(1.1);
}

/* Çöp (Sil) İkonu Efekti */
.action-icon-btn.delete-btn {
    color: var(--text-muted) !important;
}
.action-icon-btn.delete-btn:hover {
    color: var(--danger) !important;
    background: rgba(231, 76, 60, 0.1) !important;
    transform: scale(1.1);
}

/* Bilgi (Info) İkonu Efekti */
.action-icon-btn.info-btn {
    color: var(--warning) !important; /* İkon rengi */
}
.action-icon-btn.info-btn:hover {
    background: rgba(255, 151, 13, 0.1) !important;
    transform: scale(1.1);
}

/* Bilgi İkonunu SADECE Mobilde Göster */
.stock-mobile-info {
    display: none !important; /* Masaüstünde gizle */
}

@media screen and (max-width: 768px) {
    .stock-mobile-info {
        display: inline-flex !important; /* Mobilde göster */
    }
}

/* =========================================================
   FİNANSAL YÖNETİM (MODERN TABLAR VE MOBİL P&L GİZLEME)
   ========================================================= */

/* Modern Finans Sekmeleri */
.fin-tab-btn {
    flex: 1;
    min-width: 120px;
    background-color: var(--bg-box);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
    padding: 10px 5px;
    font-family: 'Pathway Extreme', sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    white-space: nowrap;
    user-select: none;
}
.fin-tab-btn:hover {
    background-color: var(--bg-card);
    color: var(--primary);
    border-color: var(--primary);
    transform: translateY(-1px);
}
.fin-tab-btn.active {
    background-color: var(--primary);
    color: #ffffff !important;
    border-color: var(--primary);
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(150, 11, 0, 0.2);
}

/* Mobilde İhtiyaç Olmayanları Gizleme */
@media screen and (max-width: 768px) {
    /* Excel Butonunu Gizle */
    .hide-on-mobile {
        display: none !important;
    }
    /* P&L Tablosunda Eski Ayları Gizle */
    .pl-mobile-hide {
        display: none !important;
    }
    /* Tab Butonlarını Mobilde 2'li Sırala */
    .fin-tab-btn {
        flex: 1 1 45%; 
        padding: 12px 5px;
        font-size: 0.8rem;
    }
}

/* =========================================================
   P&L TABLOSU MOBİL KUSURSUZ HİZALAMA VE KAYDIRMA
   ========================================================= */
#tab-overview .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    width: 100% !important;
    border-radius: 8px !important;
    border: 1px solid var(--border-color) !important;
}

#pl-table {
    display: table !important; /* Hatalı mobil block kodlarını ezer */
    width: 100% !important;
    min-width: max-content !important; /* Hücrelerin sıkışmasını KESİN olarak önler */
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

/* =========================================================
   P&L TABLOSU MOBİL AY NAVİGASYONU
   ========================================================= */

@media screen and (max-width: 768px) {
    /* Mobilde Navigasyonu Ortaya Çıkar */
    .pl-mobile-nav {
        display: flex !important;
    }
}

/* =========================================================
   P&L TABLOSU MOBİL İNCE AYARLAR (ORTALAMA)
   ========================================================= */

@media screen and (max-width: 768px) {
    /* 1. Ay Navigasyon Menüsünü (Okları) Tam Ortaya Hizala */
    #tab-overview > div:first-child {
        justify-content: center !important;
    }
    .pl-mobile-nav {
        margin: 0 auto !important;
    }

    /* 2. Kalemler Sütunu (1. Sütun) Hariç, Ay Sütununu ve Rakamları Ortala */
    #pl-table th:not(:first-child),
    #pl-table td:not(:first-child) {
        text-align: center !important;
        padding-right: 0 !important; /* Sağdaki gereksiz boşlukları engeller */
    }
}

/* =========================================================
   FİNANS - MASAÜSTÜ/MOBİL LİSTE VE BUTON GEÇİŞLERİ
   ========================================================= */

/* Varsayılan (Masaüstü): Mobil kartları gizle */
.hide-on-desktop {
    display: none !important;
}

@media screen and (max-width: 768px) {
    /* Mobilde: Masaüstü tablosunu gizle */
    .hide-on-mobile {
        display: none !important;
    }
    
    /* Mobilde: Kartları esnek (flex) olarak göster */
    .hide-on-desktop {
        display: flex !important;
    }

    /* Mobilde Borç/Alacak Ekle butonunu tam genişliğe yay */
    .btn-debt-add {
        width: 100% !important;
        padding: 12px 0 !important;
        font-size: 1em !important;
    }
}

/* =========================================================
   DUYURU MERKEZİ ROZET OKUNURLUK DÜZELTMESİ (VIP)
   ========================================================= */

.announcement-badge {
    font-size: 0.7em !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    font-weight: 800 !important; /* Yazıları ekstra kalın yap */
    display: inline-block !important;
}

/* HERKES ROZETİ */
.badge-all {
    background-color: #e3f2fd !important;
    color: #0056b3 !important; /* Koyu Mavi */
    border: 1px solid #bbdefb !important;
}

/* SANATÇILAR ROZETİ */
.badge-artist {
    background-color: #f3e5f5 !important;
    color: #6a1b9a !important; /* Koyu Mor */
    border: 1px solid #e1bee7 !important;
}

/* ASİSTANLAR ROZETİ */
.badge-assistant {
    background-color: #eafaf1 !important;
    color: #1e7e34 !important; /* Koyu Yeşil */
    border: 1px solid #d5f5e3 !important;
}

/* Bilinmeyen Durum */
.badge-unknown {
    background-color: #f0f0f0 !important;
    color: #555 !important;
    border: 1px solid #ccc !important;
}

/* =========================================================
   ADMİN PANELİ - SETUP DURUMU BUTON ŞIKLAŞTIRMA
   ========================================================= */

/* Kapat Butonu Standart Hali */
.admin-setup-close-btn {
    width: 100% !important;
    padding: 4px 2px !important;
    font-size: 0.65rem !important; /* Çok daha küçük ve zarif yazı */
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    background: #fdf2f2 !important; /* Çok hafif kırmızımsı beyaz zemin */
    color: var(--danger) !important; /* Bordo yazı */
    border: 1px solid #fadbd8 !important;
    margin-top: auto !important;
    transition: all 0.2s ease !important;
    text-transform: uppercase !important;
    min-height: 24px !important; /* Mobilde yer kaplamaması için */
}

.admin-setup-close-btn:hover {
    background: var(--danger) !important;
    color: white !important;
    border-color: var(--danger) !important;
}

/* Mobil için ekstra küçültme */
@media screen and (max-width: 768px) {
    .admin-setup-close-btn {
        font-size: 0.6rem !important;
        padding: 3px 1px !important;
        min-height: 20px !important;
    }
}

/* =========================================================
   GENEL AYLIK TAKVİM MOBİL MODERNİZASYON
   ========================================================= */

/* Ana Izgara Ayarı */
#general-calendar-grid {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 2px !important;
    background: var(--border-color) !important; /* Çizgi efekti */
    border: 1px solid var(--border-color) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Gün Hücreleri */
.gen-cal-day {
    background: var(--bg-card) !important;
    min-height: 80px !important;
    padding: 5px !important;
    display: flex !important;
    flex-direction: column !important;
    cursor: pointer !important;
    position: relative !important;
    transition: background 0.2s !important;
}
.gen-cal-day:hover { background: #f1f1f1 !important; }
.gen-cal-day.today { background: #fef9e7 !important; }
.gen-cal-day.today .day-num { color: var(--primary) !important; font-weight: 800 !important; }

.gen-cal-empty { background: var(--bg-main) !important; }

.day-num {
    font-size: 0.85em !important;
    font-weight: 600 !important;
    color: var(--text-muted) !important;
    margin-bottom: 5px !important;
}

/* Masaüstü Yazı Sarmalayıcı */
.gen-desktop-wrap { display: block !important; }

.gen-desktop-event {
    font-size: 0.7em !important;
    padding: 2px 4px !important;
    margin-bottom: 2px !important;
    border-radius: 3px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Mobil Noktalar */
.gen-mobile-dots {
    display: none !important;
    justify-content: center !important;
    gap: 3px !important;
    margin-top: auto !important;
}

/* MOBİL GÖRÜNÜM KESİN KURALLAR */
@media screen and (max-width: 768px) {
    .gen-cal-day {
        min-height: 55px !important;
        padding: 2px !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    .gen-desktop-wrap {
        display: none !important; /* Yazıları mobilde gizle */
    }
    
    .gen-mobile-dots {
        display: flex !important; /* Noktaları mobilde göster */
    }
    
    .day-num {
        margin-bottom: 2px !important;
        font-size: 0.75em !important;
    }
}

/* =========================================================
   GENEL TAKVİM & SETUP DURUMU RÖTUŞLARI
   ========================================================= */

/* Randevu Ekle Butonu - Masaüstü & Mobil */
.admin-action-btn {
    background: var(--primary) !important;
    color: white !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    cursor: pointer !important;
    text-align: center !important;
    box-shadow: 0 4px 10px rgba(150, 11, 0, 0.2) !important;
    transition: 0.2s !important;
}

/* Takvimdeki Mavi Şeritleri Kurumsal Bordo Yap */
.gen-desktop-event {
    background: var(--primary) !important;
    color: white !important;
    font-size: 0.7rem !important;
    padding: 3px 5px !important;
    border-radius: 4px !important;
    margin-bottom: 2px !important;
    font-weight: 600 !important;
}

@media screen and (max-width: 768px) {
    /* Randevu Ekle butonunu mobilde başlığın altına tam genişlik yap */
    .admin-action-btn {
        width: 100% !important;
        box-sizing: border-box !important;
        font-size: 0.95rem !important;
        padding: 12px !important;
    }
    
    /* Takvim Navigasyonunu Mobilde Hafif Genişlet */
    div[id="general-month-display"] + div {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* =========================================================
   GENEL TAKVİM & SETUP DURUMU MOBİL FİX (image_d54b24/b)
   ========================================================= */

/* Takvim Izgarasını Ekrana Zorla Sığdır */
#general-calendar-grid {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    gap: 1px !important;
    overflow: hidden !important;
}

/* Boş (Gri) Kutular için Tasarım */
.gen-cal-empty {
    background-color: #f1f1f1 !important; /* Web'deki gibi gri zemin */
    min-height: 80px !important;
    border: 1px solid var(--border-color) !important;
}

/* Randevu Ekle Butonunun image_d54b2b'deki Taşmasını Düzelt */
.full-width-card .admin-action-btn {
    display: block !important;
    margin: 10px 0 !important;
    white-space: nowrap !important;
}

@media screen and (max-width: 768px) {
    /* Mobilde hücrelerin içini temizle */
    .gen-cal-day, .gen-cal-empty {
        min-height: 50px !important;
        padding: 2px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }

    /* Noktaların image_d54b24'teki gibi kaybolmasını önle */
    .gen-mobile-dots {
        display: flex !important;
        justify-content: center !important;
        gap: 2px !important;
        margin-top: 2px !important;
    }

    .gen-mobile-dots .dot {
        width: 6px !important;
        height: 6px !important;
        background-color: var(--primary) !important; /* Noktaları bordo yap */
        border-radius: 50% !important;
    }

    /* Yazıları mobilde kesin olarak kapat */
    .gen-desktop-wrap {
        display: none !important;
    }
}

/* =========================================================
   GENEL TAKVİM & HAFTALIK DURUM - KESİN MOBİL/WEB FİX
   ========================================================= */

/* Web Sürümü: Diğer kartlarla aynı genişlikte durmasını sağlar */
.admin-calendar-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.calendar-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    width: 100%;
}

.calendar-header-row.center {
    flex-direction: column;
    gap: 12px;
}

/* Navigasyon Okları Tasarımı */
.nav-month-box {
    display: flex;
    align-items: center;
    gap: 15px;
    background: var(--bg-main);
    padding: 6px 15px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
}

.nav-arrow {
    cursor: pointer;
    color: var(--primary);
    font-weight: bold;
    font-size: 1.2em;
    padding: 0 10px;
}

/* TAKVİM IZGARASINI MOBİLDE SAYFAYA SIĞDIRMA KURALLARI */
#general-calendar-grid {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important; /* Mobilde de 7 sütun kalır */
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    border: 1px solid var(--border-color) !important;
    background-color: var(--border-color) !important;
    gap: 1px !important;
}

/* Her Bir Gün Kutusu */
.gen-cal-day, .gen-cal-empty {
    background-color: white !important;
    min-height: 80px; /* Web'de uzun */
    padding: 4px;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.gen-cal-empty {
    background-color: #f1f1f1 !important; /* Boş günler gri */
}

/* MOBİL KESİN KURALLAR */
@media screen and (max-width: 768px) {
    /* Takvim hücreleri kısalır */
    .gen-cal-day, .gen-cal-empty {
        min-height: 50px !important;
        padding: 2px !important;
        justify-content: center !important;
        align-items: center !important;
    }

    /* Yazılar mobilde sığmayacağı için gizle, noktalar kalsın */
    .gen-desktop-wrap {
        display: none !important;
    }

    .gen-mobile-dots {
        display: flex !important;
        justify-content: center !important;
        gap: 2px !important;
        margin-top: 4px !important;
    }

    .gen-mobile-dots .dot {
        width: 6px !important;
        height: 6px !important;
        background-color: var(--primary) !important;
        border-radius: 50% !important;
    }

    /* Haftalık Setup Tablosu Taşmasını Engelle */
    #weekly-setup-grid {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important; /* Yatay kaydırmayı aç */
        -webkit-overflow-scrolling: touch;
    }

    /* Randevu Ekle butonunu mobilde düzgünleştir */
    .admin-action-btn {
        width: 100% !important;
        margin-top: 10px !important;
    }
}

/* =========================================================
   GENEL TAKVİM MOBİL SIĞDIRMA FİNAL (SIFIR TAŞMA)
   ========================================================= */

@media screen and (max-width: 768px) {
    /* 1. Ana Kapsayıcıyı Kilitle */
    .admin-main-wrapper, 
    .full-width-container,
    .full-width-card {
        width: 100% !important;
        max-width: 100vw !important;
        padding: 5px !important; /* Kenarlardan çok az boşluk bırak */
        box-sizing: border-box !important;
        overflow: hidden !important; /* Dışarı sızmayı kes */
    }

    /* 2. Takvim Izgarasını Zorla Sığdır */
    #general-calendar-grid {
        display: grid !important;
        /* repeat(7, 1fr) yerine minmax kullanarak hücrelerin daralmasını sağla */
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important; 
        width: 100% !important;
        max-width: 100% !important;
        gap: 1px !important; /* Çizgi inceliği */
        background-color: var(--border-color) !important;
        border: 1px solid var(--border-color) !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* 3. Gün Hücrelerini Küçült */
    .gen-cal-day, .gen-cal-empty {
        min-height: 45px !important; /* Yüksekliği azalt */
        height: 45px !important;
        width: 100% !important;
        min-width: 0 !important; /* Sıkışmayı serbest bırak */
        padding: 2px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important; /* İçindekiler sığmazsa gizle */
    }

    /* 4. İçerikleri Kapat (Noktalar Kalsın) */
    .gen-desktop-wrap, 
    .gen-desktop-event {
        display: none !important; /* Masaüstü yazılarını kesin kapat */
    }

    .day-num {
        font-size: 0.7rem !important; /* Rakamları küçült */
        margin-bottom: 2px !important;
        color: var(--text-main) !important;
    }

    /* 5. Noktaları Optimize Et (Hizalama Bozulmasın) */
    .gen-mobile-dots {
        display: flex !important;
        justify-content: center !important;
        gap: 2px !important;
        height: 6px !important;
        width: 100% !important;
    }

    .gen-mobile-dots .dot {
        width: 4px !important;
        height: 4px !important;
        flex-shrink: 0 !important;
    }

    /* 6. Haftalık Setup Tablosu için Kaydırma */
    .table-scroll-container {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* =========================================================
   GENEL AYLIK TAKVİM - MODERN NAVİGASYON TASARIMI
   ========================================================= */

.calendar-nav-modern {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 15px !important;
    margin-bottom: 25px !important;
    background: var(--bg-card) !important;
    padding: 8px 10px !important;
    border-radius: 12px !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.nav-month-label {
    color: var(--text-main) !important;
    font-family: 'Pathway Extreme', sans-serif !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    min-width: 130px !important;
    text-align: center !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.nav-btn-modern {
    width: 38px !important;
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--bg-box) !important;
    color: var(--primary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    font-size: 1rem !important;
    font-weight: bold !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    user-select: none !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03) !important;
}

.nav-btn-modern:hover {
    background: var(--primary) !important;
    color: white !important;
    border-color: var(--primary) !important;
    transform: scale(1.08) !important;
    box-shadow: 0 4px 12px rgba(150, 11, 0, 0.15) !important;
}

.nav-btn-modern:active {
    transform: scale(0.95) !important;
}

@media screen and (max-width: 768px) {
    .calendar-nav-modern {
        width: 100% !important;
        box-sizing: border-box !important;
        gap: 10px !important;
    }
    
    .nav-month-label {
        font-size: 1rem !important;
        min-width: 110px !important;
    }
}

/* =========================================================
   ADMİN PANELİ - MOBİL BUTON VE KART BOŞLUK FİX
   ========================================================= */

/* 1. Kartlar Arası Boşluk Düzeni */
.full-width-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important; /* Kartlar arasındaki dikey boşluk */
    width: 100% !important;
    padding-bottom: 20px !important;
}

/* 2. Modern Navigasyon Buton Fix (image_d3d402 düzeltmesi) */
.calendar-nav-modern {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    background: var(--bg-main) !important;
    padding: 5px 10px !important;
    border-radius: 10px !important;
    border: 1px solid var(--border-color) !important;
    width: fit-content !important;
    margin: 0 auto !important; /* Mobilde de ortalı kalmasını sağlar */
}

.nav-btn-modern {
    width: 35px !important;
    height: 35px !important;
    min-width: 35px !important; /* Daralmasını engelle */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--bg-box) !important;
    color: var(--primary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-weight: bold !important;
}

.nav-month-label {
    min-width: 120px !important; /* Metnin butonu itmesini engeller */
    text-align: center !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    color: var(--text-main) !important;
}

/* 3. Mobil İçin Özel Sığdırma Kuralları */
@media screen and (max-width: 768px) {
    .full-width-card {
        padding: 15px !important;
        margin-bottom: 0 !important; /* Container gap zaten boşluk veriyor */
    }

    .calendar-header-row {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 15px !important;
    }

    /* Takvim navigasyonunun mobilde ekrana sığması için */
    .nav-month-label {
        min-width: 100px !important;
        font-size: 0.85rem !important;
    }
}

/* =========================================================
   ASİSTAN GÖREVLERİ - BUTON VE MOBİL TASARIM DÜZELTMESİ
   ========================================================= */

/* Temizlik Görevi BİTİR Butonu (Yeşil ve Kibar) */
.btn-task-finish {
    /* Eski parlak yeşil yerine bu soft tonu yapıştır */
    background-color: #A5D6A7 !important; /* Soft Pastel Yeşil */
    color: #1B5E20 !important; /* Koyu Yeşil Yazı (Okunurluk için) */
    
    /* Diğer mevcut kurallar aynı kalsın */
    width: auto !important;
    margin: 0 !important;
    padding: 8px 18px !important;
    font-size: 0.85rem !important;
    border-radius: 8px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    border: none !important;
    
    /* Gölgeyi de soft yapalım */
    box-shadow: 0 2px 6px rgba(165, 214, 167, 0.3) !important;
}

/* Temizlik Görevi GERİ AL Butonu (Gri ve Pasif) */
.btn-task-undo {
    background-color: var(--bg-main) !important;
    color: var(--text-muted) !important;
    border: 1px solid var(--border-color) !important;
    width: auto !important;
    margin: 0 !important;
    padding: 8px 18px !important;
    font-size: 0.85rem !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

/* Normal Görev GÜNCELLE Butonu (Tam Genişlik ama Kibar) */
.btn-task-update {
    background-color: var(--primary) !important;
    color: white !important;
    width: 100% !important;
    padding: 12px !important;
    font-size: 0.95rem !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    box-shadow: 0 4px 10px rgba(150, 11, 0, 0.2) !important;
}

/* Hover Efektleri */
.btn-task-finish:hover {
    background-color: #81C784 !important; /* Hafif daha koyu soft yeşil */
    transform: scale(1.05) !important;
}
.btn-task-undo:hover { background-color: var(--border-color) !important; color: var(--text-main) !important; }

/* Mobilde Butonların Taşmasını Engelleyen Koruma */
@media screen and (max-width: 768px) {
    .btn-task-finish, .btn-task-undo {
        padding: 8px 12px !important;
        font-size: 0.8rem !important;
    }
}


/* =========================================================
   ASİSTAN STOK EKRANI MOBİL SIĞDIRMA FİX
   ========================================================= */

/* Asistan tablosunun web/mobil %100 genişlik garantisi */
#stock-list-content .styled-table {
    width: 100% !important;
    min-width: 100% !important;
    table-layout: auto !important;
}

/* Yatayda taşma olursa kaydırma çubuğu çıkar (sağ tarafın kesilmesini KESİN önler) */
#stock-list-content .table-responsive {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border: none !important;
}

@media screen and (max-width: 768px) {
    /* Mobilde asistan stok tablosundaki yazıları küçült */
    #stock-list-content .styled-table {
        font-size: 0.75rem !important; 
    }
    
    /* Hücre içindeki boşlukları (padding) daraltarak ekranda yer kazan */
    #stock-list-content .styled-table th,
    #stock-list-content .styled-table td {
        padding: 8px 4px !important; 
        vertical-align: middle !important;
    }

    /* İkon butonlarını mobilde biraz daha küçült ki "İşlem" sütunu sığsın */
    #stock-list-content .action-icon-btn {
        padding: 4px !important;
    }
    
    #stock-list-content .action-icon-btn svg {
        width: 16px !important;
        height: 16px !important;
    }
}

/* =========================================================
   MÜŞTERİ DETAY KARTI KESİN DÜZELTMESİ (VIP KORUMA)
   ========================================================= */

/* İletişim satırlarındaki minik kalem butonlarını şıklaştır */
.client-edit-btn {
    background-color: var(--bg-main) !important;
    color: var(--text-muted) !important;
    border: 1px solid var(--border-color) !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important;
    transition: all 0.2s ease !important;
}

/* Üzerine gelince zarifçe Bordo olsun */
.client-edit-btn:hover {
    background-color: var(--primary) !important;
    color: white !important;
    border-color: var(--primary) !important;
    transform: scale(1.05) !important;
}

/* Mobilde diğer butonlar gibi devasa olmasını KESİN olarak engelle */
@media screen and (max-width: 768px) {
    .modal-content button.client-edit-btn {
        width: 38px !important;
        margin-bottom: 0 !important;
    }
}

/* =========================================================
   MÜŞTERİ DETAY: KUTULARIN YAN YANA DURMA GARANTİSİ
   ========================================================= */

/* Hem web hem mobilde yan yana durmaya zorla */
.client-stats-row {
    display: flex !important;
    flex-direction: row !important; /* Mobilde alt alta inmeyi KESİN yasaklar */
    gap: 10px !important;
    margin-bottom: 20px !important;
    width: 100% !important;
}

/* Kutucukların kendi tasarımları */
.client-stats-row > div {
    flex: 1 !important;
    background: var(--bg-box) !important;
    padding: 15px !important;
    border-radius: 10px !important;
    text-align: center !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important;
    box-sizing: border-box !important;
    min-width: 0 !important; /* Daralmaya izin ver */
}

/* Mobilde sığması için yazıları ve boşlukları kibarlaştır */
@media screen and (max-width: 768px) {
    .client-stats-row > div {
        padding: 12px 5px !important; 
    }
    .client-stats-row b {
        font-size: 1.1em !important;
    }
    .client-stats-row small {
        font-size: 0.75em !important;
    }
}

/* =========================================================
   PERFORMANS MODALI X (KAPATMA) BUTONU KONUM FİXİ
   ========================================================= */

#performance-modal .close-btn {
    position: absolute !important;
    top: 15px !important;
    right: 20px !important;
    z-index: 10 !important;
}

#performance-modal .modal-content {
    padding-top: 55px !important; /* X butonuna tam yer açmak için boşluk artırıldı */
    position: relative !important;
}

/* =========================================================
   YENİ KİRALAMA BUTONU - MOBİL EN ÜST KONUM (VIP FİX)
   ========================================================= */

/* Masaüstü Görünümü: Mobil butonu gizle */
#mobile-booking-btn-wrap {
    display: none !important; 
}

/* Mobil Görünüm Kuralları */
@media screen and (max-width: 768px) {
    /* Masaüstü butonunu aşağıda gizle */
    #desktop-booking-btn-wrap {
        display: none !important; 
    }
    
    /* Mobil butonu aç ve en tepeye oturt */
    #mobile-booking-btn-wrap {
        display: block !important;
        order: 0 !important; /* "Randevularım" kartının (order:1) tam üstüne yerleşir */
        width: 100% !important;
        margin-bottom: 5px !important; /* Kartlar arası uyumlu boşluk */
    }
}

/* =========================================================
   MODERN FORM DROPDOWN (SELECT) TASARIMI
   ========================================================= */

/* Tüm seçim kutularının (select) genel yapısı */
select#setup-select, 
select#booking-client-select {
    appearance: none !important; /* Standart ok işaretini kaldır */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23960b00' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: calc(100% - 12px) center !important;
    background-color: var(--bg-box) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 10px !important;
    padding: 12px 35px 12px 15px !important;
    color: var(--text-main) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important;
    width: 100% !important;
}

/* Seçim kutusuna tıklandığında veya odaklanıldığında */
select#setup-select:focus, 
select#booking-client-select:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(150, 11, 0, 0.1) !important;
    outline: none !important;
}

/* Seçeneklerin (option) görünümü (Tarayıcı izin verdiği ölçüde) */
select option {
    background-color: var(--bg-box) !important;
    color: var(--text-main) !important;
    padding: 10px !important;
}

/* Randevu formundaki başlık etiketlerini (Label) kibarlaştır */
#booking-form-modal label {
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    color: var(--text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 6px !important;
    display: block !important;
}

/* =========================================================
   MODERN FORM DROPDOWN (SELECT) TAŞMA VE HİZALAMA FİX
   ========================================================= */

select#setup-select, 
select#booking-client-select {
    /* Genişliği kutuyla sınırlamak için bu iki satır kritik */
    display: block !important;
    width: 100% !important;
    max-width: 100% !important; /* Dışarı taşmayı kesin önler */
    box-sizing: border-box !important;

    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23960b00' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: calc(100% - 15px) center !important; /* Ok ikonunu biraz daha içeri çektik */
    background-color: var(--bg-box) !important;
    
    border: 1px solid var(--border-color) !important;
    border-radius: 10px !important;
    padding: 12px 40px 12px 15px !important; /* Sağ boşluğu artırarak metinlerin okun üzerine binmesini önledik */
    
    color: var(--text-main) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.95rem !important;
    cursor: pointer !important;
    transition: border-color 0.2s ease !important;
}

/* Mobilde açılan listenin kutu genişliğinden fazla olmamasını sağlar */
@media screen and (max-width: 768px) {
    select#setup-select, 
    select#booking-client-select {
        font-size: 16px !important; /* iOS'ta otomatik zoom yapılmasını engeller */
        width: 100% !important;
    }
}

@media screen and (max-width: 768px) {
    .modal-content .input-group {
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
}

/* =========================================================
   DEPOZİTO KUTUSU KESİN DÜZELTME (OVERRIDE)
   ========================================================= */

/* Mobilde alt alta inmeyi engelleyen özel sınıf */
.deposit-flex-btn {
    background: var(--bg-box) !important;
    border: 1px solid var(--border-color) !important;
    padding: 0 15px !important;
    border-radius: 10px !important;
    display: flex !important;
    flex-direction: row !important; /* Mobilde alt alta inmeyi KESİN engeller */
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    cursor: pointer !important;
    height: 48px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: unset !important;
}

/* Tik kutusunun standart tasarımı */
.deposit-tick-box {
    width: 20px !important;
    height: 20px !important;
    border-radius: 4px !important;
    border: 2px solid var(--border-color) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: 0.2s !important;
    flex-shrink: 0 !important;
    background: transparent !important;
}

/* HAFTALIK DURUM VE TAKVİM ARASI MOBİL BOŞLUK */
@media screen and (max-width: 768px) {
    #card-weekly-status {
        margin-bottom: 25px !important; /* Diğer kartlarla aynı standart boşluk */
        display: flex !important; /* Görünürlüğü garantile */
    }
    
    /* Takvim gridinin üstünde ekstra pay bırak */
    .calendar-grid {
        margin-top: 20px !important;
    }
}


/* =========================================================
   HAFTALIK TABLO & TAKVİM - KUSURSUZ KART BÜTÜNLÜĞÜ (VIP)
   ========================================================= */

/* 1. Dış Kartı Bembeyaz ve Tek Parça Yap */
#card-weekly-status, 
.full-width-card {
    background-color: var(--bg-box) !important; /* Pırıl pırıl beyaz zemin */
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    padding: 20px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03) !important;
    display: flex !important;
    flex-direction: column !important;
}

/* 2. Başlıkları (Header) Karta Entegre Et ve Altını Çiz */
#card-weekly-status .card-header,
.full-width-card .calendar-header-row {
    border-bottom: 1px solid var(--border-color) !important;
    padding-bottom: 15px !important;
    margin-bottom: 15px !important;
    width: 100% !important;
}

#card-weekly-status .card-header h3 {
    margin: 0 !important;
    font-family: 'Pathway Extreme', sans-serif !important;
    font-size: 1.25rem !important;
    color: var(--primary) !important;
}

/* 3. İçerideki "Gri Kutu"yu Yok Et (Arka planla birleştir) */
/* Tarih ve Okların olduğu gereksiz gri çerçeveyi silip şeffaflaştırıyoruz */
#weekly-status-content > div:first-child,
#weekly-setup-grid > div:first-child {
    background: transparent !important;
    border: none !important;
    padding: 0 0 10px 0 !important;
    margin-bottom: 10px !important;
}

/* 4. Tablonun Etrafına Jilet Gibi Bir Çerçeve Çiz (KAYDIRMA FİXİ) */
.table-scroll-container,
.weekly-table-wrapper, 
#weekly-status-content > div:nth-child(2) {
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    
    /* İŞTE ÇÖZÜM BURADA: Yatay kaydırmayı geri açıyoruz */
    overflow-x: auto !important; 
    overflow-y: hidden !important; 
    -webkit-overflow-scrolling: touch !important; /* Mobilde yağ gibi kaysın */
    
    box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important;
}

/* Tablonun kendi çift çizgisini kapat */
.weekly-table-wrapper table,
#weekly-status-content table {
    border: none !important;
    border-radius: 0 !important;
}

/* 5. Mobilde Ekranı Ferahlatmak İçin İç Boşlukları (Padding) Daralt */
@media screen and (max-width: 768px) {
    #card-weekly-status, 
    .full-width-card {
        padding: 15px 10px !important; 
    }
}

/* =========================================================
   SANATÇI PANELİ GİZLİLİK KORUMASI (KESİN ÇÖZÜM)
   ========================================================= */

/* Sanatçı giriş yaptığında bu kartların KESİNLİKLE gizli kalmasını sağlar */
body.role-artist #card-weekly-status,
body.role-artist #card-tasks,
body.role-artist #card-cleaning,
body.role-artist #card-stock {
    display: none !important;
}

/* =========================================================
   BİLDİRİM ROZETLERİ (BADGE) YAZI RENGİ FİXİ
   ========================================================= */

/* Kırmızı bildirim balonlarının içindeki rakamlar KESİNLİKLE beyaz kalsın */
#admin-notif-badge,
#notif-badge,
#pending-badge,
.badge-count {
    color: #ffffff !important;
}

/* =========================================================
   PROFİL KARTI AVATAR YAZI RENGİ FİXİ
   ========================================================= */
#prof-card-initials {
    color: #ffffff !important;
}