/* Golisano Institute — Minerva Web App
   Brand colors and typography via CSS custom properties.
   Swap font families here when licensed web fonts are available. */

:root {
    /* Primary palette */
    --color-blue: #004B8D;
    --color-deep-navy: #061A28;
    --color-light-blue: #CAE9FC;
    --color-off-white: #F2F9FC;

    /* Secondary palette */
    --color-green: #206A5D;
    --color-light-green: #CFE8E3;
    --color-gold: #EAB234;
    --color-light-gold: #FDF0E0;
    --color-cool-gray: #8D8F96;

    /* Typography — mockup-aligned. Libre Baskerville for headings, Raleway for UI/body. */
    --font-heading: 'Libre Baskerville', Georgia, serif;
    --font-body: 'Raleway', system-ui, -apple-system, sans-serif;
    --font-ui: 'Raleway', system-ui, -apple-system, sans-serif;

    /* App-shell scaffolding */
    --shell-topbar-h: 56px;
    --shell-sidebar-w: 240px;

    /* Neutral surface tokens used by the new shell. Brand --color-* unchanged. */
    --paper: #FAFAF8;
    --line: #E8E8E5;
    --line-soft: #F0F0EC;
    --slate: #6B6B6B;
    --misty: #B8B8B8;
    --forest: #2D2D2D;

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;

    /* Semantic palette — five slots that the rest of the UI layers on top of.
       Defaults match the existing brand tints; users override via a per-user
       <style> block injected by base.html (see app/preferences.py). */
    --palette-good-bg:    var(--color-light-green);
    --palette-good-text:  var(--color-green);
    --palette-neutral-bg: var(--color-light-gold);
    --palette-neutral-text: #8a5a00;
    --palette-bad-bg:     #FDECEA;
    --palette-bad-text:   #C0392B;
    --palette-info-bg:    var(--color-light-blue);
    --palette-info-text:  var(--color-blue);
    --palette-muted-bg:   #E5E7EA;
    --palette-muted-text: var(--color-cool-gray);
}

/* ============================================================
   RESET & BASE
   ============================================================ */

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

body {
    font-family: var(--font-body);
    color: var(--color-deep-navy);
    background-color: var(--color-off-white);
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
}

a {
    color: var(--color-blue);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ============================================================
   NAVBAR
   ============================================================ */

.navbar {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    background-color: var(--color-blue);
    color: white;
    padding: var(--space-sm) var(--space-xl);
    font-family: var(--font-heading);
    font-size: 0.9rem;
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.navbar-brand a {
    color: white;
    text-decoration: none;
}

.navbar-brand a:hover {
    text-decoration: none;
}

.navbar-title {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.navbar-menu {
    display: flex;
    gap: var(--space-md);
}

.navbar-end {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.nav-link {
    color: rgba(255, 255, 255, 0.85);
    padding: var(--space-xs) var(--space-sm);
    border-radius: 4px;
    transition: background-color 0.15s;
}

.nav-link:hover, .nav-link.active {
    color: white;
    background-color: rgba(255, 255, 255, 0.15);
    text-decoration: none;
}

.nav-link-dimmed {
    opacity: 0.4;
    cursor: default;
}

.nav-link-dimmed:hover {
    background-color: transparent;
    color: rgba(255, 255, 255, 0.85);
}

.logout-link {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
}

.user-info {
    font-size: 0.85rem;
    opacity: 0.9;
}

.role-badge {
    font-size: 0.75rem;
    background-color: rgba(255, 255, 255, 0.2);
    padding: 2px 8px;
    border-radius: 10px;
}

/* ============================================================
   LOCATION SELECTOR & BADGES
   ============================================================ */

.location-selector {
    display: flex;
    gap: var(--space-xs);
}

.location-toggle {
    cursor: pointer;
}

.location-toggle input {
    display: none;
}

.location-label {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    background-color: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.15s;
}

.location-toggle input:checked + .location-label {
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--color-blue);
}

.location-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    background-color: rgba(255, 255, 255, 0.2);
}

.location-badge.small {
    background-color: var(--color-light-blue);
    color: var(--color-blue);
    font-size: 0.7rem;
    padding: 1px 8px;
}

/* ============================================================
   CONTENT & PAGE LAYOUT
   ============================================================ */

.content {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-xl);
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-lg);
}

.page-header h1 {
    font-size: 1.5rem;
    color: var(--color-blue);
}

/* ============================================================
   FILTERS
   ============================================================ */

.filter-form {
    display: flex;
    gap: var(--space-sm);
}

.filter-form select {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--color-cool-gray);
    border-radius: 4px;
    background-color: white;
    color: var(--color-deep-navy);
}

/* ============================================================
   DATA TABLE
   ============================================================ */

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

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.data-table thead {
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-cool-gray);
}

.data-table th {
    padding: var(--space-sm) var(--space-md);
    text-align: left;
    border-bottom: 2px solid var(--color-light-blue);
}

.data-table td {
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid #e8eef3;
}

.data-table tbody tr:hover {
    background-color: var(--color-light-blue);
}

.name-cell {
    font-weight: 600;
    font-family: var(--font-heading);
}

.legal-name {
    font-weight: 400;
    color: var(--color-cool-gray);
    font-size: 0.8rem;
}

.cell-warn {
    color: #c0392b;
    font-weight: 600;
}

/* ============================================================
   STATUS BADGES
   ============================================================ */

.status-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 600;
}

.status-active {
    background-color: var(--palette-good-bg);
    color: var(--palette-good-text);
}

.status-loa, .status-withdrawn {
    background-color: var(--palette-neutral-bg);
    color: var(--palette-neutral-text);
}

.status-graduated {
    background-color: var(--palette-info-bg);
    color: var(--palette-info-text);
}

.status-unknown {
    background-color: var(--palette-bad-bg);
    color: var(--palette-bad-text);
}

.count-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 600;
}

.count-pill-good {
    background-color: var(--palette-good-bg);
    color: var(--palette-good-text);
}

