/* ============================================================
   INVENSE ERP - component system

   Replaces professional-v2.css (32 minified lines, 161 hardcoded
   colours) and ui-fix.css (which existed only to referee the clash
   between that sheet and app.css).

   Load order: tokens.css -> app.css -> system.css
   Every value here comes from tokens.css. No raw colours.
   See docs/DESIGN_SYSTEM.md.
   ============================================================ */

/* ------------------------------------------------------------
   1. Shell - sidebar, topbar, page frame
   ------------------------------------------------------------ */

* { box-sizing: border-box; }

body {
    background: var(--page);
    color: var(--text-body);
    font-family: var(--font);
    font-size: var(--fs-md);
    line-height: var(--lh-body);
    font-feature-settings: "tnum" 1;
}

.app-shell { min-height: 100vh; }

.main {
    min-width: 0;
    background: var(--page);
}

.sidebar {
    width: var(--sidebar-w);
    background: var(--brand-900);
    border-right: 0;
    box-shadow: 2px 0 18px rgba(4, 19, 32, .10);
    padding: 0;
}

.brand {
    padding: var(--sp-5) var(--sp-4);
    border-bottom: 1px solid rgba(255, 255, 255, .10);
    min-height: 78px;
    gap: var(--sp-3);
}

.brand img {
    width: 38px;
    height: 38px;
    object-fit: contain;
    background: var(--n-0);
    border-radius: var(--r-md);
    padding: var(--sp-1);
}

.brand strong {
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
    color: var(--on-brand);
    font-weight: var(--fw-semibold);
}

.brand span {
    font-size: var(--fs-2xs);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    color: var(--on-brand-muted);
}

.nav { padding: var(--sp-3) var(--sp-2); }

.nav a {
    min-height: 40px;
    margin: 2px 0;
    border-radius: var(--r-md);
    color: rgba(255, 255, 255, .74);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    gap: var(--sp-3);
    padding: 0 var(--sp-3);
    border: 1px solid transparent;
}

.nav a:hover { background: rgba(255, 255, 255, .07); color: var(--on-brand); }

.nav a.active {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .14);
    color: var(--on-brand);
    font-weight: var(--fw-semibold);
    box-shadow: inset 3px 0 0 var(--brand-500);
}

.nav .ico { width: 18px; height: 18px; }

.nav-divider {
    margin: var(--sp-5) var(--sp-3) var(--sp-2);
    color: var(--on-brand-muted);
    font-size: var(--fs-2xs);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
}

.sidebar-footer {
    border-top: 1px solid rgba(255, 255, 255, .10);
    color: var(--on-brand-muted);
    padding: var(--sp-4);
    font-size: var(--fs-2xs);
}

.sidebar-footer strong { color: rgba(255, 255, 255, .88); font-size: var(--fs-xs); }

/* Pending-work count beside a nav item. */
.nav-dot, .tab-dot {
    min-width: 20px;
    height: 20px;
    padding: 0 var(--sp-1);
    border-radius: var(--r-pill);
    background: var(--danger);
    color: var(--n-0);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
}

/* A flex row rather than the fixed three-column grid app.css used: that grid
   was sized for exactly three children, so adding the mobile nav toggle
   dropped every item onto its own row. */
.topbar {
    height: var(--topbar-h);
    min-height: var(--topbar-h);
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(12px);
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
    padding: 0 var(--sp-6);
    margin-bottom: 0;
    position: sticky;
    top: 0;
    z-index: 30;
}

.topbar-id { min-width: 0; }
.topbar-id strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The context label takes the middle, and the logout button the end. */
.topbar-center { margin-left: auto; }
.topbar > .button:last-child { margin-left: auto; }
.topbar-center ~ .button:last-child { margin-left: 0; }

.topbar-id .eyebrow { font-size: var(--fs-2xs); }
.topbar-id strong { font-size: var(--fs-sm); color: var(--text); font-weight: var(--fw-semibold); }

.topbar-context {
    font-size: var(--fs-xs);
    letter-spacing: .02em;
    color: var(--text-soft);
    font-weight: var(--fw-medium);
    text-transform: none;
}

.page-shell { max-width: 1600px; margin: 0 auto; padding: var(--sp-6) var(--sp-6) var(--sp-10); }
.page-shell.wide { max-width: none; }
.page-shell.narrow { max-width: 1050px; }

.page-heading {
    padding: 0;
    margin: 0 0 var(--sp-5);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-6);
}

.page-heading h1 {
    font-size: var(--fs-3xl);
    line-height: var(--lh-tight);
    letter-spacing: -.02em;
    color: var(--text);
    font-weight: var(--fw-semibold);
    margin: var(--sp-1) 0 var(--sp-2);
}

.page-heading p {
    margin: 0;
    color: var(--text-soft);
    font-size: var(--fs-sm);
    max-width: 780px;
    line-height: var(--lh-body);
}

.eyebrow {
    color: var(--text-muted);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
}

.heading-actions, .page-actions, .toolbar-tools {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

.back-link { display: block; color: var(--text-soft); font-size: var(--fs-xs); margin-bottom: var(--sp-2); text-decoration: none; }
.back-link:hover { color: var(--accent); }

/* ------------------------------------------------------------
   2. Buttons - three variants, one meaning each

     primary  one per screen, the thing the page is for
     default  everything else, including every export
     ghost    tertiary, in-toolbar
     danger   destructive only

   There is deliberately no green button. Green is a status.
   ------------------------------------------------------------ */

.button, button.button {
    border-radius: var(--r-md);
    min-height: var(--control-h);
    height: auto;
    padding: 0 var(--sp-3);
    border: 1px solid var(--line-strong);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    background: var(--surface);
    color: var(--text-body);
    box-shadow: none;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.button:hover { border-color: var(--n-400); background: var(--n-50); color: var(--text); transform: none; }
.button:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.button.primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-brand);
    box-shadow: none;
}
.button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-brand); }

/* .secondary and .success were two more ways of saying "a button". They
   now resolve to the default treatment, so an export looks like an export
   on every screen. Kept as selectors so no template has to change. */
.button.secondary, .button.success {
    background: var(--surface);
    border-color: var(--line-strong);
    color: var(--text-body);
}
.button.secondary:hover, .button.success:hover { background: var(--n-50); border-color: var(--n-400); }

.button.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--text-soft); }
.button.ghost:hover { background: var(--n-100); border-color: transparent; color: var(--text); }

.button.danger { background: var(--surface); border-color: var(--danger-line); color: var(--danger); }
.button.danger:hover { background: var(--danger-bg); border-color: var(--danger); }
/* Solid red is reserved for the confirm step inside a dialog. */
.button.danger.solid { background: var(--danger); border-color: var(--danger); color: var(--n-0); }
.button.danger.ghost { background: transparent; color: var(--danger); border-color: transparent; }

.button.small, .button.sm, button.button.sm {
    min-height: var(--control-h-sm);
    padding: 0 var(--sp-2);
    font-size: var(--fs-xs);
}
.button.full, .button.wide { width: 100%; }

.button .ico { width: 15px; height: 15px; }
.button.sm .ico, .button.small .ico { width: 14px; height: 14px; }

.list-toolbar .button, .card-head .button { min-height: var(--control-h-sm); font-size: var(--fs-xs); }
.page-actions .button { min-height: var(--control-h); }

.icon-button, .icon-btn {
    width: var(--control-h-sm);
    height: var(--control-h-sm);
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--text-soft);
    cursor: pointer;
}
.icon-button:hover, .icon-btn:hover { background: var(--n-50); color: var(--text); }
.icon-button.danger, .icon-btn.danger { color: var(--danger); border-color: var(--danger-line); background: var(--surface); }
.icon-button.danger:hover, .icon-btn.danger:hover { background: var(--danger-bg); }
.icon-btn.ok { color: var(--success); border-color: var(--success-line); background: var(--surface); }
.icon-btn.ok:hover { background: var(--success-bg); }

