/* ============================================================
   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); }

/* One saved address in the company address book. Boxed so several of them
   stacked in a form read as separate records rather than one long grid. */
.address-row {
    border: 1px solid var(--line);
    border-radius: var(--radius, 8px);
    padding: var(--sp-3);
    margin-bottom: var(--sp-3);
    background: var(--surface);
}

/* A checkbox reads as a checkbox only when its label sits beside it, not
   above it the way every other field in .field-grid is laid out. */
.inline-check {
    display: flex !important;   /* .field-grid label is a grid; a checkbox needs a row */
    align-items: center;
    gap: var(--sp-2);
}
.inline-check input[type="checkbox"] { width: auto; margin: 0; }
.inline-check.danger { color: var(--danger); }

/* A gated action stays in place rather than disappearing, so the row does not
   reflow as documents get approved and the reason is one hover away. */
.button.is-disabled {
    opacity: .45;
    cursor: not-allowed;
    background: var(--surface);
    color: var(--muted);
}

.icon-btn.is-disabled {
    opacity: .38;
    cursor: not-allowed;
    pointer-events: auto;
}
.icon-btn.is-disabled:hover { background: var(--surface); border-color: var(--line); }

/* 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;
    /* "More" is the last item in the nav, so a panel anchored to its left
       edge runs off the right of the viewport and clips its own longest
       label. Hanging it leftwards from the trigger keeps it on screen. */
    right: 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; }
/* span-4 and span-5 were used in templates but never defined, so both
   collapsed to the default span-4 and the intended layouts never appeared. */
.field-grid > .span-4 { grid-column: span 4; }
.field-grid > .span-5 { grid-column: span 5; }
.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;
}
/* A checkbox has an intrinsic size. Without this it inherits the field
   styling that stretches a text input to fill its grid cell, and renders as
   a 260px-wide square -- which is what a boolean in a field-grid form looked
   like before. */
.field-grid input[type=checkbox] {
    width: 16px;
    height: 16px;
    min-height: 0;
    justify-self: start;
    accent-color: var(--accent);
}

.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; }
}

/* ------------------------------------------------------------
   29. CRM — funnel, pipeline, diary, KPI board

   Colour here is load-bearing, never decorative. The stage ramp
   (--crm-s0..s3 in tokens.css) is a sequence: the same deal moving
   right through the funnel gets warmer as it nears a decision. A
   colour is used in exactly one of three ways on these pages:

     * stage      -- position in the funnel (the ramp)
     * outcome    -- won / lost, went well / went badly (status pair)
     * provenance -- whether a KPI row is CRM activity or accounting
                     money (a rule and a caption, not a hue)

   Nothing on a CRM page is tinted to look lively.
   ------------------------------------------------------------ */

/* ---- Stage chips ------------------------------------------- */
.stage-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    border-radius: var(--r-pill);
    padding: var(--sp-1) var(--sp-2);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    white-space: nowrap;
    background: var(--n-100);
    color: var(--text-body);
}
.stage-chip:before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--n-400); }
.stage-chip.s0:before { background: var(--crm-s0); }
.stage-chip.s1:before { background: var(--crm-s1); }
.stage-chip.s2:before { background: var(--crm-s2); }
.stage-chip.s3:before { background: var(--crm-s3); }
.stage-chip.won:before  { background: var(--crm-won); }
.stage-chip.lost:before { background: var(--crm-lost); }
.stage-chip.s1 { background: color-mix(in srgb, var(--crm-s1) 12%, var(--n-0)); color: var(--crm-s1); }
.stage-chip.s2 { background: color-mix(in srgb, var(--crm-s2) 12%, var(--n-0)); color: var(--crm-s2); }
.stage-chip.s3 { background: var(--warning-bg); color: var(--warning); }
.stage-chip.won  { background: var(--success-bg); color: var(--success); }
.stage-chip.lost { background: var(--danger-bg); color: var(--danger); }

/* ---- The funnel --------------------------------------------
   Bars are measured against the widest stage, not the total: a funnel
   is a sequence of survivors, and drawing each stage as a share of the
   whole makes a healthy pipeline look like a collapsing one. */
