/* SRGS shared components.
   Patterns referenced in docs/UI_UX_REVIEW.md §7. Each block is self-contained
   and uses tokens from tokens.css. */

/* ── Skip link ─────────────────────────────────────────────────── */
.skip-link {
    position: absolute;
    top: -100px;
    left: 1rem;
    z-index: 2000;
    padding: .6rem 1rem;
    border-radius: var(--srgs-radius-sm);
    background: var(--srgs-surface);
    color: var(--srgs-brand);
    font-weight: 600;
    box-shadow: var(--srgs-shadow-float);
}

.skip-link:focus { top: 1rem; }

main:focus { outline: none; }

/* ── Focus ring (global) ───────────────────────────────────────── */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid rgba(var(--srgs-brand-rgb), .55);
    outline-offset: 2px;
}

/* ── Modal + toast ─────────────────────────────────────────────── */
.app-modal__header {
    border-bottom: 1px solid var(--srgs-line-soft);
    background: var(--srgs-surface);
}

.app-modal__header .modal-title { font-size: 1.05rem; font-weight: 600; }

.app-toast-region { z-index: 1090; }

.app-toast {
    min-width: 280px;
    max-width: 380px;
    border: 1px solid var(--srgs-line);
    border-left-width: 4px;
    border-radius: var(--srgs-radius-sm);
    background: var(--srgs-surface);
    box-shadow: var(--srgs-shadow-float);
    font-size: var(--fs-md);
}

.app-toast--success { border-left-color: var(--srgs-success); }
.app-toast--info { border-left-color: var(--srgs-brand); }
.app-toast--warning { border-left-color: var(--srgs-warning); }
.app-toast--danger { border-left-color: var(--srgs-danger); }

/* ── Alerts: calmer, token-driven ──────────────────────────────── */
.srgs-app .alert {
    border-radius: var(--srgs-radius-sm);
    font-size: var(--fs-md);
}

.srgs-app .alert-warning { --bs-alert-bg: var(--srgs-warning-soft); --bs-alert-border-color: var(--srgs-warning-line); --bs-alert-color: #6B4200; }
.srgs-app .alert-danger { --bs-alert-bg: var(--srgs-danger-soft); --bs-alert-border-color: var(--srgs-danger-line); --bs-alert-color: #7F1414; }
.srgs-app .alert-success { --bs-alert-bg: var(--srgs-success-soft); --bs-alert-border-color: #B7E1C6; --bs-alert-color: #0F5A2B; }
.srgs-app .alert-info,
.srgs-app .alert-primary { --bs-alert-bg: var(--srgs-info-soft); --bs-alert-border-color: var(--srgs-brand-line); --bs-alert-color: #0E3677; }

/* ── Page header actions row ───────────────────────────────────── */
.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem 1rem;
    margin-bottom: 1.25rem;
}

.page-header h1 { margin-bottom: .25rem !important; }
.page-header__subtitle { margin: 0; color: var(--srgs-text-muted); max-width: 72ch; }
.page-header__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

.page-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.25rem;
    margin: 0 0 1.25rem;
    padding: 0;
    color: var(--srgs-text-muted);
    font-size: var(--fs-md);
}

.page-meta dt { display: inline; font-weight: 500; }
.page-meta dd { display: inline; margin: 0 0 0 .25rem; color: var(--srgs-text); font-weight: 600; }

/* ── Attention panel ───────────────────────────────────────────── */
.attention-panel {
    margin-bottom: 1.25rem;
    border: 1px solid var(--srgs-line);
    border-radius: var(--srgs-radius);
    background: var(--srgs-surface);
}

.attention-panel__title {
    margin: 0;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--srgs-line-soft);
    font-size: 1rem;
    font-weight: 600;
}

.attention-panel__list { list-style: none; margin: 0; padding: 0; }

.attention-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    padding: .7rem 1rem;
    border-top: 1px solid var(--srgs-line-soft);
}

