/* ==========================================================================
   İş Takip Sistemi — Uygulama Kabuğu ve Tasarım Sistemi
   Bilgi İşlem Dairesi Başkanlığı / Sistem Donanım Şube Müdürlüğü

   Bu dosya Bootstrap 5.3'ün ÜZERİNE biner. Bootstrap'ın kendi değişkenleri
   (--bs-*) burada yeniden tanımlanır, böylece hazır bileşenler de temaya uyar.

   İçindekiler
   1.  Tasarım belirteçleri (token)
   2.  Vurgu renkleri (esnek tema)
   3.  Koyu tema
   4.  Yoğunluk (density)
   5.  Temel öğeler
   6.  Uygulama kabuğu: kenar çubuğu / üst çubuk / içerik
   7.  Sayfa başlığı ve araç çubuğu
   8.  Kart ve yüzeyler
   9.  İstatistik kutuları
   10. Tablolar
   11. Formlar
   12. Düğmeler
   13. Rozet ve durum etiketleri
   14. Boş / yükleniyor / hata durumları
   15. Bootstrap bileşen uyumları
   16. Yardımcı sınıflar
   17. Yazdırma
   ========================================================================== */

/* 1. TASARIM BELİRTEÇLERİ ================================================= */

:root {
    /* Yüzey ve metin — nötr slate ölçeği */
    --surface-0: #f6f7f9;   /* sayfa zemini */
    --surface-1: #ffffff;   /* kart */
    --surface-2: #f2f4f7;   /* içe gömülü alan */
    --surface-3: #e9edf2;   /* seçili / vurgulu satır */
    --surface-sunken: #eef1f5;

    --text-1: #10151c;      /* başlık */
    --text-2: #3d4756;      /* gövde */
    --text-3: #6b7685;      /* ikincil */
    --text-4: #98a2b0;      /* soluk */

    --line-1: #e3e8ef;      /* normal kenarlık */
    --line-2: #d0d7e2;      /* belirgin kenarlık */
    --line-3: #b9c2d0;      /* form kenarlığı */

    /* Anlamsal renkler — kurumsal, bastırılmış tonlar */
    --ok: #0f7b5f;
    --ok-bg: #e6f4ef;
    --ok-line: #a9d8c8;

    --warn: #9a6207;
    --warn-bg: #fdf3e2;
    --warn-line: #ecd0a0;

    --danger: #b3261e;
    --danger-bg: #fdeceb;
    --danger-line: #f0bcb8;

    --info: #0b6a8f;
    --info-bg: #e5f2f8;
    --info-line: #a9d3e5;

    --neutral: #5a6473;
    --neutral-bg: #eef0f3;
    --neutral-line: #d5dae1;

    /* Ölçekler */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-7: 32px;
    --sp-8: 40px;

    --fs-xs: 0.6875rem;  /* 11 */
    --fs-sm: 0.75rem;    /* 12 */
    --fs-md: 0.8125rem;  /* 13 */
    --fs-base: 0.875rem; /* 14 */
    --fs-lg: 1rem;       /* 16 */
    --fs-xl: 1.125rem;   /* 18 */
    --fs-2xl: 1.375rem;  /* 22 */
    --fs-3xl: 1.75rem;   /* 28 */

    --r-xs: 4px;
    --r-sm: 6px;
    --r-md: 8px;
    --r-lg: 10px;
    --r-xl: 14px;
    --r-pill: 999px;

    /* Gölgeler — yalnızca yüzen katmanlarda */
    --shadow-sm: 0 1px 2px rgba(16, 21, 28, .06);
    --shadow-md: 0 4px 12px rgba(16, 21, 28, .08), 0 1px 3px rgba(16, 21, 28, .05);
    --shadow-lg: 0 12px 32px rgba(16, 21, 28, .12), 0 2px 8px rgba(16, 21, 28, .06);
    --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);

    /* Kabuk ölçüleri */
    --sidebar-w: 256px;
    --sidebar-w-collapsed: 64px;
    --topbar-h: 56px;
    --content-pad: 24px;

    --ease: cubic-bezier(.32, .72, 0, 1);
    --dur: 180ms;

    /* Bootstrap köprüsü */
    --bs-body-bg: var(--surface-0);
    --bs-body-color: var(--text-2);
    --bs-body-font-size: var(--fs-base);
    --bs-border-color: var(--line-1);
    --bs-border-radius: var(--r-md);
    --bs-border-radius-sm: var(--r-sm);
    --bs-border-radius-lg: var(--r-lg);
    --bs-secondary-color: var(--text-3);
    --bs-emphasis-color: var(--text-1);
    --bs-heading-color: var(--text-1);
    --bs-link-color: var(--accent);
    --bs-link-hover-color: var(--accent-hover);
    --bs-font-sans-serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Eski sayfalardaki satır içi <style> blokları bu adları kullanıyor.
       Kırılmasınlar diye yeni belirteçlere bağlıyoruz. */
    --primary-color: var(--accent);
    --primary-dark: var(--accent-hover);
    --primary-light: var(--accent-soft-fg);
    --secondary-color: var(--text-2);
    --accent-color: var(--accent);
    --success-color: var(--ok);
    --warning-color: var(--warn);
    --danger-color: var(--danger);
    --info-color: var(--info);
    --light-color: var(--surface-2);
    --dark-color: var(--text-1);
    --text-primary: var(--text-1);
    --text-secondary: var(--text-3);
    --text-muted: var(--text-4);
    --border-color: var(--line-1);
    --border-radius: var(--r-lg);
    --border-radius-sm: var(--r-sm);
    --border-radius-lg: var(--r-xl);
    --box-shadow: var(--shadow-sm);
    --box-shadow-md: var(--shadow-md);
    --box-shadow-lg: var(--shadow-lg);
    --box-shadow-xl: var(--shadow-lg);
    --transition: all var(--dur) var(--ease);
}

/* 2. VURGU RENKLERİ (esnek tema) =========================================
   <html data-accent="..."> ile değiştirilir; app.js localStorage'da saklar. */

:root,
[data-accent="lacivert"] {
    --accent: #1f5fa9;
    --accent-hover: #17497f;
    --accent-fg: #ffffff;
    --accent-soft: #e8f0fa;
    --accent-soft-fg: #1f5fa9;
}

[data-accent="okyanus"] {
    --accent: #0d7490;
    --accent-hover: #095c73;
    --accent-fg: #ffffff;
    --accent-soft: #e2f2f6;
    --accent-soft-fg: #0d7490;
}

[data-accent="zumrut"] {
    --accent: #0f7b5f;
    --accent-hover: #0b604a;
    --accent-fg: #ffffff;
    --accent-soft: #e5f3ef;
    --accent-soft-fg: #0f7b5f;
}

[data-accent="bordo"] {
    --accent: #9d2235;
    --accent-hover: #7d1a2a;
    --accent-fg: #ffffff;
    --accent-soft: #f8e9eb;
    --accent-soft-fg: #9d2235;
}

[data-accent="mor"] {
    --accent: #5b4bbd;
    --accent-hover: #473a96;
    --accent-fg: #ffffff;
    --accent-soft: #eeecfa;
    --accent-soft-fg: #5b4bbd;
}