.funnel { display: grid; gap: var(--sp-2); }
.funnel-row { display: grid; grid-template-columns: 128px minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; }
.funnel-row > .funnel-label { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-body); }
.funnel-row > .funnel-label small { display: block; font-size: var(--fs-2xs); font-weight: var(--fw-regular); color: var(--text-muted); }
.funnel-track { background: var(--n-100); border-radius: var(--r-sm); height: 26px; overflow: hidden; }
.funnel-fill {
    height: 100%;
    border-radius: var(--r-sm);
    display: flex;
    align-items: center;
    padding: 0 var(--sp-2);
    color: var(--on-brand);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    min-width: 34px;
    transition: width var(--dur) var(--ease);
}
.funnel-fill.s0 { background: var(--crm-s0); }
.funnel-fill.s1 { background: var(--crm-s1); }
.funnel-fill.s2 { background: var(--crm-s2); }
.funnel-fill.s3 { background: var(--crm-s3); }
.funnel-fill.won { background: var(--crm-won); }
.funnel-row > .funnel-value { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text); font-variant-numeric: tabular-nums; text-align: right; min-width: 96px; }

/* ---- Pipeline board ---------------------------------------- */
.pipeline { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(228px, 1fr); gap: var(--sp-3); overflow-x: auto; padding-bottom: var(--sp-2); align-items: start; }
.pipe-col { background: var(--n-50); border: 1px solid var(--line); border-radius: var(--r-lg); min-width: 0; }
.pipe-head { padding: var(--sp-3); border-bottom: 1px solid var(--line); border-top: 3px solid var(--n-300); border-radius: var(--r-lg) var(--r-lg) 0 0; }
.pipe-head.s0 { border-top-color: var(--crm-s0); }
.pipe-head.s1 { border-top-color: var(--crm-s1); }
.pipe-head.s2 { border-top-color: var(--crm-s2); }
.pipe-head.s3 { border-top-color: var(--crm-s3); }
.pipe-head.won { border-top-color: var(--crm-won); }
.pipe-head > strong { display: block; font-size: var(--fs-sm); color: var(--text); }
.pipe-head > span { display: block; margin-top: 2px; font-size: var(--fs-2xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pipe-body { display: grid; gap: var(--sp-2); padding: var(--sp-2); max-height: 620px; overflow-y: auto; }

.deal-card { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-3); text-decoration: none; box-shadow: var(--shadow-sm); }
.deal-card:hover { border-color: var(--brand-500); }
.deal-card > strong { display: block; font-size: var(--fs-sm); color: var(--text); line-height: var(--lh-snug); }
.deal-card > .deal-co { display: block; margin-top: 2px; font-size: var(--fs-2xs); color: var(--text-soft); }
.deal-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-top: var(--sp-2); }
.deal-meta b { font-size: var(--fs-xs); color: var(--text); font-variant-numeric: tabular-nums; }
.deal-flags { display: flex; gap: var(--sp-1); margin-top: var(--sp-2); flex-wrap: wrap; }
.deal-flag { font-size: var(--fs-2xs); font-weight: var(--fw-semibold); border-radius: var(--r-sm); padding: 1px var(--sp-1); background: var(--n-100); color: var(--text-soft); }
.deal-flag.warn { background: var(--warning-bg); color: var(--warning); }
.deal-flag.late { background: var(--danger-bg); color: var(--danger); }

