/* ============================================================================
   VNR Validation Dashboard — "Ledger" design system
   ----------------------------------------------------------------------------
   One idea runs through this file: the product is a ledger, so figures line up.
   Every number in the app (ids, counts, dates, amounts) is set in IBM Plex Mono
   with tabular figures; prose is IBM Plex Sans; page titles are IBM Plex Serif
   and nothing else is. Colour carries status, never decoration:
       ledger green = cleared      ochre = deferred
       stamp red    = overdue      graphite = pending / neutral

   Bootstrap 5.3 loads before this file. Where possible we set Bootstrap's own
   custom properties instead of fighting its rules, so hover / focus / disabled
   states follow automatically and specificity stays flat.
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */

:root {
    /* Surfaces */
    --paper:        #f5f6f3;   /* page ground — warm grey-green, ledger stock */
    --sheet:        #ffffff;
    --sheet-sunk:   #fafbf9;
    --rule:         #e1e5e0;   /* hairline */
    --rule-strong:  #ccd2cb;

    /* Ink */
    --ink:          #16211d;   /* headings and body emphasis */
    --ink-soft:     #2b3a34;
    --graphite:     #5b6660;   /* secondary text */
    --graphite-dim: #8b948e;   /* tertiary / placeholder */

    /* The navigation surface is its own token rather than --ink: the panel
       wanted lifting without also lightening every heading on every page. */
    --nav:          #2f403a;
    --nav-rule:     rgba(255, 255, 255, 0.12);
    --nav-hover:    rgba(255, 255, 255, 0.08);
    --nav-active:   rgba(255, 255, 255, 0.13);

    /* Status */
    --ledger:       #17654e;   /* accent: in the black */
    --ledger-600:   #12523f;
    --ledger-100:   #e3efea;
    --stamp:        #a3322c;   /* overdue, rejected, destructive */
    --stamp-100:    #f7e6e4;
    --ochre:        #9a6414;   /* deferred, waiting — carries white on it */
    --ochre-700:    #8f5c12;   /* ochre text on the ochre tint, 4.9:1 */
    --ochre-100:    #f8eeda;
    --slate:        #3f5a72;   /* informational */
    --slate-100:    #e6edf3;

    /* Type */
    --font-sans:  'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono:  'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
    --font-serif: 'IBM Plex Serif', Georgia, serif;

    /* Shell */
    --sidebar-w:           244px;
    --sidebar-w-collapsed: 64px;
    --topbar-h:            56px;

    /* Elevation — shallow. A ledger is flat paper. */
    --shadow-sm: 0 1px 2px rgba(22, 33, 29, 0.06);
    --shadow-md: 0 2px 8px rgba(22, 33, 29, 0.08);
    --shadow-lg: 0 12px 32px rgba(22, 33, 29, 0.14);

    --radius:    6px;
    --radius-sm: 4px;

    /* Legacy aliases — older page modules still reference these. */
    --primary-color: var(--ledger);
    --secondary-color: var(--ledger-600);
    --background-color: var(--paper);
    --sidebar-width: var(--sidebar-w);
    --sidebar-width-collapsed: var(--sidebar-w-collapsed);
    --sidebar-bg: var(--nav);
    --sidebar-color: #c3ccc7;
    --active-link-bg: var(--nav-active);
    --active-link-border: var(--ledger);
}

/* --- 2. Bootstrap bridge -------------------------------------------------- */

:root {
    --bs-body-font-family: var(--font-sans);
    --bs-body-font-size: 0.875rem;
    --bs-body-color: var(--ink-soft);
    --bs-body-bg: var(--paper);
    --bs-border-color: var(--rule);
    --bs-border-radius: var(--radius);
    --bs-border-radius-sm: var(--radius-sm);
    --bs-border-radius-lg: 8px;
    --bs-primary: #17654e;
    --bs-primary-rgb: 23, 101, 78;
    --bs-link-color: var(--ledger);
    --bs-link-hover-color: var(--ledger-600);
    --bs-secondary-color: var(--graphite);
    --bs-emphasis-color: var(--ink);
}

/* --- 3. Base -------------------------------------------------------------- */

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--ink-soft);
    background-color: var(--paper);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--ink);
    font-weight: 600;
    letter-spacing: -0.011em;
}

h4 { font-size: 1.0625rem; }
h5 { font-size: 0.9375rem; }
h6 { font-size: 0.8125rem; }

a { text-decoration: none; }
a:hover { text-decoration: underline; }

/* Figures line up. This is the whole design idea, stated once. */
.num,
.mono,
.table td.num,
input[type="date"],
input[type="number"] {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
    letter-spacing: -0.01em;
}

code, kbd, pre, samp { font-family: var(--font-mono); }

::selection { background: var(--ledger-100); color: var(--ink); }

/* Focus is always visible and always the same shape. */
:focus-visible {
    outline: 2px solid var(--ledger);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Scrollbars, restrained. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--rule-strong);
    border: 3px solid var(--paper);
    border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: var(--graphite-dim); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================================
   4. Sign in
   ========================================================================== */

.login-wrapper {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--paper);
    background-image:
        linear-gradient(var(--rule) 1px, transparent 1px),
        linear-gradient(90deg, var(--rule) 1px, transparent 1px);
    background-size: 100% 28px, 28px 100%;
    background-position: -1px -1px;
    padding: 24px;
}

.login-split {
    display: flex;
    width: 100%;
    max-width: 940px;
    min-height: 560px;
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.login-branding {
    flex: 1;
    position: relative;
    background-image: url('/static/assets/login-bg.png');
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 40px;
    color: #fff;
}

.branding-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(12, 24, 20, 0.94) 0%,
        rgba(12, 24, 20, 0.55) 55%,
        rgba(12, 24, 20, 0.15) 100%);
    z-index: 1;
}

.branding-content { position: relative; z-index: 2; }

.branding-logo-wrapper {
    background: #fff;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 24px;
    overflow: hidden;
}

.login-logo { width: 56px; height: 56px; object-fit: contain; }

.branding-title {
    font-family: var(--font-serif);
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.15;
    margin-bottom: 14px;
    letter-spacing: -0.02em;
    color: #fff;
}

.branding-subtitle {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.78);
    max-width: 340px;
    line-height: 1.6;
    margin: 0;
}

.login-form-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 48px;
    background: var(--sheet);
}

.form-container { width: 100%; max-width: 340px; margin: 0 auto; }
.form-header { margin-bottom: 28px; }

.form-title {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 6px;
    letter-spacing: -0.02em;
}

.form-subtitle { color: var(--graphite); font-size: 0.875rem; margin: 0; }

.form-label-premium {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--graphite);
    margin-bottom: 6px;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.input-wrapper, .password-container { position: relative; }

.input-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--graphite-dim);
    transition: color 0.15s ease;
    font-size: 0.8125rem;
}

.form-control-premium {
    width: 100%;
    padding: 11px 14px 11px 38px;
    background: var(--sheet-sunk);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    color: var(--ink);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.form-control-premium::placeholder { color: var(--graphite-dim); }

.form-control-premium:focus {
    background: var(--sheet);
    border-color: var(--ledger);
    box-shadow: 0 0 0 3px var(--ledger-100);
    outline: none;
}

.btn-icon-premium,
.toggle-password-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--graphite-dim);
    cursor: pointer;
    padding: 6px;
    line-height: 1;
    z-index: 10;
}