[data-accent="antrasit"] {
    --accent: #384252;
    --accent-hover: #262e3a;
    --accent-fg: #ffffff;
    --accent-soft: #eceff3;
    --accent-soft-fg: #384252;
}

/* 3. KOYU TEMA =========================================================== */

[data-bs-theme="dark"] {
    --surface-0: #0e1218;
    --surface-1: #161b23;
    --surface-2: #1c222c;
    --surface-3: #262e3a;
    --surface-sunken: #11161d;

    --text-1: #eef1f6;
    --text-2: #c2cad6;
    --text-3: #8d97a6;
    --text-4: #69737f;

    --line-1: #242c37;
    --line-2: #303a47;
    --line-3: #3c4757;

    --ok: #46c39b;
    --ok-bg: #0f2a24;
    --ok-line: #1d5445;

    --warn: #e0a54a;
    --warn-bg: #2c2214;
    --warn-line: #574227;

    --danger: #f08279;
    --danger-bg: #2e1817;
    --danger-line: #5c2f2b;

    --info: #56b4d8;
    --info-bg: #10262f;
    --info-line: #214c5e;

    --neutral: #98a2b0;
    --neutral-bg: #1f252f;
    --neutral-line: #333c49;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .3);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .35);

    color-scheme: dark;
}

[data-bs-theme="dark"][data-accent="lacivert"],
[data-bs-theme="dark"]:not([data-accent]) {
    --accent: #5a9bea;
    --accent-hover: #7db2f0;
    --accent-fg: #07121f;
    --accent-soft: #14283f;
    --accent-soft-fg: #8dbdf3;
}

[data-bs-theme="dark"][data-accent="okyanus"] {
    --accent: #3fb6d8;
    --accent-hover: #63c6e3;
    --accent-fg: #04181f;
    --accent-soft: #0f2c36;
    --accent-soft-fg: #7ed2e8;
}

[data-bs-theme="dark"][data-accent="zumrut"] {
    --accent: #3fbe94;
    --accent-hover: #62cda9;
    --accent-fg: #04201a;
    --accent-soft: #0f2e26;
    --accent-soft-fg: #7ad6b6;
}

[data-bs-theme="dark"][data-accent="bordo"] {
    --accent: #e0697c;
    --accent-hover: #ea8697;
    --accent-fg: #240810;
    --accent-soft: #33151c;
    --accent-soft-fg: #f0a0ac;
}

[data-bs-theme="dark"][data-accent="mor"] {
    --accent: #8f7fe8;
    --accent-hover: #a698ee;
    --accent-fg: #100a2a;
    --accent-soft: #211d3c;
    --accent-soft-fg: #b3a8f2;
}

[data-bs-theme="dark"][data-accent="antrasit"] {
    --accent: #9aa6b8;
    --accent-hover: #b3bdcc;
    --accent-fg: #0e1218;
    --accent-soft: #232b36;
    --accent-soft-fg: #b3bdcc;
}

/* 4. YOĞUNLUK ============================================================ */

[data-density="compact"] {
    --sp-4: 12px;
    --sp-5: 14px;
    --sp-6: 18px;
    --content-pad: 16px;
    --fs-base: 0.8125rem;
    --bs-body-font-size: 0.8125rem;
}

[data-density="compact"] .card-pad,
[data-density="compact"] .card-body {
    padding: var(--sp-4);
}

[data-density="compact"] .table > :not(caption) > * > * {
    padding-top: 6px;
    padding-bottom: 6px;
}

/* 5. TEMEL ÖĞELER ======================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--bs-font-sans-serif);
    font-size: var(--fs-base);
    line-height: 1.55;
    color: var(--text-2);
    background: var(--surface-0);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "cv05" 1, "ss01" 1, "tnum" 0;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--text-1);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.011em;
    margin: 0 0 var(--sp-2);
}

h1, .h1 { font-size: var(--fs-3xl); letter-spacing: -0.02em; }
h2, .h2 { font-size: var(--fs-2xl); letter-spacing: -0.016em; }
h3, .h3 { font-size: var(--fs-xl); }
h4, .h4 { font-size: var(--fs-lg); }
h5, .h5 { font-size: var(--fs-base); }
h6, .h6 { font-size: var(--fs-md); }

a {
    color: var(--accent);
    text-decoration: none;
    transition: color var(--dur) var(--ease);
}

a:hover { color: var(--accent-hover); }

hr {
    border: 0;
    border-top: 1px solid var(--line-1);
    opacity: 1;
    margin: var(--sp-4) 0;
}

code, kbd, pre, samp,
.tabular {
    font-variant-numeric: tabular-nums;
}

code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.85em;
    background: var(--surface-2);
    border: 1px solid var(--line-1);
    border-radius: var(--r-xs);
    padding: 1px 5px;
    color: var(--text-1);
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--r-xs);
}

::selection {
    background: color-mix(in srgb, var(--accent) 24%, transparent);
    color: var(--text-1);
}

/* Kaydırma çubuğu */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--line-2) transparent;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--line-2);
    border: 3px solid transparent;
    background-clip: content-box;
    border-radius: var(--r-pill);
}
::-webkit-scrollbar-thumb:hover { background-color: var(--line-3); background-clip: content-box; }

/* İçeriğe atla bağlantısı */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 3000;
    background: var(--accent);
    color: var(--accent-fg);
    padding: 10px 16px;
    border-radius: 0 0 var(--r-md) 0;
    font-weight: 600;
}

.skip-link:focus {
    left: 0;
    color: var(--accent-fg);
}

/* 6. UYGULAMA KABUĞU ===================================================== */

.app {
    min-height: 100vh;
    min-height: 100dvh;
}

/* --- Kenar çubuğu --- */

.app-sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width: var(--sidebar-w);
    z-index: 1045;
    display: flex;
    flex-direction: column;
    background: var(--surface-1);
    border-right: 1px solid var(--line-1);
    transition: width var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.sidebar-head {
    height: var(--topbar-h);
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding-inline: 14px;
    border-bottom: 1px solid var(--line-1);
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: var(--text-1);
    font-weight: 650;
    font-size: var(--fs-base);
    letter-spacing: -0.015em;
}

.brand:hover { color: var(--text-1); }

.brand-mark {
    flex: none;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: var(--r-sm);
    background: var(--accent);
    color: var(--accent-fg);
    font-size: 14px;
}

.brand-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.brand-text small {
    font-size: var(--fs-xs);
    color: var(--text-4);
    font-weight: 500;
    letter-spacing: .02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--sp-3) 10px var(--sp-4);
}

.nav-section + .nav-section { margin-top: var(--sp-4); }

.nav-section-title {
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-4);
    padding: 0 10px var(--sp-2);
    white-space: nowrap;
    overflow: hidden;
}

