/* CPT Portal — Dark mode default, mobile-first
   Design system: warm dark base + saturated product-line accents */

/* ═══════════════════════════════════════════════════════════════════════════
   COLOR SYSTEM
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* Base palette — warm dark (slight blue undertone, not pure gray) */
    --portal-bg:            #0f1117;
    --portal-surface:       #1a1d27;
    --portal-card-bg:       #1e2230;
    --portal-card-bg-hover: #252a3a;
    --portal-border:        #2e3446;
    --portal-border-light:  #3a4158;

    /* Text */
    --portal-text:          #e8eaf0;
    --portal-text-secondary:#b0b8cc;
    --portal-text-muted:    #6b7694;

    /* Primary (brand blue) */
    --portal-primary:       #4d9fff;
    --portal-primary-hover: #3b8de8;
    --portal-primary-glow:  rgba(77, 159, 255, 0.15);

    /* Functional colors */
    --portal-success:       #34d399;
    --portal-success-dim:   rgba(52, 211, 153, 0.12);
    --portal-danger:        #f87171;
    --portal-danger-dim:    rgba(248, 113, 113, 0.12);
    --portal-warning:       #fbbf24;
    --portal-warning-dim:   rgba(251, 191, 36, 0.12);

    /* Product-line accent palette */
    --color-crude:          #f59e0b;
    --color-crude-dim:      rgba(245, 158, 11, 0.12);
    --color-cryo:           #3b82f6;
    --color-cryo-dim:       rgba(59, 130, 246, 0.12);
    --color-water:          #06b6d4;
    --color-water-dim:      rgba(6, 182, 212, 0.12);
    --color-spd:            #22c55e;
    --color-spd-dim:        rgba(34, 197, 94, 0.12);

    /* Shadows */
    --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.5);

    /* Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BASE
   ═══════════════════════════════════════════════════════════════════════════ */

