/* ===================================
   VANTAGE DASHBOARDS - SHARED STYLES
   These styles apply to all pages, for every tenant
   =================================== */

/* ===================================
   DESIGN TOKENS
   The single source of truth for colour, type, radius and elevation.
   Every value here already existed somewhere in the codebase — this block
   only gives them names, so nothing renders differently for defining them.
   New styles should reference these, never raw hex.
   =================================== */
:root {
    /* Native widgets — scrollbars, checkboxes, dropdowns, text selection — are
       drawn by the browser, not by this stylesheet. Without color-scheme they
       stay light no matter what the tokens say. */
    color-scheme: light;

    /* Brand — these hold their value in both modes; they are the identity */
    --brand-teal: #2C8686;
    --brand-navy: #2F4879;
    --brand-mint: #55BCA1;
    --brand-gradient: linear-gradient(135deg, #2C8686 0%, #2F4879 100%);

    /* Surfaces — what things sit ON */
    --surface-card:     #ffffff;   /* cards, table body, panels */
    --surface-raised:   #f9fafb;   /* headers within a card, subtle lift */
    --surface-sunken:   #f0f0f0;   /* wells, inactive areas */
    --surface-track:    #e0e0e0;   /* meter tracks, dividers with weight */
    --surface-disabled: #cccccc;
    --surface-hover:        rgba(44, 134, 134, 0.05);
    --surface-hover-strong: rgba(44, 134, 134, 0.08);

    /* Badges — deliberately dark text on a pale fill; the brighter status hues
       do not carry enough contrast at this size */
    --badge-ok-bg:    #d4edda;
    --badge-ok-text:  #155724;
    --badge-bad-bg:   #f8d7da;
    --badge-bad-text: #721c24;

    /* Borders */
    --border:        #e0e0e0;
    --border-subtle: #f0f0f0;
    --border-strong: #cbd5e1;

    /* Neutral ramp — replaces the four competing grey scales */
    --n-0:   #ffffff;
    --n-25:  #fafafa;
    --n-50:  #f5f5f5;
    --n-100: #f0f0f0;
    --n-200: #e0e0e0;
    --n-400: #6B7280;
    --n-600: #4B5563;
    --n-800: #1F2937;

    /* Text */
    /* Slate, not neutral grey — the dashboard's original inks (#111827, #1f2937,
       #374151) carry a blue cast, and flattening them to #333 read as washed out. */
    --text-strong: var(--n-800);
    --text-title:  #111827;
    --text-body:   var(--n-600);
    --text-muted:  var(--n-400);
    --text-invert: #ffffff;        /* on brand fills */
    --text-brand:  var(--brand-navy);

    /* Status — always paired with an icon or label, never colour alone */
    --status-ok:   #28a745;
    --status-warn: #ffc107;
    --status-bad:  #DC3545;
    --status-bad-bg:     #fee;
    --status-bad-border: #fcc;
    --status-bad-text:   #c33;

    /* Shape & elevation */
    --radius-sm: 8px;
    --radius:    12px;
    --radius-lg: 16px;
    --shadow-card:  0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lift:  0 20px 60px rgba(0, 0, 0, 0.3);
    --focus-ring:   0 0 0 3px rgba(44, 134, 134, 0.18);

    /* Type — AppleGothic was a Korean face standing in for a geometric sans;
       Futura/Avenir are the right Mac fallbacks for Century Gothic. */
    --font-sans: 'Century Gothic', 'Century Gothic Pro', CenturyGothic,
                 Futura, 'Avenir Next', Avenir, 'Trebuchet MS',
                 system-ui, -apple-system, sans-serif;
}

/* ===================================
   BASE STYLES
   =================================== */
::selection {
    background: rgba(44, 134, 134, 0.28);
}

/* Firefox uses these two; WebKit uses the ::-webkit-scrollbar rules further down */
* {
    scrollbar-color: var(--brand-teal) var(--surface-sunken);
    scrollbar-width: thin;
}

body::-webkit-scrollbar,
.timeline-wrapper::-webkit-scrollbar,
.filter-dropdown-menu::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

body::-webkit-scrollbar-track,
.timeline-wrapper::-webkit-scrollbar-track,
.filter-dropdown-menu::-webkit-scrollbar-track {
    background: var(--surface-sunken);
}

body::-webkit-scrollbar-thumb,
.timeline-wrapper::-webkit-scrollbar-thumb,
.filter-dropdown-menu::-webkit-scrollbar-thumb {
    background: var(--brand-teal);
    border-radius: 5px;
}

body::-webkit-scrollbar-thumb:hover,
.timeline-wrapper::-webkit-scrollbar-thumb:hover,
.filter-dropdown-menu::-webkit-scrollbar-thumb:hover {
    background: var(--brand-navy);
}

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

body {
    font-family: var(--font-sans);
    background: var(--brand-gradient);
    min-height: 100vh;
    padding: 20px;
}

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


/* ===================================
   HEADER SECTION
   =================================== */
.header {
    background: var(--surface-card);
    padding: 25px 30px 15px 30px;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

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

.header-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.header-right {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* The logo is the tallest item in .header-top, so its box height sets the header
   height. Scaling with transform renders it larger while the layout box stays
   62px — the header does not grow. The extra ~14px each side falls into the
   header's existing 25px/30px padding, so nothing clips. */
.logo-small {
    width: 62px;
    height: 62px;
    object-fit: contain;
    transform: scale(1.2);
    transform-origin: center;
    margin-right: 8px;
}

.title-section h1 {
    color: var(--text-brand);
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 5px;
}

.count {
    color: var(--text-body);
    font-size: 14px;
    font-weight: 400;
}

.count-number {
    font-weight: 600;
    color: var(--brand-teal);
}


/* ===================================
   TAB NAVIGATION (Pill Button Style)
   =================================== */
.tabs {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 15px 0;
    margin-bottom: 20px;
}

.tab {
    padding: 10px 28px;
    background: var(--surface-card);
    border: 2px solid var(--border);
    border-radius: 50px;
    color: var(--text-body);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: var(--font-sans);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    min-width: 140px;
}

.tab:hover {
    border-color: var(--brand-teal);
    background: var(--surface-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.tab.active {
    background: linear-gradient(135deg, var(--brand-teal) 0%, var(--brand-navy) 100%);
    color: var(--text-invert);
    border: 2px solid var(--surface-card);
    font-weight: 600;
    box-shadow: 0 6px 12px rgba(44, 134, 134, 0.4), inset 0 1px 3px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

.tab.active:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(44, 134, 134, 0.4);
}


/* ===================================
   BUTTONS (Refresh, Export, Logout)
   =================================== */
.btn {
    padding: 10px 20px;
    color: var(--text-invert);
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    font-family: var(--font-sans);
}

.refresh-btn {
    background: #FFA500;
}

.refresh-btn:hover {
    background: #FF8C00;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.refresh-btn:disabled {
    background: var(--surface-disabled);
    cursor: not-allowed;
    transform: none;
}

.export-btn {
    background: var(--brand-mint);
}

.export-btn:hover {
    background: #4AAA90;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.export-btn:active, .refresh-btn:active {
    transform: translateY(0);
}

.logout-btn {
    padding: 10px 20px;
    background: linear-gradient(135deg, var(--brand-teal) 0%, var(--brand-navy) 100%);
    color: var(--text-invert);
    text-decoration: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: inline-block;
}

.logout-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}


/* ===================================
   LOADING SCREEN
   =================================== */
#loading {
    text-align: center;
    padding: 100px 50px;
    background: var(--surface-card);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    max-width: 500px;
    margin: 100px auto;
}

.pulse-logo {
    width: 100px;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { 
        opacity: 1; 
        transform: scale(1); 
    }
    50% { 
        opacity: 0.75; 
        transform: scale(1.05); 
    }
}

#loading p {
    color: var(--text-brand);
    margin-top: 25px;
    font-size: 18px;
    font-weight: 500;
}

#loading .loading-subtext {
    color: var(--text-muted);
    font-size: 14px;
    margin-top: 10px;
}


/* ===================================
   CONTENT VISIBILITY
   =================================== */
#content {
    display: none;
}


