/* ==========================================================================
   Vendor Management System — design layer
   Loaded AFTER material.css. Refines Material Dashboard rather than
   replacing it, so existing Bootstrap markup keeps working.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
    /* Type — Manrope throughout; the script face is for the logo mark only. */
    --vms-font-display: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --vms-font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --vms-font-script: 'Yellowtail', 'Brush Script MT', cursive;

    /* Watoto Church brand ramp — built around the wordmark plum.
       Change --vms-brand-500 and the ramp follows it everywhere. */
    --vms-brand-50: #faf2f6;
    --vms-brand-100: #f3e2eb;
    --vms-brand-200: #e5c4d5;
    --vms-brand-300: #cf9ab5;
    --vms-brand-400: #a85c83;
    --vms-brand-500: #7b2c51;
    --vms-brand-600: #6a2646;
    --vms-brand-700: #571e39;
    --vms-brand-800: #43172c;
    --vms-brand-900: #2e0f1e;

    /* Neutrals — raised contrast so default text is not washed out */
    --vms-ink: #0b1220;
    --vms-ink-2: #17212f;
    --vms-muted: #4b5563;
    --vms-muted-2: #6b7280;
    --vms-line: #e3e8f0;
    --vms-line-strong: #cbd3e0;

    /* M3 tonal surfaces: containers step up in tone, not just in shadow */
    --vms-surface: #ffffff;
    --vms-surface-1: #fbfafc;
    --vms-surface-2: #f7f5f8;
    --vms-surface-3: #f2eff4;
    --vms-canvas: #f6f4f8;
    --vms-canvas-2: #fbfafc;

    /* Semantic */
    --vms-success: #0f7a55;
    --vms-success-bg: #e7f6ef;
    --vms-success-line: #a5ddc4;
    --vms-warning: #96560b;
    --vms-warning-bg: #fdf4e3;
    --vms-warning-line: #f2d09a;
    --vms-danger: #c62828;
    --vms-danger-bg: #fdeded;
    --vms-danger-line: #f5c2c2;
    --vms-info: #0369a1;
    --vms-info-bg: #eef7fd;
    --vms-info-line: #b3ddf5;
    --vms-neutral: #3f4a5a;
    --vms-neutral-bg: #eff1f5;
    --vms-neutral-line: #d9dfe8;

    /* Brand containers, M3 style */
    --vms-brand-container: #f6e7ee;
    --vms-on-brand-container: #4a1730;

    /* Shape — Material 3 corner scale */
    --vms-r-xs: 4px;
    --vms-r-sm: 8px;
    --vms-r-md: 12px;
    --vms-r-lg: 16px;
    --vms-r-lg-inc: 20px;
    --vms-r-xl: 28px;
    --vms-r-xxl: 32px;
    --vms-r-pill: 999px;

    /* M3 state layer opacities */
    --vms-state-hover: .08;
    --vms-state-focus: .10;
    --vms-state-press: .10;

    /* Elevation — soft, low-contrast, layered */
    --vms-shadow-xs: 0 1px 2px rgba(15, 23, 42, .05);
    --vms-shadow-sm: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
    --vms-shadow-md: 0 4px 16px -4px rgba(15, 23, 42, .08), 0 2px 6px -2px rgba(15, 23, 42, .05);
    --vms-shadow-lg: 0 18px 40px -12px rgba(15, 23, 42, .16), 0 6px 14px -6px rgba(15, 23, 42, .08);
    --vms-shadow-brand: 0 8px 20px -8px rgba(123, 44, 81, .45);
}

/* --------------------------------------------------------------------------
   2. Typography
   -------------------------------------------------------------------------- */
body {
    font-family: var(--vms-font-body);
    font-size: .875rem;
    line-height: 1.55;
    /* Default weight 500, not 400 — the base text should not read as faint. */
    font-weight: 500;
    color: var(--vms-ink-2);
    letter-spacing: -.005em;
    background-color: var(--vms-canvas);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Material 3 type scale, weights raised one step for emphasis. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.vms-display {
    font-family: var(--vms-font-display);
    color: var(--vms-ink);
    letter-spacing: -.022em;
    font-weight: 800;
}

h1, .h1 { font-size: 2rem;      line-height: 1.18; letter-spacing: -.03em; }
h2, .h2 { font-size: 1.5rem;    line-height: 1.24; letter-spacing: -.026em; }
h3, .h3 { font-size: 1.25rem;   line-height: 1.3; }
h4, .h4 { font-size: 1.0625rem; line-height: 1.35; }
h5, .h5 { font-size: .9375rem;  line-height: 1.4; }
h6, .h6 { font-size: .875rem;   line-height: 1.45; font-weight: 700; }

/* M3 label styles — used for every uppercase micro-label in the UI. */
.vms-label-lg { font-size: .875rem;  font-weight: 700; letter-spacing: .006em; }
.vms-label-md { font-size: .75rem;   font-weight: 700; letter-spacing: .03em; }
.vms-label-sm { font-size: .6875rem; font-weight: 700; letter-spacing: .05em; }

.text-xxs { font-size: .6875rem; letter-spacing: .04em; font-weight: 700; }
.text-xs  { font-size: .75rem;   font-weight: 600; }
.text-sm  { font-size: .8125rem; font-weight: 500; }

strong, b, .font-weight-bold, .font-weight-bolder { font-weight: 800; }

/* Bootstrap's muted greys were too light against the new surfaces. */
.text-secondary, .text-muted { color: var(--vms-muted) !important; }
.opacity-5, .opacity-6, .opacity-7 { opacity: 1 !important; }

/* Figures line up column-to-column. Applied to every numeric cell. */
.vms-num,
.vms-table td.vms-num,
.vms-stat__value,
.vms-money {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.vms-eyebrow {
    font-family: var(--vms-font-body);
    font-size: .6875rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--vms-muted);
}

.vms-muted { color: var(--vms-muted) !important; }

/* --------------------------------------------------------------------------
   3. App shell
   -------------------------------------------------------------------------- */
body.g-sidenav-show { background-color: var(--vms-canvas); }

.main-content { background-color: transparent; }

.vms-container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-bottom: 2.5rem;
    max-width: 1600px;
}

@media (max-width: 767.98px) {
    .vms-container { padding-left: 1rem; padding-right: 1rem; }
}

/* --------------------------------------------------------------------------
   4. Sidebar
   -------------------------------------------------------------------------- */
.sidenav {
    border: 1px solid var(--vms-line);
    box-shadow: var(--vms-shadow-sm);
    border-radius: var(--vms-r-lg) !important;
}

.sidenav .navbar-brand {
    display: flex;
    align-items: center;
    gap: .625rem;
}

.vms-brand__mark {
    --mark-size: 38px;
    width: var(--mark-size);
    height: var(--mark-size);
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: linear-gradient(140deg, var(--vms-brand-500), var(--vms-brand-700));
    color: #fff;
    /* The "W" is set in the same brush script as the Watoto wordmark. */
    font-family: var(--vms-font-script);
    font-weight: 400;
    font-size: calc(var(--mark-size) * 0.62);
    line-height: 1;
    padding-bottom: calc(var(--mark-size) * 0.08);
    padding-right: calc(var(--mark-size) * 0.02);
    box-shadow: var(--vms-shadow-brand);
    flex-shrink: 0;
    user-select: none;
}

.vms-brand__mark--plain {
    background: none;
    box-shadow: none;
    color: var(--vms-brand-500);
    border-radius: 0;
    font-size: calc(var(--mark-size) * 0.95);
}

.vms-brand__mark--lg { --mark-size: 52px; border-radius: 16px; }

/* Wordmark lockup: script name over letterspaced descriptor, as on the logo. */
.vms-wordmark {
    font-family: var(--vms-font-script);
    font-size: 1.25rem;
    line-height: 1;
    color: var(--vms-brand-500);
    letter-spacing: 0;
}

.vms-wordmark__sub {
    font-family: var(--vms-font-body);
    font-size: .5625rem;
    font-weight: 700;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--vms-muted-2);
    line-height: 1;
    margin-top: .25rem;
}

.vms-brand__name {
    font-family: var(--vms-font-display);
    font-weight: 700;
    font-size: .9375rem;
    color: var(--vms-ink);
    letter-spacing: -.02em;
    line-height: 1.1;
}

.vms-brand__sub {
    font-size: .6875rem;
    color: var(--vms-muted-2);
    line-height: 1.2;
}

/* Vendor identity block */
/* Flex children default to min-width:auto and refuse to shrink below their
   content, so every truncation rule below depends on this utility. */
.min-width-0 { min-width: 0; }

.vms-identity {
    display: flex;
    align-items: center;
    gap: .625rem;
    min-width: 0;
    overflow: hidden;
    margin: 0 .75rem .25rem;
    padding: .625rem .75rem;
    border-radius: var(--vms-r-md);
    background: var(--vms-canvas-2);
    border: 1px solid var(--vms-line);
}

.vms-avatar {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--vms-brand-50);
    color: var(--vms-brand-600);
    font-family: var(--vms-font-display);
    font-weight: 700;
    font-size: .75rem;
    flex-shrink: 0;
    border: 1px solid var(--vms-brand-100);
}

.vms-avatar--lg { width: 42px; height: 42px; font-size: .875rem; }

.vms-identity__name {
    font-size: .78125rem;
    font-weight: 700;
    color: var(--vms-ink);
    line-height: 1.3;
    /* Wrap to at most two lines, then ellipsis. Full name is in the title. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* A single unbroken token can still not push the container open. */
    overflow-wrap: anywhere;
    word-break: break-word;
}

.vms-identity__meta {
    font-size: .6875rem;
    color: var(--vms-muted-2);
    line-height: 1.3;
    margin-top: .0625rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Nav sections */
.vms-nav-section {
    font-size: .625rem;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--vms-muted-2);
    padding: .875rem 1.5rem .375rem;
    margin: 0;
}

.sidenav .navbar-nav .nav-link {
    border-radius: var(--vms-r-sm);
    margin: 1px .75rem;
    padding: .5625rem .75rem;
    font-size: .84375rem;
    font-weight: 600;
    color: var(--vms-ink-2) !important;
    display: flex;
    align-items: center;
    gap: .625rem;
    transition: background-color .15s ease, color .15s ease;
    box-shadow: none !important;
}

.sidenav .navbar-nav .nav-link i.material-symbols-rounded {
    font-size: 1.1875rem;
    opacity: 1 !important;
    color: var(--vms-muted);
    transition: color .15s ease;
}

.sidenav .navbar-nav .nav-link .nav-link-text {
    margin-left: 0 !important;
}

.sidenav .navbar-nav .nav-link:hover {
    background-color: var(--vms-canvas);
    color: var(--vms-ink) !important;
}

.sidenav .navbar-nav .nav-link:hover i.material-symbols-rounded { color: var(--vms-ink-2); }

.sidenav .navbar-nav .nav-link.active,
.sidenav .navbar-nav .nav-link.active:hover {
    background: var(--vms-brand-50) !important;
    color: var(--vms-brand-600) !important;
    font-weight: 800;
    background-image: none !important;
}

.sidenav .navbar-nav .nav-link.active i.material-symbols-rounded {
    color: var(--vms-brand-600);
    font-variation-settings: 'FILL' 1;
}

/* Count pill on a nav item */
.vms-nav-count {
    margin-left: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--vms-r-pill);
    background: var(--vms-danger);
    color: #fff;
    font-size: .625rem;
    font-weight: 700;
    display: inline-grid;
    place-items: center;
    font-variant-numeric: tabular-nums;
}

.sidenav .navbar-nav .nav-link.active .vms-nav-count { background: var(--vms-brand-600); }

.vms-signout {
    margin: .25rem .75rem 1rem;
    padding: .5625rem .75rem;
    border-radius: var(--vms-r-sm);
    font-size: .84375rem;
    font-weight: 600;
    color: var(--vms-muted);
    display: flex;
    align-items: center;
    gap: .625rem;
    width: calc(100% - 1.5rem);
    border: 0;
    background: transparent;
    text-align: left;
    transition: background-color .15s ease, color .15s ease;
}

.vms-signout i { font-size: 1.125rem; color: var(--vms-muted-2); }

.vms-signout:hover {
    background: var(--vms-danger-bg);
    color: var(--vms-danger);
}

.vms-signout:hover i { color: var(--vms-danger); }

/* --------------------------------------------------------------------------
   5. Top bar
   -------------------------------------------------------------------------- */
.navbar-main {
    padding-top: .75rem !important;
    padding-bottom: .25rem !important;
}

.vms-topbar-btn {
    /* Used on both <a> and <button>; reset the UA button box. */
    padding: 0;
    cursor: pointer;
    width: 38px;
    height: 38px;
    border-radius: var(--vms-r-md);
    display: grid;
    place-items: center;
    background: var(--vms-surface);
    border: 1px solid var(--vms-line);
    color: var(--vms-muted);
    position: relative;
    transition: border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.vms-topbar-btn:hover {
    color: var(--vms-ink);
    border-color: var(--vms-line-strong);
    box-shadow: var(--vms-shadow-xs);
}

.vms-topbar-btn i { font-size: 1.25rem; }

.vms-topbar-btn__dot {
    position: absolute;
    top: 7px;
    right: 8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--vms-danger);
    border: 2px solid var(--vms-surface);
}

.vms-usermenu {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .25rem .625rem .25rem .25rem;
    border-radius: var(--vms-r-pill);
    background: var(--vms-surface);
    border: 1px solid var(--vms-line);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.vms-usermenu:hover {
    border-color: var(--vms-line-strong);
    box-shadow: var(--vms-shadow-xs);
}

.vms-usermenu__name {
    font-size: .8125rem;
    font-weight: 700;
    color: var(--vms-ink);
    line-height: 1.2;
    max-width: clamp(110px, 16vw, 240px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vms-usermenu__role {
    font-size: .6875rem;
    color: var(--vms-muted-2);
    line-height: 1.15;
}

.dropdown-menu {
    border: 1px solid var(--vms-line);
    border-radius: var(--vms-r-md);
    box-shadow: var(--vms-shadow-lg);
    padding: .375rem;
    min-width: 240px;
}

.dropdown-menu .dropdown-item {
    border-radius: var(--vms-r-sm);
    font-size: .8125rem;
    padding: .5rem .625rem;
    color: var(--vms-ink-2);
    display: flex;
    align-items: center;
    gap: .5rem;
}

.dropdown-menu .dropdown-item i { font-size: 1.0625rem; color: var(--vms-muted-2); }
.dropdown-menu .dropdown-item:hover { background: var(--vms-canvas); color: var(--vms-ink); }
.dropdown-menu .dropdown-item.text-danger:hover { background: var(--vms-danger-bg); color: var(--vms-danger) !important; }
.dropdown-menu .dropdown-item.text-danger:hover i { color: var(--vms-danger); }

.vms-dropdown-head {
    padding: .625rem .625rem .5rem;
    border-bottom: 1px solid var(--vms-line);
    margin-bottom: .375rem;
}

/* Breadcrumb */
.breadcrumb { gap: .125rem; }

.breadcrumb .breadcrumb-item,
.breadcrumb .breadcrumb-item a {
    font-size: .75rem;
    color: var(--vms-muted-2);
    opacity: 1 !important;
    text-decoration: none;
}

.breadcrumb .breadcrumb-item a:hover { color: var(--vms-brand-600); }
.breadcrumb .breadcrumb-item.active { color: var(--vms-ink-2); font-weight: 500; }

/* --------------------------------------------------------------------------
   6. Page header
   -------------------------------------------------------------------------- */
.vms-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 1.25rem 0 1.5rem;
}

.vms-page-header__title {
    font-family: var(--vms-font-display);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.024em;
    color: var(--vms-ink);
    margin: 0 0 .25rem;
    display: flex;
    align-items: center;
    gap: .625rem;
}

.vms-page-header__subtitle {
    font-size: .8125rem;
    color: var(--vms-muted);
    margin: 0;
    max-width: 62ch;
}

.vms-page-header__actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   7. Cards
   -------------------------------------------------------------------------- */
.card,
.vms-card {
    background: var(--vms-surface);
    border: 1px solid var(--vms-line);
    border-radius: var(--vms-r-lg);
    box-shadow: var(--vms-shadow-sm);
}

.vms-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--vms-line);
}

.vms-card__title {
    font-family: var(--vms-font-display);
    font-size: .9375rem;
    font-weight: 700;
    color: var(--vms-ink);
    margin: 0;
    letter-spacing: -.015em;
}

.vms-card__subtitle {
    font-size: .75rem;
    color: var(--vms-muted);
    margin: .125rem 0 0;
}

.vms-card__body { padding: 1.25rem; }
.vms-card__body--flush { padding: 0; }

.vms-card__footer {
    padding: .875rem 1.25rem;
    border-top: 1px solid var(--vms-line);
    background: var(--vms-canvas-2);
    border-radius: 0 0 var(--vms-r-lg) var(--vms-r-lg);
}

/* --------------------------------------------------------------------------
   8. Stat cards
   -------------------------------------------------------------------------- */
.vms-stat {
    position: relative;
    display: block;
    height: 100%;
    background: var(--vms-surface);
    border: 1px solid var(--vms-line);
    border-radius: var(--vms-r-lg);
    padding: 1.125rem 1.25rem;
    box-shadow: var(--vms-shadow-sm);
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

a.vms-stat:hover {
    transform: translateY(-2px);
    box-shadow: var(--vms-shadow-md);
    border-color: var(--vms-line-strong);
}

.vms-stat__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .875rem;
}