body {
    background-color: var(--portal-bg);
    color: var(--portal-text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    min-height: 100vh;
}

/* ═══════════════════════════════════════════════════════════════════════════
   NAVBAR
   ═══════════════════════════════════════════════════════════════════════════ */

.portal-navbar {
    background: linear-gradient(180deg, var(--portal-surface) 0%, var(--portal-bg) 100%) !important;
    border-bottom: 1px solid var(--portal-border);
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.portal-navbar .navbar-brand {
    color: var(--portal-primary);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.portal-navbar .nav-link {
    color: var(--portal-text-secondary);
}

.portal-navbar .nav-link:hover {
    color: var(--portal-text);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARDS (base)
   ═══════════════════════════════════════════════════════════════════════════ */

.portal-card {
    background-color: var(--portal-card-bg);
    border: 1px solid var(--portal-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.portal-card .card-body {
    padding: 1.5rem;
}

.portal-card .card-title {
    color: var(--portal-text-secondary);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FORM CONTROLS
   ═══════════════════════════════════════════════════════════════════════════ */

.form-control {
    background-color: var(--portal-surface);
    border-color: var(--portal-border);
    color: var(--portal-text);
    border-radius: var(--radius-sm);
}

.form-control:focus {
    background-color: var(--portal-surface);
    border-color: var(--portal-primary);
    color: var(--portal-text);
    box-shadow: 0 0 0 0.25rem var(--portal-primary-glow);
}

.form-control::placeholder {
    color: var(--portal-text-muted);
}

.form-label {
    color: var(--portal-text-secondary);
    font-weight: 500;
    font-size: 0.85rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════════════════ */

.btn-portal {
    background: linear-gradient(135deg, var(--portal-primary) 0%, var(--portal-primary-hover) 100%);
    border: none;
    color: #fff;
    font-weight: 600;
    border-radius: var(--radius-sm);
    padding: 0.6rem 1.5rem;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(77, 159, 255, 0.25);
}

.btn-portal:hover,
.btn-portal:focus {
    background: linear-gradient(135deg, var(--portal-primary-hover) 0%, #2979d6 100%);
    color: #fff;
    box-shadow: 0 4px 16px rgba(77, 159, 255, 0.35);
    transform: translateY(-1px);
}

.btn-portal:disabled {
    opacity: 0.5;
    transform: none;
    box-shadow: none;
}

.btn-outline-secondary {
    color: var(--portal-text-secondary);
    border-color: var(--portal-border);
}

.btn-outline-secondary:hover {
    color: var(--portal-text);
    background-color: var(--portal-card-bg);
    border-color: var(--portal-border-light);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ALERTS
   ═══════════════════════════════════════════════════════════════════════════ */

.alert-danger {
    background-color: var(--portal-danger-dim);
    border: 1px solid rgba(248, 113, 113, 0.25);
    color: var(--portal-danger);
    border-radius: var(--radius-sm);
}

.alert-success {
    background-color: var(--portal-success-dim);
    border: 1px solid rgba(52, 211, 153, 0.25);
    color: var(--portal-success);
    border-radius: var(--radius-sm);
}

.alert-warning {
    background-color: var(--portal-warning-dim);
    border: 1px solid rgba(251, 191, 36, 0.25);
    color: var(--portal-warning);
    border-radius: var(--radius-sm);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BRANDING / TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════════════════ */

.portal-title {
    color: var(--portal-text);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.portal-subtitle {
    color: var(--portal-text-muted);
    font-size: 0.9rem;
}

/* Links */
a.portal-link {
    color: var(--portal-primary);
    text-decoration: none;
    transition: color 0.15s ease;
}

a.portal-link:hover {
    color: var(--portal-primary-hover);
    text-decoration: underline;
}

/* Text utilities */
.text-portal-muted { color: var(--portal-text-muted); }
.text-portal-secondary { color: var(--portal-text-secondary); }
.text-portal-danger { color: var(--portal-danger); }
.text-portal-warning { color: var(--portal-warning); }

/* ═══════════════════════════════════════════════════════════════════════════
   PERIOD SELECTOR
   ═══════════════════════════════════════════════════════════════════════════ */

.portal-select {
    background-color: var(--portal-surface);
    border: 1px solid var(--portal-border);
    color: var(--portal-text);
    font-size: 0.85rem;
    border-radius: var(--radius-sm);
}

.portal-select:focus {
    border-color: var(--portal-primary);
    box-shadow: 0 0 0 0.2rem var(--portal-primary-glow);
}

.portal-select option {
    background-color: var(--portal-surface);
    color: var(--portal-text);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CODE INPUT (6-digit verification)
   ═══════════════════════════════════════════════════════════════════════════ */

.code-input {
    letter-spacing: 0.5em;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PASSWORD METER
   ═══════════════════════════════════════════════════════════════════════════ */

.pw-meter {
    height: 6px;
    background-color: var(--portal-border);
    border-radius: 3px;
    overflow: hidden;
}

.pw-meter-bar {
    height: 100%;
    width: 0;
    border-radius: 3px;
    transition: width 0.3s ease, background-color 0.3s ease;
}

.pw-meter-bar.pw-weak   { background-color: var(--portal-danger); }
.pw-meter-bar.pw-fair   { background-color: var(--portal-warning); }
.pw-meter-bar.pw-good   { background-color: #8bc34a; }
.pw-meter-bar.pw-strong { background-color: var(--portal-success); }

.pw-meter-label {
    font-size: 0.75rem;
    font-weight: 600;
    display: block;
    margin-top: 2px;
}

.pw-meter-label.pw-weak   { color: var(--portal-danger); }
.pw-meter-label.pw-fair   { color: var(--portal-warning); }
.pw-meter-label.pw-good   { color: #8bc34a; }
.pw-meter-label.pw-strong { color: var(--portal-success); }

/* Password requirements */
.pw-requirements {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
    font-size: 0.8rem;
    color: var(--portal-text-muted);
}

.pw-requirements li {
    padding: 1px 0;
    transition: color 0.2s ease;
}

.pw-requirements li.pw-met {
    color: var(--portal-success);
}

.pw-requirements .pw-icon {
    display: inline-block;
    width: 1.2em;
    text-align: center;
    font-weight: 600;
}

/* Password match */
.pw-match-label {
    font-size: 0.8rem;
    display: block;
    margin-top: 4px;
}

.pw-match-ok { color: var(--portal-success); }
.pw-match-no { color: var(--portal-danger); }

/* ═══════════════════════════════════════════════════════════════════════════
   DASHBOARD — Product Summary Cards
   ═══════════════════════════════════════════════════════════════════════════ */

.dashboard-card {
    background-color: var(--portal-card-bg);
    border: 1px solid var(--portal-border);
    border-radius: var(--radius-md);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    overflow: hidden;
    position: relative;
}

.dashboard-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--card-accent, var(--portal-primary));
}

.dashboard-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    background-color: var(--portal-card-bg-hover);
}

.dashboard-card .card-title {
    color: var(--portal-text);
    font-weight: 600;
    font-size: 0.95rem;
}

.dashboard-card .card-text {
    color: var(--portal-text-secondary);
}

/* Product-line accent on dashboard cards */
.dashboard-card[data-product="crude"]  { --card-accent: var(--color-crude); }
.dashboard-card[data-product="cryo"]   { --card-accent: var(--color-cryo); }
.dashboard-card[data-product="water"]  { --card-accent: var(--color-water); }
.dashboard-card[data-product="spd"]    { --card-accent: var(--color-spd); }

/* Load count — hero number */
.dashboard-card .load-count {
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1;
    color: var(--portal-text);
}

.dashboard-card .load-count-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--portal-text-muted);
}

.dashboard-card .product-icon {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    opacity: 0.9;
}

.dashboard-card .summary-stat {
    font-size: 0.8rem;
    color: var(--portal-text-secondary);
    padding-top: 0.15rem;
}

.dashboard-card .summary-stat strong {
    color: var(--portal-text);
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LOAD LIST
   ═══════════════════════════════════════════════════════════════════════════ */

.load-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background-color: var(--portal-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.load-row {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    background-color: var(--portal-card-bg);
    text-decoration: none;
    color: var(--portal-text);
    transition: background-color 0.1s ease;
    border-left: 3px solid transparent;
}

.load-row:hover {
    background-color: var(--portal-card-bg-hover);
    color: var(--portal-text);
}

/* Product-line left accent on load rows */
.load-row[data-product="crude"]  { border-left-color: var(--color-crude); }
.load-row[data-product="cryo"]   { border-left-color: var(--color-cryo); }
.load-row[data-product="water"]  { border-left-color: var(--color-water); }
.load-row[data-product="spd"]    { border-left-color: var(--color-spd); }

.load-row-voided {
    opacity: 0.45;
}

.load-row-voided .load-ticket-num {
    text-decoration: line-through;
}

/* Ticket — primary identifier (bold, large, left side) */
.load-ticket-col {
    flex-shrink: 0;
    min-width: 4.5rem;
    margin-right: 0.75rem;
    text-align: center;
}

.load-ticket-num {
    font-size: 1rem;
    font-weight: 700;
    color: var(--portal-text);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.load-ticket-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--portal-text-muted);
}

/* Route/date (middle) */
.load-row-main {
    flex: 1;
    min-width: 0;
}

.load-date {
    font-size: 0.75rem;
    color: var(--portal-text-muted);
}

.load-route {
    font-weight: 500;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--portal-text-secondary);
}

/* Quantity/status (right side) */
.load-row-details {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    margin-left: 0.75rem;
}

.load-qty {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--portal-text);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.load-row-chevron {
    color: var(--portal-text-muted);
    margin-left: 0.25rem;
    font-size: 0.7rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LOAD LIST — Header Summary Bar
   ═══════════════════════════════════════════════════════════════════════════ */

.load-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    background-color: var(--portal-surface);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    border: 1px solid var(--portal-border);
    border-bottom: none;
    font-size: 0.8rem;
    color: var(--portal-text-secondary);
}

.load-list-header .list-count {
    font-weight: 600;
    color: var(--portal-text);
}

/* ═══════════════════════════════════════════════════════════════════════════
   LOAD DETAIL
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hero header — ticket number + key info */
.load-detail-hero {
    background: linear-gradient(135deg, var(--portal-card-bg) 0%, var(--portal-surface) 100%);
    border: 1px solid var(--portal-border);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
    position: relative;
    overflow: hidden;
}

.load-detail-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--detail-accent, var(--portal-primary));
}

.load-detail-hero[data-product="crude"]  { --detail-accent: var(--color-crude); }
.load-detail-hero[data-product="cryo"]   { --detail-accent: var(--color-cryo); }
.load-detail-hero[data-product="water"]  { --detail-accent: var(--color-water); }
.load-detail-hero[data-product="spd"]    { --detail-accent: var(--color-spd); }

.hero-ticket {
    font-size: 2rem;
    font-weight: 800;
    color: var(--portal-text);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.hero-ticket-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--portal-text-muted);
    margin-bottom: 0.15rem;
}

.hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.75rem;
}

.hero-meta-item {
    display: flex;
    flex-direction: column;
}

.hero-meta-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--portal-text-muted);
}

.hero-meta-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--portal-text-secondary);
}

/* Detail sections */
.detail-section {
    background-color: var(--portal-card-bg);
    border: 1px solid var(--portal-border);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
    box-shadow: var(--shadow-sm);
}

.detail-section-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--portal-text-muted);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--portal-border);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.detail-section-title .section-icon {
    color: var(--detail-accent, var(--portal-primary));
    font-size: 0.85rem;
}

.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem 1.25rem;
}

.detail-row {
    display: flex;
    flex-direction: column;
}

