/* ==========================================================================
   Staffboard tasarım sistemi (Bootstrap 5 üzerine)
   --------------------------------------------------------------------------
   1. Token'lar        — renk, tipografi, boşluk, köşe, gölge
   2. Bootstrap ayarı  — BS5 değişkenlerini token'lara bağlar
   3. Uygulama iskeleti — sidebar, topbar, içerik, footer
   4. Bileşenler       — sayfa başlığı, kart, istatistik, tablo, rozet,
                          ikon buton, form, seçim kartları, modal, DataTables
   Sayfalarda yeni <style> bloğu açmak yerine buradaki sınıflar kullanılır.
   ========================================================================== */

/* 1. Token'lar ------------------------------------------------------------ */
:root {
    /* Marka — mobil uygulama ile aynı mor */
    --sb-primary: #7c31c2;
    --sb-primary-hover: #6a28a8;
    --sb-primary-soft: #f3eafb;
    --sb-primary-ring: rgba(124, 49, 194, .18);

    /* Yüzeyler ve metin */
    --sb-bg: #f6f5fa;
    --sb-surface: #ffffff;
    --sb-surface-muted: #faf9fc;
    --sb-border: #e7e4ee;
    --sb-border-strong: #d6d1e1;
    --sb-text: #1f1d2b;
    --sb-text-muted: #6b6880;
    --sb-text-subtle: #9a97ab;

    /* Durum renkleri: ana renk + yumuşak zemin */
    --sb-success: #14855f;  --sb-success-soft: #e3f5ee;
    --sb-warning: #a86200;  --sb-warning-soft: #fdf1dc;
    --sb-danger:  #c8323f;  --sb-danger-soft:  #fde8ea;
    --sb-info:    #1769aa;  --sb-info-soft:    #e3f0fa;
    --sb-neutral: #646177;  --sb-neutral-soft: #efeef3;

    /* Sidebar */
    --sb-sidebar-bg: #1d1730;
    --sb-sidebar-text: #bdb6d3;
    --sb-sidebar-text-active: #ffffff;
    --sb-sidebar-hover: rgba(255, 255, 255, .06);
    --sb-sidebar-active: rgba(124, 49, 194, .38);
    --sb-sidebar-width: 248px;
    --sb-sidebar-width-collapsed: 72px;
    --sb-topbar-height: 60px;

    /* Tipografi */
    --sb-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --sb-fs-xs: .75rem;
    --sb-fs-sm: .8125rem;
    --sb-fs-base: .875rem;
    --sb-fs-lg: 1rem;
    --sb-fs-xl: 1.25rem;
    --sb-fs-2xl: 1.625rem;

    /* Boşluk, köşe, gölge */
    --sb-space-1: 4px;  --sb-space-2: 8px;  --sb-space-3: 12px;
    --sb-space-4: 16px; --sb-space-5: 24px; --sb-space-6: 32px;
    --sb-radius-sm: 6px;
    --sb-radius: 10px;
    --sb-radius-lg: 14px;
    --sb-radius-pill: 999px;
    --sb-shadow-sm: 0 1px 2px rgba(25, 20, 45, .06);
    --sb-shadow: 0 1px 3px rgba(25, 20, 45, .06), 0 4px 16px rgba(25, 20, 45, .05);
    --sb-shadow-lg: 0 12px 40px rgba(25, 20, 45, .18);
    --sb-transition: .18s ease;
}

/* Ton sınıfları ([class] ile bileşen varsayılanlarını ezer) — rozet, seçim kartı, durum metni, istatistik kartı aynı paleti kullanır */
.tone-primary[class], .tone-violet[class], .tone-indigo[class], .tone-purple[class] { --tone: var(--sb-primary); --tone-bg: var(--sb-primary-soft); }
.tone-success[class], .tone-green[class], .tone-emerald[class], .tone-approved[class], .tone-active[class]   { --tone: var(--sb-success); --tone-bg: var(--sb-success-soft); }
.tone-warning[class], .tone-amber[class], .tone-yellow[class], .tone-orange[class], .tone-pending[class], .tone-leave[class] { --tone: var(--sb-warning); --tone-bg: var(--sb-warning-soft); }
.tone-danger[class], .tone-red[class], .tone-rejected[class], .tone-lost[class]                      { --tone: var(--sb-danger);  --tone-bg: var(--sb-danger-soft); }
.tone-info[class], .tone-blue[class], .tone-cyan[class], .tone-sky[class], .tone-teal[class], .tone-returned[class] { --tone: var(--sb-info);    --tone-bg: var(--sb-info-soft); }
.tone-neutral[class], .tone-gray[class], .tone-passive[class]                                   { --tone: var(--sb-neutral); --tone-bg: var(--sb-neutral-soft); }

/* 2. Bootstrap ayarı ------------------------------------------------------ */
:root {
    --bs-primary: var(--sb-primary);
    --bs-primary-rgb: 124, 49, 194;
    --bs-body-font-family: var(--sb-font);
    --bs-body-font-size: var(--sb-fs-base);
    --bs-body-color: var(--sb-text);
    --bs-body-bg: var(--sb-bg);
}

body {
    font-family: var(--sb-font);
    font-size: var(--sb-fs-base);
    color: var(--sb-text);
    background: var(--sb-bg);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--sb-primary); }
a:hover { color: var(--sb-primary-hover); }
.text-muted { color: var(--sb-text-muted) !important; }
.text-primary { color: var(--sb-primary) !important; }
.bg-primary { background-color: var(--sb-primary) !important; }
.fw-600 { font-weight: 600; }