.vms-stat__label {
    font-size: .75rem;
    font-weight: 500;
    color: var(--vms-muted);
    margin: 0;
    line-height: 1.3;
}

.vms-stat__icon {
    width: 38px;
    height: 38px;
    border-radius: var(--vms-r-md);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.vms-stat__icon i { font-size: 1.25rem; }

.vms-stat__icon--brand   { background: var(--vms-brand-50);    color: var(--vms-brand-600); }
.vms-stat__icon--success { background: var(--vms-success-bg);  color: var(--vms-success); }
.vms-stat__icon--warning { background: var(--vms-warning-bg);  color: var(--vms-warning); }
.vms-stat__icon--danger  { background: var(--vms-danger-bg);   color: var(--vms-danger); }
.vms-stat__icon--info    { background: var(--vms-info-bg);     color: var(--vms-info); }
.vms-stat__icon--neutral { background: var(--vms-neutral-bg);  color: var(--vms-neutral); }

.vms-stat__value {
    font-family: var(--vms-font-display);
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--vms-ink);
    line-height: 1.1;
    margin: 0;
}

.vms-stat__value small {
    font-size: .875rem;
    font-weight: 600;
    color: var(--vms-muted-2);
    letter-spacing: -.01em;
}

.vms-stat__foot {
    display: flex;
    align-items: center;
    gap: .3125rem;
    margin: .5rem 0 0;
    font-size: .75rem;
    color: var(--vms-muted);
}

.vms-stat__foot i { font-size: .9375rem; }
.vms-stat__foot--up i    { color: var(--vms-success); }
.vms-stat__foot--down i  { color: var(--vms-danger); }
.vms-stat__foot--alert   { color: var(--vms-warning); font-weight: 500; }
.vms-stat__foot--alert i { color: var(--vms-warning); }

/* --------------------------------------------------------------------------
   9. Tables
   -------------------------------------------------------------------------- */
.vms-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.vms-table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.vms-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--vms-canvas-2);
    font-family: var(--vms-font-body);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--vms-muted-2);
    padding: .6875rem 1rem;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--vms-line);
    border-top: 0;
}

.vms-table thead th:first-child { padding-left: 1.25rem; }
.vms-table thead th:last-child  { padding-right: 1.25rem; }

.vms-table tbody td {
    padding: .8125rem 1rem;
    font-size: .8125rem;
    color: var(--vms-ink-2);
    border-bottom: 1px solid var(--vms-line);
    vertical-align: middle;
    background: transparent;
}

.vms-table tbody td:first-child { padding-left: 1.25rem; }
.vms-table tbody td:last-child  { padding-right: 1.25rem; }

.vms-table tbody tr { transition: background-color .12s ease; }
.vms-table tbody tr:hover td { background-color: var(--vms-canvas-2); }
.vms-table tbody tr:last-child td { border-bottom: 0; }

/* Cell conventions */
.vms-table .vms-num,
.vms-table .text-end { text-align: right; }
.vms-table .vms-col-actions { text-align: right; white-space: nowrap; }
.vms-table .vms-col-idx { width: 52px; color: var(--vms-muted-2); font-variant-numeric: tabular-nums; }

.vms-cell-primary {
    font-weight: 600;
    color: var(--vms-ink);
    display: block;
    line-height: 1.35;
}

.vms-cell-sub {
    font-size: .75rem;
    color: var(--vms-muted-2);
    display: block;
    line-height: 1.35;
}

.vms-cell-ref {
    font-weight: 600;
    color: var(--vms-ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}

/* Toolbar above a table */
.vms-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    padding: .875rem 1.25rem;
    border-bottom: 1px solid var(--vms-line);
}

.vms-search {
    position: relative;
    flex: 1 1 260px;
    max-width: 340px;
}

.vms-search i {
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.125rem;
    color: var(--vms-muted-2);
    pointer-events: none;
}

.vms-search input {
    width: 100%;
    height: 38px;
    padding: 0 .875rem 0 2.375rem;
    font-size: .8125rem;
    color: var(--vms-ink);
    background: var(--vms-canvas-2);
    border: 1px solid var(--vms-line);
    border-radius: var(--vms-r-md);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.vms-search input::placeholder { color: var(--vms-muted-2); }

.vms-search input:focus {
    background: var(--vms-surface);
    border-color: var(--vms-brand-300);
    box-shadow: 0 0 0 3px var(--vms-brand-50);
}

/* Segmented filter */
.vms-segment {
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    background: var(--vms-canvas-2);
    border: 1px solid var(--vms-line);
    border-radius: var(--vms-r-md);
}

.vms-segment button {
    border: 0;
    background: transparent;
    border-radius: calc(var(--vms-r-md) - 4px);
    padding: .375rem .75rem;
    font-size: .75rem;
    font-weight: 500;
    color: var(--vms-muted);
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
    white-space: nowrap;
}

.vms-segment button:hover { color: var(--vms-ink); }

.vms-segment button.is-active {
    background: var(--vms-surface);
    color: var(--vms-ink);
    font-weight: 600;
    box-shadow: var(--vms-shadow-xs);
}

.vms-segment button span.count {
    font-size: .6875rem;
    font-weight: 600;
    color: var(--vms-muted-2);
    font-variant-numeric: tabular-nums;
}

.vms-segment button.is-active span.count { color: var(--vms-brand-600); }

/* --------------------------------------------------------------------------
   10. Status pills — tinted, not heavy gradients
   -------------------------------------------------------------------------- */
.vms-pill {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .25rem .5625rem;
    border-radius: var(--vms-r-pill);
    font-size: .6875rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .005em;
    white-space: nowrap;
    border: 1px solid transparent;
    text-transform: none;
}

.vms-pill::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.vms-pill--no-dot::before { display: none; }

.vms-pill--success { color: var(--vms-success); background: var(--vms-success-bg); border-color: var(--vms-success-line); }
.vms-pill--warning { color: var(--vms-warning); background: var(--vms-warning-bg); border-color: var(--vms-warning-line); }
.vms-pill--danger  { color: var(--vms-danger);  background: var(--vms-danger-bg);  border-color: var(--vms-danger-line); }
.vms-pill--info    { color: var(--vms-info);    background: var(--vms-info-bg);    border-color: var(--vms-info-line); }
.vms-pill--brand   { color: var(--vms-brand-600); background: var(--vms-brand-50); border-color: var(--vms-brand-100); }
.vms-pill--neutral { color: var(--vms-neutral); background: var(--vms-neutral-bg); border-color: var(--vms-neutral-line); }

/* --------------------------------------------------------------------------
   11. Buttons
   -------------------------------------------------------------------------- */
.vms-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    height: 38px;
    padding: 0 .875rem;
    border-radius: var(--vms-r-md);
    font-family: var(--vms-font-body);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: -.005em;
    line-height: 1;
    border: 1px solid transparent;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.vms-btn i { font-size: 1.0625rem; }
.vms-btn:disabled, .vms-btn.disabled { opacity: .55; pointer-events: none; }

.vms-btn--primary {
    background: var(--vms-brand-500);
    color: #fff !important;
    box-shadow: var(--vms-shadow-brand);
}

.vms-btn--primary:hover { background: var(--vms-brand-600); color: #fff !important; transform: translateY(-1px); }

.vms-btn--ghost {
    background: var(--vms-surface);
    color: var(--vms-ink-2) !important;
    border-color: var(--vms-line-strong);
    box-shadow: var(--vms-shadow-xs);
}

.vms-btn--ghost:hover { background: var(--vms-canvas-2); color: var(--vms-ink) !important; border-color: var(--vms-muted-2); }

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

.vms-btn--danger:hover { background: var(--vms-danger); color: #fff !important; border-color: var(--vms-danger); }

.vms-btn--sm { height: 32px; padding: 0 .6875rem; font-size: .75rem; border-radius: var(--vms-r-sm); }
.vms-btn--sm i { font-size: 1rem; }
.vms-btn--lg { height: 46px; padding: 0 1.25rem; font-size: .875rem; }
.vms-btn--block { width: 100%; }

/* Icon-only row action */
.vms-icon-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--vms-r-sm);
    display: inline-grid;
    place-items: center;
    background: var(--vms-surface);
    border: 1px solid var(--vms-line);
    color: var(--vms-muted);
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

.vms-icon-btn i { font-size: 1.0625rem; }
.vms-icon-btn:hover { color: var(--vms-brand-600); border-color: var(--vms-brand-200); background: var(--vms-brand-50); }
.vms-icon-btn--danger:hover { color: var(--vms-danger); border-color: var(--vms-danger-line); background: var(--vms-danger-bg); }

/* Filled, like .vms-btn--primary — the row's main action reads as one. */
.vms-icon-btn--primary {
    background: var(--vms-brand-500);
    border-color: var(--vms-brand-500);
    color: #fff;
    box-shadow: var(--vms-shadow-xs);
}

.vms-icon-btn--primary:hover {
    background: var(--vms-brand-600);
    border-color: var(--vms-brand-600);
    color: #fff;
}

/* Keep legacy .action-btn usages from looking out of place */
.action-btn {
    background-image: none !important;
    border-radius: var(--vms-r-sm) !important;
    box-shadow: none !important;
    padding: .4375rem .6875rem !important;
    font-size: .75rem !important;
    font-weight: 600 !important;
}

/* Every gradient variant must be mapped: .action-btn forces white text and
   clears background-image, so an unmapped variant renders invisible. */
.action-btn.bg-gradient-primary,
.action-btn.bg-gradient-info      { background-color: var(--vms-brand-500) !important; }
.action-btn.bg-gradient-dark      { background-color: var(--vms-ink-2) !important; }
.action-btn.bg-gradient-danger    { background-color: var(--vms-danger) !important; }
.action-btn.bg-gradient-success   { background-color: var(--vms-success) !important; }
.action-btn.bg-gradient-warning   { background-color: #d97706 !important; }
.action-btn.bg-gradient-secondary { background-color: var(--vms-neutral) !important; }

/* Some call sites pair a gradient with .text-dark; keep those readable. */
.action-btn.text-dark { color: #fff !important; }

/* Anything still unmapped falls back to the brand rather than disappearing. */
.action-btn:not([class*="bg-"]) { background-color: var(--vms-brand-500) !important; }
.action-btn:hover { transform: translateY(-1px); opacity: .92; }

/* --------------------------------------------------------------------------
   12. Empty state
   -------------------------------------------------------------------------- */
.vms-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3.5rem 1.5rem;
}

.vms-empty__icon {
    width: 56px;
    height: 56px;
    border-radius: var(--vms-r-lg);
    display: grid;
    place-items: center;
    background: var(--vms-canvas);
    color: var(--vms-muted-2);
    margin-bottom: 1rem;
    border: 1px solid var(--vms-line);
}

.vms-empty__icon i { font-size: 1.625rem; }

.vms-empty__title {
    font-family: var(--vms-font-display);
    font-size: .9375rem;
    font-weight: 700;
    color: var(--vms-ink);
    margin: 0 0 .25rem;
}

.vms-empty__text {
    font-size: .8125rem;
    color: var(--vms-muted);
    margin: 0;
    max-width: 42ch;
}

.vms-empty__actions { margin-top: 1.125rem; }

/* --------------------------------------------------------------------------
   13. Forms
   -------------------------------------------------------------------------- */
.vms-field { margin-bottom: 1.125rem; }

.vms-label {
    display: block;
    font-size: .75rem;
    font-weight: 600;
    color: var(--vms-ink-2);
    margin-bottom: .375rem;
    letter-spacing: -.005em;
}

.vms-label .req { color: var(--vms-danger); margin-left: 2px; }

.vms-input,
.vms-select,
.vms-textarea {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: .625rem .875rem;
    font-family: var(--vms-font-body);
    font-size: .875rem;
    color: var(--vms-ink);
    background: var(--vms-surface);
    border: 1px solid var(--vms-line-strong);
    border-radius: var(--vms-r-md);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
    appearance: none;
}

.vms-textarea { min-height: 104px; resize: vertical; }

.vms-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .875rem center;
    padding-right: 2.5rem;
}

.vms-input::placeholder, .vms-textarea::placeholder { color: var(--vms-muted-2); }

.vms-input:focus,
.vms-select:focus,
.vms-textarea:focus {
    border-color: var(--vms-brand-400);
    box-shadow: 0 0 0 3px var(--vms-brand-50);
}

.vms-input.is-invalid,
.vms-select.is-invalid,
.vms-textarea.is-invalid { border-color: var(--vms-danger); }

.vms-input.is-invalid:focus { box-shadow: 0 0 0 3px var(--vms-danger-bg); }

.vms-help { font-size: .75rem; color: var(--vms-muted-2); margin-top: .3125rem; }

.vms-error {
    display: flex;
    align-items: center;
    gap: .25rem;
    font-size: .75rem;
    color: var(--vms-danger);
    margin-top: .3125rem;
}

.vms-error i { font-size: .9375rem; }

/* Input with a trailing affordance (password reveal) */
.vms-input-group { position: relative; }

.vms-input-group .vms-input { padding-right: 2.875rem; }

.vms-input-affix {
    position: absolute;
    right: .375rem;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border: 0;
    background: transparent;
    border-radius: var(--vms-r-sm);
    display: grid;
    place-items: center;
    color: var(--vms-muted-2);
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease;
}

.vms-input-affix:hover { color: var(--vms-ink-2); background: var(--vms-canvas); }
.vms-input-affix i { font-size: 1.125rem; }

/* Checkbox / switch */
.vms-check {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .8125rem;
    color: var(--vms-ink-2);
    cursor: pointer;
    user-select: none;
}

.vms-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 1.5px solid var(--vms-line-strong);
    appearance: none;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: background-color .15s ease, border-color .15s ease;
}

.vms-check input[type="checkbox"]:checked {
    background: var(--vms-brand-500);
    border-color: var(--vms-brand-500);
}

.vms-check input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1.5px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.vms-check input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--vms-brand-50);
}

/* OTP entry */
.vms-otp {
    display: flex;
    gap: .5rem;
    justify-content: center;
}

.vms-otp input {
    width: 48px;
    height: 56px;
    text-align: center;
    font-family: var(--vms-font-display);
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--vms-ink);
    background: var(--vms-surface);
    border: 1.5px solid var(--vms-line-strong);
    border-radius: var(--vms-r-md);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
    font-variant-numeric: tabular-nums;
}

.vms-otp input:focus {
    border-color: var(--vms-brand-400);
    box-shadow: 0 0 0 3px var(--vms-brand-50);
}

.vms-otp input.is-filled { border-color: var(--vms-brand-300); background: var(--vms-brand-50); }

@media (max-width: 400px) {
    .vms-otp input { width: 40px; height: 48px; font-size: 1.125rem; }
}

/* --------------------------------------------------------------------------
   14. Auth — a single centred card, not a full-bleed split
   -------------------------------------------------------------------------- */
.vms-auth {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    /* dvh tracks the collapsing mobile browser chrome; vh above is the fallback. */
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 2rem 1.5rem;
    padding-left: max(1.5rem, env(safe-area-inset-left));
    padding-right: max(1.5rem, env(safe-area-inset-right));
    background: var(--vms-brand-900);
}

/*  Watoto congregation photograph. It sits on its own fixed layer rather than
    on .vms-auth so the blur never touches the card, and so it stays put while
    a tall form scrolls over it. The inset bleed hides the blur's soft edge. */
.vms-auth::before {
    content: '';
    position: fixed;
    inset: -48px;
    z-index: -2;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url('../images/brand/auth-bg.jpg');
    background-image: image-set(
        url('../images/brand/auth-bg.webp') type('image/webp'),
        url('../images/brand/auth-bg.jpg') type('image/jpeg'));
    filter: blur(3px) saturate(.85);
}

/*  Plum scrim. The source photo is lit red/orange, so the brand gradient does
    double duty: it pulls the image onto the palette and buys the contrast the
    white card and its shadow need to separate from it. */
.vms-auth::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(1200px 760px at 16% 4%, rgba(123, 44, 81, .55), transparent 66%),
        linear-gradient(152deg, rgba(46, 15, 30, .9) 0%, rgba(87, 30, 57, .82) 45%, rgba(14, 8, 12, .92) 100%);
}

.vms-auth__card {
    width: 100%;
    max-width: 880px;
    display: grid;
    grid-template-columns: 0.92fr 1fr;
    background: var(--vms-surface);
    border: 1px solid var(--vms-line);
    border-radius: var(--vms-r-xl);
    box-shadow: var(--vms-shadow-lg);
    overflow: hidden;
    animation: vms-card-in .6s cubic-bezier(.22, 1, .36, 1) both;
}

.vms-auth__card--wide { max-width: 1080px; grid-template-columns: 0.66fr 1fr; }

.vms-auth__aside {
    position: relative;
    overflow: hidden;
    padding: 2.25rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
    color: #fff;
    background-color: var(--vms-brand-900);
    background-position: 62% center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url('../images/brand/auth-bg.jpg');
    background-image: image-set(
        url('../images/brand/auth-bg.webp') type('image/webp'),
        url('../images/brand/auth-bg.jpg') type('image/jpeg'));
}

/*  The brand panel shows the photograph sharp, so it reads as photography
    rather than texture, but every pixel of it sits under a plum gradient that
    keeps the headline and bullet list at full white-on-dark contrast. */
