/* ============================================================================
   ERP Foundations — design-system.md primitives
   Loaded AFTER erp-shell.css. Adds new canonical patterns without disturbing
   legacy classes. Sections reference the design-system doc.
   ============================================================================ */

/* §5 / §22 — global focus ring + motion preference */
/* Tell browsers our app supports both color schemes so native widgets
   (date/time pickers, scrollbars, select dropdowns) follow the theme. */
:root { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }

*:focus { outline: none; }
*:focus-visible {
    outline: none;
    box-shadow: var(--ring);
    border-radius: var(--r-sm);
}

/* Any field-class input also follows tokens (covers the side sheet) */
.field input, .field select, .field textarea,
.toolbar-select, .chart-custom-field input,
input[type="date"], input[type="datetime-local"], input[type="time"],
input[type="email"], input[type="text"], input[type="number"],
input[type="password"], input[type="search"], input[type="tel"],
input[type="url"], select, textarea {
    background-color: var(--panel);
    color: var(--text);
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}

/* ----------------------------------------------------------------------------
   §4.4 — Tag / status pill (replaces .status-pill, .status-badge, .sales-status)
   ---------------------------------------------------------------------------- */
.tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    height: 22px;
    border-radius: var(--r-pill);
    background: var(--panel-subtle);
    color: var(--muted);
    border: 1px solid var(--line);
    font-size: var(--fs-xs);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    letter-spacing: 0.01em;
}
.tag--good { background: var(--tone-good-bg); color: var(--tone-good); border-color: transparent; }
.tag--bad  { background: var(--tone-bad-bg);  color: var(--tone-bad);  border-color: transparent; }
.tag--warn { background: var(--tone-warn-bg); color: var(--tone-warn); border-color: transparent; }
.tag--info { background: var(--tone-info-bg); color: var(--tone-info); border-color: transparent; }
.tag--primary { background: var(--primary-50); color: var(--primary-700); border-color: transparent; }
.tag .icon { width: 12px; height: 12px; }

/* ----------------------------------------------------------------------------
   §27 — Buttons (full spec: tones × sizes × shapes × states)
   ---------------------------------------------------------------------------- */
.button-primary, .button-secondary, .button-danger,
.button-success, .button-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 36px;
    padding: 0 16px;
    border-radius: var(--r-sm);
    font-family: var(--font-sans);
    font-size: var(--fs-md);
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--t-fast), color var(--t-fast),
                border-color var(--t-fast), box-shadow var(--t-fast),
                transform var(--t-fast);
}
/* Primary supersedes legacy .btn-primary look using new tokens */
.button-primary {
    background: var(--primary-600);
    color: var(--primary-fg);
    border: 1px solid transparent;
}
.button-secondary {
    background: var(--panel);
    color: var(--text);
    border: 1px solid var(--line);
}
.button-danger {
    background: var(--tone-bad);
    color: #fff;
    border: 1px solid transparent;
}
.button-success {
    background: var(--tone-good);
    color: #fff;
    border: 1px solid transparent;
}
.button-ghost {
    background: transparent;
    color: var(--muted);
    border: 1px solid transparent;
}
.button-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    color: var(--primary-600);
    border: none;
    padding: 0;
    height: auto;
    font-family: var(--font-sans);
    font-size: var(--fs-md);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: color var(--t-fast);
}

