/* =============================================================
   redesign.css — Design tokens + component styles for KD-ERP
   Option B redesign shell.

   Source: redesign-source/dashboard-source.html (Claude design,
   <style> block lines 122-294). All custom properties flow through
   tailwind.config.js color tokens, so utilities like `bg-surface`
   and `text-fg` reflect light/dark/accent automatically.

   Layers:
     1. Theme tokens (:root/.light, .dark, .accent-emerald, .accent-slate)
     2. Base body typography
     3. Numerals (.num) + eyebrow labels
     4. Sidebar nav items + section labels
     5. Thin scrollbar
     6. Density toggle ([data-density])
     7. Card primitive
     8. Misc (.kbd, .hr, .spark, lucide sizing)
     9. Animations (pulse-soft, reveal)
    10. Tweaks panel
    11. Sidebar collapsed state ([data-sidebar="collapsed"])
    12. Activity rail responsive collapse
   ============================================================= */

/* ── 1. Theme tokens — all colors live here, both modes.
   Brand swap (blue / emerald / slate) just rewrites --brand. ── */
:root, .light {
  --bg:           255 255 255;       /* #FFFFFF */
  --surface:      248 250 252;       /* #F8FAFC */
  --surface-2:    241 245 249;       /* #F1F5F9 */
  --border:       226 232 240;       /* #E2E8F0 */
  --border-light: 241 245 249;
  --fg:           15 23 42;          /* #0F172A */
  --muted:        71 85 105;         /* #475569 */
  --subtle:       100 116 139;       /* #64748B */
  --brand:        30 64 175;         /* #1E40AF deep blue */
  --brand-soft:   219 234 254;       /* #DBEAFE */
}
.dark {
  --bg:           15 23 42;          /* #0F172A */
  --surface:      30 41 59;          /* #1E293B */
  --surface-2:    51 65 85;          /* #334155 */
  --border:       51 65 85;          /* #334155 */
  --border-light: 30 41 59;
  --fg:           248 250 252;       /* #F8FAFC */
  --muted:        148 163 184;       /* #94A3B8 */
  --subtle:       100 116 139;
  --brand:        96 165 250;        /* lifted blue for dark */
  --brand-soft:   30 58 138;
}
.accent-emerald { --brand: 5 150 105;  --brand-soft: 209 250 229; }
.dark.accent-emerald { --brand: 52 211 153; --brand-soft: 6 78 59; }
.accent-slate   { --brand: 51 65 85;   --brand-soft: 226 232 240; }
.dark.accent-slate   { --brand: 148 163 184; --brand-soft: 30 41 59; }

/* ── 2. Body base typography ── */
html, body { height: 100%; }
body {
  font-family: '"Be Vietnam Pro"', Inter, ui-sans-serif, system-ui;
  background: rgb(var(--bg));
  color: rgb(var(--fg));
  font-feature-settings: "cv11","ss01";
  -webkit-font-smoothing: antialiased;
}

/* ── 3. Tabular numerals + eyebrow labels ── */
.num { font-variant-numeric: tabular-nums; font-family: 'JetBrains Mono', ui-monospace; }

.eyebrow {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgb(var(--subtle));
}

/* ── 4. Sidebar nav item hover/active ── */
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 6px 14px;
  border-radius: 6px;
  color: rgb(var(--muted));
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
}
.nav-item:hover { background: rgb(var(--surface-2)); color: rgb(var(--fg)); }
.nav-item.active {
  background: rgb(var(--brand-soft) / 0.5);
  color: rgb(var(--brand));
}
.dark .nav-item.active { background: rgb(var(--brand-soft) / 0.35); color: rgb(var(--fg)); }
.nav-item.active::before {
  content: "";
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 3px;
  background: rgb(var(--brand));
  border-radius: 0 2px 2px 0;
}
.nav-section-label {
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgb(var(--fg));
  padding: 0 14px;
}

