:root {
    /* ---- Executive Navy & Gold design tokens --------------------------------
       One source for colour, type, spacing, sizing, layering and motion.
       Contrast of every text/background pair used is recorded in
       docs/UI-REDESIGN-AUDIT.md §5. Mirrored in app/config/brand.php and
       classes/EmailTemplate.php. Breakpoints used throughout:
       360 / 390 (phones), 768 (tablet), 991 (drawer navigation),
       1024, 1280, 1440 (desktop). */

    /* Navy */
    --ll-navy-950: #0B1628;   /* navigation dark */
    --ll-navy-900: #10213A;   /* headings, primary navy */
    --ll-navy-800: #172A45;   /* navigation lighter, active item */
    --ll-navy-700: #1E3A66;   /* links, secondary actions */
    --ll-navy-600: #2B4C80;
    --ll-navy-100: #E7ECF3;
    --ll-navy-50:  #F3F5F9;

    /* Champagne gold — accents and the primary action only */
    --ll-gold-700: #7A5A1E;   /* gold-coloured text/icons on light: 6.4:1 */
    --ll-gold-600: #A57F33;   /* border of gold buttons, small marks */
    --ll-gold-500: #C49A45;   /* primary gold */
    --ll-gold-400: #D6B46E;
    --ll-gold-300: #E8D7B0;   /* light gold */
    --ll-gold-100: #F7F0E0;   /* pale gold surface */
    --ll-gold-50:  #FBF7EE;
    --ll-on-gold: #172033;    /* text on gold: 6.2:1 */

    /* Neutrals (warm) */
    --ll-heading: #10213A;
    --ll-ink: #263445;        /* body text: 11.6:1 on canvas */
    --ll-ink-2: #34404F;
    --ll-muted: #526173;      /* secondary text: 5.8:1 on canvas */
    --ll-line: #E3E5E8;
    --ll-line-strong: #CDD1D7;
    --ll-canvas: #F6F5F1;     /* warm off-white workspace */
    --ll-surface: #FFFFFF;
    --ll-surface-2: #FAF9F6;  /* table headers, quiet panels */

    /* Gradients — navigation, the gold button, compact page intros only */
    --ll-grad-navy: linear-gradient(135deg, var(--ll-navy-700) 0%, var(--ll-navy-900) 100%);
    --ll-grad-navy-deep: linear-gradient(180deg, #13243F 0%, #0B1628 100%);
    --ll-grad-gold: linear-gradient(180deg, #D2AB58 0%, #C49A45 100%);
    --ll-grad-sheen: linear-gradient(90deg, rgba(196, 154, 69, 0) 0%, rgba(196, 154, 69, .45) 50%, rgba(196, 154, 69, 0) 100%);
    --ll-grad-intro: linear-gradient(100deg, #FBF7EE 0%, #FFFFFF 70%);

    /* Spacing scale: 4 8 12 16 24 32 48 */
    --ll-space-1: 4px;
    --ll-space-2: 8px;
    --ll-space-3: 12px;
    --ll-space-4: 16px;
    --ll-space-5: 24px;
    --ll-space-6: 32px;
    --ll-space-7: 48px;
    --ll-page-pad: clamp(16px, 2.4vw, 32px);

    /* Sizes */
    --ll-control-h: 42px;
    --ll-control-h-sm: 34px;
    --ll-control-h-lg: 48px;
    --ll-touch: 44px;
    --ll-content-max: 1440px;
    --ll-form-max: 760px;
    --ll-read-max: 72ch;
    --ll-sidebar-w: 268px;
    --ll-topbar-h: 60px;

    /* Radii, borders, shadows */
    --ll-radius-sm: 7px;      /* buttons, fields */
    --ll-radius: 10px;
    --ll-radius-lg: 12px;     /* cards */
    --ll-shadow-xs: 0 1px 2px rgba(16, 33, 58, .05);
    --ll-shadow-sm: 0 1px 2px rgba(16, 33, 58, .04), 0 4px 12px -6px rgba(16, 33, 58, .10);
    --ll-shadow: 0 1px 3px rgba(16, 33, 58, .05), 0 12px 28px -14px rgba(16, 33, 58, .16);
    --ll-shadow-lg: 0 24px 60px -20px rgba(11, 22, 40, .35);

    /* Focus: a white halo inside a navy ring reads on white, warm, gold and
       navy surfaces alike. */
    --ll-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px #1E3A66;
    --ll-ring-dark: 0 0 0 2px #0B1628, 0 0 0 4px #E8D7B0;

    /* Type */
    --ll-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --ll-font-display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif; /* page titles only */
    --ll-text-xs: .75rem;     /* 12px */
    --ll-text-sm: .8125rem;   /* 13px */
    --ll-text-md: .9375rem;   /* 15px — routine interface text */
    --ll-text-base: 1rem;     /* 16px — reading text */
    --ll-text-lg: 1.125rem;   /* 18px — section headings */
    --ll-text-xl: 1.25rem;    /* 20px */
    --ll-title: 1.875rem;     /* 30px page titles */

    /* Layering and motion */
    --ll-z-sticky: 20;
    --ll-z-dropdown: 1000;
    --ll-z-overlay: 1040;
    --ll-z-drawer: 1045;
    --ll-z-modal: 1055;
    --ll-z-toast: 1080;
    --ll-ease: cubic-bezier(.2, .6, .2, 1);
    --ll-dur: .16s;

    /* Older rules read these names; they now resolve to the palette above. */
    --hma-primary: var(--ll-navy-900);
    --hma-secondary: var(--ll-navy-700);
    --hma-accent: var(--ll-gold-500);
    --hma-bg: var(--ll-canvas);
    --hma-surface: var(--ll-surface);
    --hma-surface-soft: var(--ll-surface-2);
    --hma-border: var(--ll-line);
    --hma-text: var(--ll-ink);
    --hma-muted: var(--ll-muted);
    --hma-radius-sm: var(--ll-radius-sm);
    --hma-radius: var(--ll-radius);
    --hma-radius-lg: var(--ll-radius-lg);
    --hma-shadow-sm: var(--ll-shadow-sm);
    --hma-shadow: var(--ll-shadow);
    --hma-shadow-strong: var(--ll-shadow-lg);

    --bs-primary: #10213A;
    --bs-primary-rgb: 16, 33, 58;
    --bs-secondary: #1E3A66;
    --bs-body-bg: #F6F5F1;
    --bs-body-color: #263445;
    --bs-border-color: #E3E5E8;
    --bs-link-color: #1E3A66;
    --bs-link-color-rgb: 30, 58, 102;
    --bs-link-hover-color: #10213A;
    --bs-link-hover-color-rgb: 16, 33, 58;
    --bs-body-font-family: var(--ll-font);
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    font-family: var(--ll-font);
    letter-spacing: 0;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    background: var(--ll-canvas);
    color: var(--hma-text);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    letter-spacing: -0.01em;
    color: #1E2C3D;
}

.portal-content {
    padding-top: 1rem;
    animation: fadeSlideIn 0.36s ease;
}

.card {
    border: 1px solid var(--hma-border);
    border-radius: var(--hma-radius);
    background: var(--hma-surface);
    box-shadow: var(--hma-shadow-sm);
}

.card .card-body {
    padding: 1rem 1.06rem;
}

.table {
    margin-bottom: 0;
    --bs-table-bg: transparent;
}

.table thead th {
    border-bottom-width: 1px;
    border-bottom-color: #D5DBE4;
    color: #2A3A4F;
    font-size: 0.78rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-weight: 800;
    padding-top: 0.68rem;
    padding-bottom: 0.68rem;
    white-space: nowrap;
}

.table tbody td {
    border-color: #E6E9EF;
    padding-top: 0.68rem;
    padding-bottom: 0.68rem;
    vertical-align: middle;
    font-size: 0.9rem;
}

.table tbody tr:hover {
    background: #F7F8FA;
}

.table-responsive {
    border-radius: 12px;
}

.form-control,
.form-select {
    border-radius: var(--hma-radius-sm);
    border-color: #CDD1D7;
    box-shadow: none;
}

.form-control:focus,
.form-select:focus {
    border-color: #8E9DB5;
    box-shadow: 0 0 0 0.2rem rgba(30, 58, 102, 0.14);
}

.form-label {
    font-weight: 600;
    color: #2A3A4F;
    font-size: 0.9375rem;   /* 15px floor for form labels */
    line-height: 1.45;
    margin-bottom: 0.35rem;
}

.form-text code,
.card-body code {
    color: #2A3A4F;
    background: #EEF2F8;
    border-radius: 4px;
    padding: 0.1rem 0.3rem;
}

.form-text {
    font-size: 0.875rem;    /* 14px floor for help text */
    line-height: 1.5;
    color: #4A5A70;
}

.form-control,
.form-select {
    font-size: 1rem;        /* 16px: also stops iOS zooming the field on focus */
    line-height: 1.5;
}

.btn {
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9375rem;   /* 15px floor for buttons */
    line-height: 1.4;
    letter-spacing: 0.01em;
}

.btn-sm {
    font-size: 0.875rem;
}

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

.btn-primary:hover,
.btn-primary:focus-visible {
    background: #172A45;
    border-color: #172A45;
}

.btn-outline-primary {
    border-color: #9AA8BF;
    color: var(--hma-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus-visible {
    background: var(--hma-primary);
    border-color: var(--hma-primary);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible {
    outline: 3px solid #A57F33;
    outline-offset: 2px;
}

.btn-warning,
.bg-warning {
    background-color: var(--hma-accent) !important;
    border-color: var(--hma-accent) !important;
}

.alert {
    border-radius: 12px;
    border-width: 1px;
}

.metric-card {
    overflow: hidden;
    position: relative;
}

.metric-card .accent-strip {
    position: absolute;
    inset: 0 auto 0 0;
    width: 6px;
    background: var(--hma-accent);
}

.admin-kpi-strip {
    background: transparent;
    border: 0;
    box-shadow: none;
}

.admin-kpi-strip .card-body {
    padding: 0;
}

.admin-kpi-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.admin-kpi-item {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    padding: 0.88rem 0.95rem;
    border-radius: 14px;
    border: 1px solid #DCE2EB;
    border-left: 5px solid var(--hma-accent);
    background: #FFF;
    box-shadow: 0 10px 22px rgba(16, 33, 58, 0.08);
}

.admin-kpi-link {
    color: inherit;
    text-decoration: none;
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.admin-kpi-link:hover,
.admin-kpi-link:focus-visible {
    color: inherit;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 14px 24px rgba(16, 33, 58, 0.14);
}

.admin-kpi-label {
    min-width: 0;
    font-size: 0.8rem;
    font-weight: 700;
    color: #36506D;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.25;
}

.admin-kpi-value {
    flex-shrink: 0;
    font-size: 1.62rem;
    font-weight: 800;
    line-height: 1;
    color: var(--hma-primary);
}

.admin-progress-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    max-height: 390px;
    overflow-y: auto;
    padding-right: 0.2rem;
}

.admin-progress-item {
    border: 1px solid #D7E3F1;
    border-radius: 12px;
    background: var(--hma-surface-soft);
    padding: 0.72rem 0.76rem;
}

.admin-progress-link {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.admin-progress-link:hover,
.admin-progress-link:focus-visible {
    transform: translateY(-1px);
    box-shadow: var(--hma-shadow-sm);
    border-color: #B6C1D2;
    color: inherit;
}

.admin-progress-item.is-complete {
    background: #EAF9EF;
    border-color: #BFEBCB;
}

.admin-progress-item.is-complete .admin-progress-name {
    color: #166534;
}

.admin-progress-item.is-complete .admin-doc-box {
    background: #CFF3D8;
    border-color: #8DD9A8;
    color: #166534;
}

.admin-progress-item.is-complete .admin-doc-item.is-checked .admin-doc-box {
    background: #7DCC95;
    border-color: #7DCC95;
    color: #fff;
}

.admin-progress-item.is-complete .admin-doc-name {
    color: #2F5E3D;
}

.guidelines-hero {
    border: 1px solid rgba(16, 33, 58, 0.12);
    background:
        radial-gradient(circle at top right, rgba(196, 154, 69, 0.12), transparent 34%),
        linear-gradient(180deg, #fff, #F7F8FA);
}

.guidelines-kicker {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--hma-muted);
    margin-bottom: 0.35rem;
}

.guidelines-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.guidelines-note {
    background: #F1F3F7;
    border: 1px solid #DCE2EB;
    color: #2B4C80;
    border-radius: 12px;
    padding: 0.8rem 0.9rem;
    font-size: 0.92rem;
}

.guidelines-summary-list {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.guidelines-summary-item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    color: #334155;
    font-size: 0.92rem;
    line-height: 1.45;
}

.guidelines-summary-bullet {
    min-width: 1.5rem;
    min-height: 1.5rem;
    padding: 0.12rem 0.48rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #D7F5E4;
    color: #0C7A47;
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1.1;
    text-align: center;
}

.guidelines-accordion .accordion-item {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #D7E3F1;
}

.guidelines-accordion .accordion-item + .accordion-item {
    margin-top: 0.75rem;
}

.guidelines-accordion .accordion-button {
    background: #F7F8FA;
    font-weight: 700;
    align-items: flex-start;
    gap: 0.75rem;
    text-align: left;
    white-space: normal;
}

.guidelines-accordion .accordion-button:not(.collapsed) {
    background: #F1F3F7;
    color: var(--hma-primary);
    box-shadow: none;
}

.admin-progress-topline {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.35rem;
}

.admin-progress-name {
    min-width: 0;
    font-weight: 700;
    font-size: 0.86rem;
    color: #1F2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-progress-percent {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--hma-primary);
}

.admin-doc-checklist {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.42rem 0.6rem;
    overflow: visible;
}

.admin-doc-item {
    display: flex;
    align-items: center;
    gap: 0.42rem;
    min-width: 0;
    flex: 1 1 calc(50% - 0.3rem);
}

.admin-doc-box {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid #CDD1D7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1;
    flex-shrink: 0;
}

.admin-doc-item.is-checked .admin-doc-box {
    background: #0D8A4C;
    border-color: #0D8A4C;
    color: #FFF;
}

.admin-doc-item.is-pending .admin-doc-box {
    background: #FFF;
    color: transparent;
}

.admin-doc-name {
    font-size: 0.72rem;
    color: #415066;
    white-space: normal;
    overflow: hidden;
    text-overflow: clip;
    line-height: 1.25;
}

.admin-progress-track {
    height: 8px;
    background: #E8EBF0;
}

.admin-progress-track .progress-bar {
    background: linear-gradient(90deg, var(--hma-secondary), var(--hma-primary));
}

.admin-progress-next {
    margin-top: 0.4rem;
    font-size: 0.76rem;
    color: #5B697D;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.compact-metric-strip .card-body {
    padding: 0.78rem 0.92rem;
}

.compact-metric-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.62rem;
    align-items: center;
}

.compact-metric-item {
    background: rgba(16, 33, 58, 0.04);
    border: 1px solid rgba(16, 33, 58, 0.08);
    border-radius: 12px;
    padding: 0.48rem 0.62rem;
    min-width: 0;
}

.compact-metric-label {
    font-size: 0.72rem;
    color: var(--hma-muted);
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.compact-metric-value {
    margin-top: 0.2rem;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.progress-slim {
    height: 9px;
}

.progress-width-0 { width: 0%; }
.progress-width-5 { width: 5%; }
.progress-width-10 { width: 10%; }
.progress-width-15 { width: 15%; }
.progress-width-20 { width: 20%; }
.progress-width-25 { width: 25%; }
.progress-width-30 { width: 30%; }
.progress-width-35 { width: 35%; }
.progress-width-40 { width: 40%; }
.progress-width-45 { width: 45%; }
.progress-width-50 { width: 50%; }
.progress-width-55 { width: 55%; }
.progress-width-60 { width: 60%; }
.progress-width-65 { width: 65%; }
.progress-width-70 { width: 70%; }
.progress-width-75 { width: 75%; }
.progress-width-80 { width: 80%; }
.progress-width-85 { width: 85%; }
.progress-width-90 { width: 90%; }
.progress-width-95 { width: 95%; }
.progress-width-100 { width: 100%; }

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

.pending-doc-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.pending-doc-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.86rem;
    color: #334155;
}

.pending-doc-checklist {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.pending-doc-item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    max-width: 100%;
}

.pending-doc-box {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    border: 1px solid transparent;
    flex-shrink: 0;
}

.pending-doc-box-missing {
    background: #EF4444;
    border-color: #DC2626;
}

.pending-doc-box-resubmission {
    background: #F59E0B;
    border-color: #D97706;
}

.pending-doc-name {
    font-size: 0.84rem;
    color: #1F2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.programme-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.programme-chip-diploma {
    background: #1E3A66;
    color: #FFF;
}

.programme-chip-other {
    background: #DCE2EB;
    color: #1E3A66;
}

.programme-chip-generic {
    background: #E5E7EB;
    color: #374151;
}

.email-attachments-grid {
    margin-top: 0.15rem;
}

.email-generator-hero {
    border: 1px solid rgba(16, 33, 58, 0.12);
    background:
        radial-gradient(circle at top right, rgba(196, 154, 69, 0.12), transparent 32%),
        linear-gradient(180deg, #fff, #F7F8FA);
}

.email-generator-note {
    min-width: 220px;
    max-width: 300px;
    padding: 0.8rem 0.95rem;
    border-radius: 14px;
    border: 1px solid #E3E5E8;
    background: #FAF9F6;
}

.email-generator-preview {
    min-height: 260px;
}

.email-attachment-card {
    border: 1px solid #DBE3EF;
    border-radius: 12px;
    background: #FAF9F6;
    padding: 0.68rem 0.72rem;
    min-height: 86px;
}

.email-attachment-check {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin: 0;
}

.email-attachment-check .form-check-input {
    margin: 0.2rem 0 0;
}

.email-attachment-name {
    font-size: 0.96rem;
    line-height: 1.25;
    color: #1F2937;
}

.documents-table th:nth-child(2),
.documents-table td:nth-child(2) {
    width: 190px;
    text-align: center;
    vertical-align: middle;
}

.documents-table th:nth-child(4),
.documents-table td:nth-child(4) {
    width: 220px;
}

.documents-table th:nth-child(5),
.documents-table td:nth-child(5) {
    width: 260px;
}

.documents-table td:nth-child(2) .status-pill {
    min-width: 165px;
    padding: 0.38rem 0.7rem;
}

.documents-table .current-file-cell {
    max-width: 280px;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.25;
}

.documents-file-meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.4rem;
}

.documents-file-name {
    display: block;
    max-width: 100%;
    color: #334155;
    font-size: 0.89rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.documents-file-actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.documents-table .remarks-cell {
    color: #475569;
    line-height: 1.35;
}

.documents-upload-form {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 220px;
}

.documents-upload-input {
    font-size: 0.82rem;
}

.col-checklist-shell {
    padding-top: 1.05rem;
}

.col-checklist-header {
    padding-bottom: 0.35rem;
    border-bottom: 1px solid #E6E9EF;
}

.col-checklist-item {
    border-color: #E3E5E8 !important;
    background: #FBFBFC;
}

.col-checklist-title {
    font-size: 1.02rem;
    line-height: 1.25;
    margin-bottom: 0.14rem;
}

.col-checklist-description {
    font-size: 0.96rem;
    line-height: 1.3;
}

.col-checklist-item-head > div {
    flex: 1 1 auto;
    min-width: 0;
}

.col-checklist-item-head {
    flex-wrap: nowrap !important;
}

.col-checklist-status {
    min-width: 98px;
    text-align: center;
    justify-content: center;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: auto;
    align-self: flex-start;
}

.col-checklist-form .form-label {
    margin-bottom: 0.28rem;
}

.col-checklist-form .form-control {
    min-height: 44px;
}

.col-checklist-form .btn {
    min-height: 44px;
}

.col-checklist-latest-row {
    border-top: 1px dashed #E3E5E8;
    padding-top: 0.52rem;
}

.col-checklist-latest-meta {
    min-width: 0;
    overflow-wrap: anywhere;
}

.col-checklist-latest-actions {
    flex-shrink: 0;
}

.document-preview-frame {
    display: block;
    width: 100%;
    height: min(78vh, 860px);
    border: 0;
    background: #fff;
}

.recent-activity-scroll {
    max-height: 260px;
    overflow-y: auto;
    scrollbar-width: thin;
    padding-right: 0.3rem;
}

.recent-activity-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    line-height: 1.2;
    margin: 0;
    font-size: 0.89rem;
}

.recent-activity-action {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recent-activity-time {
    flex-shrink: 0;
    white-space: nowrap;
}

.timeline-scroll {
    max-height: 245px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.timeline-scroll thead th {
    position: sticky;
    top: 0;
    background: var(--hma-surface);
    z-index: 1;
}

.status-pill {
    padding: 0.34rem 0.66rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    line-height: 1.1;
    border: 1px solid transparent;
}

.status-Approved {
    background: #D7F5E4;
    color: #0C7A47;
    border-color: #A8E8C5;
}

.status-Rejected {
    background: #FFE1E4;
    color: #B02A37;
    border-color: #F2B7BF;
}

.status-Under-Review,
.status-REQUEST-COL,
.status-Uploaded {
    background: #EEF1F6;
    color: #1E3A66;
    border-color: #CDD1D7;
}

.status-Submitted {
    background: #D7F5E4;
    color: #0C7A47;
    border-color: #A8E8C5;
}

.status-Resubmission-Required,
.status-Draft,
.status-Missing {
    background: #FFF1DE;
    color: #9A570A;
    border-color: #F3D3A4;
}

.status-Initial {
    background: #F1E8FF;
    color: #6D28D9;
    border-color: #D9C4FF;
}

.status-Not-Submitted {
    background: #FFE1E4;
    color: #B02A37;
    border-color: #F2B7BF;
}

/* Document tracker. "Not Uploaded" is a to-do, not a failure, so it reads
   neutral; only work that has come back to the applicant reads as a warning. */
.status-Not-Uploaded {
    background: #EEF1F6;
    color: #3C4A5C;
    border-color: #C6D0DD;
}

.status-Action-Required {
    background: #FFF1DE;
    color: #9A570A;
    border-color: #F3D3A4;
}

.doc-where {
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.doc-where:hover,
.doc-where:focus {
    text-decoration: underline;
}

[data-status-text^="0/"],
[data-status-text^="1/"],
[data-status-text^="2/"],
[data-status-text^="3/"],
[data-status-text^="4/"] {
    background: #EEF1F6;
    color: #1E3A66;
    border-color: #CDD1D7;
}

.status-Pending,
.status-Draft {
    background: #FFF1DE;
    color: #9A570A;
    border-color: #F3D3A4;
}

.status-Paid,
.status-Sent,
.status-Verified,
.status-Waived,
.status-Completed {
    background: #D7F5E4;
    color: #0C7A47;
    border-color: #A8E8C5;
}

.status-Partially-Paid,
.status-Failed,
.status-Needs-Update {
    background: #FFEBD6;
    color: #9A570A;
    border-color: #F3D3A4;
}

.public-shell {
    min-height: 100vh;
}

.route-display {
    display: grid;
    grid-template-columns: auto minmax(80px, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 2.2rem 0 1.6rem;
}

.route-label {
    display: block;
    margin-top: 0.42rem;
    color: #697789;
    font-size: 0.83rem;
    font-weight: 800;
}

.route-display > div:last-child {
    text-align: right;
}

.route-line {
    position: relative;
    height: 2px;
    background: repeating-linear-gradient(90deg, #8EA1B6 0 10px, transparent 10px 18px);
}

.route-line i {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    color: #FFF;
    background: var(--hma-primary);
    transform: translate(-50%, -50%) rotate(8deg);
}

.skyline {
    position: absolute;
    left: -4%;
    right: -4%;
    bottom: 0;
    height: 45%;
    background:
        linear-gradient(145deg, transparent 0 45%, rgba(255, 255, 255, 0.65) 45% 48%, transparent 48% 100%),
        linear-gradient(28deg, rgba(255, 255, 255, 0.72) 0 26%, transparent 26% 100%);
}

.service-item {
    display: flex;
    align-items: center;
    gap: 0.62rem;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.9rem;
    font-weight: 700;
}

.service-item i {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
    color: #D6B46E;
    flex-shrink: 0;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border-radius: 8px;
    border: 1px solid #CDD1D7;
    padding: 0.28rem 0.46rem;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--hma-primary) !important;
    color: #FFF !important;
    border: 1px solid var(--hma-primary) !important;
    border-radius: 8px;
}

.hma-notification-popup {
    border-radius: 16px;
}

.hma-notification-popup-title {
    font-weight: 700;
}

.notif-popup-list {
    max-height: 300px;
    overflow-y: auto;
    padding-right: 0.2rem;
}

.notif-popup-item {
    border: 1px solid #E3E5E8;
    border-radius: 12px;
    padding: 0.7rem 0.8rem;
    margin-bottom: 0.6rem;
    background: #F7F8FA;
}

.notif-popup-item:last-child {
    margin-bottom: 0;
}

.notif-popup-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--hma-primary);
    margin-bottom: 0.2rem;
}

.notif-popup-date {
    font-size: 0.75rem;
    color: var(--hma-muted);
    margin-bottom: 0.35rem;
}

.notif-popup-message {
    font-size: 0.85rem;
    line-height: 1.35;
    color: #1F2D3D;
}

@keyframes fadeSlideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 991px) {
    .compact-metric-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .col-checklist-form .btn {
        min-height: 42px;
    }
}

@media (max-width: 768px) {
    .card .card-body {
        padding: 0.82rem 0.84rem;
    }

    .table thead th {
        font-size: 0.73rem;
    }

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

    .documents-table th:nth-child(2),
    .documents-table td:nth-child(2) {
        width: auto;
    }

    

    .col-checklist-item {
        padding: 0.9rem !important;
    }

    .col-checklist-title {
        font-size: 0.96rem;
    }

    .col-checklist-description {
        font-size: 0.9rem;
    }

    .col-checklist-latest-actions {
        width: 100%;
        display: flex;
        justify-content: flex-end;
    }

    .col-checklist-item-head {
        flex-wrap: wrap !important;
    }

    .col-checklist-status {
        min-width: 92px;
    }

    

    

    

    

    

    

    .route-display {
        grid-template-columns: 1fr;
        gap: 0.7rem;
        padding: 1.4rem 0 1.2rem;
    }

    .route-line {
        width: 100%;
    }

    .route-display > div:last-child {
        text-align: left;
    }

    

    

    
}

@media (max-width: 575px) {
    .compact-metric-row,
    .admin-kpi-row {
        grid-template-columns: 1fr;
    }

    

    

    

    

    

    

    

    

    
}

/* ==========================================================================
   Executive shell — sidebar, top bar, page header, footer
   (includes/header.php + includes/footer.php). Tokens: :root.
   ========================================================================== */
body:has(.portal-shell) { background: var(--ll-canvas); }

.skip-link {
    position: absolute;
    z-index: var(--ll-z-toast);
    top: var(--ll-space-2);
    left: var(--ll-space-2);
    padding: var(--ll-space-2) var(--ll-space-4);
    border-radius: var(--ll-radius-sm);
    color: var(--ll-on-gold);
    background: var(--ll-gold-500);
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-150%);
}
.skip-link:focus { transform: none; outline: 0; box-shadow: var(--ll-ring); }

.portal-shell {
    display: grid;
    grid-template-columns: var(--ll-sidebar-w) minmax(0, 1fr);
    gap: 0;
    min-height: 100vh;
    padding: 0;
    background: var(--ll-canvas);
}

/* ---- Sidebar ---- */
.portal-sidebar {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: var(--ll-space-5) var(--ll-space-3) var(--ll-space-3);
    overflow: hidden;
    border: 0;
    border-radius: 0;
    color: #F3EFE6;
    background: var(--ll-grad-navy-deep);
    box-shadow: none;
}
.brand-block {
    display: block;
    margin: 0 0 var(--ll-space-4);
    padding: 0 var(--ll-space-2) var(--ll-space-4);
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    border-radius: 0;
    background: none;
}
.brand-block { position: relative; }
.portal-drawer-close {
    position: absolute;
    top: -6px;
    right: 0;
    display: none;
    place-items: center;
    width: var(--ll-touch);
    height: var(--ll-touch);
    border: 0;
    border-radius: var(--ll-radius-sm);
    color: #D7DCE4;
    background: transparent;
}
.portal-drawer-close:hover { color: #FFF; background: rgba(255, 255, 255, .08); }
.portal-drawer-close:focus-visible { outline: 0; box-shadow: var(--ll-ring-dark); }
@media (max-width: 991px) { .portal-drawer-close { display: grid; } }
.brand-logo-link { display: block; width: 176px; max-width: 100%; border-radius: var(--ll-radius-sm); }
.brand-logo-link:focus-visible { outline: 0; box-shadow: var(--ll-ring-dark); }
.brand-logo, .brand-logo img { display: block; width: 100%; height: auto; }
.brand-logo--custom { max-height: 64px; object-fit: contain; object-position: left center; }
.brand-context { display: grid; gap: 2px; margin-top: var(--ll-space-3); }
.brand-context__label { color: #9AA6B8; font-size: var(--ll-text-xs); font-weight: 500; }
.brand-context__value { color: #F3EFE6; font-size: var(--ll-text-sm); font-weight: 500; line-height: 1.35; }
.brand-context__chip {
    justify-self: start;
    margin-top: var(--ll-space-2);
    padding: 2px var(--ll-space-2);
    border: 1px solid rgba(232, 215, 176, .35);
    border-radius: 999px;
    color: var(--ll-gold-300);
    font-size: var(--ll-text-xs);
    font-weight: 600;
    letter-spacing: .03em;
    font-variant-numeric: tabular-nums;
}

.portal-nav-label { display: none; }
.portal-nav {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    min-height: 0;
    margin: 0 calc(-1 * var(--ll-space-1));
    padding: 0 var(--ll-space-1) var(--ll-space-3);
    overflow-y: auto;
    scrollbar-color: rgba(255, 255, 255, .2) transparent;
}
.portal-nav .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--ll-space-3);
    width: 100%;
    min-height: 40px;
    padding: var(--ll-space-2) var(--ll-space-3);
    border: 0;
    border-radius: var(--ll-radius-sm);
    color: #D7DCE4;
    background: transparent;
    font-size: var(--ll-text-md);
    font-weight: 400;
    line-height: 1.3;
    text-align: left;
    transition: background-color var(--ll-dur) var(--ll-ease), color var(--ll-dur) var(--ll-ease);
}
.portal-nav .nav-link > i:first-child { flex: 0 0 18px; width: 18px; margin: 0; color: #9AA6B8; font-size: .95rem; text-align: center; }
.portal-nav .nav-link:hover { color: #FFF; background: rgba(255, 255, 255, .06); transform: none; }
.portal-nav .nav-link:hover > i:first-child { color: #D7DCE4; }
/* Active: lighter navy, a thin gold bar, and heavier text — never colour alone. */
.portal-nav .nav-link.active {
    color: #FFF;
    background: var(--ll-navy-800);
    font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
    transform: none;
}
.portal-nav .nav-link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--ll-gold-500);
}
.portal-nav .nav-link.active::after { content: none; }
.portal-nav .nav-link.active > i:first-child { color: var(--ll-gold-400); }
.portal-nav .nav-link:focus-visible { outline: 0; box-shadow: var(--ll-ring-dark); }

.nav-group { margin-top: var(--ll-space-2); padding-top: var(--ll-space-2); border-top: 1px solid rgba(255, 255, 255, .06); }
.nav-group__toggle { cursor: pointer; }
.nav-group__label { flex: 1 1 auto; }
.nav-group__chevron { margin-left: auto; color: #9AA6B8; font-size: .7rem; transition: transform var(--ll-dur) var(--ll-ease); }
.nav-group__toggle[aria-expanded="true"] .nav-group__chevron { transform: rotate(180deg); }
.nav-group--open > .nav-group__toggle { color: #FFF; }
.nav-group__items { display: grid; gap: 2px; margin: 2px 0 var(--ll-space-1); padding-left: var(--ll-space-5); }
.portal-nav .nav-sublink { min-height: 36px; font-size: var(--ll-text-sm); }
.portal-nav .nav-sublink > i:first-child { flex-basis: 16px; width: 16px; font-size: .85rem; }

.portal-sidebar-footer {
    display: block;
    margin-top: var(--ll-space-2);
    padding: var(--ll-space-2) 0 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
}
.portal-sidebar-footer .logout-nav-link,
.portal-sidebar .logout-nav-link {
    display: flex;
    align-items: center;
    gap: var(--ll-space-3);
    width: 100%;
    min-height: 40px;
    padding: var(--ll-space-2) var(--ll-space-3);
    border: 0;
    border-radius: var(--ll-radius-sm);
    color: #D7DCE4;
    background: transparent;
    font-size: var(--ll-text-md);
}
.portal-sidebar .logout-nav-link:hover { color: #FFF; background: rgba(255, 255, 255, .06); }
.portal-sidebar .logout-nav-link:focus-visible { outline: 0; box-shadow: var(--ll-ring-dark); }
.portal-sidebar .logout-nav-link i { color: #9AA6B8; }

/* ---- Main column and top bar ---- */
.portal-main { display: flex; flex-direction: column; min-width: 0; min-height: 100vh; padding: 0; }
.portal-topbar {
    position: sticky;
    top: 0;
    z-index: var(--ll-z-sticky);
    display: flex;
    align-items: center;
    gap: var(--ll-space-3);
    min-height: var(--ll-topbar-h);
    padding: var(--ll-space-2) var(--ll-page-pad);
    border: 0;
    border-bottom: 1px solid var(--ll-line);
    border-radius: 0;
    color: var(--ll-ink);
    background: rgba(255, 255, 255, .92);
    box-shadow: none;
    -webkit-backdrop-filter: saturate(1.2) blur(10px);
    backdrop-filter: saturate(1.2) blur(10px);
}
.portal-topbar::after { content: none; }

.portal-crumbs { flex: 1 1 auto; min-width: 0; }
.portal-crumbs ol { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--ll-space-2); margin: 0; padding: 0; overflow: hidden; list-style: none; }
.portal-crumbs li { display: flex; align-items: center; gap: var(--ll-space-2); min-width: 0; color: var(--ll-muted); font-size: var(--ll-text-sm); white-space: nowrap; }
.portal-crumbs li + li::before { content: '/'; color: var(--ll-line-strong); }
.portal-crumbs li:last-child { min-width: 0; overflow: hidden; color: var(--ll-heading); font-weight: 600; text-overflow: ellipsis; }
.portal-crumbs li:last-child span { overflow: hidden; text-overflow: ellipsis; }
.portal-crumbs a { color: var(--ll-muted); text-decoration: none; }
.portal-crumbs a:hover { color: var(--ll-navy-700); text-decoration: underline; }

.portal-topbar-actions { display: flex; flex: 0 0 auto; align-items: center; gap: var(--ll-space-2); margin-left: auto; }
.topbar-notice {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 var(--ll-space-3);
    border: 1px solid #EFCF8C;
    border-radius: 999px;
    color: #6B4200;
    background: #FFF6E3;
    font-size: var(--ll-text-sm);
    font-weight: 600;
    text-decoration: none;
}
.topbar-notice:hover { color: #4A2E00; background: #FFEFCC; }
.topbar-preview { display: inline-flex; align-items: center; gap: 6px; padding: 4px var(--ll-space-3); border-radius: 999px; color: #6B4200; background: #FFF6E3; font-size: var(--ll-text-sm); font-weight: 600; }

.portal-icon-button {
    position: relative;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--ll-line);
    border-radius: var(--ll-radius-sm);
    color: var(--ll-navy-700);
    background: #FFF;
    text-decoration: none;
}
.portal-icon-button:hover { color: var(--ll-navy-900); border-color: var(--ll-line-strong); background: var(--ll-surface-2); }
.portal-icon-button__count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border: 2px solid #FFF;
    border-radius: 999px;
    color: var(--ll-on-gold);
    background: var(--ll-gold-500);
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

.account-menu__button {
    display: inline-flex;
    align-items: center;
    gap: var(--ll-space-2);
    max-width: 240px;
    min-height: 40px;
    padding: 3px var(--ll-space-3) 3px 3px;
    border: 1px solid var(--ll-line);
    border-radius: 999px;
    color: var(--ll-heading);
    background: #FFF;
    font-size: var(--ll-text-sm);
    font-weight: 600;
}
.account-menu__button:hover { border-color: var(--ll-line-strong); background: var(--ll-surface-2); }
.account-menu__button:focus-visible { outline: 0; box-shadow: var(--ll-ring); }
.account-menu__avatar {
    display: grid;
    flex: none;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: var(--ll-gold-300);
    background: var(--ll-navy-900);
    font-size: var(--ll-text-xs);
    font-weight: 700;
    letter-spacing: .02em;
}
.account-menu__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu__chevron { color: var(--ll-muted); font-size: .65rem; }
.account-menu .dropdown-menu { min-width: 260px; }
.account-menu__who { display: grid; gap: 2px; padding: var(--ll-space-2) var(--ll-space-3); font-size: var(--ll-text-sm); }
.account-menu__who strong { color: var(--ll-heading); font-size: var(--ll-text-md); }
.account-menu__who span { color: var(--ll-muted); overflow-wrap: anywhere; }
.account-menu .dropdown-item { display: flex; align-items: center; gap: var(--ll-space-2); }
.account-menu .dropdown-item i { width: 18px; color: var(--ll-muted); text-align: center; }

/* ---- Content area and page header ---- */
.portal-content {
    flex: 1 0 auto;
    width: min(100%, var(--ll-content-max));
    margin: 0 auto;
    padding: var(--ll-space-5) var(--ll-page-pad) var(--ll-space-6);
}
.portal-content:focus { outline: 0; }
.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--ll-space-3) var(--ll-space-5);
    margin-bottom: var(--ll-space-5);
}
.page-header__text { flex: 1 1 420px; min-width: 0; }
.page-title {
    margin: 0;
    color: var(--ll-heading);
    font-family: var(--ll-font-display);
    font-size: var(--ll-title);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.005em;
    overflow-wrap: anywhere;
}
.page-description { max-width: var(--ll-read-max); margin: var(--ll-space-1) 0 0; color: var(--ll-muted); font-size: var(--ll-text-md); }
.page-actions { display: flex; flex-wrap: wrap; gap: var(--ll-space-2); }

.portal-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ll-space-2) var(--ll-space-5);
    width: min(100%, var(--ll-content-max));
    margin: 0 auto;
    padding: var(--ll-space-4) var(--ll-page-pad) var(--ll-space-5);
    border-top: 1px solid var(--ll-line);
    color: var(--ll-muted);
    font-size: var(--ll-text-sm);
}
.portal-footer__contact { display: inline-flex; flex-wrap: wrap; gap: var(--ll-space-1) var(--ll-space-5); }
.portal-footer__contact a, .portal-footer__contact span { display: inline-flex; align-items: center; gap: 6px; color: var(--ll-ink-2); text-decoration: none; }
.portal-footer__contact a:hover { color: var(--ll-navy-700); text-decoration: underline; }
.portal-footer__contact i { color: var(--ll-gold-700); }

.verify-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px var(--ll-space-3); border: 1px solid transparent; border-radius: 999px; font-size: var(--ll-text-sm); font-weight: 600; }
.verify-badge.verified { color: #155C2B; background: #E8F5EC; border-color: #A8D8B5; }
.verify-badge.unverified { color: #6B4200; background: #FFF6E3; border-color: #EFCF8C; }
.user-badge { display: none; }

.demo-login-banner { display: flex !important; align-items: center; gap: var(--ll-space-3) !important; padding: var(--ll-space-3) var(--ll-space-4); }
.demo-login-banner > span { flex: 1 1 auto; min-width: 0; }
.demo-login-banner > .btn { flex: none; }
.demo-login-banner code { color: inherit; background: rgba(107, 66, 0, .1); }

/* ---- Summary figures ---- */
.compact-metric-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--ll-space-3); }
.compact-metric-item {
    position: relative;
    min-height: 0;
    padding: var(--ll-space-4);
    overflow: hidden;
    border: 1px solid var(--ll-line);
    border-radius: var(--ll-radius-lg);
    background: #FFF;
    box-shadow: var(--ll-shadow-xs);
}
.compact-metric-item::before { content: none; }
.compact-metric-label { color: var(--ll-muted); font-size: var(--ll-text-sm); font-weight: 500; letter-spacing: 0; text-transform: none; }
.compact-metric-value { margin-top: var(--ll-space-1); color: var(--ll-heading); font-size: var(--ll-text-xl); font-weight: 650; font-variant-numeric: tabular-nums; }

.admin-kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--ll-space-3); }
.admin-kpi-item {
    position: relative;
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 2px;
    min-height: 0;
    padding: var(--ll-space-4) var(--ll-space-4) var(--ll-space-4);
    overflow: hidden;
    border: 1px solid var(--ll-line);
    border-radius: var(--ll-radius-lg);
    color: inherit;
    background: #FFF;
    box-shadow: var(--ll-shadow-xs);
    text-decoration: none;
}
.admin-kpi-item::before { content: none; }
.admin-kpi-item:nth-child(1) { border-color: var(--ll-line); background: #FFF; box-shadow: var(--ll-shadow-xs); }
.admin-kpi-item:nth-child(1) .admin-kpi-label { color: var(--ll-muted); }
.admin-kpi-item:nth-child(1) .admin-kpi-value { color: var(--ll-heading); }
.admin-kpi-label { max-width: none; color: var(--ll-muted); font-size: var(--ll-text-sm); font-weight: 500; }
.admin-kpi-value { color: var(--ll-heading); font-size: 1.875rem; font-weight: 650; line-height: 1.1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
a.admin-kpi-item:hover { border-color: var(--ll-gold-300); box-shadow: var(--ll-shadow-sm); transform: none; }

.admin-progress-item { border-radius: var(--ll-radius); background: var(--ll-surface-2); }
.modal-content { border: 0; border-radius: var(--ll-radius-lg); box-shadow: var(--ll-shadow-lg); }

.portal-menu-toggle,
.portal-sidebar-backdrop { display: none; }

/* ==========================================================================
   Sign-in style pages (invitation, password, two-factor) — includes/auth-visual.php
   ========================================================================== */
.auth-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr);
    background: #FFF;
}
.auth-visual {
    position: relative;
    min-height: 100vh;
    padding: clamp(1.75rem, 4.5vw, 4rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2.5rem;
    overflow: hidden;
    color: #FFF;
    background:
        radial-gradient(120% 70% at 0% 0%, rgba(196, 154, 69, .2) 0%, rgba(196, 154, 69, 0) 55%),
        radial-gradient(90% 60% at 100% 100%, rgba(43, 76, 128, .55) 0%, rgba(43, 76, 128, 0) 60%),
        linear-gradient(160deg, #13243F 0%, #10213A 45%, #0B1628 100%);
}
.auth-visual::after {
    content: '';
    position: absolute;
    right: -18%;
    bottom: -30%;
    width: 80%;
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, .05);
    border-radius: 50%;
    box-shadow: 0 0 0 90px rgba(255, 255, 255, .012), 0 0 0 180px rgba(255, 255, 255, .01);
    pointer-events: none;
}
.auth-brand { display: block; width: clamp(210px, 20vw, 280px); color: #FFF; text-decoration: none; }
.auth-brand-logo, .auth-brand-logo img { display: block; width: 100%; height: auto; }
.auth-visual-copy { position: relative; z-index: 1; max-width: 34rem; }
.auth-visual-copy h1 {
    margin: .9rem 0 1rem;
    color: #FFF;
    font-family: var(--ll-font-display);
    font-size: clamp(2.6rem, 4.8vw, 4.2rem);
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -.01em;
}
.auth-visual-copy h1 em {
    font-style: italic;
    background: linear-gradient(100deg, #EBDDB9 0%, #D6B46E 45%, #C49A45 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.auth-visual-copy p { max-width: 30rem; margin: 0; color: rgba(255, 255, 255, .74); font-size: 1rem; }
.auth-assurance { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; color: rgba(255, 255, 255, .72); font-size: .82rem; font-weight: 500; }
.auth-assurance i { margin-right: .4rem; color: var(--ll-gold-400); }

.auth-form-panel {
    display: grid;
    place-items: center;
    padding: clamp(1.5rem, 5vw, 4rem);
    background: radial-gradient(80% 50% at 100% 0%, rgba(196, 154, 69, .1) 0%, rgba(196, 154, 69, 0) 60%), #FFF;
}
.auth-form-wrap { width: min(100%, 440px); }
.auth-form-eyebrow { color: var(--ll-gold-700); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.auth-form-wrap h2 {
    margin: .4rem 0 .5rem;
    color: var(--ll-navy-900);
    font-family: var(--ll-font-display);
    font-size: clamp(2rem, 3vw, 2.5rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.005em;
}
.auth-form-intro { margin-bottom: 1.6rem; color: var(--ll-muted); font-size: .95rem; }
.auth-form-wrap .form-label { font-size: .88rem; }
.auth-form-wrap .form-control { min-height: 48px; }
.auth-form-wrap .btn { min-height: 50px; }
.auth-form-links { margin-top: 1.4rem; text-align: center; color: var(--ll-muted); font-size: .88rem; }
.auth-form-links a, .auth-form-links .btn-link { color: var(--ll-navy-700); font-weight: 600; text-decoration: none; }
.auth-form-links a:hover, .auth-form-links .btn-link:hover { text-decoration: underline; }
.mfa-code-input { font-size: 1.6rem; letter-spacing: .35em; font-variant-numeric: tabular-nums; }

@media (max-width: 991px) {
    body:has(.portal-shell) { overflow-x: hidden; }
    .portal-shell { display: block; }
    /* Navigation becomes a drawer, opened from the top bar. */
    .portal-sidebar {
        position: fixed;
        z-index: var(--ll-z-drawer);
        top: 0;
        left: 0;
        width: min(300px, 86vw);
        height: 100vh;
        height: 100dvh;
        visibility: hidden;
        transform: translateX(-105%);
        transition: transform .22s var(--ll-ease), visibility 0s linear .22s;
    }
    .portal-menu-open .portal-sidebar {
        visibility: visible;
        transform: translateX(0);
        box-shadow: var(--ll-shadow-lg);
        transition: transform .22s var(--ll-ease), visibility 0s;
    }
    .portal-menu-toggle {
        display: grid;
        flex: none;
        place-items: center;
        width: var(--ll-touch);
        height: var(--ll-touch);
        margin-left: calc(-1 * var(--ll-space-2));
        border: 1px solid var(--ll-line);
        border-radius: var(--ll-radius-sm);
        color: var(--ll-heading);
        background: #FFF;
    }
    .portal-menu-toggle:focus-visible { outline: 0; box-shadow: var(--ll-ring); }
    .portal-sidebar-backdrop {
        position: fixed;
        z-index: var(--ll-z-overlay);
        inset: 0;
        display: block;
        border: 0;
        background: rgba(11, 22, 40, .5);
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
    }
    .portal-menu-open .portal-sidebar-backdrop { opacity: 1; pointer-events: auto; }
    .admin-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .auth-shell { grid-template-columns: 1fr; }
    .auth-visual { min-height: auto; gap: 1.25rem; padding: 1.5rem 1.25rem 1.75rem; }
    .auth-brand { width: 200px; }
    .auth-visual-copy h1 { margin: .5rem 0; font-size: 2.2rem; }
    .auth-assurance { display: none; }
    .auth-form-panel { place-items: start center; padding: 2rem 1rem 2.5rem; }
}

@media (max-width: 767px) {
    .portal-topbar { gap: var(--ll-space-2); }
    .portal-crumbs li:not(:last-child) { display: none; }
    .topbar-label, .account-menu__name, .account-menu__chevron { display: none; }
    .account-menu__button { padding: 3px; }
    .portal-topbar-actions .verify-badge { display: none; }
    .portal-content { padding: var(--ll-space-4) var(--ll-space-4) var(--ll-space-5); }
    .page-header { margin-bottom: var(--ll-space-4); }
    .page-title { font-size: 1.625rem; }
    .page-actions { width: 100%; }
    .page-actions > .btn, .page-actions > form, .page-actions > a { flex: 1 1 auto; }
    .demo-login-banner { flex-wrap: wrap; }
    .demo-login-banner > i { display: none; }
    .auth-visual-copy p { display: none; }
}

@media (max-width: 480px) {
    .admin-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .compact-metric-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .auth-visual-copy .ll-eyebrow { display: none; }
    .auth-visual-copy h1 { font-size: 1.9rem; }
}

/* ==========================================================================
   Public welcome page (welcome.php)
   ========================================================================== */
.welcome { min-height: 100vh; display: flex; flex-direction: column; background: var(--ll-canvas); }
.welcome-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 5vw, 4.5rem) clamp(3rem, 8vw, 6.5rem);
    color: #FFF;
    background:
        radial-gradient(70% 90% at 0% 0%, rgba(196, 154, 69, .22) 0%, rgba(196, 154, 69, 0) 60%),
        radial-gradient(60% 80% at 100% 100%, rgba(43, 76, 128, .6) 0%, rgba(43, 76, 128, 0) 60%),
        linear-gradient(160deg, #13243F 0%, #10213A 50%, #0B1628 100%);
}
.welcome-hero::after {
    content: '';
    position: absolute;
    right: -10%;
    top: -40%;
    width: 60%;
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, .05);
    border-radius: 50%;
    box-shadow: 0 0 0 100px rgba(255, 255, 255, .012), 0 0 0 200px rgba(255, 255, 255, .01);
    pointer-events: none;
}
.welcome-nav { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.welcome-brand { display: block; width: clamp(190px, 18vw, 250px); }
.welcome-brand-logo, .welcome-brand-logo img { display: block; width: 100%; height: auto; }
.welcome-hero-body { position: relative; z-index: 1; max-width: 46rem; margin-top: clamp(3rem, 9vw, 6.5rem); }
.welcome-title {
    margin: .9rem 0 1.1rem;
    color: #FFF;
    font-family: var(--ll-font-display);
    font-size: clamp(2.8rem, 6.4vw, 5.4rem);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -.012em;
}
.welcome-title em {
    font-style: italic;
    background: linear-gradient(100deg, #EBDDB9 0%, #D6B46E 45%, #C49A45 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.welcome-lede { max-width: 36rem; margin: 0 0 2rem; color: rgba(255, 255, 255, .76); font-size: 1.08rem; }
.welcome-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.welcome-note { margin: 1.5rem 0 0; color: rgba(255, 255, 255, .6); font-size: .86rem; }
.welcome-note i { color: var(--ll-gold-400); }

.welcome-journey { width: min(100%, 1180px); margin: 0 auto; padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.25rem, 4vw, 2rem); }
.welcome-journey-head { margin-bottom: 1.75rem; }
.welcome-journey-head h2 { margin: .5rem 0 0; color: var(--ll-navy-900); font-family: var(--ll-font-display); font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 600; }
.welcome-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.welcome-step {
    position: relative;
    padding: 1.4rem 1.3rem 1.5rem;
    border: 1px solid var(--ll-line);
    border-radius: var(--ll-radius-lg);
    background: #FFF;
    box-shadow: var(--ll-shadow-sm);
}
.welcome-step-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    margin-bottom: 1.1rem;
    border-radius: 12px;
    color: var(--ll-gold-300);
    background: var(--ll-grad-navy);
    font-size: 1.1rem;
}
.welcome-step-num { position: absolute; top: 1.3rem; right: 1.3rem; color: var(--ll-gold-600); font-family: var(--ll-font-display); font-size: 1.5rem; font-weight: 600; }
.welcome-step h3 { margin: 0 0 .35rem; color: var(--ll-navy-900); font-size: 1.02rem; font-weight: 650; }
.welcome-step p { margin: 0; color: var(--ll-muted); font-size: .9rem; }
.welcome-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem 1.5rem;
    width: min(100%, 1180px);
    margin: auto auto 0;
    padding: 1.25rem clamp(1.25rem, 4vw, 2rem) 2rem;
    border-top: 1px solid var(--ll-line);
    color: var(--ll-muted);
    font-size: .84rem;
}
.welcome-footer a { color: var(--ll-ink-2); }
@media (max-width: 991px) { .welcome-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
    .welcome-steps { grid-template-columns: 1fr; }
    .welcome-nav-login { display: none; }
    .welcome-actions .btn { width: 100%; }
}

/* --- Simple HTML editor for the COL Email body (visual/code toggle) --- */
.html-editor-visual{ min-height: 320px; max-height: 560px; overflow-y: auto; background:#fff; }
.html-editor-visual:focus{ outline: 0; box-shadow: 0 0 0 .2rem rgba(13,110,253,.20); }
.html-editor-visual > :first-child{ margin-top: 0; }
.html-editor-toolbar .btn{ line-height: 1; }

/* Settings module helpers */
.settings-logo-preview{ display: block; height: 52px; width: auto; }
.settings-logo-stage{ display: inline-block; flex: none; padding: .7rem 1rem; border-radius: 10px; background: var(--ll-grad-navy-deep); }
.announcement-banner{ margin-bottom: 1rem; }

.catalogue-scroll{ max-height: 320px; overflow: auto; }

.dash-chart-wrap{ position: relative; height: 240px; }

.letter-wm-field{ max-width: 520px; }
.letter-asset-preview{ height: 60px; overflow: hidden; }
.letter-asset-img{ max-height: 44px; max-width: 130px; width: auto; object-fit: contain; }

/* ==========================================================================
   Guideline module
   Typography follows the sizes required for the student portal: page title
   28-32px, section headings 20-24px, guideline titles 18-20px, body 16px,
   labels 15-16px, help text 14px, buttons 15-16px, line-height ~1.5.
   Every status is carried by an icon and its wording as well as its colour.
   ========================================================================== */

/* The palette lives on :root, not on .gl-page, because the same status badges
   and chips are now rendered on admin screens that are not laid out as a
   gl-page — the admin review queues and the requested-documents queue. Scoped
   to .gl-page they resolved to nothing there and the badge lost its colour. */
:root {
    --gl-text: #1B2635;
    --gl-text-soft: #4A5A70;
    --gl-line: #D5DFEC;
    --gl-line-strong: #B9C9DD;
    --gl-surface: #FFFFFF;
    --gl-surface-soft: #F4F7FC;

    --gl-idle-bg: #EEF1F6;      --gl-idle-fg: #3C4A5C;      --gl-idle-line: #C6D0DD;
    --gl-progress-bg: #FFF4E0;  --gl-progress-fg: #8A5300;  --gl-progress-line: #F0C57C;
    --gl-ready-bg: #E4F5F1;     --gl-ready-fg: #0A5C4C;     --gl-ready-line: #93D3C5;
    --gl-submitted-bg: #E7EFFC; --gl-submitted-fg: #14417F;  --gl-submitted-line: #9EBDE9;
    --gl-review-bg: #EDEAFB;    --gl-review-fg: #3D2E8F;    --gl-review-line: #B7ACEB;
    --gl-changes-bg: #FDEDE1;   --gl-changes-fg: #8A3B04;   --gl-changes-line: #F2B584;
    --gl-approved-bg: #E4F5E6;  --gl-approved-fg: #125C20;  --gl-approved-line: #93CE9C;
    --gl-rejected-bg: #FCE9E7;  --gl-rejected-fg: #96190E;  --gl-rejected-line: #EFA69D;
}

.gl-page {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    color: var(--gl-text);
    line-height: 1.55;
}

/* ---- Typography ---- */

.gl-page-title {
    font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2rem);  /* 28px -> 32px */
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.015em;
    margin: 0;
    color: var(--gl-text);
}

.gl-section-title {
    font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);  /* 20px -> 24px */
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 0.85rem;
    color: var(--gl-text);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.gl-subsection-title {
    font-size: 1.0625rem;   /* 17px */
    font-weight: 600;
    line-height: 1.4;
    margin: 1.5rem 0 0.6rem;
    color: var(--gl-text);
}

.gl-subsection-title:first-of-type {
    margin-top: 0.75rem;
}

.gl-kicker {
    font-size: 0.875rem;   /* 14px */
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #2B4C80;
    margin: 0 0 0.35rem;
}

.gl-lead {
    font-size: 1.0625rem;   /* 17px */
    line-height: 1.6;
    color: var(--gl-text-soft);
    margin: 0.5rem 0 0;
    max-width: 68ch;
}

.gl-body {
    font-size: 1rem;   /* 16px */
    line-height: 1.6;
    color: var(--gl-text);
    margin: 0 0 0.75rem;
    max-width: 74ch;
}

.gl-body:last-child {
    margin-bottom: 0;
}

.gl-help {
    font-size: 0.875rem;   /* 14px */
    line-height: 1.5;
    color: var(--gl-text-soft);
    margin: 0.35rem 0 0;
}

.gl-muted {
    color: var(--gl-text-soft);
}

.gl-label {
    display: block;
    font-size: 0.9375rem;   /* 15px */
    font-weight: 600;
    line-height: 1.4;
    color: var(--gl-text);
    margin-bottom: 0.35rem;
}

.gl-required {
    color: #B42318;
    font-weight: 700;
}

.gl-optional {
    color: var(--gl-text-soft);
    font-weight: 500;
    font-size: 0.875rem;
}

.gl-error {
    font-size: 0.875rem;
    line-height: 1.5;
    font-weight: 600;
    color: #B42318;
    margin: 0.35rem 0 0;
    display: flex;
    gap: 0.4rem;
    align-items: flex-start;
}

.gl-inline-link {
    font-weight: 600;
    white-space: nowrap;
}

/* ---- Panels ---- */

.gl-panel {
    background: var(--gl-surface);
    border: 1px solid var(--gl-line);
    border-radius: var(--hma-radius);
    box-shadow: var(--hma-shadow-sm);
    padding: 1.5rem;
}

.gl-panel--attention {
    border-left: 6px solid #D9721B;
    background: #FFFBF6;
}

.gl-intro {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    align-items: center;
    justify-content: space-between;
}

.gl-intro__text {
    flex: 1 1 26rem;
    min-width: 0;
}

.gl-intro__done {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--gl-approved-fg);
    background: var(--gl-approved-bg);
    border: 1px solid var(--gl-approved-line);
    border-radius: 999px;
    padding: 0.65rem 1.1rem;
}

/* ---- Buttons ---- */

.gl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.9375rem;   /* 15px */
    font-weight: 600;
    line-height: 1.3;
    border-radius: 10px;
    padding: 0.7rem 1.15rem;
    min-height: 44px;       /* comfortable touch target */
    border: 1px solid transparent;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.gl-btn--lg {
    font-size: 1rem;
    padding: 0.85rem 1.5rem;
    min-height: 50px;
}

.gl-btn--sm {
    font-size: 0.875rem;
    padding: 0.5rem 0.85rem;
    min-height: 38px;
}

.gl-btn--primary {
    background: var(--ll-grad-gold);
    border-color: var(--ll-gold-600);
    color: var(--ll-on-gold);
}

.gl-btn--primary:hover,
.gl-btn--primary:focus {
    background: linear-gradient(180deg, #C9A04D 0%, #B88C38 100%);
    border-color: #8C6A27;
    color: var(--ll-on-gold);
}

.gl-btn--secondary {
    background: #FFF;
    border-color: var(--ll-line-strong);
    color: var(--ll-heading);
}

.gl-btn--secondary:hover,
.gl-btn--secondary:focus {
    background: var(--ll-navy-50);
    border-color: var(--ll-navy-700);
    color: var(--ll-heading);
}

.gl-btn--ghost {
    background: #fff;
    border-color: var(--gl-line-strong);
    color: var(--gl-text);
}

.gl-btn--ghost:hover,
.gl-btn--ghost:focus {
    background: var(--gl-surface-soft);
    color: var(--gl-text);
}

.gl-btn--warning {
    background: #B45309;
    border-color: #B45309;
    color: #fff;
}

.gl-btn--warning:hover,
.gl-btn--warning:focus {
    background: #91420A;
    color: #fff;
}

.gl-btn--danger-ghost {
    background: #fff;
    border-color: #E7A9A2;
    color: #96190E;
}

.gl-btn--danger-ghost:hover,
.gl-btn--danger-ghost:focus {
    background: #FCE9E7;
    color: #7A140B;
}

.gl-btn:disabled,
.gl-btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}

.gl-btn:focus-visible {
    outline: 3px solid #1E3A66;
    outline-offset: 2px;
}

/* ---- Status badge ---- */

.gl-status {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.875rem;   /* 14px */
    font-weight: 700;
    line-height: 1.2;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.gl-status--lg {
    font-size: 0.9375rem;
    padding: 0.55rem 1rem;
}

.gl-status--idle      { background: var(--gl-idle-bg);      color: var(--gl-idle-fg);      border-color: var(--gl-idle-line); }
.gl-status--progress  { background: var(--gl-progress-bg);  color: var(--gl-progress-fg);  border-color: var(--gl-progress-line); }
.gl-status--ready     { background: var(--gl-ready-bg);     color: var(--gl-ready-fg);     border-color: var(--gl-ready-line); }
.gl-status--submitted { background: var(--gl-submitted-bg); color: var(--gl-submitted-fg); border-color: var(--gl-submitted-line); }
.gl-status--review    { background: var(--gl-review-bg);    color: var(--gl-review-fg);    border-color: var(--gl-review-line); }
.gl-status--changes   { background: var(--gl-changes-bg);   color: var(--gl-changes-fg);   border-color: var(--gl-changes-line); }
.gl-status--approved  { background: var(--gl-approved-bg);  color: var(--gl-approved-fg);  border-color: var(--gl-approved-line); }
.gl-status--rejected  { background: var(--gl-rejected-bg);  color: var(--gl-rejected-fg);  border-color: var(--gl-rejected-line); }

/* Legacy pill classes used by data-status-text, extended with the new values. */
.status-Not-Started    { background: #EEF1F6; color: #3C4A5C; border-color: #C6D0DD; }
.status-In-Progress    { background: #FFF4E0; color: #8A5300; border-color: #F0C57C; }
.status-Ready-to-Submit { background: #E4F5F1; color: #0A5C4C; border-color: #93D3C5; }
.status-Changes-Required { background: #FDEDE1; color: #8A3B04; border-color: #F2B584; }

/* ---- Progress ---- */

.gl-progress {
    height: 12px;
    background: #E4EAF3;
    border-radius: 999px;
    overflow: hidden;
}

.gl-progress--slim {
    height: 8px;
}

.gl-progress__bar {
    height: 100%;
    background: linear-gradient(90deg, #1E3A66, #2B4C80);
    border-radius: 999px;
    transition: width 0.3s ease;
}

.gl-progress-head {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.gl-progress-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    color: var(--hma-primary);
}

.gl-progress-caption {
    font-size: 1rem;
    color: var(--gl-text-soft);
}

/* ---- Summary stats ---- */

.gl-stat-grid {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: 0.85rem;
}

.gl-stat {
    background: var(--gl-surface-soft);
    border: 1px solid var(--gl-line);
    border-radius: 12px;
    padding: 0.9rem 1rem;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 0.7rem;
    align-items: center;
}

.gl-stat__icon {
    grid-row: 1 / span 2;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    font-size: 1.05rem;
}

.gl-stat__icon--approved  { background: var(--gl-approved-bg);  color: var(--gl-approved-fg); }
.gl-stat__icon--remaining { background: var(--gl-submitted-bg); color: var(--gl-submitted-fg); }
.gl-stat__icon--changes   { background: var(--gl-changes-bg);   color: var(--gl-changes-fg); }
.gl-stat__icon--review    { background: var(--gl-review-bg);    color: var(--gl-review-fg); }

.gl-stat__value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
}

.gl-stat__label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gl-text-soft);
}

/* ---- Recently submitted ---- */

.gl-recent {
    margin-top: 1.5rem;
    border-top: 1px solid var(--gl-line);
    padding-top: 1rem;
}

.gl-recent__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.gl-recent__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9375rem;
}

.gl-recent__item a {
    font-weight: 600;
}

.gl-recent__meta {
    color: var(--gl-text-soft);
    font-size: 0.875rem;
    margin-right: auto;
}

/* ---- Guideline cards (dashboard list) ---- */

.gl-card-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.gl-card {
    background: var(--gl-surface);
    border: 1px solid var(--gl-line);
    border-radius: var(--hma-radius);
    box-shadow: var(--hma-shadow-sm);
    padding: 1.35rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 1.15rem;
    align-items: start;
}

.gl-card--attention {
    border-left: 6px solid #D9721B;
    background: #FFFCF8;
}

.gl-card__number {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: var(--hma-primary);
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
    flex-shrink: 0;
}

.gl-card--attention .gl-card__number {
    background: #B45309;
}

.gl-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.4rem;
}

.gl-card__title {
    font-size: 1.1875rem;   /* 19px */
    font-weight: 600;
    line-height: 1.35;
    margin: 0;
    flex: 1 1 18rem;
    min-width: 0;
}

.gl-card__title a {
    color: var(--gl-text);
    text-decoration: none;
}

.gl-card__title a:hover,
.gl-card__title a:focus-visible {
    color: var(--hma-secondary);
    text-decoration: underline;
}

.gl-card__description {
    font-size: 1rem;
    line-height: 1.55;
    color: var(--gl-text);
    margin: 0 0 0.4rem;
    max-width: 72ch;
}

.gl-card__meaning {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--gl-text-soft);
    margin: 0 0 0.75rem;
}

.gl-card__facts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.1rem;
    font-size: 0.875rem;
    color: var(--gl-text-soft);
}

.gl-card__facts li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.gl-card__facts-alert {
    color: #8A3B04;
    font-weight: 600;
}

.gl-card__progress {
    margin-top: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.gl-card__progress .gl-progress {
    flex: 1 1 12rem;
    min-width: 8rem;
}

.gl-card__progress-text {
    font-size: 0.875rem;
    color: var(--gl-text-soft);
    white-space: nowrap;
}

.gl-card__action {
    align-self: center;
}

/* ---- Callouts ---- */

.gl-callout {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    border-radius: 12px;
    border: 1px solid;
    padding: 0.95rem 1.1rem;
    margin: 0.85rem 0;
    font-size: 1rem;
    line-height: 1.55;
}

.gl-callout > i {
    font-size: 1.05rem;
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.gl-callout p:last-child { margin-bottom: 0; }

.gl-callout--warning { background: var(--gl-changes-bg);  border-color: var(--gl-changes-line);  color: #6E2F03; }
.gl-callout--danger  { background: var(--gl-rejected-bg); border-color: var(--gl-rejected-line); color: #7A140B; }
.gl-callout--success { background: var(--gl-approved-bg); border-color: var(--gl-approved-line); color: #0E4A1A; }
.gl-callout--info    { background: var(--gl-submitted-bg); border-color: var(--gl-submitted-line); color: #172A45; }

/* ---- Empty and help panels ---- */

.gl-empty {
    text-align: center;
    color: var(--gl-text-soft);
}

.gl-empty i {
    font-size: 2rem;
    color: var(--gl-line-strong);
    margin-bottom: 0.65rem;
    display: block;
}

.gl-help-panel__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 0.75rem;
}

/* ---- Detail page shell ---- */

.gl-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
}

.gl-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--hma-secondary);
    text-decoration: none;
    padding: 0.5rem 0.15rem;
    min-height: 40px;
}

.gl-back:hover,
.gl-back:focus-visible {
    text-decoration: underline;
}

.gl-prevnext {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.gl-prevnext__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--hma-secondary);
    background: #fff;
    border: 1px solid var(--gl-line-strong);
    border-radius: 10px;
    padding: 0.5rem 0.8rem;
    min-height: 40px;
    max-width: 17rem;
    text-decoration: none;
}

.gl-prevnext__link:hover,
.gl-prevnext__link:focus-visible {
    background: var(--gl-surface-soft);
}

.gl-prevnext__link--disabled {
    color: #93A2B5;
    background: #F3F5F9;
    cursor: default;
}

.gl-prevnext__text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* A flex child will not shrink below its content width without this, so a
       long procedure title kept its full box and extended past the viewport
       even though the ellipsis made it look clipped. */
    min-width: 0;
}

.gl-prevnext__counter {
    font-size: 0.875rem;
    color: var(--gl-text-soft);
    font-weight: 600;
    white-space: nowrap;
}

.gl-detail-head__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.85rem;
    justify-content: space-between;
}

.gl-status-meaning {
    font-size: 0.9375rem;
    color: var(--gl-text-soft);
    margin: 0.6rem 0 0;
}

.gl-detail-head__deadline {
    margin: 0.75rem 0 0;
}

/* ---- Stepper ---- */

.gl-stepper {
    list-style: none;
    margin: 1.35rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.25rem;
    counter-reset: gl-step;
}

.gl-step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 9.5rem;
    min-width: 0;
    padding: 0.55rem 0.7rem;
    border-radius: 10px;
    border: 1px solid var(--gl-line);
    background: var(--gl-surface-soft);
}

.gl-step__marker {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.875rem;
    font-weight: 700;
    background: #fff;
    border: 1px solid var(--gl-line-strong);
    color: var(--gl-text-soft);
    flex-shrink: 0;
}

.gl-step__label {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--gl-text-soft);
}

.gl-step--done {
    background: var(--gl-approved-bg);
    border-color: var(--gl-approved-line);
}

.gl-step--done .gl-step__marker {
    background: var(--gl-approved-fg);
    border-color: var(--gl-approved-fg);
    color: #fff;
}

.gl-step--done .gl-step__label {
    color: var(--gl-approved-fg);
}

.gl-step--current {
    background: #fff;
    border-color: var(--hma-secondary);
    box-shadow: inset 0 0 0 1px var(--hma-secondary);
}

.gl-step--current .gl-step__marker {
    background: var(--hma-secondary);
    border-color: var(--hma-secondary);
    color: #fff;
}

.gl-step--current .gl-step__label {
    color: var(--gl-text);
}

.gl-step__text {
    min-width: 0;
}

.gl-stepper-caption {
    display: none;
    margin: 0.6rem 0 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--gl-text);
}

.gl-step-chip {
    display: inline-flex;
    align-items: center;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: var(--hma-primary);
    color: #fff;
    border-radius: 6px;
    padding: 0.25rem 0.5rem;
}

/* ---- Deadline chip ---- */

.gl-deadline {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 999px;
    padding: 0.35rem 0.7rem;
    border: 1px solid;
}

.gl-deadline--normal  { background: var(--gl-idle-bg);      color: var(--gl-idle-fg);      border-color: var(--gl-idle-line); }
.gl-deadline--soon    { background: var(--gl-progress-bg);  color: var(--gl-progress-fg);  border-color: var(--gl-progress-line); }
.gl-deadline--overdue { background: var(--gl-rejected-bg);  color: var(--gl-rejected-fg);  border-color: var(--gl-rejected-line); }

/* ---- Detail layout ---- */

.gl-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: 1.25rem;
    align-items: start;
}

.gl-main {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

.gl-aside {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    position: sticky;
    top: 1rem;
}

.gl-aside-panel {
    padding: 1.25rem;
}

.gl-aside-panel .gl-section-title {
    font-size: 1.125rem;
}

.gl-contact {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
    font-size: 0.9375rem;
    line-height: 1.5;
    margin: 0.75rem 0 0;
    padding-top: 0.75rem;
    border-top: 1px solid var(--gl-line);
}

/* ---- Instructions and notes ---- */

.gl-instructions {
    margin: 0 0 0.5rem;
    padding-left: 1.35rem;
    font-size: 1rem;
    line-height: 1.6;
}

.gl-instructions li {
    margin-bottom: 0.55rem;
    padding-left: 0.2rem;
}

.gl-instructions li::marker {
    font-weight: 700;
    color: var(--hma-secondary);
}

.gl-notes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.gl-notes li {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    background: var(--gl-progress-bg);
    border: 1px solid var(--gl-progress-line);
    border-radius: 10px;
    padding: 0.8rem 1rem;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: #6E4200;
}

.gl-notes li > i {
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.gl-missing-list {
    margin: 0.5rem 0 0;
    padding-left: 1.25rem;
    font-size: 0.9375rem;
    line-height: 1.6;
}

.gl-missing-list li {
    margin-bottom: 0.35rem;
}

/* ---- Downloads ---- */

.gl-download-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.gl-download {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.9rem;
    align-items: center;
    border: 1px solid var(--gl-line);
    border-radius: 12px;
    padding: 0.95rem 1.05rem;
    background: var(--gl-surface-soft);
}

.gl-download__icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: #E7EFFC;
    color: #14417F;
    font-size: 1.05rem;
}

.gl-download__body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.gl-download__title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
}

.gl-download__description {
    font-size: 0.9375rem;
    color: var(--gl-text-soft);
    line-height: 1.5;
}

.gl-download__meta {
    font-size: 0.875rem;
    color: var(--gl-text-soft);
}

.gl-download__actions {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
}

/* ---- Form fields ---- */

.gl-field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 1.1rem 1.35rem;
    margin-top: 0.5rem;
}

.gl-field {
    min-width: 0;
}

.gl-input {
    font-size: 1rem;
    line-height: 1.5;
    padding: 0.65rem 0.85rem;
    min-height: 46px;
    border-radius: 10px;
    border: 1px solid var(--gl-line-strong);
    color: var(--gl-text);
    background: #fff;
}

.gl-input:focus {
    border-color: var(--hma-secondary);
    box-shadow: 0 0 0 3px rgba(30, 58, 102, 0.18);
    outline: none;
}

.gl-input:disabled {
    background: #F2F5F9;
    color: #55637A;
}

.gl-input.is-invalid {
    border-color: #B42318;
}

textarea.gl-input {
    min-height: 7rem;
    resize: vertical;
}

.gl-check .form-check-input {
    width: 1.2rem;
    height: 1.2rem;
    margin-top: 0.15rem;
}

.gl-check .form-check-label {
    font-size: 1rem;
    line-height: 1.5;
    padding-left: 0.25rem;
}

.gl-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    align-items: center;
    margin-top: 1.35rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--gl-line);
}

