/**
 * The UMT coordinator look, applied over Filament rather than instead of it.
 *
 * The reference design is a whole page — its own sidebar, top bar, table and
 * pagination. Filament already provides all four, and replacing them would mean
 * giving up the filtering, sorting, scoping and responsive behaviour every
 * screen in this project is built on. So this takes the design's *identity* —
 * the navy and gold, the small-caps labels, the card treatment, the monospaced
 * identifiers — and leaves Filament's furniture where it is.
 *
 * Scoped to `.fi-panel-admin`. The three panels carry deliberately different
 * primaries — amber for the coordinator, emerald for students, indigo for
 * supervisors — and the reference is a coordinator screen. Hardcoding navy and
 * gold everywhere would fight the other two, so every rule is confined to the
 * coordinator's panel.
 *
 * Plain CSS on purpose. A custom Filament theme compiles through Vite, which
 * would put Node back into a deploy that currently does not need it. Registered
 * through FilamentAsset instead, the same route the login bear takes.
 */

.fi-panel-admin {
    --umt-navy: #003366;
    --umt-gold: #d4af37;
    --umt-line: #e2e8f0;
}

/* Headings ---------------------------------------------------------------- */

/*
 * The page title in navy. The coordinator's primary is amber, which is right
 * for buttons and unreadable for a heading, so the reference sets titles in
 * navy — the institution's colour rather than the accent's.
 */
.fi-panel-admin .fi-header-heading {
    color: var(--umt-navy);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.dark .fi-panel-admin .fi-header-heading {
    color: #a7c8ff;
}

/* Stat cards -------------------------------------------------------------- */

.fi-panel-admin .fi-wi-stats-overview-stat {
    border: 1px solid var(--umt-line);
    border-radius: 0.5rem;
    /* A gold hairline along the top, which is most of what makes the cards read
       as UMT rather than as stock Filament. */
    border-top: 3px solid var(--umt-gold);
}

.dark .fi-panel-admin .fi-wi-stats-overview-stat {
    border-color: rgb(255 255 255 / 0.08);
    border-top-color: var(--umt-gold);
}

/*
 * Small caps for the label — the reference's label-caps, used wherever a field
 * is named rather than read.
 */
.fi-panel-admin .fi-wi-stats-overview-stat-label {
    font-size: 12px;
    line-height: 16px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #43474f;
}

.dark .fi-panel-admin .fi-wi-stats-overview-stat-label {
    color: #c3c6d1;
}

.fi-panel-admin .fi-wi-stats-overview-stat-value {
    font-size: 32px;
    line-height: 40px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Tables ------------------------------------------------------------------ */

/* Column headings get the same small-caps treatment, so a table reads as a
   continuation of the cards above it rather than a separate component. */
.fi-panel-admin .fi-ta-header-cell-label,
.fi-panel-admin .fi-ta-header-cell button {
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 700;
}

/*
 * A matric number is an identifier, not prose: monospaced so the digits line up
 * down the column and a transposition is visible. The reference uses JetBrains
 * Mono for exactly this; the stack falls back to whatever the machine has,
 * since one more font file is not worth a second network request.
 */
.fi-panel-admin .fi-ta-cell-student-matric-no,
.fi-panel-admin .fi-ta-cell-matric-no,
.fi-panel-admin .fi-ta-cell-placement-student-matric-no {
    font-family: ui-monospace, 'JetBrains Mono', 'Cascadia Mono', Menlo, Consolas, monospace;
    font-size: 13px;
    letter-spacing: 0;
}

/* The reference tints the hovered row rather than greying it. */
.fi-panel-admin .fi-ta-row:hover {
    background-color: #f0f7ff;
}

.dark .fi-panel-admin .fi-ta-row:hover {
    background-color: rgb(167 200 255 / 0.06);
}

/* Sidebar ----------------------------------------------------------------- */

.fi-panel-admin .fi-sidebar-group-label {
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 700;
}