.count-pill-caution {
    background-color: var(--palette-neutral-bg);
    color: var(--palette-neutral-text);
}

.count-pill-warn {
    background-color: var(--palette-bad-bg);
    color: var(--palette-bad-text);
}

/* ============================================================
   DASHBOARD
   ============================================================ */

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
}

@media (max-width: 640px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
}

.dashboard-card {
    display: block;
    background-color: white;
    padding: var(--space-xl) var(--space-xl) var(--space-lg);
    border-radius: 8px;
    border: 1px solid #e0e8ef;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    text-decoration: none;
    transition: background-color 0.15s, box-shadow 0.15s, border-color 0.15s;
    cursor: pointer;
}

.dashboard-card:hover {
    background-color: var(--color-light-blue);
    border-color: var(--color-blue);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    text-decoration: none;
}

.dashboard-card h2 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    color: var(--color-blue);
    margin-bottom: var(--space-sm);
}

.dashboard-card p {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--color-cool-gray);
    line-height: 1.4;
    margin: 0;
}

/* ============================================================
   MISC
   ============================================================ */

.record-count {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    color: var(--color-cool-gray);
    margin-top: var(--space-sm);
}

.empty-state {
    text-align: center;
    padding: var(--space-xl) * 3;
    color: var(--color-cool-gray);
}

/* ============================================================
   LOGIN PAGE
   ============================================================ */

.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-color: var(--color-deep-navy);
}

.login-container {
    text-align: center;
}

.login-card {
    background-color: white;
    padding: var(--space-xl) calc(var(--space-xl) * 2);
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}

.login-title {
    font-family: var(--font-heading);
    font-size: 2rem;
    color: var(--color-blue);
    margin-bottom: var(--space-xs);
}

.login-subtitle {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-deep-navy);
    margin-bottom: var(--space-xl);
}

.login-notice {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    color: var(--color-cool-gray);
    line-height: 1.5;
    margin-bottom: var(--space-lg);
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}

.login-button {
    display: inline-block;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.9rem;
    padding: var(--space-sm) var(--space-lg);
    background-color: var(--color-blue);
    color: white;
    border-radius: 4px;
    transition: background-color 0.15s;
}

.login-button:hover {
    background-color: var(--color-deep-navy);
    text-decoration: none;
}

.error-message {
    color: #c0392b;
    margin-bottom: var(--space-lg);
}

/* ============================================================
   ADMIN PAGE
   ============================================================ */

.admin-section {
    margin-bottom: var(--space-xl);
}

.admin-section h2 {
    font-size: 1.25rem;
    color: var(--color-deep-navy);
    margin-bottom: var(--space-xs);
}

.section-description {
    font-size: 0.9rem;
    color: var(--color-cool-gray);
    margin-bottom: var(--space-lg);
}

.admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-lg);
}

.admin-card {
    background-color: white;
    padding: var(--space-lg);
    border-radius: 8px;
    border: 1px solid #e0e8ef;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.admin-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-sm);
}

.admin-card h3 {
    font-size: 1.1rem;
    color: var(--color-blue);
    margin-bottom: var(--space-xs);
}

.admin-card p {
    font-size: 0.85rem;
    color: var(--color-cool-gray);
    margin-bottom: var(--space-md);
    line-height: 1.4;
}

.admin-card-subform {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid #e0e8ef;
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--space-sm);
}

.admin-card-subform label {
    display: flex;
    flex-direction: column;
    font-size: 0.75rem;
    color: var(--color-cool-gray);
    gap: 2px;
}

.admin-card-subform input[type="date"],
.admin-card-subform select {
    font-size: 0.85rem;
    padding: 4px 6px;
    border: 1px solid #c8d2db;
    border-radius: 4px;
    background: white;
}

.status-disconnected {
    background-color: var(--palette-neutral-bg);
    color: var(--palette-neutral-text);
}

.job-status {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 600;
}

.job-status-started {
    background-color: var(--palette-good-bg);
    color: var(--palette-good-text);
}

.job-status-skipped {
    background-color: var(--palette-neutral-bg);
    color: var(--palette-neutral-text);
}

.job-status-failed {
    background-color: var(--palette-bad-bg);
    color: var(--palette-bad-text);
}

.connected-by {
    font-weight: 600;
    margin-bottom: var(--space-xs);
}