.attention-item:first-child { border-top: 0; }
.attention-item__icon { width: 1.25rem; text-align: center; flex-shrink: 0; }
.attention-item__body { flex: 1 1 20rem; min-width: 0; }
.attention-item__text { font-weight: 500; }
.attention-item__detail { display: block; color: var(--srgs-text-muted); font-size: var(--fs-sm); }
.attention-item__action { margin-left: auto; white-space: nowrap; }

.attention-item--critical .attention-item__icon { color: var(--srgs-danger); }
.attention-item--warning .attention-item__icon { color: var(--srgs-warning); }
.attention-item--info .attention-item__icon { color: var(--srgs-brand); }

/* ── Stat cards ────────────────────────────────────────────────── */
.stat-card {
    display: flex;
    align-items: center;
    gap: .9rem;
    height: 100%;
    padding: 1rem 1.1rem;
    border: 1px solid var(--srgs-line);
    border-radius: var(--srgs-radius);
    background: var(--srgs-surface);
    color: var(--srgs-text);
    text-decoration: none;
}

a.stat-card:hover,
a.stat-card:focus-visible {
    border-color: var(--srgs-brand-line);
    background: #FBFCFF;
    color: var(--srgs-text);
}

.stat-card__icon {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--srgs-brand-soft);
    color: var(--srgs-brand);
}

.stat-card__value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.stat-card__label { display: block; color: var(--srgs-text-muted); font-size: var(--fs-sm); }

