/* ===============================================
   SAHE SMS - Admissions Module
   Navy (var(--ink)) + White — Professional & Clean
   =============================================== */

/* ===== Admissions Metric Extensions ===== */
.metric-card.highlight-warning {
    border: 1px solid color-mix(in srgb, var(--warning) 38%, var(--gray-200));
    background: color-mix(in srgb, var(--warning) 5%, var(--white));
}

/* ===== Admissions Panel Extensions ===== */
.trend-period {
    font-size: .75rem;
    color: var(--ink-mute);
    display: flex;
    align-items: center;
    gap: .375rem;
}

/* Admissions dashboard alignment fixes */
.dashboard-primary .panel,
.dashboard-secondary .panel {
    margin-bottom: 0;
}

.dashboard-secondary .quick-links-panel .panel-body,
.dashboard-secondary .popular-courses-panel .panel-body {
    padding: 0;
}

.dashboard-secondary .quick-link,
.dashboard-secondary .course-item {
    padding: .75rem var(--space-5);
}

.dashboard-secondary .quick-link {
    gap: var(--space-2);
    font-size: var(--text-xs);
    padding: .625rem var(--space-4);
}

.dashboard-secondary .quick-link i {
    width: 16px;
    font-size: .75rem;
}

.dashboard-secondary .course-item:first-child,
.dashboard-secondary .quick-link:first-child {
    padding-top: .75rem;
}

.dashboard-secondary .course-item:last-child,
.dashboard-secondary .quick-link:last-child {
    padding-bottom: .75rem;
}

.nationality-origin-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

@media (max-width: 1024px) {
    .nationality-origin-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== Admissions Attention Extensions ===== */
.attention-header {
    display: flex;
    align-items: center;
    gap: .375rem;
    flex-wrap: wrap;
}
.attention-name a { color: inherit; text-decoration: none; }
.attention-name a:hover { color: var(--ink); }
.attention-course {
    /* font-size intentionally inherited from the design system (--text-sm). */
    color: var(--ink-mute);
    margin-top: .125rem;
}
.attention-actions { display: flex; gap: .25rem; margin-left: auto; }

/* ===== EMPTY PANEL ===== */
.empty-panel .empty-icon.success { background: var(--teal-soft); }
.empty-panel .empty-icon.success i { color: var(--teal-strong); }

/* ===== ACCEPTANCE RATE CIRCLE ===== */
.rate-display {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.rate-donut {
    --pct: 0;
    --size: 110px;
    --thickness: 12px;
    --color: var(--ink);
    --track: var(--rule);
    position: relative;
    width: var(--size);
    height: var(--size);
    flex-shrink: 0;
    border-radius: 50%;
    background:
      conic-gradient(var(--color) calc(var(--pct) * 1%), var(--track) 0);
    display: flex;
    align-items: center;
    justify-content: center;
}
.rate-donut::before {
    content: "";
    position: absolute;
    inset: var(--thickness);
    background: var(--surface);
    border-radius: 50%;
}
.rate-circle {
    position: relative;
    width: 90px;
    height: 90px;
    flex-shrink: 0;
}
.rate-circle svg {
    width: 90px;
    height: 90px;
    display: block;
    transform: rotate(-90deg);
}
.rate-bg {
    fill: none;
    stroke: var(--rule);
    stroke-width: 8;
}
.rate-fill {
    fill: none;
    stroke: var(--ink);
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset var(--dur-chart) var(--ease-out-editorial);
}
.rate-value {
    position: relative;
    z-index: 1;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ink);
}
.rate-breakdown { display: flex; flex-direction: column; gap: .5rem; }
.rate-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .8125rem;
    color: var(--ink-mute);
}
.rate-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ink);
}
.rate-dot.success { background: var(--teal-strong); }
.rate-dot.danger  { background: var(--crimson-strong); }

/* ===== COURSES LIST ===== */
.courses-list { display: flex; flex-direction: column; }
.course-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem 0;
    border-bottom: 1px solid var(--surface-alt);
}
.course-item:last-child { border-bottom: none; }
.course-rank {
    width: 28px;
    height: 28px;
    border-radius: .375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 700;
    background: var(--surface-alt);
    color: var(--ink-mute);
    flex-shrink: 0;
}
.course-item:first-child .course-rank {
    background: var(--ink);
    color: #fff;
}
.course-info { flex: 1; min-width: 0; }
.course-name {
    font-size: .8125rem;
    font-weight: 500;
    color: var(--ink-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.course-count {
    font-size: .8125rem;
    font-weight: 700;
    color: var(--ink);
}

/* ===== QUICK LINKS ===== */
.quick-link i {
    font-size: .875rem;
    width: 20px;
    text-align: center;
}

/* ===== CHART ===== */
.chart-wrapper { position: relative; width: 100%; min-height: 200px; }
/* .chart-legend is a SHARED component now that the chart layer is (§10).
   The app-local copy centred its entries and spaced them at 24px, so an
   admissions chart's key sat differently from every other chart's. */
.legend-item {
    display: flex;
    align-items: center;
    gap: .375rem;
    font-size: .75rem;
    color: var(--ink-mute);
}
.legend-dot { width: 8px; height: 8px; border-radius: 50%; }

/* ===== STATS OVERVIEW ===== */
.stats-overview .stat-card {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: .75rem;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: border-color var(--dur-fade) var(--ease-out-editorial);
}
.stats-overview .stat-card:hover { border-color: var(--ink); }
.stats-overview .stat-icon {
    width: 44px;
    height: 44px;
    border-radius: .625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    flex-shrink: 0;
    background: var(--surface-alt);
    color: var(--ink);
}
.stats-overview .stat-icon.warning { background: var(--amber-soft); color: var(--amber-hover); }
.stats-overview .stat-icon.info    { background: var(--surface-alt); color: var(--ink); }
.stats-overview .stat-icon.success { background: var(--teal-soft); color: var(--teal-strong); }
.stats-overview .stat-content { min-width: 0; }
.stats-overview .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.2;
}
.stats-overview .stat-label {
    margin-top: .125rem;
    font-size: var(--text-label);
    line-height: var(--text-label-lh);
    letter-spacing: var(--text-label-ls);
    text-transform: uppercase;
    font-weight: var(--font-semibold);
    color: var(--ink-mute);
}

/* Dashboard stats alternative */
.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}
.dashboard-stats .stat-card {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: .75rem;
    overflow: hidden;
}
.dashboard-stats .stat-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem 1.25rem;
}
.dashboard-stats .stat-icon {
    width: 40px;
    height: 40px;
    border-radius: .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    background: var(--surface-alt);
    color: var(--ink);
}
.dashboard-stats .stat-icon.info    { background: var(--surface-alt); color: var(--ink); }
.dashboard-stats .stat-icon.warning { background: var(--amber-soft); color: var(--amber-hover); }
.dashboard-stats .stat-icon.success { background: var(--teal-soft); color: var(--teal-strong); }
.dashboard-stats .stat-icon.primary { background: var(--surface-alt); color: var(--ink); }
.dashboard-stats .stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.2;
    padding: 0 1.25rem .5rem;
}
.dashboard-stats .stat-label {
    padding: 0 1.25rem .75rem;
    font-size: var(--text-label);
    line-height: var(--text-label-lh);
    letter-spacing: var(--text-label-ls);
    text-transform: uppercase;
    font-weight: var(--font-semibold);
    color: var(--ink-mute);
}
.dashboard-stats .stat-footer {
    padding: .625rem 1.25rem;
    border-top: 1px solid var(--surface-alt);
    background: var(--paper);
}
.stat-change { font-size: .75rem; color: var(--ink-mute); display: flex; align-items: center; gap: .25rem; }
.stat-change.positive { color: var(--teal-strong); }

/* The FILTER TABS SECTION block that lived here is gone.

   `.filter-tabs-section` was dead -- no template ever used it. The rest was
   worse than dead: `.filter-tab.active { color: var(--ink) }` reversed the shared
   selected chip, which now fills with that same navy, so the selected chip
   rendered navy text on a navy ground. The design system had to write
   `a.filter-tab.active` / `.filter-tabs .filter-tab.active` purely to out-rank
   this file. Per-app sheets load last, so a duplicate here silently WINS.

   `.tab-badge` went with it: its only consumer is `.cmd-tab .tab-badge` below,
   which already sets every one of the same properties at higher specificity.

   Do not reintroduce any of these -- filter chips are owned by
   design-system.css. */

/* ===== DATA TABLE ===== */
.table th {
    padding: .75rem 1rem;
    text-align: left;
    font-weight: 600;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink-mute);
    background: var(--paper);
    border-bottom: 2px solid var(--rule);
    white-space: nowrap;
}
.table td {
    padding: .875rem 1rem;
    border-bottom: 1px solid var(--surface-alt);
    color: var(--ink-soft);
    vertical-align: middle;
}
.table tbody tr:hover { background: var(--paper); }
.table tbody tr:last-child td { border-bottom: none; }

/* ===== APPLICANT INFO IN TABLE ===== */
.applicant-info { display: flex; align-items: center; gap: .75rem; }
.applicant-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: .8125rem;
    flex-shrink: 0;
    background: var(--surface-alt);
    color: var(--ink);
    text-transform: uppercase;
}
.applicant-details { min-width: 0; }
.applicant-name { font-weight: 600; color: var(--ink); font-size: .875rem; }
.applicant-email { font-size: .75rem; color: var(--ink-faint); }
.course-major { font-size: .75rem; color: var(--ink-faint); }
.agent-cell-name { font-size: .85rem; color: var(--ink); }
.agent-cell-counsellor { font-size: .75rem; color: var(--ink-faint); }

/* ===== APPLICATION STATUS ===== */
.application-status {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .25rem .75rem;
    font-size: .75rem;
    font-weight: 600;
    border-radius: 9999px;
    background: var(--surface-alt);
    color: var(--ink-mute);
}
.application-status.draft { background: var(--surface-alt); color: var(--ink-mute); }
.application-status.submitted,
.application-status.new { background: var(--surface-alt); color: var(--ink); }
.application-status.under-review,
.application-status.inreview { background: var(--amber-soft); color: var(--amber-hover); }
.application-status.accepted { background: var(--teal-soft); color: var(--teal-hover); }
.application-status.rejected { background: var(--crimson-soft); color: var(--crimson-hover); }
.application-status.waitlisted { background: var(--surface-alt); color: var(--ink); }

.badge-lg { padding: .375rem .75rem; font-size: .8125rem; }

/* ===== APPLICATION CARD ===== */
.application-card {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: .75rem;
    padding: 1.25rem;
    transition: border-color var(--dur-fade) var(--ease-out-editorial);
}
.application-card:hover { border-color: var(--ink); }
.application-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .75rem;
}
.application-id {
    font-size: .75rem;
    font-weight: 600;
    color: var(--ink);
}
.application-card-body { margin-bottom: .75rem; }
.application-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: .75rem;
    border-top: 1px solid var(--surface-alt);
}
.applicant-info span { font-size: .8125rem; color: var(--ink-mute); display: flex; align-items: center; gap: .375rem; }
.applicant-info i { color: var(--ink-faint); font-size: .75rem; }

/* ===== APPLICATION PROGRESS ===== */
.application-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}
.application-progress .progress-step { display: flex; flex-direction: column; align-items: center; flex: 1; position: relative; text-align: center; }
.application-progress .progress-step::after {
    content: '';
    position: absolute;
    top: 16px;
    left: 50%;
    right: -50%;
    height: 2px;
    background: var(--rule);
    z-index: 1;
}
.application-progress .progress-step:last-child::after { display: none; }
.application-progress .progress-step.completed::after { background: var(--teal-strong); }
.progress-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--rule);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto .375rem;
    position: relative;
    z-index: 2;
    font-size: .8125rem;
    color: var(--ink-mute);
}
.progress-step.completed .progress-dot { background: var(--teal-strong); color: #fff; }
.progress-step.current .progress-dot { background: var(--ink); color: #fff; }
.progress-label {
    font-size: var(--text-label);
    line-height: var(--text-label-lh);
    letter-spacing: var(--text-label-ls);
    text-transform: uppercase;
    font-weight: var(--font-semibold);
    color: var(--ink-mute);
}
.progress-step.completed .progress-label,
.progress-step.current .progress-label { color: var(--ink-soft); font-weight: 500; }

/* ===== INTAKE BADGE ===== */
.intake-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .75rem;
    font-weight: 500;
    padding: .125rem .5rem;
    border-radius: .375rem;
    background: var(--surface-alt);
    color: var(--ink);
}

/* ===== DOCUMENT UPLOAD & LIST ===== */
.document-upload {
    border: 2px dashed var(--rule);
    border-radius: .75rem;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: background-color var(--dur-colour) var(--ease-out-editorial),
                border-color var(--dur-colour) var(--ease-out-editorial),
                color var(--dur-colour) var(--ease-out-editorial);
}
.document-upload:hover { border-color: var(--ink); background: var(--surface-alt); }
.document-upload i { font-size: 1.875rem; color: var(--ink-faint); margin-bottom: .75rem; display: block; }
.document-upload p { color: var(--ink-mute); margin-bottom: .25rem; }
.document-upload span { font-size: .8125rem; color: var(--ink-faint); }
.document-list { display: flex; flex-direction: column; gap: .5rem; }
.document-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem;
    background: var(--paper);
    border-radius: .5rem;
}
.document-icon {
    width: 40px;
    height: 40px;
    border-radius: .5rem;
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
}
.document-info { flex: 1; }
.document-name { font-weight: 500; color: var(--ink); }
.document-meta { font-size: .75rem; color: var(--ink-faint); }

/* ===== ADMISSION FUNNEL ===== */
.admission-funnel { display: flex; flex-direction: column; gap: .75rem; }
.funnel-stage { display: flex; align-items: center; gap: 1rem; }
.funnel-bar { height: 24px; background: var(--ink); border-radius: .5rem; transition: width var(--dur-rise) var(--ease-out-editorial); }
.funnel-label { font-size: .8125rem; color: var(--ink-mute); min-width: 100px; }
.funnel-count { font-weight: 600; color: var(--ink); }

/* ===== SUCCESS PAGE ===== */
.success-container { max-width: 700px; margin: 0 auto; }
.success-card {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: .75rem;
    overflow: hidden;
    text-align: center;
}
.success-card-body { padding: 2.5rem 1.5rem; }
.success-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--teal-soft);
    color: var(--teal-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.875rem;
    margin: 0 auto 1.5rem;
    animation: scaleIn .5s ease-out;
}
@keyframes scaleIn { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.success-icon.info { background: var(--surface-alt); color: var(--ink); }
.success-title { font-size: 1.25rem; font-weight: 600; color: var(--ink); margin: 0 0 .75rem; }
.success-message { font-size: .875rem; color: var(--ink-mute); max-width: 500px; margin: 0 auto 1.5rem; line-height: 1.6; }
.success-message p { margin: .5rem 0; }
.success-card-footer { padding: 1rem 1.5rem; background: var(--paper); border-top: 1px solid var(--surface-alt); }

/* ===== NEXT STEPS ===== */
.next-steps {
    background: var(--paper);
    border-radius: .75rem;
    padding: 1.5rem;
    margin: 1.5rem 0;
    text-align: left;
}
.next-steps-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.25rem;
    justify-content: center;
}
.next-steps-title i { color: var(--ink); }
.steps-list { display: flex; flex-direction: column; gap: 1rem; }
.step { display: flex; gap: 1rem; align-items: flex-start; }
.step-number {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    background: var(--ink);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .875rem;
}
.step-content h4 { font-size: .875rem; font-weight: 600; color: var(--ink-soft); margin: 0 0 .25rem; }
.step-content p { font-size: .875rem; color: var(--ink-mute); margin: 0; line-height: 1.5; }