.detail-label {
    font-size: 0.7rem;
    color: var(--portal-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.detail-value {
    font-size: 0.95rem;
    color: var(--portal-text);
    font-weight: 500;
}

/* Full-width row (for values that need more space) */
.detail-row-full {
    grid-column: 1 / -1;
}

.load-detail-voided {
    opacity: 0.5;
}

/* Sub-section divider within combined cards */
.detail-subsection-divider {
    border-top: 1px solid var(--portal-border);
    margin: 0.75rem 0;
}

/* Sub-section title (lighter than card title) */
.detail-subsection-title {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--portal-text-muted);
    margin-bottom: 0.5rem;
}

/* Comments/Notes lightweight footer */
.detail-comments-footer {
    padding: 0.75rem 1.25rem;
    margin-bottom: 0.75rem;
    border-top: 1px solid var(--portal-border);
}

.detail-comments-footer .footer-label {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--portal-text-muted);
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.detail-comments-footer .footer-text {
    font-size: 0.9rem;
    color: var(--portal-text-secondary);
    line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ISSUES CARD (load detail)
   ═══════════════════════════════════════════════════════════════════════════ */

.portal-issues-card {
    border-color: rgba(248, 113, 113, 0.3);
    border-left: 4px solid var(--portal-danger);
    background-color: var(--portal-danger-dim);
}

.issues-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
    font-size: 0.85rem;
}

.issues-list li {
    padding: 0.35rem 0;
    border-bottom: 1px solid rgba(248, 113, 113, 0.1);
    color: var(--portal-text);
}

.issues-list li:last-child {
    border-bottom: none;
}

.issues-list li .fa-triangle-exclamation {
    font-size: 0.75em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DELIVERY CARDS (load detail)
   ═══════════════════════════════════════════════════════════════════════════ */

.delivery-cards {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.delivery-card {
    background: var(--portal-surface);
    border-radius: var(--portal-radius-sm, 0.5rem);
    border-left: 3px solid var(--portal-primary);
    padding: 0.6rem 0.75rem;
}

/* Product-accent left border */
.delivery-card[data-product="cryo"]  { border-left-color: var(--color-cryo); }
.delivery-card[data-product="water"] { border-left-color: var(--color-water); }
.delivery-card[data-product="crude"] { border-left-color: var(--color-crude); }
.delivery-card[data-product="spd"]   { border-left-color: var(--color-spd, var(--portal-primary)); }

.delivery-card-header {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--portal-text-muted);
    margin-bottom: 0.35rem;
}

.delivery-num-accent {
    color: var(--portal-primary);
}

.delivery-card[data-product="cryo"]  .delivery-num-accent { color: var(--color-cryo); }
.delivery-card[data-product="water"] .delivery-num-accent { color: var(--color-water); }
.delivery-card[data-product="crude"] .delivery-num-accent { color: var(--color-crude); }

.delivery-location {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--portal-text);
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--portal-border);
}

.delivery-location i {
    color: var(--portal-text-muted);
    font-size: 0.75rem;
    flex-shrink: 0;
}

.delivery-fields {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4rem 0.75rem;
}

.delivery-field-label {
    display: block;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--portal-text-muted);
}

.delivery-field-value {
    display: block;
    font-size: 0.85rem;
    color: var(--portal-text);
    font-weight: 500;
}

@media (min-width: 577px) {
    .detail-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .delivery-card {
        padding: 0.75rem 1rem;
    }

    .delivery-fields {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Issue count badge (load list) */
.issue-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background-color: var(--portal-danger);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════════════
   STATUS BADGES
   ═══════════════════════════════════════════════════════════════════════════ */

.badge {
    font-weight: 600;
    font-size: 0.7rem;
    letter-spacing: 0.02em;
    padding: 0.3em 0.6em;
    border-radius: 4px;
}

.badge.bg-warning {
    background-color: var(--portal-warning) !important;
    color: #1a1d27 !important;
}

.badge.bg-danger {
    background-color: var(--portal-danger) !important;
    color: #fff !important;
}

.badge.bg-secondary {
    background-color: var(--portal-text-muted) !important;
    color: var(--portal-bg) !important;
}

.badge.bg-success {
    background-color: var(--portal-success) !important;
    color: #1a1d27 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   EFFICIENCY SCORECARD
   ═══════════════════════════════════════════════════════════════════════════ */

.efficiency-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));
    gap: 0.75rem;
}

.efficiency-metric {
    text-align: center;
    padding: 0.5rem 0.25rem;
    border-radius: var(--radius-sm);
    background-color: var(--portal-surface);
    border: 1px solid var(--portal-border);
}

.efficiency-metric.metric-overall {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, var(--portal-surface) 0%, var(--portal-card-bg) 100%);
    padding: 0.75rem;
    margin-bottom: 0.25rem;
}

.metric-overall .metric-score {
    font-size: 2.5rem;
}

.metric-score {
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.metric-score.score-good { color: var(--portal-success); }
.metric-score.score-fair { color: var(--portal-warning); }
.metric-score.score-poor { color: var(--portal-danger); }

.metric-label {
    font-size: 0.6rem;
    color: var(--portal-text-muted);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

/* ── Efficiency Detail Panel ─────────────────────────────────────────────── */

.eff-detail-toggle {
    color: var(--portal-secondary);
    text-decoration: none;
}
.eff-detail-toggle:hover {
    color: var(--portal-text);
}

.eff-detail-panel {
    margin-top: 0.75rem;
    border-top: 1px solid var(--portal-border);
    padding-top: 0.75rem;
}

.eff-detail-row {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--portal-border);
}
.eff-detail-row:last-child { border-bottom: none; }

.eff-detail-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.eff-detail-name {
    font-weight: 600;
    color: var(--portal-text);
    font-size: 0.85rem;
}

.eff-detail-score {
    font-size: 0.85rem;
    font-weight: 700;
}

.eff-weight-badge {
    font-size: 0.65rem;
    background: var(--portal-border);
    color: var(--portal-text-muted);
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    font-weight: 600;
    margin-left: auto;
}

.eff-detail-desc {
    font-size: 0.75rem;
    color: var(--portal-text-muted);
    margin-top: 0.15rem;
}

.eff-detail-raw {
    font-size: 0.75rem;
    color: var(--portal-secondary);
    margin-top: 0.1rem;
    font-weight: 500;
}

.eff-detail-tip {
    font-size: 0.72rem;
    color: var(--portal-warning);
    margin-top: 0.2rem;
    font-style: italic;
}
.eff-detail-tip .fa-lightbulb {
    font-style: normal;
}

.eff-detail-overall {
    background: rgba(255,255,255,0.03);
    border-radius: 4px;
    padding: 0.5rem;
    margin-top: 0.25rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SAFETY / IDLING CARDS
   ═══════════════════════════════════════════════════════════════════════════ */

.safety-event {
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--portal-border);
}

.safety-event:last-child {
    border-bottom: none;
}

.safety-event-main {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.safety-event-meta {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.7rem;
    color: var(--portal-text-muted);
    margin-top: 0.1rem;
}

.safety-video-link {
    color: var(--portal-primary);
    text-decoration: none;
    transition: color 0.15s ease;
}

.safety-video-link:hover {
    color: var(--portal-primary-hover);
}

.safety-events-extra {
    display: none;
}

.safety-events-extra.expanded {
    display: block;
}

.safety-toggle {
    display: inline-block;
    color: var(--portal-primary);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.safety-toggle:hover {
    color: var(--portal-primary-hover);
    text-decoration: underline;
}

/* Idling stat boxes */
.idling-stat {
    background-color: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: var(--radius-sm);
    padding: 0.75rem;
}

.idling-stat .stat-number {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--portal-text);
    font-variant-numeric: tabular-nums;
}

.idling-stat .stat-unit {
    font-size: 0.7rem;
    color: var(--portal-text-muted);
    text-transform: uppercase;
}

.idling-stat .stat-detail {
    font-size: 0.8rem;
    color: var(--portal-text-secondary);
    margin-top: 0.25rem;
}

.idling-stat.wasteful { border-top: 2px solid var(--portal-warning); }
.idling-stat.productive { border-top: 2px solid var(--portal-success); }

/* ═══════════════════════════════════════════════════════════════════════════
   SAMSARA SECTION CARDS
   ═══════════════════════════════════════════════════════════════════════════ */

.samsara-section-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--portal-text-muted);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--portal-border);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 576px) {
    .load-row-details {
        flex-direction: column;
        align-items: flex-end;
        gap: 0.2rem;
    }

    .efficiency-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .hero-ticket {
        font-size: 1.75rem;
    }

    .hero-meta {
        gap: 0.75rem;
    }

    .load-ticket-col {
        min-width: 3.75rem;
        margin-right: 0.5rem;
    }

    .load-ticket-num {
        font-size: 0.9rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   EMPTY / LOADING STATES
   ═══════════════════════════════════════════════════════════════════════════ */

.portal-empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--portal-text-muted);
}