.nav-link-app {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    margin-bottom: 1px;
    border-radius: var(--r-sm);
    color: var(--text-2);
    font-size: var(--fs-md);
    font-weight: 500;
    white-space: nowrap;
    position: relative;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.nav-link-app .nav-ico {
    flex: none;
    width: 18px;
    text-align: center;
    font-size: 14px;
    color: var(--text-3);
    transition: color var(--dur) var(--ease);
}

.nav-link-app .nav-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-link-app:hover {
    background: var(--surface-2);
    color: var(--text-1);
}

.nav-link-app:hover .nav-ico { color: var(--text-2); }

.nav-link-app.is-active {
    background: var(--accent-soft);
    color: var(--accent-soft-fg);
    font-weight: 600;
}

.nav-link-app.is-active .nav-ico { color: var(--accent-soft-fg); }

.nav-link-app.is-active::before {
    content: "";
    position: absolute;
    inset-inline-start: -10px;
    top: 50%;
    translate: 0 -50%;
    width: 3px;
    height: 18px;
    border-radius: 0 3px 3px 0;
    background: var(--accent);
}

.nav-count {
    flex: none;
    font-size: var(--fs-xs);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-3);
    background: var(--surface-2);
    border: 1px solid var(--line-1);
    border-radius: var(--r-pill);
    padding: 0 6px;
    min-width: 20px;
    text-align: center;
}

.nav-link-app.is-active .nav-count {
    background: var(--surface-1);
    border-color: var(--accent-line, var(--line-2));
    color: var(--accent-soft-fg);
}

.sidebar-foot {
    flex: none;
    border-top: 1px solid var(--line-1);
    padding: 10px;
}

/* Daraltılmış (ikon rayı) durumu — yalnız masaüstü */
@media (min-width: 992px) {
    .app-sidebar { transform: none !important; }

    [data-sidebar="collapsed"] .app-sidebar { width: var(--sidebar-w-collapsed); }

    [data-sidebar="collapsed"] .brand-text,
    [data-sidebar="collapsed"] .nav-label,
    [data-sidebar="collapsed"] .nav-count,
    [data-sidebar="collapsed"] .nav-section-title,
    [data-sidebar="collapsed"] .sidebar-foot .user-meta {
        display: none;
    }

    [data-sidebar="collapsed"] .sidebar-head { justify-content: center; padding-inline: 0; }
    [data-sidebar="collapsed"] .nav-link-app { justify-content: center; padding-inline: 0; }
    [data-sidebar="collapsed"] .nav-section + .nav-section {
        margin-top: var(--sp-3);
        padding-top: var(--sp-3);
        border-top: 1px solid var(--line-1);
    }
    [data-sidebar="collapsed"] .nav-link-app.is-active::before { display: none; }
    [data-sidebar="collapsed"] .sidebar-foot .user-chip { justify-content: center; }
}

/* Mobil: çekmece */
@media (max-width: 991.98px) {
    .app-sidebar {
        transform: translateX(-100%);
        box-shadow: var(--shadow-lg);
    }

    [data-drawer="open"] .app-sidebar { transform: translateX(0); }

    .drawer-scrim {
        position: fixed;
        inset: 0;
        z-index: 1040;
        background: rgba(8, 11, 16, .5);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
    }

    [data-drawer="open"] .drawer-scrim { opacity: 1; visibility: visible; }
}

/* --- Ana sütun --- */

.app-main {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    margin-inline-start: var(--sidebar-w);
    transition: margin var(--dur) var(--ease);
}

@media (min-width: 992px) {
    [data-sidebar="collapsed"] .app-main { margin-inline-start: var(--sidebar-w-collapsed); }
}

@media (max-width: 991.98px) {
    .app-main { margin-inline-start: 0; }
}

/* --- Üst çubuk --- */

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    height: var(--topbar-h);
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding-inline: var(--content-pad);
    background: color-mix(in srgb, var(--surface-1) 88%, transparent);
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid var(--line-1);
}

@supports not (backdrop-filter: blur(1px)) {
    .app-topbar { background: var(--surface-1); }
}

.icon-btn {
    flex: none;
    width: 32px;
    height: 32px;
    display: inline-grid;
    place-items: center;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--text-3);
    font-size: 14px;
    cursor: pointer;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
        border-color var(--dur) var(--ease);
}

.icon-btn:hover {
    background: var(--surface-2);
    border-color: var(--line-1);
    color: var(--text-1);
}

.icon-btn.is-on {
    background: var(--accent-soft);
    border-color: transparent;
    color: var(--accent-soft-fg);
}

/* Kırıntı yolu */

/* Üst çubuktaki esnek öğelerin daralabilmesi için min-width:0 ŞART.
   Varsayılan `min-width:auto` ile uzun bir sayfa başlığı (ör. kullanıcı adı
   "Bilgi İşlem Dairesi Başkanlığı") kırıntı yolunu kısaltmak yerine tüm
   satırı genişletiyor ve mobilde sayfa yana kayıyordu. */
.app-topbar > nav { min-width: 0; }