.connected-by-note {
    font-size: 0.8rem;
    font-style: italic;
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
    display: inline-block;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.85rem;
    line-height: 1.4;
    padding: var(--space-xs) var(--space-md);
    border-radius: 4px;
    /* Transparent 1px border so filled and outlined variants line up vertically;
       outlined variants override the color, filled variants keep it transparent. */
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn:hover {
    text-decoration: none;
}

.btn-primary {
    background-color: var(--color-blue);
    color: white;
}

.btn-primary:hover {
    background-color: var(--color-deep-navy);
    color: white;
}

/* Outlined — clearly actionable but secondary to .btn-primary. Gray-filled
   buttons read as disabled, so secondary actions get a white background
   with a brand-blue border + text instead. */
.btn-secondary {
    background-color: white;
    color: var(--color-blue);
    border: 1px solid var(--color-blue);
}

.btn-secondary:hover {
    background-color: var(--color-light-blue);
    color: var(--color-deep-navy);
}

/* Destructive / undo. Used for actions that throw away work the user did. */
.btn-danger {
    background-color: white;
    color: #C0392B;
    border: 1px solid #C0392B;
}

.btn-danger:hover {
    background-color: #FDECEA;
    color: #962617;
}

.btn-group {
    display: flex;
    gap: var(--space-sm);
}

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

.alert {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    padding: var(--space-sm) var(--space-md);
    border-radius: 4px;
    margin-bottom: var(--space-lg);
}

.alert-success {
    background-color: var(--palette-good-bg);
    color: var(--palette-good-text);
}

.alert-error {
    background-color: var(--palette-bad-bg);
    color: var(--palette-bad-text);
}

.alert-warning {
    background-color: var(--palette-neutral-bg);
    color: var(--palette-neutral-text);
}

/* ============================================================
   ETL FLAGS
   ============================================================ */

.flag-summary {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
}

.severity-badge {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 2px 8px;
    border-radius: 4px;
}

.severity-error {
    background-color: var(--palette-bad-bg);
    color: var(--palette-bad-text);
}

.severity-warning {
    background-color: var(--palette-neutral-bg);
    color: var(--palette-neutral-text);
}

.flag-status {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: capitalize;
}

.flag-status-open {
    background-color: var(--palette-info-bg);
    color: var(--palette-info-text);
}

.flag-status-resolved {
    background-color: var(--palette-good-bg);
    color: var(--palette-good-text);
}

.flag-status-ignored {
    background-color: var(--palette-muted-bg);
    color: var(--palette-muted-text);
}

.flag-filter {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
    font-family: var(--font-heading);
    font-size: 0.9rem;
}

.flag-filter select {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    padding: 4px 8px;
    border: 1px solid #d0d8e0;
    border-radius: 4px;
    background-color: white;
}

.flag-count {
    color: var(--color-cool-gray);
    font-size: 0.85rem;
}

.flags-table {
    width: 100%;
    border-collapse: collapse;
    background-color: white;
    font-size: 0.85rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    overflow: hidden;
}

.flags-table th {
    background-color: var(--color-off-white);
    font-family: var(--font-heading);
    font-weight: 600;
    text-align: left;
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid #e0e8ef;
    white-space: nowrap;
}

.flags-table td {
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid #eef2f5;
    vertical-align: top;
}

.flags-table tr:last-child td {
    border-bottom: none;
}

.flags-table td.mono,
.flags-table td.timestamp {
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.8rem;
    white-space: nowrap;
}

.muted {
    color: var(--color-cool-gray);
}

.btn-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--color-blue);
    font-family: var(--font-heading);
    font-size: 0.85rem;
    cursor: pointer;
}

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

.payload-dialog {
    /* Explicit centering — replaces the default dialog margin:auto
       which fights with our fixed width/height. JS drag handler below
       switches to pure left/top on mousedown. */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;

    width: 720px;
    height: 540px;
    min-width: 360px;
    min-height: 240px;
    max-width: 95vw;
    max-height: 90vh;
    padding: 0;
    border: 1px solid #d0d8e0;
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    background-color: white;
    resize: both;
    overflow: hidden;
    font-family: var(--font-body);
    color: var(--color-deep-navy);
}

.payload-dialog-header button {
    cursor: pointer;
}

.payload-dialog::backdrop {
    background-color: rgba(6, 26, 40, 0.45);
}

.payload-dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid #e0e8ef;
    background-color: var(--color-off-white);
    cursor: move;
    user-select: none;
}

.payload-dialog-header h3 {
    font-family: var(--font-heading);
    font-size: 1rem;
    margin: 0;
}

.payload-dialog-header form {
    margin: 0;
}

.btn-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: var(--color-cool-gray);
    padding: 0;
    width: 28px;
    height: 28px;
    border-radius: 4px;
}

.btn-close:hover {
    background-color: #e5e7eb;
    color: var(--color-deep-navy);
}

/* The <pre> takes the remaining dialog height and scrolls inside. */
.payload-dialog .payload-json {
    margin: 0;
    height: calc(100% - 49px); /* header height */
    max-width: none;
    max-height: none;
    border: none;
    border-radius: 0;
}

.payload-json {
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.8rem;
    background-color: var(--color-off-white);
    border: 1px solid #e0e8ef;
    border-radius: 4px;
    padding: var(--space-md);
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

.empty-state {
    font-family: var(--font-heading);
    color: var(--color-cool-gray);
    text-align: center;
    padding: var(--space-xl);
}

/* ============================================================
   ADMIN STATUS BAR (sticky, always visible)
   ============================================================ */

.admin-status-bar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
    padding: var(--space-sm) 0;
    margin-bottom: var(--space-md);
    background-color: var(--color-off-white);
    border-bottom: 1px solid #e0e8ef;
}

.admin-chip {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-sm);
    background-color: white;
    border: 1px solid #e0e8ef;
    border-left: 4px solid var(--color-cool-gray);
    padding: var(--space-xs) var(--space-md);
    border-radius: 4px;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    color: var(--color-deep-navy);
    text-decoration: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.admin-chip:hover {
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.admin-chip-fresh { border-left-color: var(--color-green); }
.admin-chip-expired { border-left-color: var(--color-gold); }
.admin-chip-disconnected { border-left-color: var(--color-cool-gray); }

.admin-chip-label {
    font-weight: 700;
}

.admin-chip-status {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--color-cool-gray);
}

.admin-chip-fresh .admin-chip-status { color: var(--color-green); }
.admin-chip-expired .admin-chip-status { color: #b8860b; }

.admin-chip-meta {
    font-size: 0.75rem;
    color: var(--color-cool-gray);
    font-style: italic;
}

/* ============================================================
   ADMIN TABS
   ============================================================ */

.admin-tabs {
    display: flex;
    gap: var(--space-xs);
    border-bottom: 2px solid #e0e8ef;
    margin-bottom: var(--space-lg);
}

.admin-tab {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-cool-gray);
    padding: var(--space-sm) var(--space-md);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
}

.admin-tab:hover {
    color: var(--color-deep-navy);
    text-decoration: none;
}

.admin-tab.active {
    color: var(--color-blue);
    border-bottom-color: var(--color-blue);
}

.admin-footer-link {
    margin-top: var(--space-lg);
    font-family: var(--font-heading);
    font-size: 0.9rem;
}

/* ============================================================
   JOB STATUS (polling states)
   ============================================================ */

.job-status-running {
    background-color: var(--color-light-blue);
    color: var(--color-blue);
}

.job-status-succeeded {
    background-color: var(--color-light-green);
    color: var(--color-green);
}