.portal-empty-state .empty-icon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    opacity: 0.4;
}

.portal-empty-state .empty-text {
    font-size: 0.95rem;
}

.portal-loading {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--portal-text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAY DISPLAY
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Load list pay row ──────────────────────────────────────────────────── */

.load-pay {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    margin-top: 0.2rem;
    flex-wrap: wrap;
}

.pay-val-a, .pay-val-b {
    font-family: 'SF Mono', 'Consolas', monospace;
    font-weight: 500;
}

.pay-val-a {
    color: var(--portal-success);
}

.pay-val-b {
    color: var(--portal-primary);
}

.pay-badge {
    font-size: 0.65rem;
    padding: 0.1rem 0.4rem;
    border-radius: 0.25rem;
    font-weight: 600;
}

.pay-badge.pay-preload {
    background: rgba(77, 159, 255, 0.15);
    color: var(--portal-primary);
}

.pay-badge.pay-split {
    background: var(--portal-success-dim);
    color: var(--portal-success);
}

/* ── Load list pay total (header) ───────────────────────────────────────── */

.load-list-pay-total {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.8rem;
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    flex-wrap: wrap;
}

.load-list-pay-total .pay-label {
    color: var(--portal-text-muted);
    font-weight: 500;
}

.load-list-pay-total .pay-val-a,
.load-list-pay-total .pay-val-b {
    font-size: 0.95rem;
    font-weight: 600;
}

.load-list-pay-total .pay-val-sep {
    color: var(--portal-text-muted);
}

/* ── Dashboard pay summary panel ────────────────────────────────────────── */

.portal-pay-summary {
    border-left: 3px solid var(--portal-warning);
}

/* Clickable pay section links (drill-down to loads page) */
.pay-summary-link {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius-sm, 6px);
    padding: 0.25rem 0.5rem;
    margin: -0.25rem -0.5rem;
    transition: background-color 0.15s ease;
    position: relative;
}

.pay-summary-link:hover {
    background-color: var(--portal-card-bg-hover);
    color: inherit;
    text-decoration: none;
}

.pay-summary-link::after {
    content: '\f054';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.7rem;
    color: var(--portal-text-muted);
    position: absolute;
    right: 0.5rem;
    top: 0.85rem;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.pay-summary-link:hover::after {
    opacity: 1;
}

.pay-summary-gross {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--portal-border);
    margin-bottom: 0.5rem;
}

.pay-gross-label {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--portal-text);
}

.pay-gross-value {
    font-size: 1.25rem;
    font-weight: 700;
    font-family: 'SF Mono', 'Consolas', monospace;
    color: var(--portal-success);
}

.pay-summary-breakdown {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.pay-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0;
    font-size: 0.85rem;
}

.pay-row-label {
    color: var(--portal-text-secondary);
}

.pay-row-value {
    font-family: 'SF Mono', 'Consolas', monospace;
    font-weight: 500;
    color: var(--portal-text);
}

/* ── Detail view pay section highlight ──────────────────────────────────── */

.detail-section:has(.detail-section-title .fa-dollar-sign) {
    border-left: 3px solid var(--portal-warning);
}

.detail-section:has(.detail-section-title .fa-dollar-sign) .detail-value {
    font-family: 'SF Mono', 'Consolas', monospace;
    font-weight: 500;
}

/* ── Load row metadata (truck, C5 hrs, miles) ─────────────────────────── */

.load-row-meta {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.7rem;
    color: var(--portal-text-muted);
    margin-top: 0.1rem;
}

.meta-sep {
    margin: 0 0.15rem;
    opacity: 0.4;
}

/* ── Team driver: partner load indicators ────────────────────────────── */

.teammate-badge {
    color: var(--portal-primary);
    font-size: 0.75em;
    font-weight: 500;
    margin-top: 0.15rem;
}

.teammate-detail-banner {
    background: color-mix(in srgb, var(--portal-primary) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--portal-primary) 25%, transparent);
    border-radius: var(--portal-radius);
    color: var(--portal-primary);
    font-size: 0.85rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
}

/* ── Per diem / cryo stats banner (load list header) ──────────────────── */

.load-list-stats-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.8rem;
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.82rem;
    color: var(--portal-text-muted);
}
.load-list-stats-banner strong {
    color: var(--portal-text);
    font-weight: 600;
}

/* ── Pay type badges ──────────────────────────────────────────────────── */

.pay-type-c5 {
    background: rgba(59, 130, 246, 0.15);
    color: var(--portal-primary);
}

.pay-type-c5m {
    background: rgba(168, 85, 247, 0.15);
    color: #a855f7;
}

.pay-type-badload {
    background: var(--portal-danger-dim);
    color: var(--portal-danger);
}

/* ── Pay breakdown card (detail view) ─────────────────────────────────── */

.pay-breakdown-card {
    padding: 0.5rem 0;
}

.pay-type-header {
    margin-bottom: 0.75rem;
}

.pay-type-label {
    font-weight: 600;
    font-size: 0.85rem;
}

.pay-calculation {
    background: var(--portal-surface);
    border-radius: var(--radius-sm, 0.375rem);
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.75rem;
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 0.85rem;
    color: var(--portal-text);
}

.pay-adjustment {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    padding: 0.2rem 0;
}

.pay-adj-label {
    color: var(--portal-text-secondary);
}

.pay-adj-detail {
    font-weight: 500;
}

.pay-final {
    border-top: 1px solid var(--portal-border);
    padding-top: 0.5rem;
    margin-top: 0.5rem;
}

.pay-final-row {
    display: flex;
    justify-content: space-between;
    padding: 0.3rem 0;
}

.pay-final-label {
    color: var(--portal-text-secondary);
    font-size: 0.85rem;
}

.pay-final-value {
    font-size: 1.1rem;
    font-weight: 700;
    font-family: 'SF Mono', 'Consolas', monospace;
}

/* ── Dashboard pay hero enhancements ──────────────────────────────────── */

.pay-gross-value {
    font-size: 1.5rem;
}

.pay-hours-context {
    font-size: 0.8rem;
    color: var(--portal-text-muted);
    margin-top: 0.25rem;
}

.pay-section-divider {
    border-top: 1px solid var(--portal-border);
    margin: 0.4rem 0;
}

.pay-first-day-notice {
    color: var(--portal-text-secondary);
    font-size: 0.85rem;
    padding: 0.5rem 0;
}

.pay-row-annotation {
    color: var(--portal-text-muted);
    font-size: 0.8rem;
}

/* ── Cryo pay value color ─────────────────────────────────────────────── */

.pay-val-cryo {
    font-family: 'SF Mono', 'Consolas', monospace;
    font-weight: 600;
    color: var(--color-cryo);
}

/* ── Cryo tier badges ─────────────────────────────────────────────────── */

