/* ══════════════════════════════════════════════════════════════════════
   VALID-8 — 2026 brand tokens & primitives
   See docs/BRANDING-2026.md. Page-agnostic: load on every converted page.
   Fonts: Newsreader (display), Public Sans (body), JetBrains Mono (data).
   ══════════════════════════════════════════════════════════════════════ */

:root {
    /* type */
    --v8-font-display: "Newsreader", Georgia, "Times New Roman", serif;
    --v8-font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --v8-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    /* surfaces & text */
    --v8-bg: #F5F3EE;
    --v8-surface: #FFFFFF;
    --v8-surface-2: #FAF9F6;
    --v8-surface-3: #EEEBE4;
    --v8-border: #E2DED5;
    --v8-border-strong: #CFCAC0;
    --v8-text: #0F1C2E;
    --v8-text-2: #4A5566;
    --v8-text-3: #6A7383;
    --v8-text-4: #3A4556;

    /* brand */
    --v8-ink: #0F1C2E;
    --v8-ink-2: #25405F;
    --v8-ink-3: #22395A;
    --v8-on-ink: #FFFFFF;
    --v8-on-ink-2: #DCE3EC;
    --v8-on-ink-3: #B6C1D1;
    --v8-on-ink-4: #8A9BB2;
    --v8-accent: #147A4B;
    --v8-accent-hover: #0E5A37;

    /* solid buttons: a softer slate-navy than the ink panels */
    --v8-btn: #2F4A6B;
    --v8-btn-hover: #263D59;
    --v8-on-btn: #FFFFFF;

    /* semantic */
    --v8-ok: #147A4B;
    --v8-ok-soft: #E3F2EA;
    --v8-ok-text: #0E5A37;
    --v8-ok-on-ink: #7FD3A6;
    --v8-ok-wash: #F4FAF6;          /* whole-surface tint for completed items */
    --v8-ok-line: #9CCFB3;          /* hairline on a washed surface */

    --v8-info: #1D4A78;
    --v8-info-soft: #E6EEF6;
    --v8-info-text: #1D4A78;
    --v8-info-bar: #7C9CC2;
    --v8-info-on-ink: #8FB3DB;

    --v8-danger: #B3261B;
    --v8-danger-soft: #FBEAE8;
    --v8-danger-text: #8E1D14;

    --v8-warn: #9A5B12;
    --v8-warn-soft: #FBF1E3;
    --v8-warn-text: #7A470C;

    --v8-neutral: #6A7383;
    --v8-neutral-soft: #EEEBE4;
    --v8-heat-neg-line: #D9AFA8;   /* outline on "negative" heatmap cells */
    --v8-heat-warn-line: #D9B98A;  /* outline on "pending" heatmap cells */

    --v8-upload-border: #9FB3C9;

    /* geometry */
    --v8-space-1: 4px;
    --v8-space-2: 8px;
    --v8-space-3: 12px;
    --v8-space-4: 16px;
    --v8-space-5: 20px;
    --v8-space-6: 24px;
    --v8-space-7: 28px;
    --v8-space-8: 40px;
    --v8-radius: 0;
    --v8-radius-pill: 999px;
    --v8-shadow-raised: 0 12px 28px rgba(15, 28, 46, 0.12);
    --v8-control-h: 44px;
    --v8-control-h-lg: 52px;
    --v8-control-h-sm: 38px;
    --v8-tile: 44px;
    --v8-tile-lg: 52px;
    --v8-bar-h: 6px;
}

[data-theme="dark"] {
    --v8-bg: #0F1419;
    --v8-surface: #1A2029;
    --v8-surface-2: #141A22;
    --v8-surface-3: #232B36;
    --v8-border: #2B3441;
    --v8-border-strong: #3A4556;
    --v8-text: #E6EAF0;
    --v8-text-2: #AEB8C6;
    --v8-text-3: #8A95A6;
    --v8-text-4: #C3CBD6;

    /* "Ink" is the high-contrast brand surface. On a dark page that means
       paper, not navy, so the hero panel and primary buttons invert. */
    --v8-ink: #E6EAF0;
    --v8-ink-2: #C9D1DC;
    --v8-ink-3: #B4BECB;
    --v8-on-ink: #0F1C2E;
    --v8-on-ink-2: #25405F;
    --v8-on-ink-3: #3A4556;
    --v8-on-ink-4: #4A5566;
    --v8-ok-on-ink: #147A4B;
    --v8-info-on-ink: #1D4A78;

    --v8-btn: #C9D4E2;
    --v8-btn-hover: #DCE4EE;
    --v8-on-btn: #0F1C2E;

    --v8-ok-soft: #12301F;
    --v8-ok-wash: #102118;
    --v8-ok-line: #1F5A3A;
    --v8-ok-text: #7FD3A6;
    --v8-info-soft: #16263A;
    --v8-info-text: #8FB3DB;
    --v8-danger-soft: #3A1612;
    --v8-danger-text: #F0A59C;
    --v8-warn-soft: #33230D;
    --v8-warn-text: #E6B36B;
    --v8-neutral-soft: #232B36;
    --v8-heat-neg-line: #7A3B33;
    --v8-heat-warn-line: #7A5A2A;
    --v8-upload-border: #4C6682;
    --v8-shadow-raised: 0 12px 28px rgba(0, 0, 0, 0.5);
}

/* ── page shell ─────────────────────────────────────────────────────── */
.v8-page {
    font-family: var(--v8-font-body);
    color: var(--v8-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* The layout wraps every page in body (inline --app-body-bg) › #content ›
   .container-fluid (12px side padding) › main.pb-3 › .main-container (10px
   radius). On a converted page those gutters, the bottom padding and the
   rounded corners let the old body colour show around the paper, so paint the
   ancestors paper too and remove the gutters. :has() lets this live here
   instead of in _Layout. */
body:has(.v8-page) {
    background-color: var(--v8-bg) !important;
}

#content:has(.v8-page),
[data-theme="dark"] #content:has(.v8-page),
#content:has(.v8-page) > .container-fluid {
    background-color: var(--v8-bg);
}

#content:has(.v8-page) > .container-fluid {
    padding-left: 0;
    padding-right: 0;
}

