/* ================================================
   IK4 Design System
   ================================================ */

/* ── Yazı tipleri (self-host) ──────────────────────────────────────────
   Inter ve Great Vibes Google Fonts'tan ÇEKİLMİYOR, wwwroot/fonts'ta duruyor.
   Müşteri kurulumlarının bir kısmı internete çıkamayan iç ağlarda; orada uzak font
   sessizce Segoe UI'a düşüyor ve arayüz başka bir yazı tipiyle açılıyordu. Ayrıca
   servis çalışanı yalnız bunun için ayrı bir font cache'i ve gstatic'e özel CORS
   işlemesi taşıyordu (bkz. sw.js), o da kalktı.

   INTER DEĞİŞKEN (variable) sürüm: tek dosya 400-700 arası tüm ağırlıkları taşıyor,
   130 KB. Dört ağırlığı ayrı ayrı indirmek 520 KB ediyordu.

   Yalnız latin + latin-ext alt kümeleri alındı: Türkçe ğ ş ı İ latin-ext'te. Kiril,
   Yunan ve Vietnamca alt kümeleri gereksiz yüktü. Tarayıcı unicode-range sayesinde
   yalnız sayfada geçen karakterlerin alt kümesini indirir.

   Lisans: ikisi de SIL Open Font License, self-host serbest. */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/inter-var-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/inter-var-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Great Vibes';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/great-vibes-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Great Vibes';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/great-vibes-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ================================================
   MARKA SETİ (Design Tokens): TEK DOĞRULUK KAYNAĞI
   Kural: UI'da doğrudan hex/px yazma. Daima var(--ik-*) kullan.
   Belge: docs/MARKA_SETI.md
   ================================================ */
:root {
    /* ---- Nötr Skala (Gri), metin, kenar, yüzey. Netsim logo grisiyle uyumlu ---- */
    --ik-gray-50:       #FAFAFA;
    --ik-gray-100:      #F5F5F5;
    --ik-gray-200:      #E5E5E5;
    --ik-gray-300:      #D4D4D4;
    --ik-gray-400:      #A3A3A3;
    --ik-gray-500:      #737373;
    --ik-gray-600:      #525252;
    --ik-gray-700:      #404040;
    --ik-gray-800:      #262626;
    --ik-gray-900:      #171717;
    --ik-brand-gray:    #5E5C5D;   /* Netsim logo grisi, logo/ikon eşleşmesi */

    /* ---- Marka / Birincil (Netsim Turuncu) ---- */
    --ik-orange-50:     #FFF7ED;
    --ik-orange-100:    #FCE7CE;
    --ik-orange-300:    #F4B678;
    --ik-orange-600:    #E17A0A;
    --ik-orange-700:    #D06B00;   /* MARKA, netsim.png'den örneklendi */
    --ik-orange-800:    #A85600;

    --ik-primary:       var(--ik-orange-700);
    --ik-primary-dark:  var(--ik-orange-800);
    --ik-primary-soft:  var(--ik-orange-50);  /* yumuşak zemin (badge/alert) */
    --ik-primary-100:   var(--ik-orange-100);

    /* ---- Semantik + yumuşak tonlar ---- */
    --ik-success:       #047857;
    --ik-success-dark:  #035F46;
    --ik-success-soft:  #ECFDF5;
    --ik-warning:       #B45309;   /* amber, kasıtlı olarak markadan daha kahve; yumuşak rozet tercih et */
    --ik-warning-dark:  #92400E;
    --ik-warning-soft:  #FFFBEB;
    --ik-danger:        #B91C1C;
    --ik-danger-dark:   #991B1B;
    --ik-danger-soft:   #FEF2F2;
    --ik-info:          #0369A1;   /* mavi, turuncunun tümleyeni */
    --ik-info-dark:     #075985;
    --ik-info-soft:     #F0F9FF;

    /* ---- Metin ---- */
    --ik-text:          var(--ik-gray-800);
    --ik-text-muted:    var(--ik-gray-500);
    --ik-text-subtle:   var(--ik-gray-400);
    --ik-text-invert:   #ffffff;

    /* ---- Yüzeyler ---- */
    --ik-body-bg:       #F5F5F4;
    --ik-surface:       #ffffff;            /* kart/panel */
    --ik-surface-2:     var(--ik-gray-50);  /* iç içe / hover zemin */
    --ik-navbar-bg:     #ffffff;
    --ik-border:        var(--ik-gray-200);
    --ik-border-strong: var(--ik-gray-300);

    /* ---- Sidebar (koyu nötr + turuncu aktif vurgu) ---- */
    --ik-sidebar-bg:    #2B2A29;
    --ik-sidebar-hover: #3A3836;
    --ik-sidebar-active: var(--ik-orange-700);
    --ik-sidebar-w:     260px;

    /* ---- Tipografi ---- */
    --ik-font-sans:     'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --ik-font-display:  'Great Vibes', cursive;  /* yalnız dekoratif/imza */
    --ik-fs-xs:         0.75rem;   /* 12, etiket, yardımcı metin */
    --ik-fs-sm:         0.875rem;  /* 14, ikincil metin, tablo */
    --ik-fs-base:       1rem;      /* 16, gövde (mobil zoom eşiği) */
    --ik-fs-lg:         1.125rem;  /* 18 */
    --ik-fs-xl:         1.35rem;   /* ~22, H2 */
    --ik-fs-2xl:        1.6rem;    /* ~26, H1 */
    --ik-fw-normal:     400;
    --ik-fw-medium:     500;
    --ik-fw-semibold:   600;
    --ik-fw-bold:       700;
    --ik-lh:            1.5;
    --ik-lh-tight:      1.25;

    /* ---- Boşluk ölçeği (4px tabanlı) ---- */
    --ik-space-1:       0.25rem;
    --ik-space-2:       0.5rem;
    --ik-space-3:       0.75rem;
    --ik-space-4:       1rem;
    --ik-space-5:       1.5rem;
    --ik-space-6:       2rem;

    /* ---- Biçim: köşe, gölge, hareket, focus ---- */
    --ik-radius-sm:     0.375rem;
    --ik-radius:        0.5rem;
    --ik-radius-lg:     0.75rem;
    --ik-radius-pill:   999px;
    --ik-shadow-sm:     0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.10);
    --ik-shadow:        0 2px 8px rgba(15,23,42,.06), 0 4px 20px rgba(15,23,42,.05);
    --ik-shadow-lg:     0 10px 25px rgba(15,23,42,.10), 0 8px 10px rgba(15,23,42,.04);
    --ik-t:             0.2s cubic-bezier(0.4,0,0.2,1);
    --ik-focus-ring:    0 0 0 0.2rem rgba(208,107,0,.30);
    --ik-tap-min:       44px;  /* dokunma hedefi asgari (mobil) */

    /* ---- Bootstrap CSS Variable Overrides ---- */
    --bs-primary-rgb:   208, 107, 0;
    --bs-success-rgb:   4, 120, 87;
    --bs-warning-rgb:   180, 83, 9;
    --bs-danger-rgb:    185, 28, 28;
    --bs-info-rgb:      3, 105, 161;
    --bs-border-radius: var(--ik-radius);
    --bs-border-color:  var(--ik-border);
    --bs-body-bg:       var(--ik-body-bg);
    --bs-body-color:    var(--ik-text);
    --bs-body-font-family: var(--ik-font-sans);
}

/* ---- Dark mode iskeleti (Bootstrap 5.3: <html data-bs-theme="dark">) ----
   FAZ 1'de token hazır; anahtar/otomatik geçiş sonraki fazda bağlanır. */