/* ---- Target attainment ------------------------------------- */
.target-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(140px, 1fr) auto; gap: var(--sp-3); align-items: center; padding: var(--sp-3) 0; border-bottom: 1px solid var(--line-soft); }
.target-row:last-child { border-bottom: 0; }
.target-who { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.target-who > div { min-width: 0; }
.target-who strong { display: block; font-size: var(--fs-sm); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.target-who span { display: block; font-size: var(--fs-2xs); color: var(--text-muted); }
.target-bar { background: var(--n-100); border-radius: var(--r-pill); height: 8px; overflow: hidden; }
.target-bar > i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--n-400); }
.target-bar > i.success { background: var(--success); }
.target-bar > i.warning { background: var(--warning); }
.target-bar > i.danger  { background: var(--danger); }
.target-figures { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.target-figures strong { display: block; font-size: var(--fs-sm); color: var(--text); }
.target-figures span { display: block; font-size: var(--fs-2xs); color: var(--text-muted); }
.target-pct { font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.target-pct.success { color: var(--success); }
.target-pct.warning { color: var(--warning); }
.target-pct.danger  { color: var(--danger); }

/* ---- Weekly KPI board --------------------------------------
   Same shape as the accounting cash-flow matrix: measures down the
   side, periods across the top. The provenance rule is the point of
   the design -- rows without it are CRM activity, rows with it are
   money read from Accounting, and the two must never be mistaken for
   one another. */
.kpi-matrix { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.kpi-matrix th, .kpi-matrix td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line-soft); text-align: right; white-space: nowrap; }
.kpi-matrix th:first-child, .kpi-matrix td:first-child { text-align: left; position: sticky; left: 0; background: var(--surface); z-index: 1; }
.kpi-matrix thead th { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--text-soft); font-weight: var(--fw-semibold); border-bottom: 1px solid var(--line); }
.kpi-matrix td { font-size: var(--fs-sm); color: var(--text-body); }
.kpi-matrix td:first-child { font-weight: var(--fw-medium); color: var(--text); }
.kpi-matrix .kpi-src { display: block; font-size: var(--fs-2xs); font-weight: var(--fw-regular); color: var(--text-muted); }
.kpi-matrix tr.from-accounts td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.kpi-matrix tr.money td { font-weight: var(--fw-semibold); color: var(--text); }
.kpi-matrix td.zero { color: var(--n-400); }
.kpi-matrix td.total, .kpi-matrix th.total { background: var(--n-25); font-weight: var(--fw-semibold); color: var(--text); }
.kpi-matrix tbody tr:hover td { background: var(--n-25); }

.provenance { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.provenance > span { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-2xs); color: var(--text-soft); }
.provenance i { width: 3px; height: 14px; border-radius: 2px; background: var(--n-300); }
.provenance i.accounts { background: var(--accent); }

/* ---- Meeting week ------------------------------------------ */
.week-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--sp-2); }
.week-day { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); min-height: 132px; display: flex; flex-direction: column; min-width: 0; }
.week-day.today { border-color: var(--accent); box-shadow: inset 0 2px 0 var(--accent); }
.week-day.weekend { background: var(--n-25); }
.week-head { padding: var(--sp-2); border-bottom: 1px solid var(--line-soft); display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-1); }
.week-head strong { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--text-soft); }
.week-head span { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text); }
.week-day.today .week-head span { color: var(--accent); }
.week-items { display: grid; gap: var(--sp-1); padding: var(--sp-2); align-content: start; }
.week-add { margin: auto var(--sp-2) var(--sp-2); font-size: var(--fs-2xs); color: var(--text-muted); text-decoration: none; border: 1px dashed var(--line-strong); border-radius: var(--r-sm); padding: var(--sp-1); text-align: center; }
.week-add:hover { color: var(--accent); border-color: var(--brand-500); }