.job-status-unknown {
    background-color: #eee;
    color: var(--color-cool-gray);
}

/* ============================================================
   HTMX LOADING STATES
   ============================================================ */

/* htmx toggles the `htmx-request` class on the element referenced by
   hx-indicator while a request is in flight. Combined with
   hx-disabled-elt="this", buttons visually go busy and become
   non-interactive until the response lands. */
.btn.htmx-request {
    opacity: 0.65;
    cursor: wait;
    pointer-events: none;
    position: relative;
}

.btn.htmx-request::after {
    content: "";
    display: inline-block;
    width: 0.75em;
    height: 0.75em;
    margin-left: 0.5em;
    vertical-align: -0.1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: minerva-spin 0.6s linear infinite;
}

@keyframes minerva-spin {
    to { transform: rotate(360deg); }
}

/* Info alert — paired with .alert base style */
.alert-info {
    background-color: var(--color-light-blue);
    color: var(--color-blue);
}

/* ============================================================
   ATTENDANCE — date picker, tile grid, take page, chip layout
   ============================================================ */

.attendance-date-form {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
    font-family: var(--font-heading);
}
.attendance-date-form .hint {
    color: var(--color-cool-gray);
    font-size: 0.875rem;
}

.attendance-tile-heading {
    color: var(--color-blue);
    font-family: var(--font-heading);
    margin-bottom: var(--space-xs);
}
.attendance-tile-meta {
    color: var(--color-cool-gray);
    font-family: var(--font-heading);
    font-size: 0.875rem;
}
.attendance-tile-status {
    display: flex;
    justify-content: center;
    margin-top: var(--space-md);
}
.status-action {
    background-color: #FDECEA;
    color: #C0392B;
}

.back-link {
    display: inline-block;
    margin-bottom: var(--space-sm);
    color: var(--color-blue);
    font-family: var(--font-heading);
    font-size: 0.875rem;
    text-decoration: none;
}
.back-link:hover { text-decoration: underline; }

.page-header-meta {
    color: var(--color-cool-gray);
    font-family: var(--font-heading);
    font-size: 0.95rem;
}

/* Banner ---------------------------------------------------- */

.attendance-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    border-radius: 6px;
    margin-bottom: var(--space-lg);
    background-color: var(--color-off-white);
    border: 1px solid var(--color-light-blue);
    font-family: var(--font-heading);
}
.attendance-banner-failed {
    border-color: #C0392B;
    background-color: #FDECEA;
}
.attendance-banner-text { flex: 1 1 auto; color: var(--color-deep-navy); }
.push-pill {
    display: inline-block;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    background-color: var(--color-cool-gray);
    color: white;
}
.push-pill-verified { background-color: var(--color-green); }
.push-pill-pushed   { background-color: var(--color-blue); }
.push-pill-pending  { background-color: var(--color-gold); color: var(--color-deep-navy); }
.push-pill-failed   { background-color: #C0392B; }
.push-error {
    flex: 1 1 100%;
    color: #C0392B;
    font-size: 0.85rem;
    margin: 0;
}

/* Toolbar + view toggle ------------------------------------ */

.attendance-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}
.attendance-toolbar-end {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}
.view-toggle {
    display: inline-flex;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--color-blue);
}
.view-toggle-btn {
    border-radius: 0;
    /* Reset the .btn-secondary border so segments share a single divider
       between them rather than each carrying its own outline. */
    border: none;
    border-right: 1px solid var(--color-cool-gray);
    background-color: white;
    color: var(--color-blue);
}
.view-toggle-btn:last-child { border-right: none; }
.view-toggle-btn.active {
    background-color: var(--color-blue);
    color: white;
}

/* List view ------------------------------------------------- */