/* Hover/focus/active states — wrapped in (hover: hover) for touch parity */
@media (hover: hover) {
    .button-primary:hover   { background: var(--primary-700); }
    .button-secondary:hover { background: var(--panel-subtle); border-color: var(--line-strong); }
    .button-danger:hover    { background: color-mix(in srgb, var(--tone-bad) 88%, #000); }
    .button-success:hover   { background: color-mix(in srgb, var(--tone-good) 88%, #000); }
    .button-ghost:hover     { background: var(--panel-subtle); color: var(--text); }
    .button-link:hover      { color: var(--primary-700); text-decoration: underline; text-underline-offset: 2px; }
}
.button-primary:focus-visible,
.button-secondary:focus-visible,
.button-danger:focus-visible,
.button-success:focus-visible,
.button-ghost:focus-visible,
.button-link:focus-visible { box-shadow: var(--ring); outline: none; }

.button-primary:active, .button-secondary:active,
.button-danger:active, .button-success:active,
.button-ghost:active { transform: translateY(1px); }

.button-primary[disabled],   .button-primary[aria-disabled="true"],
.button-secondary[disabled], .button-secondary[aria-disabled="true"],
.button-danger[disabled],    .button-danger[aria-disabled="true"],
.button-success[disabled],   .button-success[aria-disabled="true"],
.button-ghost[disabled],     .button-ghost[aria-disabled="true"],
.button-link[disabled],      .button-link[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Sizes */
.button-primary.is-sm, .button-secondary.is-sm, .button-danger.is-sm,
.button-success.is-sm, .button-ghost.is-sm {
    height: 28px; padding: 0 10px; font-size: var(--fs-sm); gap: 6px;
}
.button-primary.is-lg, .button-secondary.is-lg, .button-danger.is-lg,
.button-success.is-lg, .button-ghost.is-lg {
    height: 44px; padding: 0 20px; font-weight: 700;
}

/* Shapes */
.button-primary.is-pill, .button-secondary.is-pill, .button-danger.is-pill,
.button-success.is-pill, .button-ghost.is-pill { border-radius: var(--r-pill); }

.button-primary.is-icon, .button-secondary.is-icon, .button-danger.is-icon,
.button-success.is-icon, .button-ghost.is-icon { width: 36px; padding: 0; }
.button-primary.is-icon.is-sm, .button-secondary.is-icon.is-sm,
.button-danger.is-icon.is-sm,  .button-success.is-icon.is-sm,
.button-ghost.is-icon.is-sm    { width: 28px; }
.button-primary.is-icon.is-lg, .button-secondary.is-icon.is-lg,
.button-danger.is-icon.is-lg,  .button-success.is-icon.is-lg,
.button-ghost.is-icon.is-lg    { width: 44px; }

/* Icons inside buttons always 16x16 */
.button-primary .icon, .button-secondary .icon, .button-danger .icon,
.button-success .icon, .button-ghost .icon, .button-link .icon {
    width: 16px; height: 16px; flex: 0 0 16px;
}

/* Loading state — spinner */
[data-loading] .icon-spinner { animation: erp-spin 0.9s linear infinite; }
@keyframes erp-spin { to { transform: rotate(360deg); } }

/* Segmented button group */
.button-group { display: inline-flex; gap: 0; }
.button-group > .button-secondary { border-radius: 0; border-right-width: 0; }
.button-group > .button-secondary:first-child {
    border-top-left-radius: var(--r-sm); border-bottom-left-radius: var(--r-sm);
}
.button-group > .button-secondary:last-child {
    border-top-right-radius: var(--r-sm); border-bottom-right-radius: var(--r-sm);
    border-right-width: 1px;
}
.button-group > .button-secondary[aria-checked="true"] {
    background: var(--primary-50);
    color: var(--primary-700);
    border-color: var(--primary-600);
    z-index: 1;
}

/* Icon-only utility (top bar, row actions) */
.icon-button {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    background: transparent;
    color: var(--muted);
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
}
@media (hover: hover) {
    .icon-button:hover { background: var(--panel-subtle); color: var(--text); }
}
.icon-button:focus-visible { box-shadow: var(--ring); outline: none; }

/* ----------------------------------------------------------------------------
   §15 — Flash banner (4 tones)
   ---------------------------------------------------------------------------- */
.flash-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    margin: 0 0 12px;
    border-radius: var(--r-md);
    background: var(--panel-subtle);
    border: 1px solid var(--line);
    color: var(--text);
}
.flash-banner .icon { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 2px; }
.flash-banner__msg  { flex: 1; }
.flash-banner__close {
    margin-left: auto;
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    border-radius: var(--r-sm);
    font-size: 18px;
    line-height: 1;
}
.flash-banner__close:focus-visible { box-shadow: var(--ring); outline: none; }
.flash-banner--good { background: var(--tone-good-bg); color: var(--tone-good); border-color: transparent; }
.flash-banner--bad  { background: var(--tone-bad-bg);  color: var(--tone-bad);  border-color: transparent; }
.flash-banner--warn { background: var(--tone-warn-bg); color: var(--tone-warn); border-color: transparent; }
.flash-banner--info { background: var(--tone-info-bg); color: var(--tone-info); border-color: transparent; }
.flash-banner ul { margin: 4px 0 0 18px; padding: 0; }

/* Legacy success/danger compatibility */
.flash-banner.success { background: var(--tone-good-bg); color: var(--tone-good); border-color: transparent; }
.flash-banner.danger  { background: var(--tone-bad-bg);  color: var(--tone-bad);  border-color: transparent; }

/* ----------------------------------------------------------------------------
   §15 — Toast stack
   ---------------------------------------------------------------------------- */
.toast-stack {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(360px, calc(100vw - 32px));
    pointer-events: none;
}
.toast {
    pointer-events: auto;
    background: var(--panel);
    border: 1px solid var(--line);
    border-left: 3px solid var(--muted);
    border-radius: var(--r-md);
    padding: 12px 14px;
    box-shadow: var(--shadow-lg);
    transform: translateX(8px);
    opacity: 0;
    transition: transform var(--t-base), opacity var(--t-base);
}
.toast.is-shown { transform: translateX(0); opacity: 1; }
.toast--good { border-left-color: var(--tone-good); }
.toast--bad  { border-left-color: var(--tone-bad); }
.toast--warn { border-left-color: var(--tone-warn); }
.toast--info { border-left-color: var(--tone-info); }
.toast__head { display: flex; align-items: center; gap: 8px; }
.toast__title { font-weight: 700; font-size: var(--fs-md); color: var(--text); flex: 1; }
.toast__body  { margin-top: 4px; color: var(--muted); font-size: var(--fs-sm); }
.toast__close {
    background: transparent; border: none; color: var(--muted);
    cursor: pointer; width: 24px; height: 24px; border-radius: var(--r-sm);
}
.toast__close:hover { background: var(--panel-subtle); color: var(--text); }

/* ----------------------------------------------------------------------------
   §17.1 — Tooltip ([data-tooltip])
   ---------------------------------------------------------------------------- */
[data-tooltip] { cursor: help; }
.erp-tooltip {
    position: fixed;
    z-index: 100;
    max-width: 240px;
    padding: 6px 10px;
    background: var(--brand-900);
    color: var(--brand-fg);
    font-size: var(--fs-xs);
    font-weight: 500;
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-lg);
    line-height: 1.4;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--t-fast);
}
.erp-tooltip.is-shown { opacity: 1; }

/* ----------------------------------------------------------------------------
   §23.3 — Sensitive field visibility toggle
   ---------------------------------------------------------------------------- */
.field-with-toggle {
    position: relative;
    display: flex;
    align-items: stretch;
}
.field-with-toggle input { flex: 1; padding-right: 40px; }
.field-toggle {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    background: transparent;
    border: none;
    color: var(--muted);
    cursor: pointer;
    border-radius: var(--r-sm);
}
.field-toggle:hover { color: var(--text); background: var(--panel-subtle); }
.field-toggle:focus-visible { box-shadow: var(--ring); outline: none; }
.field-toggle .icon-eye-off { display: none; }
.field-toggle[aria-pressed="true"] .icon-eye     { display: none; }
.field-toggle[aria-pressed="true"] .icon-eye-off { display: block; }

/* ----------------------------------------------------------------------------
   §26.3 — Side sheet (Edit / Create)
   ---------------------------------------------------------------------------- */
.side-sheet-backdrop {
    position: fixed; inset: 0; z-index: 55;
    background: rgba(15, 23, 42, 0.2);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-base);
}
.side-sheet-backdrop.is-shown { opacity: 1; pointer-events: auto; }
.side-sheet {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(560px, 100vw);
    background: var(--panel);
    border-left: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform var(--t-base);
    z-index: 60;
    display: grid;
    grid-template-rows: auto 1fr auto;
    /* Use dvh on mobile Safari so the bottom URL bar's appearance
       doesn't push the footer below the viewport. Falls back to 100vh
       on browsers that don't support dvh. */
    height: 100vh;
    height: 100dvh;
    /* Make absolutely sure the grid's 1fr child can shrink. */
    overflow: hidden;
}
.side-sheet.is-open { transform: translateX(0); }
.side-sheet__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
}
.side-sheet__head h2 { margin: 0; font-size: var(--fs-lg); }
.side-sheet__body {
    padding: 20px 20px 100px;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    /* iOS Safari needs momentum-scrolling enabled explicitly. */
    -webkit-overflow-scrolling: touch;
}
.side-sheet__foot {
    display: flex; gap: 8px; justify-content: flex-end;
    padding: 14px 20px;
    border-top: 1px solid var(--line);
    background: var(--panel-subtle);
}
@media (max-width: 720px) {
    .side-sheet { width: 100vw; }
}