.meet-chip { display: block; text-decoration: none; border-radius: var(--r-sm); padding: var(--sp-1) var(--sp-2); background: var(--n-50); border-left: 3px solid var(--n-400); min-width: 0; }
.meet-chip:hover { background: var(--n-100); }
.meet-chip b { display: block; font-size: var(--fs-2xs); color: var(--text); font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meet-chip span { display: block; font-size: var(--fs-2xs); color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meet-chip.success { border-left-color: var(--success); background: var(--success-bg); }
.meet-chip.danger  { border-left-color: var(--danger); background: var(--danger-bg); }
.meet-chip.info    { border-left-color: var(--info); background: var(--info-bg); }
.meet-chip.unreported { border-left-color: var(--warning); background: var(--warning-bg); }

/* ---- Product demand ----------------------------------------
   Three separate measures, never blended into one score: interest says
   what to talk about, quoted says what is being priced, won says what
   actually sells. A product high on the first and absent from the third
   is the most useful row on the page. */
.demand-row { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: var(--sp-3); align-items: center; padding: var(--sp-2) 0; border-bottom: 1px solid var(--line-soft); }
.demand-row:last-child { border-bottom: 0; }
.demand-row strong { font-size: var(--fs-sm); color: var(--text); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demand-row span { font-size: var(--fs-2xs); color: var(--text-muted); }
.demand-bar { background: var(--n-100); border-radius: var(--r-pill); height: 6px; margin-top: var(--sp-1); overflow: hidden; }
.demand-bar > i { display: block; height: 100%; background: var(--crm-s2); border-radius: var(--r-pill); }
.demand-figures { text-align: right; font-variant-numeric: tabular-nums; }
.demand-figures b { display: block; font-size: var(--fs-sm); color: var(--text); }
.demand-figures em { display: block; font-style: normal; font-size: var(--fs-2xs); color: var(--text-muted); }

/* ---- Whose numbers are on screen ---------------------------
   Says it plainly. Somebody looking at a screenshot of this page needs
   to know whether it is the whole company or one person. */
.scope-note { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-2xs); color: var(--text-soft); background: var(--n-50); border: 1px solid var(--line); border-radius: var(--r-pill); padding: var(--sp-1) var(--sp-3); }
.scope-note .ico { width: 13px; height: 13px; color: var(--text-muted); }

/* ---- Quotation builder ------------------------------------- */
.quote-lines { width: 100%; border-collapse: collapse; }
.quote-lines th { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--text-soft); text-align: left; padding: var(--sp-2); border-bottom: 1px solid var(--line); }
.quote-lines td { padding: var(--sp-2); border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.quote-lines input, .quote-lines select { width: 100%; }
.quote-lines td.num input { text-align: right; }
.quote-total { display: grid; gap: var(--sp-1); margin-left: auto; max-width: 320px; }
.quote-total > div { display: flex; justify-content: space-between; gap: var(--sp-4); font-size: var(--fs-sm); color: var(--text-body); }
.quote-total > div.grand { border-top: 1px solid var(--line-strong); padding-top: var(--sp-2); font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--text); }

@media (max-width: 900px) {
    .funnel-row { grid-template-columns: 96px minmax(0, 1fr); }
    .funnel-row > .funnel-value { grid-column: 2; text-align: left; min-width: 0; }
    .target-row { grid-template-columns: minmax(0, 1fr) auto; }
    .target-row > .target-bar { grid-column: 1 / -1; }
    .week-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .week-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------
   30. HR documentation and policy bulletin
   ------------------------------------------------------------ */

/* ---- Segmented tabs ---------------------------------------
   A second level below the workspace nav, for a page that has
   three faces rather than three destinations. Visually quieter
   than the nav above it, so the hierarchy reads top-down. */
.seg-tabs {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    background: var(--n-100);
    border-radius: var(--r-md);
    flex-wrap: wrap;
}
.seg-tabs > a {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-sm);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--text-soft);
    text-decoration: none;
    white-space: nowrap;
}
.seg-tabs > a .ico { width: 14px; height: 14px; }
.seg-tabs > a:hover { color: var(--text); }
.seg-tabs > a.on {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-sm);
}

/* ---- Employee document browser -----------------------------
   People on the left, their documents on the right. One long
   table of everybody is unusable at the moment it matters,
   which is somebody asking for one person's PAN copy on a call. */
.doc-split {
    display: grid;
    grid-template-columns: minmax(0, 270px) minmax(0, 1fr);
    gap: var(--sp-4);
    align-items: start;
}
.doc-main { min-width: 0; display: grid; gap: 0; }
.doc-people { position: sticky; top: var(--sp-4); }
.doc-people-list { max-height: 560px; overflow-y: auto; padding: 0 var(--sp-2) var(--sp-2); display: grid; gap: 2px; }

.doc-person {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2);
    border-radius: var(--r-sm);
    text-decoration: none;
    color: var(--text-body);
}
.doc-person:hover { background: var(--n-50); }
.doc-person.on { background: var(--brand-050); box-shadow: inset 2px 0 0 var(--accent); }
.doc-person .avatar { width: 28px; height: 28px; min-width: 28px; font-size: var(--fs-2xs); }
.doc-person-name { min-width: 0; }
.doc-person-name strong { display: block; font-size: var(--fs-sm); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-person-name small { display: block; font-size: var(--fs-2xs); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.doc-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* ---- Generator cards --------------------------------------- */
.doc-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--sp-3);
}
.doc-card {
    display: grid;
    gap: var(--sp-2);
    align-content: start;
    padding: var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    min-height: 132px;
}
.doc-card:hover { border-color: var(--brand-500); box-shadow: var(--shadow-md); }
.doc-card-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--r-md);
    background: var(--brand-050);
    color: var(--accent);
    display: grid;
    place-items: center;
}
.doc-card-icon .ico { width: 17px; height: 17px; }
.doc-card > strong { font-size: var(--fs-md); color: var(--text); }
.doc-card > span { font-size: var(--fs-xs); color: var(--text-soft); line-height: var(--lh-snug); }

/* ---- Reading a policy --------------------------------------
   Wider leading and a measure capped near 75 characters: this is
   the one screen in the app somebody actually reads rather than
   scans, and table typography makes prose hard work. */