/* A form wrapping a single button must not add a box of its own, or
   inline action rows lose their alignment. */
.row-actions form, .list-toolbar form, .page-actions form { display: inline-flex; margin: 0; }

/* ------------------------------------------------------------
   3. Sub-navigation
   ------------------------------------------------------------ */

.workspace-nav {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    margin: 0 0 var(--sp-5);
    padding: var(--sp-1);
    background: var(--n-100);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    width: max-content;
    max-width: 100%;
    position: relative;
}

.workspace-nav > a, .workspace-more > summary {
    height: 34px;
    padding: 0 var(--sp-3);
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--text-soft);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.workspace-nav > a.on,
.workspace-nav > a:hover,
.workspace-more[open] > summary,
.workspace-more > summary:hover {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-sm);
}

.workspace-more { position: relative; }
.workspace-more > summary { list-style: none; }
.workspace-more > summary::-webkit-details-marker { display: none; }
.workspace-more > summary:after { content: "\25BE"; font-size: var(--fs-2xs); margin-left: 2px; }

.workspace-more > div {
    position: absolute;
    z-index: 50;
    top: 40px;
    left: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    padding: var(--sp-1);
    min-width: 210px;
    display: grid;
}
.workspace-more > div a {
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-sm);
    color: var(--text-body);
    font-size: var(--fs-sm);
    text-decoration: none;
    display: flex;
    justify-content: space-between;
}
.workspace-more > div a:hover { background: var(--n-50); color: var(--accent); }

.subnav {
    border-radius: var(--r-lg);
    background: var(--n-100);
    border: 1px solid var(--line);
    padding: var(--sp-1);
    margin-bottom: var(--sp-5);
}
.subnav a { border-radius: var(--r-md); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }

/* ------------------------------------------------------------
   4. Surfaces - panel / card / tablecard
   ------------------------------------------------------------ */

.panel, .card, .tablecard {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.panel { padding: var(--sp-5); }
.panel + .panel { margin-top: var(--sp-4); }

.panel-head, .list-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-4);
    margin: 0 0 var(--sp-4);
    padding: 0;
    background: transparent;
    border: 0;
}
.panel-head h2, .list-toolbar strong {
    font-size: var(--fs-lg);
    color: var(--text);
    margin: 0;
    letter-spacing: -.01em;
    font-weight: var(--fw-semibold);
}
.panel-head p, .list-toolbar .muted { font-size: var(--fs-xs); color: var(--text-soft); margin: var(--sp-1) 0 0; }

/* A toolbar that is the card header gets the card padding and a tinted
   band, so the title never sits flush against the card edge. */
.tablecard > .list-toolbar,
.card > .list-toolbar,
.panel > .list-toolbar {
    margin: 0;
    padding: var(--sp-3) var(--sp-4);
    align-items: center;
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
}
.tablecard > .list-toolbar > strong,
.card > .list-toolbar > strong,
.panel > .list-toolbar > strong { font-size: var(--fs-lg); line-height: var(--lh-snug); color: var(--text); }
.tablecard > .list-toolbar > .muted,
.card > .list-toolbar > .muted { margin: 0; font-size: var(--fs-xs); }

.card > .card-head { margin: 0 0 var(--sp-4); align-items: center; }
.card > .card-head h2 { font-size: var(--fs-lg); color: var(--text); }
.card.is-table { padding: 0; }

.form-panel { padding: var(--sp-5); }
.permission-panel { margin-top: var(--sp-4); }

.content-grid { display: grid; gap: var(--sp-4); align-items: start; }
.content-grid.two-one { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); }
.content-grid.three-two { grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr); }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: var(--sp-3); }

/* ------------------------------------------------------------
   5. KPI cards - ONE component

   Label (11px caps) / value (26px tabular) / optional sub-line.
   The 3px left bar appears only to signal status. A card with no
   status modifier has no bar, because a colour that decorates is
   a bug.
   ------------------------------------------------------------ */

.metric-grid { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.metric-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.metric-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.metric-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.metric-grid.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* Six tiles read as 3 + 3, never 4 + 2 with two orphans. */
.metric-grid.six { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.metric-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: var(--sp-4);
    box-shadow: var(--shadow-sm);
    min-height: 104px;
    position: relative;
    overflow: hidden;
}

.metric-card:before { content: none; }

.metric-card > span {
    display: block;
    color: var(--text-soft);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    margin-bottom: var(--sp-2);
}

.metric-card > strong {
    display: block;
    font-size: var(--fs-3xl);
    line-height: var(--lh-tight);
    color: var(--text);
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.metric-card > small { display: block; color: var(--text-muted); font-size: var(--fs-2xs); margin-top: var(--sp-2); }

/* Status bar - only on a card that actually carries a status. */
.metric-card.danger:before,
.metric-card.warning:before,
.metric-card.success:before,
.metric-card.info:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
}
.metric-card.danger:before { background: var(--danger); }
.metric-card.warning:before { background: var(--warning); }
.metric-card.success:before { background: var(--success); }
.metric-card.info:before { background: var(--info); }

.metric-card.danger > strong { color: var(--danger); }

.metric-text { font-size: var(--fs-lg) !important; line-height: var(--lh-snug) !important; }
.compact-metrics .metric-card { min-height: 88px; padding: var(--sp-3); }
.compact-metrics .metric-card > strong { font-size: var(--fs-2xl); }

/* The Projects variant - icon tile beside the figure. Same type scale,
   same border, same radius, so it reads as the same family. */
.metric-card.with-icon { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3); align-items: center; }
.metric-card.with-icon > .metric-icon {
    width: 38px;
    height: 38px;
    border-radius: var(--r-md);
    background: var(--n-100);
    color: var(--text-soft);
    display: grid;
    place-items: center;
}
.metric-card.with-icon .ico { width: 18px; height: 18px; }

/* ------------------------------------------------------------
   6. Tables
   ------------------------------------------------------------ */

/* A wide register genuinely needs to scroll sideways - eleven columns do
   not fit any laptop. The bug was that the scroll was invisible, so the
   cut-off column looked like a broken layout. The gradient on the right
   edge only paints while there is more table to reach; it detaches on
   scroll via JS (see tables.js), so it never covers the last column. */
.table-wrap, .table-scroll {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background:
        linear-gradient(to right, var(--surface) 30%, rgba(255, 255, 255, 0)) left / 26px 100% no-repeat,
        linear-gradient(to left, var(--surface) 30%, rgba(255, 255, 255, 0)) right / 26px 100% no-repeat,
        radial-gradient(farthest-side at 0 50%, rgba(23, 41, 58, .14), rgba(23, 41, 58, 0)) left / 12px 100% no-repeat,
        radial-gradient(farthest-side at 100% 50%, rgba(23, 41, 58, .14), rgba(23, 41, 58, 0)) right / 12px 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
}

.table-wrap table, .table-scroll table { background: var(--surface); }

/* A native scrollbar the user can actually see and grab. */
.table-wrap::-webkit-scrollbar, .table-scroll::-webkit-scrollbar { height: 10px; }
.table-wrap::-webkit-scrollbar-thumb, .table-scroll::-webkit-scrollbar-thumb {
    background: var(--n-300);
    border-radius: var(--r-pill);
    border: 3px solid var(--surface);
}
.table-wrap::-webkit-scrollbar-thumb:hover, .table-scroll::-webkit-scrollbar-thumb:hover { background: var(--n-400); }

.data-table, table { width: 100%; border-collapse: separate; border-spacing: 0; }

.data-table th, table th {
    background: var(--n-50);
    color: var(--text-soft);
    font-size: var(--fs-2xs);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    font-weight: var(--fw-semibold);
    padding: var(--sp-3) var(--sp-3);
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
    text-align: left;
}

.data-table td, table td {
    font-size: var(--fs-sm);
    padding: var(--sp-3);
    border-bottom: 1px solid var(--line-soft);
    vertical-align: middle;
    color: var(--text-body);
}