/* ── 5. Scrollbar — slim, neutral ── */
.thin-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.thin-scroll::-webkit-scrollbar-thumb { background: rgb(var(--border)); border-radius: 4px; }
.thin-scroll::-webkit-scrollbar-thumb:hover { background: rgb(var(--subtle)); }

/* ── 6. Density toggle ── */
body[data-density="compact"] .density-y { padding-top: 10px; padding-bottom: 10px; }
body[data-density="compact"] .density-card { padding: 14px; }
body[data-density="compact"] .density-gap { gap: 12px; }
body[data-density="comfy"]   .density-y { padding-top: 14px; padding-bottom: 14px; }
body[data-density="comfy"]   .density-card { padding: 20px; }
body[data-density="comfy"]   .density-gap { gap: 20px; }

/* ── 7. Card base ── */
.card {
  background: rgb(var(--bg));
  border: 1px solid rgb(var(--border));
  border-radius: 8px;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.04);
}
.dark .card { background: rgb(var(--surface)); }

/* ── 8. Misc ── */
.spark path { transition: stroke 200ms; }

[data-lucide] { width: 16px; height: 16px; stroke-width: 1.75; }

.kbd {
  font-family: 'JetBrains Mono', ui-monospace;
  font-size: 10.5px;
  line-height: 1;
  padding: 3px 5px;
  border-radius: 4px;
  border: 1px solid rgb(var(--border));
  background: rgb(var(--surface));
  color: rgb(var(--muted));
}

.hr { height: 1px; background: rgb(var(--border)); }

/* ── 9. Animations ── */
@keyframes pulse-soft {
  0%, 100% { box-shadow: 0 0 0 0 rgb(225 29 72 / 0.35); }
  50%      { box-shadow: 0 0 0 6px rgb(225 29 72 / 0); }
}
.pulse-dot { animation: pulse-soft 2s ease-out infinite; }

/* Reveal on load — starts at full opacity, animates transform only,
   so screenshots/PPTX exports always capture content. */
.reveal { animation: reveal .35s ease both; }
@keyframes reveal {
  from { transform: translateY(4px); }
  to   { transform: none; }
}

/* ── 10. Tweaks panel ── */
.tweaks-panel {
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  width: 280px;
  background: rgb(var(--bg));
  border: 1px solid rgb(var(--border));
  border-radius: 8px;
  box-shadow: 0 10px 30px rgb(15 23 42 / 0.18);
  font-size: 13px;
}

/* ── 11. Sidebar width + collapsed state ──
   Base width on #sidebar (not Tailwind w-[240px]) so [data-sidebar="collapsed"]
   override wins without specificity hacks. Mobile rules in base.html still apply.
*/
/* Override legacy .sidebar min-width:var(--sidebar-w) from style.css */
#sidebar.kd-sidebar { width: 240px; min-width: 240px; }
body[data-sidebar="collapsed"] #sidebar.kd-sidebar { width: 64px; min-width: 64px; }

/* Mobile (≤768px): sidebar slide-in từ trái. KHÔNG collapse, luôn full width.
   Cần !important vì rule ở base.html <style> bị redesign.css đè. */
