/* ============================================================================
   Orun Design System
   Authoritative UI layer. Matches the approved Infrastructure Command Center
   design: shell, sidebar, navbar, hero, cards, tables, badges, buttons, modals.
   Loaded last so it wins over the Adanex theme (/assets/css/style.css).
   ========================================================================== */

/* Museo Sans is the project typeface. @font-face lives in orun-system.css.
   Available weights are 100 / 300 / 500 / 700 / 900 only — never use 400 or 600,
   the browser would synthesise them and the text renders subtly wrong. */

:root {
    --mc-font: 'Museo Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Surfaces */
    --mc-bg: #F4F7FB;
    --mc-surface: #FFFFFF;
    --mc-surface-alt: #F8FAFC;
    --mc-border: #E7EDF4;
    --mc-border-strong: #D8E1EC;

    /* Ink */
    --mc-ink: #101828;
    --mc-ink-2: #344054;
    --mc-muted: #667085;
    --mc-muted-2: #98A2B3;

    /* Brand */
    --mc-primary: #1D6FF2;
    --mc-primary-hover: #1559C9;
    --mc-primary-soft: #EFF4FF;

    /* Status */
    --mc-success: #12B76A;
    --mc-success-soft: #ECFDF3;
    --mc-success-ink: #027A48;
    --mc-warning: #F79009;
    --mc-warning-soft: #FFFAEB;
    --mc-warning-ink: #B54708;
    --mc-danger: #E5484D;
    --mc-danger-soft: #FEF3F2;
    --mc-danger-ink: #B42318;
    --mc-info: #2E90FA;
    --mc-info-soft: #EFF8FF;
    --mc-info-ink: #175CD3;

    /* Hero */
    --mc-hero-from: #0A2540;
    --mc-hero-to: #0E3F55;

    /* Geometry */
    --mc-radius: 12px;
    --mc-radius-sm: 8px;
    --mc-radius-lg: 16px;
    --mc-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
    --mc-shadow-md: 0 4px 12px rgba(16, 24, 40, .08);

    --mc-sidebar-w: 246px;
    --mc-header-h: 64px;
}

/* ─────────────────────────── Base ─────────────────────────── */

body,
body.mc-customer-app,
body.mc-admin-app {
    font-family: var(--mc-font) !important;
    background: var(--mc-bg) !important;
    color: var(--mc-ink-2);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--mc-font) !important;
    color: var(--mc-ink);
    font-weight: 700;
    letter-spacing: -.01em;
}

a { text-decoration: none; }
code, kbd, .font-mono { font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; }

/* ─────────────────────────── Header / navbar ─────────────────────────── */

.header {
    background: var(--mc-surface) !important;
    border-bottom: 1px solid var(--mc-border) !important;
    height: var(--mc-header-h) !important;
    box-shadow: none !important;
}

.header .main-header { height: var(--mc-header-h) !important; }

.header .header-left {
    width: var(--mc-sidebar-w) !important;
    border-right: 1px solid var(--mc-border) !important;
    height: var(--mc-header-h) !important;
    padding-left: 20px;
}

.mc-wordmark { display: inline-flex; align-items: center; gap: 10px; }

.mc-wordmark-mark {
    width: 32px; height: 32px; border-radius: 9px;
    background: var(--mc-primary);
    color: #fff; display: inline-flex; align-items: center; justify-content: center;
    font-size: 17px;
}

.mc-wordmark-name {
    font-size: 18px; font-weight: 700; color: var(--mc-ink); letter-spacing: -.02em;
}

/* Search */
.header #header-search .input-group-flat { min-width: 420px; }

.header #header-search .form-control {
    background: var(--mc-surface-alt) !important;
    border: 1px solid var(--mc-border) !important;
    border-left: 0 !important;
    height: 40px; font-size: 13.5px;
    color: var(--mc-ink-2);
    box-shadow: none !important;
}

.header #header-search .form-control::placeholder { color: var(--mc-muted-2); }

.header #header-search .input-icon-addon {
    background: var(--mc-surface-alt);
    border: 1px solid var(--mc-border); border-right: 0;
    border-radius: var(--mc-radius-sm) 0 0 var(--mc-radius-sm);
    color: var(--mc-muted-2); width: 38px;
}

.header #header-search .input-group-text {
    background: var(--mc-surface-alt);
    border: 1px solid var(--mc-border); border-left: 0;
    border-radius: 0 var(--mc-radius-sm) var(--mc-radius-sm) 0;
}

.header #header-search kbd {
    background: var(--mc-surface); border: 1px solid var(--mc-border);
    color: var(--mc-muted); font-size: 11px; font-weight: 700;
    padding: 2px 6px; border-radius: 5px; box-shadow: none;
}

/* Menubar buttons */
.btn-menubar {
    width: 38px; height: 38px; border-radius: var(--mc-radius-sm) !important;
    border: 1px solid var(--mc-border) !important;
    background: var(--mc-surface) !important;
    color: var(--mc-muted) !important;
    display: inline-flex !important; align-items: center; justify-content: center;
    font-size: 17px; position: relative;
}

.btn-menubar:hover { background: var(--mc-surface-alt) !important; color: var(--mc-ink) !important; }

/* Workspace + test-mode pills */
.mc-workspace-switcher,
.mc-test-mode {
    align-items: center; gap: 8px; height: 38px; padding: 0 14px;
    border: 1px solid var(--mc-border); border-radius: var(--mc-radius-sm);
    background: var(--mc-surface); color: var(--mc-ink-2);
    font-size: 13px; font-weight: 500; white-space: nowrap;
}

.mc-workspace-switcher:hover { background: var(--mc-surface-alt); color: var(--mc-ink); }
.mc-workspace-switcher b { font-weight: 700; color: var(--mc-ink); }
.mc-workspace-switcher .ti-chevron-down, .mc-test-mode .ti { font-size: 15px; }
.mc-workspace-switcher .ti-chevron-down { color: var(--mc-muted-2); }

/* The workspace name is user data and can be long — never let it push the
   toolbar controls off the header. */
.mc-workspace-switcher > span {
    max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Test mode is a real state (Paystack test credentials), so it reads as a
   warning rather than as neutral chrome. */
.mc-test-mode {
    color: var(--mc-warning-ink);
    background: var(--mc-warning-soft);
    border-color: #FEDF89;
    font-weight: 700;
}

.mc-test-mode .ti { color: var(--mc-warning); }

/* Quick create */
.mc-quick-create {
    align-items: center; gap: 8px; height: 38px; padding: 0 16px;
    background: var(--mc-primary); color: #fff !important;
    border-radius: var(--mc-radius-sm); font-size: 13.5px; font-weight: 700;
    box-shadow: 0 1px 2px rgba(29, 111, 242, .28);
}

.mc-quick-create:hover { background: var(--mc-primary-hover); }

/* Profile */
.mc-customer-profile { display: inline-flex; align-items: center; gap: 10px; padding: 4px 8px 4px 4px; border-radius: var(--mc-radius-sm); }
.mc-customer-profile:hover { background: var(--mc-surface-alt); }
.mc-customer-profile::after { display: none; }

.mc-customer-avatar {
    width: 38px; height: 38px; border-radius: var(--mc-radius-sm);
    background: #16324F; color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 13.5px; letter-spacing: .02em;
}

.mc-customer-profile-copy { display: flex; flex-direction: column; line-height: 1.25; }
.mc-customer-profile-copy strong { font-size: 13.5px; font-weight: 700; color: var(--mc-ink); }
.mc-customer-profile-copy small { font-size: 11.5px; color: var(--mc-muted-2); }

/* ─────────────────────────── Sidebar ─────────────────────────── */

.sidebar {
    width: var(--mc-sidebar-w) !important;
    background: var(--mc-surface) !important;
    border-right: 1px solid var(--mc-border) !important;
    top: var(--mc-header-h) !important;
    box-shadow: none !important;
}

.mc-sidebar-workspace { padding: 16px 16px 8px; }

.mc-sidebar-label {
    display: block; font-size: 10px; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: var(--mc-muted-2); margin-bottom: 8px;
}

.mc-sidebar-workspace-card {
    display: flex; align-items: center; gap: 10px;
    border: 1px solid var(--mc-border); border-radius: 10px;
    padding: 10px 12px; background: var(--mc-surface);
}

.mc-sidebar-workspace-card:hover { background: var(--mc-surface-alt); }
.mc-sidebar-workspace-card > .ti:first-child { font-size: 18px; color: var(--mc-muted); }
.mc-sidebar-workspace-card span { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.mc-sidebar-workspace-card strong { font-size: 13.5px; font-weight: 700; color: var(--mc-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-sidebar-workspace-card small { font-size: 11.5px; color: var(--mc-muted-2); }
.mc-sidebar-workspace-card .ti-chevron-down { font-size: 15px; color: var(--mc-muted-2); }

/* Section labels */
#sidebar-menu .menu-title {
    padding: 18px 12px 6px !important;
    margin: 0 !important;
}

#sidebar-menu .menu-title span {
    font-size: 10px !important; font-weight: 700 !important;
    letter-spacing: .09em !important; text-transform: uppercase !important;
    color: var(--mc-muted-2) !important;
}

/* Nav items */
#sidebar-menu ul li a {
    display: flex !important; align-items: center; gap: 11px;
    padding: 9px 12px !important; margin: 1px 0;
    border-radius: var(--mc-radius-sm) !important;
    font-size: 13.5px !important; font-weight: 500 !important;
    color: var(--mc-ink-2) !important;
    transition: background .12s ease, color .12s ease;
}

#sidebar-menu ul li a i,
#sidebar-menu ul li a .ti {
    font-size: 18px !important; color: var(--mc-muted) !important;
    margin: 0 !important; flex: none;
}

#sidebar-menu ul li a:hover { background: var(--mc-surface-alt) !important; color: var(--mc-ink) !important; }
#sidebar-menu ul li a:hover i { color: var(--mc-ink-2) !important; }