.data-table tbody tr:last-child td, table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover, table tbody tr:hover { background: var(--n-25); }
.data-table td strong, table td strong { font-size: var(--fs-sm); color: var(--text); display: block; font-weight: var(--fw-semibold); }
.data-table td small, table td small { display: block; color: var(--text-muted); font-size: var(--fs-2xs); margin-top: 2px; line-height: var(--lh-snug); }

.clickable, .row-link { cursor: pointer; }
.row-alert { background: var(--danger-bg) !important; }

/* Figures right-align in the header AND the body, so a column of
   numbers lines up with the label above it. */
td.num, th.num, .num { text-align: right !important; font-variant-numeric: tabular-nums; }

.actions, .row-actions { text-align: right; white-space: nowrap; }
.permission-table td:not(:first-child), .permission-table th:not(:first-child) { text-align: center; }
.permission-table input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); }

/* Narrow dashboard table cards do not scroll sideways - they ellipsis. */
.tablecard.compact table { min-width: 0; width: 100%; table-layout: fixed; }
.tablecard.compact th { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-2xs); }
.tablecard.compact td { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); }
.tablecard.compact td, .tablecard.compact th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tablecard.compact .table-scroll { overflow: visible; border: 0; border-radius: 0; }
.tablecard.compact td.num, .tablecard.compact th.num { text-align: right; }
.tablecard.compact td.cell-strong { min-width: 0; }

/* Low-priority columns step aside on a narrow viewport rather than
   pushing the important ones off the edge. */
@media (max-width: 1280px) {
    .data-table .col-optional, table .col-optional { display: none; }
}
@media (max-width: 1024px) {
    .data-table .col-optional-2, table .col-optional-2 { display: none; }
}

tr.salary-history td { background: var(--surface-2); font-size: var(--fs-xs); }
tr.salary-history td:first-child { padding-left: var(--sp-6); }

.list-toolbar.pager { border-top: 1px solid var(--line); border-bottom: 0; }
.pager-links { display: flex; gap: var(--sp-2); }

/* ------------------------------------------------------------
   7. Forms
   ------------------------------------------------------------ */

.form-grid { display: grid; gap: var(--sp-3); }
.form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid p { margin: 0; }

.form-grid label,
.form-panel label,
label {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    color: var(--text-soft);
    letter-spacing: .02em;
    text-transform: uppercase;
    display: grid;
    gap: var(--sp-2);
}

.form-grid .helptext, .helptext {
    font-size: var(--fs-2xs);
    color: var(--text-muted);
    font-weight: var(--fw-regular);
    text-transform: none;
    letter-spacing: 0;
}

.form-grid ul.errorlist, .errorlist {
    list-style: none;
    padding: 0;
    margin: 0;
    color: var(--danger);
    font-size: var(--fs-2xs);
    text-transform: none;
    letter-spacing: 0;
}

.form-grid input, .form-grid select, .form-grid textarea,
.form-panel input, .form-panel select, .form-panel textarea,
label > input, label > select, label > textarea,
.filter-bar input, .filter-bar select,
.inline-form input, .inline-form select,
select, input, textarea {
    width: 100%;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    min-height: var(--control-h);
    padding: var(--sp-2) var(--sp-3);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: var(--fw-regular);
    text-transform: none;
    letter-spacing: 0;
    outline: none;
}

.form-grid textarea, textarea { resize: vertical; min-height: 84px; line-height: var(--lh-body); }

input:focus, select:focus, textarea:focus,
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus {
    border-color: var(--brand-500);
    box-shadow: var(--focus-ring);
}

input::placeholder, textarea::placeholder { color: var(--text-muted); }
input:disabled, select:disabled, textarea:disabled { background: var(--n-50); color: var(--text-muted); cursor: not-allowed; }

.form-actions, .sticky-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-2);
    margin-top: var(--sp-5);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--line-soft);
}

.sticky-actions {
    position: sticky;
    bottom: var(--sp-3);
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(10px);
    padding: var(--sp-3);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    z-index: 20;
}

.inline-form { display: flex; align-items: end; gap: var(--sp-2); margin-top: var(--sp-3); }
.inline-form > * { margin: 0; }
.inline-form input { flex: 1; }
.inline-form.multi {
    display: grid;
    grid-template-columns: 2fr 1fr 2fr auto;
    border-top: 1px solid var(--line-soft);
    padding-top: var(--sp-3);
}
.inline-form.multi p { margin: 0; }

.check-row {
    display: flex !important;
    align-items: center;
    gap: var(--sp-2) !important;
    font-size: var(--fs-sm) !important;
    font-weight: var(--fw-medium) !important;
    color: var(--text-body) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.check-row input { width: 16px !important; height: 16px !important; min-height: auto !important; accent-color: var(--accent); }

.file-drop {
    border: 1.5px dashed var(--n-400);
    border-radius: var(--r-lg);
    padding: var(--sp-6);
    display: grid !important;
    place-items: center;
    background: var(--n-25);
    cursor: pointer;
    text-align: center;
}
.file-drop input { width: auto; min-height: auto; border: 0; }
.file-drop strong { font-size: var(--fs-md); }
.file-drop span { font-size: var(--fs-2xs); color: var(--text-muted); }

/* Field widths follow the data: a date given a full grid column is
   mostly empty space, which is what made forms feel sprawling. */
.field-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--sp-3) var(--sp-4);
    align-items: start;
}
.field-grid > label, .field-grid > .fg-cell { grid-column: span 4; min-width: 0; }
.field-grid > .full, .field-grid > label.full { grid-column: 1 / -1; }
.field-grid > .span-2 { grid-column: span 2; }
.field-grid > .span-3 { grid-column: span 3; }
.field-grid > .span-6 { grid-column: span 6; }
.field-grid > .span-8 { grid-column: span 8; }

.field-grid label { display: grid; gap: var(--sp-2); align-content: start; }
.field-grid input, .field-grid select { min-height: var(--control-h); }
.field-grid textarea { padding: var(--sp-2) var(--sp-3); line-height: var(--lh-body); }

.form-section { padding: var(--sp-4); border-bottom: 1px solid var(--line-soft); margin: 0; }
.form-section:last-of-type { border-bottom: 0; }
.form-section > h3 {
    margin: 0 0 var(--sp-3);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    color: var(--text-soft);
}

.form-narrow { max-width: 860px; }

@media (max-width: 900px) {
    .field-grid > label, .field-grid > .fg-cell,
    .field-grid > .span-2, .field-grid > .span-3,
    .field-grid > .span-6, .field-grid > .span-8 { grid-column: span 6; }
}
@media (max-width: 600px) {
    .field-grid > label, .field-grid > .fg-cell,
    .field-grid > .span-2, .field-grid > .span-3,
    .field-grid > .span-6, .field-grid > .span-8 { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------
   8. Filter bars
   ------------------------------------------------------------ */

.filter-bar, .date-command-bar { display: flex; align-items: end; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.filter-bar label, .date-command-bar label { min-width: 150px; }

.filter-bar { display: block; padding: var(--sp-3) var(--sp-4); }
.filter-bar > .filter-grid { width: 100%; }

.date-command-bar {
    justify-content: space-between;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: var(--sp-3) var(--sp-4);
    box-shadow: var(--shadow-sm);
}
.date-command-bar > div { display: flex; gap: var(--sp-3); }

.filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: var(--sp-3);
    align-items: end;
}
.filter-grid label { display: grid; gap: var(--sp-1); min-width: 0; }
.filter-grid input, .filter-grid select { min-height: var(--control-h); }

.filterbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-3);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
}
.filterbar label { display: grid; gap: var(--sp-1); min-width: 0; margin: 0; }
.filterbar input, .filterbar select { min-height: var(--control-h); padding: var(--sp-2) var(--sp-2); font-size: var(--fs-sm); }