/* ===================================
   FOOTER
   =================================== */
.footer {
    text-align: center;
    margin-top: 20px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
}


/* ===================================
   EMPTY STATE
   =================================== */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.empty-state-icon {
    font-size: 48px;
    margin-bottom: 20px;
    opacity: 0.3;
}


/* ===================================
   CONTENT LOADING STATE (inline, not full page)
   =================================== */
.content-loading {
    text-align: center;
    padding: 80px 20px;
    background: var(--surface-card);
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.content-loading .spinner {
    width: 50px;
    height: 50px;
    margin: 0 auto 20px;
    border: 4px solid var(--border-subtle);
    border-top: 4px solid var(--brand-teal);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.content-loading p {
    color: var(--text-brand);
    font-size: 16px;
    font-weight: 500;
}


/* ===================================
   TABLE CARD (Dashboard specific but structure is shared)
   =================================== */
.table-card {
    background: var(--surface-card);
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin-top: 0;
}

.table-container {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 1400px;
}

thead {
    background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-teal) 100%);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

th {
    color: var(--text-invert);
    padding: 16px 14px;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 10;
}

th.sortable {
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease;
    position: relative;
}

th.sortable:hover {
    background: rgba(255, 255, 255, 0.1);
}

th.sortable .sort-indicator {
    margin-left: 6px;
    font-size: 10px;
    opacity: 0.4;
}

th.sortable .sort-indicator::after {
    content: '⇅';
}

th.sort-asc .sort-indicator::after {
    content: '▲';
    opacity: 1;
}

th.sort-desc .sort-indicator::after {
    content: '▼';
    opacity: 1;
}

tbody tr {
    border-bottom: 1px solid var(--border-subtle);
    transition: all 0.2s ease;
}

tbody tr:hover {
    background: linear-gradient(90deg, rgba(85, 188, 161, 0.05) 0%, var(--surface-hover) 100%);
}

tbody tr:last-child {
    border-bottom: none;
}

td {
    padding: 14px;
    font-size: 13px;
    color: var(--text-strong);
}

td:first-child {
    font-weight: 600;
    color: var(--text-brand);
}


/* ===================================
   CHECKBOX STYLING (for status indicators)
   =================================== */
.checkbox-yes {
    color: var(--status-ok);
    font-weight: 600;
}

.checkbox-no {
    color: var(--status-bad);
    font-weight: 600;
}


/* ===================================
   SCROLLBAR STYLING
   =================================== */
.table-container::-webkit-scrollbar {
    height: 8px;
}

.table-container::-webkit-scrollbar-track {
    background: var(--surface-sunken);
}

.table-container::-webkit-scrollbar-thumb {
    background: var(--brand-teal);
    border-radius: 4px;
}

.table-container::-webkit-scrollbar-thumb:hover {
    background: var(--brand-navy);
}


/* ===================================
   RESPONSIVE DESIGN
   =================================== */
@media (max-width: 768px) {
    .header-top {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    .header-left {
        flex-direction: column;
    }
    
    .header-right {
        flex-direction: column;
        width: 100%;
    }
    
    .btn, .logout-btn {
        width: 100%;
    }
    
    .title-section h1 {
        font-size: 22px;
    }
    
    .tabs {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .tab {
        min-width: 140px;
    }
}


/* ===================================
   UTILITY CLASSES
   =================================== */
.view-container {
    display: none;
}

.view-container.active {
    display: block;
}


/* ===================================
   TIMELINE-SPECIFIC STYLES
   =================================== */
.legend {
    background: var(--surface-card);
    padding: 20px 25px;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    display: flex;
    gap: 30px;
    align-items: center;
    flex-wrap: wrap;
}

.legend-title {
    font-weight: 600;
    color: var(--text-brand);
    font-size: 14px;
    margin-right: 10px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-body);
}

.legend-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
}

.legend-dot.completed {
    background: var(--status-ok);
}

.legend-dot.scheduled {
    background: var(--status-warn);
}

.legend-dot.pending {
    background: var(--surface-disabled);
}

.legend-line {
    width: 30px;
    height: 3px;
    background: var(--status-bad);
}

.filters {
    background: var(--surface-card);
    padding: 20px 25px;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-label {
    font-size: 13px;
    color: var(--text-body);
    font-weight: 500;
}

.filter-select {
    padding: 8px 12px;
    border: 2px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    background: var(--surface-card);
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: var(--font-sans);
}

.filter-select:focus {
    outline: none;
    border-color: var(--brand-teal);
}

.search-input {
    padding: 8px 12px;
    border: 2px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    width: 250px;
    font-family: var(--font-sans);
}

.search-input:focus {
    outline: none;
    border-color: var(--brand-teal);
}

.timeline-card {
    background: var(--surface-card);
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 20px;
    overflow-x: auto;
}

.timeline-wrapper {
    position: relative;
    min-width: 1400px;
}

.date-axis-wrapper {
    display: flex;
    border-bottom: 2px solid var(--brand-navy);
    padding: 15px 0 10px 0;
    margin-bottom: 20px;
}

.date-axis-spacer {
    width: 250px;
    flex-shrink: 0;
}

.date-axis-timeline {
    flex: 1;
    position: relative;
    height: 50px;
}

.date-marker {
    position: absolute;
    text-align: center;
    transform: translateX(-50%);
}

.date-label {
    font-size: 11px;
    color: var(--text-brand);
    font-weight: 600;
    text-transform: uppercase;
}

.date-day {
    font-size: 13px;
    color: var(--text-body);
    margin-top: 3px;
}

.timeline-grid {
    position: relative;
}

.today-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--status-bad);
    z-index: 50;
    box-shadow: 0 0 8px rgba(255, 68, 68, 0.4);
    transform: translateX(-1.5px);
}