.btn { font-size: var(--sb-fs-base); font-weight: 500; border-radius: var(--sb-radius-sm); padding: 7px 14px; }
.btn-sm { font-size: var(--sb-fs-sm); padding: 5px 11px; }
.btn-primary {
    --bs-btn-bg: var(--sb-primary); --bs-btn-border-color: var(--sb-primary);
    background-color: var(--sb-primary); border-color: var(--sb-primary);
}
.btn-primary:hover, .btn-primary:focus { background-color: var(--sb-primary-hover); border-color: var(--sb-primary-hover); }
.btn-outline-primary { color: var(--sb-primary); border-color: var(--sb-primary); }
.btn-outline-primary:hover { background-color: var(--sb-primary); border-color: var(--sb-primary); color: #fff; }
.btn-success { background-color: var(--sb-success); border-color: var(--sb-success); }
.btn-danger { background-color: var(--sb-danger); border-color: var(--sb-danger); }
.btn:focus-visible, .form-control:focus, .form-select:focus { box-shadow: 0 0 0 3px var(--sb-primary-ring); }

.form-label { font-size: var(--sb-fs-sm); font-weight: 600; color: var(--sb-text-muted); margin-bottom: var(--sb-space-1); }
.form-control, .form-select, .sb-input {
    font-size: var(--sb-fs-base);
    border: 1px solid var(--sb-border-strong);
    border-radius: var(--sb-radius-sm);
    padding: 8px 12px;
    background-color: var(--sb-surface);
}
.form-control:focus, .form-select:focus, .sb-input:focus { border-color: var(--sb-primary); outline: 0; }
.form-check-input:checked { background-color: var(--sb-primary); border-color: var(--sb-primary); }

.card {
    --bs-card-border-color: var(--sb-border);
    --bs-card-border-radius: var(--sb-radius);
    background: var(--sb-surface);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    box-shadow: var(--sb-shadow-sm);
}
.card-header {
    background: var(--sb-surface);
    border-bottom: 1px solid var(--sb-border);
    padding: var(--sb-space-3) var(--sb-space-4);
}
.card-header .h4, .card-header h3, .card-header h4 { font-size: var(--sb-fs-lg); font-weight: 600; margin: 0; }

.table { --bs-table-hover-bg: var(--sb-surface-muted); color: var(--sb-text); margin-bottom: 0; }
.table > :not(caption) > * > * { padding: 10px 12px; border-bottom-color: var(--sb-border); }
.table thead th {
    font-size: var(--sb-fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--sb-text-muted);
    background: var(--sb-surface-muted);
    border-bottom: 1px solid var(--sb-border) !important;
    white-space: nowrap;
}
.table tbody tr { transition: background var(--sb-transition); }
.table tbody tr:hover > * { background: var(--sb-surface-muted); }
.table td { vertical-align: middle; }

.dropdown-menu { border: 1px solid var(--sb-border); border-radius: var(--sb-radius); box-shadow: var(--sb-shadow-lg); font-size: var(--sb-fs-base); }
.dropdown-item:active { background: var(--sb-primary); }

/* 3. Uygulama iskeleti ---------------------------------------------------- */
.sb-app { min-height: 100vh; }

.sb-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sb-sidebar-width);
    background: var(--sb-sidebar-bg);
    color: var(--sb-sidebar-text);
    display: flex;
    flex-direction: column;
    z-index: 1040;
    transition: width var(--sb-transition), transform var(--sb-transition);
}
.sb-sidebar__brand {
    height: var(--sb-topbar-height);
    display: flex;
    align-items: center;
    gap: var(--sb-space-3);
    padding: 0 var(--sb-space-4);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: var(--sb-fs-lg);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    flex-shrink: 0;
}
.sb-sidebar__brand:hover { color: #fff; }
/* Marka işareti: logo görseli (brand/make_brand.ps1). İçindeki "S" harfi ekran okuyucular için kalır, görünmez. */
.sb-brand-mark {
    width: 32px; height: 32px; border-radius: 24%;
    background: var(--sb-primary) url("../img/brand/mark.svg") center / cover no-repeat;
    display: inline-block; flex-shrink: 0;
    color: transparent; font-size: 0; overflow: hidden; vertical-align: middle;
}
.sb-auth__logo { display: block; height: 52px; width: auto; }
.sb-sidebar__user {
    display: flex; align-items: center; gap: var(--sb-space-3);
    padding: var(--sb-space-4);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.sb-sidebar__user img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.sb-sidebar__user-name { color: #fff; font-weight: 600; font-size: var(--sb-fs-base); line-height: 1.2; }
.sb-sidebar__user-role { font-size: var(--sb-fs-xs); color: var(--sb-sidebar-text); }
.sb-sidebar__nav { flex: 1; overflow-y: auto; padding: var(--sb-space-3) var(--sb-space-2); }
.sb-nav__heading {
    display: block;
    font-size: .6875rem; font-weight: 600; letter-spacing: .08em;
    color: rgba(189, 182, 211, .6);
    padding: var(--sb-space-3) var(--sb-space-3) var(--sb-space-1);
    text-transform: uppercase;
}
.sb-nav { list-style: none; margin: 0; padding: 0; }
.sb-nav__link {
    display: flex; align-items: center; gap: var(--sb-space-3);
    padding: 8px var(--sb-space-3);
    margin: 1px 0;
    border-radius: var(--sb-radius-sm);
    color: var(--sb-sidebar-text);
    text-decoration: none;
    font-size: var(--sb-fs-base);
    white-space: nowrap;
    transition: background var(--sb-transition), color var(--sb-transition);
}
.sb-nav__link > .fa { width: 18px; text-align: center; font-size: 15px; flex-shrink: 0; }
.sb-nav__link:hover { background: var(--sb-sidebar-hover); color: var(--sb-sidebar-text-active); }
.sb-nav__link.active { background: var(--sb-sidebar-active); color: var(--sb-sidebar-text-active); font-weight: 500; }
.sb-nav__link.is-disabled { opacity: .45; pointer-events: none; }
.sb-nav__caret { margin-left: auto; font-size: 11px; transition: transform var(--sb-transition); }
.sb-nav__link[aria-expanded="true"] .sb-nav__caret { transform: rotate(90deg); }
.sb-nav--sub { padding-left: 30px; }
.sb-nav--sub .sb-nav__link { font-size: var(--sb-fs-sm); padding: 6px var(--sb-space-3); }
.sb-sidebar__footer { padding: var(--sb-space-2); border-top: 1px solid rgba(255, 255, 255, .06); }

.sb-main {
    margin-left: var(--sb-sidebar-width);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: margin-left var(--sb-transition);
}
.sb-topbar {
    position: sticky; top: 0; z-index: 1030;
    height: var(--sb-topbar-height);
    background: var(--sb-surface);
    border-bottom: 1px solid var(--sb-border);
    display: flex; align-items: center; gap: var(--sb-space-3);
    padding: 0 var(--sb-space-5);
}
.sb-topbar__toggle {
    width: 36px; height: 36px; border-radius: var(--sb-radius-sm);
    border: 1px solid var(--sb-border); background: var(--sb-surface);
    color: var(--sb-text-muted);
    display: grid; place-items: center;
}
.sb-topbar__toggle:hover { color: var(--sb-primary); border-color: var(--sb-primary); }
.sb-topbar__spacer { flex: 1; }
.sb-topbar__user {
    display: flex; align-items: center; gap: var(--sb-space-2);
    background: none; border: 0; padding: 4px 8px; border-radius: var(--sb-radius-sm);
    color: var(--sb-text); font-weight: 500;
}
.sb-topbar__user:hover { background: var(--sb-surface-muted); }
.sb-topbar__avatar {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--sb-primary-soft); color: var(--sb-primary);
    display: grid; place-items: center; font-size: var(--sb-fs-xs); font-weight: 700;
}
.sb-content { flex: 1; padding: var(--sb-space-5); }
.sb-content > section { margin-bottom: var(--sb-space-4); }
.sb-content .container-fluid { padding-left: 0; padding-right: 0; }
.sb-footer {
    padding: var(--sb-space-4) var(--sb-space-5);
    color: var(--sb-text-subtle);
    font-size: var(--sb-fs-sm);
    display: flex; justify-content: space-between; gap: var(--sb-space-3); flex-wrap: wrap;
}
.sb-footer a { color: var(--sb-text-muted); text-decoration: none; }

/* Masaüstünde daraltılmış sidebar */
@media (min-width: 992px) {
    .sb-sidebar-collapsed .sb-sidebar { width: var(--sb-sidebar-width-collapsed); }
    .sb-sidebar-collapsed .sb-main { margin-left: var(--sb-sidebar-width-collapsed); }
    .sb-sidebar-collapsed .sb-sidebar .sb-hide-collapsed,
    .sb-sidebar-collapsed .sb-nav__heading,
    .sb-sidebar-collapsed .sb-nav__caret,
    .sb-sidebar-collapsed .sb-nav--sub { display: none !important; }
    .sb-sidebar-collapsed .sb-nav__link { justify-content: center; }
    .sb-sidebar-collapsed .sb-sidebar__user { justify-content: center; padding: var(--sb-space-3) 0; }
    .sb-sidebar-collapsed .sb-sidebar__brand { justify-content: center; padding: 0; }
}

/* Mobil: sidebar soldan açılır */
@media (max-width: 991.98px) {
    .sb-sidebar { transform: translateX(-100%); box-shadow: var(--sb-shadow-lg); }
    .sb-sidebar-open .sb-sidebar { transform: none; }
    .sb-main { margin-left: 0; }
    .sb-topbar { padding: 0 var(--sb-space-4); }
    .sb-content { padding: var(--sb-space-4); }
    .sb-backdrop {
        position: fixed; inset: 0; z-index: 1035;
        background: rgba(20, 16, 35, .45);
        opacity: 0; pointer-events: none; transition: opacity var(--sb-transition);
    }
    .sb-sidebar-open .sb-backdrop { opacity: 1; pointer-events: auto; }
}

/* 4. Bileşenler ----------------------------------------------------------- */

/* Sayfa başlığı — mevcut <header class="page-header"><h2> yapısıyla uyumlu */
.page-header {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sb-space-3);
    margin-bottom: var(--sb-space-5);
    flex-wrap: wrap;
}
.page-header .container-fluid { display: flex; align-items: center; justify-content: space-between; gap: var(--sb-space-3); flex-wrap: wrap; }
.page-header h2, .page-header .page-title { font-size: var(--sb-fs-2xl); font-weight: 700; margin: 0; letter-spacing: -.01em; }
.page-header p, .page-header .page-subtitle { color: var(--sb-text-muted); margin: 2px 0 0; }

/* İstatistik kartı */
.stat-card {
    --stat-accent: var(--sb-primary);
    --stat-soft: var(--sb-primary-soft);
    background: var(--sb-surface);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    box-shadow: var(--sb-shadow-sm);
    padding: var(--sb-space-4);
    display: flex; flex-direction: column; gap: 2px;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.stat-card::before {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--stat-accent);
}
.stat-number { font-size: var(--sb-fs-2xl); font-weight: 700; line-height: 1.15; color: var(--sb-text); }
.stat-label { font-size: var(--sb-fs-sm); color: var(--sb-text-muted); }
.stat-progress { height: 4px; background: var(--stat-soft); border-radius: var(--sb-radius-pill); margin-top: var(--sb-space-3); overflow: hidden; }
.stat-bar { height: 4px; border-radius: var(--sb-radius-pill); background: var(--stat-accent) !important; }
.stat-indigo, .stat-violet, .stat-purple, .stat-primary { --stat-accent: var(--sb-primary); --stat-soft: var(--sb-primary-soft); }
.stat-emerald, .stat-green, .stat-success              { --stat-accent: var(--sb-success); --stat-soft: var(--sb-success-soft); }
.stat-amber, .stat-yellow, .stat-orange, .stat-warning  { --stat-accent: var(--sb-warning); --stat-soft: var(--sb-warning-soft); }
.stat-red, .stat-danger                                 { --stat-accent: var(--sb-danger);  --stat-soft: var(--sb-danger-soft); }
.stat-teal, .stat-cyan, .stat-sky, .stat-blue, .stat-info { --stat-accent: var(--sb-info);  --stat-soft: var(--sb-info-soft); }

/* Tablo kartı: başlık + sayaç + tablo */
.sb-table-card { overflow: hidden; margin-bottom: var(--sb-space-4); }
.sb-table-card__header {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sb-space-3);
    padding: var(--sb-space-3) var(--sb-space-4);
    border-bottom: 1px solid var(--sb-border);
    font-weight: 600;
    font-size: var(--sb-fs-lg);
    flex-wrap: wrap;
}
.sb-table-card__header .fa { color: var(--sb-primary); margin-right: 6px; }
.sb-count {
    display: inline-flex; align-items: center;
    background: var(--sb-primary-soft); color: var(--sb-primary);
    border-radius: var(--sb-radius-pill);
    padding: 2px 10px;
    font-size: var(--sb-fs-xs); font-weight: 600;
}
.row-approved > td { background-color: rgba(20, 133, 95, .04); }
.row-rejected > td { background-color: rgba(200, 50, 63, .04); }