.gl-form-actions .gl-help {
    flex: 1 1 16rem;
    margin: 0;
}

/* ---- Upload slots ---- */

.gl-upload {
    border: 1px solid var(--gl-line);
    border-radius: 14px;
    padding: 1.15rem;
    margin-top: 1rem;
    background: #fff;
}

.gl-upload--filled {
    border-color: var(--gl-ready-line);
    background: #FBFEFD;
}

.gl-upload__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
}

.gl-upload__title {
    font-size: 1.0625rem;   /* 17px */
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
}

.gl-rules {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #14417F;
    background: #F1F3F7;
    border: 1px solid #D5DBE4;
    border-radius: 8px;
    padding: 0.5rem 0.7rem;
    margin: 0.65rem 0 0.85rem;
}

.gl-dropzone {
    border: 2px dashed var(--gl-line-strong);
    border-radius: 12px;
    background: var(--gl-surface-soft);
    padding: 1.5rem 1rem;
    text-align: center;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.gl-dropzone.is-dragging {
    border-color: var(--hma-secondary);
    background: #EFF2F6;
}

.gl-dropzone__icon {
    font-size: 1.75rem;
    color: var(--hma-secondary);
    display: block;
    margin-bottom: 0.5rem;
}

.gl-dropzone__text {
    margin: 0 0 0.75rem;
    font-size: 0.9375rem;
    color: var(--gl-text-soft);
    line-height: 1.5;
}

.gl-dropzone__strong {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--gl-text);
}