.vms-auth__aside::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(520px 340px at 82% 4%, rgba(207, 154, 181, .22), transparent 64%),
        linear-gradient(158deg, rgba(46, 15, 30, .86) 0%, rgba(87, 30, 57, .74) 50%, rgba(123, 44, 81, .66) 100%);
    pointer-events: none;
}

.vms-auth__aside::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(130% 95% at 50% 0%, #000 26%, transparent 76%);
    -webkit-mask-image: radial-gradient(130% 95% at 50% 0%, #000 26%, transparent 76%);
    pointer-events: none;
}

.vms-auth__aside > * { position: relative; z-index: 1; }

.vms-auth__brand { display: flex; align-items: center; gap: .625rem; }

.vms-auth__brand .vms-brand__mark {
    background: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, .24);
    box-shadow: none;
    backdrop-filter: blur(8px);
}

.vms-auth__brand-name {
    font-family: var(--vms-font-script);
    font-size: 1.375rem;
    color: #fff;
    line-height: 1;
}

.vms-auth__brand-sub {
    font-size: .5625rem;
    font-weight: 700;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
    line-height: 1;
    margin-top: .25rem;
}

.vms-auth__headline {
    font-family: var(--vms-font-display);
    font-size: 1.625rem;
    font-weight: 800;
    letter-spacing: -.032em;
    line-height: 1.18;
    color: #fff;
    margin: 0 0 .625rem;
    max-width: 14ch;
}

.vms-auth__lede {
    font-size: .8125rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .68);
    max-width: 34ch;
    margin: 0 0 1.5rem;
}

.vms-auth__points {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .625rem;
}

.vms-auth__points li {
    display: flex;
    align-items: center;
    gap: .625rem;
    font-size: .8125rem;
    color: rgba(255, 255, 255, .88);
    line-height: 1.4;
    animation: vms-slide-right .5s cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: calc(.35s + var(--i, 0) * .09s);
}

.vms-auth__points i { font-size: 1.0625rem; color: var(--vms-brand-200); flex-shrink: 0; }

.vms-auth__foot {
    font-size: .6875rem;
    color: rgba(255, 255, 255, .62);
    line-height: 1.5;
}

.vms-auth__main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 2.25rem;
    overflow-y: auto;
}

.vms-auth__panel { width: 100%; max-width: 330px; }
.vms-auth__panel--wide { max-width: 100%; }

.vms-auth__title {
    font-family: var(--vms-font-display);
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--vms-ink);
    margin: 0 0 .25rem;
}

.vms-auth__sub {
    font-size: .8125rem;
    color: var(--vms-muted);
    margin: 0 0 1.5rem;
    line-height: 1.5;
}

.vms-auth__mobile-brand { display: none; margin-bottom: 1.5rem; }

.vms-auth__alt {
    text-align: center;
    font-size: .78125rem;
    color: var(--vms-muted);
    margin-top: 1.25rem;
}

.vms-auth__alt a { color: var(--vms-brand-500); font-weight: 700; text-decoration: none; }
.vms-auth__alt a:hover { text-decoration: underline; }

.vms-auth__divider {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1.125rem 0;
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--vms-muted-2);
}

.vms-auth__divider::before,
.vms-auth__divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--vms-line);
}

/* Fields fade up in sequence as the card settles. */
.vms-auth__panel .vms-field,
.vms-auth__panel > form > .vms-btn,
.vms-auth__panel .vms-check {
    animation: vms-rise .5s cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: calc(.22s + var(--i, 0) * .07s);
}

@media (max-width: 860px) {
    .vms-auth {
        padding: 1.25rem;
        padding-top: 2rem;
        place-items: start center;
    }
    .vms-auth__card,
    .vms-auth__card--wide { grid-template-columns: 1fr; max-width: 460px; }
    .vms-auth__aside { display: none; }
    .vms-auth__mobile-brand { display: flex; align-items: center; gap: .625rem; }
    .vms-auth__main { padding: 2rem 1.5rem; }
    .vms-auth__panel { max-width: 100%; }

    /* Phones get the 900px cut: same picture, a third of the bytes, and the
       aside that would have shown it sharp is hidden here anyway. */
    .vms-auth::before {
        background-image: url('../images/brand/auth-bg-sm.jpg');
        background-image: image-set(
            url('../images/brand/auth-bg-sm.webp') type('image/webp'),
            url('../images/brand/auth-bg-sm.jpg') type('image/jpeg'));
    }
}

@media (max-width: 575.98px) {
    .vms-auth { padding: 1rem .875rem 2rem; }
    .vms-auth__main { padding: 1.75rem 1.25rem; }
    .vms-auth__title { font-size: 1.25rem; }
}

/* Metered connections keep the scrim and skip the photograph entirely. */
@media (prefers-reduced-data: reduce) {
    .vms-auth::before { background-image: none; }
    .vms-auth__aside { background-image: none; }
}


/* --------------------------------------------------------------------------
   15. Multi-step form (registration)
   -------------------------------------------------------------------------- */
.vms-stepper {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 2rem;
}

.vms-stepper__item {
    display: flex;
    align-items: center;
    gap: .5rem;
    /* Let the connecting bars absorb slack so labels never truncate. */
    flex: 0 0 auto;
    min-width: 0;
}

.vms-stepper__dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: .75rem;
    font-weight: 700;
    font-family: var(--vms-font-display);
    background: var(--vms-canvas);
    color: var(--vms-muted-2);
    border: 1.5px solid var(--vms-line-strong);
    flex-shrink: 0;
    transition: all .2s ease;
}

.vms-stepper__label {
    font-size: .75rem;
    font-weight: 500;
    color: var(--vms-muted-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vms-stepper__bar {
    flex: 1;
    height: 2px;
    background: var(--vms-line);
    border-radius: 2px;
    min-width: 12px;
}

.vms-stepper__item.is-active .vms-stepper__dot {
    background: var(--vms-brand-500);
    border-color: var(--vms-brand-500);
    color: #fff;
    box-shadow: 0 0 0 4px var(--vms-brand-50);
}

.vms-stepper__item.is-active .vms-stepper__label { color: var(--vms-ink); font-weight: 600; }

.vms-stepper__item.is-done .vms-stepper__dot {
    background: var(--vms-success-bg);
    border-color: var(--vms-success-line);
    color: var(--vms-success);
}

.vms-stepper__item.is-done .vms-stepper__label { color: var(--vms-ink-2); }

@media (max-width: 767.98px) {
    .vms-stepper__label { display: none; }
    .vms-stepper__item { flex: 0 0 auto; }
}

.vms-fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 1.75rem;
}

.vms-fieldset__legend {
    font-family: var(--vms-font-display);
    font-size: .875rem;
    font-weight: 700;
    color: var(--vms-ink);
    margin: 0 0 .25rem;
    letter-spacing: -.015em;
}

.vms-fieldset__hint {
    font-size: .75rem;
    color: var(--vms-muted);
    margin: 0 0 1.125rem;
}

/* --------------------------------------------------------------------------
   16. Progress ring / bar
   -------------------------------------------------------------------------- */
.vms-ring {
    --size: 108px;
    width: var(--size);
    height: var(--size);
    position: relative;
    flex-shrink: 0;
}

.vms-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.vms-ring__track { stroke: var(--vms-line); }
.vms-ring__fill { stroke: var(--vms-brand-500); stroke-linecap: round; transition: stroke-dashoffset .8s cubic-bezier(.22, 1, .36, 1); }

.vms-ring__label {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    text-align: center;
}

.vms-ring__value {
    font-family: var(--vms-font-display);
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--vms-ink);
    letter-spacing: -.03em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.vms-bar {
    height: 6px;
    border-radius: var(--vms-r-pill);
    background: var(--vms-line);
    overflow: hidden;
}

.vms-bar__fill {
    height: 100%;
    border-radius: var(--vms-r-pill);
    background: var(--vms-brand-500);
    transition: width .6s cubic-bezier(.22, 1, .36, 1);
}

.vms-bar__fill--success { background: var(--vms-success); }
.vms-bar__fill--warning { background: var(--vms-warning); }
.vms-bar__fill--danger  { background: var(--vms-danger); }

/* --------------------------------------------------------------------------
   17. Lists — deadlines, action items, activity
   -------------------------------------------------------------------------- */
.vms-list { display: flex; flex-direction: column; }

.vms-list__item {
    display: flex;
    align-items: flex-start;
    gap: .875rem;
    padding: .875rem 1.25rem;
    border-bottom: 1px solid var(--vms-line);
    text-decoration: none;
    transition: background-color .12s ease;
}

.vms-list__item:last-child { border-bottom: 0; }
a.vms-list__item:hover { background: var(--vms-canvas-2); }

.vms-list__icon {
    width: 34px;
    height: 34px;
    border-radius: var(--vms-r-sm);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: var(--vms-canvas);
    color: var(--vms-muted);
}

.vms-list__icon i { font-size: 1.125rem; }
.vms-list__icon--brand   { background: var(--vms-brand-50);   color: var(--vms-brand-600); }
.vms-list__icon--warning { background: var(--vms-warning-bg); color: var(--vms-warning); }
.vms-list__icon--danger  { background: var(--vms-danger-bg);  color: var(--vms-danger); }
.vms-list__icon--success { background: var(--vms-success-bg); color: var(--vms-success); }
.vms-list__icon--info    { background: var(--vms-info-bg);    color: var(--vms-info); }

.vms-list__body { flex: 1; min-width: 0; }

.vms-list__title {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--vms-ink);
    margin: 0;
    line-height: 1.4;
}

.vms-list__meta {
    font-size: .75rem;
    color: var(--vms-muted-2);
    margin: .125rem 0 0;
    line-height: 1.4;
}

.vms-list__aside { flex-shrink: 0; text-align: right; }

/* Countdown emphasis */
.vms-days {
    font-family: var(--vms-font-display);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
    color: var(--vms-muted);
    white-space: nowrap;
}

.vms-days--soon { color: var(--vms-warning); }
.vms-days--urgent { color: var(--vms-danger); }

/* --------------------------------------------------------------------------
   18. Charts
   -------------------------------------------------------------------------- */
.vms-chart { position: relative; width: 100%; }
.vms-chart--tall { height: 260px; }
.vms-chart--short { height: 200px; }

.vms-legend {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
}

.vms-legend__item {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-size: .75rem;
    color: var(--vms-muted);
}