[data-bs-theme="dark"] {
    --ik-body-bg:       var(--ik-gray-900);
    --ik-surface:       #1F1F1F;
    --ik-surface-2:     #262626;
    --ik-navbar-bg:     #1F1F1F;
    --ik-border:        #333333;
    --ik-border-strong: #444444;
    --ik-text:          var(--ik-gray-100);
    --ik-text-muted:    var(--ik-gray-400);
    --ik-text-subtle:   var(--ik-gray-500);
    --ik-sidebar-bg:    #171716;
    --ik-sidebar-hover: #2A2825;
    /* "soft" zeminler (badge/alert/durum kartı), light değerleri açık pastel olduğu için
       karanlık modda beyaz görünürdü; koyu eşdeğerleriyle ezilir. */
    --ik-primary-soft:  #3A2A16;
    --ik-success-soft:  #12281F;
    --ik-warning-soft:  #2E2412;
    --ik-danger-soft:   #2E1A1A;
    --ik-info-soft:     #14252E;
    --bs-body-bg:       var(--ik-body-bg);
    --bs-body-color:    var(--ik-text);
    --bs-border-color:  var(--ik-border);
}

/* ================================================
   TEMA-DUYARSIZ UTILITY KÖPRÜSÜ  (karanlık mod "beyaz kalan frame" çözümü)
   ------------------------------------------------
   NEDEN: Bootstrap 5.3'te .bg-white/.bg-light/.text-dark/.table-light SABİT renklerdir;
   data-bs-theme="dark" bunları DEĞİŞTİRMEZ → koyu sayfada beyaz panel/sarmalayıcı kalır.
   Bu blok onları rol token'larına bağlar; böylece mevcut ve GELECEKTEKİ kullanımlar da
   otomatik uyumlu olur (tek nokta). Bootstrap utility'leri !important olduğu için burada da şart.

   YENİ KOD YAZARKEN: tercihen tema-duyarlı Bootstrap sınıflarını kullan,
   .bg-body (sayfa), .bg-body-tertiary (hafif zemin), .text-body / .text-body-secondary.
   ================================================ */
[data-bs-theme="dark"] .bg-white     { background-color: var(--ik-surface) !important; }
[data-bs-theme="dark"] .bg-light     { background-color: var(--ik-surface-2) !important; }
[data-bs-theme="dark"] .table-light  { --bs-table-bg: var(--ik-surface-2); --bs-table-color: var(--ik-text); }
[data-bs-theme="dark"] .border-light { border-color: var(--ik-border) !important; }
/* .text-dark/.text-black koyu zeminde okunmaz → gövde metnine çevir (.text-light'a DOKUNMA: zaten doğru) */
[data-bs-theme="dark"] .text-dark,
[data-bs-theme="dark"] .text-black   { color: var(--ik-text) !important; }

/* Gömülü içerik (iframe) ve alt-belge sarmalayıcıları: koyu zeminde beyaz dikdörtgen bırakmasın */
[data-bs-theme="dark"] iframe { background-color: var(--ik-surface); color-scheme: dark; }

/* ---- Bootstrap Button Overrides ---- */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ik-primary);
    --bs-btn-border-color: var(--ik-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ik-primary-dark);
    --bs-btn-hover-border-color: var(--ik-primary-dark);
    --bs-btn-active-bg: var(--ik-primary-dark);
    --bs-btn-active-border-color: var(--ik-primary-dark);
    --bs-btn-disabled-bg: var(--ik-primary);
    --bs-btn-disabled-border-color: var(--ik-primary);
}
.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ik-success);
    --bs-btn-border-color: var(--ik-success);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ik-success-dark);
    --bs-btn-hover-border-color: var(--ik-success-dark);
    --bs-btn-active-bg: var(--ik-success-dark);
}
.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ik-danger);
    --bs-btn-border-color: var(--ik-danger);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ik-danger-dark);
    --bs-btn-hover-border-color: var(--ik-danger-dark);
    --bs-btn-active-bg: var(--ik-danger-dark);
}
.btn-info {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ik-info);
    --bs-btn-border-color: var(--ik-info);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ik-info-dark);
    --bs-btn-hover-border-color: var(--ik-info-dark);
    --bs-btn-active-bg: var(--ik-info-dark);
}
.btn-warning {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ik-warning);
    --bs-btn-border-color: var(--ik-warning);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ik-warning-dark);
    --bs-btn-hover-border-color: var(--ik-warning-dark);
    --bs-btn-active-bg: var(--ik-warning-dark);
}

/* ================================================
   Base
   ================================================ */
body {
    font-family: var(--bs-body-font-family);
    background-color: var(--ik-body-bg);
    color: var(--bs-body-color);
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ================================================
   Layout
   ================================================ */
#wrapper {
    display: flex;
}

/* ================================================
   Sidebar
   ================================================ */
#sidebar {
    width: var(--ik-sidebar-w);
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
    background-color: var(--ik-sidebar-bg);
    color: #94A3B8;
    transition: transform var(--ik-t);
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.08) transparent;
}

#sidebar .sidebar-header {
    padding: 1.5rem 1rem 1.25rem;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,.06);
    flex-shrink: 0;
}

#sidebar ul {
    padding: 0.5rem 0;
    margin: 0;
    list-style: none;
    flex: 1;
}

#sidebar .list-group-item {
    background-color: transparent;
    color: #94A3B8;
    border: none;
    border-left: 3px solid transparent;
    padding: 0.625rem 1.25rem 0.625rem calc(1.25rem - 3px);
    display: block;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: background-color var(--ik-t), color var(--ik-t);
    line-height: 1.4;
}

#sidebar .list-group-item i {
    width: 1.125rem;
    margin-right: 0.625rem;
    opacity: 0.65;
    font-size: 0.8125rem;
}

#sidebar .list-group-item:hover {
    background-color: var(--ik-sidebar-hover);
    color: #E2E8F0;
}

#sidebar .list-group-item:hover i {
    opacity: 1;
}

#sidebar .list-group-item.active {
    background-color: rgba(208, 107, 0, .15);
    color: var(--ik-orange-300);
    border-left-color: var(--ik-primary);
    font-weight: 600;
}

#sidebar .list-group-item.active i {
    opacity: 1;
}

/* Alt menü girintisi YALNIZ satırdan gelir. Listelerdeki Bootstrap ps-3 her seviyede 1rem
   daha ekliyordu; satırın kendi girintisiyle toplanınca ikinci seviyede metin ~92px içeride
   başlıyor, "Çalışan Metrikleri" gibi adların hemen hepsi iki satıra düşüyordu. */
#sidebar ul.collapse,
#sidebar ul.collapsing {
    padding-left: 0 !important;
}

#sidebar .collapse .list-group-item {
    padding-left: 2.25rem;
    font-size: 0.8125rem;
    color: #64748B;
}

/* Yine de sığmayan ad ikinci satıra geçerse ikonun altına değil metnin hizasına insin. */
#sidebar .collapse .list-group-item:not(.d-flex) {
    display: flex;
    align-items: baseline;
}

#sidebar .collapse .list-group-item i {
    flex-shrink: 0;
    margin-right: 0.5rem;
}

#sidebar .collapse .list-group-item:hover {
    color: #E2E8F0;
}

/* İkinci seviye (ör. Yönetici Paneli → Metrikler → sayfa): hiyerarşi görünsün diye
   bir kademe daha içeri. Üstteki kural tüm .collapse torunlarına aynı girintiyi
   verdiğinden bu olmadan iki seviye aynı hizada duruyordu. */
