/* Academic Office: timetables, exam board, results workflow, analytics, evaluations, awards. */

:root {
    --utc-ao-navy: var(--utc-brand, #1e3a5f);
    --utc-ao-maroon: var(--utc-brand-2, #7a1f2b);
    --utc-ao-gold: var(--utc-brand-3, #c9a227);
    --utc-ao-green: #15803d;
    --utc-ao-cell: #f8fafc;
}
.dark {
    --utc-ao-cell: #1f1f23;
}

/* ---------- toolbar ---------- */
.utc-ao-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.utc-ao-toolbar .utc-field { min-width: 180px; }
.utc-ao-toolbar-status { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-left: auto; }

/* ---------- KPIs ---------- */
.utc-ao-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 4px 0 12px; }
.utc-ao-kpi {
    border-radius: 12px; padding: 14px 16px; color: #fff; display: flex; flex-direction: column; gap: 2px;
    box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.utc-ao-kpi span { font-size: .78rem; opacity: .85; text-transform: uppercase; letter-spacing: .04em; }
.utc-ao-kpi strong { font-size: 1.6rem; line-height: 1.1; }
.utc-ao-kpi small { opacity: .85; font-size: .78rem; }
.utc-ao-kpi-navy { background: linear-gradient(135deg, var(--utc-ao-navy), #2c5282); }
.utc-ao-kpi-maroon { background: linear-gradient(135deg, var(--utc-ao-maroon), #a33a4a); }
.utc-ao-kpi-gold { background: linear-gradient(135deg, #a8841a, var(--utc-ao-gold)); color: #1b1b1b; }
.utc-ao-kpi-green { background: linear-gradient(135deg, #116530, #22a355); }

/* ---------- status pills ---------- */
.utc-ao-status { display: inline-block; font-size: .72rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--utc-chip); color: var(--utc-text); margin: 1px 2px; white-space: nowrap; }
.utc-ao-status-on_time { background: var(--utc-ok-soft); color: var(--utc-ok); }
.utc-ao-status-late { background: var(--utc-warn-soft); color: var(--utc-warn); }
.utc-ao-status-missing { background: var(--utc-err-soft); color: var(--utc-err); }
.utc-ao-status-pending { background: var(--utc-info-soft); color: var(--utc-info); }
.utc-ao-status-na { background: var(--utc-chip); color: var(--utc-muted); }

.utc-ao-rstatus { display: inline-block; font-size: .72rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--utc-chip); color: var(--utc-text); white-space: nowrap; }
.utc-ao-rstatus-submitted { background: var(--utc-info-soft); color: var(--utc-info); }
.utc-ao-rstatus-verified { background: var(--utc-warn-soft); color: var(--utc-warn); }
.utc-ao-rstatus-approved { background: var(--utc-accent-soft); color: var(--utc-accent); }
.utc-ao-rstatus-published { background: var(--utc-ok-soft); color: var(--utc-ok); }
.utc-ao-rstatus-returned { background: var(--utc-err-soft); color: var(--utc-err); }

.utc-ao-flag { display: inline-block; font-size: .7rem; font-weight: 600; padding: 2px 8px; border-radius: 6px; background: var(--utc-err-soft); color: var(--utc-err); margin: 1px 2px 1px 0; }
.utc-ao-confidential { display: inline-block; font-weight: 800; letter-spacing: .08em; font-size: .72rem; padding: 2px 10px; border-radius: 6px; background: var(--utc-err); color: #fff; margin-right: 6px; }
.dark .utc-ao-confidential { color: #1b0b0e; }

.utc-ao-chip, .utc-ao-chips a {
    --slot: var(--utc-ao-navy);
    display: inline-flex; gap: 4px; align-items: center; font-size: .75rem; padding: 3px 10px; border-radius: 999px; margin: 2px;
    background: color-mix(in srgb, var(--slot) 14%, transparent); color: var(--utc-text);
    border: 1px solid color-mix(in srgb, var(--slot) 45%, transparent); text-decoration: none;
}
.utc-ao-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.utc-ao-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; color: var(--utc-text); }

/* ---------- weekly grid ---------- */
.utc-ao-grid-wrap { overflow-x: auto; border-radius: 12px; border: 1px solid var(--utc-line); background: var(--utc-card); }
.utc-ao-grid { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 760px; color: var(--utc-text); table-layout: fixed; }
.utc-ao-grid thead th {
    background: var(--utc-ao-navy); color: #fff; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
    padding: 10px 8px; text-align: center; position: sticky; top: 0;
}
.utc-ao-grid thead th:first-child { border-top-left-radius: 11px; }
.utc-ao-grid thead th:last-child { border-top-right-radius: 11px; }
.utc-ao-grid td, .utc-ao-grid tbody th { border-top: 1px solid var(--utc-line); border-left: 1px solid var(--utc-line); padding: 6px; vertical-align: top; }
.utc-ao-grid td { background: var(--utc-ao-cell); min-height: 70px; }
.utc-ao-grid .utc-ao-grid-time { width: 84px; text-align: center; font-weight: 700; font-size: .85rem; background: var(--utc-card); border-left: 0; }
.utc-ao-grid thead .utc-ao-grid-time { background: var(--utc-ao-maroon); }
.utc-ao-grid .utc-ao-grid-time small { display: block; font-weight: 400; color: var(--utc-muted); font-size: .72rem; }
.utc-ao-grid thead .utc-ao-grid-time small { color: #fff; }
.utc-ao-grid-exam { min-width: 560px; }

.utc-ao-slot {
    --slot: var(--utc-ao-navy);
    border-radius: 8px; padding: 6px 8px; margin-bottom: 6px; font-size: .78rem; line-height: 1.3;
    background: color-mix(in srgb, var(--slot) 13%, var(--utc-card));
    border-left: 4px solid var(--slot); color: var(--utc-text);
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.dark .utc-ao-slot { background: color-mix(in srgb, var(--slot) 28%, var(--utc-card)); }
.utc-ao-slot-code { font-weight: 800; letter-spacing: .03em; color: var(--slot); display: flex; justify-content: space-between; align-items: center; }
.dark .utc-ao-slot-code { color: color-mix(in srgb, var(--slot) 40%, #fff); }
.utc-ao-slot-title { font-weight: 600; margin: 1px 0 3px; }
.utc-ao-slot-meta { display: flex; justify-content: space-between; gap: 6px; flex-wrap: wrap; color: var(--utc-muted); font-size: .72rem; }
.utc-ao-slot-clash { outline: 2px solid var(--utc-err); outline-offset: 1px; }
.utc-ao-slot-flag { display: inline-flex; width: 16px; height: 16px; border-radius: 999px; align-items: center; justify-content: center; background: var(--utc-err); color: #fff; font-size: .7rem; }
.utc-ao-other { margin-top: 8px; }

@media (max-width: 720px) {
    .utc-ao-toolbar-status { margin-left: 0; }
}

/* ---------- clash list ---------- */
.utc-ao-modal { color: var(--utc-text); }
.utc-ao-clashes { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-direction: column; gap: 6px; }
.utc-ao-clash { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 8px; font-size: .85rem; }
.utc-ao-clash-hard { background: var(--utc-err-soft); }
.utc-ao-clash-warning { background: var(--utc-warn-soft); }
.utc-ao-clash-type { flex: none; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 2px 8px; border-radius: 6px; background: var(--utc-card); color: var(--utc-text); min-width: 78px; text-align: center; }

/* ---------- exam list ---------- */
.utc-ao-exams { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.utc-ao-exams li { --slot: var(--utc-ao-navy); display: flex; gap: 12px; align-items: center; padding: 8px; border-radius: 10px; border: 1px solid var(--utc-line); color: var(--utc-text); }
.utc-ao-exam-date { flex: none; width: 54px; text-align: center; border-radius: 8px; background: var(--slot); color: #fff; padding: 4px 0; display: flex; flex-direction: column; line-height: 1.1; }
.utc-ao-exam-date strong { font-size: 1.2rem; }
.utc-ao-exam-date span { font-size: .72rem; text-transform: uppercase; }
.utc-ao-exam-date small { font-size: .66rem; opacity: .85; }

/* ---------- bars & meters ---------- */
.utc-ao-meter { width: 160px; height: 8px; border-radius: 99px; background: var(--utc-chip); overflow: hidden; }
.utc-ao-meter span { display: block; height: 100%; background: var(--utc-ok); border-radius: 99px; }
.utc-ao-meter-sm { width: 70px; height: 5px; margin-left: auto; margin-top: 3px; }
.utc-ao-hbar { position: relative; height: 18px; border-radius: 6px; background: var(--utc-chip); overflow: hidden; min-width: 90px; }
.utc-ao-hbar span { display: block; height: 100%; background: linear-gradient(90deg, #22a355, var(--utc-ao-green)); }
.utc-ao-hbar em { position: absolute; right: 6px; top: 0; line-height: 18px; font-size: .72rem; font-style: normal; font-weight: 700; color: var(--utc-text); }
.utc-ao-hbar-bad span { background: linear-gradient(90deg, #ef4444, #b91c1c); }
.utc-ao-hbar-gold span { background: linear-gradient(90deg, #e3c14f, var(--utc-ao-gold)); }
.utc-ao-hbar-navy span { background: linear-gradient(90deg, #4a77b4, var(--utc-ao-navy)); }
.utc-ao-barcell { min-width: 130px; }

.utc-ao-dist { display: inline-flex; align-items: flex-end; gap: 3px; height: 38px; }
.utc-ao-dist-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; width: 18px; height: 100%; }
.utc-ao-dist-bar { width: 12px; border-radius: 3px 3px 0 0; background: var(--utc-ao-navy); min-height: 2px; }
.dark .utc-ao-dist-bar { background: #7aa2d6; }
.utc-ao-dist-fail .utc-ao-dist-bar { background: var(--utc-err); }
.utc-ao-dist-col small { font-size: .62rem; color: var(--utc-muted); }

.utc-ao-score {
    display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 999px;
    background: conic-gradient(var(--utc-ao-gold) var(--score), var(--utc-chip) 0); font-weight: 800; font-size: .8rem; color: var(--utc-text);
    position: relative;
}
.utc-ao-score::before { content: ''; position: absolute; inset: 4px; border-radius: 999px; background: var(--utc-card); }
.utc-ao-score { isolation: isolate; }
.utc-ao-score::before { z-index: -1; }

/* ---------- programmes / analytics ---------- */
.utc-ao-programmes { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; }
.utc-ao-programme { border-top: 4px solid var(--utc-ao-navy); }
.utc-ao-accent-1 { border-top-color: var(--utc-ao-maroon); }
.utc-ao-accent-2 { border-top-color: var(--utc-ao-gold); }
.utc-ao-accent-3 { border-top-color: var(--utc-ao-green); }
.utc-ao-kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 520px) { .utc-ao-kpis-3 { grid-template-columns: 1fr; } }
.utc-ao-sort { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
.utc-ao-sort:hover { color: var(--utc-accent); }

.utc-ao-row-missing td { background: var(--utc-err-soft); }
.utc-ao-row-actions { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; align-items: center; }
.utc-ao-upload { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 8px 0; }
.utc-ao-upload .utc-input { max-width: 360px; }

/* ---------- evaluations ---------- */
.utc-ao-eval { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; padding: 8px 0; }
.utc-ao-eval-row { display: grid; grid-template-columns: 1fr 140px; gap: 10px; align-items: center; font-size: .82rem; margin-bottom: 6px; color: var(--utc-text); }
.utc-ao-quote { margin: 6px 0; padding: 6px 10px; border-left: 4px solid var(--utc-ao-gold); background: var(--utc-chip); border-radius: 0 8px 8px 0; font-style: italic; font-size: .85rem; color: var(--utc-text); }

.utc-ao-prose { line-height: 1.6; color: var(--utc-text); }
.utc-ao-prose h1, .utc-ao-prose h2, .utc-ao-prose h3 { font-weight: 700; margin: 10px 0 6px; }
.utc-ao-prose ul { list-style: disc; padding-left: 20px; }
.utc-ao-prose ol { list-style: decimal; padding-left: 20px; }