/* ===== CONTACT INFO BOX ===== */
.contact-info {
    background: var(--amber-soft);
    border: 1px solid var(--amber-strong);
    border-radius: .75rem;
    padding: 1.25rem;
    margin: 1.5rem 0;
    text-align: center;
}
.contact-info h3 { font-size: 1rem; font-weight: 600; color: var(--amber-hover); display: flex; align-items: center; gap: .5rem; justify-content: center; margin: 0 0 .75rem; }
.contact-info p { font-size: .875rem; color: var(--amber-hover); margin: 0 0 1rem; }
.contact-details { display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; }
.contact-item { display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: var(--amber-hover); font-weight: 500; }
.contact-item i { color: var(--amber-strong); }

/* ===== Admissions Button Extensions ===== */
.btn-block { width: 100%; }

/* ===== ALERTS ===== */

/* ===== DELETE CONFIRMATION ===== */
.confirm-delete-container { max-width: 600px; margin: 0 auto; }
.confirm-delete-card {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: .75rem;
    overflow: hidden;
}
.danger-zone {
    padding: 1.5rem;
    background: var(--crimson-soft);
    border-bottom: 1px solid var(--crimson-strong);
    display: flex;
    align-items: center;
    gap: 1rem;
}
.danger-icon {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--surface);
    color: var(--crimson-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    border: 2px solid var(--crimson-strong);
}
.danger-title { font-size: 1.125rem; font-weight: 600; color: var(--crimson-hover); margin: 0 0 .25rem; }
.danger-message { font-size: .875rem; color: var(--crimson-strong); margin: 0; }

.application-preview { padding: 1.25rem; }
.preview-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.preview-details { background: var(--paper); border-radius: .75rem; padding: 1rem; }
.detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.detail-item { display: flex; align-items: flex-start; gap: .75rem; }
.detail-icon {
    width: 36px; height: 36px;
    border-radius: .375rem;
    background: var(--surface);
    color: var(--ink-mute);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.detail-content { flex: 1; }
.detail-label {
    display: block;
    margin-bottom: 2px;
    font-size: var(--text-label);
    line-height: var(--text-label-lh);
    letter-spacing: var(--text-label-ls);
    text-transform: uppercase;
    font-weight: var(--font-semibold);
    color: var(--ink-mute);
}
.detail-value { font-size: .875rem; color: var(--ink-soft); font-weight: 500; }
.deletion-warning {
    padding: 1rem;
    background: var(--amber-soft);
    border: 1px solid var(--amber-strong);
    border-radius: .75rem;
    margin: 1.25rem;
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}
.warning-icon { color: var(--amber-hover); font-size: 1.125rem; flex-shrink: 0; }
.confirm-actions {
    padding: 1rem 1.25rem;
    background: var(--paper);
    border-top: 1px solid var(--surface-alt);
    display: flex;
    justify-content: center;
    gap: .75rem;
}

/* ===== APPLICATION SUMMARY ===== */
.application-summary {
    background: var(--paper);
    border-radius: .75rem;
    padding: 1.25rem;
    margin: 1rem 0;
}
.application-summary h4 { font-size: 1rem; font-weight: 600; color: var(--ink); margin: 0 0 1rem; }
.summary-row {
    display: flex;
    justify-content: space-between;
    padding: .5rem 0;
    border-bottom: 1px solid var(--rule);
}
.summary-row:last-child { border-bottom: none; }
.summary-label {
    font-size: var(--text-label);
    line-height: var(--text-label-lh);
    letter-spacing: var(--text-label-ls);
    text-transform: uppercase;
    font-weight: var(--font-semibold);
    color: var(--ink-mute);
}
.summary-value { font-weight: 500; color: var(--ink-soft); font-size: .875rem; }

/* ===== TIMELINE ===== */
.applications-timeline { display: flex; flex-direction: column; gap: 1rem; }
.timeline-item {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: var(--paper);
    border-radius: .75rem;
    transition: background var(--dur-colour) var(--ease-out-editorial);
}
.timeline-item:hover { background: var(--surface-alt); }
.timeline-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--surface-alt);
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: .875rem;
    flex-shrink: 0;
}
.timeline-content-inner { flex: 1; min-width: 0; }
.timeline-header { display: flex; align-items: center; gap: .5rem; margin-bottom: .25rem; }
.timeline-header a { font-weight: 600; color: var(--ink); text-decoration: none; }
.timeline-header a:hover { color: var(--ink); }
.timeline-course { font-size: .8125rem; color: var(--ink-mute); margin-bottom: .5rem; }
.timeline-meta { display: flex; gap: 1rem; font-size: .75rem; color: var(--ink-faint); }
.timeline-meta span { display: flex; align-items: center; gap: .25rem; }
.timeline-actions { display: flex; gap: .5rem; margin-top: .75rem; }

/* ===== REPORT SECTION ===== */
.report-section {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: .75rem;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}
.report-section h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1.25rem;
    padding-bottom: .75rem;
    border-bottom: 2px solid var(--ink);
}
.report-section h3 i { color: var(--ink); }
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}
.stats-grid .stat-card {
    background: var(--paper);
    padding: 1rem;
    border-radius: .75rem;
    border: 1px solid color-mix(in srgb, var(--ink) 26%, var(--gray-200, var(--rule)));
}
.stats-grid .stat-card h4 {
    font-size: .75rem;
    color: var(--ink-mute);
    font-weight: 400;
    margin: 0 0 .5rem;
    text-transform: uppercase;
}
.stats-grid .stat-card .value { font-size: 1.5rem; font-weight: 700; color: var(--ink); }

/* ===== CONVERSION FUNNEL ===== */
.conversion-funnel { display: flex; align-items: stretch; gap: 1.25rem; margin-top: 1rem; }
.funnel-step {
    flex: 1;
    text-align: center;
    padding: 1.25rem;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: .75rem;
    position: relative;
}
.funnel-step::after {
    content: '\2192';
    position: absolute;
    right: calc(-1.25rem - 4px);
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.25rem;
    color: var(--ink);
}
.funnel-step:last-child::after { content: ''; }
.funnel-step .label { font-size: .875rem; color: var(--ink-mute); margin-bottom: .5rem; }
.funnel-step .count { font-size: 1.5rem; font-weight: 700; color: var(--ink); }
.funnel-step small { display: block; font-size: .75rem; color: var(--ink-faint); margin-top: .5rem; }

/* ===== REPORT TABLE ===== */
.report-table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.report-table th, .report-table td { padding: .75rem 1rem; text-align: left; border-bottom: 1px solid var(--surface-alt); }
.report-table th { background: var(--paper); font-size: .75rem; font-weight: 600; color: var(--ink-mute); text-transform: uppercase; }
.report-table td { font-size: .875rem; color: var(--ink-soft); }
.report-table tr:hover td { background: var(--paper); }

/* ===== PROGRESS BAR ===== */
.progress-bar-container { width: 100%; background: var(--rule); border-radius: 9999px; height: 8px; overflow: hidden; }

/* ===== HELPER CLASSES ===== */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.gap-sm { gap: .5rem; }
.gap-md { gap: 1rem; }
.gap-lg { gap: 1.5rem; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.items-center { align-items: center; }
.small { font-size: .75rem; }

/* ===== DASHBOARD GRID ===== */
.dashboard-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 1.25rem; }
.dashboard-main-column { display: flex; flex-direction: column; gap: 1.25rem; }

/* ===== QUICK STATS BAR ===== */
.quick-stats-bar {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: .75rem;
    padding: 1rem 1.5rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    justify-content: center;
}
.quick-stat { display: flex; flex-direction: column; align-items: center; gap: .125rem; }
.quick-stat-value { font-size: 1.5rem; font-weight: 700; color: var(--ink); line-height: 1; }
.quick-stat-label {
    font-size: .6875rem;
    color: var(--ink-mute);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 500;
}
.quick-stat.warning .quick-stat-value { color: var(--amber-hover); }
.quick-stat.info .quick-stat-value    { color: var(--ink); }
.quick-stat.success .quick-stat-value { color: var(--teal-strong); }
.quick-stat.danger .quick-stat-value  { color: var(--crimson-strong); }
.quick-stat-divider { width: 1px; height: 40px; background: var(--rule); }

/* ===== APPLICATIONS CARD ===== */
.applications-card {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: .75rem;
    overflow: hidden;
}

/* ===== TOOLBAR ===== */
.applications-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--surface-alt);
    flex-wrap: wrap;
}
.toolbar-left { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.toolbar-right { display: flex; align-items: center; gap: .75rem; }

/* ===== FILTER PILLS ===== */
.filter-pills { display: flex; gap: .5rem; flex-wrap: wrap; }
.filter-pill {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .375rem .75rem;
    border-radius: 9999px;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--ink-mute);
    background: var(--surface-alt);
    text-decoration: none;
    transition: background-color var(--dur-colour) var(--ease-out-editorial),
                border-color var(--dur-colour) var(--ease-out-editorial),
                color var(--dur-colour) var(--ease-out-editorial);
    white-space: nowrap;
    border: 1px solid transparent;
}
.filter-pill:hover { background: var(--rule); color: var(--ink-soft); }
.filter-pill.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.pill-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill-dot.warning { background: var(--amber-strong); }
.pill-dot.info    { background: var(--ink); }
.pill-dot.success { background: var(--teal-strong); }
.pill-dot.danger  { background: var(--crimson-strong); }
.filter-pill.active .pill-dot { background: var(--surface); }

/* ===== SEARCH FIELD ===== */
.search-field {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .375rem 1rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 9999px;
    transition: border-color var(--dur-fade) var(--ease-out-editorial);
}
.search-field:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(30,58,95,.08); }
.search-field i { color: var(--ink-faint); font-size: .875rem; }
.search-field input {
    border: none;
    background: transparent;
    outline: none;
    font-size: .875rem;
    color: var(--ink);
    width: 200px;
    font-family: inherit;
}
.search-field input::placeholder { color: var(--ink-faint); }

/* ===== APPLICATIONS LIST ===== */
.applications-list { min-height: 300px; }

/* Applications table overrides */
.applications-table { margin: 0; table-layout: fixed; width: 100%; }
.applications-table td { vertical-align: middle; overflow: hidden; text-overflow: ellipsis; }
/* Column widths are defined in ONE place near the bottom of this file
   (search "seven-column layout"). A second set of widths used to live here and
   fought that block -- and pinned Actions to 60px, which clipped the buttons. */
