/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN TOKENS — Direction 2, "Clarity"
   ═══════════════════════════════════════════════════════════════════════════

   The same palette as the client portal (client-frontend/src/index.css), not a
   similar one, so the two halves of the product finally look related.

   The assessment counted 188 distinct hex colours here, 34 font sizes, 15 radii,
   three competing font stacks, no webfont at all, and 32 CSS custom properties
   that were declared and then bypassed. Everything below is the single source; a
   raw hex in a page is now a test failure rather than a style choice.

   NAMING. The legacy --bg-* / --text-* / --border-color names are kept and
   re-pointed at the new palette, because roughly a thousand inline styles across
   the pages reference them. That makes this a palette change rather than a
   thousand-site rewrite, and it is why the whole portal shifts together.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* Height of .navbar, which is sticky at top: 0. The list-view table header
     * sticks directly beneath it, so the two have to agree. Measured rather than
     * assumed: the navbar takes its height from its padding and content, so if
     * that changes this needs changing with it. */
    --navbar-height: 75px;

    /* ── Typeface ─────────────────────────────────────────────────────────────
       Swapping direction is a change to these three lines and nothing else. */
    --font-display: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-ui: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-figure: "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace;
    --display-weight: 800;
    --display-track: -0.03em;

    /* ── Type scale · seven sizes, ~1.2 ratio ───────────────────────────────
       The audit found nine sizes between 0.72rem and 0.86rem, which nobody can
       tell apart; their existence was the proof there had never been a scale. */
    --text-2xs:  0.6875rem;   /* eyebrows, status chips */
    --text-xs:   0.8125rem;   /* metadata, helper text */
    --text-sm:   0.875rem;    /* secondary copy, labels, table cells */
    --text-base: 1rem;        /* body, and every input — 16px stops iOS zooming */
    --text-lg:   1.125rem;    /* card titles */
    --text-xl:   1.375rem;    /* page headings */
    --text-2xl:  1.75rem;     /* the one heading per screen that leads */
    /* Two display steps the client portal does not need. This is a
       dashboard: a KPI figure has to read across a room, and the
       alternative was to leave 32px, 40px and 48px as literals and
       pretend the scale covered them. */
    --text-3xl:  2.25rem;     /* dashboard figures */
    --text-4xl:  3rem;        /* the single largest figure on a screen */

    /* ── Radii · three, plus a pill ─────────────────────────────────────────── */
    --radius-sm:   6px;
    --radius:     10px;
    --radius-lg:  14px;
    --radius-pill: 999px;

    /* ── Space · 4px base ───────────────────────────────────────────────────── */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;

    /* ── Ink ────────────────────────────────────────────────────────────────── */
    --ink:      #0D1117;
    --ink-2:    #414A55;
    /* #6B7684 gave 4.31:1 against --wash, under AA for normal text, and muted
       metadata sits on --wash all over the board. #616C7A is 4.98:1 there and
       5.34:1 on --paper. */
    --ink-3:    #616C7A;
    --on-accent:#FFFFFF;   /* light theme only — see the dark block */

    /* ── Surfaces ───────────────────────────────────────────────────────────── */
    --paper:     #FFFFFF;
    --wash:      #F6F7F9;
    --sunken:    #EFF1F4;
    --line:      #E5E8EC;
    --line-soft: #F1F3F6;
    --hairline:  rgba(13, 17, 23, 0.12);
    --lift:      0 1px 3px rgba(13, 17, 23, 0.06);
    --lift-lg:   0 12px 36px rgba(13, 17, 23, 0.13);
    --scrim:     rgba(13, 17, 23, 0.55);

    /* ── Accent · the Mayberry blue, deepened for contrast on white ─────────── */
    --accent:        #0B6FDC;
    --accent-strong: #0958B0;
    --accent-wash:   #E8F1FD;
    --accent-faint:  #F4F8FE;

    /* ── Semantic · separate from the accent, as status must be ────────────── */
    --ok:        #0B7A44;
    --ok-wash:   #E6F4EC;
    --ok-ink:    #06542F;   /* text on --ok-wash */
    --warn:      #A9610B;
    --warn-wash: #FCF3E5;
    --warn-ink:  #7A4508;
    --bad:       #B4271B;
    --bad-wash:  #FCEDEB;
    --bad-ink:   #7F1B12;

    /* ── Legacy names, re-pointed ───────────────────────────────────────────── */
    --bg-primary: var(--paper);
    --bg-secondary: var(--wash);
    --bg-tertiary: var(--sunken);
    --text-primary: var(--ink);
    --text-secondary: var(--ink-2);
    --text-muted: var(--ink-3);
    --border-color: var(--line);
    --navbar-bg: var(--paper);
    --navbar-border: var(--line);
    --input-bg: var(--paper);
    --input-border: #CFD5DC;
    --shadow: var(--lift);
    /* Referenced by four pages and defined nowhere, so it resolved to nothing. */
    --shadow-md: 0 4px 6px -1px rgba(13, 17, 23, 0.10);
    --shadow-lg: var(--lift-lg);
    --accent-blue: var(--accent);
    --accent-blue-dark: var(--accent-strong);
    --accent-green: var(--ok);
    --accent-red: var(--bad);
    --accent-yellow: var(--warn);
}

/* Dark Theme — the same roles, inverted deliberately rather than by formula. */
[data-theme="dark"] {
    --ink:      #ECEEF1;
    --ink-2:    #B6BCC5;
    --ink-3:    #868E99;
    /* Not #FFFFFF. White on the dark theme's lighter accent is 2.56:1 —
       a clear WCAG failure, and it applies to every filled accent button on
       the screen. The dark theme's accent is light BECAUSE the ground is dark,
       so the text on it has to invert too. #0D1117 gives 7.39:1. */
    --on-accent: #0D1117;

    --paper:     #14181D;
    --wash:      #0D1014;
    --sunken:    #1B2027;
    --line:      #272D35;
    --line-soft: #1E242B;
    --hairline:  rgba(255, 255, 255, 0.14);
    --lift:      0 1px 3px rgba(0, 0, 0, 0.30);
    --lift-lg:   0 12px 36px rgba(0, 0, 0, 0.45);
    --scrim:     rgba(0, 0, 0, 0.65);

    --accent:        #59A6F5;
    --accent-strong: #8CC2FA;
    --accent-wash:   #13253A;
    --accent-faint:  #101A24;

    --ok:        #4FC183;
    --ok-wash:   #0E2419;
    --ok-ink:    #A7E3C1;
    --warn:      #DDA359;
    --warn-wash: #2A2110;
    --warn-ink:  #F0CE9C;
    --bad:       #F08D82;
    --bad-wash:  #2C1714;
    --bad-ink:   #F8C4BD;

    --bg-primary: var(--paper);
    --bg-secondary: var(--wash);
    --bg-tertiary: var(--sunken);
    --text-primary: var(--ink);
    --text-secondary: var(--ink-2);
    --text-muted: var(--ink-3);
    --border-color: var(--line);
    --navbar-bg: var(--paper);
    --navbar-border: var(--line);
    --input-bg: var(--sunken);
    --input-border: #333A43;
    --shadow: var(--lift);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.30);
    --shadow-lg: var(--lift-lg);
    --accent-blue: var(--accent);
    --accent-blue-dark: var(--accent-strong);
    --accent-green: var(--ok);
    --accent-red: var(--bad);
    --accent-yellow: var(--warn);
}

/* Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    font-family: var(--font-ui);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Navbar Base */
.navbar {
    background-color: var(--navbar-bg);
    border-bottom: 1px solid var(--navbar-border);
    box-shadow: var(--shadow);
    z-index: 1000;
    transition: all 0.3s ease;
}

.navbar-sticky {
    position: sticky;
    top: 0;
}

.navbar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 12px 24px;
    max-width: 100%;
    min-height: 70px;
}

/* Navbar Sections */
.navbar-left {
    display: flex;
    align-items: center;
    gap: 24px;
    flex: 0 0 auto;
    height: 100%;
}

.navbar-center {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    justify-content: center;
    gap: 12px;
    height: 100%;
}

.navbar-right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 0 0 auto;
    height: 100%;
}

/* Logo */
.navbar-logo a {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--text-primary);
    font-weight: 700;
    font-size: var(--text-lg);
    transition: opacity 0.2s ease;
}

.navbar-logo a:hover {
    opacity: 0.8;
}

.navbar-logo .home-icon {
    width: 24px;
    height: 24px;
    color: var(--accent);
    flex-shrink: 0;
}

.navbar-logo .logo-image {
    height: 50px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    transition: opacity 0.2s ease;
}

/* Breadcrumb */
.navbar-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-xs);
}

.breadcrumb-item {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
}

.breadcrumb-item.breadcrumb-home {
    margin-right: 8px;
}

.breadcrumb-home-icon {
    width: 18px;
    height: 18px;
    color: var(--accent);
}

.breadcrumb-item:hover {
    color: var(--text-primary);
}

.breadcrumb-item:hover .breadcrumb-home-icon {
    color: var(--accent-strong);
}

.breadcrumb-item.active {
    color: var(--text-primary);
    font-weight: 600;
}

.breadcrumb-separator {
    color: var(--text-secondary);
    margin: 0 4px;
}

/* Progress Indicator */
.progress-indicator {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: var(--bg-secondary);
    padding: 8px 16px;
    border-radius: var(--radius-sm);
}

.progress-text {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

.progress-bar-mini {
    width: 120px;
    height: 4px;
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background-color: var(--accent);
    transition: width 0.3s ease;
}

/* Navbar Buttons */
.navbar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background-color: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.navbar-btn:hover {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

.navbar-btn svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
}

.navbar-btn-secondary {
    color: var(--text-primary);
}

.navbar-btn-secondary:hover {
    background-color: var(--bg-tertiary);
}

/* Filter Button */
.navbar-filter-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: auto;
    padding: 8px 12px;
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--text-primary);
}

.navbar-filter-btn span {
    display: none;
}

@media (min-width: 768px) {
    .navbar-filter-btn span {
        display: inline;
    }
}

/* Navigation Links */
.nav-link {
    display: none;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 500;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
}

.nav-link:hover {
    color: var(--text-primary);
    background-color: var(--bg-secondary);
}

.app-identifier {
    display: none;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: 500;
    padding: 8px 12px;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .nav-link {
        display: inline-block;
    }
    
    .app-identifier {
        display: inline-block;
    }
}

/* Search Box */
.search-box {
    display: none;
    align-items: center;
    gap: 8px;
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    width: 300px;
}

.search-icon {
    width: 18px;
    height: 18px;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.search-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: var(--text-xs);
    outline: none;
}

.search-input::placeholder {
    color: var(--text-secondary);
}

@media (min-width: 1024px) {
    .search-box {
        display: flex;
    }
}

/* Role Badge */
.role-badge {
    display: none;
    align-items: center;
    gap: 8px;
    background-color: var(--ok-wash);
    color: var(--ok-ink);
    padding: 6px 12px;
    border-radius: var(--radius-lg);
    font-size: var(--text-xs);
    font-weight: 600;
}

[data-theme="dark"] .role-badge {
    background-color: var(--ok-ink);
    color: var(--ok-wash);
}

@media (min-width: 768px) {
    .role-badge {
        display: flex;
    }
}

/* Team Selector */
/* Notification Button */
.navbar-notification-btn {
    position: relative;
    display: none;
}

@media (min-width: 768px) {
    .navbar-notification-btn {
        display: flex;
    }
}

.notification-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    display: none;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background-color: var(--bad);
    color: white;
    border-radius: 50%;
    font-size: var(--text-2xs);
    font-weight: 700;
}

/* Theme Toggle */
.navbar-theme-toggle {
    position: relative;
}

.theme-icon-light,
.theme-icon-dark {
    position: absolute;
    transition: opacity 0.2s ease;
}

/* User Button */
.navbar-user-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 4px 8px 4px 4px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: var(--text-xs);
}

.navbar-user-btn:hover {
    border-color: var(--accent);
}

.user-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: var(--accent);
    color: white;
    border-radius: 50%;
    font-size: var(--text-xs);
    font-weight: 600;
}

.user-name {
    display: none;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

@media (min-width: 768px) {
    .user-name {
        display: inline;
    }
}

.dropdown-icon {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

.navbar-user-btn:hover .dropdown-icon {
    transform: scaleY(-1);
}

/* Dropdown */
.navbar-dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background-color: var(--navbar-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: all 0.2s ease;
    z-index: 1001;
}

.dropdown-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
}

.user-avatar-large {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: var(--accent);
    color: white;
    border-radius: 50%;
    font-size: var(--text-sm);
    font-weight: 600;
    flex-shrink: 0;
}

.dropdown-username {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.dropdown-userinfo {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin: 0;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 16px;
    background: none;
    border: none;
    color: var(--text-primary);
    text-decoration: none;
    cursor: pointer;
    font-size: var(--text-xs);
    text-align: left;
    transition: all 0.2s ease;
}

.dropdown-icon-sm {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.dropdown-item:hover {
    background-color: var(--bg-secondary);
}

.dropdown-item.active {
    background-color: var(--bg-secondary);
    font-weight: 600;
    color: var(--accent);
}

.dropdown-item.dropdown-logout {
    color: var(--bad);
}

/* Filter Styles */
.filter-section {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-label {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.filter-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-xs);
    color: var(--text-primary);
    cursor: pointer;
}

.filter-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--accent);
}

.filter-divider {
    height: 1px;
    background-color: var(--border-color);
    margin: 0 16px;
}

.filter-date {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--input-border);
    border-radius: var(--radius-sm);
    background-color: var(--input-bg);
    color: var(--text-primary);
    font-size: var(--text-xs);
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-date:hover {
    border-color: var(--accent);
}

.filter-date:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Wider filter panel */
.filter-panel {
    width: 320px;
    max-height: 80vh;
    overflow-y: auto;
    left: auto;
    right: 0;
}

/* Filter chip row */
.filter-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    user-select: none;
}