.btn-icon-premium:hover,
.toggle-password-btn:hover { color: var(--ink); }

.forgot-password-link-premium {
    font-size: 0.8125rem;
    color: var(--ledger);
    font-weight: 500;
}

.btn-premium {
    background: var(--ink);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    padding: 12px 20px;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.875rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background 0.15s ease;
}

.btn-premium:hover { background: var(--ledger); }
.btn-premium:active { background: var(--ledger-600); }

.form-footer {
    text-align: center;
    font-size: 0.75rem;
    color: var(--graphite-dim);
}

@media (max-width: 850px) {
    .login-split { flex-direction: column; min-height: auto; max-width: 460px; }
    .login-branding { height: 220px; flex: none; padding: 32px; justify-content: flex-end; }
    .branding-title { font-size: 1.5rem; margin-bottom: 6px; }
    .branding-subtitle { display: none; }
    .login-form-side { padding: 32px 28px; }
}

/* ============================================================================
   5. Shell — sidebar, topbar, content
   ========================================================================== */

.dashboard-layout { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sidebar-w);
    background: var(--nav);
    color: var(--sidebar-color);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 1030;
    transition: width 0.18s ease;
    border-right: 1px solid var(--nav-rule);
}

.sidebar-collapsed { width: var(--sidebar-w-collapsed); }

.sidebar-header {
    display: flex;
    align-items: center;
    gap: 10px;
    height: var(--topbar-h);
    flex-shrink: 0;
    padding: 0 16px;
    border-bottom: 1px solid var(--nav-rule);
}

.sidebar-logo {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 7px;
    background: #fff;
    padding: 0;
    object-fit: contain;
}

.sidebar-wordmark { min-width: 0; overflow: hidden; }

/* Not `.mark`: Bootstrap owns that name and paints it with a highlighter. */
.sidebar-wordmark .wordmark-name {
    display: block;
    font-family: var(--font-serif);
    font-size: 0.9375rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.1;
    white-space: nowrap;
}

.sidebar-wordmark .sub {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}

.sidebar-collapsed .sidebar-wordmark { display: none; }

.sidebar-nav-container {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 8px 16px;
    overscroll-behavior: contain;
}

.sidebar-nav-container::-webkit-scrollbar { width: 6px; }
.sidebar-nav-container::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.14);
    border: none;
    border-radius: 3px;
}

/* Nav sections encode the workflow: validate, then correct, then analyse,
   then administer. The order is the job, not a taxonomy. */
.nav-section-label {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.46);
    padding: 14px 10px 5px;
    white-space: nowrap;
}

.sidebar-collapsed .nav-section-label {
    padding: 12px 0 6px;
    font-size: 0;
}
.sidebar-collapsed .nav-section-label::after {
    content: '';
    display: block;
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
    margin: 0 12px;
}

#main-nav { list-style: none; padding: 0; margin: 0; }
#main-nav .nav-item { margin: 0; }

.sidebar .nav-link {
    color: var(--sidebar-color);
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8125rem;
    font-weight: 450;
    white-space: nowrap;
    margin: 1px 0;
    border-left: 2px solid transparent;
    transition: background 0.12s ease, color 0.12s ease;
}

.sidebar .nav-link i {
    font-size: 0.8125rem;
    width: 18px;
    flex-shrink: 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    transition: color 0.12s ease;
}

.sidebar .nav-link span { overflow: hidden; text-overflow: ellipsis; }

.sidebar .nav-link:hover {
    color: #fff;
    background: var(--nav-hover);
    text-decoration: none;
}
.sidebar .nav-link:hover i { color: rgba(255, 255, 255, 0.8); }