.filterbar .f-search { flex: 1 1 190px; min-width: 160px; }
.filterbar .f-search input { width: 100%; }
.filterbar .f-date { flex: 0 0 142px; }
.filterbar .f-money { flex: 0 0 112px; }
.filterbar .f-select { flex: 0 0 154px; }
.filterbar .f-wide { flex: 0 0 176px; }
.filterbar .f-actions { display: flex; gap: var(--sp-2); align-items: center; margin-left: auto; padding-bottom: 1px; }
.filterbar .f-note { flex-basis: 100%; margin: 0; font-size: var(--fs-2xs); color: var(--text-muted); }

.list-toolbar input, .list-toolbar select,
.pay-form input, .pay-form select,
.fy-select select, .table-filter,
.export-row select, .export-row input[type=date] { min-height: var(--control-h); height: auto; }

/* Active filters echoed as removable facets (the Odoo pattern). */
.facets { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.facet {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-1) var(--sp-2);
    border-radius: var(--r-pill);
    background: var(--brand-050);
    border: 1px solid var(--brand-100);
    color: var(--text-body);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-medium);
    text-decoration: none;
}
.facet b { font-weight: var(--fw-semibold); }
.facet .ico { width: 12px; height: 12px; opacity: .6; }
.facet:hover { border-color: var(--brand-500); }

@media (max-width: 720px) {
    .filterbar .f-date, .filterbar .f-money,
    .filterbar .f-select, .filterbar .f-wide { flex: 1 1 132px; }
    .filterbar .f-actions { margin-left: 0; }
}

/* ------------------------------------------------------------
   9. Chips and status

   A status chip takes a status colour. A type, category or name
   takes the neutral pair - it is not a state.
   ------------------------------------------------------------ */

.status-chip, .status, .chip-type {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-pill);
    padding: var(--sp-1) var(--sp-2);
    background: var(--n-100);
    color: var(--text-body);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    white-space: nowrap;
    letter-spacing: .01em;
}

.status-chip.success, .status-chip.approved, .status.is-approved,
.status-chip.paid, .status-chip.passed, .status-chip.completed {
    background: var(--success-bg); color: var(--success);
}
.status-chip.warning, .status-chip.submitted, .status-chip.pending {
    background: var(--warning-bg); color: var(--warning);
}
.status-chip.danger, .status-chip.rejected, .status-chip.failed, .status-chip.overdue {
    background: var(--danger-bg); color: var(--danger);
}
.status-chip.info, .status-chip.draft { background: var(--info-bg); color: var(--info); }
.status-chip.large { font-size: var(--fs-xs); padding: var(--sp-2) var(--sp-3); }

/* Work-order gateways 1-5: a progression, so it reads neutral -> info
   -> info -> warning -> success rather than five unrelated hues. */
.status-chip.stage-1 { background: var(--n-100); color: var(--text-soft); }
.status-chip.stage-2 { background: var(--info-bg); color: var(--info); }
.status-chip.stage-3 { background: var(--info-bg); color: var(--info); }
.status-chip.stage-4 { background: var(--warning-bg); color: var(--warning); }
.status-chip.stage-5 { background: var(--success-bg); color: var(--success); }

/* Type and category chips are never a status. */
.chip-type, .chip-type.t-inventory, .t-finished,
.status.bill-type.is-advance, .status.bill-type.is-expense, .status.bill-type.is-company {
    background: var(--n-100);
    color: var(--text-body);
    border-color: var(--line);
}
.status.bill-type { text-transform: uppercase; letter-spacing: .04em; font-size: var(--fs-2xs); }

.text-danger { color: var(--danger) !important; }
.text-success { color: var(--success) !important; }
.muted { color: var(--text-muted) !important; }

.count-badge {
    background: var(--n-100);
    color: var(--text-soft);
    border-radius: var(--r-pill);
    padding: 2px var(--sp-2);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
}

.badge-stack { display: flex; flex-wrap: wrap; gap: var(--sp-1); max-width: 190px; }
.badge-stack .status { font-size: var(--fs-2xs); padding: 2px var(--sp-2); }

/* ------------------------------------------------------------
   10. People, presence, avatars
   ------------------------------------------------------------ */

.person-cell { display: flex; align-items: center; gap: var(--sp-2); }
.avatar {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: var(--r-md);
    background: var(--brand-100);
    color: var(--brand-700);
    display: grid;
    place-items: center;
    font-weight: var(--fw-semibold);
    font-size: var(--fs-xs);
}

.presence-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    border-radius: var(--r-pill);
    padding: var(--sp-1) var(--sp-2);
    background: var(--n-100);
    color: var(--text-body);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
}
.presence-chip i, .status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--n-400); }
.presence-chip.office, .presence-chip.wfh, .presence-chip.meeting { background: var(--success-bg); color: var(--success); }
.presence-chip.office i, .presence-chip.wfh i, .presence-chip.meeting i, .status-dot.green { background: var(--success); }
.presence-chip.absent { background: var(--danger-bg); color: var(--danger); }
.presence-chip.absent i, .status-dot.red { background: var(--danger); }
.presence-chip.leave { background: var(--info-bg); color: var(--info); }
.presence-chip.leave i { background: var(--info); }

/* ------------------------------------------------------------
   11. Calendar
   ------------------------------------------------------------ */

.calendar-panel { min-width: 0; }
.calendar-actions { display: flex; gap: var(--sp-2); }
.calendar-actions a {
    width: var(--control-h-sm);
    height: var(--control-h-sm);
    display: grid;
    place-items: center;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    text-decoration: none;
    color: var(--text-soft);
}
.calendar-actions a:hover { background: var(--n-50); }

.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--sp-1); }
.weekday {
    text-align: center;
    font-size: var(--fs-2xs);
    text-transform: uppercase;
    letter-spacing: var(--track-caps);
    color: var(--text-muted);
    font-weight: var(--fw-semibold);
    padding: var(--sp-1);
}
.calendar-day {
    min-height: 72px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: var(--sp-2);
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-decoration: none;
    color: var(--text-body);
    background: var(--surface);
}
.calendar-day:hover { border-color: var(--brand-500); background: var(--n-25); }
.calendar-day.outside { opacity: .38; }
.calendar-day.today b { color: var(--accent); }
.calendar-day.selected { border: 2px solid var(--accent); padding: 7px; }
.calendar-day b { font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.calendar-count { font-size: var(--fs-2xs); border-radius: var(--r-sm); padding: 1px var(--sp-1); }
.calendar-count.present { background: var(--success-bg); color: var(--success); }
.calendar-count.leave { background: var(--info-bg); color: var(--info); }

/* ------------------------------------------------------------
   12. Modals
   ------------------------------------------------------------ */

.modal-card {
    border: 0;
    border-radius: var(--r-xl);
    padding: 0;
    width: min(720px, calc(100vw - var(--sp-6)));
    box-shadow: var(--shadow-md);
}
.modal-card::backdrop { background: rgba(12, 30, 44, .52); backdrop-filter: blur(2px); }
.modal-card > form { padding: var(--sp-5); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--sp-4); }
.modal-head h2 { margin: 0; font-size: var(--fs-2xl); color: var(--text); font-weight: var(--fw-semibold); }

/* ------------------------------------------------------------
   13. Empty states - always icon + heading + line
   ------------------------------------------------------------ */

.empty-state, .empty {
    padding: var(--sp-8) var(--sp-5);
    text-align: center;
    color: var(--text-muted);
    display: grid;
    justify-items: center;
    gap: var(--sp-2);
}
.empty-state .ico { width: 28px; height: 28px; color: var(--n-400); }
.empty-state h3 { font-size: var(--fs-md); color: var(--text-body); margin: 0; font-weight: var(--fw-semibold); }
.empty-state p { font-size: var(--fs-sm); margin: 0; max-width: 46ch; }
.empty-state .button { margin-top: var(--sp-2); }
.empty-state.compact { padding: var(--sp-4); font-size: var(--fs-sm); }

/* ------------------------------------------------------------
   14. Progress, workspaces, workload
   ------------------------------------------------------------ */

