/* legacy-fenced: tools/redesign/scope_legacy_css.py */
/* Vendigoose redesign, stage 1: the approved brand tokens (light + dark).
   Loaded AFTER vendigoose-shell.css and only re-points the design tokens the whole app already reads, so every
   page, drawer and dialog picks up the new look at once with no behaviour change. Brand blue sampled from the
   logo (rgb 2,115,251) with a cyan accent; ink, lines and status colours follow the approved demo.
   Layout/structure changes (rail, top bar, profile dock, resizable tables) land in later stages. */

:root{
  --bg: #eef3fb;
  --bg-soft: #e8eff9;
  --surface: #ffffff;
  --surface-2: #f5f8fe;
  --surface-3: #eaf0fb;
  --line: #e0e8f6;
  --line-strong: #cbd7ee;
  --ink: #0a1430;
  --ink-2: #16224a;
  --muted: #506088;
  --muted-2: #8593b4;
  --accent: #0273fb;
  --accent-strong: #0159c8;
  --accent-soft: #e6f1ff;
  --cyan: #14b8e6;
  --indigo: #7c5cf2;
  --indigo-soft: #efeafe;
  --good: #0e9f6e;
  --good-soft: #d9f5ea;
  --warn: #d97706;
  --warn-soft: #fdebd0;
  --danger: #e0344b;
  --danger-soft: #fde4e8;
  --teal: #0d9488;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 18px;
  --shadow-card: 0 1px 2px rgba(15, 35, 90, 0.06), 0 4px 14px rgba(15, 35, 90, 0.05);
  --shadow-pop: 0 24px 70px rgba(15, 35, 90, 0.24);
  --mesh-1: rgba(20, 184, 230, 0.15);
  --mesh-2: rgba(2, 115, 251, 0.15);
  --mesh-3: rgba(124, 92, 242, 0.08);
  --mesh-grid: rgba(2, 115, 251, 0.06);
}

[data-theme="dark"]:where(:not(.vg, .vg *)){
  --bg: #050a18;
  --bg-soft: #0a1228;
  --surface: #0b1330;
  --surface-2: #101a3b;
  --surface-3: #162247;
  --line: #1b2750;
  --line-strong: #2a3b72;
  --ink: #e9f0ff;
  --ink-2: #d4deef;
  --muted: #9aabd6;
  --muted-2: #6677a8;
  --accent: #2f8cff;
  --accent-strong: #7ab4ff;
  --accent-soft: rgba(47, 140, 255, 0.16);
  --cyan: #2fd2f5;
  --indigo: #a58bff;
  --indigo-soft: rgba(165, 139, 255, 0.16);
  --good: #2ee59d;
  --good-soft: rgba(46, 229, 157, 0.14);
  --warn: #ffb42e;
  --warn-soft: rgba(255, 180, 46, 0.14);
  --danger: #ff5d73;
  --danger-soft: rgba(255, 93, 115, 0.14);
  --teal: #2dd4bf;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5), 0 6px 20px rgba(0, 0, 0, 0.28);
  --shadow-pop: 0 28px 80px rgba(0, 0, 0, 0.7);
  --mesh-1: rgba(47, 210, 245, 0.15);
  --mesh-2: rgba(47, 140, 255, 0.2);
  --mesh-3: rgba(165, 139, 255, 0.1);
  --mesh-grid: rgba(47, 140, 255, 0.07);
}

/* The page background: a soft brand glow and a faint grid behind the content, never over it. */
body:where(:not(.vg, .vg *))::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(1000px 520px at 90% -14%, var(--mesh-1), transparent 62%),
    radial-gradient(900px 480px at 4% -10%, var(--mesh-2), transparent 62%),
    radial-gradient(700px 400px at 52% 112%, var(--mesh-3), transparent 60%),
    linear-gradient(var(--mesh-grid) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, var(--mesh-grid) 1px, transparent 1px) 0 0 / 48px 48px;
  -webkit-mask-image: linear-gradient(180deg, #000 52%, rgba(0, 0, 0, 0.3));
  mask-image: linear-gradient(180deg, #000 52%, rgba(0, 0, 0, 0.3));
}

#vendigoose-root:where(:not(.vg, .vg *)){
  position: relative;
  z-index: 1;
}

