/* ============================================================
   BeeBoss Panel — Tasarım Sistemi (bal/amber + koyu espresso)
   Bootstrap yalnız grid/utility için; bileşen görünümü burada.
   ============================================================ */
:root {
    --bb-primary: #F59E0B;
    --bb-primary-600: #D97706;
    --bb-primary-700: #B45309;
    --bb-primary-050: #FEF3C7;
    --bb-ink: #241a0a;

    /* Sidebar — açık tema (varsayılan) */
    --bb-sidebar-1: #FFFFFF;
    --bb-sidebar-2: #F6F2ED;
    --bb-side-text: #3A2E26;
    --bb-side-muted: #6B5E53;
    --bb-side-hover: rgba(0,0,0,.045);
    --bb-side-active-bg: var(--bb-primary-050);
    --bb-side-active-text: var(--bb-primary-700);
    --bb-side-border: #ECE6DF;
    --bb-side-strong: #2A2019;
    --bb-side-scroll: rgba(0,0,0,.13);

    --bb-bg: #F4F5F7;
    --bb-surface: #FFFFFF;
    --bb-text: #1B2430;
    --bb-muted: #6B7480;
    --bb-border: #E7E9EE;
    --bb-border-2: #EEF0F3;

    --bb-success: #15A34A; --bb-success-bg: #DCFCE7;
    --bb-danger: #DC2626;  --bb-danger-bg: #FEE2E2;
    --bb-warn: #D97706;    --bb-warn-bg: #FEF3C7;
    --bb-info: #2563EB;    --bb-info-bg: #DBEAFE;

    --r-sm: 9px; --r: 12px; --r-lg: 16px; --pill: 999px;
    --sh-sm: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.04);
    --sh: 0 6px 20px -6px rgba(16,24,40,.14);
    --sh-lg: 0 18px 40px -12px rgba(16,24,40,.22);
    --tr: .18s cubic-bezier(.4,0,.2,1);
}

* { box-sizing: border-box; }
html, body {
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    background: var(--bb-bg);
    color: var(--bb-text);
    font-size: 14.5px;
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.01em;
}
h1,h2,h3,h4,h5,h6 { font-weight: 700; letter-spacing: -0.02em; color: var(--bb-text); }
a { color: var(--bb-primary-700); text-decoration: none; }
a:hover { color: var(--bb-primary-600); }
::selection { background: var(--bb-primary-050); }

/* ---------- Uygulama kabuğu ---------- */
.bb-app { display: flex; min-height: 100vh; }

.bb-sidebar {
    width: 258px; flex-shrink: 0;
    background: linear-gradient(180deg, var(--bb-sidebar-1), var(--bb-sidebar-2));
    color: var(--bb-side-text);
    border-right: 1px solid var(--bb-side-border);
    display: flex; flex-direction: column;
    padding: 18px 14px; gap: 4px;
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.bb-brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 18px; }
.bb-brand .logo { width: 34px; height: 34px; border-radius: 10px;
    background: linear-gradient(135deg, var(--bb-primary), var(--bb-primary-700));
    display: grid; place-items: center; font-size: 18px; box-shadow: 0 4px 12px -2px rgba(245,158,11,.5); }
.bb-brand .name { font-weight: 700; color: var(--bb-side-strong); font-size: 16px; letter-spacing: -.02em; }
.bb-brand .sub { font-size: 11px; color: var(--bb-side-muted); }

.bb-nav-section { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em;
    color: var(--bb-side-muted); padding: 14px 10px 6px; font-weight: 600; }
.bb-nav a {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 11px; border-radius: 10px;
    color: var(--bb-side-text); font-weight: 500; font-size: 14px;
    transition: var(--tr); position: relative;
}
.bb-nav a i { font-size: 17px; width: 20px; text-align: center; opacity: .85; }
.bb-nav a:hover { background: var(--bb-side-hover); color: var(--bb-side-strong); }
.bb-nav a.active {
    background: var(--bb-side-active-bg);
    color: var(--bb-side-active-text);
}
.bb-nav a.active i { opacity: 1; color: var(--bb-primary); }
.bb-nav a.active::before { content:""; position:absolute; left:-14px; top:8px; bottom:8px; width:3px;
    border-radius: 0 3px 3px 0; background: var(--bb-primary); }