/* Rozet (durum, tür) — renk tone-* ile verilir */
.sb-badge {
    --tone: var(--sb-neutral); --tone-bg: var(--sb-neutral-soft);
    display: inline-flex; align-items: center; gap: 4px;
    border-radius: var(--sb-radius-pill);
    padding: 3px 10px;
    font-size: var(--sb-fs-xs); font-weight: 600;
    background: var(--tone-bg); color: var(--tone);
    white-space: nowrap;
}
.sb-badge[class*="tone-"] { background: var(--tone-bg); color: var(--tone); }
.sb-status { --tone: var(--sb-neutral); font-weight: 600; font-size: var(--sb-fs-sm); color: var(--tone); }

/* Avatar ve isim */
.sb-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--sb-primary-soft); color: var(--sb-primary);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: var(--sb-fs-xs);
    flex-shrink: 0; object-fit: cover;
}
.sb-name { font-weight: 600; color: var(--sb-text); }
.emp-code { font-size: var(--sb-fs-xs); color: var(--sb-text-subtle); }

/* İkon buton (tablo satırı aksiyonları) */
.sb-icon-btn {
    --tone: var(--sb-neutral); --tone-bg: var(--sb-neutral-soft);
    width: 30px; height: 30px; border-radius: var(--sb-radius-sm);
    border: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px;
    background: var(--tone-bg); color: var(--tone);
    cursor: pointer;
    transition: filter var(--sb-transition), transform var(--sb-transition);
}
.sb-icon-btn:hover { filter: brightness(.94); transform: translateY(-1px); color: var(--tone); }
.sb-icon-btn:focus-visible { outline: 2px solid var(--tone); outline-offset: 2px; }
.sb-icon-btn--view    { --tone: var(--sb-info);    --tone-bg: var(--sb-info-soft); }
.sb-icon-btn--edit    { --tone: var(--sb-warning); --tone-bg: var(--sb-warning-soft); }
.sb-icon-btn--delete,
.sb-icon-btn--reject  { --tone: var(--sb-danger);  --tone-bg: var(--sb-danger-soft); }
.sb-icon-btn--approve { --tone: var(--sb-success); --tone-bg: var(--sb-success-soft); }
.btn-toggle-active  { --tone: var(--sb-success); --tone-bg: var(--sb-success-soft); }
.btn-toggle-passive { --tone: var(--sb-neutral); --tone-bg: var(--sb-neutral-soft); }