.sidebar .nav-link.active {
    color: #fff;
    background: var(--nav-active);
    border-left-color: var(--ledger);
    font-weight: 500;
}
.sidebar .nav-link.active i { color: #4bbd96; }

.sidebar-collapsed .nav-link { justify-content: center; padding: 8px 0; gap: 0; }
.sidebar-collapsed .nav-link span { display: none; }
.sidebar-collapsed .nav-link.active { border-left-color: transparent; box-shadow: inset 2px 0 0 var(--ledger); }

.sidebar-footer {
    flex-shrink: 0;
    padding: 10px;
    border-top: 1px solid var(--nav-rule);
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px;
    min-width: 0;
}

.sidebar-avatar {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 5px;
    background: var(--ledger);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.sidebar-identity { min-width: 0; line-height: 1.25; }
.sidebar-identity .name {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-identity .role {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    color: rgba(255, 255, 255, 0.58);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.sidebar-collapsed .sidebar-identity,
.sidebar-collapsed .sidebar-signout span { display: none; }
.sidebar-collapsed .sidebar-user { justify-content: center; padding: 6px 0; }

.sidebar-signout {
    width: 100%;
    margin-top: 6px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.82);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.sidebar-signout:hover {
    background: var(--stamp);
    border-color: var(--stamp);
    color: #fff;
}

/* Legacy hook — older markup used .sidebar-user-info. */
.sidebar-user-info { display: none; }

/* Main column */

.main-content {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: var(--sidebar-w);
    transition: margin-left 0.18s ease;
    background-color: var(--paper);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.main-content-collapsed { margin-left: var(--sidebar-w-collapsed); }

.top-nav {
    height: var(--topbar-h);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 1020;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--rule);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px 0 14px;
    gap: 16px;
}

.top-nav-title { display: flex; align-items: center; min-width: 0; }

#page-header-title {
    font-family: var(--font-serif);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.01em;
}

.sidebar-toggle-button {
    color: var(--graphite);
    background: none;
    border: none;
    font-size: 0.9375rem;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

.sidebar-toggle-button:hover { background: var(--paper); color: var(--ink); }

.top-nav-user-area { display: flex; align-items: center; gap: 6px; }

.btn-topbar,
.top-nav .btn-icon {
    position: relative;
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    border-radius: var(--radius-sm);
    color: var(--graphite);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.btn-topbar:hover { background: var(--paper); color: var(--ink); }
.btn-topbar .fs-22 { font-size: 0.9375rem; }

#notification-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    background: var(--stamp) !important;
    color: #fff;
    font-family: var(--font-mono);
    font-size: 0.5625rem;
    font-weight: 500;
    line-height: 15px;
    border-radius: 8px;
    text-align: center;
    border: 1.5px solid var(--sheet);
}

.dropdown-menu {
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    font-size: 0.8125rem;
    padding: 4px;
}

.dropdown-menu-lg { width: 340px; }

.dropdown-head {
    background: var(--ink) !important;
    border-radius: var(--radius) var(--radius) 0 0;
    margin: -4px -4px 0;
}
.dropdown-head h6 { font-size: 0.8125rem !important; color: #fff; margin: 0; }

.notification-item {
    display: block;
    padding: 9px 11px;
    border-radius: var(--radius-sm);
    border-bottom: 1px solid var(--rule);
    white-space: normal;
}
.notification-item:last-child { border-bottom: none; }
.notification-item:hover { background: var(--paper); text-decoration: none; }
.notification-item p { margin: 0 0 2px; font-size: 0.8125rem; }
.notification-item strong { color: var(--ink); font-weight: 600; }
.notification-item small {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--graphite-dim);
}

#page-content {
    flex: 1 1 auto;
    padding: 20px 24px 40px;
    max-width: 1680px;
    width: 100%;
}

/* ============================================================================
   6. Page furniture
   ========================================================================== */

.page-title {
    font-family: var(--font-serif);
    font-weight: 600;
    color: var(--ink);
    font-size: 1.375rem;
    letter-spacing: -0.02em;
    margin: 0 0 4px;
}

.page-lede {
    color: var(--graphite);
    font-size: 0.8125rem;
    margin: 0 0 18px;
    max-width: 68ch;
}

.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.page-head .page-lede { margin-bottom: 0; }

/* Cards are sheets of paper: hairline border, no drop shadow by default. */
.card {
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    box-shadow: none;
}

.card.shadow-sm, .card.shadow { box-shadow: var(--shadow-sm) !important; }

.card-header {
    background: var(--sheet-sunk);
    border-bottom: 1px solid var(--rule);
    padding: 11px 16px;
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--ink);
}

.card-body { padding: 16px; }

.card-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: 0.02em;
    margin-bottom: 12px;
}

/* Tables — ruled, dense, figures aligned. */
.table {
    --bs-table-bg: transparent;
    font-size: 0.8125rem;
    color: var(--ink-soft);
    margin-bottom: 0;
    border-color: var(--rule);
}

.table > thead > tr > th {
    background: var(--sheet-sunk);
    color: var(--graphite);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 8px 12px;
    border-bottom: 1px solid var(--rule-strong);
    white-space: nowrap;
    vertical-align: middle;
}

.table > tbody > tr > td {
    padding: 9px 12px;
    vertical-align: middle;
    border-bottom: 1px solid var(--rule);
}

.table > tbody > tr:last-child > td { border-bottom: none; }
.table-hover > tbody > tr:hover > * { background-color: var(--sheet-sunk); }
.table-bordered > :not(caption) > * > * { border-color: var(--rule); }

/* Any cell holding only digits, currency or a date aligns on the same grid. */
.table td.figure, .table th.figure {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.table-responsive, .table-wrap {
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--sheet);
    overflow-x: auto;
}
.table-responsive > .table, .table-wrap > .table { border: none; }

/* Buttons — flat, one weight, states via Bootstrap's own variables. */
.btn {
    --bs-btn-font-family: var(--font-sans);
    --bs-btn-font-size: 0.8125rem;
    --bs-btn-font-weight: 500;
    --bs-btn-padding-y: 0.4rem;
    --bs-btn-padding-x: 0.8rem;
    --bs-btn-border-radius: var(--radius-sm);
    --bs-btn-box-shadow: none;
    --bs-btn-focus-box-shadow: 0 0 0 3px var(--ledger-100);
    letter-spacing: 0.005em;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.btn-sm {
    --bs-btn-font-size: 0.75rem;
    --bs-btn-padding-y: 0.25rem;
    --bs-btn-padding-x: 0.6rem;
}

.btn-lg { --bs-btn-font-size: 0.875rem; --bs-btn-padding-y: 0.55rem; --bs-btn-padding-x: 1.1rem; }

.btn-primary {
    --bs-btn-bg: var(--ledger);
    --bs-btn-border-color: var(--ledger);
    --bs-btn-hover-bg: var(--ledger-600);
    --bs-btn-hover-border-color: var(--ledger-600);
    --bs-btn-active-bg: var(--ledger-600);
    --bs-btn-active-border-color: var(--ledger-600);
    --bs-btn-disabled-bg: var(--ledger);
    --bs-btn-disabled-border-color: var(--ledger);
}

.btn-secondary {
    --bs-btn-bg: var(--sheet);
    --bs-btn-border-color: var(--rule-strong);
    --bs-btn-color: var(--ink-soft);
    --bs-btn-hover-bg: var(--paper);
    --bs-btn-hover-border-color: var(--graphite-dim);
    --bs-btn-hover-color: var(--ink);
    --bs-btn-active-bg: var(--rule);
    --bs-btn-active-border-color: var(--graphite-dim);
    --bs-btn-active-color: var(--ink);
    --bs-btn-disabled-bg: var(--sheet);
    --bs-btn-disabled-color: var(--graphite-dim);
    --bs-btn-disabled-border-color: var(--rule);
}

.btn-success {
    --bs-btn-bg: var(--ledger);
    --bs-btn-border-color: var(--ledger);
    --bs-btn-hover-bg: var(--ledger-600);
    --bs-btn-hover-border-color: var(--ledger-600);
    --bs-btn-active-bg: var(--ledger-600);
    --bs-btn-disabled-bg: var(--ledger);
    --bs-btn-disabled-border-color: var(--ledger);
}

.btn-danger {
    --bs-btn-bg: var(--stamp);
    --bs-btn-border-color: var(--stamp);
    --bs-btn-hover-bg: #8a2924;
    --bs-btn-hover-border-color: #8a2924;
    --bs-btn-active-bg: #8a2924;
    --bs-btn-disabled-bg: var(--stamp);
    --bs-btn-disabled-border-color: var(--stamp);
}

.btn-warning {
    --bs-btn-bg: var(--ochre);
    --bs-btn-border-color: var(--ochre);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #85560f;
    --bs-btn-hover-border-color: #85560f;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #85560f;
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: var(--ochre);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-border-color: var(--ochre);
}

.btn-info {
    --bs-btn-bg: var(--slate);
    --bs-btn-border-color: var(--slate);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #34495d;
    --bs-btn-hover-border-color: #34495d;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #34495d;
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: var(--slate);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-border-color: var(--slate);
}

/* "Outline" buttons carry a soft wash of their own colour rather than sitting
   empty on the sheet. On a dense row of controls an unfilled button reads as
   disabled, and the tint also says which action each one is before you read
   the label. The solid fill stays reserved for the chosen or committed state. */
.btn-outline-primary  { --bs-btn-bg: var(--ledger-100); --bs-btn-color: var(--ledger-600); --bs-btn-border-color: #c2ddd2; --bs-btn-hover-bg: var(--ledger);  --bs-btn-hover-border-color: var(--ledger);  --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--ledger); --bs-btn-active-border-color: var(--ledger); --bs-btn-active-color: #fff; }
.btn-outline-success  { --bs-btn-bg: var(--ledger-100); --bs-btn-color: var(--ledger-600); --bs-btn-border-color: #c2ddd2; --bs-btn-hover-bg: var(--ledger);  --bs-btn-hover-border-color: var(--ledger);  --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--ledger);  --bs-btn-active-border-color: var(--ledger); --bs-btn-active-color: #fff; }
.btn-outline-warning  { --bs-btn-bg: var(--ochre-100);  --bs-btn-color: var(--ochre-700);      --bs-btn-border-color: #e8d3a8; --bs-btn-hover-bg: var(--ochre);   --bs-btn-hover-border-color: var(--ochre);   --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--ochre); --bs-btn-active-border-color: var(--ochre); --bs-btn-active-color: #fff; }
.btn-outline-danger   { --bs-btn-bg: var(--stamp-100);  --bs-btn-color: var(--stamp);      --bs-btn-border-color: #eccbc7; --bs-btn-hover-bg: var(--stamp);   --bs-btn-hover-border-color: var(--stamp);   --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--stamp); --bs-btn-active-border-color: var(--stamp); --bs-btn-active-color: #fff; }
.btn-outline-info     { --bs-btn-bg: var(--slate-100);  --bs-btn-color: var(--slate);      --bs-btn-border-color: #c9d8e4; --bs-btn-hover-bg: var(--slate);   --bs-btn-hover-border-color: var(--slate);   --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--slate); --bs-btn-active-border-color: var(--slate); --bs-btn-active-color: #fff; }
.btn-outline-secondary{ --bs-btn-bg: var(--paper);      --bs-btn-color: var(--ink-soft);   --bs-btn-border-color: var(--rule-strong); --bs-btn-hover-bg: var(--rule); --bs-btn-hover-border-color: var(--graphite-dim); --bs-btn-hover-color: var(--ink); --bs-btn-active-bg: var(--rule-strong); --bs-btn-active-color: var(--ink); --bs-btn-active-border-color: var(--graphite-dim); }
.btn-outline-light    { --bs-btn-color: rgba(255,255,255,0.8); --bs-btn-border-color: rgba(255,255,255,0.2); --bs-btn-hover-bg: rgba(255,255,255,0.1); --bs-btn-hover-border-color: rgba(255,255,255,0.3); --bs-btn-hover-color: #fff; }

.btn-link { --bs-btn-color: var(--ledger); --bs-btn-hover-color: var(--ledger-600); text-decoration: none; }

/* Segmented radio group (Yes / No / Pending) */
.btn-group > .btn { --bs-btn-border-radius: var(--radius-sm); }
.btn-check:checked + .btn-outline-success { background: var(--ledger); border-color: var(--ledger); color: #fff; }
.btn-check:checked + .btn-outline-warning { background: var(--ochre); border-color: var(--ochre); color: #fff; }
.btn-check:checked + .btn-outline-secondary { background: var(--graphite); border-color: var(--graphite); color: #fff; }
.btn-check:focus-visible + .btn { outline: 2px solid var(--ledger); outline-offset: 2px; }

/* Forms */
.form-label {
    color: var(--graphite);
    font-weight: 500;
    font-size: 0.75rem;
    margin-bottom: 5px;
    display: block;
    white-space: normal;
    word-break: break-word;
}

.form-control, .form-select {
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-sm);
    padding: 0.4rem 0.6rem;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: var(--ink-soft);
    background-color: var(--sheet);
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.form-select { padding-right: 2rem; background-position: right 0.6rem center; }
.card .form-select { min-width: 130px; }

.form-control::placeholder { color: var(--graphite-dim); }

.form-control:focus, .form-select:focus {
    border-color: var(--ledger);
    box-shadow: 0 0 0 3px var(--ledger-100);
    outline: none;
}

.form-control:disabled, .form-select:disabled {
    background: var(--sheet-sunk);
    color: var(--graphite-dim);
}

textarea.form-control { line-height: 1.55; }

.form-check-input:checked {
    background-color: var(--ledger);
    border-color: var(--ledger);
}
.form-check-input:focus {
    border-color: var(--ledger);
    box-shadow: 0 0 0 3px var(--ledger-100);
}
.form-check-label { font-size: 0.8125rem; color: var(--ink-soft); }

/* Badges — soft fills, mono text. Status reads at a glance. */
.badge {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.24em 0.55em;
    border-radius: 3px;
    vertical-align: middle;
}

.badge.bg-primary   { background: var(--ledger-100) !important; color: var(--ledger-600) !important; }
.badge.bg-success   { background: var(--ledger-100) !important; color: var(--ledger-600) !important; }
.badge.bg-danger    { background: var(--stamp-100)  !important; color: var(--stamp) !important; }
.badge.bg-warning   { background: var(--ochre-100)  !important; color: var(--ochre-700) !important; }
.badge.bg-info      { background: var(--slate-100)  !important; color: var(--slate) !important; }
.badge.bg-secondary { background: var(--paper)      !important; color: var(--graphite) !important; }
.badge.text-dark    { color: var(--ochre-700) !important; }

/* Alerts — a rule on the left, no gradient, no shout. */
.alert {
    border: 1px solid var(--rule);
    border-left-width: 3px;
    border-radius: var(--radius-sm);
    padding: 10px 13px;
    font-size: 0.8125rem;
    background: var(--sheet);
    color: var(--ink-soft);
}

.alert-success { border-left-color: var(--ledger); background: var(--ledger-100); color: var(--ledger-600); }
.alert-danger  { border-left-color: var(--stamp);  background: var(--stamp-100);  color: var(--stamp); }
.alert-warning { border-left-color: var(--ochre);  background: var(--ochre-100);  color: var(--ochre-700); }
.alert-info    { border-left-color: var(--slate);  background: var(--slate-100);  color: var(--slate); }
.alert-secondary { border-left-color: var(--graphite); background: var(--sheet-sunk); color: var(--graphite); }

/* Modals */
.modal-content {
    border: 1px solid var(--rule);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
}
.modal-header {
    border-bottom: 1px solid var(--rule);
    padding: 13px 18px;
    background: var(--sheet-sunk);
    border-radius: 8px 8px 0 0;
}
.modal-title {
    font-family: var(--font-serif);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ink);
}
.modal-body { padding: 18px; font-size: 0.8125rem; }

/* A modal whose sections are wrapped in a <form> — the manual entry form, the
   approve/reject comment, the justification prompt — needs the form to carry
   the flex column, or the scrollable variant does nothing.
   Bootstrap bounds the body's height through `.modal-content`, whose direct
   children it expects to be the header, body and footer; with a form between
   them the body has no height to scroll within, so a long form simply grew past
   the top and bottom of the screen and the header scrolled out of reach. */
.modal-content > form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
}

.modal-dialog-scrollable .modal-content > form > .modal-body {
    overflow-y: auto;
    min-height: 0;
}

/* The header and footer stay put while the body moves under them. */
.modal-content > form > .modal-header,
.modal-content > form > .modal-footer { flex-shrink: 0; }
.modal-footer {
    border-top: 1px solid var(--rule);
    padding: 12px 18px;
    gap: 8px;
    background: var(--sheet-sunk);
    border-radius: 0 0 8px 8px;
}
.modal-backdrop.show { opacity: 0.4; }

/* Spinner, loading and empty states */
.spinner-border { color: var(--ledger); border-width: 2px; }

.loading-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 48px 16px;
    color: var(--graphite);
    font-size: 0.8125rem;
}

.empty-state {
    text-align: center;
    padding: 56px 20px;
    color: var(--graphite-dim);
    background: var(--sheet);
    border: 1px dashed var(--rule-strong);
    border-radius: var(--radius);
}
.empty-state-icon { font-size: 1.75rem; margin-bottom: 10px; opacity: 0.45; }
.empty-state-text { font-size: 0.8125rem; margin: 0; }
.empty-state strong { display: block; color: var(--ink-soft); font-size: 0.875rem; margin-bottom: 4px; }

.text-muted { color: var(--graphite) !important; }
.text-primary { color: var(--ledger) !important; }
.text-danger { color: var(--stamp) !important; }
.text-success { color: var(--ledger) !important; }
.text-warning { color: var(--ochre) !important; }
.text-info { color: var(--slate) !important; }
.text-secondary { color: var(--graphite) !important; }

hr { border-color: var(--rule); opacity: 1; }

/* ============================================================================
   7. Correction Entries — the tally rail and the ledger table
   ============================================================================
   The rail is the signature: a ruled strip of per-user pending counts set in
   mono, so the queue reads like a running balance. Clicking a tally filters. */

.tally-rail {
    display: flex;
    align-items: stretch;
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    margin-bottom: 14px;
    overflow: hidden;
}

.tally-total {
    flex-shrink: 0;
    padding: 10px 16px;
    border-right: 1px solid var(--rule);
    background: var(--sheet-sunk);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 108px;
}

.tally-total .label {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--graphite);
}

.tally-total .value {
    font-family: var(--font-mono);
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--stamp);
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.tally-chips {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    gap: 4px;
    padding: 8px 12px;
    flex: 1 1 auto;
    min-width: 0;
}

.tally {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    border: 1px solid var(--rule);
    background: var(--sheet);
    border-radius: 3px;
    padding: 2px 7px;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    color: var(--ink-soft);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.12s ease, background 0.12s ease;
}

.tally:hover { background: var(--sheet-sunk); border-color: var(--rule-strong); }

.tally[aria-pressed="true"] {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

.tally .count {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    font-size: 0.75rem;
}

.tally[data-band="high"] .count { color: var(--stamp); }
.tally[data-band="mid"]  .count { color: var(--ochre); }
.tally[data-band="low"]  .count { color: var(--graphite); }
.tally[aria-pressed="true"] .count { color: #fff; }

.tally-hint {
    align-self: center;
    flex-shrink: 0;
    padding: 0 14px;
    font-size: 0.6875rem;
    color: var(--graphite-dim);
    white-space: nowrap;
}

/* Filter bar */
.filter-bar {
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 14px;
}

.filter-bar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.filter-bar-head h3 {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--graphite);
    margin: 0;
}

.filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    gap: 10px 12px;
}

.filter-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--rule);
}

/* The ledger */
.ledger {
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    overflow: hidden;
}

.ledger-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 14px;
    border-bottom: 1px solid var(--rule);
    background: var(--sheet-sunk);
}

.ledger-count {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--graphite);
    font-variant-numeric: tabular-nums;
}
.ledger-count strong { color: var(--ink); font-weight: 500; }

.ledger-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* The rows scroll inside the panel rather than down the page, so the filters
   and the column headings stay put while you work through the queue. The
   header is sticky against THIS box: `overflow` makes it the scrollport, so an
   offset measured from the top bar would push it down over the first row. */
.ledger-scroll {
    overflow: auto;
    max-height: calc(100vh - 340px);
    min-height: 240px;
    overscroll-behavior: contain;
}

table.ledger-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

table.ledger-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--sheet-sunk);
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--graphite);
    text-align: left;
    padding: 8px 12px;
    border-bottom: 1px solid var(--rule-strong);
    white-space: nowrap;
}