.progress { height: 6px; background: var(--n-200); border-radius: var(--r-pill); overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.progress.thin { height: 4px; }

.workspace-card {
    display: block;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: var(--sp-4);
    text-decoration: none;
    background: var(--surface);
    color: inherit;
    transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.workspace-card:hover { box-shadow: var(--shadow-md); border-color: var(--brand-500); transform: none; }
.workspace-card p { font-size: var(--fs-xs); color: var(--text-soft); min-height: 32px; }
.workspace-top, .workspace-meta { display: flex; align-items: center; gap: var(--sp-2); }
.workspace-top strong { font-size: var(--fs-md); flex: 1; font-weight: var(--fw-semibold); }
.workspace-top > span:last-child { font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.workspace-meta { justify-content: space-between; margin-top: var(--sp-2); color: var(--text-muted); font-size: var(--fs-2xs); }

.workload-row { display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-2); align-items: center; padding: var(--sp-3) 0; border-bottom: 1px solid var(--line-soft); }
.workload-row:last-child { border-bottom: 0; }
.workload-row strong { font-size: var(--fs-sm); }
.workload-row small { display: block; font-size: var(--fs-2xs); color: var(--text-muted); }
.workload-numbers { text-align: right; }
.workload-numbers b { font-size: var(--fs-lg); display: block; font-variant-numeric: tabular-nums; }
.workload-numbers span { font-size: var(--fs-2xs); color: var(--text-muted); }

/* ------------------------------------------------------------
   15. Kanban
   ------------------------------------------------------------ */

.kanban-board { display: flex; align-items: flex-start; gap: var(--sp-3); overflow-x: auto; padding: 2px 2px var(--sp-5); }
.kanban-column { width: 300px; min-width: 300px; background: var(--n-100); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-2); }
.kanban-column > header { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-1) var(--sp-1) var(--sp-3); }
.kanban-column > header > div { display: flex; align-items: center; gap: var(--sp-2); }
.kanban-column h2 { font-size: var(--fs-sm); margin: 0; color: var(--text); font-weight: var(--fw-semibold); }
.kanban-column > header span { font-size: var(--fs-2xs); border-radius: var(--r-pill); background: var(--n-200); padding: 2px var(--sp-2); color: var(--text-soft); }
.kanban-stack { display: grid; gap: var(--sp-2); }

.kanban-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    border-top: 3px solid var(--n-400);
}
.kanban-card.theme-blue { border-top-color: var(--info); }
.kanban-card.theme-green { border-top-color: var(--success); }
.kanban-card.theme-amber { border-top-color: var(--warning); }
.kanban-card.theme-red { border-top-color: var(--danger); }
.kanban-card.theme-violet { border-top-color: var(--brand-500); }
.kanban-card.overdue { box-shadow: 0 0 0 1px var(--danger-line), var(--shadow-sm); }
.kanban-card > a { display: block; padding: var(--sp-3); text-decoration: none; color: inherit; }
.kanban-card h3 { font-size: var(--fs-sm); margin: var(--sp-2) 0 var(--sp-1); color: var(--text); font-weight: var(--fw-semibold); }
.kanban-card p { font-size: var(--fs-xs); line-height: var(--lh-snug); color: var(--text-soft); margin: 0 0 var(--sp-2); }
.kanban-labels, .kanban-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); font-size: var(--fs-2xs); color: var(--text-muted); }

.severity { border-radius: var(--r-pill); padding: 2px var(--sp-2); background: var(--n-100); color: var(--text-soft); font-weight: var(--fw-semibold); font-size: var(--fs-2xs); }
.severity.high, .severity.critical { background: var(--danger-bg); color: var(--danger); }
.severity.medium { background: var(--warning-bg); color: var(--warning); }

.avatar-stack { display: flex; }
.avatar-stack i {
    width: 22px; height: 22px;
    border: 2px solid var(--surface);
    border-radius: 50%;
    background: var(--brand-100);
    color: var(--brand-700);
    display: grid; place-items: center;
    font-size: var(--fs-2xs);
    font-style: normal;
    margin-left: -6px;
}

.quick-move { border-top: 1px solid var(--line-soft); padding: var(--sp-1) var(--sp-2); }
.quick-move select { min-height: var(--control-h-sm); padding: 2px var(--sp-2); font-size: var(--fs-2xs); background: var(--n-25); }
.kanban-empty { padding: var(--sp-6) var(--sp-3); text-align: center; border: 1px dashed var(--line-strong); border-radius: var(--r-md); color: var(--text-muted); font-size: var(--fs-xs); }
.add-column { background: var(--n-50); }
.add-column form { display: grid; gap: var(--sp-2); }
.add-column p { margin: 0; }

/* ------------------------------------------------------------
   16. Production gateways
   ------------------------------------------------------------ */

.gateway-strip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-3); }
.gateway-strip > div {
    flex: 1;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--sp-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: var(--sp-3);
    background: var(--n-25);
}
.gateway-strip b, .gateway-timeline b, .gateway-number {
    width: 26px; height: 26px;
    border-radius: var(--r-sm);
    background: var(--n-100);
    color: var(--text-soft);
    display: grid; place-items: center;
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
}
.gateway-strip span { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-soft); }
.gateway-strip strong { font-size: var(--fs-xl); font-variant-numeric: tabular-nums; }
.gateway-strip > i { color: var(--n-400); font-style: normal; }

.gateway-timeline { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.gateway-timeline > div { flex: 1; display: flex; align-items: center; gap: var(--sp-2); color: var(--text-muted); }
.gateway-timeline > div span { font-size: var(--fs-2xs); font-weight: var(--fw-semibold); }
.gateway-timeline > i { height: 2px; background: var(--line); flex: .25; }
.gateway-timeline > div.current b { background: var(--accent); color: var(--on-brand); box-shadow: 0 0 0 4px var(--brand-100); }
.gateway-timeline > div.current span { color: var(--accent); }
.gateway-timeline > div.done b { background: var(--success); color: var(--n-0); }
.gateway-timeline > div.done span { color: var(--success); }

/* Gateway filter pills. Stages read as a progression, and the selected
   pill keeps its badge legible against the fill. */
.gateway-pill {
    display: flex; align-items: center; gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-pill);
    border: 1px solid var(--line);
    background: var(--surface);
    text-decoration: none;
    color: var(--text-body);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.gateway-pill:hover { border-color: var(--n-400); transform: none; box-shadow: none; }
.gateway-pill strong {
    display: inline-grid; place-items: center;
    min-width: 22px; height: 20px; padding: 0 var(--sp-2);
    border-radius: var(--r-pill);
    background: var(--n-100);
    color: var(--text-soft);
    font-size: var(--fs-2xs);
    font-variant-numeric: tabular-nums;
}
.gateway-pill.on { color: var(--on-brand); border-color: transparent; background: var(--accent); }
.gateway-pill.on strong { background: rgba(255, 255, 255, .26); color: var(--on-brand); }
.gateway-pill.stage-1 { border-left: 3px solid var(--n-400); }
.gateway-pill.stage-2, .gateway-pill.stage-3 { border-left: 3px solid var(--info); }
.gateway-pill.stage-4 { border-left: 3px solid var(--warning); }
.gateway-pill.stage-5 { border-left: 3px solid var(--success); }
.gateway-pill.all.on { background: var(--accent); }
.gateway-pill.stage-1.on { background: var(--n-600); }
.gateway-pill.stage-2.on, .gateway-pill.stage-3.on { background: var(--info); }
.gateway-pill.stage-4.on { background: var(--warning); }
.gateway-pill.stage-5.on { background: var(--success); }

.wo-table .stage-row { border-left: 3px solid transparent; }
.wo-table .stage-row.stage-1 { border-left-color: var(--n-400); }
.wo-table .stage-row.stage-2, .wo-table .stage-row.stage-3 { border-left-color: var(--info); }
.wo-table .stage-row.stage-4 { border-left-color: var(--warning); }
.wo-table .stage-row.stage-5 { border-left-color: var(--success); }
.wo-table .wo-link { text-decoration: none; color: inherit; }
.wo-table .wo-link:hover strong { text-decoration: underline; }
.wo-progress { min-width: 110px; }
.wo-progress small { display: block; margin-top: var(--sp-1); color: var(--text-muted); }

.badge-row { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-1); }
.wo-badge {
    display: inline-flex; align-items: center;
    border-radius: var(--r-pill);
    padding: 2px var(--sp-2);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    white-space: nowrap;
    background: var(--n-100);
    color: var(--text-soft);
}
.wo-badge.danger { background: var(--danger-bg); color: var(--danger); }
.wo-badge.warn { background: var(--warning-bg); color: var(--warning); }
.wo-badge.success { background: var(--success-bg); color: var(--success); }
.wo-badge.muted { background: var(--n-100); color: var(--text-muted); }