/* Seçim kartları (izin türü, zimmet türü, doküman türü) */
.sb-choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: var(--sb-space-2); }
.sb-choice {
    --tone: var(--sb-primary); --tone-bg: var(--sb-primary-soft);
    border: 1px solid var(--sb-border-strong);
    border-radius: var(--sb-radius);
    padding: 10px 6px;
    text-align: center;
    cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    font-size: var(--sb-fs-xs); font-weight: 600;
    color: var(--sb-text-muted);
    position: relative;
    margin: 0;
    transition: border-color var(--sb-transition), background var(--sb-transition), color var(--sb-transition);
}
.sb-choice i { font-size: 1.15rem; }
.sb-choice:hover { border-color: var(--tone); color: var(--tone); }
.sb-choice.selected { border-color: var(--tone); background: var(--tone-bg); color: var(--tone); box-shadow: 0 0 0 1px var(--tone); }
.sb-choice-radio { position: absolute; opacity: 0; width: 0; height: 0; }

/* Personel arama açılır listesi */
.sb-owner-dropdown {
    /* top/left verilmez: giriş alanının hemen altında, akıştaki yerinde açılır */
    position: absolute; z-index: 1060;
    width: calc(100% - var(--bs-gutter-x, 1.5rem));
    background: var(--sb-surface);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    box-shadow: var(--sb-shadow-lg);
    max-height: 240px; overflow-y: auto;
    margin-top: 4px;
}
.sb-owner-option { display: flex; align-items: center; gap: var(--sb-space-2); padding: 8px 12px; cursor: pointer; font-size: var(--sb-fs-base); }
.sb-owner-option:hover, .sb-owner-option.active { background: var(--sb-primary-soft); color: var(--sb-primary); }
.sb-owner-avatar {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--sb-primary-soft); color: var(--sb-primary);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; flex-shrink: 0;
}