.applications-table .application-main { display: flex; align-items: center; gap: .625rem; }
.applications-table .applicant-info { min-width: 0; overflow: hidden; }
.applications-table .applicant-name {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: .375rem;
    white-space: nowrap;
}
.applications-table .applicant-name a { color: inherit; text-decoration: none; }
.applications-table .applicant-name a:hover { color: var(--ink); }
.applications-table .applicant-email {
    font-size: .7rem;
    color: var(--ink-faint);
    margin: 1px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Avatar color variants */
.applicant-avatar.warning { background: var(--amber-soft); color: var(--amber-hover); }
.applicant-avatar.info    { background: var(--surface-alt); color: var(--ink); }
.applicant-avatar.success { background: var(--teal-soft); color: var(--teal-strong); }
.applicant-avatar.danger  { background: var(--crimson-soft); color: var(--crimson-strong); }

/* ===== Admissions Action Buttons ===== */
.application-actions { display: flex; align-items: center; gap: .125rem; }

/* ===== PAGINATION ===== */
/* .applications-pagination: superseded by the one pager. */

/* .pagination-info / .pagination-controls: superseded by the one pager
   in design-system.css. */
.page-btn {
    min-width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .375rem;
    font-size: .875rem;
    font-weight: 500;
    color: var(--ink-mute);
    background: transparent;
    text-decoration: none;
    transition: background-color var(--dur-colour) var(--ease-out-editorial),
                border-color var(--dur-colour) var(--ease-out-editorial),
                color var(--dur-colour) var(--ease-out-editorial);
    padding: 0 .5rem;
}
.page-btn:hover { background: var(--rule); color: var(--ink); }
.page-btn.active { background: var(--ink); color: #fff; }

/* ===== EMPTY STATE ===== */
.applications-list .empty-state { padding: 3rem 1.5rem; text-align: center; }
.applications-list .empty-icon {
    width: 80px; height: 80px;
    border-radius: 50%;
    background: var(--surface-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}
.applications-list .empty-icon i { font-size: 2rem; color: var(--ink-faint); }
.applications-list .empty-state h3 { margin: 0 0 .5rem; font-size: 1.125rem; font-weight: 600; color: var(--ink); }
.applications-list .empty-state p { margin: 0 0 1rem; color: var(--ink-mute); font-size: .875rem; }

/* ===== APPLICATION FORM PAGE ===== */
.form-page { max-width: 800px; margin: 0 auto; }
.application-form-page {
    max-width: 1180px;
    padding-bottom: 2rem;
}
.application-shell {
    display: grid;
    gap: 1.25rem;
}
.application-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .95fr);
    gap: 1.25rem;
    padding: 1.5rem;
    border: 1px solid var(--rule);
    border-radius: 1.25rem;
    background:
        radial-gradient(circle at top right, rgba(30,58,95,.12), transparent 34%),
        linear-gradient(135deg, var(--surface) 0%, var(--paper) 56%, var(--surface-alt) 100%);
    box-shadow: 0 20px 40px rgba(15, 23, 42, .06);
}
.application-hero-copy {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.application-hero-kicker {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: .35rem .7rem;
    border-radius: 999px;
    background: rgba(30,58,95,.08);
    color: var(--ink);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.application-hero-title {
    margin: 0;
    font-size: clamp(1.55rem, 2vw, 2.15rem);
    line-height: 1.15;
    color: var(--ink);
}
.application-hero-text {
    margin: 0;
    max-width: 60ch;
    font-size: .96rem;
    line-height: 1.7;
    color: var(--ink-soft);
}
.application-hero-meta {
    display: grid;
    gap: .75rem;
}
.hero-meta-card {
    display: grid;
    gap: .25rem;
    padding: 1rem 1.05rem;
    border: 1px solid rgba(30,58,95,.12);
    border-radius: 1rem;
    background: rgba(255,255,255,.82);
    backdrop-filter: blur(4px);
}
.hero-meta-card strong {
    font-size: .95rem;
    color: var(--ink);
}
.hero-meta-card span {
    font-size: .82rem;
    line-height: 1.5;
    color: var(--ink-mute);
}
.form-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    margin-bottom: 0;
    padding: 1.1rem 1.25rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 1rem;
    box-shadow: 0 14px 28px rgba(15, 23, 42, .04);
}
.progress-step {
    gap: .65rem;
    align-items: center;
}
.progress-step .step-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--paper) 0%, var(--rule) 100%);
    color: var(--ink-mute);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--rule);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
    transition: background-color var(--dur-rise) var(--ease-out-editorial),
                border-color var(--dur-rise) var(--ease-out-editorial),
                box-shadow var(--dur-rise) var(--ease-out-editorial);
}
.progress-step .step-label {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
    font-size: .75rem;
    color: var(--ink-mute);
    white-space: nowrap;
}
.progress-step .step-label strong {
    font-size: .8rem;
    font-weight: 700;
    color: var(--ink-soft);
}
.progress-step .step-label small {
    font-size: .72rem;
    color: var(--ink-faint);
}
.progress-step.active .step-circle {
    background: linear-gradient(135deg, var(--ink) 0%, var(--ink-soft) 100%);
    color: #fff;
    border-color: var(--ink);
    box-shadow: 0 10px 22px rgba(30,58,95,.22);
}
.progress-step.active .step-label strong,
.progress-step.completed .step-label strong { color: var(--ink); }
.progress-step.active .step-label small,
.progress-step.completed .step-label small { color: var(--ink-mute); }
.progress-step.active .step-label { color: var(--ink); }
.progress-step.completed .step-circle { background: var(--teal-strong); color: #fff; border-color: var(--teal-strong); }
.progress-step.completed .step-circle::after { content: '\2713'; }
.progress-line {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, var(--rule) 0%, var(--rule-strong) 100%);
    margin: 0;
    max-width: 110px;
}
.form-step { display: none; padding: 1.5rem; }
.form-step.active { display: block; }
.step-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--surface-alt);
}
.step-icon {
    width: 48px; height: 48px;
    border-radius: .75rem;
    background: var(--surface-alt);
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}
.step-header h2 { margin: 0; font-size: 1.125rem; font-weight: 600; color: var(--ink); }
.step-header p { margin: .25rem 0 0; font-size: .875rem; color: var(--ink-mute); }
.form-group.full-width { grid-column: 1 / -1; }
.form-group label { font-size: .875rem; font-weight: 500; color: var(--ink-soft); }
.form-group label .required { color: var(--crimson-strong); }
.form-input {
    width: 100%;
    padding: .625rem .75rem;
    border: 1px solid var(--rule-strong);
    border-radius: .5rem;
    font-size: .875rem;
    color: var(--ink);
    background: var(--surface);
    transition: border-color var(--dur-fade) var(--ease-out-editorial);
    font-family: inherit;
}
.form-input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(30,58,95,.08); }
.form-input.error { border-color: var(--crimson-strong); }
.form-input.error:focus { box-shadow: 0 0 0 3px rgba(220,38,38,.08); }
.form-input::placeholder { color: var(--ink-faint); }
textarea.form-input { resize: vertical; min-height: 100px; }
select.form-input { cursor: pointer; }
.input-with-icon { position: relative; }
.input-with-icon i { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--ink-faint); font-size: .875rem; }
.input-with-icon .form-input { padding-left: 2.5rem; }
.step-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--surface-alt);
}
.form-section-card {
    background: linear-gradient(180deg, var(--surface) 0%, var(--paper) 100%);
    border: 1px solid var(--rule);
    border-radius: 1rem;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .03);
}
.section-kicker {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: .5rem;
}
.section-intro {
    margin: -.25rem 0 1rem;
    max-width: 70ch;
    font-size: .9rem;
    line-height: 1.65;
    color: var(--ink-mute);
}
.compact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.student-type-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
.student-type-option {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: .9rem;
    min-height: 170px;
    border: 1px solid var(--rule);
    border-radius: 1rem;
    padding: 1rem;
    background: linear-gradient(180deg, var(--surface) 0%, var(--paper) 100%);
    cursor: pointer;
    transition: transform var(--dur-fade) var(--ease-out-editorial),
                border-color var(--dur-fade) var(--ease-out-editorial),
                box-shadow var(--dur-fade) var(--ease-out-editorial),
                background var(--dur-fade) var(--ease-out-editorial);
}
.student-type-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.student-type-option:hover {
    transform: translateY(-1px);
    border-color: var(--rule-strong);
    box-shadow: 0 12px 24px rgba(30,58,95,.08);
}
.student-type-marker {
    width: 1rem;
    height: 1rem;
    margin-top: .2rem;
    border: 2px solid var(--rule-strong);
    border-radius: 999px;
    background: var(--surface);
    box-shadow: 0 0 0 4px rgba(255,255,255,.95);
}
.student-type-icon {
    width: 2.9rem;
    height: 2.9rem;
    border-radius: .9rem;
    background: var(--surface-alt);
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.student-type-option:has(input:checked) {
    border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(30,58,95,.10), 0 18px 30px rgba(30,58,95,.12);
    background: linear-gradient(180deg, var(--surface) 0%, var(--surface-alt) 100%);
}
.student-type-option:has(input:checked) .student-type-marker {
    border-color: var(--ink);
    background: radial-gradient(circle at center, var(--ink) 0, var(--ink) 45%, var(--surface) 48%, var(--surface) 100%);
}
.student-type-option:has(input:checked) .student-type-icon {
    background: var(--ink);
    color: #fff;
}
.student-type-content {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding-right: 0;
}
.student-type-title {
    font-size: .95rem;
    font-weight: 700;
    color: var(--ink);
}
.student-type-description {
    font-size: .82rem;
    line-height: 1.5;
    color: var(--ink-mute);
}
.student-type-help-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: .8rem;
    flex-wrap: wrap;
}
.selection-tip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .78rem;
    color: var(--ink-mute);
}
.checkbox-group { gap: .5rem; }
.checkbox-card {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .9rem 1rem;
    border: 1px solid var(--rule);
    border-radius: .85rem;
    background: var(--paper);
}
.checkbox-card input { margin-top: .15rem; }
.address-layout,
.form-layout-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
}
.form-layout-split { align-items: start; }
.form-layout-main,
.form-layout-side { min-width: 0; }
.address-panel,
.summary-card {
    border: 1px solid var(--rule);
    border-radius: 1rem;
    background: var(--paper);
    padding: 1rem;
}
.address-title {
    font-size: .95rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 .85rem;
}
.sticky-summary {
    position: sticky;
    top: 1.5rem;
}
.cost-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .75rem 0;
    border-bottom: 1px solid var(--rule);
    color: var(--ink-soft);
}
.cost-row strong { color: var(--ink); }
.cost-row.total-row {
    border-bottom: none;
    padding-bottom: 0;
    font-size: 1rem;
}
.summary-note {
    margin: .9rem 0 0;
    font-size: .78rem;
    line-height: 1.5;
    color: var(--ink-mute);
}
.service-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
.service-card {
    display: block;
    border: 1px solid var(--rule);
    border-radius: 1rem;
    padding: 1rem;
    background: linear-gradient(180deg, var(--surface) 0%, var(--paper) 100%);
    cursor: pointer;
}
.service-card input { margin-bottom: .75rem; }
.service-card:has(input:checked) {
    border-color: var(--ink);
    box-shadow: 0 0 0 2px rgba(30,58,95,.12);
}
.service-card-content,
.service-card-header,
.service-meta {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.service-card-header { margin-bottom: .35rem; }
.service-name {
    font-size: .92rem;
    font-weight: 700;
    color: var(--ink);
}
.service-type,
.service-meta,
.service-description,
.empty-text {
    font-size: .8rem;
    line-height: 1.5;
    color: var(--ink-mute);
}
.consent-card { margin-top: 1rem; }
.conditional-group.is-hidden { display: none !important; }

@media (max-width: 980px) {
    .application-hero,
    .address-layout,
    .form-layout-split,
    .student-type-grid,
    .service-grid {
        grid-template-columns: 1fr;
    }

    .form-progress {
        align-items: stretch;
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: .9rem;
    }

    .progress-step {
        min-width: 180px;
    }

    .progress-line {
        min-width: 48px;
    }
}

@media (max-width: 768px) {
    .application-form-page {
        max-width: 100%;
    }

    .application-hero,
    .form-step {
        padding: 1rem;
    }

    .form-grid,
    .compact-grid {
        grid-template-columns: 1fr;
    }

    .student-type-option {
        min-height: auto;
        grid-template-columns: auto auto 1fr;
    }

    .step-actions {
        gap: .75rem;
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .step-actions > div {
        display: none;
    }

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

/* ===== REVIEW CARD ===== */
.review-card { background: var(--paper); border-radius: .75rem; padding: 1.25rem; margin-bottom: 1.25rem; }
.review-card .review-section { margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--rule); }
.review-card .review-section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.review-card .review-section h3 {
    font-size: .875rem;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 .75rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.review-card .review-section h3 i { color: var(--ink); }
.review-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.review-item { display: flex; flex-direction: column; gap: 2px; }
.review-item.full-width { grid-column: 1 / -1; }
.review-label {
    font-size: var(--text-label);
    line-height: var(--text-label-lh);
    letter-spacing: var(--text-label-ls);
    text-transform: uppercase;
    font-weight: var(--font-semibold);
    color: var(--ink-mute);
}
.review-value { font-size: .875rem; color: var(--ink); }
.submit-notice {
    display: flex;
    gap: .75rem;
    padding: 1rem;
    background: var(--surface-alt);
    border-radius: .75rem;
    margin-bottom: 1.25rem;
}
.submit-notice i { color: var(--ink); font-size: 1.125rem; flex-shrink: 0; }
.submit-notice strong { color: var(--ink); font-size: .875rem; }
.submit-notice ul { margin: .5rem 0 0; padding-left: 1rem; font-size: .875rem; color: var(--ink-soft); }
.submit-notice li { margin-bottom: .25rem; }

/* ===== BULK ACTION BAR ===== */
.bulk-action-bar {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 1.25rem;
    background: var(--surface-alt);
    border-bottom: 1px solid var(--rule);
}
.bulk-action-bar.active { display: flex; }
.bulk-action-bar .selected-count { font-size: .875rem; font-weight: 600; color: var(--ink); }
.bulk-action-bar .bulk-actions { display: flex; gap: .5rem; }

/* ==========================================================================
   REPORTS
   ========================================================================== */
.report-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.report-stat-card {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: .75rem;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: border-color var(--dur-fade) var(--ease-out-editorial);
}
.report-stat-card:hover { border-color: var(--ink); }
.report-stat-icon {
    width: 48px; height: 48px;
    border-radius: .75rem;
    background: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.report-stat-icon i { font-size: 1.125rem; color: #fff; }
.report-stat-icon.info    { background: var(--ink); }
.report-stat-icon.success { background: var(--teal-strong); }
.report-stat-icon.warning { background: var(--amber-strong); }
.report-stat-content { display: flex; flex-direction: column; }
.report-stat-value { font-size: 1.75rem; font-weight: 700; color: var(--ink); line-height: 1.2; }
.report-stat-label {
    margin-top: 2px;
    font-size: var(--text-label);
    line-height: var(--text-label-lh);
    letter-spacing: var(--text-label-ls);
    text-transform: uppercase;
    font-weight: var(--font-semibold);
    color: var(--ink-mute);
}

.reports-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin-bottom: 1.25rem; }
.report-panel {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: .75rem;
    overflow: hidden;
}
.report-panel.full-width { grid-column: 1 / -1; }
.report-panel-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--rule);
    background: var(--paper);
}
.report-panel-header h2 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
}
.report-panel-header h2 i { color: var(--ink); font-size: .875rem; }
.report-panel-body { padding: 1.25rem; }

/* Funnel Visual */
.funnel-visual { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.25rem; }
.funnel-bar.info    { background: var(--ink); }
.funnel-bar.success { background: var(--teal-strong); }
/* Fixed basis, not min-width: the label column must be identical on every row
   so each bar's track is the same width and the bars share one scale. Sized to
   the natural width of the longest label. */
.funnel-info { display: flex; flex-direction: column; flex: 0 0 160px; }
.funnel-summary { display: flex; gap: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.funnel-metric { display: flex; flex-direction: column; gap: 2px; }
.funnel-metric .metric-label { font-size: .75rem; color: var(--ink-mute); text-transform: uppercase; letter-spacing: .05em; }
.funnel-metric .metric-value { font-size: 1.25rem; font-weight: 700; color: var(--ink-soft); }
.funnel-metric .metric-value.success { color: var(--teal-strong); }

/* Status Distribution */
.status-distribution { display: flex; flex-direction: column; gap: 1rem; }
.status-row { display: flex; align-items: center; gap: .75rem; }
.status-info { display: flex; align-items: center; gap: .5rem; min-width: 100px; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-faint); flex-shrink: 0; }
.status-dot.success { background: var(--teal-strong); }
.status-dot.danger  { background: var(--crimson-strong); }
.status-dot.warning { background: var(--amber-strong); }
.status-dot.info    { background: var(--ink); }
.status-name { font-size: .875rem; color: var(--ink-soft); font-weight: 500; }
.status-bar-wrapper { flex: 1; height: 8px; background: var(--surface-alt); border-radius: 9999px; overflow: hidden; }
.status-bar { height: 100%; background: var(--ink-faint); border-radius: 9999px; transition: width var(--dur-fill) var(--ease-out-editorial); }
.status-bar.success { background: var(--teal-strong); }
.status-bar.danger  { background: var(--crimson-strong); }
.status-bar.warning { background: var(--amber-strong); }
.status-bar.info    { background: var(--ink); }
.status-count { min-width: 80px; text-align: right; font-size: .875rem; }
.status-count strong { color: var(--ink-soft); }
.status-count .text-muted { color: var(--ink-mute); margin-left: 4px; }
.empty-message { padding: 1.5rem; text-align: center; color: var(--ink-mute); }

/* Course Table */
.course-table-wrapper { overflow-x: auto; }
.course-table { width: 100%; border-collapse: collapse; }
.course-table th, .course-table td { padding: .75rem 1rem; text-align: left; }
.course-table th {
    font-size: .75rem; font-weight: 600; color: var(--ink-mute);
    text-transform: uppercase; letter-spacing: .05em;
    border-bottom: 2px solid var(--rule); white-space: nowrap;
}
.course-table td { border-bottom: 1px solid var(--surface-alt); vertical-align: middle; }
.course-table tbody tr:hover { background: var(--paper); }
.course-table .text-center { text-align: center; }
.course-name-cell { display: flex; align-items: center; gap: .75rem; }
.course-icon {
    width: 32px; height: 32px;
    background: var(--surface-alt);
    border-radius: .375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.course-icon i { color: var(--ink); font-size: .875rem; }
.count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    padding: 2px 8px;
    background: var(--surface-alt);
    color: var(--ink-soft);
    border-radius: .375rem;
    font-size: .875rem;
    font-weight: 600;
}
.count-badge.success { background: var(--teal-soft); color: var(--teal-strong); }
.count-badge.danger  { background: var(--crimson-soft); color: var(--crimson-strong); }
.rate-badge {
    display: inline-flex;
    padding: .25rem .75rem;
    background: var(--surface-alt);
    color: var(--ink);
    border-radius: 9999px;
    font-size: .875rem;
    font-weight: 600;
}
.rate-badge.muted { background: var(--surface-alt); color: var(--ink-mute); }
.mini-bar-chart {
    display: flex;
    height: 8px;
    border-radius: 9999px;
    overflow: hidden;
    background: var(--surface-alt);
    width: 120px;
}
.mini-bar { height: 100%; transition: width var(--dur-fill) var(--ease-out-editorial); }
.mini-bar.success { background: var(--teal-strong); }
.mini-bar.danger  { background: var(--crimson-strong); }
.mini-bar.muted   { background: var(--rule-strong); }
.empty-row { text-align: center; color: var(--ink-mute); padding: 2rem !important; }

/* ========================================
   APPLICATION DETAIL — STATUS BANNER
   Navy minimal — no gradients
   ======================================== */
.detail-container {
    max-width: 1000px;
    margin: 0 auto;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: .75rem;
    overflow: hidden;
}
.status-banner {
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    border-bottom: 1px solid var(--rule);
    background: var(--ink);
    color: #fff;
}
/* Status banner color variants per stage */
.status-banner.status-new,
.status-banner.status-submitted,
.status-banner.status-inreview { background: var(--ink); color: #fff; }
.status-banner.status-documentsrequired,
.status-banner.status-documents_required { background: var(--amber-hover); color: #fff; }
.status-banner.status-conditionaloffer,
.status-banner.status-conditional_offer,
.status-banner.status-offersent,
.status-banner.status-offer_sent { background: var(--royal-strong); color: #fff; }
.status-banner.status-offeraccepted,
.status-banner.status-offer_accepted,
.status-banner.status-financecleared,
.status-banner.status-finance_cleared,
.status-banner.status-accepted,
.status-banner.status-enrolled { background: var(--teal-hover); color: #fff; }
.status-banner.status-pendingfinance,
.status-banner.status-pending_finance { background: var(--plum-strong); color: #fff; }
.status-banner.status-rejected { background: var(--crimson-hover); color: #fff; }
.status-banner.status-withdrawn { background: var(--ink-mute); color: #fff; }
.status-icon {
    width: 3rem; height: 3rem;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.status-icon i { font-size: 1.375rem; }
.status-content h3 { margin: 0 0 .25rem; font-size: 1.25rem; font-weight: 700; color: #fff; }
.status-content p { margin: 0; opacity: .85; font-size: .875rem; color: rgba(255,255,255,.85); }
.detail-section { padding: 1.5rem; border-bottom: 1px solid var(--rule); }
.detail-section:last-of-type { border-bottom: none; }
.section-header { margin-bottom: 1.25rem; }

/* ===== WORKFLOW SECTIONS ===== */
.workflow-section {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: .75rem;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}
.workflow-section h2 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--surface-alt);
}
.assignment-item {
    padding: .75rem 0;
    border-bottom: 1px solid var(--surface-alt);
}
.assignment-item:last-child { border-bottom: none; }
.priority-badge {
    display: inline-flex;
    padding: .125rem .5rem;
    font-size: .6875rem;
    font-weight: 700;
    border-radius: .25rem;
    background: var(--surface-alt);
    color: var(--ink);
}
.priority-badge.priority-1 { background: var(--crimson-soft); color: var(--crimson-strong); }
.priority-badge.priority-2 { background: var(--amber-soft); color: var(--amber-hover); }
.priority-badge.priority-3 { background: var(--surface-alt); color: var(--ink); }
.workload-bar {
    height: 6px;
    background: var(--surface-alt);
    border-radius: 9999px;
    overflow: hidden;
    margin-top: .375rem;
}
.workload-fill {
    height: 100%;
    border-radius: 9999px;
    transition: width var(--dur-fill) var(--ease-out-editorial);
    background: var(--ink);
}
.workload-fill.high   { background: var(--crimson-strong); }
.workload-fill.medium { background: var(--amber-strong); }
.workload-fill.low    { background: var(--teal-strong); }
.event-item {
    padding: .5rem 0;
    border-bottom: 1px solid var(--surface-alt);
    font-size: .875rem;
}
.event-item:last-child { border-bottom: none; }

/* ===== APPLICATION DETAIL ===== */
.cmd-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--border); margin-bottom: 1.5rem;
    /* overflow-y must be pinned: with only overflow-x set it computes to auto,
       and the tabs' -2px underline trick makes content 2px taller than the box,
       so Windows painted a vertical scrollbar at the end of the tab strip. */
    overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
/* Rendered as <button> so the tabs are keyboard-reachable — hence the reset. */
.cmd-tab { padding: .65rem 1rem; font-family: inherit; font-size: .82rem; font-weight: 500; color: var(--text-muted); cursor: pointer; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -2px; white-space: nowrap; transition: background-color var(--dur-colour) var(--ease-out-editorial),
                border-color var(--dur-colour) var(--ease-out-editorial),
                color var(--dur-colour) var(--ease-out-editorial) }
.cmd-tab:hover { color: var(--primary); }
.cmd-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
.cmd-tab .tab-badge { display: inline-block; min-width: 18px; height: 18px; line-height: 18px; text-align: center; border-radius: 9px; font-size: .68rem; font-weight: 700; background: var(--bg-muted); color: var(--text-muted); margin-left: 4px; }
.cmd-tab.active .tab-badge { background: var(--primary); color: #fff; }
.tab-pane { display: none; }
.tab-pane.active { display: block; }
.info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.info-label { font-size: .72rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 2px; }
.info-value { font-size: .9rem; color: var(--text); }
.section-divider { border-top: 1px solid var(--border); margin: 1.25rem 0; padding-top: 1rem; }
.section-divider h3 { font-size: .85rem; font-weight: 600; color: var(--primary); margin-bottom: .75rem; }
.inline-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; }
.inline-form .form-group { display: flex; flex-direction: column; gap: 2px; }
.inline-form .form-group label { font-size: .72rem; font-weight: 600; color: var(--text-muted); }
.inline-form .form-group input,
.inline-form .form-group select,
.inline-form .form-group textarea { padding: .4rem .6rem; border: 1px solid var(--border); border-radius: 6px; font-size: .85rem; font-family: inherit; }
.checklist-cat { margin-bottom: 1.25rem; }
.checklist-cat-title { font-size: .85rem; font-weight: 700; color: var(--primary); margin-bottom: .5rem; display: flex; align-items: center; gap: .5rem; }
.checklist-row { display: flex; align-items: center; gap: .75rem; padding: .5rem 0; border-bottom: 1px solid var(--surface-alt); font-size: .85rem; }
.checklist-status { font-size: .72rem; font-weight: 600; padding: 2px 8px; border-radius: 4px; }
.st-not_started { background: var(--surface-alt); color: var(--ink-mute); }
.st-in_progress { background: var(--royal-soft); color: var(--royal-strong); }
.st-submitted { background: var(--amber-line); color: var(--amber-hover); }
.st-verified { background: var(--teal-line); color: var(--teal-hover); }
.st-rejected { background: var(--crimson-line); color: var(--crimson-hover); }
.st-na { background: var(--surface-alt); color: var(--ink-mute); }
.tab-pane .timeline-item { display: flex; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--surface-alt); }
.timeline-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--primary); margin-top: 5px; flex-shrink: 0; }
.comm-item { padding: .75rem; border: 1px solid var(--border); border-radius: 8px; margin-bottom: .75rem; }
.comm-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .4rem; }
.comm-type { font-size: .72rem; font-weight: 600; padding: 2px 6px; border-radius: 4px; background: var(--bg-light); }
.transition-bar { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }

/* ===== CONVERSATION THREAD (GHL-style bubbles) ===== */
.conversation-thread { display: flex; flex-direction: column; gap: .9rem; }
.conv-row { display: flex; }
.conv-row.conv-outbound { justify-content: flex-end; }
.conv-row.conv-inbound { justify-content: flex-start; }
.conv-bubble { max-width: 75%; padding: .7rem .9rem; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-light); }
.conv-row.conv-outbound .conv-bubble { background: var(--royal-soft); border-color: var(--royal-line); border-bottom-right-radius: 4px; }
.conv-row.conv-inbound .conv-bubble { background: var(--paper); border-color: var(--border); border-bottom-left-radius: 4px; }
.conv-bubble-header { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .35rem; }
.conv-subject { font-size: .9rem; color: var(--text); }
.conv-body { font-size: .85rem; color: var(--text); line-height: 1.5; word-break: break-word; }
.conv-body p { margin: 0 0 .4rem; }
.conv-meta { font-size: .72rem; color: var(--text-muted); margin-top: .45rem; }
.conv-status { font-size: .66rem; font-weight: 700; padding: 1px 7px; border-radius: 10px; text-transform: uppercase; letter-spacing: .3px; }
.conv-status-sent { background: var(--teal-line); color: var(--teal-hover); }
.conv-status-failed { background: var(--crimson-line); color: var(--crimson-hover); }
.conv-status-draft { background: var(--surface-alt); color: var(--ink-mute); }
.conv-status-scheduled { background: var(--royal-soft); color: var(--royal-strong); }
.conv-attachments { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.conv-attachment-chip { display: inline-flex; align-items: center; gap: .3rem; font-size: .74rem; padding: 3px 9px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); color: var(--primary); text-decoration: none; }
.conv-attachment-chip:hover { background: var(--bg-light); }

/* ===== CONVERSATIONS — two-pane (GHL-style) =====
   Inbox layout rules:
   - Both panes stretch to the same height and cap at the viewport, so the
     page itself never scrolls — only the list and the thread do.
   - The list is dense: two lines per row (name+time / stage+preview) so ~10
     conversations are visible without scrolling.
   - The stage chip is colour-coded with the same palette as the pipeline
     board, so a glance at the inbox reads like a glance at the kanban. */
.conv-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 1rem; }
.conv-list-col { background: var(--white); border: 1px solid var(--border); border-radius: 12px;
    overflow: hidden; display: flex; flex-direction: column;
    height: calc(100vh - 205px); min-height: 440px; }
.conv-list-toolbar { padding: .65rem; border-bottom: 1px solid var(--border); display: flex;
    gap: .5rem; align-items: center; flex-shrink: 0; }
.conv-search-form { position: relative; display: flex; align-items: center; flex: 1; min-width: 0; }
/* Vertically centred explicitly. These two leading icons used to be
   inline <i> glyphs that the line box centred for free; as an SVG in
   an absolutely-positioned box they need a `top`, or they sit on the
   field's top edge. */
.conv-search-icon { position: absolute; left: .65rem; top: 50%;
    transform: translateY(-50%); color: var(--ink-mute);
    pointer-events: none; }
.conv-search-input { width: 100%; padding: .45rem .6rem .45rem 1.9rem; border: 1px solid var(--border);
    border-radius: 8px; font-size: .82rem; background: var(--bg-light); }
.conv-search-input:focus { outline: none; border-color: var(--primary); background: var(--white); }
.conv-scope-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.conv-scope-btn { padding: .4rem .7rem; font-size: .75rem; color: var(--text-muted); text-decoration: none; background: var(--bg-light); }
.conv-scope-btn.is-active { background: var(--primary); color: #fff; font-weight: 600; }

.conv-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.conv-list-item { border-bottom: 1px solid var(--border-light); }
/* impeccable-disable-next-line side-tab -- active-row selection rail, not a decorative accent */
.conv-list-link { display: flex; gap: .6rem; padding: .55rem .7rem; text-decoration: none; color: inherit;
    border-left: 3px solid transparent; transition: background var(--dur-colour) var(--ease-out-editorial); align-items: center; }
.conv-list-link:hover { background: rgba(30, 58, 95, 0.04); }
.conv-list-link.is-active { background: rgba(30, 58, 95, 0.07); border-left-color: var(--primary); }
.conv-list-avatar { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--primary);
    color: #fff; font-size: .7rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.conv-list-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.conv-list-top { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.conv-list-name { font-weight: 600; font-size: .84rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-list-time { font-size: .68rem; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
/* Second line: stage chip + preview share one row so each conversation is
   exactly two lines tall. */
.conv-list-sub { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.conv-list-stage { flex-shrink: 0; font-size: .62rem; font-weight: 700; padding: 1px 7px; border-radius: 9px;
    background: var(--bg-light); color: var(--text-muted); text-transform: uppercase; letter-spacing: .2px;
    white-space: nowrap; }
.conv-list-preview { font-size: .76rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.conv-list-empty { color: var(--text-muted); font-style: italic; }
.conv-list-none { padding: 1.5rem 1rem; }
/* .conv-list-pagination: superseded by the one pager. */
.conv-page-info { font-size: .75rem; color: var(--text-muted); }

/* Pipeline-stage colours — same reading as the kanban board. Applies to both
   the list chips and the selected-thread header chip. */
.conv-list-stage.status-submitted,          .conv-pane-stage.status-submitted          { background: var(--royal-soft); color: var(--royal-strong); }
.conv-list-stage.status-inreview,           .conv-pane-stage.status-inreview           { background: var(--amber-line); color: var(--amber-hover); }
.conv-list-stage.status-documentsrequired,  .conv-pane-stage.status-documentsrequired  { background: var(--amber-line); color: var(--amber-hover); }
.conv-list-stage.status-conditionaloffer,   .conv-pane-stage.status-conditionaloffer   { background: var(--plum-soft); color: var(--plum-strong); }
.conv-list-stage.status-offersent,          .conv-pane-stage.status-offersent          { background: var(--royal-line); color: var(--royal-strong); }
.conv-list-stage.status-offeraccepted,      .conv-pane-stage.status-offeraccepted      { background: var(--teal-line); color: var(--teal-hover); }
.conv-list-stage.status-pendingfinance,     .conv-pane-stage.status-pendingfinance     { background: var(--amber-line); color: var(--amber-hover); }
.conv-list-stage.status-financecleared,     .conv-pane-stage.status-financecleared     { background: var(--teal-line); color: var(--teal-hover); }
.conv-list-stage.status-accepted,           .conv-pane-stage.status-accepted           { background: var(--teal-line); color: var(--teal-hover); }
.conv-list-stage.status-rejected,           .conv-pane-stage.status-rejected           { background: var(--crimson-line); color: var(--crimson-hover); }
.conv-list-stage.status-withdrawn,          .conv-pane-stage.status-withdrawn          { background: var(--surface-alt); color: var(--ink-mute); }

/* Right thread column */
.conv-thread-col { background: var(--white); border: 1px solid var(--border); border-radius: 12px;
    display: flex; flex-direction: column; height: calc(100vh - 205px); min-height: 440px; overflow: hidden; }
.conv-back-link { display: none; }
.conv-pane-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .7rem 1rem; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.conv-pane-head-main { min-width: 0; display: flex; align-items: center; gap: .65rem; }
.conv-pane-avatar { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--primary);
    color: #fff; font-size: .78rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.conv-pane-title { margin: 0; font-size: .95rem; font-weight: 600; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-pane-sub { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; margin-top: 2px; }
.conv-pane-stage { font-size: .64rem; font-weight: 700; padding: 1px 8px; border-radius: 9px;
    background: var(--bg-light); color: var(--text-muted); text-transform: uppercase; letter-spacing: .2px; }
.conv-pane-email { font-size: .76rem; color: var(--text-muted); }
.conv-pane-actions { flex-shrink: 0; }
/* The thread scrolls on a subtly different background so bubbles read as
   floating above the pane, like every messaging product users already know. */
.conv-pane-thread { flex: 1; overflow-y: auto; padding: 1rem 1.25rem; background: var(--bg-subtle); }
.conv-thread-empty { display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .5rem; color: var(--text-muted); height: 100%; text-align: center; }
.conv-thread-empty i { font-size: 2rem; opacity: .5; }
.conv-thread-empty p { margin: 0; font-size: .85rem; }

/* Composer — subject collapses into one compact bar; attachments are chips,
   never a raw file input. */
.conv-composer { display: flex; flex-direction: column; gap: .45rem; padding: .75rem 1rem;
    border-top: 1px solid var(--border); background: var(--white); flex-shrink: 0; }
.conv-composer-subject, .conv-composer-body { width: 100%; }
.conv-composer-subject { font-size: .82rem !important; padding: .45rem .65rem !important; }
.conv-composer-body { font-size: .85rem !important; resize: vertical; min-height: 58px; }
.conv-composer-row { display: flex; align-items: center; gap: .6rem; }
.conv-composer-file { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem;
    color: var(--text-secondary); cursor: pointer; padding: .35rem .7rem; border: 1px solid var(--border);
    border-radius: 8px; background: var(--bg-light); transition: border-color var(--dur-colour) var(--ease-out-editorial); }
.conv-composer-file:hover { border-color: var(--primary); color: var(--primary); }
.conv-file-chips { display: flex; flex-wrap: wrap; gap: .35rem; min-width: 0; flex: 1; }
.conv-file-chip { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; padding: 2px 8px;
    border-radius: 12px; background: var(--bg-light); border: 1px solid var(--border); color: var(--text-secondary);
    max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-composer-send { margin-left: auto; flex-shrink: 0; }

.conv-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .5rem; flex: 1; color: var(--text-muted); padding: 3rem 1.5rem; text-align: center; }
.conv-empty-state i { font-size: 2.5rem; opacity: .35; }
.conv-empty-state h3 { margin: 0; color: var(--text); font-size: 1rem; }
.conv-empty-state p { margin: 0; font-size: .85rem; max-width: 320px; }

@media (max-width: 900px) {
    .conv-layout { grid-template-columns: 1fr; }
    .conv-list-col { height: auto; max-height: 60vh; }
    .conv-thread-col { height: auto; max-height: none; min-height: 60vh; }
    /* Stack: when an opportunity is selected, show the thread under the list. */
    .conv-back-link { display: inline-flex; align-items: center; gap: .4rem; padding: .6rem 1rem;
        font-size: .82rem; color: var(--primary); text-decoration: none; border-bottom: 1px solid var(--border); }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1200px) {
    .metrics-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
    .dashboard-grid { grid-template-columns: 1fr; }
    .conversion-funnel { flex-direction: column; }
    .funnel-step::after { display: none; }
    .applications-table th:nth-child(3),
    .applications-table td:nth-child(3),
    .applications-table th:nth-child(4),
    .applications-table td:nth-child(4) { display: none; }
    .report-stats-row { grid-template-columns: repeat(2, 1fr); }
    .reports-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .page-header { flex-direction: column; align-items: stretch; }
    .page-header-actions { justify-content: flex-start; }
    .stats-overview, .dashboard-stats { grid-template-columns: 1fr; }
    .metrics-grid { grid-template-columns: 1fr 1fr; gap: .75rem; }
    .metric-card { padding: .875rem; }
    .metric-icon { width: 36px; height: 36px; font-size: 1rem; }
    .metric-value { font-size: 1.125rem; }
    .detail-grid { grid-template-columns: 1fr; }
    .quick-stats-bar { padding: .75rem 1rem; gap: .75rem; }
    .quick-stat-divider { display: none; }
    .quick-stat { flex: 1; min-width: 60px; }
    .quick-stat-value { font-size: 1.125rem; }
    .applications-toolbar { flex-direction: column; align-items: stretch; }
    .toolbar-left, .toolbar-right { width: 100%; }
    .filter-pills { overflow-x: auto; flex-wrap: nowrap; padding-bottom: .5rem; }
    .search-field { width: 100%; }
    .search-field input { width: 100%; }
    .applications-table th:nth-child(5),
    .applications-table td:nth-child(5) { display: none; }
    .applicant-avatar { width: 36px; height: 36px; }
    .rate-display { flex-direction: column; text-align: center; }
    .rate-breakdown { flex-direction: row; gap: 1rem; }
    .form-progress { padding: .75rem; }
    .progress-step .step-label { display: none; }
    .progress-line { max-width: 40px; }
    .form-step { padding: 1rem; }
    .step-header { flex-direction: column; text-align: center; }
    .review-grid { grid-template-columns: 1fr; }
    .student-type-grid,
    .service-grid,
    .address-layout,
    .form-layout-split,
    .compact-grid { grid-template-columns: 1fr; }
    .step-actions { flex-direction: column-reverse; gap: .75rem; }
    .step-actions .btn { width: 100%; }
    .report-stats-row { grid-template-columns: 1fr; }
    .action-buttons .btn { width: 100%; }
}
@media (max-width: 480px) {
    .metric-badge { display: none; }
}

/* Print */
@media print {
    .page-header-actions, .bulk-action-bar { display: none !important; }
    .report-stat-card, .report-panel { border: 1px solid var(--rule-strong); }
}

/* ==========================================================================
   APPLICATION FORM — REFINED DESIGN (v2)
   Cohesive, modern multi-step layout. Overrides earlier form rules.
   Palette: navy var(--ink), slate neutrals. Token-aware where useful.
   ========================================================================== */

.application-form-page { max-width: 1240px; }
.application-shell { gap: 1rem; }

/* ----- Hero: compact, horizontal, purposeful ----- */
.application-hero {
    grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr);
    gap: 2rem;
    align-items: center;
    padding: 1.5rem 1.75rem;
    border: 1px solid var(--rule);
    border-radius: 1rem;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(30,58,95,.10) 0%, transparent 45%),
        linear-gradient(180deg, var(--surface) 0%, var(--paper) 100%);
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 12px 30px rgba(15,23,42,.05);
}
.application-hero-copy { gap: .55rem; }
.application-hero-kicker {
    gap: .4rem;
    padding: .32rem .7rem;
    background: var(--surface-alt);
    color: var(--ink);
    font-size: .68rem;
    letter-spacing: .1em;
}
.application-hero-kicker i { font-size: .7rem; }
.application-hero-title {
    font-size: clamp(1.4rem, 1.6vw, 1.85rem);
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--ink);
}
.application-hero-text {
    font-size: .9rem;
    line-height: 1.6;
    color: var(--ink-mute);
    max-width: 52ch;
}
.application-hero-meta {
    gap: .55rem;
    grid-auto-rows: min-content;
}
.hero-meta-card {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem .85rem;
    border: 1px solid var(--rule);
    border-radius: .75rem;
    background: var(--surface);
    backdrop-filter: none;
}
.hero-meta-icon {
    width: 2.2rem;
    height: 2.2rem;
    flex-shrink: 0;
    border-radius: .6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-alt);
    color: var(--ink);
    font-size: .9rem;
}
.hero-meta-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hero-meta-text strong { font-size: .85rem; color: var(--ink); }
.hero-meta-text span { font-size: .76rem; color: var(--ink-mute); line-height: 1.35; }