/* Consistent form field styling — applies inside a side-sheet OR inside any
   element marked with .form-stack. Use .form-stack on regular page forms so
   they match the side-sheet treatment. */
.side-sheet .field,
.form-stack .field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.side-sheet .field__label,
.form-stack .field__label {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.side-sheet .field__req,
.form-stack .field__req {
    color: var(--tone-bad);
    font-style: normal;
}
.side-sheet .field > input:not([type="checkbox"]):not([type="radio"]),
.side-sheet .field > select,
.side-sheet .field > textarea,
.side-sheet .field > .field-with-toggle > input,
.form-stack .field > input:not([type="checkbox"]):not([type="radio"]),
.form-stack .field > select,
.form-stack .field > textarea,
.form-stack .field > .field-with-toggle > input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font: inherit;
    color: var(--text);
    background: var(--panel);
}
.side-sheet .field textarea,
.form-stack .field textarea { min-height: 96px; resize: vertical; }
.side-sheet .field-help,
.form-stack .field-help {
    font-size: var(--fs-xs);
    color: var(--muted);
    line-height: 1.4;
}

/* Legacy grids: bring inputs/selects/dates in line with design-system field treatment
   (thin border, panel background, focus ring) instead of the chunky native chrome. */
.purchase-filter-grid input,
.purchase-filter-grid select,
.purchase-filter-grid textarea,
.purchase-form-grid input,
.purchase-form-grid select,
.purchase-form-grid textarea,
.purchase-return-form input:not([type="checkbox"]):not([type="radio"]),
.purchase-return-form select,
.purchase-return-form textarea {
    width: 100%;
    padding: 8px 10px;
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--panel);
    color: var(--text);
    font: inherit;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
}
.purchase-filter-grid select,
.purchase-form-grid select,
.purchase-return-form select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%2364748b' d='M6 8 0 0h12z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 28px;
}
.purchase-filter-grid input[type="date"],
.purchase-form-grid input[type="date"],
.purchase-return-form input[type="date"] {
    padding-right: 8px;
}

/* ----------------------------------------------------------------------------
   §25.7 — Bulk action bar
   ---------------------------------------------------------------------------- */
.erp-bulk-bar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: none;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    background: var(--primary-50);
    border-bottom: 1px solid var(--primary-600);
    transform: translateY(-8px);
    opacity: 0;
    transition: transform var(--t-base), opacity var(--t-base);
}
.erp-bulk-bar.is-visible { display: grid; transform: translateY(0); opacity: 1; }
.erp-bulk-bar__count { color: var(--primary-700); font-weight: 600; }
.erp-bulk-bar__count strong { font-size: var(--fs-lg); margin-right: 4px; }
.erp-bulk-bar__select-more { color: var(--primary-700); font-size: var(--fs-sm); }
.erp-bulk-bar__select-more[hidden] { display: none; }
.erp-bulk-bar__actions { display: flex; gap: 8px; align-items: center; }

/* ----------------------------------------------------------------------------
   §28 — Tabs
   ---------------------------------------------------------------------------- */
.tabs--primary {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
    scrollbar-width: thin;
}
.tabs--primary > [role="tab"] {
    position: relative;
    padding: 12px 16px;
    background: transparent;
    border: none;
    color: var(--muted);
    font-weight: 600;
    font-size: var(--fs-md);
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--t-fast);
}
.tabs--primary > [role="tab"]:hover { color: var(--text); }
.tabs--primary > [role="tab"][aria-selected="true"] { color: var(--primary-600); }
.tabs--primary > [role="tab"][aria-selected="true"]::after {
    content: "";
    position: absolute;
    left: 8px; right: 8px; bottom: -1px;
    height: 2px;
    background: var(--primary-600);
    border-radius: 2px 2px 0 0;
}
.tab-count {
    display: inline-block;
    min-width: 20px;
    padding: 0 6px;
    margin-left: 6px;
    background: var(--panel-subtle);
    color: var(--muted);
    border-radius: var(--r-pill);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-align: center;
}
[role="tab"][aria-selected="true"] .tab-count {
    background: var(--primary-50);
    color: var(--primary-700);
}

.tabs--pill {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: var(--panel-subtle);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
}
.tabs--pill > [role="tab"] {
    padding: 6px 14px;
    background: transparent;
    border: none;
    color: var(--muted);
    font-weight: 600;
    font-size: var(--fs-sm);
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
}
.tabs--pill > [role="tab"][aria-selected="true"] {
    background: var(--panel);
    color: var(--text);
    box-shadow: var(--shadow);
}