.crumbs {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: var(--fs-md);
    color: var(--text-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.crumbs li {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.crumbs li + li::before {
    content: "/";
    color: var(--line-3);
    font-size: 12px;
}

.crumbs a { color: var(--text-3); }
.crumbs a:hover { color: var(--text-1); }

.crumbs .current {
    color: var(--text-1);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 575.98px) {
    .crumbs li:not(:last-child) { display: none; }
    .crumbs li + li::before { display: none; }
}

/* Üst çubuk arama */
.topbar-search {
    position: relative;
    margin-inline-start: auto;
    width: min(260px, 32vw);
}

.topbar-search .fa-magnifying-glass,
.topbar-search .fa-search {
    position: absolute;
    inset-inline-start: 10px;
    top: 50%;
    translate: 0 -50%;
    font-size: 12px;
    color: var(--text-4);
    pointer-events: none;
}

.topbar-search input {
    width: 100%;
    height: 32px;
    padding: 0 34px;
    font-size: var(--fs-md);
    color: var(--text-1);
    background: var(--surface-2);
    border: 1px solid var(--line-1);
    border-radius: var(--r-sm);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
        background var(--dur) var(--ease);
}

.topbar-search input::placeholder { color: var(--text-4); }

.topbar-search input:focus {
    outline: none;
    background: var(--surface-1);
    border-color: var(--accent);
    box-shadow: var(--ring);
}

.topbar-search kbd {
    position: absolute;
    inset-inline-end: 8px;
    top: 50%;
    translate: 0 -50%;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-4);
    background: var(--surface-1);
    border: 1px solid var(--line-2);
    border-radius: var(--r-xs);
    padding: 1px 5px;
    pointer-events: none;
}

.topbar-search input:focus ~ kbd { display: none; }

@media (max-width: 767.98px) {
    .topbar-search { display: none; }
}

/* Kullanıcı kartı */
.user-chip {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 4px 8px 4px 4px;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--text-1);
    cursor: pointer;
    max-width: 100%;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.user-chip:hover {
    background: var(--surface-2);
    border-color: var(--line-1);
    color: var(--text-1);
}

.user-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.25;
    text-align: start;
}

.user-meta strong {
    font-size: var(--fs-md);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 130px;
}

.user-meta span {
    font-size: var(--fs-xs);
    color: var(--text-4);
}

@media (max-width: 575.98px) {
    .app-topbar .user-meta { display: none; }
}

/* Avatar */
.avatar-img,
.avatar-icon {
    flex: none;
    border-radius: var(--r-pill);
    object-fit: cover;
    display: inline-grid;
    place-items: center;
    vertical-align: middle;
    border: 1px solid var(--line-1);
}

.avatar-icon {
    color: #fff;
    background: var(--neutral);
    border-color: transparent;
}

.avatar-admin   { background: #9d2235; }
.avatar-manager { background: #1f5fa9; }
.avatar-operator{ background: #0d7490; }
.avatar-user    { background: #5a6473; }

/* --- İçerik alanı --- */

.app-content {
    flex: 1 1 auto;
    padding: var(--content-pad);
    padding-bottom: var(--sp-8);
    width: 100%;
    max-width: 1680px;
    margin-inline: auto;
}

.app-content.is-narrow { max-width: 1100px; }
.app-content.is-wide { max-width: none; }

@media (max-width: 575.98px) {
    :root { --content-pad: 14px; }
}

/* 7. SAYFA BAŞLIĞI VE ARAÇ ÇUBUĞU ======================================== */

.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
    margin-bottom: var(--sp-5);
}

.page-head-text { min-width: 0; }

.page-title {
    font-size: var(--fs-2xl);
    font-weight: 650;
    letter-spacing: -0.02em;
    color: var(--text-1);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-sub {
    margin: 4px 0 0;
    font-size: var(--fs-md);
    color: var(--text-3);
    max-width: 70ch;
}

.page-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

@media (max-width: 575.98px) {
    .page-actions { width: 100%; }
    .page-actions > * { flex: 1 1 auto; }
}

/* Filtre / araç çubuğu */
.toolbar {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    padding: var(--sp-3);
    background: var(--surface-1);
    border: 1px solid var(--line-1);
    border-radius: var(--r-lg);
    margin-bottom: var(--sp-4);
}

.toolbar .form-control,
.toolbar .form-select { width: auto; min-width: 150px; }

.toolbar-spacer { margin-inline-start: auto; }

/* Sekmeler (segment) */
.segmented {
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    background: var(--surface-2);
    border: 1px solid var(--line-1);
    border-radius: var(--r-md);

    /* Seçenek sayısı arttığında (5-6 süzgeç) dar ekranda satırı taşırıp
       sayfayı yana kaydırıyordu. Artık kendi içinde kayar. */
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}

.segmented::-webkit-scrollbar { display: none; }

.segmented a,
.segmented button {
    border: 0;
    background: transparent;
    border-radius: var(--r-sm);
    padding: 5px 12px;
    font-size: var(--fs-md);
    font-weight: 500;
    color: var(--text-3);
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.segmented a:hover,
.segmented button:hover { color: var(--text-1); }

.segmented .is-active {
    background: var(--surface-1);
    color: var(--text-1);
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}

/* 8. KART VE YÜZEYLER ==================================================== */

.card,
.surface {
    background: var(--surface-1);
    border: 1px solid var(--line-1);
    border-radius: var(--r-lg);
    box-shadow: none;
    --bs-card-bg: var(--surface-1);
    --bs-card-border-color: var(--line-1);
    --bs-card-border-radius: var(--r-lg);
    --bs-card-inner-border-radius: calc(var(--r-lg) - 1px);
    --bs-card-cap-bg: transparent;
    --bs-card-color: var(--text-2);
    --bs-card-spacer-x: var(--sp-5);
    --bs-card-spacer-y: var(--sp-4);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    flex-wrap: wrap;
    padding: var(--sp-3) var(--sp-5);
    background: transparent;
    border-bottom: 1px solid var(--line-1);
    min-height: 48px;
}

.card-header h1, .card-header h2, .card-header h3,
.card-header h4, .card-header h5, .card-header h6 {
    font-size: var(--fs-base);
    font-weight: 600;
    margin: 0;
    color: var(--text-1);
}

.card-footer {
    padding: var(--sp-3) var(--sp-5);
    background: var(--surface-sunken);
    border-top: 1px solid var(--line-1);
    color: var(--text-3);
    font-size: var(--fs-md);
}

/* Kart içinde kart yok: iç içe kartları düz yüzeye indir */
.card .card {
    border-radius: var(--r-md);
    box-shadow: none;
}

.panel-sunken {
    background: var(--surface-sunken);
    border: 1px solid var(--line-1);
    border-radius: var(--r-md);
    padding: var(--sp-4);
}

/* Etiket/değer listesi — detay sayfaları için */
.kv {
    display: grid;
    grid-template-columns: minmax(120px, 34%) 1fr;
    gap: 1px;
    background: var(--line-1);
    border: 1px solid var(--line-1);
    border-radius: var(--r-md);
    overflow: hidden;
    font-size: var(--fs-md);
}

.kv > dt,
.kv > dd {
    background: var(--surface-1);
    padding: 9px var(--sp-3);
    margin: 0;
}

.kv > dt {
    color: var(--text-3);
    font-weight: 500;
    background: var(--surface-sunken);
}

.kv > dd { color: var(--text-1); font-weight: 500; word-break: break-word; }

@media (max-width: 575.98px) {
    .kv { grid-template-columns: 1fr; }
    .kv > dt { padding-bottom: 2px; }
}

/* Zaman çizelgesi */
.timeline {
    position: relative;
    margin: 0;
    padding: 0 0 0 22px;
    list-style: none;
}

.timeline::before {
    content: "";
    position: absolute;
    inset-block: 6px;
    inset-inline-start: 5px;
    width: 1px;
    background: var(--line-2);
}

.timeline > li {
    position: relative;
    padding-bottom: var(--sp-4);
}

.timeline > li::before {
    content: "";
    position: absolute;
    inset-inline-start: -22px;
    top: 6px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--surface-1);
    border: 2px solid var(--line-3);
}

.timeline > li.is-accent::before { border-color: var(--accent); }
.timeline > li:last-child { padding-bottom: 0; }

/* 9. İSTATİSTİK KUTULARI ================================================= */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
}

.stat {
    display: block;
    position: relative;
    padding: var(--sp-4);
    background: var(--surface-1);
    border: 1px solid var(--line-1);
    border-radius: var(--r-lg);
    color: inherit;
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

a.stat:hover {
    border-color: var(--line-3);
    color: inherit;
    transform: translateY(-1px);
}

.stat-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    margin-bottom: 10px;
}

.stat-label {
    font-size: var(--fs-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-3);
}

.stat-ico {
    flex: none;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: var(--r-sm);
    font-size: 13px;
    background: var(--neutral-bg);
    color: var(--neutral);
}

.stat-value {
    font-size: var(--fs-3xl);
    font-weight: 660;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--text-1);
    font-variant-numeric: tabular-nums;
}

.stat-foot {
    margin-top: 8px;
    font-size: var(--fs-sm);
    color: var(--text-3);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Renk türevleri — yalnızca ikon ve ince üst şerit renklenir */
.stat[data-tone]::after {
    content: "";
    position: absolute;
    inset-inline: -1px;
    top: -1px;
    height: 2px;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    background: var(--tone, var(--accent));
}

.stat[data-tone="accent"]  { --tone: var(--accent); }
.stat[data-tone="accent"]  .stat-ico { background: var(--accent-soft); color: var(--accent-soft-fg); }
.stat[data-tone="ok"]      { --tone: var(--ok); }
.stat[data-tone="ok"]      .stat-ico { background: var(--ok-bg); color: var(--ok); }
.stat[data-tone="warn"]    { --tone: var(--warn); }
.stat[data-tone="warn"]    .stat-ico { background: var(--warn-bg); color: var(--warn); }
.stat[data-tone="danger"]  { --tone: var(--danger); }
.stat[data-tone="danger"]  .stat-ico { background: var(--danger-bg); color: var(--danger); }
.stat[data-tone="info"]    { --tone: var(--info); }
.stat[data-tone="info"]    .stat-ico { background: var(--info-bg); color: var(--info); }
.stat[data-tone="neutral"] { --tone: var(--neutral); }

/* Mini ilerleme çubuğu */
.meter {
    height: 5px;
    border-radius: var(--r-pill);
    background: var(--surface-3);
    overflow: hidden;
    margin-top: 10px;
}

.meter > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--tone, var(--accent));
    transition: width 600ms var(--ease);
}

/* 10. TABLOLAR =========================================================== */

.table-wrap {
    border: 1px solid var(--line-1);
    border-radius: var(--r-lg);
    background: var(--surface-1);
    overflow: hidden;
}

.card > .table-wrap,
.card-body > .table-wrap {
    border: 0;
    border-radius: 0;
}

.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-2);
    --bs-table-border-color: var(--line-1);
    --bs-table-hover-bg: var(--surface-2);
    --bs-table-hover-color: var(--text-1);
    --bs-table-striped-bg: var(--surface-sunken);
    --bs-table-striped-color: var(--text-2);
    width: 100%;
    margin: 0;
    font-size: var(--fs-md);
    border-collapse: separate;
    border-spacing: 0;
}