.attendance-list {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-heading);
}
.attendance-list th,
.attendance-list td {
    text-align: left;
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--color-light-blue);
}
.attendance-list th {
    color: var(--color-cool-gray);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.attendance-type-select {
    font-family: var(--font-heading);
    padding: 0.4rem 0.6rem;
    border-radius: 4px;
    border: 1px solid var(--color-cool-gray);
    min-width: 14rem;
    background: white;
    transition: background-color 0.15s, border-color 0.15s;
}

/* Closed dropdown — colored by current selection (data-status set by JS).
   Mirrors the chip / legend palette so the list-view reads at a glance. */
.attendance-type-select[data-status="present"] { background: var(--palette-good-bg);    border-color: var(--palette-good-text);    color: var(--palette-good-text); }
.attendance-type-select[data-status="tle"]     { background: var(--palette-neutral-bg); border-color: var(--palette-neutral-text); color: var(--palette-neutral-text); }
.attendance-type-select[data-status="absent"]  { background: var(--palette-bad-bg);     border-color: var(--palette-bad-text);     color: var(--palette-bad-text); }
.attendance-type-select[data-status="medical"] { background: var(--palette-info-bg);    border-color: var(--palette-info-text);    color: var(--palette-info-text); }
.attendance-type-select[data-status="loa"]     { background: var(--palette-muted-bg);   border-color: var(--palette-muted-text);   color: var(--palette-muted-text); }

/* Open dropdown — color each option by its value. Browser support for
   <option> styling is patchy (Chrome/Firefox: yes, Safari: ignored). The
   closed-select coloring above is the durable cue. */
.attendance-type-select option[value="1"] { background: var(--palette-good-bg);    color: var(--palette-good-text); }
.attendance-type-select option[value="2"] { background: var(--palette-neutral-bg); color: var(--palette-neutral-text); }
.attendance-type-select option[value="3"] { background: var(--palette-bad-bg);     color: var(--palette-bad-text); }
.attendance-type-select option[value="4"] { background: var(--palette-info-bg);    color: var(--palette-info-text); }
.attendance-type-select option[value="5"] { background: var(--palette-muted-bg);   color: var(--palette-muted-text); }

.attendance-comment-input {
    font-family: var(--font-heading);
    padding: 0.4rem 0.6rem;
    border-radius: 4px;
    border: 1px solid var(--color-cool-gray);
    background: white;
    width: 100%;
    min-width: 14rem;
}
.attendance-comment-input::placeholder {
    color: var(--color-cool-gray);
    font-style: italic;
}

/* Layout view ----------------------------------------------- */

.layout-controls {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    font-family: var(--font-heading);
    flex-wrap: wrap;
}
/* Force the [hidden] attribute to win over any flex parent / button reset.
   Without this, some browsers can render an inline button despite the
   attribute being set by JS. */
.layout-controls [hidden] { display: none !important; }
.layout-picker {
    padding: 0.4rem 0.6rem;
    border-radius: 4px;
    border: 1px solid var(--color-cool-gray);
    min-width: 12rem;
    background: white;
}
.layout-hint {
    color: var(--color-cool-gray);
    font-size: 0.85rem;
}

.attendance-canvas-wrap {
    border: 2px solid var(--color-deep-navy);
    border-radius: 8px;
    background: var(--color-off-white);
    padding: var(--space-md);
    margin-bottom: var(--space-md);
}
.attendance-canvas {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background:
        linear-gradient(transparent 95%, rgba(141, 143, 150, 0.25) 95%) 0 0 / 100% 5%,
        linear-gradient(90deg, transparent 95%, rgba(141, 143, 150, 0.25) 95%) 0 0 / 5% 100%,
        white;
    border-radius: 6px;
    overflow: hidden;
}
.layout-editing .attendance-canvas {
    outline: 2px dashed var(--color-gold);
    outline-offset: -4px;
}

/* Edit-mode watermark — large transparent letters across the canvas
   so it's unmistakable when faculty are in edit mode. Pointer-events
   off so it never intercepts chip drags or clicks. */
.layout-editing .attendance-canvas::before {
    content: "EDIT MODE";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(2.5rem, 8vw, 6rem);
    letter-spacing: 0.15em;
    color: rgba(234, 178, 52, 0.50);
    pointer-events: none;
    z-index: 0;
    user-select: none;
}
.layout-editing .attendance-chip { z-index: 1; }

.attendance-chip {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    background: var(--color-light-blue);
    color: var(--color-deep-navy);
    border: 2px solid var(--color-blue);
    font-family: var(--font-heading);
    font-size: 0.85rem;
    cursor: pointer;
    user-select: none;
    transform: translate(0, 0);
    box-shadow: 0 1px 3px rgba(6, 26, 40, 0.15);
    /* Prevent the chip from collapsing/wrapping when its absolute box bumps
       against the canvas's right edge — width must come from content alone
       so the drag clamp can size against a stable chip width. */
    white-space: nowrap;
    width: max-content;
}
.attendance-chip.draggable { cursor: grab; }
.attendance-chip.dragging  { cursor: grabbing; opacity: 0.85; z-index: 10; }
.attendance-chip[data-status="present"] { background: var(--palette-good-bg);    border-color: var(--palette-good-text); }
.attendance-chip[data-status="tle"]     { background: var(--palette-neutral-bg); border-color: var(--palette-neutral-text); }
.attendance-chip[data-status="absent"]  { background: var(--palette-bad-bg);     border-color: var(--palette-bad-text); }
.attendance-chip[data-status="medical"] { background: var(--palette-info-bg);    border-color: var(--palette-info-text); }
.attendance-chip[data-status="loa"]     { background: var(--palette-muted-bg);   border-color: var(--palette-muted-text); }
.attendance-chip.instructor-chip {
    background: var(--color-deep-navy);
    color: #fff;
    border-color: var(--color-deep-navy);
    cursor: default;
}
.attendance-chip.instructor-chip .chip-name { color: #fff; font-weight: 600; }
.layout-editing .attendance-chip.instructor-chip { cursor: grab; }
.attendance-chip.instructor-chip.dragging { cursor: grabbing; }

/* Legend ---------------------------------------------------- */

.attendance-legend {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-md);
    background: white;
    border: 1px solid var(--color-light-blue);
    border-radius: 6px;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    color: var(--color-deep-navy);
}
.attendance-legend li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}
.legend-swatch {
    display: inline-block;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 999px;
    border: 2px solid transparent;
}
.legend-swatch[data-status="present"] { background: var(--palette-good-bg);    border-color: var(--palette-good-text); }
.legend-swatch[data-status="tle"]     { background: var(--palette-neutral-bg); border-color: var(--palette-neutral-text); }
.legend-swatch[data-status="absent"]  { background: var(--palette-bad-bg);     border-color: var(--palette-bad-text); }
.legend-swatch[data-status="medical"] { background: var(--palette-info-bg);    border-color: var(--palette-info-text); }
.legend-swatch[data-status="loa"]     { background: var(--palette-muted-bg);   border-color: var(--palette-muted-text); }

.attendance-chip .chip-status::before {
    content: "•";
    font-size: 1.1rem;
    line-height: 1;
}

/* Bench (unplaced students) -------------------------------- */

.attendance-bench {
    background: var(--color-off-white);
    border: 1px dashed var(--color-cool-gray);
    border-radius: 6px;
    padding: var(--space-md);
}
.bench-label {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    color: var(--color-cool-gray);
    margin-bottom: var(--space-sm);
}
.bench-zone {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    min-height: 3rem;
}
.bench-zone .attendance-chip {
    position: static;
    transform: none;
}

/* ============================================================
   GROUPER PAGE
   ============================================================ */