/* Dosya bırakma alanı */
.sb-dropzone {
    border: 1.5px dashed var(--sb-border-strong);
    border-radius: var(--sb-radius);
    padding: var(--sb-space-5);
    text-align: center;
    color: var(--sb-text-muted);
    cursor: pointer;
    transition: border-color var(--sb-transition), background var(--sb-transition);
}
.sb-dropzone:hover, .sb-dropzone.is-dragover, .sb-dropzone-selected { border-color: var(--sb-primary); background: var(--sb-primary-soft); color: var(--sb-primary); }

/* Gün rozeti (izin süresi) */
.day-badge-wrap { display: flex; justify-content: center; }
.day-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--sb-primary-soft); color: var(--sb-primary);
    border-radius: var(--sb-radius-pill);
    padding: 4px 14px; font-weight: 600; font-size: var(--sb-fs-sm);
}

/* Modal */
.modal-content { border: 0; border-radius: var(--sb-radius-lg); box-shadow: var(--sb-shadow-lg); }
.modal-header { border-bottom: 1px solid var(--sb-border); padding: var(--sb-space-4) var(--sb-space-5); }
.modal-title { font-size: var(--sb-fs-lg); font-weight: 600; display: flex; align-items: center; gap: var(--sb-space-2); }
.modal-title .fa { color: var(--sb-primary); }
.modal--success .modal-title .fa { color: var(--sb-success); }
.modal--danger  .modal-title .fa { color: var(--sb-danger); }
.modal-body { padding: var(--sb-space-4) var(--sb-space-5); }
.modal-footer { border-top: 1px solid var(--sb-border); padding: var(--sb-space-3) var(--sb-space-5); gap: var(--sb-space-2); }
.modal-footer > * { margin: 0; }
.modal-backdrop.show { opacity: .4; }

/* Grafik kartı */
.chart-card {
    background: var(--sb-surface);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    box-shadow: var(--sb-shadow-sm);
    padding: var(--sb-space-4);
    height: 100%;
}
.chart-card h5 { font-size: var(--sb-fs-lg); font-weight: 600; margin-bottom: 2px; }
.chart-card small { color: var(--sb-text-muted); display: block; margin-bottom: var(--sb-space-3); }