#sidebar .collapse .collapse .list-group-item {
    padding-left: 3.25rem;
}

.sidebar-footer {
    padding: 0.875rem 1rem;
    background-color: rgba(0,0,0,.15);
    border-top: 1px solid rgba(255,255,255,.04);
    flex-shrink: 0;
}

.sidebar-footer p {
    margin: 0 0 0.25rem;
    font-family: 'Great Vibes', cursive;
    font-size: 0.95rem;
    color: #475569;
}

.sidebar-footer img {
    max-width: 200px;
    opacity: 0.6;
}

.sidebar-footer .app-version {
    margin-top: 0.4rem;
    font-size: 0.7rem;
    color: #64748B;
    letter-spacing: 0.02em;
}

.toggled #sidebar {
    transform: translateX(calc(-1 * var(--ik-sidebar-w)));
}

/* ================================================
   Page Content
   ================================================ */
#page-content-wrapper {
    flex: 1;
    min-width: 0;
    margin-left: var(--ik-sidebar-w);
    transition: margin-left var(--ik-t);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.toggled #page-content-wrapper {
    margin-left: 0;
}

/* ================================================
   Navbar
   ================================================ */
.navbar {
    background-color: var(--ik-navbar-bg) !important;
    border-bottom: 1px solid var(--ik-border);
    padding: 0.75rem 1.5rem;
    flex-shrink: 0;
    gap: 0;
    /* Sayfa kaydırıldıkça üstte sabit kal (içeriğin üstünde, sidebar/backdrop'un altında) */
    position: sticky;
    top: 0;
    z-index: 900;
}

.navbar > .d-flex {
    display: flex;
    align-items: center;
    min-width: 0;
}
/* Yalnız sol küme (toggle + başlık) boşluğu doldursun; sağ küme (tema/çıkış) sağa yaslı kalsın */
.navbar > .d-flex:first-child {
    flex: 1;
}

#sidebar-toggle {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    background-color: transparent;
    color: var(--ik-text-muted);
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9375rem;
    cursor: pointer;
    padding: 0;
    transition: background-color var(--ik-t), color var(--ik-t), border-color var(--ik-t);
}

#sidebar-toggle:hover {
    background-color: var(--ik-surface-2);
    color: var(--ik-text);
    border-color: var(--ik-border-strong);
}

.navbar-brand {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: 0.875rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ik-text);
    letter-spacing: -0.01em;
    flex: 1;
    min-width: 0;
}

.navbar .btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ik-danger);
    --bs-btn-border-color: var(--ik-danger);
    --bs-btn-hover-bg: var(--ik-danger-dark);
    --bs-btn-hover-border-color: var(--ik-danger-dark);
    --bs-btn-active-bg: var(--ik-danger-dark);
    font-size: 0.8125rem;
    padding: 0.375rem 0.875rem;
    border-radius: 0.5rem;
}

/* ================================================
   Cards
   ================================================ */
.card {
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius-lg);
    box-shadow: var(--ik-shadow-sm);
    transition: box-shadow var(--ik-t);
}

.card:hover {
    box-shadow: var(--ik-shadow);
}

.card-header {
    background-color: var(--ik-surface-2);
    border-bottom: 1px solid var(--ik-border);
    padding: 0.875rem 1.25rem;
    border-radius: var(--ik-radius-lg) var(--ik-radius-lg) 0 0 !important;
}

.card-header h5,
.card-header .h5 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ik-text);
    margin: 0;
    letter-spacing: -0.01em;
}

.card-header.bg-primary,
.card-header.bg-success,
.card-header.bg-info,
.card-header.bg-warning,
.card-header.bg-danger {
    border-bottom: none;
}

/* KPI cards, subtle gradient polish */
.card.bg-primary,
.card.bg-success,
.card.bg-info,
.card.bg-warning,
.card.bg-danger {
    border: none;
    background-image: linear-gradient(135deg, rgba(255,255,255,.08) 0%, transparent 65%);
}

/* ================================================
   Forms
   ================================================ */
.form-control,
.form-select {
    border-color: var(--ik-border);
    border-radius: var(--ik-radius);
    font-size: 0.875rem;
    transition: border-color var(--ik-t), box-shadow var(--ik-t);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--ik-primary);
    box-shadow: 0 0 0 3px rgba(208, 107, 0, .1);
}

.form-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ik-text-muted);
    margin-bottom: 0.375rem;
}

/* ================================================
   Mobil: form + dokunma erişilebilirliği (FAZ 4)
   ================================================ */
@media (max-width: 768px) {
    /* iOS odakta zoom önleme, input font ≥ 16px */
    .form-control,
    .form-select,
    .input-group-text {
        font-size: 1rem;
    }
    /* Dokunma hedefleri */
    .btn:not(.btn-link):not(.btn-sm) {
        min-height: var(--ik-tap-min);
    }
    .btn-sm {
        min-height: 38px;
    }
    .collapse-toggle,
    .zengin-btn {
        min-width: 40px;
        min-height: 40px;
    }
    /* ZenginEditor mobil: alan yüksekliği + araç çubuğu aralığı */
    .zengin-alan {
        max-height: 50vh;
    }
    .zengin-arac {
        gap: 0.25rem;
    }
}

/* ================================================
   Toast
   ================================================ */
#toast-container .toast .toast-body i {
    margin-right: .5rem;
}

/* ================================================
   Collapse Toggle
   ================================================ */
.collapse-toggle {
    color: var(--ik-text-muted);
    font-size: 1rem;
    border: none;
    background: transparent;
    padding: 0.25rem 0.375rem;
    border-radius: 0.375rem;
    line-height: 1;
    transition: background-color var(--ik-t), color var(--ik-t);
}

.collapse-toggle:hover {
    background-color: var(--ik-border);
    color: var(--ik-text);
}

.collapse-toggle i {
    transition: transform var(--ik-t);
}

.collapse-toggle[aria-expanded="false"] i {
    transform: rotate(180deg);
}

/* ================================================
   ApexCharts Tooltip
   ================================================ */
.apexcharts-tooltip-custom {
    padding: 8px 12px;
    background: rgba(15, 23, 42, .93);
    color: #F1F5F9;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.65;
    box-shadow: 0 4px 20px rgba(0,0,0,.25);
    border: 1px solid rgba(255,255,255,.08);
}

.apexcharts-tooltip-custom strong {
    display: block;
    margin-bottom: 4px;
    color: var(--ik-orange-300);
    font-weight: 600;
}

/* ================================================
   Tabulator
   ================================================ */
.tabulator {
    border-radius: var(--ik-radius) !important;
    overflow: hidden;
    border: 1px solid var(--ik-border) !important;
    font-size: 0.875rem;
}

/* Tabulator grup başlığındaki her span'a gri metin rengi veriyor; rozet de griye dönüp
   gri zeminde okunmaz oluyordu (Ek Ödemeler "n kalem"). Rozet kendi rengini korur. */
.tabulator-row.tabulator-group span.badge {
    color: var(--bs-badge-color);
}

/* Mobil: sayfalama butonları ve collapse toggle dokunma hedefleri */
@media (max-width: 768px) {
    .tabulator .tabulator-footer .tabulator-page {
        min-height: 40px;
        padding: 0.4rem 0.7rem;
    }
    .tabulator .tabulator-responsive-collapse-toggle {
        min-width: 24px;
        min-height: 24px;
    }
    /* Collapse ile açılan gizli alanlar okunur etiketli liste */
    .tabulator-responsive-collapse table td {
        padding: 0.2rem 0.4rem;
    }
    .tabulator-responsive-collapse table td:first-child {
        font-weight: var(--ik-fw-semibold);
        color: var(--ik-text-muted);
    }
}