.stat-card--attention { border-color: var(--srgs-warning-line); background: #FFFCF3; }
.stat-card--attention .stat-card__icon { background: var(--srgs-warning-soft); color: var(--srgs-warning); }
.stat-card--attention .stat-card__value { color: #7A4A00; }

.stat-card--critical { border-color: var(--srgs-danger-line); background: #FFF8F8; }
.stat-card--critical .stat-card__icon { background: var(--srgs-danger-soft); color: var(--srgs-danger); }
.stat-card--critical .stat-card__value { color: var(--srgs-danger); }

.stat-group-title {
    margin: 1.5rem 0 .6rem;
    font-size: 1rem;
    font-weight: 600;
}

/* ── Status badge ──────────────────────────────────────────────── */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .5rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

.status-badge--success { border-color: #B7E1C6; background: var(--srgs-success-soft); color: #0F5A2B; }
.status-badge--progress { border-color: var(--srgs-brand-line); background: var(--srgs-brand-soft); color: #0E3677; }
.status-badge--attention { border-color: var(--srgs-warning-line); background: var(--srgs-warning-soft); color: #6B4200; }
.status-badge--danger { border-color: var(--srgs-danger-line); background: var(--srgs-danger-soft); color: #7F1414; }
.status-badge--neutral { border-color: var(--srgs-line); background: #F1F4F9; color: #3A4A63; }

/* ── Empty state ───────────────────────────────────────────────── */
.empty-state {
    padding: 2.5rem 1rem;
    text-align: center;
}

.empty-state__icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    margin: 0 auto .9rem;
    border-radius: 50%;
    background: var(--srgs-brand-soft);
    color: var(--srgs-brand);
    font-size: 1.15rem;
}

.empty-state__title { margin-bottom: .35rem; font-size: 1.05rem; font-weight: 600; }
.empty-state__text { max-width: 46ch; margin: 0 auto 1rem; color: var(--srgs-text-muted); }

/* ── Row actions ───────────────────────────────────────────────── */
.row-actions {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    white-space: nowrap;
}

.row-actions .btn-icon {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
}

.row-actions .dropdown-menu { min-width: 12rem; font-size: var(--fs-md); }
.row-actions .dropdown-item.text-danger:hover,
.row-actions .dropdown-item.text-danger:focus { background: var(--srgs-danger-soft); }
.row-actions form { margin: 0; }

/* ── Filter bar ────────────────────────────────────────────────── */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .75rem;
    margin-bottom: 1rem;
    padding: .9rem 1rem;
    border: 1px solid var(--srgs-line);
    border-radius: var(--srgs-radius);
    background: var(--srgs-surface);
}

.filter-bar__field { display: flex; flex-direction: column; gap: .25rem; min-width: 10rem; flex: 1 1 12rem; }
.filter-bar__field--wide { flex: 2 1 18rem; }
.filter-bar__field .form-label { margin: 0; font-size: var(--fs-sm); font-weight: 600; }
.filter-bar__actions { display: flex; align-items: center; gap: .5rem; }
.filter-bar__count { margin-left: auto; color: var(--srgs-text-muted); font-size: var(--fs-sm); align-self: center; }

/* ── Sticky action bar ─────────────────────────────────────────── */
.sticky-action-bar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem 1rem;
    padding: .75rem 1rem;
    border-top: 1px solid var(--srgs-line);
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 -6px 18px rgba(10, 30, 74, .08);
}

.sticky-action-bar__status { flex: 1 1 16rem; min-width: 0; font-size: var(--fs-md); }
.sticky-action-bar__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-left: auto; }
.sticky-action-bar__hint { color: var(--srgs-text-muted); font-size: var(--fs-sm); }

/* ── Forms: required marker and validation summary ─────────────── */
.required-marker { margin-left: .15rem; color: var(--srgs-danger); font-weight: 700; }

.srgs-app .validation-summary-errors,
.validation-summary-panel.validation-summary-errors {
    margin-bottom: 1rem;
    padding: .85rem 1rem .85rem 1rem;
    border: 1px solid var(--srgs-danger-line);
    border-left: 4px solid var(--srgs-danger);
    border-radius: var(--srgs-radius-sm);
    background: var(--srgs-danger-soft);
    color: #7F1414;
    font-size: var(--fs-md);
}

.srgs-app .validation-summary-errors::before {
    content: "Fix the following to continue";
    display: block;
    margin-bottom: .35rem;
    font-weight: 600;
}

.srgs-app .validation-summary-errors ul { margin: 0; padding-left: 1.2rem; }
.srgs-app .validation-summary-valid { display: none; }

.srgs-app .input-validation-error,
.srgs-app .form-control[aria-invalid="true"],
.srgs-app .form-select[aria-invalid="true"] {
    border-color: var(--srgs-danger) !important;
}

/* ── Progress panel (long-running jobs) ────────────────────────── */
.progress-panel {
    margin-top: 1.25rem;
    padding: 1rem;
    border: 1px solid var(--srgs-line);
    border-radius: var(--srgs-radius);
    background: var(--srgs-surface-muted);
}

.progress-panel .progress { height: 12px; border-radius: 999px; }

/* ── Result panels ─────────────────────────────────────────────── */
.result-panel {
    margin-top: 1.25rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--srgs-line);
    border-left-width: 4px;
    border-radius: var(--srgs-radius-sm);
    background: var(--srgs-surface);
}

.result-panel--success { border-left-color: var(--srgs-success); }
.result-panel--blocked { border-left-color: var(--srgs-danger); }
.result-panel__title { margin-bottom: .35rem; font-size: 1.05rem; font-weight: 600; }

/* ── Sticky learner column for wide grids ──────────────────────── */
.sticky-col {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--srgs-surface);
    box-shadow: 1px 0 0 var(--srgs-line);
}

thead .sticky-col { z-index: 4; background: var(--srgs-surface-muted); }

/* ── Mark sheet cells ──────────────────────────────────────────── */
.marks-input.is-out-of-range {
    border-color: var(--srgs-danger) !important;
    background-color: var(--srgs-danger-soft);
}

@media (max-width: 767.98px) {
    .page-header__actions { width: 100%; }
    .filter-bar { padding: .75rem; }
    .filter-bar__field { min-width: 100%; }
    .filter-bar__count { margin-left: 0; }
    .sticky-action-bar { padding: .65rem .75rem; }
    .sticky-action-bar__actions { width: 100%; }
    .sticky-action-bar__actions .btn { flex: 1 1 auto; }
    .toast-container.app-toast-region { left: 0; right: 0; padding: .75rem !important; }
    .app-toast { max-width: none; width: 100%; }
}

@media print {
    .skip-link,
    .sticky-action-bar,
    .app-toast-region,
    .no-print,
    .app-sidebar,
    .app-navbar,
    .app-footer { display: none !important; }
}

/* ── O-Level mark sheet: keep # and learner visible while scrolling ── */
#marksTable .marks-col-index { left: 0; width: 36px; min-width: 36px; }
#marksTable .marks-col-learner { left: 36px; }
#marksEntryPanel.mode-phone #marksTable .marks-col-learner { left: 0; }
#marksTable tbody tr:hover > .sticky-col { background: #F3F7FD; }
#marksTable thead th { vertical-align: bottom; }

/* ── Surfaces: one elevation rule for resting cards ─────────────── */
.srgs-app .card.shadow,
.srgs-app .card.shadow-sm,
.srgs-app .card.shadow-lg { box-shadow: none !important; }
.srgs-app .card.border-0 { border: 1px solid var(--srgs-line) !important; }
.srgs-app .card-header.bg-white,
.srgs-app .card-header.bg-light { background: var(--srgs-surface) !important; }
.srgs-app .card-header h5,
.srgs-app .card-header .h5 { font-size: 1rem; font-weight: 600; }

/* ── Dashboard ─────────────────────────────────────────────────── */
.dashboard-counts {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.5rem;
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
    color: var(--srgs-text-muted);
    font-size: var(--fs-md);
}

.dashboard-counts .num { color: var(--srgs-text); font-weight: 700; margin-right: .2rem; }

.dashboard-rejections { border-left: 4px solid var(--srgs-danger) !important; }

.dashboard-tabs .nav-link { color: var(--srgs-text-muted); font-weight: 500; }
.dashboard-tabs .nav-link.active { color: var(--srgs-ink); font-weight: 600; }

.chart-key { display: inline-block; width: .75rem; height: .75rem; margin-right: .3rem; border-radius: 2px; vertical-align: -1px; }
.chart-key--submitted { background: #15803D; }
.chart-key--pending { background: #F5AA18; }

/* ── Host portal: shared patterns ──────────────────────────────── */
.host-table-scroll { overflow-x: auto; }
.row-actions .btn { white-space: nowrap; }
.row-actions .dropdown-item { display: flex; align-items: center; gap: .5rem; }
.row-actions .dropdown-item.disabled { opacity: .55; pointer-events: auto; cursor: not-allowed; }
.row-actions .dropdown-header { font-size: var(--fs-sm); color: var(--srgs-text-muted); }
.row-actions form.dropdown-form { display: block; }
.row-actions form.dropdown-form > button { width: 100%; text-align: left; background: none; border: 0; }

/* Key/value detail lists used in view drawers */
.detail-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .75rem 1.5rem; margin: 0; }
.detail-list > div { min-width: 0; }
.detail-list dt { font-size: var(--fs-sm); font-weight: 600; color: var(--srgs-text-muted); margin: 0; }
.detail-list dd { margin: 0; overflow-wrap: anywhere; }

/* Tenant hub + sticky action bar */
.hub-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.hub-summary__item { padding: .65rem .85rem; border: 1px solid var(--srgs-border, #dbe3ec); border-radius: .5rem; background: #fff; }
.hub-summary__label { display: block; font-size: var(--fs-sm); color: var(--srgs-text-muted); }
.hub-summary__value { font-weight: 600; font-size: 1.05rem; }
.sticky-actions { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .75rem 0; background: linear-gradient(to top, #fff 80%, rgba(255,255,255,0)); }
.link-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .75rem; margin-bottom: 1.25rem; }
.link-tile { display: flex; gap: .75rem; align-items: flex-start; padding: .85rem 1rem; border: 1px solid var(--srgs-border, #dbe3ec); border-radius: .5rem; background: #fff; color: inherit; text-decoration: none; }
.link-tile:hover, .link-tile:focus-visible { border-color: var(--srgs-brand-line, #93b4f0); background: #f8fbff; color: inherit; }
.link-tile i { margin-top: .2rem; color: var(--srgs-brand, #1d4ed8); }
.link-tile__title { display: block; font-weight: 600; }
.link-tile__text { display: block; font-size: var(--fs-sm); color: var(--srgs-text-muted); }