.policy-body { max-width: 74ch; }
.policy-body p { font-size: var(--fs-md); line-height: var(--lh-body); color: var(--text-body); margin: 0 0 var(--sp-3); }
.policy-body ul { margin: 0 0 var(--sp-3); padding-left: var(--sp-5); display: grid; gap: var(--sp-2); }
.policy-body li { font-size: var(--fs-md); line-height: var(--lh-body); color: var(--text-body); }
.policy-body li::marker { color: var(--accent); }
.policy-lede {
    font-size: var(--fs-lg) !important;
    line-height: var(--lh-snug) !important;
    color: var(--text) !important;
    padding-left: var(--sp-3);
    border-left: 3px solid var(--accent);
}

@media (max-width: 900px) {
    .doc-split { grid-template-columns: minmax(0, 1fr); }
    .doc-people { position: static; }
    .doc-people-list { max-height: 260px; }
}

/* A reading column and a details rail. Not `.dash-row halves`: that stretches
   both cards to the tallest, which turned the details panel into two tables
   fighting over one scroll area and clipped the last rows. */
.policy-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
    gap: var(--sp-4);
    align-items: start;
    margin-bottom: var(--sp-4);
}
.policy-layout > * { min-width: 0; }
.policy-layout .table-scroll { overflow-x: auto; }
@media (max-width: 900px) {
    .policy-layout { grid-template-columns: minmax(0, 1fr); }
}

/* Sibling policies in the narrow rail. Links, not table rows: a title has to
   be allowed to wrap onto a second line rather than be clipped. */
.related-list { display: grid; gap: var(--sp-1); }
.related-list > a {
    display: block;
    padding: var(--sp-2);
    border-radius: var(--r-sm);
    text-decoration: none;
    color: var(--text-body);
}
.related-list > a:hover { background: var(--n-50); }
.related-list strong { display: block; font-size: var(--fs-sm); color: var(--text); line-height: var(--lh-snug); }
.related-list small { display: block; font-size: var(--fs-2xs); color: var(--text-muted); margin-top: 2px; }

/* A short list inside an alert: tight enough to read as part of the sentence
   above it rather than as a separate block. */
.tight-list { margin: 6px 0 0; padding-left: 18px; }
.tight-list li { margin: 2px 0; }

/* ------------------------------------------------------------
   Production gateways, made visual
   ------------------------------------------------------------ */

/* The five gates as a rail rather than five words. The filled portion is how
   far this order has actually travelled, so the shape of the page answers
   "where is it" before any text is read. */