/* Ham HTML tabloları için yatay kaydırma sarmalayıcı (mobilde gövde kaymaz) */
.table-responsive {
    -webkit-overflow-scrolling: touch;
}

/* Tabulator karanlık tema (kendi CSS'i data-bs-theme'e duyarsız, rol token'larıyla eziyoruz) */
[data-bs-theme="dark"] .tabulator {
    background: var(--ik-surface);
    color: var(--ik-text);
}
[data-bs-theme="dark"] .tabulator .tabulator-header,
[data-bs-theme="dark"] .tabulator .tabulator-header .tabulator-col,
[data-bs-theme="dark"] .tabulator .tabulator-header .tabulator-col .tabulator-col-content {
    background: var(--ik-surface-2);
    color: var(--ik-text);
    border-color: var(--ik-border);
}
[data-bs-theme="dark"] .tabulator .tabulator-tableholder,
[data-bs-theme="dark"] .tabulator .tabulator-row {
    background: var(--ik-surface);
    color: var(--ik-text);
}
[data-bs-theme="dark"] .tabulator .tabulator-row .tabulator-cell {
    border-color: var(--ik-border);
}
[data-bs-theme="dark"] .tabulator .tabulator-row.tabulator-row-even {
    background: var(--ik-surface-2);
}
[data-bs-theme="dark"] .tabulator .tabulator-row.tabulator-selectable:hover {
    background: var(--ik-border);
}
[data-bs-theme="dark"] .tabulator .tabulator-footer,
[data-bs-theme="dark"] .tabulator .tabulator-footer .tabulator-page {
    background: var(--ik-surface-2);
    color: var(--ik-text);
    border-color: var(--ik-border);
}
[data-bs-theme="dark"] .tabulator .tabulator-header .tabulator-col .tabulator-header-filter input {
    background: var(--ik-surface);
    color: var(--ik-text);
    border-color: var(--ik-border);
}

/* Tabulator'un kendi CSS'inde SABIT acik renkler var (#fff, #e6e6e6, #f3f3f3...). Yukaridaki
   blok bunlarin bir kismini eziyordu; asagidakiler acikta kalmisti ve karanlik modda beyaz
   lekeler olarak goruluyordu. En cok goze carpani SIRA NO kolonuydu (row-header): satir
   numarasi kolonu sabit #e6e6e6 tasiyor ve satirin rengini devralmiyor.

   Kaynak dosya guncellenirse diye Tabulator CSS'ine DOKUNULMADI, hepsi burada eziliyor. */

/* Sıra No kolonu (rowHeader, bkz. gridConf.js): kendi arka planini dayatiyor. */
[data-bs-theme="dark"] .tabulator .tabulator-row .tabulator-cell.tabulator-row-header {
    background: var(--ik-surface-2);
    color: var(--ik-text);
    border-right-color: var(--ik-border);
    border-bottom-color: var(--ik-border);
}

/* Tablo govdesi ve tasinan satir: ikisi de #fff. */
[data-bs-theme="dark"] .tabulator .tabulator-tableholder .tabulator-table,
[data-bs-theme="dark"] .tabulator-row.tabulator-row-moving {
    background: var(--ik-surface);
    color: var(--ik-text);
}

/* Kolon menusu, baglam menusu ve acilir kutular; !important gerekli, kaynakta da oyle. */
[data-bs-theme="dark"] .tabulator-popup-container,
[data-bs-theme="dark"] .tabulator-menu {
    background: var(--ik-surface) !important;
    color: var(--ik-text);
    border-color: var(--ik-border);
}
[data-bs-theme="dark"] .tabulator-menu .tabulator-menu-item:not(.tabulator-menu-item-disabled):hover {
    background: var(--ik-surface-2);
}

/* Yukleniyor/uyari kutusu. */
[data-bs-theme="dark"] .tabulator .tabulator-alert .tabulator-alert-msg {
    background: var(--ik-surface);
    color: var(--ik-text);
    border-color: var(--ik-border);
}

/* Toplam/hesap satirlari (column calcs). Kaynakta !important. */
[data-bs-theme="dark"] .tabulator .tabulator-header .tabulator-calcs-holder,
[data-bs-theme="dark"] .tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-calcs {
    background: var(--ik-surface-2) !important;
    color: var(--ik-text);
}

/* Sabitlenmis kolonun ayirici cizgisi acik gride sabitlenmis. */
[data-bs-theme="dark"] .tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-left,
[data-bs-theme="dark"] .tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-left {
    border-right-color: var(--ik-border);
}
[data-bs-theme="dark"] .tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-right,
[data-bs-theme="dark"] .tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-right {
    border-left-color: var(--ik-border);
}

/* SweetAlert2 karanlik tema.
   Kutuphane kendi karanlik destegini `prefers-color-scheme`'e baglamis; bizim temamiz ise
   ISLETIM SISTEMINDEN BAGIMSIZ bir anahtar (data-bs-theme). Isletim sistemi acik temadayken
   uygulamayi karanliga alan kullanicida tum diyaloglar beyaz kaliyordu. Kutuphane degerleri
   CSS degiskeni olarak sundugu icin tek tek secici ezmek gerekmiyor. */
[data-bs-theme="dark"] {
    --swal2-background: var(--ik-surface);
    --swal2-color: var(--ik-text);
    --swal2-input-border: 1px solid var(--ik-border);
    --swal2-input-background: var(--ik-surface-2);
    --swal2-footer-border-color: var(--ik-border);
    --swal2-validation-message-background: var(--ik-surface-2);
    --swal2-validation-message-color: var(--ik-text);
    --swal2-close-button-color: var(--ik-text-muted);
}

/* ================================================
   Sidebar Backdrop (Mobile)
   ================================================ */
#sidebar-backdrop {
    display: none;
}

/* ================================================
   Mobile
   ================================================ */
@media (max-width: 768px) {
    #sidebar {
        transform: translateX(calc(-1 * var(--ik-sidebar-w)));
    }

    #page-content-wrapper {
        margin-left: 0;
    }

    .toggled #sidebar {
        transform: translateX(0);
    }

    .toggled #page-content-wrapper {
        margin-left: 0;
    }

    #sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .5);
        z-index: 999;
    }

    .toggled #sidebar-backdrop {
        display: block;
    }

    .navbar {
        padding: 0.625rem 1rem;
    }

    .navbar-brand {
        font-size: 0.875rem;
    }

    .card {
        border-radius: var(--ik-radius);
    }

    .container-fluid {
        padding-left: 0.875rem;
        padding-right: 0.875rem;
    }
}

/* ================================================
   Kişisel Dashboard (Home/_PersonelDashboard), eski inline style buraya taşındı
   ================================================ */