.workflow-stack, .workflow-sidebar { display: grid; gap: var(--sp-4); }
.gateway-panel { position: relative; }
.gateway-panel.active-gateway { border-color: var(--brand-500); box-shadow: 0 0 0 2px var(--brand-100), var(--shadow-sm); }
.gateway-panel .panel-head > div:first-child { display: grid; grid-template-columns: auto 1fr; column-gap: var(--sp-2); }
.gateway-panel .panel-head h2, .gateway-panel .panel-head p { grid-column: 2; }
.decision-form { display: grid; gap: var(--sp-3); border-top: 1px solid var(--line-soft); padding-top: var(--sp-3); margin-top: var(--sp-3); }

.action-panel { background: var(--brand-700); color: var(--on-brand); border: 0; }
.action-panel h2, .action-panel p, .action-panel label { color: var(--on-brand); }
.action-panel .eyebrow { color: var(--on-brand-muted); }
.action-panel textarea { background: rgba(255, 255, 255, .95); color: var(--text); }

.gateway-number { display: inline-grid; }

/* ------------------------------------------------------------
   17. Checklists, steps, detail lists, timeline
   ------------------------------------------------------------ */

.checklist-list { display: grid; }
.checklist-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-2); border-bottom: 1px solid var(--line-soft); padding: var(--sp-2) 0; }
.checklist-row.done { opacity: .62; }
.checklist-row.done strong, .checklist-row.done > span { text-decoration: line-through; }
.check-toggle { width: 22px; height: 22px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--surface); color: var(--n-0); cursor: pointer; }
.checklist-row.done .check-toggle { background: var(--success); border-color: var(--success); }
.checklist-row strong { font-size: var(--fs-sm); }
.checklist-row small { display: block; font-size: var(--fs-2xs); color: var(--text-muted); margin-top: 2px; }

.step-number { width: 24px; height: 24px; border-radius: var(--r-sm); background: var(--n-100); color: var(--text-soft); display: grid; place-items: center; font-size: var(--fs-2xs); font-weight: var(--fw-semibold); }

.inline-details { border-top: 1px solid var(--line-soft); margin-top: var(--sp-3); padding-top: var(--sp-3); }
.inline-details summary { cursor: pointer; color: var(--accent); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.inline-details[open] summary { margin-bottom: var(--sp-3); }
.top-rule { border-top: 1px solid var(--line-soft); margin-top: var(--sp-3); padding-top: var(--sp-3); }

.detail-list h2 { font-size: var(--fs-lg); margin: 0 0 var(--sp-3); }
.detail-list dl { display: grid; grid-template-columns: 1fr 1.5fr; gap: 0; margin: 0; }
.detail-list dt, .detail-list dd { padding: var(--sp-2) 0; border-bottom: 1px solid var(--line-soft); font-size: var(--fs-sm); }
.detail-list dt { color: var(--text-soft); }
.detail-list dd { margin: 0; text-align: right; color: var(--text); font-weight: var(--fw-medium); }
.detail-grid-list { grid-template-columns: 1fr 1fr !important; }
.detail-grid-list dd { text-align: left !important; }
.detail-span-2 { grid-column: span 2; }

.timeline-list > div { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2); }
.timeline-list i { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-500); margin-top: var(--sp-1); box-shadow: 0 0 0 4px var(--brand-050); }
.timeline-list span { border-left: 1px solid var(--line); padding: 0 0 var(--sp-3) var(--sp-3); }
.timeline-list strong { font-size: var(--fs-sm); }
.timeline-list small { display: block; font-size: var(--fs-2xs); color: var(--text-muted); }
.timeline-list p { font-size: var(--fs-xs); color: var(--text-soft); margin: var(--sp-1) 0 0; }

/* ------------------------------------------------------------
   18. Locations, documents, callouts
   ------------------------------------------------------------ */

.path-cell { display: flex; align-items: center; gap: var(--sp-2); }
.path-cell small { display: block; }
.level-pill { width: 28px; height: 24px; border-radius: var(--r-sm); background: var(--n-100); color: var(--text-soft); display: grid; place-items: center; font-size: var(--fs-2xs); font-weight: var(--fw-semibold); }

.info-callout { background: var(--info-bg); border: 1px solid var(--info-line); border-radius: var(--r-md); padding: var(--sp-3); margin-top: var(--sp-4); }
.info-callout strong { font-size: var(--fs-xs); color: var(--info); }
.info-callout p { font-size: var(--fs-xs); line-height: var(--lh-body); color: var(--text-soft); margin: var(--sp-1) 0 0; }

.document-list { display: grid; }
.document-list > a, .document-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-2); padding: var(--sp-3) 0; border-bottom: 1px solid var(--line-soft); text-decoration: none; color: inherit; }
.document-row > a { display: contents; }
.document-icon { width: 34px; height: 34px; border-radius: var(--r-sm); background: var(--n-100); color: var(--text-soft); display: grid; place-items: center; font-size: var(--fs-2xs); font-weight: var(--fw-bold); }
.document-list strong { font-size: var(--fs-sm); }
.document-list small { display: block; font-size: var(--fs-2xs); color: var(--text-muted); margin-top: 2px; }

/* ------------------------------------------------------------
   19. Dashboard rows and charts
   ------------------------------------------------------------ */

.split-grid, .chart-grid, .dash-row { align-items: stretch; }
.split-grid > *, .chart-grid > *, .dash-row > * { min-width: 0; }

.dash-row { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-4); align-items: stretch; }
.dash-row.halves { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dash-row.thirds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dash-row.donut-two { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1.1fr); }

.dash-row > .tablecard, .dash-row > .card { display: flex; flex-direction: column; }
.dash-row > .tablecard > .table-scroll, .dash-row > .card > .donut-wrap { flex: 1; }

.chart .bar-value { font-size: var(--fs-2xs); font-weight: var(--fw-semibold); fill: var(--text-soft); font-variant-numeric: tabular-nums; pointer-events: none; }