@media (max-width: 768px) {
  #sidebar.kd-sidebar {
    position: fixed !important;
    top: 0; left: 0; bottom: 0;
    z-index: 50;
    width: 260px !important;
    min-width: 260px !important;
    transform: translateX(-100%) !important;
    transition: transform .25s ease;
  }
  #sidebar.kd-sidebar.open {
    transform: translateX(0) !important;
  }
  /* Đảm bảo text + section luôn visible khi mở mobile (override collapsed) */
  body[data-sidebar="collapsed"] #sidebar .nav-text,
  body[data-sidebar="collapsed"] #sidebar .nav-section-label,
  body[data-sidebar="collapsed"] #sidebar .sidebar-search,
  body[data-sidebar="collapsed"] #sidebar .sidebar-profile-text,
  body[data-sidebar="collapsed"] #sidebar .nav-chev {
    display: block !important;
  }
  body[data-sidebar="collapsed"] #sidebar .nav-section-label {
    display: flex !important;
  }
}
body[data-sidebar="collapsed"] .nav-text,
body[data-sidebar="collapsed"] .nav-section-label,
body[data-sidebar="collapsed"] .nav-badge,
body[data-sidebar="collapsed"] .sidebar-search,
body[data-sidebar="collapsed"] .sidebar-profile-text,
body[data-sidebar="collapsed"] .nav-chev { display: none; }
body[data-sidebar="collapsed"] .nav-item { justify-content: center; padding: 8px; }
body[data-sidebar="collapsed"] .nav-item.active::before { display: none; }
body[data-sidebar="collapsed"] .nav-section-list { padding-left: 0; }
/* Hide section headers (they have data-section attr but nothing inside besides label) */
body[data-sidebar="collapsed"] .nav-section-header { padding: 4px 0; justify-content: center; }
body[data-sidebar="collapsed"] .nav-section-icon { margin: 0; }
/* Brand: hide subtitle text, keep KD square */
body[data-sidebar="collapsed"] #sidebar .nav-text { display: none; }
/* Brand row khi collapsed: căn giữa logo KD */
body[data-sidebar="collapsed"] #sidebar .brand-row {
  justify-content: center;
  padding: 0;
}
/* Toggle button ở footer sidebar — luôn visible (cả expanded lẫn collapsed) */
#sidebar .brand-toggle { display: grid; }
/* Toggle icon swap: khi collapsed hiện icon "mở rộng" (panel-left-open) */
body[data-sidebar="collapsed"] .toggle-icon-expanded { display: none; }
body[data-sidebar="collapsed"] .toggle-icon-collapsed { display: inline-block !important; }
/* Footer toggle row: căn phải khi expanded, căn giữa khi collapsed */
body[data-sidebar="collapsed"] #sidebar .sidebar-toggle-row {
  justify-content: center !important;
  padding-left: 0;
  padding-right: 0;
}

/* ── 12. Activity rail collapse breakpoints ── */
@media (max-width: 1279px) {
  .activity-rail { display: none; }
  .activity-card { display: block !important; }
}

/* =============================================================
   13. Form controls (B3b — sales module port).
   Lifted from redesign-source/new/sales-list.html + sales-create.html
   <style> blocks. Reusable across all module forms.
   ============================================================= */