.vms-legend__swatch {
    width: 9px;
    height: 9px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   19. Toasts
   -------------------------------------------------------------------------- */
.app-toast-container .toast {
    border: 1px solid var(--vms-line) !important;
    border-radius: var(--vms-r-md) !important;
    box-shadow: var(--vms-shadow-lg) !important;
    background: var(--vms-surface) !important;
    padding: 0;
    overflow: hidden;
}

.vms-toast {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .875rem 1rem;
}

.vms-toast__icon {
    width: 30px;
    height: 30px;
    border-radius: var(--vms-r-sm);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.vms-toast__icon i { font-size: 1.125rem; }
.vms-toast--success .vms-toast__icon { background: var(--vms-success-bg); color: var(--vms-success); }
.vms-toast--error   .vms-toast__icon { background: var(--vms-danger-bg);  color: var(--vms-danger); }
.vms-toast--warning .vms-toast__icon { background: var(--vms-warning-bg); color: var(--vms-warning); }

.vms-toast__title {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--vms-ink);
    margin: 0;
    line-height: 1.4;
}

.vms-toast__msg {
    font-size: .8125rem;
    color: var(--vms-muted);
    margin: .0625rem 0 0;
    line-height: 1.45;
}

/* --------------------------------------------------------------------------
   20. Misc
   -------------------------------------------------------------------------- */
.vms-divider { height: 1px; background: var(--vms-line); border: 0; margin: 1.25rem 0; }

.vms-kv { display: grid; gap: .875rem; }

.vms-kv__row { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.vms-kv__key { font-size: .75rem; color: var(--vms-muted); }
.vms-kv__val { font-size: .8125rem; font-weight: 600; color: var(--vms-ink); text-align: right; }

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

/* Print */
@media print {
    .sidenav, .navbar-main, .app-toast-container, .vms-page-header__actions { display: none !important; }
    .main-content { margin-left: 0 !important; }
    .card, .vms-card { box-shadow: none !important; border-color: #ddd !important; }
}

/* --------------------------------------------------------------------------
   21. Material Dashboard component refinements
   Existing views use .input-group-outline / .btn / .badge / .nav-tabs
   heavily. Retune those in place rather than rewriting 17k lines of markup.
   -------------------------------------------------------------------------- */

/* Outlined inputs (registration wizard, detail pages) */
.input-group-outline .form-control,
.input-group-static .form-control {
    font-family: var(--vms-font-body);
    font-size: .875rem;
    color: var(--vms-ink);
    border-radius: var(--vms-r-md) !important;
    border-color: var(--vms-line-strong);
}

.input-group-outline .form-label,
.input-group-static .form-label {
    font-family: var(--vms-font-body);
    color: var(--vms-muted);
    font-size: .875rem;
}

.input-group-outline.is-focused .form-label,
.input-group-outline.is-filled .form-label {
    color: var(--vms-brand-600);
    font-weight: 500;
}

.input-group-outline.is-focused .form-control,
.input-group-outline .form-control:focus {
    border-color: var(--vms-brand-400) !important;
    box-shadow: 0 0 0 3px var(--vms-brand-50) !important;
}

.input-group-outline .form-control.is-invalid,
.form-control.is-invalid,
.was-validated .form-control:invalid {
    border-color: var(--vms-danger) !important;
}

.invalid-feedback { font-size: .75rem; color: var(--vms-danger); }

select.form-control,
select.form-select {
    border-radius: var(--vms-r-md);
    border-color: var(--vms-line-strong);
    font-size: .875rem;
    color: var(--vms-ink);
}

select.form-select:focus {
    border-color: var(--vms-brand-400);
    box-shadow: 0 0 0 3px var(--vms-brand-50);
}

/* Buttons — keep the class names, drop the heavy gradients */
.btn {
    font-family: var(--vms-font-body);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: -.005em;
    text-transform: none;
    border-radius: var(--vms-r-md);
    padding: .625rem 1rem;
    transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.btn.bg-gradient-primary,
.btn.bg-gradient-info {
    background-image: none;
    background-color: var(--vms-brand-500);
    box-shadow: var(--vms-shadow-brand);
}

.btn.bg-gradient-primary:hover,
.btn.bg-gradient-info:hover {
    background-color: var(--vms-brand-600);
    transform: translateY(-1px);
}

.btn.bg-gradient-dark {
    background-image: none;
    background-color: var(--vms-ink-2);
    box-shadow: var(--vms-shadow-sm);
}

.btn.bg-gradient-dark:hover { background-color: var(--vms-ink); transform: translateY(-1px); }

.btn.bg-gradient-secondary {
    background-image: none;
    background-color: var(--vms-neutral-bg);
    color: var(--vms-ink-2) !important;
    box-shadow: none;
    border: 1px solid var(--vms-line-strong);
}

.btn.bg-gradient-secondary:hover { background-color: var(--vms-line); }

.btn.bg-gradient-success { background-image: none; background-color: var(--vms-success); }
.btn.bg-gradient-danger  { background-image: none; background-color: var(--vms-danger); }
.btn.bg-gradient-warning { background-image: none; background-color: #d97706; }

.btn-outline-primary {
    border-color: var(--vms-brand-300);
    color: var(--vms-brand-600);
}

.btn-outline-primary:hover,
.btn-outline-primary.active,
.btn-outline-primary.btn-primary {
    background-color: var(--vms-brand-500);
    border-color: var(--vms-brand-500);
    color: #fff;
}

.btn-outline-secondary {
    border-color: var(--vms-line-strong);
    color: var(--vms-ink-2);
}

.btn-outline-secondary:hover { background-color: var(--vms-canvas); color: var(--vms-ink); }

/* Legacy gradient badges → tinted pills, so old and new screens agree */
.badge.bg-gradient-success { background-image: none; background-color: var(--vms-success-bg) !important; color: var(--vms-success) !important; }
.badge.bg-gradient-danger  { background-image: none; background-color: var(--vms-danger-bg) !important;  color: var(--vms-danger) !important; }
.badge.bg-gradient-warning { background-image: none; background-color: var(--vms-warning-bg) !important; color: var(--vms-warning) !important; }
.badge.bg-gradient-info    { background-image: none; background-color: var(--vms-info-bg) !important;    color: var(--vms-info) !important; }
.badge.bg-gradient-dark,
.badge.bg-gradient-secondary { background-image: none; background-color: var(--vms-neutral-bg) !important; color: var(--vms-neutral) !important; }

.badge {
    font-family: var(--vms-font-body);
    font-weight: 600;
    font-size: .6875rem;
    letter-spacing: .005em;
    text-transform: none;
    border-radius: var(--vms-r-pill);
    padding: .3125rem .625rem;
}

/* Legacy card headers that float a dark slab over the card.
   Superseded by the light treatment in section 25 — kept here only for the
   geometry, since this selector out-specifies the one down there. */
.card .card-header.p-0.position-relative .bg-gradient-dark {
    background-image: none !important;
    background-color: var(--vms-canvas-2) !important;
    border: 1px solid var(--vms-line);
    border-radius: var(--vms-r-md) !important;
    box-shadow: var(--vms-shadow-sm) !important;
}

/* Legacy tables inside detail views */
.table > thead > tr > th {
    font-family: var(--vms-font-body);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .6875rem;
    font-weight: 600;
    color: var(--vms-muted-2);
    border-bottom: 1px solid var(--vms-line);
}

.table > tbody > tr > td { border-bottom: 1px solid var(--vms-line); color: var(--vms-ink-2); }
.table > tbody > tr:hover > td { background-color: var(--vms-canvas-2); }

/* Tabs */
.nav-tabs .nav-link,
.nav-pills .nav-link {
    font-family: var(--vms-font-body);
    font-size: .8125rem;
    font-weight: 500;
    color: var(--vms-muted);
    border-radius: var(--vms-r-sm);
}

.nav-pills .nav-link.active,
.nav-tabs .nav-link.active {
    color: var(--vms-brand-600);
    font-weight: 600;
    background-color: var(--vms-brand-50);
}

/* Alerts */
.alert {
    border-radius: var(--vms-r-md);
    font-size: .8125rem;
    border: 1px solid transparent;
}

.alert-danger  { background-color: var(--vms-danger-bg);  border-color: var(--vms-danger-line);  color: var(--vms-danger) !important; }
.alert-success { background-color: var(--vms-success-bg); border-color: var(--vms-success-line); color: var(--vms-success) !important; }
.alert-warning { background-color: var(--vms-warning-bg); border-color: var(--vms-warning-line); color: var(--vms-warning) !important; }
.alert-info    { background-color: var(--vms-info-bg);    border-color: var(--vms-info-line);    color: var(--vms-info) !important; }

/* Modals */
.modal-content {
    border: 1px solid var(--vms-line);
    border-radius: var(--vms-r-lg);
    box-shadow: var(--vms-shadow-lg);
}

.modal-header { border-bottom: 1px solid var(--vms-line); }
.modal-footer { border-top: 1px solid var(--vms-line); }

/* Progress */
.progress { background-color: var(--vms-line); border-radius: var(--vms-r-pill); }
.progress-bar.bg-gradient-primary { background-image: none; background-color: var(--vms-brand-500); }

/* Select2, matched to the new inputs */
.select2-container .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border-radius: var(--vms-r-md) !important;
    border-color: var(--vms-line-strong) !important;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--vms-brand-400) !important;
    box-shadow: 0 0 0 3px var(--vms-brand-50) !important;
}

.select2-container--default .select2-results__option--highlighted {
    background-color: var(--vms-brand-50) !important;
    color: var(--vms-brand-600) !important;
}

/* ==========================================================================
   22. Motion
   One vocabulary of entrances, reused everywhere. Everything here is
   disabled wholesale by the prefers-reduced-motion guard in section 20.
   ========================================================================== */

@keyframes vms-rise {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

@keyframes vms-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes vms-slide-right {
    from { opacity: 0; transform: translateX(-10px); }
    to   { opacity: 1; transform: none; }
}

@keyframes vms-card-in {
    from { opacity: 0; transform: translateY(18px) scale(.985); }
    to   { opacity: 1; transform: none; }
}

@keyframes vms-pop {
    0%   { opacity: 0; transform: scale(.82); }
    60%  { transform: scale(1.04); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes vms-draw {
    from { stroke-dashoffset: var(--ring-circumference); }
}

@keyframes vms-shimmer {
    from { background-position: -420px 0; }
    to   { background-position: 420px 0; }
}

@keyframes vms-pulse-dot {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .45); }
    70%      { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
}

/* --- Generic hooks ------------------------------------------------------ */

/* Stagger: give a parent [data-stagger] and children animate in sequence. */
[data-stagger] > * {
    animation: vms-rise .5s cubic-bezier(.22, 1, .36, 1) both;
}

[data-stagger] > *:nth-child(1) { animation-delay: .04s; }
[data-stagger] > *:nth-child(2) { animation-delay: .10s; }
[data-stagger] > *:nth-child(3) { animation-delay: .16s; }
[data-stagger] > *:nth-child(4) { animation-delay: .22s; }
[data-stagger] > *:nth-child(5) { animation-delay: .28s; }
[data-stagger] > *:nth-child(6) { animation-delay: .34s; }
[data-stagger] > *:nth-child(n+7) { animation-delay: .38s; }

.vms-page-header { animation: vms-rise .5s cubic-bezier(.22, 1, .36, 1) both; }

.vms-card,
.vms-stat {
    animation: vms-rise .55s cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: .06s;
}

/* Nested cards shouldn't re-animate inside an already animating parent. */
.vms-card .vms-card { animation: none; }

/* Table rows settle in after the card. Capped so long tables stay snappy. */
.vms-table tbody tr[data-row] {
    animation: vms-fade .34s ease both;
}

.vms-table tbody tr[data-row]:nth-child(1)  { animation-delay: .14s; }
.vms-table tbody tr[data-row]:nth-child(2)  { animation-delay: .18s; }
.vms-table tbody tr[data-row]:nth-child(3)  { animation-delay: .22s; }
.vms-table tbody tr[data-row]:nth-child(4)  { animation-delay: .26s; }
.vms-table tbody tr[data-row]:nth-child(5)  { animation-delay: .30s; }
.vms-table tbody tr[data-row]:nth-child(6)  { animation-delay: .34s; }
.vms-table tbody tr[data-row]:nth-child(7)  { animation-delay: .38s; }
.vms-table tbody tr[data-row]:nth-child(8)  { animation-delay: .42s; }
.vms-table tbody tr[data-row]:nth-child(n+9) { animation-delay: .46s; }

/* Sidebar nav slides in on load */
.sidenav .navbar-nav > .nav-item {
    animation: vms-slide-right .42s cubic-bezier(.22, 1, .36, 1) both;
}

.sidenav .navbar-nav > .nav-item:nth-child(-n+3)  { animation-delay: .05s; }
.sidenav .navbar-nav > .nav-item:nth-child(n+4)   { animation-delay: .10s; }
.sidenav .navbar-nav > .nav-item:nth-child(n+7)   { animation-delay: .15s; }

.vms-identity { animation: vms-rise .45s cubic-bezier(.22, 1, .36, 1) both; }

.vms-list__item { animation: vms-fade .38s ease both; }
.vms-list__item:nth-child(1) { animation-delay: .16s; }
.vms-list__item:nth-child(2) { animation-delay: .22s; }
.vms-list__item:nth-child(3) { animation-delay: .28s; }
.vms-list__item:nth-child(4) { animation-delay: .34s; }
.vms-list__item:nth-child(n+5) { animation-delay: .40s; }

.vms-empty { animation: vms-rise .5s cubic-bezier(.22, 1, .36, 1) both; animation-delay: .1s; }
.vms-empty__icon { animation: vms-pop .5s cubic-bezier(.22, 1, .36, 1) both; animation-delay: .18s; }

/* Toasts slide in from the right */
.app-toast-container .toast { animation: vms-toast-in .45s cubic-bezier(.22, 1, .36, 1) both; }

@keyframes vms-toast-in {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: none; }
}

/* Unread notification dot breathes so it reads as live */
.vms-topbar-btn__dot { animation: vms-pulse-dot 2.4s ease-out infinite; }

/* Completeness ring draws itself */
.vms-ring__fill { animation: vms-draw 1.1s cubic-bezier(.22, 1, .36, 1) .3s both; }

/* --- Interaction states ------------------------------------------------- */

.vms-btn:active { transform: translateY(0) scale(.985); }
.vms-icon-btn:active { transform: scale(.94); }

.vms-btn--primary::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, .16), transparent 60%);
    pointer-events: none;
}

.vms-btn--primary { position: relative; overflow: hidden; }

/* Arrow nudges on hover */
.vms-btn i.material-symbols-rounded { transition: transform .18s ease; }
.vms-btn:hover i.material-symbols-rounded { transform: translateX(2px); }
.vms-btn--ghost:hover i.material-symbols-rounded:first-child { transform: translateX(-2px); }

/* Stat cards lift and reveal a brand hairline */
.vms-stat { position: relative; overflow: hidden; }

.vms-stat::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--vms-brand-500), var(--vms-brand-300));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .32s cubic-bezier(.22, 1, .36, 1);
}

a.vms-stat:hover::before { transform: scaleX(1); }
a.vms-stat:hover .vms-stat__icon { transform: scale(1.06) rotate(-3deg); }
.vms-stat__icon { transition: transform .28s cubic-bezier(.22, 1, .36, 1); }

/* Sidebar active item grows an accent bar */
.sidenav .navbar-nav .nav-link { position: relative; }

.sidenav .navbar-nav .nav-link::before {
    content: '';
    position: absolute;
    left: -.375rem;
    top: 50%;
    width: 3px;
    height: 0;
    border-radius: 0 3px 3px 0;
    background: var(--vms-brand-500);
    transform: translateY(-50%);
    transition: height .26s cubic-bezier(.22, 1, .36, 1);
}

.sidenav .navbar-nav .nav-link.active::before { height: 20px; }

/* Row actions surface on hover */
.vms-table tbody tr .vms-col-actions .vms-btn,
.vms-table tbody tr .vms-col-actions .vms-icon-btn { transition: opacity .18s ease, transform .18s ease; }

@media (hover: hover) {
    .vms-table tbody tr .vms-col-actions .vms-btn--ghost { opacity: .85; }
    .vms-table tbody tr:hover .vms-col-actions .vms-btn--ghost { opacity: 1; }
}

/* Segmented filter thumb */
.vms-segment button { transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease; }
.vms-segment button:active { transform: scale(.97); }

/* Card hover lift for interactive cards only */
.vms-card--interactive { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.vms-card--interactive:hover {
    transform: translateY(-2px);
    box-shadow: var(--vms-shadow-md);
    border-color: var(--vms-line-strong);
}

/* Consistent focus ring */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--vms-brand-400);
    outline-offset: 2px;
    border-radius: var(--vms-r-sm);
}

/* Skeleton, for anything loaded after paint */
.vms-skeleton {
    background: linear-gradient(90deg, var(--vms-line) 25%, var(--vms-canvas-2) 50%, var(--vms-line) 75%);
    background-size: 420px 100%;
    animation: vms-shimmer 1.3s linear infinite;
    border-radius: var(--vms-r-sm);
}

/* ==========================================================================
   23. Extra components
   ========================================================================== */

/* Compact metadata chip */
.vms-chip {
    display: inline-flex;
    align-items: center;
    gap: .3125rem;
    padding: .1875rem .5rem;
    border-radius: var(--vms-r-sm);
    background: var(--vms-canvas);
    border: 1px solid var(--vms-line);
    font-size: .6875rem;
    font-weight: 600;
    color: var(--vms-muted);
    white-space: nowrap;
}

.vms-chip i { font-size: .875rem; }

/* Section label between blocks of cards */
.vms-section-label {
    display: flex;
    align-items: center;
    gap: .625rem;
    margin: 1.5rem 0 .875rem;
    font-family: var(--vms-font-display);
    font-size: .8125rem;
    font-weight: 700;
    color: var(--vms-ink);
    letter-spacing: -.01em;
}

.vms-section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--vms-line);
}

/* Inline banner (info / warning strips above tables) */
.vms-banner {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .75rem 1rem;
    border-radius: var(--vms-r-md);
    border: 1px solid transparent;
    font-size: .8125rem;
    font-weight: 500;
    margin-bottom: .875rem;
    animation: vms-rise .5s cubic-bezier(.22, 1, .36, 1) both;
}

.vms-banner i { font-size: 1.125rem; flex-shrink: 0; }

.vms-banner--warning { background: var(--vms-warning-bg); border-color: var(--vms-warning-line); color: var(--vms-warning); }
.vms-banner--info    { background: var(--vms-info-bg);    border-color: var(--vms-info-line);    color: var(--vms-info); }
.vms-banner--danger  { background: var(--vms-danger-bg);  border-color: var(--vms-danger-line);  color: var(--vms-danger); }
.vms-banner--brand   { background: var(--vms-brand-50);   border-color: var(--vms-brand-100);    color: var(--vms-brand-600); }

/* ==========================================================================
   24. Detail-page components
   The view/detail screens each grew their own vocabulary for the same few
   ideas (a section shell, a fact box, a tab strip, a preview modal). These
   are the canonical versions; section 25 maps the existing class names onto
   them so those pages upgrade without their markup or JS being touched.
   ========================================================================== */

/* --- Fact grid: label over value, for record headers -------------------- */
.vms-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    /* Cell borders rather than a gap-background, so a partly-filled last row
       reads as empty space instead of a grey block. */
    background: var(--vms-surface);
    border: 1px solid var(--vms-line);
    border-radius: var(--vms-r-md);
    overflow: hidden;
}

.vms-fact {
    background: var(--vms-surface);
    border-right: 1px solid var(--vms-line);
    border-bottom: 1px solid var(--vms-line);
    padding: .875rem 1rem;
    min-height: 68px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .1875rem;
}

.vms-fact__label {
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--vms-muted-2);
    line-height: 1.2;
    margin: 0;
}

.vms-fact__value {
    font-size: .875rem;
    font-weight: 700;
    color: var(--vms-ink);
    line-height: 1.35;
    margin: 0;
    letter-spacing: -.01em;
    word-break: break-word;
}

.vms-fact__value--num { font-variant-numeric: tabular-nums; }
.vms-fact--accent { background: var(--vms-brand-50); }
.vms-fact--accent .vms-fact__value { color: var(--vms-brand-600); }