#content:has(.v8-page) #main-content.pb-3 {
    padding-bottom: 0 !important;
}

.main-container.v8-page {
    border-radius: 0;
}

/* custom.css colours every bare <a> link-blue with a long :not() chain; this
   mirrors that chain (plus .v8-page) so converted pages inherit text colour. */
.v8-page a:not(.v8-btn),
.v8-page a:not(.btn):not(.v8-btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item):not(.sidebar-link):not(.dropdownLink):not([role="button"]) {
    color: inherit;
    text-decoration: none;
}

.v8-page a:not(.v8-btn):hover,
.v8-page a:not(.btn):not(.v8-btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item):not(.sidebar-link):not(.dropdownLink):not([role="button"]):hover {
    color: var(--v8-accent);
}

/* An <a> styled as a button must keep its button colours. The link rule above
   and the legacy custom.css / theme.css link chains all out-rank a single
   class, so anchor buttons pin their text colour. */
a.v8-btn,
a.v8-btn:visited,
a.v8-btn:hover,
a.v8-btn:focus-visible {
    color: var(--v8-on-btn) !important;
    text-decoration: none !important;
}

a.v8-btn.v8-btn-outline,
a.v8-btn.v8-btn-outline:visited,
a.v8-btn.v8-btn-outline:hover,
a.v8-btn.v8-btn-outline:focus-visible {
    color: var(--v8-text) !important;
}

a.v8-btn.v8-btn-ghost,
a.v8-btn.v8-btn-ghost:visited {
    color: var(--v8-text-3) !important;
}

a.v8-btn.v8-btn-outline.is-active {
    color: var(--v8-on-btn) !important;
}

a.v8-btn.v8-btn-accent,
a.v8-btn.v8-btn-accent:visited,
a.v8-btn.v8-btn-accent:hover,
a.v8-btn.v8-btn-accent:focus-visible {
    color: #FFFFFF !important;
}

/* ── typography ─────────────────────────────────────────────────────── */
.v8-display {
    font-family: var(--v8-font-display);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.v8-h1 {
    margin: 0;
    font-family: var(--v8-font-display);
    font-weight: 600;
    font-size: 40px;
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: var(--v8-text);
}

.v8-h2 {
    margin: 0;
    font-family: var(--v8-font-display);
    font-weight: 600;
    font-size: 28px;
    line-height: 1.15;
    color: var(--v8-text);
}

.v8-h3 {
    margin: 0;
    font-family: var(--v8-font-display);
    font-weight: 600;
    font-size: 22px;
    line-height: 1.2;
    color: var(--v8-text);
}

.v8-mono {
    font-family: var(--v8-font-mono);
    font-variant-numeric: tabular-nums;
}

.v8-eyebrow {
    display: inline-block;
    font-family: var(--v8-font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--v8-accent);
}

.v8-eyebrow-muted {
    color: var(--v8-text-3);
}

.v8-meta {
    font-size: 12.5px;
    color: var(--v8-text-2);
}

.v8-muted {
    color: var(--v8-text-3);
}

/* ── buttons ────────────────────────────────────────────────────────── */
.v8-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: var(--v8-control-h);
    padding: 0 16px;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: var(--v8-radius);
    background: var(--v8-btn);
    color: var(--v8-on-btn);
    font-family: var(--v8-font-body);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.v8-btn:hover,
.v8-btn:focus-visible {
    background: var(--v8-btn-hover);
    color: var(--v8-on-btn);
    text-decoration: none;
}

.v8-btn:focus-visible {
    outline: 2px solid var(--v8-accent);
    outline-offset: 2px;
}

.v8-btn svg,
.v8-btn i {
    flex-shrink: 0;
    font-size: 16px;
    width: auto;
}

.v8-btn-primary {
    background: var(--v8-btn);
    color: var(--v8-on-btn);
    font-weight: 700;
}

.v8-btn-accent {
    height: var(--v8-control-h-lg);
    padding: 0 26px;
    background: var(--v8-accent);
    color: #FFFFFF;
    font-size: 15.5px;
    font-weight: 700;
    gap: 10px;
}

.v8-btn-accent:hover,
.v8-btn-accent:focus-visible {
    background: var(--v8-accent-hover);
    color: #FFFFFF;
}

.v8-btn-outline {
    background: var(--v8-surface);
    color: var(--v8-text);
    border-color: var(--v8-border-strong);
}

.v8-btn-outline:hover,
.v8-btn-outline:focus-visible {
    background: var(--v8-surface);
    color: var(--v8-text);
    border-color: var(--v8-ink);
}

.v8-btn-outline.is-active {
    background: var(--v8-btn);
    color: var(--v8-on-btn);
    border-color: var(--v8-btn);
}

.v8-btn-sm {
    height: var(--v8-control-h-sm);
    font-size: 13.5px;
    padding: 0 16px;
}

.v8-btn-icon {
    width: var(--v8-control-h);
    padding: 0;
}

.v8-btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--v8-text-3);
    font-size: 13.5px;
    font-weight: 500;
}

.v8-btn-ghost:hover {
    background: var(--v8-surface-3);
    color: var(--v8-text);
}

/* ── chips ──────────────────────────────────────────────────────────── */
.v8-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: var(--v8-radius);
    background: var(--v8-surface-3);
    color: var(--v8-text-2);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
}