/* Inputs ─ generic form field */
.input {
  height: 34px;
  border: 1px solid rgb(var(--border));
  border-radius: 6px;
  padding: 0 10px;
  background: rgb(var(--bg));
  color: rgb(var(--fg));
  font-size: 13px;
  width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
.input:focus {
  outline: none;
  border-color: rgb(var(--brand));
  box-shadow: 0 0 0 3px rgb(var(--brand) / 0.15);
}
.input::placeholder { color: rgb(var(--subtle)); }
textarea.input { height: auto; padding: 8px 10px; line-height: 1.45; }
select.input { padding-right: 28px; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat: no-repeat; background-position: right 8px center; }

.input-sm {
  height: 26px;
  font-size: 12px;
  padding: 0 8px;
  border: 1px solid rgb(var(--border-light));
  border-radius: 4px;
  background: transparent;
  color: rgb(var(--fg));
  width: 100%;
}
.input-sm:focus {
  outline: none;
  border-color: rgb(var(--brand));
  background: rgb(var(--bg));
}
.input-sm::placeholder { color: rgb(var(--subtle)); font-weight: 400; }

/* Inline cell input (line-item rows) */
.input-cell {
  height: 28px;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 0 6px;
  background: transparent;
  color: rgb(var(--fg));
  font-size: 13px;
  width: 100%;
  transition: border-color .15s, background .15s;
}
.input-cell:hover { border-color: rgb(var(--border-light)); background: rgb(var(--surface) / 0.5); }
.input-cell:focus { outline: none; border-color: rgb(var(--brand)); background: rgb(var(--bg)); box-shadow: 0 0 0 2px rgb(var(--brand) / 0.12); }

.field-label {
  display: flex; align-items: center; gap: 4px;
  font-size: 11.5px;
  font-weight: 500;
  color: rgb(var(--muted));
  margin-bottom: 4px;
}
.req { color: rgb(225 29 72); font-weight: 600; }

/* Buttons */
.btn-outline {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px;
  border: 1px solid rgb(var(--border));
  border-radius: 6px;
  background: rgb(var(--bg));
  color: rgb(var(--muted));
  font-size: 13px; font-weight: 500;
  text-decoration: none;
  transition: all .15s;
  cursor: pointer;
}
.btn-outline:hover { color: rgb(var(--fg)); border-color: rgb(var(--subtle)); background: rgb(var(--surface)); }

.btn-brand {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 14px;
  border-radius: 6px;
  background: rgb(var(--brand));
  color: white;
  font-size: 13px; font-weight: 500;
  border: 1px solid rgb(var(--brand));
  text-decoration: none;
  cursor: pointer;
  justify-content: center;
}
.btn-brand:hover { opacity: 0.92; }

.btn-success {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 14px;
  border-radius: 6px;
  background: rgb(5 150 105);
  color: white;
  font-size: 13px; font-weight: 500;
  border: 1px solid rgb(5 150 105);
  cursor: pointer;
  justify-content: center;
}
.btn-success:hover { opacity: 0.92; }

.btn-cancel,
.btn-danger {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 14px;
  border-radius: 6px;
  background: rgb(var(--bg));
  color: rgb(225 29 72);
  font-size: 13px; font-weight: 500;
  border: 1px solid rgb(255 228 230);
  cursor: pointer;
  justify-content: center;
}
.btn-cancel:hover,
.btn-danger:hover { background: rgb(255 228 230 / 0.5); border-color: rgb(225 29 72 / 0.4); }

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; min-width: 32px; padding: 0 6px;
  border-radius: 6px;
  color: rgb(var(--subtle));
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all .15s;
}
.btn-ghost:hover { color: rgb(var(--fg)); background: rgb(var(--surface)); }

/* Quick filter chips (date ranges) */
.quick-chip {
  height: 28px; padding: 0 10px;
  border: 1px solid rgb(var(--border));
  border-radius: 14px;
  background: rgb(var(--bg));
  color: rgb(var(--muted));
  font-size: 12px; font-weight: 500;
  cursor: pointer;
  transition: all .15s;
}
.quick-chip:hover { color: rgb(var(--fg)); border-color: rgb(var(--subtle)); }
.quick-chip.active {
  background: rgb(var(--brand-soft) / 0.6);
  color: rgb(var(--brand));
  border-color: rgb(var(--brand) / 0.3);
}
.dark .quick-chip.active { color: rgb(var(--fg)); }

/* Status badges */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 8px;
  border-radius: 4px;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.01em;
}
.badge-gray    { background: rgb(var(--surface-2)); color: rgb(var(--muted)); }
.badge-blue    { background: rgb(219 234 254); color: rgb(30 64 175); }
.badge-purple  { background: rgb(243 232 255); color: rgb(126 34 206); }
.badge-green   { background: rgb(220 252 231); color: rgb(22 101 52); }
.badge-emerald { background: rgb(209 250 229); color: rgb(4 120 87); }
.badge-rose,
.badge-red     { background: rgb(255 228 230); color: rgb(159 18 57); }
.badge-warn,
.badge-orange,
.badge-yellow  { background: rgb(254 243 199); color: rgb(146 64 14); }
.badge-cyan,
.badge-info    { background: rgb(224 242 254); color: rgb(2 132 199); }
.dark .badge-blue    { background: rgb(30 58 138 / 0.5); color: rgb(147 197 253); }
.dark .badge-purple  { background: rgb(88 28 135 / 0.5); color: rgb(216 180 254); }
.dark .badge-green   { background: rgb(20 83 45 / 0.5); color: rgb(134 239 172); }
.dark .badge-emerald { background: rgb(6 78 59 / 0.5); color: rgb(110 231 183); }
.dark .badge-rose,
.dark .badge-red     { background: rgb(136 19 55 / 0.5); color: rgb(253 164 175); }
.dark .badge-warn,
.dark .badge-orange,
.dark .badge-yellow  { background: rgb(120 53 15 / 0.5); color: rgb(252 211 77); }
.dark .badge-cyan,
.dark .badge-info    { background: rgb(7 89 133 / 0.5); color: rgb(125 211 252); }
.dark .badge-gray    { background: rgb(var(--surface-2)); color: rgb(var(--muted)); }