table.ledger-table tbody td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
}

table.ledger-table tbody tr:hover > td { background: var(--sheet-sunk); }
table.ledger-table tbody tr.is-old > td:first-child { box-shadow: inset 2px 0 0 var(--stamp); }
table.ledger-table tbody tr.is-rejected > td { background: var(--stamp-100); }
table.ledger-table tbody tr.is-rejected:hover > td { background: #f2dcd9; }

.led-doc {
    font-family: var(--font-mono);
    font-weight: 500;
    color: var(--ink);
    font-size: 0.8125rem;
    display: block;
    white-space: nowrap;
}

.led-id {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--graphite-dim);
    display: block;
    margin-top: 1px;
}

.led-user { color: var(--ink-soft); font-weight: 500; white-space: nowrap; }
.led-meta {
    font-size: 0.6875rem;
    color: var(--graphite);
    margin-top: 2px;
    line-height: 1.45;
}
.led-meta span + span::before { content: ' · '; color: var(--rule-strong); }

.led-reason {
    color: var(--ink-soft);
    line-height: 1.45;
    max-width: 34ch;
}

.led-narration {
    font-size: 0.6875rem;
    color: var(--graphite);
    margin-top: 3px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 34ch;
}

.led-date {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--graphite);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.led-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
}

/* A note from whoever actioned the entry, in the colour of their decision. */
.led-rejection {
    margin-top: 6px;
    padding: 7px 9px;
    border-left: 2px solid var(--stamp);
    background: var(--sheet);
    border-radius: 0 3px 3px 0;
    font-size: 0.6875rem;
    color: var(--stamp);
    line-height: 1.5;
    max-width: 46ch;
}
.led-rejection strong { color: inherit; }