.filter-chip input[type="checkbox"] {
    display: none;
}

.filter-chip:has(input:checked) {
    border-color: currentColor;
}

.chip-high:has(input:checked)  { background: var(--bad-wash); color: var(--bad); border-color: var(--bad); }
.chip-medium:has(input:checked){ background: var(--warn-wash); color: var(--warn); border-color: var(--warn); }
.chip-low:has(input:checked)   { background: var(--ok-wash); color: var(--ok); border-color: var(--ok); }
.chip-prohibit:has(input:checked){ background: var(--accent-wash); color: var(--accent); border-color: var(--accent); }
.filter-chip:not(.chip-high):not(.chip-medium):not(.chip-low):not(.chip-prohibit):has(input:checked) {
    background: var(--accent-wash); color: var(--accent); border-color: var(--accent);
}

/* Filter select */
.filter-select {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--input-border);
    border-radius: var(--radius-sm);
    background: var(--input-bg);
    color: var(--text-primary);
    font-size: var(--text-xs);
    cursor: pointer;
    transition: border-color 0.2s;
}

.filter-select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Search box clear button */
.search-box {
    position: relative;
}

/* View Toggle Buttons */
.navbar-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: 1px solid transparent;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
    margin: 0 4px;
}

.navbar-view-btn:hover {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

.navbar-view-btn.active {
    background-color: var(--bg-secondary);
    color: var(--accent);
    border-color: var(--accent);
}

.navbar-view-btn svg {
    width: 18px;
    height: 18px;
}

/* Main Content */
.main-content {
    flex: 1;
    overflow: hidden;
}

/* List View Styles */
/* The scroll container for the list.
 *
 * It already had overflow-y: auto, but `height: 100%` inside a parent with no
 * resolved height meant it never actually scrolled — the PAGE grew to 4600px
 * instead. That is what broke the sticky heading: sticky resolves against the
 * nearest scrolling ancestor, and this was the nearest one, so the heading pinned
 * itself inside a box that never moved while the document scrolled past it.
 *
 * Bounding the height makes it the real scroll container: the rows move under a
 * pinned heading, and the surrounding page stops being metres long.
 */
.list-view-wrapper {
    max-height: calc(100vh - var(--navbar-height, 75px) - 60px);
    overflow-y: auto;
    /* No padding-top. A sticky heading rests at the top of the PADDING box, so
     * any top padding on the scroll container leaves a strip above it that rows
     * scroll up into and show through — the heading looked half-transparent with
     * a stray row above it. The filter row below supplies its own spacing. */
    padding: 0 20px 20px;
}

.applications-list {
    width: 100%;
    /* separate, not collapse. With border-collapse: collapse the table owns the
     * borders and Chrome will not position sticky cells reliably — the heading
     * scrolls away regardless of the sticky declaration. border-spacing: 0 keeps
     * the collapsed appearance. */
    border-collapse: separate;
    border-spacing: 0;
    background-color: var(--bg-primary);
}

.applications-list thead {
    background-color: var(--bg-secondary);
}

/* The header has to stick on the CELLS, not on <thead>.
 *
 * `position: sticky` on thead (or tr) does nothing in Chrome — those are not
 * valid sticky containers for a table — so the heading row scrolled away and a
 * 71-row board became unreadable: no way to tell which column you were looking
 * at without scrolling back to the top.
 *
 * top is the height of .navbar, which is itself sticky at 0, so the heading
 * comes to rest directly beneath it instead of sliding underneath.
 *
 * A background is required: sticky cells are transparent by default and the rows
 * scroll THROUGH them, which reads as the corruption it looks like. The
 * background sits on the cell rather than the row for the same reason.
 */
.applications-list thead th {
    position: sticky;
    /* 0, not the navbar height: the sticky container is .list-view-wrapper, so
     * this offset is measured from the top of that box — which already sits
     * below the navbar. Using the navbar height here pushed the heading 75px
     * down inside its own scroll area and left a gap rows slid through. */
    top: 0;
    z-index: 5;
    background-color: var(--bg-secondary);
}

.applications-list th {
    padding: 12px 16px;
    text-align: left;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--border-color);
}

.applications-list th.sortable {
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
}

.applications-list th.sortable:hover {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

.sort-indicator {
    display: inline-block;
    margin-left: 6px;
    font-size: var(--text-2xs);
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

/* Status + "Awaiting Client" as a predictable stack.
 *
 * align-items: flex-start keeps each badge only as wide as its own text, so they
 * do not stretch to the column width. */
.list-status-stack {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

/* A status label must never break mid-phrase. Once Industry took its share of the
 * width the Status column fell to 144px and "Compliance Review" wrapped inside
 * its own pill, which reads as broken rather than as narrow. */
.list-status-stack > span {
    white-space: nowrap;
}

.applications-list .list-status {
    min-width: 150px;
}

/* Same for the headings: "Locked By" was pushing its sort arrow onto a second
 * line, making the heading row taller than its own cells. */
.applications-list th {
    white-space: nowrap;
}

.applications-list td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    font-size: var(--text-xs);
    color: var(--text-primary);
}

.list-row {
    transition: all 0.2s ease;
}

.list-row:hover {
    background-color: var(--bg-secondary);
}

.list-id {
    font-weight: 600;
    color: var(--accent);
}

.list-name {
    font-weight: 500;
}

.list-type, .list-status {
    text-align: center;
}

.badge-type {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--radius-lg);
    font-size: var(--text-2xs);
    font-weight: 600;
}

.badge-type.individual {
    background-color: var(--ok-wash);
    color: var(--ok-ink);
}

.badge-type.business {
    background-color: var(--accent-wash);
    color: var(--accent-strong);
}

[data-theme="dark"] .badge-type.individual {
    background-color: var(--ok-ink);
    color: var(--ok-wash);
}

[data-theme="dark"] .badge-type.business {
    background-color: var(--accent-strong);
    color: var(--accent-wash);
}

.badge-status {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--radius-lg);
    font-size: var(--text-2xs);
    font-weight: 600;
}

.badge-status.draft {
    background-color: var(--wash);
    color: var(--ink-2);
}

.badge-status.submitted {
    background-color: var(--accent-wash);
    color: var(--accent-strong);
}

.badge-status.awaiting {
    background-color: var(--warn-wash);
    color: var(--warn-ink);
}

