/* =====================================================================
   v21 — academic planning, timetable & dashboard components.
   Loaded after app.css on every portal page; uses the same tokens (app.css :root).
   ===================================================================== */
.page-title { font-family: var(--serif); font-size: 1.4rem; font-weight: 700; letter-spacing: -.005em; }
/* Buttons & cards: quiet depth that answers the hand — lift on hover, press on click */
.btn-3d { box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 2px 0 color-mix(in srgb, var(--bh) 75%, #000), 0 6px 14px -8px rgba(12,42,33,.45);
  transition: background .15s, border-color .15s, box-shadow .15s, transform .12s cubic-bezier(.2,.8,.3,1); }
.btn-3d:hover { transform: translateY(-1px); }
.btn-3d:active, .btn-3d.active { transform: translateY(1px); box-shadow: 0 0 0 color-mix(in srgb, var(--bh) 75%, #000), inset 0 2px 3px rgba(0,0,0,.18); }
.btn-3d.btn-light { box-shadow: 0 2px 0 var(--line-strong), 0 6px 14px -10px rgba(12,42,33,.35); }
.card-3d { box-shadow: var(--shadow-3d); border-color: var(--line); }
.nav-badge { margin-left: auto; min-width: 20px; padding: 1px 6px; border-radius: 10px; background: var(--accent); color: #1d1608; font-size: .7rem; font-weight: 800; text-align: center; line-height: 1.45; }

/* Stepper (class distribution workflow — a real sequence) */
.stepper { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.stepper li { position: relative; padding: 10px 12px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); }
.stepper li.done { border-color: color-mix(in srgb, var(--primary) 35%, var(--line)); background: var(--primary-soft); }
.stepper li.now { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.stepper label { display: block; font-size: .78rem; font-weight: 700; margin: 0 0 6px 30px; color: var(--muted); }
.step-no { position: absolute; left: 12px; top: 9px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; font-weight: 800; background: var(--surface); border: 1px solid var(--line-strong); }
.stepper li.done .step-no { background: var(--primary); color: #fff; border-color: var(--primary); }
@media (max-width: 991px) { .stepper { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .stepper { grid-template-columns: 1fr; } }

.mini-kpi { height: 100%; padding: 12px 14px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); font-size: .82rem; color: var(--muted); }
.mini-kpi span { display: block; font-size: 1.25rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.mini-kpi.warn { border-left: 4px solid var(--st-warning); } .mini-kpi.ok { border-left: 4px solid var(--st-good); }
.dist-table tr.row-off td:not(:first-child) { opacity: .4; }

/* Teacher recommendations */
.rec-box { display: grid; gap: 6px; }
.rec-item { text-align: left; display: grid; gap: 1px; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); font-size: .8rem; color: var(--ink); transition: border-color .15s, background .15s; }
.rec-item:hover { border-color: var(--primary); }
.rec-item.best { border-color: color-mix(in srgb, var(--primary) 40%, var(--line)); }
.rec-item.chosen { background: var(--primary-soft); border-color: var(--primary); }
.rec-item[data-status="overloaded"] { border-left: 3px solid var(--st-critical); }
.rec-name { font-weight: 700; } .rec-meta, .rec-why { color: var(--muted); font-size: .74rem; }
.load-preview { color: var(--muted); } .load-preview[data-status="overloaded"] { color: var(--danger); font-weight: 600; }

/* Workload bars & gauge (status colours always paired with a labelled badge) */
.wl-bar { position: relative; height: 8px; border-radius: 4px; background: var(--grid); margin: 4px 0 3px; }
.wl-fill { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: var(--st-good); }
.wl-fill.wl-underutilized { background: var(--st-warning); } .wl-fill.wl-overloaded { background: var(--st-critical); }
.wl-min { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink); opacity: .35; }
.gauge-wrap { display: flex; align-items: center; gap: 18px; }
.gauge { --p: 50; --c: var(--st-good); width: 118px; height: 118px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  background: radial-gradient(closest-side, var(--surface) 76%, transparent 77% 100%), conic-gradient(var(--c) calc(var(--p) * 1%), var(--grid) 0); }
.gauge[data-status="underutilized"] { --c: var(--st-warning); } .gauge[data-status="overloaded"] { --c: var(--st-critical); }
.gauge div { text-align: center; line-height: 1.1; } .gauge b { font-size: 1.3rem; display: block; } .gauge span { font-size: .72rem; color: var(--muted); }
.avatar-xl { width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; font-family: var(--serif); font-size: 1.6rem; font-weight: 700; color: #fff; background: var(--primary); box-shadow: var(--shadow-3d); flex-shrink: 0; }
.mini-stat { padding: 8px 4px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); } .mini-stat b { display: block; font-size: 1.1rem; } .mini-stat span { font-size: .7rem; color: var(--muted); }
.kpi-card { display: flex; gap: 14px; align-items: center; padding: 16px 18px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-3d); color: var(--ink); transition: transform .15s, box-shadow .15s; }
.kpi-card:hover { transform: translateY(-2px); text-decoration: none; color: var(--ink); box-shadow: var(--shadow-2); }
.kpi-card.active { outline: 2px solid var(--primary); }
.kpi-card i { font-size: 1.5rem; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; }
.kpi-card b { font-size: 1.5rem; display: block; line-height: 1; } .kpi-card span { color: var(--muted); font-size: .85rem; }
.kpi-info i { background: #fff6dd; color: #8a5a00; } .kpi-success i { background: var(--success-soft); color: var(--success); } .kpi-danger i { background: var(--danger-soft); color: var(--danger); }
[data-theme="dark"] .kpi-info i { background: #2b2410; color: #fab219; }

/* Semester history */
.timeline-list { list-style: none; margin: 0; padding: 0 0 0 22px; border-left: 2px solid var(--line); }
.timeline-list li { position: relative; padding: 0 0 18px 8px; }
.timeline-list li::before { content: ""; position: absolute; left: -29px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2px solid var(--primary); }
.timeline-list li.is-current::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }

/* Timetable grid */
.tt-wrap { overflow-x: auto; }
.tt-grid { width: 100%; border-collapse: separate; border-spacing: 3px; min-width: 760px; table-layout: fixed; }
.tt-grid th { font-size: .75rem; font-weight: 700; text-align: center; padding: 6px 4px; color: var(--ink); background: var(--surface-2); border-radius: 6px; }
.tt-grid th small { display: block; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.tt-grid .tt-day { width: 96px; text-align: left; padding-left: 10px; }
.tt-grid td { vertical-align: top; height: 64px; padding: 2px; border-radius: 6px; background: color-mix(in srgb, var(--surface-2) 70%, transparent); border: 1px dashed var(--line); }
.tt-grid td.tt-break, .tt-grid th.tt-break-h { width: 34px; background: repeating-linear-gradient(135deg, var(--surface-2) 0 6px, var(--line) 6px 7px); border: 0; }
.tt-grid th.tt-break-h span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: .68rem; }
.tt-grid th.tt-break-h small { display: none; }
.tt-slot { --h: 160; position: relative; margin-bottom: 2px; padding: 5px 7px; border-radius: 6px; font-size: .74rem; line-height: 1.25;
  background: hsl(var(--h) 55% 94%); border-left: 4px solid hsl(var(--h) 55% 38%); color: #15231d; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
[data-theme="dark"] .tt-slot { background: hsl(var(--h) 30% 18%); border-left-color: hsl(var(--h) 55% 58%); color: var(--ink); }
.tt-slot b { display: block; font-size: .78rem; } .tt-slot span { display: block; opacity: .78; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-slot.tt-prac { background-image: repeating-linear-gradient(45deg, transparent 0 7px, rgba(0,0,0,.035) 7px 8px); }
.tt-icon { position: absolute; right: 6px; top: 5px; font-size: .72rem; opacity: .6; }
.tt-dense .tt-slot { padding: 3px 5px; font-size: .68rem; } .tt-dense .tt-slot b { font-size: .7rem; }
.tt-x { position: absolute; right: 2px; bottom: 2px; width: 20px; height: 20px; border: 0; border-radius: 50%; background: rgba(0,0,0,.08); color: inherit; font-weight: 800; line-height: 1; opacity: 0; transition: opacity .15s; }
.tt-slot:hover .tt-x, .tt-x:focus-visible { opacity: 1; } .tt-x:hover { background: var(--danger); color: #fff; }
@media (hover: none) { .tt-x { opacity: .8; } }
.tt-views { display: flex; flex-wrap: wrap; gap: 8px; }
.tt-view { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 600; font-size: .86rem; box-shadow: 0 2px 0 var(--line); }
.tt-view:hover { text-decoration: none; border-color: var(--primary); color: var(--primary); }
.tt-view.active { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: 0 2px 0 var(--primary-dark); }
.tt-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.tt-pill { display: inline-flex; gap: 6px; align-items: center; padding: 4px 10px; border-radius: 20px; font-size: .78rem; font-weight: 600; background: var(--surface-2); border: 1px solid var(--line); }
.tt-pill.ok { background: var(--success-soft); color: var(--success); border-color: transparent; } .tt-pill.draft { background: var(--accent-soft); color: #7a5a14; border-color: transparent; }
.tt-pill.warn { background: var(--warning-soft); color: var(--warning); border-color: transparent; }
[data-theme="dark"] .tt-pill.draft { color: var(--accent); }
.issue-group summary { cursor: pointer; font-weight: 600; } .issue-group li { margin-bottom: 3px; }
.avail-grid th, .avail-grid td { font-size: .76rem; vertical-align: middle; }
.print-head { display: none; }

/* =====================================================================
   Dashboard
   ===================================================================== */
.dash-hero { position: relative; overflow: hidden; border-radius: 16px; padding: 22px 24px 20px; color: #e9f3ee;
  background: linear-gradient(180deg, #0f4a37, #0c2a21); box-shadow: var(--shadow-2); }
.dash-hero::after { content: ""; position: absolute; right: -60px; top: -80px; width: 340px; height: 340px; border-radius: 50%; border: 1px solid rgba(255,255,255,.07); box-shadow: 0 0 0 40px rgba(255,255,255,.025), 0 0 0 80px rgba(255,255,255,.02); pointer-events: none; }
.dash-hero h2 { font-family: var(--serif); font-size: 1.65rem; color: #fff; margin: 0; }
.dash-hero .sub { color: #a9c7b9; font-size: .9rem; }
.dash-hero .btn-hero { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; padding: .35rem .8rem; font-size: .82rem; font-weight: 600; }
.dash-hero .btn-hero:hover { background: rgba(255,255,255,.18); text-decoration: none; }
.day-wrap { position: relative; margin-top: 26px; overflow-x: auto; padding-top: 4px; }
.day-strip { position: relative; display: grid; grid-auto-flow: column; gap: 4px; min-width: 620px; }
.day-p { position: relative; padding: 9px 8px 8px; border-radius: 8px; background: rgba(255,255,255,.06); min-height: 74px; }
.day-p.brk { background: repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 6px, rgba(255,255,255,.08) 6px 7px); }
.day-p.past { opacity: .5; }
.day-p.now { background: #f2e3bd; color: #1d1608; box-shadow: 0 8px 22px -10px rgba(0,0,0,.6); }
.day-p .t { font-size: .7rem; opacity: .75; font-variant-numeric: tabular-nums; }
.day-p .l { font-weight: 700; font-size: .82rem; } .day-p .n { font-size: .74rem; margin-top: 4px; }
.now-line { position: absolute; top: 0; bottom: 0; width: 2px; background: #f2e3bd; border-radius: 2px; z-index: 2; animation: nowIn .9s cubic-bezier(.2,.8,.3,1) both; }
@keyframes nowIn { from { opacity: 0; transform: scaleY(.2); } to { opacity: 1; transform: none; } }
.hero-facts { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 16px; font-size: .84rem; color: #cfe2d8; }
.hero-facts b { color: #fff; font-size: 1rem; margin-right: 4px; font-variant-numeric: tabular-nums; }

.quick-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1399px) { .quick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .quick-grid { grid-template-columns: 1fr; } }
.quick { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); color: var(--ink);
  box-shadow: var(--shadow-3d); transition: transform .15s cubic-bezier(.2,.8,.3,1), box-shadow .15s, border-color .15s; }
.quick:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: color-mix(in srgb, var(--primary) 30%, var(--line)); color: var(--ink); text-decoration: none; }
.quick:active { transform: translateY(0); }
.quick .qi { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 1.25rem; color: var(--primary); background: var(--primary-soft); }
.quick .qt { font-weight: 700; } .quick .qs { font-size: .78rem; color: var(--muted); font-weight: 500; }
.quick .qb { position: absolute; top: 12px; right: 12px; padding: 2px 8px; border-radius: 10px; font-size: .72rem; font-weight: 800; background: var(--danger); color: #fff; }

.chart-card .card-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 8px; }
.chart-card .card-header small { color: var(--muted); font-weight: 500; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .78rem; color: var(--muted); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
/* Heatmap: programmes × semesters, one hue light→dark */
.heat { width: 100%; border-collapse: separate; border-spacing: 2px; font-size: .78rem; }
.heat th { font-weight: 600; color: var(--muted); text-align: center; padding: 2px 4px; }
.heat th.rowh { text-align: left; color: var(--ink); white-space: nowrap; max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
.heat td { height: 30px; text-align: center; border-radius: 4px; font-variant-numeric: tabular-nums; font-weight: 600; outline: 2px solid transparent; outline-offset: -2px; }
.heat td:hover { outline-color: var(--ink); }
.heat td.h0 { background: var(--surface-2); color: var(--muted); font-weight: 400; } .heat td.h1 { background: var(--seq-1); } .heat td.h2 { background: var(--seq-2); }
.heat td.h3 { background: var(--seq-3); } .heat td.h4 { background: var(--seq-4); color: #fff; } .heat td.h5 { background: var(--seq-5); color: #fff; } .heat td.h6 { background: var(--seq-6); color: #fff; }
[data-theme="dark"] .heat td.h1, [data-theme="dark"] .heat td.h2, [data-theme="dark"] .heat td.h3, [data-theme="dark"] .heat td.h4 { color: var(--ink); } [data-theme="dark"] .heat td.h5, [data-theme="dark"] .heat td.h6 { color: #08211a; }
/* Horizontal bars (HTML, hover tooltip via title) */
.hbars { display: grid; gap: 7px; }
.hbar { display: grid; grid-template-columns: minmax(90px, 32%) 1fr auto; gap: 10px; align-items: center; font-size: .8rem; }
.hbar .lab { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); font-weight: 600; }
.hbar .track { position: relative; height: 14px; background: var(--grid); border-radius: 0 4px 4px 0; display: flex; gap: 2px; }
.hbar .seg { height: 100%; min-width: 3px; } .hbar .seg:last-of-type { border-radius: 0 4px 4px 0; }
.hbar .val { color: var(--muted); font-variant-numeric: tabular-nums; min-width: 58px; text-align: right; }
.hbar:hover .lab { color: var(--primary); }
.s1 { background: var(--series-1); } .s2 { background: var(--series-2); } .s3 { background: var(--series-3); }
.st-good { background: var(--st-good); } .st-warning { background: var(--st-warning); } .st-critical { background: var(--st-critical); }
.band { position: absolute; top: -3px; bottom: -3px; width: 0; border-left: 2px solid rgba(21,35,29,.5); }
[data-theme="dark"] .band { border-left-color: rgba(228,236,231,.55); }
.dash-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.dash-filters > div { min-width: 140px; flex: 1 1 140px; }
.table-view summary { cursor: pointer; font-size: .78rem; color: var(--muted); font-weight: 600; margin-top: 10px; }
.task-list { list-style: none; margin: 0; padding: 0; }
.task-list li { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--line); }
.task-list li:last-child { border-bottom: 0; }
.task-list .ti { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; }
.ti.crit { background: var(--danger-soft); color: var(--danger); } .ti.warn { background: var(--warning-soft); color: var(--warning); } .ti.good { background: var(--success-soft); color: var(--success); }
@media (prefers-reduced-motion: reduce) { .btn-3d, .quick, .kpi-card, .now-line { transition: none !important; animation: none !important; } .btn-3d:hover, .quick:hover, .kpi-card:hover { transform: none; } }

/* Printing timetables and reports (also "Save as PDF") */
@media print {
  .sidebar, .topbar, .sidebar-backdrop, .d-print-none, .btn, .alert { display: none !important; }
  .content { margin: 0 !important; padding: 0 !important; max-width: none; }
  body { background: #fff; font-size: 10pt; }
  .card, .card-3d { box-shadow: none !important; border: 0 !important; }
  .print-head { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 2px solid #0e5a43; padding-bottom: 6px; margin-bottom: 10px; }
  .print-inst { font-family: var(--serif); font-size: 13pt; font-weight: 700; }
  .tt-grid { min-width: 0; border-spacing: 2px; } .tt-grid td { height: auto; border: 1px solid #ccc; }
  .tt-slot { box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  @page { size: A4 landscape; margin: 10mm; }
}