.today-label {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--status-bad);
    color: var(--text-invert);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(255, 68, 68, 0.3);
}

.timeline-row {
    display: flex;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid var(--border-subtle);
    position: relative;
    min-height: 80px;
}

.timeline-row:hover {
    background: linear-gradient(90deg, rgba(85, 188, 161, 0.03) 0%, rgba(44, 134, 134, 0.03) 100%);
}

.timeline-row:last-child {
    border-bottom: none;
}

.participant-info {
    width: 250px;
    padding-right: 20px;
    flex-shrink: 0;
}

.participant-name {
    font-weight: 600;
    color: var(--text-brand);
    font-size: 14px;
    margin-bottom: 4px;
}

.participant-bu {
    font-size: 11px;
    color: var(--text-body);
    margin-bottom: 3px;
}

.participant-assessor {
    font-size: 10px;
    color: var(--text-muted);
}

.test-status {
    display: flex;
    gap: 4px;
    margin-top: 5px;
}

.test-badge {
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 600;
}

.test-badge.completed {
    background: var(--badge-ok-bg);
    color: var(--badge-ok-text);
}

.test-badge.pending {
    background: var(--badge-bad-bg);
    color: var(--badge-bad-text);
}

.timeline-track {
    flex: 1;
    position: relative;
    height: 40px;
    display: flex;
    align-items: center;
}

.timeline-milestone {
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 3px solid var(--surface-card);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    z-index: 10;
    transform: translateX(-50%);
}

.timeline-milestone:hover {
    transform: translateX(-50%) scale(1.3);
    z-index: 20;
}

.timeline-milestone.completed {
    background: var(--status-ok);
}

.timeline-milestone.scheduled {
    background: var(--status-warn);
}

.timeline-milestone.pending {
    background: var(--surface-disabled);
}

.milestone-tooltip {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: var(--text-invert);
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 30;
}

.timeline-milestone:hover .milestone-tooltip {
    opacity: 1;
}

.milestone-connector {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg, var(--status-ok), var(--brand-teal));
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.timeline-card::-webkit-scrollbar {
    height: 10px;
}

.timeline-card::-webkit-scrollbar-track {
    background: var(--surface-sunken);
}

.timeline-card::-webkit-scrollbar-thumb {
    background: var(--brand-teal);
    border-radius: 5px;
}

.timeline-card::-webkit-scrollbar-thumb:hover {
    background: var(--brand-navy);
}
/* ===================================
   TABLE VIEW FILTERS - COMPACT DROPDOWN
   =================================== */
.table-filters-compact {
    background: var(--surface-card);
    border-radius: 12px;
    padding: 16px 24px;
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.name-search-container {
    flex-shrink: 0;
}

.name-search-input {
    font-family: var(--font-sans);
    /* the placeholder measures ~243px including the icon gutter and border */
    min-width: 270px;
    padding: 8px 14px 8px 36px;
    border: 2px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    color: var(--text-strong);
    width: 220px;
    transition: all 0.2s ease;
    background: var(--surface-raised) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 12px center;
}

.name-search-input:focus {
    outline: none;
    border-color: var(--brand-teal);
    background-color: var(--surface-card);
    box-shadow: 0 0 0 3px rgba(44, 134, 134, 0.1);
}

.name-search-input::placeholder {
    color: #9ca3af;
}

/* ===================================
   CONFIG-DRIVEN FILTER BAR
   Tenants that declare `filters` in companies.json render options inline using
   the same checkbox items and dividers Boeing's bar uses, so the two dashboards
   look like siblings. Only the dropdown type-ahead is new here.
   =================================== */

/* Type-ahead inside a long dropdown narrows the options, not the rows. */
.dropdown-search {
    margin: 8px 8px 0;
    padding: 7px 10px;
    width: calc(100% - 16px);
    border: 2px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    font-family: var(--font-sans);
    color: var(--text-strong);
    background: var(--surface-raised);
}

.dropdown-search:focus {
    outline: none;
    border-color: var(--brand-teal);
    background: var(--surface-card);
}

.dropdown-search::placeholder {
    color: #9ca3af;
}

/* Boeing lists its inline options directly in the flex row; here they are built
   into a host element, so that host carries the same spacing. */
.inline-filter-options {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

/* Boeing's bar holds three controls and never needs to wrap, so the shared rule
   is nowrap. This one holds six, so it wraps and centres each line. */
#genericFilterBar {
    flex-wrap: wrap;
    gap: 10px;
}

/* Sizing matches Boeing's bar. The swap below is what keeps this on one line,
   so nothing here needs to be shrunk to buy width. */
#genericFilterBar .inline-filter-options {
    gap: 12px;
}

#genericFilterBar .filter-inline-groups {
    gap: 12px 20px;
}