.led-rejection.is-approval {
    border-left-color: var(--ledger);
    color: var(--ledger-600);
}

/* Pagination — a page counter, not a carousel of numbered pills. */
.pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 14px;
    border-top: 1px solid var(--rule);
    background: var(--sheet-sunk);
    flex-wrap: wrap;
}

.pager-status {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--graphite);
    font-variant-numeric: tabular-nums;
}
.pager-status strong { color: var(--ink); font-weight: 500; }

.pager-controls { display: flex; align-items: center; gap: 6px; }

.pager-btn {
    background: var(--sheet);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-sm);
    color: var(--ink-soft);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    padding: 3px 9px;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.pager-btn:hover:not(:disabled) { background: var(--paper); border-color: var(--graphite-dim); }
.pager-btn:disabled { opacity: 0.4; cursor: default; }

.pager select {
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-sm);
    background: var(--sheet);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    padding: 3px 5px;
    color: var(--ink-soft);
}

/* Field/value grid used by the original-row modal */
.field-grid {
    display: grid;
    grid-template-columns: minmax(140px, 32%) 1fr;
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    overflow: hidden;
    font-size: 0.75rem;
    margin: 0;
}
.field-grid dt,
.field-grid dd {
    padding: 6px 10px;
    border-bottom: 1px solid var(--rule);
    margin: 0;
}
.field-grid dt {
    background: var(--sheet-sunk);
    color: var(--graphite);
    font-weight: 500;
    border-right: 1px solid var(--rule);
}
.field-grid dd {
    font-family: var(--font-mono);
    color: var(--ink-soft);
    word-break: break-word;
}

/* ============================================================================
   8. Existing page components, restated in the system
   ========================================================================== */

.ojas-card {
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: none;
}
.ojas-card:hover { box-shadow: var(--shadow-sm); }

.ojas-card-header {
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--ink);
    margin-bottom: 12px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--rule);
}

.section-title { font-weight: 600; font-size: 0.9375rem; color: var(--ink); margin: 0; }

.badge-soft {
    display: inline-block;
    padding: 0.22em 0.55em;
    background: var(--ledger-100);
    color: var(--ledger-600);
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
}
.badge-soft.badge-primary { background: var(--slate-100); color: var(--slate); }
.badge-soft.badge-success { background: var(--ledger-100); color: var(--ledger-600); }
.badge-soft.badge-warning { background: var(--ochre-100); color: var(--ochre-700); }
.badge-soft.badge-danger  { background: var(--stamp-100); color: var(--stamp); }
.badge-soft.badge-info    { background: var(--slate-100); color: var(--slate); }