/* Data table */
.data-table { width: 100%; min-width: 980px; font-size: 13px; border-collapse: separate; border-spacing: 0; }
.data-table tbody td,
.data-table thead th { white-space: nowrap; }
.data-table thead .filter-row th { white-space: normal; }
.data-table thead th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: rgb(var(--subtle));
  text-align: left;
  background: rgb(var(--surface) / 0.6);
  border-bottom: 1px solid rgb(var(--border));
  padding: 8px 12px;
}
.data-table thead .filter-row th {
  background: rgb(var(--bg));
  border-bottom: 1px solid rgb(var(--border));
  padding: 6px 8px;
  text-transform: none;
  letter-spacing: 0;
}
.dark .data-table thead th { background: rgb(var(--surface) / 0.4); }
.data-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid rgb(var(--border-light));
  vertical-align: middle;
}
.data-table tbody tr:hover td { background: rgb(var(--surface-2) / 0.5); }
.dark .data-table tbody tr:nth-child(even) td { background: rgb(var(--surface) / 0.3); }
.dark .data-table tbody tr:nth-child(even):hover td { background: rgb(var(--surface-2) / 0.4); }
body[data-density="compact"] .data-table tbody td { padding-top: 6px; padding-bottom: 6px; }
body[data-density="comfy"]   .data-table tbody td { padding-top: 11px; padding-bottom: 11px; }

/* Editable line-item table (form pages) */
.prod-table { width: 100%; font-size: 13px; border-collapse: separate; border-spacing: 0; }
.prod-table thead th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: rgb(var(--subtle));
  text-align: left;
  background: rgb(var(--surface) / 0.6);
  border-bottom: 1px solid rgb(var(--border));
  padding: 8px 12px;
}
.dark .prod-table thead th { background: rgb(var(--surface) / 0.4); }
.prod-table tbody td {
  padding: 4px 6px;
  border-bottom: 1px solid rgb(var(--border-light));
  vertical-align: middle;
}
.prod-table tbody td:first-child { padding-left: 12px; }
.prod-table tbody tr.empty-row td { color: rgb(var(--subtle)); }

/* Checkbox */
.checkbox {
  width: 15px; height: 15px;
  border: 1.5px solid rgb(var(--border));
  border-radius: 3px;
  background: rgb(var(--bg));
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  position: relative;
  transition: all .15s;
}
.checkbox:hover { border-color: rgb(var(--subtle)); }
.checkbox:checked {
  background: rgb(var(--brand));
  border-color: rgb(var(--brand));
}
.checkbox:checked::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/10px no-repeat;
}

/* Action icon button (data-grid rows) */
.row-action {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 4px;
  color: rgb(var(--subtle));
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all .15s;
  text-decoration: none;
}
.row-action:hover { color: rgb(var(--fg)); background: rgb(var(--surface-2)); }
.row-action.danger:hover { color: rgb(225 29 72); background: rgb(255 228 230 / 0.6); }
.dark .row-action.danger:hover { background: rgb(136 19 55 / 0.4); color: rgb(253 164 175); }

/* Dropzone (file upload area) */
.dropzone {
  border: 1.5px dashed rgb(var(--border));
  border-radius: 8px;
  padding: 24px 16px;
  text-align: center;
  background: rgb(var(--surface) / 0.4);
  color: rgb(var(--muted));
  transition: all .15s;
  cursor: pointer;
}
.dropzone:hover {
  border-color: rgb(var(--brand));
  background: rgb(var(--brand-soft) / 0.25);
  color: rgb(var(--fg));
}
.dropzone .dz-icon {
  width: 40px; height: 40px;
  border-radius: 8px;
  background: rgb(var(--surface-2));
  color: rgb(var(--muted));
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 8px;
}
.dropzone:hover .dz-icon { background: rgb(var(--brand-soft) / 0.6); color: rgb(var(--brand)); }