/* Boeing's 200px floor suits two buttons carrying "(9 selected)"; five sit here,
   so they get a smaller floor but still a comfortable one. */
/* Boeing's button reserves 200px and stretches its count to push the arrow to
   the far edge, which suits two buttons on a wide bar. Five sit here, so they
   size to their own label and the arrow follows the text instead. */
#genericFilterBar .filter-dropdown-button {
    min-width: 0;
    padding: 9px 14px;
    gap: 7px;
}

#genericFilterBar .filter-dropdown-count {
    flex: 0 0 auto;
    min-width: 18px;
    padding: 1px 6px;
    border-radius: 9px;
    background: var(--brand-teal);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

/* an unselected filter shows no count at all, so the button keeps its shape */
#genericFilterBar .filter-dropdown-count:empty {
    display: none;
}

/* Rather than one all-or-nothing switch, the bar gives up its inline option
   lists one at a time as the window narrows, so it uses whatever room there is
   and still never wraps. Widths measured against this tenant's own labels:

       Purpose and Type both inline    needs 1831px
       Purpose inline, Type collapsed  needs 1404px
       both collapsed to dropdowns     needs 1091px

   Each threshold sits clear of its measurement, because font metrics differ
   between machines and the exact edge is not worth defending. */
#genericFilterBar .inline-fallback {
    display: none;
}

/* Type carries the wider list, so it is the first to collapse. */
@media (max-width: 1839px) {
    #genericFilterBar .filter-inline-group[data-filter-key="assessment_type"] {
        display: none;
    }

    #genericFilterBar .inline-fallback[data-filter-key="assessment_type"] {
        display: block;
    }
}

@media (max-width: 1419px) {
    #genericFilterBar .filter-inline-groups {
        display: none;
    }

    #genericFilterBar .inline-fallback {
        display: block;
    }
}

#genericFilterBar .name-search-input {
    min-width: 0;
    width: 240px;
}

.filter-inline-groups {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px 24px;
}

/* A dropdown at the right end of the bar would open past the window edge;
   toggleGenericDropdown() measures and adds this. */
#genericFilterBar .filter-dropdown-menu.align-right {
    left: auto;
    right: 0;
}


.filter-divider-vertical {
    width: 1px;
    height: 40px;
    background: var(--surface-track);
}

.test-filters-inline,
.filter-inline-group {
    display: flex;
    gap: 16px;
    align-items: center;
}

.test-filters-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-body);
}

.test-filter-item {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 6px;
    transition: all 0.2s ease;
    border: 2px solid transparent;
    background: var(--surface-raised);
}

.test-filter-item:hover {
    background: linear-gradient(90deg, rgba(85, 188, 161, 0.08) 0%, var(--surface-hover-strong) 100%);
    border-color: rgba(44, 134, 134, 0.2);
}

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

.test-filter-item span {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-strong);
    user-select: none;
}

.filter-dropdown-container {
    position: relative;
}

.filter-dropdown-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--surface-card);
    border: 2px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: var(--font-sans);
    min-width: 200px;
}

.filter-dropdown-button:hover {
    border-color: var(--brand-teal);
    background: var(--surface-hover);
}

.filter-dropdown-label {
    font-weight: 600;
    color: var(--text-brand);
}

.filter-dropdown-count {
    font-size: 12px;
    color: var(--text-body);
    flex: 1;
}

.filter-dropdown-arrow {
    font-size: 10px;
    color: var(--text-body);
    transition: transform 0.3s ease;
}

.filter-dropdown-menu.show .filter-dropdown-arrow {
    transform: rotate(180deg);
}

.filter-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: var(--surface-card);
    border: 2px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    min-width: 280px;
    max-width: 320px;
    z-index: 1000;
    display: none;
}

.filter-dropdown-menu.show {
    display: block;
}

.filter-dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 2px solid var(--border);
    background: var(--surface-raised);
    border-radius: 6px 6px 0 0;
}

.filter-dropdown-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-strong);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-clear-inline {
    background: none;
    border: none;
    color: #ef4444;
    font-size: 12px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
    font-family: var(--font-sans);
    font-weight: 600;
}

.filter-clear-inline:hover {
    background: var(--status-bad-bg);
    color: #dc2626;
}

.filter-dropdown-options {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 300px;
    overflow-y: auto;
    padding: 8px;
}

.filter-dropdown-options::-webkit-scrollbar {
    width: 6px;
}

.filter-dropdown-options::-webkit-scrollbar-track {
    background: var(--surface-sunken);
    border-radius: 10px;
}

.filter-dropdown-options::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

.filter-dropdown-options::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.filter-checkbox-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    transition: all 0.2s ease;
    cursor: pointer;
    border: 1px solid transparent;
}

.filter-checkbox-item:hover {
    background: linear-gradient(90deg, rgba(85, 188, 161, 0.08) 0%, var(--surface-hover-strong) 100%);
    border-color: rgba(44, 134, 134, 0.2);
}

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

.filter-checkbox-item label {
    font-size: 13px;
    color: var(--text-strong);
    cursor: pointer;
    flex: 1;
    user-select: none;
    font-weight: 500;
}

.filter-checkbox-item .filter-count {
    font-size: 11px;
    color: var(--text-body);
    background: var(--surface-sunken);
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 700;
    min-width: 28px;
    text-align: center;
    flex-shrink: 0;
}
/* ===================================
   ANIMATIONS
   =================================== */