.v8-chip-info     { background: var(--v8-info-soft);    color: var(--v8-info-text); }
.v8-chip-ok       { background: var(--v8-ok-soft);      color: var(--v8-ok-text); }
.v8-chip-warn     { background: var(--v8-warn-soft);    color: var(--v8-warn-text); border: 1px solid var(--v8-warn); padding: 4px 9px; font-size: 12px; }
.v8-chip-danger   { background: var(--v8-danger);       color: #FFFFFF; }
.v8-chip-neutral  { background: var(--v8-neutral-soft); color: var(--v8-text-3); }

.v8-chip-mono {
    font-family: var(--v8-font-mono);
    font-weight: 600;
    font-size: 12px;
    padding: 4px 9px;
}

.v8-tag {
    display: inline-block;
    padding: 6px 10px;
    background: var(--v8-surface-3);
    color: var(--v8-text-4);
    font-family: var(--v8-font-mono);
    font-size: 11.5px;
    line-height: 1;
}

/* ── icon tile ──────────────────────────────────────────────────────── */
.v8-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--v8-tile);
    height: var(--v8-tile);
    flex-shrink: 0;
    background: var(--v8-surface-3);
    color: var(--v8-text-4);
    font-size: 20px;
}

.v8-tile-lg {
    width: var(--v8-tile-lg);
    height: var(--v8-tile-lg);
    font-size: 24px;
}

.v8-tile-info   { background: var(--v8-info-soft);  color: var(--v8-info-text); }
.v8-tile-danger { background: var(--v8-danger);     color: #FFFFFF; }
.v8-tile-ink    { background: var(--v8-ink);        color: var(--v8-on-ink); }

/* ── progress bar ───────────────────────────────────────────────────── */
.v8-bar {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.v8-bar-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-size: 12.5px;
    color: var(--v8-text-2);
}

.v8-bar-head .v8-bar-value {
    font-family: var(--v8-font-mono);
    font-weight: 600;
    color: var(--v8-text);
}

.v8-bar-track {
    width: 100%;
    height: var(--v8-bar-h);
    background: var(--v8-surface-3);
    overflow: hidden;
}

.v8-bar-fill {
    height: 100%;
    width: 0;
    background: var(--v8-ok);
    transition: width .5s ease;
}

.v8-bar-fill.is-info { background: var(--v8-info-bar); }
.v8-bar-fill.is-ok   { background: var(--v8-ok); }

.v8-on-ink .v8-bar-track { background: var(--v8-ink-3); }
.v8-on-ink .v8-bar-fill.is-info { background: var(--v8-info-on-ink); }
.v8-on-ink .v8-bar-fill.is-ok   { background: var(--v8-ok-on-ink); }

/* ── card ───────────────────────────────────────────────────────────── */
.v8-card {
    box-sizing: border-box;
    background: var(--v8-surface);
    border: 1px solid var(--v8-border);
    border-radius: var(--v8-radius);
    color: var(--v8-text);
}

.v8-card-raised {
    border: 2px solid var(--v8-ink);
    box-shadow: var(--v8-shadow-raised);
}

.v8-panel-ink {
    box-sizing: border-box;
    background: var(--v8-ink);
    color: var(--v8-on-ink);
    border-radius: var(--v8-radius);
}

/* ── inputs ─────────────────────────────────────────────────────────── */
.v8-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    height: var(--v8-control-h);
    box-sizing: border-box;
    padding: 0 14px;
    background: var(--v8-surface);
    border: 1px solid var(--v8-border-strong);
    border-radius: var(--v8-radius);
    color: var(--v8-text-3);
    font-size: 14px;
}

.v8-input-wrap:focus-within {
    border-color: var(--v8-ink);
}

.v8-input-wrap input,
.v8-input-wrap select {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    color: var(--v8-text);
    height: 100%;
}

.v8-input-wrap select {
    font-weight: 600;
    flex: 0 1 auto;
    cursor: pointer;
}

.v8-input-wrap input::placeholder {
    color: var(--v8-text-3);
}

/* Kendo pickers inside a .v8-kendo-flat wrapper take the input recipe. */
.v8-kendo-flat .k-input,
.v8-kendo-flat .k-picker,
.v8-kendo-flat .k-combobox,
.v8-kendo-flat .k-dropdown-wrap {
    height: var(--v8-control-h) !important;
    min-height: var(--v8-control-h) !important;
    border: 1px solid var(--v8-border-strong) !important;
    border-radius: var(--v8-radius) !important;
    background: var(--v8-surface) !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--v8-text) !important;
    font-family: var(--v8-font-body) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

.v8-kendo-flat .k-input:hover,
.v8-kendo-flat .k-input.k-hover,
.v8-kendo-flat .k-input:focus-within,
.v8-kendo-flat .k-input.k-focus {
    border-color: var(--v8-ink) !important;
    box-shadow: none !important;
}

.v8-kendo-flat .k-input-inner,
.v8-kendo-flat .k-input-button,
.v8-kendo-flat .k-select {
    background: transparent !important;
    border: none !important;
    color: inherit !important;
    box-shadow: none !important;
}

.v8-kendo-flat .k-input-inner {
    padding-left: 14px !important;
    height: 100% !important;
}

.v8-kendo-flat .k-input-inner::placeholder {
    color: var(--v8-text-3);
    font-weight: 500;
}

/* ── utilities ──────────────────────────────────────────────────────── */
.v8-row   { display: flex; align-items: center; gap: var(--v8-space-3); }
.v8-stack { display: flex; flex-direction: column; gap: var(--v8-space-2); }
.v8-grow  { flex: 1 1 auto; min-width: 0; }
.v8-hr    { border: 0; border-top: 1px solid var(--v8-border); margin: 0; }
.v8-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── heatmap (shared by Ai/AiExecution and Learner/ReportingDashboard) ──
   One criterion per cell, one module per row. The renderers keep their own
   legacy classes for click/tooltip handlers and add these for the look.
   Spec: docs/BRANDING-2026.md §5 "Heatmap". */