.donut-legend { display: grid; gap: 2px; align-content: start; }
.donut-item {
    display: grid; grid-template-columns: auto 1fr auto;
    align-items: center; gap: var(--sp-2);
    width: 100%; padding: var(--sp-1) var(--sp-2);
    border: 0; border-radius: var(--r-sm);
    background: transparent; font: inherit; text-align: left; cursor: pointer;
    transition: background var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.donut-item:hover { background: var(--n-50); }
.donut-item.off { opacity: .42; }
.donut-item i { width: 10px; height: 10px; border-radius: 3px; }
.donut-item span { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-body); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.donut-item b { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.donut-item.off b { font-weight: var(--fw-medium); color: var(--text-muted); }

.donut-wrap { display: grid; gap: var(--sp-3); justify-items: center; }
.donut-wrap > svg { width: 150px; height: 150px; }
.donut-wrap > .donut-legend { width: 100%; }
.chart-half { height: 250px; }

/* ------------------------------------------------------------
   20. Document form (invoice / proforma / PO / purchase invoice)
   ------------------------------------------------------------ */

.doc-form { padding: 0; }
.doc-form textarea { min-height: 74px; resize: vertical; }

.li-table { gap: var(--sp-1); }
.li-head, .li-row { grid-template-columns: minmax(120px, 1fr) minmax(140px, 1.4fr) 84px 72px 96px 104px 32px; gap: var(--sp-2); }
.li-head { padding: 0 var(--sp-2) 2px; font-size: var(--fs-2xs); font-weight: var(--fw-semibold); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-soft); }
.li-row input, .li-row select { min-height: 34px; padding: var(--sp-1) var(--sp-2); font-size: var(--fs-sm); }
.li-row .li-amount { font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.li-del { width: var(--control-h-sm); height: var(--control-h-sm); border-radius: var(--r-sm); }
.li-del .ico { width: 14px; height: 14px; }
.li-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }
.li-line-error { padding: var(--sp-1) var(--sp-2); color: var(--danger); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.li-row.has-error input { border-color: var(--danger-line); }

.notes-totals { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: var(--sp-4); align-items: start; }
.notes-col { display: grid; gap: var(--sp-3); align-content: start; }
.notes-totals .totals-preview { margin: 0; width: 100%; padding: var(--sp-3) var(--sp-4); }
.notes-totals .totals-preview .tp-row { font-size: var(--fs-sm); }
.notes-totals .totals-preview .tp-row.grand { font-size: var(--fs-lg); }

.doc-form .form-actions { margin: 0; padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--line-soft); background: var(--surface-2); }

@media (max-width: 1080px) {
    .li-head { display: none; }
    .li-row { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--sp-3); border: 1px solid var(--line-soft); border-radius: var(--r-md); }
    .li-row > div:nth-child(2) { grid-column: 1 / -1; }
}
@media (max-width: 860px) { .notes-totals { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------
   21. Messages
   ------------------------------------------------------------ */

.messages { position: fixed; right: var(--sp-5); top: calc(var(--topbar-h) + var(--sp-3)); z-index: 100; max-width: 430px; display: grid; gap: var(--sp-2); }
.message {
    border-radius: var(--r-md);
    box-shadow: var(--shadow-md);
    font-size: var(--fs-sm);
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text-body);
    padding: var(--sp-3) var(--sp-4);
}
.message.success { border-left: 3px solid var(--success); }
.message.error { border-left: 3px solid var(--danger); }
.message.warning { border-left: 3px solid var(--warning); }
.message.info { border-left: 3px solid var(--info); }

/* ------------------------------------------------------------
   22. Responsive
   ------------------------------------------------------------ */

@media (max-width: 1200px) {
    .metric-grid.five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .content-grid.three-two, .content-grid.two-one { grid-template-columns: minmax(0, 1fr); }
    .workflow-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .calendar-panel { order: -1; }
}

@media (max-width: 1180px) {
    .dash-row.thirds, .dash-row.donut-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .page-shell { padding: var(--sp-5) var(--sp-4) var(--sp-8); }
    .metric-grid.four, .metric-grid.five, .metric-grid.three, .metric-grid.six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .form-grid.two { grid-template-columns: minmax(0, 1fr); }
    .gateway-strip { overflow-x: auto; }
    .gateway-strip > div { min-width: 150px; }
    .workspace-nav { overflow-x: auto; width: 100%; }
    .workspace-more > div { position: fixed; left: var(--sp-5); right: var(--sp-5); top: auto; }
    .inline-form.multi { grid-template-columns: minmax(0, 1fr); }
    .workflow-sidebar { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 820px) {
    .dash-row.halves, .dash-row.thirds, .dash-row.donut-two { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
    .page-heading { display: grid; }
    .heading-actions { width: 100%; }
    .heading-actions .button { flex: 1; }
    .metric-grid.four, .metric-grid.five, .metric-grid.three, .metric-grid.six, .metric-grid.two { grid-template-columns: minmax(0, 1fr); }
    .metric-card { min-height: 86px; }
    .date-command-bar, .date-command-bar > div { display: grid; width: 100%; }
    .calendar-day { min-height: 54px; }
    .calendar-count { display: none; }
    .page-shell { padding: var(--sp-4) var(--sp-3) var(--sp-6); }
    .topbar { padding: 0 var(--sp-3); }
    .modal-card > form { padding: var(--sp-4); }
}

/* Printed-document letterhead mark. Falls back to the bundled default when
   no company logo has been uploaded (see apps/common/branding.py). */
.doc-logo { width: 54px; height: 54px; object-fit: contain; }

/* ------------------------------------------------------------
   23. Company & branding settings
   ------------------------------------------------------------ */

.section-note {
    margin: calc(-1 * var(--sp-2)) 0 var(--sp-4);
    font-size: var(--fs-sm);
    color: var(--text-soft);
    max-width: 62ch;
    line-height: var(--lh-body);
}

/* Shows what the sidebar will look like after saving, so the person
   uploading a logo can see the result before they commit to it. */
.brand-preview {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-4);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--brand-900);
}
.brand-preview__mark {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    background: var(--n-0);
    border-radius: var(--r-md);
    padding: var(--sp-1);
}
.brand-preview__mark img { max-width: 100%; max-height: 100%; object-fit: contain; }
.brand-preview > div { display: grid; gap: 2px; }
.brand-preview strong { color: var(--on-brand); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.brand-preview span {
    color: var(--on-brand-muted);
    font-size: var(--fs-2xs);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
}
.brand-preview small { color: var(--on-brand-muted); font-size: var(--fs-2xs); margin-top: var(--sp-1); }

.colour-row { display: flex; align-items: center; gap: var(--sp-3); }
.colour-input {
    width: 52px !important;
    min-height: var(--control-h);
    padding: var(--sp-1);
    cursor: pointer;
}
.colour-hint { font-size: var(--fs-2xs); color: var(--text-muted); font-weight: var(--fw-regular); text-transform: none; letter-spacing: 0; }

/* Django's ClearableFileInput renders "Currently: <a>...</a> Clear" as loose
   text. Give it room so it does not collide with the input under it. */
.field-grid input[type=file] {
    padding: var(--sp-2);
    background: var(--n-25);
    border-style: dashed;
    cursor: pointer;
}
.field-grid a { font-size: var(--fs-xs); }

/* ------------------------------------------------------------
   24. Receivables ageing

   Five buckets, one shape: an uppercase label above a tabular figure.
   Only the label carries the overdue colour -- colouring the figure too
   would make four of five numbers red and stop red meaning anything.
   ------------------------------------------------------------ */

.aging-buckets > div {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    padding-right: var(--sp-3);
    border-right: 1px solid var(--line);
}
.aging-buckets > div:last-child { border-right: 0; }

.aging-buckets span {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    color: var(--text-soft);
}
.aging-buckets .cur span { color: var(--text-soft); }
.aging-buckets .ov span { color: var(--danger); }

.aging-buckets strong {
    font-size: var(--fs-xl);
    font-weight: var(--fw-semibold);
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 1100px) {
    .aging-buckets { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; row-gap: var(--sp-4); }
    .aging-buckets > div:nth-child(3n) { border-right: 0; }
}
@media (max-width: 700px) {
    .aging-buckets { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .aging-buckets > div { border-right: 0; }
}

/* A compact empty row inside a nested sub-table (line items, payments on a
   document) stays a single muted line -- the full empty-state component
   would outweigh the card holding it. The full component is for page-level
   lists, where the table IS the page. */
td.muted, td[colspan].muted {
    color: var(--text-muted) !important;
    text-align: center;
    padding: var(--sp-5) var(--sp-3);
    font-size: var(--fs-sm);
}

/* ------------------------------------------------------------
   25. Mobile navigation

   The sidebar is a fixed 264px column. Below 900px that left about
   110px for the page beside it, which is what made every screen look
   broken on a phone. It now slides off-canvas and comes back on a
   toggle. Above 900px none of this applies and the toggle is hidden,
   so the desktop shell is untouched.
   ------------------------------------------------------------ */

.nav-toggle {
    display: none;
    width: var(--control-h);
    height: var(--control-h);
    margin-right: var(--sp-2);
    place-items: center;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--text-body);
    cursor: pointer;
}
.nav-toggle:hover { background: var(--n-50); }
.nav-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.nav-toggle .ico { width: 18px; height: 18px; }

@media (max-width: 900px) {
    .nav-toggle { display: grid; }

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 60;
        width: min(var(--sidebar-w), 82vw);
        transform: translateX(-100%);
        transition: transform 180ms var(--ease);
        overflow-y: auto;
    }

    .app-shell.nav-open .sidebar { transform: translateX(0); }

    /* Scrim. Sits under the drawer and over the page, and is inert until
       the drawer opens so it never swallows a tap on the closed shell. */
    .app-shell:before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 55;
        background: rgba(12, 30, 44, .45);
        opacity: 0;
        visibility: hidden;
        transition: opacity 180ms var(--ease), visibility 180ms var(--ease);
    }
    .app-shell.nav-open:before { opacity: 1; visibility: visible; }

    /* With the sidebar out of flow, the page takes the full width. */
    .main, .auth-main { width: 100%; min-width: 0; }

    .topbar { padding: 0 var(--sp-3); gap: var(--sp-2); }
    /* The module name is the first thing to go when space is tight; the
       page heading underneath already says where the user is. */
    .topbar-center { display: none; }
    .topbar-id strong { font-size: var(--fs-xs); }
}

