/* ─────────────────────────────────────────────
   Kabina ofis paneli — marka kimliği üstüne ince bir katman.
   MudBlazor bileşen stillerini tema (Program.cs) taşıyor; burada yalnızca
   MudBlazor'un kapsayamadığı marka ayrıntıları var.
   ───────────────────────────────────────────── */

:root {
    --kb-bg: #F2F6F6;
    --kb-surface: #FFFFFF;
    --kb-ink: #12171C;
    --kb-ink-2: #3D4A4C;
    --kb-muted: #6B7B7B;
    --kb-line: #D6E0DF;
    --kb-accent: #0FA9A0;
    --kb-accent-deep: #0A7A73;

    /* Yasal etiket renkleri — marka rengi DEĞİL. Yalnızca durum gösterir. */
    --kb-lbl-red: #D1332E;
    --kb-lbl-yellow: #E8A317;
    --kb-lbl-blue: #2B6CB0;
    --kb-lbl-green: #2F8F46;
}

html, body {
    margin: 0;
    background: var(--kb-bg);
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* açılış ekranı — WASM inerken */
.kb-boot {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
    justify-content: center;
    color: var(--kb-muted);
    font-size: 14px;
}

#blazor-error-ui {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--kb-lbl-yellow);
    color: #14181B;
    padding: 10px 16px;
    z-index: 3000;
    font-size: 14px;
}

/* kenar çubuğu grup başlığı — Asansorex bilgi mimarisindeki desen */
.kb-navgroup {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--kb-muted);
    padding: 18px 16px 6px;
    user-select: none;
}

/* marka kilidi */
.kb-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
}

.kb-brand .kb-word {
    font-weight: 800;
    font-size: 19px;
    letter-spacing: -.04em;
    color: var(--kb-ink);
    line-height: 1;
}

.kb-brand .kb-word span { color: var(--kb-accent); }

.kb-brand .kb-sub {
    font-size: 11px;
    color: var(--kb-muted);
    line-height: 1.2;
}

/* sayfa başlığı */
.kb-page-title {
    font-weight: 800;
    font-size: 24px;
    letter-spacing: -.03em;
    color: var(--kb-ink);
}

/* istatistik kartı */
.kb-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kb-stat .n {
    font-weight: 800;
    font-size: 28px;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    color: var(--kb-ink);
    line-height: 1.1;
}

.kb-stat .l {
    font-size: 12.5px;
    color: var(--kb-muted);
}

.kb-stat.warn .n { color: var(--kb-lbl-yellow); }
.kb-stat.bad .n { color: var(--kb-lbl-red); }
.kb-stat.ok .n { color: var(--kb-lbl-green); }

/* etiket rozeti — renk + METİN birlikte; renk tek başına bilgi taşımaz */
.kb-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 3px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.kb-label::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.kb-label.red { color: var(--kb-lbl-red); background: color-mix(in srgb, var(--kb-lbl-red) 9%, transparent); border-color: color-mix(in srgb, var(--kb-lbl-red) 30%, transparent); }
.kb-label.yellow { color: #8a6210; background: color-mix(in srgb, var(--kb-lbl-yellow) 14%, transparent); border-color: color-mix(in srgb, var(--kb-lbl-yellow) 45%, transparent); }
.kb-label.blue { color: var(--kb-lbl-blue); background: color-mix(in srgb, var(--kb-lbl-blue) 9%, transparent); border-color: color-mix(in srgb, var(--kb-lbl-blue) 30%, transparent); }
.kb-label.green { color: var(--kb-lbl-green); background: color-mix(in srgb, var(--kb-lbl-green) 9%, transparent); border-color: color-mix(in srgb, var(--kb-lbl-green) 30%, transparent); }
.kb-label.grey { color: var(--kb-muted); background: color-mix(in srgb, var(--kb-muted) 9%, transparent); border-color: var(--kb-line); }

/* takvim ızgarası */
.kb-cal {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border: 1px solid var(--kb-line);
    border-radius: 4px;
    overflow: hidden;
    background: var(--kb-line);
    gap: 1px;
}

.kb-cal .head {
    background: var(--kb-surface);
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--kb-ink-2);
    text-align: center;
}

.kb-cal .day {
    background: var(--kb-surface);
    min-height: 96px;
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kb-cal .day.out { background: color-mix(in srgb, var(--kb-surface) 55%, var(--kb-bg)); }
.kb-cal .day.today { outline: 2px solid var(--kb-accent); outline-offset: -2px; }

.kb-cal .dnum {
    font-size: 12px;
    font-weight: 600;
    color: var(--kb-muted);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.kb-cal .item {
    font-size: 11.5px;
    line-height: 1.25;
    padding: 3px 6px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--kb-accent) 10%, transparent);
    color: var(--kb-accent-deep);
    border-left: 2px solid var(--kb-accent);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kb-cal .item.fault { background: color-mix(in srgb, var(--kb-lbl-red) 8%, transparent); color: var(--kb-lbl-red); border-left-color: var(--kb-lbl-red); }
.kb-cal .item.done { opacity: .55; text-decoration: line-through; }
.kb-cal .more { font-size: 11px; color: var(--kb-muted); }

/* deneme şeridi */
.kb-trial {
    border: 1px solid color-mix(in srgb, var(--kb-accent) 45%, transparent);
    background: color-mix(in srgb, var(--kb-accent) 8%, transparent);
    border-radius: 4px;
    padding: 10px 16px;
    font-size: 13.5px;
    color: var(--kb-ink-2);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.kb-trial b { color: var(--kb-ink); }

/* Menü arama kutusu ve katlanabilir grup başlığı.
   Yirmi beş bağlantı bir dizüstü ekranına sığmıyor; arama ve katlama
   olmadan son grup daima kaydırma arkasında kalıyordu. */
.kb-navsearch {
    padding: 0 12px 8px;
}

.kb-navgroup-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.kb-navgroup-btn:hover { color: var(--kb-ink); }

/* Klavye kullanıcısı hangi başlıkta olduğunu görmeli. */
.kb-navgroup-btn:focus-visible {
    outline: 2px solid var(--kb-accent);
    outline-offset: -2px;
    border-radius: 3px;
}

.kb-navempty {
    padding: 12px 20px;
    font-size: 13px;
    color: var(--kb-muted);
}