/* Akordeon: ana menü (açılır grup) + alt menüler */
.bb-nav-group { display:flex; align-items:center; gap:11px; width:100%;
    padding:9px 11px; border:none; background:transparent; text-align:left; cursor:pointer;
    color:var(--bb-side-text); font-weight:500; font-size:14px; border-radius:10px; transition:var(--tr); }
.bb-nav-group .ico { font-size:17px; width:20px; text-align:center; opacity:.85; }
.bb-nav-group .chev { margin-left:auto; font-size:12px; opacity:.55; transition: transform .22s ease; }
.bb-nav-group:hover { background:var(--bb-side-hover); color:var(--bb-side-strong); }
.bb-nav-group.aktif { color:var(--bb-side-active-text); }
.bb-nav-group.aktif .ico { color:var(--bb-primary); opacity:1; }
.bb-nav-group.acik { color:var(--bb-side-strong); }
.bb-nav-group.acik .chev { transform: rotate(90deg); opacity:.9; }

.bb-nav-sub { overflow:hidden; max-height:0; transition:max-height .26s ease;
    margin:2px 0 2px 20px; border-left:1px solid var(--bb-side-border); padding-left:8px; }
.bb-nav-sub.acik { max-height:460px; }
.bb-nav-sub a { display:flex; align-items:center; gap:9px; padding:8px 11px; border-radius:8px;
    color:var(--bb-side-muted); font-size:13.5px; font-weight:500; transition:var(--tr); }
.bb-nav-sub a .dot { width:15px; text-align:center; font-size:14px; opacity:.75; }
.bb-nav-sub a:hover { background:var(--bb-side-hover); color:var(--bb-side-strong); }
.bb-nav-sub a.active { color:var(--bb-side-active-text); background:var(--bb-side-active-bg); }

.bb-side-foot { margin-top: auto; padding: 12px 10px 4px; border-top: 1px solid var(--bb-side-border); }
.bb-side-user { display:flex; align-items:center; gap:10px; }
.bb-side-user .av { width:32px; height:32px; border-radius: 50%; background: var(--bb-primary); color: var(--bb-ink);
    display:grid; place-items:center; font-weight:700; font-size:13px; }
.bb-side-user .who { font-size: 13px; color:var(--bb-side-strong); font-weight:500; line-height:1.2; }
.bb-side-user .who small { color: var(--bb-side-muted); font-weight:400; }

/* ---------- Ana alan ---------- */
.bb-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.bb-topbar { position: sticky; top: 0; z-index: 20;
    height: 62px; background: rgba(255,255,255,.85); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--bb-border);
    display: flex; align-items: center; justify-content: space-between; padding: 0 26px; }
.bb-crumb { color: var(--bb-muted); font-size: 13px; }
.bb-crumb b { color: var(--bb-text); font-weight: 600; }
.bb-content { padding: 26px; flex: 1; }
.bb-page-head { display:flex; align-items:center; justify-content:space-between; margin-bottom: 20px; gap: 12px; }
.bb-page-head h4, .bb-page-head h1 { margin:0; font-size: 21px; }

.bb-chip { display:inline-flex; align-items:center; gap:6px; padding: 4px 11px; border-radius: var(--pill);
    background: var(--bb-primary-050); color: var(--bb-primary-700); font-weight:600; font-size:12px; }

/* ---------- Butonlar ---------- */
.btn { border-radius: var(--r-sm); font-weight: 600; font-size: 14px;
    padding: 8px 16px; transition: var(--tr); border: 1px solid transparent; letter-spacing: -.01em; }