.dashboard-card {
    border-radius: var(--ik-radius-lg);
    box-shadow: var(--ik-shadow-sm);
    transition: transform var(--ik-t), box-shadow var(--ik-t);
    height: 100%;
}
.dashboard-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ik-shadow);
}
.stat-card {
    padding: 1.5rem;
    min-height: 140px;
}
.stat-icon {
    font-size: 2.5rem;
    opacity: 0.8;
}
.stat-value {
    font-size: clamp(1.5rem, 5vw, 2rem);
    font-weight: var(--ik-fw-bold);
    margin: 0.5rem 0;
    line-height: var(--ik-lh-tight);
}
.stat-label {
    font-size: var(--ik-fs-xs);
    color: var(--ik-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.duyuru-card {
    border-left: 4px solid var(--ik-primary);
    transition: all var(--ik-t);
}
.duyuru-card:hover {
    border-left-color: var(--ik-primary-dark);
    background-color: var(--ik-surface-2);
}
.izin-progress-wrapper {
    position: relative;
    padding: 1rem;
}
.badge-custom {
    font-size: var(--ik-fs-xs);
    padding: 0.35em 0.65em;
}
.widget-header {
    border-bottom: 2px solid var(--ik-border);
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
}
.widget-title {
    font-size: var(--ik-fs-lg);
    font-weight: var(--ik-fw-semibold);
    color: var(--ik-text);
    margin: 0;
}
.empty-state {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--ik-text-muted);
}
.empty-state i {
    font-size: 3rem;
    opacity: 0.3;
    margin-bottom: 1rem;
}
@media (max-width: 480px) {
    .stat-card { padding: 1rem; min-height: 120px; }
    .stat-icon { font-size: 1.9rem; }
}

/* ---- Küçük telefon ---- */
@media (max-width: 480px) {
    .container-fluid {
        padding-left: 0.625rem;
        padding-right: 0.625rem;
    }
    .card-header {
        padding: 0.625rem 0.875rem;
    }
    h1, .h1 { font-size: var(--ik-fs-xl); }
    h2, .h2 { font-size: var(--ik-fs-lg); }
}

/* ---- Tablet: sidebar biraz daralt ---- */
@media (min-width: 769px) and (max-width: 1024px) {
    :root { --ik-sidebar-w: 224px; }
}

/* ---- iOS güvenli alan (viewport-fit=cover ile çentik/ev tuşu boşluğu) ---- */
@supports (padding: env(safe-area-inset-top)) {
    .navbar  { padding-top: calc(0.75rem + env(safe-area-inset-top)); }
    #sidebar { padding-bottom: env(safe-area-inset-bottom); }
}
@media (max-width: 768px) {
    @supports (padding: env(safe-area-inset-top)) {
        .navbar { padding-top: calc(0.625rem + env(safe-area-inset-top)); }
    }
}

/* ================================================
   Giriş / Kimlik ekranları (Login, Şifre Belirle/Talep)
   body.auth-body: yalnızca giriş yapılmamış (auth) sayfalarda _Layout tarafından eklenir.
   ================================================ */
body.auth-body {
    background: linear-gradient(145deg, var(--ik-orange-50) 0%, var(--ik-orange-100) 55%, #FBDCB6 100%);
    min-height: 100vh;
}

.login-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.login-logo {
    max-height: 90px;
    margin-bottom: 0.5rem;
    filter: drop-shadow(0 2px 8px rgba(208, 107, 0, .2));
}

.login-brand {
    font-family: 'Great Vibes', cursive;
    font-size: 2.4rem;
    color: var(--ik-primary);
    margin-bottom: 1.5rem;
    letter-spacing: 1px;
}

.login-card {
    width: 100%;
    max-width: 400px;
    border: 1px solid var(--ik-orange-100);
    border-radius: 1rem;
    box-shadow: 0 8px 32px rgba(208, 107, 0, .12), 0 2px 8px rgba(0, 0, 0, .06);
}

.login-card .card-header {
    background: linear-gradient(135deg, var(--ik-primary), var(--ik-primary-dark));
    border-radius: 1rem 1rem 0 0;
    padding: 1.25rem 1.5rem;
    border-bottom: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-card .card-header h5 {
    color: #fff !important;
    margin: 0;
}

.login-card .card-body {
    padding: 1.75rem 1.75rem 1.25rem;
    background: var(--ik-surface);
}

.login-card .input-group-text {
    background-color: var(--ik-surface-2);
    border-right: none;
    color: var(--ik-text-muted);
    border-color: var(--ik-border);
}

.login-card .form-control {
    border-left: none;
    border-color: var(--ik-border);
}

.login-card .form-control:focus {
    box-shadow: none;
    border-color: var(--ik-orange-300);
}

.login-card .input-group:focus-within .input-group-text {
    border-color: var(--ik-orange-300);
    background-color: var(--ik-surface-2);
}

.login-card .btn-login {
    background: linear-gradient(135deg, var(--ik-primary), var(--ik-primary-dark));
    border: none;
    font-weight: 600;
    letter-spacing: .3px;
    transition: opacity var(--ik-t), transform var(--ik-t);
    border-radius: 0.5rem;
}

.login-card .btn-login:hover {
    opacity: .9;
    transform: translateY(-1px);
}

.login-footer {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
}

.login-footer small {
    font-family: 'Great Vibes', cursive;
    color: var(--ik-primary);
    font-size: 1rem;
}

.netsim-logo {
    max-height: 120px;
    opacity: .75;
}

/* ================================================
   ZenginEditor, yeniden kullanılabilir zengin metin editörü
   ================================================ */
.zengin-editor {
    border: 1px solid var(--ik-border);
    border-radius: .5rem;
    background: var(--ik-surface);
}

.zengin-arac {
    display: flex;
    flex-wrap: wrap;
    gap: .15rem;
    align-items: center;
    padding: .35rem .4rem;
    background: var(--ik-surface-2);
    border-bottom: 1px solid var(--ik-border);
    border-radius: .5rem .5rem 0 0;
    /* İçerik/modal kaydırılırken araç çubuğu üstte sabit kalsın */
    position: sticky;
    top: 0;
    z-index: 5;
}

.zengin-btn {
    border: 1px solid transparent;
    background: transparent;
    color: var(--ik-text-muted);
    border-radius: .35rem;
    padding: .28rem .5rem;
    line-height: 1;
    font-size: .85rem;
    cursor: pointer;
    transition: background .12s, color .12s;
}

.zengin-btn:hover {
    background: var(--ik-border);
    color: var(--ik-text);
}

.zengin-btn-ek {
    border: 1px solid var(--ik-border-strong);
    background: var(--ik-surface);
    color: var(--ik-text);
    border-radius: 999px;
    padding: .18rem .55rem;
    font-size: .72rem;
    font-family: var(--bs-font-monospace, monospace);
    cursor: pointer;
}

.zengin-btn-ek:hover {
    background: var(--ik-orange-50);
    border-color: var(--ik-orange-300);
}

.zengin-ayrac {
    width: 1px;
    height: 20px;
    background: var(--ik-border);
    margin: 0 .3rem;
}

.zengin-alan {
    min-height: 220px;
    max-height: 440px;
    overflow: auto;
    padding: .75rem .9rem;
    outline: none;
    font-size: .92rem;
    line-height: 1.5;
}

.zengin-alan[data-placeholder]:empty:before {
    content: attr(data-placeholder);
    color: var(--ik-text-subtle);
}

/* ================================================
   Yetki matrisi (Rol / Kullanıcı yetkileri tablosu)
   ================================================ */
.yetki-matris-kap {
    max-height: 62vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--ik-border);
    border-radius: .5rem;
}

.yetki-matris {
    margin-bottom: 0;
}

.yetki-matris thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--ik-surface-2);
    color: var(--ik-text);
    font-weight: 600;
    font-size: .82rem;
    border-bottom: 2px solid var(--ik-border);
}

.yetki-matris td,
.yetki-matris th {
    vertical-align: middle;
}

