/* ==========================================================================
   Kurumsal Tasarım Sistemi — layouts.main (giriş yapılmış) VE layouts.app
   (login/register ekranı, madde 35'ten beri) tarafından yüklenir.
   ========================================================================== */

/* ---------- Marka fontu (self-hosted, CDN yok — projenin genel kuralı, bkz madde 30 html5-qrcode)
   Inter: kurumsal SaaS/ajans ürünlerinde (Stripe, Linear, Vercel vb.) standart tercih, sistem
   fontlarından belirgin şekilde daha "ciddi" ve tutarlı görünür. Türkçe karakterler (ş,ğ,ı,ö,ü,ç)
   için hem latin hem latin-ext alt kümesi indirildi. ---------- */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/inter/inter-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/inter/inter-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/inter/inter-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/inter/inter-500-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/inter/inter-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/inter/inter-600-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/inter/inter-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/inter/inter-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/inter/inter-800-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/inter/inter-800-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+A720-A7FF;
}

:root {
    --brand-font: 'Inter', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    /* --- Marka rengi: mevcut logodaki mor tonu korunup kurumsal bir indigo'ya derinleştirildi --- */
    --bs-primary: #4338CA;
    --bs-primary-rgb: 67, 56, 202;
    --bs-link-color: #4338CA;
    --bs-link-hover-color: #362F9E;

    --brand-primary-hover: #362F9E;
    --brand-primary-light: #EEF0FD;

    /* --- Nötr metin/ink skalası --- */
    --ink-900: #1E2333;
    --ink-700: #3A4258;
    --ink-500: #6B7280;
    --ink-400: #9AA1B2;

    /* --- Yüzeyler --- */
    --surface-page: #F4F6FB;
    --surface-card: #FFFFFF;
    --surface-border: #E7E9F2;

    /* --- Durum renkleri (yumuşatılmış, kurumsal) --- */
    --bs-success: #16A34A;
    --bs-success-rgb: 22, 163, 74;
    --state-success-bg: #ECFDF3;

    --bs-warning: #D97706;
    --bs-warning-rgb: 217, 119, 6;
    --state-warning-bg: #FFFAEB;

    --bs-danger: #DC2626;
    --bs-danger-rgb: 220, 38, 38;
    --state-danger-bg: #FEF2F2;

    --bs-info: #0891B2;
    --bs-info-rgb: 8, 145, 178;
    --state-info-bg: #ECFEFF;

    /* --- Radius / gölge skalası: v3'e göre daha köşeli — aşırı yuvarlak (pill/bubble) yüzeyler
       "oyuncak/startup" hissi veriyordu, kurumsal yazılımlar (Stripe/Linear tarzı) daha ölçülü
       bir köşe yarıçapı kullanır. --- */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04);
    --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.06);
    --shadow-lg: 0 10px 24px rgba(16, 24, 40, 0.09);

    /* --- Boşluk skalası: yeni component'ler bu adımlardan seçsin, rastgele px üretmesin --- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 22px;
    --space-6: 32px;
}

/* ---------- Genel yüzey / tipografi ---------- */
/* Font ailesi tema/dark-mode'dan bağımsız, her zaman uygulanır (Inter self-hosted, yukarıda) */
body, .btn, .form-control, .form-select, input, textarea, select {
    font-family: var(--brand-font);
}