.table > thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--surface-sunken);
    color: var(--text-3);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
    padding: 9px var(--sp-3);
    border-bottom: 1px solid var(--line-2);
    border-top: 0;
    vertical-align: middle;
}

.table > tbody td {
    padding: 10px var(--sp-3);
    border-top: 0;
    border-bottom: 1px solid var(--line-1);
    vertical-align: middle;
    color: var(--text-2);
}

.table > tbody tr:last-child td { border-bottom: 0; }

.table > tbody tr { transition: background var(--dur) var(--ease); }
.table-hover > tbody tr:hover > * { background: var(--surface-2); }

.table .num,
.table .text-end { font-variant-numeric: tabular-nums; }

.table .cell-primary {
    color: var(--text-1);
    font-weight: 600;
}

.table .cell-muted {
    color: var(--text-4);
    font-size: var(--fs-sm);
}

.table .cell-actions {
    width: 1%;
    white-space: nowrap;
    text-align: end;
}

/* Sıralanabilir başlık */
.table th[data-sort] {
    cursor: pointer;
    user-select: none;
}

.table th[data-sort]:hover { color: var(--text-1); }

.table th[data-sort]::after {
    content: "\f0dc";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 9px;
    margin-inline-start: 6px;
    opacity: .3;
}

.table th[data-sort][aria-sort="ascending"]::after  { content: "\f0de"; opacity: .9; }
.table th[data-sort][aria-sort="descending"]::after { content: "\f0dd"; opacity: .9; }

/* Yatay kaydırma ipucu */
@media (max-width: 767.98px) {
    .table-scroll { position: relative; }
    .table { min-width: 620px; }
}

/* Sayfalama */
.pagination {
    --bs-pagination-bg: var(--surface-1);
    --bs-pagination-color: var(--text-2);
    --bs-pagination-border-color: var(--line-1);
    --bs-pagination-hover-bg: var(--surface-2);
    --bs-pagination-hover-color: var(--text-1);
    --bs-pagination-hover-border-color: var(--line-2);
    --bs-pagination-active-bg: var(--accent);
    --bs-pagination-active-border-color: var(--accent);
    --bs-pagination-active-color: var(--accent-fg);
    --bs-pagination-disabled-bg: var(--surface-2);
    --bs-pagination-disabled-color: var(--text-4);
    --bs-pagination-disabled-border-color: var(--line-1);
    --bs-pagination-font-size: var(--fs-md);
    --bs-pagination-border-radius: var(--r-sm);
    --bs-pagination-focus-box-shadow: var(--ring);
}

/* 11. FORMLAR ============================================================ */

.form-label {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--text-2);
    margin-bottom: 5px;
}

.form-label .req { color: var(--danger); margin-inline-start: 2px; }

/* Zorunlu alan yıldızı. Birkaç form sayfasında ayrı ayrı tanımlıydı;
   burada tek yerde duruyor. Etiket metnine ayrıca "*" YAZMAYIN —
   ikisi birden olunca "Rapor Tarihi * *" gibi çift yıldız çıkıyor. */
.required-field::after {
    content: " *";
    color: var(--danger);
}

.form-text {
    font-size: var(--fs-sm);
    color: var(--text-3);
    margin-top: 4px;
}

.form-control,
.form-select {
    /* DİKKAT: `background` kısayolu kullanılmaz. Kısayol background-repeat'i
       `repeat`e döndürüyor ve .form-select'in ok simgesi kutunun içinde
       döşeniyordu (üst üste binmiş chevron'lar). */
    background-color: var(--surface-1);
    border: 1px solid var(--line-3);
    border-radius: var(--r-sm);
    color: var(--text-1);
    font-size: var(--fs-base);
    padding: 7px 11px;
    min-height: 36px;
    box-shadow: none;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.form-control-sm,
.form-select-sm {
    font-size: var(--fs-md);
    padding: 4px 9px;
    min-height: 30px;
}

.form-control::placeholder { color: var(--text-4); }

.form-control:focus,
.form-select:focus {
    background-color: var(--surface-1);
    border-color: var(--accent);
    box-shadow: var(--ring);
    color: var(--text-1);
}

.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
    background-color: var(--surface-2);
    color: var(--text-3);
    border-color: var(--line-1);
    cursor: not-allowed;
}

textarea.form-control { min-height: 84px; line-height: 1.55; }

.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236b7685' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 12px 9px;
    padding-inline-end: 32px;
}

[dir="rtl"] .form-select { background-position: left 11px center; }

[data-bs-theme="dark"] .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238d97a6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.form-check-input {
    background-color: var(--surface-1);
    border-color: var(--line-3);
    width: 1.05em;
    height: 1.05em;
    margin-top: .2em;
}

.form-check-input:checked {
    background-color: var(--accent);
    border-color: var(--accent);
}

.form-check-input:focus {
    border-color: var(--accent);
    box-shadow: var(--ring);
}

.form-check-label { font-size: var(--fs-base); color: var(--text-2); }

.input-group-text {
    background: var(--surface-2);
    border-color: var(--line-3);
    color: var(--text-3);
    font-size: var(--fs-md);
    border-radius: var(--r-sm);
}

.was-validated .form-control:invalid,
.form-control.is-invalid {
    border-color: var(--danger);
    background-image: none;
    padding-inline-end: 11px;
}

.was-validated .form-control:valid,
.form-control.is-valid {
    border-color: var(--ok);
    background-image: none;
    padding-inline-end: 11px;
}

.invalid-feedback { font-size: var(--fs-sm); color: var(--danger); }
.valid-feedback { font-size: var(--fs-sm); color: var(--ok); }

/* Alan grupları */
.fieldset {
    border: 1px solid var(--line-1);
    border-radius: var(--r-lg);
    padding: var(--sp-5);
    margin-bottom: var(--sp-4);
    background: var(--surface-1);
}

.fieldset > legend,
.fieldset-title {
    float: none;
    width: auto;
    font-size: var(--fs-md);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-3);
    margin-bottom: var(--sp-4);
    padding: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Dosya bırakma alanı */