.yetki-matris tr.yetki-grup td {
    background: var(--ik-gray-100);
    color: var(--ik-gray-700);
    font-weight: 600;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    position: sticky;
    top: 34px;
    z-index: 1;
}

.yetki-kart-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .55rem;
    border: 1px solid var(--ik-border-strong);
    border-radius: 999px;
    font-size: .78rem;
    cursor: pointer;
    user-select: none;
    background: var(--ik-surface);
    margin: 0;
    transition: background .12s, border-color .12s, color .12s;
}

.yetki-kart-chip .form-check-input {
    margin: 0;
    cursor: pointer;
    float: none;
}

.yetki-kart-chip:hover {
    border-color: var(--ik-text-subtle);
    background: var(--ik-surface-2);
}

.yetki-kart-chip:has(input:checked) {
    background: var(--ik-orange-50);
    border-color: var(--ik-primary);
    color: var(--ik-orange-800);
}

/* ═══════════════════════════════════════════════════════════════
   Wiki / Bilgi Merkezi
   (eski Index.cshtml inline <style> + sabit hex'ler buraya taşındı;
    tüm renkler token, dark mode otomatik uyumlu)
   ═══════════════════════════════════════════════════════════════ */
.wiki-layout { height: calc(100vh - 200px); }
.wiki-sol {
    height: 100%;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--ik-border);
}
.wiki-sag { height: 100%; display: flex; flex-direction: column; }

#wiki-tree { flex: 1; overflow-y: auto; overflow-x: hidden; }

/* ── Modern özel ağaç (Tabulator yerine) ── */
.wiki-agac, .wiki-agac ul { list-style: none; margin: 0; padding: 0; }
.wiki-agac { font-size: .9rem; user-select: none; }
.wiki-agac ul { padding-left: 1.05rem; position: relative; }
/* İnce hiyerarşi çizgisi */
.wiki-agac ul::before {
    content: ""; position: absolute; left: .45rem; top: 0; bottom: .35rem;
    border-left: 1px solid var(--ik-border);
}
.wiki-dugum { position: relative; }

.wiki-dugum-satir {
    display: flex; align-items: center; gap: .45rem;
    padding: .32rem .45rem; border-radius: var(--ik-radius-sm);
    cursor: pointer; min-width: 0;
    transition: background-color .12s ease;
}
.wiki-dugum-satir:hover { background: var(--ik-surface-2); }
.wiki-dugum-satir.secili { background: var(--ik-primary-soft); }
.wiki-dugum-satir.secili .wiki-ad { color: var(--ik-orange-800); font-weight: 600; }

.wiki-ac-kapa, .wiki-ac-kapa-bos { width: 1rem; flex-shrink: 0; text-align: center; }
.wiki-ac-kapa {
    color: var(--ik-text-muted); font-size: .72rem;
    transition: transform .15s ease;
}
.wiki-dugum.kapali > .wiki-dugum-satir .wiki-ac-kapa { transform: rotate(-90deg); }
.wiki-dugum.kapali > ul { display: none; }
.wiki-dugum.filtre-gizli { display: none; }

.wiki-ikon-kategori { color: var(--ik-warning); flex-shrink: 0; }
.wiki-ikon-dokuman  { color: var(--ik-danger);  flex-shrink: 0; }
.wiki-ad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; min-width: 0; }
.wiki-rozet-sayi {
    font-size: .7rem;
    background: var(--ik-surface-2);
    color: var(--ik-text-muted);
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius-pill);
    padding: 0 .4rem; flex-shrink: 0;
}

/* Satır içi admin araçları (hover'da) */
.wiki-satir-arac { margin-left: auto; opacity: 0; transition: opacity .12s ease; display: flex; gap: 2px; flex-shrink: 0; }
.wiki-dugum-satir:hover .wiki-satir-arac { opacity: 1; }
.wiki-satir-arac .btn { --bs-btn-padding-y: .05rem; --bs-btn-padding-x: .3rem; font-size: .72rem; }

/* Drag-drop görsel geri bildirim */
.wiki-dugum-satir.surukleniyor { opacity: .45; }
.wiki-dugum-satir.birak-hedef { background: var(--ik-primary-soft); outline: 1px dashed var(--ik-primary); outline-offset: -1px; }

/* Hedef kitleye özel doküman rozeti (yalnız admin görür) */
.wiki-hedef-rozet { color: var(--ik-info); font-size: .7rem; flex-shrink: 0; }

/* ── Tabulator global arama kutusu (gridConf otomatik ekler) ── */
.tab-arama { display: flex; justify-content: flex-end; margin-bottom: .5rem; }
.tab-arama .input-group { max-width: 260px; }

/* PDF görüntüleyici */
#pdf-viewer-container { flex: 1; display: flex; flex-direction: column; position: relative; min-height: 0; }
#pdf-welcome {
    position: absolute; inset: 0; z-index: 10;
    display: flex; align-items: center; justify-content: center;
    overflow-y: auto; padding: 1.5rem;
}
#pdf-welcome.gizli { display: none; }
#pdf-tab-content { flex: 1; min-height: 0; }
#pdf-tab-content .tab-pane { height: 100%; overflow: hidden; flex-direction: column; }
#pdf-tab-content .tab-pane.active { display: flex; }
.pdf-canvas-container { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; background: var(--ik-surface-2); }
.pdf-pages-container { height: auto; }
.pdf-breadcrumb { font-size: .8rem; color: var(--ik-text-muted); }

/* PDF yükleme örtüsü, display'i .gizli ile kontrol et (Bootstrap d-flex !important çakışması yok) */
.pdf-loading-overlay {
    position: absolute; inset: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, .35);
}
.pdf-loading-overlay.gizli { display: none; }

/* Karşılama / boş durum */
.wiki-bos { color: var(--ik-text-muted); text-align: center; }
.wiki-bos .wiki-bos-ikon { font-size: 3.5rem; opacity: .35; }
.wiki-son-kart {
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius);
    background: var(--ik-surface);
    transition: border-color .12s ease, box-shadow .12s ease;
    cursor: pointer;
}
.wiki-son-kart:hover { border-color: var(--ik-primary); box-shadow: var(--ik-shadow-sm); }

/* Arama sonuç açılır kutusu */
.wiki-arama-sarmal { position: relative; }
.wiki-arama-sonuc {
    position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 2px);
    max-height: 55vh; overflow-y: auto;
    background: var(--ik-surface);
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius);
    box-shadow: var(--ik-shadow);
}
.wiki-arama-sonuc.gizli { display: none; }
.wiki-arama-item { padding: .5rem .75rem; cursor: pointer; border-bottom: 1px solid var(--ik-border); }
.wiki-arama-item:last-child { border-bottom: 0; }
.wiki-arama-item:hover, .wiki-arama-item.aktif { background: var(--ik-surface-2); }
.wiki-arama-item .yol { font-size: .72rem; color: var(--ik-text-muted); }

/* Mobil (<768px): sol ağaç Bootstrap .offcanvas-md ile offcanvas olur, görüntüleyici tam genişlik */
@media (max-width: 767.98px) {
    .wiki-layout { height: auto; }
    .wiki-sag { height: auto; }
    #pdf-viewer-container { min-height: 78vh; }
}
/* Masaüstü (≥768px): .offcanvas-md zaten statik akışa döner; sadece yükseklikleri doldur */
@media (min-width: 768px) {
    #wikiSolOffcanvas, #wikiSolOffcanvas .offcanvas-body { height: 100%; }
    #wikiSolOffcanvas .offcanvas-body { display: flex; flex-direction: column; padding: 0; overflow: visible; }
}