/* KPI figures — the number is the point, so it gets the mono treatment and
   nothing else on the tile competes with it. */
.summary-card,
.metric-container {
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-left: 2px solid var(--graphite-dim);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 84px;
    text-align: left;
}

.summary-card.primary, .metric-container.primary { border-left-color: var(--ledger); }
.summary-card.success, .metric-container.success { border-left-color: var(--ledger); }
.summary-card.warning, .metric-container.warning { border-left-color: var(--ochre); }
.summary-card.danger,  .metric-container.danger  { border-left-color: var(--stamp); }

.summary-card .stat-label,
.metric-title {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    color: var(--graphite);
    font-weight: 500;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    opacity: 1;
}

.summary-card .stat-value,
.metric-value {
    font-family: var(--font-mono);
    font-size: 1.625rem;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    margin: 0;
}

.summary-card .stat-unit {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--graphite-dim);
    margin-top: 3px;
}

.text-white-50 { color: rgba(255, 255, 255, 0.7) !important; }
.text-dark-50 { color: var(--graphite) !important; }

/* Analytics tables */
.recent-visits-table-wrapper,
.analytics-table-wrapper { overflow-x: auto; }
.recent-visits-table-wrapper table,
.analytics-table-wrapper table { margin-bottom: 0; }
.recent-visits-table-wrapper thead th,
.analytics-table-wrapper thead th {
    background: var(--sheet-sunk);
    font-family: var(--font-mono);
    font-weight: 500;
    color: var(--graphite);
    border-bottom: 1px solid var(--rule-strong);
    padding: 8px 12px;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.recent-visits-table-wrapper tbody td,
.analytics-table-wrapper tbody td {
    padding: 9px 12px;
    vertical-align: middle;
    font-size: 0.8125rem;
    color: var(--ink-soft);
    border-bottom: 1px solid var(--rule);
}
.recent-visits-table-wrapper tbody tr:hover,
.analytics-table-wrapper tbody tr:hover { background: var(--sheet-sunk); }

/* Progress */
.progress-bar-container { display: flex; align-items: center; gap: 8px; }
.progress-bar-container .value {
    font-family: var(--font-mono);
    font-weight: 500;
    min-width: 46px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.progress { flex-grow: 1; height: 5px; background: var(--rule); border-radius: 3px; overflow: hidden; }
.progress-bar { height: 100%; border-radius: 3px; }
.progress-bar.bg-success { background: var(--ledger) !important; }
.progress-bar.bg-warning { background: var(--ochre) !important; }
.progress-bar.bg-danger  { background: var(--stamp) !important; }
.progress-bar.bg-info    { background: var(--slate) !important; }

/* Filter cards used by several pages */
.filter-card, .filter-control {
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
}
.filter-card .card-title {
    color: var(--graphite);
    font-family: var(--font-mono);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.6875rem;
}

.info-box {
    padding: 11px 13px;
    background: var(--slate-100);
    border-left: 3px solid var(--slate);
    border-radius: var(--radius-sm);
    color: var(--slate);
    font-size: 0.8125rem;
}
.alert-box {
    padding: 11px 13px;
    background: var(--stamp-100);
    border-left: 3px solid var(--stamp);
    border-radius: var(--radius-sm);
    color: var(--stamp);
    font-size: 0.8125rem;
}

.bg-light { background-color: var(--sheet-sunk) !important; }

/* ============================================================================
   9. Chat
   ========================================================================== */

.whatsapp-ui-container {
    display: flex;
    height: calc(100vh - var(--topbar-h) - 96px);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--sheet);
}

.chat-list-panel {
    width: 34%;
    min-width: 280px;
    background: var(--sheet-sunk);
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--rule);
}

.chat-messages-panel {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    background: var(--paper);
}

.chat-list-item {
    display: flex;
    align-items: center;
    padding: 11px 13px;
    border-bottom: 1px solid var(--rule);
    cursor: pointer;
    transition: background 0.12s ease;
}
.chat-list-item:hover, .chat-list-item.active { background: var(--ledger-100); }
.chat-list-item .chat-info { flex-grow: 1; margin-left: 10px; overflow: hidden; }
.chat-list-item h6 {
    margin: 0;
    font-weight: 600;
    font-size: 0.8125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--ink);
}
.chat-list-item p {
    margin: 0;
    font-size: 0.75rem;
    color: var(--graphite);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-list-item small { font-family: var(--font-mono); font-size: 0.625rem; color: var(--graphite-dim); }

.chat-header {
    background: var(--ink);
    padding: 11px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
}
.chat-header h5 { margin: 0; font-weight: 500; font-size: 0.875rem; color: #fff; }
.chat-header-avatar {
    width: 32px;
    height: 32px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.14);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: #fff;
    margin-right: 10px;
}

.message-container {
    flex-grow: 1;
    overflow-y: auto;
    padding: 18px;
    background-image: linear-gradient(var(--rule) 1px, transparent 1px);
    background-size: 100% 26px;
}

.message-bubble {
    padding: 9px 12px;
    border-radius: 6px;
    margin-bottom: 9px;
    max-width: 70%;
    position: relative;
    font-size: 0.8125rem;
    border: 1px solid var(--rule);
    background: var(--sheet);
}
.message-bubble.sent {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
    margin-left: auto;
}
.message-bubble.received { background: var(--sheet); color: var(--ink-soft); margin-right: auto; }
.message-bubble .message-text { margin: 0; }
.message-bubble .message-time {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    color: var(--graphite-dim);
    margin-top: 5px;
}
.message-bubble.sent .message-time { color: rgba(255, 255, 255, 0.5); }
.message-actions { position: absolute; top: 4px; right: 4px; display: none; }
.message-bubble:hover .message-actions { display: block; }

.chat-input-footer {
    padding: 10px 16px;
    background: var(--sheet);
    border-top: 1px solid var(--rule);
}
.chat-input-footer .form-control { border-radius: 18px; padding: 8px 14px; }

/* ============================================================================
   10. Responsive
   ========================================================================== */

@media (max-width: 992px) {
    .sidebar { width: var(--sidebar-w-collapsed); }
    .sidebar .nav-link { justify-content: center; padding: 8px 0; gap: 0; }
    .sidebar .nav-link span,
    .sidebar-wordmark,
    .sidebar-identity,
    .sidebar-signout span,
    .nav-section-label { display: none; }
    .main-content { margin-left: var(--sidebar-w-collapsed); }
    #page-content { padding: 16px; }
    .tally-rail { flex-direction: column; }
    .tally-total { border-right: none; border-bottom: 1px solid var(--rule); flex-direction: row; align-items: baseline; gap: 8px; }
    .tally-hint { display: none; }
}

@media (max-width: 768px) {
    .page-title { font-size: 1.125rem; }
    #page-content { padding: 12px; }
    .filter-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
    .whatsapp-ui-container { flex-direction: column; height: auto; }
    .chat-list-panel { width: 100%; min-width: 0; max-height: 240px; }
    /* On a small screen there is no room for a panel that scrolls inside the
       page, so the ledger goes back to scrolling with the document. */
    .ledger-scroll { max-height: none; }
    table.ledger-table thead th { position: static; }
    .field-grid { grid-template-columns: 1fr; }
    .field-grid dt { border-right: none; }
}

/* ============================================================================
   11. My Work — the landing page
   ============================================================================
   Every graphic here is CSS or inline SVG. This is the page people see first,
   so it pulls in no charting library: Plotly is 1.1 MB against a payload of
   under a kilobyte, and would have set the speed of the whole page. */

/* Three columns: the ageing panel beside the team roster, which takes two so
   names are never truncated; flow and suspicious sit on the row below. */
.mw-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
}
.mw-panel-team { grid-column: span 2; }