.btn:focus, .btn:active:focus { box-shadow: 0 0 0 3px rgba(245,158,11,.28); outline: none; }
.btn-sm { padding: 5px 11px; font-size: 12.5px; border-radius: 8px; }
.btn-warning, .btn-primary {
    background: linear-gradient(135deg, var(--bb-primary), var(--bb-primary-600));
    color: var(--bb-ink); border: none; box-shadow: 0 4px 12px -3px rgba(245,158,11,.5); }
.btn-warning:hover, .btn-primary:hover {
    background: linear-gradient(135deg, var(--bb-primary-600), var(--bb-primary-700)); color: #fff; }
.btn-outline-secondary { background:#fff; border:1px solid var(--bb-border); color: var(--bb-text); }
.btn-outline-secondary:hover { background: var(--bb-bg); border-color:#D6D9DF; color: var(--bb-text); }
.btn-outline-primary { background:#fff; border:1px solid var(--bb-primary); color: var(--bb-primary-700); }
.btn-outline-primary:hover { background: var(--bb-primary-050); color: var(--bb-primary-700); }
.btn-outline-danger { background:#fff; border:1px solid #F3C0C0; color: var(--bb-danger); }
.btn-outline-danger:hover { background: var(--bb-danger-bg); color: var(--bb-danger); }
.btn-link { color: var(--bb-muted); font-weight:500; }
.btn-link:hover { color: var(--bb-text); }

/* ---------- Kartlar ---------- */
.card { background: var(--bb-surface); border: 1px solid var(--bb-border);
    border-radius: var(--r-lg); box-shadow: var(--sh-sm); }
.card-body { padding: 20px 22px; }
.card h6 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--bb-muted);
    font-weight: 700; margin-bottom: 14px; }

/* ---------- Formlar ---------- */
.form-label { font-size: 12.5px; font-weight: 600; color: var(--bb-muted); margin-bottom: 5px; }
.form-control, .form-select {
    border: 1px solid var(--bb-border); border-radius: var(--r-sm);
    padding: 9px 12px; font-size: 14px; color: var(--bb-text); background-color: #fff;
    transition: var(--tr); }
.form-control:focus, .form-select:focus {
    border-color: var(--bb-primary); box-shadow: 0 0 0 3.5px rgba(245,158,11,.16); }
.form-control::placeholder { color: #A6ADB8; }
.form-control-sm, .form-select-sm { padding: 6px 10px; font-size: 13px; }
textarea.form-control { min-height: 80px; }
.form-check-input:checked { background-color: var(--bb-primary); border-color: var(--bb-primary); }
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(245,158,11,.2); border-color: var(--bb-primary); }
.form-switch .form-check-input { width: 2.4em; height: 1.3em; }

/* ---------- Tablolar ---------- */
.table { --bs-table-bg: transparent; margin: 0; color: var(--bb-text); }
.table thead th { text-transform: uppercase; font-size: 11px; letter-spacing: .04em;
    color: var(--bb-muted); font-weight: 700; border-bottom: 1px solid var(--bb-border);
    padding: 10px 12px; background: #FbFbFC; }
.table tbody td { padding: 12px; border-bottom: 1px solid var(--bb-border-2); vertical-align: middle; font-size: 14px; }
.table tbody tr:hover td { background: #FBFAF7; }
.table code { background: var(--bb-primary-050); color: var(--bb-primary-700); padding: 2px 7px;
    border-radius: 6px; font-size: 12.5px; font-weight: 600; }

/* ---------- Sekmeler ---------- */
.nav-tabs { border-bottom: 1px solid var(--bb-border); gap: 4px; }
.nav-tabs .nav-link { border: none; color: var(--bb-muted); font-weight: 600; font-size: 14px;
    padding: 10px 16px; border-radius: 9px 9px 0 0; background: transparent; }
.nav-tabs .nav-link:hover { color: var(--bb-text); background: #fff; }
.nav-tabs .nav-link.active { color: var(--bb-primary-700); background: #fff;
    border-bottom: 2.5px solid var(--bb-primary); }

/* ---------- Rozet / durum ---------- */
.badge, .text-bg-warning { border-radius: var(--pill); font-weight: 600; font-size: 11.5px; padding: 4px 10px; }
.text-bg-warning { background: var(--bb-primary-050) !important; color: var(--bb-primary-700) !important; }
.bb-badge-ok { background: var(--bb-success-bg); color: var(--bb-success); }
.bb-badge-off { background: #EEF0F3; color: var(--bb-muted); }

/* ---------- Uyarı kutuları ---------- */
.alert { border: none; border-radius: var(--r); font-size: 14px; padding: 12px 16px; }
.alert-danger { background: var(--bb-danger-bg); color: #991B1B; }
.alert-info { background: var(--bb-info-bg); color: #1E40AF; }
.alert-success { background: var(--bb-success-bg); color: #166534; }

/* ---------- Giriş ekranı ---------- */
.bb-login { min-height: 100vh; display: grid; place-items: center;
    background:
      radial-gradient(1000px 500px at 80% -10%, rgba(245,158,11,.18), transparent),
      radial-gradient(800px 500px at -10% 110%, rgba(245,158,11,.10), transparent),
      linear-gradient(160deg, #201711, #120D0A); padding: 20px; }
.bb-login-card { width: 400px; max-width: 100%; background: #fff; border-radius: 20px;
    box-shadow: var(--sh-lg); padding: 34px 32px; }
.bb-login .logo { width: 46px; height: 46px; border-radius: 13px; margin-bottom: 16px;
    background: linear-gradient(135deg, var(--bb-primary), var(--bb-primary-700));
    display: grid; place-items: center; font-size: 24px; box-shadow: 0 8px 20px -4px rgba(245,158,11,.55); }

/* ---------- Kategori ağacı ---------- */
.kat-agac { background:#fff; border:1px solid var(--bb-border); border-radius: var(--r-lg); box-shadow: var(--sh-sm); overflow:hidden; }
.kat-satir { display:flex; align-items:center; gap:10px; padding:9px 14px; border-bottom:1px solid var(--bb-border-2);
    transition: background var(--tr); }
.kat-satir:last-child { border-bottom:none; }
.kat-satir:hover { background:#FBFAF7; }
.kat-satir:hover .kat-actions { opacity:1; }
.kat-satir[draggable="true"] { cursor: default; }
.kat-grip { color:var(--bb-muted); cursor:grab; font-size:14px; opacity:.5; }
.kat-satir:hover .kat-grip { opacity:.9; }
.kat-toggle { width:22px; height:22px; border:none; background:transparent; color:var(--bb-muted);
    cursor:pointer; border-radius:6px; display:grid; place-items:center; font-size:12px; transition: var(--tr); flex-shrink:0; }
.kat-toggle:hover { background:#EEF0F3; color:var(--bb-text); }
.kat-toggle.bos { visibility:hidden; }
.kat-chip { width:30px; height:30px; border-radius:9px; display:grid; place-items:center; font-size:15px; flex-shrink:0;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); }
.kat-foto { width:30px; height:30px; border-radius:9px; object-fit:cover; flex-shrink:0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.kat-ad { font-weight:600; font-size:14.5px; }
.kat-alt-sayi { font-size:11.5px; color:var(--bb-muted); background:#F1F2F5; border-radius:var(--pill); padding:1px 8px; font-weight:600; }
.kat-actions { margin-left:auto; display:flex; gap:6px; opacity:0; transition:opacity var(--tr); }
.kat-cizgi { border-left:1px dashed var(--bb-border); margin-left:24px; }
/* BeeBoss sanal kök düğümü (ağacın en üstü — buraya bırakınca Ana Kategori olur) */
.kat-kok-dugum { background:linear-gradient(90deg, var(--bb-primary-050), transparent);
    border-bottom:1px solid var(--bb-border); font-weight:700; }
.kat-kok-dugum .kat-ad { font-size:15px; letter-spacing:-.01em; }
.kat-kok-chip { display:inline-grid; place-items:center; width:30px; height:30px; border-radius:9px;
    background:linear-gradient(135deg, var(--bb-primary), var(--bb-primary-600)); font-size:16px; flex-shrink:0;
    box-shadow:0 3px 8px -2px rgba(245,158,11,.5); }
.kat-kok-ipucu { margin-left:12px; font-size:11.5px; font-weight:500; color:var(--bb-muted);
    border:1px dashed var(--bb-border); border-radius:20px; padding:2px 10px; white-space:nowrap; }
.kat-kok-dugum:hover .kat-kok-ipucu { border-color:var(--bb-primary); color:var(--bb-primary-700); }

/* Ürün foto önizleme kutusu — KARE (ürün fotoğrafları 1:1) */
.urun-foto-kutu { width:100%; max-width:200px; aspect-ratio:1/1; border:1px solid var(--bb-border); border-radius:var(--r);
    background:var(--bb-surface); overflow:hidden; display:grid; place-items:center; }
.urun-foto-kutu img { width:100%; height:100%; object-fit:cover; }
.urun-foto-kutu .bos { font-size:34px; color:var(--bb-muted); opacity:.45; }
.urun-foto-kk { border-style:dashed; }

/* Paket (menü/kombo) */
.paket-kapak { width:56px; height:56px; flex-shrink:0; border-radius:12px; overflow:hidden;
    background:var(--bb-primary-050); color:var(--bb-primary); display:grid; place-items:center; font-size:24px; }
.paket-kapak img { width:100%; height:100%; object-fit:cover; }
.paket-slot { border:1px solid var(--bb-border); border-radius:var(--r-lg); padding:14px; background:var(--bb-surface);
    border-left:3px solid var(--bb-primary); }
.paket-slot-no { display:inline-grid; place-items:center; width:26px; height:26px; border-radius:8px; flex-shrink:0;
    background:var(--bb-primary); color:var(--bb-ink); font-weight:700; font-size:13px; }
.renk-nokta { display:inline-block; width:13px; height:13px; border-radius:50%; vertical-align:middle; margin-right:4px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }

/* Fiyat / kanal matrisi */
.fiyat-matris th { white-space:nowrap; font-size:12.5px; vertical-align:bottom; }
.fiyat-matris td { min-width:120px; }
.fiyat-matris td:first-child, .fiyat-matris th:first-child { position:sticky; left:0; background:var(--bb-surface); z-index:1; min-width:120px; }
.fiyat-matris input { width:110px; }
.matris-kom { font-weight:400; font-size:10.5px; color:var(--bb-muted); }
.net-ipucu { font-size:10.5px; color:var(--bb-primary-700); margin-top:2px; }
.fiyat-matris input.bb-miras { border-style:dashed; color:var(--bb-muted); }

/* Zengin metin editörü */
.zengin-editor { border:1px solid var(--bb-border); border-radius:var(--r); overflow:hidden; background:#fff; }
:root[data-tema="koyu"] .zengin-editor { background:var(--bb-surface); }
.zengin-arac { display:flex; gap:2px; align-items:center; padding:5px 7px; background:var(--bb-bg); border-bottom:1px solid var(--bb-border); flex-wrap:wrap; }
.zengin-arac button { border:none; background:transparent; width:30px; height:28px; border-radius:6px; color:var(--bb-text); cursor:pointer; }
.zengin-arac button:hover { background:var(--bb-primary-050); color:var(--bb-primary-700); }
.zengin-arac .ayrac { width:1px; height:18px; background:var(--bb-border); margin:0 3px; }
.zengin-alan { min-height:110px; border:none; border-radius:0; outline:none; box-shadow:none; }
.zengin-alan:focus { box-shadow:none; }
.zengin-alan ul, .zengin-alan ol { padding-left:22px; }

/* Rozet (4-köşe badge) */
.rozet-badge, .rozet-badge-onizleme { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600;
    padding:2px 8px; border-radius:20px; white-space:nowrap; }
.rozet-gorsel { width:16px; height:16px; object-fit:contain; border-radius:3px; }
.rozet-onizleme { position:relative; width:100%; max-width:240px; aspect-ratio:1/1; border:1px solid var(--bb-border);
    border-radius:var(--r); overflow:hidden; background:var(--bb-bg); display:grid; place-items:center; }
.rozet-onizleme img { width:100%; height:100%; object-fit:cover; }
.rozet-onizleme .foto-bos { font-size:40px; color:var(--bb-muted); opacity:.35; }
/* Önizlemede rozet: kartın %20'sini geçmeyen KARE alan (kiosk kuralıyla birebir) */
.rozet-onizleme .rozet-badge { position:absolute; box-shadow:0 2px 6px rgba(0,0,0,.25);
    width:20%; aspect-ratio:1/1; padding:2px; border-radius:14%;
    display:grid; place-items:center; text-align:center; font-size:10px; line-height:1.1; overflow:hidden; }
.rozet-onizleme .rozet-badge .rozet-gorsel { width:100%; height:100%; object-fit:contain; border-radius:0; }
.rozet-onizleme .rozet-badge.gorselli { background:transparent !important; box-shadow:none; }
.rozet-onizleme .kose-0 { top:8px; left:8px; }
.rozet-onizleme .kose-1 { top:8px; right:8px; }
.rozet-onizleme .kose-2 { bottom:8px; left:8px; }
.rozet-onizleme .kose-3 { bottom:8px; right:8px; }

/* ---------- İkon seçici ---------- */
.ikon-sec { display:flex; flex-wrap:wrap; gap:8px; }
.ikon-sec button { width:40px; height:40px; border:1px solid var(--bb-border); background:#fff; border-radius:10px;
    font-size:18px; color:var(--bb-text); cursor:pointer; transition:var(--tr); display:grid; place-items:center; }
.ikon-sec button:hover { border-color:var(--bb-primary); background:var(--bb-primary-050); }
.ikon-sec button.secili { border-color:var(--bb-primary); background:var(--bb-primary); color:#fff; box-shadow:0 4px 10px -2px rgba(245,158,11,.5); }

/* ---------- Boş durum ---------- */
.bb-empty { text-align:center; color: var(--bb-muted); padding: 40px 0; }

/* ---------- Ürün listesi: foto küçük resmi + sabit satır yüksekliği (dinamik sayfalama ölçümü buna güvenir) ----------
   Global ".table tbody td" (padding 12px) ezilir ki satır 56px'te sabitlensin — Urunler.razor SatirPx bununla eş. */
.table tbody tr.bb-liste-satir td { height: 56px; padding: 6px 12px; }
.bb-urun-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 8px;
    border: 1px solid var(--bb-border); background: var(--bb-surface, #fff); display: block; }
.bb-urun-thumb-bos { display: flex; align-items: center; justify-content: center;
    color: var(--bb-muted); font-size: 17px; background: var(--bb-bg); }

/* ---------- Hata sınırı ---------- */
#blazor-error-ui { background: #1B2430; color:#fff; }
.blazor-error-boundary { background: #b32121; padding: 1rem; color: white; border-radius: 10px; }
.validation-message { color: var(--bb-danger); font-size: 12.5px; }

/* ============ KOYU MOD ============ */
:root[data-tema="koyu"] {
    --bb-bg:#141110; --bb-surface:#1D1916; --bb-text:#ECE6E0; --bb-muted:#9C918A;
    --bb-border:#2F2822; --bb-border-2:#272019;
    /* Sidebar — koyu tema */
    --bb-sidebar-1:#241A15; --bb-sidebar-2:#17110D;
    --bb-side-text:#C9BFB6; --bb-side-muted:#8A7F76;
    --bb-side-hover: rgba(255,255,255,.06);
    --bb-side-active-bg: linear-gradient(135deg, rgba(245,158,11,.22), rgba(245,158,11,.10));
    --bb-side-active-text:#FFE8B8;
    --bb-side-border: rgba(255,255,255,.08);
    --bb-side-strong:#FFFFFF;
    --bb-side-scroll: rgba(255,255,255,.14);
    --bb-primary-050: rgba(245,158,11,.16);
    --bb-success-bg: rgba(21,163,74,.18); --bb-danger-bg: rgba(220,38,38,.20);
    --bb-warn-bg: rgba(217,119,6,.18); --bb-info-bg: rgba(37,99,235,.20);
    --sh-sm: 0 1px 2px rgba(0,0,0,.45); --sh: 0 8px 24px -6px rgba(0,0,0,.55); --sh-lg: 0 20px 44px -12px rgba(0,0,0,.6);
}
:root[data-tema="koyu"] .form-control, :root[data-tema="koyu"] .form-select,
:root[data-tema="koyu"] textarea.form-control { background-color:#171310; color:var(--bb-text); border-color:var(--bb-border); }
:root[data-tema="koyu"] .form-control::placeholder { color:#6E645C; }
:root[data-tema="koyu"] .table thead th { background:#211B16; color:var(--bb-muted); }
:root[data-tema="koyu"] .table tbody tr:hover td { background:#241D17; }
:root[data-tema="koyu"] .bb-topbar { background:rgba(20,17,16,.82); }
:root[data-tema="koyu"] .btn-outline-secondary { background:#1D1916; color:var(--bb-text); border-color:var(--bb-border); }
:root[data-tema="koyu"] .btn-outline-secondary:hover { background:#241D17; }
:root[data-tema="koyu"] .kat-agac { background:var(--bb-surface); }
:root[data-tema="koyu"] .kat-satir:hover { background:#241D17; }
:root[data-tema="koyu"] .kat-toggle:hover { background:#2A231C; }
:root[data-tema="koyu"] .kat-alt-sayi { background:#2A231C; color:var(--bb-muted); }
:root[data-tema="koyu"] .ikon-sec button { background:#1D1916; color:var(--bb-text); border-color:var(--bb-border); }
:root[data-tema="koyu"] .nav-tabs .nav-link:hover, :root[data-tema="koyu"] .nav-tabs .nav-link.active { background:var(--bb-surface); }
:root[data-tema="koyu"] .bb-badge-off { background:#2A231C; }
:root[data-tema="koyu"] .card h6 { color:var(--bb-muted); }
:root[data-tema="koyu"] ::-webkit-scrollbar-thumb { background:#3A322B; border:2px solid transparent; background-clip:content-box; }

/* İnce scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #D3D6DC; border-radius: 10px; border: 2px solid transparent; background-clip: content-box; }
.bb-sidebar::-webkit-scrollbar-thumb { background: var(--bb-side-scroll); border-radius: 10px; }

/* ── SignalR yeniden bağlanma bandı (App.razor #components-reconnect-modal) ── */
#components-reconnect-modal {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 10000;
    padding: 10px 16px;
    text-align: center;
    font-size: .9rem;
    font-weight: 600;
    color: #7a4d00;
    background: linear-gradient(180deg, #ffe9c2, #ffdfa3);
    border-bottom: 1px solid #eec27a;
    box-shadow: 0 2px 10px rgba(0,0,0,.12);
}
#components-reconnect-modal .rc-failed { display: none; }
#components-reconnect-modal.components-reconnect-show { display: block; }
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected { display: block; }
#components-reconnect-modal.components-reconnect-failed .rc-show,
#components-reconnect-modal.components-reconnect-rejected .rc-show { display: none; }
#components-reconnect-modal.components-reconnect-failed .rc-failed,
#components-reconnect-modal.components-reconnect-rejected .rc-failed { display: inline; }
#components-reconnect-modal.components-reconnect-hide { display: none; }