.v8-heat-scroll {
    overflow: auto;
    max-height: 480px;
    width: 0;
    min-width: 100%;
}

.v8-heat {
    border-collapse: separate;
    border-spacing: 4px 8px;
    width: max-content;
    margin: -8px -4px;
    font-family: var(--v8-font-body);
}

.v8-heat th {
    padding: 0;
    border: none;
    background: transparent;
    text-align: center;
    font-family: var(--v8-font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--v8-text-3);
    white-space: nowrap;
}

/* sticky first column: corner label + row labels */
.v8-heat th.v8-heat-corner,
.v8-heat th.v8-heat-row {
    position: sticky;
    left: 0;
    text-align: left;
    min-width: 280px;
    max-width: 320px;
    padding: 0 12px 0 0;
    background: var(--v8-surface);
}

.v8-heat th.v8-heat-corner {
    z-index: 2;
    text-transform: uppercase;
}

.v8-heat th.v8-heat-row {
    z-index: 1;
    vertical-align: middle;
    font-family: var(--v8-font-body);
    letter-spacing: 0;
    text-transform: none;
}

.v8-heat-name,
.v8-heat-sub {
    display: block;
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.35;
}

.v8-heat-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--v8-text);
}

.v8-heat-sub {
    font-size: 12px;
    font-weight: 400;
    color: var(--v8-text-2);
}

/* cells */
.v8-heat-cell {
    width: 30px;
    min-width: 30px;
    height: 40px;
    padding: 0;
    box-sizing: border-box;
    border: none;
    border-radius: 0;
    background: var(--v8-surface-3);
    color: var(--v8-on-ink);
    text-align: center;
    vertical-align: middle;
    position: relative;
    cursor: pointer;
    opacity: 1;
}

.v8-heat-cell.is-ok      { background: var(--v8-ok); }
.v8-heat-cell.is-danger  { background: var(--v8-danger-soft); border: 1px solid var(--v8-heat-neg-line); }
.v8-heat-cell.is-warn    { background: var(--v8-warn-soft);   border: 1px solid var(--v8-heat-warn-line); }
.v8-heat-cell.is-neutral { background: var(--v8-surface-3);   border: 1px dashed var(--v8-text-3); }
.v8-heat-cell.is-done    { background: var(--v8-ink); border: none; cursor: default; }

.v8-heat-cell .v8-heat-pin {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    line-height: 1;
    color: var(--v8-on-ink);
    pointer-events: none;
    text-shadow: none;
}

.v8-heat-cell:not(.is-done):hover {
    box-shadow: 0 0 0 2px var(--v8-surface), 0 0 0 3px var(--v8-border-strong);
}

.v8-heat-cell.is-selected,
.v8-heat-cell.is-selected:hover {
    border-color: transparent;
    box-shadow: 0 0 0 2px var(--v8-surface), 0 0 0 4px var(--v8-info);
}

[data-theme="dark"] .v8-heat-cell.is-selected,
[data-theme="dark"] .v8-heat-cell.is-selected:hover {
    box-shadow: 0 0 0 2px var(--v8-surface), 0 0 0 4px var(--v8-info-on-ink);
}

/* legend */
.v8-heat-legend {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: var(--v8-text-4);
}

.v8-heat-legend > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.v8-heat-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    box-sizing: border-box;
    flex-shrink: 0;
}

.v8-heat-swatch.is-ok      { background: var(--v8-ok); }
.v8-heat-swatch.is-done    { background: var(--v8-ink); }
.v8-heat-swatch.is-danger  { width: 12px; height: 12px; background: var(--v8-danger-soft); border: 1px solid var(--v8-heat-neg-line); }
.v8-heat-swatch.is-warn    { width: 12px; height: 12px; background: var(--v8-warn-soft);   border: 1px solid var(--v8-heat-warn-line); }
.v8-heat-swatch.is-neutral { width: 12px; height: 12px; background: var(--v8-surface-3);   border: 1px dashed var(--v8-text-3); }

/* empty state */
.v8-heat-empty {
    padding: 28px 20px;
    border: 1.5px dashed var(--v8-border-strong);
    text-align: center;
    color: var(--v8-text-2);
    font-size: 14px;
}

/* ── list (shared row list: Learner/Files, Portfolio/DevelopmentPlans and
   Portfolio/VideoTimeIndexes follow this recipe; the last one uses these
   classes directly, the first two carry page-prefixed copies). A page sheet
   adds only its column widths. Spec: docs/BRANDING-2026.md §5 "List". */