.tabs-vertical { display: grid; grid-template-columns: 220px 1fr; gap: 24px; }
.tabs-vertical__rail [role="tab"] {
    display: block; width: 100%; text-align: left;
    padding: 10px 14px;
    background: transparent;
    border: none;
    border-left: 3px solid transparent;
    color: var(--muted);
    font-weight: 600;
    font-size: var(--fs-md);
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
}
.tabs-vertical__rail [role="tab"]:hover { color: var(--text); background: var(--panel-subtle); }
.tabs-vertical__rail [role="tab"][aria-selected="true"] {
    color: var(--primary-600);
    border-left-color: var(--primary-600);
    background: var(--primary-50);
}
@media (max-width: 720px) {
    .tabs-vertical { grid-template-columns: 1fr; }
    .tabs-vertical__rail { display: flex; overflow-x: auto; }
}

.tab-pane[hidden] { display: none; }

/* ----------------------------------------------------------------------------
   §24 — Sidebar collapsed rail + hover-expand overlay
   (additive — works alongside existing .erp-sidebar styles)
   ---------------------------------------------------------------------------- */
[data-sidebar-collapsed="1"] .erp-sidebar { width: 64px; }
[data-sidebar-collapsed="1"] .erp-sidebar .nav-children,
[data-sidebar-collapsed="1"] .erp-sidebar .pinned-section-label,
[data-sidebar-collapsed="1"] .erp-sidebar .nav-pin-btn,
[data-sidebar-collapsed="1"] .erp-sidebar .erp-brand span,
[data-sidebar-collapsed="1"] .erp-sidebar summary b,
[data-sidebar-collapsed="1"] .erp-sidebar nav span:not(.nav-icon),
[data-sidebar-collapsed="1"] .erp-sidebar .pinned-section a span:not(.nav-icon) {
    opacity: 0;
    visibility: hidden;
    width: 0;
    overflow: hidden;
    white-space: nowrap;
}
@media (hover: hover) {
    [data-sidebar-collapsed="1"] .erp-sidebar:hover,
    [data-sidebar-collapsed="1"] .erp-sidebar:focus-within {
        width: 264px;
        box-shadow: var(--shadow-lg);
        z-index: 50;
    }
    [data-sidebar-collapsed="1"] .erp-sidebar:hover .nav-children,
    [data-sidebar-collapsed="1"] .erp-sidebar:hover .pinned-section-label,
    [data-sidebar-collapsed="1"] .erp-sidebar:hover .nav-pin-btn,
    [data-sidebar-collapsed="1"] .erp-sidebar:hover .erp-brand span,
    [data-sidebar-collapsed="1"] .erp-sidebar:hover summary b,
    [data-sidebar-collapsed="1"] .erp-sidebar:hover nav span:not(.nav-icon),
    [data-sidebar-collapsed="1"] .erp-sidebar:hover .pinned-section a span:not(.nav-icon),
    [data-sidebar-collapsed="1"] .erp-sidebar:focus-within .nav-children,
    [data-sidebar-collapsed="1"] .erp-sidebar:focus-within .pinned-section-label,
    [data-sidebar-collapsed="1"] .erp-sidebar:focus-within nav span:not(.nav-icon) {
        opacity: 1;
        visibility: visible;
        width: auto;
        transition-delay: 80ms;
    }
}
.erp-sidebar { transition: width var(--t-base); }

/* Mobile drawer */
@media (max-width: 720px) {
    .erp-sidebar {
        position: fixed;
        top: 0; bottom: 0; left: 0;
        width: min(280px, 100vw - 48px);
        z-index: 70;
        transform: translateX(-100%);
    }
    [data-drawer-open="1"] .erp-sidebar { transform: translateX(0); }
    [data-drawer-open="1"] .erp-main { overflow: hidden; }
}
.drawer-backdrop {
    position: fixed; inset: 0; z-index: 65;
    background: rgba(0, 0, 0, 0.5);
    display: none;
}
[data-drawer-open="1"] .drawer-backdrop { display: block; }

/* ----------------------------------------------------------------------------
   §22 — Hover/active states on tables, cards, links, inputs
   (additive; existing rules still apply)
   ---------------------------------------------------------------------------- */
.erp-card.is-clickable {
    cursor: pointer;
    transition: transform var(--t-fast), box-shadow var(--t-fast),
                border-color var(--t-fast);
}
@media (hover: hover) {
    .erp-card.is-clickable:hover {
        transform: translateY(-1px);
        box-shadow: var(--shadow-lg);
        border-color: var(--line-strong);
    }
}
.erp-table tbody tr.is-active {
    background: var(--primary-50);
    box-shadow: inset 2px 0 0 var(--primary-600);
}

/* ----------------------------------------------------------------------------
   §10 — Typography utilities
   ---------------------------------------------------------------------------- */
.num { font-variant-numeric: tabular-nums; text-align: right; font-weight: 500; }
.mono { font-family: var(--font-mono); }
.eyebrow {
    font-size: var(--fs-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1;
    color: var(--muted);
}

/* ----------------------------------------------------------------------------
   Dashboard primitives — metric / chart card / work queue
   (token-based so dark mode is automatic)
   ---------------------------------------------------------------------------- */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--s-3);
    margin-bottom: var(--s-5);
}

.metric-card {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: var(--s-3);
    align-items: center;
    padding: var(--s-3) var(--s-4);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
    min-width: 0;
    /* Per-card container so the value can scale to its own width */
    container-type: inline-size;
}
@media (hover: hover) {
    .metric-card:hover { border-color: var(--line-strong); }
}
.metric-card__icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: var(--r-md);
    background: var(--panel-subtle);
    color: var(--muted);
}
.metric-card__icon .icon { width: 20px; height: 20px; }
.metric-card--good .metric-card__icon { background: var(--tone-good-bg); color: var(--tone-good); }
.metric-card--bad  .metric-card__icon { background: var(--tone-bad-bg);  color: var(--tone-bad); }
.metric-card--warn .metric-card__icon { background: var(--tone-warn-bg); color: var(--tone-warn); }
.metric-card--info .metric-card__icon { background: var(--tone-info-bg); color: var(--tone-info); }
.metric-card--primary .metric-card__icon { background: var(--primary-50); color: var(--primary-700); }