/* Metrik sayfalarındaki özet kutuları: tıklanınca ilgili Detay raporunu açar.
   Tıklanabilirliği hafif bir yükselme + gölge ile belli et (renk kullanılmaz, kart kendi rengini korur). */
.ozet-kart {
    transition: transform .15s ease, box-shadow .15s ease;
}
.ozet-kart:hover,
.ozet-kart:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .2) !important;
}
@media (prefers-reduced-motion: reduce) {
    .ozet-kart { transition: none; }
    .ozet-kart:hover, .ozet-kart:focus-visible { transform: none; }
}

/* ── Çoklu seçim filtre alanı (Views/Shared/_CokluSecim.cshtml) ──────────────
   Sabit renk yok; hepsi tema token'ı. */
.coklu-secim { position: relative; }
.coklu-secim-dugme { cursor: pointer; }
.coklu-secim-dugme::after { content: none; }
.coklu-secim-menu {
    min-width: 260px; max-width: 340px;
    background: var(--ik-surface);
    border: 1px solid var(--ik-border);
    color: var(--ik-text);
}
/* Uzun listeler (300 görev) menüyü ekran dışına taşırıyordu; kaydırma menü İÇİNDE. */
.coklu-secim-ogeler { max-height: 260px; overflow-y: auto; }
.coklu-secim-oge-satir label,
.coklu-secim-tumu-satir label { cursor: pointer; }
.coklu-secim-oge-satir:hover { background: var(--ik-surface-2); border-radius: .25rem; }

/* ── Bildirim merkezi (üst çubuktaki zil) ─────────────────────────────────────
   Renkler token'dan: sabit hex yazılırsa karanlık modda beyaz panel kalır
   (bkz. CLAUDE.md, tema kuralı). */
.bk-rozet {
    background: var(--ik-danger);
    color: #fff;                      /* kırmızı zemin üstünde kasıtlı kontrast */
    font-size: .65rem;
    padding: .2rem .35rem;
    min-width: 1.15rem;
}

.bk-menu {
    width: min(24rem, calc(100vw - 1.5rem));
    background: var(--ik-surface);
    border-color: var(--ik-border);
}

.bk-baslik,
.bk-alt {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    padding: .6rem .85rem;
    color: var(--ik-text);
}

.bk-baslik { border-bottom: 1px solid var(--ik-border); }
.bk-alt    { border-top: 1px solid var(--ik-border); }

/* Liste kendi içinde kayar: 15 bildirim menüyü ekran dışına taşırıyordu. */
.bk-liste {
    max-height: 22rem;
    overflow-y: auto;
}

.bk-satir {
    display: block;
    padding: .6rem .85rem;
    border-bottom: 1px solid var(--ik-border);
    color: var(--ik-text);
}

.bk-satir:last-child { border-bottom: 0; }
.bk-satir:hover      { background: var(--ik-surface-2); }

/* Okunmamış: sol kenarda ince bir şerit. Kalın renk zemini uzun listede yoruyordu. */
.bk-yeni { border-left: 3px solid var(--ik-primary); }

.bk-ust {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    font-size: .78rem;
    color: var(--ik-text-muted);
}

.bk-olay  { font-weight: 600; }
.bk-zaman { white-space: nowrap; }

.bk-konu {
    font-size: .88rem;
    margin-top: .15rem;
    /* Konu 250 karaktere kadar olabilir; menüde iki satırla sınırlanır. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bk-bos {
    padding: 1.5rem .85rem;
    text-align: center;
    color: var(--ik-text-muted);
    font-size: .88rem;
}

/* ── Toplu işlem çubuğu (Onaylar, İzinler, Talepler, Ek Ödemeler, Kullanıcılar) ──
   Çubuk GİZLENMEZ, yalnız içeriği değişir: seçim yokken ipucu, seçim varken denetimler.
   Belirip kaybolan bir şerit altındaki listeyi aşağı kaydırıyor, kullanıcı tam da
   tıkladığı satırı kaybediyordu.

   İKİ DURUM AYNI IZGARA HÜCRESİNDE durur, yani çubuğun yüksekliği daima ikisinin
   BÜYÜĞÜ kadardır ve duruma göre değişmez. Yalnız min-height yetmiyordu: dar ekranda
   ipucu ile düğmeler farklı sayıda satıra sarıyor ve liste yine oynuyordu (ölçüldü).
   Gizleme display ile değil visibility ile: display:none kutuyu layout'tan çıkarır,
   yükseklik yine görünen tarafa düşerdi.

   Davranış: wwwroot/js/topluOnay.js → cubukBagla. */
.toplu-cubuk {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    min-height: 47px;
}

.toplu-cubuk > .toplu-cubuk-ipucu,
.toplu-cubuk > .toplu-cubuk-islem {
    grid-area: 1 / 1;
}

.toplu-cubuk-gizli {
    visibility: hidden;
}

/* Bildirim bağlantısıyla gelinen satırın geçici vurgusu (bkz. js/kayitOdak.js).
   Renkler token: karanlık modda da okunur kalsın. */
.tabulator-row.ik-odak-vurgu {
    background: var(--ik-warning-soft) !important;
    box-shadow: inset 3px 0 0 var(--ik-warning);
    transition: background .4s ease;
}

/* ================================================
   TABULATOR: karanlık modda AÇIKTA KALAN son kurallar
   ------------------------------------------------
   Kütüphane temasındaki açık zeminli kurallar tema denetimiyle tarandı
   (bkz. scripts/tema-denetimi.py). Aşağıdakiler ezilmemiş tek kalanlardı:
   hücre içi açılır liste, aç/kapa anahtarı ve yazdırma tablosunun grup satırı.
   Kütüphane dosyasına DOKUNULMAZ, güncellemede kaybolur; ezme burada durur. */
[data-bs-theme="dark"] .tabulator-edit-select-list {
    background: var(--ik-surface);
    color: var(--ik-text);
    border: 1px solid var(--ik-border);
}
[data-bs-theme="dark"] .tabulator-edit-select-list .tabulator-edit-select-list-item {
    color: var(--ik-text);
}
[data-bs-theme="dark"] .tabulator-edit-select-list .tabulator-edit-select-list-item.active,
[data-bs-theme="dark"] .tabulator-edit-select-list .tabulator-edit-select-list-item:hover {
    background: var(--ik-surface-2);
    color: var(--ik-text);
}
[data-bs-theme="dark"] .tabulator-toggle {
    background: var(--ik-surface-2);
    border-color: var(--ik-border);
}
[data-bs-theme="dark"] .tabulator-toggle .tabulator-toggle-switch {
    background: var(--ik-text-muted);
    border-color: var(--ik-border);
}
/* Yazdırma tablosu ekranda da kullanılabiliyor (Tabulator'ın print görünümü). */
[data-bs-theme="dark"] .tabulator-print-table .tabulator-print-table-group {
    background: var(--ik-surface-2);
    color: var(--ik-text);
    border-color: var(--ik-border);
}

/* ── Kart içi kaydırma: uzun liste kartı sayfayı uzatmasın ────────────────────
   Metrik kartlarının bir kısmı satır sayısı veriye bağlı listeler basıyor (SGK
   çıkış kodu dağılımı, yaş/kıdem dökümü gibi). Elli satırlık bir liste kartı
   ekranın birkaç boyuna çıkarıyor, altındaki kartlar görünmez oluyordu.

   EŞİK SATIR SAYISI DEĞİL YÜKSEKLİK. Satırı saymak Razor'da ya da JS'te ayrıca
   kural yazmayı gerektirirdi; max-height aşılmadığında zaten hiçbir şey olmaz,
   yani kısa listede kural kendiliğinden devre dışı kalır. Yükseklik on satır +
   başlık olacak şekilde ayarlı (table-sm satırı: içerik 1.5em + dolgu + çizgi).

   Sütun başlıkları kaydırma boyunca yerinde durur; yoksa kullanıcı aşağı inince
   hangi sayının ne olduğunu kaybediyor. Sticky başlığın zemini TOKEN: sabit beyaz
   yazılsaydı karanlık modda başlık şeridi beyaz kalırdı. */
.ik-kart-kaydir {
    --ik-kaydir-satir: 2.0625rem;
    --ik-kaydir-satir-sayisi: 10;
    max-height: calc(var(--ik-kaydir-satir) * (var(--ik-kaydir-satir-sayisi) + 1));
    overflow-y: auto;
}

.ik-kart-kaydir > table > thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--ik-surface);
}