body:not(.dark) {
    background: var(--surface-page);
    color: var(--ink-700);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Ağır 700/800 başlıklar "startup/oyuncak" hissi veriyordu — kurumsal panellerde 600 daha
   ölçülü/ciddi durur, aşırı kalın değil ama yine de net bir hiyerarşi kurar. */
body:not(.dark) h1, body:not(.dark) h2, body:not(.dark) h3,
body:not(.dark) h4, body:not(.dark) h5, body:not(.dark) h6 {
    color: var(--ink-900);
    font-weight: 600;
    letter-spacing: -0.01em;
}

body:not(.dark) .text-muted { color: var(--ink-400) !important; }

/* ---------- Sayfa başlığı / breadcrumb ---------- */
body:not(.dark) .page-header { margin-bottom: 20px; }
body:not(.dark) .page-header-title h4,
body:not(.dark) .page-header-title h5 {
    font-weight: 700;
    color: var(--ink-900);
}
body:not(.dark) .breadcrumb-item, body:not(.dark) .breadcrumb-item a {
    color: var(--ink-500);
    font-size: 13px;
}
body:not(.dark) .breadcrumb-item.active { color: var(--ink-700); font-weight: 600; }

/* ---------- Üst bar ---------- */
body:not(.dark) .dash-header {
    background: var(--surface-card);
    border-bottom: 1px solid var(--surface-border);
    box-shadow: none;
}
body:not(.dark) .dash-header .dash-head-link { color: var(--ink-700); }
body:not(.dark) .dash-header .dash-head-link:hover { color: var(--bs-primary); }
body:not(.dark) .user-avtar { border: 2px solid var(--brand-primary-light); }

/* ---------- Kartlar ---------- */
body:not(.dark) .card {
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}
body:not(.dark) .card-header {
    background: transparent;
    border-bottom: 1px solid var(--surface-border);
    border-top-left-radius: var(--radius-md);
    border-top-right-radius: var(--radius-md);
    padding: var(--space-5) var(--space-5);
}
body:not(.dark) .card-header h5, body:not(.dark) .card-header .h5 {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-900);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
/* Eskiden kalın/parlak marka renginde bir çubuktu — kurumsal panelde çok göz alıcıydı,
   ince nötr bir ayraç yeterli (başlık zaten uppercase+letter-spacing ile ayrışıyor) */
body:not(.dark) .card-header:not(.border-0) h5:after,
body:not(.dark) .card-header:not(.border-0) .h5:after {
    background: var(--surface-border);
    height: 2px;
}
/* Renkli (bg-primary vb.) card-header'lar: daha sade, dolgu yerine ince kenar + tint */
body:not(.dark) .card-header.bg-primary {
    background: var(--bs-primary) !important;
    border-bottom: none;
}
/* 61 sayfada kullanılıyordu ama hiç tanımlanmamıştı — düz beyaz-gri görünüp sistemin dışında kalıyordu */
body:not(.dark) .card-header.bg-light {
    background: var(--surface-page) !important;
    border-bottom: 1px solid var(--surface-border);
}
body:not(.dark) .card-body { padding: var(--space-5); }

/* ---------- Butonlar: eskiden renkli "glow" gölge + basınca zıplayan (scale) animasyon vardı —
   tüketici mobil uygulaması hissi veriyordu. Kurumsal yazılımda buton geri bildirimi ölçülü olur:
   düz zemin, hover'da hafif koyulaşma, basınca sadece ince bir opaklık değişimi. ---------- */
body:not(.dark) .btn {
    border-radius: var(--radius-sm);
    font-weight: 600;
    padding: var(--space-2) var(--space-5);
    transition: box-shadow 0.12s ease, background-color 0.15s ease, opacity 0.1s ease;
}
body:not(.dark) .btn-sm { border-radius: 6px; padding: var(--space-2) var(--space-3); }
body:not(.dark) .btn-primary {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    box-shadow: none;
}
body:not(.dark) .btn-primary:hover, body:not(.dark) .btn-primary:focus {
    background: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
    box-shadow: none;
}
body:not(.dark) .btn:active { opacity: 0.85; }
body:not(.dark) .btn-light-primary { background: var(--brand-primary-light); color: var(--bs-primary); border-color: transparent; }
body:not(.dark) .btn-outline-primary { color: var(--bs-primary); border-color: var(--bs-primary); }

/* ---------- Formlar ---------- */
body:not(.dark) .form-control, body:not(.dark) .form-select {
    border-radius: var(--radius-sm);
    border-color: var(--surface-border);
    background: #FBFCFE;
    padding: 9px 14px;
}
body:not(.dark) .form-control:focus, body:not(.dark) .form-select:focus {
    border-color: var(--bs-primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(67, 56, 202, 0.12);
}
body:not(.dark) .form-label { font-weight: 600; color: var(--ink-700); font-size: 13px; }

/* select2 kutucukları, kendini başlattığı <select>'e width:'100%' verilmezse varsayılan
   dar (220px) genişlikte açılıyordu — birçok sayfada bu opsiyon unutulmuştu. Kök nedenden,
   tüm select2 kutucuklarını kapsayan konteyneri her zaman elementinin tam genişliğine zorluyoruz. */
body:not(.dark) .select2-container { width: 100% !important; }
body:not(.dark) .select2-container .select2-selection--single,
body:not(.dark) .select2-container .select2-selection--multiple {
    border-radius: var(--radius-sm);
    border-color: var(--surface-border);
    background: #FBFCFE;
    min-height: 42px;
    padding: 5px 4px;
}
body:not(.dark) .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 30px;
    padding-left: 10px;
}
body:not(.dark) .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px;
}
body:not(.dark) .form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* ---------- Tablolar ---------- */
body:not(.dark) .table thead th {
    background: #F8F9FD;
    color: var(--ink-500);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--surface-border);
    padding: 12px 16px;
}
body:not(.dark) .table td { padding: 14px 16px; vertical-align: middle; border-color: var(--surface-border); }
body:not(.dark) .table-hover tbody tr:hover { background: var(--brand-primary-light); }