/* ----- Progress stepper: horizontal, aligned, no stray connectors -----
   The global `.progress-step` rules (scoped to `.application-progress`)
   used to leak `flex-direction:column` + an `::after` line into this bar,
   producing duplicate/misaligned connectors. Everything below fully
   redefines the form stepper so circles, lines, and labels line up. */
.form-progress {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: 1.1rem 1.6rem;
    border-radius: .9rem;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.form-progress .progress-step {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .6rem;
    flex: 0 0 auto;
    position: static;
    text-align: left;
}
/* neutralise the detail-page pseudo connector that previously leaked in */
.form-progress .progress-step::after,
.form-progress .progress-step::before { content: none !important; display: none !important; }
.form-progress .progress-step .step-circle {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .9rem;
    background: var(--surface);
    border: 2px solid var(--rule);
    color: var(--ink-faint);
    box-shadow: none;
    transition: background var(--dur-rise) var(--ease-out-editorial),
                border-color var(--dur-rise) var(--ease-out-editorial),
                box-shadow var(--dur-rise) var(--ease-out-editorial);
}
.form-progress .progress-step.active .step-circle {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(30,58,95,.12);
}
.form-progress .progress-step.completed .step-circle {
    background: var(--teal-strong);
    border-color: var(--teal-strong);
    color: transparent;
    position: relative;
}
.form-progress .progress-step.completed .step-circle::after {
    content: '\2713';
    font-weight: 700;
    color: #fff;
    font-size: .95rem;
    position: absolute;
    inset: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
}
.form-progress .step-label {
    display: flex;
    flex-direction: column;
    gap: 1px;
    align-items: flex-start;
    text-align: left;
    line-height: 1.2;
}
.form-progress .step-label strong { font-size: .82rem; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
.form-progress .step-label small { display: none; }   /* subtitle repeated in step header below */
.form-progress .progress-step.active .step-label strong { color: var(--ink); }
.form-progress .progress-step.completed .step-label strong { color: var(--teal-strong); }
.form-progress .progress-line {
    flex: 1 1 auto;
    min-width: 18px;
    max-width: none;
    height: 2px;
    background: var(--rule);
    border-radius: 2px;
    align-self: center;
}

/* ----- Container & steps ----- */
.form-step { padding: 1.75rem; }
.step-header {
    align-items: center;
    gap: .9rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--surface-alt);
}
.step-icon {
    width: 46px;
    height: 46px;
    border-radius: .75rem;
    background: linear-gradient(135deg, var(--ink) 0%, var(--ink-soft) 100%);
    color: #fff;
    font-size: 1.15rem;
    box-shadow: 0 6px 16px rgba(30,58,95,.22);
}
.step-header h2 { font-size: 1.2rem; font-weight: 700; color: var(--ink); }
.step-header p { font-size: .875rem; color: var(--ink-mute); }

/* ----- Section cards: lighter, accent edge ----- */
.form-section-card {
    background: var(--surface);
    border: 1px solid var(--surface-alt);
    border-radius: .9rem;
    padding: 1.35rem 1.4rem;
    margin-bottom: 1rem;
    box-shadow: none;
    transition: border-color var(--dur-fade) var(--ease-out-editorial),
                box-shadow var(--dur-fade) var(--ease-out-editorial);
}
.form-section-card:hover { border-color: var(--rule); }
.form-section-card:focus-within {
    border-color: var(--rule-strong);
    box-shadow: 0 0 0 3px rgba(30,58,95,.05);
}
.section-kicker { color: var(--ink); font-size: .68rem; letter-spacing: .1em; }
.section-intro { font-size: .875rem; color: var(--ink-mute); }

/* ----- Inputs: taller, crisp focus, custom select caret ----- */
.form-group label { font-size: .8rem; font-weight: 600; color: var(--ink-soft); }
.form-group label .required { color: var(--crimson-strong); margin-left: 1px; }
.form-input {
    padding: .6rem .75rem;
    min-height: 42px;
    border: 1px solid var(--rule);
    border-radius: .55rem;
    font-size: .875rem;
    background: var(--surface);
    transition: border-color var(--dur-fade) var(--ease-out-editorial),
                box-shadow var(--dur-fade) var(--ease-out-editorial),
                background var(--dur-fade) var(--ease-out-editorial);
}
.form-input:hover:not(:focus) { border-color: var(--rule-strong); }
.form-input:focus {
    border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(30,58,95,.12);
}
.form-input::placeholder { color: var(--ink-faint); }
textarea.form-input { min-height: 92px; line-height: 1.55; padding-top: .55rem; }
select.form-input {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M3 4.5 6 7.5 9 4.5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    padding-right: 2rem;
}
.form-input.error { border-color: var(--crimson-strong); background: var(--crimson-soft); }
.form-input.error:focus { box-shadow: 0 0 0 3px rgba(220,38,38,.12); }

/* ----- Intake auto-fill details (commences / completion / close date) ----- */
.intake-details-panel {
    margin-top: .5rem;
    padding: .65rem .85rem;
    border-radius: .5rem;
    background: var(--paper);
    border: 1px solid var(--rule);
    display: flex;
    flex-direction: column;
    gap: .3rem;
}
.intake-details-panel.is-hidden { display: none; }
.intake-detail-row { display: flex; justify-content: space-between; font-size: .8rem; color: var(--ink-soft); gap: 1rem; }
.intake-detail-row strong { color: var(--ink); font-weight: 600; }
.intake-detail-row.is-warning strong { color: var(--amber-hover); }

/* ----- Step actions ----- */
.step-actions { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--surface-alt); }
.application-form .btn { border-radius: .6rem; font-weight: 600; }
.application-form .btn-primary {
    background: var(--ink);
    border-color: var(--ink);
    box-shadow: 0 6px 16px rgba(30,58,95,.20);
}
.application-form .btn-primary:hover { background: var(--ink); border-color: var(--ink); }
/* .btn-lg keeps the design-system font-size; only padding is tuned here. */