.v8-list,
[data-theme="dark"] .v8-list {
    background: var(--v8-surface) !important;
    border: 1px solid var(--v8-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    display: flex;
    flex-direction: column;
}

.v8-list-cols {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 18px;
    background: var(--v8-surface);
    border-bottom: 1px solid var(--v8-border);
    font-family: var(--v8-font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--v8-text-3);
}

.v8-list .k-listview,
.v8-list .k-listview-content {
    border: none !important;
    background: transparent !important;
    border-radius: 0;
    box-shadow: none;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

.v8-list .k-listview-content {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.v8-list-row {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 18px 12px 14px;
    border: none;
    border-bottom: 1px solid var(--v8-border);
    border-left: 4px solid transparent;
    background: var(--v8-surface);
    color: var(--v8-text);
    text-align: left;
    font-family: inherit;
}

.v8-list-row.is-clickable {
    cursor: pointer;
}

.v8-list-row.is-clickable:hover {
    background: var(--v8-surface-2);
}

.v8-list-row:focus-visible {
    outline: 2px solid var(--v8-accent);
    outline-offset: -2px;
}

.v8-list-tile {
    width: 56px;
    height: 52px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--v8-surface-3);
    color: var(--v8-text-4);
    font-size: 18px;
    position: relative;
    overflow: hidden;
}

.v8-list-tile img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.v8-list-tile.is-ink { background: var(--v8-ink); color: var(--v8-on-ink); }

.v8-list-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.v8-list-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--v8-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.v8-list-sub {
    font-size: 12.5px;
    color: var(--v8-text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.v8-list-mono {
    font-family: var(--v8-font-mono);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--v8-text);
}

.v8-list-muted {
    font-size: 13px;
    color: var(--v8-text-4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.v8-list-go {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--v8-border-strong);
    color: var(--v8-text-3);
    font-size: 12px;
}

.v8-list-row:hover .v8-list-go {
    border-color: var(--v8-ink);
    color: var(--v8-text);
}

.v8-list-foot {
    background: var(--v8-surface);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 18px;
    flex-wrap: wrap;
}

.v8-list-count {
    font-size: 13px;
    color: var(--v8-text-2);
}

.v8-list-count b {
    color: var(--v8-text);
    font-family: var(--v8-font-mono);
    font-weight: 600;
}

.v8-list .k-pager,
.v8-list .k-listview-pager {
    margin: 0;
    padding: 0;
    border: none !important;
    border-radius: 0;
    background: transparent !important;
    gap: 6px;
    font-size: 13px;
    color: var(--v8-text-2);
}

.v8-list .k-pager .k-button {
    width: 36px;
    height: 36px;
    border: 1px solid var(--v8-border-strong);
    border-radius: 0;
    background: var(--v8-surface);
    color: var(--v8-text);
    box-shadow: none;
}

.v8-list .k-pager .k-button:hover {
    border-color: var(--v8-ink);
}

.v8-list .k-pager .k-selected {
    background: var(--v8-ink) !important;
    color: var(--v8-on-ink) !important;
    border-color: var(--v8-ink) !important;
}

.v8-list .k-pager .k-dropdownlist {
    height: 36px;
    border: 1px solid var(--v8-border-strong);
    border-radius: 0;
    background: var(--v8-surface);
    color: var(--v8-text);
    box-shadow: none;
}

.v8-list .k-pager .k-pager-info {
    display: none;
}

.v8-list-empty {
    margin: 18px;
    padding: 32px 20px;
    border: 1.5px dashed var(--v8-border-strong);
    text-align: center;
    color: var(--v8-text-2);
    font-size: 14px;
}

.v8-list-empty b {
    display: block;
    font-family: var(--v8-font-display);
    font-size: 20px;
    font-weight: 600;
    color: var(--v8-text);
    margin-bottom: 4px;
}

/* shared page shell + header for simple list pages */
.v8-listpage {
    background: var(--v8-bg);
    padding: 26px 40px 48px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

.v8-listpage > * {
    flex-shrink: 0;
}

.v8-listpage > form {
    display: contents;
}

.v8-backrow {
    display: flex;
    align-items: center;
}

.v8-page .aiexec-back-btn.v8-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px 0 12px;
    border: 1px solid var(--v8-border-strong);
    border-radius: 0;
    background: var(--v8-surface);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--v8-text) !important;
    text-decoration: none;
    position: static;
    box-shadow: none;
}

.v8-page .aiexec-back-btn.v8-back:hover {
    border-color: var(--v8-ink);
    background: var(--v8-surface);
    color: var(--v8-text) !important;
    box-shadow: none;
}

.v8-page .aiexec-back-btn.v8-back i {
    font-size: 13px;
}

.v8-pagehead {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    flex-wrap: wrap;
}

.v8-pagehead-titles {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

@media (max-width: 760px) {
    .v8-listpage {
        padding: 20px 20px 40px;
    }

    .v8-list-cols {
        display: none;
    }

    .v8-list-row {
        flex-wrap: wrap;
        gap: 10px 12px;
    }

    .v8-list-main {
        flex-basis: calc(100% - 68px - 28px - 24px);
    }
}

/* ── Dialog (`.v8-modal` on a Bootstrap .modal) ─────────────────────────
   Ink header, paper body, mono eyebrow labels, square inputs, surface
   footer. Add the class next to "modal fade"; keep the page's own ids,
   handlers and footer button ids — only swap the button classes to
   .v8-btn.v8-btn-outline / .v8-btn.v8-btn-primary. See BRANDING-2026.md §5. */
.v8-modal .modal-content {
    border: none;
    border-radius: 12px;
    background: var(--v8-bg);
    color: var(--v8-text);
    font-family: var(--v8-font-body);
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(15, 28, 46, 0.28);
}

.v8-modal .modal-header {
    background: var(--v8-ink) !important;
    color: var(--v8-on-ink) !important;
    border-bottom: none;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.v8-modal .modal-title {
    font-family: var(--v8-font-display);
    font-size: 20px;
    font-weight: 700;
    color: var(--v8-on-ink);
    margin: 0;
    flex: 1 1 auto;
}

.v8-modal .modal-header .close,
.v8-modal .modal-header .btn-close {
    order: 2;
    margin: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--v8-on-ink-3);
    background: transparent;
    color: var(--v8-on-ink);
    font-size: 18px;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    opacity: 1;
    filter: none;
}

.v8-modal .modal-header .close:hover,
.v8-modal .modal-header .btn-close:hover {
    background: var(--v8-ink-2);
    color: var(--v8-on-ink);
}

.v8-modal .modal-body {
    padding: 20px 24px;
    font-size: 14px;
}

.v8-modal .modal-body label,
.v8-modal .col-form-label {
    display: block;
    font-family: var(--v8-font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--v8-text-3);
    margin: 0 0 6px;
    padding: 0;
}

.v8-modal .form-control,
.v8-modal .k-input,
.v8-modal .k-picker,
.v8-modal .k-combobox {
    border-radius: 0 !important;
    border: 1px solid var(--v8-border-strong) !important;
    background: var(--v8-surface) !important;
    color: var(--v8-text) !important;
    font-family: inherit;
    font-size: 14px;
    box-shadow: none !important;
}

.v8-modal .form-control:focus,
.v8-modal .k-combobox:focus-within,
.v8-modal .k-input:focus-within {
    border-color: var(--v8-ink) !important;
    box-shadow: none !important;
}

.v8-modal .k-input-inner,
.v8-modal .k-input-button {
    background: transparent !important;
    border: none !important;
    color: inherit !important;
}

.v8-modal .k-upload {
    border-radius: 0;
    border: 1px dashed var(--v8-upload-border, var(--v8-border-strong));
    background: var(--v8-surface);
    font-family: inherit;
}

.v8-modal .k-upload .k-upload-button,
.v8-modal .k-upload .k-button {
    border-radius: 0;
    font-family: inherit;
    font-weight: 600;
}

.v8-modal .v8-modal-hint {
    font-size: 12.5px;
    color: var(--v8-text-3);
    margin-top: 10px;
}

.v8-modal .modal-footer {
    border-top: 1px solid var(--v8-border);
    background: var(--v8-surface);
    padding: 14px 24px;
    gap: 10px;
    justify-content: flex-end;
}

.v8-modal .modal-footer .v8-btn {
    margin: 0;
}

/* Kendo grids inside a dialog (lists of modules, plans, assessors …):
   flat, hairline rows, mono uppercase headers, left‑aligned cells.
   See BRANDING-2026.md §91. */
.v8-modal .k-grid {
    width: 100% !important;
    border: 1px solid var(--v8-border);
    border-radius: 0;
    background: var(--v8-surface);
    font-family: var(--v8-font-body);
    font-size: 13.5px;
    color: var(--v8-text);
    text-align: left;
}

.v8-modal .k-grid .k-grid-header,
.v8-modal .k-grid .k-grid-header-wrap,
.v8-modal .k-grid .k-table-thead,
.v8-modal .k-grid th,
.v8-modal .k-grid .k-header {
    background: var(--v8-surface-2) !important;
    border-color: var(--v8-border) !important;
}

.v8-modal .k-grid th,
.v8-modal .k-grid .k-header {
    padding: 10px 12px;
    font-family: var(--v8-font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: left !important;
    color: var(--v8-text-3) !important;
}

.v8-modal .k-grid th .k-cell-inner,
.v8-modal .k-grid th .k-link {
    justify-content: flex-start;
    color: var(--v8-text-3) !important;
}

.v8-modal .k-grid tr,
.v8-modal .k-grid .k-table-row,
.v8-modal .k-grid .k-table-alt-row {
    background: var(--v8-surface) !important;
    color: var(--v8-text) !important;
}

.v8-modal .k-grid td {
    padding: 9px 12px;
    border-left-width: 0 !important;
    border-color: var(--v8-border);
    vertical-align: middle;
    text-align: left;
    color: var(--v8-text) !important;
}

.v8-modal .k-grid .k-table-row:hover td {
    background: var(--v8-surface-2) !important;
}

.v8-modal .k-grid .k-grid-norecords,
.v8-modal .k-grid .k-grid-norecords td {
    padding: 18px 12px;
    color: var(--v8-text-3);
}

.v8-modal .k-grid .k-pager {
    padding: 8px 12px;
    border: none;
    border-top: 1px solid var(--v8-border);
    background: var(--v8-surface);
}

.v8-modal .k-grid .k-pager .k-button {
    border-radius: 0;
}

.v8-modal .k-grid .k-pager .k-selected {
    background: var(--v8-ink) !important;
    border-color: var(--v8-ink) !important;
    color: var(--v8-on-ink) !important;
}

.v8-modal .k-grid .v8-btn {
    margin: 0;
}

/* status words the old grid templates emit */
.v8-modal .k-grid .approved { color: var(--v8-ok-text); font-weight: 700; }
.v8-modal .k-grid .rejected { color: var(--v8-danger-text); font-weight: 700; }
.v8-modal .k-grid .inprogress { color: var(--v8-warn-text); font-weight: 700; }

/* radio / check rows keep body text (the recipe turns other labels into eyebrows) */
.v8-modal .modal-body .form-check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 0;
}

.v8-modal .modal-body .form-check-input {
    float: none;
    margin: 0;
    flex-shrink: 0;
}

.v8-modal .modal-body .form-check-input:checked {
    background-color: var(--v8-ink);
    border-color: var(--v8-ink);
}

.v8-modal .modal-body label.form-check-label {
    display: inline;
    margin: 0;
    font-family: var(--v8-font-body);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--v8-text);
}

/* wide list dialogs */
.v8-modal.v8-modal-wide .modal-dialog {
    width: 94vw;
    max-width: 1140px;
}

/* dialog extras: field meta row, char counter, inline error, checkbox row */
.v8-modal .v8-modal-textarea {
    min-height: 96px;
    padding: 10px 12px;
    resize: vertical;
    line-height: 1.45;
}

.v8-modal .v8-modal-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.v8-modal .v8-modal-meta .v8-modal-hint {
    margin-top: 8px;
}

.v8-modal .v8-modal-count {
    margin-top: 8px;
    flex-shrink: 0;
    font-family: var(--v8-font-mono);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--v8-text-3);
}

.v8-modal .v8-modal-count.is-near {
    color: var(--v8-warn-text);
}

.v8-modal .v8-modal-msg {
    display: none;
    margin-top: 12px;
    padding: 10px 12px;
    border-left: 3px solid var(--v8-danger);
    background: var(--v8-danger-soft);
    color: var(--v8-danger-text);
    font-size: 13px;
}

.v8-modal .modal-body label.v8-modal-check {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-family: var(--v8-font-body);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--v8-text);
    cursor: pointer;
}

.v8-modal .v8-modal-check input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    margin: 0;
    flex-shrink: 0;
    border: 1px solid var(--v8-border-strong);
    border-radius: 0;
    background: var(--v8-surface);
    display: inline-grid;
    place-content: center;
    cursor: pointer;
}

