/* ═══════════════════════════════════════════════════════════════════════════
   ÜST ÇUBUK (ShellBar) — sayfa yolu, arama (Ctrl+K), çalışma alanı, bildirim,
   sohbet, yardım ve profil menüsü. Tasarım dili report-kit (--rk-*) ile aynı.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
    --tb-bg: #ffffff;
    --tb-line: var(--rk-line, #e2e8f0);
    --tb-line-2: var(--rk-line-2, #eef2f7);
    --tb-ink: var(--rk-ink, #0f172a);
    --tb-ink-2: var(--rk-ink-2, #334155);
    --tb-muted: var(--rk-muted, #64748b);
    --tb-faint: var(--rk-faint, #94a3b8);
    --tb-hover: #f1f5f9;
    --tb-press: #e2e8f0;
    --tb-accent: var(--rk-accent, #1d4ed8);
    --tb-accent-soft: var(--rk-accent-soft, #eff6ff);
    --tb-surface: #ffffff;
    --tb-surface-2: #f8fafc;
    --tb-danger: #b91c1c;
    --tb-danger-soft: #fef2f2;
    --tb-ok: #047857;
    --tb-ok-soft: #ecfdf5;
    --tb-warn: #b45309;
    --tb-warn-soft: #fffbeb;
    --tb-shadow: 0 16px 40px rgba(15, 23, 42, .16), 0 2px 8px rgba(15, 23, 42, .06);
    --tb-focus: 0 0 0 3px rgba(29, 78, 216, .32);
    --tb-radius: 10px;
    --tb-avatar-1: #1d4ed8;
    --tb-avatar-2: #7c3aed;
}

[data-bs-theme="dark"], .dark-mode {
    --tb-bg: #161b22;
    --tb-line: #2b3440;
    --tb-line-2: #222a34;
    --tb-ink: #e6edf3;
    --tb-ink-2: #c9d1d9;
    --tb-muted: #8b98a7;
    --tb-faint: #6e7b8a;
    --tb-hover: #222a34;
    --tb-press: #2b3440;
    --tb-accent: #6ea8fe;
    --tb-accent-soft: rgba(110, 168, 254, .14);
    --tb-surface: #1b222b;
    --tb-surface-2: #161b22;
    --tb-danger: #f87171;
    --tb-danger-soft: rgba(248, 113, 113, .12);
    --tb-ok: #4ade80;
    --tb-ok-soft: rgba(74, 222, 128, .12);
    --tb-warn: #fbbf24;
    --tb-warn-soft: rgba(251, 191, 36, .12);
    --tb-shadow: 0 16px 40px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .3);
    --tb-focus: 0 0 0 3px rgba(110, 168, 254, .4);
}

/* ── Çubuk ─────────────────────────────────────────────────────────────── */
/* Çubuk kabuğu (eskiden MainLayout'un kapsamlı stilindeydi). Sayfa ölçeğine uyar: left:300px zoom ile 300×ölçek
   çizildiğinden kenar çubuğunun sağ kenarıyla hizalı kalır; 100vw sınırı ölçeğe bölünerek telafi edilir. */
header.top-header.tb-host {
    zoom: var(--ui-scale, 1);
    position: fixed; top: 0; left: 300px; right: 0; z-index: 90;
    display: flex; align-items: center; height: 50px; min-height: 50px; width: auto;
    max-width: calc(100vw / var(--ui-scale, 1)); box-sizing: border-box;
    padding: 0 .75rem; background: var(--tb-bg) !important; border-bottom: 1px solid var(--tb-line) !important; box-shadow: none;
    transition: left .3s ease;
}
header.top-header.tb-host.sidebar-collapsed { left: 78px; }
@media (max-width: 991.98px) { header.top-header.tb-host, header.top-header.tb-host.sidebar-collapsed { left: 0; } }
@media print { header.top-header.tb-host { display: none !important; } }
.tb-bar { display: flex; align-items: center; gap: .75rem; width: 100%; height: 100%; min-width: 0; color: var(--tb-ink); font-size: .875rem; }
.tb-left { display: flex; align-items: center; gap: .25rem; min-width: 0; flex: 1 1 0; }
.tb-center { display: flex; justify-content: center; flex: 0 1 460px; min-width: 180px; }
.tb-right { display: flex; align-items: center; justify-content: flex-end; gap: .35rem; flex: 0 0 auto; min-width: 0; }