/* --- Tabs: underline, animated ------------------------------------------ */
.vms-tabs {
    display: flex;
    gap: .25rem;
    border-bottom: 1px solid var(--vms-line);
    margin-bottom: 1.25rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.vms-tabs::-webkit-scrollbar { display: none; }

/*  Tabs sitting flush at the top of a card. Left untinted on purpose: the
    table header already uses --vms-surface-1, so a tinted strip here would
    band the card tinted / white / tinted. The active underline is the cue. */
.vms-tabs--card {
    margin-bottom: 0;
    padding: 0 .625rem;
    border-radius: calc(var(--vms-r-lg) - 1px) calc(var(--vms-r-lg) - 1px) 0 0;
}

.vms-tab {
    position: relative;
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    padding: .6875rem .875rem;
    font-family: var(--vms-font-body);
    font-size: .8125rem;
    font-weight: 600;
    color: var(--vms-muted);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: .4375rem;
    transition: color .18s ease;
    border-radius: var(--vms-r-sm) var(--vms-r-sm) 0 0;
}

.vms-tab i { font-size: 1.0625rem; }

.vms-tab::after {
    content: '';
    position: absolute;
    left: .5rem;
    right: .5rem;
    bottom: -1px;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: var(--vms-brand-500);
    transform: scaleX(0);
    transition: transform .26s cubic-bezier(.22, 1, .36, 1);
}

.vms-tab:hover { color: var(--vms-ink); background: var(--vms-canvas-2); }
.vms-tab.active { color: var(--vms-brand-600); font-weight: 700; }
.vms-tab.active::after { transform: scaleX(1); }

.vms-tab__count {
    font-size: .6875rem;
    font-weight: 700;
    padding: 0 .3125rem;
    min-width: 18px;
    height: 18px;
    border-radius: var(--vms-r-pill);
    background: var(--vms-neutral-bg);
    color: var(--vms-muted);
    display: inline-grid;
    place-items: center;
    font-variant-numeric: tabular-nums;
}

.vms-tab.active .vms-tab__count { background: var(--vms-brand-100); color: var(--vms-brand-600); }

.vms-tab-panel { animation: vms-rise .38s cubic-bezier(.22, 1, .36, 1) both; }

/* --- Process stepper: where a record is in its lifecycle ---------------- */
.vms-steps {
    display: flex;
    align-items: flex-start;
    gap: 0;
    padding: 1.125rem 1.25rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.vms-steps::-webkit-scrollbar { display: none; }

.vms-step {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    flex: 0 0 auto;
    max-width: 220px;
}

.vms-step__dot {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: var(--vms-canvas);
    border: 1.5px solid var(--vms-line-strong);
    color: var(--vms-muted-2);
    font-size: .875rem;
    transition: all .3s cubic-bezier(.22, 1, .36, 1);
}

.vms-step__dot i { font-size: .9375rem; }

.vms-step__label {
    font-size: .78125rem;
    font-weight: 700;
    color: var(--vms-muted-2);
    line-height: 1.3;
    margin: .1875rem 0 0;
}

.vms-step__meta {
    font-size: .6875rem;
    color: var(--vms-muted-2);
    line-height: 1.3;
    margin: .0625rem 0 0;
    font-variant-numeric: tabular-nums;
}

.vms-step__line {
    flex: 1 1 auto;
    min-width: 28px;
    height: 2px;
    background: var(--vms-line);
    margin: 12px .75rem 0;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

.vms-step__line::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--vms-success);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}

.vms-step__line.is-done::after { transform: scaleX(1); }

.vms-step.is-done .vms-step__dot {
    background: var(--vms-success-bg);
    border-color: var(--vms-success);
    color: var(--vms-success);
}

.vms-step.is-done .vms-step__label { color: var(--vms-ink-2); }

.vms-step.is-current .vms-step__dot {
    background: var(--vms-brand-500);
    border-color: var(--vms-brand-500);
    color: #fff;
    box-shadow: 0 0 0 4px var(--vms-brand-50);
}

.vms-step.is-current .vms-step__label { color: var(--vms-ink); }

/* --- Detail page shell --------------------------------------------------- */
.vms-back {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .75rem;
    font-weight: 600;
    color: var(--vms-muted);
    text-decoration: none;
    margin-bottom: .5rem;
    transition: color .15s ease;
}

.vms-back i { font-size: 1rem; transition: transform .18s ease; }
.vms-back:hover { color: var(--vms-brand-600); }
.vms-back:hover i { transform: translateX(-2px); }

/* --- Document / attachment row ------------------------------------------ */
.vms-file {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    border: 1px solid var(--vms-line);
    border-radius: var(--vms-r-md);
    background: var(--vms-surface);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.vms-file:hover { border-color: var(--vms-line-strong); box-shadow: var(--vms-shadow-xs); }

.vms-file__icon {
    width: 36px;
    height: 36px;
    border-radius: var(--vms-r-sm);
    display: grid;
    place-items: center;
    background: var(--vms-danger-bg);
    color: var(--vms-danger);
    flex-shrink: 0;
}

.vms-file__icon i { font-size: 1.125rem; }
.vms-file__body { flex: 1; min-width: 0; }

.vms-file__name {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--vms-ink);
    margin: 0;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vms-file__meta { font-size: .6875rem; color: var(--vms-muted-2); margin: 0; }

/* ==========================================================================
   25. Detail-page retrofit
   Each detail view ships its own <style> block, pushed into @stack('styles')
   AFTER this file. Every selector here is therefore prefixed with `body` to
   out-specify those page rules (0,1,1 beats 0,1,0) without resorting to
   !important. Same idea, one appearance, no markup changes.
   ========================================================================== */

/* --- Section shells: five prefixes, one component ----------------------- */
body .section-shell,
body .bid-lines-shell,
body .documents-shell,
body .financial-shell,
body .lpo-inner-card,
body .workspace-history-card,
body .evaluation-score-card {
    border: 1px solid var(--vms-line);
    border-radius: var(--vms-r-lg);
    background: var(--vms-surface);
    box-shadow: var(--vms-shadow-sm);
    overflow: hidden;
}

body .section-shell-header,
body .bid-lines-shell-header,
body .documents-shell-header,
body .financial-shell-header,
body .lpo-inner-header {
    padding: .875rem 1.25rem;
    border-bottom: 1px solid var(--vms-line);
    background: var(--vms-canvas-2);
}

body .section-shell-header h6,
body .bid-lines-shell-header h6,
body .documents-shell-header h6,
body .financial-shell-header h6,
body .lpo-inner-header h6,
body .workspace-section-title,
body .workspace-summary-title,
body .evaluation-disclaimer-title {
    font-family: var(--vms-font-display);
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--vms-ink);
    margin-bottom: 0;
}

body .financial-shell-body,
body .lpo-inner-body,
body .workspace-card-body { padding: 1.25rem; }

body .section-footer,
body .bid-lines-footer-note,
body .documents-footer-note {
    padding: .8125rem 1.25rem;
    border-top: 1px solid var(--vms-line);
    background: var(--vms-canvas-2);
    font-size: .75rem;
    color: var(--vms-muted);
}

/* --- Fact boxes: label/value tiles --------------------------------------- */
body .view-field,
body .lpo-view-field,
body .bid-details-box,
body .workspace-summary-box,
body .evaluation-summary-box,
body .evaluation-remarks-box,
body .evaluation-disclaimer-box {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: .6875rem .875rem;
    border: 1px solid var(--vms-line);
    border-radius: var(--vms-r-md);
    background: var(--vms-canvas-2);
    color: var(--vms-ink);
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.45;
}

body .workspace-summary-box,
body .evaluation-summary-box,
body .evaluation-remarks-box,
body .evaluation-disclaimer-box {
    display: block;
    background: var(--vms-surface);
    padding: 1rem;
}

body .evaluation-disclaimer-box { background: var(--vms-warning-bg); border-color: var(--vms-warning-line); }
body .evaluation-disclaimer-title { color: var(--vms-warning); }
body .evaluation-disclaimer-text,
body .workspace-summary-text { font-size: .78125rem; font-weight: 500; color: var(--vms-muted); line-height: 1.55; }

/* The uppercase micro-labels above those boxes */
body .main-content small.text-uppercase {
    font-size: .625rem !important;
    font-weight: 700;
    letter-spacing: .09em;
    color: var(--vms-muted-2) !important;
}

/* --- Tab strips ---------------------------------------------------------- */
body .lpo-content-tabs {
    display: flex;
    gap: .25rem;
    border-bottom: 1px solid var(--vms-line);
    margin-bottom: 1.25rem;
    overflow-x: auto;
}

body .lpo-content-tab-btn {
    position: relative;
    flex: 0 0 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--vms-muted);
    border-radius: var(--vms-r-sm) var(--vms-r-sm) 0 0;
    padding: .6875rem .875rem;
    font-family: var(--vms-font-body);
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    box-shadow: none;
    transition: color .18s ease, background-color .18s ease;
}

body .lpo-content-tab-btn::after {
    content: '';
    position: absolute;
    left: .5rem;
    right: .5rem;
    bottom: -1px;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: var(--vms-brand-500);
    transform: scaleX(0);
    transition: transform .26s cubic-bezier(.22, 1, .36, 1);
}

body .lpo-content-tab-btn:hover { color: var(--vms-ink); background: var(--vms-canvas-2); }

body .lpo-content-tab-btn.active {
    background: transparent;
    background-image: none;
    color: var(--vms-brand-600);
    font-weight: 800;
    border-color: transparent;
    box-shadow: none;
}

body .lpo-content-tab-btn.active::after { transform: scaleX(1); }
body .lpo-content-panel.active { animation: vms-rise .38s cubic-bezier(.22, 1, .36, 1) both; }

/* --- Small action buttons ------------------------------------------------ */
body .workspace-mini-btn,
body .lpo-preview-btn,
body .excel-dialog-btn,
body .quotation-preview-download-btn {
    border: 1px solid transparent;
    border-radius: var(--vms-r-sm);
    padding: .4375rem .6875rem;
    font-family: var(--vms-font-body);
    font-size: .75rem;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    text-decoration: none;
    background-image: none;
    box-shadow: none;
    transition: background-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

body .workspace-mini-btn:active,
body .lpo-preview-btn:active { transform: scale(.97); }

body .workspace-mini-btn.bg-gradient-primary,
body .lpo-preview-btn.bg-gradient-primary,
body .quotation-preview-download-btn { background-color: var(--vms-brand-500); color: #fff; }

body .workspace-mini-btn.bg-gradient-primary:hover,
body .quotation-preview-download-btn:hover { background-color: var(--vms-brand-600); }

body .workspace-mini-btn.bg-gradient-info { background-color: var(--vms-info); color: #fff; }
body .workspace-mini-btn.bg-gradient-dark { background-color: var(--vms-ink-2); color: #fff; }
body .workspace-mini-btn.bg-gradient-danger { background-color: var(--vms-danger-bg); color: var(--vms-danger); border-color: var(--vms-danger-line); }
body .workspace-mini-btn.bg-gradient-danger:hover { background-color: var(--vms-danger); color: #fff; }

body .workspace-mini-upload input[type="file"] {
    font-size: .75rem;
    border: 1px solid var(--vms-line-strong);
    border-radius: var(--vms-r-sm);
    padding: .3125rem .5rem;
}

/* --- Preview / dialog overlays ------------------------------------------ */
body .quotation-preview-overlay,
body .lpo-preview-overlay,
body .excel-dialog-overlay { animation: vms-fade .22s ease both; }

body .quotation-preview-backdrop,
body .lpo-preview-backdrop,
body .excel-dialog-backdrop { background: rgba(46, 15, 30, .55); backdrop-filter: blur(3px); }

body .quotation-preview-panel,
body .lpo-preview-panel,
body .excel-dialog {
    border: 1px solid var(--vms-line);
    border-radius: var(--vms-r-lg);
    box-shadow: var(--vms-shadow-lg);
    background: var(--vms-surface);
    animation: vms-card-in .32s cubic-bezier(.22, 1, .36, 1) both;
}

body .quotation-preview-header,
body .lpo-preview-header,
body .excel-dialog-header {
    background: var(--vms-canvas-2);
    background-image: none;
    border-bottom: 1px solid var(--vms-line);
    padding: .875rem 1.25rem;
}

body .quotation-preview-header h3,
body .lpo-preview-title,
body .excel-dialog-title {
    font-family: var(--vms-font-display);
    font-size: .9375rem;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--vms-ink);
    margin: 0;
}

body .lpo-preview-subtitle,
body .excel-dialog-subtitle,
body .excel-dialog-note { font-size: .75rem; color: var(--vms-muted); }

/* The preview headers were dark slabs; keep their text readable now they're light. */
body .lpo-preview-header.bg-gradient-dark {
    background: var(--vms-canvas-2) !important;
    background-image: none !important;
}

body .lpo-preview-header.bg-gradient-dark .lpo-preview-title,
body .lpo-preview-header.bg-gradient-dark .lpo-preview-subtitle,
body .lpo-preview-header.bg-gradient-dark .text-white { color: var(--vms-ink) !important; }

body .quotation-preview-close-btn,
body .excel-dialog-close {
    width: 32px;
    height: 32px;
    border-radius: var(--vms-r-sm);
    border: 1px solid var(--vms-line);
    background: var(--vms-surface);
    color: var(--vms-muted);
    display: inline-grid;
    place-items: center;
    transition: color .16s ease, border-color .16s ease, background-color .16s ease;
}

body .quotation-preview-close-btn:hover,
body .excel-dialog-close:hover {
    color: var(--vms-danger);
    border-color: var(--vms-danger-line);
    background: var(--vms-danger-bg);
}

body .quotation-preview-frame,
body .lpo-preview-frame { border: 0; background: var(--vms-canvas); }

/* --- Excel import dialog -------------------------------------------------- */
body .excel-file-picker {
    border: 1.5px dashed var(--vms-line-strong);
    border-radius: var(--vms-r-md);
    background: var(--vms-canvas-2);
    transition: border-color .18s ease, background-color .18s ease;
}

body .excel-file-picker:hover { border-color: var(--vms-brand-300); background: var(--vms-brand-50); }
body .excel-file-picker-title { font-size: .8125rem; font-weight: 700; color: var(--vms-ink); }
body .excel-file-picker-text, body .excel-file-name { font-size: .75rem; color: var(--vms-muted); }
body .excel-file-picker-icon, body .excel-dialog-icon { color: var(--vms-brand-500); }
body .excel-dialog-list { font-size: .78125rem; color: var(--vms-muted); line-height: 1.6; }
body .excel-dialog-footer { border-top: 1px solid var(--vms-line); background: var(--vms-canvas-2); padding: .875rem 1.25rem; }

/* --- Search inputs on detail pages --------------------------------------- */
body .table-search-wrap .form-control,
body .quotation-lines-toolbar .form-control {
    height: 38px;
    font-size: .8125rem;
    border-radius: var(--vms-r-md);
    border: 1px solid var(--vms-line);
    background: var(--vms-canvas-2);
}

body .table-search-wrap .form-control:focus,
body .quotation-lines-toolbar .form-control:focus {
    background: var(--vms-surface);
    border-color: var(--vms-brand-300);
    box-shadow: 0 0 0 3px var(--vms-brand-50);
}

/* --- Evaluation scoring --------------------------------------------------- */
body .evaluation-score-value-wrap,
body .evaluation-score-value {
    font-family: var(--vms-font-display);
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--vms-ink);
    font-variant-numeric: tabular-nums;
}

body .evaluation-score-label {
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--vms-muted-2);
}

body .evaluation-score-badge,
body .zscore-badge-wrap .badge,
body .deadline-pill {
    border-radius: var(--vms-r-pill);
    font-family: var(--vms-font-body);
    font-size: .6875rem;
    font-weight: 700;
    padding: .25rem .625rem;
    background-image: none;
}

body .deadline-pill {
    background: var(--vms-warning-bg);
    color: var(--vms-warning);
    border: 1px solid var(--vms-warning-line);
}

body .evaluation-review-icon { color: var(--vms-brand-500); }
body .evaluation-review-state, body .evaluation-result-status { font-size: .8125rem; color: var(--vms-muted); }

/* --- Attachment / document boxes ----------------------------------------- */
body .bid-document-box {
    border: 1px solid var(--vms-line);
    border-radius: var(--vms-r-md);
    background: var(--vms-canvas-2);
    padding: 1rem;
}

body .bid-document-icon { color: var(--vms-danger); }

/* --- Workspace history --------------------------------------------------- */
body .workspace-history-list { display: flex; flex-direction: column; gap: .625rem; }
body .workspace-history-name { font-size: .8125rem; font-weight: 700; color: var(--vms-ink); }
body .workspace-history-meta, body .workspace-history-text { font-size: .75rem; color: var(--vms-muted-2); }

body .workspace-empty-state {
    padding: 2.5rem 1.25rem;
    text-align: center;
    color: var(--vms-muted-2);
    font-size: .8125rem;
    border: 1px dashed var(--vms-line-strong);
    border-radius: var(--vms-r-md);
    background: var(--vms-canvas-2);
}

/* --- Legacy dark card-header slabs on detail pages ------------------------ */
body .main-content .card-header.bg-gradient-dark {
    background-image: none !important;
    background-color: var(--vms-ink-2) !important;
    border-radius: var(--vms-r-lg) var(--vms-r-lg) 0 0;
}

/* --- Validation states ---------------------------------------------------- */
body .delivery-input-invalid { border-color: var(--vms-danger) !important; box-shadow: 0 0 0 3px var(--vms-danger-bg) !important; }
body .delivery-error-message { font-size: .75rem; color: var(--vms-danger); }
body .invalid-block { border-color: var(--vms-danger-line); background: var(--vms-danger-bg); border-radius: var(--vms-r-md); }

/* --- Dark header slabs -> light headers ---------------------------------
   sourcings/apply/view_submission still render Material's dark gradient
   card header with .text-white children. Lighten the slab and re-colour
   the text it contains so those pages match the rebuilt ones. */
body .main-content .card-header.bg-gradient-dark,
body .main-content .card-header .bg-gradient-dark,
body .main-content .card-header.bg-gradient-primary,
body .main-content .card-header .bg-gradient-primary {
    background: var(--vms-canvas-2) !important;
    background-image: none !important;
    box-shadow: none !important;
    border-bottom: 1px solid var(--vms-line);
    border-radius: var(--vms-r-md) !important;
}

body .main-content .card-header.bg-gradient-dark h1,
body .main-content .card-header.bg-gradient-dark h2,
body .main-content .card-header.bg-gradient-dark h3,
body .main-content .card-header.bg-gradient-dark h4,
body .main-content .card-header.bg-gradient-dark h5,
body .main-content .card-header.bg-gradient-dark h6,
body .main-content .card-header .bg-gradient-dark h1,
body .main-content .card-header .bg-gradient-dark h2,
body .main-content .card-header .bg-gradient-dark h3,
body .main-content .card-header .bg-gradient-dark h4,
body .main-content .card-header .bg-gradient-dark h5,
body .main-content .card-header .bg-gradient-dark h6 {
    color: var(--vms-ink) !important;
    font-family: var(--vms-font-display);
    font-size: .9375rem;
    font-weight: 700;
    letter-spacing: -.015em;
}

/* Sub-text only — headings keep the ink colour set above. */
body .main-content .card-header.bg-gradient-dark .text-white:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
body .main-content .card-header .bg-gradient-dark .text-white:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
body .main-content .card-header.bg-gradient-dark span:not(.badge):not(.vms-pill),
body .main-content .card-header .bg-gradient-dark span:not(.badge):not(.vms-pill) {
    color: var(--vms-muted) !important;
}

/* Back buttons living inside those slabs */
body .main-content .card-header .action-btn {
    background-color: var(--vms-surface) !important;
    color: var(--vms-ink-2) !important;
    border: 1px solid var(--vms-line-strong);
}

body .main-content .card-header .action-btn:hover {
    background-color: var(--vms-canvas) !important;
    color: var(--vms-brand-600) !important;
}

/* --- Gradient/solid alerts used as inline banners ------------------------ */
body .main-content .alert.text-white,
body .main-content .alert-success.text-white,
body .main-content .alert-info.text-white,
body .main-content .alert-warning.text-white,
body .main-content .alert-danger.text-white {
    background-image: none !important;
    font-weight: 500;
}

body .main-content .alert-success.text-white { background-color: var(--vms-success-bg) !important; color: var(--vms-success) !important; border-color: var(--vms-success-line) !important; }
body .main-content .alert-info.text-white    { background-color: var(--vms-info-bg) !important;    color: var(--vms-info) !important;    border-color: var(--vms-info-line) !important; }
body .main-content .alert-warning.text-white { background-color: var(--vms-warning-bg) !important; color: var(--vms-warning) !important; border-color: var(--vms-warning-line) !important; }
body .main-content .alert-danger.text-white  { background-color: var(--vms-danger-bg) !important;  color: var(--vms-danger) !important;  border-color: var(--vms-danger-line) !important; }

/* ==========================================================================
   26. Material 3
   The M3 characteristics the MatAble concept leans on: the corner scale
   (buttons become pills), tonal surface containers, state layers at 8%/10%,
   the pill navigation indicator, and tonal (filled-secondary) buttons.
   Weights are one step heavier than stock M3 throughout, for emphasis.
   ========================================================================== */

/* --- Shape: buttons are fully rounded in M3 ------------------------------ */
.vms-btn,
.btn,
.vms-search input,
.vms-segment,
.action-btn {
    border-radius: var(--vms-r-pill) !important;
}

.vms-segment button { border-radius: var(--vms-r-pill) !important; }

.vms-btn { font-weight: 700; letter-spacing: .006em; padding: 0 1.125rem; }
.vms-btn--sm { padding: 0 .875rem; }
.vms-btn--lg { padding: 0 1.5rem; height: 48px; }
.btn { font-weight: 700; padding: .625rem 1.25rem; }

/* Cards step up the M3 corner scale */
.vms-card,
.card,
.vms-stat,
.sidenav { border-radius: var(--vms-r-lg-inc) !important; }

.vms-facts,
.vms-file,
.vms-input,
.vms-select,
.vms-textarea,
.vms-topbar-btn,
.vms-icon-btn,
.vms-chip { border-radius: var(--vms-r-md); }

.modal-content,
.dropdown-menu { border-radius: var(--vms-r-lg) !important; }

/* --- State layers -------------------------------------------------------
   M3 tints an interactive surface with its own on-colour rather than
   swapping the background outright. */
.vms-state { position: relative; isolation: isolate; }

.vms-state::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: currentColor;
    opacity: 0;
    transition: opacity .16s ease;
    pointer-events: none;
    z-index: -1;
}

.vms-state:hover::before { opacity: var(--vms-state-hover); }
.vms-state:active::before { opacity: var(--vms-state-press); }

.vms-btn--primary:hover { box-shadow: var(--vms-shadow-md); }

/* --- Tonal (filled-secondary) button, an M3 staple ---------------------- */
.vms-btn--tonal {
    background: var(--vms-brand-container);
    color: var(--vms-on-brand-container) !important;
    border-color: transparent;
}

.vms-btn--tonal:hover {
    background: var(--vms-brand-100);
    color: var(--vms-brand-700) !important;
    box-shadow: var(--vms-shadow-xs);
}

/* --- Navigation: M3 pill active indicator -------------------------------- */
.sidenav .navbar-nav .nav-link {
    border-radius: var(--vms-r-pill);
    padding: .625rem .875rem;
    margin: 2px .625rem;
    font-weight: 700;
}

.sidenav .navbar-nav .nav-link.active,
.sidenav .navbar-nav .nav-link.active:hover {
    background: var(--vms-brand-container) !important;
    color: var(--vms-on-brand-container) !important;
    font-weight: 800;
}

.sidenav .navbar-nav .nav-link.active i.material-symbols-rounded {
    color: var(--vms-on-brand-container);
}

/* The accent bar belongs to the older look; the pill replaces it. */
.sidenav .navbar-nav .nav-link::before { display: none; }

.vms-signout { border-radius: var(--vms-r-pill); font-weight: 700; }

/* --- Tonal surfaces ------------------------------------------------------ */
.vms-card__header,
.vms-toolbar,
.vms-card__footer,
.vms-table thead th { background: var(--vms-surface-1); }

.vms-fact { background: var(--vms-surface); }
.vms-fact--accent { background: var(--vms-brand-container); }
.vms-fact--accent .vms-fact__value { color: var(--vms-on-brand-container); }

.vms-identity { background: var(--vms-surface-2); border-color: transparent; }

/* --- Emphasis: labels and values carry more weight ---------------------- */
.vms-fact__label,
.vms-stat__label,
.vms-card__subtitle,
.vms-list__meta,
.vms-cell-sub { font-weight: 600; }

.vms-fact__label { color: var(--vms-muted); font-weight: 800; }
.vms-stat__label { color: var(--vms-muted); font-weight: 700; font-size: .78125rem; }
.vms-stat__value { font-weight: 800; letter-spacing: -.035em; }

.vms-card__title { font-size: .9375rem; font-weight: 800; }
.vms-page-header__title { font-weight: 800; letter-spacing: -.03em; }
.vms-page-header__subtitle { font-weight: 500; color: var(--vms-muted); }

.vms-table thead th { font-weight: 800; color: var(--vms-muted); letter-spacing: .05em; }
.vms-table tbody td { font-weight: 500; color: var(--vms-ink-2); }
.vms-cell-primary { font-weight: 700; }
.vms-cell-ref { font-weight: 800; }
.vms-cell-sub { color: var(--vms-muted-2); }

.vms-pill { font-weight: 700; }
.vms-list__title { font-weight: 700; }
.vms-label { font-weight: 700; color: var(--vms-ink-2); font-size: .78125rem; }
.vms-tab { font-weight: 700; }
.vms-tab.active { font-weight: 800; }
.vms-nav-section { color: var(--vms-muted-2); font-weight: 800; }
.vms-step__label { font-weight: 800; }
.breadcrumb .breadcrumb-item,
.breadcrumb .breadcrumb-item a { font-weight: 600; color: var(--vms-muted); }
.breadcrumb .breadcrumb-item.active { font-weight: 700; color: var(--vms-ink-2); }

/* Legacy pages: lift the washed-out Material Dashboard defaults */
body .main-content .text-xs,
body .main-content .text-sm { color: var(--vms-ink-2); }
body .main-content .text-secondary { color: var(--vms-muted) !important; }
body .main-content small.text-uppercase { color: var(--vms-muted) !important; font-weight: 800; }
body .main-content .font-weight-bold { font-weight: 800 !important; }

/* --- M3 filled text field ------------------------------------------------ */
.vms-field--filled .vms-input,
.vms-field--filled .vms-select,
.vms-field--filled .vms-textarea {
    background: var(--vms-surface-2);
    border: 1px solid transparent;
    border-bottom: 2px solid var(--vms-line-strong);
    border-radius: var(--vms-r-xs) var(--vms-r-xs) 0 0;
}

.vms-field--filled .vms-input:focus,
.vms-field--filled .vms-select:focus,
.vms-field--filled .vms-textarea:focus {
    border-bottom-color: var(--vms-brand-500);
    box-shadow: none;
    background: var(--vms-surface-3);
}

/* Read-only fields on the profile page read as text, not as inputs */
.vms-input[readonly],
.vms-textarea[readonly],
.vms-select:disabled {
    background: var(--vms-surface-2);
    border-color: transparent;
    color: var(--vms-ink);
    font-weight: 700;
    cursor: default;
    opacity: 1;
    -webkit-text-fill-color: var(--vms-ink);
}

.vms-input[readonly]:focus,
.vms-textarea[readonly]:focus { box-shadow: none; border-color: transparent; }

/* --- Profile: view mode vs edit mode ------------------------------------ */
.vms-profile .vms-savebar { display: none; }

.vms-profile.is-editing .vms-savebar {
    position: sticky;
    bottom: 1rem;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    padding: .875rem 1.25rem;
    background: var(--vms-surface);
    border: 1px solid var(--vms-brand-200);
    border-radius: var(--vms-r-xl);
    box-shadow: var(--vms-shadow-lg);
    animation: vms-rise .32s cubic-bezier(.22, 1, .36, 1) both;
}

/* Editable fields announce themselves only once editing starts. */
.vms-profile.is-editing .vms-input:not([readonly]) {
    background: var(--vms-surface);
    border-color: var(--vms-line-strong);
    font-weight: 500;
    color: var(--vms-ink-2);
    -webkit-text-fill-color: var(--vms-ink-2);
}

.vms-profile.is-editing .vms-input:not([readonly]):focus {
    border-color: var(--vms-brand-400);
    box-shadow: 0 0 0 3px var(--vms-brand-50);
}

/* ==========================================================================
   27. Detail record header — the profile-page format, shared
   ========================================================================== */

.vms-identity-card { overflow: hidden; }

.vms-identity-card__icon {
    width: 56px;
    height: 56px;
    border-radius: var(--vms-r-lg);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: var(--vms-brand-container);
    color: var(--vms-on-brand-container);
    transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}

.vms-identity-card__icon i { font-size: 1.625rem; }
.vms-identity-card:hover .vms-identity-card__icon { transform: scale(1.05) rotate(-4deg); }

.vms-identity-card__name {
    font-family: var(--vms-font-display);
    font-size: 1.1875rem;
    font-weight: 800;
    letter-spacing: -.026em;
    color: var(--vms-ink);
    margin: 0;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.vms-identity-card__metric {
    padding-left: 1rem;
    border-left: 1px solid var(--vms-line);
}

@media (max-width: 575.98px) {
    .vms-identity-card__metric { border-left: 0; padding-left: 0; }
}

.vms-section-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--vms-r-sm);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: var(--vms-surface-2);
    color: var(--vms-muted);
}