.gate-rail {
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0;
    margin: var(--sp-4) 0 var(--sp-5);
    padding-top: 26px;
}
.gate-rail::before,
.gate-rail::after {
    content: "";
    position: absolute;
    top: 12px;
    height: 4px;
    border-radius: 2px;
}
.gate-rail::before { left: 10%; right: 10%; background: var(--n-200, #e2e8ea); }
.gate-rail::after {
    left: 10%;
    width: calc((80%) * var(--gate-progress, 0));
    background: linear-gradient(90deg, #1f7a8c, #268e57);
    transition: width .35s ease;
}
.gate-rail__step { position: relative; text-align: center; }
.gate-rail__dot {
    position: absolute;
    top: -26px; left: 50%;
    transform: translateX(-50%);
    width: 26px; height: 26px;
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: 12px; font-weight: 700;
    background: var(--surface, #fff);
    border: 2px solid var(--n-300, #cbd5d8);
    color: var(--text-muted, #6b7a83);
}
.gate-rail__step.is-done .gate-rail__dot { background: #268e57; border-color: #268e57; color: #fff; }
.gate-rail__step.is-current .gate-rail__dot {
    background: #1f7a8c; border-color: #1f7a8c; color: #fff;
    box-shadow: 0 0 0 4px rgba(31, 122, 140, .18);
}
.gate-rail__label { font-size: 11px; line-height: 1.3; color: var(--text-muted, #6b7a83); }
.gate-rail__step.is-current .gate-rail__label { color: var(--text, #12343b); font-weight: 700; }

/* How the whole workshop is distributed across the gates: one bar, five
   segments, width proportional to how many orders sit in each. */
.gate-spread { display: flex; height: 30px; border-radius: 6px; overflow: hidden; margin-bottom: var(--sp-4); }
.gate-spread__seg {
    display: grid; place-items: center;
    font-size: 11px; font-weight: 700; color: #fff;
    min-width: 0;
    text-decoration: none;
    transition: filter .12s ease;
}
.gate-spread__seg:hover { filter: brightness(1.12); }
.gate-spread__seg.g1 { background: #8a6d3b; }
.gate-spread__seg.g2 { background: #1f7a8c; }
.gate-spread__seg.g3 { background: #7a5ea8; }
.gate-spread__seg.g4 { background: #b8762e; }
.gate-spread__seg.g5 { background: #268e57; }
.gate-spread__seg.is-empty { background: var(--n-200, #e2e8ea); color: var(--text-muted, #6b7a83); }

/* ------------------------------------------------------------
   CRM standings: the weekly board as a scoreboard
   ------------------------------------------------------------ */

.score-board { display: grid; gap: var(--sp-3); padding: var(--sp-4); }
.score-row {
    display: grid;
    grid-template-columns: 44px 1fr 120px;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3);
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
}
.score-row.is-leader { border-color: #d4a017; box-shadow: 0 0 0 1px rgba(212, 160, 23, .25); }

.score-rank { text-align: center; }
.score-medal { font-size: 24px; line-height: 1; }
.score-pos { font-size: 15px; font-weight: 700; color: var(--text-muted); }

.score-head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.score-level {
    font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
    padding: 2px 8px; border-radius: 999px;
    background: rgba(31, 122, 140, .14); color: #1f7a8c;
}
.score-streak { font-size: 11px; color: #b8762e; font-weight: 600; }

/* Measured against the leader, so the block reads as a race rather than as
   a set of unrelated totals. */
.score-bar { height: 6px; border-radius: 3px; background: var(--n-200, #e2e8ea); margin: 8px 0 6px; overflow: hidden; }
.score-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #1f7a8c, #268e57); }

.score-meta { display: flex; flex-wrap: wrap; gap: var(--sp-3); font-size: 12px; color: var(--text-muted); }
.score-meta b { color: var(--text); }

.score-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.score-badge {
    font-size: 11px; padding: 2px 8px; border-radius: 999px;
    background: rgba(38, 142, 87, .12); color: #1d6b43;
}

.score-next { text-align: center; font-size: 11px; color: var(--text-muted); }
/* A ring rather than another bar: the row already has one, and two bars
   stacked read as one measurement split in half. */
.score-ring { width: 46px; height: 46px; transform: rotate(-90deg); }
.score-ring__track { fill: none; stroke: var(--n-200, #e2e8ea); stroke-width: 4; }
.score-ring__fill {
    fill: none; stroke: #1f7a8c; stroke-width: 4; stroke-linecap: round;
    /* r=16 gives a circumference of ~100, so dasharray is a percentage. */
    transition: stroke-dasharray .35s ease;
}
.score-maxed { color: #d4a017; font-weight: 700; }

@media (max-width: 720px) {
    .score-row { grid-template-columns: 36px 1fr; }
    .score-next { grid-column: 2; text-align: left; }
}

/* An onboarding step the system checks for itself. It reads as a tick box so
   the list stays one list, but it is not a control -- clicking it would do
   nothing, so it is not a button. */
.check-toggle.is-auto {
    cursor: default;
    opacity: .8;
    border-style: dashed;
}


/* ------------------------------------------------------------
   HSN / SAC suggestions
   ------------------------------------------------------------ */

/* A floating list under whichever HSN box has focus. Suggestions only: the
   box stays a text field, so a code the list does not know can still be
   typed. Appended to <body> so a scrolling line table cannot clip it. */
.hsn-suggest {
    position: absolute;
    z-index: 1200;
    max-height: 300px;
    overflow-y: auto;
    background: var(--surface, #fff);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(18, 52, 59, .16);
    padding: 4px;
}
.hsn-suggest__row {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    align-items: baseline;
    gap: 10px;
    padding: 7px 9px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12.5px;
}
.hsn-suggest__row b { font-variant-numeric: tabular-nums; color: var(--text); }
.hsn-suggest__row span { color: var(--text-muted); }
.hsn-suggest__row em {
    font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .04em;
    padding: 1px 6px; border-radius: 999px;
    background: rgba(31, 122, 140, .12); color: #1f7a8c;
}
.hsn-suggest__row:hover,
.hsn-suggest__row.is-active { background: rgba(31, 122, 140, .1); }