@media (max-width: 560px) {
    /* Keep the logout affordance, drop its label. */
    .topbar > .button.ghost { font-size: 0; gap: 0; padding: 0 var(--sp-2); }
    .topbar > .button.ghost .ico { width: 18px; height: 18px; }
}

/* ------------------------------------------------------------
   26. Flow utilities

   A deliberately small set, for one-off spacing between blocks in a
   page. They exist because 147 inline style attributes were doing this
   job with values off the scale -- 22px, 18px, 14px, 10px. Anything
   that repeats across screens belongs in a component rule above, not
   here; this is not a utility framework and should not grow into one.
   ------------------------------------------------------------ */

.m-0  { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mb-0 { margin-bottom: 0 !important; }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-5 { margin-bottom: var(--sp-5); }
.mb-6 { margin-bottom: var(--sp-6); }
.ml-auto { margin-left: auto; }

.pad-3 { padding: var(--sp-3); }
.pad-4 { padding: var(--sp-4); }
.pad-8 { padding: var(--sp-8); }
/* A card body whose last child already carries its own bottom spacing. */
.pad-card-top { padding: var(--sp-3) var(--sp-4) 0; }
.pad-row { padding: var(--sp-3) var(--sp-4); }

/* Preserve the line breaks a user typed into a textarea. */
.pre-line { white-space: pre-line; }

.self-center { align-self: center; }
.span-full { grid-column: 1 / -1; }

/* Reading widths for prose and short forms. */
.w-prose { max-width: 680px; }
.w-form  { max-width: 760px; }

/* Small print that still clears the 11px floor. */
.note-sm { font-size: var(--fs-2xs); font-weight: var(--fw-medium); }

.strong { font-weight: var(--fw-semibold); }

/* Small one-offs that earn a name rather than an inline declaration. */
.ico-sm { width: 13px; height: 13px; }
.col-index { width: 44px; }
.input-note { min-width: 130px; }
.input-wide { min-width: 240px; }
/* The icon sprite: present in the document, never painted. */
.icon-sprite { position: absolute; width: 0; height: 0; }

/* ------------------------------------------------------------
   27. KPI card — the Accounting/HR/Assets variant

   This was the third KPI shape in the app: its own padding, its own
   type sizes, a 4px bar painted on every card in one of four
   decorative colours, and an icon tinted brand-blue regardless of what
   the figure meant.

   Rather than rewrite 39 blocks of markup across 11 templates, the
   component is redefined here to match .metric-card exactly, so the two
   render as one thing. The colour modifiers keep the meaning they
   actually had and lose the ones they did not:

     .red   -> danger   (Overflow, Total Expenses — a bad number)
     .amber -> warning  (Pending, Receivables — needs attention)
     .green -> success  (Disbursed, Approved — settled)
     .teal  -> no bar   (Advance amount, Sales — just a fact)
   ------------------------------------------------------------ */

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
}

.kpi {
    position: relative;
    padding: var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    min-height: 104px;
}

/* No bar by default. A colour that decorates is a bug. */
.kpi::before { content: none; }

.kpi.green::before,
.kpi.amber::before,
.kpi.red::before,
.kpi.danger::before,
.kpi.warning::before,
.kpi.success::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
}
.kpi.green::before, .kpi.success::before { background: var(--success); }
.kpi.amber::before, .kpi.warning::before { background: var(--warning); }
.kpi.red::before, .kpi.danger::before { background: var(--danger); }
.kpi.teal::before { content: none; }

.kpi-head {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--text-soft);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--track-caps);
    margin-bottom: var(--sp-2);
}

/* The icon takes the card's meaning, not a fixed accent. */
.kpi-head .ico { width: 15px; height: 15px; color: var(--text-muted); }
.kpi.green .kpi-head .ico, .kpi.success .kpi-head .ico { color: var(--success); }
.kpi.amber .kpi-head .ico, .kpi.warning .kpi-head .ico { color: var(--warning); }
.kpi.red .kpi-head .ico, .kpi.danger .kpi-head .ico { color: var(--danger); }

.kpi-value {
    margin: 0;
    color: var(--text);
    font-size: var(--fs-3xl);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.kpi.red .kpi-value, .kpi.danger .kpi-value { color: var(--danger); }

.kpi-value .cur {
    font-size: var(--fs-lg);
    font-weight: var(--fw-medium);
    color: var(--text-muted);
    margin-right: 2px;
}

.kpi-sub {
    margin-top: var(--sp-2);
    color: var(--text-muted);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-regular);
    line-height: var(--lh-snug);
}

.kpi-clickable { cursor: pointer; user-select: none; transition: box-shadow var(--dur) var(--ease); }
.kpi-clickable:hover { box-shadow: var(--shadow-md); transform: none; }
.kpi-clickable:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ------------------------------------------------------------
   28. Breadcrumb

   Now the only thing naming the location, since the static eyebrow that
   repeated the first crumb has gone. It carries the trail; the h1 under
   it carries the record. The last crumb is the current page and is not
   a link, so it reads as where you are rather than somewhere to go.
   ------------------------------------------------------------ */

.breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin: 0 0 var(--sp-2);
    color: var(--text-muted);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
}

.breadcrumb a {
    color: var(--text-soft);
    font-weight: var(--fw-medium);
    text-decoration: none;
}
.breadcrumb a:hover { color: var(--accent); text-decoration: underline; }

/* The separators the templates emit as bare <span>/</span>. */
.breadcrumb > span { color: var(--n-400); font-weight: var(--fw-regular); }

/* With the eyebrow gone the heading sits directly under the trail. */
.breadcrumb + .page-heading h1,
.breadcrumb + section.page-heading h1 { margin-top: 0; }

/* .danger-solid had drifted into meaning "a red button" and was applied to
   creating a purchase invoice, clocking out and approving an absence. The
   call sites are fixed; the class now resolves to the outline danger
   treatment so any that reappear cannot paint a solid red control into a
   list row. Solid red stays for the confirm step inside a dialog, which is
   .button.danger.solid. */
.button.danger-solid {
    background: var(--surface);
    border-color: var(--danger-line);
    color: var(--danger);
}
.button.danger-solid:hover { background: var(--danger-bg); border-color: var(--danger); }

/* A compact dashboard table ellipsises its cells so it fits a narrow card
   without scrolling sideways. That works beside a chart on a laptop; on a
   phone five columns in ~340px truncates every header to nothing, so the
   table stops saying anything at all. Below 900px it goes back to scrolling,
   which at least shows the data. */
@media (max-width: 900px) {
    .tablecard.compact table { table-layout: auto; min-width: 520px; }
    .tablecard.compact .table-scroll { overflow-x: auto; }
    .tablecard.compact td,
    .tablecard.compact th { overflow: visible; text-overflow: clip; }
}