.grouper-controls {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    align-items: center;
    justify-content: space-between;
    background: white;
    border: 1px solid #e8eef3;
    border-radius: 6px;
    padding: var(--space-md);
    margin-bottom: var(--space-md);
}
.grouper-input-group {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}
.grouper-mode-select,
.grouper-amount {
    padding: 0.4rem var(--space-sm);
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    font-family: var(--font-heading);
    font-size: 0.9rem;
    color: var(--color-deep-navy);
    background: white;
}
.grouper-amount {
    width: 5rem;
}
.grouper-warning {
    color: #c0392b;
    font-size: 0.85rem;
}
.grouper-actions {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}
.grouper-board {
    display: grid;
    grid-template-columns: 18rem 1fr;
    gap: var(--space-md);
    align-items: start;
}
.grouper-pool,
.grouper-group {
    background: white;
    border: 1px solid #e8eef3;
    border-radius: 6px;
    padding: var(--space-md);
}
.grouper-pool h2,
.grouper-group h3 {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    color: var(--color-cool-gray);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 var(--space-sm) 0;
}
.grouper-groups {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: var(--space-md);
}
.grouper-chip-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-height: 3rem;
}
.grouper-group-list {
    min-height: 6rem;
}
.grouper-chip {
    background: var(--color-light-blue);
    color: var(--color-deep-navy);
    border: 1px solid var(--color-blue);
    border-radius: 4px;
    padding: 0.35rem var(--space-sm);
    font-family: var(--font-heading);
    font-size: 0.9rem;
    cursor: grab;
    user-select: none;
}
.grouper-chip.dragging {
    opacity: 0.4;
}
.grouper-chip-ghost {
    position: fixed;
    pointer-events: none;
    z-index: 1000;
    background: var(--color-light-blue);
    color: var(--color-deep-navy);
    border: 1px solid var(--color-blue);
    border-radius: 4px;
    padding: 0.35rem var(--space-sm);
    font-family: var(--font-heading);
    font-size: 0.9rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ============================================================
   STUDENT DETAIL
   ============================================================ */

.student-detail-header {
    margin-bottom: var(--space-xl);
}

.student-detail-header h1 {
    font-size: 1.75rem;
    color: var(--color-blue);
    margin-bottom: var(--space-xs);
}

.student-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    font-family: var(--font-heading);
    font-size: 0.85rem;
    color: var(--color-cool-gray);
    margin-bottom: var(--space-md);
}

.student-detail-metrics {
    display: flex;
    gap: var(--space-xl);
}

.student-detail-metrics .metric dt {
    font-family: var(--font-heading);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-cool-gray);
}

.student-detail-metrics .metric dd {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-deep-navy);
}

.section-heading {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-cool-gray);
    margin: var(--space-xl) 0 var(--space-md);
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid #e0e8ef;
}

.section-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-md);
}

.section-card {
    background-color: white;
    padding: var(--space-md);
    border-radius: 6px;
    border: 1px solid #e0e8ef;
}

.section-card-title {
    font-family: var(--font-heading);
    font-size: 1rem;
    margin-bottom: var(--space-xs);
    display: flex;
    gap: var(--space-sm);
    align-items: baseline;
}

.section-card-course {
    font-weight: 700;
    color: var(--color-blue);
}

.section-card-label {
    font-weight: 400;
    font-size: 0.8rem;
    color: var(--color-cool-gray);
}

.section-card-subtitle {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--color-cool-gray);
    margin-bottom: var(--space-sm);
}

.section-card-grades {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid #e8eef3;
}

.section-card-grades .grade-row {
    display: flex;
    gap: var(--space-xs);
    align-items: baseline;
}

.section-card-grades .grade-row dt {
    font-family: var(--font-heading);
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--color-cool-gray);
}

.section-card-grades .grade-row dd {
    font-family: var(--font-heading);
    font-weight: 600;
}

.section-card-grades .grade-score {
    font-weight: 400;
    font-size: 0.8rem;
    color: var(--color-cool-gray);
    margin-left: 2px;
}

.section-card-attendance {
    display: flex;
    gap: var(--space-md);
}

.section-card-attendance .metric dt {
    font-family: var(--font-heading);
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--color-cool-gray);
}

.section-card-attendance .metric dd {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.95rem;
}

.attendance-records {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.section-card {
    transition: border-color .15s ease, box-shadow .15s ease;
}
.section-card[role="button"] {
    cursor: pointer;
    user-select: none;
}
.section-card.is-selected {
    border-color: var(--color-blue);
    box-shadow: 0 0 0 1px var(--color-blue);
}
.section-card[role="button"]:focus-visible {
    outline: 2px solid var(--color-blue);
    outline-offset: 2px;
}

.table-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--space-sm);
    max-width: 720px;
    margin: 0 auto var(--space-sm);
}

.table-filters label {
    display: flex;
    flex-direction: column;
    font-size: 0.75rem;
    color: var(--color-cool-gray);
    gap: 2px;
}

.table-filters select,
.table-filters input[type="date"] {
    font-size: 0.85rem;
    padding: 4px 6px;
    border: 1px solid #c8d2db;
    border-radius: 4px;
}

.data-table th[data-sort-key] {
    padding: 0;
}

.data-table th .sort-btn {
    width: 100%;
    height: 100%;
    background: none;
    border: 0;
    padding: var(--space-sm) var(--space-md);
    font: inherit;
    color: inherit;
    text-align: inherit;
    cursor: pointer;
}

.data-table th .sort-btn:hover {
    background: rgba(0, 0, 0, 0.04);
}

.data-table th .sort-indicator {
    display: inline-block;
    min-width: 0.9em;
    margin-left: 0.25em;
    font-size: 0.75em;
    color: var(--color-cool-gray);
}

.filter-hint {
    color: var(--color-cool-gray);
    font-size: 0.8rem;
    margin-top: var(--space-xs);
}

.attendance-type-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3em;
    height: 1.4rem;
    padding: 0 0.6rem;
    border-radius: 999px;
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid transparent;
    line-height: 1;
}
.attendance-type-pill[data-status="present"] { background: var(--palette-good-bg);    border-color: var(--palette-good-text);    color: var(--palette-good-text); }
.attendance-type-pill[data-status="tle"]     { background: var(--palette-neutral-bg); border-color: var(--palette-neutral-text); color: var(--palette-neutral-text); }
.attendance-type-pill[data-status="absent"]  { background: var(--palette-bad-bg);     border-color: var(--palette-bad-text);     color: var(--palette-bad-text); }
.attendance-type-pill[data-status="medical"] { background: var(--palette-info-bg);    border-color: var(--palette-info-text);    color: var(--palette-info-text); }
.attendance-type-pill[data-status="loa"]     { background: var(--palette-muted-bg);   border-color: var(--palette-muted-text);   color: var(--palette-muted-text); }