.tb-icon-btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; flex: 0 0 36px; border: 0; border-radius: 8px; background: transparent;
    color: var(--tb-muted); font-size: 15px; line-height: 1; cursor: pointer; text-decoration: none;
    transition: background-color .12s ease, color .12s ease;
}
.tb-icon-btn:hover { background: var(--tb-hover); color: var(--tb-ink); }
.tb-icon-btn:active, .tb-icon-btn[aria-expanded="true"] { background: var(--tb-press); color: var(--tb-ink); }
.tb-icon-btn:disabled { opacity: .4; cursor: default; background: transparent; }
.tb-bar :is(button, a, input):focus-visible, .tb-pop :is(button, a, input, select):focus-visible, .tb-palette :is(button, a, input):focus-visible, .tb-dialog :is(button, a):focus-visible {
    outline: none; box-shadow: var(--tb-focus);
}
.tb-divider { width: 1px; height: 22px; background: var(--tb-line); margin: 0 .25rem; flex: 0 0 1px; }

/* Sayfa yolu */
.tb-crumbs { display: flex; align-items: center; gap: .4rem; min-width: 0; margin-left: .35rem; white-space: nowrap; }
.tb-crumbs a { color: var(--tb-muted); text-decoration: none; font-weight: 500; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 2rem; }
.tb-crumbs a:hover { color: var(--tb-accent); }
.tb-crumbs .tb-crumb-sep { color: var(--tb-faint); font-size: .65rem; flex: 0 0 auto; }
.tb-crumbs .tb-crumb-current { color: var(--tb-ink); font-weight: 650; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tb-brand { color: var(--tb-ink); font-weight: 600; text-decoration: none; margin-right: .25rem; white-space: nowrap; }
.tb-brand b { color: var(--tb-accent); }

/* Arama tetiği */
.tb-search {
    display: flex; align-items: center; gap: .6rem; width: 100%; height: 36px; padding: 0 .5rem 0 .75rem;
    border: 1px solid var(--tb-line); border-radius: 8px; background: var(--tb-surface-2); color: var(--tb-muted);
    cursor: text; font-size: .84rem; text-align: left; transition: border-color .12s ease, background-color .12s ease;
}
.tb-search:hover { border-color: var(--tb-faint); background: var(--tb-surface); }
.tb-search > span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-kbd { display: inline-flex; align-items: center; gap: 2px; padding: 1px 6px; border: 1px solid var(--tb-line); border-bottom-width: 2px; border-radius: 5px; background: var(--tb-surface); color: var(--tb-muted); font: 600 .68rem/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: nowrap; }
.tb-search-icon { display: none; }

/* Çalışma alanı */
.tb-context {
    display: inline-flex; align-items: center; gap: .5rem; height: 36px; max-width: 300px; padding: 0 .65rem;
    border: 1px solid var(--tb-line); border-radius: 8px; background: var(--tb-surface); color: var(--tb-ink); cursor: pointer; min-width: 0;
}
.tb-context:hover { border-color: var(--tb-faint); background: var(--tb-hover); }
.tb-context > i:first-child { color: var(--tb-accent); }
.tb-context-text { display: flex; align-items: baseline; gap: .4rem; min-width: 0; white-space: nowrap; }
.tb-context-text strong { font-weight: 650; overflow: hidden; text-overflow: ellipsis; min-width: 3rem; max-width: 180px; }
.tb-context-text span { color: var(--tb-muted); font-size: .8rem; }
.tb-context .fa-chevron-down { color: var(--tb-faint); font-size: .62rem; }

/* Bildirim zili ve sohbet (iletişim merkezi bileşeni) — yalnız görünüm */
.tb-bar .cm-bell { gap: .1rem; }
.tb-bar .cm-topbtn { width: 36px; height: 36px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--tb-muted); font-size: 15px; display: inline-flex; align-items: center; justify-content: center; }
.tb-bar .cm-topbtn:hover, .tb-bar .cm-bell.is-open .cm-topbtn:first-child { background: var(--tb-hover); color: var(--tb-ink); }
.tb-bar .cm-badge { top: 1px; right: -1px; box-shadow: 0 0 0 2px var(--tb-bg); }

/* Profil düğmesi */
.tb-avatar {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 30px; height: 30px; border-radius: 50%;
    background: linear-gradient(135deg, var(--tb-avatar-1), var(--tb-avatar-2)); color: #fff;
    font-weight: 700; font-size: .74rem; letter-spacing: .02em; user-select: none;
}
.tb-avatar.lg { width: 44px; height: 44px; font-size: .95rem; }
.tb-avatar.xl { width: 72px; height: 72px; font-size: 1.5rem; }
.tb-profile-btn { display: inline-flex; align-items: center; gap: .5rem; height: 36px; padding: 0 .3rem; border: 0; border-radius: 999px; background: transparent; cursor: pointer; color: var(--tb-ink); }
.tb-profile-btn:hover, .tb-profile-btn[aria-expanded="true"] { background: var(--tb-hover); }