.metric-card__body { min-width: 0; }
.metric-card__label {
    font-size: var(--fs-sm);
    color: var(--muted);
    font-weight: 600;
    text-transform: none;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.metric-card__value {
    display: block;
    /* Scale font with the card's own width so big amounts shrink before
       they truncate. cqw = 1% of the container's inline size. */
    font-size: clamp(0.95rem, 7cqw, 1.35rem);
    font-weight: 700;
    color: var(--text);
    line-height: var(--lh-tight);
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
    /* Keep the amount on one line; truncate with ellipsis if it still
       overflows. The element has a title attribute for the full value. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
@supports not (container-type: inline-size) {
    .metric-card__value { font-size: clamp(0.95rem, 1.4vw, 1.35rem); }
}
.metric-card__delta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-top: 4px;
    padding: 1px 6px;
    border-radius: var(--r-pill);
    font-size: var(--fs-xs);
    font-weight: 700;
    background: var(--panel-subtle);
    color: var(--muted);
}
.metric-card__delta--good { background: var(--tone-good-bg); color: var(--tone-good); }
.metric-card__delta--bad  { background: var(--tone-bad-bg);  color: var(--tone-bad); }
.metric-card__delta--flat { background: var(--panel-subtle); color: var(--muted); }

/* Page-level toolbar (filters left, actions right) */
.page-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    margin-bottom: var(--s-4);
    flex-wrap: wrap;
}
.page-toolbar__filters {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    flex-wrap: wrap;
}
.page-toolbar__actions {
    display: flex;
    gap: var(--s-2);
    flex-wrap: wrap;
}
.toolbar-select {
    height: 36px;
    padding: 0 var(--s-3);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--panel);
    color: var(--text);
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
}
.toolbar-select:focus-visible { box-shadow: var(--ring); outline: none; border-color: var(--primary-600); }
.toolbar-presets {
    display: inline-flex;
    gap: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--panel);
}
.toolbar-presets a {
    padding: 0 var(--s-3);
    height: 36px;
    display: inline-flex;
    align-items: center;
    color: var(--muted);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
    border-right: 1px solid var(--line);
    transition: background var(--t-fast), color var(--t-fast);
}
.toolbar-presets a:last-child { border-right: none; }
.toolbar-presets a:hover { background: var(--panel-subtle); color: var(--text); }
.toolbar-presets a.is-active {
    background: var(--primary-50);
    color: var(--primary-700);
}

/* Chart card */
.chart-card { padding: 0; overflow: hidden; }
.chart-card > .erp-card-head {
    padding: var(--s-4) var(--s-4) var(--s-2);
    flex-wrap: wrap;
    row-gap: var(--s-3);
}
.chart-card > .erp-card-body { padding: 0 var(--s-3) var(--s-3); }

/* Chart range tabs (inline segmented control) */
.chart-range-tabs {
    display: inline-flex;
    gap: 0;
    background: var(--panel-subtle);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    overflow: hidden;
    flex-wrap: wrap;
}
.chart-range-tab {
    padding: 0 var(--s-3);
    height: 32px;
    display: inline-flex;
    align-items: center;
    color: var(--muted);
    background: transparent;
    border: none;
    border-right: 1px solid var(--line);
    border-radius: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
}
.chart-range-tab:last-child { border-right: none; }
@media (hover: hover) {
    .chart-range-tab:hover { background: var(--panel); color: var(--text); }
}
.chart-range-tab.is-active {
    background: var(--primary-600);
    color: var(--primary-fg);
    border-right-color: var(--primary-600);
}
.chart-range-tab:focus-visible {
    box-shadow: inset 0 0 0 2px var(--primary-600);
    outline: none;
    border-radius: 0;
}

/* Custom-range inline form */
.chart-custom-bar {
    padding: var(--s-2) var(--s-4);
    background: var(--panel-subtle);
    border-bottom: 1px solid var(--line);
}
.chart-custom-form {
    display: flex;
    align-items: end;
    gap: var(--s-3);
    flex-wrap: wrap;
    margin: 0;
}
.chart-custom-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.chart-custom-field span {
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.chart-custom-field input {
    height: 32px;
    padding: 0 var(--s-3);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--panel);
    color: var(--text);
    font-size: var(--fs-sm);
}
.chart-custom-field input:focus-visible {
    border-color: var(--primary-600);
    box-shadow: var(--ring);
    outline: none;
}
.erp-chart-wrap { position: relative; }
.erp-chart-toolbar {
    display: flex;
    justify-content: flex-end;
    padding: 0 var(--s-3) var(--s-2);
}
.erp-chart-type {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 8px 0 10px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    color: var(--muted);
    background: var(--panel);
}
@media (hover: hover) {
    .erp-chart-type:hover { border-color: var(--line-strong); color: var(--text); }
}
.erp-chart-type .icon { width: 14px; height: 14px; }
.erp-chart-type select {
    background: transparent;
    border: none;
    outline: none;
    color: var(--text);
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    padding: 0 18px 0 0;
    background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                      linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: calc(100% - 8px) 50%, calc(100% - 4px) 50%;
    background-size: 4px 4px;
    background-repeat: no-repeat;
}
.erp-chart-type select:focus,
.erp-chart-type select:focus-visible { outline: none; box-shadow: none; }
/* No glow on the wrapper — only a subtle border shift when keyboard focus lands on the select */
.erp-chart-type:focus-within { border-color: var(--line-strong); box-shadow: none; }

