/* ============================================================
   PRACO — grouped sidebar (new theme). Built by /js/sidebar.js.
   Dark is the app default; [data-theme="light"] switches.
   ============================================================ */
.sb2, .sb-flyout {
  --sb-bg: #14171E; --sb-line: #262C35; --sb-ink: #E9EDF2; --sb-muted: #9AA4B2; --sb-faint: #6F7987;
  --sb-hover: #1C2129; --sb-act-bg: rgba(240,122,46,.15); --sb-act-ink: #F59A5B; --sb-praco: #F07A2E;
  --sb-font: "Archivo", "Helvetica Neue", Arial, sans-serif; --sb-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --g: var(--sb-praco);
}
[data-theme="light"] .sb2, [data-theme="light"] .sb-flyout {
  --sb-bg: #FFFFFF; --sb-line: #E4E8EE; --sb-ink: #151A22; --sb-muted: #5C6675; --sb-faint: #8A93A1;
  --sb-hover: #F4F6F9; --sb-act-bg: #FDEEE4; --sb-act-ink: #B44708; --sb-praco: #D9560C;
}
/* Group colours — muted, one hue each */
.sb2 [data-g="operations"], .sb-flyout[data-g="operations"] { --g: #E3A33B; }
.sb2 [data-g="sales"],      .sb-flyout[data-g="sales"]      { --g: #4CC38A; }
.sb2 [data-g="finance"],    .sb-flyout[data-g="finance"]    { --g: #6EA0F0; }
.sb2 [data-g="purchasing"], .sb-flyout[data-g="purchasing"] { --g: #3FB8C2; }
.sb2 [data-g="crm"],        .sb-flyout[data-g="crm"]        { --g: #E0719F; }
.sb2 [data-g="management"], .sb-flyout[data-g="management"] { --g: #A28BF0; }
[data-theme="light"] .sb2 [data-g="operations"], [data-theme="light"] .sb-flyout[data-g="operations"] { --g: #A86200; }
[data-theme="light"] .sb2 [data-g="sales"],      [data-theme="light"] .sb-flyout[data-g="sales"]      { --g: #1F8A5A; }
[data-theme="light"] .sb2 [data-g="finance"],    [data-theme="light"] .sb-flyout[data-g="finance"]    { --g: #2F6FD0; }
[data-theme="light"] .sb2 [data-g="purchasing"], [data-theme="light"] .sb-flyout[data-g="purchasing"] { --g: #0F7C86; }
[data-theme="light"] .sb2 [data-g="crm"],        [data-theme="light"] .sb-flyout[data-g="crm"]        { --g: #B4306A; }
[data-theme="light"] .sb2 [data-g="management"], [data-theme="light"] .sb-flyout[data-g="management"] { --g: #6D4FD0; }

:root { --sidebar-w: 264px; }
.sidebar.sb2 { background: var(--sb-bg); border-right: 1px solid var(--sb-line); color: var(--sb-ink); font-family: var(--sb-font); }
.sb2 button { font: inherit; color: inherit; cursor: pointer; }
.sb2 :focus-visible, .sb-flyout :focus-visible { outline: 2px solid var(--sb-praco); outline-offset: 1px; }
.sb2 svg { display: block; }

/* Header */
.sb2 .sidebar-header { display: flex; flex-direction: column; gap: 6px; padding: 22px 20px 18px; border-bottom: 1px solid var(--sb-line); }
.sb2 .sb-mark { font-size: 23px; font-weight: 800; font-stretch: 125%; letter-spacing: .02em; line-height: 1; color: var(--sb-ink); }
.sb2 .sb-mark .dot { color: var(--sb-praco); }
.sb2 .sb-ver { font-family: var(--sb-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--sb-muted); }

/* Nav */
.sb2 .sidebar-nav { padding: 12px 10px 16px; display: flex; flex-direction: column; gap: 2px; }
.sb2 .nav-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; margin: 0; padding: 0 10px; border: 0; border-radius: 8px;
  background: transparent; color: var(--sb-muted); font-size: 14px; font-weight: 500; text-align: left; line-height: 1.2; transition: background .12s, color .12s; }
.sb2 .nav-item:hover { background: var(--sb-hover); color: var(--sb-ink); }
.sb2 .nav-item .nav-icon { width: 18px; height: 18px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 0; color: var(--sb-faint); }
.sb2 .nav-item .nav-icon svg { width: 17px; height: 17px; }
.sb2 .nav-item:hover .nav-icon { color: var(--sb-muted); }
.sb2 .nav-item.active { background: var(--sb-act-bg); color: var(--sb-act-ink); font-weight: 650; }
.sb2 .nav-item.active .nav-icon { color: var(--g); }
.sb2 .sb-il { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Pinned (Dashboard) */
.sb2 .sb-pin { margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--sb-line); }
.sb2 .sb-pin .nav-item { min-height: 40px; font-size: 14.5px; font-weight: 650; color: var(--sb-ink); }
.sb2 .sb-pin .nav-icon { width: 28px; height: 28px; border-radius: 8px; background: color-mix(in srgb, var(--sb-praco) 15%, transparent); color: var(--sb-praco); }
.sb2 .sb-pin .nav-item.active .nav-icon, .sb2 .sb-pin .nav-item:hover .nav-icon { color: var(--sb-praco); }
.sb2 .sb-pin .nav-icon svg { width: 16px; height: 16px; }

/* Groups */
.sb2 .sb-g { display: flex; flex-direction: column; }
.sb2 .sb-g + .sb-g { margin-top: 2px; }
.sb2 .sb-gh { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 8px 0 10px; border: 0; border-radius: 9px; background: transparent; text-align: left; }
.sb2 .sb-gh:hover { background: var(--sb-hover); }
.sb2 .sb-gi { width: 28px; height: 28px; flex: none; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--g) 15%, transparent); color: var(--g); }
.sb2 .sb-gi svg { width: 16px; height: 16px; }
.sb2 .sb-gn { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 700; color: var(--sb-ink); letter-spacing: .005em; }
.sb2 .sb-gc { font-family: var(--sb-mono); font-size: 11px; color: var(--sb-faint); min-width: 14px; text-align: right; }
/* Closed group holding the current page: ring on its icon (dots are reserved for things needing attention) */
.sb2 .sb-g.has-active[data-open="0"] .sb-gi { box-shadow: 0 0 0 2px var(--sb-bg), 0 0 0 3.5px var(--g); }
.sb2 .sb-chev { color: var(--sb-faint); display: flex; transition: transform .15s ease; }
.sb2 .sb-chev svg { width: 15px; height: 15px; }
.sb2 .sb-g[data-open="1"] .sb-chev { transform: rotate(90deg); }
.sb2 .sb-gl { display: none; flex-direction: column; gap: 1px; margin: 2px 0 6px 23px; padding-left: 10px; border-left: 1px solid var(--sb-line); }
.sb2 .sb-g[data-open="1"] .sb-gl { display: flex; }
.sb2 .sb-g.has-active .sb-gl { border-left-color: color-mix(in srgb, var(--g) 45%, var(--sb-line)); }

/* Dispatch views — only while Dispatch is open */
.sb2 .sb-subs { display: none; flex-direction: column; gap: 1px; margin: 1px 0 3px 18px; }
.sb2 .nav-item.active + .sb-subs { display: flex; }
.sb2 .nav-item.nav-sub { min-height: 32px; font-size: 13px; padding-left: 10px; }
.sb2 .nav-item.nav-sub .nav-icon svg { width: 15px; height: 15px; }
.sb2 .nav-item.nav-sub.active-sub { color: var(--sb-act-ink); font-weight: 650; background: transparent; }
.sb2 .nav-item.nav-sub.active-sub .nav-icon { color: var(--g); }

/* Collapse button + user */
.sb2 .sb-toggle { color: var(--sb-muted); font-family: var(--sb-font); font-size: 13.5px; margin: 6px 10px 8px; }
.sb2 .sb-toggle:hover { background: var(--sb-hover); color: var(--sb-ink); }
.sb2 .sb-toggle kbd { font-family: var(--sb-mono); color: var(--sb-faint); border-color: var(--sb-line); }
.sb2 .sidebar-user { border-top: 1px solid var(--sb-line); padding: 12px 12px 12px 16px; gap: 8px; }
.sb2 .user-avatar { width: 34px; height: 34px; flex: none; background: color-mix(in srgb, var(--sb-praco) 16%, transparent); color: var(--sb-act-ink); font-weight: 700; }
.sb2 .user-info { min-width: 0; }
.sb2 .user-info .name { font-size: 14px; font-weight: 700; color: var(--sb-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb2 .user-info .role { font-size: 12px; color: var(--sb-muted); text-transform: none; }
.sb2 .sb-icon-btn { position: relative; width: 32px; height: 32px; flex: none; display: flex; align-items: center; justify-content: center; padding: 0;
  border: 0; border-radius: 8px; background: transparent; color: var(--sb-muted); font-size: 0; transition: background .12s, color .12s; }
.sb2 .sb-icon-btn:hover { background: var(--sb-hover); color: var(--sb-ink); }
.sb2 .sb-icon-btn svg { width: 18px; height: 18px; }
.sb2 .logout-btn:hover { color: #E5484D; }
.sb2 .sb-badge { position: absolute; top: 1px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #E5484D; color: #fff;
  font: 700 9.5px/16px var(--sb-font); text-align: center; }

/* Pending approvals */
.sb2 .sb-pending, .sb-flyout .sb-pending { width: 8px; height: 8px; flex: none; margin-left: auto; margin-right: 2px; border-radius: 50%;
  background: #22A565; box-shadow: 0 0 0 3px color-mix(in srgb, #22A565 22%, transparent); }
[data-theme="light"] .sb2 .sb-pending, [data-theme="light"] .sb-flyout .sb-pending { background: #1F8A5A; box-shadow: 0 0 0 3px color-mix(in srgb, #1F8A5A 18%, transparent); }
.sb2 .sb-g.has-pending[data-open="0"] .sb-gc { position: relative; }
.sb2 .sb-g.has-pending[data-open="0"] .sb-gc::before { content: ""; position: absolute; left: -12px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: #22A565; }
[data-theme="light"] .sb2 .sb-g.has-pending[data-open="0"] .sb-gc::before { background: #1F8A5A; }

/* Flyout (collapsed rail) */
.sb-flyout { position: fixed; z-index: 1200; min-width: 220px; max-width: 280px; padding: 6px; border-radius: 12px; background: var(--sb-bg); border: 1px solid var(--sb-line);
  box-shadow: 0 16px 40px -12px rgba(0,0,0,.45); font-family: var(--sb-font); color: var(--sb-ink); }
[data-theme="light"] .sb-flyout { box-shadow: 0 16px 40px -14px rgba(21,26,34,.28); }
.sb-flyout[hidden] { display: none; }
.sb-fly-h { display: flex; align-items: center; gap: 10px; padding: 6px 8px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--sb-line); font-size: 14px; font-weight: 700; }
.sb-fly-h .sb-gi { width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--g) 15%, transparent); color: var(--g); }
.sb-fly-h .sb-gi svg { width: 15px; height: 15px; }
.sb-fly-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent;
  color: var(--sb-muted); font: 500 14px var(--sb-font); text-align: left; cursor: pointer; }
.sb-fly-item:hover { background: var(--sb-hover); color: var(--sb-ink); }
.sb-fly-item.active { background: var(--sb-act-bg); color: var(--sb-act-ink); font-weight: 650; }
.sb-fly-item .nav-icon { width: 18px; height: 18px; display: flex; color: var(--sb-faint); }
.sb-fly-item.active .nav-icon { color: var(--g); }
.sb-fly-item .nav-icon svg { width: 17px; height: 17px; }

/* Collapsed rail (desktop) */
@media (min-width: 769px) {
  html.sb-collapsed { --sidebar-w: 72px; }
  html.sb-collapsed .sb2 .sidebar-header { align-items: center; padding: 20px 0 16px; }
  html.sb-collapsed .sb2 .sb-mark { font-size: 0; }
  html.sb-collapsed .sb2 .sb-mark::before { content: "P"; font-size: 22px; }
  html.sb-collapsed .sb2 .sb-mark .dot { font-size: 22px; }
  html.sb-collapsed .sb2 .sb-ver { display: none; }
  html.sb-collapsed .sb2 .sidebar-nav { padding: 12px 10px; align-items: center; }
  html.sb-collapsed .sb2 .sb-pin { width: 100%; display: flex; justify-content: center; }
  html.sb-collapsed .sb2 .sb-pin .nav-item { width: 44px; justify-content: center; padding: 0; font-size: 0; gap: 0; }
  html.sb-collapsed .sb2 .sb-pin .sb-il { display: none; }
  html.sb-collapsed .sb2 .sb-g { width: 100%; align-items: center; }
  html.sb-collapsed .sb2 .sb-gh { width: 44px; min-height: 44px; justify-content: center; padding: 0; }
  html.sb-collapsed .sb2 .sb-gn, html.sb-collapsed .sb2 .sb-gc, html.sb-collapsed .sb2 .sb-chev { display: none !important; }
  html.sb-collapsed .sb2 .sb-g .sb-gl { display: none !important; }
  html.sb-collapsed .sb2 .sb-g.has-active .sb-gi { box-shadow: 0 0 0 2px var(--sb-bg), 0 0 0 4px var(--g); }
  html.sb-collapsed .sb2 .sb-g.has-pending .sb-gh { position: relative; }
  html.sb-collapsed .sb2 .sb-g.has-pending .sb-gh::after { content: ""; position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: #22A565; box-shadow: 0 0 0 2px var(--sb-bg); }
  html.sb-collapsed .sb2 .sb-toggle { justify-content: center; margin: 6px 12px 8px; padding: 9px 0; }
  html.sb-collapsed .sb2 .sb-toggle span, html.sb-collapsed .sb2 .sb-toggle kbd { display: none; }
  html.sb-collapsed .sb2 .sb-toggle svg { transform: rotate(180deg); }
  html.sb-collapsed .sb2 .sidebar-user { flex-direction: column; align-items: center; padding: 12px 0; gap: 6px; }
  html.sb-collapsed .sb2 .sidebar-user .user-info { display: none; }
}
/* Phone: off-canvas */
@media (max-width: 768px) {
  .sidebar.sb2 { left: -300px; width: 280px; min-width: 280px; }
  .sidebar.sb2.open { left: 0; }
}