/* ── Açılır paneller ───────────────────────────────────────────────────── */
.tb-anchor { position: relative; display: inline-flex; }
.tb-scrim { position: fixed; inset: 0; z-index: 1075; background: transparent; }
.tb-pop {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 1080; min-width: 240px;
    background: var(--tb-surface); color: var(--tb-ink); border: 1px solid var(--tb-line); border-radius: 12px;
    box-shadow: var(--tb-shadow); padding: .35rem; animation: tb-in .14s ease-out; font-size: .86rem;
}
@keyframes tb-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.tb-pop-head { padding: .5rem .65rem .35rem; color: var(--tb-muted); font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.tb-item {
    display: flex; align-items: center; gap: .65rem; width: 100%; padding: .5rem .65rem; border: 0; border-radius: 8px;
    background: transparent; color: var(--tb-ink); text-align: left; text-decoration: none; cursor: pointer; font-size: .86rem;
}
.tb-item > i { width: 18px; text-align: center; color: var(--tb-muted); font-size: .9rem; }
.tb-item:hover, .tb-item:focus-visible { background: var(--tb-hover); color: var(--tb-ink); }
.tb-item .tb-item-end { margin-left: auto; color: var(--tb-faint); font-size: .74rem; }
.tb-item.danger, .tb-item.danger > i { color: var(--tb-danger); }
.tb-item.danger:hover { background: var(--tb-danger-soft); }
.tb-sep { height: 1px; background: var(--tb-line); margin: .35rem .2rem; }
.tb-pop form { margin: 0; }

/* Profil menüsü */
.tb-profile-pop { width: 340px; padding: 0; overflow: hidden; }
.tb-profile-id { display: flex; gap: .8rem; align-items: center; padding: 1rem 1rem .85rem; border-bottom: 1px solid var(--tb-line); background: var(--tb-surface-2); }
.tb-profile-id > div { min-width: 0; }
.tb-profile-id strong { display: block; font-size: .98rem; color: var(--tb-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-profile-id small { display: block; color: var(--tb-muted); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-role { display: inline-flex; align-items: center; gap: .3rem; margin-top: .35rem; padding: .1rem .5rem; border-radius: 999px; background: var(--tb-accent-soft); color: var(--tb-accent); font-size: .72rem; font-weight: 650; }
.tb-profile-body { padding: .35rem; max-height: calc(100vh - 220px); overflow-y: auto; }
.tb-pref { padding: .45rem .65rem .55rem; }
.tb-pref-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .3rem 0; }
.tb-pref-row > label, .tb-pref-row > span { color: var(--tb-ink-2); font-size: .82rem; }
.tb-seg { display: inline-flex; padding: 2px; border: 1px solid var(--tb-line); border-radius: 8px; background: var(--tb-surface-2); }
.tb-seg button { border: 0; background: transparent; color: var(--tb-muted); padding: .22rem .55rem; border-radius: 6px; font-size: .76rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.tb-seg button:hover { color: var(--tb-ink); }
.tb-seg button.on { background: var(--tb-surface); color: var(--tb-ink); box-shadow: 0 1px 2px rgba(15, 23, 42, .12); }
[data-bs-theme="dark"] .tb-seg button.on { background: var(--tb-press); }
.tb-stepper { display: inline-flex; align-items: center; border: 1px solid var(--tb-line); border-radius: 8px; overflow: hidden; }
.tb-stepper button { width: 28px; height: 26px; border: 0; background: var(--tb-surface-2); color: var(--tb-ink-2); cursor: pointer; font-size: .7rem; }
.tb-stepper button:hover:not(:disabled) { background: var(--tb-hover); }
.tb-stepper button:disabled { opacity: .4; cursor: default; }
.tb-stepper output { min-width: 3.4rem; text-align: center; font-size: .78rem; font-weight: 650; color: var(--tb-ink); font-variant-numeric: tabular-nums; }

/* ── Arama penceresi ───────────────────────────────────────────────────── */
.tb-backdrop { position: fixed; inset: 0; z-index: 1090; background: rgba(15, 23, 42, .45); display: flex; justify-content: center; align-items: flex-start; padding: 10vh 12px 12px; animation: tb-fade .12s ease-out; }
@keyframes tb-fade { from { opacity: 0; } to { opacity: 1; } }
.tb-palette { width: min(680px, 100%); max-height: 76vh; display: flex; flex-direction: column; background: var(--tb-surface); color: var(--tb-ink); border: 1px solid var(--tb-line); border-radius: 14px; box-shadow: var(--tb-shadow); overflow: hidden; }
.tb-palette-input { display: flex; align-items: center; gap: .7rem; padding: 0 1rem; border-bottom: 1px solid var(--tb-line); }
.tb-palette-input > i { color: var(--tb-muted); }
.tb-palette-input input { flex: 1; height: 54px; border: 0; outline: none; background: transparent; color: var(--tb-ink); font-size: 1.02rem; }
.tb-palette-input input::placeholder { color: var(--tb-faint); }
.tb-palette-input input:focus-visible { box-shadow: none !important; }
.tb-palette-scopes { display: flex; gap: .35rem; padding: .5rem 1rem; border-bottom: 1px solid var(--tb-line-2); overflow-x: auto; }
.tb-chip { border: 1px solid var(--tb-line); background: var(--tb-surface); color: var(--tb-muted); border-radius: 999px; padding: .15rem .65rem; font-size: .76rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.tb-chip.on { background: var(--tb-accent-soft); border-color: transparent; color: var(--tb-accent); }
.tb-palette-list { overflow-y: auto; padding: .35rem; flex: 1; }
.tb-group { padding: .55rem .65rem .25rem; color: var(--tb-muted); font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.tb-result { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .5rem .65rem; border: 0; border-radius: 9px; background: transparent; color: var(--tb-ink); text-align: left; cursor: pointer; }
.tb-result-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 8px; background: var(--tb-surface-2); border: 1px solid var(--tb-line-2); color: var(--tb-muted); font-size: .85rem; }
.tb-result-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.tb-result-text strong { font-weight: 600; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-result-text small { color: var(--tb-muted); font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-result-kind { color: var(--tb-faint); font-size: .72rem; white-space: nowrap; }
.tb-result.active { background: var(--tb-accent-soft); }
.tb-result.active .tb-result-icon { background: var(--tb-surface); color: var(--tb-accent); border-color: transparent; }
.tb-result.active .tb-result-kind { color: var(--tb-accent); }
.tb-result mark { background: transparent; color: var(--tb-accent); padding: 0; font-weight: 700; }
.tb-empty { padding: 2rem 1rem; text-align: center; color: var(--tb-muted); }
.tb-empty i { display: block; font-size: 1.4rem; margin-bottom: .5rem; color: var(--tb-faint); }
.tb-palette-foot { display: flex; gap: 1rem; align-items: center; padding: .5rem 1rem; border-top: 1px solid var(--tb-line); background: var(--tb-surface-2); color: var(--tb-muted); font-size: .74rem; }
.tb-palette-foot span { display: inline-flex; align-items: center; gap: .35rem; }

/* ── Kısayollar penceresi ──────────────────────────────────────────────── */
.tb-dialog { width: min(560px, 100%); background: var(--tb-surface); color: var(--tb-ink); border: 1px solid var(--tb-line); border-radius: 14px; box-shadow: var(--tb-shadow); overflow: hidden; }
.tb-dialog > header { display: flex; align-items: center; justify-content: space-between; padding: .9rem 1rem; border-bottom: 1px solid var(--tb-line); }
.tb-dialog > header h2 { margin: 0; font-size: 1rem; font-weight: 650; }
.tb-shortcuts { padding: .5rem 1rem 1rem; }
.tb-shortcuts h3 { margin: .75rem 0 .35rem; font-size: .7rem; color: var(--tb-muted); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.tb-shortcuts dl { display: grid; grid-template-columns: 1fr auto; gap: .4rem 1rem; margin: 0; }
.tb-shortcuts dt { font-weight: 500; color: var(--tb-ink-2); }
.tb-shortcuts dd { margin: 0; display: inline-flex; gap: .25rem; justify-self: end; }

/* ── Dar ekran ─────────────────────────────────────────────────────────── */
@media (max-width: 1279.98px) {
    .tb-center { flex-basis: 340px; }
    .tb-context { max-width: 220px; }
    .tb-context-text span { display: none; }
}
@media (max-width: 991.98px) {
    header.top-header.tb-host { padding: 0 .4rem; }
    .tb-bar { gap: .35rem; }
    .tb-center { flex: 0 0 auto; min-width: 0; }
    .tb-search { width: 36px; padding: 0; justify-content: center; border-color: transparent; background: transparent; }
    .tb-search > span, .tb-search .tb-kbd { display: none; }
    .tb-crumbs .tb-crumb-module, .tb-crumbs .tb-crumb-sep { display: none; }
    .tb-help { display: none; }
}
@media (max-width: 767.98px) {
    .tb-context { width: 36px; padding: 0; justify-content: center; border-color: transparent; }
    .tb-context-text, .tb-context .fa-chevron-down { display: none; }
    .tb-divider { display: none; }
    .tb-pop.tb-profile-pop, .tb-pop.tb-help-pop { position: fixed; top: 56px; left: 8px; right: 8px; width: auto; }
}
@media (max-width: 479.98px) {
    .tb-crumbs { display: none; }
    .tb-right { gap: 0; }
    .tb-backdrop { padding: 8px; }
    .tb-palette { max-height: calc(100vh - 16px); }
    .tb-palette-foot { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .tb-pop, .tb-backdrop { animation: none; }
}