/* Queue card (each work queue) */
.queue-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: var(--s-4);
    margin-bottom: var(--s-4);
}
.queue-card .erp-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.queue-card .queue-list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}
.queue-card .queue-list > li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--s-3);
    align-items: center;
    padding: var(--s-3) 0;
    border-bottom: 1px solid var(--line);
}
.queue-card .queue-list > li:last-child { border-bottom: none; }
.queue-card .queue-list strong {
    font-size: var(--fs-md);
    color: var(--text);
    display: block;
}
.queue-card .queue-list small { color: var(--muted); font-size: var(--fs-xs); }
.queue-card .queue-amount {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--text);
    text-align: right;
}
.queue-empty {
    padding: var(--s-5) var(--s-3);
    text-align: center;
    color: var(--muted);
    font-size: var(--fs-sm);
}

/* Ensure cards always use tokens — overrides the legacy hard-coded white */
.erp-card { background: var(--panel); color: var(--text); border-color: var(--line); }
.erp-list-card { background: var(--panel); color: var(--text); border-color: var(--line); }

/* ----------------------------------------------------------------------------
   Sort link header (data tables)
   ---------------------------------------------------------------------------- */
.sort-link {
    color: var(--muted);
    text-decoration: none;
    font-weight: 700;
    font-size: var(--fs-sm);
    transition: color var(--t-fast);
}
.sort-link:hover { color: var(--text); }
.sort-link.is-active { color: var(--text); }

/* ----------------------------------------------------------------------------
   Action menu — kebab variant + canonical panel/items
   (overrides the legacy bordered "button" summary in erp-shell.css)
   ---------------------------------------------------------------------------- */
.action-menu summary {
    width: 32px;
    height: 32px;
    min-height: 0;
    padding: 0;
    display: inline-grid;
    place-items: center;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    list-style: none;
    transition: background var(--t-fast), color var(--t-fast);
}
@media (hover: hover) {
    .action-menu summary:hover { background: var(--panel-subtle); color: var(--text); }
}
.action-menu summary:focus-visible { box-shadow: var(--ring); outline: none; }

.action-menu__panel,
.action-menu[open] > div {
    position: absolute;
    z-index: 1000;
    top: calc(100% + 4px);
    right: 0;
    left: auto;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 180px;
    padding: 6px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
}
.action-menu__item {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: transparent;
    color: var(--text);
    text-align: left;
    text-decoration: none;
    font-size: var(--fs-sm);
    font-weight: 500;
    border-radius: var(--r-sm);
    cursor: pointer;
}
.action-menu__item:hover { background: var(--panel-subtle); }
.action-menu__item.is-danger { color: var(--tone-bad); }
.action-menu__item.is-danger:hover { background: var(--tone-bad-bg); color: var(--tone-bad); }
.action-menu form { margin: 0; }

/* Sticky table footer */
.erp-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    border-top: 1px solid var(--line);
    background: var(--panel);
    flex-wrap: wrap;
}

/* Empty state */
.erp-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-6) var(--s-4);
    text-align: center;
    color: var(--muted);
}
.erp-empty .icon { width: 40px; height: 40px; color: var(--muted); margin-bottom: var(--s-2); }
.erp-empty h3 { margin: 0; font-size: var(--fs-lg); color: var(--text); font-weight: 600; }
.erp-empty p { margin: 0; max-width: 460px; }
.erp-empty .button-primary { margin-top: var(--s-3); }

/* Profile header (used on user show + similar) */
.profile-header {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-5);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow);
    margin-bottom: var(--s-4);
}
.profile-header__body { flex: 1; min-width: 0; }
.profile-header__name { margin: 0; font-size: var(--fs-xl); font-weight: 700; color: var(--text); }
.profile-header__email { color: var(--muted); font-size: var(--fs-sm); margin: 2px 0 8px; }
.profile-header__tags { display: flex; gap: 6px; flex-wrap: wrap; }
.profile-header__actions { display: flex; gap: var(--s-2); flex-shrink: 0; flex-wrap: wrap; }

/* Definition list used on profile pages */
.profile-dl {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: var(--s-2) var(--s-4);
    margin: 0;
}
.profile-dl dt { color: var(--muted); font-weight: 600; font-size: var(--fs-sm); }
.profile-dl dd { margin: 0; color: var(--text); font-size: var(--fs-md); }

/* ----------------------------------------------------------------------------
   Live-search autocomplete dropdown
   ---------------------------------------------------------------------------- */
.live-suggest {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 60;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
    max-height: 320px;
    overflow-y: auto;
    padding: 4px;
}
.live-suggest__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    border-radius: var(--r-sm);
    text-decoration: none;
    color: var(--text);
    cursor: pointer;
    line-height: 1.3;
}
.live-suggest__item.is-active,
.live-suggest__item:hover { background: var(--surface-2); }
.live-suggest__label { font-weight: 600; font-size: var(--fs-md); }
.live-suggest__hint { color: var(--muted); font-size: var(--fs-sm); }

/* ----------------------------------------------------------------------------
   Multi-select picker (checkbox dropdown)
   ---------------------------------------------------------------------------- */
.multi-picker { position: relative; }
.multi-picker__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--panel);
    color: var(--text);
    font-size: var(--fs-md);
    cursor: pointer;
    list-style: none;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.multi-picker__summary::-webkit-details-marker { display: none; }
.multi-picker__summary:hover { border-color: var(--line-strong); }
.multi-picker[open] > .multi-picker__summary {
    border-color: var(--primary-600);
    box-shadow: var(--ring);
}
.multi-picker__summary .icon { color: var(--muted); transition: transform var(--t-fast); }
.multi-picker[open] > .multi-picker__summary .icon { transform: rotate(180deg); }
.multi-picker__summary .muted { color: var(--muted); }

.multi-picker__panel {
    position: absolute;
    z-index: 30;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 260px;
    overflow-y: auto;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
    padding: 4px;
}
.multi-picker__option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: background var(--t-fast);
    color: var(--text);
    font-size: var(--fs-md);
}
.multi-picker__option:hover { background: var(--panel-subtle); }
.multi-picker__option input { width: 16px; height: 16px; accent-color: var(--primary-600); }
.multi-picker__option:has(input:checked) {
    background: var(--primary-50);
    color: var(--primary-700);
    font-weight: 600;
}