.gl-dropzone__or {
    display: block;
    font-size: 0.875rem;
}

.gl-dropzone__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Keyboard users must still see where focus is, even though the input itself
   is visually hidden behind its label-button. */
.gl-dropzone__input:focus-visible + .gl-dropzone__chosen,
.gl-dropzone:focus-within {
    outline: 3px solid #1E3A66;
    outline-offset: 2px;
}

.gl-dropzone__chosen {
    margin: 0.7rem 0 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gl-text);
    word-break: break-word;
}

.gl-upload__progress {
    margin-top: 0.9rem;
}

.gl-upload__progress-text {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gl-text-soft);
}

.gl-upload__message {
    margin: 0.75rem 0 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    font-weight: 600;
}

.gl-upload__message:empty {
    display: none;
}

.gl-upload__message.is-error {
    color: #7A140B;
    background: var(--gl-rejected-bg);
    border: 1px solid var(--gl-rejected-line);
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
}

.gl-upload__message.is-success {
    color: #0E4A1A;
    background: var(--gl-approved-bg);
    border: 1px solid var(--gl-approved-line);
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
}

.gl-upload__message.is-info {
    color: #172A45;
    background: var(--gl-submitted-bg);
    border: 1px solid var(--gl-submitted-line);
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
}

.gl-upload__form {
    margin-top: 0.85rem;
}