.pay-tier-base {
    background: var(--color-cryo-dim);
    color: var(--color-cryo);
}

.pay-tier-tenure {
    background: rgba(34, 197, 94, 0.15);
    color: var(--portal-success);
}

.pay-tier-team {
    background: rgba(168, 85, 247, 0.15);
    color: #a855f7;
}

/* ── Cryo pay total in list header ────────────────────────────────────── */

.cryo-pay-total .pay-breakdown-mini {
    font-size: 0.75rem;
    color: var(--portal-text-muted);
}

/* ── Weekly guarantee breakdown card ──────────────────────────────────── */

.cryo-guarantee-breakdown {
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-bottom: 0.5rem;
}

.guarantee-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--portal-text-muted);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--portal-border);
    display: flex;
    align-items: center;
}

.guarantee-week {
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--portal-border);
}

.guarantee-week:last-of-type {
    border-bottom: none;
    margin-bottom: 0.5rem;
}

.guarantee-week-header {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--portal-text);
    margin-bottom: 0.4rem;
}

.guarantee-week-dates {
    font-weight: 400;
    color: var(--portal-text-muted);
    margin-left: 0.25rem;
}

.guarantee-row {
    display: flex;
    justify-content: space-between;
    padding: 0.15rem 0;
    font-size: 0.8rem;
    color: var(--portal-text-secondary);
}

.guarantee-row span:last-child {
    font-family: 'SF Mono', 'Consolas', monospace;
    font-weight: 500;
}

.guarantee-row.earned {
    color: var(--portal-text);
    font-weight: 600;
    padding-top: 0.3rem;
    border-top: 1px dotted var(--portal-border);
    margin-top: 0.2rem;
}

.guarantee-row.guarantee-floor {
    color: var(--portal-text-muted);
    font-style: italic;
}

.guarantee-row.topup {
    color: var(--portal-success);
    font-weight: 600;
}

.guarantee-row.absorbed {
    color: var(--portal-text-muted);
    font-style: italic;
}

.guarantee-row.final {
    color: var(--color-cryo);
    font-weight: 700;
    font-size: 0.85rem;
    padding-top: 0.3rem;
}

.guarantee-grand-total {
    display: flex;
    justify-content: space-between;
    padding: 0.6rem 0 0;
    border-top: 2px solid var(--color-cryo);
    margin-top: 0.25rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--portal-text);
}

.guarantee-grand-total span:last-child {
    font-family: 'SF Mono', 'Consolas', monospace;
    color: var(--color-cryo);
}

/* ABP Section labels (Total A / Total B) */
.cryo-abp-section {
    margin-bottom: 0.35rem;
    padding-bottom: 0.25rem;
}

.cryo-abp-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--portal-text-muted);
    margin-bottom: 0.15rem;
    margin-top: 0.4rem;
}

/* Base pay row (max of A, B) */
.cryo-base-pay {
    color: var(--color-cryo);
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0.4rem 0 0.3rem;
    border-top: 1px solid var(--portal-border);
    border-bottom: 1px solid var(--portal-border);
    margin: 0.3rem 0;
}

/* Guarantee applied chip */
.cryo-guarantee-indicator {
    display: inline-block;
    background: var(--portal-success-dim);
    color: var(--portal-success);
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    margin-left: 0.3rem;
    vertical-align: middle;
}

/* Day-by-day approval status (between Guarantee and Base Pay) */
.cryo-day-status {
    margin: 0.35rem 0;
    padding: 0.3rem 0;
    text-align: center;
}
.cryo-day-status-dots {
    display: flex;
    gap: 0.3rem;
    justify-content: center;
}
.day-dot {
    font-size: 0.6rem;
    font-weight: 600;
    width: 1.7rem;
    text-align: center;
    padding: 0.2rem 0;
    border-radius: 3px;
    cursor: default;
}
.day-dot-approved {
    background: var(--portal-success-dim);
    color: var(--portal-success);
}
.day-dot-pending {
    background: var(--portal-warning-dim);
    color: var(--portal-warning);
}
.day-dot-reset {
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
}
.day-dot-off {
    color: var(--portal-text-muted);
    opacity: 0.3;
}
.cryo-day-status-legend {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 0.25rem;
    font-size: 0.55rem;
    color: var(--portal-text-muted);
}
.legend-item::before {
    content: '●';
    margin-right: 0.2rem;
}
.legend-approved::before {
    color: var(--portal-success);
}
.legend-pending::before {
    color: var(--portal-warning);
}
.legend-reset::before {
    color: #a78bfa;
}

/* Additional pay section (AMG wait + trainer) */
.cryo-additional-pay {
    border-top: 1px dotted var(--portal-border);
    padding-top: 0.3rem;
}

/* Per diem note (separate from ABP) */
.cryo-per-diem-note {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.3rem 0 0;
    margin-top: 0.3rem;
    border-top: 1px dotted var(--portal-border);
    font-size: 0.75rem;
    color: var(--portal-text-muted);
    font-style: italic;
}

.cryo-per-diem-note span:last-of-type {
    font-family: 'SF Mono', 'Consolas', monospace;
    font-style: normal;
}

.cryo-per-diem-label {
    width: 100%;
    font-size: 0.65rem;
    color: var(--portal-text-muted);
}

/* Per diem total at period level */
.cryo-per-diem-total {
    color: var(--portal-text-muted);
    font-style: italic;
    padding-top: 0.25rem;
    font-size: 0.75rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SAFETY SCORE HERO
   ═══════════════════════════════════════════════════════════════════════════ */

.safety-score-hero {
    text-align: center;
    padding: 0.75rem 0;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--portal-border);
    cursor: pointer;
}

.safety-score-hero:hover {
    opacity: 0.85;
}

.safety-score-number {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.safety-score-number.score-good { color: var(--portal-success); }
.safety-score-number.score-fair { color: var(--portal-warning); }
.safety-score-number.score-poor { color: var(--portal-danger); }

.safety-score-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--portal-text-muted);
    margin-top: 0.25rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FUEL & ENERGY CARD
   ═══════════════════════════════════════════════════════════════════════════ */

.fuel-stat {
    background-color: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: var(--radius-sm);
    padding: 0.75rem;
}

.fuel-stat .stat-number {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--portal-text);
    font-variant-numeric: tabular-nums;
}