.badge-status.compliance {
    background-color: var(--bad-wash);
    color: var(--bad-ink);
}

.badge-status.clarification {
    background-color: var(--accent-wash);
    color: var(--accent-strong);
}

.badge-status.approved {
    background-color: var(--ok-wash);
    color: var(--ok-ink);
}

.badge-status.ops {
    background-color: var(--accent-wash);
    color: var(--accent-strong);
}

.badge-status.completed {
    background-color: var(--wash);
    color: var(--ink-2);
}

[data-theme="dark"] .badge-status {
    opacity: 0.85;
}

.badge-locked-name {
    padding: 4px 8px;
    background-color: var(--warn-wash);
    color: var(--warn-ink);
    border-radius: var(--radius-sm);
    font-size: var(--text-2xs);
    font-weight: 600;
}

[data-theme="dark"] .badge-locked-name {
    background-color: var(--warn-ink);
    color: var(--warn-wash);
}

.list-message {
    text-align: center;
}

.list-message svg {
    width: 16px;
    height: 16px;
    stroke: var(--warn);
}

.list-locked {
    text-align: center;
    color: var(--text-secondary);
}

.dropdown-item.dropdown-logout:hover {
    background-color: var(--bad-wash);
}

[data-theme="dark"] .dropdown-item.dropdown-logout:hover {
    background-color: var(--bad-ink);
}

.dropdown-divider {
    height: 1px;
    background-color: var(--border-color);
    margin: 4px 0;
}

/* Main Content */
.main-content {
    padding: 32px 24px;
    background-color: var(--bg-primary);
}

.main-content.kanban-layout {
    padding: 24px;
}

.content-container {
    max-width: 1200px;
    margin: 0 auto;
}

.content-container h1 {
    font-size: var(--text-2xl);
    margin-bottom: 16px;
    color: var(--text-primary);
}

.content-container p {
    color: var(--text-secondary);
    margin-bottom: 24px;
    line-height: 1.6;
}

.form-section,
.application-card {
    background-color: var(--bg-secondary);
    padding: 24px;
    margin-bottom: 24px;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
}

.form-section h2,
.application-card h2 {
    font-size: var(--text-lg);
    margin-bottom: 12px;
    color: var(--text-primary);
}

.form-section label {
    display: block;
    margin-bottom: 8px;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-primary);
}

.form-section input {
    width: 100%;
    padding: 10px 12px;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: var(--text-sm);
    transition: border-color 0.2s ease;
}

.form-section input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.application-card p {
    font-size: var(--text-sm);
    margin-bottom: 8px;
}

/* Kanban Board */
.kanban-board-wrapper {
    width: 100%;
    height: calc(100vh - 150px);
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: var(--radius);
}

.kanban-board {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(280px, 1fr);
    gap: 20px;
    padding: 8px;
    width: max-content;
    height: 100%;
}

.kanban-column {
    background-color: var(--bg-secondary);
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    max-height: 100%;
    min-width: 280px;
    width: 280px;
    max-width: 280px;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.kanban-column.drag-over {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
    background-color: var(--accent-wash);
}

[data-theme="dark"] .kanban-column.drag-over {
    background-color: rgba(37, 99, 235, 0.08);
}

.kanban-card[draggable="true"] {
    cursor: grab;
}

.kanban-card[draggable="true"]:active {
    cursor: grabbing;
}

.kanban-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 2px solid var(--border-color);
    flex-shrink: 0;
}

.kanban-header h2 {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.card-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
    border-radius: var(--radius-lg);
    font-size: var(--text-xs);
    font-weight: 600;
}

.kanban-cards {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.kanban-card {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 12px;
    cursor: move;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.kanban-card:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.kanban-card.approved {
    background-color: var(--bg-primary);
    border-color: var(--ok);
}

[data-theme="dark"] .kanban-card.approved {
    background-color: var(--bg-primary);
    border-color: var(--ok);
}

.kanban-card.completed {
    background-color: var(--wash);
    border-color: var(--line);
}

[data-theme="dark"] .kanban-card.completed {
    background-color: var(--ink);
    border-color: var(--ink-2);
}

.kanban-card.rejected {
    background-color: var(--bg-primary);
    border-color: var(--bad-wash);
}

[data-theme="dark"] .kanban-card.rejected {
    background-color: var(--bg-primary);
    border-color: var(--bad-ink);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.card-id {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

.card-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-lg);
    font-size: var(--text-2xs);
    font-weight: 600;
    text-transform: uppercase;
}

.badge-individual {
    background-color: var(--ok-wash);
    color: var(--ok-ink);
}

[data-theme="dark"] .badge-individual {
    background-color: var(--ok-ink);
    color: var(--ok-wash);
}

.badge-business {
    background-color: var(--accent-wash);
    color: var(--accent-strong);
}

[data-theme="dark"] .badge-business {
    background-color: var(--accent-strong);
    color: var(--accent-wash);
}

.badge-message {
    background-color: var(--warn-wash);
    color: var(--warn-ink);
}

[data-theme="dark"] .badge-message {
    background-color: var(--warn-ink);
    color: var(--warn-wash);
}

.badge-client-not-responded {
    background-color: var(--ok-wash);
    color: var(--ok-ink);
}

[data-theme="dark"] .badge-client-not-responded {
    background-color: var(--ok-ink);
    color: var(--ok);
}

.card-name {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin: 6px 0;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.card-submitted {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin: 4px 0;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.card-region {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin: 4px 0;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* ===== DETAIL MODAL STYLES ===== */

.detail-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.detail-modal-backdrop.active {
    opacity: 1;
    visibility: visible;
}

.detail-modal-drawer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 90vh;
    background-color: var(--bg-primary);
    border-top: 1px solid var(--border-color);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

.detail-modal-drawer.active {
    transform: translateY(0);
}

.detail-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    min-height: 64px;
    background-color: var(--bg-primary);
    z-index: 10;
}

.detail-modal-title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    flex: 1;
}

.detail-modal-close {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.detail-modal-close:hover {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

.detail-modal-close svg {
    width: 24px;
    height: 24px;
}

.detail-modal-header-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-shrink: 0;
}

/* The one action a drawer offers, in its header. Named for the position rather
   than for a single action: it was .btn-start-processing-header, was used by
   nothing, and a class named after one button cannot honestly style another. */
.btn-header-action {
    padding: 8px 16px;
    background-color: var(--accent);
    color: var(--on-accent);
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    white-space: nowrap;
}

/* The same button in the three other things a stage can ask of a reviewer.
   Accept and decline must not look alike, and a clarification is neither. */
.btn-header-action--ok {
    background-color: var(--ok);
}

.btn-header-action--ok:hover,
.btn-header-action--ok:active {
    background-color: var(--ok-ink, var(--ok));
}

.btn-header-action--danger {
    background-color: var(--bad);
}

.btn-header-action--danger:hover,
.btn-header-action--danger:active {
    background-color: var(--bad-ink, var(--bad));
}

.btn-header-action--warn {
    background-color: var(--warn);
    color: var(--warn-ink, var(--text-primary));
}

.btn-header-action--warn:hover,
.btn-header-action--warn:active {
    background-color: var(--warn);
}

.btn-header-action:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.btn-header-action .btn-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.btn-header-action:hover {
    background-color: var(--accent-strong);
    box-shadow: 0 4px 6px rgba(37, 99, 235, 0.2);
}

.btn-header-action:active {
    background-color: var(--accent-strong);
}

.btn-header-action.processing {
    background-color: var(--ok);
}

.btn-header-action.processing:hover {
    background-color: var(--ok);
}

.actions-note {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    margin-bottom: 16px;
}

.detail-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border-color);
    flex-shrink: 0;
    background-color: var(--bg-primary);
    padding: 0 24px;
    overflow-x: auto;
    overflow-y: hidden;
    z-index: 9;
}

.detail-tab-btn {
    background: none;
    border: none;
    padding: 14px 16px;
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    position: relative;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.detail-tab-btn:hover {
    color: var(--text-primary);
    background-color: rgba(0, 0, 0, 0.02);
}

.detail-tab-btn.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    font-weight: 600;
}

.detail-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    display: flex;
    flex-direction: column;
    z-index: 1;
}

.detail-tab-content {
    display: none;
    width: 100%;
}

.detail-tab-content.active {
    display: block;
}

/* Summary Tab Styles */
.detail-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 20px;
    align-items: start;
}