/* Yazdırmada kırpma YOK: kağıtta kaydırma diye bir şey yok, kırpılan satır
   çıktıdan tamamen düşerdi. */
@media print {
    .ik-kart-kaydir {
        max-height: none;
        overflow: visible;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LİSANS PROFİLİ: "yalnız PDKS" kurulumunda İK4 Plus öğeleri KİLİTLİ görünür
   (bkz. js/lisansProfili.js). Yalnız görünümdür; kapı sunucudadır. Renkler token:
   karanlık modda da ezilir.
   ═══════════════════════════════════════════════════════════════════════════ */
.pdks-profili [data-ik4plus] {
    opacity: .55;
    cursor: not-allowed;
}
.pdks-profili [data-ik4plus] * { cursor: not-allowed; }

/* "sessiz": yetki matrisi satırları, onlarca rozet gürültü olurdu; yalnız soluk görünür. */
.pdks-profili [data-ik4plus]:not(.dropdown):not([data-ik4plus="sessiz"])::after {
    content: "İK4 Plus";
    display: inline-block;
    margin-left: .4rem;
    padding: .05rem .4rem;
    border-radius: .5rem;
    font-size: .65rem;
    font-weight: 600;
    line-height: 1.4;
    vertical-align: middle;
    background: var(--ik-primary-soft);
    color: var(--ik-primary);
    border: 1px solid var(--ik-border);
}

/* ── Grafik içi kaydırma: kategori sayısıyla büyüyen çubuk grafikler ──────────
   Yatay çubuk grafiklerin boyu kategori sayısından hesaplanıyor (çubuk başına
   28-70px). Yüz görevli bir kurumda "Görev Bazlı Maliyet" kartı 2800px'e
   çıkıyordu. Çubuklar okunur boyda kalsın diye yükseklik küçültülmez; kart
   sınırda durur, fazlası kartın içinde kaydırılır. Tablodaki .ik-kart-kaydir
   ile aynı mantık: sınır aşılmazsa hiçbir şey olmaz.

   Eskiden bazı ekranlarda satır içi max-height 400px/500px yazılıydı, bazılarında
   hiç yoktu; tek kural buraya toplandı. Özel bir kart farklı sınır isterse
   --ik-grafik-kaydir-yukseklik değişkenini ezsin, yeni sabit yazmasın.
   Yatay kaydırma kapalı: dikey çubuk çıkınca grafik daralıp yeniden çiziliyor,
   yatay çubuk da belirirse iki çubuk birbirini tetikliyordu.

   min-height !important BİLEREK: sınıf grafiğin kendi kutusuna konduğunda ApexCharts
   o kutuya satır içi "min-height: <grafik boyu>" yazıyor ve min-height max-height'ı
   yener; ölçüldü, 60 kategorili grafikte kart 1729px kaldı. Satır içi stili ancak
   !important ezer. Ayrı sarmalayıcıda zararsız (orada min-height zaten yok).

   scrollbar-gutter: grafik, kaydırma çubuğu belirmeden ÖNCEKİ genişlikte çiziliyor;
   çubuk sonradan çıkınca sağ kenar (değer etiketleri) çubuğun altında kalıyordu.
   Çubuğun yeri baştan ayrılınca grafik son genişliğinde çiziliyor. */
.ik-grafik-kaydir {
    max-height: var(--ik-grafik-kaydir-yukseklik, 28rem);
    min-height: 0 !important;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
}

@media print {
    .ik-grafik-kaydir {
        max-height: none;
        overflow: visible;
    }
}

/* ── Yardım (Views/Yardim) ────────────────────────────────────────────────────
   Makale gövdesi Markdig çıktısıdır (başlık, liste, tablo, görsel, alıntı). Sınıf
   ekleyemediğimiz için öğeler .yardim-icerik altında seçilir. Renkler token: makale
   karanlık temada da okunur kalmalı. Ekran görüntüleri açık temada çekilir; karanlıkta
   ince bir kenarla zeminden ayrılır. */
.yardim-menu { position: sticky; top: 1rem; }
.yardim-kategori {
    font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    color: var(--ik-text-muted); margin: 0 0 .35rem .25rem;
}
/* Yönetici rehberi başlığı: kullanım kategorilerinden ayrılsın diye üstte çizgi. */
.yardim-bolum {
    font-size: .85rem; font-weight: 600; color: var(--ik-text);
    border-top: 1px solid var(--ik-border); padding-top: .75rem; margin: .5rem 0 .75rem .25rem;
}
.yardim-kart { color: var(--ik-text); border-color: var(--ik-border); }
.yardim-kart:hover { background: var(--ik-surface-2); }

.yardim-icerik { max-width: 52rem; line-height: 1.65; }
.yardim-icerik h2 { font-size: 1.25rem; margin: 2rem 0 .75rem; padding-bottom: .35rem; border-bottom: 1px solid var(--ik-border); }
.yardim-icerik h3 { font-size: 1.05rem; margin: 1.5rem 0 .5rem; }
.yardim-icerik ol, .yardim-icerik ul { padding-left: 1.4rem; }
.yardim-icerik li { margin-bottom: .35rem; }
.yardim-icerik img {
    display: block; max-width: 100%; height: auto; margin: 1rem 0 .35rem;
    border: 1px solid var(--ik-border); border-radius: var(--ik-radius);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}
.yardim-icerik table { width: 100%; margin: 1rem 0; border-collapse: collapse; font-size: .925rem; }
.yardim-icerik th, .yardim-icerik td { border: 1px solid var(--ik-border); padding: .45rem .6rem; vertical-align: top; }
.yardim-icerik th { background: var(--ik-surface-2); font-weight: 600; }
/* "> **İpucu:** ..." kalıbı bilgi kutusu olarak görünür. */
.yardim-icerik blockquote {
    margin: 1rem 0; padding: .75rem 1rem; border-left: 4px solid var(--ik-primary);
    background: var(--ik-primary-soft); border-radius: 0 var(--ik-radius) var(--ik-radius) 0;
}
.yardim-icerik blockquote p:last-child { margin-bottom: 0; }
.yardim-icerik code, .yardim-icerik kbd {
    background: var(--ik-surface-2); border: 1px solid var(--ik-border); border-radius: var(--ik-radius-sm);
    padding: .05rem .35rem; font-size: .875em; color: var(--ik-text);
}

@media (max-width: 991.98px) {
    .yardim-menu { position: static; }
}
@media print {
    .yardim-icerik { max-width: none; }
    .yardim-icerik img { box-shadow: none; page-break-inside: avoid; }
}