@media (max-width: 1100px) {
    .mw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mw-panel-team { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
    .mw-grid { grid-template-columns: minmax(0, 1fr); }
}

.mw-panel {
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 16px 18px 18px;
}

.mw-panel-wide { grid-column: 1 / -1; }

.mw-panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.mw-panel-title {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--graphite);
    margin: 0 0 14px;
}
.mw-panel-head .mw-panel-title { margin-bottom: 10px; }

.mw-muted { color: var(--graphite); font-size: 0.8125rem; margin: 0; }
.mw-lede-meta { color: var(--graphite-dim); }

.mw-note {
    font-size: 0.6875rem;
    color: var(--graphite-dim);
    margin: 12px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--rule);
}

.mw-oldest {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--graphite);
}
.mw-oldest strong { color: var(--ink); font-weight: 500; }

.mw-flag {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--stamp);
    background: var(--stamp-100);
    border-radius: 3px;
    padding: 2px 8px;
}
.mw-flag:hover { text-decoration: none; background: #f2dcd9; }

/* Scope toggle */

.mw-scope {
    display: inline-flex;
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--sheet);
}

.mw-scope-btn {
    border: none;
    background: var(--sheet);
    color: var(--graphite);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 500;
    padding: 5px 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.12s ease, color 0.12s ease;
}
.mw-scope-btn + .mw-scope-btn { border-left: 1px solid var(--rule); }
.mw-scope-btn:hover { background: var(--paper); color: var(--ink); }
.mw-scope-btn[aria-pressed="true"] { background: var(--ink); color: #fff; }

.mw-scope-count {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    background: var(--rule);
    color: var(--ink-soft);
    border-radius: 8px;
    padding: 0 5px;
}
.mw-scope-btn[aria-pressed="true"] .mw-scope-count {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* The date filter. Two controls that answer different questions -- which date
   to count by, and over what period -- kept on one rail because changing either
   one re-reads every figure below it. */

.mw-filter {
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mw-filter-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.mw-filter-label {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--graphite-dim);
    min-width: 104px;
}
.mw-filter-seg {
    display: inline-flex;
    border: 1px solid var(--rule);
    border-radius: 8px;
    overflow: hidden;
    background: var(--sheet);
}
.mw-filter-btn {
    border: 0;
    background: transparent;
    color: var(--graphite);
    font-size: 0.82rem;
    padding: 5px 12px;
    cursor: pointer;
}
.mw-filter-btn + .mw-filter-btn { border-left: 1px solid var(--rule); }
.mw-filter-btn:hover:not(:disabled) { background: var(--paper); color: var(--ink); }
.mw-filter-btn[aria-pressed="true"] { background: var(--ink); color: #fff; }
.mw-filter-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.mw-fy-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mw-fy-chip {
    border: 1px solid var(--rule);
    background: var(--sheet);
    border-radius: 999px;
    padding: 4px 11px;
    font-size: 0.8rem;
    color: var(--graphite);
    cursor: pointer;
}
.mw-fy-chip:hover { background: var(--paper); color: var(--ink); }
.mw-fy-chip[aria-pressed="true"] {
    background: var(--ledger-100);
    border-color: #c2ddd2;
    color: var(--ledger-600);
    font-weight: 600;
}
.mw-fy-count {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 0.74rem;
    color: var(--graphite-dim);
}
.mw-fy-chip[aria-pressed="true"] .mw-fy-count { color: var(--ledger-600); }

.mw-filter-range {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}
.mw-filter-range input[type="date"] { width: 148px; }
.mw-filter-dash { font-size: 0.8rem; color: var(--graphite-dim); }
.mw-filter-clear {
    border: 0;
    background: transparent;
    color: var(--stamp);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 4px 6px;
}
.mw-filter-clear:hover { text-decoration: underline; }
.mw-filter-note {
    font-size: 0.78rem;
    color: var(--graphite-dim);
    margin-left: auto;
}
.mw-filter-active {
    margin: 0;
    font-size: 0.8rem;
    color: var(--graphite);
    border-top: 1px dashed var(--rule);
    padding-top: 8px;
}

@media (max-width: 720px) {
    .mw-filter-label { min-width: 0; }
    .mw-filter-range, .mw-filter-note { margin-left: 0; }
}

.mw-stage-window {
    display: inline-block;
    align-self: flex-start;
    margin-top: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--ledger-100);
    color: var(--ledger-600);
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* The pipeline: four stages of one workflow, drawn as a run rather than as
   four unrelated tiles, so where work piles up is visible at a glance. */

.mw-pipeline {
    display: flex;
    align-items: stretch;
    gap: 0;
    flex-wrap: wrap;
}

.mw-stage {
    flex: 1 1 140px;
    min-width: 128px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px 14px;
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    background: var(--sheet-sunk);
    position: relative;
    overflow: hidden;
    color: inherit;
    transition: border-color 0.12s ease, background 0.12s ease, transform 0.12s ease;
}

.mw-stage:hover {
    text-decoration: none;
    background: var(--sheet);
    border-color: var(--rule-strong);
    transform: translateY(-1px);
}

/* The bar is the graphic: a column growing from the base of the tile, its
   height proportional to the largest stage. */
.mw-stage-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--fill, 0%);
    background: var(--stage-tint, var(--paper));
    border-top: 2px solid var(--stage-ink, var(--graphite));
    z-index: 0;
    transition: height 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.mw-stage > :not(.mw-stage-bar) { position: relative; z-index: 1; }

.mw-stage-value {
    font-family: var(--font-mono);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.05;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.mw-stage-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ink);
}

.mw-stage-caption {
    font-size: 0.6875rem;
    color: var(--graphite);
    line-height: 1.35;
}

.mw-stage[data-tone="stamp"]  { --stage-ink: var(--stamp);  --stage-tint: var(--stamp-100); }
.mw-stage[data-tone="ochre"]  { --stage-ink: var(--ochre);  --stage-tint: var(--ochre-100); }
.mw-stage[data-tone="slate"]  { --stage-ink: var(--slate);  --stage-tint: var(--slate-100); }
.mw-stage[data-tone="ledger"] { --stage-ink: var(--ledger); --stage-tint: var(--ledger-100); }

/* The connector says these stages are one sequence, not a row of cards. */
.mw-stage-link {
    flex: 0 0 18px;
    align-self: center;
    height: 1px;
    background: var(--rule-strong);
    position: relative;
}
.mw-stage-link::after {
    content: '';
    position: absolute;
    right: 0;
    top: -3px;
    border-left: 5px solid var(--rule-strong);
    border-top: 3.5px solid transparent;
    border-bottom: 3.5px solid transparent;
}

/* Ageing bars */

.mw-ages { display: flex; flex-direction: column; gap: 6px; }

.mw-age {
    display: grid;
    grid-template-columns: 82px 1fr 44px;
    align-items: center;
    gap: 10px;
    padding: 4px 6px;
    border-radius: var(--radius-sm);
    color: inherit;
}
.mw-age:hover { background: var(--sheet-sunk); text-decoration: none; }

.mw-age-label {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--graphite);
    white-space: nowrap;
}