.summary-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.summary-item label {
    font-size: var(--text-2xs);
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0;
}

.summary-item p {
    font-size: var(--text-xs);
    color: var(--text-primary);
    font-weight: 500;
    line-height: 1.3;
    word-break: break-word;
}

/* Form Tab Styles */
.detail-form {
    max-width: 100%;
}

.form-section {
    margin-bottom: 12px;
    padding: 14px 16px;
    background-color: var(--bg-secondary);
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
}

.form-section h3 {
    font-size: var(--text-2xs);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--input-border);
    border-radius: var(--radius-sm);
    background-color: var(--input-bg);
    color: var(--text-primary);
    font-size: var(--text-xs);
    font-family: inherit;
    transition: all 0.2s ease;
}

.form-group input[readonly],
.form-group textarea[readonly] {
    opacity: 0.7;
    cursor: not-allowed;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
    background-color: var(--bg-primary);
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.document-preview {
    padding: 12px;
    background-color: var(--bg-secondary);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    color: var(--text-secondary);
    text-align: center;
}

/* Action Buttons */
.form-section:last-child {
    margin-bottom: 0;
}

.btn-action {
    display: block;
    width: 100%;
    padding: 12px 16px;
    margin-bottom: 8px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-approve {
    background-color: var(--ok);
    color: white;
}

.btn-approve:hover {
    background-color: var(--ok);
}

.btn-request-clarification {
    background-color: var(--warn);
    color: white;
}

.btn-request-clarification:hover {
    background-color: var(--warn);
}

.btn-reject {
    background-color: var(--bad);
    color: white;
}

.btn-reject:hover {
    background-color: var(--bad);
}

/* History Tab Styles */
.history-timeline {
    position: relative;
    padding-left: 40px;
}

.history-timeline::before {
    content: '';
    position: absolute;
    left: 14px;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: var(--border-color);
}

.history-item {
    position: relative;
    margin-bottom: 28px;
}

.history-marker {
    position: absolute;
    left: -34px;
    top: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: var(--accent);
    border: 3px solid var(--bg-primary);
    box-shadow: 0 0 0 1px var(--border-color);
}

.history-content {
    padding: 14px 16px;
    background-color: var(--bg-secondary);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
}

.history-action {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 6px 0;
}

.history-detail {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* Dark Mode Adjustments */
[data-theme="dark"] .document-preview {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .history-marker {
    border-color: var(--bg-primary);
}

/* Risk Assessment Tab Styles (Onboarding Team Only) */

.risk-assessment {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.risk-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.risk-score-card {
    padding: 16px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    text-align: center;
}

.risk-label {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 8px 0;
}

.risk-tier {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    padding: 8px 0;
}

.risk-tier.low {
    color: var(--ok);
}

.risk-tier.medium {
    color: var(--warn);
}

.risk-tier.high {
    color: var(--bad);
}

.risk-tier.prohibit {
    color: var(--accent);
}

.risk-score {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    padding: 8px 0;
}

.risk-path {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    padding: 8px 0;
}

.risk-factors-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.risk-factor {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background-color: var(--bg-secondary);
    border-left: 4px solid var(--text-secondary);
    border-radius: var(--radius-sm);
    transition: background-color 0.2s ease;
}

.risk-factor:hover {
    background-color: var(--bg-tertiary);
}

.risk-factor.high {
    border-left-color: var(--bad);
    background-color: rgba(239, 68, 68, 0.05);
}

.factor-label {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-primary);
    flex: 1;
}

.factor-points {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-secondary);
    background-color: var(--bg-primary);
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    margin-left: 12px;
}

.risk-note {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    font-style: italic;
    margin-top: 12px;
}

/* Dark mode adjustments */
[data-theme="dark"] .risk-score-card,
[data-theme="dark"] .score-item {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .risk-factor {
    background-color: var(--bg-secondary);
    border-left-color: var(--text-secondary);
}

[data-theme="dark"] .risk-factor.high {
    background-color: rgba(239, 68, 68, 0.1);
    border-left-color: var(--bad);
}

[data-theme="dark"] .factor-points {
    background-color: var(--input-bg);
}
    color: var(--text-secondary);
    margin: 4px 0;
}

.card-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    align-items: center;
}

[data-theme="dark"] .card-icons {
    border-top-color: rgba(255, 255, 255, 0.05);
}

.icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.card-icons .icon-badge + .icon-badge {
    margin-left: 12px;
}

.icon-badge svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
    stroke: currentColor;
}

/* Applicant-type badges — extra right margin separates them from status badges */
.badge-individual {
    background-color: var(--ok-wash);
    color: var(--ok-ink);
}

[data-theme="dark"] .badge-individual {
    background-color: var(--ok-ink);
    color: var(--ok-wash);
}

.badge-business {
    background-color: var(--accent-wash);
    color: var(--accent-strong);
}

[data-theme="dark"] .badge-business {
    background-color: var(--accent-strong);
    color: var(--accent-wash);
}

/* Yellow lock — card being worked on by another user */
.badge-locked {
    background-color: var(--warn-wash);
    color: var(--warn-ink);
    position: relative;
}

[data-theme="dark"] .badge-locked {
    background-color: var(--warn-ink);
    color: var(--warn-wash);
}

/* Green lock — waiting for client response */
.badge-client-lock {
    background-color: var(--ok-wash);
    color: var(--ok-ink);
    position: relative;
}

[data-theme="dark"] .badge-client-lock {
    background-color: var(--ok-ink);
    color: var(--ok-wash);
}

/* Also applied to the old badge-client-not-responded class */
.badge-client-not-responded {
    background-color: var(--ok-wash);
    color: var(--ok-ink);
}

[data-theme="dark"] .badge-client-not-responded {
    background-color: var(--ok-ink);
    color: var(--ok-wash);
}

/* Risk tier badges */
.badge-risk-high {
    background-color: var(--bad-wash);
    color: var(--bad-ink);
}

[data-theme="dark"] .badge-risk-high {
    background-color: var(--bad-ink);
    color: var(--bad-wash);
}

.badge-risk-medium {
    background-color: var(--warn-wash);
    color: var(--bad-ink);
}

[data-theme="dark"] .badge-risk-medium {
    background-color: var(--bad-ink);
    color: var(--warn-wash);
}

.badge-risk-prohibit {
    background-color: var(--ink);
    color: var(--wash);
}

[data-theme="dark"] .badge-risk-prohibit {
    background-color: var(--ink);
    color: var(--line);
}

/* Approval pending badges */
.badge-approval-pending {
    background-color: var(--accent-wash);
    color: var(--accent-strong);
}

[data-theme="dark"] .badge-approval-pending {
    background-color: var(--accent-strong);
    color: var(--accent-wash);
}

/* Rejected badge */
.badge-rejected {
    background-color: var(--bad-wash);
    color: var(--bad-ink);
}

[data-theme="dark"] .badge-rejected {
    background-color: var(--bad-ink);
    color: var(--bad-wash);
}

.badge-locked:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    font-size: var(--text-2xs);
    white-space: normal;
    word-wrap: break-word;
    max-width: 150px;
    margin-bottom: 6px;
    z-index: 1000;
    text-align: center;
}