.gl-upload__form [data-upload-submit] {
    margin-top: 0.85rem;
}

/* ---- Current file card ---- */

.gl-file {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.85rem;
    align-items: start;
    background: var(--gl-surface-soft);
    border: 1px solid var(--gl-line);
    border-radius: 12px;
    padding: 0.9rem 1rem;
}

.gl-file__icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: #E4F5E6;
    color: #125C20;
}

.gl-file__body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.gl-file__name {
    font-size: 1rem;
    font-weight: 600;
    word-break: break-word;
}

.gl-file__meta {
    font-size: 0.875rem;
    color: var(--gl-text-soft);
}

.gl-file__comment {
    font-size: 0.875rem;
    color: #8A3B04;
    font-weight: 600;
    margin-top: 0.25rem;
}

.gl-file__actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--gl-line);
}

.gl-inline-form {
    display: inline;
    margin: 0;
}

.gl-locked {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--gl-approved-fg);
    background: var(--gl-approved-bg);
    border: 1px solid var(--gl-approved-line);
    border-radius: 10px;
    padding: 0.65rem 0.9rem;
    margin: 0.85rem 0 0;
}

/* ---- Review page ---- */

.gl-review-list {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--gl-line);
    border-radius: 12px;
    overflow: hidden;
}

.gl-review-row {
    display: grid;
    grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr);
    gap: 0.5rem 1.25rem;
    padding: 0.85rem 1.05rem;
    border-bottom: 1px solid var(--gl-line);
    background: #fff;
}