/* ---------- Badge'ler: tam yuvarlak "pill" yerine daha köşeli/ölçülü chip — kurumsal
   panellerde durum etiketleri oyuncak değil, veri gibi okunmalı ---------- */
body:not(.dark) .badge { font-weight: 600; letter-spacing: 0.01em; border-radius: 5px; padding: 4px 9px; font-size: 11.5px; }
body:not(.dark) .badge.bg-primary { background: var(--bs-primary) !important; }
body:not(.dark) .badge.bg-success, body:not(.dark) .bg-light-success { background: var(--state-success-bg) !important; color: var(--bs-success) !important; }
body:not(.dark) .badge.bg-danger, body:not(.dark) .bg-light-danger { background: var(--state-danger-bg) !important; color: var(--bs-danger) !important; }
body:not(.dark) .badge.bg-warning, body:not(.dark) .bg-light-warning { background: var(--state-warning-bg) !important; color: var(--bs-warning) !important; }
body:not(.dark) .badge.bg-info, body:not(.dark) .bg-light-info { background: var(--state-info-bg) !important; color: var(--bs-info) !important; }
body:not(.dark) .bg-light-primary { background: var(--brand-primary-light) !important; color: var(--bs-primary) !important; }

/* ---------- Nav-pills / sekmeler (work-tasks, ayarlar vb.): parlak "glow" gölgeli tam
   yuvarlak pil yerine düz zeminli segmented-control görünümü ---------- */
body:not(.dark) .nav-pills .nav-link {
    color: var(--ink-500);
    font-weight: 600;
    border-radius: var(--radius-sm);
}
body:not(.dark) .nav-pills .nav-link.active {
    background: var(--bs-primary) !important;
    box-shadow: none;
}
body:not(.dark) .nav-tabs .nav-link.active {
    color: var(--bs-primary);
    border-bottom: 2px solid var(--bs-primary);
    font-weight: 600;
}