/* Sihirbaz adımları (personel ekle/düzenle) */
.wizard-steps { display: flex; align-items: center; gap: var(--sb-space-2); margin-bottom: var(--sb-space-5); flex-wrap: wrap; }
.wizard-step { display: flex; align-items: center; gap: var(--sb-space-2); cursor: pointer; color: var(--sb-text-muted); }
.step-circle {
    width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center;
    border: 1px solid var(--sb-border-strong);
    background: var(--sb-surface);
    font-weight: 600; font-size: var(--sb-fs-sm);
}
.step-label { font-size: var(--sb-fs-sm); font-weight: 500; }
.wizard-step.active .step-circle, .wizard-step.done .step-circle { background: var(--sb-primary); border-color: var(--sb-primary); color: #fff; }
.wizard-step.active { color: var(--sb-text); }
.wizard-line { flex: 1; min-width: 16px; height: 1px; background: var(--sb-border-strong); }
.wizard-panel { display: none; }
.wizard-panel.active { display: block; }

/* Sekmeler (personel detay) */
.detail-tabs { display: flex; gap: var(--sb-space-1); border-bottom: 1px solid var(--sb-border); padding: 0 var(--sb-space-4); overflow-x: auto; }
.detail-tab {
    background: none; border: 0; border-bottom: 2px solid transparent;
    padding: var(--sb-space-3) var(--sb-space-3);
    color: var(--sb-text-muted); font-weight: 500; white-space: nowrap;
}
.detail-tab:hover { color: var(--sb-text); }
.detail-tab.active { color: var(--sb-primary); border-bottom-color: var(--sb-primary); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.detail-field-label { font-size: var(--sb-fs-xs); color: var(--sb-text-subtle); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.detail-field-value { font-weight: 500; color: var(--sb-text); }

/* DataTables — tüm tablolar için ortak görünüm */
.dataTables_wrapper { padding: 0 var(--sb-space-4) var(--sb-space-3); }
.dataTables_wrapper .dataTables_info { font-size: var(--sb-fs-sm); color: var(--sb-text-subtle); padding-top: var(--sb-space-3); }
.dataTables_wrapper .dataTables_paginate { padding-top: var(--sb-space-3); }
.dataTables_wrapper .pagination { gap: 2px; margin: 0; }
.dataTables_wrapper .page-link { border: 0; border-radius: var(--sb-radius-sm) !important; color: var(--sb-text-muted); font-size: var(--sb-fs-sm); padding: 4px 10px; }
.dataTables_wrapper .page-item.active .page-link { background: var(--sb-primary); color: #fff; }
.dataTables_wrapper .page-link:hover { background: var(--sb-primary-soft); color: var(--sb-primary); }
.dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--sb-border-strong); border-radius: var(--sb-radius-sm); padding: 4px 8px;
}
.dataTables_wrapper .dt-buttons .btn { padding: 4px 10px; }
table.dataTable { margin-top: 0 !important; margin-bottom: 0 !important; }
.sb-table-card .dataTables_wrapper .row:first-child { padding-top: var(--sb-space-3); }

/* Boş durum */
.sb-empty { padding: var(--sb-space-6) var(--sb-space-4); text-align: center; color: var(--sb-text-muted); }
.sb-empty .fa { font-size: 1.75rem; color: var(--sb-text-subtle); display: block; margin-bottom: var(--sb-space-2); }

/* Giriş sayfası */
.sb-auth { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; background: var(--sb-surface); }
.sb-auth__aside {
    background: var(--sb-sidebar-bg);
    color: #fff;
    padding: 48px;
    display: flex; flex-direction: column; justify-content: space-between;
    position: relative; overflow: hidden;
}
.sb-auth__aside::after {
    content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%;
    right: -180px; bottom: -200px;
    background: radial-gradient(circle, rgba(124, 49, 194, .55), rgba(124, 49, 194, 0) 70%);
}
.sb-auth__brand { display: flex; align-items: center; gap: var(--sb-space-3); font-weight: 700; font-size: var(--sb-fs-xl); position: relative; z-index: 1; }
.sb-auth__pitch { position: relative; z-index: 1; max-width: 420px; }
.sb-auth__pitch h1 { font-size: 2rem; font-weight: 700; line-height: 1.2; margin-bottom: var(--sb-space-3); }
.sb-auth__pitch p { color: var(--sb-sidebar-text); font-size: var(--sb-fs-lg); margin: 0; }
.sb-auth__foot { color: var(--sb-sidebar-text); font-size: var(--sb-fs-sm); position: relative; z-index: 1; }
.sb-auth__foot a { color: #fff; }
.sb-auth__main { display: grid; place-items: center; padding: 48px 24px; }
.sb-auth__form { width: 100%; max-width: 360px; }
.sb-auth__form h2 { font-size: var(--sb-fs-2xl); font-weight: 700; margin-bottom: 4px; }
.sb-auth__form > p { color: var(--sb-text-muted); margin-bottom: var(--sb-space-5); }
.sb-auth__form .btn { width: 100%; padding: 10px; }
.sb-auth__alert {
    background: var(--sb-danger-soft); color: var(--sb-danger);
    border-radius: var(--sb-radius-sm); padding: 10px 12px;
    font-size: var(--sb-fs-sm); margin-bottom: var(--sb-space-4);
    display: flex; gap: var(--sb-space-2); align-items: center;
}
.sb-auth__alert--info { background: var(--sb-info-soft); color: var(--sb-info); align-items: flex-start; }
.sb-auth__alert--success { background: var(--sb-success-soft); color: var(--sb-success); }
@media (max-width: 991.98px) {
    .sb-auth { grid-template-columns: 1fr; }
    .sb-auth__aside { display: none; }
}
@media (max-width: 575.98px) {
    .sb-choice-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Grafik alanı yüksekliği ve küçük yardımcılar */
.chart-box { position: relative; height: 260px; }
.fw-semibold { font-weight: 600 !important; }
.ann-content-preview { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--sb-fs-sm); }

/* Personel profili (detay sayfası) */
.detail-profile-card {
    background: var(--sb-surface); border: 1px solid var(--sb-border); border-radius: var(--sb-radius);
    box-shadow: var(--sb-shadow-sm); padding: var(--sb-space-5) var(--sb-space-4); text-align: center;
    position: sticky; top: calc(var(--sb-topbar-height) + var(--sb-space-4));
}
.detail-avatar-wrap { position: relative; display: inline-block; margin-bottom: var(--sb-space-3); }
.detail-avatar { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; border: 3px solid var(--sb-primary-soft); }
.detail-status-dot { position: absolute; bottom: 4px; right: 4px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--sb-surface); background: var(--sb-neutral); }
.detail-status-dot.detail-status-active { background: var(--sb-success); }
.detail-status-dot.detail-status-passive { background: var(--sb-danger); }
.detail-status-dot.detail-status-leave { background: var(--sb-warning); }
.detail-fullname { font-weight: 700; font-size: var(--sb-fs-lg); }
.detail-username { font-size: var(--sb-fs-sm); color: var(--sb-text-muted); margin-top: 2px; }
.detail-badge {
    display: inline-block; background: var(--sb-primary-soft); color: var(--sb-primary);
    border-radius: var(--sb-radius-pill); padding: 3px 12px; font-size: var(--sb-fs-xs); font-weight: 600; margin: 2px;
}
.detail-badge-status.detail-status-active-badge  { background: var(--sb-success-soft); color: var(--sb-success); }
.detail-badge-status.detail-status-passive-badge { background: var(--sb-danger-soft);  color: var(--sb-danger); }
.detail-badge-status.detail-status-leave-badge   { background: var(--sb-warning-soft); color: var(--sb-warning); }
.detail-meta-row { display: flex; align-items: flex-start; gap: var(--sb-space-2); font-size: var(--sb-fs-sm); color: var(--sb-text-muted); margin-bottom: var(--sb-space-2); text-align: left; }
.detail-meta-row i { color: var(--sb-primary); width: 14px; margin-top: 2px; flex-shrink: 0; }
.detail-tabs-card { background: var(--sb-surface); border: 1px solid var(--sb-border); border-radius: var(--sb-radius); box-shadow: var(--sb-shadow-sm); overflow: hidden; }
.detail-tabs { list-style: none; margin: 0; background: var(--sb-surface-muted); }
.detail-tab { cursor: pointer; font-size: var(--sb-fs-sm); }
.detail-tab i { margin-right: 5px; }
.detail-tab-content { padding: var(--sb-space-5); }
.detail-field-value { padding-bottom: var(--sb-space-2); border-bottom: 1px solid var(--sb-border); }

/* DataTables dışa aktarma butonları (Excel, Yazdır) — sakin, ikincil görünüm */
.dt-buttons { display: inline-flex; gap: var(--sb-space-1); }
.dt-buttons .btn,
.dt-buttons .btn.btn-secondary,
.dt-buttons .btn.btn-success {
    background: var(--sb-surface);
    border: 1px solid var(--sb-border-strong) !important;
    color: var(--sb-text);
    border-radius: var(--sb-radius-sm) !important;
    font-size: var(--sb-fs-sm);
    padding: 4px 10px;
}
.dt-buttons .btn:hover { background: var(--sb-primary-soft); border-color: var(--sb-primary) !important; color: var(--sb-primary); }
.dt-buttons .btn .fa-file-excel-o { color: var(--sb-success); }

/* Kart başlığındaki h5 başlıklar ve uzun metin taşmaları */
.card-header h5 { font-size: var(--sb-fs-lg); font-weight: 600; display: flex; align-items: center; gap: var(--sb-space-2); }
.card-header h5 .fa, .page-header h2 .fa { color: var(--sb-primary); }
.detail-meta-row > span, .detail-meta-row > div { min-width: 0; overflow-wrap: anywhere; }

/* Puantaj satır durumları */
.row-weekend > td, .row-holiday > td { background-color: var(--sb-surface-muted); color: var(--sb-text-subtle); }
.row-holiday > td { background-color: rgba(23, 105, 170, .04); }
.row-leave > td { background-color: rgba(124, 49, 194, .04); }

/* Durum metni tek satır; seri no gibi kod alanları nötr */
.sb-status { white-space: nowrap; }
.table code, .sb-table-card code { color: var(--sb-text-muted); background: var(--sb-surface-muted); padding: 1px 6px; border-radius: 4px; font-size: var(--sb-fs-xs); }

/* Kaydırıcı ve onay kutuları marka renginde */
input[type="range"], input[type="checkbox"], input[type="radio"] { accent-color: var(--sb-primary); }
.form-range::-webkit-slider-thumb { background-color: var(--sb-primary); }
.form-range::-moz-range-thumb { background-color: var(--sb-primary); }
.form-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--sb-primary-ring); }