/* ----- Applicant-type cards ----- */
.student-type-grid { gap: .85rem; }
.student-type-option {
    min-height: auto;
    grid-template-columns: auto 1fr;
    gap: .75rem 1rem;
    padding: 1.1rem 1.15rem;
    border: 1.5px solid var(--rule);
    border-radius: .9rem;
    background: var(--surface);
}
.student-type-marker { grid-row: 1; grid-column: 1; }
.student-type-icon {
    grid-row: 1;
    grid-column: 2;
    justify-self: start;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: .7rem;
    box-shadow: none;
}
.student-type-content { grid-column: 1 / -1; gap: .25rem; }
.student-type-title { font-size: .92rem; }
.student-type-option:hover { border-color: var(--rule-strong); box-shadow: 0 6px 18px rgba(30,58,95,.07); }
.student-type-option:has(input:checked) {
    border-color: var(--ink);
    box-shadow: 0 0 0 1px var(--ink), 0 10px 24px rgba(30,58,95,.12);
    background: var(--paper);
}
.selection-tip { color: var(--ink-faint); font-size: .76rem; }

/* ----- Checkbox cards ----- */
.checkbox-card {
    align-items: center;
    gap: .65rem;
    padding: .8rem .95rem;
    border: 1px solid var(--rule);
    border-radius: .7rem;
    background: var(--surface);
    cursor: pointer;
    transition: border-color var(--dur-fade) var(--ease-out-editorial),
                background var(--dur-fade) var(--ease-out-editorial);
    font-size: .85rem;
    color: var(--ink-soft);
}
.checkbox-card:hover { border-color: var(--rule-strong); background: var(--paper); }
.checkbox-card input { width: 17px; height: 17px; margin: 0; accent-color: var(--ink); flex-shrink: 0; }
.checkbox-card:has(input:checked) { border-color: var(--ink); background: var(--surface-alt); }
.required-checkbox { border-color: var(--rule); }

/* ----- Address & split layout ----- */
.address-layout, .form-layout-split { gap: 1.1rem; }
.address-panel {
    border: 1px solid var(--surface-alt);
    border-radius: .85rem;
    background: var(--paper);
    padding: 1.15rem;
}
.address-title { font-size: .9rem; color: var(--ink); }

/* ----- Cost summary ----- */
.summary-card {
    border: 1px solid var(--surface-alt);
    border-radius: .9rem;
    background: linear-gradient(180deg, var(--surface) 0%, var(--paper) 100%);
    padding: 1.25rem;
    box-shadow: 0 10px 26px rgba(15,23,42,.05);
}
.sticky-summary { top: 1.25rem; }
.cost-row { padding: .65rem 0; font-size: .85rem; border-bottom: 1px solid var(--surface-alt); }
.cost-row.total-row {
    margin-top: .35rem;
    padding-top: .85rem;
    border-top: 2px solid var(--rule);
    font-size: 1.05rem;
    color: var(--ink);
}
.cost-row.total-row strong { color: var(--ink); font-size: 1.15rem; }
.summary-note { color: var(--ink-faint); font-size: .76rem; }

/* ----- Service cards ----- */
.service-grid { gap: .85rem; }
.service-card {
    border: 1px solid var(--rule);
    border-radius: .85rem;
    padding: 1.05rem;
    background: var(--surface);
    transition: border-color var(--dur-fade) var(--ease-out-editorial),
                box-shadow var(--dur-fade) var(--ease-out-editorial);
}
.service-card:hover { border-color: var(--rule-strong); box-shadow: 0 6px 18px rgba(30,58,95,.06); }
.service-card input { accent-color: var(--ink); }
.service-card:has(input:checked) {
    border-color: var(--ink);
    box-shadow: 0 0 0 1px var(--ink);
    background: var(--paper);
}
.service-type {
    align-self: flex-start;
    padding: .12rem .5rem;
    border-radius: .4rem;
    background: var(--surface-alt);
    color: var(--ink);
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.service-meta strong { color: var(--ink); font-size: .85rem; }

/* ----- Review step ----- */
.review-card { background: var(--paper); border: 1px solid var(--surface-alt); border-radius: .9rem; padding: 1.4rem; }
.review-card .review-section { border-bottom: 1px solid var(--surface-alt); }
.review-card .review-section h3 {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ink);
}
.review-item {
    background: var(--surface);
    border: 1px solid var(--surface-alt);
    border-radius: .6rem;
    padding: .6rem .75rem;
}
.review-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); }
.review-value { font-size: .875rem; color: var(--ink); font-weight: 500; }
.submit-notice {
    background: var(--surface-alt);
    border: 1px solid var(--rule);
    border-radius: .85rem;
}
.consent-card { border-color: var(--rule); }