.kanban-card.locked {
    border-color: var(--warn);
}

[data-theme="dark"] .kanban-card.locked {
    border-color: var(--warn);
}

/* Kanban Scrollbar Styling */
.kanban-board-wrapper::-webkit-scrollbar {
    height: 8px;
}

.kanban-board-wrapper::-webkit-scrollbar-track {
    background: transparent;
}

.kanban-board-wrapper::-webkit-scrollbar-thumb {
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-sm);
}

.kanban-board-wrapper::-webkit-scrollbar-thumb:hover {
    background-color: var(--text-secondary);
}

.kanban-cards::-webkit-scrollbar {
    width: 6px;
}

.kanban-cards::-webkit-scrollbar-track {
    background: transparent;
}

.kanban-cards::-webkit-scrollbar-thumb {
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-sm);
}

.kanban-cards::-webkit-scrollbar-thumb:hover {
    background-color: var(--text-secondary);
}

/* Client Navbar Specific */
.navbar-client .navbar-container {
    justify-content: flex-start;
    gap: 32px;
}

.navbar-client .navbar-left {
    flex: 0 0 auto;
    gap: 16px;
}

.navbar-client .navbar-center {
    flex: 1 1 auto;
    justify-content: flex-start;
}

.navbar-client .navbar-right {
    flex: 0 0 auto;
}

/* Staff Navbar Specific */
.navbar-staff .navbar-left {
    gap: 8px;
}

/* Responsive */
@media (max-width: 768px) {
    .navbar-container {
        gap: 12px;
        padding: 12px 16px;
    }

    .navbar-center {
        order: 3;
        width: 100%;
        margin-top: 12px;
    }

    .navbar-breadcrumb {
        display: none;
    }

    .progress-indicator {
        width: 100%;
    }
}

/* History & Notes Tab Styles */
.history-notes-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    height: 100%;
}

.notes-column {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding-right: 12px;
}

.timeline-column {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding-left: 12px;
    border-left: 1px solid var(--border-color);
}

.notes-section {
    display: flex;
    flex-direction: column;
}

.notes-section h3 {
    margin-top: 0;
    margin-bottom: 16px;
    font-size: var(--text-base);
    font-weight: 600;
}

.note-input-section {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    gap: 10px;
    position: relative;
}

.note-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background-color: var(--input-bg);
    color: var(--text-primary);
    font-family: inherit;
    font-size: var(--text-xs);
    resize: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.note-textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.note-input-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.note-char-count {
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

.btn-add-note {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background-color: var(--accent);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-add-note:hover {
    background-color: var(--accent-strong);
    box-shadow: 0 4px 6px rgba(37, 99, 235, 0.2);
}

.btn-add-note:disabled {
    background-color: var(--border-color);
    cursor: not-allowed;
    box-shadow: none;
}

.btn-add-note svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.mention-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    z-index: 100;
    max-height: 200px;
    overflow-y: auto;
    margin-top: -8px;
}

.mention-item {
    padding: 10px 12px;
    cursor: pointer;
    font-size: var(--text-xs);
    color: var(--text-primary);
    transition: background-color 0.15s ease;
}

.mention-item:hover {
    background-color: var(--bg-secondary);
}

.notes-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.note-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 12px;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.note-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
    gap: 8px;
}

.note-author {
    font-weight: 600;
    font-size: var(--text-xs);
    color: var(--text-primary);
}

.note-timestamp {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    white-space: nowrap;
}

.note-text {
    font-size: var(--text-xs);
    color: var(--text-primary);
    line-height: 1.5;
    word-wrap: break-word;
    white-space: pre-wrap;
}

.note-mention {
    color: var(--accent-strong);
    background-color: var(--accent-wash);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    white-space: nowrap;
}

    .navbar-client .navbar-container {
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .navbar-client .navbar-left {
        order: 1;
    }

    .navbar-client .navbar-center {
        order: 3;
    }

    .navbar-client .navbar-right {
        order: 2;
    }
}

/* ===== START PROCESSING & NEW MODAL FEATURES ===== */

/* Start Processing Container */
.start-processing-container {
    padding: 32px 24px;
    text-align: center;
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
    border-bottom: 1px solid var(--border-color);
}

.start-processing-text {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0 0 16px 0;
}

.btn-start-processing {
    padding: 12px 32px;
    background-color: var(--accent);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: var(--text-sm);
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.btn-start-processing:hover {
    background-color: var(--accent-strong);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.btn-start-processing:active {
    background-color: var(--accent-strong);
}

/* Applicant Information Tab */
.risk-flags-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.risk-flag-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}

.flag-icon {
    font-size: var(--text-lg);
    flex-shrink: 0;
}

.flag-label {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-primary);
    flex: 1;
}