/* SweetAlert2 uyarı pencereleri */
.swal2-popup { font-family: var(--sb-font); border-radius: var(--sb-radius-lg) !important; padding: var(--sb-space-5) !important; width: 26em !important; }
.swal2-title { font-size: var(--sb-fs-xl) !important; font-weight: 700 !important; color: var(--sb-text) !important; }
.swal2-html-container, .swal2-content { font-size: var(--sb-fs-base) !important; color: var(--sb-text-muted) !important; }
.swal2-styled { border-radius: var(--sb-radius-sm) !important; font-size: var(--sb-fs-base) !important; font-weight: 500 !important; padding: 8px 18px !important; }
.swal2-styled.swal2-confirm { background-color: var(--sb-primary) !important; }
.swal2-styled.swal2-cancel { background-color: var(--sb-neutral-soft) !important; color: var(--sb-text) !important; }
.swal2-styled:focus { box-shadow: 0 0 0 3px var(--sb-primary-ring) !important; }

/* Geniş tablolarda daha sıkı hücre boşluğu; ilk/son sütunda kenar boşluğu korunur */
.sb-table-card .table > :not(caption) > * > * { padding: 10px 8px; }
.sb-table-card .table > :not(caption) > * > *:first-child { padding-left: var(--sb-space-4); }
.sb-table-card .table > :not(caption) > * > *:last-child { padding-right: var(--sb-space-4); }

/* İstatistik kartı alt notu */
.stat-hint { font-size: var(--sb-fs-xs); color: var(--sb-text-subtle); margin-top: var(--sb-space-2); }

/* Ayar/bilgi uyarısı (ör. veritabanı betiği çalıştırılmamış) */
.sb-notice { display: flex; gap: var(--sb-space-3); align-items: flex-start; background: var(--sb-warning-soft); color: var(--sb-warning); border-radius: var(--sb-radius); padding: var(--sb-space-3) var(--sb-space-4); margin-bottom: var(--sb-space-4); font-size: var(--sb-fs-sm); }
.sb-notice .fa { margin-top: 2px; }
.sb-notice code { color: inherit; background: rgba(0,0,0,.05); padding: 0 4px; border-radius: 4px; }

/* Menü sayaç rozeti */
.sb-nav__badge { margin-left: auto; background: var(--sb-danger); color: #fff; border-radius: var(--sb-radius-pill); font-size: .6875rem; font-weight: 700; min-width: 20px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; }
.sb-sidebar-collapsed .sb-nav__badge { position: absolute; margin: 0; transform: translate(14px, -10px); min-width: 16px; height: 16px; font-size: 10px; }
.sb-nav__link { position: relative; }

/* Sekmeli ayar sayfaları */
.sb-tabs { display: flex; gap: var(--sb-space-1); border-bottom: 1px solid var(--sb-border); margin-bottom: var(--sb-space-4); overflow-x: auto; }
.sb-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--sb-text-muted); font-weight: 500; padding: var(--sb-space-3) var(--sb-space-3); white-space: nowrap; background: none; }
.sb-tabs .nav-link:hover { color: var(--sb-text); }
.sb-tabs .nav-link.active { color: var(--sb-primary); border-bottom-color: var(--sb-primary); background: none; }

/* Hatırlatma listesi */
.sb-list { list-style: none; margin: 0; padding: 0; }
.sb-list li { display: flex; align-items: center; gap: var(--sb-space-3); padding: 10px var(--sb-space-4); border-bottom: 1px solid var(--sb-border); }
.sb-list li:last-child { border-bottom: 0; }
.sb-list__main { flex: 1; min-width: 0; }
.sb-list__title { font-weight: 600; }
.sb-list__meta { font-size: var(--sb-fs-xs); color: var(--sb-text-muted); }
.tone-pink[class] { --tone: #b0306f; --tone-bg: #fbe7f1; }

/* Satır içi filtre formlarında seçim kutuları içeriğini kesmesin */
.col-auto > .form-select, .col-sm-auto > .form-select { min-width: 120px; }

/* Üst bardaki firma etiketi (Süper Admin'de firma değiştirme bağlantısı) */
.sb-company-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--sb-radius-pill); background: var(--sb-surface-muted); border: 1px solid var(--sb-border); color: var(--sb-text-muted); font-size: var(--sb-fs-sm); font-weight: 500; text-decoration: none; max-width: 40vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.sb-company-chip:hover { border-color: var(--sb-primary); color: var(--sb-primary); }