/* ----- Responsive refinements ----- */
@media (max-width: 980px) {
    .application-hero { gap: 1.25rem; padding: 1.25rem; }
    .application-hero-meta { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .form-step { padding: 1.15rem; }
    .form-section-card { padding: 1.1rem; }
    .application-hero-meta { grid-template-columns: 1fr; }
}

/* =====================================================================
   APPLICATION VIEWS — list/detail/edit polish (Session: stage-gating)
   Reuses shared .metric-card/.panel/.data-table/.form-* primitives.
   ===================================================================== */

/* ----- List: applicant cell (rebuilt list uses .applicant-cell) ----- */
.applicant-cell { display: flex; align-items: center; gap: .7rem; min-width: 0; }
/* `align-items: center` is inherited from the generic .applicant-info rule
   above, where the layout is a ROW. In this column it centred each line
   horizontally and shrank it to fit, so a long email overflowed the cell on
   BOTH sides and got clipped on the left — the ellipsis never appeared
   because the overflow was not at the end. Anchoring to the start is what
   lets text-overflow do its job. */
.applicant-cell .applicant-info { display: flex; flex-direction: column;
    align-items: flex-start; gap: 1px; min-width: 0; }
.applicant-cell .applicant-name { display: flex; align-items: center; gap: .4rem; font-weight: 600;
    font-size: .875rem; color: var(--gray-900, var(--ink)); }
/* The name is the row's primary link, so it has to clear the 24px target floor.
   min-height + a matching line-height does it without touching the width: the
   glyphs stay centred against the Agent badge, and the box stays a block, which
   is what keeps text-overflow usable (display:flex would silently kill it). */
.applicant-cell .applicant-name a { color: inherit; text-decoration: none; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; min-height: 24px; line-height: 24px; }
.applicant-cell .applicant-name a:hover { color: var(--primary, var(--ink)); }
.applicant-cell .applicant-email { font-size: .75rem; color: var(--gray-500, var(--ink-faint));
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 16px was well under the minimum target size and awkward to hit on touch.
   24px is the floor WCAG 2.2 SC 2.5.8 asks for, and since a native checkbox's
   box IS its hit area, the mark has to carry the size -- there is no way to
   keep an 16px mark and a 24px target without replacing the control. */
.data-table .bulk-check { width: 24px !important; height: 24px !important; cursor: pointer; }

/* ----- List: bulk action bar ----- */
.bulk-action-bar { display: flex; align-items: center; gap: 1rem; padding: .8rem 1.1rem;
    margin-bottom: 1rem; background: var(--primary-50, var(--surface-alt)); border: 1px solid var(--rule);
    border-radius: 12px; }
.bulk-action-bar .bulk-count { font-weight: 700; font-size: .85rem; color: var(--primary, var(--ink)); }

/* ----- Detail: STAGE PROGRESS pipeline ----- */
.stage-progress { background: var(--surface); border: 1px solid var(--gray-200, var(--rule)); border-radius: 14px;
    padding: 1.4rem 1.5rem 1.15rem; margin-bottom: 1.25rem; box-shadow: 0 1px 3px rgba(16,24,40,.05); }
.stage-track { list-style: none; margin: 0; padding: 0; display: flex; align-items: flex-start;
    gap: 0; counter-reset: stage; }
.stage-step { position: relative; flex: 1 1 0; display: flex; flex-direction: column;
    align-items: center; text-align: center; min-width: 0; }
/* connector line between markers */
.stage-step::before { content: ""; position: absolute; top: 18px; left: -50%; width: 100%; height: 3px;
    background: var(--gray-200, var(--rule)); z-index: 0; }
.stage-step:first-child::before { display: none; }
.stage-marker { position: relative; z-index: 1; width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: .85rem;
    background: var(--surface); border: 2px solid var(--gray-300, var(--rule-strong)); color: var(--gray-400, var(--ink-faint));
    transition: background-color var(--dur-colour) var(--ease-out-editorial),
                border-color var(--dur-colour) var(--ease-out-editorial),
                box-shadow var(--dur-colour) var(--ease-out-editorial),
                color var(--dur-colour) var(--ease-out-editorial); }
.stage-label {
    margin-top: .5rem;
    line-height: 1.25;
    font-size: var(--text-label);
    line-height: var(--text-label-lh);
    letter-spacing: var(--text-label-ls);
    text-transform: uppercase;
    font-weight: var(--font-semibold);
    color: var(--ink-mute);
}
/* done */
.stage-step.done .stage-marker { background: var(--primary, var(--ink)); border-color: var(--primary, var(--ink)); color: #fff; }
.stage-step.done::before { background: var(--primary, var(--ink)); }
.stage-step.done .stage-label { color: var(--gray-700, var(--ink-soft)); }
/* current */
.stage-step.current .stage-marker { background: var(--surface); border-color: var(--primary, var(--ink));
    color: var(--primary, var(--ink)); box-shadow: 0 0 0 4px rgba(30,58,95,.12); }
.stage-step.current .stage-label { color: var(--primary, var(--ink)); font-weight: 700; }
/* the connector entering the current step is complete */
.stage-step.current::before { background: var(--primary, var(--ink)); }
/* closed (rejected/withdrawn) */
.stage-progress.closed { padding: 0; border: none; box-shadow: none; background: transparent; }
.stage-closed-banner { display: flex; align-items: center; gap: .65rem; padding: .9rem 1.1rem;
    background: var(--crimson-soft); border: 1px solid var(--crimson-line); border-radius: 12px; color: var(--crimson-hover);
    font-size: .875rem; }
.stage-closed-banner i { font-size: 1.1rem; }

/* ----- Detail: stage-gated action bar ----- */
.stage-actions { background: var(--surface); border: 1px solid color-mix(in srgb, var(--primary, var(--ink)) 32%, var(--gray-200, var(--rule)));
    border-radius: 12px; padding: 1.1rem 1.25rem; margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(16,24,40,.05); }
.stage-actions-head { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; margin-bottom: .9rem; }
.stage-actions-title { font-size: .9rem; font-weight: 700; color: var(--gray-900, var(--ink));
    display: inline-flex; align-items: center; gap: .45rem; }
.stage-actions-title i { color: var(--primary, var(--ink)); }
.stage-actions-hint { font-size: .76rem; color: var(--gray-500, var(--ink-mute)); }
.stage-actions-body { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.stage-actions-body form { display: inline; margin: 0; }
.stage-actions-sep { flex: 1 1 auto; min-width: 12px; }
.stage-done-note { display: inline-flex; align-items: center; gap: .45rem; font-size: .875rem;
    font-weight: 600; color: var(--success, var(--teal-strong)); }

/* ----- Edit: form-card base (shares detail design language) ----- */
.form-card { background: var(--surface); border: 1px solid var(--gray-200, var(--rule)); border-radius: 1.15rem;
    overflow: hidden; box-shadow: 0 1px 3px rgba(16,24,40,.06); }
.form-card .panel-body { padding: 1.5rem 1.75rem; }
.form-card .form-section + .form-section { border-top: 1px solid var(--gray-100, var(--surface-alt));
    padding-top: 1.5rem; }
.form-card .form-section-title { display: flex; align-items: center; gap: .55rem; }
.form-card .form-section-title i { color: var(--primary, var(--ink)); }
.form-error-summary { display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem;
    margin-bottom: 1.25rem; background: var(--crimson-soft); border: 1px solid var(--crimson-line); border-radius: 10px;
    color: var(--crimson-hover); font-size: .85rem; font-weight: 500; }

/* ----- Responsive: stage pipeline collapses gracefully ----- */
@media (max-width: 720px) {
    .stage-track { flex-wrap: wrap; gap: .5rem 0; }
    .stage-step { flex: 0 0 25%; }
    .stage-step::before { display: none; }
}

/* ----- Country requirements cheat-sheet (collapsible, application detail) ----- */
.country-rule-panel {
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--royal-strong) 32%, var(--gray-200, var(--rule)));
    border-radius: .6rem;
    margin-bottom: 1.25rem;
    padding: .1rem .1rem;
}
.country-rule-panel summary {
    cursor: pointer;
    list-style: none;
    padding: .75rem 1rem;
    font-weight: 600;
    font-size: .9rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--royal-hover);
}
.country-rule-panel summary::-webkit-details-marker { display: none; }
.country-rule-panel summary::before { content: '\25B8'; margin-right: .25rem; transition: transform var(--dur-fade) var(--ease-out-editorial); }
.country-rule-panel[open] summary::before { transform: rotate(90deg); }
.country-rule-body { padding: 0 1rem 1rem 1rem; display: flex; flex-direction: column; gap: .6rem; }
.country-rule-row { display: flex; justify-content: space-between; font-size: .82rem; color: var(--ink-soft); gap: 1rem; }
.country-rule-row strong { color: var(--ink); }
.country-rule-block span { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-mute); margin-bottom: .2rem; }
.country-rule-block p { font-size: .82rem; color: var(--ink-soft); margin: 0; line-height: 1.5; }

/* ==========================================================================
   Admissions "Opportunities" board (GHL-style draggable pipeline)
   ========================================================================== */

/* ----- Toolbar: my/all toggle, owner filter, search ----- */
.opp-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
    margin-bottom: var(--space-4); padding: var(--space-2) var(--space-3);
    background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs); }
.opp-scope-toggle { display: inline-flex; background: var(--gray-100); border-radius: var(--radius-md); padding: 3px; gap: 2px; }
.opp-scope-btn { display: inline-flex; align-items: center; gap: var(--space-1);
    padding: var(--space-1) var(--space-3); font-size: var(--text-sm); font-weight: var(--font-medium);
    color: var(--gray-600); border-radius: var(--radius-sm); text-decoration: none; transition: background-color var(--dur-colour) var(--ease-out-editorial),
                border-color var(--dur-colour) var(--ease-out-editorial),
                box-shadow var(--dur-colour) var(--ease-out-editorial),
                color var(--dur-colour) var(--ease-out-editorial); white-space: nowrap; }
.opp-scope-btn:hover { color: var(--gray-900); }
.opp-scope-btn.is-active { background: var(--white); color: var(--primary); box-shadow: var(--shadow-xs); }
.opp-scope-btn.is-static { cursor: default; }
.opp-toolbar-field { display: inline-flex; align-items: center; gap: var(--space-1); position: relative; }
.opp-toolbar-label {
    font-size: var(--text-label);
    line-height: var(--text-label-lh);
    letter-spacing: var(--text-label-ls);
    text-transform: uppercase;
    font-weight: var(--font-semibold);
    color: var(--ink-mute);
}
.opp-select { height: 36px; border: 1px solid var(--gray-200); border-radius: var(--radius-md);
    padding: 0 var(--space-2); font-size: var(--text-sm); background: var(--white); color: var(--gray-800); }
.opp-toolbar-search { flex: 1 1 220px; min-width: 180px; }
.opp-search-icon { position: absolute; left: var(--space-2); top: 50%;
    transform: translateY(-50%); color: var(--ink-mute);
    pointer-events: none; }
.opp-search-input { width: 100%; height: 36px; border: 1px solid var(--gray-200); border-radius: var(--radius-md);
    padding: 0 var(--space-2) 0 calc(var(--space-2) + 18px); font-size: var(--text-sm); background: var(--white); color: var(--gray-800); }

/* ----- Board + columns ----- */
.kanban-board { display: flex; gap: var(--space-3); overflow-x: auto; padding-bottom: var(--space-4); }
.kanban-col { flex: 0 0 290px; background: var(--gray-50); border-radius: var(--radius-lg);
    display: flex; flex-direction: column; max-height: 78vh;
    border: 1px solid var(--gray-200); transition: border-color var(--dur-fade) var(--ease-out-editorial),
                background var(--dur-fade) var(--ease-out-editorial); }
.kanban-col-header { padding: var(--space-3) var(--space-3) var(--space-1);
    display: flex; justify-content: space-between; align-items: center; font-weight: var(--font-semibold); }
.kanban-col-heading { display: inline-flex; align-items: center; gap: var(--space-1); min-width: 0; }
.kanban-col-label {
    font-size: var(--text-label);
    line-height: var(--text-label-lh);
    letter-spacing: var(--text-label-ls);
    text-transform: uppercase;
    font-weight: var(--font-semibold);
    color: var(--ink-mute);
}
.kanban-lock { color: var(--gray-400); font-size: var(--text-xs); }
.kanban-col-value { padding: 0 var(--space-3) var(--space-2); font-size: var(--text-xs);
    font-weight: var(--font-semibold); color: var(--success, var(--teal-strong)); border-bottom: 1px solid var(--border-light); }
.kanban-col-body { padding: var(--space-2); overflow-y: auto; flex: 1; min-height: 60px; }

/* ----- Cards ----- */
.kanban-card { background: var(--white); padding: var(--space-3); border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs); margin-bottom: var(--space-2);
    border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--gray-200));
    transition: box-shadow var(--dur-fade) var(--ease-out-editorial),
                opacity var(--dur-fade) var(--ease-out-editorial),
                transform var(--dur-colour) var(--ease-out-editorial); }
.kanban-card:hover { box-shadow: var(--shadow-sm); }
.kanban-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
.kanban-card-link { color: var(--gray-900); text-decoration: none; font-weight: var(--font-semibold); font-size: var(--text-sm); line-height: 1.25; }
.kanban-card-link:hover { color: var(--primary); }
.kanban-card-course { margin-top: 2px; color: var(--gray-500); font-size: var(--text-xs); font-weight: var(--font-medium); letter-spacing: .02em; }
.kanban-card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-2); }
.opp-value { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--success, var(--teal-strong)); }
.opp-value-none { color: var(--gray-400); font-weight: var(--font-normal); font-style: italic; }
.opp-age { font-size: var(--text-xs); color: var(--gray-500); display: inline-flex; align-items: center; gap: 3px; }
.opp-age.is-stale { color: var(--warning, var(--amber-strong)); font-weight: var(--font-semibold); }

/* ----- Owner avatar chip ----- */
.opp-avatar { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: var(--radius-full); background: var(--primary);
    color: var(--white); font-size: 10px; font-weight: var(--font-bold); letter-spacing: .02em; }

/* ----- Count + empty + more ----- */
.kanban-count { background: var(--primary); color: var(--white); border-radius: var(--radius-full);
    padding: 0 var(--space-2); font-size: var(--text-xs); min-width: 1.5rem; text-align: center; }
.kanban-empty { padding: var(--space-4); text-align: center; color: var(--gray-400); font-size: var(--text-sm); }
.kanban-more { display: block; text-align: center; padding: var(--space-2); font-size: var(--text-xs);
    font-weight: var(--font-semibold); color: var(--primary); text-decoration: none; border-radius: var(--radius-md); }
.kanban-more:hover { background: var(--gray-100); }

/* ----- Drag affordances ----- */
.kanban-card[draggable="true"] { cursor: grab; }
.kanban-card[draggable="true"]:active { cursor: grabbing; }
.kanban-card.is-dragging { opacity: .45; box-shadow: var(--shadow-md); }
.kanban-card.is-saving { opacity: .6; pointer-events: none; }
.kanban-col.drop-target { background: var(--surface-alt); border-color: var(--primary, var(--ink)); }
.kanban-col.drop-target .kanban-col-body { outline: 2px dashed var(--primary, var(--ink)); outline-offset: -6px; border-radius: var(--radius-md); }

/* ----- Gated columns (Finance Cleared / Accepted): no drop allowed ----- */
.kanban-col.is-gated { background: repeating-linear-gradient(135deg, var(--gray-50), var(--gray-50) 10px, var(--gray-100) 10px, var(--gray-100) 20px);
    border-style: dashed; border-color: var(--gray-300); }
.kanban-col.is-gated .kanban-col-label { color: var(--gray-600); }
.kanban-col.is-gated .kanban-card { cursor: default; opacity: .92; }

/* ----- Card click affordance: cards open the opportunity modal ----- */
.kanban-card { cursor: pointer; transition: box-shadow var(--dur-colour) var(--ease-out-editorial),
                transform var(--dur-colour) var(--ease-out-editorial); }
.kanban-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.kanban-card[draggable="true"] { cursor: grab; }
.kanban-card[draggable="true"]:active { cursor: grabbing; }
.kanban-col.is-gated .kanban-card { cursor: pointer; }

/* ==========================================================================
   Opportunity detail modal (GHL-style popup over the board)
   ========================================================================== */
body.opp-modal-open { overflow: hidden; }
.opp-modal-overlay { position: fixed; inset: 0; z-index: 1200;
    background: rgba(15, 23, 42, 0.55); display: flex; align-items: center;
    justify-content: center; padding: var(--space-4); }
.opp-modal-overlay[hidden] { display: none; }
.opp-modal-panel { position: relative; width: 100%; max-width: 720px;
    max-height: 90vh; overflow-y: auto; background: var(--white);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg, 0 20px 50px rgba(0,0,0,.3));
    display: flex; flex-direction: column; }
.opp-modal-loading { padding: var(--space-6); text-align: center; color: var(--gray-500); }
.opp-modal-loading[hidden] { display: none; }
.opp-modal-content { display: flex; flex-direction: column; }

/* Header */
.opp-modal-header { display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-4); border-bottom: 1px solid var(--gray-200);
    position: sticky; top: 0; background: var(--white); z-index: 1; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.opp-modal-avatar { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: var(--radius-full); background: var(--primary);
    color: var(--white); font-size: var(--text-sm); font-weight: var(--font-bold); letter-spacing: .02em; }
.opp-modal-head-main { flex: 1; min-width: 0; }
.opp-modal-title { margin: 0; font-size: var(--text-lg); color: var(--gray-900);
    line-height: 1.25; word-break: break-word; }
.opp-modal-subline { display: flex; align-items: center; gap: var(--space-2);
    flex-wrap: wrap; margin-top: var(--space-1); }
.opp-modal-stage { font-size: var(--text-xs); font-weight: var(--font-semibold);
    padding: 2px 10px; border-radius: var(--radius-full); background: var(--gray-100);
    color: var(--gray-700); }