.vms-section-icon i { font-size: 1.125rem; }

.vms-chip--brand   { background: var(--vms-brand-container); color: var(--vms-on-brand-container); border-color: transparent; }
.vms-chip--warning { background: var(--vms-warning-bg); color: var(--vms-warning); border-color: var(--vms-warning-line); }
.vms-chip--danger  { background: var(--vms-danger-bg);  color: var(--vms-danger);  border-color: var(--vms-danger-line); }
.vms-chip--success { background: var(--vms-success-bg); color: var(--vms-success); border-color: var(--vms-success-line); }

/* Sections stagger in below the header */
.vms-detail-grid > [class*="col-"] {
    animation: vms-rise .5s cubic-bezier(.22, 1, .36, 1) both;
}

.vms-detail-grid > [class*="col-"]:nth-child(1) { animation-delay: .06s; }
.vms-detail-grid > [class*="col-"]:nth-child(2) { animation-delay: .12s; }
.vms-detail-grid > [class*="col-"]:nth-child(3) { animation-delay: .18s; }
.vms-detail-grid > [class*="col-"]:nth-child(4) { animation-delay: .24s; }
.vms-detail-grid > [class*="col-"]:nth-child(n+5) { animation-delay: .30s; }

/* Sourcing/detail pages build fact tiles from raw Bootstrap utilities.
   Give them the same treatment as .vms-fact without touching the markup. */
body .main-content .card-body .border.border-radius-lg,
body .main-content .vms-card__body .border.border-radius-lg {
    border-color: var(--vms-line) !important;
    border-radius: var(--vms-r-md) !important;
    background: var(--vms-surface-1);
    padding: .875rem 1rem !important;
}

body .main-content .border.border-radius-lg > small.text-uppercase {
    font-size: .625rem !important;
    font-weight: 800;
    letter-spacing: .09em;
    color: var(--vms-muted) !important;
    margin-bottom: .25rem !important;
}

body .main-content .border.border-radius-lg > span.text-sm,
body .main-content .border.border-radius-lg span.font-weight-bold {
    font-size: .875rem;
    font-weight: 800;
    color: var(--vms-ink);
    letter-spacing: -.01em;
}

/* The email under the top-bar name must truncate on the same terms. */
.vms-usermenu__role {
    display: block;
    max-width: clamp(110px, 16vw, 240px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Nav labels: long menu entries wrap rather than escape the rail. */
.sidenav .navbar-nav .nav-link .nav-link-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ==========================================================================
   28. Responsive
   --------------------------------------------------------------------------
   Everything above is written desktop-first. This section is the deliberate
   pass down through tablet and phone: what stacks, what scrolls, what is
   dropped, and what has to stay reachable no matter how narrow the screen.
   ========================================================================== */

/* --- Top bar action cluster ---------------------------------------------
   These controls used to sit inside a .navbar-collapse. Bootstrap hides a
   collapse below the navbar's expand breakpoint, which took the sidebar
   toggle, the notification bell and the sign-out menu off every screen
   under 992px — the sidebar is off-canvas there, so the app had no
   navigation at all on a phone. It is a plain flex row now, always on. */
.vms-topbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    margin-left: auto;
    min-width: 0;
}

.vms-topbar-actions > .nav-item { list-style: none; }

/*  Bootstrap only turns .navbar-nav into a row, and its dropdowns into
    floating menus, at the navbar's expand breakpoint. This cluster is now
    visible below that breakpoint, so it has to opt into both itself —
    otherwise the icons stack vertically and each menu expands inline. */
.vms-topbar-actions .navbar-nav {
    flex-direction: row;
    align-items: center;
}

.vms-topbar-actions .navbar-nav .dropdown-menu {
    position: absolute;
}

/* The breadcrumb yields space to the action cluster before it wraps. */
.navbar-main .breadcrumb {
    flex-wrap: nowrap;
    min-width: 0;
    overflow: hidden;
}

.navbar-main .breadcrumb .breadcrumb-item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 767.98px) {
    /* Only the current page survives; the trail above it is implied by the
       sidebar and is not worth the width. */
    .navbar-main .breadcrumb .breadcrumb-item:not(.active) { display: none; }
    .navbar-main .breadcrumb .breadcrumb-item.active::before { display: none; }
    .navbar-main .breadcrumb .breadcrumb-item.active { padding-left: 0; }
}

/* --- Off-canvas sidebar -------------------------------------------------
   Material Dashboard slides the rail off screen below 1200px but ships no
   backdrop, so an open sidebar overlapped live content with no clear way
   back. The scrim gives it a dismiss target and separates the two layers. */
.vms-sidenav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(11, 18, 32, .44);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, visibility .22s ease;
}

body.g-sidenav-pinned .vms-sidenav-backdrop {
    opacity: 1;
    visibility: visible;
}

@media (min-width: 1200px) {
    .vms-sidenav-backdrop { display: none; }
}