/* ----------------------------------------------------------------------------
   §17.3 — Info popover trigger (help-tip)
   ---------------------------------------------------------------------------- */
.help-tip {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-pill);
    background: var(--panel-subtle);
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    cursor: help;
    line-height: 1;
    margin-left: 4px;
}
.help-tip:hover { color: var(--primary-600); border-color: var(--primary-600); }
.help-tip:focus-visible { box-shadow: var(--ring); outline: none; }

/* ----------------------------------------------------------------------------
   Page header toolbar — secondary action buttons grouped as pills
   Used wherever a page has 2+ secondary actions beside the primary CTA.
   ---------------------------------------------------------------------------- */
.page-toolbar {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background: var(--panel-subtle);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
}
.page-toolbar__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--r-pill);
    color: var(--muted);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: color var(--t-fast), background var(--t-fast);
    white-space: nowrap;
}
.page-toolbar__btn .icon { width: 14px; height: 14px; }
.page-toolbar__btn:hover {
    color: var(--text);
    background: var(--panel);
    box-shadow: var(--shadow-sm);
}
.page-toolbar__btn.is-active {
    color: var(--primary-600);
    background: var(--panel);
    box-shadow: var(--shadow-sm);
}

/* Reusable upload dropzone — used by every CSV-import page so the widget
   stays consistent. Pair with the standard `.erp-steps` flow card. */
.erp-dropzone {
    display: flex; align-items: center; gap: var(--s-3);
    padding: 22px 20px;
    border: 2px dashed var(--line);
    border-radius: var(--r-md);
    background: var(--panel-subtle);
    cursor: pointer;
    transition: border-color var(--t-fast), background var(--t-fast);
}
.erp-dropzone:hover { border-color: var(--primary-600); }
.erp-dropzone.is-dragover {
    border-color: var(--primary-600);
    background: color-mix(in srgb, var(--primary-600) 8%, var(--panel-subtle));
}
.erp-dropzone.is-filled { border-style: solid; border-color: var(--tone-good); }
.erp-dropzone__icon { color: var(--muted); }
.erp-dropzone__copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.erp-dropzone__copy strong { font-size: var(--fs-base); }
.erp-dropzone__copy .muted { font-size: var(--fs-sm); }

/* Numbered 3-step flow card used by every importer. */
.erp-steps { list-style: none; margin: 0; padding: 0; }
.erp-step {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: var(--s-3);
    padding: var(--s-4);
    border-bottom: 1px solid var(--line);
}
.erp-step:last-child { border-bottom: 0; }
.erp-step__num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--primary-600); color: #fff;
    font-weight: 700;
}
.erp-step__body h3 { margin: 0 0 6px; font-size: var(--fs-base); }
.erp-step__body p { margin: 0 0 var(--s-3); }
.erp-step__action { margin-top: var(--s-3); }
.erp-steps-card { padding: 0; }

/* Collapsible "Column reference" widget below importers. */
.erp-instructions summary { display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; }
.erp-instructions summary::-webkit-details-marker { display: none; }
.erp-instructions summary::after {
    content: '+';
    margin-left: auto;
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--line);
    color: var(--muted);
    font-size: 14px; font-weight: 700; line-height: 1;
    transition: transform var(--t-base), background var(--t-fast), color var(--t-fast);
}
.erp-instructions[open] summary::after {
    content: '−';
    background: var(--primary-600);
    border-color: var(--primary-600);
    color: #fff;
}
.erp-instructions__hint { font-size: var(--fs-sm); color: var(--muted); margin-left: auto; padding-right: 8px; }

/* Column reference table — cleaner type, more breathing room, monospace
   column names so they feel like CSV headers. */
.erp-instructions__table { width: 100%; border-collapse: collapse; }
.erp-instructions__table thead th {
    text-align: left;
    padding: 10px 14px;
    background: var(--panel-subtle);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    font-weight: 600;
}
.erp-instructions__table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}
.erp-instructions__table tbody tr:last-child td { border-bottom: 0; }
.erp-instructions__table tbody tr:hover td { background: var(--panel-subtle); }
.erp-instructions__num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--panel-subtle);
    border: 1px solid var(--line);
    font-size: 11px; font-weight: 700; color: var(--muted);
    line-height: 1;
}
.erp-instructions__col {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text);
}
.erp-instructions__note {
    color: var(--muted);
    font-size: var(--fs-sm);
    line-height: 1.5;
    max-width: 60ch;
}
.erp-instructions__note code {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.92em;
    padding: 1px 5px;
    background: var(--panel-subtle);
    border: 1px solid var(--line);
    border-radius: 4px;
    color: var(--text);
}

/* Single secondary link rendered as a pill button.
   For page headers that have just one or two secondary links, where the full
   .page-toolbar pill-group container would look heavy. */
.btn-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--r-pill);
    color: var(--muted);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
    background: var(--panel-subtle);
    border: 1px solid var(--line);
    cursor: pointer;
    transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
    white-space: nowrap;
}
.btn-pill .icon { width: 14px; height: 14px; }
.btn-pill:hover {
    color: var(--text);
    background: var(--panel);
    border-color: var(--line-strong);
}

/* ----------------------------------------------------------------------------
   Contacts list table (suppliers / customers)
   ---------------------------------------------------------------------------- */
.contacts-table {
    table-layout: fixed;
    width: 100%;
    min-width: 1080px; /* lets the .erp-table-scroll wrapper scroll horizontally instead of crushing cells */
}
.contacts-table th,
.contacts-table td {
    padding: 10px 14px;
    vertical-align: middle;
}
.contacts-col-name        { width: 22%; }
.contacts-col-company     { width: 18%; }
.contacts-col-phone       { width: 12%; }
.contacts-col-email       { width: 20%; }
.contacts-col-outstanding { width: 10%; }
.contacts-col-payterm     { width:  7%; }
.contacts-col-added       { width:  8%; }
.contacts-col-actions     { width: 48px; }