.file-pill {
  display: inline-flex; align-items: center; gap: 8px;
  height: 30px; padding: 0 10px;
  border: 1px solid rgb(var(--border));
  border-radius: 6px;
  background: rgb(var(--surface) / 0.5);
  font-size: 12.5px;
}

/* Segmented control (Loại đơn / dual-state radio button group) */
.seg {
  display: inline-flex;
  border: 1px solid rgb(var(--border));
  border-radius: 6px;
  overflow: hidden;
  background: rgb(var(--bg));
  height: 34px;
}
.seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  height: 100%; padding: 0 12px;
  font-size: 12.5px; font-weight: 500;
  color: rgb(var(--muted));
  background: transparent;
  border: none;
  border-right: 1px solid rgb(var(--border));
  cursor: pointer;
  transition: all .15s;
}
.seg-opt:last-child { border-right: none; }
.seg-opt:hover { background: rgb(var(--surface)); color: rgb(var(--fg)); }
.seg-opt.active {
  background: rgb(var(--brand-soft) / 0.6);
  color: rgb(var(--brand));
  font-weight: 600;
}

/* Mini dot used in Filter card / pulses */
.dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }

/* Status timeline (detail page) — segmented progress bar */
.timeline {
  display: flex; align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.timeline-step {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px;
  border-radius: 13px;
  font-size: 12px; font-weight: 600;
  background: rgb(var(--surface-2));
  color: rgb(var(--muted));
  white-space: nowrap;
}
.timeline-step.done { background: rgb(220 252 231); color: rgb(22 101 52); }
.timeline-step.active { background: rgb(219 234 254); color: rgb(30 64 175); }
.timeline-step.cancel { background: rgb(255 228 230); color: rgb(159 18 57); }
.timeline-arrow { color: rgb(var(--subtle)); font-size: 13px; line-height: 1; }
.dark .timeline-step.done   { background: rgb(20 83 45 / 0.5); color: rgb(134 239 172); }
.dark .timeline-step.active { background: rgb(30 58 138 / 0.5); color: rgb(147 197 253); }
.dark .timeline-step.cancel { background: rgb(136 19 55 / 0.5); color: rgb(253 164 175); }

/* ─────────────────────────────────────────────────────────────
   Nav section collapse/expand — click header để ẩn/hiện list
   ───────────────────────────────────────────────────────────── */
[data-section] .nav-chev {
    transition: transform 0.15s ease;
}
[data-section][data-collapsed] .nav-section-list {
    display: none;
}
[data-section][data-collapsed] .nav-chev {
    transform: rotate(-90deg);
}
[data-section][data-collapsed] .nav-section-header {
    margin-bottom: 0;
}
.nav-section-header:hover .nav-section-label {
    color: rgb(var(--fg));
}
/* Section icon — khớp font label 14px, brand color */
.nav-section-icon {
    width: 16px;
    height: 16px;
    color: rgb(var(--brand));
    flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────
   Notification dropdown override
   Trong shell mới (header h-14 = 56px, content h=60px effective + border),
   .notif-dropdown gốc dùng top:calc(100%+8px) = 55px so với button → đè lên
   topbar 5px. Đẩy thêm offset để xuất hiện hoàn toàn dưới topbar.
   ─────────────────────────────────────────────────────────────  */
.kd-topbar .notif-dropdown,
header .notif-dropdown {
    top: calc(100% + 16px);
}

/* Defensive: notif-dropdown phải explicit .open mới hiện.
 * Tránh case CSS legacy/cache cũ làm panel auto-show sau F5. */
.notif-dropdown:not(.open) {
    display: none !important;
}