/* Smooth dropdown arrow rotation */
.filter-dropdown-button .filter-dropdown-arrow {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.filter-dropdown-menu.show + .filter-dropdown-button .filter-dropdown-arrow,
.filter-dropdown-container:has(.filter-dropdown-menu.show) .filter-dropdown-arrow {
    transform: rotate(180deg);
}

/* Dropdown slide and fade */
.filter-dropdown-menu {
    transform-origin: top;
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

.filter-dropdown-menu:not(.show) {
    opacity: 0;
    transform: translateY(-10px) scaleY(0.95);
    pointer-events: none;
}

.filter-dropdown-menu.show {
    opacity: 1;
    transform: translateY(0) scaleY(1);
    animation: dropdown-open 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes dropdown-open {
    from {
        opacity: 0;
        transform: translateY(-10px) scaleY(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scaleY(1);
    }
}

/* Checkbox animations */
.filter-checkbox-item input[type="checkbox"],
.test-filter-item input[type="checkbox"] {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.filter-checkbox-item input[type="checkbox"]:checked,
.test-filter-item input[type="checkbox"]:checked {
    animation: checkbox-pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes checkbox-pop {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}

/* Table row animations */
tbody tr {
    animation: fade-slide-in 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

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

tbody tr.fade-out {
    animation: fade-slide-out 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

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

/* Smooth hover transitions */
.filter-checkbox-item,
.test-filter-item {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.filter-dropdown-button {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ============================================
   SUBITEM (RATER PANEL) VIEW
   ============================================ */

.rater-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.rater-toggle:hover .rater-caret { border-left-color: var(--brand-teal); }
.rater-toggle:focus-visible { outline: 2px solid var(--brand-teal); outline-offset: 2px; border-radius: 3px; }

.rater-caret {
    flex: 0 0 auto;
    width: 0;
    height: 0;
    border-left: 5px solid var(--text-muted);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform 0.15s ease;
}

tr.rater-open .rater-caret { transform: rotate(90deg); }

.rater-meter { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }

.rater-meter-track {
    width: 84px;
    height: 7px;
    background: var(--surface-track);
    border-radius: 4px;
    overflow: hidden;
}

.rater-meter-fill {
    display: block;
    height: 100%;
    background: var(--brand-teal);
    border-radius: 0 4px 4px 0;
    transition: width 0.3s ease;
}

.rater-meter-num { font-variant-numeric: tabular-nums; font-size: 13px; }
.rater-meter-drop { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.rater-none { color: var(--text-muted); font-style: italic; font-size: 13px; }

.rater-panel-row > td {
    padding: 0 !important;
    background: var(--rater-panel-bg, rgba(17, 24, 39, 0.03));
    box-shadow: inset 0 1px 0 var(--border-subtle), inset 0 -1px 0 var(--border-subtle);
}

/* The panel spans the whole table, so lay the relationship groups out as
   columns rather than stacking them - otherwise each rater's name, status and
   date sit at opposite ends of a very wide row. */
.rater-panel {
    padding: 18px 22px 20px 36px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
    align-items: start;
}

/* Each group is its own card. A rule between columns cannot work here: auto-fit
   means the column count changes with width, and CSS has no way to target
   "first in row" - so the separation is carried by the card itself. */
.rater-group {
    min-width: 0;
    padding: 12px 14px 10px;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
}

.rater-group-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.rater-group-count {
    margin-left: auto;
    flex: 0 0 auto;
    background: var(--surface-sunken);
    border-radius: 9px;
    padding: 1px 7px;
    font-size: 10px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Fixed columns, not flex: the status and date columns must line up down the
   whole group whatever each row contains. With flex they shifted per row, so a
   missing date or a longer status pulled everything out of alignment. */
.rater-line {
    display: grid;
    /* 110px fits the longest label, "Not scheduled", without ellipsing. */
    grid-template-columns: minmax(0, 1fr) 110px 74px;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: 13px;
    line-height: 1.35;
}

.rater-line + .rater-line { border-top: 1px solid var(--border-subtle); }

.rater-who {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-strong);
}

.rater-when {
    color: var(--text-muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-align: right;
}

/* Status reads as a pill so it separates from the name at a glance. The label
   carries the meaning; colour only reinforces it. */
.rater-chip {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    padding: 2px 8px;
    border-radius: 11px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
    background: var(--surface-sunken);
    color: var(--text-body);
}

.rater-chip-good {
    background: var(--badge-ok-bg);
    color: var(--badge-ok-text);
}

.rater-chip-progress {
    background: var(--chip-progress-bg, rgba(255, 193, 7, 0.16));
    color: var(--chip-progress-text, #8a6100);
}

.rater-chip-critical {
    background: var(--badge-bad-bg);
    color: var(--badge-bad-text);
}

.rater-chip-pending { color: var(--text-muted); }

@media (max-width: 720px) {
    .rater-line { grid-template-columns: 1fr; gap: 2px; padding: 8px 0; }
    .rater-meter-track { width: 56px; }
}

/* ===================================
   LOGIN PAGE
   Scoped to .login-body so the dark-mode block below can never reach the
   dashboards, which are still on hardcoded colours.
   =================================== */

.login-body {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px;
    /* Brand stops on an oversized canvas, travelling both axes so the movement
       reads as drift rather than a slow fade. */
    background: linear-gradient(-45deg,
        var(--brand-teal), #35A596, var(--brand-navy), #1D5F7F, #24666E, #3A5F9C);
    background-size: 400% 400%;
    /* linear, not ease-in-out — easing made it visibly speed up and slow down. */
    animation: login-drift 70s linear infinite;
}

@keyframes login-drift {
    0%   { background-position:   0% 50%; }
    25%  { background-position:  50% 100%; }
    50%  { background-position: 100% 50%; }
    75%  { background-position:  50%  0%; }
    100% { background-position:   0% 50%; }
}

/* Soft light from above, so the moving field has depth rather than reading flat. */
.login-body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(85% 65% at 50% -5%, rgba(255, 255, 255, 0.13), transparent 62%);
}

.login-card {
    position: relative;
    width: 100%;
    max-width: 476px;
    padding: 54px 50px 40px;
    border-radius: 22px;
    background: var(--login-card-bg, rgba(255, 255, 255, 0.97));
    border: 1px solid var(--login-card-border, rgba(255, 255, 255, 0.7));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow:
        0 28px 64px rgba(0, 0, 0, 0.30),
        0 2px 10px rgba(0, 0, 0, 0.10);
    animation: login-rise 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes login-rise {
    from { opacity: 0; transform: translateY(20px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Brand rings, cropped from the hi-res lockup at 512px — sizes freely without
   softening, and natively transparent so it sits on any surface. */
.login-logo {
    display: block;
    width: 104px;
    height: 104px;
    margin: 0 auto 24px;
    object-fit: contain;
    filter: var(--login-logo-filter, none);
}

.login-title {
    color: var(--login-title, var(--brand-navy));
    text-align: center;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -0.015em;
    margin-bottom: 10px;
}

.login-tagline {
    text-align: center;
    color: var(--login-tagline, #6f6f68);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    margin-bottom: 0;
}

/* Hairline between the identity block and the form. Carries the gap itself, so
   the spacing holds whether or not a tagline is configured. */
.login-divide {
    height: 1px;
    background: var(--login-divider, #efefe9);
    margin: 26px 0;
}

.login-label {
    display: block;
    color: var(--login-label, #55554f);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 9px;
}

.login-input {
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid var(--login-input-border, #e4e4de);
    border-radius: 10px;
    font-size: 15px;
    font-family: var(--font-sans);
    background: var(--login-input-bg, #fbfbf9);
    color: var(--login-input-text, var(--text-strong));
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

/* Wrapper so the reveal button can sit inside the field. */
.login-field { position: relative; }
.login-field .login-input { padding-right: 62px; }

.login-reveal {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    padding: 7px 11px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--login-reveal, #8b8b84);
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.login-reveal:hover {
    color: var(--brand-teal);
    background: var(--login-reveal-hover, rgba(44, 134, 134, 0.08));
}

.login-reveal:focus-visible {
    outline: none;
    color: var(--brand-teal);
    box-shadow: var(--focus-ring);
}

.login-input::placeholder { color: var(--login-placeholder, #b4b4ad); }

.login-input:focus {
    outline: none;
    border-color: var(--brand-teal);
    background: var(--login-input-bg-focus, #ffffff);
    box-shadow: var(--focus-ring);
}

.login-button {
    width: 100%;
    margin-top: 22px;
    padding: 14px;
    background: var(--brand-gradient);
    background-size: 160% 160%;
    color: var(--text-invert);
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.03em;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.22s ease, background-position 0.5s ease;
    box-shadow: 0 6px 18px rgba(44, 134, 134, 0.32);
}

.login-button:hover {
    transform: translateY(-1px);
    background-position: 100% 0%;
    box-shadow: 0 10px 26px rgba(44, 134, 134, 0.40);
}

.login-button:active { transform: translateY(0); }

.login-button:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring), 0 6px 18px rgba(44, 134, 134, 0.32);
}

.login-error {
    background: var(--login-error-bg, #fdecec);
    color: var(--login-error-text, #b3333a);
    border: 1px solid var(--login-error-border, #f6cfd0);
    border-radius: 10px;
    text-align: center;
    padding: 12px 14px;
    margin-bottom: 22px;
    font-size: 13px;
    animation: login-shake 0.45s ease;
}

@keyframes login-shake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-7px); }
    75%      { transform: translateX(7px); }
}

.login-footer {
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid var(--login-divider, #efefe9);
    text-align: center;
    color: var(--login-footer, #a8a8a1);
    font-size: 11px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

/* --- Dark mode: follows the operating system setting --- */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .login-body {
        color-scheme: dark;

        /* Six stops, matching the light gradient's structure so the drift has the
           same variety — the same hues, stepped down for a dark surface. */
        background: linear-gradient(-45deg,
            #17494A, #1E6259, #1B2C49, #123F52, #144043, #233C63);
        background-size: 400% 400%;
    }
    html:not([data-theme="light"]) .login-body::before {

        background: radial-gradient(85% 65% at 50% -5%, rgba(120, 220, 210, 0.10), transparent 62%);
    }
    html:not([data-theme="light"]) .login-card {

        --login-card-bg: rgba(23, 28, 38, 0.86);
        --login-card-border: rgba(255, 255, 255, 0.10);
        /* Gentle lift so the navy ring doesn't sit dark-on-dark. */
        --login-logo-filter: brightness(1.22);
        --login-title: #f3f4f2;
        --login-tagline: #8fa0a8;
        --login-label: #9fb0b6;
        --login-input-border: rgba(255, 255, 255, 0.14);
        --login-input-bg: rgba(255, 255, 255, 0.06);
        --login-input-bg-focus: rgba(255, 255, 255, 0.10);
        --login-input-text: #f3f4f2;
        --login-placeholder: #6f7f86;
        --login-divider: rgba(255, 255, 255, 0.10);
        --login-footer: #74858c;
        --login-reveal: #8b9ba2;
        --login-reveal-hover: rgba(86, 189, 162, 0.14);
        --login-error-bg: rgba(255, 68, 68, 0.13);
        --login-error-border: rgba(255, 68, 68, 0.32);
        --login-error-text: #ff9a9a;
        box-shadow:
            0 28px 70px rgba(0, 0, 0, 0.55),
            0 2px 10px rgba(0, 0, 0, 0.30);
    }
}

/* Explicit-theme scope: mirrors the block above so a stored preference can
   override the OS setting in either direction. Unused until something sets
   data-theme on <html>; kept so adding a preference control is one step. */
html[data-theme="dark"] .login-body {
        color-scheme: dark;

        /* Six stops, matching the light gradient's structure so the drift has the
           same variety — the same hues, stepped down for a dark surface. */
        background: linear-gradient(-45deg,
            #17494A, #1E6259, #1B2C49, #123F52, #144043, #233C63);
        background-size: 400% 400%;
}
html[data-theme="dark"] .login-body::before {

        background: radial-gradient(85% 65% at 50% -5%, rgba(120, 220, 210, 0.10), transparent 62%);
}
html[data-theme="dark"] .login-card {

        --login-card-bg: rgba(23, 28, 38, 0.86);
        --login-card-border: rgba(255, 255, 255, 0.10);
        /* Gentle lift so the navy ring doesn't sit dark-on-dark. */
        --login-logo-filter: brightness(1.22);
        --login-title: #f3f4f2;
        --login-tagline: #8fa0a8;
        --login-label: #9fb0b6;
        --login-input-border: rgba(255, 255, 255, 0.14);
        --login-input-bg: rgba(255, 255, 255, 0.06);
        --login-input-bg-focus: rgba(255, 255, 255, 0.10);
        --login-input-text: #f3f4f2;
        --login-placeholder: #6f7f86;
        --login-divider: rgba(255, 255, 255, 0.10);
        --login-footer: #74858c;
        --login-reveal: #8b9ba2;
        --login-reveal-hover: rgba(86, 189, 162, 0.14);
        --login-error-bg: rgba(255, 68, 68, 0.13);
        --login-error-border: rgba(255, 68, 68, 0.32);
        --login-error-text: #ff9a9a;
        box-shadow:
            0 28px 70px rgba(0, 0, 0, 0.55),
            0 2px 10px rgba(0, 0, 0, 0.30);
}

@media (max-width: 480px) {
    .login-card { padding: 34px 26px 28px; border-radius: 16px; }
    .login-title { font-size: 21px; }
    .login-logo { width: 64px; height: 64px; }
}

@media (prefers-reduced-motion: reduce) {
    .login-body { animation: none; }
    .login-card, .login-error { animation: none; }
    .login-button:hover { transform: none; }
}

/* ===================================
   LOADING MARK
   The rings mark, rotating. Each ring on its own is rotationally symmetric, so
   spinning them separately would look static — the two are offset from each
   other, which is what makes rotating the whole composition read as movement.
   =================================== */

.loader-mark {
    position: relative;
    width: 84px;
    height: 84px;
    margin: 0 auto;
    display: grid;
    place-items: center;
}

/* The mark is three complete rings. Each traces itself in turn, the finished mark
   holds, then all three clear in the SAME frame — the stagger lives inside each
   ring's keyframes rather than in animation-delay, because a delay would stagger
   the disappearance too. */
.loader-svg {
    position: relative;
    z-index: 1;
    width: 84px;
    height: 84px;
    overflow: visible;
}

/* The mark is three complete rings. They arrive one at a time, the finished mark
   holds, then all three clear in the SAME frame. The stagger lives inside each
   ring's keyframes rather than in animation-delay — a delay would stagger the
   disappearance too, and that has to be simultaneous. */
.loader-ring {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation-duration: 3.2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.loader-ring-1 { animation-name: loader-ring-1; }
.loader-ring-2 { animation-name: loader-ring-2; }
.loader-ring-3 { animation-name: loader-ring-3; }

@keyframes loader-ring-1 {
    0%, 9.9% { opacity: 1; transform: scale(1); }
    10%      { opacity: 0; transform: scale(0.92); }
    30%      { opacity: 1; transform: scale(1); }
    100%     { opacity: 1; transform: scale(1); }
}

@keyframes loader-ring-2 {
    0%, 9.9% { opacity: 1; transform: scale(1); }
    10%, 30% { opacity: 0; transform: scale(0.92); }
    50%      { opacity: 1; transform: scale(1); }
    100%     { opacity: 1; transform: scale(1); }
}

@keyframes loader-ring-3 {
    0%, 9.9% { opacity: 1; transform: scale(1); }
    10%, 50% { opacity: 0; transform: scale(0.92); }
    70%      { opacity: 1; transform: scale(1); }
    100%     { opacity: 1; transform: scale(1); }
}


@media (prefers-reduced-motion: reduce) {
    /* Show the complete mark, still. */
    .loader-ring { animation: none; opacity: 1; transform: none; }
}

/* ===================================
   DARK MODE
   Every dashboard colour now routes through a token, so redefining the tokens
   here flips the whole app. Brand hues are lightened for a dark surface —
   #2F4879 navy on a near-black card is unreadable — while staying recognisably
   the same colours. Only things that cannot be tokenised (shadows, a few
   gradients) are restated below.
   =================================== */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) {
        color-scheme: dark;

        /* Brand, stepped for a dark surface */
        --brand-teal: #45A5A5;
        --brand-navy: #6E8FC4;
        --brand-mint: #5FC9AC;

        /* Surfaces */
        --surface-card:     #171C26;
        --surface-raised:   #1E2430;
        --surface-sunken:   #12161E;
        --surface-track:    #2A3240;
        --surface-disabled: #39414F;
        --surface-hover:        rgba(69, 165, 165, 0.12);
        --surface-hover-strong: rgba(69, 165, 165, 0.18);

        /* Borders */
        --border:        #2A3240;
        --border-subtle: #303A4B;
        --border-strong: #3A4250;

        /* Neutral ramp, inverted */
        --n-0:   #171C26;
        --n-25:  #1E2430;
        --n-50:  #222835;
        --n-100: #2A3240;
        --n-200: #39414F;
        --n-400: #8A9AA1;
        --n-600: #B9C2C7;
        --n-800: #EDEFEB;

        /* Text */
        --text-strong: #EDEFEB;
        --text-title:  #FFFFFF;
        --text-body:   #B9C2C7;
        --text-muted:  #8A9AA1;
        --text-invert: #ffffff;
        --text-brand:  #9FB8D8;

        --rater-panel-bg:     rgba(255, 255, 255, 0.028);
        --chip-progress-bg:   rgba(255, 201, 77, 0.16);
        --chip-progress-text: #FFD37A;
        --badge-ok-bg:    rgba(61, 209, 104, 0.15);
        --badge-ok-text:  #6FE08F;
        --badge-bad-bg:   rgba(255, 107, 107, 0.15);
        --badge-bad-text: #FF9A9A;

        /* Status — lightened so they read on a dark card */
        --status-ok:   #3DD168;
        --status-warn: #FFC94D;
        --status-bad:  #FF6B6B;
        --status-bad-bg:     rgba(255, 68, 68, 0.13);
        --status-bad-border: rgba(255, 68, 68, 0.32);
        --status-bad-text:   #FF9A9A;

        /* Elevation reads through depth, not spread, on dark */
        --shadow-card: 0 4px 14px rgba(0, 0, 0, 0.45);
        --shadow-lift: 0 20px 60px rgba(0, 0, 0, 0.6);
        --focus-ring:  0 0 0 3px rgba(69, 165, 165, 0.35);
    }
    /* The page field itself */
    html:not([data-theme="light"]) body {

        background: linear-gradient(135deg, #14403F 0%, #1B2C49 100%);
    }
    /* Card shadows: the light values are near-invisible on a dark field */
    html:not([data-theme="light"]) .header,
html:not([data-theme="light"]) #loading,
html:not([data-theme="light"]) .table-card,
html:not([data-theme="light"]) .timeline-card,
html:not([data-theme="light"]) .phase-legend {

        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
    }
    html:not([data-theme="light"]) #loading {

        border: 1px solid var(--border);
    }
    /* Accent buttons keep their own hues but need a touch more presence */
    html:not([data-theme="light"]) .refresh-btn {
 background: #E09200;
    }
    html:not([data-theme="light"]) .refresh-btn:hover {
 background: #C97F00;
    }
    html:not([data-theme="light"]) .export-btn {
 background: #3FA98F;
    }
    html:not([data-theme="light"]) .export-btn:hover {
 background: #359178;
    }
    /* The rings' navy would sink into the card */
    html:not([data-theme="light"]) .loader-svg {
 filter: brightness(1.25);
    }
    /* The table header is a dark bar in both modes — the lightened brand hues
       would turn it into a bright band across the top of a dark card. */
    /* Same brand gradient, stepped down for dark — the same hues the login
       background uses in dark mode. */
    html:not([data-theme="light"]) thead {
        background: linear-gradient(135deg, #16243C 0%, #0F3A3B 100%);
    }
    /* Footer sits on the page field, not a card */
    html:not([data-theme="light"]) .footer {

        background: rgba(255, 255, 255, 0.05);
        color: rgba(255, 255, 255, 0.65);
    }

    html:not([data-theme="light"]) tbody tr:nth-child(even) {
        background: rgba(255, 255, 255, 0.022);
    }
    html:not([data-theme="light"]) td {
        color: #DCE2E4;
    }
}

/* Explicit-theme scope: mirrors the block above so a stored preference can
   override the OS setting in either direction. Unused until something sets
   data-theme on <html>; kept so adding a preference control is one step. */
html[data-theme="dark"] {
    color-scheme: dark;

        /* Brand, stepped for a dark surface */
        --brand-teal: #45A5A5;
        --brand-navy: #6E8FC4;
        --brand-mint: #5FC9AC;

        /* Surfaces */
        --surface-card:     #171C26;
        --surface-raised:   #1E2430;
        --surface-sunken:   #12161E;
        --surface-track:    #2A3240;
        --surface-disabled: #39414F;
        --surface-hover:        rgba(69, 165, 165, 0.12);
        --surface-hover-strong: rgba(69, 165, 165, 0.18);

        /* Borders */
        --border:        #2A3240;
        --border-subtle: #303A4B;
        --border-strong: #3A4250;

        /* Neutral ramp, inverted */
        --n-0:   #171C26;
        --n-25:  #1E2430;
        --n-50:  #222835;
        --n-100: #2A3240;
        --n-200: #39414F;
        --n-400: #8A9AA1;
        --n-600: #B9C2C7;
        --n-800: #EDEFEB;

        /* Text */
        --text-strong: #EDEFEB;
        --text-title:  #FFFFFF;
        --text-body:   #B9C2C7;
        --text-muted:  #8A9AA1;
        --text-invert: #ffffff;
        --text-brand:  #9FB8D8;

        --rater-panel-bg:     rgba(255, 255, 255, 0.028);
        --chip-progress-bg:   rgba(255, 201, 77, 0.16);
        --chip-progress-text: #FFD37A;
        --badge-ok-bg:    rgba(61, 209, 104, 0.15);
        --badge-ok-text:  #6FE08F;
        --badge-bad-bg:   rgba(255, 107, 107, 0.15);
        --badge-bad-text: #FF9A9A;

        /* Status — lightened so they read on a dark card */
        --status-ok:   #3DD168;
        --status-warn: #FFC94D;
        --status-bad:  #FF6B6B;
        --status-bad-bg:     rgba(255, 68, 68, 0.13);
        --status-bad-border: rgba(255, 68, 68, 0.32);
        --status-bad-text:   #FF9A9A;

        /* Elevation reads through depth, not spread, on dark */
        --shadow-card: 0 4px 14px rgba(0, 0, 0, 0.45);
        --shadow-lift: 0 20px 60px rgba(0, 0, 0, 0.6);
        --focus-ring:  0 0 0 3px rgba(69, 165, 165, 0.35);
}
/* The page field itself */
html[data-theme="dark"] body {

        background: linear-gradient(135deg, #14403F 0%, #1B2C49 100%);
}
/* Card shadows: the light values are near-invisible on a dark field */
html[data-theme="dark"] .header,
html[data-theme="dark"] #loading,
html[data-theme="dark"] .table-card,
html[data-theme="dark"] .timeline-card,
html[data-theme="dark"] .phase-legend {

        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
}
html[data-theme="dark"] #loading {

        border: 1px solid var(--border);
}
/* Accent buttons keep their own hues but need a touch more presence */
html[data-theme="dark"] .refresh-btn {
 background: #E09200;
}
html[data-theme="dark"] .refresh-btn:hover {
 background: #C97F00;
}
html[data-theme="dark"] .export-btn {
 background: #3FA98F;
}
html[data-theme="dark"] .export-btn:hover {
 background: #359178;
}
/* The rings' navy would sink into the card */
html[data-theme="dark"] .loader-svg {
 filter: brightness(1.25);
}
/* The table header is a dark bar in both modes — the lightened brand hues
       would turn it into a bright band across the top of a dark card. */
html[data-theme="dark"] thead {
    background: linear-gradient(135deg, #16243C 0%, #0F3A3B 100%);
}
/* Footer sits on the page field, not a card */
html[data-theme="dark"] .footer {

        background: rgba(255, 255, 255, 0.05);
        color: rgba(255, 255, 255, 0.65);
}
html[data-theme="dark"] tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.022);
}

html[data-theme="dark"] td {
    color: #DCE2E4;
}

/* ===================================
   FILE COLUMN
   Links point at our own /file route, never at Monday or S3.
   =================================== */
.file-list { display: flex; flex-direction: column; gap: 4px; }

.file-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.file-link {
    color: var(--brand-teal);
    text-decoration: none;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-link:hover { text-decoration: underline; }

.file-link:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: 3px;
}

.file-size {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

/* ===================================
   COMPLETED SECTION DIVIDER
   =================================== */
.completed-divider > td {
    padding: 10px 14px !important;
    background: var(--surface-sunken);
    border-top: 2px solid var(--border-strong);
    border-bottom: 1px solid var(--border);
}

.completed-divider-label {
    color: var(--text-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

.completed-divider-count {
    display: inline-block;
    margin-left: 9px;
    padding: 1px 8px;
    border-radius: 9px;
    background: var(--surface-card);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Finished work recedes slightly, without becoming hard to read. */
tr.row-completed td { color: var(--text-body); }