::selection{
  background: color-mix(in srgb, var(--accent) 30%, transparent);
}

:focus-visible:where(:not(.vg, .vg *)){
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Primary actions read as brand blue to cyan. */
.btn.primary:where(:not(.vg, .vg *)),
button.primary:where(:not(.vg, .vg *)){
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 62%, var(--cyan)));
  border-color: transparent;
  color: #fff;
}

/* ===== Stage 2: resizable columns (scripts/modules/vendigoose-tables.js): fixed layout, grips on the header
   borders, the horizontal slider on TOP of the table. ===== */
.table-wrapper:where(:not(.vg, .vg *)){ position: relative; }
.vg-twtop:where(:not(.vg, .vg *)){
  overflow-x: auto;
  overflow-y: hidden;
  height: 13px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
}
.vg-twtop > div:where(:not(.vg, .vg *)){ height: 1px; }
.table-wrapper.vg-has-top::-webkit-scrollbar:horizontal:where(:not(.vg, .vg *)){ height: 0; }
.table-wrapper.vg-has-top:where(:not(.vg, .vg *)){ scrollbar-width: none; }
table.vg-fixed:where(:not(.vg, .vg *)){ table-layout: fixed; }
table.vg-fixed th:where(:not(.vg, .vg *)),
table.vg-fixed td:where(:not(.vg, .vg *)){ overflow: hidden; text-overflow: ellipsis; }
table.vg-fixed td select:where(:not(.vg, .vg *)){ width: 100%; min-width: 0; }
table.vg-cp th:where(:not(.vg, .vg *)),
table.vg-cp td:where(:not(.vg, .vg *)){ padding-left: 7px; padding-right: 7px; }
table.vg-fixed th:where(:not(.vg, .vg *)){ position: relative; }
.vg-grip:where(:not(.vg, .vg *)){ position: absolute; right: 0; top: 0; bottom: 0; width: 9px; cursor: col-resize; z-index: 3; touch-action: none; }
.vg-grip:where(:not(.vg, .vg *))::after{ content: ""; position: absolute; right: 3px; top: 9px; bottom: 9px; width: 1px; background: var(--line-strong); transition: background 0.1s; }
.vg-grip:hover:where(:not(.vg, .vg *))::after,
.vg-grip.on:where(:not(.vg, .vg *))::after{ background: var(--accent); width: 2px; right: 2px; }
body.vg-col-resizing{ cursor: col-resize; user-select: none; }
body.vg-col-resizing *:where(:not(.vg, .vg *)){ cursor: col-resize !important; }