.gl-review-row:last-child {
    border-bottom: 0;
}

.gl-review-row--missing {
    background: var(--gl-rejected-bg);
}

.gl-review-row dt {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--gl-text-soft);
    margin: 0;
}

.gl-review-row dd {
    font-size: 1rem;
    line-height: 1.55;
    margin: 0;
    word-break: break-word;
}

.gl-review-missing {
    color: #96190E;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.gl-review-files {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.gl-review-file {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.85rem;
    align-items: center;
    border: 1px solid var(--gl-line);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    background: #fff;
}

.gl-review-file--missing {
    border-color: var(--gl-rejected-line);
    background: var(--gl-rejected-bg);
}

.gl-review-file__icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: #E7EFFC;
    color: #14417F;
}

.gl-review-file--missing .gl-review-file__icon {
    background: #FBD9D4;
    color: #96190E;
}

.gl-review-file__body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.gl-review-file__title {
    font-size: 1rem;
    font-weight: 600;
}

.gl-review-file__meta {
    font-size: 0.875rem;
    color: var(--gl-text-soft);
    word-break: break-word;
}

.gl-review-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem;
    margin-top: 1.6rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--gl-line);
}

.gl-submit-form {
    flex: 1 1 22rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    align-items: flex-start;
}

.gl-confirm {
    background: var(--gl-surface-soft);
    border: 1px solid var(--gl-line);
    border-radius: 10px;
    padding: 0.85rem 1rem 0.85rem 2.6rem;
    width: 100%;
}

.gl-confirm .form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    margin-left: -1.7rem;
    margin-top: 0.1rem;
}

.gl-confirm .form-check-label {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.5;
}

.gl-next-panel {
    background: linear-gradient(135deg, #F7F8FA, #F1F3F7);
    border-color: #D5DBE4;
}

/* ---- Timeline ---- */

.gl-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.gl-timeline__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.7rem;
    align-items: start;
}

.gl-timeline__dot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.8125rem;
    background: var(--gl-idle-bg);
    color: var(--gl-idle-fg);
    border: 1px solid var(--gl-idle-line);
}

.gl-timeline__item--approved  .gl-timeline__dot { background: var(--gl-approved-bg);  color: var(--gl-approved-fg);  border-color: var(--gl-approved-line); }
.gl-timeline__item--rejected  .gl-timeline__dot { background: var(--gl-rejected-bg);  color: var(--gl-rejected-fg);  border-color: var(--gl-rejected-line); }
.gl-timeline__item--changes   .gl-timeline__dot { background: var(--gl-changes-bg);   color: var(--gl-changes-fg);   border-color: var(--gl-changes-line); }
.gl-timeline__item--submitted .gl-timeline__dot { background: var(--gl-submitted-bg); color: var(--gl-submitted-fg); border-color: var(--gl-submitted-line); }
.gl-timeline__item--review    .gl-timeline__dot { background: var(--gl-review-bg);    color: var(--gl-review-fg);    border-color: var(--gl-review-line); }

.gl-timeline__body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.gl-timeline__status {
    font-size: 0.9375rem;
    font-weight: 600;
}

.gl-timeline__time {
    font-size: 0.875rem;
    color: var(--gl-text-soft);
}

.gl-timeline__comment {
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0.3rem 0 0;
    color: var(--gl-text);
    background: var(--gl-surface-soft);
    border-left: 3px solid var(--gl-line-strong);
    padding: 0.45rem 0.65rem;
    border-radius: 0 6px 6px 0;
}

.gl-approved-line {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.9375rem;
    color: var(--gl-approved-fg);
    margin: 1rem 0 0;
    padding-top: 0.85rem;
    border-top: 1px solid var(--gl-line);
}

/* ---- Responsive ---- */

@media (max-width: 1200px) {
    .gl-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .gl-aside {
        position: static;
    }
}

@media (max-width: 768px) {
    .gl-panel {
        padding: 1.15rem;
    }

    .gl-card {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 0.85rem 1rem;
        padding: 1.1rem;
    }

    .gl-card__action {
        grid-column: 1 / -1;
    }

    .gl-card__action .gl-btn {
        width: 100%;
    }

    .gl-download,
    .gl-review-file {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .gl-download__actions,
    .gl-review-file > .gl-btn {
        grid-column: 1 / -1;
    }

    .gl-download__actions .gl-btn,
    .gl-review-file > .gl-btn {
        flex: 1 1 auto;
    }

    /* The review table becomes stacked cards rather than a squeezed grid. */
    .gl-review-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.2rem;
    }

    /* Compact progress indicator on small screens: six markers on one row with
       the current step named underneath, so the flow stays visible without
       pushing the actual content off the first screen. */
    .gl-stepper {
        flex-wrap: nowrap;
        gap: 0.3rem;
    }

    .gl-step {
        flex: 1 1 0;
        min-width: 0;
        padding: 0.45rem 0;
        justify-content: center;
    }

    /* Clipped rather than removed: assistive technology still reads the step
       name and whether it is done. */
    .gl-step .gl-step__label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .gl-stepper-caption {
        display: block;
    }

    .gl-prevnext {
        width: 100%;
        justify-content: space-between;
    }

    .gl-prevnext__counter {
        order: -1;
        width: 100%;
    }

    .gl-prevnext__title {
        display: none;
    }

    .gl-intro__cta,
    .gl-review-actions .gl-btn,
    .gl-submit-form .gl-btn {
        width: 100%;
    }

    .gl-progress-value {
        font-size: 1.75rem;
    }
}

@media (max-width: 480px) {
    .gl-card__number {
        width: 38px;
        height: 38px;
        font-size: 1.05rem;
    }

    .gl-file__actions .gl-btn,
    .gl-inline-form,
    .gl-inline-form .gl-btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gl-progress__bar,
    .gl-btn,
    .gl-dropzone {
        transition: none;
    }
}

/* ==========================================================================
   Documents table -> stacked cards on small screens (section 11 of the brief).
   Each cell carries its column name in data-label; nothing changes above 768px.
   ========================================================================== */

@media (max-width: 768px) {
    .documents-table {
        border: 0;
    }

    .documents-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    .documents-table tbody tr {
        display: block;
        border: 1px solid var(--hma-border);
        border-radius: 14px;
        background: #fff;
        padding: 0.35rem 0.9rem 0.9rem;
        margin-bottom: 0.9rem;
        box-shadow: var(--hma-shadow-sm);
    }

    .documents-table tbody td {
        display: block;
        width: 100%;
        border: 0;
        border-bottom: 1px solid var(--hma-border);
        padding: 0.7rem 0;
        text-align: left !important;
    }

    .documents-table tbody td:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .documents-table tbody td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 0.875rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--hma-muted);
        margin-bottom: 0.25rem;
    }

    .documents-table .documents-upload-form {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
        align-items: stretch;
    }

    .documents-table .documents-file-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
    }
}

/* ==========================================================================
   Required-field validation on the guideline forms.
   An incomplete item is marked three ways at once — red border, light-red
   fill and a red warning icon with wording underneath — so the meaning does
   not depend on colour alone.
   ========================================================================== */

.gl-page {
    --gl-invalid-border: #B42318;
    --gl-invalid-bg: #FEF3F2;
    --gl-invalid-fg: #7A140B;
}

/* ---- Field-level ---- */

.gl-field--invalid {
    background: var(--gl-invalid-bg);
    border: 1px solid var(--gl-invalid-border);
    border-radius: 10px;
    padding: 0.75rem 0.85rem 0.85rem;
    margin: -0.75rem -0.85rem -0.85rem;
}

.gl-field--invalid .gl-label {
    color: var(--gl-invalid-fg);
}

.gl-field--invalid .gl-help {
    color: #8A4038;
}

.gl-input.is-invalid,
.form-select.gl-input.is-invalid {
    border-color: var(--gl-invalid-border);
    border-width: 2px;
    background-color: #FFF7F6;
}

.gl-input.is-invalid:focus {
    border-color: var(--gl-invalid-border);
    box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.2);
}

.gl-check .form-check-input.is-invalid {
    border-color: var(--gl-invalid-border);
    border-width: 2px;
}

.gl-error > i {
    color: var(--gl-invalid-border);
    flex-shrink: 0;
    margin-top: 0.15rem;
}

/* ---- Upload slots ---- */

.gl-upload--invalid {
    border-color: var(--gl-invalid-border);
    border-width: 2px;
    background: var(--gl-invalid-bg);
}

.gl-upload--invalid .gl-upload__title {
    color: var(--gl-invalid-fg);
}

.gl-upload--invalid .gl-dropzone {
    border-color: #E7A9A2;
    background: #FFF7F6;
}

.gl-upload__required {
    margin: 0.55rem 0 0;
}

/* ---- Summary above the working area ---- */

.gl-validation-summary {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    background: var(--gl-invalid-bg);
    border: 1px solid var(--gl-invalid-border);
    border-left-width: 6px;
    border-radius: var(--hma-radius);
    padding: 1.15rem 1.35rem;
    box-shadow: var(--hma-shadow-sm);
    scroll-margin-top: 1rem;
}

.gl-validation-summary:focus-visible {
    outline: 3px solid var(--gl-invalid-border);
    outline-offset: 2px;
}

.gl-validation-summary__icon {
    font-size: 1.35rem;
    color: var(--gl-invalid-border);
    margin-top: 0.1rem;
    flex-shrink: 0;
}

.gl-validation-summary__body {
    min-width: 0;
}

.gl-validation-summary__title {
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--gl-invalid-fg);
    margin: 0 0 0.35rem;
}

.gl-validation-summary__count {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--gl-invalid-fg);
    margin: 0 0 0.6rem;
}

.gl-validation-summary__list {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--gl-invalid-fg);
}

.gl-validation-summary__list li {
    margin-bottom: 0.3rem;
}

.gl-validation-summary__list a {
    font-weight: 700;
    color: var(--gl-invalid-fg);
}

.gl-validation-summary__list a:hover,
.gl-validation-summary__list a:focus-visible {
    color: #5C0F08;
}

/* ---- Live count beside "Save and review" ---- */

.gl-outstanding {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex: 1 1 100%;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--gl-invalid-fg);
    margin: 0.25rem 0 0;
}

.gl-outstanding > i {
    color: var(--gl-invalid-border);
}

/* Anchored jumps from the summary should not hide behind the sticky topbar. */
.gl-field,
.gl-upload {
    scroll-margin-top: 5rem;
}

/* Arriving from the dashboard's "Where to upload" link lands on one slot among
   several, so say which one it was. */
.gl-upload:target {
    border-color: var(--hma-primary);
    box-shadow: 0 0 0 3px rgba(16, 33, 58, 0.16);
}

@media (max-width: 768px) {
    .gl-validation-summary {
        padding: 1rem;
        gap: 0.65rem;
    }

    .gl-validation-summary__title {
        font-size: 1rem;
    }
}

/* ==========================================================================
   Document preview — one component for every preview in the portal
   ========================================================================== */

.gl-sample-hint {
    font-size: 0.875rem;
    line-height: 1.5;
    color: #4A5A70;
    margin: 0.75rem 0 0.5rem;
}

.gl-sample-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.gl-sample-missing {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.5;
    color: #8A5300;
    background: #FFF4E0;
    border: 1px solid #F0C57C;
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    margin: 0;
}

/* Document preview popup (includes/preview-modal.php, assets/js/document-preview.js).
   Header: who and what; toolbar: browse, pages, view; body: optional document
   list beside the stage that holds either a state message or the document. */
.hma-preview__dialog {
    max-width: min(1240px, 96vw);
}

.hma-preview .modal-content {
    border: 0;
    border-radius: var(--ll-radius-lg, 12px);
    overflow: hidden;
    height: 92vh;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    background: #fff;
}

.hma-preview .modal-content:fullscreen,
.hma-preview.is-expanded .modal-content {
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
}

.hma-preview.is-expanded .hma-preview__dialog {
    max-width: none;
    margin: 0;
}

.hma-preview__header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem 1rem;
    padding: 0.9rem 1.15rem;
    border-bottom: 1px solid var(--ll-line, #E3E5E8);
    background: #fff;
    flex: 0 0 auto;
}

.hma-preview__heading {
    min-width: 0;
    margin-right: auto;
}

.hma-preview__applicant {
    margin: 0 0 0.1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ll-gold-700, #7A5A1E);
    letter-spacing: 0.01em;
}

.hma-preview__title {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.35;
    margin: 0;
    color: var(--ll-navy-900, #10213A);
    overflow-wrap: anywhere;
}

.hma-preview__file {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--ll-muted, #526173);
    margin: 0.1rem 0 0;
    overflow-wrap: anywhere;
}

.hma-preview__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
}

.hma-preview__actions .btn {
    white-space: nowrap;
}

.hma-preview__actions .btn-close {
    margin-left: 0.25rem;
    padding: 0.7rem;
}