/* A short phone in landscape must still be able to reach Sign out. */
.sidenav {
    max-height: calc(100vh - 1rem);
    max-height: calc(100dvh - 1rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* --- Toolbars, search and segmented filters -----------------------------
   The segment is a nowrap inline-flex, so on a narrow screen a four- or
   five-way filter was wider than the viewport and pushed the whole page
   sideways. It scrolls within the toolbar instead. */
.vms-segment {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}

.vms-segment::-webkit-scrollbar { display: none; }

@media (max-width: 767.98px) {
    .vms-toolbar {
        padding: .75rem .875rem;
        gap: .625rem;
    }

    .vms-search {
        flex: 1 1 100%;
        max-width: 100%;
    }

    /* Full-bleed so the scroll gesture starts at the card edge. */
    .vms-toolbar > .d-flex.ms-auto {
        width: 100%;
        margin-left: 0 !important;
    }

    .vms-segment { display: flex; width: 100%; }
    .vms-segment button { flex: 0 0 auto; }
}

/* --- Tables -------------------------------------------------------------
   Wide tables scroll inside their card rather than stretching the page.
   Two column tiers drop out on the way down: the row number, which carries
   no information, then columns tagged as secondary by the page. */
.vms-table-wrap {
    max-width: 100%;
    overscroll-behavior-x: contain;
}

@media (max-width: 767.98px) {
    .vms-table thead th.vms-col-idx,
    .vms-table tbody td.vms-col-idx { display: none; }

    .vms-table thead th.vms-col-opt,
    .vms-table tbody td.vms-col-opt { display: none; }

    .vms-table thead th,
    .vms-table tbody td { padding: .6875rem .625rem; }

    .vms-table thead th:first-child,
    .vms-table tbody td:first-child { padding-left: .875rem; }

    .vms-table thead th:last-child,
    .vms-table tbody td:last-child { padding-right: .875rem; }

    .vms-table tbody td { font-size: .78125rem; }
}

/* --- Page and detail headers -------------------------------------------- */
@media (max-width: 767.98px) {
    .vms-page-header {
        gap: .875rem;
        padding: 1rem 0 1.125rem;
    }

    .vms-page-header__title { font-size: 1.25rem; }
    .vms-page-header__subtitle { font-size: .78125rem; }

    /* Header buttons go full width rather than sitting as two stray chips. */
    .vms-page-header__actions { width: 100%; }
    .vms-page-header__actions > .vms-btn,
    .vms-page-header__actions > form { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 575.98px) {
    .vms-page-header__title {
        font-size: 1.125rem;
        flex-wrap: wrap;
        gap: .5rem;
    }

    .vms-identity-card__icon { width: 44px; height: 44px; }
    .vms-identity-card__icon i { font-size: 1.25rem; }
    .vms-identity-card__name { font-size: 1rem; }
}

/* --- Cards, facts and forms --------------------------------------------- */
@media (max-width: 575.98px) {
    .vms-card__header,
    .vms-card__body,
    .vms-card__footer { padding-left: 1rem; padding-right: 1rem; }

    /* 190px minima leave a fact grid stuck at one wide column on a phone;
       two narrow columns read better for short labelled values. */
    .vms-facts { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
    .vms-fact { padding: .75rem .875rem; min-height: 60px; }

    .vms-stat__value { font-size: 1.5rem; }

    .vms-ring { --size: 88px; }
}

/* A sticky footer bar must clear the phone's home indicator. */
@media (max-width: 767.98px) {
    .vms-profile.is-editing .vms-savebar {
        bottom: max(.75rem, env(safe-area-inset-bottom));
        padding: .75rem .875rem;
    }

    .vms-profile.is-editing .vms-savebar > * { flex: 1 1 auto; }
    .vms-profile.is-editing .vms-savebar .vms-btn { width: 100%; justify-content: center; }
}

/* --- Touch targets ------------------------------------------------------
   Anything tapped rather than clicked gets a 40px minimum. */
@media (hover: none) and (pointer: coarse) {
    .vms-btn,
    .vms-icon-btn,
    .vms-topbar-btn,
    .action-btn,
    .dropdown-item,
    .vms-segment button { min-height: 40px; }

    .vms-table .vms-col-actions .vms-btn { min-height: 36px; }
}

/* --- Container and safe areas ------------------------------------------- */
@media (max-width: 575.98px) {
    .vms-container {
        padding-left: max(.875rem, env(safe-area-inset-left));
        padding-right: max(.875rem, env(safe-area-inset-right));
        padding-bottom: 2rem;
    }

    .navbar-main { margin-left: .625rem !important; margin-right: .625rem !important; }
    .navbar-main .container-fluid { padding-left: .625rem; padding-right: .625rem; }
}

/* --- Last resort --------------------------------------------------------
   Long unbroken strings — reference numbers, TINs, URLs, e-mail addresses —
   must never be the reason a page scrolls sideways. */
@media (max-width: 767.98px) {
    .vms-cell-primary,
    .vms-cell-sub,
    .vms-cell-ref,
    .vms-fact__value,
    .vms-list__title,
    .vms-file__name { overflow-wrap: anywhere; }
}

/* --- Safety nets ---------------------------------------------------------
   Belt and braces for markup this design layer does not own. */

/* A page header's text column must be allowed to shrink; without this the
   flex default (min-width:auto) lets a long title shove the actions off. */
.vms-page-header > div:first-child { min-width: 0; }
.vms-page-header__title { min-width: 0; overflow-wrap: anywhere; }

/* The detail views wrap their wide tables themselves. If one ever ships
   without a wrapper, the card body scrolls instead of the page. */
@media (max-width: 991.98px) {
    .vms-card__body:has(> table),
    .card-body:has(> table) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Media and embeds never dictate the page width. */
.main-content img,
.main-content video,
.main-content iframe,
.main-content canvas { max-width: 100%; }

/* Charts are sized by Chart.js from their container, which must not grow. */
.vms-chart, .vms-chart--tall, .vms-chart--short { max-width: 100%; }

/* Long values in a definition-style list wrap rather than push. */
@media (max-width: 575.98px) {
    .vms-list__title,
    .vms-list__meta { overflow-wrap: anywhere; }
}


/* ==========================================================================
   29. Collapsible sidebar (desktop mini rail)
   --------------------------------------------------------------------------
   Material Dashboard implements the mini rail as .g-sidenav-hidden: it narrows
   .navbar-vertical to 4.75rem and fades .nav-link-text away. It also expands
   the whole thing again on :hover, which makes the collapse feel broken — the
   rail springs back the moment the pointer crosses it, and a toggle placed
   inside the rail can never be clicked without cancelling itself. So the
   toggle lives in the top bar and the hover-peek is switched off: collapsed
   means collapsed until you press the button again.
   ========================================================================== */

@media (min-width: 1200px) {

    /* --- Collapsed ------------------------------------------------------- */

    /*  MD fades every <span> under .navbar-brand, which would take the mark
        with it — opacity on an ancestor cannot be undone by a child. So the
        blanket rule is lifted and only the wordmark is dropped. */
    .g-sidenav-hidden .sidenav .navbar-brand span { opacity: 1; }

    .g-sidenav-hidden .sidenav .vms-brand__text,
    .g-sidenav-hidden .sidenav .vms-identity > div,
    .g-sidenav-hidden .sidenav .vms-signout span {
        opacity: 0;
        width: 0;
        overflow: hidden;
        white-space: nowrap;
    }

    .g-sidenav-hidden .sidenav .navbar-brand {
        justify-content: center;
        padding-left: .5rem;
        padding-right: .5rem;
    }

    .g-sidenav-hidden .sidenav .vms-identity {
        justify-content: center;
        margin-left: .5rem;
        margin-right: .5rem;
        padding-left: .5rem;
        padding-right: .5rem;
    }

    /* A label with no room becomes a rule, so the grouping still reads. */
    .g-sidenav-hidden .sidenav .vms-nav-section {
        color: transparent;
        padding: .75rem 1rem .25rem;
        position: relative;
        overflow: hidden;
        white-space: nowrap;
    }

    .g-sidenav-hidden .sidenav .vms-nav-section::after {
        content: '';
        position: absolute;
        left: 1rem;
        right: 1rem;
        bottom: .1875rem;
        height: 1px;
        background: var(--vms-line);
    }

    /* At 4.75rem there is only room for the icon. */
    .g-sidenav-hidden .sidenav .navbar-nav .nav-link,
    .g-sidenav-hidden .sidenav .vms-signout {
        justify-content: center;
        margin-left: .5rem;
        margin-right: .5rem;
        padding-left: .5rem;
        padding-right: .5rem;
    }

    .g-sidenav-hidden .sidenav .vms-signout { width: calc(100% - 1rem); }

    /* --- Hover-peek: off --------------------------------------------------
       Every one of these is a Material rule that would undo the collapse as
       soon as the pointer touched the rail. Each is pinned back to its
       collapsed value; !important is required because MD's own widths carry
       it. Collapsing is a decision, not a hover state. */
    .g-sidenav-hidden .sidenav:hover,
    .g-sidenav-hidden .navbar-vertical:hover { max-width: 4.75rem !important; }

    .g-sidenav-hidden .navbar-vertical:hover.fixed-start + .main-content { margin-left: 6.25rem; }

    .g-sidenav-hidden .navbar-vertical:hover .navbar-brand span { opacity: 1; }

    .g-sidenav-hidden .navbar-vertical:hover .nav-item .nav-link .nav-link-text,
    .g-sidenav-hidden .navbar-vertical:hover .nav-item .nav-link .sidenav-normal {
        opacity: 0;
        width: 0;
    }

    .g-sidenav-hidden .sidenav:hover .vms-brand__text,
    .g-sidenav-hidden .sidenav:hover .vms-identity > div,
    .g-sidenav-hidden .sidenav:hover .vms-signout span {
        opacity: 0;
        width: 0;
    }

    /* --- Motion ---------------------------------------------------------- */
    .sidenav,
    .sidenav.fixed-start + .main-content {
        transition: max-width .22s ease, margin-left .22s ease;
    }

    .vms-brand__text,
    .vms-identity > div,
    .vms-signout span { transition: opacity .16s ease, width .22s ease; }
}

/* The top-bar toggle reads as pressed while the rail is collapsed. */
.vms-topbar-btn[aria-pressed="true"] {
    background: var(--vms-brand-50);
    color: var(--vms-brand-600);
}


/* ==========================================================================
   30. Editable profile controls
   ========================================================================== */

/*  A <select> cannot be readonly, so view mode disables it. It should still
    read as a value rather than a dead control — same treatment the readonly
    inputs get. */
.vms-profile .vms-select:disabled {
    background-color: transparent;
    border-color: transparent;
    padding-left: 0;
    color: var(--vms-ink);
    opacity: 1;
    -webkit-text-fill-color: var(--vms-ink);
    background-image: none;
    cursor: default;
}

.vms-profile.is-editing .vms-select {
    background-color: var(--vms-surface);
    border-color: var(--vms-line-strong);
    padding-left: .875rem;
}

/* --- Trading category chips --------------------------------------------- */
.vms-chip--toggle {
    cursor: pointer;
    font: inherit;
    font-size: .75rem;
    font-weight: 600;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease;
}

/* The tick appears only when the chip is on, so "selected" can never be
   mistaken for "disabled" shading. */
.vms-chip--toggle i {
    font-size: .875rem;
    width: 0;
    overflow: hidden;
    opacity: 0;
    transition: width .15s ease, opacity .15s ease;
}

.vms-chip--toggle.is-on i { width: .875rem; opacity: 1; }

.vms-chip--toggle:disabled { cursor: default; }

.vms-chip--toggle.is-on {
    background: var(--vms-brand-500);
    border-color: var(--vms-brand-500);
    color: #fff;
    opacity: 1;
}

.vms-profile.is-editing .vms-chip--toggle:not(:disabled):hover {
    border-color: var(--vms-brand-300);
    color: var(--vms-brand-600);
}

.vms-profile.is-editing .vms-chip--toggle.is-on:not(:disabled):hover {
    background: var(--vms-brand-600);
    border-color: var(--vms-brand-600);
    color: #fff;
}

/* At the limit: still readable, clearly not available. */
.vms-profile.is-editing .vms-chip--toggle.is-blocked {
    opacity: .4;
    cursor: not-allowed;
}


/* ==========================================================================
   31. One typeface, everywhere
   --------------------------------------------------------------------------
   material.css hard-codes `Inter, Helvetica, Arial` in a handful of places —
   most visibly on `.card .card-body`, which out-specifies the rule on `body`.
   Inter is not one of the fonts this app loads, so those regions silently fell
   back to Helvetica while everything around them rendered in Manrope. That is
   the mixed-typeface look on panels like the Quotation Header Confirmation.
   Each of material's declarations is answered here rather than left to chance.
   ========================================================================== */

body .card .card-header,
body .card .card-body,
body .btn,
body input,
body button,
body select,
body optgroup,
body textarea,
body .flatpickr-current-month span.cur-month {
    font-family: var(--vms-font-body);
}

/* These two carry !important in material.css, so they need it back. */
body .text-sans-serif { font-family: var(--vms-font-body) !important; }

body .select2-container--default .select2-selection--single,
body .select2-container--default .select2-selection__rendered,
body .select2-container--default .select2-results__option {
    font-family: var(--vms-font-body) !important;
}

/* Headings follow the display face, not Bootstrap's stack. */
body h1, body .h1,
body h2, body .h2,
body h3, body .h3 {
    font-family: var(--vms-font-display);
}

/* Icon fonts must keep their own family, whatever the sweep above says. */
body .material-symbols-rounded,
body .material-icons,
body [class^="fa-"], body [class*=" fa-"],
body .fa, body .fas, body .far, body .fab,
body [class^="ni-"], body [class*=" ni-"] {
    font-family: revert;
}

body .material-symbols-rounded { font-family: 'Material Symbols Rounded'; }


/* ==========================================================================
   32. Checkboxes and radios
   --------------------------------------------------------------------------
   material.css draws the tick with `content: "\f00c"` in `font-family:
   "FontAwesome"` — the Font Awesome *4* family name. This app loads Font
   Awesome 6 through the kit script, which registers "Font Awesome 6 Free"
   instead, so the glyph never resolved and checked boxes rendered as a solid
   block with no tick. The mark is drawn from an inline SVG here, which depends
   on no font at all.
   ========================================================================== */

body .form-check .form-check-input,
body .form-check-input {
    width: 1.15em;
    height: 1.15em;
    border: 1px solid var(--vms-line-strong);
    border-radius: 5px;
    background-color: var(--vms-surface);
    cursor: pointer;
}

body .form-check-input[type="radio"] { border-radius: 50%; }

body .form-check-input:hover { border-color: var(--vms-brand-400); }

body .form-check-input:focus-visible {
    outline: none;
    border-color: var(--vms-brand-400);
    box-shadow: 0 0 0 3px var(--vms-brand-50);
}

/* Kill the FontAwesome tick material relies on. */
body .form-check:not(.form-switch) .form-check-input[type="checkbox"]::after { content: none; }

body .form-check-input:checked,
body .form-check:not(.form-switch) .form-check-input[type="checkbox"]:checked {
    background-color: var(--vms-brand-500);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4.5 10.5 8.5 14.5 15.5 6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 78% 78%;
    border-color: var(--vms-brand-500);
}

body .form-check-input:checked[type="radio"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='4.5' fill='%23fff'/%3E%3C/svg%3E");
    background-size: 100% 100%;
}

body .form-check-input:disabled {
    opacity: .55;
    cursor: default;
}

body .form-check-label { cursor: pointer; }
body .form-check-input:disabled ~ .form-check-label { cursor: default; }


/* --- The requirement a confirmation checkbox actually refers to ----------- */
.vms-term {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    margin: 0;
    padding: .5rem .625rem;
    border-radius: var(--vms-r-sm);
    background: var(--vms-surface-1);
    border: 1px solid var(--vms-line);
}

.vms-term__label {
    font-size: .5625rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--vms-muted-2);
}

.vms-term__value {
    font-size: .78125rem;
    font-weight: 700;
    color: var(--vms-ink);
    line-height: 1.35;
}


/* --- Profile: view state vs edit state ----------------------------------
   Both states stay in the DOM. The selects have to be present for the form to
   submit them, and the facts are cheaper to render than to rebuild in script. */
/*  !important is not decoration here: Bootstrap's display utilities (.d-flex,
    .d-inline, .d-block) are themselves !important, so without it any toggled
    element that also carries one stays visible in BOTH states — which is how
    the category chips ended up rendered on top of the category pills. Nothing
    toggled by these rules should carry a d-* class. */
.vms-profile .vms-edit-only { display: none !important; }
.vms-profile.is-editing .vms-view-only { display: none !important; }
.vms-profile.is-editing .vms-edit-only { display: block !important; }
.vms-profile.is-editing .vms-edit-only.row { display: flex !important; }
.vms-profile.is-editing .vms-edit-only.vms-chipset { display: flex !important; }
.vms-profile.is-editing span.vms-edit-only { display: inline !important; }

.vms-chipset { flex-wrap: wrap; gap: .5rem; }

.vms-fact__note {
    display: block;
    font-size: .6875rem;
    font-weight: 600;
    color: var(--vms-muted);
}

/* --- Select2 -------------------------------------------------------------
   material.css already carries a Select2 skin, every rule of it !important,
   and that skin is what the registration form renders with. Overriding its
   heights, paddings and line-heights here only starts a fight, so this block
   is purely additive: brand colours, the corner radius, and a stacking
   context high enough that the panel is never painted behind the app shell.
   (The sidebar sits at z-index 9999; the registration page has no sidebar,
   which is why this only ever went wrong on the profile.) */

.select2-container { z-index: 10050; }
.select2-container--open { z-index: 10051; }

.vms-profile .select2-container--default .select2-selection--single {
    border-color: var(--vms-line-strong) !important;
    border-radius: var(--vms-r-md) !important;
    background-color: var(--vms-surface) !important;
}

.vms-profile .select2-container--default .select2-selection--single,
.vms-profile .select2-container--default .select2-selection__rendered {
    color: var(--vms-ink) !important;
    font-weight: 500 !important;
}

.vms-profile .select2-container--default.select2-container--open .select2-selection--single,
.vms-profile .select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--vms-brand-400) !important;
    box-shadow: 0 0 0 3px var(--vms-brand-50) !important;
}

.select2-container--default .select2-dropdown {
    border-color: var(--vms-line) !important;
    border-radius: var(--vms-r-md) !important;
    box-shadow: var(--vms-shadow-lg) !important;
    overflow: hidden;
}

.select2-search--dropdown .select2-search__field {
    border: 1px solid var(--vms-line-strong) !important;
    border-radius: var(--vms-r-sm) !important;
    padding: .5rem .625rem !important;
    font-family: var(--vms-font-body) !important;
    font-size: .8125rem !important;
}

.select2-container--default .select2-results__option--highlighted {
    background-color: var(--vms-brand-50) !important;
    color: var(--vms-brand-600) !important;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--vms-brand-container) !important;
    color: var(--vms-on-brand-container) !important;
    font-weight: 700 !important;
}

/* --------------------------------------------------------------------------
   33. Help centre
   The floating support widget. It sits above every page, so it owns the
   highest z-index in the app after toasts, and it must not inherit the card
   skin from material.css — hence the explicit type, colour and radius on the
   surfaces inside it.
   -------------------------------------------------------------------------- */

/* Launcher */
.vms-help-fab {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    width: 3.5rem;
    height: 3.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--vms-r-pill);
    background: linear-gradient(135deg, var(--vms-brand-500), var(--vms-brand-700));
    color: #fff;
    box-shadow: var(--vms-shadow-brand);
    cursor: pointer;
    z-index: 99998;
    transition: transform .18s ease, box-shadow .18s ease;
}

.vms-help-fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px -8px rgba(123, 44, 81, .55);
}

.vms-help-fab:focus-visible {
    outline: 2px solid var(--vms-brand-300);
    outline-offset: 3px;
}

.vms-help-fab i {
    font-size: 1.625rem;
    line-height: 1;
}

/* Panel */
.vms-help {
    position: fixed;
    right: 1.5rem;
    bottom: 5.75rem;
    /* Narrower than a phone, so the sheet rules below only handle the extremes. */
    width: min(24rem, calc(100vw - 3rem));
    max-height: min(34rem, calc(100vh - 8rem));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--vms-surface);
    border: 1px solid var(--vms-line);
    border-radius: var(--vms-r-lg);
    box-shadow: var(--vms-shadow-lg);
    font-family: var(--vms-font-body);
    color: var(--vms-ink-2);
    z-index: 99998;
}

.vms-help[hidden] { display: none; }

.vms-help__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .875rem 1rem;
    background: linear-gradient(135deg, var(--vms-brand-600), var(--vms-brand-800));
    color: #fff;
}

.vms-help__eyebrow {
    margin: 0;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
}

.vms-help__title {
    margin: 0;
    font-family: var(--vms-font-display);
    font-size: 1.0625rem;
    font-weight: 800;
    line-height: 1.25;
    color: #fff;
}

.vms-help__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    border: none;
    border-radius: var(--vms-r-pill);
    background: rgba(255, 255, 255, .14);
    color: #fff;
    cursor: pointer;
    transition: background .15s ease;
}

.vms-help__close:hover { background: rgba(255, 255, 255, .26); }
.vms-help__close i { font-size: 1.125rem; }

/* Search */
.vms-help__search {
    position: relative;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--vms-line);
    background: var(--vms-surface-1);
}

.vms-help__search > i {
    font-size: 1.125rem;
    color: var(--vms-muted-2);
}