/* ===== Stage 3: components (cards, KPI row, table chrome, status chips) ===== */
/* KPI row: five separate cards instead of one strip. */
.kpi-band:where(:not(.vg, .vg *)){
  gap: 12px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.kpi-cell:where(:not(.vg, .vg *)){
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  padding: 12px 16px;
}
.kpi-cell:last-child:where(:not(.vg, .vg *)){ border-right: 1px solid var(--line); }
button.kpi-cell:hover:where(:not(.vg, .vg *)){
  border-color: color-mix(in srgb, var(--accent) 50%, var(--line-strong));
  background: var(--surface);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 32%, transparent), 0 10px 30px color-mix(in srgb, var(--accent) 16%, transparent);
}
.kpi-cell.active:where(:not(.vg, .vg *)){
  background: var(--accent-soft);
  border-color: var(--accent);
  box-shadow: var(--shadow-card);
}
@media (max-width: 1100px) { .kpi-band:where(:not(.vg, .vg *)){ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .kpi-band:where(:not(.vg, .vg *)){ grid-template-columns: minmax(0, 1fr); } }

/* Panels and table chrome. */
.panel:where(:not(.vg, .vg *)){ border-radius: var(--radius); }

/* Status chips: a dot before the label, lighter weight, as in the approved design. */

/* ===== Stage 4: icon rail (desktop). The sidebar rests as a 64 px rail of icons and opens over the page on hover or
   keyboard focus, as in the approved design. Phones and tablets (<= 980 px) keep the existing stacked navigation. ===== */
@media (min-width: 981px) {
  
  .shell-sidebar:where(:not(.vg, .vg *)){
    width: 64px;
    padding: 16px 10px 14px;
    z-index: 60;
    overflow-x: hidden;
    transition: width 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.18s ease;
  }
  .shell-sidebar:hover:where(:not(.vg, .vg *)),
.shell-sidebar:focus-within:where(:not(.vg, .vg *)){
    width: 232px;
    padding-left: 16px;
    padding-right: 16px;
    box-shadow: var(--shadow-pop);
  }
  
  .shell-sidebar:not(:hover):not(:focus-within) .nav-btn:where(:not(.vg, .vg *)){ justify-content: center; padding-left: 0; padding-right: 0; }
  
  
}

/* ===== Stage 5: the sign-in gate, profile, owner and environment dialogs use their own --ven-* tokens; point them at
   the same brand palette so every dialog, drawer and popover matches the pages behind it. ===== */
:root{
  --ven-accent: #0273fb;
  --ven-accent-strong: #0159c8;
  --ven-accent-deep: #0a3f99;
  --ven-accent-soft: #e6f1ff;
  --ven-accent-softer: #f1f7ff;
  --ven-accent-ring: rgba(2, 115, 251, 0.28);
  --ven-accent-grad: linear-gradient(135deg, #0273fb 0%, #14b8e6 100%);
  --ven-ink: #0a1430;
  --ven-muted: #506088;
  --ven-line: #e0e8f6;
  --ven-line-soft: #eaf0fb;
  --ven-danger: #e0344b;
  --ven-danger-soft: #fde4e8;
  --ven-success: #0e9f6e;
  --ven-radius-sm: 8px;
  --ven-radius: 12px;
  --ven-radius-lg: 18px;
  --ven-shadow-lg: 0 28px 70px rgba(15, 35, 90, 0.26);
}
[data-theme="dark"]:where(:not(.vg, .vg *)){
  --ven-accent: #2f8cff;
  --ven-accent-strong: #7ab4ff;
  --ven-accent-soft: rgba(47, 140, 255, 0.18);
  --ven-accent-softer: rgba(47, 140, 255, 0.1);
  --ven-ink: #e9f0ff;
  --ven-muted: #9aabd6;
  --ven-line: #1b2750;
  --ven-line-soft: #16204a;
  --ven-surface: #0b1330;
  --ven-surface-2: #101a3b;
  --ven-danger: #ff5d73;
  --ven-danger-soft: rgba(255, 93, 115, 0.14);
  --ven-success: #2ee59d;
  --ven-shadow-lg: 0 28px 80px rgba(0, 0, 0, 0.7);
}
.modal-card:where(:not(.vg, .vg *)),
.ven-modal:where(:not(.vg, .vg *)){ border-radius: var(--radius-lg); border: 1px solid var(--line); }
.modal-shell:where(:not(.vg, .vg *)){ background: rgba(5, 10, 24, 0.42); }
.ven-modal-backdrop:where(:not(.vg, .vg *)){ background: rgba(5, 10, 24, 0.6); }
.ven-btn--primary:where(:not(.vg, .vg *)){ background: var(--ven-accent-grad); border-color: transparent; }

/* ===== Stage 6: the top bar and the profile dock, as in the approved design (desktop). The page header becomes a bar
   across the top of the page; the profile + environment control (one button, avatar + name + environment) sits at its right
   end; the rail's head carries the goose. Phones and tablets keep the stacked layout. ===== */
@media (min-width: 981px) {
  .shell-main:where(:not(.vg, .vg *)){ padding-top: 0; }
  
  .page-title:where(:not(.vg, .vg *)){ font-size: 17px; font-weight: 800; }
  

  
  
  .shell-sidebar .ven-authdock-slot:where(:not(.vg, .vg *)){ position: static; }
  .shell-sidebar .ven-profile-dock:where(:not(.vg, .vg *)){
    position: fixed;
    top: 8px;
    right: 18px;
    z-index: 70;
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 9px;
    row-gap: 0;
    height: 40px;
    padding: 0 10px 0 5px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, var(--surface), var(--surface-2));
    box-shadow: var(--shadow-card);
    text-align: left;
  }
  .shell-sidebar .ven-profile-dock:hover:where(:not(.vg, .vg *)){ border-color: color-mix(in srgb, var(--accent) 50%, var(--line-strong)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 32%, transparent), 0 10px 30px color-mix(in srgb, var(--accent) 16%, transparent); }
  .shell-sidebar .ven-profile-dock .ven-avatar:where(:not(.vg, .vg *)){ grid-row: 1 / span 2; grid-column: 1; width: 30px; height: 30px; flex: 0 0 30px; font-size: 11px; }
  .shell-sidebar .ven-profile-dock__copy:where(:not(.vg, .vg *)){ display: block; grid-row: 1; grid-column: 2; min-width: 0; line-height: 1.15; }
  .shell-sidebar .ven-profile-dock__name:where(:not(.vg, .vg *)){ font-size: 12.5px; font-weight: 700; max-width: 150px; }
  .shell-sidebar .ven-profile-dock__role:where(:not(.vg, .vg *)){ display: none; }
  .shell-sidebar .ven-profile-dock__env:where(:not(.vg, .vg *)){ grid-row: 2; grid-column: 2; font-size: 11px; font-weight: 600; color: var(--muted); gap: 5px; }
  .shell-sidebar .ven-profile-dock__envname:where(:not(.vg, .vg *)){ max-width: 150px; }
  .shell-sidebar .ven-profile-dock__chev:where(:not(.vg, .vg *)){ grid-row: 1 / span 2; grid-column: 3; display: grid; place-items: center; color: var(--muted-2); }
  .shell-sidebar .ven-profile-dock__chev svg:where(:not(.vg, .vg *)){ width: 14px; height: 14px; }
  .ven-env-dot:where(:not(.vg, .vg *)){ width: 8px; height: 8px; box-shadow: 0 0 8px color-mix(in srgb, currentColor 40%, transparent); }
}

/* ===== Stage 7: Overview as drawn in the approved design: KPI cards (icon + label, big number, meta line), the table card
   head (icon, title, Working list / On hold / Disregarded switch, export), and the filter row as one line of chips. ===== */
.kpi-cell:where(:not(.vg, .vg *)){ flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 4px; padding: 14px 16px; }
.kpi-cell-head:where(:not(.vg, .vg *)){ display: flex; align-items: center; gap: 8px; flex-direction: row; }
.kpi-cell-icon:where(:not(.vg, .vg *)){ order: 0; width: 22px; height: 22px; border-radius: 7px; }
.kpi-cell-label:where(:not(.vg, .vg *)){ order: 1; font-size: 11.5px; letter-spacing: 0.02em; text-transform: none; font-weight: 650; color: var(--muted); }
.kpi-cell-value:where(:not(.vg, .vg *)){ font-size: 22px; font-weight: 750; letter-spacing: -0.01em; }
.kpi-cell-meta:where(:not(.vg, .vg *)){ font-size: 11px; color: var(--muted-2); font-weight: 500; }

.ov-panel-ico:where(:not(.vg, .vg *)){ width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: var(--accent); background: var(--accent-soft); flex: 0 0 34px; }
.ov-panel-ico svg:where(:not(.vg, .vg *)){ width: 17px; height: 17px; }
.ov-panel-title:where(:not(.vg, .vg *)){ display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.ov-panel-title b:where(:not(.vg, .vg *)){ font-size: 15px; font-weight: 750; color: var(--ink); }
.ov-panel-title small:where(:not(.vg, .vg *)){ font-size: 11.5px; color: var(--muted-2); font-weight: 500; }

/* ===== Stage 8: shared page pieces from the approved design: page subtitle, stat band, rich card head, row avatars. ===== */

.kpi-band.stat-band:where(:not(.vg, .vg *)){ grid-template-columns: repeat(var(--kpi-count, 4), minmax(0, 1fr)); margin-bottom: 14px; }
.kpi-cell.kpi-blue .kpi-cell-icon:where(:not(.vg, .vg *)){ background: var(--accent-soft); color: var(--accent); }
.panel-head--rich:where(:not(.vg, .vg *)){ display: flex; align-items: center; gap: 12px; padding: 14px 16px 8px; }
.panel-head--rich .ov-panel-title:where(:not(.vg, .vg *)){ margin-right: auto; }
@media (max-width: 1100px) { .kpi-band.stat-band:where(:not(.vg, .vg *)){ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .kpi-band.stat-band:where(:not(.vg, .vg *)){ grid-template-columns: minmax(0, 1fr); } }

/* Settings: one "Settings" bar on top, the tab strip right under it (the tab bodies each draw the header; flex order puts it first). */

/* ===== Stage 11: detail pages (company, vendor, ...) share the same top strip and the same stat cards. ===== */
.stat-card:where(:not(.vg, .vg *)){ border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 14px 16px; }
.stat-card-head:where(:not(.vg, .vg *)){ flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 8px; }
.stat-card .stat-icon:where(:not(.vg, .vg *)){ width: 22px; height: 22px; border-radius: 7px; }
.stat-card .stat-label:where(:not(.vg, .vg *)){ text-transform: none; letter-spacing: 0.02em; font-size: 11.5px; font-weight: 650; color: var(--muted); }
.stat-card .stat-value:where(:not(.vg, .vg *)){ font-size: 22px; font-weight: 750; letter-spacing: -0.01em; margin-top: 4px; }

@media (min-width: 981px) {
  /* pages that draw no .page-header of their own (detail pages) still get the bar behind the dock and clear it */
  .shell-main:not(:has(.page-header)):where(:not(.vg, .vg *))::before{
    content: "";
    position: sticky;
    top: 0;
    z-index: 30;
    display: block;
    height: 56px;
    margin: 0 -20px 14px;
    background: color-mix(in srgb, var(--surface) 86%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
  }
}

/* ===== Stage 13: the invoice dialog's fact row as the approved design's stat strip (Total, Outstanding, Due, Received...). ===== */

/* ===== Stage 14: invoice workspace v2, as in the approved demo (module 61). =====================================
   Header (tile, "Invoice #", Supplier -> Company, status chips, assignee + bell, more menu, expand, close); the
   document card (file name, zoom, fit); a side column with the approval bar, the Total/Outstanding/Due/Received
   strip, the vendor/company lines + Edit fields, one "checks need attention" line and the tab strip whose bodies
   are the existing panels drawn flat (demo .sect). Two columns from 1100 px, one column below, like the demo.
   Everything is scoped to .iv2 so the older invoice-modal rules (two-column 510 px rail, card panels) lose. */

/* header */

/* more menu */

/* body: document left, workspace right */

/* Zoom scales the document's box (the PDF viewer / image refit to it) and the card scrolls both ways;
   Fit = the pane's height, off = the page's own A4 proportion at full width. */

/* the approval bar */

/* the four-number strip */

/* vendor / company lines */

/* the quiet attention line */

/* tabs */

/* tab bodies: the existing panels, drawn flat like the demo's sections */

/* Edit fields lives on the vendor/company line, so the Summary section's own lock toggle is not repeated */

/* Summary: two-column key/value grid (demo .kvg) */

/* Payments / Credit: three figures, a progress bar, flat rows */

/* Approval: notices as soft tone cards (demo .note), the approval history as a list */

/* Emails */

/* Activity: the demo's timeline (dot + line) */

/* one column below 1100 px (demo breakpoint): document on top, the workspace under it, the dialog scrolls */

@media (max-width: 760px) { /* kept: this @media was opened by the removed stage-15 phone rules and has always closed at the end of the file; group D left the rest as it was */

/* ===== Stage 15: the invoice workspace as a side drawer, document first (owner, 2026-11-05). ==================
   "The invoice window is not a pop up anymore, it slides from the side": the workspace is a full-height panel
   from the right edge (rounded left corners, the page dimmed but visible on the left, 0.22 s slide-in like the
   company/vendor quick-view drawers). It slides in only on a real open (.is-entering, set by renderInvoiceModal);
   another invoice, a child popup or a re-render keeps it still. It never closes on a backdrop click.
   Proportions: the document takes about two thirds (its card fills the full height with its own toolbar), the
   details column is 400-470 px: approval bar pinned at its top, then a scrolling column with the four key
   figures (2 x 2), one Vendor / Company line with Edit fields, the attention line, sticky tabs and dense
   key-value rows (one column; two when the column is wide). Child popups (payment editor) stay centred popups. */

@keyframes vg-iv2-drawer-in { from { transform: translateX(56px); opacity: 0; } to { transform: none; opacity: 1; } }

/* slim header */

/* body: document about two thirds, details 400-470 px */

/* details column: approval bar pinned, the rest scrolls on its own */

/* the four key figures as a compact 2 x 2 (four in a row when the column is wide) */

/* one compact Vendor / Company line with Edit fields on the same row */

/* the attention notice, only when there is one */

/* tabs: tighter, stuck to the top of the scrolling column */

/* tab bodies: less padding, dense key-value rows */

/* one column below 1100 px: document on top (as tall as the screen allows), details under it; the drawer
   body scrolls and the approval bar sticks to its top */

@media (max-width: 760px) {
  
  /* on a phone the Edit fields switch keeps its icon only (its title says what it does) */

/* ===== Stage 15: Overview, top bar and rail matched to the approved demo (demo/src 10-shell.css, 20-components.css,
   25-extras.css; module 61). Measurements are the demo's: 56 px bar, tinted 28 px chips, 34 px icon buttons with red
   counters, the five KPIs as ONE strip with an accent line, a 38 px table row at 12.5 px regular weight with a checkbox
   column, uppercase headers with the sorted column in brand blue, soft status chips with dots, a bordered-pill assignee
   select, the compact pager, and the 18 px rail icons with no counters. Scoped to the Overview / top bar / rail. ===== */
:root{ --ov-info: #0a8bd6; --ov-sh1: 0 1px 2px rgba(15, 35, 90, 0.06), 0 4px 14px rgba(15, 35, 90, 0.05); }
[data-theme="dark"]:where(:not(.vg, .vg *)){ --ov-info: #4cc3ff; --ov-sh1: 0 1px 2px rgba(0, 0, 0, 0.5), 0 6px 20px rgba(0, 0, 0, 0.28); }

.t-ok:where(:not(.vg, .vg *)){ --tone: var(--good); } .t-warn:where(:not(.vg, .vg *)){ --tone: var(--warn); } .t-bad:where(:not(.vg, .vg *)){ --tone: var(--danger); } .t-info:where(:not(.vg, .vg *)){ --tone: var(--ov-info); }
.t-violet:where(:not(.vg, .vg *)){ --tone: var(--indigo); } .t-brand:where(:not(.vg, .vg *)){ --tone: var(--accent); } .t-flat:where(:not(.vg, .vg *)){ --tone: var(--muted-2); }

/* -- top bar (desktop): the bar, the title, search, tinted chips, upload, currency chip, icon buttons -- */
@media (min-width: 981px) {
  
  .shell-main:not(:has(.page-header)):where(:not(.vg, .vg *))::before{ background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
  
  
  
}

/* chips: demo .chip.tone (28 px in the bar, radius 13, 12 px / 600, tone text on a 13 % tint, 24 % border) */

.topbar-tools:where(:not(.vg, .vg *)){ display: inline-flex; align-items: center; gap: 8px; }
.topbar-ibtn:where(:not(.vg, .vg *)){
  position: relative; width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; padding: 0;
  border: 1px solid transparent; border-radius: 11px; background: transparent; color: var(--muted); cursor: pointer; box-shadow: none;
}
.topbar-ibtn:hover:where(:not(.vg, .vg *)){ background: var(--surface); border-color: var(--line); color: var(--ink); }
.topbar-ibtn svg:where(:not(.vg, .vg *)){ width: 16px; height: 16px; }
.topbar-count:where(:not(.vg, .vg *)){
  position: absolute; top: 3px; right: 3px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px;
  background: var(--danger); color: #fff; font-size: 9.5px; font-weight: 700; line-height: 15px; text-align: center;
}

/* -- KPIs: ONE strip, hairline-divided cells, the brand accent line on top (demo .strip / .cell) -- */

/* -- the table card: panel, head, switch (demo .panel / .ph2 / .seg) -- */

/* -- filter row (demo .toolbar): search with magnifier, icon buttons for dates / senders, selects; active = tinted -- */

/* -- selection bar (shown while rows are ticked) -- */

/* -- the invoice table (demo table.t): 38 px rows, 12.5 px regular, uppercase faint header, sorted = brand + arrow -- */
/* number first, chips after; when the column is narrow the chips give way (ellipsis), never the number */

/* demo .status: 22 px pill, dot, 11.5 px / 650 tone text on a 13 % tint */
/* demo .chip.sq: 22 px, radius 8, 11 px / 600 tone text */
/* the assignee select as a bordered pill (demo .sel.sm) */
/* pager (demo .pager): compact 26 px buttons, the current page in brand blue */

/* -- rail (desktop): 18 px icons on 38 px rows, the active item with the brand tint and the left bar; the goose in a tile -- */
@media (min-width: 981px) {
  /* no backdrop-filter here: it would make the rail the containing block of the fixed profile dock it hosts */
  .shell-sidebar:where(:not(.vg, .vg *)){ padding: 12px 11px 14px; background: color-mix(in srgb, var(--surface) 94%, var(--bg)); }
  .shell-sidebar:hover:where(:not(.vg, .vg *)),
.shell-sidebar:focus-within:where(:not(.vg, .vg *)){ padding-left: 11px; padding-right: 11px; }
  
  
  
  .shell-nav:where(:not(.vg, .vg *)){ gap: 2px; }
  .shell-sidebar .nav-btn:where(:not(.vg, .vg *)){ position: relative; height: 38px; padding: 0 11px; gap: 13px; border: 0; border-radius: 11px; color: var(--muted); font-size: 13px; font-weight: 560; justify-content: flex-start; }
  .shell-sidebar:not(:hover):not(:focus-within) .nav-btn:where(:not(.vg, .vg *)){ padding: 0 11px; justify-content: flex-start; }
  
  
  .shell-sidebar .nav-btn svg:where(:not(.vg, .vg *)){ width: 18px; height: 18px; flex: 0 0 18px; stroke-width: 1.8; }
  .shell-sidebar .nav-btn:hover:where(:not(.vg, .vg *)){ background: var(--surface-2); color: var(--ink); }
  .shell-sidebar .nav-btn.active:where(:not(.vg, .vg *)){
    color: var(--ink); background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 20%, transparent), color-mix(in srgb, var(--accent) 5%, transparent));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent);
  }
  .shell-sidebar .nav-btn.active svg:where(:not(.vg, .vg *)){ color: var(--accent); }
  .shell-sidebar .nav-btn.active:where(:not(.vg, .vg *))::before{ content: ""; position: absolute; left: -11px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(var(--accent), var(--cyan)); box-shadow: 0 0 12px var(--accent); }
  /* the one counter left (invoices awaiting approval): a small soft bubble on the icon, like the demo's mailbox badge */
  
  
  
}

/* -- phones and tablets: the bar wraps, the chips keep their shape -- */
@media (max-width: 980px) {
  
  
  
  .topbar-tools:where(:not(.vg, .vg *)){ margin-left: auto; }
}

}}