#sidebar-menu ul li a.active {
    background: var(--mc-primary-soft) !important;
    color: var(--mc-primary) !important; font-weight: 700 !important;
}

#sidebar-menu ul li a.active i { color: var(--mc-primary) !important; }
#sidebar-menu ul li a.active::after { display: none; }

/* ─────────────────────────── Page shell ─────────────────────────── */

.page-wrapper {
    margin-left: var(--mc-sidebar-w) !important;
    background: var(--mc-bg) !important;
    padding-top: var(--mc-header-h) !important;
}

.page-wrapper .content { padding: 22px 24px 28px !important; }

.footer { background: transparent !important; border: 0 !important; color: var(--mc-muted-2); font-size: 12.5px; }
.footer p { margin: 0; }

/* ─────────────────────────── Command centre hero ─────────────────────────── */

.mc-hero {
    background: linear-gradient(115deg, var(--mc-hero-from) 0%, #0B3048 55%, var(--mc-hero-to) 100%);
    border-radius: var(--mc-radius-lg);
    padding: 26px 28px;
    color: #fff;
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
}

.mc-hero::before {
    content: ""; position: absolute; width: 420px; height: 420px;
    border-radius: 50%; background: rgba(255, 255, 255, .035);
    top: -180px; right: -60px;
}

.mc-hero > * { position: relative; z-index: 1; }

.mc-hero-eyebrow {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: #6EE7B7; margin-bottom: 10px;
}

.mc-hero-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: #34D399; }

.mc-hero h1 { font-size: 29px; font-weight: 700; color: #fff; letter-spacing: -.03em; margin: 0 0 8px; }
.mc-hero p { color: rgba(255, 255, 255, .72); font-size: 14px; margin: 0; max-width: 62ch; }

/* Hero action buttons */
.mc-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.mc-hero-btn {
    display: inline-flex; align-items: center; gap: 9px;
    height: 44px; padding: 0 20px; border-radius: 10px;
    font-size: 14px; font-weight: 700; white-space: nowrap;
    border: 1px solid transparent;
}

.mc-hero-btn-primary { background: var(--mc-primary); color: #fff !important; }
.mc-hero-btn-primary:hover { background: var(--mc-primary-hover); }

.mc-hero-btn-ghost {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .22);
    color: #fff !important;
}

.mc-hero-btn-ghost:hover { background: rgba(255, 255, 255, .13); }

/* Hero KPI strip */
.mc-hero-kpis {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    margin-top: 24px;
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--mc-radius);
    overflow: hidden;
}

.mc-hero-kpi {
    display: block; padding: 16px 18px; min-width: 0;
    border-left: 1px solid rgba(255, 255, 255, .09);
    transition: background .12s ease;
}

.mc-hero-kpi:first-child { border-left: 0; }
a.mc-hero-kpi:hover { background: rgba(255, 255, 255, .06); }

.mc-hero-kpi-top { display: flex; align-items: center; gap: 10px; }

.mc-hero-kpi-top .ti {
    font-size: 20px; color: rgba(255, 255, 255, .5); flex: none;
}

.mc-hero-kpi-value {
    font-size: 21px; font-weight: 700; color: #fff; line-height: 1.1; letter-spacing: -.02em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.mc-hero-kpi-label {
    font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: rgba(255, 255, 255, .55); margin-top: 3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.mc-hero-kpi-delta {
    display: flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 500; margin-top: 9px;
    color: rgba(255, 255, 255, .62);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.mc-hero-kpi-delta .ti { font-size: 14px; }
.mc-hero-kpi-delta.up { color: #6EE7B7; }
.mc-hero-kpi-delta.down { color: #FDA29B; }
.mc-hero-kpi-delta .dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.mc-hero-kpi-delta .dot.crit { background: #F97066; }
.mc-hero-kpi-delta .dot.info { background: #53B1FD; }

@media (max-width: 1400px) {
    .mc-hero-kpis { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); }
    .mc-hero-kpi:nth-child(4n + 1) { border-left: 0; }
    .mc-hero-kpi { border-top: 1px solid rgba(255, 255, 255, .09); }
    .mc-hero-kpi:nth-child(-n + 4) { border-top: 0; }
}

@media (max-width: 860px) {
    .mc-hero-kpis { grid-template-columns: repeat(2, 1fr); }
    .mc-hero-kpi:nth-child(odd) { border-left: 0; }
    .mc-hero-kpi:nth-child(even) { border-left: 1px solid rgba(255, 255, 255, .09); }
    .mc-hero-kpi:nth-child(-n + 2) { border-top: 0; }
    .mc-hero-kpi:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, .09); }
}

/* ─────────────────────────── Cards ─────────────────────────── */

.card,
.mc-card {
    background: var(--mc-surface) !important;
    border: 1px solid var(--mc-border) !important;
    border-radius: var(--mc-radius) !important;
    box-shadow: var(--mc-shadow) !important;
    margin-bottom: 20px;
}

.card-header,
.mc-card-header {
    background: var(--mc-surface) !important;
    border-bottom: 1px solid var(--mc-border) !important;
    padding: 16px 20px !important;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    border-radius: var(--mc-radius) var(--mc-radius) 0 0 !important;
}

.mc-card-title {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 15px; font-weight: 700; color: var(--mc-ink); margin: 0;
}

.mc-card-title .ti { font-size: 19px; color: var(--mc-primary); }

.card-body { padding: 20px !important; }
.card-footer { background: var(--mc-surface) !important; border-top: 1px solid var(--mc-border) !important; padding: 13px 20px !important; }

/* Footer "view all" link */
.mc-card-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 700; color: var(--mc-primary);
}

.mc-card-link:hover { color: var(--mc-primary-hover); }

/* ─────────────────────────── Tables ─────────────────────────── */

.table { margin: 0; color: var(--mc-ink-2); }

.table > thead > tr > th {
    background: var(--mc-surface-alt) !important;
    border-bottom: 1px solid var(--mc-border) !important;
    border-top: 0 !important;
    padding: 11px 16px !important;
    font-size: 10.5px !important; font-weight: 700 !important;
    letter-spacing: .07em; text-transform: uppercase;
    color: var(--mc-muted-2) !important; white-space: nowrap;
}

.table > tbody > tr > td {
    padding: 14px 16px !important;
    border-bottom: 1px solid var(--mc-border) !important;
    border-top: 0 !important;
    font-size: 13.5px; vertical-align: middle;
}

.table > tbody > tr:last-child > td { border-bottom: 0 !important; }
.table-hover > tbody > tr:hover > td { background: var(--mc-surface-alt) !important; }

.mc-cell-title { font-size: 13.5px; font-weight: 700; color: var(--mc-ink); display: block; line-height: 1.35; }
.mc-cell-sub { font-size: 11.5px; color: var(--mc-muted-2); display: block; margin-top: 2px; }

/* Columns are never squeezed. Tables keep their natural width and the wrapper
   scrolls horizontally instead, so every action stays a visible button. */
.table { min-width: max-content; }
.table > tbody > tr > td,
.table > thead > tr > th { white-space: nowrap; }

.table > tbody > tr > td.mc-col-actions,
.table > thead > tr > th.mc-col-actions { width: 1%; }

/* Sticky action column so controls stay reachable while scrolling. */
.mc-table-scroll { overflow-x: auto; overflow-y: visible; }

.mc-table-scroll::-webkit-scrollbar { height: 9px; }
.mc-table-scroll::-webkit-scrollbar-track { background: var(--mc-surface-alt); border-radius: 99px; }
.mc-table-scroll::-webkit-scrollbar-thumb { background: #C7D3E3; border-radius: 99px; }
.mc-table-scroll::-webkit-scrollbar-thumb:hover { background: #A9BACF; }

/* ── Scrolling list panel ──────────────────────────────────────────────────
   A capped, scrollable body for a card that lists a fixed run of records —
   the profile's 25 activity entries, for instance, which otherwise stretch
   the card far past every panel beside it and push the rest of the page down.
   The cap is set in rem rather than rows so it holds whether a row wraps onto
   a second line or not. Scrollbar matches .mc-table-scroll so the two read as
   the same control.                                                          */
.mc-list-scroll { max-height: 32rem; overflow-y: auto; overscroll-behavior: contain; }

.mc-list-scroll::-webkit-scrollbar { width: 9px; }
.mc-list-scroll::-webkit-scrollbar-track { background: var(--mc-surface-alt); border-radius: 99px; }
.mc-list-scroll::-webkit-scrollbar-thumb { background: #C7D3E3; border-radius: 99px; }
.mc-list-scroll::-webkit-scrollbar-thumb:hover { background: #A9BACF; }

/* Firefox has no ::-webkit pseudo-elements; this is the equivalent it reads. */
.mc-list-scroll { scrollbar-width: thin; scrollbar-color: #C7D3E3 var(--mc-surface-alt); }

/* ── Colour grading ────────────────────────────────────────────────────────
   Three layers, deliberately subtle so they read as depth rather than noise:
   a banded head, zebra body rows, and a status-toned accent rail per row.   */

.table > thead > tr > th {
    background: linear-gradient(180deg, #FBFCFE 0%, var(--mc-surface-alt) 100%) !important;
    border-bottom: 1px solid var(--mc-border-strong) !important;
}

.table > tbody > tr:nth-child(even) > td { background: #FCFDFE; }

/* Status rail. Painted on the first cell so it survives horizontal scroll. */
.table > tbody > tr[data-tone] > td:first-child { box-shadow: inset 3px 0 0 var(--mc-row-accent, transparent); }

.table > tbody > tr[data-tone="success"] { --mc-row-accent: var(--mc-success); }
.table > tbody > tr[data-tone="warning"] { --mc-row-accent: var(--mc-warning); }
.table > tbody > tr[data-tone="danger"]  { --mc-row-accent: var(--mc-danger); }
.table > tbody > tr[data-tone="info"]    { --mc-row-accent: var(--mc-info); }
.table > tbody > tr[data-tone="neutral"] { --mc-row-accent: #C7D3E3; }

/* Decommissioned rows recede — they are history, not live inventory. */
.table > tbody > tr[data-tone="neutral"] > td .mc-cell-title { color: var(--mc-ink-2); }
.table > tbody > tr[data-tone="neutral"] > td { color: var(--mc-muted); }

/* ── Clickable rows ── */
.table > tbody > tr[data-href] { cursor: pointer; }
.table > tbody > tr[data-href]:hover > td { background: var(--mc-primary-soft) !important; }
.table > tbody > tr[data-href]:focus-visible { outline: 2px solid var(--mc-primary); outline-offset: -2px; }

/* Anything interactive inside a clickable row must not trigger the row nav. */
.table > tbody > tr[data-href] a,
.table > tbody > tr[data-href] button,
.table > tbody > tr[data-href] input,
.table > tbody > tr[data-href] label,
.table > tbody > tr[data-href] select { position: relative; z-index: 1; }

/* ── Inline action group (no hidden dropdowns) ── */
.mc-actions { display: inline-flex; align-items: center; gap: 6px; }

/* ── Cell icon pairing ── */
.mc-cell-icon { display: inline-flex; align-items: center; gap: 9px; }

.mc-cell-avatar {
    width: 34px; height: 34px; border-radius: 9px; flex: none;
    display: inline-flex; align-items: center; justify-content: center; font-size: 17px;
    background: var(--mc-primary-soft); color: var(--mc-primary);
}

.mc-cell-avatar.neutral { background: #F2F4F7; color: var(--mc-muted); }
.mc-cell-avatar.success { background: var(--mc-success-soft); color: var(--mc-success-ink); }
.mc-cell-avatar.warning { background: var(--mc-warning-soft); color: var(--mc-warning-ink); }
.mc-cell-avatar.danger  { background: var(--mc-danger-soft);  color: var(--mc-danger-ink); }

.mc-inline-icon { display: inline-flex; align-items: center; gap: 6px; }
.mc-inline-icon > .ti { font-size: 16px; color: var(--mc-muted-2); flex: none; }

/* Resource meters */
.mc-meter-row { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.mc-meter-row:last-child { margin-bottom: 0; }

.mc-meter-label { font-size: 10.5px; font-weight: 700; color: var(--mc-muted-2); width: 30px; flex: none; text-transform: uppercase; }
.mc-res-icon { font-size: 15px; color: var(--mc-muted-2); flex: none; }

.mc-meter {
    flex: 1; height: 6px; min-width: 64px; max-width: 96px;
    background: #EDF1F7; border-radius: 99px; overflow: hidden;
}

.mc-meter > span { display: block; height: 100%; border-radius: 99px; background: var(--mc-primary); }
.mc-meter.warn > span { background: var(--mc-warning); }
.mc-meter.crit > span { background: var(--mc-danger); }
.mc-meter-value { font-size: 11.5px; font-weight: 700; color: var(--mc-ink-2); width: 34px; text-align: right; flex: none; }

/* ─────────────────────────── Badges / pills ─────────────────────────── */

.mc-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 99px;
    font-size: 11.5px; font-weight: 700; white-space: nowrap; line-height: 1.5;
}

.mc-pill .dot { width: 6px; height: 6px; border-radius: 50%; flex: none; background: currentColor; }
.mc-pill > .ti { font-size: 14px; flex: none; }

.mc-pill-success { background: var(--mc-success-soft); color: var(--mc-success-ink); }
.mc-pill-warning { background: var(--mc-warning-soft); color: var(--mc-warning-ink); }
.mc-pill-danger  { background: var(--mc-danger-soft);  color: var(--mc-danger-ink); }
.mc-pill-info    { background: var(--mc-info-soft);    color: var(--mc-info-ink); }
.mc-pill-neutral { background: #F2F4F7; color: #475467; }

/* Uppercase variant used in the readiness panel */
.mc-pill-caps { text-transform: uppercase; letter-spacing: .05em; font-size: 10.5px; }

.badge { font-weight: 700; border-radius: 99px; padding: 4px 10px; font-size: 11.5px; }

/* ─────────────────────────── Buttons ─────────────────────────── */

.btn {
    font-family: var(--mc-font); font-size: 13.5px; font-weight: 700;
    border-radius: var(--mc-radius-sm); padding: 9px 16px;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}

.btn-primary { background: var(--mc-primary) !important; border-color: var(--mc-primary) !important; box-shadow: 0 1px 2px rgba(29,111,242,.24); }
.btn-primary:hover { background: var(--mc-primary-hover) !important; border-color: var(--mc-primary-hover) !important; }

.btn-light,
.btn-light.border {
    background: var(--mc-surface) !important;
    border: 1px solid var(--mc-border) !important;
    color: var(--mc-ink-2) !important;
}

.btn-light:hover { background: var(--mc-surface-alt) !important; }

.btn-danger { background: var(--mc-danger) !important; border-color: var(--mc-danger) !important; }

.btn-sm { padding: 6px 12px; font-size: 12.5px; }

/* Square icon action buttons in table rows */
.mc-icon-btn {
    width: 32px; height: 32px; padding: 0; flex: none;
    border: 1px solid var(--mc-border); border-radius: 7px;
    background: var(--mc-surface); color: var(--mc-muted);
    display: inline-flex; align-items: center; justify-content: center; font-size: 15px;
}

.mc-icon-btn:hover { background: var(--mc-surface-alt); color: var(--mc-ink); }
.mc-icon-btn.danger { color: var(--mc-danger); }
.mc-icon-btn.danger:hover { background: var(--mc-danger-soft); border-color: #FECDCA; }
.mc-icon-btn.success { color: var(--mc-success-ink); }
.mc-icon-btn.success:hover { background: var(--mc-success-soft); border-color: #A6F4C5; }
.mc-icon-btn.warning { color: var(--mc-warning-ink); }
.mc-icon-btn.warning:hover { background: var(--mc-warning-soft); border-color: #FEDF89; }
.mc-icon-btn.primary { color: var(--mc-primary); }
.mc-icon-btn.primary:hover { background: var(--mc-primary-soft); border-color: #B2CCFF; }

/* Sub-text icons inside table cells */
.mc-cell-sub > .ti { font-size: 13px; vertical-align: -1px; margin-right: 2px; }

/* ─────────────────────────── Icon tiles ─────────────────────────── */

.mc-tile {
    width: 38px; height: 38px; border-radius: 9px; flex: none;
    display: inline-flex; align-items: center; justify-content: center; font-size: 19px;
}

.mc-tile-primary { background: var(--mc-primary-soft); color: var(--mc-primary); }
.mc-tile-success { background: var(--mc-success-soft); color: var(--mc-success-ink); }
.mc-tile-warning { background: var(--mc-warning-soft); color: var(--mc-warning-ink); }
.mc-tile-danger  { background: var(--mc-danger-soft);  color: var(--mc-danger-ink); }
.mc-tile-info    { background: var(--mc-info-soft);    color: var(--mc-info-ink); }
.mc-tile-neutral { background: #F2F4F7; color: #667085; }

/* ─────────────────────────── Readiness / list rows ─────────────────────────── */

.mc-list-row {
    display: flex; align-items: center; gap: 13px;
    padding: 14px 20px; border-bottom: 1px solid var(--mc-border);
}

.mc-list-row:last-child { border-bottom: 0; }
.mc-list-row-body { flex: 1; min-width: 0; }
.mc-list-row-title { font-size: 13.5px; font-weight: 700; color: var(--mc-ink); display: block; }
.mc-list-row-sub { font-size: 11.5px; color: var(--mc-muted-2); display: block; margin-top: 2px; }

a.mc-list-row:hover { background: var(--mc-surface-alt); }

/* Donut gauge */
.mc-gauge { width: 62px; height: 62px; flex: none; position: relative; }
.mc-gauge svg { transform: rotate(-90deg); display: block; }
.mc-gauge-track { stroke: #EAEFF6; }
.mc-gauge-fill { stroke: var(--mc-primary); stroke-linecap: round; transition: stroke-dasharray .5s ease; }

.mc-gauge-value {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; color: var(--mc-ink);
}

/* ─────────────────────────── Modal ─────────────────────────── */

.modal-content {
    border: 0 !important; border-radius: 14px !important;
    box-shadow: 0 20px 48px rgba(16, 24, 40, .18) !important;
}

.modal-header { border-bottom: 0 !important; padding: 22px 24px 6px !important; align-items: flex-start; }
.modal-title { font-size: 17px !important; font-weight: 700 !important; color: var(--mc-ink); }
.modal-body { padding: 6px 24px 20px !important; font-size: 13.5px; color: var(--mc-muted); }
.modal-footer { border-top: 0 !important; padding: 0 24px 22px !important; gap: 10px; }
.modal-footer .btn { flex: 1; height: 44px; }

.mc-modal-icon {
    width: 40px; height: 40px; border-radius: 10px; flex: none;
    background: var(--mc-warning-soft); color: var(--mc-warning);
    display: inline-flex; align-items: center; justify-content: center; font-size: 21px;
}

.mc-modal-subject {
    display: flex; align-items: center; gap: 12px;
    background: var(--mc-surface-alt); border: 1px solid var(--mc-border);
    border-radius: 10px; padding: 13px 15px; margin: 14px 0;
}

/* Forms */
.form-label { font-size: 12.5px; font-weight: 700; color: var(--mc-ink-2); margin-bottom: 6px; }
.form-label .optional { font-weight: 500; color: var(--mc-muted-2); }

.form-control, .form-select {
    border: 1px solid var(--mc-border-strong); border-radius: var(--mc-radius-sm);
    font-size: 13.5px; padding: 10px 13px; color: var(--mc-ink-2);
}

.form-control:focus, .form-select:focus {
    border-color: var(--mc-primary); box-shadow: 0 0 0 3px rgba(29, 111, 242, .12);
}

.form-control::placeholder { color: var(--mc-muted-2); }

/* ─────────────────────────── Empty state ─────────────────────────── */

.mc-empty { text-align: center; padding: 44px 20px; }

.mc-empty-icon {
    width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 14px;
    background: var(--mc-surface-alt); border: 1px solid var(--mc-border);
    display: flex; align-items: center; justify-content: center;
    font-size: 23px; color: var(--mc-muted-2);
}

.mc-empty h3 { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.mc-empty p { font-size: 13px; color: var(--mc-muted); margin: 0 0 16px; }

/* ─────────────────────────── Avatars (no image assets) ─────────────────────────── */

.mc-avatar {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--mc-primary-soft); color: var(--mc-primary);
    font-weight: 700; font-size: 13px; letter-spacing: .02em;
    border: 1px solid #DCE7FB;
}

.mc-avatar-lg { width: 48px; height: 48px; font-size: 16px; }

/* ─────────────────────────── Profile dropdown ─────────────────────────── */

.profile-dropdown .dropdown-menu {
    border: 1px solid var(--mc-border) !important;
    border-radius: var(--mc-radius) !important;
    box-shadow: 0 12px 32px rgba(16, 24, 40, .14) !important;
    padding: 0; min-width: 268px; margin-top: 8px;
}

.profile-dropdown .dropdown-menu .card { border: 0 !important; box-shadow: none !important; margin: 0; }
.profile-dropdown .dropdown-menu .card-header { padding: 16px !important; }
.profile-dropdown .dropdown-menu .card-header h5 { font-size: 14.5px; font-weight: 700; }
.profile-dropdown .dropdown-menu .card-body { padding: 8px !important; }
.profile-dropdown .dropdown-menu .card-footer { padding: 8px !important; }

.profile-dropdown .dropdown-item {
    display: flex !important; align-items: center; gap: 10px;
    padding: 9px 10px !important; border-radius: var(--mc-radius-sm);
    font-size: 13.5px; font-weight: 500; color: var(--mc-ink-2);
}

.profile-dropdown .dropdown-item i { font-size: 18px; color: var(--mc-muted); margin: 0 !important; }
.profile-dropdown .dropdown-item:hover { background: var(--mc-surface-alt); color: var(--mc-ink); }
.profile-dropdown .dropdown-item:hover i { color: var(--mc-primary); }

/* ─────────────────────────── Column semantics ──────────────────────────────
   Columns are graded by the kind of value they carry, so a row can be scanned
   without reading every cell: identity reads strongest, money is tabular and
   right-aligned, metadata recedes, and machine values are monospaced.        */

.mc-col-id .mc-cell-title { color: var(--mc-ink); font-weight: 700; }
.mc-col-id .mc-cell-sub { color: var(--mc-muted-2); }

.mc-col-meta, .mc-col-meta .mc-cell-title { color: var(--mc-muted); font-weight: 500; }

.mc-col-numeric, .mc-col-money {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

.mc-col-money .mc-cell-title { color: var(--mc-ink); font-weight: 700; }

.mc-col-machine {
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
    font-size: 12.5px; color: var(--mc-ink-2);
}

/* Column-level tints keep related groups visually bound across a wide table. */
.table > tbody > tr > td.mc-col-tint,
.table > thead > tr > th.mc-col-tint { background: rgba(29, 111, 242, .028); }

.table > tbody > tr:hover > td.mc-col-tint { background: transparent; }

/* ─────────────────────────── Telemetry sparklines ─────────────────────────── */

.mc-spark-grid {
    display: grid; gap: 14px; padding: 18px 20px;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

.mc-spark-card {
    background: var(--mc-surface); border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius); padding: 14px 14px 10px; overflow: hidden;
}

.mc-spark-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }

.mc-spark-icon {
    width: 34px; height: 34px; border-radius: 9px; flex: none;
    display: inline-flex; align-items: center; justify-content: center; font-size: 17px;
}

.mc-spark-copy { min-width: 0; }

.mc-spark-label {
    display: block; font-size: 11px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--mc-muted-2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.mc-spark-value {
    display: block; font-size: 20px; font-weight: 700; color: var(--mc-ink);
    letter-spacing: -.02em; line-height: 1.2;
}

.mc-spark-value small { font-size: 11.5px; font-weight: 500; color: var(--mc-muted-2); margin-left: 4px; }
.mc-spark-chart { margin: 4px -6px 0; min-height: 90px; }
.mc-spark-foot { display: block; font-size: 11px; color: var(--mc-muted-2); }

/* ─────────────────────────── Decommissioned notice ─────────────────────────── */

.mc-decommissioned {
    display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap;
    background: linear-gradient(180deg, #FFFFFF 0%, var(--mc-surface-alt) 100%);
    border: 1px solid var(--mc-border-strong);
    border-left: 4px solid var(--mc-muted);
    border-radius: var(--mc-radius);
    padding: 18px 20px; margin-bottom: 20px;
    box-shadow: var(--mc-shadow);
}

.mc-decommissioned-icon {
    width: 44px; height: 44px; border-radius: 11px; flex: none;
    background: #F2F4F7; color: var(--mc-muted);
    display: inline-flex; align-items: center; justify-content: center; font-size: 23px;
}

.mc-decommissioned-body { flex: 1; min-width: 240px; }
.mc-decommissioned-body strong { display: block; font-size: 15.5px; font-weight: 700; color: var(--mc-ink); }
.mc-decommissioned-body p { margin: 4px 0 0; font-size: 13.5px; color: var(--mc-muted); max-width: 78ch; }

.mc-decommissioned-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.mc-decommissioned-meta span {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--mc-surface); border: 1px solid var(--mc-border);
    border-radius: 99px; padding: 4px 11px;
    font-size: 11.5px; font-weight: 700; color: var(--mc-ink-2);
}

.mc-decommissioned-meta .ti { font-size: 14px; color: var(--mc-muted-2); }
.mc-decommissioned-actions { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }

/* ─────────────────────────── Notification dot ─────────────────────────── */

.mc-badge-count {
    position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px;
    padding: 0 5px; border-radius: 99px; background: var(--mc-danger); color: #fff;
    font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center;
    border: 2px solid var(--mc-surface);
}

/* ─────────────────────────── Alerts ─────────────────────────── */

.alert { border: 1px solid var(--mc-border); border-radius: var(--mc-radius); font-size: 13.5px; padding: 13px 16px; }
.alert-success { background: var(--mc-success-soft); border-color: #A6F4C5; color: var(--mc-success-ink); }
.alert-danger { background: var(--mc-danger-soft); border-color: #FECDCA; color: var(--mc-danger-ink); }

/* ─────────────────────────── Responsive ─────────────────────────── */

@media (max-width: 991.98px) {
    /* The mobile drawer is toggled by #mobile_btn, which puts .slide-nav on
       .main-wrapper — there is no .open class anywhere in the theme. Keying the
       reveal off .open (as this file used to) left the drawer permanently
       off-screen, and orun-system.css independently translates it out with
       no reveal path of its own, so the sidebar could not be opened at all. */
    .page-wrapper { margin-left: 0 !important; }
    .header .header-left { width: auto !important; border-right: 0 !important; }
    .header #header-search .input-group-flat { min-width: 0; }
}

/* ============================================================================
   APP-SCOPE AUTHORITY
   ----------------------------------------------------------------------------
   orun-customer-v2.css and orun-admin-v2.css still scope their
   bespoke chrome under `.mc-customer-app` / `.mc-admin-app`, which outranks the
   unscoped design-system selectors above (0,2,3 vs 0,1,3) even though this file
   loads later. Until those files are torn down module by module, the design
   system re-asserts itself at equal scope here.

   Delete a block below the moment its bespoke counterpart is removed.
   ========================================================================== */

.mc-customer-app .card,
.mc-admin-app .card {
    background: var(--mc-surface) !important;
    border: 1px solid var(--mc-border) !important;
    border-radius: var(--mc-radius) !important;
    box-shadow: var(--mc-shadow) !important;
}

.mc-customer-app .card-header,
.mc-admin-app .card-header {
    background: var(--mc-surface) !important;
    border-bottom: 1px solid var(--mc-border) !important;
    padding: 16px 20px !important;
    border-radius: var(--mc-radius) var(--mc-radius) 0 0 !important;
}

.mc-customer-app .card-body,
.mc-admin-app .card-body { padding: 20px !important; }

.mc-customer-app .card-footer,
.mc-admin-app .card-footer {
    background: var(--mc-surface) !important;
    border-top: 1px solid var(--mc-border) !important;
    padding: 13px 20px !important;
}

/* Tables — banded head, zebra body, status rail, no squeezing. */
.mc-customer-app .table,
.mc-admin-app .table { min-width: max-content; margin: 0; color: var(--mc-ink-2); }

.mc-customer-app .table > thead > tr > th,
.mc-admin-app .table > thead > tr > th {
    background: linear-gradient(180deg, #FBFCFE 0%, var(--mc-surface-alt) 100%) !important;
    border-bottom: 1px solid var(--mc-border-strong) !important;
    border-top: 0 !important;
    padding: 11px 16px !important;
    font-size: 10.5px !important; font-weight: 700 !important;
    letter-spacing: .07em; text-transform: uppercase; white-space: nowrap;
    color: var(--mc-muted-2) !important;
}

.mc-customer-app .table > tbody > tr > td,
.mc-admin-app .table > tbody > tr > td {
    padding: 14px 16px !important;
    border-bottom: 1px solid var(--mc-border) !important;
    border-top: 0 !important;
    font-size: 13.5px; vertical-align: middle; white-space: nowrap;
    background: var(--mc-surface);
}

.mc-customer-app .table > tbody > tr:nth-child(even) > td,
.mc-admin-app .table > tbody > tr:nth-child(even) > td { background: #FCFDFE; }

.mc-customer-app .table > tbody > tr:last-child > td,
.mc-admin-app .table > tbody > tr:last-child > td { border-bottom: 0 !important; }

.mc-customer-app .table > tbody > tr[data-tone] > td:first-child,
.mc-admin-app .table > tbody > tr[data-tone] > td:first-child {
    box-shadow: inset 3px 0 0 var(--mc-row-accent, transparent);
}

.mc-customer-app .table > tbody > tr[data-href]:hover > td,
.mc-admin-app .table > tbody > tr[data-href]:hover > td,
.mc-customer-app .table-hover > tbody > tr:hover > td,
.mc-admin-app .table-hover > tbody > tr:hover > td { background: var(--mc-primary-soft) !important; }

/* Bootstrap paints row backgrounds with a 9999px inset shadow; it would cover
   the status rail, so neutralise it inside the design system's tables. */
.mc-customer-app .table > :not(caption) > * > *,
.mc-admin-app .table > :not(caption) > * > * { box-shadow: none; }

.mc-customer-app .table > tbody > tr[data-tone] > td:first-child,
.mc-admin-app .table > tbody > tr[data-tone] > td:first-child {
    box-shadow: inset 3px 0 0 var(--mc-row-accent, transparent) !important;
}

.mc-customer-app .modal-content,
.mc-admin-app .modal-content {
    border: 0 !important; border-radius: 14px !important;
    box-shadow: 0 20px 48px rgba(16, 24, 40, .18) !important;
}

/* Column semantics must also be re-asserted at app scope — the generic
   `.mc-col-*` rules lose to `.mc-customer-app .table > tbody > tr > td` above. */
.mc-customer-app .table > tbody > tr > td.mc-col-tint,
.mc-admin-app .table > tbody > tr > td.mc-col-tint,
.mc-customer-app .table > thead > tr > th.mc-col-tint,
.mc-admin-app .table > thead > tr > th.mc-col-tint { background: rgba(29, 111, 242, .045) !important; }

.mc-customer-app .table > tbody > tr:hover > td.mc-col-tint,
.mc-admin-app .table > tbody > tr:hover > td.mc-col-tint { background: transparent !important; }

.mc-customer-app .table > tbody > tr > td.mc-col-meta,
.mc-admin-app .table > tbody > tr > td.mc-col-meta,
.mc-customer-app .table > tbody > tr > td.mc-col-meta .mc-cell-title,
.mc-admin-app .table > tbody > tr > td.mc-col-meta .mc-cell-title { color: var(--mc-muted) !important; font-weight: 500 !important; }

.mc-customer-app .table > tbody > tr > td.mc-col-id .mc-cell-title,
.mc-admin-app .table > tbody > tr > td.mc-col-id .mc-cell-title { color: var(--mc-ink) !important; font-weight: 700 !important; }

.mc-customer-app .table > tbody > tr > td.mc-col-machine,
.mc-admin-app .table > tbody > tr > td.mc-col-machine,
.mc-customer-app .mc-col-machine,
.mc-admin-app .mc-col-machine {
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace !important;
    font-size: 12.5px;
}

/* ============================================================================
   COLLAPSED SIDEBAR  (body.mini-sidebar, toggled by #toggle_btn)
   ----------------------------------------------------------------------------
   The Adanex theme collapses to 72px, but the design system pins .sidebar,
   .page-wrapper and .header-left widths with !important — so every pinned value
   has to be released explicitly here or the collapse does nothing.

   Sidebar labels are <span> in every item (normalised in platform.blade.php);
   hiding them is what makes the rail work.
   ========================================================================== */

.mini-sidebar .sidebar { width: 76px !important; overflow: visible !important; }
.mini-sidebar .page-wrapper { margin-left: 76px !important; }

.mini-sidebar .header .header-left {
    width: 76px !important; padding-left: 0 !important; justify-content: center;
}

.mini-sidebar .mc-wordmark { justify-content: center; }
.mini-sidebar .mc-wordmark-name { display: none; }

/* Workspace card becomes a single glyph. */
.mini-sidebar .mc-sidebar-label { display: none; }
.mini-sidebar .mc-sidebar-workspace { padding: 14px 12px 6px; }

.mini-sidebar .mc-sidebar-workspace-card { justify-content: center; padding: 10px 0; }
.mini-sidebar .mc-sidebar-workspace-card > span,
.mini-sidebar .mc-sidebar-workspace-card .ti-chevron-down { display: none; }
.mini-sidebar .mc-sidebar-workspace-card > .ti:first-child { font-size: 20px; }

/* Section headings collapse to a rule, keeping the grouping legible. */
.mini-sidebar #sidebar-menu .menu-title { padding: 14px 0 8px !important; }
.mini-sidebar #sidebar-menu .menu-title span { display: none; }

.mini-sidebar #sidebar-menu .menu-title::after {
    content: ""; display: block; height: 1px; background: var(--mc-border); margin: 0 20px;
}

/* Icon rail. */
.mini-sidebar #sidebar-menu ul li a {
    justify-content: center; padding: 11px 0 !important; margin: 2px 12px;
}

.mini-sidebar #sidebar-menu ul li a span { display: none; }
.mini-sidebar #sidebar-menu ul li a i { font-size: 20px !important; }

/* Hovering the rail temporarily restores the full sidebar (theme adds
   .expand-menu on hover), so labels are one mouse-over away. */
.mini-sidebar.expand-menu .sidebar { width: var(--mc-sidebar-w) !important; }
.mini-sidebar.expand-menu .mc-sidebar-label { display: block; }
.mini-sidebar.expand-menu .mc-sidebar-workspace { padding: 16px 16px 8px; }
.mini-sidebar.expand-menu .mc-sidebar-workspace-card { justify-content: flex-start; padding: 10px 12px; }
.mini-sidebar.expand-menu .mc-sidebar-workspace-card > span,
.mini-sidebar.expand-menu .mc-sidebar-workspace-card .ti-chevron-down { display: flex; }
.mini-sidebar.expand-menu .mc-sidebar-workspace-card .ti-chevron-down { display: inline-block; }
.mini-sidebar.expand-menu #sidebar-menu .menu-title { padding: 18px 12px 6px !important; }
.mini-sidebar.expand-menu #sidebar-menu .menu-title span { display: inline; }
.mini-sidebar.expand-menu #sidebar-menu .menu-title::after { display: none; }
.mini-sidebar.expand-menu #sidebar-menu ul li a { justify-content: flex-start; padding: 9px 12px !important; margin: 1px 0; }
.mini-sidebar.expand-menu #sidebar-menu ul li a span { display: inline; }
.mini-sidebar.expand-menu #sidebar-menu ul li a i { font-size: 18px !important; }

/* The toggle glyph should point the other way once collapsed. */
.mini-sidebar #toggle_btn i::before { content: "\ea6c"; }

/* ── Test mode pill: re-asserted at app scope ──
   orun-customer-v2.css scopes .mc-test-mode under .mc-customer-app and
   was repainting it blue. */
.mc-customer-app .mc-test-mode,
.mc-admin-app .mc-test-mode {
    color: var(--mc-warning-ink) !important;
    background: var(--mc-warning-soft) !important;
    border: 1px solid #FEDF89 !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.mc-customer-app .mc-test-mode .ti,
.mc-admin-app .mc-test-mode .ti { color: var(--mc-warning) !important; }

/* Header seam: the logo cell and the toolbar must share one baseline border. */
.mc-customer-app .header .header-left,
.mc-admin-app .header .header-left { border-right: 1px solid var(--mc-border) !important; }

/* ── Sidebar width: one number, applied at a specificity that actually wins ──
   orun-system.css pins `.main-wrapper .sidebar` to 220px !important
   (0,2,0), which outranks a bare `.sidebar` rule — so the rail rendered 220px
   while the header logo cell used --mc-sidebar-w (246px), leaving a visible
   seam between them. Both are driven from the same variable here. */

.main-wrapper .sidebar { width: var(--mc-sidebar-w) !important; }
.mini-sidebar .main-wrapper .sidebar { width: 76px !important; }

.main-wrapper .page-wrapper { margin-left: var(--mc-sidebar-w) !important; }
.mini-sidebar .main-wrapper .page-wrapper { margin-left: 76px !important; }

.mc-customer-app .header .header-left,
.mc-admin-app .header .header-left { width: var(--mc-sidebar-w) !important; }

.mini-sidebar.mc-customer-app .header .header-left,
.mini-sidebar.mc-admin-app .header .header-left { width: 76px !important; padding-left: 0 !important; }

@media (max-width: 991.98px) {
    .main-wrapper .sidebar,
    .mini-sidebar .main-wrapper .sidebar { width: var(--mc-sidebar-w) !important; }
    .main-wrapper .page-wrapper,
    .mini-sidebar .main-wrapper .page-wrapper { margin-left: 0 !important; }
    .mc-customer-app .header .header-left,
    .mc-admin-app .header .header-left { width: auto !important; }
}

/* The header logo cell also carries min-width: 220px from orun-system.css.
   `width` alone cannot shrink past it — computed width reports the *used* value,
   which stayed clamped at 220px while the rail collapsed to 76px, leaving the
   logo cell overhanging the sidebar. Release the clamp alongside the width. */

.mc-customer-app .header .header-left,
.mc-admin-app .header .header-left { min-width: var(--mc-sidebar-w) !important; }

.mini-sidebar.mc-customer-app .header .header-left,
.mini-sidebar.mc-admin-app .header .header-left { min-width: 76px !important; }

.mini-sidebar .main-wrapper .sidebar { min-width: 76px !important; }
.main-wrapper .sidebar { min-width: var(--mc-sidebar-w) !important; }

@media (max-width: 991.98px) {
    .mc-customer-app .header .header-left,
    .mc-admin-app .header .header-left { min-width: 0 !important; }
}

/* ── Hover-to-peek, at a specificity that beats the collapsed width ──
   `.mini-sidebar .main-wrapper .sidebar` (0,3,0) is declared later than
   `.mini-sidebar.expand-menu .sidebar` (0,3,0), so the rail stayed 76px while
   labels were revealed — the text then wrapped inside the narrow rail. These
   rules are (0,4,0) and win, and they also release the min-width clamp. */

.mini-sidebar.expand-menu .main-wrapper .sidebar {
    width: var(--mc-sidebar-w) !important;
    min-width: var(--mc-sidebar-w) !important;
    z-index: 1002;
    box-shadow: 4px 0 24px rgba(16, 24, 40, .10) !important;
}

/* The peek is an overlay: content must not reflow under it. */
.mini-sidebar.expand-menu .main-wrapper .page-wrapper { margin-left: 76px !important; }

/* Labels must never wrap, in any state — a wrapped label is what made the
   half-expanded rail look broken. */
#sidebar-menu ul li a span,
.mc-sidebar-label,
#sidebar-menu .menu-title span {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.mini-sidebar .sidebar,
.mini-sidebar.expand-menu .sidebar { overflow-x: hidden !important; }

/* ─────────────────────────── Work centre / service lines ─────────────────────────── */

.mc-service-count {
    min-width: 34px; text-align: right; flex: none;
    font-size: 19px; font-weight: 700; color: var(--mc-ink);
    letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}

.mc-service-count.is-empty { color: var(--mc-muted-2); font-weight: 500; }

/* Work-centre rows carry an action button, so they need a little more room and
   a left rail keyed to severity — the same colour language as the tables. */
.mc-list-row .btn { flex: none; }

a.mc-list-row:hover .btn-light { background: var(--mc-surface) !important; border-color: var(--mc-border-strong) !important; }

.mc-list-row .mc-pill-caps { flex: none; }

/* ============================================================================
   PAGE HEADER
   ----------------------------------------------------------------------------
   Every page except the three hero pages opens with this block, so a user always
   knows where they are, what this screen is for, and what they can do from it.
   ========================================================================== */

/* Every page opens on the same dark command-centre surface as the dashboard, so
   the portal reads as one product rather than a hero page plus 40 plain ones.
   Same gradient, radius and decorative wash as .mc-hero. */
.mc-page-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 20px; flex-wrap: wrap;
    padding: 24px 26px; margin-bottom: 20px;
    background: linear-gradient(115deg, var(--mc-hero-from) 0%, #0B3048 55%, var(--mc-hero-to) 100%);
    border-radius: var(--mc-radius-lg);
    color: #fff;
    position: relative; overflow: hidden;
}

.mc-page-header::before {
    content: ""; position: absolute; width: 420px; height: 420px;
    border-radius: 50%; background: rgba(255, 255, 255, .035);
    top: -190px; right: -70px; pointer-events: none;
}

.mc-page-header > * { position: relative; z-index: 1; }

/* ── Children recoloured for the dark surface ── */

.mc-page-header .mc-crumbs a,
.mc-page-header .mc-crumbs span { color: rgba(255, 255, 255, .68) !important; }
.mc-page-header .mc-crumbs a:hover { color: #fff !important; }
.mc-page-header .mc-crumbs .ti { color: rgba(255, 255, 255, .5); }
.mc-page-header .mc-crumbs .sep { color: rgba(255, 255, 255, .38); }
.mc-page-header .mc-crumbs [aria-current="page"] { color: #fff !important; font-weight: 700; }

.mc-page-header .mc-eyebrow { color: #6EE7B7 !important; }
.mc-page-header .mc-eyebrow .ti { color: #6EE7B7 !important; }

.mc-page-header .mc-page-title { color: #fff !important; }
.mc-page-header .mc-page-subtitle { color: rgba(255, 255, 255, .72) !important; }

/* Fact chips become translucent so they sit on the gradient rather than
   punching white holes in it. */
.mc-page-header .mc-page-meta span,
.mc-page-header .mc-meta-chip {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .16);
    color: rgba(255, 255, 255, .92) !important;
}

.mc-page-header .mc-page-meta .ti,
.mc-page-header .mc-meta-chip .ti { color: rgba(255, 255, 255, .6); }

/* A secondary button on this surface must read as an outline, not a white slab. */
.mc-page-header .mc-page-actions .btn-light,
.mc-page-header .mc-page-actions .btn-light.border {
    background: rgba(255, 255, 255, .08) !important;
    border: 1px solid rgba(255, 255, 255, .24) !important;
    color: #fff !important;
}

.mc-page-header .mc-page-actions .btn-light:hover { background: rgba(255, 255, 255, .16) !important; }

/* Status pills keep their light fills — they stay legible on the gradient and
   carry the same meaning as everywhere else in the app. */

@media (max-width: 767.98px) {
    .mc-page-header { padding: 20px 18px; }
}

.mc-page-header-main { min-width: 0; flex: 1 1 460px; }

/* Breadcrumb — where this page sits. */
.mc-crumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }

.mc-crumbs a,
.mc-crumbs span {
    font-size: 12px; font-weight: 500; color: var(--mc-muted);
    display: inline-flex; align-items: center; gap: 5px;
}

.mc-crumbs a:hover { color: var(--mc-primary); }
.mc-crumbs .ti { font-size: 14px; color: var(--mc-muted-2); }
.mc-crumbs .sep { color: var(--mc-muted-2); font-size: 13px; }
.mc-crumbs [aria-current="page"] { color: var(--mc-ink-2); font-weight: 700; }

/* Module eyebrow — the ERP "you are in this area" label. */
.mc-eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: var(--mc-muted-2); margin-bottom: 6px;
}

.mc-eyebrow .ti { font-size: 14px; color: var(--mc-primary); }

.mc-page-title {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    font-size: 24px; font-weight: 700; color: var(--mc-ink);
    letter-spacing: -.03em; line-height: 1.2; margin: 0;
}

.mc-page-subtitle {
    margin: 6px 0 0; font-size: 13.5px; color: var(--mc-muted);
    max-width: 76ch; line-height: 1.55;
}

/* Facts about the record this page is about — counts, references, timestamps. */
.mc-page-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.mc-page-meta span,
.mc-meta-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--mc-surface); border: 1px solid var(--mc-border);
    border-radius: 99px; padding: 4px 11px;
    font-size: 11.5px; font-weight: 700; color: var(--mc-ink-2); white-space: nowrap;
}

.mc-page-meta .ti,
.mc-meta-chip .ti { font-size: 14px; color: var(--mc-muted-2); }

/* Actions sit on the header's baseline, primary action last (rightmost). */
.mc-page-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

@media (max-width: 767.98px) {
    .mc-page-header { gap: 14px; }
    .mc-page-title { font-size: 21px; }
    .mc-page-actions { width: 100%; }
    .mc-page-actions .btn { flex: 1 1 auto; }
}

/* Section heading inside a page, between stacked cards. */
.mc-section-title {
    display: flex; align-items: center; gap: 9px;
    font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--mc-muted-2); margin: 26px 0 12px;
}

.mc-section-title .ti { font-size: 16px; color: var(--mc-primary); }
.mc-section-title::after { content: ""; flex: 1; height: 1px; background: var(--mc-border); }

/* ============================================================================
   TONE MODIFIERS reported missing by the module rebuilds
   ----------------------------------------------------------------------------
   Each of these existed as a semantic need with no class to express it, so pages
   were falling back to a tone that says the wrong thing — an in-flight row
   reading neutral, a destroyed record reading grey against §4.
   ========================================================================== */

/* Entity tiles had only neutral/success/warning/danger; in-flight and brand
   states had nowhere to go. */
.mc-cell-avatar.info    { background: var(--mc-info-soft);    color: var(--mc-info-ink); }
.mc-cell-avatar.primary { background: var(--mc-primary-soft); color: var(--mc-primary); }

/* .mc-pill had no brand tone, so step markers and counts used neutral. */
.mc-pill-primary { background: var(--mc-primary-soft); color: var(--mc-primary); }

/* Sparkline icons carried size but no colour. */
.mc-spark-icon.primary { background: var(--mc-primary-soft); color: var(--mc-primary); }
.mc-spark-icon.success { background: var(--mc-success-soft); color: var(--mc-success-ink); }
.mc-spark-icon.warning { background: var(--mc-warning-soft); color: var(--mc-warning-ink); }
.mc-spark-icon.danger  { background: var(--mc-danger-soft);  color: var(--mc-danger-ink); }
.mc-spark-icon.info    { background: var(--mc-info-soft);    color: var(--mc-info-ink); }
.mc-spark-icon.neutral { background: #F2F4F7;                color: var(--mc-muted); }

/* §4 says a destroyed resource must be noticed. The decommissioned band shipped
   with a grey rail, which reads as background detail — the exact failure the
   rule exists to prevent. Tone modifiers let the band match the record's state:
   terminated is red, a retention window or queued deletion is amber. */
.mc-decommissioned.is-terminated { border-left-color: var(--mc-danger); }
.mc-decommissioned.is-terminated .mc-decommissioned-icon { background: var(--mc-danger-soft); color: var(--mc-danger-ink); }

.mc-decommissioned.is-pending { border-left-color: var(--mc-warning); }
.mc-decommissioned.is-pending .mc-decommissioned-icon { background: var(--mc-warning-soft); color: var(--mc-warning-ink); }

/* Selectable option row — plan pickers on the order and checkout journeys were
   composing this from Bootstrap form-check utilities. */
.mc-option-card {
    display: flex; align-items: flex-start; gap: 13px;
    border: 1px solid var(--mc-border); border-radius: var(--mc-radius);
    padding: 14px 16px; background: var(--mc-surface); cursor: pointer;
    transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}

.mc-option-card:hover { border-color: var(--mc-border-strong); background: var(--mc-surface-alt); }

.mc-option-card:has(input:checked) {
    border-color: var(--mc-primary); background: var(--mc-primary-soft);
    box-shadow: 0 0 0 1px var(--mc-primary);
}

.mc-option-card:has(input:focus-visible) { outline: 2px solid var(--mc-primary); outline-offset: 2px; }
.mc-option-card-body { flex: 1; min-width: 0; }
.mc-option-card-title { display: block; font-size: 14px; font-weight: 700; color: var(--mc-ink); }
.mc-option-card-sub { display: block; font-size: 12px; color: var(--mc-muted); margin-top: 2px; }
.mc-option-card-price { flex: none; text-align: right; font-size: 15px; font-weight: 700; color: var(--mc-ink); font-variant-numeric: tabular-nums; }

/* Long-form document body — legal pages need a reading measure and must honour
   stored line breaks. */
.mc-prose {
    max-width: 78ch; font-size: 14.5px; line-height: 1.75; color: var(--mc-ink-2);
    white-space: pre-wrap; overflow-wrap: anywhere;
}

.mc-prose h1, .mc-prose h2, .mc-prose h3 { margin: 1.6em 0 .5em; font-weight: 700; }
.mc-prose h1:first-child, .mc-prose h2:first-child { margin-top: 0; }

/* Key/value facts — used by detail panels that previously hand-rolled a grid. */
.mc-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.mc-kv-item { min-width: 0; }
.mc-kv-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mc-muted-2); margin-bottom: 3px; }
.mc-kv-value { display: block; font-size: 13.5px; font-weight: 700; color: var(--mc-ink); overflow-wrap: anywhere; }

/* ============================================================================
   FOOTER
   ----------------------------------------------------------------------------
   The old footer printed a full timestamp as a copyright line and a dead
   javascript:void(0) credit link. This one carries what an operator can act on:
   the policies actually published, a route into support or the audit trail, and
   a plain statement when the environment is not production.
   ========================================================================== */

.mc-footer {
    display: flex; align-items: center; justify-content: space-between;
    gap: 18px 26px; flex-wrap: wrap;
    margin: 28px 24px 0;
    padding: 18px 22px;
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius);
    box-shadow: var(--mc-shadow);
}

.mc-footer-brand { display: flex; align-items: center; gap: 11px; min-width: 0; }

.mc-footer-mark {
    width: 34px; height: 34px; border-radius: 9px; flex: none;
    background: var(--mc-primary-soft); color: var(--mc-primary);
    display: inline-flex; align-items: center; justify-content: center; font-size: 18px;
}

.mc-footer-brand strong { display: block; font-size: 13.5px; font-weight: 700; color: var(--mc-ink); line-height: 1.3; }
.mc-footer-brand span { display: block; font-size: 11.5px; color: var(--mc-muted-2); }

.mc-footer-links { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.mc-footer-links a {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 11px; border-radius: 99px;
    font-size: 12.5px; font-weight: 500; color: var(--mc-muted); white-space: nowrap;
}

.mc-footer-links a:hover { background: var(--mc-surface-alt); color: var(--mc-primary); }
.mc-footer-links a .ti { font-size: 15px; }

.mc-footer-meta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.mc-footer-meta > span { font-size: 11.5px; color: var(--mc-muted-2); white-space: nowrap; }

.mc-footer-env {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 99px;
    background: var(--mc-warning-soft); border: 1px solid #FEDF89;
    color: var(--mc-warning-ink) !important; font-weight: 700;
}

.mc-footer-env .ti { font-size: 14px; color: var(--mc-warning); }

@media (max-width: 767.98px) {
    .mc-footer { margin: 20px 13px 0; padding: 16px; gap: 14px; }
    .mc-footer-links { order: 3; width: 100%; }
}

/* ============================================================================
   MOBILE NAVIGATION DRAWER
   ----------------------------------------------------------------------------
   #mobile_btn toggles .slide-nav on .main-wrapper (and .menu-opened on <html>).
   Both the Adanex theme and orun-system.css hide the sidebar off-screen
   below 992px, but neither ships a reveal that survives the design system's
   width overrides — so the drawer could be opened in the DOM and never seen.
   ========================================================================== */

@media (max-width: 991.98px) {
    .main-wrapper .sidebar,
    .mini-sidebar .main-wrapper .sidebar {
        width: var(--mc-sidebar-w) !important;
        min-width: var(--mc-sidebar-w) !important;
        max-width: 86vw;
        transform: translateX(-100%);
        transition: transform .26s ease;
        margin-left: 0 !important;
        top: var(--mc-header-h) !important;
        height: calc(100% - var(--mc-header-h));
        overflow-y: auto;
        z-index: 1041;
        box-shadow: 8px 0 32px rgba(16, 24, 40, .18);
    }

    /* The reveal. Specificity (0,3,0) beats orun-system.css's
       `.main-wrapper .sidebar` (0,2,0), and it is declared later. */
    .main-wrapper.slide-nav .sidebar,
    .mini-sidebar .main-wrapper.slide-nav .sidebar {
        transform: translateX(0) !important;
    }

    /* A collapsed rail makes no sense in a drawer: always show full labels. */
    .mini-sidebar .main-wrapper.slide-nav #sidebar-menu ul li a { justify-content: flex-start; padding: 9px 12px !important; margin: 1px 0; }
    .mini-sidebar .main-wrapper.slide-nav #sidebar-menu ul li a span { display: inline; }
    .mini-sidebar .main-wrapper.slide-nav .mc-sidebar-label { display: block; }
    .mini-sidebar .main-wrapper.slide-nav #sidebar-menu .menu-title span { display: inline; }
    .mini-sidebar .main-wrapper.slide-nav #sidebar-menu .menu-title::after { display: none; }
    .mini-sidebar .main-wrapper.slide-nav .mc-sidebar-workspace-card { justify-content: flex-start; padding: 10px 12px; }
    .mini-sidebar .main-wrapper.slide-nav .mc-sidebar-workspace-card > span,
    .mini-sidebar .main-wrapper.slide-nav .mc-sidebar-workspace-card .ti-chevron-down { display: flex; }

    /* Dim the page behind the drawer so the drawer reads as modal. */
    .main-wrapper.slide-nav::after {
        content: ""; position: fixed; inset: var(--mc-header-h) 0 0 0;
        background: rgba(16, 24, 40, .45);
        z-index: 1040; pointer-events: none;
    }

    /* The collapse toggle is meaningless on mobile; the drawer button replaces it. */
    #toggle_btn { display: none !important; }
}

/* ============================================================================
   ADMIN THEME
   ----------------------------------------------------------------------------
   Admin and the customer portal share one design system; only the accent
   differs, so an operator can tell at a glance which estate they are acting on.
   Retargeting the token recolours every component at once — buttons, tiles,
   pills, rails, links — without a second set of classes to maintain.
   ========================================================================== */

.mc-admin-app {
    --mc-primary: #0F766E;
    --mc-primary-hover: #115E59;
    --mc-primary-soft: #F0FDFA;
    --mc-hero-from: #06231F;
    --mc-hero-to: #0B3B39;
}

/* The admin shell defines its own sidebar width; keep the design system's
   geometry in step with it so the header cell and rail cannot disagree. */
.mc-admin-app { --mc-sidebar-w: 260px; }

.mc-admin-app .mc-page-header .mc-eyebrow,
.mc-admin-app .mc-page-header .mc-eyebrow .ti { color: #5EEAD4 !important; }

/* ============================================================================
   FILTER TOOLBAR
   ----------------------------------------------------------------------------
   Registers were composing filters from raw Bootstrap utilities, which stacked
   the controls into a tall column beside the card title and pushed the table
   below the fold. A register's filters are a toolbar: one row, aligned, with
   the result count and the reset beside the controls that produced them.
   ========================================================================== */

.mc-filters {
    display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px;
    padding: 14px 20px;
    background: var(--mc-surface-alt);
    border-bottom: 1px solid var(--mc-border);
}

.mc-filters-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1 1 190px; }
.mc-filters-field.is-wide { flex: 2 1 280px; }
.mc-filters-field.is-tight { flex: 0 0 auto; }

.mc-filters-label {
    font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--mc-muted-2); white-space: nowrap;
}

.mc-filters .form-control,
.mc-filters .form-select {
    height: 38px; padding: 0 12px; font-size: 13px;
    border: 1px solid var(--mc-border-strong); border-radius: var(--mc-radius-sm);
    background: var(--mc-surface); color: var(--mc-ink-2);
}

.mc-filters .form-control:focus,
.mc-filters .form-select:focus { border-color: var(--mc-primary); box-shadow: 0 0 0 3px rgba(29, 111, 242, .12); }

/* Search field carries its glyph inside the control. */
.mc-filters-search { position: relative; }
.mc-filters-search .form-control { padding-left: 34px; }

.mc-filters-search > .ti {
    position: absolute; left: 12px; top: auto; bottom: 20px; transform: translateY(50%);
    font-size: 16px; line-height: 1; color: var(--mc-muted-2); pointer-events: none;
}

/* Buttons sit on the control baseline, never on the label baseline. */
.mc-filters-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.mc-filters-actions .btn { height: 38px; }

/* The count belongs with the filters that produced it. */
.mc-filters-count {
    display: inline-flex; align-items: center; gap: 6px;
    margin-left: auto; align-self: center;
    padding: 5px 12px; border-radius: 99px;
    background: var(--mc-surface); border: 1px solid var(--mc-border);
    font-size: 12px; font-weight: 700; color: var(--mc-ink-2); white-space: nowrap;
}

.mc-filters-count .ti { font-size: 15px; color: var(--mc-muted-2); }

/* Applied filters, so an empty table is never a mystery. */
.mc-filters-applied { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; padding: 10px 20px; border-bottom: 1px solid var(--mc-border); }

.mc-filter-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 4px 10px; border-radius: 99px;
    background: var(--mc-primary-soft); color: var(--mc-primary);
    font-size: 11.5px; font-weight: 700;
}

.mc-filter-chip a { color: inherit; display: inline-flex; opacity: .7; }
.mc-filter-chip a:hover { opacity: 1; }

@media (max-width: 767.98px) {
    .mc-filters { padding: 12px 16px; }
    .mc-filters-field { flex: 1 1 100%; }
    .mc-filters-count { margin-left: 0; }
}

/* ============================================================================
   FORMS
   ----------------------------------------------------------------------------
   One definition for every input in both portals. The admin stylesheets had been
   forcing 9px controls and 8.5px labels with !important, which inverted the
   hierarchy — helper text rendered larger than the field it described. Those
   rules are gone; this is now the only place form typography is set.
   ========================================================================== */

.form-label {
    display: block;
    font-size: 12.5px; font-weight: 700; line-height: 1.4;
    color: var(--mc-ink-2); margin-bottom: 6px;
}

.form-label .optional,
.form-label .text-muted { font-weight: 500; color: var(--mc-muted-2); }

.form-control,
.form-select {
    min-height: 40px; padding: 9px 13px;
    font-size: 13.5px; font-weight: 500; line-height: 1.45;
    color: var(--mc-ink); background-color: var(--mc-surface);
    border: 1px solid var(--mc-border-strong); border-radius: var(--mc-radius-sm);
    box-shadow: none;
}

textarea.form-control { min-height: 96px; padding: 11px 13px; }

.form-control::placeholder { color: var(--mc-muted-2); font-weight: 500; }

.form-control:focus,
.form-select:focus {
    border-color: var(--mc-primary);
    box-shadow: 0 0 0 3px rgba(29, 111, 242, .12);
    background-color: var(--mc-surface);
}

.form-control:disabled,
.form-select:disabled,
.form-control[readonly] { background-color: var(--mc-surface-alt); color: var(--mc-muted); }

.form-select { padding-right: 34px; background-position: right 12px center; }

/* Helper text must read as secondary to the field it explains. */
.form-text,
.form-control + small,
.form-select + small {
    display: block; margin-top: 5px;
    font-size: 11.5px; font-weight: 500; line-height: 1.5; color: var(--mc-muted);
}

/* Validation */
.form-control.is-invalid,
.form-select.is-invalid { border-color: var(--mc-danger); }
.invalid-feedback { font-size: 11.5px; font-weight: 700; color: var(--mc-danger-ink); margin-top: 5px; }

/* Checkboxes and radios sit on the same baseline as their label. */
.form-check { display: flex; align-items: center; gap: 9px; padding-left: 0; margin-bottom: 0; min-height: 0; }
.form-check .form-check-input { float: none; margin: 0; flex: none; }

.form-check-input {
    width: 17px; height: 17px; margin-top: 0;
    border: 1px solid var(--mc-border-strong); border-radius: 5px;
    background-color: var(--mc-surface);
}

.form-check-input:checked { background-color: var(--mc-primary); border-color: var(--mc-primary); }
.form-check-input:focus { border-color: var(--mc-primary); box-shadow: 0 0 0 3px rgba(29, 111, 242, .12); }
.form-check-input[type="radio"] { border-radius: 50%; }

.form-check-label { font-size: 13px; font-weight: 500; color: var(--mc-ink-2); margin: 0; cursor: pointer; }

/* Field groups keep a consistent rhythm however a page lays them out. */
.mc-field { display: flex; flex-direction: column; margin-bottom: 16px; }
.mc-field:last-child { margin-bottom: 0; }

/* Both portals share these definitions; re-asserted at app scope because the
   legacy stylesheets still scope other chrome under these classes. */
.mc-customer-app .form-label, .mc-admin-app .form-label { font-size: 12.5px; font-weight: 700; color: var(--mc-ink-2); }

.mc-customer-app .form-control, .mc-admin-app .form-control,
.mc-customer-app .form-select, .mc-admin-app .form-select {
    min-height: 40px; font-size: 13.5px; font-weight: 500; color: var(--mc-ink);
    border: 1px solid var(--mc-border-strong); border-radius: var(--mc-radius-sm);
}

.mc-customer-app .form-text, .mc-admin-app .form-text { font-size: 11.5px; color: var(--mc-muted); }

/* The app-scoped rule above outranks `textarea.form-control`, so a textarea would
   otherwise collapse to a single-line control. Restate it at the same scope. */
.mc-customer-app textarea.form-control,
.mc-admin-app textarea.form-control { min-height: 96px; height: auto; padding: 11px 13px; }

/* The filter toolbar keeps its own compact control height. */
.mc-filters .form-control,
.mc-filters .form-select { min-height: 38px; height: 38px; padding: 0 12px; font-size: 13px; }
.mc-filters-search .form-control { padding-left: 36px; }

/* ============================================================================
   SELECT2
   ----------------------------------------------------------------------------
   Select2 ships its own look, which shares nothing with this design system. Every
   rule below exists to make an enhanced select indistinguishable from the native
   .form-select it replaced — same height, border, radius, type and focus ring —
   so a form does not become a patchwork of two styles.

   The dropdown panel is appended to <body>, outside .mc-customer-app, so these
   selectors are deliberately unscoped.
   ========================================================================== */

.select2-container { width: 100% !important; }

/* ── Closed control ── */
.select2-container--default .select2-selection--single {
    display: flex; align-items: center;
    height: 40px; padding: 0 13px;
    background: var(--mc-surface);
    border: 1px solid var(--mc-border-strong);
    border-radius: var(--mc-radius-sm);
    outline: none;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0; line-height: 1.45;
    font-family: var(--mc-font); font-size: 13.5px; font-weight: 500;
    color: var(--mc-ink);
}

.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--mc-muted-2); }

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px; right: 10px; width: 18px;
}

/* Replace the CSS-triangle caret with a chevron that matches the icon set. */
.select2-container--default .select2-selection--single .select2-selection__arrow b { display: none; }

.select2-container--default .select2-selection--single .select2-selection__arrow::after {
    content: ""; position: absolute; top: 50%; right: 3px;
    width: 8px; height: 8px; margin-top: -5px;
    border-right: 1.8px solid var(--mc-muted-2);
    border-bottom: 1.8px solid var(--mc-muted-2);
    transform: rotate(45deg);
}

.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default .select2-selection--single:focus {
    border-color: var(--mc-primary);
    box-shadow: 0 0 0 3px rgba(29, 111, 242, .12);
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow::after {
    transform: rotate(-135deg); margin-top: -2px; border-color: var(--mc-primary);
}

.select2-container--default.select2-container--disabled .select2-selection--single {
    background: var(--mc-surface-alt); cursor: not-allowed;
}

/* ── Dropdown panel ── */
.select2-container--default .select2-dropdown {
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius);
    box-shadow: 0 12px 32px rgba(16, 24, 40, .14);
    overflow: hidden;
    margin-top: 4px;
}

.select2-container--default .select2-dropdown--above { margin-top: -4px; }

.select2-container--default .select2-search--dropdown { padding: 10px 10px 6px; }

.select2-container--default .select2-search--dropdown .select2-search__field {
    height: 36px; padding: 0 11px;
    font-family: var(--mc-font); font-size: 13px; font-weight: 500;
    color: var(--mc-ink);
    border: 1px solid var(--mc-border-strong);
    border-radius: var(--mc-radius-sm);
    outline: none;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--mc-primary); box-shadow: 0 0 0 3px rgba(29, 111, 242, .12);
}

.select2-container--default .select2-results > .select2-results__options {
    max-height: 260px; padding: 6px;
}

.select2-container--default .select2-results__option {
    padding: 8px 11px; border-radius: var(--mc-radius-sm);
    font-family: var(--mc-font); font-size: 13px; font-weight: 500;
    color: var(--mc-ink-2);
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted {
    background: var(--mc-surface-alt); color: var(--mc-ink);
}

.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option--selected {
    background: var(--mc-primary-soft); color: var(--mc-primary); font-weight: 700;
}

.select2-container--default .select2-results__message { color: var(--mc-muted); font-size: 13px; padding: 10px 11px; }

/* ── Multi-select ── */
.select2-container--default .select2-selection--multiple {
    min-height: 40px; padding: 4px 8px;
    background: var(--mc-surface);
    border: 1px solid var(--mc-border-strong);
    border-radius: var(--mc-radius-sm);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    display: inline-flex; align-items: center; gap: 6px;
    margin: 3px 4px 3px 0; padding: 3px 9px;
    background: var(--mc-primary-soft); border: 1px solid #B2CCFF; border-radius: 99px;
    font-size: 12px; font-weight: 700; color: var(--mc-primary);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--mc-primary); border: 0; background: none; font-size: 14px; padding: 0; margin: 0;
}

/* ── Inside the filter toolbar, controls are the compact 38px height ── */
.mc-filters .select2-container--default .select2-selection--single { height: 38px; padding: 0 12px; }
.mc-filters .select2-container--default .select2-selection--single .select2-selection__rendered { font-size: 13px; }
.mc-filters .select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; }

/* ── On the dark page header, an enhanced select must stay legible ── */
.mc-page-header .select2-container--default .select2-selection--single {
    background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .24);
}

.mc-page-header .select2-container--default .select2-selection--single .select2-selection__rendered { color: #fff; }

/* ============================================================================
   BRAND LOGO
   ----------------------------------------------------------------------------
   The supplied artwork is a 2:1 canvas whose content fills only ~37% of it, with
   a tagline that renders around 4px tall at header size. It is therefore cropped
   to two derivatives — the lockup, and the mark alone — rather than scaled whole,
   which would have shown a tiny logo swimming in whitespace.

   The source has a baked white background (rgb(254,254,255)), so it is only used
   on the white header. The dark variant's background is rgb(1,4,18), which does
   not match either hero gradient, so it is deliberately not used there.
   ========================================================================== */

.mc-wordmark { display: inline-flex; align-items: center; gap: 0; }

.mc-logo-lockup { display: block; height: 32px; width: auto; }
.mc-logo-mark { display: none; height: 28px; width: auto; }

/* Collapsed rail and narrow viewports have no room for the wordmark. */
.mini-sidebar .mc-logo-lockup { display: none; }
.mini-sidebar .mc-logo-mark { display: block; }

@media (max-width: 991.98px) {
    .mc-logo-lockup { height: 28px; }
}

@media (max-width: 575.98px) {
    .mc-logo-lockup { display: none; }
    .mc-logo-mark { display: block; }
}