.vms-help__search-input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    background: transparent;
    font-family: var(--vms-font-body);
    font-size: .8125rem;
    font-weight: 500;
    color: var(--vms-ink);
    outline: none;
    /* Safari draws its own clear affordance on search inputs. */
    -webkit-appearance: none;
    appearance: none;
}

.vms-help__search-input::-webkit-search-cancel-button { display: none; }
.vms-help__search-input::placeholder { color: var(--vms-muted-2); font-weight: 500; }

.vms-help__search-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border: none;
    border-radius: var(--vms-r-pill);
    background: var(--vms-surface-3);
    color: var(--vms-muted);
    cursor: pointer;
}

.vms-help__search-clear i { font-size: .875rem; }

/* Body */
.vms-help__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: .875rem 1rem 1rem;
    background: var(--vms-surface);
}

.vms-help__hint {
    margin: 0 0 .75rem;
    font-size: .75rem;
    font-weight: 500;
    color: var(--vms-muted);
}

.vms-help__loading {
    font-size: .75rem;
    color: var(--vms-muted);
    list-style: none;
}

.vms-help__section {
    margin: 0 0 .75rem;
    font-family: var(--vms-font-display);
    font-size: .9375rem;
    font-weight: 800;
    color: var(--vms-ink);
}

.vms-help__back {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-bottom: .75rem;
    padding: 0;
    border: none;
    background: none;
    font-size: .75rem;
    font-weight: 700;
    color: var(--vms-brand-500);
    cursor: pointer;
}

.vms-help__back i { font-size: 1rem; }

/* Topic list */
.vms-help__topics {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .375rem;
}

.vms-help__topic {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .625rem .75rem;
    border: 1px solid var(--vms-line);
    border-radius: var(--vms-r-md);
    background: var(--vms-surface-1);
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.vms-help__topic:hover {
    border-color: var(--vms-brand-300);
    background: var(--vms-brand-50);
}

.vms-help__topic-name {
    flex: 1 1 auto;
    font-size: .8125rem;
    font-weight: 700;
    color: var(--vms-ink);
}

.vms-help__topic-count {
    flex: 0 0 auto;
    font-size: .6875rem;
    font-weight: 600;
    color: var(--vms-muted-2);
}

.vms-help__topic i {
    flex: 0 0 auto;
    font-size: 1.125rem;
    color: var(--vms-muted-2);
}

/* Question / answer accordion */
.vms-help__list {
    display: flex;
    flex-direction: column;
    gap: .375rem;
}

.vms-help__item {
    border: 1px solid var(--vms-line);
    border-radius: var(--vms-r-md);
    background: var(--vms-surface-1);
    overflow: hidden;
}

.vms-help__item.is-open {
    border-color: var(--vms-brand-200);
    background: var(--vms-surface);
}

.vms-help__q {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    width: 100%;
    padding: .625rem .75rem;
    border: none;
    background: none;
    text-align: left;
    font-size: .8125rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--vms-ink);
    cursor: pointer;
}

.vms-help__q > span:first-child { flex: 1 1 auto; }

.vms-help__chevron {
    flex: 0 0 auto;
    font-size: 1.125rem;
    color: var(--vms-muted-2);
    transition: transform .15s ease;
}

.vms-help__item.is-open .vms-help__chevron { transform: rotate(180deg); }

.vms-help__tag {
    flex: 0 0 auto;
    align-self: center;
    padding: .125rem .5rem;
    border-radius: var(--vms-r-pill);
    background: var(--vms-brand-container);
    color: var(--vms-on-brand-container);
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .01em;
    white-space: nowrap;
}

.vms-help__a {
    padding: 0 .75rem .75rem;
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.6;
    color: var(--vms-muted);
    white-space: pre-line;
}

/* Ask support */
.vms-help__label {
    display: block;
    margin: .625rem 0 .25rem;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--vms-muted-2);
}

.vms-help__field {
    width: 100%;
    padding: .5rem .625rem;
    border: 1px solid var(--vms-line-strong);
    border-radius: var(--vms-r-sm);
    background: var(--vms-surface);
    font-family: var(--vms-font-body);
    font-size: .8125rem;
    font-weight: 500;
    color: var(--vms-ink);
    outline: none;
    resize: vertical;
}

.vms-help__field:focus {
    border-color: var(--vms-brand-400);
    box-shadow: 0 0 0 3px rgba(123, 44, 81, .12);
}

.vms-help__send {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    margin-top: .75rem;
    padding: .5rem .875rem;
    border: none;
    border-radius: var(--vms-r-pill);
    background: var(--vms-brand-500);
    color: #fff;
    font-family: var(--vms-font-body);
    font-size: .8125rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease;
}

.vms-help__send:hover { background: var(--vms-brand-600); }
.vms-help__send:disabled { opacity: .6; cursor: default; }
.vms-help__send i { font-size: 1rem; }

.vms-help__answer {
    margin-top: .875rem;
    padding: .75rem;
    border: 1px solid var(--vms-brand-200);
    border-radius: var(--vms-r-md);
    background: var(--vms-brand-50);
    font-size: .8125rem;
}

.vms-help__answer-lead {
    margin: 0 0 .25rem;
    font-size: .6875rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--vms-brand-600);
}

.vms-help__answer-text {
    margin: 0 0 .5rem;
    font-weight: 500;
    line-height: 1.6;
    color: var(--vms-ink-2);
    white-space: pre-line;
}

/* Footer */
.vms-help__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .625rem 1rem;
    border-top: 1px solid var(--vms-line);
    background: var(--vms-surface-2);
}

.vms-help__foot-text {
    font-size: .75rem;
    font-weight: 500;
    color: var(--vms-muted);
}

.vms-help__foot-btn {
    padding: .3125rem .75rem;
    border: 1px solid var(--vms-brand-300);
    border-radius: var(--vms-r-pill);
    background: var(--vms-surface);
    color: var(--vms-brand-600);
    font-family: var(--vms-font-body);
    font-size: .75rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.vms-help__foot-btn:hover {
    background: var(--vms-brand-500);
    border-color: var(--vms-brand-500);
    color: #fff;
}

/* On a phone the panel is a sheet, and the launcher clears the home
   indicator and the profile page's sticky save bar. */
@media (max-width: 575.98px) {
    .vms-help {
        left: .75rem;
        right: .75rem;
        bottom: 4.75rem;
        width: auto;
        max-height: min(72vh, 34rem);
    }

    .vms-help-fab {
        width: 3.125rem;
        height: 3.125rem;
        right: .875rem;
        bottom: calc(.875rem + env(safe-area-inset-bottom));
    }

    .vms-help-fab i { font-size: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .vms-help-fab,
    .vms-help__chevron {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   34. Brand chrome — the rail and the top bar in the primary colour
   The shell was two white surfaces on a near-white canvas, which read as
   undifferentiated. Both are now brand plum, so navigation is visibly a
   separate layer from content.

   Everything here is on-brand text over a dark surface, so it re-answers the
   light-surface rules in §4, §5 and §26. Those sections still define the
   layout; this one only recolours, and is body-scoped so it out-specifies the
   !important active-pill rule in §26 without adding another !important war.
   -------------------------------------------------------------------------- */
:root {
    /* One set of on-brand values, so the rail and the bar stay in step. */
    --vms-on-brand: #ffffff;
    /* Raised from .78/.64: on a saturated plum the lower values read as
       greyed-out rather than secondary. Nav labels are now plain white and
       only the smallest supporting text steps down at all. */
    --vms-on-brand-muted: rgba(255, 255, 255, .94);
    --vms-on-brand-faint: rgba(255, 255, 255, .8);
    --vms-on-brand-line: rgba(255, 255, 255, .18);
    --vms-on-brand-fill: rgba(255, 255, 255, .12);
    --vms-on-brand-fill-hover: rgba(255, 255, 255, .2);

    /* Both surfaces start on the same tone, so their top corners match. */
    --vms-chrome-rail: linear-gradient(180deg, var(--vms-brand-500) 0%, var(--vms-brand-700) 100%);
    --vms-chrome-bar: linear-gradient(135deg, var(--vms-brand-500) 0%, var(--vms-brand-600) 100%);
}

/* --- The rail ------------------------------------------------------------ */
body .sidenav {
    background: var(--vms-chrome-rail);
    border-color: var(--vms-on-brand-line);
    box-shadow: var(--vms-shadow-md);
}

/* Brand lockup: a white tile reads better on plum than the plum gradient. */
body .sidenav .vms-brand__mark {
    background: var(--vms-on-brand);
    color: var(--vms-brand-600);
    box-shadow: none;
}

body .sidenav .vms-wordmark { color: var(--vms-on-brand); }
body .sidenav .vms-wordmark__sub {
    color: var(--vms-on-brand-faint);
    font-weight: 800;
}

/* The off-canvas close affordance is a Bootstrap utility pair, hence both
   !important flags. */
body .sidenav #iconSidenav {
    color: var(--vms-on-brand) !important;
    opacity: .75 !important;
}

/* Identity block — a white card on the plum, so the vendor's own name and
   reference are the one thing in the rail set on a light surface. */
body .sidenav .vms-identity {
    background: var(--vms-surface);
    border-color: var(--vms-surface);
    box-shadow: var(--vms-shadow-xs);
}

body .sidenav .vms-identity__name {
    color: var(--vms-ink);
    font-weight: 800;
}

body .sidenav .vms-identity__meta {
    color: var(--vms-ink-2);
    font-weight: 600;
}

/* The avatar goes back to its light-surface treatment; on white the
   translucent version would disappear. */
body .sidenav .vms-avatar {
    background: var(--vms-brand-50);
    border-color: var(--vms-brand-100);
    color: var(--vms-brand-600);
}

/* Navigation */
body .sidenav .vms-nav-section {
    color: var(--vms-on-brand-faint);
    font-weight: 800;
    font-size: .6875rem;
}

body .sidenav .navbar-nav .nav-link {
    color: var(--vms-on-brand-muted) !important;
    font-weight: 700;
}

body .sidenav .navbar-nav .nav-link i.material-symbols-rounded {
    color: var(--vms-on-brand-muted);
}

body .sidenav .navbar-nav .nav-link:hover {
    background-color: var(--vms-on-brand-fill);
    color: var(--vms-on-brand) !important;
}

body .sidenav .navbar-nav .nav-link:hover i.material-symbols-rounded {
    color: var(--vms-on-brand);
}

/* The active pill inverts: solid white carrying the brand colour. */
body .sidenav .navbar-nav .nav-link.active,
body .sidenav .navbar-nav .nav-link.active:hover {
    background: var(--vms-on-brand) !important;
    background-image: none !important;
    color: var(--vms-brand-700) !important;
    box-shadow: var(--vms-shadow-xs) !important;
}

body .sidenav .navbar-nav .nav-link.active i.material-symbols-rounded {
    color: var(--vms-brand-700);
}

/* Idle icons stay a step below the label so the row still has a hierarchy
   now that the label itself is full white. */
body .sidenav .navbar-nav .nav-link i.material-symbols-rounded {
    color: var(--vms-on-brand-faint);
}

body .sidenav .navbar-nav .nav-link.active .vms-nav-count {
    background: var(--vms-brand-600);
}

/* Sign out keeps a destructive tint without importing the red-on-white pair. */
body .sidenav .vms-signout {
    color: var(--vms-on-brand-muted);
    font-weight: 700;
}
body .sidenav .vms-signout i { color: var(--vms-on-brand-faint); }

body .sidenav .vms-signout:hover {
    background: rgba(255, 138, 138, .22);
    color: #ffe3e3;
}

body .sidenav .vms-signout:hover i { color: #ffe3e3; }

/* The collapsed rail draws its section labels as rules; they need the
   on-brand line colour or they vanish. */
body .g-sidenav-hidden .sidenav .vms-nav-section::after {
    background: var(--vms-on-brand-line);
}

/* --- The top bar --------------------------------------------------------- */
/* material.js swaps .shadow-none for .blur on scroll and .blur paints an
   !important white; both states have to be answered or the bar flickers back
   to white as soon as the page moves. */
body .navbar-main,
body .navbar-main.blur {
    background: var(--vms-chrome-bar) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-radius: var(--vms-r-lg-inc) !important;
    box-shadow: var(--vms-shadow-md) !important;
    padding-top: .5rem !important;
    padding-bottom: .5rem !important;
}

/* Breadcrumb */
body .navbar-main .breadcrumb {
    --bs-breadcrumb-divider-color: rgba(255, 255, 255, .5);
}

body .navbar-main .breadcrumb .breadcrumb-item,
body .navbar-main .breadcrumb .breadcrumb-item a {
    color: var(--vms-on-brand-faint);
    font-weight: 600;
}

body .navbar-main .breadcrumb .breadcrumb-item a:hover { color: var(--vms-on-brand); }

body .navbar-main .breadcrumb .breadcrumb-item.active {
    color: var(--vms-on-brand);
    font-weight: 800;
}

/* Icon buttons and the account chip become translucent white on the bar. */
body .navbar-main .vms-topbar-btn,
body .navbar-main .vms-usermenu {
    background: var(--vms-on-brand-fill);
    border-color: var(--vms-on-brand-line);
    color: var(--vms-on-brand);
}

body .navbar-main .vms-topbar-btn:hover,
body .navbar-main .vms-usermenu:hover {
    background: var(--vms-on-brand-fill-hover);
    border-color: rgba(255, 255, 255, .32);
    color: var(--vms-on-brand);
    box-shadow: none;
}

/* The unread dot's ring reads as a cut-out, so it takes the bar's colour. */
body .navbar-main .vms-topbar-btn__dot { border-color: var(--vms-brand-600); }

body .navbar-main .vms-usermenu .vms-avatar {
    background: var(--vms-on-brand-fill-hover);
    border-color: var(--vms-on-brand-line);
    color: var(--vms-on-brand);
}

body .navbar-main .vms-usermenu__name {
    color: var(--vms-on-brand);
    font-weight: 800;
}

body .navbar-main .vms-usermenu__role {
    color: var(--vms-on-brand-faint);
    font-weight: 600;
}

.vms-usermenu__caret {
    font-size: 1.125rem;
    color: var(--vms-on-brand-faint);
}

/* --- Help centre --------------------------------------------------------- */
/* Flat primary, matching the chrome rather than carrying its own gradient. */
.vms-help-fab { background: var(--vms-brand-500); }
.vms-help-fab:hover { background: var(--vms-brand-600); }
.vms-help__head { background: var(--vms-brand-500); }

/* --------------------------------------------------------------------------
   35. Flush chrome — the standard shell, not a floating card
   Material Dashboard ships the rail and the top bar as inset cards: ms-2/my-2
   and mx-3 on the markup, rounded corners, a gap of canvas showing all the
   way round. Those utilities are gone from the blades; what is left is the
   geometry, which has to be corrected here because Material's own offsets
   were measured against the inset.

   Rail: 14rem (MD's own max-width), pinned to the viewport edge.
   Content offset therefore becomes exactly the rail width — no gap to add.
   -------------------------------------------------------------------------- */

/* The corner scale in §26 rounds .sidenav with !important; a flush rail is
   square, so that has to be answered in kind. */
body .sidenav,
body .sidenav.fixed-start {
    border: 0;
    border-radius: 0 !important;
    box-shadow: none;
}

@media (min-width: 1200px) {
    /* MD offsets by 15rem: 14rem of rail plus the .5rem ms-2 margin plus a
       .5rem gap. With the rail flush the offset is the rail width exactly. */
    body .sidenav.fixed-start + .main-content { margin-left: 14rem; }

    /* Same correction for the mini rail, collapsed and hover-pinned: MD's
       6.25rem was 4.75rem of rail plus the same 1.5rem of inset and gap. */
    body .g-sidenav-hidden .navbar-vertical.fixed-start + .main-content,
    body .g-sidenav-hidden .navbar-vertical:hover.fixed-start + .main-content {
        margin-left: 4.75rem;
    }
}

/* Top bar: full width of the content column, square, hard against the top.
   The margin reset needs !important only because §28's small-screen rule
   carries it. */
body .navbar-main,
body .navbar-main.blur {
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding-top: .625rem !important;
    padding-bottom: .625rem !important;
}

/* Content and top bar share one gutter, so the breadcrumb sits directly over
   the page title rather than a few pixels off it. */
body .navbar-main .container-fluid {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

@media (max-width: 767.98px) {
    body .navbar-main .container-fluid {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media (max-width: 575.98px) {
    body .navbar-main .container-fluid {
        padding-left: max(.875rem, env(safe-area-inset-left));
        padding-right: max(.875rem, env(safe-area-inset-right));
    }
}

/* The inset bar used to leave a band of canvas above the page; flush, it does
   not, so the gutter moves onto the container. Detail pages open with a bare
   back link and would otherwise sit hard against the bar. The page header
   gives back what it used to add on its own, so index pages do not end up
   with two gaps stacked. */
body .vms-container { padding-top: 1rem; }
body .vms-page-header { padding-top: .5rem; }

/* The rail-collapse toggle's pressed state (§29) was written for a white bar
   and is out-specified by the on-brand button skin in §34, so it is restated
   here at the same weight: inverted, the way the active nav pill inverts. */
body .navbar-main .vms-topbar-btn[aria-pressed="true"],
body .navbar-main .vms-topbar-btn[aria-pressed="true"]:hover {
    background: var(--vms-on-brand);
    border-color: var(--vms-on-brand);
    color: var(--vms-brand-700);
}