/* ============================================================
   APP SHELL — sidebar + topbar + main
   Phase 1 layout. Replaces the legacy `.navbar` + `.content` pattern.
   ============================================================ */

body.app-shell {
    display: grid;
    grid-template-columns: var(--shell-sidebar-w) 1fr;
    grid-template-rows: var(--shell-topbar-h) 1fr;
    /* Lock the shell to viewport height so .app-main is the only scroll
       region. Without this, tall content makes the body grow and drags
       the sidebar (including the pinned account links) down with it. */
    height: 100vh;
    overflow: hidden;
    background: #F5F5F5;
}

body.app-shell--unauth {
    background: var(--color-off-white);
}

.app-main {
    grid-column: 2;
    grid-row: 2;
    background: white;
    overflow-y: auto;
    padding: 28px 36px 36px;
}

.app-main--unauth {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    padding: 0;
}

/* Topbar */
.topbar {
    grid-column: 1 / -1;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 24px;
    background: white;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-ui);
}

.topbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--forest);
    text-decoration: none;
}

.topbar-brand:hover { text-decoration: none; }

.brand-mark {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    background: var(--color-blue);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Use the UI sans here. Libre Baskerville's M has wide side bearings
       and a tall x-height that read off-center in a tight 28px box. */
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1;
}

.brand-name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}

.topbar-spacer { flex: 1; }

.top-search {
    width: 240px;
    padding: 7px 12px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--paper);
    font-family: inherit;
    font-size: 0.78rem;
    color: var(--slate);
}
.top-search:disabled {
    color: var(--misty);
    cursor: not-allowed;
}

.topbar-locations {
    display: flex;
    gap: 4px;
}

/* Override the navbar-style location chips so the topbar variant has tone */
.topbar .location-toggle .location-label {
    background: var(--paper);
    color: var(--slate);
    border: 1px solid var(--line);
    padding: 3px 10px;
    border-radius: 3px;
}
.topbar .location-toggle input:checked + .location-label {
    background: var(--color-light-blue);
    color: var(--color-blue);
    border-color: var(--color-blue);
}

.top-icons {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--slate);
}

.icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    text-decoration: none;
}
.icon-btn:hover {
    background: var(--paper);
    text-decoration: none;
}

.ico { width: 16px; height: 16px; }

.top-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 16px;
    border-left: 1px solid var(--line);
    color: inherit;
    text-decoration: none;
}
.top-user:hover { text-decoration: none; }

.top-user .avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--color-light-blue);
    color: var(--color-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 0.72rem;
    line-height: 1;
    /* No letter-spacing — trailing tracking on a 2-letter monogram pushes
       the perceived center to the left inside a 30px circle. */
}

.top-user .who { line-height: 1.2; }
.top-user .who .name {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--forest);
}
.top-user .who .meta {
    display: block;
    font-size: 0.66rem;
    color: var(--misty);
    margin-top: 2px;
}

/* Sidebar — outer flex column with a scrollable role section and a pinned
   bottom row for account links (Settings / My Profile / Logout). The
   .sb-scroll wrapper takes the available space; .sb-bottom stays static
   at the viewport floor regardless of how many roles/pages are visible. */
.sidebar {
    grid-column: 1;
    grid-row: 2;
    background: var(--paper);
    border-right: 1px solid var(--line);
    font-family: var(--font-ui);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sb-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 18px 12px 8px;
}

.sb-role {
    margin-bottom: 14px;
}
.sb-role + .sb-role {
    border-top: 1px solid var(--line);
    padding-top: 12px;
}

.sb-role-header {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 4px 12px;
    margin: 0;
    background: transparent;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
}
.sb-role-header:hover {
    background: white;
}
.sb-role-header:focus-visible {
    outline: 2px solid var(--color-blue);
    outline-offset: 1px;
}
.sb-role-glyph {
    color: var(--color-blue);
    font-size: 0.8rem;
    line-height: 1;
}
.sb-role-name {
    flex: 1;
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--forest);
    letter-spacing: 0.01em;
}
.sb-role-chevron {
    color: var(--misty);
    font-size: 0.7rem;
    line-height: 1;
    transition: transform 0.15s ease;
}
.sb-role.collapsed .sb-role-chevron {
    transform: rotate(-90deg);
}
.sb-role.collapsed .sb-role-body {
    display: none;
}

.sb-section {
    margin-top: 6px;
}

.sb-section-label {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--misty);
    padding: 6px 12px 4px;
}

.sb-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 7px 12px 7px 24px;  /* extra left indent so pages sit visually under section labels */
    border-radius: 4px;
    font-size: 0.78rem;
    color: #4A4A4A;
    text-decoration: none;
    margin-bottom: 1px;
    transition: background 0.1s;
}
.sb-link:hover {
    background: white;
    text-decoration: none;
}
.sb-link.active {
    background: var(--color-light-blue);
    color: var(--color-blue);
    font-weight: 600;
}

.sb-link-label { flex: 1; }

.sb-soon {
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--misty);
    background: white;
    border: 1px solid var(--line);
    border-radius: 2px;
    padding: 1px 5px;
}

.sb-bottom {
    flex-shrink: 0;
    padding: 14px 12px 18px;
    border-top: 1px solid var(--line);
    background: var(--paper);
}
/* Account-link rows in the bottom block use the same indent as in-section
   page links so the visual rhythm continues. */
.sb-bottom .sb-link { padding-left: 24px; }

/* Main content blocks */
.crumb {
    font-family: var(--font-ui);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--misty);
    margin-bottom: 8px;
}
.crumb-role {
    color: var(--color-blue);
}