.v8-modal .v8-modal-check input[type="checkbox"]:checked {
    background: var(--v8-ink);
    border-color: var(--v8-ink);
}

.v8-modal .v8-modal-check input[type="checkbox"]:checked::after {
    content: "";
    width: 10px;
    height: 6px;
    border-left: 2px solid var(--v8-on-ink);
    border-bottom: 2px solid var(--v8-on-ink);
    transform: translateY(-1px) rotate(-45deg);
}

.v8-modal .v8-modal-check input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--v8-accent);
    outline-offset: 2px;
}

/* outline danger button (destructive / stop actions) */
.v8-btn.v8-btn-outline.v8-btn-danger {
    color: var(--v8-danger-text) !important;
    border-color: var(--v8-danger);
}

.v8-btn.v8-btn-outline.v8-btn-danger:hover {
    background: var(--v8-danger-soft);
    border-color: var(--v8-danger);
}

/* ── Enter evidence dialogs (`.v8-ev-*`, `.v8-rec-*`) ─────────────────
   Portfolio/_AddCommentPartial (text) and _AddCommentPartialWithAudioOption
   (audio); loaded on demand into Portfolio/Index, the dashboard and the
   development plan / video time index pages. §33. */
.v8-modal .v8-ev-dialog {
    max-width: 600px;
}

