/* =============================================================================
   Analytics Report Design System  (prefix: ar-)
   Shared by every NEW analytics report (Subject Performance, Grade Range, Fail,
   Rank, Holiday, Class/Student/Teacher Progress …). Loaded only on Analytics
   pages (gated in includes/header.php). The older Master/Consolidated reports
   keep their inline mr- styles; new reports use ar- exclusively.

   2026-08-11 — retuned onto the Apple-Glass kit (assets/css/examon_ui.css).
   Every value here now comes from a --mod-* token, so analytics matches the
   rest of ExamON instead of running its own slate/Tailwind palette.
   CLASS NAMES ARE UNCHANGED on purpose: 14 report views reference them, and
   none of them needed editing for this pass.
   ========================================================================== */

/* ── Page header ─────────────────────────────────────────────────────────── */
.ar-header { display:flex; align-items:center; gap:var(--sp-5); padding:4px 2px var(--sp-6); margin-bottom:4px; }
.ar-header-icon {
    display:flex; align-items:center; justify-content:center;
    width:44px; height:44px; border-radius:var(--r-md); flex-shrink:0;
    font-size:19px;
    background:var(--mod-accent-soft); color:var(--mod-accent);
    box-shadow:none;
}
.ar-header-title { font-size:var(--fs-h1); font-weight:var(--fw-h1); color:var(--mod-ink); margin:0; letter-spacing:var(--ls-h1); }
.ar-header-sub { margin:2px 0 0; font-size:var(--fs-sm); color:#5a6b64; font-weight:400; }

/* Reports each used to set one of eight accent modifiers (indigo / teal /
   violet / rose / amber / sky / emerald / fuchsia), which is why the same
   button was purple on one report and green on the next. The modifiers are
   kept as selectors — 9 views still emit them — but they all resolve to the
   single app accent now, so no view had to change. */
.ar-a-indigo, .ar-a-teal, .ar-a-violet, .ar-a-rose,
.ar-a-amber,  .ar-a-sky,  .ar-a-emerald, .ar-a-fuchsia {
    --ar:    var(--mod-accent);
    --ar-d:  var(--mod-accent-d);
    --ar-l:  var(--mod-accent-soft);
    --ar-bd: var(--mod-accent-ring);
    --ar-tx: var(--mod-accent-d);
}
/* Fallback so a report that sets no modifier still resolves. */
.ar-scope { --ar:var(--mod-accent); --ar-d:var(--mod-accent-d); --ar-l:var(--mod-accent-soft); --ar-bd:var(--mod-accent-ring); --ar-tx:var(--mod-accent-d); }
.ar-header-title span { color:inherit; }

/* ── Filter card ─────────────────────────────────────────────────────────── */
.ar-filter-card {
    background:var(--mod-surface);
    border:.5px solid var(--mod-card-line);
    border-radius:var(--r-card);
    padding:var(--sp-6);
    margin-bottom:var(--sp-6);
    box-shadow:var(--sh-card);
}
.ar-filter-row { display:flex; gap:var(--sp-5); flex-wrap:wrap; margin-bottom:18px; }
.ar-filter-row:last-of-type { margin-bottom:0; }
.ar-filter-group { display:flex; flex-direction:column; gap:var(--sp-2); flex:1; min-width:160px; }
.ar-filter-group label {
    font-size:var(--fs-cap); font-weight:600; color:var(--mod-ink-3);
    letter-spacing:.5px; text-transform:uppercase;
}
.ar-sel, .ar-input {
    padding:10px 12px;
    background:#fff;
    border:1px solid rgba(0,0,0,.1);
    border-radius:var(--r-btn);
    font-family:var(--font); font-size:var(--fs-body); color:var(--mod-ink);
    box-shadow:inset 0 1px 2px rgba(0,0,0,.02);
    outline:none; transition:border-color .2s, box-shadow .2s;
}
.ar-sel:focus, .ar-input:focus { border-color:var(--mod-accent); box-shadow:var(--sh-ring); background:#fff; }

.ar-multi-wrap { position:relative; width:100%; min-width:180px; }
.ar-multi-toggle { display:flex; justify-content:space-between; align-items:center; cursor:pointer; user-select:none; }
.ar-multi-drop {
    position:absolute; top:calc(100% + var(--sp-2)); left:0; right:0;
    background:#fff; border:.5px solid rgba(0,0,0,.1);
    border-radius:var(--r-card); box-shadow:var(--sh-pop);
    padding:var(--sp-2); z-index:20; display:none; flex-direction:column; gap:2px;
}
.ar-check {
    margin:0; padding:var(--sp-3) 10px; border-radius:9px;
    transition:background .12s; width:100%; box-sizing:border-box;
    display:flex; align-items:center; gap:var(--sp-3);
    font-size:var(--fs-ui); font-weight:500; color:rgba(0,0,0,.75); cursor:pointer;
}
.ar-check:hover { background:rgba(0,0,0,.04); color:rgba(0,0,0,.9); }
.ar-check input { cursor:pointer; accent-color:var(--mod-accent); }

/* Buttons match .btn in examon_ui.css §6 — flat fill, no gradient, no glow. */
.ar-filter-actions { display:flex; gap:var(--sp-3); flex-wrap:wrap; padding-top:var(--sp-3); }
.ar-btn {
    display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
    padding:8px var(--sp-5); border-radius:var(--r-btn);
    font-family:var(--font); font-size:var(--fs-body); font-weight:600;
    border:none; cursor:pointer; text-decoration:none !important;
    transition:var(--ease);
}
.ar-btn-primary { background:var(--mod-accent); color:#fff; }
.ar-btn-primary:hover { background:var(--mod-accent-d); color:#fff; box-shadow:none; }
.ar-btn-excel { background:var(--mod-green); color:#fff; }
.ar-btn-excel:hover { background:var(--mod-green-tx); color:#fff; }
.ar-btn-reset { background:var(--mod-fill); color:rgba(0,0,0,.8); }
.ar-btn-reset:hover { background:var(--mod-fill-h); color:rgba(0,0,0,.9); }

/* ── Empty / summary ─────────────────────────────────────────────────────── */
.ar-empty { text-align:center; padding:60px var(--sp-6); color:var(--mod-ink-3); }
.ar-empty-icon { font-size:44px; margin-bottom:var(--sp-5); display:block; color:var(--mod-ink-4); }
.ar-empty p { font-size:var(--fs-body); margin:0; }

.ar-summary-bar {
    display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-3);
    background:var(--mod-accent-soft); border:none;
    border-radius:var(--r-md); padding:10px var(--sp-5); margin-bottom:var(--sp-5);
    font-size:var(--fs-sm); color:var(--mod-accent-d); font-weight:600;
}
.ar-summary-bar i { color:var(--mod-accent); }
.ar-sep { opacity:.5; }

/* ── Stat cards ──────────────────────────────────────────────────────────── */
.ar-stats { display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--sp-5); margin-bottom:var(--sp-6); }
.ar-stat {
    display:flex; align-items:center; gap:14px;
    background:var(--mod-surface);
    border:.5px solid var(--mod-card-line);
    border-radius:var(--r-card);
    padding:var(--sp-5) 18px;
    box-shadow:var(--sh-card);
}
.ar-stat-icon { width:44px; height:44px; border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.ar-stat-val { font-size:22px; font-weight:700; color:var(--mod-ink); line-height:1.1; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.ar-stat-name { font-size:var(--fs-h3); max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ar-stat-lbl { font-size:var(--fs-xs); color:var(--mod-ink-3); font-weight:500; margin-top:2px; }
@media (max-width:1024px) { .ar-stats { grid-template-columns:repeat(2, 1fr); } }
@media (max-width:560px)  { .ar-stats { grid-template-columns:1fr; } }

/* ── Chart panels ────────────────────────────────────────────────────────── */
.ar-charts { display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--sp-6); margin-bottom:var(--sp-6); }
.ar-charts.ar-charts-1 { grid-template-columns:1fr; }
.ar-card {
    background:var(--mod-surface);
    border:.5px solid var(--mod-card-line);
    border-radius:var(--r-card);
    padding:var(--sp-6);
    box-shadow:var(--sh-card);
}
.ar-card-title { font-size:var(--fs-h3); font-weight:700; color:var(--mod-ink); margin:0 0 4px; display:flex; align-items:center; gap:var(--sp-3); }
.ar-card-title i { color:var(--mod-accent); }
.ar-card-sub { font-size:var(--fs-xs); color:var(--mod-ink-3); margin:0 0 14px; }
.ar-chart { width:100%; min-height:300px; }
@media (max-width:900px) { .ar-charts { grid-template-columns:1fr; } }

/* ── Data table ──────────────────────────────────────────────────────────── */
.ar-scroll-top { overflow-x:auto; overflow-y:hidden; }
.ar-scroll-top-inner { height:1px; }
.ar-table-wrap {
    overflow-x:auto;
    border:.5px solid var(--mod-card-line);
    border-radius:var(--r-card);
    box-shadow:var(--sh-card);
    background:var(--mod-surface);
}
.ar-table { width:100%; border-collapse:collapse; font-size:var(--fs-sm); background:transparent; }
/* Sticky under the 106px chrome. On .eo-compact screens the chrome scrolls
   away, so the offset drops to 0 — without this the header row hides behind
   the nav on the wide reports. */
.ar-table thead th {
    position:sticky; top:var(--top-h); z-index:1;
    padding:14px 10px; text-align:center;
    background:var(--mod-fill);
    border:none;
    font-size:var(--fs-cap); font-weight:700; color:var(--mod-ink-2);
    text-transform:uppercase; letter-spacing:.5px; white-space:nowrap;
}
body.eo-compact .ar-table thead th { top:0; }
.ar-table th.ar-th-l, .ar-table td.ar-td-l { text-align:left; }
.ar-table tbody tr:hover { background:var(--mod-surface-2); }
.ar-row-alt { background:var(--mod-surface-2); }
.ar-table td { padding:12px 10px; border:none; border-bottom:1px solid var(--mod-hair); vertical-align:middle; text-align:center; color:var(--mod-ink); }
.ar-table tbody tr:last-child td { border-bottom:none; }
.ar-td-name { text-align:left; font-weight:600; color:var(--mod-ink); white-space:nowrap; }
.ar-td-muted { color:var(--mod-ink-2); }
.ar-td-strong { font-weight:700; color:var(--mod-ink); }
.ar-nil { color:var(--mod-ink-4); }

/* Badges / chips — same soft-fill + darkened-text pairing as .tbadge. */
.ar-badge { display:inline-block; padding:3px 9px; border-radius:12px; font-size:var(--fs-xs); font-weight:600; letter-spacing:0; }
.ar-badge-pass  { background:var(--mod-green-soft);  color:var(--mod-green-tx); }
.ar-badge-fail  { background:var(--mod-danger-soft); color:var(--mod-danger-tx); }
.ar-badge-grade { background:var(--mod-accent-soft); color:var(--mod-accent); }
.ar-badge-rank  { background:var(--mod-amber-soft);  color:var(--mod-amber-tx); }
.ar-badge-1 { background:var(--mod-amber-soft);  color:var(--mod-amber-tx); }
.ar-badge-2 { background:var(--mod-fill);        color:var(--mod-ink-2); }
.ar-badge-3 { background:var(--mod-purple-soft); color:var(--mod-purple-tx); }

/* Mini bar inside a cell (e.g. pass % / average) */
.ar-bar { position:relative; height:18px; border-radius:5px; background:var(--mod-fill); overflow:hidden; min-width:80px; }
.ar-bar-fill { position:absolute; left:0; top:0; bottom:0; border-radius:5px; background:var(--mod-accent); opacity:.85; }
.ar-bar-txt { position:relative; z-index:1; font-size:var(--fs-cap); font-weight:600; color:var(--mod-ink); line-height:18px; padding-left:var(--sp-2); }

/* Trend delta */
.ar-up   { color:var(--mod-green-tx);  font-weight:700; }
.ar-down { color:var(--mod-danger-tx); font-weight:700; }
.ar-flat { color:var(--mod-ink-3);     font-weight:600; }

/* Section title between blocks */
.ar-block-title { font-size:var(--fs-h3); font-weight:700; color:var(--mod-ink); margin:26px 0 14px; display:flex; align-items:center; gap:9px; }
.ar-block-title i { color:var(--mod-accent); }