.flag-status {
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 4px 12px;
    background-color: rgba(16, 185, 129, 0.1);
    color: var(--ok);
    border-radius: var(--radius-sm);
}

/* Documents Tab Styles */
.document-checklist {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.checklist-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    transition: background-color 0.2s ease;
}

.checklist-item:hover {
    background-color: var(--bg-tertiary);
}

.checklist-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--accent);
    margin-top: 2px;
    flex-shrink: 0;
}

.checklist-item label {
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    flex: 1;
    line-height: 1.5;
}

.documents-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin: 16px 0;
}

.document-card {
    padding: 16px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    text-align: center;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.document-card:hover {
    border-color: var(--accent);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1);
}

.doc-type-badge {
    display: inline-block;
    padding: 6px 12px;
    background-color: var(--accent);
    color: white;
    border-radius: var(--radius-sm);
    font-size: var(--text-2xs);
    font-weight: 700;
    margin-bottom: 12px;
}

.doc-type-badge.address {
    background-color: var(--ok);
}

.doc-type-badge.tax {
    background-color: var(--bad);
}

.doc-name {
    font-size: var(--text-sm);
    font-weight: 600;
    margin: 8px 0;
    color: var(--text-primary);
}

.doc-date {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin: 4px 0 12px 0;
}

.btn-doc-view {
    padding: 8px 16px;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-doc-view:hover {
    background-color: var(--line);
}

/* Validation Checklist */
.validation-note {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.validation-checklist {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.validation-item {
    padding: 14px 16px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}

.validation-pair {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
    margin-bottom: 12px;
}

.form-data,
.doc-data {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: var(--text-xs);
    line-height: 1.6;
}

.btn-validate {
    padding: 6px 12px;
    background-color: var(--ok);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-validate:hover {
    background-color: var(--ok);
}

/* Clarification Form */
.clarification-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.checkbox-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--accent);
}

.checkbox-item label {
    font-size: var(--text-sm);
    cursor: pointer;
}

textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background-color: var(--input-bg);
    color: var(--text-primary);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    resize: vertical;
}

/* Actions Section */
#actionsSection {
    border-top: 2px solid var(--border-color);
    margin-top: 24px;
    padding-top: 24px;
}

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

.btn-send-clarification {
    background-color: var(--accent);
    color: white;
}

/* ==================== Communication Two-Panel Layout ==================== */
.comm-layout {
    display: flex;
    height: calc(90vh - 175px);
    min-height: 380px;
    overflow: hidden;
}

.comm-thread-list {
    width: 260px;
    min-width: 220px;
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow: hidden;
}

.comm-thread-header {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    background: var(--bg-secondary);
    gap: 8px;
}

.comm-section-label {
    font-size: var(--text-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-secondary);
}

.btn-new-message {
    font-size: var(--text-xs);
    padding: 5px 10px;
    background: var(--accent);
    color: var(--on-accent);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

.btn-new-message:hover { opacity: 0.88; }

.comm-thread-scroll {
    flex: 1;
    overflow-y: auto;
}

.comm-thread-item {
    padding: 11px 14px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background 0.12s;
}

.comm-thread-item:hover { background: var(--bg-secondary); }

.comm-thread-item.comm-active {
    background: rgba(59,130,246,0.07);
    border-left: 3px solid var(--accent);
    padding-left: 11px;
}

.comm-thread-subject {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.comm-thread-meta {
    font-size: var(--text-2xs);
    color: var(--text-muted);
    margin-bottom: 3px;
}

.comm-thread-preview {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.comm-thread-badge {
    display: inline-block;
    font-size: var(--text-2xs);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    text-transform: uppercase;
    float: right;
    margin-left: 6px;
}

.comm-badge-sent     { background: rgba(245,158,11,0.12); color: var(--warn); }
.comm-badge-received { background: rgba(16,185,129,0.12); color: var(--ok); }

/* Right panel */
.comm-view-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.comm-empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    gap: 14px;
    padding: 40px;
    text-align: center;
}

.comm-empty-state p { font-size: var(--text-sm); line-height: 1.65; }

/* Message view */
.comm-view-header {
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    background: var(--bg-secondary);
}

.comm-type-badge {
    display: inline-block;
    font-size: var(--text-2xs);
    font-weight: 600;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    background: rgba(245,158,11,0.12);
    color: var(--warn);
    margin-right: 8px;
}

.comm-view-date { font-size: var(--text-xs); color: var(--text-muted); }

.btn-comm-reply {
    font-size: var(--text-xs);
    padding: 6px 12px;
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
}

.btn-comm-reply:hover { background: var(--bg-tertiary); }

.comm-view-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    font-size: var(--text-sm);
    line-height: 1.65;
    color: var(--text-primary);
    white-space: pre-wrap;
}

.comm-view-items {
    padding: 0 20px 16px;
    border-top: 1px solid var(--border-color);
    padding-top: 14px;
}

.comm-view-items-title {
    font-size: var(--text-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.comm-item-chip {
    display: inline-block;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    padding: 3px 10px;
    border-radius: var(--radius-lg);
    font-size: var(--text-xs);
    color: var(--text-primary);
    margin: 3px 4px 3px 0;
}

/* Compose panel */
.comm-compose-header {
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    background: var(--bg-secondary);
}

.comm-compose-header span {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-primary);
}

.comm-compose-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 2px;
    display: flex;
    align-items: center;
}

.comm-compose-close:hover { color: var(--text-primary); }

.comm-compose-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Chip input */
.comm-chip-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--input-bg);
    min-height: 44px;
    align-items: center;
    cursor: text;
}

.comm-chip-container:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(59,130,246,0.15);
}

.comm-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(59,130,246,0.1);
    border: 1px solid rgba(59,130,246,0.25);
    color: var(--accent-blue);
    padding: 3px 8px;
    border-radius: var(--radius-lg);
    font-size: var(--text-xs);
    font-weight: 500;
}

.comm-chip button {
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    padding: 0;
    line-height: 1;
    font-size: var(--text-base);
    opacity: 0.65;
    margin-left: 2px;
}

.comm-chip button:hover { opacity: 1; }

.comm-chip-input {
    border: none;
    outline: none;
    background: transparent;
    font-size: var(--text-xs);
    color: var(--text-primary);
    flex: 1;
    min-width: 160px;
    padding: 2px 4px;
}

[data-theme="dark"] .comm-thread-item.comm-active {
    background: rgba(59,130,246,0.12);
    border-left-color: var(--accent);
}

/* ===== MISSING MODAL LAYOUT STYLES ===== */

/* Drawer Body - Split Layout Container */
.drawer-body {
    display: flex;
    flex: 1;
    overflow: hidden;
    gap: 0;
    background-color: var(--bg-primary);
    min-height: 0;
}

/* Task Panel - REMOVED (hidden for full-width content) */
.task-panel {
    display: none !important;
}