.mw-age-track {
    height: 16px;
    background: var(--paper);
    border-radius: 3px;
    overflow: hidden;
}

.mw-age-fill {
    display: block;
    height: 100%;
    width: var(--w, 0%);
    background: var(--age-ink, var(--graphite));
    border-radius: 3px;
    transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.mw-age-value {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ink);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.mw-age[data-tone="ledger"] { --age-ink: var(--ledger); }
.mw-age[data-tone="ochre"]  { --age-ink: var(--ochre); }
.mw-age[data-tone="stamp"]  { --age-ink: var(--stamp); }

/* Team roster */

.mw-members { display: flex; flex-direction: column; }

.mw-member {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) 128px 64px 72px;
    align-items: center;
    gap: 10px;
    padding: 8px 6px;
    border-bottom: 1px solid var(--rule);
    color: inherit;
}
.mw-member:last-child { border-bottom: none; }
.mw-member:hover { background: var(--sheet-sunk); text-decoration: none; }

.mw-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--dot, var(--graphite-dim));
}
.mw-member[data-tone="ledger"] { --dot: var(--ledger); }
.mw-member[data-tone="ochre"]  { --dot: var(--ochre); }
.mw-member[data-tone="stamp"]  { --dot: var(--stamp); }

.mw-member-who { min-width: 0; line-height: 1.25; }
.mw-member-name {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mw-member-id {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    color: var(--graphite-dim);
}

.mw-member-seen {
    text-align: right;
    line-height: 1.3;
    white-space: nowrap;
}
.mw-member-stamp {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}
.mw-member-ago {
    display: block;
    font-size: 0.625rem;
    color: var(--graphite-dim);
}

.mw-member-head,
.mw-member-head:hover {
    background: transparent;
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--graphite-dim);
    padding-top: 0;
}
.mw-member-head .mw-member-seen,
.mw-member-head .mw-member-today,
.mw-member-head .mw-member-pending {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}
.mw-member-clock { color: var(--graphite-dim); }
.mw-member-today {
    text-align: center;
    font-size: 0.6875rem;
    font-weight: 600;
}
.mw-member-today[data-today="true"]  { color: var(--ledger); }
.mw-member-today[data-today="false"] { color: var(--stamp); }

.mw-member-pending {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--graphite-dim);
    white-space: nowrap;
    min-width: 72px;
    text-align: right;
}

/* Cleared state */

.mw-clear {
    text-align: center;
    padding: 28px 16px 24px;
    color: var(--ledger);
}
.mw-clear strong {
    display: block;
    color: var(--ink);
    font-size: 0.9375rem;
    margin: 10px 0 2px;
}
.mw-clear p { color: var(--graphite); font-size: 0.8125rem; margin: 0; }

@media (max-width: 768px) {
    .mw-stage-link { display: none; }
    .mw-pipeline { gap: 8px; }
    .mw-stage { flex: 1 1 calc(50% - 4px); }
    .mw-age { grid-template-columns: 70px 1fr 38px; }
}

/* My Work — inflow/throughput, the suspicious queue, and timing */

.mw-timing { color: var(--graphite); }
.mw-timing strong { color: var(--ink); font-weight: 500; font-family: var(--font-mono); }

.mw-behind { color: var(--stamp); }
.mw-behind::before { content: '▲ '; }

.mw-flow {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.mw-flow-fig {
    flex: 1 1 120px;
    min-width: 110px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 10px 12px;
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    background: var(--sheet-sunk);
    color: inherit;
}

.mw-flow-link {
    border-left: 2px solid var(--flow-ink, var(--graphite));
    transition: background 0.12s ease, border-color 0.12s ease;
}
.mw-flow-link:hover { background: var(--sheet); text-decoration: none; }
.mw-flow-link[data-tone="stamp"] { --flow-ink: var(--stamp); }
.mw-flow-link[data-tone="ochre"] { --flow-ink: var(--ochre); }

.mw-flow-value {
    font-family: var(--font-mono);
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.mw-flow-label {
    font-size: 0.6875rem;
    color: var(--graphite);
    line-height: 1.35;
}

/* Sparkline: inline SVG, so the page still loads no charting library. */
.mw-spark {
    display: block;
    width: 100%;
    height: 46px;
    margin-top: 12px;
    overflow: visible;
}

.mw-footnote {
    font-size: 0.6875rem;
    color: var(--graphite-dim);
    margin: 14px 0 0;
}
.mw-footnote strong {
    color: var(--graphite);
    font-weight: 500;
    font-family: var(--font-mono);
}


/* ── My Work: compact fit ────────────────────────────────────────────────────
   Sized so the whole page sits on one laptop screen (about 860px of content
   below the top bar) without scrolling. Kept as one block of overrides so the
   density can be tuned in one place. */

.mw-filter { padding: 8px 14px; gap: 6px; margin-bottom: 12px; }
.mw-filter-label { min-width: 0; font-size: 0.66rem; }
.mw-filter-sep { width: 1px; align-self: stretch; background: var(--rule); margin: 2px 4px; }
.mw-filter-btn { padding: 4px 10px; font-size: 0.78rem; }
.mw-fy-chip { padding: 3px 10px; font-size: 0.76rem; }
.mw-filter-range input[type="date"] { width: 136px; padding-top: 3px; padding-bottom: 3px; }
.mw-filter-active { padding-top: 5px; font-size: 0.74rem; }

.mw-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.mw-panel { padding: 12px 14px 12px; }
.mw-panel-team { grid-column: span 2; }
.mw-stack { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mw-stack:empty { display: none; }

.mw-note { margin-top: 8px; padding-top: 6px; }

.mw-stage { padding: 8px 12px 10px; gap: 0; }
.mw-stage-value { font-size: 1.25rem; }
.mw-stage-label { font-size: 0.78rem; }
.mw-stage-caption { font-size: 0.66rem; }
.mw-stage-window { margin-top: 4px; }

.mw-age { padding: 2px 6px; }
.mw-member { padding: 5px 6px; }
.mw-flow { gap: 8px; }
.mw-flow-fig { padding: 6px 10px; min-width: 0; flex-basis: 90px; }
.mw-flow-value { font-size: 1.1rem; }
.mw-spark { height: 30px; margin-top: 8px; }

.page-head { margin-bottom: 12px; }

@media (max-width: 1300px) {
    .mw-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mw-stack { grid-column: 1 / -1; flex-direction: row; }
    .mw-stack > * { flex: 1 1 0; }
}
@media (max-width: 900px) {
    .mw-grid { grid-template-columns: minmax(0, 1fr); }
    .mw-panel-team { grid-column: auto; }
    .mw-stack { flex-direction: column; }
}