.v8-ev-context {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding: 8px 12px 8px 8px;
    border: 1px solid var(--v8-border);
    background: var(--v8-surface);
    font-size: 13.5px;
    color: var(--v8-text-2);
}

.v8-ev-context-tile {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--v8-surface-3);
    color: var(--v8-text-4);
    font-size: 12px;
}

.v8-ev-num {
    font-family: var(--v8-font-mono);
    font-weight: 600;
    color: var(--v8-text);
}

.v8-ev-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.v8-ev-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.v8-modal .v8-ev-optional {
    margin-left: 6px;
    font-family: var(--v8-font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--v8-text-3);
    opacity: .8;
}

/* "Add new qualification" dialog (Learner/Dashboard, Learner/Index): inline error */
.v8-modal .v8-addqual-err {
    display: block;
    padding: 10px 12px;
    border-left: 3px solid var(--v8-danger);
    background: var(--v8-danger-soft);
    color: var(--v8-danger-text);
    font-size: 13px;
}

.v8-modal .v8-addqual-err[hidden] {
    display: none;
}

.v8-modal .k-combobox {
    min-height: var(--v8-control-h);
}

.v8-modal .v8-acct-req {
    margin-left: 3px;
    color: var(--v8-danger);
}

.v8-ev-mono {
    font-family: var(--v8-font-mono) !important;
}

.v8-modal input.form-control {
    height: var(--v8-control-h);
}

.v8-ev-hours {
    margin: 0;
    padding: 14px 16px 16px;
    border: 1px solid var(--v8-border);
    background: var(--v8-surface);
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.v8-ev-hours-title {
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
    font-family: var(--v8-font-display);
    font-size: 17px;
    font-weight: 600;
    color: var(--v8-text);
}

.v8-ev-hours-title i {
    font-size: 14px;
    color: var(--v8-text-3);
    margin-right: 4px;
}

.v8-ev-hours-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

/* validation inside dialogs: danger only, no green "valid" ring */
.v8-modal .was-validated .form-control:valid,
.v8-modal .form-control.is-valid {
    border-color: var(--v8-border-strong) !important;
    background-image: none !important;
    padding-right: 12px;
}

.v8-modal .was-validated .form-control:invalid,
.v8-modal .form-control.is-invalid {
    border-color: var(--v8-danger) !important;
    background-image: none !important;
    padding-right: 12px;
}

.v8-modal .invalid-feedback {
    margin-top: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--v8-danger-text);
}

/* footer: Cancel left, draft/submit right */
.v8-modal .modal-footer .v8-ev-footspace {
    flex: 1 1 auto;
}

.v8-modal #addCommentFooter {
    flex-direction: row;
    align-items: center;
}

.v8-modal #addCommentFooter .standardBtnSection {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

/* audio recorder */
.v8-modal .v8-rec {
    margin-bottom: 16px;
    padding: 16px;
    border: 1px solid var(--v8-border);
    border-radius: 0;
    background: var(--v8-surface);
}

.v8-rec-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.v8-modal .v8-rec .recordAudioIcon {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border: none;
    border-radius: 0;
    background: var(--v8-surface-3);
    color: var(--v8-text-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.v8-modal .v8-rec .recordAudioIcon i {
    font-size: 20px;
    color: inherit;
}

.v8-modal .v8-rec .recordAudioIcon.isRecording {
    border: none;
    background: var(--v8-danger);
    color: #FFFFFF;
}

.v8-modal .v8-rec .recordAudioIcon.isRecording i {
    color: #FFFFFF;
}

.v8-modal .v8-rec .pulse {
    animation: v8-rec-pulse 1.6s infinite;
}

@keyframes v8-rec-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(179, 38, 27, .35); }
    100% { box-shadow: 0 0 0 14px rgba(179, 38, 27, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .v8-modal .v8-rec .pulse { animation: none; }
}

/* idle text and the recording label share one cell; JS toggles #audioWarning's visibility */
.v8-rec-status {
    flex: 1 1 140px;
    display: grid;
    min-width: 0;
}

.v8-rec-status > * {
    grid-area: 1 / 1;
    align-self: center;
}

.v8-rec-idle {
    font-family: var(--v8-font-display);
    font-size: 17px;
    font-weight: 600;
    color: var(--v8-text);
}

.v8-rec:has(.recordAudioIcon.isRecording) .v8-rec-idle {
    visibility: hidden;
}

.v8-modal .v8-rec #audioWarning {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin: 0;
    text-align: left;
}

.v8-modal .v8-rec .audioWarningLabel {
    font-family: var(--v8-font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--v8-danger-text);
}

.v8-modal .v8-rec .audioTimer {
    font-family: var(--v8-font-mono);
    font-size: 20px;
    font-weight: 600;
    color: var(--v8-text);
    white-space: nowrap;
}

.v8-rec-btns {
    display: flex;
    gap: 8px;
}

.v8-rec-btns .v8-btn {
    margin: 0;
}

.v8-rec-dot {
    width: 10px;
    height: 10px;
    border-radius: var(--v8-radius-pill);
    background: var(--v8-danger);
}

.v8-rec-record:disabled .v8-rec-dot {
    background: var(--v8-text-3);
}

.v8-modal .v8-rec .visualizer {
    width: 100%;
    height: 65px;
    margin-top: 14px;
    border: 1px solid var(--v8-border);
}

.v8-modal .v8-rec #audioPlayback {
    width: 100%;
    height: 40px;
    margin: 14px 0 0;
}