/* Rol izin listesi */
.perm-group { margin-bottom: var(--sb-space-4); }
.perm-group__title { font-size: var(--sb-fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--sb-text-subtle); font-weight: 600; margin-bottom: var(--sb-space-2); }
.perm-item { display: flex; gap: var(--sb-space-3); padding: 8px 12px; border: 1px solid var(--sb-border); border-radius: var(--sb-radius-sm); margin-bottom: 6px; cursor: pointer; align-items: flex-start; }
.perm-item:hover { border-color: var(--sb-border-strong); background: var(--sb-surface-muted); }
.perm-item input { margin-top: 3px; flex-shrink: 0; }
.perm-item__name { font-weight: 600; }
.perm-item__desc { font-size: var(--sb-fs-xs); color: var(--sb-text-muted); }
.perm-item.is-sensitive .perm-item__name::after { content: "KVKK"; margin-left: 6px; font-size: 10px; font-weight: 700; color: var(--sb-danger); background: var(--sb-danger-soft); padding: 1px 6px; border-radius: var(--sb-radius-pill); }
.role-matrix th, .role-matrix td { text-align: center; }
.role-matrix th:first-child, .role-matrix td:first-child { text-align: left; }

/* Hassas veri izni olmayan kullanıcı: alanlar gizlenir (değerler sunucuda zaten boşaltılır) */
.sensitive-notice { display: none; }
.sensitive-locked .is-sensitive { display: none !important; }
.sensitive-locked .is-sensitive-panel > :not(.sensitive-notice) { display: none !important; }
.sensitive-locked .sensitive-notice { display: flex; }
.sb-empty .btn .fa { display: inline; font-size: inherit; color: inherit; margin: 0; }

/* Bildirim zili ve listesi */
.sb-bell__badge { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--sb-radius-pill); background: var(--sb-danger); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--sb-surface); }
.sb-bell { width: 360px; max-width: calc(100vw - 24px); padding: 0; overflow: hidden; }
.sb-bell__head { display: flex; justify-content: space-between; align-items: center; padding: var(--sb-space-3) var(--sb-space-4); border-bottom: 1px solid var(--sb-border); font-weight: 600; }
.sb-bell__head .btn-link { color: var(--sb-primary); text-decoration: none; font-size: var(--sb-fs-xs); }
.sb-bell__item { display: flex; gap: var(--sb-space-3); align-items: flex-start; padding: 10px var(--sb-space-4); border-bottom: 1px solid var(--sb-border); color: var(--sb-text); text-decoration: none; position: relative; }
.sb-bell__item:hover { background: var(--sb-surface-muted); color: var(--sb-text); }
.sb-bell__item.is-unread { background: rgba(124, 49, 194, .04); }
.sb-bell__item.is-unread::before { content: ""; position: absolute; left: 6px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--sb-primary); }
.sb-bell__item .sb-icon-btn { flex-shrink: 0; pointer-events: none; }
.sb-bell__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sb-bell__title { font-weight: 600; font-size: var(--sb-fs-sm); }
.sb-bell__item:not(.is-unread) .sb-bell__title { font-weight: 500; }
.sb-bell__msg { font-size: var(--sb-fs-xs); color: var(--sb-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-bell__time { font-size: var(--sb-fs-xs); color: var(--sb-text-subtle); }
.sb-bell__all { display: block; text-align: center; padding: 10px; font-size: var(--sb-fs-sm); font-weight: 500; text-decoration: none; }
.sb-bell__all:hover { background: var(--sb-surface-muted); }
.sb-table-card .sb-bell__item:last-child { border-bottom: 0; }
.sb-table-card .sb-bell__msg { white-space: normal; }

/* Hukuki metin (aydınlatma metni) */
.sb-legal-text { white-space: pre-wrap; line-height: 1.65; max-height: 60vh; overflow-y: auto; padding-right: var(--sb-space-2); }

/* ── Hata / durum sayfası ─────────────────────────────────── */
.sb-status-page { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: var(--sb-bg); }
.sb-status-card { width: 100%; max-width: 460px; text-align: center; background: var(--sb-surface); border-radius: var(--sb-radius-lg); box-shadow: var(--sb-shadow); padding: 40px 32px; }
.sb-status-code { font-size: 4rem; font-weight: 800; line-height: 1; color: var(--sb-primary); margin-bottom: 12px; letter-spacing: -2px; }

/* ── Herkese açık belge sayfası (gizlilik politikası) ─────── */
.sb-doc-page { min-height: 100vh; background: var(--sb-bg); padding: 32px 16px; }
.sb-doc { max-width: 760px; margin: 0 auto; background: var(--sb-surface); border-radius: var(--sb-radius-lg); box-shadow: var(--sb-shadow); padding: 36px 32px; line-height: 1.65; }
.sb-doc h1 { font-size: var(--sb-fs-2xl); font-weight: 700; margin-bottom: 4px; }
.sb-doc h2 { font-size: var(--sb-fs-lg); font-weight: 700; margin: 28px 0 8px; }
.sb-doc ul { padding-left: 20px; }
.sb-doc li { margin-bottom: 6px; }
@media (max-width: 575.98px) { .sb-doc { padding: 24px 18px; } }

/* Şirket Ayarları — kurumsal renk seçimi */
.pf-swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--sb-border); padding: 0; cursor: pointer; display: inline-block; vertical-align: middle; }
.pf-swatch.is-selected { box-shadow: 0 0 0 2px var(--sb-text); }
.pf-swatch--sm { width: 14px; height: 14px; border-width: 1px; cursor: inherit; }