.task-panel-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    background-color: var(--bg-secondary);
}

.task-panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-primary);
}

.task-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    stroke: currentColor;
    fill: none;
}

.task-panel-subtitle {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    font-weight: 400;
}

.task-list-container {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
}

.task-panel-footer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
    background-color: var(--bg-secondary);
}

.progress-label {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.progress-bar-container {
    width: 100%;
    height: 6px;
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background-color: var(--accent);
    transition: width 0.3s ease;
    border-radius: var(--radius-sm);
}

.progress-text {
    font-size: var(--text-2xs);
    color: var(--text-secondary);
}

/* Main Content Area - Right Content */
.main-content-area {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    min-height: 0;
    background-color: var(--bg-primary);
}

/* SVG sizing in modal - be specific for each element */

/* Close button SVG */
.detail-modal-close svg {
    width: 24px !important;
    height: 24px !important;
    stroke: currentColor !important;
}

/* Task icon SVG - MUST be 18px */
.task-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0;
    min-width: 18px !important;
    min-height: 18px !important;
}

.task-icon svg {
    width: 100% !important;
    height: 100% !important;
}

/* ===== KYC VALIDATION & DOCUMENTS LAYOUT ===== */

.kyc-validation-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Side-by-side form data + uploaded files */
.kyc-validation-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 16px;
    background-color: var(--bg-secondary);
}

.kyc-captured-data {
    flex: 1;
}

.kyc-captured-data h4 {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin: 0 0 12px 0;
    letter-spacing: 0.5px;
}

.kyc-captured-data .data-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
    font-size: var(--text-xs);
}

.kyc-captured-data .data-item:last-child {
    border-bottom: none;
}

.kyc-captured-data .data-label {
    color: var(--text-secondary);
    font-weight: 500;
}

.kyc-captured-data .data-value {
    color: var(--text-primary);
    font-weight: 600;
    text-align: right;
}

.kyc-uploaded-file {
    flex: 1;
}

.kyc-uploaded-file h4 {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin: 0 0 12px 0;
    letter-spacing: 0.5px;
}

.file-info {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.file-icon {
    font-size: var(--text-2xl);
    min-width: 24px;
}

.file-details {
    flex: 1;
    min-width: 0;
}

.file-name {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-primary);
    word-break: break-word;
}

.file-meta {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin-top: 4px;
}

.file-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.file-actions button {
    padding: 6px 12px;
    font-size: var(--text-2xs);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
    transition: background-color 0.15s;
}

.file-actions button:hover {
    background-color: var(--bg-secondary);
}

.validation-status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 8px;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 500;
}

.validation-status.valid {
    background-color: var(--ok-wash);
    color: var(--ok-ink);
}

.validation-status.mismatch {
    background-color: var(--bad-wash);
    color: var(--bad-ink);
}

.validation-status.pending {
    background-color: var(--warn-wash);
    color: var(--warn-ink);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Keyboard access
   ───────────────────────────────────────────────────────────────────────────
   Seven rules above set `outline: none` on focus and replace it with a 1px
   border-colour shift — and two of them (.search-input, .comm-chip-input)
   replace it with nothing at all. That is not a focus indicator: it is a
   colour change of one pixel, on a control that may already be blue.

   So one visible ring for everything, at the end of the file where document
   order lets it win. `!important` because the rules it overrides are class-
   scoped (`.filter-date:focus`) and a bare `:focus-visible` loses on
   specificity; the alternative is editing seven rules and hoping the eighth
   never gets written.

   `:focus-visible`, not `:focus`, so a mouse click on a button does not leave a
   ring behind — which is why those rules removed the outline in the first place.
   ═══════════════════════════════════════════════════════════════════════════ */

:focus-visible {
    outline: 2px solid var(--accent) !important;
    outline-offset: 2px !important;
    border-radius: var(--radius-sm);
}

/* On a dark ground the same blue is too close to the surface it sits on. */
[data-theme="dark"] :focus-visible {
    outline-color: var(--accent) !important;
}

/* Inside a dialog the ring can be clipped by the panel edge; pull it inward. */
.detail-modal-drawer :focus-visible,
.detail-tabs :focus-visible {
    outline-offset: -2px !important;
}

/* ── Skip link ──────────────────────────────────────────────────────────────
   The board sits behind a navbar of twelve controls, so without this every
   keyboard user tabs the whole navbar on every page load. Off-screen until
   focused, rather than display:none, which would take it out of the tab order
   and defeat the point. */

.skip-link {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100000;
    padding: 10px 16px;
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 0 0 6px 0;
    font-size: var(--text-xs);
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-120%);
    transition: transform 0.15s ease;
}

.skip-link:focus {
    transform: translateY(0);
}

/* ── Screen-reader-only text ────────────────────────────────────────────────
   For labels that must be read but not shown. clip-path rather than
   display:none: the latter removes the element from the accessibility tree,
   which is the opposite of what this class is for. */

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ── Reduced motion ─────────────────────────────────────────────────────────
   The drawer slides, toasts slide, and the theme transition runs on every
   element. Honour the OS setting. */

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

/* ── Checklist confirm button ────────────────────────────────────────────────
   This was two inline handlers, onmouseenter and onmouseleave, setting
   this.style.background by hand and guarding on this.disabled. Both branches
   ended up setting the same value once the palette collapsed two near-identical
   blues into one token, so the hover had quietly become a no-op. In CSS it needs
   no guard: :disabled simply does not match :hover here. */

.btn-confirm-advance:hover:not(:disabled) {
    background: var(--accent-strong);
}

/* ── Inline panel buttons ─────────────────────────────────────────────────────
 *
 * .btn-primary and .btn-secondary were used in staff-requirements.js from the day
 * it was written and were defined nowhere, so every control in the requirement
 * review panel rendered as a bare browser button: Re-propose, Release, Accept,
 * Not applicable. Small, but this is the panel Ops works in all day, and an
 * unstyled button reads as an unfinished page.
 *
 * Deliberately not .btn-action, which is display:block, full width and uppercase,
 * for the stacked approve/reject column in the drawer's action panel. These sit
 * inline in a row.
 */
.btn-primary,
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 12px;
    min-height: 32px;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.btn-primary {
    background-color: var(--accent);
    border: 1px solid var(--accent);
    /* white, matching .btn-action and .btn-header-action. The accent is
       chosen for contrast against white text in both themes. */
    color: white;
}

.btn-primary:hover:not(:disabled) {
    background-color: var(--accent-strong);
    border-color: var(--accent-strong);
}

.btn-secondary {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.btn-secondary:hover:not(:disabled) {
    background-color: var(--bg-tertiary);
}

.btn-primary:disabled,
.btn-secondary:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Keyboard focus has to stay visible: these are the panel's only controls. */
.btn-primary:focus-visible,
.btn-secondary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}