/* ---------- Alert'ler ---------- */
body:not(.dark) .alert { border: none; border-radius: var(--radius-sm); font-weight: 500; }
body:not(.dark) .alert-primary, body:not(.dark) .alert-light-primary { background: var(--brand-primary-light); color: var(--brand-primary-hover); }
body:not(.dark) .alert-success, body:not(.dark) .alert-light-success { background: var(--state-success-bg); color: #0F6E34; }
body:not(.dark) .alert-danger, body:not(.dark) .alert-light-danger { background: var(--state-danger-bg); color: #A31E1E; }
body:not(.dark) .alert-warning, body:not(.dark) .alert-light-warning { background: var(--state-warning-bg); color: #9A5B05; }

/* ---------- Modallar: eskiden yarı-saydam + ağır blur (cam efekti) vardı — tüketici
   uygulaması/trend hissi veriyordu. Kurumsal panelde yüzeyler mat/dolgun olur, okunurluk önde. ---------- */
body:not(.dark) .modal-content {
    border: none;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    background: var(--surface-card);
}
body:not(.dark) .modal-backdrop.show { opacity: 0.45; }
body:not(.dark) .modal-header { border-bottom: 1px solid var(--surface-border); padding: 18px 22px; }
body:not(.dark) .modal-footer { border-top: 1px solid var(--surface-border); padding: 16px 22px; }

/* ---------- Dropdown / pagination ---------- */
body:not(.dark) .dropdown-menu {
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    background: var(--surface-card);
}
body:not(.dark) .dropdown-item:hover { background: var(--brand-primary-light); color: var(--bs-primary); }
body:not(.dark) .page-link { color: var(--ink-700); border-color: var(--surface-border); }
body:not(.dark) .page-item.active .page-link { background: var(--bs-primary); border-color: var(--bs-primary); }

/* ---------- Avatar baş harfleri (work-tasks, listeler) ---------- */
body:not(.dark) .avatar.bg-light-primary { background: var(--brand-primary-light) !important; color: var(--bs-primary) !important; }

/* ---------- Mikro-etkileşim: tablolardaki ikon aksiyon butonları (düzenle/sil vb.) ---------- */
body:not(.dark) .action-btn { transition: transform 0.12s ease, opacity 0.12s ease; }
body:not(.dark) .action-btn:active { transform: scale(0.9); }

/* ---------- Mobil / uygulama hissi ----------
   PWA/Capacitor'da standalone açıldığında tarayıcı çubuğu yok, "native app" gibi hissettirecek dokunuşlar. */
html {
    /* iOS'ta lastik bandı (overscroll bounce) efekti tarayıcı hissini güçlendirir, kapatıyoruz */
    overscroll-behavior-y: none;
}
body {
    -webkit-tap-highlight-color: transparent;
    /* Çentikli telefonlarda (notch) içerik status bar'ın altına girmesin */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}
@media (max-width: 575.98px) {
    /* Dokunma hedefleri: parmakla basılabilir minimum alan (Apple/Google önerisi ~44px) */
    .btn, .form-control, .form-select, .dash-h-item > a, .dash-link { min-height: 40px; }
    .table td, .table th { padding: 0.65rem 0.5rem; }
    .card-body { padding: 1rem; }
}

/* Sidebar açıkken içerik alanının 255px margin-left'i mobilde her koşulda sıfırlansın —
   style.css'teki 29k satırlık dosyada aynı kural çok daha önce (satır ~18936) tanımsız halde
   geliyor, bu dosya en son yüklendiği için tek/garanti kaynak burada. */
@media (max-width: 1024px) {
    .dash-container,
    .minimenu .dash-container {
        margin-left: 0 !important;
    }
    /* .dash-header'ın kendisi de position:absolute; left:275px ile sabitti (gerçek cihaz
       testinde bulundu: 390px viewport'ta header 115px'e sıkışıp içeriği taşırıyordu) */
    .dash-header {
        left: 0 !important;
        width: 100% !important;
    }
}

/* ---------- iOS PWA (Ana Ekrana Ekle / standalone): üst bar status bar'ın altına giriyordu ----------
   .dash-header top:0 sabit (position:absolute, top tanımsız → 0), standalone modda tarayıcı
   çubuğu olmadığı için header saat/wifi/batarya alanının ÜZERİNE biniyordu. Hamburger da bu
   alandaydı, dokunuş iOS status bar'a gidip menüye hiç ulaşmıyordu (menü bu yüzden kapanamıyordu).
   env(safe-area-inset-top) normal Safari sekmesinde 0 döner (adres çubuğu zaten var), sadece
   standalone'da gerçek değeri alır — masaüstünü ve normal tarayıcıyı etkilemez. */
@media (max-width: 1024px) {
    .dash-header {
        padding-top: env(safe-area-inset-top);
    }
    .dash-sidebar {
        padding-top: env(safe-area-inset-top);
    }
    /* Push bildirime tıklayınca açılan modal (push-register.blade.php) da aynı sorunu yaşıyordu:
       .modal position:fixed; top:0 olduğu için başlıktaki kapatma (X) butonu status bar'ın
       altında kalıp dokunulamaz oluyordu — popup "kapanmıyor" gibi görünüyordu. */
    .modal-dialog {
        margin-top: calc(1.75rem + env(safe-area-inset-top));
    }
}

/* ---------- Tablo → kart dönüşümü (mobilde) ----------
   Geniş, çok kolonlu tablolar (İş Atama vb.) mobilde yatay scroll ile "sığmıyor" hissi
   veriyordu. .mobile-card-table class'ı verilen tablolar mobilde her satırı bağımsız bir
   karta çevirir, sütun başlıkları data-label attribute'undan küçük etiket olarak çıkar. */
@media (max-width: 767.98px) {
    /* Son güvenlik ağı: birkaç px'lik ufak taşmalar (negatif margin'li .row/.col-12 kalıpları vb.)
       yatay scrollbar'a yol açmasın — büyük taşmalar zaten yukarıdaki kurallarla kök nedeninden çözülüyor. */
    body { overflow-x: hidden; }

    /* Sayfa üstü "başlık + aksiyon butonları" satırları (onlarca sayfada tekrar eden
       .d-flex.justify-content-between / .d-flex.gap-2 kalıbı) mobilde taşmasın, alt satıra sarsın.
       flex-wrap tek başına asla mevcut bir düzeni bozmaz, sadece taşan öğeyi alt satıra iter. */
    .d-flex.justify-content-between,
    .d-flex.gap-2 {
        flex-wrap: wrap;
        row-gap: 8px;
    }

    .mobile-card-table thead { display: none !important; }
    .mobile-card-table, .mobile-card-table tbody, .mobile-card-table tr, .mobile-card-table td {
        display: block !important;
        width: 100% !important;
    }
    .mobile-card-table tr {
        margin: 0 0 12px;
        border: 1px solid var(--surface-border, #E7E9F2);
        border-radius: var(--radius-md, 12px);
        box-shadow: var(--shadow-sm, 0 1px 2px rgba(16,24,40,.05));
        padding: 12px 14px;
        background: #fff;
    }
    .mobile-card-table tr:hover { background: #fff; }
    .mobile-card-table td {
        border: none !important;
        padding: 6px 0 !important;
        min-width: 0 !important;
        max-width: none !important;
        text-align: left !important;
    }
    .mobile-card-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--ink-400, #9AA1B2);
        margin-bottom: 3px;
    }
    .mobile-card-table td.checkbox-col,
    .mobile-card-table th.checkbox-col {
        display: none !important;
    }
    .mobile-card-table td[colspan] { text-align: center !important; }

    /* ---------- Genel tablo evrensel önlemi (site genelinde 90+ sayfa) ----------
       .mobile-card-table ile tek tek karta çevrilmemiş TÜM diğer tablolar için: Blade'e hiç
       dokunmadan, ilk sütun (genelde isim/başlık/tarih — en önemli bilgi) ekranda sabit kalsın,
       kullanıcı geri kalanını sağa kaydırarak görsün. table-responsive zaten yatay scroll
       sağlıyordu, sorun kullanıcının bunu fark etmemesiydi — sabit ilk sütun + gölge ipucu bunu çözer. */
    .table-responsive table:not(.mobile-card-table) thead th:first-child,
    .table-responsive table:not(.mobile-card-table) tbody td:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        background: #fff;
        box-shadow: 3px 0 6px rgba(16, 24, 40, 0.08);
    }
    .table-responsive table:not(.mobile-card-table) thead th:first-child {
        background: #F8F9FD;
        z-index: 3;
    }
    /* Kaydırılabilir olduğunu belli eden sağ kenar gölgesi */
    .table-responsive {
        background:
            linear-gradient(to right, #fff 30%, rgba(255,255,255,0)),
            linear-gradient(to right, rgba(255,255,255,0), #fff 70%) 100% 0,
            radial-gradient(farthest-side at 0 50%, rgba(16,24,40,.12), rgba(0,0,0,0)),
            radial-gradient(farthest-side at 100% 50%, rgba(16,24,40,.12), rgba(0,0,0,0)) 100% 0;
        background-repeat: no-repeat;
        background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
        background-attachment: local, local, scroll, scroll;
    }

    /* Foto + isim: label'lı alt alta değil, kartın üstünde yan yana (avatar solda, isim sağda) */
    .mobile-card-table td.mobile-card-photo {
        display: inline-block !important;
        width: auto !important;
        vertical-align: top;
        padding: 0 10px 0 0 !important;
    }
    .mobile-card-table td.mobile-card-title {
        display: inline-block !important;
        width: calc(100% - 65px) !important;
        vertical-align: top;
        padding: 0 !important;
    }
}

/* ---------- Üst bar mobilde taşıyordu (gerçek testte bulundu: 390px viewport'ta
   806px scrollWidth — sağdaki tema/dil/bildirim ikon grubu ve soldaki kullanıcı adı +
   bakım modu switch etiketi sığmıyordu). Native app hissi için üst barı sadeleştiriyoruz:
   sadece hamburger + avatar + bildirim zili kalsın, gerisi mobilde gizlensin. ---------- */
@media (max-width: 767.98px) {
    .dash-header .theme_mode,
    .dash-header .drp-language,
    .dash-header .drp-company {
        display: none !important;
    }
    /* Kullanıcı adı metni ve bakım modu switch etiketi soldaki grubu şişiriyordu */
    .dash-header .dash-mob-drp h6,
    .dash-header .dash-mob-drp .form-check-label {
        display: none !important;
    }
    .header-wrapper { flex-wrap: nowrap; }
}

/* ---------- Sol menü mobilde tam ekran ----------
   Sidebar sabit 255px genişlikti (390px ekranda ~%65), tab bar'daki "Menü" butonu
   artık bunu açıyor — native app menüsü gibi tam ekran hissi versin istendi. */
@media (max-width: 767.98px) {
    .dash-sidebar {
        width: 100% !important;
        left: -100% !important;
        overflow-y: auto !important; /* PerfectScrollbar mobilde dokunmatik kaydırmayı desteklemiyor,
                                         uzun admin menüsünün altına hiç ulaşılamıyordu — native scroll'a zorluyoruz */
        -webkit-overflow-scrolling: touch;
    }
    .dash-sidebar.mob-sidebar-active {
        left: 0 !important;
    }
    /* PerfectScrollbar'ın navbar-content'e verdiği overflow:hidden'ı iptal et,
       kaydırma artık üstteki .dash-sidebar'da native olarak çalışıyor */
    .dash-sidebar .navbar-content,
    .dash-sidebar .navbar-content.ps {
        overflow: visible !important;
        height: auto !important;
    }
}

/* ---------- iPhone (WebKit/iOS): menü açılınca aşağı kaydırılamıyor ----------
   position:fixed + overflow-y:auto üzerinde iOS Safari'nin bilinen dokunmatik kaydırma
   kilidi. GPU katmanına alıp (translateZ) dikey pan hareketini açıkça izin veriyoruz,
   overlay'in de (aynı kapsayıcıya sonradan eklenen dash-menu-overlay) olası dokunuşu
   yutmasını engelliyoruz. Sadece iOS/Safari WebKit'i hedefler, diğer tarayıcılara dokunmaz. */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 767.98px) {
        .dash-sidebar {
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
            touch-action: pan-y;
        }
        .dash-sidebar .dash-menu-overlay {
            pointer-events: none;
        }
    }
}

/* ---------- PWA "Ana Ekrana Ekle" bandı ---------- */
.pwa-install-banner {
    display: none;
    align-items: center;
    gap: 10px;
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 1040;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--surface-border, #E7E9F2);
    border-radius: var(--radius-md, 12px);
    box-shadow: var(--shadow-lg, 0 12px 32px rgba(16,24,40,.10));
    padding: 10px 12px;
}
@media (min-width: 992px) {
    .pwa-install-banner { left: auto; right: 24px; bottom: 24px; width: 360px; }
}
@media (max-width: 991.98px) {
    .pwa-install-banner { bottom: calc(76px + env(safe-area-inset-bottom)); } /* alt tab bar'ın üstünde dursun */
}
.pwa-install-icon img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; }
.pwa-install-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.pwa-install-text strong { font-size: 13px; color: var(--ink-900, #1E2333); }
.pwa-install-text span { font-size: 11.5px; color: var(--ink-500, #6B7280); }
.pwa-install-close {
    border: none; background: transparent; font-size: 20px; line-height: 1;
    color: var(--ink-400, #9AA1B2); padding: 0 4px; cursor: pointer;
}

/* ---------- Mobil alt tab bar (native app hissi) ----------
   Masaüstünde (lg ve üstü) yok, sadece dar ekranlarda sabit alt navigasyon. */
.mobile-tabbar {
    display: none;
}
@media (max-width: 991.98px) {
    .mobile-tabbar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-top: 1px solid var(--surface-border, #E7E9F2);
        padding-bottom: env(safe-area-inset-bottom); /* iPhone home bar/çentik altına girmesin */
    }
    .mobile-tabbar .mobile-tab-item {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 8px 2px 6px;
        min-height: 52px;
        color: var(--ink-500, #6B7280);
        text-decoration: none;
        transition: color 0.12s ease, transform 0.12s ease;
    }
    .mobile-tabbar .mobile-tab-item svg { flex-shrink: 0; }
    .mobile-tabbar .mobile-tab-item span { font-size: 10.5px; font-weight: 600; }
    .mobile-tabbar .mobile-tab-item.active { color: var(--bs-primary, #4338CA); }
    .mobile-tabbar .mobile-tab-item:active { transform: scale(0.92); }

    /* Sabit tab bar içeriğin üstünü kapatmasın diye ana içerik alanına alt boşluk */
    .dash-container {
        padding-bottom: calc(64px + env(safe-area-inset-bottom));
    }
}

/* iOS'ta adres çubuğu gizlenip/gösterildiğinde 100vh yanlış hesaplanıyor (araç çubuğu dahil ölçülüyor),
   içerik zıplıyor/kırpılıyor gibi görünüyordu — dvh destekleyen tarayıcılarda gerçek görünür yüksekliği kullan */
@supports (height: 100dvh) {
    body { min-height: 100dvh; }
    .dash-container { min-height: calc(100dvh - 70px); }
}

/* ==========================================================================
   Tasarım Sistemi v3 — genel görsel cila turu (2026-08-04).
   Hiçbir blade/layout'a dokunulmadı, sadece bu tek dosya — 185+ sayfa +
   login ekranına otomatik yayılır (cache-bust filemtime ile, view:clear gerekmez).
   ========================================================================== */

/* ---------- Erişilebilir odak halkası (klavye ile gezinme) ---------- */
body:not(.dark) a:focus-visible,
body:not(.dark) button:focus-visible,
body:not(.dark) .btn:focus-visible,
body:not(.dark) .form-control:focus-visible,
body:not(.dark) .form-select:focus-visible,
body:not(.dark) [tabindex]:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* ---------- Masaüstü scrollbar: markaya uygun, ince ---------- */
@media (min-width: 1025px) {
    body:not(.dark) ::-webkit-scrollbar { width: 10px; height: 10px; }
    body:not(.dark) ::-webkit-scrollbar-track { background: transparent; }
    body:not(.dark) ::-webkit-scrollbar-thumb {
        background: var(--surface-border);
        border-radius: 999px;
        border: 2px solid var(--surface-page);
    }
    body:not(.dark) ::-webkit-scrollbar-thumb:hover { background: var(--ink-400); }
}

/* ---------- Sol menü: aktif/hover — madde 31'de bilinçli olarak "dolgun kutu" kaldırılıp
   sade ikon-rengi tercih edilmişti, o karara sadık kalınarak sadece ince bir sol şerit + yumuşak
   geçiş eklendi (kalın arka plan bloğu yok). ---------- */
body:not(.dark) .dash-sidebar .dash-link {
    border-radius: 0 999px 999px 0;
    transition: background-color 0.15s ease, color 0.15s ease;
}
body:not(.dark) .dash-sidebar .dash-item:not(.dash-hasmenu) > .dash-link:hover,
body:not(.dark) .dash-sidebar .dash-item.dash-hasmenu > .dash-link:hover {
    background: var(--brand-primary-light);
}
body:not(.dark) .dash-sidebar .dash-item.active > .dash-link {
    position: relative;
    background: var(--brand-primary-light);
}
body:not(.dark) .dash-sidebar .dash-item.active > .dash-link::before {
    content: "";
    position: absolute;
    left: 0; top: 8px; bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--bs-primary);
}

/* ---------- KPI kutucuğu / bölüm kartı — Şube 360'ta (madde 31) tanıtılan desen, her sayfa
   kendi <style>'ında kopyalamak zorunda kalmasın diye merkezi baz burada; sayfa-özel <style>
   varsa (branches/show, mesai/admin) o kazanır, davranış değişmez, sadece yeni sayfalar bedavaya kullanabilir. ---------- */
body:not(.dark) .kpi-tile {
    border: none;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    height: 100%;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
body:not(.dark) .kpi-tile:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
body:not(.dark) .kpi-tile .kpi-icon {
    width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: var(--brand-primary-light); color: var(--bs-primary);
    margin-bottom: 10px;
}
body:not(.dark) .kpi-tile.tile-danger .kpi-icon { background: var(--state-danger-bg); color: var(--bs-danger); }
body:not(.dark) .kpi-tile.tile-success .kpi-icon { background: var(--state-success-bg); color: var(--bs-success); }
body:not(.dark) .section-card { border: none; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }

/* ---------- Sayısal değerler (KPI/tutar/rakam) — hizalı, aynı genişlikte rakamlarla daha okunur ---------- */
body:not(.dark) .kpi-tile h3, body:not(.dark) .kpi-tile h4, body:not(.dark) .kpi-tile .fs-4 {
    font-variant-numeric: tabular-nums;
}

/* ---------- Butonlar: eksik varyant/durumlar ---------- */
body:not(.dark) .btn:disabled, body:not(.dark) .btn.disabled { box-shadow: none; transform: none; opacity: 0.55; }
body:not(.dark) .btn-outline-secondary { color: var(--ink-500); border-color: var(--surface-border); }
body:not(.dark) .btn-outline-secondary:hover { background: var(--surface-page); color: var(--ink-700); border-color: var(--surface-border); }
body:not(.dark) .btn-light { background: var(--surface-page); border-color: var(--surface-border); color: var(--ink-700); }
body:not(.dark) .btn-light:hover { background: #EDEFF6; }

/* ---------- Tablo: zebra + net satır ayrımı (uzun personel/denetim listelerinde okunabilirlik) ---------- */
body:not(.dark) .table tbody tr:nth-child(even) { background: #FBFCFE; }
body:not(.dark) .table-hover tbody tr:nth-child(even):hover { background: var(--brand-primary-light); }

/* ---------- Giriş ekranı (auth/login.blade.php) — tek sayfa, izole, düşük risk ---------- */
body:not(.dark) .login-page-wrapper {
    background:
        radial-gradient(1200px 600px at 15% -10%, rgba(67, 56, 202, 0.08), transparent),
        radial-gradient(900px 500px at 100% 100%, rgba(67, 56, 202, 0.06), transparent),
        var(--surface-page);
    min-height: 100vh;
    display: flex;
    align-items: center;
}
body:not(.dark) .login-container { width: 100%; }
body:not(.dark) .login-content-inner {
    background: var(--surface-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-6);
}
body:not(.dark) .login-title h3 { font-weight: 700; color: var(--ink-900); margin-bottom: var(--space-4); }
body:not(.dark) .login-do-btn { border-radius: var(--radius-sm); font-weight: 700; padding: 11px; }
body:not(.dark) .login-media-col img { border-radius: var(--radius-lg); }
@media (max-width: 767.98px) {
    body:not(.dark) .login-content-inner { padding: var(--space-5); box-shadow: var(--shadow-md); }
}

/* ---------- Mobil alt tab bar: aktif sekme artık düz renk değişimi değil, yumuşak dolgulu pil
   (native app tab bar hissi — masaüstündeki sidebar'ın "dolgun kutu istemiyoruz" kararıyla çelişmez,
   çünkü o karar sidebar'a özgüydü; alt tab bar zaten native app pattern'i taklit ediyor). ---------- */
@media (max-width: 991.98px) {
    .mobile-tabbar .mobile-tab-item.active {
        position: relative;
    }
    .mobile-tabbar .mobile-tab-item.active::before {
        content: "";
        position: absolute;
        top: 2px;
        left: 50%;
        transform: translateX(-50%);
        width: 28px;
        height: 3px;
        border-radius: 999px;
        background: var(--bs-primary, #4338CA);
    }
}