.opp-modal-value { font-size: var(--text-sm); font-weight: var(--font-semibold);
    color: var(--success, var(--teal-strong)); }
.opp-modal-value.opp-value-none { color: var(--gray-400); font-weight: var(--font-normal); font-style: italic; }
.opp-modal-owner { display: flex; align-items: center; gap: var(--space-2);
    flex-shrink: 0; }
.opp-modal-owner-name { font-size: var(--text-xs); color: var(--gray-600); max-width: 120px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opp-modal-close { flex-shrink: 0; border: none; background: var(--gray-100);
    color: var(--gray-600); width: 32px; height: 32px; border-radius: var(--radius-full);
    cursor: pointer; font-size: var(--text-sm); display: inline-flex; align-items: center; justify-content: center; }
.opp-modal-close:hover { background: var(--gray-200); color: var(--gray-900); }

/* Body */
.opp-modal-body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); }
.opp-modal-section { display: flex; flex-direction: column; gap: var(--space-2); }
.opp-modal-section-title { margin: 0; font-size: var(--text-sm); font-weight: var(--font-semibold);
    color: var(--gray-700); display: flex; align-items: center; gap: var(--space-2); }
.opp-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2) var(--space-4); }
.opp-detail { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.opp-detail-label { font-size: var(--text-xs); color: var(--gray-500); text-transform: uppercase; letter-spacing: .03em; }
.opp-detail-value { font-size: var(--text-sm); color: var(--gray-900); word-break: break-word; }
.opp-detail-value a { color: var(--primary); text-decoration: none; }
.opp-detail-value a:hover { text-decoration: underline; }
.opp-modal-empty { color: var(--gray-400); font-size: var(--text-sm); margin: 0; }

/* Recent activity list */
.opp-activity-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.opp-activity-item { display: flex; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--gray-100); }
.opp-activity-item:last-child { border-bottom: none; padding-bottom: 0; }
.opp-activity-item:first-child { padding-top: 0; }
.opp-activity-dot { flex-shrink: 0; width: 9px; height: 9px; border-radius: var(--radius-full);
    background: var(--primary); margin-top: 5px; }
.opp-activity-main { flex: 1; min-width: 0; }
.opp-activity-line { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.opp-activity-status { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--gray-900); }
.opp-activity-time { font-size: var(--text-xs); color: var(--gray-500); white-space: nowrap; }
.opp-activity-by { display: block; font-size: var(--text-xs); color: var(--gray-500); }
.opp-activity-note { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--gray-700); }

/* Footer */
.opp-modal-footer { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--gray-200);
    display: flex; justify-content: flex-end; gap: var(--space-2);
    position: sticky; bottom: 0; background: var(--white); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

@media (max-width: 600px) {
    .opp-modal-overlay { padding: 0; }
    .opp-modal-panel { max-width: 100%; max-height: 100vh; height: 100vh; border-radius: 0; }
    .opp-detail-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Conversion funnel
   ========================================================================== */

/* ---- The SHARED funnel row, used by reports.html ----
   `.funnel-stage` / `.funnel-bar-track` / `.funnel-bar` are also the markup
   of the small three-stage funnel on the reports page, where each bar sits
   alone in a flex:1 track so its `--width` percentage resolves against the
   track and nothing shrinks it. The conversion-funnel page's own rules are
   all scoped under `.funnel-wrap` below, so the two cannot collide. */
.funnel-stage { display: flex; align-items: center; gap: var(--space-3); }
.funnel-bar-track { flex: 1; display: flex; align-items: center; gap: var(--space-2); }
.funnel-bar { width: var(--width, 0%); height: 34px; border-radius: var(--radius-sm); min-width: 4px;
    transition: width var(--dur-fill) var(--ease-out-editorial); box-shadow: var(--shadow-xs); }

/* ---- The conversion-funnel page ---- */
/* The stage ORDINAL ramp. Funnel stages are a sequence, not seven unrelated
   categories, so they take one hue whose lightness carries position instead
   of seven hues implying seven unrelated things. The steps are mixed in
   OKLab between two tokens of the brand royal, --royal and --royal-soft, so
   the ramp never states a colour of its own.

   It runs DEEP -> PALE down the funnel, because the top stage always carries
   the most volume: the ramp would otherwise paint the longest bar in the
   faintest ink, and the panel would read washed out. Deep at the top, thinning
   as the funnel narrows: the ink fades as the population does.

   No dark-theme branch: in dark mode --royal is the bright link blue and
   --royal-soft the dim navy tint, so the same mix runs bright -> dim against
   the navy surface and carries the same taper. */
.funnel-wrap {
    --funnel-0: var(--royal);
    --funnel-1: color-mix(in oklab, var(--royal) 86%, var(--royal-soft));
    --funnel-2: color-mix(in oklab, var(--royal) 72%, var(--royal-soft));
    --funnel-3: color-mix(in oklab, var(--royal) 58%, var(--royal-soft));
    --funnel-4: color-mix(in oklab, var(--royal) 45%, var(--royal-soft));
    --funnel-5: color-mix(in oklab, var(--royal) 33%, var(--royal-soft));
    --funnel-6: color-mix(in oklab, var(--royal) 22%, var(--royal-soft));

    display: grid;
    grid-template-columns:
        [stage] minmax(120px, 160px)
        [plot]  minmax(0, 1fr)
        [count] 56px
        [pct]   64px
        [step]  minmax(96px, 128px);
    align-items: center;
    row-gap: var(--space-1);
    column-gap: var(--space-4);
}

/* Each stage is a row of the grid; `display: contents` lets its cells land
   in the parent's columns, which is what keeps the numbers in true columns
   instead of trailing each bar at whatever width it happens to end. */
.funnel-wrap .funnel-stage { display: contents; }
.funnel-head { display: contents; }
.funnel-head > * {
    font-size: var(--text-label);
    /* One explicit line box for EVERY header cell, and bottom-aligned.
       The row is `align-items: center`, so without these the underlines
       land at three different heights: the plot cell is empty (no text, so
       a 9px box), the step cell is a flex with a taller line-height (25.8px)
       and the numeric cells sit between them (23px) — centring each one puts
       its border-bottom on its own y. Aligning the cells to the row's bottom
       edge makes the rules share a single line whatever the content height. */
    align-self: end;
    line-height: var(--text-label-lh);
    min-height: calc(var(--text-label) * var(--text-label-lh));
    letter-spacing: var(--text-label-ls);
    text-transform: uppercase;
    font-weight: var(--font-semibold);
    color: var(--ink-faint);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--rule);
    margin-bottom: var(--space-2);
}
/* The step column is a flex row in the DATA cells only; as a header it is
   just a label, and the flex box was part of what threw its rule off. */
.funnel-head .funnel-col-step { display: block; }

.funnel-col-stage {
    text-align: right;
    font-size: var(--text-label);
    line-height: var(--text-label-lh);
    letter-spacing: var(--text-label-ls);
    text-transform: uppercase;
    font-weight: var(--font-semibold);
    color: var(--ink-mute);
}
.funnel-head .funnel-col-stage,
.funnel-head .funnel-col-num { text-align: right; }

.funnel-col-plot { min-width: 0; }
.funnel-wrap .funnel-bar-track { display: block; width: 100%; flex: none; }

/* Bar: capped thickness with the band's leftover left as air, 4px rounded
   data-end, square at the baseline it grows from. */
.funnel-wrap .funnel-bar {
    display: block;
    width: var(--width, 0%);
    min-width: 3px;
    /* Thin mark: the bar sits in a row whose text is 14px, so a 20px slab
       out-weighed everything beside it. The band's leftover is left as air. */
    height: 14px;
    border-radius: 0 4px 4px 0;
    background: var(--funnel-0);
    box-shadow: none;
    transition: width var(--dur-fill) var(--ease-out-editorial);
}
.funnel-wrap .funnel-bar.step-1 { background: var(--funnel-1); }
.funnel-wrap .funnel-bar.step-2 { background: var(--funnel-2); }
.funnel-wrap .funnel-bar.step-3 { background: var(--funnel-3); }
.funnel-wrap .funnel-bar.step-4 { background: var(--funnel-4); }
.funnel-wrap .funnel-bar.step-5 { background: var(--funnel-5); }
.funnel-wrap .funnel-bar.step-6 { background: var(--funnel-6); }

/* A stage nobody reached gets an empty track, not a coloured stub. The old
   `max(ratio, 2%)` floor painted a nub at every zero stage, which read as a
   rendering fault rather than as "none". */
.funnel-bar-none {
    display: block;
    height: 14px;
    border-bottom: 1px solid var(--rule);
}

.funnel-col-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}
.funnel-wrap .funnel-count { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--ink); }
.funnel-pct { font-size: var(--text-sm); color: var(--ink-mute); }

.funnel-col-step {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}
.funnel-step-pct  { color: var(--ink-soft); font-weight: var(--font-medium); }
.funnel-step-drop { color: var(--ink-faint); }
.funnel-step-na   { color: var(--ink-faint); }

/* A stage with no applications recedes — the row stays for the sequence, but
   it should not compete with the stages that have volume. */
.funnel-stage.is-empty .funnel-col-stage,
.funnel-stage.is-empty .funnel-count,
.funnel-stage.is-empty .funnel-pct { color: var(--ink-faint); }

@media (max-width: 900px) {
    .funnel-wrap { grid-template-columns: [stage] minmax(90px, 120px) [plot] minmax(0, 1fr) [count] 44px [pct] 52px; column-gap: var(--space-3); }
    .funnel-col-step, .funnel-head .funnel-col-step { display: none; }
}

/* =============================================================================
   FORM BUILDER
   ============================================================================= */

/* --- Builder layout: main + sidebar --- */
.builder-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--space-5);
    align-items: start;
}
@media (max-width: 1024px) {
    .builder-layout { grid-template-columns: 1fr; }
}

.builder-main { min-width: 0; }

/* --- Section cards --- */
.section-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-4);
    overflow: hidden;
}

.section-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-100);
    cursor: grab;
    margin: 0;
}
.section-header:active { cursor: grabbing; }

.section-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-lg);
    background: var(--primary-50, var(--royal-soft));
    color: var(--primary);
    font-size: var(--text-sm);
    flex-shrink: 0;
}

.section-info { flex: 1; min-width: 0; }
.section-info h3 {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--gray-800);
}
.section-info p {
    margin: 2px 0 0;
    font-size: var(--text-xs);
    color: var(--gray-500);
}

/* .section-actions is a SHARED component (design-system.css §8.5). The
   app-local base rule here was a second definition of it. Only the
   admissions-specific descendant styling below remains. */
.section-actions button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    background: var(--white);
    color: var(--gray-500);
    cursor: pointer;
    transition: background-color var(--dur-colour) var(--ease-out-editorial),
                border-color var(--dur-colour) var(--ease-out-editorial),
                box-shadow var(--dur-colour) var(--ease-out-editorial),
                color var(--dur-colour) var(--ease-out-editorial);
    font-size: var(--text-xs);
}
.section-actions button:hover {
    color: var(--primary);
    border-color: var(--primary);
    background: var(--primary-50, var(--royal-soft));
}
.section-actions button.danger:hover {
    color: var(--danger);
    border-color: var(--danger);
    background: var(--danger-light, var(--crimson-soft));
}

/* --- Field list inside sections --- */
.field-list {
    padding: var(--space-2) 0;
    min-height: 40px;
}

.field-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--gray-50);
    transition: background var(--dur-colour) var(--ease-out-editorial);
    cursor: grab;
}
.field-item:last-child { border-bottom: none; }
.field-item:hover { background: var(--gray-50); }
.field-item:active { cursor: grabbing; }

.field-grip {
    color: var(--gray-300);
    font-size: var(--text-xs);
    flex-shrink: 0;
    cursor: grab;
}

.field-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    flex-shrink: 0;
}
.field-icon.builtin {
    background: var(--primary-50, var(--royal-soft));
    color: var(--primary);
}
.field-icon.custom {
    background: var(--amber-line);
    color: var(--amber-hover);
}

.field-info { flex: 1; min-width: 0; }
.field-label {
    font-size: var(--text-label);
    line-height: var(--text-label-lh);
    letter-spacing: var(--text-label-ls);
    text-transform: uppercase;
    font-weight: var(--font-semibold);
    color: var(--ink-mute);
}
.field-meta {
    font-size: var(--text-xs);
    color: var(--gray-500);
    margin-top: 1px;
}

.field-badges {
    display: flex;
    gap: var(--space-1);
    flex-shrink: 0;
}
.field-badges .badge {
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: var(--radius-full, 9999px);
    font-weight: var(--font-medium);
}
.badge-required { background: var(--crimson-soft); color: var(--crimson-strong); }
.badge-builtin { background: var(--primary-50, var(--royal-soft)); color: var(--primary); }
.badge-custom { background: var(--amber-line); color: var(--amber-hover); }
.badge-hidden { background: var(--gray-100); color: var(--gray-500); }

.field-edit-btn,
.field-delete-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--gray-400);
    cursor: pointer;
    transition: background-color var(--dur-colour) var(--ease-out-editorial),
                border-color var(--dur-colour) var(--ease-out-editorial),
                box-shadow var(--dur-colour) var(--ease-out-editorial),
                color var(--dur-colour) var(--ease-out-editorial);
    flex-shrink: 0;
    font-size: var(--text-xs);
}
.field-edit-btn:hover { color: var(--primary); background: var(--primary-50, var(--royal-soft)); }
.field-delete-btn:hover { color: var(--danger); background: var(--danger-light, var(--crimson-soft)); }

.empty-fields {
    text-align: center;
    padding: var(--space-5) var(--space-4);
    color: var(--gray-400);
    font-size: var(--text-sm);
}
.empty-fields i {
    display: block;
    font-size: 1.5rem;
    margin-bottom: var(--space-2);
}

/* --- Add field area --- */
.add-field-area {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--gray-100);
    background: var(--gray-50);
}
.add-field-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--gray-600);
    border: 1px dashed var(--gray-300);
    border-radius: var(--radius-md);
    background: var(--white);
    cursor: pointer;
    transition: background-color var(--dur-colour) var(--ease-out-editorial),
                border-color var(--dur-colour) var(--ease-out-editorial),
                box-shadow var(--dur-colour) var(--ease-out-editorial),
                color var(--dur-colour) var(--ease-out-editorial);
}
.add-field-btn:hover {
    color: var(--primary);
    border-color: var(--primary);
    background: var(--primary-50, var(--royal-soft));
}

/* --- Sidebar --- */
.builder-sidebar { position: sticky; top: var(--space-4); }

.sidebar-panel {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin-bottom: var(--space-4);
}
.sidebar-panel-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--gray-800);
    border-bottom: 1px solid var(--gray-100);
    background: var(--gray-50);
}
.sidebar-panel-header i { color: var(--primary); font-size: var(--text-xs); }

.sidebar-panel-body { padding: var(--space-2) 0; }

.sidebar-field-list {
    max-height: 300px;
    overflow-y: auto;
}

.sidebar-field-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    color: var(--gray-700);
    cursor: pointer;
    transition: background var(--dur-colour) var(--ease-out-editorial);
}
.sidebar-field-item:hover {
    background: var(--gray-50);
}
.sidebar-field-item .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    background: var(--gray-100);
    color: var(--gray-500);
    font-size: 0.65rem;
    flex-shrink: 0;
}

/* --- Modal overlay --- */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}
.modal-overlay.active {
    display: flex;
}
.modal-overlay .modal-content {
    background: var(--white);
    border-radius: var(--radius-xl);
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-xl);
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
}
.modal-overlay .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--gray-100);
}
.modal-overlay .modal-header h3 {
    margin: 0;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--gray-800);
}
.modal-close:hover { color: var(--gray-700); background: var(--gray-100); }