@media (max-width: 520px) {
    .v8-ev-hours-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .v8-rec-btns {
        width: 100%;
    }

    .v8-rec-btns .v8-btn {
        flex: 1 1 0;
    }
}

/* ── File upload picker (`.v8-upl-*`, Portfolio/_AddFileToFiles) ──────
   Dashed drop zone, selected-file rows, flat progress, quota notice.
   Lives here because the partial is loaded into several pages. §32. */
.v8-modal .v8-upl-dialog {
    max-width: 620px;
}

.v8-upl-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.v8-upl-form > .v8-modal-hint {
    margin-top: -8px;
}

.v8-upl-drop {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 20px 20px;
    border: 1.5px dashed var(--v8-upload-border);
    background: var(--v8-surface);
    transition: background-color .12s, border-color .12s;
}

.v8-upl-drop.is-over {
    border-color: var(--v8-info);
    background: var(--v8-info-soft);
}

.v8-upl-drop-icon {
    width: var(--v8-tile-lg, 52px);
    height: var(--v8-tile-lg, 52px);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--v8-info-soft);
    color: var(--v8-info-text);
    font-size: 20px;
}

.v8-upl-drop-text {
    flex: 1 1 160px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.v8-upl-drop-text b {
    font-family: var(--v8-font-display);
    font-size: 18px;
    font-weight: 600;
    color: var(--v8-text);
}

.v8-upl-drop-text span {
    font-size: 13px;
    color: var(--v8-text-2);
}

.v8-upl-drop-btns {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.v8-upl-drop-btns .v8-btn {
    margin: 0;
}

.v8-upl-files {
    border: 1px solid var(--v8-border);
    background: var(--v8-surface);
    max-height: 220px;
    overflow-y: auto;
}

.v8-upl-files-head {
    position: sticky;
    top: 0;
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--v8-surface-2);
    border-bottom: 1px solid var(--v8-border);
    font-family: var(--v8-font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--v8-text-3);
}

.v8-upl-file {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 8px 8px 12px;
    border-bottom: 1px solid var(--v8-border);
    min-width: 0;
}

.v8-upl-file:last-child {
    border-bottom: none;
}

.v8-upl-file-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--v8-surface-3);
    color: var(--v8-text-4);
    font-size: 13px;
}

.v8-upl-file-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--v8-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.v8-upl-file-size {
    flex-shrink: 0;
    font-family: var(--v8-font-mono);
    font-size: 12px;
    color: var(--v8-text-3);
}

.v8-upl-file-remove {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid transparent;
    background: transparent;
    color: var(--v8-text-3);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.v8-upl-file-remove:hover,
.v8-upl-file-remove:focus-visible {
    border-color: var(--v8-danger);
    color: var(--v8-danger);
    outline: none;
}

/* progress: bar only while uploading; the status line shows whenever it has text */
.v8-upl-progress {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.v8-upl-progress progress {
    display: none;
    width: 100%;
    height: var(--v8-bar-h, 6px);
    border: none;
    border-radius: 0;
    background: var(--v8-surface-3);
    appearance: none;
    -webkit-appearance: none;
}

.v8-upl-progress.is-active progress {
    display: block;
}

.v8-upl-progress progress::-webkit-progress-bar   { background: var(--v8-surface-3); }
.v8-upl-progress progress::-webkit-progress-value { background: var(--v8-info-bar); transition: width .3s; }
.v8-upl-progress progress::-moz-progress-bar      { background: var(--v8-info-bar); }

.v8-upl-progress p {
    margin: 0;
    font-family: var(--v8-font-mono);
    font-size: 12px;
    color: var(--v8-text-2);
}

.v8-upl-progress p:empty {
    display: none;
}

.v8-upl-progress:not(.is-active):has(p:empty) {
    display: none;
}

.v8-upl-field {
    display: flex;
    flex-direction: column;
}

.v8-upl-field .v8-upl-namehint {
    margin-top: 6px;
}

.v8-upl-field textarea:disabled {
    background: var(--v8-surface-2) !important;
    color: var(--v8-text-3) !important;
}

.v8-upl-quota {
    margin-bottom: 16px;
    padding: 10px 12px;
    border-left: 3px solid var(--v8-info);
    background: var(--v8-info-soft);
    color: var(--v8-info-text);
    font-size: 13px;
    line-height: 1.45;
}

.v8-upl-quota.is-over {
    border-left-color: var(--v8-danger);
    background: var(--v8-danger-soft);
    color: var(--v8-danger-text);
}

.v8-upl-quota strong {
    font-weight: 700;
}

/* footer: "Stop upload" sits left, cancel + upload right */
.v8-modal .modal-footer .v8-upl-footspace {
    flex: 1 1 auto;
}

.v8-modal .k-multiselect .k-chip {
    border-radius: 0;
    background: var(--v8-surface-3);
    border-color: var(--v8-border);
    color: var(--v8-text);
}