.fuel-stat .stat-unit {
    font-size: 0.7rem;
    color: var(--portal-text-muted);
    text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SPEEDING CARD
   ═══════════════════════════════════════════════════════════════════════════ */

.speeding-stat {
    background-color: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: var(--radius-sm);
    padding: 0.75rem;
    text-align: center;
}

.speeding-stat .stat-number {
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1;
    color: var(--portal-text);
    font-variant-numeric: tabular-nums;
}

.speeding-stat .stat-unit {
    font-size: 0.65rem;
    color: var(--portal-text-muted);
    text-transform: uppercase;
}

.speeding-severity {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.speeding-sev-light {
    background: rgba(52, 211, 153, 0.15) !important;
    color: var(--portal-success) !important;
}

.speeding-sev-moderate {
    background: var(--portal-warning-dim) !important;
    color: var(--portal-warning) !important;
}

.speeding-sev-heavy {
    background: rgba(251, 146, 60, 0.15) !important;
    color: #fb923c !important;
}

.speeding-sev-severe {
    background: var(--portal-danger-dim) !important;
    color: var(--portal-danger) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   AVAILABILITY REQUESTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Status badges */
.avail-badge {
    display: inline-block;
    padding: 0.2em 0.6em;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1;
}

.avail-badge-pending {
    background: var(--portal-warning-dim);
    color: var(--portal-warning);
}

.avail-badge-approved {
    background: var(--portal-success-dim);
    color: var(--portal-success);
}

.avail-badge-denied {
    background: var(--portal-danger-dim);
    color: var(--portal-danger);
}

.avail-badge-cancelled {
    background: rgba(107, 118, 148, 0.15);
    color: var(--portal-text-muted);
}

/* Request form */
.avail-form .form-label {
    font-size: 0.85rem;
    font-weight: 500;
}

.portal-input {
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    color: var(--portal-text);
    border-radius: 6px;
}

.portal-input:focus {
    background: var(--portal-surface);
    border-color: var(--portal-primary);
    color: var(--portal-text);
    box-shadow: 0 0 0 2px var(--portal-primary-glow);
}

.portal-input::placeholder {
    color: var(--portal-text-muted);
}

.portal-btn-primary {
    background: var(--portal-primary);
    border-color: var(--portal-primary);
    font-weight: 600;
}

.portal-btn-primary:hover {
    background: var(--portal-primary-hover);
    border-color: var(--portal-primary-hover);
}

/* Request list rows */
.avail-request-row {
    transition: border-color 0.15s;
}

.avail-request-row:hover {
    border-color: var(--portal-border-light);
}

.avail-staff-notes .avail-toggle-notes {
    text-decoration: none;
}

.avail-staff-notes .avail-toggle-notes:hover {
    color: var(--portal-primary) !important;
}

.avail-notes-content {
    padding: 0.5rem 0.75rem;
    background: var(--portal-surface);
    border-radius: 6px;
    border-left: 3px solid var(--portal-primary);
}

/* ─── Staff Review Queue ──────────────────────────────────────────────────── */

.review-card {
    transition: border-color 0.15s, box-shadow 0.15s;
}

.review-card:hover {
    border-color: var(--portal-border-light);
    box-shadow: var(--shadow-sm);
}

.review-details {
    padding: 0.5rem 0.75rem;
    background: var(--portal-surface);
    border-radius: 6px;
}

/* Conflict sidebar */
.conflict-item {
    padding: 0.4rem 0.5rem;
    background: var(--portal-surface);
    border-radius: 4px;
    border-left: 3px solid var(--portal-warning);
}

/* Duty code dropdown */
.review-duty-select {
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    color: var(--portal-text);
}

/* Approve/deny button pair */
.review-card .btn-success {
    background: var(--portal-success);
    border-color: var(--portal-success);
}

.review-card .btn-success:hover {
    background: #2bc387;
    border-color: #2bc387;
}

.review-card .btn-danger {
    background: var(--portal-danger);
    border-color: var(--portal-danger);
}

.review-card .btn-danger:hover {
    background: #ef5353;
    border-color: #ef5353;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCHEDULE STRIP
   ═══════════════════════════════════════════════════════════════════════════ */

.schedule-strip {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding: 4px 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--portal-border) transparent;
}

.schedule-strip::-webkit-scrollbar {
    height: 4px;
}

.schedule-strip::-webkit-scrollbar-thumb {
    background: var(--portal-border);
    border-radius: 2px;
}

.schedule-cell {
    flex: 0 0 auto;
    min-width: 44px;
    width: 56px;
    text-align: center;
    padding: 6px 4px;
    border-radius: var(--radius-sm);
    background: var(--portal-surface);
    border: 2px solid transparent;
    transition: border-color 0.2s;
    cursor: default;
}

.schedule-cell.today {
    border-color: var(--portal-primary);
    box-shadow: 0 0 8px var(--portal-primary-glow);
}

.schedule-cell-date {
    font-size: 0.6rem;
    color: var(--portal-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.schedule-cell-day {
    font-size: 0.7rem;
    color: var(--portal-text-secondary);
    margin-bottom: 3px;
}

.schedule-cell-code {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 4px;
    border-radius: 4px;
    line-height: 1.2;
}

/* Duty code color categories */
.duty-working  { background: rgba(52, 211, 153, 0.15); color: #34d399; }
.duty-off      { background: rgba(77, 159, 255, 0.15); color: #4d9fff; }
.duty-training { background: rgba(6, 182, 212, 0.15);  color: #06b6d4; }
.duty-leave    { background: rgba(168, 85, 247, 0.15); color: #a855f7; }
.duty-absence  { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }
.duty-other    { background: rgba(107, 118, 148, 0.15);color: #6b7694; }
.duty-empty    { background: rgba(107, 118, 148, 0.08);color: #4a5168; }

/* Schedule page navigation */
.schedule-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 12px;
}

.schedule-nav .btn {
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    color: var(--portal-text-secondary);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
}

.schedule-nav .btn:hover {
    background: var(--portal-card-bg-hover);
    color: var(--portal-text);
}

.schedule-nav .date-label {
    font-size: 0.85rem;
    color: var(--portal-text-secondary);
    min-width: 160px;
    text-align: center;
}

/* Schedule page detail list (below strip) */
.schedule-detail-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--portal-border);
}

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

.schedule-detail-date {
    font-size: 0.8rem;
    color: var(--portal-text-secondary);
    min-width: 70px;
}

.schedule-detail-code {
    font-size: 0.8rem;
    font-weight: 600;
}

.schedule-detail-meta {
    font-size: 0.75rem;
    color: var(--portal-text-muted);
    margin-left: auto;
}

/* Dashboard compact 3-day strip */
.schedule-preview-strip {
    display: flex;
    gap: 6px;
}

.schedule-preview-strip .schedule-cell {
    flex: 1;
    width: auto;
    min-width: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CREDENTIAL ALERTS
   ═══════════════════════════════════════════════════════════════════════════ */

.credential-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.credential-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    border-radius: 6px;
    background: var(--portal-surface);
    font-size: 0.8rem;
}

.credential-label {
    color: var(--portal-text);
}

.credential-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

.cred-ok       { background: rgba(52, 211, 153, 0.15); color: #34d399; }
.cred-warning  { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }
.cred-critical { background: rgba(248, 113, 113, 0.15); color: #f87171; }
.cred-expired  { background: rgba(248, 113, 113, 0.25); color: #f87171; font-weight: 700; }
.cred-unknown  { background: rgba(107, 118, 148, 0.15); color: #6b7694; }

/* Dashboard credential alert card */
.credential-alert-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    margin-bottom: 4px;
}

.credential-alert-item i {
    font-size: 0.75rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOS (HOURS OF SERVICE) PANEL
   ═══════════════════════════════════════════════════════════════════════════ */

.hos-panel {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.hos-gauge {
    flex: 1;
    min-width: 80px;
    text-align: center;
    padding: 8px 6px;
    border-radius: var(--radius-sm);
    background: var(--portal-surface);
}

.hos-gauge-value {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
}

.hos-gauge-label {
    font-size: 0.65rem;
    color: var(--portal-text-muted);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.hos-status {
    font-size: 0.7rem;
    color: var(--portal-text-muted);
    text-align: center;
    margin-top: 6px;
}

.hos-status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.7rem;
}

.hos-gauge-desc {
    font-size: 0.6rem;
    color: var(--portal-text-muted);
    margin-top: 2px;
    opacity: 0.7;
}

.hos-alert {
    font-size: 0.72rem;
    color: var(--portal-warning);
    text-align: center;
    margin-top: 6px;
    font-weight: 500;
}

.hos-driving  { color: var(--portal-success); }
.hos-onDuty   { color: var(--portal-warning); }
.hos-offDuty  { color: var(--portal-primary); }
.hos-sleeper  { color: var(--portal-text-muted); }

/* ── Upcoming Holidays ────────────────────────────────────────────────── */

.holiday-grid {
    display: grid;
    grid-template-columns: 1fr auto auto auto auto;
    gap: 0;
}

.holiday-row {
    display: contents;
}

.holiday-row > div {
    padding: 0.4rem 0.5rem 0.4rem 0;
    border-bottom: 1px solid var(--portal-border);
}

.holiday-row:last-child > div {
    border-bottom: none;
}

.holiday-name {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--portal-text);
}

.holiday-badge {
    text-align: center;
    min-width: 3.5rem;
}

.holiday-day {
    font-size: 0.8rem;
    color: var(--portal-text-muted);
    text-align: right;
    white-space: nowrap;
}

.holiday-date {
    font-size: 0.8rem;
    color: var(--portal-text-secondary);
    text-align: right;
    white-space: nowrap;
}

.holiday-countdown {
    font-size: 0.8rem;
    text-align: right;
    min-width: 4rem;
    white-space: nowrap;
}

.holiday-today {
    font-weight: 700;
    color: var(--portal-success);
}

.holiday-soon {
    color: var(--portal-warning);
    font-weight: 600;
}

.holiday-later {
    color: var(--portal-text-muted);
}

.holiday-schedule {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    vertical-align: middle;
}

.holiday-not-posted {
    color: var(--portal-text-muted);
    font-weight: 400;
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCHEDULE PAGE — BACK LINK
   ═══════════════════════════════════════════════════════════════════════════ */

.portal-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--portal-text-secondary);
    text-decoration: none;
    font-size: 0.85rem;
    margin-bottom: 12px;
}

.portal-back-link:hover {
    color: var(--portal-primary);
}

/* Rotation info tag */
.rotation-tag {
    display: inline-block;
    font-size: 0.7rem;
    color: var(--portal-text-muted);
    background: var(--portal-surface);
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 8px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PLANNING BOARD — GANTT GRID
   ═══════════════════════════════════════════════════════════════════════════ */

.gantt-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.gantt-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
    table-layout: fixed;
    min-width: 900px;
}

/* ─── Header ───────────────────────────────────────────────────────────── */

.gantt-th-driver {
    position: sticky;
    left: 0;
    z-index: 3;
    background: var(--portal-card-bg);
    width: 130px;
    min-width: 130px;
    padding: 6px 8px;
    text-align: left;
    color: var(--portal-text-secondary);
    font-weight: 600;
    border-bottom: 1px solid var(--portal-border);
}

.gantt-th-meta {
    width: 40px;
    min-width: 40px;
    padding: 6px 4px;
    text-align: center;
    color: var(--portal-text-muted);
    font-weight: 600;
    font-size: 0.65rem;
    border-bottom: 1px solid var(--portal-border);
    background: var(--portal-card-bg);
}

.gantt-th-date {
    width: 60px;
    min-width: 60px;
    padding: 4px 2px;
    text-align: center;
    color: var(--portal-text-secondary);
    font-weight: 500;
    border-bottom: 1px solid var(--portal-border);
    background: var(--portal-card-bg);
}

.gantt-date-day {
    font-size: 0.65rem;
    color: var(--portal-text-muted);
    text-transform: uppercase;
}

.gantt-date-num {
    font-size: 0.7rem;
}

.gantt-th-date.gantt-weekend { background: rgba(107, 118, 148, 0.04); }
.gantt-th-date.gantt-today-col {
    background: rgba(77, 159, 255, 0.08);
    border-bottom: 2px solid var(--portal-primary);
}

/* ─── Body ─────────────────────────────────────────────────────────────── */

.gantt-row {
    border-bottom: 1px solid var(--portal-border);
}

.gantt-row:hover {
    background: rgba(255, 255, 255, 0.02);
}

.gantt-row-hold {
    opacity: 0.6;
}

.gantt-td-driver {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--portal-card-bg);
    padding: 5px 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-right: 1px solid var(--portal-border);
}

.gantt-row:hover .gantt-td-driver {
    background: var(--portal-card-bg-hover);
}

.gantt-driver-name {
    color: var(--portal-text);
    font-weight: 500;
    font-size: 0.72rem;
}

.gantt-hold-badge {
    display: inline-block;
    font-size: 0.55rem;
    font-weight: 700;
    color: var(--portal-danger);
    background: var(--portal-danger-dim);
    padding: 1px 4px;
    border-radius: 3px;
    margin-left: 4px;
    vertical-align: middle;
}

.gantt-td-meta {
    padding: 5px 4px;
    text-align: center;
    color: var(--portal-text-muted);
    font-size: 0.65rem;
    background: var(--portal-card-bg);
}

.gantt-td-creds {
    padding: 5px 4px;
    text-align: center;
    white-space: nowrap;
    background: var(--portal-card-bg);
}

/* Credential badges in Gantt */
.cred-badge {
    display: inline-block;
    font-size: 0.5rem;
    font-weight: 700;
    width: 14px;
    height: 14px;
    line-height: 14px;
    text-align: center;
    border-radius: 3px;
    margin: 0 1px;
}

.cred-h { background: rgba(248, 113, 113, 0.2); color: #f87171; }
.cred-t { background: rgba(77, 159, 255, 0.2);  color: #4d9fff; }
.cred-c { background: rgba(52, 211, 153, 0.2);  color: #34d399; }
.cred-m { background: rgba(251, 191, 36, 0.2);  color: #fbbf24; }

/* ─── Date Cells ───────────────────────────────────────────────────────── */

.gantt-cell {
    padding: 3px 2px;
    text-align: center;
    cursor: pointer;
    border-right: 1px solid rgba(46, 52, 70, 0.3);
    transition: background 0.15s ease;
    height: 28px;
    vertical-align: middle;
}

.gantt-cell:hover {
    filter: brightness(1.15);
    outline: 1px solid var(--portal-primary);
    outline-offset: -1px;
}

.gantt-cell.gantt-locked {
    cursor: default;
}

.gantt-cell.gantt-locked:hover {
    filter: none;
    outline: none;
}

.gantt-cell.gantt-weekend {
    background: rgba(107, 118, 148, 0.03);
}

.gantt-cell.gantt-today-col {
    background: rgba(77, 159, 255, 0.04);
}

.gantt-cell.gantt-cell-active {
    outline: 2px solid var(--portal-primary);
    outline-offset: -2px;
}

.gantt-cell-label {
    font-size: 0.6rem;
    font-weight: 600;
    line-height: 1.1;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Manual entry indicator (subtle dot) */
.gantt-manual .gantt-cell-label::after {
    content: '';
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    margin-left: 2px;
    vertical-align: super;
    opacity: 0.5;
}

/* ─── Category Colors ──────────────────────────────────────────────────── */

.gantt-cat-customer    { background: rgba(59, 130, 246, 0.18); color: #60a5fa; }
.gantt-cat-pre_planned { background: rgba(52, 211, 153, 0.15); color: #34d399; }
.gantt-cat-available   { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }
.gantt-cat-home_time   { background: rgba(6, 182, 212, 0.15);  color: #06b6d4; }
.gantt-cat-leave       { background: rgba(168, 85, 247, 0.15); color: #a855f7; }
.gantt-cat-off         { background: rgba(77, 159, 255, 0.12); color: #4d9fff; }
.gantt-cat-breakdown   { background: rgba(249, 115, 22, 0.15); color: #fb923c; }
.gantt-cat-working     { background: rgba(52, 211, 153, 0.12); color: #34d399; }
.gantt-cat-training    { background: rgba(6, 182, 212, 0.12);  color: #06b6d4; }
.gantt-cat-absence     { background: rgba(251, 191, 36, 0.12); color: #fbbf24; }
.gantt-cat-other       { background: rgba(107, 118, 148, 0.1); color: #6b7694; }
.gantt-cat-empty       { background: transparent; color: var(--portal-text-muted); }

/* ─── Summary Footer ──────────────────────────────────────────────────── */

.gantt-summary-row {
    border-top: 1px solid var(--portal-border);
}

.gantt-summary-row:first-child {
    border-top: 2px solid var(--portal-border-light);
}

.gantt-summary-label {
    font-weight: 600;
    font-size: 0.65rem;
    color: var(--portal-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.gantt-summary-cell {
    padding: 3px 2px;
    text-align: center;
    border-right: 1px solid rgba(46, 52, 70, 0.3);
}

.gantt-summary-val {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 18px;
    padding: 1px 4px;
    border-radius: 3px;
}

/* ─── Legend ────────────────────────────────────────────────────────────── */

.gantt-legend {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 0.7rem;
}

.gantt-legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--portal-text-muted);
}

.legend-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

/* ─── Cell Editor Popover ──────────────────────────────────────────────── */

.gantt-cell-editor {
    position: absolute;
    z-index: 1000;
    width: 260px;
    background: var(--portal-card-bg);
    border: 1px solid var(--portal-border-light);
    border-radius: var(--radius-md, 8px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.cell-editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    border-bottom: 1px solid var(--portal-border);
}

.cell-editor-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--portal-text);
}

.cell-editor-close {
    background: none;
    border: none;
    color: var(--portal-text-muted);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

.cell-editor-close:hover {
    color: var(--portal-text);
}

.cell-editor-body {
    padding: 8px 10px 10px;
}

.cell-editor-section {
    margin-bottom: 8px;
}

.cell-editor-label {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--portal-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 4px;
}

.cell-editor-statuses {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.status-btn {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
}

.status-btn:hover {
    filter: brightness(1.2);
    border-color: currentColor;
}

.status-btn.active {
    border-color: currentColor;
    filter: brightness(1.3);
}

.cell-editor-actions {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--portal-border);
}

/* Portal input styling for planning editor */
.portal-input {
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    color: var(--portal-text);
    font-size: 0.75rem;
}

.portal-input:focus {
    background: var(--portal-surface);
    border-color: var(--portal-primary);
    color: var(--portal-text);
    box-shadow: 0 0 0 2px var(--portal-primary-glow);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ERROR-TO-FIELD HIGHLIGHTING (load detail)
   ═══════════════════════════════════════════════════════════════════════════ */

.detail-row.field-has-error {
    background: var(--portal-danger-dim);
    border-left: 2px solid var(--portal-danger);
    border-radius: var(--radius-sm);
    padding-left: 0.5rem;
}
.detail-row.field-has-error .detail-value {
    color: var(--portal-danger);
}

.delivery-field.field-has-error {
    background: var(--portal-danger-dim);
    border-left: 2px solid var(--portal-danger);
    border-radius: var(--radius-sm);
    padding-left: 0.4rem;
}
.delivery-field.field-has-error .delivery-field-value {
    color: var(--portal-danger);
}

.delivery-location.field-has-error {
    color: var(--portal-danger);
}

.hero-meta-item.field-has-error {
    color: var(--portal-danger);
}
.hero-meta-item.field-has-error .hero-meta-value {
    color: var(--portal-danger);
}

/* Tap-to-scroll: issue list items are tappable */
.issues-list li {
    cursor: pointer;
}
.issues-list li:active {
    opacity: 0.7;
}

/* Pulse animation when scrolling to a highlighted field */
@keyframes field-error-pulse {
    0%, 100% { box-shadow: none; }
    50% { box-shadow: 0 0 0 3px var(--portal-danger); }
}
.field-error-pulse {
    animation: field-error-pulse 0.75s ease 2;
}

/* ─── Pay Blocked Notices ─────────────────────────────── */
.pay-blocked-notice {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.pay-blocked-card {
    text-align: center;
    padding: 1.5rem 1rem;
    color: var(--portal-warning);
}
.pay-blocked-card i {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    display: block;
}
.pay-blocked-text {
    font-weight: 600;
    margin-bottom: 0.25rem;
}
.pay-blocked-subtext {
    font-size: 0.8rem;
    color: var(--portal-text-muted);
}

/* Softer review card (replaces pay-blocked for cryo loads) */
.pay-review-card {
    text-align: center;
    padding: 1rem;
    color: var(--portal-warning);
    background: var(--portal-warning-dim);
    border-radius: 4px;
    border-left: 3px solid var(--portal-warning);
}
.pay-review-card i {
    font-size: 1.25rem;
    margin-bottom: 0.4rem;
    display: block;
}
.pay-review-text {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--portal-text-secondary);
}

.pay-partial-note {
    font-size: 0.75rem;
    color: var(--portal-warning);
    padding: 0.25rem 0;
}

/* Guarantee breakdown — blocked week (legacy, no longer used) */
.guarantee-week-blocked {
    opacity: 0.6;
}
.guarantee-blocked-notice {
    padding: 0.75rem;
    color: var(--portal-warning);
    font-size: 0.8rem;
    text-align: center;
}

/* ── Guarantee week status borders (loads page) ─────────────────────── */
.guarantee-week-clean {
    border-left: 3px solid var(--portal-success);
    background: var(--portal-success-dim);
    padding-left: 0.5rem;
    border-radius: 4px;
}
.guarantee-week-errored {
    border-left: 3px solid var(--portal-warning);
    background: var(--portal-warning-dim);
    padding-left: 0.5rem;
    border-radius: 4px;
}
.guarantee-error-notice {
    color: var(--portal-warning);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0;
    margin-bottom: 0.25rem;
}

/* Dashboard product card — blocked/partial stats (legacy, no longer used) */
.summary-stat.stat-blocked {
    color: var(--portal-text-muted);
}
.summary-stat.stat-partial {
    /* default styling, warning icon added via JS */
}

/* ── Pay week grouping with status borders ──────────────────────────── */
.pay-week-group {
    padding: 0.2rem 0.5rem;
    margin: 0.15rem 0;
    border-radius: 4px;
    border-left: 3px solid transparent;
}
.pay-week-clean {
    border-left-color: var(--portal-success);
    background: var(--portal-success-dim);
}
.pay-week-errored {
    border-left-color: var(--portal-warning);
    background: var(--portal-warning-dim);
}

/* Error count chip inside errored weeks */
.pay-error-indicator {
    display: inline-block;
    background: var(--portal-warning-dim);
    color: var(--portal-warning);
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
}