.modal-overlay .modal-body {
    padding: var(--space-5);
}
.modal-overlay .modal-body .form-group {
    margin-bottom: var(--space-4);
}
.modal-overlay .modal-body .form-control,
.modal-overlay .modal-body .form-select {
    width: 100%;
    padding: var(--space-3);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--gray-800);
    background: var(--white);
}
.modal-overlay .modal-body .form-control:focus,
.modal-overlay .modal-body .form-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-50);
}
.modal-overlay .modal-body textarea.form-control {
    resize: vertical;
    font-family: inherit;
}
.modal-overlay .modal-body .form-check {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.modal-overlay .modal-body .form-check-input {
    accent-color: var(--primary);
    width: 16px;
    height: 16px;
}
.modal-overlay .modal-body .form-check-label {
    font-size: var(--text-sm);
    color: var(--gray-700);
}
.modal-overlay .modal-body .form-text {
    font-size: var(--text-xs);
    color: var(--gray-500);
    margin-top: var(--space-1);
}

.modal-overlay .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--gray-100);
}

/* --- Preview banner --- */
.preview-banner {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: var(--amber-line);
    border: 1px solid var(--amber-line);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-5);
}
.preview-banner > i {
    color: var(--amber-hover);
    font-size: 1.2rem;
    flex-shrink: 0;
}
.preview-banner .info h4 {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--amber-hover);
}
.preview-banner .info p {
    margin: 2px 0 0;
    font-size: var(--text-xs);
    color: var(--amber-hover);
}

/* ==========================================================================
   APPLICATION DETAIL — modal forms & document provenance
   --------------------------------------------------------------------------
   Data-entry forms moved out of the record body and into dialogs, so the
   detail page reads as a record rather than a wall of half-filled inputs.
   ========================================================================== */

/* Two-up field grid inside a modal; collapses to one column on narrow screens. */
.modal-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
}
/* Textareas and long free-text fields span the full dialog width. */
.modal-form-grid .form-group:has(textarea) { grid-column: 1 / -1; }

/* Normalise the widgets Django renders inside these dialogs — the forms are
   plain ModelForms with no widget classes, so style by element. */
.modal-form-grid input[type="text"],
.modal-form-grid input[type="number"],
.modal-form-grid input[type="email"],
.modal-form-grid input[type="date"],
.modal-form-grid input[type="url"],
.modal-form-grid select,
.modal-form-grid textarea {
    width: 100%;
    padding: 0.5rem 0.65rem;
    font-family: inherit;
    font-size: var(--text-sm);
    color: var(--text-primary);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 6px);
    transition: border-color var(--transition-fast var(--dur-colour) var(--ease-out-editorial),
                ease) var(--dur-fade) var(--ease-out-editorial),
                box-shadow var(--transition-fast var(--dur-colour) var(--ease-out-editorial),
                ease) var(--dur-fade) var(--ease-out-editorial);
}
.modal-form-grid input:focus,
.modal-form-grid select:focus,
.modal-form-grid textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent);
}
.modal-form-grid textarea { min-height: 76px; resize: vertical; }
.modal-form-grid input[type="checkbox"] { accent-color: var(--primary); }

/* --- Document provenance badges ----------------------------------------- */
.doc-source {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: var(--font-medium);
    white-space: nowrap;
}
.doc-source i { font-size: 9px; }
.doc-source-applicant {
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary);
}
.doc-source-agent {
    background: color-mix(in srgb, var(--warning) 15%, transparent);
    color: var(--amber-hover);
}
.doc-source-staff {
    background: var(--bg-muted);
    color: var(--text-muted);
}

/* Conditions listed under their offer row. */
.offer-conditions-row > td {
    background: var(--bg-subtle);
    padding: var(--space-2) var(--space-4) var(--space-3);
}
.offer-conditions-row .condition-list li { border-bottom-color: var(--border-light); }

/* Wide tables scroll within their panel instead of pushing the page sideways. */
.table-scroll { max-width: 100%; overflow-x: auto; }

/* Portal-access cell on the Summary tab: status chip + the invite action sit
   on one line and wrap gracefully on narrow screens. */
.portal-access-cell {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

/* Inline "save outcome" controls in the interview list row. Page-specific
   sizing only -- the inputs still take their styling from .form-control. */
.interview-outcome-select { width: auto; min-width: 8rem; font-size: var(--text-xs); }
.interview-rating-input { width: 4rem; font-size: var(--text-xs); }


/* ----- Checklist tab: two lists, collapsible, with counts -----
   The tab used to render ~50 rows as one flat list with no totals, so there was
   no way to see how close an application was without reading every row. These
   are page-local classes; nothing here redefines a shared component. */
.checklist-section { margin-bottom: var(--space-6); }
.checklist-section:last-child { margin-bottom: 0; }

.checklist-section-title {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin: 0 0 var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--gray-200);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--gray-900);
}

.checklist-section-count,
.checklist-cat-count {
    margin-left: auto;
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--gray-500);
    white-space: nowrap;
}

/* Outstanding required work is the one thing that should catch the eye. */
.checklist-outstanding { color: var(--danger); font-weight: var(--font-semibold); }

.checklist-cat > summary {
    cursor: pointer;
    list-style: none;
    padding: var(--space-2) 0;
    /* Disclosure rows are tap targets; min-height, never min-width. */
    min-height: 32px;
}
.checklist-cat > summary::-webkit-details-marker { display: none; }
/* The disclosure marker was a Font Awesome caret drawn from a private-use
   codepoint, which vanished with the icon font. It is now a CSS triangle:
   a pure-decoration mark like this is the one case where drawing it in CSS
   beats reaching for an icon at all. */
.checklist-cat > summary::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-right: 6px;
    vertical-align: 1px;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 5px solid var(--ink-faint);
    transition: transform var(--dur-fade) var(--ease-out-editorial);
}
.checklist-cat[open] > summary::before { transform: rotate(90deg); }

.checklist-row-name {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.checklist-required {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--danger);
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* The document that satisfies the item, shown inline so nobody uploads a file
   that has already been supplied somewhere else. */
.checklist-doc {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-xs);
    color: var(--primary);
}

.checklist-row-actions {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    flex-wrap: wrap;
}
.checklist-row-actions .checklist-file { max-width: 170px; }
.checklist-row-actions .checklist-text { max-width: 220px; min-height: 32px; resize: vertical; }

/* The recorded written answer, shown inline the way an attached document is,
   so a text item reads as satisfied at a glance rather than only via status. */
.checklist-answer {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-xs);
    color: var(--gray-600);
    font-style: italic;
}
.checklist-answer i { color: var(--gray-400); font-style: normal; }

.checklist-filter { display: flex; gap: var(--space-1); }
.checklist-row.is-hidden,
.checklist-cat.is-hidden,
.checklist-section.is-hidden { display: none; }


/* ----- Checklist rail (application detail) -----
   Docked to the right so the checklist is reachable from any tab. Fixed
   position, so its DOM location cannot be trapped by an ancestor stacking
   context; z-index sits below the modal backdrop (1040) on purpose -- a dialog
   must still win over the rail. */
.chk-rail-toggle {
    position: fixed;
    right: 0;
    /* Clear of the banner for the same reason as the rail itself. */
    top: max(40vh, calc(var(--app-banner-h, 0px) + var(--space-4)));
    z-index: 1020;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    writing-mode: vertical-rl;
    padding: var(--space-3) var(--space-2);
    min-height: 44px;
    background: var(--primary);
    color: var(--white);
    border: 0;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    box-shadow: -2px 2px 8px rgba(16, 24, 40, .18);
    cursor: pointer;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    letter-spacing: .04em;
}
.chk-rail-toggle:hover { background: var(--primary-dark, var(--ink)); }
.chk-rail-toggle i { writing-mode: horizontal-tb; }

.chk-rail-badge {
    writing-mode: horizontal-tb;
    min-width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 10px;
    background: var(--danger);
    color: var(--white);
    font-size: .68rem;
    font-weight: 700;
}

.chk-rail[hidden] {
    /* Author display beats the UA's [hidden] rule, so without this the rail's
       display:flex made `hidden` a no-op -- the closed rail still painted and
       swallowed every click on the right edge, including its own toggle. */
    display: none;
}

.chk-rail {
    position: fixed;
    /* Start below the environment banner. The banner is position:fixed at
       z-index 9999 -- higher than this rail on purpose, since a "not
       production" warning must never be coverable -- so without the offset it
       simply painted over the rail's own heading. --app-banner-h is measured
       in JS because the banner wraps to two lines on narrow screens. */
    top: var(--app-banner-h, 0px);
    right: 0;
    height: calc(100vh - var(--app-banner-h, 0px));
    width: 400px;
    max-width: 92vw;
    z-index: 1030;
    display: flex;
    flex-direction: column;
    background: var(--white);
    border-left: 1px solid var(--gray-200);
    box-shadow: -8px 0 24px rgba(16, 24, 40, .12);
}

.chk-rail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--gray-200);
    flex-shrink: 0;
}
.chk-rail-title { margin: 0; font-size: var(--text-base); font-weight: var(--font-semibold); }
.chk-rail-close {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--gray-500);
    cursor: pointer;
}
.chk-rail-close:hover { background: var(--gray-100); color: var(--gray-800); }

.chk-rail-body { overflow-y: auto; padding: var(--space-4) var(--space-5); flex: 1; }

.chk-rail-section { margin-bottom: var(--space-5); }
.chk-rail-section-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
    margin: 0 0 var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--gray-900);
}
.chk-rail-count { font-size: var(--text-xs); font-weight: var(--font-medium); color: var(--gray-500); white-space: nowrap; }

.chk-rail-cat { margin-bottom: var(--space-2); }
.chk-rail-cat > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    min-height: 32px;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--primary);
}
.chk-rail-cat > summary::-webkit-details-marker { display: none; }

.chk-rail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-1) 0;
    border-bottom: 1px solid var(--gray-100);
    font-size: var(--text-xs);
}
.chk-rail-row:last-child { border-bottom: 0; }
.chk-rail-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--gray-700);
}
.chk-rail-name i { color: var(--primary); margin-right: 2px; }
.chk-rail-select {
    font-size: var(--text-xs);
    padding: 2px var(--space-1);
    min-height: 24px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--gray-700);
}

@media print { .chk-rail, .chk-rail-toggle { display: none; } }


/* ----- Application list: seven-column layout -----
   Was nine columns; Country and Assigned each carried one short value and
   pushed ASSIGNEE past the card edge (it rendered as "Mic/Ch"). Country now
   sits with the applicant, the assignee under the status. Widths are set so
   the two flexible columns (Applicant, Course) absorb the slack instead of
   every column stretching equally. */
.data-table .col-select { width: 44px; }
.data-table .col-date { width: 110px; white-space: nowrap; }
.data-table .col-actions { width: 148px; white-space: nowrap; }

/* Email and country on one line under the name: two short facts that used to
   cost two stacked rows plus a UUID nobody could read. */
.applicant-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    font-size: var(--text-xs);
    color: var(--gray-500);
}
.applicant-meta .applicant-email {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.applicant-country { flex-shrink: 0; white-space: nowrap; }

.course-cell { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.course-name { color: var(--gray-800); }
.course-cell .course-major { font-size: var(--text-xs); color: var(--gray-500); }

.status-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.status-assignee {
    font-size: var(--text-xs);
    color: var(--gray-500);
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.status-assignee.is-unassigned { color: var(--gray-400); font-style: italic; }

/* An agency name can be "Brilliant Migration Services (Liberty Migration &
   Education Services Pty Ltd)". Unclamped it wrapped to eight lines and set the
   height of the whole row, so a table of 25 applicants scrolled like 60. Two
   lines then ellipsis; the full name stays available on hover. */
.agent-cell { min-width: 0; }
.agent-cell-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--gray-800);
}
.agent-cell-counsellor {
    font-size: var(--text-xs);
    color: var(--gray-500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* table-layout:fixed, because with the default `auto` the browser sizes every
   column to its widest content and ignores these widths -- which is how a
   7-column table still measured 1282px inside a 1122px card and pushed ACTIONS
   out of sight. Fixed makes the percentages authoritative and lets the cells'
   own ellipsis rules do the trimming. */
.applications-table { table-layout: fixed; width: 100%; }
.applications-table td { overflow: hidden; }
/* Seven-column layout — the single source of truth for column widths.
   The two flexible columns (Applicant, Course) absorb the slack; Actions is
   held wide enough to show the View + Edit buttons in full. */
.applications-table th:nth-child(1),
.applications-table td:nth-child(1) { width: 44px; padding-left: 1rem; padding-right: 0; }   /* select */
.applications-table th:nth-child(2),
.applications-table td:nth-child(2) { width: 23%; }                                            /* applicant */
.applications-table th:nth-child(3),
.applications-table td:nth-child(3) { width: 17%; }                                            /* course */
.applications-table th:nth-child(4),
.applications-table td:nth-child(4) { width: 14%; }                                            /* agent */
.applications-table th:nth-child(5),
.applications-table td:nth-child(5) { width: 15%; }                                            /* status */
.applications-table th:nth-child(6),
.applications-table td:nth-child(6) { width: 122px; white-space: nowrap; }                     /* submitted */
.applications-table th:nth-child(7),
.applications-table td:nth-child(7) { width: 168px; padding-right: 0.75rem; }                  /* actions */

/* Keep the two action buttons on one line, right-aligned, never clipped. */
.applications-table td:nth-child(7) .row-actions { justify-content: flex-end; flex-wrap: nowrap; }
.applications-table .row-actions .btn { flex-shrink: 0; }

/* ----- Applications filter bar: nine controls in a tidy grid -----
   The shared .filter-form is flex-wrap, which left this many controls in
   ragged, uneven rows. A grid gives even columns and aligned rows; the search
   spans two so it reads as the primary field, and the actions sit on their own
   right-aligned row. */
.applications-filters .filter-form {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: var(--space-3) var(--space-4);
    align-items: end;
}
.applications-filters .filter-group {
    min-width: 0;
    max-width: none;
}
.applications-filters .filter-group:first-child {
    grid-column: span 2;   /* Search gets double width */
}
.applications-filters .filter-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
    margin-top: var(--space-1);
    padding-top: var(--space-3);
    /* --rule, not --gray-200 plus a dark-mode override. Sec 4.1: the token
       already inverts with the theme, so no component needs to branch on it
       -- and the override this replaces painted a literal slate outside the
       token contract, which is the other half of the same mistake. */
    border-top: 1px solid var(--rule);
}
@media (max-width: 640px) {
    .applications-filters .filter-group:first-child { grid-column: span 1; }
}

/* The applicant cell was inheriting the table's centre alignment, so names sat
   mid-column away from their avatars. */
.data-table td .applicant-cell { text-align: left; }

/* ===== Kanban: full-height lanes =====
   Every stage lane runs to the bottom of the screen like a proper board -
   an empty stage is a full quiet lane with a centred hint (and a live drop
   target), never a stub. The board row itself claims the viewport height
   and the flex cross-axis stretch makes every lane fill it. */
.kanban-board {
    min-height: calc(100vh - 250px);
    align-items: stretch;
}
.kanban-col {
    height: auto;
    min-height: calc(100vh - 280px);
    max-height: none;
}
.kanban-col.is-empty .kanban-col-body {
    display: flex;
    align-items: center;
    justify-content: center;
}
.kanban-col.is-empty:has(.kanban-card) .kanban-col-body {
    display: block;
}
.kanban-col.is-empty .kanban-empty {
    color: var(--gray-400);
}

/* Agency line on an opportunity card: who referred the applicant. */
.kanban-card-agency { display: flex; align-items: center; gap: .35rem; margin-top: .3rem; font-size: .72rem; min-width: 0; }
.kanban-card-agency-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* Composer: "Share with agent" tick box sits between the attach control and Send. */
.conv-composer-share { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; color: var(--text-muted); cursor: pointer; user-select: none; }
.conv-composer-share input { margin: 0; }
.conv-visibility { margin-left: auto; }
.conv-pane-agency { display: inline-flex; align-items: center; gap: .3rem; font-size: .76rem; color: var(--text-muted); }

/* Agent portal: the same thread bubbles inside a panel body. */
.agent-thread .conversation-thread { display: flex; flex-direction: column; gap: .6rem; max-height: 480px; overflow-y: auto; padding: .25rem 0; }
.agent-thread .conv-composer { margin-top: .9rem; }