/* Toolbar */
.hma-preview__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.25rem;
    padding: 0.5rem 1.15rem;
    background: var(--ll-canvas, #F6F5F1);
    border-bottom: 1px solid var(--ll-line, #E3E5E8);
    flex: 0 0 auto;
}

.hma-preview__toolbar:not(:has(> :not([hidden]))) {
    display: none;
}

.hma-preview__group {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.hma-preview__group[hidden] {
    display: none;
}

.hma-preview__tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-width: 38px;
    min-height: 38px;
    padding: 0 0.6rem;
    border: 1px solid transparent;
    border-radius: var(--ll-radius-sm, 7px);
    background: transparent;
    color: var(--ll-navy-800, #172A45);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
}

.hma-preview__tool:hover:not(:disabled) {
    background: #fff;
    border-color: var(--ll-line, #E3E5E8);
}

.hma-preview__tool:focus-visible {
    outline: 0;
    box-shadow: var(--ll-ring, 0 0 0 2px #fff, 0 0 0 4px #1E3A66);
}

.hma-preview__tool:disabled {
    color: #9AA3AE;
    cursor: default;
}

.hma-preview__tool[aria-expanded="true"] {
    background: #fff;
    border-color: var(--ll-gold-500, #C49A45);
}

.hma-preview__tool[hidden] {
    display: none;
}

.hma-preview__counter {
    min-width: 4.5rem;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ll-ink, #263445);
    font-variant-numeric: tabular-nums;
}

.hma-preview__zoom-level {
    min-width: 3.5rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.hma-preview__page-field {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.875rem;
    color: var(--ll-ink, #263445);
    white-space: nowrap;
}

.hma-preview__page-field input {
    width: 3.6rem;
    height: 34px;
    padding: 0 0.4rem;
    border: 1px solid #C9CED6;
    border-radius: var(--ll-radius-sm, 7px);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.hma-preview__page-field input:focus-visible {
    outline: 0;
    box-shadow: var(--ll-ring, 0 0 0 2px #fff, 0 0 0 4px #1E3A66);
}

/* Body: list + stage */
.hma-preview__body {
    padding: 0;
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    position: relative;
    background: #E9EAEC;
}

.hma-preview__list {
    flex: 0 0 260px;
    overflow-y: auto;
    background: #fff;
    border-right: 1px solid var(--ll-line, #E3E5E8);
}

.hma-preview__list[hidden] {
    display: none;
}

.hma-preview__list-items {
    list-style: none;
    margin: 0;
    padding: 0.5rem;
    display: grid;
    gap: 0.25rem;
}

.hma-preview__list-item {
    width: 100%;
    text-align: left;
    display: grid;
    gap: 0.1rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid transparent;
    border-left: 3px solid transparent;
    border-radius: var(--ll-radius-sm, 7px);
    background: transparent;
    color: var(--ll-ink, #263445);
    cursor: pointer;
}

.hma-preview__list-item:hover {
    background: var(--ll-canvas, #F6F5F1);
}

.hma-preview__list-item:focus-visible {
    outline: 0;
    box-shadow: var(--ll-ring, 0 0 0 2px #fff, 0 0 0 4px #1E3A66);
}

.hma-preview__list-item.is-current {
    background: var(--ll-gold-100, #F7F0E0);
    border-left-color: var(--ll-gold-500, #C49A45);
}

.hma-preview__list-title {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.35;
}

.hma-preview__list-file {
    font-size: 0.78rem;
    color: var(--ll-muted, #526173);
    overflow-wrap: anywhere;
}

.hma-preview__stage {
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* A message in place of the document: loading, or why it can't be shown. */
.hma-preview__state {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem 1.5rem;
    text-align: center;
    background: #E9EAEC;
}

.hma-preview__state[hidden] {
    display: none;
}

.hma-preview__state-icon {
    font-size: 2rem;
    color: var(--ll-navy-700, #1E3A66);
}

.hma-preview__state.is-error .hma-preview__state-icon {
    color: #A2321F;
}

.hma-preview__state-title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--ll-navy-900, #10213A);
}

.hma-preview__state-text {
    margin: 0;
    max-width: 30rem;
    font-size: 0.9375rem;
    color: var(--ll-ink, #263445);
}

.hma-preview__progress {
    width: min(280px, 80%);
    height: 6px;
    accent-color: var(--ll-gold-500, #C49A45);
}

.hma-preview__progress[hidden] {
    display: none;
}

.hma-preview__state-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.hma-preview__state-actions .btn[hidden] {
    display: none;
}

/* The scrolling document. Pages are a centred column, like any document viewer. */
.hma-preview__viewport {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem;
}

/* Wider than the screen once zoomed in: start at the left edge so nothing is unreachable. */
.hma-preview__viewport.is-wide {
    align-items: flex-start;
}

.hma-preview__viewport:focus-visible {
    outline: 3px solid var(--ll-navy-700, #1E3A66);
    outline-offset: -3px;
}

.hma-preview__page {
    flex: 0 0 auto;
    background: #fff;
    box-shadow: 0 4px 14px rgba(11, 22, 40, 0.18);
    color: var(--ll-muted, #526173);
    font-size: 0.875rem;
    display: grid;
    place-items: center;
}

.hma-preview__page canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.hma-preview__viewport.is-image {
    justify-content: center;
}

.hma-preview__viewport.is-image.is-wide {
    justify-content: flex-start;
}

.hma-preview__image-box {
    position: relative;
    flex: 0 0 auto;
}

.hma-preview__image {
    position: absolute;
    left: 50%;
    top: 50%;
    max-width: none;
    background: #fff;
    box-shadow: 0 4px 14px rgba(11, 22, 40, 0.18);
    transform: translate(-50%, -50%);
}

.hma-preview__viewport.is-text {
    align-items: stretch;
}

.hma-preview__text {
    margin: 0;
    padding: 1.25rem;
    background: #fff;
    color: var(--ll-ink, #263445);
    font-size: 0.875rem;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    box-shadow: 0 4px 14px rgba(11, 22, 40, 0.18);
}

/* The floating navigation button would show through the popup on small screens. */
body.modal-open .portal-menu-toggle {
    display: none;
}

@media (max-width: 991.98px) {
    .hma-preview__dialog {
        max-width: none;
        margin: 0;
    }

    .hma-preview .modal-content {
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }

    .hma-preview__header {
        align-items: center;
        gap: 0.5rem;
        padding: 0.6rem 0.75rem;
    }

    .hma-preview__heading {
        overflow: hidden;
    }

    .hma-preview__applicant,
    .hma-preview__title,
    .hma-preview__file {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .hma-preview__title {
        font-size: 1rem;
    }

    .hma-preview__file {
        font-size: 0.8125rem;
    }

    /* The popup already fills a small screen. Full screen stays where the
       browser can truly go full screen (it hides the address bar); where it
       cannot (iPhone) the button would change nothing, so it is hidden. */
    .hma-preview .hma-preview__fullscreen.is-css-only {
        display: none;
    }

    .hma-preview__actions {
        gap: 0.25rem;
    }

    .hma-preview__actions .btn {
        min-width: 40px;
        min-height: 40px;
    }

    .hma-preview__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    .hma-preview__toolbar {
        padding: 0.35rem 0.5rem;
        gap: 0.25rem 0.75rem;
        justify-content: space-between;
    }

    .hma-preview__counter {
        min-width: 3.75rem;
    }

    /* The list covers the document while it is open. */
    .hma-preview__list {
        position: absolute;
        inset: 0;
        z-index: 3;
        flex-basis: auto;
        border-right: 0;
    }

    .hma-preview__viewport {
        padding: 0.5rem;
        gap: 0.5rem;
    }
}

@media (max-width: 420px) {
    .hma-preview__page-field > span:first-child {
        display: none;
    }

    .hma-preview__tool {
        min-width: 36px;
        padding: 0 0.4rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hma-preview__state-icon.fa-spin {
        animation: none;
    }
}

/* ==========================================================================
   Conditional Offer Letter request panel
   ========================================================================== */

.gl-offer {
    border-left: 6px solid var(--hma-secondary, #1E3A66);
}

.gl-offer__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.gl-offer__head .gl-section-title {
    margin-bottom: 0;
}

.gl-offer__message {
    margin-top: 0.85rem;
}

.gl-offer__count {
    font-size: 0.875rem;
    font-weight: 600;
    color: #4A5A70;
    margin-left: 0.5rem;
}

.gl-offer-list {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.gl-offer-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    border: 1px solid #D5DFEC;
    border-radius: 12px;
    padding: 0.8rem 1rem;
    background: #FAF9F6;
}

.gl-offer-item__body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1 1 16rem;
    min-width: 0;
}

.gl-offer-item__title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
}

.gl-offer-item__meta {
    font-size: 0.875rem;
    color: #4A5A70;
}

.gl-offer-item__comment {
    font-size: 0.875rem;
    font-weight: 600;
    color: #8A3B04;
    margin-top: 0.2rem;
}

@media (max-width: 575.98px) {
    .gl-offer-item .gl-btn {
        width: 100%;
    }
}

/* Statuses used by the offer letter checklist. */
.status-Not-Uploaded { background: #EEF1F6; color: #3C4A5C; border-color: #C6D0DD; }
.status-Under-Review-Document { background: #EDEAFB; color: #3D2E8F; border-color: #B7ACEB; }

/* Dashboard summary of the offer letter position. */
.gl-offer-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.6rem 1.5rem;
    margin: 0.35rem 0 0.85rem;
}

.gl-offer-summary__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.gl-offer-summary__label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #4A5A70;
}

.gl-offer-summary__value {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1B2635;
}

.gl-offer-summary__next {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: #1B2635;
    background: #F4F7FC;
    border: 1px solid #D5DFEC;
    border-radius: 10px;
    padding: 0.7rem 0.9rem;
    margin: 0 0 0.85rem;
}

.gl-offer-summary__next > i {
    color: #1E3A66;
    margin-top: 0.15rem;
}

/*
 * Bootstrap sizes .badge relative to its container (.75em), so a pill inside a
 * small table cell rendered at about 9.8px. Keep the relative scaling, but put
 * an absolute floor under it so a status pill is always legible.
 */
.badge {
    font-size: max(0.6875rem, 0.75em);
}

/* =========================================================================
   Requested Documents
   =========================================================================
   The request-only Documents area, and the navigation badge that switches it
   on. Built on the same gl-* tokens as the Application Procedures so a status means
   the same thing and looks the same wherever it is read.
   ====================================================================== */

/* ---- Navigation badge ---- */

.portal-nav .nav-link--badged {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.portal-nav .nav-link--badged .nav-link__text {
    /* A long label must shrink rather than push the badge off the sidebar. */
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--hma-accent, #C49A45);
    color: #22160A;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    justify-content: center;
}

.nav-badge--warning {
    background: #E2571C;
    color: #fff;
}

.nav-badge--muted {
    background: rgba(255, 255, 255, 0.24);
    color: #fff;
}

/* ---- Chips shared by the applicant cards and the admin queue ---- */

.gl-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--gl-line);
    background: var(--gl-surface-soft);
    color: var(--gl-text-soft);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.35;
    /* A long due-date label wraps inside the chip instead of widening the row. */
    max-width: 100%;
}

.gl-chip--required {
    background: var(--gl-changes-bg);
    border-color: var(--gl-changes-line);
    color: #6E2F03;
}

.gl-chip--warning {
    background: var(--gl-changes-bg);
    border-color: var(--gl-changes-line);
    color: #6E2F03;
}

.gl-chip--danger {
    background: var(--gl-rejected-bg);
    border-color: var(--gl-rejected-line);
    color: #7A140B;
}

.gl-chip--muted {
    background: var(--gl-surface-soft);
    color: var(--gl-text-soft);
}

/* ---- Applicant request cards ---- */

.dr-card-list {
    counter-reset: none;
}

.dr-card {
    /* No step number in front of a request, so the card is a single column
       rather than the number/body/action grid the steps use. */
    display: block;
}

.dr-card .gl-card__body {
    min-width: 0;
}

.dr-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 0.85rem;
    padding: 0;
    list-style: none;
}

.dr-card__chips li {
    display: inline-flex;
    min-width: 0;
}

.dr-block {
    margin: 0 0 1rem;
}

.dr-block__title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--gl-text);
    margin: 0 0 0.35rem;
}

.dr-correction {
    /* Corrections are the reason the applicant came back to the page, so they
       are stated before anything else on the card can distract from them. */
    font-size: 1rem;
}

.dr-upload-note {
    margin: 0.55rem 0 0;
}

.dr-submit {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--gl-line);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

.dr-submit textarea {
    width: 100%;
}

/* ---- Version and audit history ---- */

.dr-history {
    margin-top: 1rem;
    border-top: 1px solid var(--gl-line);
    padding-top: 0.75rem;
}

.dr-history > summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--gl-text-soft);
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.25rem 0;
}

.dr-history > summary:focus-visible {
    outline: 3px solid var(--hma-accent, #C49A45);
    outline-offset: 2px;
    border-radius: 6px;
}

.dr-version-list {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.dr-version {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--gl-line);
    border-radius: 10px;
    background: var(--gl-surface-soft);
}

.dr-version__number {
    flex: 0 0 auto;
    font-weight: 800;
    font-size: 0.8125rem;
    color: var(--gl-text-soft);
    background: #fff;
    border: 1px solid var(--gl-line);
    border-radius: 999px;
    padding: 0.15rem 0.5rem;
}

.dr-version__body {
    /* min-width:0 is what lets a long filename ellipsis instead of forcing the
       card wider than the viewport. */
    flex: 1 1 14rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.dr-version__name {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.dr-version__meta,
.dr-version__comment {
    font-size: 0.8125rem;
    color: var(--gl-text-soft);
    overflow-wrap: anywhere;
}

.dr-audit {
    list-style: none;
    margin: 0.85rem 0 0;
    padding: 0.75rem 0 0;
    border-top: 1px dashed var(--gl-line);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.dr-audit__item {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.5rem;
    font-size: 0.8125rem;
    color: var(--gl-text-soft);
}

.dr-audit__when {
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
}

.dr-audit__what {
    font-weight: 600;
    color: var(--gl-text);
}

.dr-audit__comment {
    flex: 1 1 100%;
    overflow-wrap: anywhere;
}

/* ---- Dashboard alert ---- */

.dr-dashboard-alert__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.dr-dashboard-alert__list {
    margin: 0 0 0.75rem;
    padding-left: 1.25rem;
}

.dr-dashboard-alert__list li {
    overflow-wrap: anywhere;
}

/* ---- Admin queue counters ---- */

.dr-count-row {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.75rem;
}

.dr-count {
    background: var(--gl-surface-soft, #F6F8FB);
    border: 1px solid var(--gl-line, #DDE3EC);
    border-radius: 12px;
    padding: 0.75rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.dr-count--alert {
    background: var(--gl-rejected-bg, #FDECEA);
    border-color: var(--gl-rejected-line, #F5C2BC);
}

.dr-count__value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
}

.dr-count__label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--gl-text-soft, #5A6779);
}

.gl-intro__done--attention {
    color: #6E2F03;
    background: var(--gl-changes-bg);
    border-color: var(--gl-changes-line);
}

/* ---- Small screens ----
   The cards already stack; these rules stop a long document name, a long
   instruction or a wide action row from producing a horizontal scrollbar. */

@media (max-width: 575.98px) {
    .dr-version {
        align-items: flex-start;
    }

    .dr-version .gl-btn {
        width: 100%;
        justify-content: center;
    }

    .dr-submit .gl-btn {
        width: 100%;
    }

    .dr-audit__when {
        flex: 1 1 100%;
    }

    .dr-count-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---- Long unbroken content ----
   A document name, an applicant email or a note can carry a long unbroken
   string. Without this it pushes the card wider than the viewport and the whole
   page scrolls sideways on a phone. */

.dr-card .gl-card__title,
.dr-card .gl-card__head,
.dr-card .gl-body,
.dr-card .gl-callout > div,
.dr-card .gl-rules,
.dr-card .gl-file__name,
.gl-chip,
.dr-admin-card h6,
.dr-admin-card p,
.dr-admin-card .text-muted,
.dr-admin-card a {
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
}

/* =========================================================================
   Grouped admin navigation
   =========================================================================
   The admin sidebar is organised into collapsible groups following the order
   the work is done. A group opens automatically when it contains the current
   page, so the active item is never hidden behind a closed section.
   ====================================================================== */

.nav-group {
    display: flex;
    flex-direction: column;
}

.portal-nav .nav-group__toggle {
    width: 100%;
    text-align: left;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
}

.nav-group__label {
    flex: 1 1 auto;
    min-width: 0;
}

.nav-group__chevron {
    flex: 0 0 auto;
    font-size: 0.7rem;
    opacity: 0.75;
    transition: transform 0.18s ease;
}

/* Bootstrap sets aria-expanded on the toggle; follow it rather than tracking
   open state separately. */
.portal-nav .nav-group__toggle[aria-expanded="true"] .nav-group__chevron {
    transform: rotate(180deg);
}

.nav-group__items {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.25rem 0 0.35rem 0.55rem;
    margin-left: 0.55rem;
    border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.portal-nav .nav-sublink {
    font-size: 0.82rem;
    font-weight: 500;
    padding: 0.45rem 0.6rem;
    color: rgba(255, 255, 255, 0.82);
}

.portal-nav .nav-sublink.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.22);
}

/* A group holding the current page keeps a visible marker even while the
   viewer scrolls the sidebar, so context is never lost. */
.nav-group--open > .nav-group__toggle {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

/* =========================================================================
   Admin Help
   ====================================================================== */

.help-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.help-chip {
    cursor: pointer;
    border: 1px solid var(--gl-line);
    background: var(--gl-surface-soft);
    color: var(--gl-text-soft);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
}

.help-chip.is-active {
    background: var(--hma-primary, #10213A);
    border-color: var(--hma-primary, #10213A);
    color: #fff;
}

.help-card__head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.help-card__location {
    font-size: 0.8125rem;
    color: var(--gl-text-soft);
    overflow-wrap: anywhere;
}

.help-card__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.help-card__summary {
    margin-bottom: 1rem;
    overflow-wrap: anywhere;
}

/* Two columns where there is room, stacked on a narrow screen. */
.help-card__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 1rem;
}

.help-block__title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--gl-text);
    margin-bottom: 0.4rem;
}

.help-list {
    margin: 0;
    padding-left: 1.15rem;
    font-size: 0.9rem;
    line-height: 1.55;
}

.help-list li {
    overflow-wrap: anywhere;
    margin-bottom: 0.2rem;
}

.help-warnings {
    margin-top: 1rem;
    padding: 0.75rem 0.9rem;
    border-radius: 10px;
    background: var(--gl-changes-bg);
    border: 1px solid var(--gl-changes-line);
}

.help-warnings .help-block__title { color: #6E2F03; }

.help-shot {
    margin: 1rem 0 0;
}

.help-shot img {
    width: 100%;
    height: auto;
    border: 1px solid var(--gl-line);
    border-radius: 10px;
    /* A full page capture is tall; cap it so a card stays scannable and let the
       reader open the image itself for detail. */
    max-height: 26rem;
    object-fit: cover;
    object-position: top center;
    background: #fff;
}

.help-shot figcaption {
    font-size: 0.8125rem;
    color: var(--gl-text-soft);
    margin-top: 0.4rem;
}

@media (max-width: 575.98px) {
    .help-card__badges { width: 100%; }
    .help-shot img { max-height: 18rem; }
}

/* The roles badge carries a full sentence ("Admissions Officer and
   Administrator (only an Administrator may invite staff)"), which a Bootstrap
   badge will not wrap. Left as-is it pushed the whole Help page sideways on a
   phone. */
.help-card__badges .badge {
    white-space: normal;
    text-align: left;
    overflow-wrap: anywhere;
    max-width: 100%;
}

.help-card__badges {
    max-width: 100%;
    min-width: 0;
}

/* ---------------------------------------------------------------------------
   COL request recipients (assets/js/col-request.js)

   Each of To / CC / BCC is a text input that the script turns into a chip box.
   The chips are flex items of the box itself rather than of a nested wrapper:
   a wrapper cannot shrink below its content, so one long address pushed the
   typing field onto a second line and hung the chip's remove button over the
   border. Everything here wraps, nothing overflows, and an empty box is the
   same height as the plain inputs beside it.
--------------------------------------------------------------------------- */
.col-recipient-row {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin-bottom: .45rem;
}

.col-recipient-row__label {
    flex: 0 0 2.6rem;
    padding-top: .42rem;
    color: #46586F;
    font-size: .82rem;
    font-weight: 600;
}

.col-recipient-row__label .text-danger { margin-left: .12rem; }

.col-recipient-row .form-control { flex: 1 1 auto; min-width: 0; }

@media (max-width: 575.98px) {
    .col-recipient-row { flex-direction: column; gap: .15rem; }
    .col-recipient-row__label { flex: none; padding-top: 0; }
}

.col-recipient-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem;
    min-height: calc(1.5em + .75rem + 2px); /* Bootstrap .form-control height */
    height: auto;
    padding: .25rem .5rem;
    cursor: text;
}

.col-recipient-box:focus-within {
    border-color: #9AA8BF;
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
}

.col-recipient-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    flex-shrink: 0;
    max-width: 100%;
    padding: .15rem .35rem .15rem .5rem;
    border: 1px solid #D5DBE4;
    border-radius: 999px;
    background: #F1F3F7;
    color: #172A45;
    font-size: .78rem;
    font-weight: 500;
    line-height: 1.4;
}

.col-recipient-chip--default {
    border-color: #C5CEDB;
    background: #E3E5E8;
}

.col-recipient-chip__address {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.col-recipient-chip__tag {
    flex-shrink: 0;
    color: #5C7A9E;
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.col-recipient-chip__remove {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #4C6B8C;
    font-size: .95rem;
    line-height: 1;
    cursor: pointer;
}

.col-recipient-chip__remove:hover,
.col-recipient-chip__remove:focus-visible {
    background: #D5DBE4;
    color: #10213A;
    outline: none;
}

.col-recipient-entry {
    flex: 1 1 7rem;
    min-width: 5rem;
    padding: .1rem 0;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: .9rem;
}

.col-recipient-entry:focus { outline: none; }

/* =========================================================================
   The end of the application: one Save Draft, one Save & Review
   -------------------------------------------------------------------------
   Every section used to carry its own pair of save buttons. They are gone —
   answers save themselves as they are typed — and these are the only two
   decisions left, at the end of the Application Procedures page.
   ========================================================================= */

.gl-submit-panel {
    border: 2px solid var(--gl-line);
    border-radius: 16px;
}

.gl-submit-panel .gl-section-title > i {
    color: var(--hma-primary);
}

.gl-application-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-top: 1.25rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--gl-line);
}

.gl-application-actions .gl-btn {
    flex: 0 1 auto;
}

/* On a phone the two buttons stack and go full width, so the primary action is
   never a thumb-width target squeezed beside the secondary one. */
@media (max-width: 36rem) {
    .gl-application-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .gl-application-actions .gl-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ---- "Saved automatically", in place of the removed Save button ---- */

.gl-autosave {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex: 1 1 16rem;
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--gl-text-soft);
}

.gl-autosave > i {
    color: var(--hma-primary);
    flex-shrink: 0;
}

/* ---- The consolidated review page ---- */

.gl-summary-list {
    margin: 0.75rem 0 0;
    display: grid;
    gap: 0.1rem;
}

.gl-summary-list__row {
    display: grid;
    grid-template-columns: minmax(10rem, 18rem) 1fr;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--gl-line);
}

.gl-summary-list__row:last-child {
    border-bottom: 0;
}

.gl-summary-list dt {
    font-weight: 600;
    color: var(--gl-text-soft);
    margin: 0;
}

.gl-summary-list dd {
    margin: 0;
    word-break: break-word;
}

/* A label and its answer side by side needs room the narrow viewports do not
   have; stacking keeps the answer readable instead of one word per line. */
@media (max-width: 48rem) {
    .gl-summary-list__row {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }
}

.gl-file-list {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gl-file-list__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    word-break: break-word;
}

.gl-file-list__item > i {
    color: var(--gl-text-soft);
    flex-shrink: 0;
}

/* The event name in the Notification Log. Monospace so the underscores line up
   and an event is easy to copy into the filter box, but not a <code> element:
   the Help-screenshot redactor masks long monospace tokens as credentials, and
   an event name is neither. */
.hma-event-name {
    display: inline-block;
    font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.8125rem;
    background: #F1F5F9;
    border-radius: 4px;
    padding: 0.1rem 0.35rem;
    color: #334155;
    /* An event name is one token. Breaking it mid-word to save a few pixels
       makes it unreadable and un-copyable; let the column carry it instead and
       let the table scroll, which the wrapper already allows. */
    white-space: nowrap;
}

/* The Notification Log carries eight columns, which is right at a desk and too
   many on a phone. The table scrolls inside its own container either way; this
   drops the two a reader can do without on a narrow screen, so the ones that
   answer "who got what, and did it arrive" stay visible without scrolling. */
@media (max-width: 48rem) {
    .hma-notification-log th:nth-child(3),
    .hma-notification-log td:nth-child(3),
    .hma-notification-log th:nth-child(8),
    .hma-notification-log td:nth-child(8) {
        display: none;
    }
}

/* ==========================================================================
   Layang Layang design system — component layer
   The last word on shared components, so every page (including the older
   gl-* procedure screens above) reads as one product. Tokens: :root at top.
   ========================================================================== */

/* ---- Typography ---- */
h1, h2, h3, h4, h5, h6 { color: var(--ll-navy-900); letter-spacing: -.01em; }
.portal-content h2, .portal-content .h2 { font-weight: 650; }
.portal-content h3, .portal-content .h3,
.portal-content h4, .portal-content .h4 { font-weight: 650; }
.portal-content h5, .portal-content .h5,
.portal-content h6, .portal-content .h6 { font-weight: 650; letter-spacing: -.005em; }
a { color: var(--ll-navy-700); text-underline-offset: 2px; }
a:hover { color: var(--ll-navy-900); }
.text-muted { color: var(--ll-muted) !important; }
.text-primary, .portal-content .text-primary { color: var(--ll-navy-700) !important; }
.text-gold { color: var(--ll-gold-700) !important; }
small, .small { font-size: .84rem; }
code { color: var(--ll-navy-800); }
.fw-semibold { font-weight: 600 !important; }

.ll-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    margin: 0;
    color: var(--ll-gold-700);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.ll-eyebrow::before { content: ''; width: 26px; height: 1px; background: currentColor; opacity: .8; }
.ll-eyebrow--light { color: var(--ll-gold-400); }

/* ---- Focus: always visible, never colour alone ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible,
.page-link:focus-visible {
    outline: 2px solid var(--ll-navy-700);
    outline-offset: 2px;
    box-shadow: var(--ll-ring);
}

/* ---- Cards ---- */
.card,
.portal-content .card {
    border: 1px solid var(--ll-line);
    border-radius: var(--ll-radius-lg);
    background: var(--ll-surface);
    box-shadow: var(--ll-shadow-sm);
}
.portal-content .card .card-body { padding: 1.25rem 1.35rem; }
.card-header {
    padding: 1rem 1.35rem;
    border-bottom: 1px solid var(--ll-line);
    background: transparent;
}
.card-header:first-child { border-radius: var(--ll-radius-lg) var(--ll-radius-lg) 0 0; }
.card-footer { border-top: 1px solid var(--ll-line); background: var(--ll-surface-2); }
.card-footer:last-child { border-radius: 0 0 var(--ll-radius-lg) var(--ll-radius-lg); }
.portal-content .card h5,
.portal-content .card h6,
.card-title { color: var(--ll-navy-900); font-weight: 650; letter-spacing: -.005em; }
.portal-content .card h5 > i:first-child,
.portal-content .card h6 > i:first-child,
.card-title > i:first-child { color: var(--ll-gold-600); margin-right: .2rem; }

/* ---- Buttons ---- */
.btn {
    --bs-btn-padding-y: .5rem;
    --bs-btn-padding-x: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: var(--ll-control-h);
    border-radius: var(--ll-radius-sm);
    font-weight: 600;
    font-size: var(--ll-text-md);
    letter-spacing: 0;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn.w-100, .d-grid > .btn { display: flex; }
.btn-sm { min-height: 32px; padding: .3rem .7rem; border-radius: 8px; font-size: .82rem; }
.btn-lg { min-height: 50px; padding: .7rem 1.4rem; border-radius: 12px; font-size: 1rem; }
.btn i { line-height: 1; }

/* Action hierarchy
   Primary   — gold with dark text: the one main action of a page or form.
   Secondary — white with a clear border (.btn-outline-primary/-secondary).
   Tertiary  — text button (.btn-link).
   Danger    — destructive actions only (.btn-danger / .btn-outline-danger). */
.btn-primary,
.portal-content .btn-primary,
.auth-shell .btn-primary,
.btn-gold,
.btn-warning {
    color: var(--ll-on-gold) !important;
    border: 1px solid var(--ll-gold-600) !important;
    background: var(--ll-grad-gold) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(16, 33, 58, .12);
    font-weight: 600;
}
.btn-primary:hover, .btn-primary:focus-visible,
.portal-content .btn-primary:hover, .portal-content .btn-primary:focus-visible,
.auth-shell .btn-primary:hover, .auth-shell .btn-primary:focus-visible,
.btn-gold:hover, .btn-gold:focus-visible,
.btn-warning:hover, .btn-warning:focus-visible {
    color: var(--ll-on-gold) !important;
    border-color: #8C6A27 !important;
    background: linear-gradient(180deg, #C9A04D 0%, #B88C38 100%) !important;
}
.btn-primary:active, .btn-primary.active { color: var(--ll-on-gold) !important; background: #B88C38 !important; }
.btn-primary:disabled, .btn-primary.disabled, .btn-gold:disabled, .btn-warning:disabled {
    color: #5F584A !important;
    border-color: #E0D6C2 !important;
    background: #EFE8D8 !important;
    box-shadow: none;
    opacity: 1;
}
.btn-outline-primary { color: var(--ll-heading); border-color: var(--ll-line-strong); background: #FFF; }
.btn-outline-primary:hover, .btn-outline-primary:focus-visible, .btn-outline-primary.active {
    color: var(--ll-heading); border-color: var(--ll-navy-700); background: var(--ll-navy-50);
}
.btn-outline-secondary, .btn-light { color: var(--ll-ink-2); border-color: var(--ll-line-strong); background: #FFF; }
.btn-outline-secondary:hover, .btn-outline-secondary:focus-visible,
.btn-light:hover, .btn-light:focus-visible { color: var(--ll-heading); border-color: #AEB4BE; background: var(--ll-surface-2); }
.btn-secondary { color: #FFF; border-color: var(--ll-navy-700); background: var(--ll-navy-700); }
.btn-secondary:hover { color: #FFF; border-color: var(--ll-navy-900); background: var(--ll-navy-900); }
.btn-dark { color: #FFF; border-color: var(--ll-navy-900); background: var(--ll-navy-900); }
.btn-dark:hover { color: #FFF; border-color: var(--ll-navy-800); background: var(--ll-navy-800); }
.btn-outline-light { color: #FFF; border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .04); }
.btn-outline-light:hover, .btn-outline-light:focus-visible { color: var(--ll-heading); border-color: #FFF; background: #FFF; }
.btn-success { color: #FFF; border-color: #1F7A45; background: #1F7A45; }
.btn-success:hover { color: #FFF; border-color: #17663A; background: #17663A; }
.btn-danger { color: #FFF; border-color: #B42318; background: #B42318; }
.btn-danger:hover { color: #FFF; border-color: #912018; background: #912018; }
.btn-outline-success { color: #1F7A45; border-color: #A8D8B5; background: #FFF; }
.btn-outline-success:hover { color: #FFF; background: #1F7A45; border-color: #1F7A45; }
.btn-outline-danger { color: #B42318; border-color: #F1B9B2; background: #FFF; }
.btn-outline-danger:hover { color: #FFF; background: #B42318; border-color: #B42318; }
.btn-link { color: var(--ll-navy-700); font-weight: 600; text-decoration: none; }
.btn-link:hover { color: var(--ll-navy-900); text-decoration: underline; }

/* Busy state, set by app.js while a form is submitting. */
.btn.is-busy { position: relative; pointer-events: none; color: transparent !important; }
.btn.is-busy > * { visibility: hidden; }
.btn.is-busy::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 1.05rem;
    height: 1.05rem;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #FFF;
    border-radius: 50%;
    animation: ll-spin .7s linear infinite;
}
.btn-outline-primary.is-busy::after,
.btn-outline-secondary.is-busy::after,
.btn-light.is-busy::after,
.btn-gold.is-busy::after,
.btn-warning.is-busy::after { border-color: rgba(16, 33, 58, .25); border-top-color: var(--ll-navy-900); }
@keyframes ll-spin { to { transform: rotate(360deg); } }

/* ---- Forms ---- */
.form-label { color: var(--ll-ink-2); font-size: .88rem; font-weight: 600; margin-bottom: .4rem; }
.form-text { color: var(--ll-muted); font-size: .82rem; }
.form-control,
.form-select {
    min-height: 44px;
    border: 1px solid var(--ll-line-strong);
    border-radius: 10px;
    color: var(--ll-ink);
    background-color: #FFF;
    font-size: .95rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}
textarea.form-control { min-height: 96px; }
.form-control-sm, .form-select-sm { min-height: 34px; border-radius: 8px; font-size: .85rem; }
.form-control-lg, .form-select-lg { min-height: 52px; border-radius: 12px; }
.form-control::placeholder { color: #98A1B0; }
.form-control:hover, .form-select:hover { border-color: #AEB8C7; }
.form-control:focus,
.form-select:focus {
    border-color: var(--ll-navy-700);
    box-shadow: var(--ll-ring);
}
.form-control:disabled, .form-control[readonly], .form-select:disabled { color: var(--ll-ink-2); background-color: var(--ll-surface-2); }
.form-control.is-invalid, .was-validated .form-control:invalid { border-color: #B42318; }
.form-control.is-invalid:focus { box-shadow: 0 0 0 4px rgba(180, 35, 24, .16); }
.invalid-feedback { color: #8E1B10; font-size: .82rem; }
.form-check-input { width: 1.1em; height: 1.1em; border-color: var(--ll-line-strong); }
.form-check-input:checked { border-color: var(--ll-navy-700); background-color: var(--ll-navy-700); }
.form-check-input:focus { border-color: var(--ll-navy-700); box-shadow: var(--ll-ring); }
.form-switch .form-check-input { width: 2.2em; }
.input-group-text { border-color: var(--ll-line-strong); color: var(--ll-muted); background: var(--ll-surface-2); }

/* ---- Tables ---- */
.table { --bs-table-hover-bg: #FAF9F6; color: var(--ll-ink); }
.table > :not(caption) > * > * { padding: .75rem .85rem; }
.table thead th,
.portal-content .table thead th {
    padding-top: .7rem;
    padding-bottom: .7rem;
    border-bottom: 1px solid var(--ll-line);
    color: var(--ll-muted);
    background: var(--ll-surface-2);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    white-space: nowrap;
}
.table thead th:first-child { border-top-left-radius: 10px; }
.table thead th:last-child { border-top-right-radius: 10px; }
.table tbody td,
.portal-content .table tbody td {
    border-color: #EDF0F4;
    color: var(--ll-ink);
    font-size: .88rem;
    vertical-align: middle;
}
.table tbody tr { transition: background-color .12s ease; }
.table tbody tr:hover,
.portal-content .table tbody tr:hover { background: #FAF9F6; }
.table tbody tr:last-child td { border-bottom: 0; }
.table-responsive { border-radius: 12px; }
.table-light, .table-light > th, .table-light > td { --bs-table-bg: var(--ll-surface-2); }

/* DataTables controls */
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_info { color: var(--ll-muted); font-size: .85rem; }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    min-height: 38px;
    border: 1px solid var(--ll-line-strong);
    border-radius: 10px;
}
.dataTables_wrapper .dataTables_filter input { min-width: 220px; padding-left: .8rem; }
.dataTables_wrapper .dataTables_filter input:focus { border-color: var(--ll-navy-700); box-shadow: var(--ll-ring); outline: 0; }
.page-link { border-color: var(--ll-line); color: var(--ll-navy-700); }
.page-link:hover { color: var(--ll-navy-900); background: var(--ll-surface-2); }
.page-item.active .page-link,
.active > .page-link { border-color: var(--ll-navy-700); color: #FFF; background: var(--ll-navy-700); }
.pagination { --bs-pagination-border-radius: 8px; gap: .2rem; }
.page-item .page-link { border-radius: 8px !important; }
td.dataTables_empty,
.table .empty-state-cell {
    padding: 2.5rem 1rem !important;
    color: var(--ll-muted);
    text-align: center;
    background: repeating-linear-gradient(135deg, #FFF 0 12px, #FAFBFC 12px 24px);
}

/* ---- Badges, pills, chips ---- */
.badge { padding: .38em .7em; border-radius: 999px; font-weight: 600; letter-spacing: .01em; }
.badge.bg-primary, .text-bg-primary { color: #FFF !important; background: var(--ll-navy-700) !important; }
.badge.bg-secondary, .text-bg-secondary { color: #FFF !important; background: #526173 !important; }
.badge.bg-success, .text-bg-success { color: #FFF !important; background: #1F7A45 !important; }
.badge.bg-danger, .text-bg-danger { color: #FFF !important; background: #B42318 !important; }
.badge.bg-info, .text-bg-info { color: var(--ll-navy-900) !important; background: #DCE6F4 !important; }
.badge.bg-light, .text-bg-light { color: var(--ll-ink-2) !important; background: var(--ll-surface-2) !important; border: 1px solid var(--ll-line); }
.badge.bg-warning, .text-bg-warning { color: var(--ll-navy-950) !important; background: var(--ll-gold-300) !important; border-color: var(--ll-gold-300) !important; }
.bg-warning:not(.badge):not(.btn) { background-color: var(--ll-gold-300) !important; }

/* ---- Alerts ---- */
.alert {
    display: block;
    padding: .9rem 1.1rem;
    border: 1px solid transparent;
    border-left-width: 4px;
    border-radius: 12px;
    font-size: .92rem;
}
.alert-success { color: #155C2B; background: #EEF8F1; border-color: #A8D8B5; border-left-color: #1F7A45; }
.alert-danger  { color: #8E1B10; background: #FCEFED; border-color: #F1B9B2; border-left-color: #B42318; }
.alert-warning { color: #6B4200; background: #FFF7E6; border-color: #EFCF8C; border-left-color: #C98A16; }
.alert-info    { color: var(--ll-navy-800); background: #F1F4F9; border-color: #C5CEDB; border-left-color: var(--ll-navy-700); }
.alert-light   { color: var(--ll-ink-2); background: var(--ll-surface-2); border-color: var(--ll-line); border-left-color: var(--ll-gold-500); }
.alert-secondary { color: var(--ll-ink-2); background: #F1F3F6; border-color: var(--ll-line); border-left-color: #526173; }
.alert .alert-link { color: inherit; }
.alert-dismissible .btn-close { padding: 1.05rem 1rem; }
.announcement-banner { border-left-color: var(--ll-gold-500); }

/* ---- Navigation pieces: tabs, pills, dropdowns, list groups ---- */
.nav-tabs { gap: .25rem; border-bottom: 1px solid var(--ll-line); }
.nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--ll-muted);
    font-weight: 600;
}
.nav-tabs .nav-link:hover { color: var(--ll-navy-900); border-bottom-color: var(--ll-line-strong); }
.nav-tabs .nav-link.active { color: var(--ll-navy-900); background: transparent; border-bottom-color: var(--ll-gold-500); }
.nav-pills .nav-link { border-radius: 999px; color: var(--ll-ink-2); font-weight: 600; }
.nav-pills .nav-link.active { color: #FFF; background: var(--ll-navy-700); }
.dropdown-menu {
    padding: .4rem;
    border: 1px solid var(--ll-line);
    border-radius: 12px;
    box-shadow: var(--ll-shadow);
    font-size: .9rem;
}
.dropdown-item { border-radius: 8px; padding: .5rem .7rem; color: var(--ll-ink); }
.dropdown-item:hover, .dropdown-item:focus { color: var(--ll-navy-900); background: var(--ll-surface-2); }
.dropdown-header { color: var(--ll-gold-700); font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.list-group-item { border-color: var(--ll-line); }
.list-group-item.active { border-color: var(--ll-navy-700); background: var(--ll-navy-700); }
.accordion-button:not(.collapsed) { color: var(--ll-navy-900); background: var(--ll-gold-50); box-shadow: inset 0 -1px 0 var(--ll-line); }
.accordion-button:focus { border-color: var(--ll-navy-700); box-shadow: var(--ll-ring); }

/* ---- Progress ---- */
.progress { height: .6rem; border-radius: 999px; background: #E9ECF1; }
.progress-bar { border-radius: 999px; background: linear-gradient(90deg, var(--ll-navy-700) 0%, var(--ll-navy-600) 55%, var(--ll-gold-500) 100%); }
.progress-bar.bg-success { background: linear-gradient(90deg, #1F7A45, #3C9A62) !important; }
.progress-bar.bg-warning { background: var(--ll-grad-gold) !important; }
.progress-bar.bg-danger { background: #B42318 !important; }

/* ---- Dialogs ---- */
.modal-content { border: 0; border-radius: var(--ll-radius-lg); box-shadow: var(--ll-shadow-lg); }
.modal-header { padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--ll-line); }
.modal-title { color: var(--ll-navy-900); font-weight: 650; }
.modal-body { padding: 1.25rem 1.4rem; }
.modal-footer { padding: .9rem 1.4rem; border-top: 1px solid var(--ll-line); background: var(--ll-surface-2); border-radius: 0 0 var(--ll-radius-lg) var(--ll-radius-lg); }
.modal-backdrop.show { opacity: .55; }
.modal-backdrop { background: var(--ll-navy-950); }
.offcanvas { border-color: var(--ll-line); }

/* SweetAlert2 confirmations */
.swal2-popup {
    padding: 1.6rem 1.5rem 1.4rem !important;
    border-radius: var(--ll-radius-lg) !important;
    font-family: var(--ll-font) !important;
    box-shadow: var(--ll-shadow-lg) !important;
}
.swal2-title { color: var(--ll-navy-900) !important; font-size: 1.3rem !important; font-weight: 650 !important; }
.swal2-html-container { color: var(--ll-ink-2) !important; font-size: .95rem !important; }
.swal2-actions { gap: .5rem; }
.swal2-styled { margin: 0 !important; border-radius: 10px !important; font-weight: 600 !important; font-size: .92rem !important; padding: .6rem 1.2rem !important; }
.swal2-styled.swal2-confirm { background: linear-gradient(135deg, var(--ll-navy-700), var(--ll-navy-900)) !important; }
.swal2-styled.swal2-cancel { color: var(--ll-ink-2) !important; border: 1px solid var(--ll-line-strong) !important; background: #FFF !important; }
.swal2-styled.swal2-deny { background: #B42318 !important; }
.swal2-styled:focus { box-shadow: var(--ll-ring) !important; }
.swal2-icon.swal2-warning { color: #C98A16 !important; border-color: #EFCF8C !important; }
.swal2-icon.swal2-info, .swal2-icon.swal2-question { color: var(--ll-navy-700) !important; border-color: #C5CEDB !important; }
.swal2-timer-progress-bar { background: var(--ll-gold-500) !important; }
.swal2-toast { border-radius: 12px !important; }

/* ---- Empty states ---- */
.empty-state,
.ll-empty {
    display: grid;
    justify-items: center;
    gap: .35rem;
    padding: 2.5rem 1.25rem;
    border: 1px dashed var(--ll-line-strong);
    border-radius: var(--ll-radius-lg);
    color: var(--ll-muted);
    background: var(--ll-surface-2);
    text-align: center;
}
.empty-state > i:first-child,
.ll-empty > i:first-child { margin-bottom: .35rem; color: var(--ll-gold-600); font-size: 1.6rem; }

/* ---- Charts (Chart.js canvases sit inside cards) ---- */
.portal-content canvas { max-width: 100%; }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---- Page-level refinements ---- */
.portal-content .card.admin-kpi-strip { border: 0; background: transparent; box-shadow: none; }
.portal-content .card.admin-kpi-strip > .card-body { padding: 0; }
.portal-content a.card { color: inherit; transition: border-color var(--ll-dur) var(--ll-ease), box-shadow var(--ll-dur) var(--ll-ease); }
.portal-content a.card:hover { border-color: var(--ll-gold-300); box-shadow: var(--ll-shadow-sm); }

/* A chart with nothing to plot says so instead of drawing an empty box. */
.dash-chart-empty {
    display: grid;
    place-content: center;
    justify-items: center;
    gap: .4rem;
    height: 100%;
    min-height: 180px;
    border: 1px dashed var(--ll-line-strong);
    border-radius: var(--ll-radius);
    color: var(--ll-muted);
    background: var(--ll-surface-2);
    font-size: .88rem;
    text-align: center;
}
.dash-chart-empty i { color: var(--ll-gold-600); font-size: 1.3rem; }

/* Brand welcome / primary notices: a navy-to-gold wash instead of Bootstrap blue. */
.alert-primary {
    color: var(--ll-navy-900);
    border-color: #DDD3BE;
    border-left-color: var(--ll-gold-500);
    background: linear-gradient(100deg, var(--ll-gold-50) 0%, #F3F5F9 100%);
}
.alert-primary .alert-link { color: var(--ll-navy-700); }
.alert-primary > div > i:first-child, .alert-primary > i:first-child { color: var(--ll-gold-600); }

.btn-outline-warning { color: var(--ll-gold-700); border-color: #DDD3BE; background: #FFF; }
.btn-outline-warning:hover, .btn-outline-warning:focus-visible, .btn-outline-warning.active {
    color: var(--ll-navy-950); border-color: var(--ll-gold-500); background: var(--ll-gold-100);
}
.btn-outline-info { color: var(--ll-navy-700); border-color: var(--ll-line-strong); }
.btn-outline-info:hover { color: #FFF; border-color: var(--ll-navy-700); background: var(--ll-navy-700); }

/* The applicant-number chip must not pick up the old boxed-icon rule. */


.compact-metric-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

/* Filter rows: a column holding several buttons wraps rather than pushing
   the page sideways when the column gets narrow (tablet widths). */
[class*="col-"].d-flex { flex-wrap: wrap; }
[class*="col-"].d-flex > .btn { flex: 1 1 auto; }
@media (max-width: 991px) {
    .auth-visual { justify-content: flex-start; min-height: 0 !important; }
}
@media (max-width: 760px) {
    .compact-metric-row { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
    .compact-metric-item { min-height: 0; }
}

/* ==========================================================================
   COL Acceptance Tracker (admin/col-uploads.php, col-documents-email.php,
   the applicant record and the applicant's COL Acceptance page).
   No fixed-height inner scroll areas: the page scrolls as one.
   ========================================================================== */
.col-intro { max-width: 70ch; margin-bottom: 1rem; }

.col-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.col-tiles__group { padding: .9rem 1rem 1rem; border: 1px solid var(--ll-line); border-radius: var(--ll-radius-lg); background: #FFF; box-shadow: var(--ll-shadow-xs); }
.col-tiles__title { margin: 0 0 .6rem; color: var(--ll-gold-700); font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.col-tiles__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .5rem; margin: 0; padding: 0; list-style: none; }
.col-tile {
    display: grid; gap: .1rem; height: 100%; padding: .55rem .7rem;
    border: 1px solid var(--ll-line); border-radius: 10px;
    color: var(--ll-ink); background: var(--ll-surface-2); text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease;
}
.col-tile:hover { border-color: var(--ll-line-strong); background: #FFF; color: var(--ll-navy-900); }
.col-tile.is-current { border-color: var(--ll-navy-700); background: var(--ll-navy-50); box-shadow: inset 0 0 0 1px var(--ll-navy-700); }
.col-tile__count { color: var(--ll-navy-900); font-size: 1.25rem; font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1.2; }
.col-tile__label { color: var(--ll-muted); font-size: .78rem; line-height: 1.3; }
.col-tile.is-current .col-tile__label { color: var(--ll-navy-800); font-weight: 600; }

.col-filters { margin-bottom: 1rem; }
.col-resultbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.col-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.col-bulk__count { color: var(--ll-muted); font-size: .86rem; }

.col-cards { display: grid; gap: 1rem; }
.col-card {
    padding: 1.1rem 1.25rem 1.25rem;
    border: 1px solid var(--ll-line); border-radius: var(--ll-radius-lg);
    background: #FFF; box-shadow: var(--ll-shadow-sm);
    scroll-margin-top: 96px;
}
.portal-content .card .col-card { padding: 0; border: 0; box-shadow: none; }
.col-card__head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .75rem 1rem; }
.col-card__select { margin: .25rem 0 0; }
.col-card__select .form-check-input { width: 1.2em; height: 1.2em; }
.col-card__who { flex: 1 1 260px; min-width: 0; }
.col-card__name { margin: 0; font-size: 1.05rem; font-weight: 650; }
.col-card__name a { color: var(--ll-navy-900); text-decoration: none; }
.col-card__name a:hover { text-decoration: underline; }
.col-card__meta { display: flex; flex-wrap: wrap; gap: .2rem .9rem; margin: .2rem 0 0; color: var(--ll-muted); font-size: .84rem; }
.col-card__id { color: var(--ll-gold-700); font-weight: 600; font-variant-numeric: tabular-nums; }
.col-card__actions { display: flex; flex-wrap: wrap; gap: .4rem; }

.col-card__statuses { display: flex; flex-wrap: wrap; gap: .5rem; margin: .9rem 0 0; padding: 0; list-style: none; }
.col-status {
    display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .4rem;
    padding: .35rem .75rem; border: 1px solid var(--gl-idle-line); border-radius: 999px;
    color: var(--gl-idle-fg); background: var(--gl-idle-bg); font-size: .84rem;
}
.col-status i { align-self: center; }
.col-status__label { opacity: .85; }
.col-status__detail { font-size: .78rem; opacity: .9; }
.col-status--progress  { color: var(--gl-progress-fg);  background: var(--gl-progress-bg);  border-color: var(--gl-progress-line); }
.col-status--ready     { color: var(--gl-ready-fg);     background: var(--gl-ready-bg);     border-color: var(--gl-ready-line); }
.col-status--review    { color: var(--gl-review-fg);    background: var(--gl-review-bg);    border-color: var(--gl-review-line); }
.col-status--changes   { color: var(--gl-changes-fg);   background: var(--gl-changes-bg);   border-color: var(--gl-changes-line); }
.col-status--approved  { color: var(--gl-approved-fg);  background: var(--gl-approved-bg);  border-color: var(--gl-approved-line); }
.col-status--submitted { color: var(--gl-submitted-fg); background: var(--gl-submitted-bg); border-color: var(--gl-submitted-line); }
.col-status--rejected  { color: var(--gl-rejected-fg);  background: var(--gl-rejected-bg);  border-color: var(--gl-rejected-line); }

.col-card__result { margin: .9rem 0 0; }
.col-card__result:focus { outline: 2px solid var(--ll-navy-700); outline-offset: 2px; }

.col-files { display: grid; gap: .75rem; margin-top: 1rem; }
.col-file {
    display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); gap: .75rem 1.25rem;
    padding: .85rem 1rem; border: 1px solid var(--ll-line); border-radius: var(--ll-radius); background: var(--ll-surface-2);
}
.col-file__type h4 { margin: 0 0 .35rem; font-size: .92rem; font-weight: 650; }
.col-review {
    display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem;
    border: 1px solid var(--gl-idle-line); border-radius: 999px;
    color: var(--gl-idle-fg); background: #FFF; font-size: .8rem; font-weight: 600;
}
.col-review--not_reviewed { color: var(--gl-review-fg); background: var(--gl-review-bg); border-color: var(--gl-review-line); }
.col-review--accepted { color: var(--gl-approved-fg); background: var(--gl-approved-bg); border-color: var(--gl-approved-line); }
.col-review--needs_correction { color: var(--gl-changes-fg); background: var(--gl-changes-bg); border-color: var(--gl-changes-line); }
.col-review--missing { color: var(--ll-muted); }
.col-file__body { min-width: 0; }
.col-file__facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .4rem 1rem; margin: 0 0 .6rem; }
.col-file__facts > div { min-width: 0; }
.col-file__facts dt { color: var(--ll-muted); font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.col-file__facts dd { margin: 0; font-size: .88rem; }
.col-file__wide { grid-column: 1 / -1; }
.col-file__note { color: var(--ll-ink-2); font-style: italic; }
.col-file__actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.col-file__correct, .col-file__older { margin-top: .6rem; }
.col-file__older-actions { display: inline-flex; gap: .75rem; margin-left: .35rem; white-space: nowrap; }
.col-file__correct summary, .col-file__older summary { cursor: pointer; color: var(--ll-navy-700); font-size: .86rem; font-weight: 600; }
.col-file__correct summary:focus-visible, .col-file__older summary:focus-visible { outline: 2px solid var(--ll-navy-700); outline-offset: 2px; border-radius: 4px; }
.col-file__older ul { margin: .5rem 0 0; padding-left: 1.1rem; color: var(--ll-ink-2); font-size: .84rem; }
.col-file__older li { margin-bottom: .3rem; }
.col-replaced { display: inline-flex; align-items: center; gap: .3rem; padding: .05rem .5rem; border-radius: 999px; color: #4A5568; background: #EDF0F4; font-size: .74rem; font-weight: 600; }

/* Documents email */
.col-envelope { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .3rem 1rem; margin: .5rem 0 1rem; }
.col-envelope > div { display: contents; }
.col-envelope dt { color: var(--ll-muted); font-size: .84rem; font-weight: 600; }
.col-envelope dd { margin: 0; overflow-wrap: anywhere; }
.col-preview__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: 1rem; align-items: start; }
.col-preview__frame { display: block; width: 100%; height: 360px; border: 1px solid var(--ll-line); border-radius: var(--ll-radius); background: #FFF; }
.col-attach, .col-missing { margin: 0 0 .6rem; padding: 0; list-style: none; }
.col-attach li, .col-missing li { margin-bottom: .45rem; }
.col-attach i { color: var(--ll-gold-600); margin-right: .3rem; }
.col-missing li { color: #7A4A00; }
.col-sendbar { display: flex; justify-content: flex-end; padding: .5rem 0 1rem; }
.col-results { margin: 0 0 1rem; padding: 0; list-style: none; }
.col-results__item { padding: .4rem 0; border-bottom: 1px solid var(--ll-line); }
.col-results__item:last-child { border-bottom: 0; }

/* Applicant's own page */
.col-applicant-count { display: inline-flex; align-items: center; gap: .35rem; color: var(--ll-ink-2); font-size: .86rem; font-weight: 600; }
.col-applicant-count i { color: #1F7A45; }
.col-lock-note { display: flex; gap: .5rem; margin: .5rem 0 0; padding: .65rem .8rem; border: 1px solid var(--gl-approved-line); border-radius: 10px; color: var(--gl-approved-fg); background: var(--gl-approved-bg); font-size: .88rem; }
.col-lock-note i { margin-top: .2rem; }

@media (max-width: 991px) {
    .col-preview__grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    /* File rows stack on narrow screens. */
    .col-file { grid-template-columns: 1fr; }
    .col-intro { display: none; }
    .col-card { padding: 1rem; }
    .col-resultbar { align-items: stretch; }
    .col-bulk { width: 100%; }
    .col-bulk .btn { flex: 1 1 auto; }
    .col-history thead { display: none; }
    .col-history tr { display: block; padding: .5rem 0; border-bottom: 1px solid var(--ll-line); }
    .col-history td { display: block; border: 0; padding: .15rem 0; }
}

/* ==========================================================================
   Executive refinements — shared page pieces
   ========================================================================== */

/* Navigation spacing: groups separated by space, not a rule on every group. */
.nav-group { margin-top: 2px; padding-top: 0; border-top: 0; }

/* Six headline figures: one row on wide screens, three by two on laptops. */
.admin-kpi-row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1279px) { .admin-kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .admin-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.admin-kpi-hint { order: -1; color: var(--ll-muted); font-size: var(--ll-text-xs); line-height: 1.35; }
.admin-kpi-item { flex-direction: column; justify-content: flex-start; }
.admin-kpi-item .admin-kpi-value { order: 1; }
.admin-kpi-item .admin-kpi-label { order: 2; color: var(--ll-heading); font-weight: 600; }
.admin-kpi-item .admin-kpi-hint { order: 3; }
.admin-kpi-item { gap: 2px; }

/* Headings inside the content: one sans-serif scale. */
.portal-content h2, .portal-content .h2 { font-size: var(--ll-text-xl); }
.portal-content .card h5, .portal-content .card .h5,
.portal-content .card h6, .portal-content .card .h6,
.section-title {
    margin-bottom: var(--ll-space-3);
    color: var(--ll-heading);
    font-family: var(--ll-font);
    font-size: var(--ll-text-lg);
    font-weight: 650;
    line-height: 1.3;
    letter-spacing: -.005em;
}
.portal-content .card h5 > i:first-child, .portal-content .card h6 > i:first-child,
.section-title > i:first-child { color: var(--ll-gold-700); font-size: .95em; margin-right: 4px; }
.portal-content .text-primary { color: var(--ll-gold-700) !important; }
.section-count { margin: 0 0 var(--ll-space-4); color: var(--ll-ink-2); }
.section-count strong { color: var(--ll-heading); font-variant-numeric: tabular-nums; }

/* A quiet note that explains how a page behaves. */
.callout-note {
    max-width: 90ch;
    padding: var(--ll-space-3) var(--ll-space-4);
    border: 1px solid var(--ll-line);
    border-left: 3px solid var(--ll-gold-500);
    border-radius: var(--ll-radius);
    color: var(--ll-ink-2);
    background: var(--ll-grad-intro);
    font-size: var(--ll-text-md);
}

/* Cards: white surfaces, fine borders, 12px corners. */
.card, .portal-content .card { border-color: var(--ll-line); border-radius: var(--ll-radius-lg); box-shadow: var(--ll-shadow-xs); }
.portal-content .card .card-body { padding: var(--ll-space-5); }
@media (max-width: 767px) { .portal-content .card .card-body { padding: var(--ll-space-4); } }

/* Tables: warm neutral header, light separators, readable body text. */
.table thead th, .portal-content .table thead th {
    color: var(--ll-muted);
    background: #F3F2EE;
    border-bottom-color: var(--ll-line);
    font-size: var(--ll-text-xs);
    letter-spacing: .04em;
}
.table tbody td, .portal-content .table tbody td { color: var(--ll-ink); font-size: var(--ll-text-md); border-color: #ECEDEF; }
.table tbody tr:hover, .portal-content .table tbody tr:hover { background: #FBFAF7; }
.row-actions { display: inline-flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: var(--ll-space-1); }
.dropdown-item { display: flex; align-items: center; gap: var(--ll-space-2); }
.dropdown-item i { width: 16px; color: var(--ll-muted); text-align: center; }
.dropdown-item.text-danger i { color: inherit; }

/* Forms: required fields are marked, and controls share one height. */
.form-label:has(+ :required)::after,
.form-label:has(+ .input-group :required)::after,
.mb-3:has(> :required) > .form-label::after,
[class*="col-"]:has(> :required) > .form-label::after { content: ' *'; color: #B42318; font-weight: 600; }
.form-control, .form-select { min-height: var(--ll-control-h); border-radius: var(--ll-radius-sm); font-size: var(--ll-text-md); }
.form-control-sm, .form-select-sm { min-height: var(--ll-control-h-sm); font-size: var(--ll-text-sm); }
.form-label { font-size: var(--ll-text-sm); }

/* Applicant notifications. */
.notice-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.notice-list__item { padding: var(--ll-space-4) 0; border-bottom: 1px solid var(--ll-line); }
.notice-list__item:first-child { padding-top: 0; }
.notice-list__item:last-child { border-bottom: 0; padding-bottom: 0; }
.notice-list__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--ll-space-1) var(--ll-space-4); }
.notice-list__title { margin: 0; color: var(--ll-heading); font-family: var(--ll-font); font-size: var(--ll-text-base) !important; font-weight: 650; }
.notice-list__time { color: var(--ll-muted); font-size: var(--ll-text-sm); white-space: nowrap; }
.notice-list__body { max-width: var(--ll-read-max); margin: var(--ll-space-1) 0 var(--ll-space-2); color: var(--ll-ink); }
.notice-list__type { display: inline-block; padding: 1px var(--ll-space-2); border-radius: 999px; color: var(--ll-ink-2); background: #F1EFE9; font-size: var(--ll-text-xs); font-weight: 600; }

/* Confirmation dialogs: danger only when the action is destructive. */
.swal2-styled.swal2-confirm { color: var(--ll-on-gold) !important; background: var(--ll-grad-gold) !important; border: 1px solid var(--ll-gold-600) !important; }
.swal2-styled.swal2-confirm.swal2-confirm--danger { color: #FFF !important; background: #B42318 !important; border-color: #B42318 !important; }
.swal2-icon.swal2-question { color: var(--ll-navy-700) !important; border-color: #C5CEDB !important; }

/* Focus: the shared ring on every interactive control. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
.btn:focus-visible, .dropdown-item:focus-visible, .page-link:focus-visible, summary:focus-visible {
    outline: 0;
    box-shadow: var(--ll-ring);
}
.form-control:focus, .form-select:focus { border-color: var(--ll-navy-700); box-shadow: var(--ll-ring); }

/* Row actions are never the page's main action: a primary button inside a
   table, list row or card grid reads as secondary, so gold stays rare. */
.table .btn-primary,
.list-group .btn-primary {
    color: var(--ll-heading) !important;
    border: 1px solid var(--ll-line-strong) !important;
    background: #FFF !important;
    box-shadow: none !important;
}
.table .btn-primary:hover,
.list-group .btn-primary:hover { border-color: var(--ll-navy-700) !important; background: var(--ll-navy-50) !important; }

/* Sign-in style pages match auth/login.php: warm workspace, white form card. */
.auth-shell { background: var(--ll-canvas); }
.auth-form-panel { background: var(--ll-canvas); }
.auth-form-wrap {
    width: min(100%, 460px);
    padding: var(--ll-space-6);
    border: 1px solid var(--ll-line);
    border-radius: var(--ll-radius-lg);
    background: #FFF;
    box-shadow: var(--ll-shadow-sm);
}
.auth-form-eyebrow { color: var(--ll-gold-700); letter-spacing: .08em; }
@media (max-width: 767px) { .auth-form-wrap { padding: var(--ll-space-5) var(--ll-space-4); } }

/* Top bar stays on one line on tablets: icon-only controls below 992px. */
@media (max-width: 991px) {
    .topbar-label, .account-menu__name, .account-menu__chevron { display: none; }
    .account-menu__button { padding: 3px; }
}
/* Short command buttons never break mid-label; their column wraps instead. */
[class*="col-"] > .btn, [class*="col-"].d-flex > .btn, .row-actions .btn, .table .btn { white-space: nowrap; }
.portal-content .btn-group { flex-wrap: wrap; }
/* Tile group headings are small labels, not section headings. */
.portal-content .col-tiles__title { margin: 0 0 var(--ll-space-2); color: var(--ll-gold-700); font-size: var(--ll-text-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
/* On phones only the current page shows in the breadcrumb: no leading separator. */
@media (max-width: 767px) { .portal-crumbs li:last-child::before { content: none; } }
.portal-content .card.admin-kpi-strip { margin-bottom: var(--ll-space-5) !important; }