.dropzone {
    border: 1.5px dashed var(--line-3);
    border-radius: var(--r-lg);
    background: var(--surface-sunken);
    padding: var(--sp-6);
    text-align: center;
    color: var(--text-3);
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
    cursor: pointer;
}

.dropzone:hover,
.dropzone.is-over {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent-soft-fg);
}

/* 12. DÜĞMELER =========================================================== */

.btn {
    --bs-btn-padding-y: 7px;
    --bs-btn-padding-x: 14px;
    --bs-btn-font-size: var(--fs-md);
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: var(--r-sm);
    --bs-btn-focus-box-shadow: var(--ring);
    --bs-btn-disabled-opacity: .5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    line-height: 1.4;
    white-space: nowrap;
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
        color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.btn-sm {
    --bs-btn-padding-y: 4px;
    --bs-btn-padding-x: 10px;
    --bs-btn-font-size: var(--fs-sm);
    --bs-btn-border-radius: var(--r-xs);
}

.btn-lg {
    --bs-btn-padding-y: 10px;
    --bs-btn-padding-x: 20px;
    --bs-btn-font-size: var(--fs-base);
    --bs-btn-border-radius: var(--r-md);
}

.btn:active { transform: translateY(.5px); }

.btn-primary {
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-color: var(--accent-fg);
    --bs-btn-hover-bg: var(--accent-hover);
    --bs-btn-hover-border-color: var(--accent-hover);
    --bs-btn-hover-color: var(--accent-fg);
    --bs-btn-active-bg: var(--accent-hover);
    --bs-btn-active-border-color: var(--accent-hover);
    --bs-btn-active-color: var(--accent-fg);
    --bs-btn-disabled-bg: var(--accent);
    --bs-btn-disabled-border-color: var(--accent);
    --bs-btn-disabled-color: var(--accent-fg);
}

/* İkincil = yüzey düğmesi */
.btn-secondary,
.btn-light,
.btn-outline-secondary {
    --bs-btn-bg: var(--surface-1);
    --bs-btn-border-color: var(--line-3);
    --bs-btn-color: var(--text-1);
    --bs-btn-hover-bg: var(--surface-2);
    --bs-btn-hover-border-color: var(--line-3);
    --bs-btn-hover-color: var(--text-1);
    --bs-btn-active-bg: var(--surface-3);
    --bs-btn-active-border-color: var(--line-3);
    --bs-btn-active-color: var(--text-1);
    --bs-btn-disabled-bg: var(--surface-2);
    --bs-btn-disabled-border-color: var(--line-1);
    --bs-btn-disabled-color: var(--text-4);
}

.btn-success {
    --bs-btn-bg: var(--ok);
    --bs-btn-border-color: var(--ok);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: color-mix(in srgb, var(--ok) 85%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--ok) 85%, #000);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: color-mix(in srgb, var(--ok) 78%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--ok) 78%, #000);
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: var(--ok);
    --bs-btn-disabled-border-color: var(--ok);
    --bs-btn-disabled-color: #fff;
}

.btn-danger {
    --bs-btn-bg: var(--danger);
    --bs-btn-border-color: var(--danger);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: color-mix(in srgb, var(--danger) 85%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--danger) 85%, #000);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: color-mix(in srgb, var(--danger) 78%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--danger) 78%, #000);
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: var(--danger);
    --bs-btn-disabled-border-color: var(--danger);
    --bs-btn-disabled-color: #fff;
}

.btn-warning {
    --bs-btn-bg: var(--warn);
    --bs-btn-border-color: var(--warn);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: color-mix(in srgb, var(--warn) 85%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--warn) 85%, #000);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: color-mix(in srgb, var(--warn) 78%, #000);
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: var(--warn);
    --bs-btn-disabled-border-color: var(--warn);
    --bs-btn-disabled-color: #fff;
}

.btn-info {
    --bs-btn-bg: var(--info);
    --bs-btn-border-color: var(--info);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: color-mix(in srgb, var(--info) 85%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--info) 85%, #000);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: color-mix(in srgb, var(--info) 78%, #000);
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: var(--info);
    --bs-btn-disabled-border-color: var(--info);
    --bs-btn-disabled-color: #fff;
}

.btn-outline-primary {
    --bs-btn-color: var(--accent);
    --bs-btn-border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    --bs-btn-bg: transparent;
    --bs-btn-hover-bg: var(--accent-soft);
    --bs-btn-hover-border-color: var(--accent);
    --bs-btn-hover-color: var(--accent-soft-fg);
    --bs-btn-active-bg: var(--accent);
    --bs-btn-active-border-color: var(--accent);
    --bs-btn-active-color: var(--accent-fg);
    --bs-btn-disabled-color: var(--text-4);
    --bs-btn-disabled-border-color: var(--line-1);
}

.btn-outline-danger {
    --bs-btn-color: var(--danger);
    --bs-btn-border-color: var(--danger-line);
    --bs-btn-bg: transparent;
    --bs-btn-hover-bg: var(--danger-bg);
    --bs-btn-hover-border-color: var(--danger);
    --bs-btn-hover-color: var(--danger);
    --bs-btn-active-bg: var(--danger);
    --bs-btn-active-border-color: var(--danger);
    --bs-btn-active-color: #fff;
}

.btn-outline-success {
    --bs-btn-color: var(--ok);
    --bs-btn-border-color: var(--ok-line);
    --bs-btn-bg: transparent;
    --bs-btn-hover-bg: var(--ok-bg);
    --bs-btn-hover-border-color: var(--ok);
    --bs-btn-hover-color: var(--ok);
    --bs-btn-active-bg: var(--ok);
    --bs-btn-active-border-color: var(--ok);
    --bs-btn-active-color: #fff;
}

.btn-outline-info {
    --bs-btn-color: var(--info);
    --bs-btn-border-color: var(--info-line);
    --bs-btn-bg: transparent;
    --bs-btn-hover-bg: var(--info-bg);
    --bs-btn-hover-border-color: var(--info);
    --bs-btn-hover-color: var(--info);
}

.btn-outline-warning {
    --bs-btn-color: var(--warn);
    --bs-btn-border-color: var(--warn-line);
    --bs-btn-bg: transparent;
    --bs-btn-hover-bg: var(--warn-bg);
    --bs-btn-hover-border-color: var(--warn);
    --bs-btn-hover-color: var(--warn);
}

.btn-link {
    --bs-btn-color: var(--accent);
    --bs-btn-hover-color: var(--accent-hover);
    text-decoration: none;
}

/* Yalnız ikonlu tablo eylemleri */
.btn-icon {
    --bs-btn-padding-x: 0;
    width: 30px;
    height: 30px;
    padding: 0;
}

.btn-icon.btn-sm { width: 27px; height: 27px; }

/* Yükleniyor durumu */
.btn.is-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.btn.is-loading::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    color: var(--bs-btn-color);
    animation: spin .6s linear infinite;
}

@keyframes spin { to { rotate: 360deg; } }

/* 13. ROZET VE DURUM ETİKETLERİ ========================================== */

.pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: var(--r-pill);
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
    border: 1px solid transparent;
}

.pill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

.pill.no-dot::before { display: none; }