.contacts-cell-company,
.contacts-cell-phone,
.contacts-cell-email {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contacts-name-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0; /* allow inner ellipsis */
}
.contacts-name-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}
.contacts-name-link {
    color: var(--text);
    font-weight: 600;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}
.contacts-name-link:hover { color: var(--primary-600); }
.contacts-name-code {
    font-size: var(--fs-xs);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

/* ----------------------------------------------------------------------------
   Contact 360 (crm/contacts/{id})
   ---------------------------------------------------------------------------- */
.contact-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--s-3);
    margin-bottom: var(--s-4);
}
.contact-metric {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 14px 16px;
    box-shadow: var(--shadow-sm);
}
.contact-metric p {
    margin: 0 0 6px;
    color: var(--muted);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}
.contact-metric strong {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
}
.contact-metric--accent { border-color: var(--primary-600); }
.contact-metric--accent strong { color: var(--primary-600); }

.contact-tabs { padding: 0; overflow: hidden; }
.contact-tabbar {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--line);
    background: var(--panel-subtle);
    overflow-x: auto;
    scrollbar-width: thin;
}
.contact-tab {
    background: transparent;
    border: 0;
    padding: 12px 18px;
    font: inherit;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color var(--t-fast), border-color var(--t-fast);
}
.contact-tab:hover { color: var(--text); }
.contact-tab.is-active { color: var(--primary-600); border-bottom-color: var(--primary-600); }
.contact-tab__count {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: var(--r-pill);
    background: var(--panel);
    border: 1px solid var(--line);
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
}
.contact-tab.is-active .contact-tab__count {
    background: var(--primary-600);
    border-color: var(--primary-600);
    color: #fff;
}

.contact-pane { display: none; padding: var(--s-4); }
.contact-pane.is-active { display: block; }

.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--s-3);
}
.contact-info-card {
    background: var(--panel-subtle);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 14px 16px;
}
.contact-info-card h3 {
    margin: 0 0 10px;
    font-size: var(--fs-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}
.contact-info-card dl {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(110px, 35%) 1fr;
    row-gap: 8px;
    column-gap: 14px;
}
.contact-info-card dt {
    color: var(--muted);
    font-size: var(--fs-sm);
}
.contact-info-card dd {
    margin: 0;
    color: var(--text);
    font-size: var(--fs-sm);
    word-break: break-word;
}

.contact-divider {
    border: 0;
    border-top: 1px solid var(--line);
    margin: var(--s-4) 0;
}

.contact-table th,
.contact-table td { padding: 10px 14px; }
.contact-table tbody tr:hover td { background: var(--panel-subtle); }

.contact-comm-form { display: flex; flex-direction: column; gap: var(--s-3); margin-bottom: var(--s-4); }
.contact-comm-form__row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s-3); }
@media (max-width: 720px) {
    .contact-comm-form__row { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------------------
   Permission matrix
   ---------------------------------------------------------------------------- */
.matrix-shell { padding: 0; overflow: hidden; }
.matrix-toolbar {
    display: flex; align-items: center; gap: var(--s-3);
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--panel);
    position: sticky; top: 0; z-index: 6;
}
.matrix-toolbar__search { flex: 1; min-width: 240px; }
.matrix-toolbar__search input { width: 100%; }
.matrix-toolbar__actions { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); }

.matrix-module { border-top: 1px solid var(--line); }
.matrix-module:first-of-type { border-top: 0; }
.matrix-module__head {
    list-style: none;
    cursor: pointer;
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    background: var(--panel-subtle);
    user-select: none;
}
.matrix-module__head::-webkit-details-marker { display: none; }
.matrix-module__chev {
    display: inline-block;
    transition: transform var(--t-base);
    color: var(--muted);
    font-size: 12px;
}
.matrix-module:not([open]) .matrix-module__chev { transform: rotate(-90deg); }
.matrix-module__title { font-weight: 600; }
.matrix-module__meta { font-size: var(--fs-sm); }

.matrix-scroll { overflow: auto; }
.permission-matrix {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--fs-sm);
}
.permission-matrix thead th {
    position: sticky; top: 0;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    z-index: 2;
}
.permission-matrix tbody td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}
.permission-matrix tbody tr:last-child td { border-bottom: 0; }
.permission-matrix tbody tr:hover td { background: var(--panel-subtle); }

.permission-matrix__name-col {
    position: sticky; left: 0;
    background: var(--panel);
    min-width: 260px;
    max-width: 360px;
    z-index: 1;
    border-right: 1px solid var(--line);
}
.permission-matrix thead .permission-matrix__name-col { z-index: 3; }
.permission-matrix tbody tr:hover .permission-matrix__name-col { background: var(--panel-subtle); }
.permission-matrix__perm strong { display: block; font-weight: 600; }
.permission-matrix__perm .muted { display: block; font-size: var(--fs-xs); margin-top: 2px; line-height: 1.4; }

.permission-matrix__role-col { min-width: 110px; text-align: center; }
.permission-matrix__role-head {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.permission-matrix__role-name {
    font-weight: 600;
    max-width: 140px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.permission-matrix__toggle-all {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: var(--fs-xs); color: var(--muted); font-weight: 500;
    cursor: pointer;
}
.permission-matrix__toggle-all input { margin: 0; }

.permission-matrix__cell { text-align: center; }
.permission-matrix__check {
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; padding: 6px;
}
.permission-matrix__check input { margin: 0; cursor: pointer; }

.matrix-savebar {
    position: sticky; bottom: 0;
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s-3);
    margin-top: var(--s-4);
    padding: 12px 16px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-md);
    z-index: 4;
}
.matrix-savebar__status { color: var(--muted); font-size: var(--fs-sm); }
.matrix-savebar.is-dirty { border-color: var(--primary-600); }
.matrix-savebar.is-dirty .matrix-savebar__status { color: var(--primary-600); font-weight: 600; }
.matrix-savebar__actions { display: flex; align-items: center; gap: 8px; }