.page-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.65rem;
    color: var(--forest);
    letter-spacing: 0.01em;
    margin-bottom: 6px;
}

.page-subtitle {
    font-family: var(--font-ui);
    font-size: 0.84rem;
    color: var(--slate);
    margin-bottom: 28px;
    line-height: 1.55;
}

/* Generic panel */
.panel {
    border: 1px solid var(--line);
    border-radius: 4px;
    background: white;
    margin-bottom: 18px;
}
.panel-head {
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 12px;
}
.panel-head h3 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--forest);
}
.panel-head .meta {
    font-family: var(--font-ui);
    font-size: 0.72rem;
    color: var(--misty);
    margin-left: auto;
}
.panel-body {
    padding: 18px;
    font-family: var(--font-ui);
    color: var(--slate);
    line-height: 1.6;
}

/* Placeholder ("Coming soon") body — used by every net-new Phase 1 page */
.placeholder-panel {
    border-style: dashed;
    background: var(--paper);
}
.placeholder-eyebrow {
    font-family: var(--font-ui);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-blue);
    margin-bottom: 10px;
}
.placeholder-text {
    font-size: 0.9rem;
    color: var(--slate);
    line-height: 1.6;
    max-width: 60ch;
}

/* KPI row */
.kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 28px;
}
@media (max-width: 1100px) {
    .kpi-row { grid-template-columns: repeat(2, 1fr); }
}
.kpi-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 16px 18px;
    font-family: var(--font-ui);
}
.kpi-label {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--misty);
    margin-bottom: 6px;
}
.kpi-value {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.55rem;
    color: var(--forest);
    line-height: 1.1;
    margin-bottom: 4px;
}
.kpi-delta {
    font-size: 0.7rem;
    color: var(--slate);
}
.kpi-delta.up { color: var(--color-green); }
.kpi-delta.down { color: #C0392B; }

/* Course cards (mockup view 02) */
.courses-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 900px) {
    .courses-grid { grid-template-columns: 1fr; }
}
.course-card {
    border: 1px solid var(--line);
    border-radius: 4px;
    background: white;
    overflow: hidden;
    font-family: var(--font-ui);
}
.course-card-head {
    padding: 14px 18px 12px;
    border-bottom: 1px solid var(--line-soft);
    border-left: 3px solid var(--color-blue);
}
.course-card.selected .course-card-head {
    background: var(--color-light-blue);
}
.course-code-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
}
.course-code-big {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--forest);
    letter-spacing: 0.02em;
}
.course-section-label {
    font-size: 0.72rem;
    color: var(--misty);
    letter-spacing: 0.04em;
}
.course-title {
    font-size: 0.82rem;
    color: #4A4A4A;
    line-height: 1.4;
}
.course-meta {
    padding: 11px 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    font-size: 0.72rem;
    color: var(--slate);
    border-bottom: 1px solid var(--line-soft);
}
.course-meta .label {
    display: block;
    color: var(--misty);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.6rem;
    margin-bottom: 2px;
}
.course-meta .val {
    font-size: 0.78rem;
    color: #4A4A4A;
}
.course-actions {
    padding: 10px 14px 12px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Mockup-aligned button + segmented control aliases.
   Existing .btn-primary etc. continue to work; new pages can use .btn .primary
   to match the mockup naming. The existing .view-toggle / .view-toggle-btn
   aliases below also accept the mockup's .seg / .seg-btn names. */
.btn.primary {
    background: var(--color-blue);
    color: white;
    border-color: var(--color-blue);
}
.btn.primary:hover { background: #003A6E; }

.btn.trigger {
    background: white;
    color: var(--color-blue);
    border-color: var(--color-blue);
}
.btn.trigger:hover { background: var(--color-light-blue); }

.seg {
    display: inline-flex;
    border: 1px solid var(--line);
    border-radius: 3px;
    overflow: hidden;
    background: white;
    font-family: var(--font-ui);
}
.seg-btn {
    padding: 7px 14px;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--slate);
    background: white;
    cursor: pointer;
    border: none;
    border-right: 1px solid var(--line);
    font-family: inherit;
}
.seg-btn:last-child { border-right: none; }
.seg-btn.active {
    background: var(--forest);
    color: white;
}

/* Take-attendance toolbar / legend (new chrome around the existing chip canvas) */
.ta-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-ui);
}
.ta-toolbar .meta-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ta-toolbar .meta-block .label {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--misty);
}
.ta-toolbar .meta-block .val {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--forest);
}
.ta-toolbar .grow { flex: 1; }

.ta-legend-strip {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    font-family: var(--font-ui);
    font-size: 0.72rem;
    color: var(--slate);
}
.ta-legend-strip .hint {
    margin-left: auto;
    color: var(--misty);
}
.legend-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.legend-chip .swatch {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.1);
}
.legend-chip .swatch.present { background: var(--palette-good-text); }
.legend-chip .swatch.tle     { background: var(--palette-neutral-text); }
.legend-chip .swatch.absent  { background: var(--palette-bad-text); }
.legend-chip .swatch.unset   { background: white; border: 1px dashed var(--misty); }

/* Generic mockup-aligned badge (used in .perf-table sample rows etc.) */
.badge {
    display: inline-block;
    font-family: var(--font-ui);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    padding: 2px 7px;
    border-radius: 2px;
    text-transform: uppercase;
}
.badge.green { background: var(--palette-good-bg);    color: var(--palette-good-text); }
.badge.amber { background: var(--palette-neutral-bg); color: var(--palette-neutral-text); }
.badge.red   { background: var(--palette-bad-bg);     color: var(--palette-bad-text); }
.badge.blue  { background: var(--palette-info-bg);    color: var(--palette-info-text); }
.badge.gray  { background: var(--palette-muted-bg);   color: var(--palette-muted-text); }

/* Re-style the fallback content alignment for pages still using .content. */
.app-main .content {
    max-width: none;
    padding: 0;
}