.pill-ok      { background: var(--ok-bg);      color: var(--ok);      border-color: var(--ok-line); }
.pill-warn    { background: var(--warn-bg);    color: var(--warn);    border-color: var(--warn-line); }
.pill-danger  { background: var(--danger-bg);  color: var(--danger);  border-color: var(--danger-line); }
.pill-info    { background: var(--info-bg);    color: var(--info);    border-color: var(--info-line); }
.pill-neutral { background: var(--neutral-bg); color: var(--neutral); border-color: var(--neutral-line); }
.pill-accent  { background: var(--accent-soft);color: var(--accent-soft-fg); border-color: transparent; }

/* Bootstrap rozetleri de aynı dile çekilsin */
.badge {
    font-size: var(--fs-sm);
    font-weight: 600;
    padding: .28em .6em;
    border-radius: var(--r-xs);
    letter-spacing: 0;
}

.badge.rounded-pill { border-radius: var(--r-pill); padding-inline: .7em; }

.badge.bg-primary   { background: var(--accent) !important; color: var(--accent-fg) !important; }
.badge.bg-success   { background: var(--ok) !important; color: #fff !important; }
.badge.bg-danger    { background: var(--danger) !important; color: #fff !important; }
.badge.bg-warning   { background: var(--warn) !important; color: #fff !important; }
.badge.bg-info      { background: var(--info) !important; color: #fff !important; }
.badge.bg-secondary { background: var(--neutral) !important; color: #fff !important; }
.badge.bg-light     { background: var(--surface-2) !important; color: var(--text-2) !important; }
.badge.bg-dark      { background: var(--text-1) !important; color: var(--surface-1) !important; }

/* 14. BOŞ / YÜKLENİYOR / HATA DURUMLARI ================================== */

.empty {
    text-align: center;
    padding: var(--sp-8) var(--sp-5);
    color: var(--text-3);
}

.empty-ico {
    width: 48px;
    height: 48px;
    margin: 0 auto var(--sp-3);
    display: grid;
    place-items: center;
    border-radius: var(--r-lg);
    background: var(--surface-2);
    border: 1px solid var(--line-1);
    color: var(--text-4);
    font-size: 19px;
}

.empty h3 {
    font-size: var(--fs-lg);
    color: var(--text-1);
    margin-bottom: 4px;
}

.empty p {
    font-size: var(--fs-md);
    margin: 0 auto var(--sp-4);
    max-width: 44ch;
}

.empty.is-inline { padding: var(--sp-5) var(--sp-3); }
.empty.is-inline .empty-ico { width: 36px; height: 36px; font-size: 15px; }

/* İskelet */
.skeleton {
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
    background-size: 400% 100%;
    animation: shimmer 1.4s ease infinite;
    border-radius: var(--r-xs);
    color: transparent !important;
}

@keyframes shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* Uyarı kutuları */
.alert {
    --bs-alert-border-radius: var(--r-md);
    --bs-alert-padding-y: 11px;
    --bs-alert-padding-x: 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: var(--fs-md);
    border-width: 1px;
    border-style: solid;
    margin-bottom: var(--sp-4);
}

.alert > .btn-close { margin-inline-start: auto; padding: .7rem; }

.alert-success { background: var(--ok-bg);      border-color: var(--ok-line);      color: var(--ok); }
.alert-danger  { background: var(--danger-bg);  border-color: var(--danger-line);  color: var(--danger); }
.alert-warning { background: var(--warn-bg);    border-color: var(--warn-line);    color: var(--warn); }
.alert-info    { background: var(--info-bg);    border-color: var(--info-line);    color: var(--info); }
.alert-primary { background: var(--accent-soft);border-color: transparent;         color: var(--accent-soft-fg); }
.alert-secondary { background: var(--neutral-bg); border-color: var(--neutral-line); color: var(--neutral); }

/* Bildirim (toast) yığını */
.toast-stack {
    position: fixed;
    inset-block-end: var(--sp-5);
    inset-inline-end: var(--sp-5);
    z-index: 2050;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    max-width: min(360px, calc(100vw - 2 * var(--sp-5)));
}

.app-toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 14px;
    background: var(--surface-1);
    border: 1px solid var(--line-2);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
    font-size: var(--fs-md);
    color: var(--text-1);
    animation: toast-in 220ms var(--ease);
}

.app-toast[data-tone="ok"]     { border-inline-start: 3px solid var(--ok); }
.app-toast[data-tone="danger"] { border-inline-start: 3px solid var(--danger); }
.app-toast[data-tone="warn"]   { border-inline-start: 3px solid var(--warn); }
.app-toast[data-tone="info"]   { border-inline-start: 3px solid var(--info); }

@keyframes toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

/* 15. BOOTSTRAP BİLEŞEN UYUMLARI ========================================= */

.dropdown-menu {
    --bs-dropdown-bg: var(--surface-1);
    --bs-dropdown-border-color: var(--line-2);
    --bs-dropdown-border-radius: var(--r-md);
    --bs-dropdown-link-color: var(--text-2);
    --bs-dropdown-link-hover-bg: var(--surface-2);
    --bs-dropdown-link-hover-color: var(--text-1);
    --bs-dropdown-link-active-bg: var(--accent-soft);
    --bs-dropdown-link-active-color: var(--accent-soft-fg);
    --bs-dropdown-divider-bg: var(--line-1);
    --bs-dropdown-header-color: var(--text-4);
    --bs-dropdown-font-size: var(--fs-md);
    --bs-dropdown-padding-y: 5px;
    --bs-dropdown-item-padding-y: 6px;
    --bs-dropdown-item-padding-x: 12px;
    box-shadow: var(--shadow-lg);
    min-width: 200px;
}

.dropdown-item {
    border-radius: var(--r-xs);
    display: flex;
    align-items: center;
    gap: 9px;
    margin-inline: 5px;
    width: auto;
}

.dropdown-item.text-danger:hover {
    background: var(--danger-bg);
    color: var(--danger) !important;
}

.dropdown-header {
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.modal-content {
    background: var(--surface-1);
    border: 1px solid var(--line-2);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg);
}

.modal-header,
.modal-footer {
    border-color: var(--line-1);
    padding: var(--sp-4) var(--sp-5);
}

.modal-body { padding: var(--sp-5); }
.modal-title { font-size: var(--fs-lg); font-weight: 650; }
.modal-backdrop.show { opacity: .5; }

.btn-close {
    --bs-btn-close-focus-shadow: var(--ring);
    opacity: .5;
}

.btn-close:hover { opacity: 1; }
[data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(2); }

.nav-tabs {
    --bs-nav-tabs-border-color: var(--line-1);
    --bs-nav-tabs-link-active-bg: transparent;
    --bs-nav-tabs-link-active-color: var(--text-1);
    --bs-nav-tabs-link-active-border-color: transparent transparent var(--accent);
    --bs-nav-tabs-link-hover-border-color: transparent;
    --bs-nav-link-font-size: var(--fs-md);
    --bs-nav-link-color: var(--text-3);
    --bs-nav-link-hover-color: var(--text-1);
    --bs-nav-tabs-border-width: 2px;
    gap: 2px;
    margin-bottom: var(--sp-4);
}

.nav-tabs .nav-link {
    border-width: 0 0 2px;
    border-radius: 0;
    padding: 8px 14px;
    font-weight: 600;
}

.nav-pills {
    --bs-nav-pills-border-radius: var(--r-sm);
    --bs-nav-pills-link-active-bg: var(--accent);
    --bs-nav-pills-link-active-color: var(--accent-fg);
    --bs-nav-link-font-size: var(--fs-md);
    --bs-nav-link-color: var(--text-3);
}

.list-group {
    --bs-list-group-bg: transparent;
    --bs-list-group-border-color: var(--line-1);
    --bs-list-group-color: var(--text-2);
    --bs-list-group-action-hover-bg: var(--surface-2);
    --bs-list-group-action-hover-color: var(--text-1);
    --bs-list-group-active-bg: var(--accent-soft);
    --bs-list-group-active-border-color: var(--line-1);
    --bs-list-group-active-color: var(--accent-soft-fg);
    --bs-list-group-item-padding-y: 10px;
    --bs-list-group-border-radius: var(--r-md);
}

.list-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 10px 0;
    border-bottom: 1px solid var(--line-1);
    color: inherit;
}

.list-row:last-child { border-bottom: 0; }
a.list-row:hover { color: inherit; }

.list-row-body { flex: 1 1 auto; min-width: 0; }

.list-row-title {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--text-1);
    margin: 0 0 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.list-row-sub {
    font-size: var(--fs-sm);
    color: var(--text-3);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

a.list-row .list-row-title { transition: color var(--dur) var(--ease); }
a.list-row:hover .list-row-title { color: var(--accent); }

.progress {
    --bs-progress-bg: var(--surface-3);
    --bs-progress-bar-bg: var(--accent);
    --bs-progress-height: 6px;
    --bs-progress-border-radius: var(--r-pill);
    --bs-progress-font-size: var(--fs-xs);
}

.tooltip { --bs-tooltip-bg: var(--text-1); --bs-tooltip-color: var(--surface-1); --bs-tooltip-font-size: var(--fs-sm); }
.popover { --bs-popover-bg: var(--surface-1); --bs-popover-border-color: var(--line-2); --bs-popover-font-size: var(--fs-md); }

.accordion {
    --bs-accordion-bg: var(--surface-1);
    --bs-accordion-border-color: var(--line-1);
    --bs-accordion-border-radius: var(--r-lg);
    --bs-accordion-btn-color: var(--text-1);
    --bs-accordion-btn-bg: var(--surface-1);
    --bs-accordion-active-bg: var(--accent-soft);
    --bs-accordion-active-color: var(--accent-soft-fg);
    --bs-accordion-btn-focus-box-shadow: var(--ring);
    --bs-accordion-color: var(--text-2);
}

.offcanvas {
    --bs-offcanvas-bg: var(--surface-1);
    --bs-offcanvas-border-color: var(--line-1);
    --bs-offcanvas-color: var(--text-2);
}

/* 16. YARDIMCI SINIFLAR ================================================== */

.text-muted { color: var(--text-3) !important; }
.text-faint { color: var(--text-4) !important; }
.text-strong { color: var(--text-1) !important; font-weight: 600; }
.text-primary { color: var(--accent) !important; }
.text-success { color: var(--ok) !important; }
.text-danger  { color: var(--danger) !important; }
.text-warning { color: var(--warn) !important; }
.text-info    { color: var(--info) !important; }

.bg-body-surface { background: var(--surface-1) !important; }
.bg-sunken { background: var(--surface-sunken) !important; }
.border-app { border: 1px solid var(--line-1) !important; }

.fs-xs { font-size: var(--fs-xs) !important; }
.fs-sm { font-size: var(--fs-sm) !important; }
.fs-md { font-size: var(--fs-md) !important; }

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--sp-4);
}

.stack > * + * { margin-top: var(--sp-4); }

/* Yazı tipi yüklenene kadar düzen kaymasın */
.chart-box {
    position: relative;
    width: 100%;
    height: 300px;
}

.chart-box.is-short { height: 220px; }

/* Hareket tercihi */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* 16b. RAPOR FORMLARI ==================================================== */

/* İmza tuvali — hurda ve gerekçeli rapor formları ortak kullanır.
   Daha önce her sayfa kendi satır içi stilini taşıyordu. */
.signature-pad {
    display: block;
    width: 100%;
    max-width: 320px;
    height: 120px;
    background: #fff;
    border: 1px dashed var(--line-2);
    border-radius: var(--r-md);
    cursor: crosshair;
    touch-action: none;
}

.signature-pad:focus-visible { outline: none; box-shadow: var(--ring); }

.signature-preview {
    max-width: 200px;
    max-height: 80px;
    background: #fff;
    border: 1px solid var(--line-1);
    border-radius: var(--r-sm);
    padding: 4px;
}

/* Yinelenen satır grubu (rapordaki cihaz/demirbaş kalemleri) */
.repeat-item {
    position: relative;
    border: 1px solid var(--line-1);
    border-radius: var(--r-lg);
    padding: var(--sp-4);
    background: var(--surface-2);
}

.repeat-item + .repeat-item { margin-top: var(--sp-3); }

.repeat-item-head {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
}

.repeat-item-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: var(--r-pill);
    background: var(--accent-soft);
    color: var(--accent-soft-fg);
    font-size: var(--fs-sm);
    font-weight: 650;
}

.repeat-item-title {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--text-1);
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.repeat-item-head .btn { margin-inline-start: auto; }

/* "Diğer" seçilmeden görünmeyen serbest metin alanları */
.repeat-item [data-diger-alani] { display: none; }
.repeat-item.is-diger [data-diger-alani] { display: block; }

/* Sürükleyerek sıralama.
   Tutamak ayrı bir düğme: satırın tamamı draggable yapılırsa metin alanlarında
   yazı seçmek imkânsız hâle geliyor. `draggable` yalnızca tutamağa basılınca
   açılır, bırakılınca kapanır. */
.repeat-tut {
    cursor: grab;
    touch-action: none;
    color: var(--text-4);
    background: transparent;
    border: 0;
    padding: 4px 6px;
    border-radius: var(--r-xs);
    line-height: 1;
}

.repeat-tut:hover { color: var(--text-2); background: var(--surface-3); }
.repeat-tut:active { cursor: grabbing; }
.repeat-tut:focus-visible { outline: none; box-shadow: var(--ring); }

.repeat-item.is-suruklenen { opacity: .4; }

.repeat-item.is-suruklenen,
.repeat-item[draggable="true"] { cursor: grabbing; }

/* Sürükleme sırasında bırakma yerini belli et */
#kalemListesi.suruklemede .repeat-item { transition: transform var(--dur) var(--ease); }

/* Listenin altındaki ikinci "ekle" düğmesi */
.repeat-alt-ekle {
    display: flex;
    justify-content: center;
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px dashed var(--line-2);
}

/* Malzeme ihtiyacı özeti */
.talep-ozet {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.talep-ozet .pill { font-size: var(--fs-md); }

/* 17. YAZDIRMA =========================================================== */

@media print {
    .app-sidebar,
    .app-topbar,
    .drawer-scrim,
    .page-actions,
    .toolbar,
    .toast-stack,
    .no-print {
        display: none !important;
    }

    .app-main { margin: 0 !important; }
    .app-content { padding: 0 !important; max-width: none !important; }

    body { background: #fff; color: #000; font-size: 11pt; }

    .card,
    .table-wrap {
        border: 1px solid #999 !important;
        break-inside: avoid;
        box-shadow: none !important;
    }

    a[href]::after { content: ""; }
}