/*
* ============================================================
* ADVISOR PORTAL — Global Design System (Taibah University)
* ============================================================
* Inter + DM Serif Display + JetBrains Mono + Noto Kufi Arabic
* Teal (#0A8E6E) brand with glassmorphism design language
* ============================================================
*/
/* ── FONTS — Taibah University brand ─────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=DM+Serif+Display:ital@0;1&family=JetBrains+Mono:wght@400;500;600;700&display=swap');
/* Arabic (loads only when page lang=ar) */
@import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@400;600;700&display=swap');
/* ============================================================
DESIGN TOKENS
============================================================ */
:root {
/* backgrounds */
--bg: #eef1f7;
--card: #ffffff;
--surface: #f3f6fa;
/* ink — WCAG AA compliant text hierarchy */
--ink: #111144;
--ink-2: #1e1e4a;
--t0: #111144;
--t1: #1e1e4a;
--t2: #3e3e62;
--t3: #5c5c7a;
--t4: #7a7a92;
--t5: #a8a8be;
--muted: #5c5c7a;
--muted-light: #7a7a92;
/* borders */
--line: #dde3ed;
--line-strong: #c8d0df;
--line-h: rgba(17,17,68,0.10);
--line-a: rgba(17,17,68,0.15);
/* Taibah University brand — primary teal */
--brand: #0A8E6E;
--brand-dark: #067858;
--brand-soft: rgba(10,142,110,0.06);
--brand-glow: rgba(10, 142, 110, 0.18);
/* Extended Taibah palette */
--teal: #0A8E6E;
--teal-bright: #0CA87E;
--teal-pale: #2EC9A0;
--teal-deep: #067858;
--teal-dim: rgba(10,142,110,0.06);
--teal-border: rgba(10,142,110,0.16);
--royal: #4056E3;
--royal-bright: #5068F0;
--royal-dim: rgba(64,86,227,0.06);
--royal-border: rgba(64,86,227,0.16);
--sky: #00AEDA;
--sky-bright: #10C0EC;
--sky-dim: rgba(0,174,218,0.06);
--rose: #e8849e;
--rose-dim: rgba(232,132,158,0.08);
--amber: #d97706;
--amber-dim: rgba(245,158,11,0.08);
--navy: #111144;
/* sidebar accent */
--sidebar-bar: #0CA87E;
--sidebar-glow: rgba(10, 142, 110, 0.28);
/* semantic */
--success: #0A8E6E;
--danger: #C03030;
--warning: #9A6A08;
/* shape */
--radius: 10px;
--radius-sm: 7px;
--radius-lg: 14px;
/* typography — Taibah brand fonts */
--font-body: 'Inter', 'Noto Kufi Arabic', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', 'Cascadia Code', ui-monospace, monospace;
--font-serif: 'DM Serif Display', serif;
/* shadows */
--shadow-card: 0 1px 3px rgba(13,21,38,.06), 0 8px 24px rgba(13,21,38,.07);
--shadow-lift: 0 4px 12px rgba(13,21,38,.10), 0 16px 40px rgba(13,21,38,.09);
--shadow-input: 0 1px 2px rgba(13,21,38,.04);
--shadow-sm: 0 1px 3px rgba(13,21,38,.08);
--shadow-neu: 6px 6px 16px rgba(163,177,198,0.35), -6px -6px 16px rgba(255,255,255,0.8);
--shadow-neu-sm: 3px 3px 8px rgba(163,177,198,0.3), -3px -3px 8px rgba(255,255,255,0.8);
--shadow-neu-inset: inset 3px 3px 6px rgba(163,177,198,0.35), inset -3px -3px 6px rgba(255,255,255,0.8);
/* borders — reusable subtle border */
--border-subtle: 1px solid rgba(17,17,68,0.05);
--border-mid: 1px solid rgba(17,17,68,0.08);
/* glassmorphism */
--glass-bg: rgba(255,255,255,0.55);
--glass-bg-data: rgba(255,255,255,0.72); /* tables, data cards — stronger for readability */
--glass-bg-header:rgba(255,255,255,0.82); /* table headers — strongest */
--glass-blur: blur(20px);
/* focus (teal ring for accessibility) */
--focus-ring: 0 0 0 2px #fff, 0 0 0 4px var(--teal);
/* transitions */
--ease: cubic-bezier(0.16,1,0.3,1);
--spring: cubic-bezier(0.34,1.56,0.64,1);
/* motion durations — standardise the 0.12 / 0.2 / 0.3s cluster */
--dur-fast: 0.12s;
--dur: 0.2s;
--dur-slow: 0.3s;
/* radius — fills gaps; --radius-md was referenced (L6113/6180) but undefined */
--radius-xs: 4px;
--radius-md: 12px;
--radius-pill: 999px;
--radius-full: 50%;
/* glass blur tiers — companions to --glass-blur (blur(20px)) */
--glass-blur-sm: blur(12px);
--glass-blur-lg: blur(24px);
/* spacing scale — derived from real px usage (≈8px base) */
--space-0: 0;
--space-1: 2px;
--space-2: 4px;
--space-3: 6px;
--space-4: 8px;
--space-5: 10px;
--space-6: 12px;
--space-7: 14px;
--space-8: 16px;
--space-10: 20px;
--space-12: 24px;
--space-16: 32px;
/* type scale — canonical sizes (mirrors the existing .fs-* utilities) */
--fs-sm: 0.72rem; /* satisfies legacy var(--fs-sm) reference (L695) */
--text-2xs: 0.62rem;
--text-xs: 0.7rem;
--text-sm: 0.78rem;
--text-base: 0.875rem;
--text-md: 1rem;
--text-lg: 1.15rem;
--text-xl: 1.4rem;
/* z-index layering scale — single source of stacking truth */
--z-base: 0;
--z-raised: 10;
--z-sticky: 100;
--z-sidebar: 200;
--z-fixed-bar: 900;
--z-drawer: 1500;
--z-modal: 2000;
--z-toast: 3000;
--z-loading-bar: 9000;
--z-skip-link: 9500;
--z-fullscreen: 9800;
/* glow ring — geometry for the recurring "0 0 Npx var(--brand-glow)" pattern */
--shadow-glow: 0 0 6px var(--brand-glow);
}
/* ============================================================
DARK MODE — Deep Navy
============================================================ */
html[data-theme="dark"] {
/* backgrounds */
--bg: #0d0f1a;
--card: #151826;
--surface: #1b1f30;
/* ink — inverted text hierarchy */
--ink: #e2e4ec;
--ink-2: #d0d2dc;
--t0: #e2e4ec;
--t1: #d0d2dc;
--t2: #c0c4d4;
--t3: #a0a4b8;
--t4: #7a7e92;
--t5: #505468;
--muted: #a0a4b8;
--muted-light: #7a7e92;
/* borders */
--line: rgba(255,255,255,0.06);
--line-strong: rgba(255,255,255,0.10);
--line-h: rgba(255,255,255,0.06);
--line-a: rgba(255,255,255,0.10);
/* brand — slightly brighter teal for dark bg */
--brand: #0CA87E;
--brand-dark: #2EC9A0;
--brand-soft: rgba(10,142,110,0.12);
--brand-glow: rgba(10,142,110,0.25);
/* Extended teal */
--teal: #0CA87E;
--teal-bright: #2EC9A0;
--teal-pale: #4DD9B4;
--teal-deep: #0CA87E;
--teal-dim: rgba(10,142,110,0.12);
--teal-border: rgba(10,142,110,0.24);
/* Extended palette */
--royal: #5068F0;
--royal-bright: #6B80FF;
--royal-dim: rgba(64,86,227,0.12);
--royal-border: rgba(64,86,227,0.24);
--sky: #10C0EC;
--sky-bright: #40D0F8;
--sky-dim: rgba(0,174,218,0.12);
--rose: #f0a0b4;
--rose-dim: rgba(240,160,180,0.12);
--amber: #f59e0b;
--amber-dim: rgba(245,158,11,0.14);
--navy: #e2e4ec; /* inverted for readability */
/* sidebar accent */
--sidebar-bar: #2EC9A0;
--sidebar-glow: rgba(10,142,110,0.35);
/* semantic */
--success: #2EC9A0;
--danger: #F06060;
--warning: #F5B731;
/* shadows — darker */
--shadow-card: 0 1px 3px rgba(0,0,0,.20), 0 8px 24px rgba(0,0,0,.30);
--shadow-lift: 0 4px 12px rgba(0,0,0,.25), 0 16px 40px rgba(0,0,0,.35);
--shadow-input: 0 1px 2px rgba(0,0,0,.15);
--shadow-sm: 0 1px 3px rgba(0,0,0,.28);
--shadow-neu: 4px 4px 12px rgba(0,0,0,0.40), -4px -4px 12px rgba(255,255,255,0.03);
--shadow-neu-sm: 2px 2px 6px rgba(0,0,0,0.35), -2px -2px 6px rgba(255,255,255,0.02);
--shadow-neu-inset: inset 2px 2px 5px rgba(0,0,0,0.35), inset -2px -2px 5px rgba(255,255,255,0.02);
/* borders */
--border-subtle: 1px solid rgba(255,255,255,0.05);
--border-mid: 1px solid rgba(255,255,255,0.08);
/* glassmorphism — dark glass */
--glass-bg: rgba(255,255,255,0.04);
--glass-bg-data: rgba(255,255,255,0.06);
--glass-bg-header:rgba(255,255,255,0.08);
/* focus ring */
--focus-ring: 0 0 0 2px #0d0f1a, 0 0 0 4px var(--teal);
color-scheme: dark;
}
/* ── Dark body background ── */
html[data-theme="dark"] body {
background: #0d0f1a !important;
color: var(--t2) !important;
}
/* ── Dark sidebar ── */
html[data-theme="dark"] .sidebar {
background: rgba(255,255,255,0.03);
border-inline-end-color: rgba(255,255,255,0.05);
}
html[data-theme="dark"] .sidebar .form-select {
background-color: rgba(255,255,255,0.06) !important;
color: var(--t2) !important;
border-color: rgba(255,255,255,0.08) !important;
}
html[data-theme="dark"] .sidebar .form-select:focus {
background-color: rgba(255,255,255,0.1) !important;
}
html[data-theme="dark"] .logo-area {
border-block-end-color: rgba(255,255,255,0.06);
}
/* ── Dark page header ── */
html[data-theme="dark"] .page-header {
background: rgba(13,15,26,0.6);
}
/* ── Dark color mesh ── */
html[data-theme="dark"] .color-mesh {
background:
radial-gradient(ellipse 80% 60% at 0% 0%, rgba(10,142,110,0.06) 0%, transparent 60%),
radial-gradient(ellipse 60% 55% at 45% 0%, rgba(0,174,218,0.04) 0%, transparent 55%),
radial-gradient(ellipse 55% 50% at 100% 5%, rgba(64,86,227,0.05) 0%, transparent 55%),
radial-gradient(ellipse 70% 50% at 15% 45%, rgba(64,224,208,0.04) 0%, transparent 50%),
radial-gradient(ellipse 50% 40% at 55% 40%, rgba(229,198,3,0.03) 0%, transparent 45%),
radial-gradient(ellipse 55% 50% at 95% 45%, rgba(255,209,220,0.04) 0%, transparent 50%),
radial-gradient(ellipse 60% 45% at 40% 90%, rgba(10,142,110,0.03) 0%, transparent 50%),
radial-gradient(ellipse 50% 45% at 85% 85%, rgba(0,174,218,0.03) 0%, transparent 50%),
radial-gradient(ellipse 45% 40% at 10% 90%, rgba(64,86,227,0.02) 0%, transparent 45%),
linear-gradient(160deg, #0a0c14 0%, #0c0f1c 25%, #0d0f1a 50%, #0b0e18 75%, #0d101c 100%);
}
/* ── Dark side decor ── */
html[data-theme="dark"] .side-decor { opacity: 0.12; }
/* ── Dark selection ── */
html[data-theme="dark"] ::selection { background: var(--teal); color: #fff; }
/* ── Dark form inputs ── */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
background-color: rgba(255,255,255,0.05) !important;
color: var(--t1) !important;
border-color: rgba(255,255,255,0.08) !important;
}
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
background-color: rgba(255,255,255,0.08) !important;
border-color: var(--teal) !important;
box-shadow: 0 0 0 3px rgba(10,142,110,0.2) !important;
}
html[data-theme="dark"] .form-control::placeholder {
color: var(--t5) !important;
}
/* ── Dark buttons ── */
html[data-theme="dark"] .btn-outline-secondary {
color: var(--t3) !important;
border-color: rgba(255,255,255,0.1) !important;
}
html[data-theme="dark"] .btn-outline-secondary:hover {
background: rgba(255,255,255,0.06) !important;
color: var(--t1) !important;
}
html[data-theme="dark"] .btn-outline-dark {
color: var(--t2) !important;
border-color: rgba(255,255,255,0.12) !important;
}
html[data-theme="dark"] .btn-outline-dark:hover {
background: rgba(255,255,255,0.08) !important;
color: #fff !important;
}
/* ── Dark table ── */
html[data-theme="dark"] table th {
color: var(--t3);
}
html[data-theme="dark"] table td {
border-color: rgba(255,255,255,0.04);
}html[data-theme="dark"] table thead th,
html[data-theme="dark"] .cmd-search-row,
html[data-theme="dark"] .dba-panel-header,
html[data-theme="dark"] .audit-table th,
html[data-theme="dark"] .audit-table td,
html[data-theme="dark"] .ap-drawer-section .table-wrap td {
border-bottom-color: rgba(255,255,255,0.06);
}
/* ── Dark scrollbar ── */
html[data-theme="dark"] ::-webkit-scrollbar-track {
background: rgba(255,255,255,0.02);
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.08);
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
background: rgba(255,255,255,0.14);
}
/* ── Dark pills ── */
html[data-theme="dark"] .pill-teal {
background: rgba(10,142,110,0.15);
}
html[data-theme="dark"] .pill-royal {
background: rgba(64,86,227,0.15);
}html[data-theme="dark"] .pill-muted,
html[data-theme="dark"] .sp-fill-wrap,
html[data-theme="dark"] .sp-progress,
html[data-theme="dark"] .pf-pw-bar-track {
background: rgba(255,255,255,0.06);
}
/* ── Dark back-to-top ── */
html[data-theme="dark"] .btt {
background: rgba(255,255,255,0.06) !important;
border-color: rgba(255,255,255,0.1) !important;
color: var(--t3) !important;
}
/* ── Dark mode: background + shadow overrides ─────────────
Kill hardcoded rgba(255,255,255,0.40) backgrounds AND
neumorphic shadows (rgba(163,177,198,...) + rgba(255,255,255,0.7+))
─────────────────────────────────────────────────────────── */
/* Cards & panels — dark surface (bg + border + shadow) for the classes
that share the teal-card treatment. .advisor-block, .cpanel, .zone-card,
.drawer moved to V2 UNIFIED dark rule. */
html[data-theme="dark"] .soft-card,
html[data-theme="dark"] .term-card,
html[data-theme="dark"] .term-details,
html[data-theme="dark"] .metric,
html[data-theme="dark"] .mc,
html[data-theme="dark"] .glass-card,
html[data-theme="dark"] .task-card {
background: rgba(255,255,255,0.04) !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
border: 1px solid rgba(10,142,110,0.2) !important;
}
/* Cards & panels — bg + shadow only (no teal border) */
html[data-theme="dark"] .filter-bar,
html[data-theme="dark"] .actions-row,
html[data-theme="dark"] .table-wrap,
html[data-theme="dark"] .page-nav,
html[data-theme="dark"] .skel-card,
html[data-theme="dark"] .glass-filter-row,
html[data-theme="dark"] .audit-table-wrap,
html[data-theme="dark"] .tbl-card tbody tr.cr-row,
html[data-theme="dark"] .mobile-cards tbody tr {
background: rgba(255,255,255,0.04) !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
}
/* Kill backdrop-filter in dark mode — flat look matching advisor-block */
html[data-theme="dark"] .mc,
html[data-theme="dark"] .cpanel,
html[data-theme="dark"] .soft-card,
html[data-theme="dark"] .zone-card,
html[data-theme="dark"] .metric,
html[data-theme="dark"] .glass-card {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
html[data-theme="dark"] .advisor-block h3,
html[data-theme="dark"] .zone-title,
html[data-theme="dark"] .um-panel-title,
html[data-theme="dark"] .cp-t,
html[data-theme="dark"] .dba-section-title,
html[data-theme="dark"] .pf-card-title,
html[data-theme="dark"] .pane-title,
html[data-theme="dark"] .ap-drawer-section-title,
html[data-theme="dark"] .et-panel > h6,
html[data-theme="dark"] .si-panel > h6,
html[data-theme="dark"] .cpanel > h6 {
color: #2ec9a0;
}
html[data-theme="dark"] .drawer h3 {
color: #e2e4ec;
}
/* Panels with stronger glass for data readability */
html[data-theme="dark"] .table-wrap,
html[data-theme="dark"] .soft-card {
background: rgba(255,255,255,0.06) !important;
}
/* Pagination bar */
html[data-theme="dark"] .pg-bar {
background: rgba(255,255,255,0.04) !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
}
/* Recommendation items */
html[data-theme="dark"] .rec {
background: rgba(255,255,255,0.04) !important;
box-shadow: none !important;
}
html[data-theme="dark"] .rec:hover {
background: rgba(10,142,110,0.08) !important;
box-shadow: none !important;
}
/* Table header hover */
html[data-theme="dark"] .table-wrap thead th:hover {
background: rgba(255,255,255,0.08) !important;
}
/* Table header row */
html[data-theme="dark"] .table-wrap thead {
background: rgba(255,255,255,0.06) !important;
}
/* Batch metrics — kill the hardcoded light green */
html[data-theme="dark"] #batchMetrics .metric {
background: rgba(255,255,255,0.04) !important;
border-color: rgba(255,255,255,0.06) !important;
}
/* Card/panel hover — slightly deeper */
html[data-theme="dark"] .soft-card:hover,
html[data-theme="dark"] .metric:hover,
html[data-theme="dark"] .mc:hover,
html[data-theme="dark"] .cpanel:hover,
html[data-theme="dark"] .tbl-card tbody tr.cr-row:hover,
html[data-theme="dark"] .tbl-card tbody tr.cr-row:focus-within {
background: rgba(255,255,255,0.06) !important;
box-shadow: 0 4px 16px rgba(0,0,0,0.35) !important;
}
/* Buttons — flat with subtle shadow */
html[data-theme="dark"] .btn-circle,
html[data-theme="dark"] .pg-btn,
html[data-theme="dark"] .fb-dd,
html[data-theme="dark"] .tbl-cnt,
html[data-theme="dark"] .pill-status,
html[data-theme="dark"] .empty-state-action,
html[data-theme="dark"] html body .btn:disabled,
html[data-theme="dark"] html body .btn.disabled {
box-shadow: 0 1px 4px rgba(0,0,0,0.2) !important;
}
/* Button hover — slight lift */
html[data-theme="dark"] .btn-circle:hover,
html[data-theme="dark"] .pg-btn:hover,
html[data-theme="dark"] .fb-dd:hover,
html[data-theme="dark"] html body .btn-outline-primary:hover,
html[data-theme="dark"] html body .btn-outline-secondary:hover,
html[data-theme="dark"] html body .btn-outline-success:hover,
html[data-theme="dark"] html body .btn-outline-danger:hover,
html[data-theme="dark"] html body .btn-outline-warning:hover,
html[data-theme="dark"] html body .btn-outline-info:hover,
html[data-theme="dark"] html body .btn-outline-dark:hover,
html[data-theme="dark"] html body .btn-export:hover,
html[data-theme="dark"] .page-header-right .btn-outline-secondary:hover {
box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}
/* Button active / pressed — inset dark */
html[data-theme="dark"] .btn-circle:active,
html[data-theme="dark"] .pg-btn.active,
html[data-theme="dark"] .fb-dd.active,
html[data-theme="dark"] html body .btn-outline-primary:active,
html[data-theme="dark"] html body .btn-outline-secondary:active {
box-shadow: inset 1px 1px 3px rgba(0,0,0,0.3) !important;
}
/* Button/input focus ring — keep teal ring, kill neumorphic */
html[data-theme="dark"] html body .btn:focus,
html[data-theme="dark"] html body .btn:focus-visible,
html[data-theme="dark"] .form-control:focus-visible,
html[data-theme="dark"] .form-select:focus-visible {
box-shadow: 0 0 0 3px rgba(10,142,110,0.2) !important;
}
/* Inputs — subtle inset */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
box-shadow: inset 0 1px 2px rgba(0,0,0,0.15) !important;
}
/* Inset-shadow field/icon surfaces — shared dark value */
html[data-theme="dark"] .fb-search,
html[data-theme="dark"] .dlg-icon,
html[data-theme="dark"] .dlg-input-row input,
html[data-theme="dark"] .mc-icon {
box-shadow: inset 0 1px 3px rgba(0,0,0,0.2) !important;
}
/* Inset + focus glow — shared dark value */
html[data-theme="dark"] .fb-search:focus-within,
html[data-theme="dark"] .dlg-input-row input:focus {
box-shadow: inset 0 1px 3px rgba(0,0,0,0.2), 0 0 0 3px rgba(10,142,110,0.2) !important;
}
/* Dialogs — clean dark shadow */
html[data-theme="dark"] .dlg-box {
box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
}
html[data-theme="dark"] .dlg-footer .btn-cancel:hover {
box-shadow: 0 2px 6px rgba(0,0,0,0.25) !important;
}
html[data-theme="dark"] .dlg-footer .btn-confirm:disabled {
box-shadow: 0 1px 3px rgba(0,0,0,0.15) !important;
}
/* Toast — dark shadow */
html[data-theme="dark"] .ux-toast {
box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important;
}
html[data-theme="dark"] .ux-toast-icon {
box-shadow: inset 0 1px 2px rgba(0,0,0,0.2) !important;
}
html[data-theme="dark"] .page-header-right .btn-outline-secondary {
box-shadow: 0 1px 3px rgba(0,0,0,0.15) !important;
}
/* ── Dark: cpanel header ─── */
html[data-theme="dark"] .cp-h {
background: rgba(255,255,255,0.06) !important;
}
/* ── Dark: conflict matrix ─── */
html[data-theme="dark"] .cm-table th,html[data-theme="dark"] .cm-table td{border-color:rgba(255,255,255,0.06)}
html[data-theme="dark"] .cm-corner{background:linear-gradient(135deg,rgba(10,142,110,0.12),rgba(64,86,227,0.12))}
html[data-theme="dark"] .cm-col-hdr,html[data-theme="dark"] .cm-row-hdr{background:rgba(255,255,255,0.06)}
html[data-theme="dark"] .cm-diag{background:rgba(10,142,110,0.1);border-color:rgba(10,142,110,0.2) !important}
html[data-theme="dark"] .cm-cell:hover{box-shadow:0 0 10px rgba(10,142,110,0.3)}
html[data-theme="dark"] .cm-table tr:hover .cm-row-hdr{background:rgba(10,142,110,0.15)}
/* ── Dark: dialog box ─── */
html[data-theme="dark"] .dlg-box {
background: #151826 !important;
box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
}
html[data-theme="dark"] .dlg-overlay {
background: rgba(0,0,0,0.6) !important;
}
/* ── Dark: .fb-dd & other button-like elements bg ─── */
html[data-theme="dark"] .fb-dd {
background: rgba(255,255,255,0.03) !important;
}
html[data-theme="dark"] .fb-dd:hover {
background: rgba(255,255,255,0.06) !important;
}
html[data-theme="dark"] .fb-dd.active {
background: rgba(10,142,110,0.08) !important;
}
/* ── Dark: btn-outline-dark hover (was hardcoded navy bg) ─── */
html[data-theme="dark"] html body .btn-outline-dark:hover {
background: rgba(255,255,255,0.08) !important;
}
/* ── Dark: .page-header bg ─── */
html[data-theme="dark"] .page-header {
background: rgba(13,15,26,0.6) !important;
}
/* ── Dark: table-wrap thead sticky bg ─── */
html[data-theme="dark"] .table-wrap thead th {
background: rgba(255,255,255,0.06) !important;
}
html[data-theme="dark"] .table-wrap thead th:hover {
background: rgba(255,255,255,0.10) !important;
}
/* ── Dark: mc spark bars ─── */
html[data-theme="dark"] .mc .spark .b {
background: rgba(255,255,255,0.08);
}
/* ── Dark: panel-specific hardcoded backgrounds ─── */
html[data-theme="dark"] #batchMetrics .metric {
background: rgba(255,255,255,0.04) !important;
border-color: rgba(10,142,110,0.2) !important;
}
html[data-theme="dark"] #advisorportfolio #advTable thead th {
background: rgba(10,142,110,0.08) !important;
color: var(--teal-bright) !important;
}
html[data-theme="dark"] #advisorportfolio .metric {
border-color: rgba(255,255,255,0.06) !important;
}
/* ── Dark: .tbl-card backgrounds ─── */
html[data-theme="dark"] .tbl-card {
background: transparent !important;
}
html[data-theme="dark"] .tbl-card thead th {
background: rgba(255,255,255,0.06) !important;
border-bottom-color: rgba(255,255,255,0.06) !important;
}
html[data-theme="dark"] .tbl-card tbody tr {
border-bottom-color: rgba(255,255,255,0.04) !important;
}
/* ── Dark: skel-block (skeleton loading) ─── */
html[data-theme="dark"] .skel-block {
background: rgba(255,255,255,0.06) !important;
}
/* ── Dark: .rec inset shadow (sticky-cta gradient) ─── */
html[data-theme="dark"] .sticky-cta::before {
opacity: 0.4;
}
/* ── Theme toggle button ── */
.theme-toggle {
display: flex; align-items: center; justify-content: center;
width: 32px; height: 32px; border-radius: 8px;
border: var(--border-mid);
background: transparent; cursor: pointer;
color: var(--t4); font-size: 16px;
transition: all 0.2s var(--ease);
}
.theme-toggle:hover { background: var(--brand-soft); color: var(--t2); }
html[data-theme="dark"] .theme-toggle {
border-color: rgba(255,255,255,0.08);
color: var(--t4);
}
html[data-theme="dark"] .theme-toggle:hover {
background: rgba(255,255,255,0.06);
color: #F5B731;
}
/* ============================================================
REUSABLE UTILITY CLASSES
============================================================ */
/* Glass card — the most repeated pattern across all templates */
.glass-card {
background: linear-gradient(160deg, var(--teal-dim) 0%, var(--card) 100%);
border: 1px solid var(--teal-border);
border-radius: var(--radius);
box-shadow: var(--shadow-card);
}
/* Neumorphic surface */
.neu { box-shadow: var(--shadow-neu); }
.neu-sm { box-shadow: var(--shadow-neu-sm); }
.neu-inset { box-shadow: var(--shadow-neu-inset); }
/* Common icon sizing — used 20+ times inline */
.i-xxs { width: 12px; height: 12px; }
.i-13 { width: 13px; height: 13px; }
.i-xs { width: 14px; height: 14px; }
.i-sm { width: 16px; height: 16px; }
.i-md { width: 20px; height: 20px; }
.i-lg { width: 24px; height: 24px; }
.i-xl { width: 32px; height: 32px; }
/* ── Utility classes ─ colour ──────────────────────────── */
.text-teal { color: var(--teal) !important; }
.text-warning { color: var(--warning) !important; }
.text-t3 { color: var(--t3) !important; }
.text-t4 { color: var(--t4) !important; }
.text-royal { color: var(--royal) !important; }
/* ── Utility classes ─ layout ──────────────────────────── */
.text-end { text-align: end !important; }
.u-border { border: 1px solid var(--line); }
/* ── Utility classes ─ typography ──────────────────────── */
.text-caps { text-transform: uppercase; letter-spacing: 0.04em; }
.font-mono { font-family: var(--font-mono); }
.fs-10 { font-size: 10px; }
.fs-11 { font-size: 11px; }
.fs-12 { font-size: 0.75rem; }
.fs-xs { font-size: 0.7rem; }
.fs-sm { font-size: 0.72rem; }
.fs-md { font-size: 0.78rem; }
/* ── Utility classes ─ misc ────────────────────────────── */
.u-cursor-pointer { cursor: pointer; }
/* Pill / chip — used in planner, dashboard, portfolio */
.pill {
display: inline-flex; align-items: center;
padding: 0.15rem 0.55rem;
border-radius: 999px;
font-size: var(--fs-sm, 0.72rem);
font-weight: 600;
white-space: nowrap;
line-height: 1.5;
}
.pill-teal { background: var(--teal-dim); color: var(--teal); border: 1px solid var(--teal-border); }
.pill-royal { background: var(--royal-dim); color: var(--royal); border: 1px solid var(--royal-border); }
.pill-sky { background: var(--sky-dim); color: var(--sky); }
.pill-muted { background: var(--brand-soft); color: var(--t3); border: var(--border-mid); }
.pill-danger { background: var(--pl-danger-bg); color: var(--danger); border: 1px solid rgba(192,48,48,0.14); }
/* ============================================================
FLUID TYPOGRAPHY SCALE
============================================================
All font-sizes use clamp(min, preferred, max) for smooth
scaling between mobile (375px) and desktop (1440px).
The preferred value is a calc() mixing rem + vw so text
grows linearly between the two breakpoints.
Scale tokens (CSS custom properties):
--fs-xs : 10px → 10px (utility / monospace labels)
--fs-sm : 11px → 12px (small text, badges, captions)
--fs-base : 13px → 15px (body copy, table cells, inputs)
--fs-md : 13px → 14px (nav links, card text)
--fs-lg : 15px → 18px (section titles, tbl-title)
--fs-xl : 18px → 22px (page-intro h2, panel h2)
--fs-2xl : 22px → 28px (metric card values)
--fs-3xl : 26px → 36px (hero metric card values)
Formula: clamp(min, calc(intercept_rem + slope_vw), max)
slope = (max - min) / (1440 - 375)
intercept = min - slope × 375
============================================================ */
/* ============================================================
BASE
============================================================ */
html {
font-family: var(--font-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Fluid root: 14px @ 375 → 16px @ 1440 */
font-size: clamp(0.875rem, 0.831rem + 0.19vw, 1rem);
}
body {
background: #f0f2f0 !important;
background-attachment: fixed;
color: var(--t2) !important;
font-family: var(--font-body) !important;
font-size: clamp(0.8125rem, 0.742rem + 0.19vw, 0.9375rem);
line-height: 1.5;
margin: 0;
}
/* ── Selection highlight ─────────────────────────────────── */
::selection { background: var(--teal); color: #fff; }
/* ── Skip-to-content link (accessibility) ───────────────── */
.skip-link {
position: absolute;
top: -100%;
inset-inline-start: 0;
z-index: 10000;
padding: 8px 16px;
background: var(--teal);
color: #fff;
font-weight: 600;
font-size: clamp(0.75rem, 0.715rem + 0.09vw, 0.8125rem); /* 12px → 13px */
text-decoration: none;
border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.skip-link:focus { top: 0; }
/* ── Thin custom scrollbars ──────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: var(--line-a) transparent; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-a); border-radius: 3px; }
/* ── Noise texture overlay for depth ─────────────────────── */
body::after {
content: '';
position: fixed;
inset: 0;
z-index: 9990;
pointer-events: none;
opacity: 0.02;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* ============================================================
BACKGROUND EFFECTS — gradient mesh + ambient blobs
============================================================ */
.color-mesh {
position: fixed; inset: 0; z-index: 0; pointer-events: none;
background:
radial-gradient(ellipse 80% 60% at 0% 0%, color-mix(in srgb, var(--teal) 10%, transparent) 0%, transparent 60%),
radial-gradient(ellipse 60% 55% at 45% 0%, rgba(0,174,218,0.07) 0%, transparent 55%),
radial-gradient(ellipse 55% 50% at 100% 5%, rgba(64,86,227,0.08) 0%, transparent 55%),
radial-gradient(ellipse 70% 50% at 15% 45%, rgba(64,224,208,0.07) 0%, transparent 50%),
radial-gradient(ellipse 50% 40% at 55% 40%, rgba(229,198,3,0.07) 0%, transparent 45%),
radial-gradient(ellipse 55% 50% at 95% 45%, rgba(255,209,220,0.11) 0%, transparent 50%),
radial-gradient(ellipse 60% 45% at 40% 90%, color-mix(in srgb, var(--teal) 5%, transparent) 0%, transparent 50%),
radial-gradient(ellipse 50% 45% at 85% 85%, rgba(0,174,218,0.06) 0%, transparent 50%),
radial-gradient(ellipse 45% 40% at 10% 90%, rgba(64,86,227,0.04) 0%, transparent 45%),
linear-gradient(160deg, #f2f5f2 0%, #f0f3f5 25%, #f2f0f3 50%, #f5f3f0 75%, #f2f5f3 100%);
}
/* ── Side decorative wave lines ─────────────────────────────
Flowing ribbon art that peeks in from page edges.
Sits BELOW the shell (z-index 0) so it never blocks
sidebar text or main content. CSS masks feather every edge
so the ribbon dissolves naturally into the background.
──────────────────────────────────────────────────────────── */
.side-decor {
position: fixed;
top: 0;
width: 420px;
height: 100vh;
pointer-events: none;
z-index: 2;
background-image: url("../img/side-decor1.6d5aea54500a.png");
background-repeat: no-repeat;
background-size: auto 105%; /* slight over-scale so ribbon fills full height */
background-position: center center;
opacity: 0.35;
transition: opacity 0.6s var(--ease);
}
/* ── Left ribbon: lives inside the sidebar, follows its visibility ── */
.side-decor-l {
position: absolute; /* relative to .sidebar */
top: 0; left: 0;
width: 100%; height: 100%;
transform: scaleX(-1);
background-position: center center;
background-size: auto 105%;
opacity: 0.3; /* boost — compensate for sidebar's glass overlay */
/* Mask: fade inner edge + soft top/bottom */
-webkit-mask-image:
linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 85%),
linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 5%, rgba(0,0,0,1) 90%, transparent 100%);
-webkit-mask-composite: source-in;
mask-image:
linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 85%),
linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 5%, rgba(0,0,0,1) 90%, transparent 100%);
mask-composite: intersect;
}
/* ── Right ribbon: max 10% of viewport width, always visible ── */
.side-decor-r {
right: 0;
width: 10vw; /* always 10% of screen width */
max-width: 300px; /* cap on very wide screens */
background-position: center center;
background-size: auto 105%;
/* Mask: fade inner edge + soft top/bottom */
-webkit-mask-image:
linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 90%),
linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 5%, rgba(0,0,0,1) 90%, transparent 100%);
-webkit-mask-composite: source-in;
mask-image:
linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 90%),
linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 5%, rgba(0,0,0,1) 90%, transparent 100%);
mask-composite: intersect;
}
/* Left decoration lives inside sidebar — follows its visibility */
/* ============================================================
LAYOUT
============================================================ */
.shell {
height: 100vh;
display: flex;
position: relative;
z-index: 1;
overflow: hidden;
}
/* ── Content wrap — constrains page content to readable width ── */
.content-wrap {
max-width: 1120px;
margin: 0 auto;
}
main.flex-grow-1 {
flex: 1;
padding: 1.5rem;
min-width: 0; /* prevent flex overflow */
overflow-y: auto;
overflow-x: hidden;
position: relative;
}
.system-footer {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 0.45rem;
margin: 2rem auto 0;
padding: 1rem 0 0.25rem;
color: var(--t4);
font-size: 0.74rem;
letter-spacing: 0.01em;
text-align: center;
border-top: 1px solid rgba(148,163,184,0.16);
}
.system-footer strong {
color: var(--t2);
font-weight: 800;
}
.system-footer-sep {
width: 4px;
height: 4px;
border-radius: 50%;
background: currentColor;
opacity: 0.45;
}
html[data-theme="dark"] .system-footer {
border-top-color: rgba(255,255,255,0.09);
}
/* ============================================================
SIDEBAR
============================================================ */
/* ── Icon system ──────────────────────────────────────────── */
.i { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex-shrink: 0; }
.i svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.i-sm { width: 14px; height: 14px; }
.i-sm svg { stroke-width: 2; }
.i-lg { width: 20px; height: 20px; }
.sidebar {
width: 252px;
height: 100vh;
background: var(--glass-bg);
backdrop-filter: blur(50px) saturate(160%);
-webkit-backdrop-filter: blur(50px) saturate(160%);
border-inline-end: var(--border-subtle);
display: flex;
flex-direction: column;
flex-shrink: 0;
position: relative;
}
/* Decorative gradient line on the sidebar edge */
.sidebar::after {
content: '';
position: absolute;
top: 0;
inset-inline-end: -1px;
width: 1.5px;
height: 40%;
background: linear-gradient(180deg, var(--teal), var(--sky), var(--royal), transparent);
opacity: 0.25;
}
/* ── Logo area ────────────────────────────────────────────── */
.logo-area {
padding: 20px 18px 22px;
display: flex;
align-items: center;
gap: 12px;
border-block-end: var(--border-subtle);
}
.logo-mark {
width: 40px;
height: 40px;
border-radius: 11px;
position: relative;
background: linear-gradient(135deg, var(--teal), var(--sky), var(--royal));
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 16px color-mix(in srgb, var(--teal) 20%, transparent),
0 2px 6px rgba(64,86,227,0.12),
0 1px 0 rgba(255,255,255,0.25) inset;
}
.logo-mark::before {
content: '';
position: absolute;
inset: 0;
border-radius: 11px;
background: linear-gradient(180deg, rgba(255,255,255,0.3), transparent 50%);
}
.logo-mark .i {
width: 22px; height: 22px;
color: #fff;
position: relative; z-index: 1;
filter: drop-shadow(0 1px 1px rgba(0,0,0,0.15));
}
.logo-title {
font-family: var(--font-serif);
font-size: clamp(1.0625rem, 0.992rem + 0.19vw, 1.25rem); /* 17px → 20px */
color: var(--navy);
line-height: 1.1;
letter-spacing: -0.01em;
}
.logo-sub {
font-size: clamp(0.5625rem, 0.539rem + 0.09vw, 0.625rem); /* 9px → 10px */
color: var(--t4);
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-top: 3px;
font-family: var(--font-mono);
}
/* ── Navigation sections ──────────────────────────────────── */
.nav-sec {
padding: 14px 10px;
flex: 1;
overflow-y: auto;
}
.nav-lbl {
padding: 14px 10px 5px;
font-size: clamp(0.5rem, 0.477rem + 0.09vw, 0.5625rem); /* 8px → 9px */
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--t3);
font-family: var(--font-mono);
}
/* ── Nav links ────────────────────────────────────────────── */
.nav-a {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
margin: 1.5px 0;
border-radius: var(--radius-sm);
color: var(--t3);
font-size: clamp(0.75rem, 0.715rem + 0.09vw, 0.8125rem); /* 12px → 13px */
font-weight: 400;
text-decoration: none;
cursor: pointer;
transition: all 0.15s var(--ease);
position: relative;
}
.nav-a:hover {
color: var(--t1);
background: color-mix(in srgb, var(--teal) 5%, transparent);
}
/* Active state */
.nav-a.active,
.nav-a.on {
color: var(--teal-deep);
font-weight: 600;
background: linear-gradient(135deg, color-mix(in srgb, var(--teal) 14%, transparent), rgba(0,174,218,0.05));
box-shadow: 0 0 0 1px var(--teal-border) inset;
}
.nav-a.active::before,
.nav-a.on::before {
content: '';
position: absolute;
inset-inline-start: 0;
top: 7px;
bottom: 7px;
width: 3px;
border-radius: 0 3px 3px 0;
background: linear-gradient(180deg, var(--teal), var(--sky));
box-shadow: 0 0 8px color-mix(in srgb, var(--teal) 30%, transparent), 0 0 4px rgba(0,174,218,0.2);
}
.nav-a .i { opacity: 0.4; color: var(--t3); }
.nav-a.active .i,
.nav-a.on .i { opacity: 0.9; color: var(--teal); }
/* Nav badge */
.nav-badge {
margin-inline-start: auto;
font-family: var(--font-mono);
font-size: 9px;
font-weight: 700;
min-width: 18px;
height: 18px;
border-radius: 99px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(192,48,48,0.08);
color: var(--danger);
border: 1px solid rgba(192,48,48,0.16);
}
/* ── Sidebar footer ──────────────────────────────────────── */
.s-foot {
margin-top: auto;
padding: 14px;
border-block-start: var(--border-subtle);
}
.s-usr {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: var(--radius-sm);
cursor: pointer;
transition: all 0.15s var(--ease);
text-decoration: none;
color: inherit;
}
.s-usr:hover {
background: color-mix(in srgb, var(--teal) 5%, transparent);
box-shadow: 0 0 0 1px var(--line) inset;
}
.avatar {
width: 32px;
height: 32px;
border-radius: 9px;
background: linear-gradient(135deg, var(--teal), var(--royal));
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 10px;
font-weight: 700;
font-family: var(--font-mono);
box-shadow: 0 2px 8px color-mix(in srgb, var(--teal) 20%, transparent),
0 1px 0 rgba(255,255,255,0.15) inset;
position: relative;
}
.avatar::after {
content: '';
position: absolute;
bottom: -1px;
inset-inline-end: -1px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--teal);
border: 2px solid #fff;
box-shadow: 0 0 4px color-mix(in srgb, var(--teal) 40%, transparent);
}
.u-nm { font-size: clamp(0.6875rem, 0.664rem + 0.09vw, 0.75rem); /* 11px → 12px */ font-weight: 600; color: var(--t1); }
.u-rl { font-size: clamp(0.5625rem, 0.539rem + 0.09vw, 0.625rem); /* 9px → 10px */ color: var(--t4); font-family: var(--font-mono); }
.s-usr-row { display: flex; align-items: center; gap: 4px; }
.s-usr-row .s-usr { flex: 1; min-width: 0; }
.s-usr-logout {
display: flex; align-items: center; justify-content: center;
width: 32px; height: 32px; border-radius: var(--radius-sm);
color: var(--t4); transition: all 0.15s var(--ease);
flex-shrink: 0;
}
.s-usr-logout .i { width: 16px; height: 16px; }
.s-usr-logout:hover { background: rgba(192,48,48,0.08); color: var(--danger); }
.s-lang { margin-top: 10px; }
/* Language switcher inside glassmorphism sidebar */
.sidebar .form-select {
background-color: var(--glass-bg) !important;
border-color: var(--line-h) !important;
color: var(--t2) !important;
font-size: clamp(0.75rem, 0.729rem + 0.09vw, 0.82rem); /* ~12px → 13.1px */
font-family: var(--font-body);
border-radius: var(--radius-sm);
}
.sidebar .form-select:focus {
background-color: var(--glass-bg-data) !important;
border-color: var(--teal) !important;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 15%, transparent) !important;
color: var(--t0) !important;
}
/* ============================================================
PAGE HEADER (sticky context bar on every page)
============================================================ */
.page-header {
position: relative;
z-index: 50;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.65rem 1.5rem;
margin: -1.5rem -1.5rem 1.25rem -1.5rem;
background: var(--glass-bg);
backdrop-filter: blur(24px) saturate(130%);
-webkit-backdrop-filter: blur(24px) saturate(130%);
border-bottom: none;
}
.page-header::after {
content: '';
position: absolute;
bottom: -1px;
inset-inline-start: 0;
inset-inline-end: 0;
height: 2px;
background: linear-gradient(90deg, var(--teal), var(--sky) 35%, var(--royal) 65%, transparent);
opacity: 0.15;
}
/* p-3 main (planner, user-mgmt, portfolio) adjusts bleed */
main.p-3 .page-header {
padding: 0.5rem 1rem;
margin: -1rem -1rem 1.25rem -1rem;
}
.page-header-left { display: flex; flex-direction: column; gap: 0.2rem; }
.page-header-module { font-weight: 700; font-size: clamp(0.875rem, 0.831rem + 0.19vw, 1rem); /* 14px → 16px */ color: var(--navy); letter-spacing: -0.01em; }
.page-header-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
.page-header-right { flex-shrink: 0; display: flex; align-items: center; gap: 0.5rem; }
/* ── Header logout (smaller, flatter) ── */
.page-header-right .btn-outline-secondary {
font-size: 0.7rem !important;
min-height: unset !important;
padding: 0.22rem 0.65rem !important;
border-radius: 8px !important;
box-shadow: var(--shadow-neu-sm) !important;
letter-spacing: 0.01em;
}
.page-header-right .btn-outline-secondary:hover {
box-shadow: var(--shadow-neu) !important;
}
/* ── Page-header chips ── */
.ph-chip {
display: inline-block;
font-size: 0.7rem; font-weight: 600;
padding: 0.15rem 0.5rem; border-radius: 999px;
letter-spacing: 0.01em; white-space: nowrap;
}
.ph-chip-role,
.ph-chip-page { background: var(--teal-dim); color: var(--teal-deep); border: 1px solid var(--teal-border); }
.ph-chip-scope,
.ph-chip-gray { background: var(--brand-soft); color: var(--t3); border: var(--border-mid); }
.ph-chip-scope { max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.ph-chip-dept,
.ph-chip-status { background: var(--teal-dim); color: var(--teal-deep); border: 1px solid var(--teal-border); }
.ph-chip-context { background: var(--teal-dim); color: var(--teal); border: 1px solid var(--teal-border); font-family: var(--font-mono); }
.ph-chip-danger { background: var(--pl-danger-bg); color: var(--danger); border: 1px solid rgba(192,48,48,0.14); }
.ph-chip-warn { background: rgba(154,106,8,0.06); color: var(--warning); border: 1px solid rgba(154,106,8,0.14); }
/* ── Top loading bar ── */
#ux-loading-bar {
position: fixed; top: 0; inset-inline-start: 0; inset-inline-end: 0; height: 3px; z-index: 9999;
background: linear-gradient(90deg, transparent 0%, var(--teal) 30%, var(--teal-bright) 70%, transparent 100%);
background-size: 200% 100%;
animation: ux-loading-sweep 1.2s linear infinite;
opacity: 0; transition: opacity 0.2s var(--ease); pointer-events: none;
}
#ux-loading-bar.active { opacity: 1; }
@keyframes ux-loading-sweep {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* ── Button loading spinner ── */
.ux-loading {
position: relative !important;
padding-inline-start: 2rem !important;
}
.ux-loading::before {
content: '';
position: absolute;
inset-inline-start: 0.6rem;
top: 50%;
transform: translateY(-50%);
width: 12px; height: 12px;
border: 2px solid rgba(255,255,255,0.35);
border-top-color: currentColor;
border-radius: 50%;
animation: ux-spin 0.7s linear infinite;
}
.ux-loading.btn-outline-secondary::before,
.ux-loading.btn-outline-dark::before,
.ux-loading.btn-outline-primary::before {
border-color: rgba(0,0,0,0.18);
border-top-color: currentColor;
}
@keyframes ux-spin { to { transform: translateY(-50%) rotate(360deg); } }
/* ── Empty states ── */
.empty-state {
text-align: center; padding: 2.5rem 1.5rem;
color: var(--t4); display: flex; flex-direction: column; align-items: center;
}
.empty-state .i { display: inline-flex; align-items: center; justify-content: center; opacity: 0.45; }
.empty-icon { display: block; font-size: 2rem; margin-bottom: 0.5rem; opacity: 0.6; }
.empty-title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(0.8125rem, 0.742rem + 0.38vw, 0.9375rem); /* 13px → 15px */ color: var(--t2); margin-bottom: 4px; }
.empty-hint { font-size: clamp(0.6875rem, 0.664rem + 0.09vw, 0.75rem); /* 11px → 12px */ color: var(--t3); line-height: 1.5; font-weight: 300; }
.empty-hint strong { color: var(--teal); }
/* Remove table-striped odd-row override */
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: transparent; }
/* ============================================================
PANELS (keep !important — panels share .card with Bootstrap)
============================================================ */
.panel {
display: none !important;
opacity: 0;
transform: translateY(6px);
transition: opacity .20s var(--ease), transform .20s var(--ease);
padding: 0;
}
.panel.active {
display: block !important;
opacity: 1;
transform: translateY(0);
}
.panel h2 {
margin-bottom: 0.2rem;
font-family: var(--font-serif);
font-weight: 400;
font-size: clamp(1rem, 0.944rem + 0.23vw, 1.15rem); /* 16px → 18.4px */
color: var(--navy);
letter-spacing: -0.01em;
}
/* ── Page intro (h2 heading + subtitle below page-header) ── */
.page-intro { margin: 0.75rem 0 1.25rem; }
.page-intro h2 { font-family: var(--font-serif); font-weight: 700; font-size: clamp(1.125rem, 0.948rem + 0.75vw, 1.375rem); /* 18px → 22px */ color: var(--navy); letter-spacing: -0.01em; margin: 0 0 4px; }
.panel-sub {
color: var(--t3);
font-size: clamp(0.8rem, 0.78rem + 0.09vw, 0.875rem); /* ~12.8px → 14px */
margin-bottom: 1.25rem;
max-width: 80ch;
line-height: 1.5;
}
/* ============================================================
CARDS
============================================================ */
.soft-card {
border: 1px solid var(--teal-border) !important;
border-radius: var(--radius) !important;
background: linear-gradient(160deg, var(--teal-dim) 0%, var(--card) 100%) !important;
box-shadow: var(--shadow-card) !important;
padding: 1.25rem;
margin-bottom: 1rem;
transition: all 0.25s var(--ease);
position: relative;
overflow: hidden;
}
.soft-card:hover {
box-shadow: var(--shadow-lift) !important;
background: var(--glass-bg) !important;
transform: translateY(-1px);
}
/* ============================================================
FORMS
============================================================ */
.form-label {
font-family: var(--font-body) !important;
font-size: clamp(0.68rem, 0.663rem + 0.07vw, 0.75rem) !important; /* ~10.9px → 12px */
font-weight: 700 !important;
color: var(--ink-2) !important;
letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: 0.3rem;
display: block;
}
.form-control,
.form-select {
font-family: var(--font-body) !important;
font-size: clamp(0.8rem, 0.78rem + 0.09vw, 0.875rem) !important; /* ~12.8px → 14px */
color: var(--ink) !important;
border: var(--border-mid) !important;
border-radius: 14px !important;
background-color: transparent !important;
padding: 0.45rem 1rem !important;
box-sizing: border-box !important;
max-width: 100% !important;
box-shadow: var(--shadow-neu-inset) !important;
transition: box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.form-control:hover,
.form-select:hover { border-color: var(--line-a) !important; }
.form-control:focus,
.form-select:focus {
background-color: transparent !important;
box-shadow: var(--shadow-neu-inset),
0 0 0 2px color-mix(in srgb, var(--teal) 50%, transparent) !important;
outline: none !important;
border-color: color-mix(in srgb, var(--teal) 30%, transparent) !important;
}
/* ── Compact inputs for small numeric values ───────────── */
.form-control-compact {
max-width: 80px !important;
text-align: center;
font-variant-numeric: tabular-nums;
font-family: var(--font-mono);
}
/* Chrome autofill override — delay bg-color change forever */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus,
.form-control:-webkit-autofill:active,
.form-select:-webkit-autofill,
.form-select:-webkit-autofill:hover,
.form-select:-webkit-autofill:focus,
.form-select:-webkit-autofill:active {
-webkit-text-fill-color: var(--ink, #0d1526) !important;
caret-color: var(--ink, #0d1526);
transition: background-color 9999s ease-in-out 0s,
color 9999s ease-in-out 0s !important;
}
/* Hide browser credential buttons */
.form-control::-ms-reveal,
.form-control::-ms-clear,
.form-control::-webkit-credentials-auto-fill-button { display: none !important; }
/* Textareas keep rounded-rectangle */
textarea.form-control {
border-radius: 14px !important;
padding: 0.45rem 1rem !important;
}
/* ============================================================
BUTTONS (html body prefix for specificity over Bootstrap)
Neumorphic raised style — lifted surface with soft shadows
============================================================ */
html body .btn {
font-family: var(--font-body) !important;
font-weight: 600 !important;
font-size: clamp(0.8rem, 0.78rem + 0.09vw, 0.875rem) !important; /* ~12.8px → 14px */
border-radius: 14px !important;
border: none !important;
min-height: 38px;
padding: 0.45rem 1.25rem !important;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
transition: all .20s var(--ease) !important;
}
/* ── Filled buttons — raised neumorphic with colour fill ── */
html body .btn-primary {
background: var(--teal) !important;
color: #fff !important;
box-shadow: 3px 3px 8px color-mix(in srgb, var(--teal) 35%, transparent),
-2px -2px 6px rgba(255,255,255,0.25) !important;
}
html body .btn-primary:hover,
html body .btn-primary:focus {
background: var(--teal-bright) !important;
box-shadow: 4px 4px 12px color-mix(in srgb, var(--teal) 40%, transparent),
-2px -2px 8px rgba(255,255,255,0.3) !important;
}
html body .btn-primary:active {
background: var(--teal-deep) !important;
box-shadow: inset 2px 2px 6px rgba(0,0,0,0.15),
inset -2px -2px 6px rgba(255,255,255,0.1) !important;
}
html body .btn-success {
background: var(--teal) !important;
color: #fff !important;
box-shadow: 3px 3px 8px color-mix(in srgb, var(--teal) 35%, transparent),
-2px -2px 6px rgba(255,255,255,0.25) !important;
}
html body .btn-success:hover {
background: var(--teal-bright) !important;
box-shadow: 4px 4px 12px color-mix(in srgb, var(--teal) 40%, transparent),
-2px -2px 8px rgba(255,255,255,0.3) !important;
}
html body .btn-success:active {
box-shadow: inset 2px 2px 6px rgba(0,0,0,0.15),
inset -2px -2px 6px rgba(255,255,255,0.1) !important;
}
html body .btn-danger {
background: var(--danger) !important;
color: #fff !important;
box-shadow: 3px 3px 8px rgba(192,48,48,0.3),
-2px -2px 6px rgba(255,255,255,0.2) !important;
}
html body .btn-danger:hover {
box-shadow: 4px 4px 12px rgba(192,48,48,0.4),
-2px -2px 8px rgba(255,255,255,0.25) !important;
}
html body .btn-danger:active {
box-shadow: inset 2px 2px 6px rgba(0,0,0,0.15),
inset -2px -2px 6px rgba(255,255,255,0.1) !important;
}
/* Warning (amber) */
html body .btn-warning {
background: var(--amber) !important;
color: #fff !important;
box-shadow: 3px 3px 8px rgba(217,119,6,0.3),
-2px -2px 6px rgba(255,255,255,0.2) !important;
}
html body .btn-warning:hover {
background: var(--pl-warn-text) !important;
box-shadow: 4px 4px 12px rgba(217,119,6,0.4),
-2px -2px 8px rgba(255,255,255,0.25) !important;
}
html body .btn-warning:active {
box-shadow: inset 2px 2px 6px rgba(0,0,0,0.15),
inset -2px -2px 6px rgba(255,255,255,0.1) !important;
}
/* ── Outline variants — soft raised surface ────────────── */
html body .btn-outline-primary {
color: var(--teal) !important;
background: transparent !important;
box-shadow: var(--shadow-neu-sm) !important;
}
html body .btn-outline-primary:hover {
background: color-mix(in srgb, var(--teal) 5%, transparent) !important;
color: var(--teal-deep) !important;
box-shadow: var(--shadow-neu) !important;
}
html body .btn-outline-primary:active {
box-shadow: var(--shadow-neu-inset) !important;
}
html body .btn-outline-secondary {
color: var(--t2) !important;
background: transparent !important;
box-shadow: var(--shadow-neu-sm) !important;
}
html body .btn-outline-secondary:hover {
background: var(--brand-soft) !important;
color: var(--t1) !important;
box-shadow: var(--shadow-neu) !important;
}
html body .btn-outline-secondary:active {
box-shadow: var(--shadow-neu-inset) !important;
}
html body .btn-outline-success {
color: var(--teal) !important;
background: transparent !important;
box-shadow: var(--shadow-neu-sm) !important;
}
html body .btn-outline-success:hover {
background: color-mix(in srgb, var(--teal) 5%, transparent) !important;
color: var(--teal-deep) !important;
box-shadow: var(--shadow-neu) !important;
}
html body .btn-outline-danger {
color: var(--danger) !important;
background: transparent !important;
box-shadow: var(--shadow-neu-sm) !important;
}
html body .btn-outline-danger:hover {
background: rgba(192,48,48,0.05) !important;
color: #a02020 !important;
box-shadow: var(--shadow-neu) !important;
}
html body .btn-outline-warning {
color: #92400e !important;
background: transparent !important;
box-shadow: var(--shadow-neu-sm) !important;
}
html body .btn-outline-warning:hover {
background: rgba(217,119,6,0.05) !important;
color: #78350f !important;
box-shadow: var(--shadow-neu) !important;
}
html body .btn-outline-info {
color: var(--sky) !important;
background: transparent !important;
box-shadow: var(--shadow-neu-sm) !important;
}
html body .btn-outline-info:hover {
background: rgba(0,174,218,0.05) !important;
color: #0284a0 !important;
box-shadow: var(--shadow-neu) !important;
}
html body .btn-outline-dark {
color: var(--t1) !important;
background: transparent !important;
box-shadow: var(--shadow-neu-sm) !important;
}
html body .btn-outline-dark:hover {
background: var(--brand-soft) !important;
color: var(--navy) !important;
box-shadow: var(--shadow-neu) !important;
}
/* ── Small button size ────────────────────────────────────── */
html body .btn-sm,
html body .btn.btn-sm {
font-size: clamp(0.72rem, 0.696rem + 0.09vw, 0.8rem) !important; /* ~11.5px → 12.8px */
min-height: 32px;
padding: 0.3rem 0.85rem !important;
border-radius: 10px !important;
}
html body .btn:focus,
html body .btn:focus-visible {
outline: none !important;
box-shadow: 0 0 0 2px color-mix(in srgb, var(--teal) 50%, transparent),
var(--shadow-neu-sm) !important;
}
/* ============================================================
ACTIONS ROW
============================================================ */
.actions-row {
display: flex;
gap: 0.5rem;
row-gap: 0.5rem;
flex-wrap: wrap;
align-items: center;
padding: 0.5rem;
border: none;
border-radius: 14px;
background: var(--glass-bg);
backdrop-filter: blur(12px);
margin-bottom: 1rem;
box-shadow: var(--shadow-neu);
}
.actions-row .btn,
.actions-row .form-select,
.actions-row .form-control { min-height: 36px; }
@media (max-width: 1280px) and (min-width: 1024px) {
.actions-row { gap: 0.35rem; }
.actions-row .btn { font-size: 0.8rem !important; padding: 0.35rem 0.9rem !important; }
}
/* ── ≤1200px — Compact sidebar for mid-size screens ──────── */
@media (max-width: 1200px) {
.sidebar { width: 210px; }
.logo-area {
padding: 14px 14px 16px;
gap: 10px;
}
.logo-mark { width: 34px; height: 34px; border-radius: 9px; }
.logo-mark .i { width: 18px; height: 18px; }
.logo-title { font-size: 0.95rem; }
.logo-sub { font-size: 0.5rem; margin-top: 2px; }
.nav-lbl { padding: 10px 10px 3px; font-size: 0.48rem; }
.nav-a { padding: 7px 10px; gap: 8px; font-size: 0.75rem; margin: 1px 0; }
.nav-a .i { width: 15px; height: 15px; }
.s-foot { padding: 10px 12px; }
.s-usr { gap: 8px; }
.avatar { width: 30px; height: 30px; font-size: 0.65rem; }
.u-nm { font-size: 0.75rem; }
.u-rl { font-size: 0.55rem; }
.s-usr-logout { width: 28px; height: 28px; }
.s-usr-logout .i { width: 14px; height: 14px; }
.s-lang select { font-size: 0.7rem; padding: 3px 6px; }
}
#student .actions-row, #batch .actions-row, #plan .actions-row,
#prereq .actions-row, #eligibility .actions-row, #advisoradmin .actions-row,
#advisorportfolio .actions-row, #usermgmt .actions-row, #dbadmin .actions-row,
#exports .actions-row, #highpriority .actions-row { padding: 0.5rem; }
/* ============================================================
TABLE WRAP
============================================================ */
.table-wrap {
max-height: 420px;
overflow: auto;
border: none;
border-radius: 14px;
background: var(--glass-bg-data);
backdrop-filter: blur(16px) saturate(120%);
-webkit-backdrop-filter: blur(16px) saturate(120%);
box-shadow: var(--shadow-neu);
scrollbar-width: thin;
scrollbar-color: var(--line-strong) transparent;
}
.table-wrap tbody tr { transition: background .10s var(--ease); }
.table-wrap tbody tr:hover td { background: color-mix(in srgb, var(--teal) 7%, transparent); }
.table-wrap thead th {
background: var(--glass-bg-header) !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 2px solid color-mix(in srgb, var(--teal) 15%, transparent);
cursor: pointer;
font-family: var(--font-mono);
font-weight: 700;
font-size: clamp(0.75rem, 0.715rem + 0.09vw, 0.8125rem); /* 12px → 13px (a11y: min 12px) */
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--t3);
padding: 0.55rem 0.75rem;
text-align: start;
white-space: nowrap;
user-select: none;
}
.table-wrap thead th:hover { background: var(--glass-bg-data) !important; color: var(--t3); }
/* Sorted-column visual indicator */
.table-wrap thead th.sorted { color: var(--teal); }
.table-wrap thead th.sorted::after { content: ' \25B2'; font-size: 0.55rem; opacity: 0.7; }
.table-wrap thead th.sorted.desc::after { content: ' \25BC'; }
.table-wrap tbody td {
font-family: var(--font-body);
font-size: clamp(0.78rem, 0.757rem + 0.09vw, 0.875rem); /* ~12.5px → 14px */
vertical-align: middle;
padding: 0.5rem 0.75rem;
border-top: 1px solid var(--line);
color: var(--ink);
}
.table-wrap tbody tr:first-child td { border-top: none; }
.table-compact th,
.table-compact td { padding: 0.22rem 0.4rem !important; font-size: 0.8rem; }
/* ============================================================
CARD-ROW TABLE — Glassmorphic table rows (Taibah mockup)
============================================================ */
/* ── Table section wrapper ── */
.tbl-section { margin-bottom:24px; }
.tbl-header {
display:flex; align-items:center; justify-content:space-between;
margin-bottom:14px; padding:0 4px;
}
.tbl-title {
font-family:var(--font-serif); font-size:clamp(0.9375rem, 0.849rem + 0.38vw, 1.125rem); /* 15px → 18px */ color:var(--navy);
display:flex; align-items:center; gap:10px; line-height:1.1;
}
.tbl-cnt {
font-family:var(--font-mono); font-size:10px; font-weight:700;
padding:3px 9px; border-radius:999px;
background:var(--brand-soft); color:var(--teal); border:none;
box-shadow:var(--shadow-neu-sm);
}
.tbl-actions { display:flex; gap:6px; }
.tbl-card { width:100%; border-collapse:separate; border-spacing:0 8px; }
.tbl-card thead th {
font-size:clamp(0.75rem, 0.715rem + 0.09vw, 0.8125rem); /* 12px → 13px (a11y: min 12px) */ font-weight:700; text-transform:uppercase;
letter-spacing:0.08em; color:var(--t3); padding:0 14px 4px;
font-family:var(--font-mono); cursor:pointer;
user-select:none; transition:color .12s var(--ease); border:none;
white-space:nowrap;
}
.tbl-card thead th:hover { color:var(--t3); }
.tbl-card thead th.sorted { color:var(--teal); }
.tbl-card thead th .sort-arrow {
display:inline-block; font-size:8px; opacity:0.3; margin-inline-start:3px;
transition:opacity .12s;
}
.tbl-card thead th:hover .sort-arrow { opacity:0.7; }
.tbl-card thead th.sorted .sort-arrow { opacity:1; color:var(--teal); }
/* ── Card rows — glassmorphic table rows ── */
.tbl-card tbody tr.cr-row {
background:var(--glass-bg-data);
backdrop-filter:blur(16px) saturate(120%);
-webkit-backdrop-filter:blur(16px) saturate(120%);
box-shadow:var(--shadow-neu-sm);
transition:all .2s var(--ease);
cursor:pointer; position:relative;
}
.tbl-card tbody tr.cr-row td {
padding:14px 14px; border:none;
border-top:var(--border-subtle);
border-bottom:var(--border-subtle);
vertical-align:middle; font-size:clamp(0.75rem, 0.715rem + 0.09vw, 0.8125rem); /* 12px → 13px */
}
.tbl-card tbody tr.cr-row td:first-child {
border-radius:var(--radius) 0 0 var(--radius);
border-inline-start:3px solid transparent;
transition:border-color .2s var(--ease);
}
.tbl-card tbody tr.cr-row td:last-child {
border-radius:0 var(--radius) var(--radius) 0;
border-inline-end:var(--border-subtle);
}
[dir="rtl"] .tbl-card tbody tr.cr-row td:first-child {
border-radius:0 var(--radius) var(--radius) 0;
}
[dir="rtl"] .tbl-card tbody tr.cr-row td:last-child {
border-radius:var(--radius) 0 0 var(--radius);
}
.tbl-card tbody tr.cr-row:hover {
transform:translateY(-2px);
box-shadow:var(--shadow-neu);
background:var(--glass-bg);
}
.tbl-card tbody tr.cr-row:hover td:first-child {
border-inline-start-color:var(--teal);
}
[dir="rtl"] .tbl-card tbody tr.cr-row:hover td:first-child {
border-inline-start-color:var(--teal);
}
.tbl-card tbody tr.cr-row.selected {
background:color-mix(in srgb, var(--teal) 4%, transparent);
}
.tbl-card tbody tr.cr-row.selected td:first-child {
border-inline-start-color:var(--teal);
}
[dir="rtl"] .tbl-card tbody tr.cr-row.selected td:first-child {
border-inline-start-color:var(--teal);
}
/* Group separator every 3 rows for visual rhythm */
.tbl-card tbody tr.cr-row:nth-child(3n+4) td {
padding-top:22px;
}
/* Cell typography */
.cr-id {
font-family:var(--font-mono); font-size:clamp(0.6875rem, 0.664rem + 0.09vw, 0.75rem); /* 11px → 12px */
font-weight:700; color:var(--teal);
transition:text-shadow .2s var(--ease);
}
.tbl-card tbody tr.cr-row:hover .cr-id {
text-shadow:0 0 8px color-mix(in srgb, var(--teal) 20%, transparent);
}
.cr-nm { color:var(--navy); font-weight:600; font-size:clamp(0.75rem, 0.715rem + 0.14vw, 0.844rem); /* 12px → 13.5px */ }
.cr-sub { font-size:clamp(0.625rem, 0.601rem + 0.09vw, 0.656rem); /* 10px → 10.5px */ color:var(--t4); margin-top:1px; font-weight:300; }
.cr-prog { font-size:clamp(0.75rem, 0.715rem + 0.09vw, 0.8125rem); /* 12px → 13px */ color:var(--t2); font-weight:400; }
.cr-gpa {
font-family:var(--font-mono); font-weight:700; font-size:clamp(0.75rem, 0.715rem + 0.09vw, 0.8125rem); /* 12px → 13px */
}
.cr-gpa-hi { color:var(--teal); }
.cr-gpa-md { color:var(--t1); }
.cr-gpa-lo { color:var(--danger); }
/* Progress bar */
.cr-bar { display:flex; align-items:center; gap:8px; }
.cr-track {
width:56px; height:6px; border-radius:3px;
background:var(--brand-soft); overflow:hidden;
box-shadow:0 1px 2px rgba(0,0,0,0.03) inset;
}
.cr-fill { height:100%; border-radius:3px; }
.cr-fill-hi { background:linear-gradient(90deg, var(--teal), var(--sky)); }
.cr-fill-md { background:linear-gradient(90deg, var(--sky), var(--royal)); }
.cr-fill-lo { background:linear-gradient(90deg, var(--danger), var(--warning)); }
.cr-txt {
font-family:var(--font-mono); font-size:clamp(0.625rem, 0.601rem + 0.09vw, 0.656rem); /* 10px → 10.5px */ color:var(--t4);
}
/* Row actions */
.cr-actions { display:flex; align-items:center; gap:5px; justify-content:flex-end; }
.btn-circle {
width:32px; height:32px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
background:transparent; border:none;
color:var(--t3); cursor:pointer; transition:all .18s var(--ease);
box-shadow:var(--shadow-neu-sm);
}
.btn-circle:hover {
color:var(--teal);
box-shadow:var(--shadow-neu);
}
.btn-circle:active { box-shadow:var(--shadow-neu-inset); }
.btn-circle.ac {
background:linear-gradient(135deg, var(--teal), var(--sky));
color:#fff;
box-shadow:2px 2px 6px color-mix(in srgb, var(--teal) 30%, transparent),
-2px -2px 6px rgba(255,255,255,0.2);
}
.btn-circle .i { width:14px; height:14px; }
/* Pagination — Taibah mockup */
.pg-bar {
display:flex; align-items:center; justify-content:space-between;
padding:14px 22px; margin-top:4px;
background:var(--glass-bg);
backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
border:none; border-radius:14px;
box-shadow:var(--shadow-neu-sm);
}
.pg-info { font-size:clamp(0.6875rem, 0.664rem + 0.09vw, 0.75rem); /* 11px → 12px */ color:var(--t3); font-weight:500; }
.pg-info strong { color:var(--t1); font-weight:700; }
.pg-nav { display:flex; align-items:center; gap:4px; }
.pg-btn {
width:32px; height:32px; border-radius:8px;
display:flex; align-items:center; justify-content:center;
background:transparent; border:none;
color:var(--t3); font-size:clamp(0.6875rem, 0.664rem + 0.09vw, 0.75rem); /* 11px → 12px */ font-weight:600; cursor:pointer;
transition:all .15s var(--ease); font-family:var(--font-mono);
box-shadow:var(--shadow-neu-sm);
}
.pg-btn:hover { color:var(--t1); box-shadow:var(--shadow-neu); }
.pg-btn.active { background:var(--teal); color:#fff; box-shadow:inset 2px 2px 5px rgba(0,0,0,0.12), inset -2px -2px 5px rgba(255,255,255,0.1); }
.pg-btn:disabled { opacity:0.3; pointer-events:none; }
/* ── Prereq Dependency Graph ── */
.prereq-svg { display:block;width:100%;height:auto;margin:0 auto }
.pg-edge { fill:none;stroke:var(--teal);stroke-width:2;stroke-opacity:0.4;transition:all .35s var(--ease) }
.pg-node { cursor:pointer }.pg-node rect{transition:all .35s var(--ease)}.pg-node text{transition:fill .35s var(--ease);pointer-events:none}
.pg-node:hover rect{stroke-width:2;filter:drop-shadow(0 2px 8px color-mix(in srgb, var(--teal) 25%, transparent))}
.pg-node.hl rect{stroke:var(--teal)!important;stroke-width:2.2}
.pg-node.hl text{fill:var(--teal)!important}
.pg-edge.hl{stroke:var(--teal);stroke-width:3;stroke-opacity:0.9}
.pg-node.dm{opacity:0.16;transition:opacity .25s}.pg-edge.dm{opacity:0.06;transition:opacity .25s}
.pg-legend{display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;padding:14px 16px 2px;font-size:.75rem;line-height:1.45;font-weight:650;color:var(--t2);font-family:var(--font-mono);letter-spacing:0.01em}
.pg-legend-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-inline-end:6px;vertical-align:middle;box-shadow:0 0 5px currentColor}
.pg-legend-dash{display:inline-block;width:12px;height:0;border-block-start:1.5px dashed var(--t3);margin-inline-end:5px;vertical-align:middle}
/* term bands — the graph's vertical axis is the declared programme term */
.pg-band{fill:transparent}
.pg-band-alt{fill:color-mix(in srgb, var(--navy) 4.5%, transparent)}
.pg-band-rule{stroke:color-mix(in srgb, var(--navy) 12%, transparent);stroke-width:1}
.pg-gutter-rule{stroke:color-mix(in srgb, var(--navy) 15%, transparent);stroke-width:1.2}
.pg-band-lbl{font-family:var(--font-mono);font-size:12px;font-weight:750;fill:var(--t2);letter-spacing:0.02em}
.pg-band-lbl-empty{opacity:0.45}
.pg-band-note{font-family:var(--font-mono);font-size:11px;font-weight:650;fill:var(--t3);opacity:0.65;letter-spacing:0.01em}
.pg-node-gate rect{stroke-dasharray:4 3}
.pg-node-inferred rect{stroke-dasharray:5 3}
.pg-edge-warn{stroke:#b45309;stroke-opacity:0.55;stroke-dasharray:5 4}
.pg-edge-warn.hl{stroke:#b45309;stroke-opacity:0.95}
.pg-warn{
display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin:10px 16px 0;padding:8px 12px;
border-radius:10px;background:rgba(180,83,9,0.07);border:1px solid rgba(180,83,9,0.22);
font-size:11px;font-weight:600;color:#b45309;line-height:1.5;
}
.pg-warn-detail{font-family:var(--font-mono);font-weight:500;opacity:0.8}
/* layout toggle */
.pg-modes{display:flex;gap:2px;margin-inline-start:auto;padding:2px;border-radius:999px;background:color-mix(in srgb, var(--navy) 5%, transparent)}
.pg-mode{
min-height:32px;border:0;cursor:pointer;padding:6px 13px;border-radius:999px;background:transparent;
font-family:var(--font-mono);font-size:.72rem;font-weight:750;letter-spacing:0.01em;color:var(--t3);
transition:all .25s var(--ease);
}
.pg-mode:hover{color:var(--t1)}
.pg-mode.is-on{background:var(--teal-dim);color:var(--teal);box-shadow:0 1px 3px rgba(17,17,68,0.08)}
.pg-mode:focus-visible{outline:2px solid var(--teal);outline-offset:1px}
/* ── Conflict Matrix ── */
.cm-table { border-collapse:separate;border-spacing:0;font-family:var(--font-mono);font-size:0.72rem;width:auto }
.cm-table th,.cm-table td{border:1px solid var(--line);border-right-color:var(--line-strong);border-bottom-color:var(--line-strong);padding:0;text-align:center;min-width:44px;height:34px}
.cm-corner { background:linear-gradient(135deg,var(--teal-dim),var(--royal-dim));position:sticky;left:0;top:0;z-index:3;border:none }
.cm-col-hdr{background:var(--glass-bg-header);position:sticky;top:0;z-index:2;padding:6px 2px;font-weight:700;font-size:0.65rem;color:var(--t2);letter-spacing:0.01em}
.cm-col-hdr span{writing-mode:vertical-lr;transform:rotate(180deg);white-space:nowrap}
.cm-row-hdr{background:var(--glass-bg-header);position:sticky;left:0;z-index:1;font-weight:700;padding:4px 10px;text-align:left;white-space:nowrap;font-size:0.72rem;color:var(--t1);letter-spacing:0.02em}
.cm-cell { font-weight:600;font-size:0.72rem;transition:transform .1s var(--ease),box-shadow .1s var(--ease) }
.cm-cell:hover { transform:scale(1.15);box-shadow:0 0 8px rgba(0,0,0,0.15);z-index:4;position:relative;border-radius:3px }
.cm-diag{background:var(--glass-bg-data);color:var(--teal);font-weight:700;font-size:0.68rem;border:1px solid var(--teal-border) !important}
.cm-zero { color:var(--t5);font-weight:300;font-size:0.65rem }
.cm-table tr:hover .cm-row-hdr{background:var(--brand-soft);color:var(--teal)}
.cm-table tr:hover td:not(.cm-diag){opacity:0.92}
/* ============================================================
METRICS
============================================================ */
.metric {
border: 1px solid var(--teal-border);
border-radius: var(--radius);
padding: 0.875rem 1rem;
background: linear-gradient(160deg, var(--teal-dim) 0%, var(--card) 100%);
height: 100%;
box-shadow: var(--shadow-card);
transition: all .25s var(--ease);
position: relative;
overflow: hidden;
}
.metric::before {
content: '';
position: absolute;
top: 0;
inset-inline-start: 15%;
inset-inline-end: 15%;
height: 1.5px;
background: var(--teal);
opacity: 0.3;
transition: all 0.25s var(--ease);
}
.metric:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lift);
background: var(--glass-bg);
}
.metric:hover::before { inset-inline-start: 5%; inset-inline-end: 5%; opacity: 0.5; }
.metric .k {
font-family: var(--font-mono);
color: var(--t4);
font-size: clamp(0.6rem, 0.588rem + 0.05vw, 0.65rem); /* ~9.6px → 10.4px */
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 0.35rem;
}
.metric .v {
font-family: var(--font-serif) !important;
font-weight: 400;
font-size: clamp(1.25rem, 1.118rem + 0.56vw, 1.6rem); /* 20px → 25.6px */
color: var(--teal);
letter-spacing: -0.02em;
line-height: 1.1;
}
/* ============================================================
MC — Enhanced Metric Cards (Taibah design)
============================================================ */
.mc {
background: linear-gradient(160deg, var(--teal-dim) 0%, var(--card) 100%);
border: 1px solid var(--teal-border);
border-radius: var(--radius);
padding: 20px;
position: relative;
overflow: hidden;
box-shadow: var(--shadow-card);
transition: all .25s var(--ease);
}
.mc::before {
content:''; position:absolute; top:0; inset-inline-start:15%; inset-inline-end:15%; height:1.5px;
background: var(--mc-c, var(--teal)); opacity:0.4;
box-shadow: 0 0 12px var(--mc-c, var(--teal)); transition:all .25s var(--ease);
}
.mc:hover::before { inset-inline-start:5%; inset-inline-end:5%; opacity:0.65; }
.mc::after {
content:''; position:absolute; top:-10px; inset-inline-end:-10px;
width:70px; height:70px; background:var(--mc-c, var(--teal));
opacity:0.04; border-radius:50%; filter:blur(22px); transition:opacity .25s var(--ease);
}
.mc:hover { transform:translateY(-2px); box-shadow:var(--shadow-lift); }
.mc:hover::after { opacity:0.07; }
.mc-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.mc-icon {
width:38px; height:38px; border-radius:10px;
display:flex; align-items:center; justify-content:center;
border:none;
box-shadow:var(--shadow-neu-inset);
}
.mc-icon .i { width:18px; height:18px; }
.mc-lbl {
font-size:clamp(0.5625rem, 0.539rem + 0.14vw, 0.656rem); /* 9px → 10.5px */ font-weight:700; text-transform:uppercase;
letter-spacing:0.07em; color:var(--t4);
}
.mc-val {
font-family:var(--font-serif); letter-spacing:-0.02em; line-height:1;
font-size:clamp(1.25rem, 0.955rem + 1.25vw, 1.75rem); /* 20px → 28px */
}
.mc-hero .mc-val { font-size:clamp(1.625rem, 1.273rem + 1.5vw, 2.25rem); /* 26px → 36px */ }
.mc-delta {
font-size:clamp(0.5625rem, 0.539rem + 0.09vw, 0.625rem); /* 9px → 10px */ margin-top:8px; font-weight:600;
font-family:var(--font-mono); display:flex; align-items:center; gap:4px;
color:var(--t4);
}
.mc-delta .up { color:var(--teal); }
.mc-delta .dn { color:var(--danger); }
.mc-delta .flat { color:var(--t3); }
/* Sparkline */
.spark { display:flex; align-items:flex-end; gap:2.5px; height:28px; margin-top:12px; }
.spark .b {
flex:1; min-width:4px; border-radius:2px 2px 0 0;
background:var(--mc-c, var(--teal)); opacity:0.1; transition:opacity .15s;
}
.spark .b:nth-last-child(1) { opacity:0.35; }
.spark .b:nth-last-child(2) { opacity:0.22; }
.spark .b:nth-last-child(3) { opacity:0.16; }
.spark .b:hover { opacity:0.45; }
/* MC color variants */
.mc-teal { --mc-c:var(--teal); }
.mc-teal .mc-icon { background:color-mix(in srgb, var(--teal) 8%, transparent); color:var(--teal); }
.mc-teal .mc-val { color:var(--teal); }
.mc-royal { --mc-c:var(--royal); }
.mc-royal .mc-icon { background:rgba(64,86,227,0.08); color:var(--royal); }
.mc-royal .mc-val { color:var(--royal); }
.mc-err { --mc-c:var(--danger); }
.mc-err .mc-icon { background:rgba(192,48,48,0.08); color:var(--danger); }
.mc-err .mc-val { color:var(--danger); }
.mc-sky { --mc-c:var(--sky); }
.mc-sky .mc-icon { background:rgba(0,174,218,0.08); color:var(--sky); }
.mc-sky .mc-val { color:var(--sky); }
.mc-warn { --mc-c:var(--warning); }
.mc-warn .mc-icon { background:rgba(154,106,8,0.08); color:var(--warning); }
.mc-warn .mc-val { color:var(--warning); }
/* ============================================================
REC — Recommendation Item Cards
============================================================ */
.rec {
display:flex; align-items:center; justify-content:space-between;
padding:11px 14px; border:var(--border-subtle);
border-radius:var(--radius-sm); margin-bottom:7px; cursor:pointer;
transition:all .15s var(--ease); position:relative; overflow:hidden;
background:var(--glass-bg);
box-shadow:0 1px 0 var(--glass-bg-header) inset;
}
.rec:last-child { margin-bottom:0; }
.rec:hover {
border-color:var(--teal-border); background:color-mix(in srgb, var(--teal) 4%, transparent);
transform:translateX(4px);
box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, -3px 0 0 var(--teal);
}
[dir="rtl"] .rec:hover {
transform:translateX(-4px);
box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 3px 0 0 var(--teal);
}
.rec-code {
font-family:var(--font-mono); font-size:clamp(0.6875rem, 0.664rem + 0.09vw, 0.75rem); /* 11px → 12px */ font-weight:700; color:var(--teal);
}
.rec-name { font-size:clamp(0.6875rem, 0.664rem + 0.14vw, 0.781rem); /* 11px → 12.5px */ color:var(--navy); font-weight:600; margin-top:2px; }
.rec-pre { font-size:clamp(0.5625rem, 0.539rem + 0.09vw, 0.625rem); /* 9px → 10px */ color:var(--t3); margin-top:2px; font-family:var(--font-mono); }
/* ============================================================
PILL — Status Pills with Dot Indicators
============================================================ */
.pill-status {
display:inline-flex; align-items:center; gap:5px;
padding:3px 10px; border-radius:999px;
font-size:clamp(0.625rem, 0.601rem + 0.09vw, 0.6875rem); /* 10px → 11px */ font-weight:600; border:none;
position:relative;
box-shadow:var(--shadow-neu-sm);
}
.pill-status::before {
content:''; position:absolute; top:0; inset-inline-start:0; inset-inline-end:0; height:50%;
background:linear-gradient(180deg, rgba(255,255,255,0.3), transparent);
border-radius:999px 999px 0 0; pointer-events:none;
}
.pill-dot {
width:5px; height:5px; border-radius:50%;
background:currentColor; box-shadow:0 0 4px currentColor;
}
.pill-g { background:var(--brand-soft); color:var(--teal); }
.pill-r { background:var(--pl-danger-bg); color:var(--danger); }
.pill-a { background:rgba(154,106,8,0.06); color:var(--warning); }
.pill-b { background:rgba(64,86,227,0.06); color:var(--royal); }
/* ============================================================
FILTER BAR — Glassmorphic toolbar
============================================================ */
.filter-bar {
display:flex; align-items:center; gap:10px; margin-bottom:18px;
padding:12px 18px;
background:var(--glass-bg-data);
backdrop-filter:blur(24px) saturate(130%);
-webkit-backdrop-filter:blur(24px) saturate(130%);
border:none;
border-radius:14px;
box-shadow:var(--shadow-neu);
flex-wrap:wrap;
}
.fb-search {
display:flex; align-items:center; gap:8px; flex:1; max-width:320px;
padding:0 1rem; border-radius:14px;
background:transparent; border:none;
box-shadow:var(--shadow-neu-inset);
transition:box-shadow .25s var(--ease);
overflow:hidden;
}
.fb-search:focus-within {
background:transparent;
box-shadow:var(--shadow-neu-inset),
0 0 0 2px color-mix(in srgb, var(--teal) 25%, transparent);
}
.fb-search .i { color:var(--t5); }
.fb-search input {
flex:1; background:transparent; border:none; outline:none;
box-shadow:none; color:var(--t1); font-size:0.95rem; font-family:inherit;
padding:0.55rem 0;
}
.fb-search input:focus,
.fb-search input:focus-visible {
outline: none !important;
box-shadow: none !important;
background: transparent !important;
}
.fb-search input:-webkit-autofill,
.fb-search input:-webkit-autofill:hover,
.fb-search input:-webkit-autofill:focus,
.fb-search input:-webkit-autofill:active {
-webkit-text-fill-color: var(--t1) !important;
caret-color: var(--t1);
transition: background-color 9999s ease-in-out 0s,
color 9999s ease-in-out 0s !important;
}
.fb-search input::placeholder { color:var(--t5); }
/* Datalist inputs: position the native dropdown arrow cleanly */
.fb-search input[list] { padding-inline-end: 0.25rem; }
.fb-search input[list]::-webkit-calendar-picker-indicator {
color: var(--t4); cursor: pointer; margin-inline-start: 4px; flex-shrink: 0;
}
.fb-search select {
flex:1; min-width:0; width:100%;
background:transparent; border:none; outline:none;
box-shadow:none; color:var(--t1); font-size:0.95rem; font-family:inherit;
padding:0.55rem 0; cursor:pointer;
-webkit-appearance:none; -moz-appearance:none; appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239aa5b4'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:right 0.4rem center;
padding-inline-end:1.5rem;
text-overflow:ellipsis;
}
.fb-search select:focus,
.fb-search select:focus-visible {
outline: none !important;
box-shadow: none !important;
background-color: transparent !important;
}
.fb-spacer { flex:1; }
.fb-dd {
display:flex; align-items:center; gap:6px;
padding:7px 14px; border-radius:10px;
background:transparent; border:none;
font-size:clamp(0.6875rem, 0.664rem + 0.09vw, 0.75rem); /* 11px → 12px */ font-weight:600; color:var(--t2);
cursor:pointer; transition:all .18s var(--ease);
box-shadow:var(--shadow-neu-sm);
backdrop-filter:blur(8px);
}
.fb-dd:hover { box-shadow:var(--shadow-neu); color:var(--t1); }
.fb-dd.active { background:var(--brand-soft); color:var(--teal); box-shadow:var(--shadow-neu-inset); }
.fb-dd .i { opacity:0.4; }
.fb-dd-count {
display:inline-flex; align-items:center; justify-content:center;
min-width:20px; height:18px; padding:0 5px;
border-radius:9px; font-family:var(--font-mono); font-size:0.65rem; font-weight:700;
background:color-mix(in srgb, var(--teal) 10%, transparent); color:var(--teal); margin-inline-start:4px;
}
.fb-dd.active .fb-dd-count { background:color-mix(in srgb, var(--teal) 20%, transparent); }
/* ============================================================
CPANEL — Bottom Panel Cards (Recommendations, Activity)
============================================================ */
.cpanel { overflow:hidden;
transition:all .25s var(--ease);
}
.cpanel:hover { box-shadow:var(--shadow-lift); }
.cpanel::before {
content:''; display:block; height:2px;
background:linear-gradient(90deg, transparent 5%, var(--teal) 25%, var(--sky) 50%, var(--royal) 75%, transparent 95%);
opacity:0.15; transition:opacity .25s var(--ease);
}
.cpanel:hover::before { opacity:0.35; }
.cp-h {
padding:14px 20px; border-block-end:var(--border-subtle);
display:flex; align-items:center; gap:9px; background:var(--glass-bg);
}
.cp-t { font-size:clamp(0.75rem, 0.697rem + 0.23vw, 0.844rem); /* 12px → 13.5px */ font-weight:700; color:var(--t1); }
.cp-live {
font-family:var(--font-mono); font-size:9px; font-weight:700;
padding:2px 8px; border-radius:999px;
background:var(--teal-dim); color:var(--teal); border:1px solid var(--teal-border);
animation:livePulse 3s var(--ease) infinite;
}
@keyframes livePulse { 0%,100%{opacity:1;} 50%{opacity:0.6;} }
.cp-b { padding:16px 20px; }
/* ============================================================
STICKY-CTA — Gradient accent line
============================================================ */
.sticky-cta::before {
content:''; display:block; height:2px; margin-bottom:16px;
background:linear-gradient(90deg, transparent 5%, var(--teal) 25%, var(--sky) 50%, var(--royal) 75%, transparent 95%);
opacity:0.12; border-radius:2px;
}
/* ============================================================
STATUS INDICATORS
============================================================ */
.status-dot {
display: inline-block;
width: 0.55rem;
height: 0.55rem;
border-radius: 50%;
margin-inline-end: 0.4rem;
vertical-align: middle;
}
.status-running {
background: var(--success);
box-shadow: 0 0 0 3px rgba(18,162,89,.20);
animation: pulse-green 2s infinite;
}
.status-stopped { background: var(--muted); }
.status-failed { background: var(--danger); }
@keyframes pulse-green {
0%, 100% { box-shadow: 0 0 0 3px rgba(18,162,89,.20); }
50% { box-shadow: 0 0 0 6px rgba(18,162,89,.04); }
}
.status-passed td { background: color-mix(in srgb, var(--teal) 4%, transparent) !important; }
.status-studying td { background: rgba(64,86,227,0.04) !important; }
.status-can-register td { background: rgba(0,174,218,0.04) !important; }
/* ============================================================
PILLS & CHIPS
============================================================ */
.pill {
display: inline-block;
background: var(--royal-dim);
color: var(--royal);
border: 1px solid var(--royal-border);
border-radius: 999px;
padding: 0.2rem 0.6rem;
margin: 0.15rem;
font-family: var(--font-mono);
font-size: clamp(0.7rem, 0.676rem + 0.09vw, 0.78rem); /* ~11.2px → 12.5px */
font-weight: 600;
letter-spacing: 0.01em;
}
.top-chip {
display: inline-block; background: var(--teal-dim); color: var(--teal-deep);
border: 1px solid var(--teal-border); border-radius: 999px;
padding: 0.22rem 0.6rem; margin: 0.18rem; font-size: 0.82rem; font-weight: 600;
}
.hint-chip {
display: inline-flex; align-items: center; gap: 4px;
background: var(--brand-soft); color: var(--teal);
border: 1px solid var(--teal-border); border-radius: 999px;
padding: 5px 14px; margin: 3px; font-size: clamp(0.6875rem, 0.664rem + 0.09vw, 0.75rem); /* 11px → 12px */ font-weight: 600;
font-family: var(--font-mono); cursor: pointer;
transition: all .2s var(--ease);
}
.hint-chip:hover { background: color-mix(in srgb, var(--teal) 12%, transparent); transform: translateY(-1px); box-shadow: 0 2px 6px color-mix(in srgb, var(--teal) 15%, transparent); }
.risk-pill {
display: inline-block; border-radius: 999px;
padding: 0.18rem 0.55rem; font-size: 0.72rem; font-weight: 700;
}
.risk-high { background: #fff0f0; color: #991b1b; border: 1px solid var(--pl-conflict-cell); }
.risk-mid { background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa; }
.risk-low { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
/* ============================================================
ALERT CHIPS
============================================================ */
.alert-chip {
display: inline-flex; align-items: center; gap: 6px; border-radius: var(--radius-sm);
padding: 8px 14px; margin: 3px; font-size: clamp(0.6875rem, 0.664rem + 0.09vw, 0.75rem); /* 11px → 12px */ font-weight: 600;
backdrop-filter: blur(12px); transition: all .2s var(--ease);
}
.alert-chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 5px currentColor; flex-shrink: 0; }
.alert-chip.warn { background: rgba(154,106,8,0.06); color: var(--warning); border: 1px solid rgba(154,106,8,0.16); }
.alert-chip.danger { background: var(--pl-danger-bg); color: var(--danger); border: 1px solid rgba(192,48,48,0.16); }
/* ============================================================
MISC UTILITIES
============================================================ */
.importance-high { color: var(--teal); font-weight: 700; font-family: var(--font-mono); font-size: clamp(0.6875rem, 0.664rem + 0.09vw, 0.75rem); /* 11px → 12px */ }
.importance-mid { color: var(--sky); font-weight: 600; font-family: var(--font-mono); font-size: clamp(0.6875rem, 0.664rem + 0.09vw, 0.75rem); /* 11px → 12px */ }
.importance-low { color: var(--t3); font-family: var(--font-mono); font-size: clamp(0.6875rem, 0.664rem + 0.09vw, 0.75rem); /* 11px → 12px */ }
.missing-prereq { color: var(--danger); font-weight: 600; font-size: clamp(0.625rem, 0.601rem + 0.09vw, 0.6875rem); /* 10px → 11px */ }
.empty-note { color: var(--muted-light); font-style: italic; font-size: clamp(0.8rem, 0.78rem + 0.09vw, 0.875rem); /* ~12.8px → 14px */ }
.row-highlight { background: #fffbeb !important; }
tr.attention-row td { background: #fff7ed !important; }
.meta-banner {
border-radius: var(--radius-sm); padding:10px 14px; font-size:clamp(0.6875rem, 0.664rem + 0.09vw, 0.75rem); /* 11px → 12px */
font-family: var(--font-mono); backdrop-filter: blur(10px);
}
.meta-info {
background: color-mix(in srgb, var(--teal) 4%, transparent); border: 1px solid var(--teal-border);
color: var(--t2);
}
.meta-warn {
background: rgba(154,106,8,0.05); border: 1px solid rgba(154,106,8,0.15);
color: var(--warning);
}
.meta-danger {
background: rgba(192,48,48,0.05); border: 1px solid rgba(192,48,48,0.15);
color: var(--danger);
}
.danger-zone { border: 1px solid var(--pl-conflict-cell); background: #fff5f5; border-radius: var(--radius); padding: 0.75rem; }
.danger-zone-strong { border: 2px dashed #f87171; background: #fff1f2; border-radius: var(--radius); padding: 0.875rem; }
/* ============================================================
ZONE CARDS
============================================================ */
.zone-card { padding: 1rem; margin-top: 0.75rem; }
.zone-card .zone-title {
font-family: var(--font-body);
font-size: 0.72rem; font-weight: 700;
letter-spacing: 0.07em; text-transform: uppercase;
color: var(--muted); margin-bottom: 0.6rem;
display: flex; align-items: center; gap: 0.4rem;
}
.zone-card .zone-title::before {
content: ""; display: inline-block;
width: 3px; height: 0.8rem; border-radius: 2px;
background: var(--brand); opacity: 0.6;
}
/* ============================================================
TERM CARDS
============================================================ */
.term-card {
border: none; border-radius: 14px;
background: var(--glass-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
padding: 0.875rem; margin-bottom: 0.75rem;
box-shadow: var(--shadow-neu);
}
.term-card h4 { margin-bottom: 0.4rem; font-weight: 600; }
.term-header-sticky { display: flex; align-items: center; gap: 10px; flex: 1; }
.term-header-sticky h4 { font-family: var(--font-serif); font-size: clamp(0.8125rem, 0.742rem + 0.38vw, 0.9375rem); /* 13px → 15px */ color: var(--navy); margin: 0; }
.term-summary { list-style: none; cursor: pointer; padding: 12px 16px; display: flex; align-items: center; gap: 8px; transition: background .15s var(--ease); }
.term-summary::-webkit-details-marker { display: none; }
.term-summary::before { content: ''; width: 0; height: 0; border-inline-start: 5px solid var(--teal); border-block-start: 4px solid transparent; border-block-end: 4px solid transparent; transition: transform .2s var(--ease); opacity: 0.5; flex-shrink: 0; }
.term-details[open] > .term-summary::before { transform: rotate(90deg); }
.term-summary:hover { background: color-mix(in srgb, var(--teal) 3%, transparent); }
.term-details {
background: var(--glass-bg); backdrop-filter: var(--glass-blur);
border: none; border-radius: 14px;
overflow: hidden; box-shadow: var(--shadow-neu); margin-bottom: 10px;
}
.term-details::before { content: ''; display: block; height: 2px; background: linear-gradient(90deg, transparent 5%, var(--teal) 25%, var(--sky) 50%, var(--royal) 75%, transparent 95%); opacity: 0.12; }
/* ============================================================
PLAN ITEM
============================================================ */
.plan-item {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 14px; border: var(--border-subtle);
border-radius: var(--radius-sm); cursor: default;
background: var(--glass-bg); margin-bottom: 6px;
border-inline-start: 3px solid var(--teal);
transition: all .2s var(--ease);
}
.plan-item:hover { background: color-mix(in srgb, var(--teal) 4%, transparent); transform: translateX(3px); box-shadow: 0 2px 6px color-mix(in srgb, var(--teal) 10%, transparent); }
.plan-item .title { font-family: var(--font-mono); font-weight: 700; color: var(--teal); font-size: clamp(0.75rem, 0.715rem + 0.09vw, 0.8125rem); /* 12px → 13px */ }
.plan-item .sub { font-size: clamp(0.625rem, 0.601rem + 0.09vw, 0.6875rem); /* 10px → 11px */ color: var(--t3); font-family: var(--font-mono); }
/* ============================================================
COURSE ROW / DRAWER / ADVISOR BLOCK
============================================================ */
.course-row { cursor: pointer; transition: all .15s var(--ease); }
.course-row:hover { transform: translateY(-1px); }
.course-row.active { outline: 2px solid var(--teal); outline-offset: -1px; background: var(--brand-soft) !important; }
.plan-course-link { cursor: pointer; }
.drawer { padding: 0.875rem; }
.drawer h3 { margin-bottom: 0.4rem; font-weight: 700; color: var(--brand-dark); }
.drawer .kv { font-size: 0.85rem; color: var(--ink-2); margin-bottom: 0.28rem; }
.advisor-block { padding: 1rem; margin-top: 0.875rem; }
/* Canonical card-heading style — teal, bold, 14px.
Applied to advisor-block h3 (the original source) plus the
other card-title patterns across the app (zone-title,
um-panel-title, .et-panel/.si-panel/.cpanel direct h6). */
.advisor-block h3,
.zone-title,
.um-panel-title,
.cp-t,
.dba-section-title,
.pf-card-title,
.pane-title,
.ap-drawer-section-title,
.et-panel > h6,
.si-panel > h6,
.cpanel > h6 {
margin: 0 0 0.55rem;
font-family: var(--font-body);
font-size: 0.875rem;
font-weight: 700;
color: var(--teal-deep);
letter-spacing: 0;
text-transform: none;
display: flex;
align-items: center;
gap: 0.45rem;
}
/* Hide the old teal-pipe prefix now that the heading text itself is teal. */
.zone-title::before,
.um-panel-title::before,
.dba-section-title::before,
.ap-drawer-section-title::before {
display: none;
}
/* Keep the colored prefix for state variants (edit / danger zone). */
.um-panel-title.edit::before,
.um-panel-title.danger::before,
.danger-panel .dba-section-title::before {
display: inline-block;
}
/* ============================================================
MISC COMPONENTS
============================================================ */
.field-error {
color: var(--danger); font-size: 0.76rem; margin-top: 0.2rem;
display: none; font-weight: 500;
}
.input-invalid {
border-color: var(--danger) !important;
box-shadow: 0 0 0 3px rgba(224,52,52,.12) !important;
}
.task-card {
border: var(--border-subtle); border-radius: var(--radius);
background: var(--glass-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
padding: 0.8rem 1rem; margin-bottom: 0.5rem;
transition: box-shadow .15s, transform .15s;
}
.task-card:hover { box-shadow: var(--shadow-card); transform: translateY(-1px); }
.task-card .k {
font-family: var(--font-body); font-size: 0.72rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2);
}
.sticky-cta { z-index: 6; }
.mini-bar-wrap {
background: var(--line); border-radius: 999px;
height: 5px; min-width: 100px; display: inline-block; vertical-align: middle;
}
.mini-bar {
background: linear-gradient(90deg, var(--success) 0%, #22c55e 100%);
height: 5px; border-radius: 999px;
}
.log-box {
background: #08101e; color: #b8d4f8; border-radius: var(--radius);
padding: 1rem; overflow-x: auto;
font-family: var(--font-mono); font-size: 0.82rem; line-height: 1.6;
border: 1px solid rgba(255,255,255,.06);
}
.preset-row { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; margin-top: 0.4rem; }
/* ============================================================
STUDENT PLAN ACTIONS
============================================================ */
#studentPlanActions {
overflow-x: auto; flex-wrap: nowrap; padding-bottom: 0.2rem;
scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
display: flex; gap: 0.45rem; align-items: center; margin-bottom: 1rem;
}
#studentPlanActions .btn,
#studentPlanActions .form-select { flex: 0 0 auto; }
#studentPlanActions details { display: inline-block; }
#studentPlanActions details summary { list-style: none; }
#studentPlanActions details summary::-webkit-details-marker { display: none; }
/* ============================================================
MODULE-SPECIFIC
============================================================ */
#student form .btn-primary { font-weight: 700; }
#loadStudentPlan { border-color: var(--brand); color: var(--brand); }
#student .secondary-inline-actions .btn { min-height: 34px; }
#batch .batch-filters .btn-success { font-weight: 700; }
#batchMetrics .metric { border-color: var(--teal-border); background: var(--teal-dim); }
#batch .batch-export-row { margin-top: 0.75rem; }
#batch .batch-export-row .btn { min-height: 36px; }
#advisorportfolio .metric { border-color: var(--line-strong); }
#advisorportfolio #advTable { font-size: 0.82rem; }
#advisorportfolio #advTable th,
#advisorportfolio #advTable td { padding: 0.35rem 0.5rem; white-space: nowrap; }
#advisorportfolio #advTable td:nth-child(2),
#advisorportfolio #advTable td:nth-child(11) {
max-width: 220px; overflow: hidden; text-overflow: ellipsis;
}
#advisorportfolio #advTable thead th { background: var(--teal-dim); color: var(--teal-deep); }
#advisoradmin .btn-primary,
#advisorportfolio .btn-primary { font-weight: 600; }
#advisoradmin .panel-sub,
#advisorportfolio .panel-sub { font-size: 0.875rem; }
#advisoradmin .actions-row .btn,
#advisorportfolio .actions-row .btn { border-radius: var(--radius-sm); }
/* #advisoradmin .advisor-block border-color now handled by TEAL CARD SURFACE + V2 dark rule */
#usermgmt .actions-row .btn { flex: 1 1 180px; }
#umMeta.meta-banner { font-size: 0.85rem; }
/* ============================================================
RTL SUPPORT
============================================================ */
html[dir="rtl"] body {
font-family: 'Noto Kufi Arabic', 'Inter', system-ui, sans-serif !important;
letter-spacing: 0;
}
/* ── RTL: push sidebar to the RIGHT side ──────────────────────
Three independent mechanisms so at least one always wins:
1. row-reverse on the flex container (.shell)
2. order:2 on the sidebar itself — works even if row-reverse fails
3. The sidebar still renders correctly because it is a flex child
─────────────────────────────────────────────────────────── */
html[dir="rtl"] .shell {
flex-direction: row-reverse !important;
}
html[dir="rtl"] .sidebar {
order: 2 !important;
text-align: end;
}
html[dir="rtl"] main.flex-grow-1 {
order: 1 !important;
}
html[dir="rtl"] .panel .form-label { letter-spacing: 0; }
html[dir="rtl"] .table-wrap thead th { text-transform: none; letter-spacing: 0; }
html[dir="rtl"] .actions-row { justify-content: flex-start; }
html[dir="rtl"] .zone-card .zone-title { letter-spacing: 0; }
/* Latin utility typography must not leak into Arabic interface labels. It
produces visibly spaced-out Arabic and weakens the information hierarchy. */
html[dir="rtl"] .logo-sub,
html[dir="rtl"] .nav-lbl,
html[dir="rtl"] .kpi .k,
html[dir="rtl"] .ph-chip-context,
html[dir="rtl"] .student-next-step-label,
html[dir="rtl"] .sp-kpi-card span {
font-family: var(--font-body);
letter-spacing: 0;
text-transform: none;
}
html[dir="rtl"] .page-intro,
html[dir="rtl"] .page-intro p { line-height: 1.75; }
/* ── Pre / code blocks: prevent horizontal overflow ──────── */
pre, .pre-output {
white-space: pre-wrap;
word-break: break-all;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* ============================================================
RESPONSIVE — PROFESSIONAL MOBILE SYSTEM
============================================================ */
/* ── Hamburger button (hidden on desktop) ──────────────────── */
.sidebar-toggle {
display: none; /* shown in mobile breakpoint */
align-items: center;
justify-content: center;
min-width: 44px; /* a11y: WCAG 2.5.8 minimum touch target */
min-height: 44px; /* a11y: WCAG 2.5.8 minimum touch target */
width: 44px;
height: 44px;
border-radius: 8px;
border: none;
background: var(--teal);
color: #fff;
cursor: pointer;
flex-shrink: 0;
margin-inline-end: 0.35rem; /* gap between hamburger and module title */
box-shadow: 0 1px 4px color-mix(in srgb, var(--teal) 25%, transparent);
transition: background 0.15s var(--ease), transform 0.1s var(--ease);
position: relative;
z-index: 5;
}
.sidebar-toggle:hover { background: var(--teal-deep); }
.sidebar-toggle:active { transform: scale(0.93); }
.sidebar-toggle-icon {
display: flex;
flex-direction: column;
gap: 4px;
width: 15px;
}
.sidebar-toggle-icon span {
display: block;
height: 2px;
border-radius: 2px;
background: #fff;
transition: transform 0.2s var(--ease), opacity 0.2s var(--ease), width 0.2s var(--ease);
}
/* × animation when open */
.sidebar-open .sidebar-toggle-icon span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.sidebar-open .sidebar-toggle-icon span:nth-child(2) { opacity: 0; width: 0; }
.sidebar-open .sidebar-toggle-icon span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
/* ── Sidebar backdrop overlay ───────────────────────────────── */
.sidebar-backdrop {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
z-index: 199;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
animation: sb-fade-in 0.2s var(--ease);
}
@keyframes sb-fade-in { from { opacity: 0; } to { opacity: 1; } }
/* ── 1024px — Tablet: stack sidebar, reduce card padding ──────── */
@media (max-width: 1024px) {
/* Dashboard metric cards: 2-column grid */
.row.g-2 > [class*="col-md-3"],
.row.g-2 > [class*="col-md-4"] {
flex: 0 0 50%;
max-width: 50%;
}
/* MC metric cards: reduce padding on tablet */
.mc {
padding: 14px;
}
/* mc-val and mc-hero font-sizes now handled by clamp() in base rules */
/* KPI cards (exam timetable): 2-column grid */
.kpi {
padding: 0.5rem;
}
/* ET panel: tighter padding */
.et-panel {
padding: 12px 14px;
}
/* ET grid: reduce cell padding for tablet */
.et-grid th, .et-grid td {
padding: 5px 4px;
font-size: 0.75rem;
}
/* ET conflict matrix: smaller cells on tablet */
.et-matrix td {
width: 22px;
height: 22px;
min-width: 22px;
font-size: 0.55rem;
}
/* Tbl-card rows: reduce padding */
.tbl-card tbody tr.cr-row td {
padding: 10px 10px;
}
/* Content wrap: allow full width */
.content-wrap {
max-width: 100%;
}
}
/* ── 992px — Narrow desktop / large tablet ──────────────────── */
@media (max-width: 992px) {
.sidebar { width: 195px; }
.logo-area { padding: 12px 12px 14px; gap: 8px; }
.logo-mark { width: 30px; height: 30px; border-radius: 8px; }
.logo-mark .i { width: 16px; height: 16px; }
.logo-title { font-size: 0.88rem; }
.nav-lbl { padding: 8px 10px 2px; font-size: 0.46rem; }
.nav-a { padding: 6px 10px; gap: 7px; font-size: 0.72rem; }
.nav-a .i { width: 14px; height: 14px; }
.s-foot { padding: 8px 10px; }
.avatar { width: 28px; height: 28px; font-size: 0.6rem; }
main.flex-grow-1 { padding: 1rem !important; }
/* page-header: adjust bleed for 1rem main padding */
.page-header {
margin: -1rem -1rem 1.25rem -1rem !important;
padding-inline: 1rem;
}
.actions-row .btn,
.actions-row .form-select,
.actions-row .form-control { flex: 1 1 200px; }
#usermgmt .actions-row .btn { flex: 1 1 160px; }
}
/* ── 768px — Tablet / large phone (sidebar becomes overlay) ── */
@media (max-width: 768px) {
/* Show hamburger */
.sidebar-toggle { display: flex; }
/* Sidebar: fixed overlay, slides in from the inline-start edge */
.sidebar {
position: fixed;
top: 0;
bottom: 0;
inset-inline-start: 0;
z-index: 10;
width: 0;
padding: 0;
overflow: hidden;
visibility: hidden;
pointer-events: none;
border-inline-end: 0;
background: rgba(255,255,255,0.92);
backdrop-filter: blur(50px) saturate(160%);
-webkit-backdrop-filter: blur(50px) saturate(160%);
transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1),
padding 0.28s cubic-bezier(0.4, 0, 0.2, 1),
visibility 0s 0.28s,
z-index 0s 0.28s;
box-shadow: none;
}
.sidebar::after { display: none; }
.sidebar.sidebar-open {
z-index: 200;
visibility: visible;
pointer-events: auto;
transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1),
padding 0.28s cubic-bezier(0.4, 0, 0.2, 1),
visibility 0s,
z-index 0s;
}
.sidebar.sidebar-open {
width: 272px;
padding: 0;
overflow-y: auto;
box-shadow: 4px 0 32px rgba(0, 0, 0, 0.15);
}
/* Show backdrop when sidebar open */
.sidebar.sidebar-open ~ * .sidebar-backdrop,
.sidebar-backdrop.active { display: block; }
/* Toast: full-width top bar on mobile */
#toast-container {
inset-inline-start: 0.5rem;
inset-inline-end: 0.5rem;
}
.ux-toast { max-width: 100%; min-width: 0; }
/* page-header: bleeds to edges */
.page-header {
margin: 0 -1rem 1.25rem -1rem !important; /* bleeds out of main's 1rem padding */
padding: 0.4rem 0.65rem !important;
border-radius: 0;
border-bottom: 1px solid var(--line, var(--line));
background: rgba(255,255,255,0.4);
backdrop-filter: blur(24px) saturate(130%);
-webkit-backdrop-filter: blur(24px) saturate(130%);
z-index: 100; /* above panel content when scrolling */
gap: 0.4rem !important;
flex-wrap: nowrap !important;
align-items: center !important;
}
/* Compact hamburger for mobile — keep 44px touch target (a11y: WCAG 2.5.8) */
.sidebar-toggle {
min-width: 44px;
min-height: 44px;
width: 44px;
height: 44px;
border-radius: 7px;
margin-inline-end: 0.2rem;
box-shadow: 0 1px 3px color-mix(in srgb, var(--teal) 20%, transparent);
}
.sidebar-toggle-icon { width: 13px; gap: 3.5px; }
.sidebar-toggle-icon span { height: 1.5px; }
.sidebar-open .sidebar-toggle-icon span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.sidebar-open .sidebar-toggle-icon span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
/* page-header-left: allow shrink and truncation */
.page-header-left {
min-width: 0;
flex: 1 1 0%;
overflow: hidden;
}
.page-header-module {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.page-header-chips {
overflow: hidden;
flex-wrap: nowrap;
}
/* Logout button: icon-only on mobile (specificity must beat html body .btn.btn-sm) */
.page-header .page-header-right .btn.btn-sm.btn-outline-secondary {
font-size: 0 !important; /* hide text */
padding: 0 !important;
min-height: unset !important;
width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
border-radius: 7px !important;
}
/* Logout icon (door-arrow SVG via pseudo-element) */
.page-header-right .btn-outline-secondary::before {
content: '';
display: block;
width: 16px;
height: 16px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E") center/contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* main padding: keep gutter, page-header bleeds out via negative margin */
main.flex-grow-1 {
padding: 1rem !important;
}
/* Touch targets — minimum 44px (Apple HIG / WCAG 2.5.5) */
.btn:not(.btn-sm):not(.btn-xs) {
min-height: 44px;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.form-control,
.form-select {
min-height: 44px;
font-size: 1rem; /* prevent iOS auto-zoom (needs ≥16px) */
}
/* Metric cards: 2-column grid on tablet */
.row.g-2 > [class*="col-md-3"] {
flex: 0 0 50%;
max-width: 50%;
}
/* Table wraps: no artificial max-height on mobile, enable horizontal scroll */
.table-wrap { max-height: none !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
/* Actions row: wrap earlier */
.actions-row {
flex-wrap: wrap;
gap: 0.4rem;
}
.actions-row .btn,
.actions-row .form-select,
.actions-row .form-control { flex: 1 1 160px; }
/* Form rows: stack more aggressively */
.sticky-cta { position: static !important; }
/* Planner: hide step navigation description text */
.step-pill { font-size: 0.7rem; padding: 0.25rem 0.45rem; }
/* Zone cards: tighter on mobile */
.zone-card { padding: 0.75rem; }
/* Advisor block: tighter */
.advisor-block { padding: 0.75rem; }
/* Dashboard: full-width cards */
.row.g-2 > [class*="col-md-3"],
.row.g-2 > [class*="col-md-4"] {
flex: 0 0 50%;
max-width: 50%;
}
/* MC cards: compact on mobile */
.mc { padding: 12px; }
/* mc-val and mc-hero font-sizes now handled by clamp() in base rules */
/* ET panel: full-width, tighter */
.et-panel { padding: 10px 12px; }
/* ET form inputs: stack vertically */
.et-panel .row > [class*="col-md-"] {
flex: 0 0 100%;
max-width: 100%;
}
/* ET grid: enable horizontal scroll, reduce cell sizes */
.et-grid { font-size: 0.7rem; }
.et-grid th { padding: 4px 3px; font-size: 0.75rem; } /* a11y: min 12px for headers */
.et-grid td { padding: 4px 3px; font-size: 0.68rem; }
.et-grid td { min-width: 60px; }
/* ET matrix: horizontal scroll container */
.et-matrix { font-size: 0.55rem; }
.et-matrix td { width: 20px; height: 20px; min-width: 20px; font-size: 0.5rem; }
.et-matrix thead th > span { font-size: 0.75rem; } /* a11y: min 12px for headers */
/* Hide non-essential table columns on mobile */
.tbl-card thead th:nth-child(n+5),
.tbl-card tbody td:nth-child(n+5) {
display: none;
}
/* Ensure tbl-card rows fit mobile */
.tbl-card tbody tr.cr-row td { padding: 8px 8px; }
/* cr-id, cr-nm, cr-row td font-sizes now handled by clamp() in base rules */
}
/* ── 480px — Small phone ────────────────────────────────────── */
@media (max-width: 480px) {
/* page-header: even tighter on small phone */
.page-header {
padding: 0.35rem 0.5rem !important;
gap: 0.35rem !important;
}
.sidebar-toggle {
min-width: 44px; /* a11y: WCAG 2.5.8 minimum touch target */
min-height: 44px; /* a11y: WCAG 2.5.8 minimum touch target */
width: 44px;
height: 44px;
border-radius: 6px;
margin-inline-end: 0.15rem;
box-shadow: 0 1px 3px color-mix(in srgb, var(--teal) 20%, transparent);
}
.sidebar-toggle-icon { width: 11px; gap: 2.5px; }
.sidebar-toggle-icon span { height: 1.5px; }
.sidebar-open .sidebar-toggle-icon span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.sidebar-open .sidebar-toggle-icon span:nth-child(3) { transform: translateY(-4px) rotate(-45deg); }
/* page-header chips: hide verbose ones, keep essential */
.ph-chip-scope { display: none; }
.ph-chip-dept { display: none; }
.ph-chip-role { font-size: 0.6rem; padding: 0.1rem 0.35rem; }
/* Logout icon: slightly smaller */
.page-header .page-header-right .btn.btn-sm.btn-outline-secondary {
width: 28px;
height: 28px;
padding: 0 !important;
}
.page-header-right .btn-outline-secondary::before {
width: 14px;
height: 14px;
}
/* Form inputs: always full width */
.row > [class*="col-md-"],
.row > [class*="col-lg-"] {
flex: 0 0 100%;
max-width: 100%;
}
/* Buttons full width in action rows */
.actions-row .btn,
.actions-row .form-select,
.actions-row .form-control { flex: 1 1 100%; width: 100%; }
/* Metric cards: still 2-col on small phone (avoid 1-col waste) */
.row.g-2 > [class*="col-md-3"] {
flex: 0 0 50%;
max-width: 50%;
}
/* metric .v and .k font-sizes now handled by clamp() in base rules */
/* Panel padding: removed card wrapper, no extra padding needed */
/* Dashboard batch export row: stack */
.batch-export-row .btn { width: 100%; }
/* Adm wizard: stack vertically */
.adm-wizard-bar { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.adm-step-line { width: 2px; height: 20px; margin-block: 0; margin-inline: 0; margin-inline-start: 15px; }
/* Student plan actions: wrap */
#studentPlanActions { flex-wrap: wrap; overflow-x: visible; }
/* Table-wrap: full viewport height scrollable */
.table-wrap { max-height: 60vh !important; overflow-y: auto; }
/* Planner command bar: compress */
.command-bar .row.g-2 > * { flex: 0 0 100%; }
/* High-priority filter: grid stacks */
.hp-advanced .row > * { flex: 0 0 100%; max-width: 100%; }
/* ── Mobile density: tighter padding for admin screens ── */
.soft-card { padding: 0.75rem; margin-bottom: 0.5rem; }
.filter-bar { padding: 8px 12px; gap: 6px; margin-bottom: 12px; }
html body .btn { min-height: 34px; padding: 0.35rem 0.9rem !important; font-size: 0.78rem !important; }
.form-control, .form-select { padding: 0.35rem 0.75rem !important; }
.form-label { margin-bottom: 0.15rem; }
.page-intro h2 { font-size: 1.05rem !important; margin-bottom: 2px; }
.panel-sub, .page-intro .panel-sub { font-size: 0.72rem; margin-bottom: 0.5rem; }
/* ── Mobile Cards — table-to-card transform ──────────────── */
.mobile-cards thead { display: none; }
.mobile-cards tbody { display: flex; flex-direction: column; gap: 0.75rem; }
.mobile-cards tbody tr {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.35rem 0.75rem;
padding: 0.85rem 1rem;
border-radius: var(--radius, 12px);
background: var(--glass-bg-data);
backdrop-filter: blur(16px) saturate(120%);
-webkit-backdrop-filter: blur(16px) saturate(120%);
box-shadow: var(--shadow-neu-sm);
}
.mobile-cards tbody tr td {
display: flex;
flex-direction: column;
padding: 0.2rem 0;
border: none;
font-size: 0.8rem;
}
.mobile-cards tbody tr td::before {
content: attr(data-label);
font-family: var(--font-mono, monospace);
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--t3, #6b7280);
margin-bottom: 0.15rem;
}
.mobile-cards tbody tr td.mc-primary {
grid-column: 1 / -1;
font-weight: 700;
font-size: 0.88rem;
color: var(--navy, #111144);
}
.mobile-cards tbody tr td.mc-actions {
grid-column: 1 / -1;
flex-direction: row;
flex-wrap: wrap;
gap: 0.5rem;
padding-top: 0.35rem;
border-top: var(--border-subtle);
margin-top: 0.25rem;
}
.mobile-cards tbody tr td.mc-hide { display: none; }
}
/* ── RTL mobile: sidebar slides from the RIGHT ─────────────── */
@media (max-width: 768px) {
html[dir="rtl"] .sidebar {
inset-inline-start: 0;
inset-inline-end: auto;
box-shadow: none;
}
html[dir="rtl"] .sidebar.sidebar-open {
box-shadow: -4px 0 32px rgba(0, 0, 0, 0.15);
}
}
/* ============================================================
MODAL DIALOG SYSTEM (replaces window.confirm / prompt)
============================================================ */
.dlg-backdrop {
position: fixed;
inset: 0;
z-index: 2000;
background: rgba(10, 18, 40, 0.55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
animation: dlg-fade-in 0.18s var(--ease);
}
@keyframes dlg-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
.dlg-box {
background: var(--bg);
border-radius: 20px;
border: none;
box-shadow: var(--shadow-lift);
width: 100%;
max-width: 440px;
overflow: hidden;
/* Cap to the viewport and lay out as a column so a tall body scrolls
internally while the header and footer (action buttons) stay pinned and
on-screen. Without this, content taller than the screen pushed the footer
buttons out of view. */
display: flex;
flex-direction: column;
max-height: calc(100vh - 2rem);
animation: dlg-slide-up 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes dlg-slide-up {
from { transform: translateY(20px) scale(0.97); opacity: 0; }
to { transform: translateY(0) scale(1); opacity: 1; }
}
.dlg-header {
padding: 1.25rem 1.5rem 0;
display: flex;
align-items: flex-start;
gap: 0.875rem;
flex-shrink: 0;
}
.dlg-close {
margin-inline-start: auto;
background: none;
border: none;
font-size: 1.5rem;
line-height: 1;
color: var(--ink-light, #6b7280);
cursor: pointer;
padding: 0 0.25rem;
opacity: 0.6;
transition: opacity 0.15s;
}
.dlg-close:hover { opacity: 1; }
.dlg-icon {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-neu-inset);
}
.dlg-icon .i { width: 20px; height: 20px; }
.dlg-icon-danger { background: rgba(220,38,38,0.06); color: #dc2626; }
.dlg-icon-warning { background: rgba(217,119,6,0.06); color: var(--amber); }
.dlg-icon-info { background: var(--brand-soft); color: var(--teal); }
.dlg-icon-success { background: rgba(22,163,74,0.06); color: #16a34a; }
.dlg-title {
font-weight: 700;
font-size: clamp(0.875rem, 0.831rem + 0.19vw, 1rem); /* 14px → 16px */
color: var(--ink);
margin-bottom: 0.3rem;
letter-spacing: -0.01em;
}
.dlg-body {
padding-block: 0.35rem 1rem;
padding-inline-start: calc(1.5rem + 40px + 0.875rem);
padding-inline-end: 1.5rem;
font-size: clamp(0.8rem, 0.78rem + 0.09vw, 0.875rem); /* ~12.8px → 14px */
color: var(--ink-2);
line-height: 1.55;
/* The scroll region: takes the slack and scrolls when content is tall, so the
pinned footer buttons remain on-screen. */
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
}
.dlg-body p { margin-bottom: 0.5rem; }
.dlg-body p:last-child { margin-bottom: 0; }
.dlg-body strong { color: var(--ink); }
.dlg-body code {
font-family: var(--font-mono);
font-size: 0.8rem;
background: var(--brand-soft);
padding: 0.15rem 0.4rem;
border-radius: 4px;
color: var(--ink);
}
.dlg-input-row {
padding-block: 0 1rem;
padding-inline-start: calc(1.5rem + 40px + 0.875rem);
padding-inline-end: 1.5rem;
flex-shrink: 0;
}
.dlg-input-row label {
display: block;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--ink-2);
margin-bottom: 0.35rem;
}
.dlg-input-row input {
box-sizing: border-box;
width: 100%;
padding: 0.5rem 0.75rem;
border: none;
border-radius: 14px;
font-family: var(--font-mono);
font-size: 0.875rem;
font-weight: 600;
color: var(--ink);
background: transparent;
box-shadow: var(--shadow-neu-inset);
transition: box-shadow 0.2s var(--ease);
outline: none;
}
.dlg-input-row input:focus {
box-shadow: var(--shadow-neu-inset),
0 0 0 2px color-mix(in srgb, var(--teal) 25%, transparent);
}
.dlg-input-row input.dlg-input-danger:focus {
border-color: var(--danger);
box-shadow: 0 0 0 3px rgba(220,38,38,.15);
}
.dlg-input-hint {
font-size: 0.75rem;
color: var(--muted);
margin-top: 0.3rem;
}
.dlg-footer {
padding: 0.875rem 1.5rem 1.25rem;
display: flex;
justify-content: flex-end;
gap: 0.5rem;
border-top: none;
background: transparent;
/* Pinned below the scrollable body so the action buttons are always visible. */
flex-shrink: 0;
}
.dlg-footer .btn-cancel {
background: transparent;
border: none;
color: var(--t2);
font-family: var(--font-body);
font-weight: 600;
font-size: 0.875rem;
padding: 0.5rem 1.25rem;
border-radius: 14px;
cursor: pointer;
transition: all 0.18s;
box-shadow: var(--shadow-neu-sm);
}
.dlg-footer .btn-cancel:hover {
color: var(--ink);
box-shadow: var(--shadow-neu);
}
.dlg-footer .btn-confirm {
font-family: var(--font-body);
font-weight: 700;
font-size: 0.875rem;
padding: 0.5rem 1.5rem;
border-radius: 14px;
border: none;
cursor: pointer;
transition: all 0.18s;
min-width: 90px;
}
.dlg-footer .btn-confirm.danger {
background: var(--danger);
color: #fff;
box-shadow: 3px 3px 8px rgba(192,48,48,0.3),
-2px -2px 6px rgba(255,255,255,0.2);
}
.dlg-footer .btn-confirm.danger:hover {
background: #d43a3a;
box-shadow: 4px 4px 12px rgba(192,48,48,0.4),
-2px -2px 8px rgba(255,255,255,0.25);
}
.dlg-footer .btn-confirm.primary {
background: var(--teal);
color: #fff;
box-shadow: 3px 3px 8px color-mix(in srgb, var(--teal) 35%, transparent),
-2px -2px 6px rgba(255,255,255,0.25);
}
.dlg-footer .btn-confirm.primary:hover {
background: var(--teal-bright);
box-shadow: 4px 4px 12px color-mix(in srgb, var(--teal) 40%, transparent),
-2px -2px 8px rgba(255,255,255,0.3);
}
.dlg-footer .btn-confirm.warning {
background: var(--amber);
color: #fff;
box-shadow: 3px 3px 8px rgba(217,119,6,0.3),
-2px -2px 6px rgba(255,255,255,0.2);
}
.dlg-footer .btn-confirm:disabled {
opacity: 0.45;
cursor: not-allowed;
box-shadow: var(--shadow-neu-sm);
}
/* ============================================================
TOAST NOTIFICATION (custom bottom-right)
============================================================ */
#toast-container {
position: fixed;
top: 1rem;
inset-inline-end: 1.5rem;
z-index: 3000;
display: flex;
flex-direction: column;
gap: 0.5rem;
pointer-events: none;
}
.ux-toast {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 0.875rem 1rem;
background: var(--bg);
border-radius: 14px;
border: none;
box-shadow: var(--shadow-lift);
min-width: 260px;
max-width: 340px;
pointer-events: all;
position: relative;
overflow: hidden;
animation: toast-in 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) both;
border-inline-start: 3px solid transparent;
}
.ux-toast.removing {
animation: toast-out 0.22s var(--ease) forwards;
}
@keyframes toast-in {
from { opacity: 0; transform: translateY(-12px) scale(0.95); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toast-out {
to { opacity: 0; transform: translateX(20px); max-height: 0; padding: 0; margin: 0; border: none; }
}
.ux-toast.success { border-inline-start-color: var(--success); }
.ux-toast.error { border-inline-start-color: var(--danger); }
.ux-toast.info { border-inline-start-color: var(--brand); }
.ux-toast.warning { border-inline-start-color: var(--warning); }
.ux-toast-icon {
flex-shrink: 0;
width: 28px;
height: 28px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.85rem;
box-shadow: var(--shadow-neu-inset);
}
.ux-toast.success .ux-toast-icon { background: var(--teal-dim); color: var(--success); }
.ux-toast.error .ux-toast-icon { background: var(--pl-danger-bg); color: var(--danger); }
.ux-toast.info .ux-toast-icon { background: var(--teal-dim); color: var(--brand); }
.ux-toast.warning .ux-toast-icon { background: rgba(154,106,8,0.06); color: var(--warning); }
.ux-toast-body { flex: 1; min-width: 0; }
.ux-toast-title {
font-weight: 700;
font-size: clamp(0.8rem, 0.78rem + 0.09vw, 0.875rem); /* ~12.8px → 14px */
color: var(--ink);
line-height: 1.3;
}
.ux-toast-sub {
font-size: clamp(0.7rem, 0.676rem + 0.09vw, 0.78rem); /* ~11.2px → 12.5px */
color: var(--muted);
margin-top: 0.1rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ux-toast-close {
flex-shrink: 0;
width: 22px;
height: 22px;
border: none;
background: none;
color: var(--muted);
cursor: pointer;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
padding: 0;
transition: background 0.1s;
}
.ux-toast-close:hover { background: var(--brand-soft); color: var(--ink); }
/* Drain bar */
.ux-toast-progress {
position: absolute;
bottom: 0; inset-inline-start: 0;
height: 2px;
border-radius: 0 0 0 2px;
animation: toast-drain linear forwards;
transform-origin: left;
}
[dir="rtl"] .ux-toast-progress {
transform-origin: right;
}
.ux-toast.success .ux-toast-progress { background: var(--success); }
.ux-toast.error .ux-toast-progress { background: var(--danger); }
.ux-toast.info .ux-toast-progress { background: var(--brand); }
.ux-toast.warning .ux-toast-progress { background: var(--warning); }
@keyframes toast-drain {
from { width: 100%; }
to { width: 0%; }
}
/* ============================================================
SORT ARROWS
============================================================ */
.table-wrap thead th[data-sort] {
padding-inline-end: 1.5rem; /* room for arrow */
position: relative;
}
.table-wrap thead th[data-sort]::after {
content: '↕';
position: absolute;
inset-inline-end: 0.4rem;
top: 50%;
transform: translateY(-50%);
opacity: 0.28;
font-size: 0.7rem;
transition: opacity 0.1s;
}
.table-wrap thead th[data-sort]:hover::after { opacity: 0.55; }
.table-wrap thead th[data-sort][data-dir="asc"]::after { content: '↑'; opacity: 0.85; }
.table-wrap thead th[data-sort][data-dir="desc"]::after { content: '↓'; opacity: 0.85; }
/* Active sort col gets subtle highlight */
.table-wrap thead th[data-sort][data-dir] {
color: var(--brand-dark) !important;
background: var(--teal-dim) !important;
}
/* ============================================================
SKELETON LOADING ROWS
============================================================ */
.skel-row td {
padding: 0.5rem 0.75rem !important;
border-top: 1px solid var(--line) !important;
}
.skel-cell {
height: 14px;
border-radius: 6px;
background: linear-gradient(90deg, var(--line) 25%, var(--card) 50%, var(--line) 75%);
background-size: 200% 100%;
animation: skel-shimmer 1.4s var(--ease) infinite;
}
@keyframes skel-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* (Sidebar user card styles are now defined in the SIDEBAR section above as .s-foot, .s-usr, .avatar, .u-nm, .u-rl) */
/* ============================================================
KEYBOARD SHORTCUT HELP OVERLAY
============================================================ */
.kbd-help-backdrop {
position: fixed;
inset: 0;
z-index: 2500;
background: rgba(10,18,40,.6);
backdrop-filter: blur(6px);
display: flex;
align-items: center;
justify-content: center;
animation: dlg-fade-in 0.15s var(--ease);
}
.kbd-help-box {
background: var(--card);
border-radius: var(--radius-lg);
box-shadow: 0 24px 64px rgba(10,18,40,.22);
width: 100%;
max-width: 480px;
padding: 1.5rem;
animation: dlg-slide-up 0.2s var(--ease);
}
.kbd-help-box h3 {
font-size: 1rem;
font-weight: 700;
margin-bottom: 1rem;
color: var(--ink);
display: flex;
align-items: center;
gap: 0.5rem;
}
.kbd-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.45rem 0;
border-bottom: 1px solid var(--line);
font-size: 0.875rem;
}
.kbd-row:last-child { border-bottom: none; }
.kbd-desc { color: var(--ink-2); }
.kbd-key {
display: inline-flex;
align-items: center;
gap: 0.2rem;
}
kbd {
display: inline-block;
padding: 0.15rem 0.45rem;
font-family: var(--font-mono);
font-size: 0.72rem;
font-weight: 600;
color: var(--ink);
background: var(--brand-soft);
border: var(--border-mid);
border-bottom: 2px solid var(--line-strong);
border-radius: 5px;
line-height: 1.4;
}
/* ============================================================
FOCUS RINGS (keyboard nav only — no ring on mouse click)
============================================================ */
/* Remove outline on mouse users */
*:focus:not(:focus-visible) { outline: none; box-shadow: none; }
/* Restore crisp ring for keyboard users */
*:focus-visible {
outline: 2px solid var(--teal) !important;
outline-offset: 2px !important;
box-shadow: 0 0 0 4px var(--brand-glow) !important;
border-radius: var(--radius-sm);
}
/* Inputs already use box-shadow ring — keep consistent */
.form-control:focus-visible,
.form-select:focus-visible {
outline: none !important;
border: none !important;
box-shadow: var(--shadow-neu-inset),
0 0 0 2px color-mix(in srgb, var(--teal) 25%, transparent) !important;
}
/* Sidebar links keyboard nav */
.sidebar .nav-a:focus-visible {
outline: 2px solid var(--teal) !important;
outline-offset: -2px !important;
box-shadow: none !important;
}
/* ============================================================
PRINT STYLES
============================================================ */
@media print {
/* Hide chrome */
.sidebar,
.sidebar-backdrop,
.sidebar-toggle,
.page-header,
.actions-row,
#ux-loading-bar,
#toast-container,
.dlg-backdrop,
.btn-outline-secondary,
.cmd-backdrop,
.kbd-help-backdrop,
.color-mesh { display: none !important; }
/* Reset backgrounds */
body {
background: #fff !important;
background-image: none !important;
color: #000 !important;
font-size: 11pt;
}
body::after { display: none !important; }
main.flex-grow-1 {
padding: 0 !important;
width: 100% !important;
}
/* Glassmorphic panels: flatten on print */
.mc, .cpanel, .planner-panel, .zone-card, .term-details, .filter-bar {
border: 1px solid #ccc !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
background: #fff !important;
break-inside: avoid;
}
/* Tables: full width, visible borders */
.table-wrap {
max-height: none !important;
overflow: visible !important;
border: 1px solid #ccc;
box-shadow: none !important;
break-inside: avoid;
}
.table-wrap thead th {
background: #f0f0f0 !important;
color: #000 !important;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
/* Metric cards */
.metric {
border: 1px solid #ccc !important;
box-shadow: none !important;
break-inside: avoid;
}
/* Links: show URL in print */
a[href]::after {
content: " (" attr(href) ")";
font-size: 0.75em;
color: #666;
}
/* Hide less important link annotations */
.nav-link[href^="#"]::after { content: none; }
.nav-a[href^="#"]::after { content: none; }
.btn[href]::after { content: none; }
}
/* ============================================================
ADVISOR PORTFOLIO — DUAL-ACTION STUDENT ID CELL
============================================================ */
.adv-id-cell { white-space: nowrap; }
/* Timetable builder icon link — appears on row hover */
.adv-planner-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 5px;
font-size: 0.78rem;
text-decoration: none;
color: var(--muted);
background: transparent;
border: 1px solid transparent;
margin-inline-start: 3px;
vertical-align: middle;
transition: all 0.12s var(--ease);
opacity: 0; /* hidden at rest */
pointer-events: none;
position: relative;
top: -1px;
}
/* Show on row hover */
.table-wrap tbody tr:hover .adv-planner-btn,
.table-wrap tbody tr.attention-row:hover .adv-planner-btn {
opacity: 1;
pointer-events: all;
color: var(--brand);
background: var(--brand-soft);
border-color: var(--teal-border);
}
.adv-planner-btn:hover {
background: var(--brand) !important;
color: #fff !important;
border-color: var(--brand) !important;
transform: scale(1.12);
}
/* Tooltip via title attribute is enough; add a small visual cue */
.adv-planner-btn::after { content: none; /* no pseudo tooltip — native title is used */ }
/* On mobile: always visible (no hover state) */
@media (max-width: 768px) {
.adv-planner-btn {
opacity: 1;
pointer-events: all;
color: var(--brand);
background: var(--brand-soft);
border-color: var(--teal-border);
}
}
/* ============================================================
REDUCED MOTION — Accessibility: disable animations for users
who prefer reduced motion (vestibular disorders, etc.)
============================================================ */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ============================================================
UI/UX POLISH — Global Improvements
============================================================ */
/* ── Visually-hidden helper (screen-reader only) ───────────── */
.sr-only {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* ── Enhanced empty state with recovery action ─────────────── */
.empty-state-action {
display: inline-flex; align-items: center; gap: 0.4rem;
margin-top: 0.75rem; padding: 0.4rem 1rem;
border-radius: 10px; border: none;
font-size: 0.82rem; font-weight: 600;
color: var(--teal); background: var(--brand-soft);
cursor: pointer; transition: all 0.18s var(--ease);
text-decoration: none;
box-shadow: var(--shadow-neu-sm);
}
.empty-state-action:hover {
background: color-mix(in srgb, var(--teal) 12%, transparent);
box-shadow: var(--shadow-neu-sm);
color: var(--teal-deep);
}
.empty-state-action .i { width: 14px; height: 14px; }
/* ── Error state card ──────────────────────────────────────── */
.error-state {
text-align: center; padding: 2rem 1.5rem;
border: 1px solid rgba(192,48,48,0.12);
border-radius: var(--radius);
background: rgba(255,245,245,0.5);
backdrop-filter: blur(12px);
}
.error-state .error-icon {
display: flex; align-items: center; justify-content: center;
width: 48px; height: 48px; border-radius: 12px;
margin: 0 auto 0.75rem;
background: var(--pl-danger-bg); color: var(--danger);
box-shadow: var(--shadow-neu-inset);
}
.error-state .error-icon .i { width: 24px; height: 24px; }
.error-state .error-title {
font-weight: 700; font-size: 0.95rem; color: var(--danger);
margin-bottom: 0.3rem;
}
.error-state .error-detail {
font-size: 0.82rem; color: var(--t3); line-height: 1.5;
max-width: 40ch; margin: 0 auto;
}
/* ── Skeleton loading card ─────────────────────────────────── */
.skel-card {
border-radius: var(--radius);
padding: 1.25rem;
background: var(--glass-bg);
backdrop-filter: blur(12px);
box-shadow: var(--shadow-neu-sm);
}
.skel-block {
height: 14px; border-radius: 6px;
background: linear-gradient(90deg, var(--line) 25%, var(--card) 50%, var(--line) 75%);
background-size: 200% 100%;
animation: skel-shimmer 1.4s var(--ease) infinite;
margin-bottom: 0.5rem;
}
.skel-block:last-child { margin-bottom: 0; }
.skel-block-lg { height: 28px; }
.skel-block-sm { height: 10px; }
.skel-block-w50 { width: 50%; }
.skel-block-w75 { width: 75%; }
.skel-block-w30 { width: 30%; }
/* ── Button disabled state polish ──────────────────────────── */
html body .btn:disabled,
html body .btn.disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
box-shadow: var(--shadow-neu-sm) !important;
}
/* ── Export button style (was undefined in audit_explorer) ──── */
html body .btn-export {
color: var(--teal) !important;
background: transparent !important;
font-weight: 600 !important;
box-shadow: var(--shadow-neu-sm) !important;
}
html body .btn-export:hover {
background: color-mix(in srgb, var(--teal) 5%, transparent) !important;
color: var(--teal-deep) !important;
box-shadow: var(--shadow-neu) !important;
}
/* ── Neumorphic audit table (replaces plain .audit-table) ──── */
.audit-table-wrap {
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: none;
border-radius: var(--radius-lg);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
box-shadow: var(--shadow-neu);
}
/* ── Glassmorphic filter row ───────────────────────────────── */
.glass-filter-row {
display: flex; gap: 0.5rem; flex-wrap: wrap;
align-items: center; margin-bottom: 1rem;
padding: 0.75rem 1rem;
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: none; border-radius: var(--radius);
box-shadow: var(--shadow-neu);
}
/* ── Table row status highlights — accessible colors ───────── */
.audit-table tbody tr:hover td {
background: color-mix(in srgb, var(--teal) 3%, transparent) !important;
}
.audit-table tbody tr td.status-success { color: var(--pl-ok-text); font-weight: 700; }
.audit-table tbody tr td.status-error { color: var(--pl-danger-text); font-weight: 700; }
.audit-table tbody tr td.status-deny { color: var(--pl-warn-text); font-weight: 700; }
.audit-table tbody tr td.status-critical { color: #991b1b; font-weight: 700; background: rgba(255,240,240,0.5); }
/* ── Consistent card heading pattern ───────────────────────── */
.card-heading {
display: flex; align-items: center; gap: 0.5rem;
font-size: 0.72rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.07em;
color: var(--muted); margin-bottom: 0.75rem;
}
.card-heading::before {
content: ""; display: inline-block;
width: 3px; height: 0.8rem; border-radius: 2px;
background: var(--brand); opacity: 0.6;
}
.card-heading .i { width: 16px; height: 16px; opacity: 0.5; }
/* ── Smooth page transitions ───────────────────────────────── */
.content-wrap { animation: page-enter 0.3s var(--ease) both; }
@keyframes page-enter {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── Interactive table row — highlight on focus for a11y ───── */
.tbl-card tbody tr.cr-row:focus-within {
outline: 2px solid var(--teal);
outline-offset: -2px;
box-shadow: var(--shadow-neu);
}
.table-wrap tbody tr:focus-within td {
background: color-mix(in srgb, var(--teal) 4%, transparent);
}
/* ── Mobile filter bar stacking ────────────────────────────── */
@media (max-width: 768px) {
.glass-filter-row {
flex-direction: column;
align-items: stretch;
}
.glass-filter-row .form-control,
.glass-filter-row .form-select {
max-width: 100% !important;
width: 100%;
}
.glass-filter-row .btn {
width: 100%;
}
/* Profile grid: full-width on mobile */
.pf-grid { grid-template-columns: 1fr !important; }
.pf-info-card { flex-direction: column; text-align: center; }
/* Audit table: reduce font, enable scroll */
.audit-table th { padding: 5px; white-space: nowrap; font-size: 12px; } /* a11y: min 12px for headers */
.audit-table td { padding: 5px; white-space: nowrap; }
}
/* ── High contrast mode support ────────────────────────────── */
@media (forced-colors: active) {
.pill-status, .ph-chip, .pill, .nav-badge {
border: 1px solid currentColor;
}
.sidebar { border-inline-end: 1px solid currentColor; }
.btn { border: 1px solid currentColor; }
}
/* ============================================================
BACK-TO-TOP BUTTON
============================================================ */
.back-to-top {
position: fixed;
bottom: 2rem;
inset-inline-end: 2rem;
z-index: 900;
width: 40px;
height: 40px;
border: none;
border-radius: 50%;
background: var(--glass-bg-header);
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
box-shadow: var(--shadow-card);
color: var(--teal);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transform: translateY(12px);
transition: opacity 0.3s var(--ease), visibility 0.3s var(--ease), transform 0.3s var(--ease),
background 0.2s ease, box-shadow 0.2s ease;
pointer-events: none;
}
.back-to-top.visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
.back-to-top:hover {
background: var(--teal);
color: #fff;
box-shadow: 0 4px 16px color-mix(in srgb, var(--teal) 25%, transparent);
}
.back-to-top:focus-visible {
outline: 2px solid var(--teal);
outline-offset: 3px;
}
.back-to-top svg {
width: 18px;
height: 18px;
stroke: currentColor;
stroke-width: 2.5;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
/* ============================================================
PRINT STYLESHEET — clean output for reports
============================================================ */
@media print {
/* Hide non-essential UI */
.sidebar,
.sidebar-toggle,
.sidebar-backdrop,
.color-mesh,
.side-decor,
.back-to-top,
.skip-link,
.page-header-right,
#ux-loading-bar,
#toast-container,
.cmd-backdrop,
.nav-badge,
body::after {
display: none !important;
}
/* Reset backgrounds */
body {
background: #fff !important;
color: #000 !important;
font-size: 11pt !important;
line-height: 1.4 !important;
}
/* Full width content */
.shell {
display: block !important;
}
main.flex-grow-1 {
margin: 0 !important;
padding: 0.5cm !important;
max-width: 100% !important;
}
/* Glass cards → plain bordered boxes */
.glass, .glass-panel,
[class*="glass"] {
background: #fff !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: none !important;
border: 1px solid #ddd !important;
}
/* Tables: full borders */
table { border-collapse: collapse; width: 100%; }
th, td {
border: 1px solid #ccc !important;
padding: 4px 8px !important;
background: #fff !important;
color: #000 !important;
}
th { background: #f5f5f5 !important; font-weight: 700; }
/* Page breaks */
h1, h2, h3 { page-break-after: avoid; }
tr { page-break-inside: avoid; }
/* Links show URL */
a[href]:not([href^="#"]):not([href^="javascript"])::after {
content: " (" attr(href) ")";
font-size: 0.8em;
color: #666;
}
/* Page header: simpler */
.page-header {
border-bottom: 2px solid var(--teal);
padding-bottom: 0.5rem;
margin-bottom: 1rem;
}
}
/* ============================================================
SMOOTH CONTENT TRANSITIONS
============================================================ */
.content-wrap { animation: contentFadeIn 0.35s var(--ease) both; }
@keyframes contentFadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* Panel/section show transition for SPA-style hash panels */
.panel[style*="display: block"],
.panel.active {
animation: panelSlideIn 0.3s var(--ease) both;
}
@keyframes panelSlideIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
/* ============================================================
FOCUS IMPROVEMENTS — better visible focus for all interactives
============================================================ */
:focus-visible {
outline: 2px solid var(--teal);
outline-offset: 2px;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid var(--teal);
outline-offset: 0;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 12%, transparent);
}
/* ============================================================
SKELETON LOADING STATES (#17)
============================================================ */
.skeleton { position: relative; overflow: hidden; background: var(--line); border-radius: 6px; color: transparent !important; }
.skeleton * { visibility: hidden; }
.skeleton::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
animation: skeleton-shimmer 1.5s infinite;
}
@keyframes skeleton-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
/* Skeleton variants */
.skeleton-text { height: 1em; width: 60%; display: inline-block; }
.skeleton-text-sm { height: 0.75em; width: 40%; display: inline-block; }
.skeleton-circle { width: 40px; height: 40px; border-radius: 50%; }
.skeleton-card { height: 80px; border-radius: var(--radius, 18px); }
.skeleton-stat { height: 52px; width: 120px; border-radius: 12px; display: inline-block; }
/* ============================================================
SHARED EMPTY STATE COMPONENT (#23)
============================================================ */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 1.5rem; text-align: center; }
.empty-state-icon { width: 56px; height: 56px; margin-bottom: 1rem; opacity: 0.35; color: var(--t4, #6c6c8a); }
.empty-state-title { font-size: 1.05rem; font-weight: 600; color: var(--t2, #2d2d5e); margin-bottom: 0.35rem; }
.empty-state-desc { font-size: 0.875rem; color: var(--t4, #6c6c8a); max-width: 320px; line-height: 1.5; }
.empty-state-cta { margin-top: 1rem; }
/* ============================================================
REDUCED MOTION — respect user preferences
============================================================ */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.back-to-top { transition: none !important; }
.content-wrap { animation: none !important; }
}
/* ============================================================
TEAL CARD SURFACE — canonical visual used by many components
------------------------------------------------------------
One source of truth for the gradient-teal + border + shadow
pattern. Individual components layer their own padding / margin
/ transitions on top of this surface.
============================================================ */
.page-panel, .et-panel, .planner-panel, .sp-panel, .pl-panel, .si-panel,
.advisor-block, .cpanel, .zone-card, .drawer,
.ov-kpi, .ov-action, .ov-activity, .student-ctx-card,
.sp-mc, .kpi {
background: linear-gradient(160deg, var(--teal-dim) 0%, var(--card) 100%);
border: 1px solid var(--teal-border);
border-radius: var(--radius);
box-shadow: var(--shadow-card);
}
/* ============================================================
V2 UNIFIED COMPONENTS
------------------------------------------------------------
Canonical classes used across multiple feature templates.
Before promoting a class here, the rule is: it must be used
on ≥2 pages OR represent a standard page primitive (card,
KPI tile, toggle chip). Page-specific styling stays in the
feature partial / template.
============================================================ */
/* Page panel — gradient-teal card surface with standard padding.
Canonical name is .page-panel. Legacy aliases listed so existing
templates don't have to rename classes in this unification pass. */
.page-panel,
.et-panel,
.planner-panel,
.sp-panel,
.pl-panel,
.si-panel {
padding: 16px 20px;
margin-bottom: 12px;
}
.page-panel--tight { padding: 12px 14px; }
.page-panel--flush { margin-bottom: 0; }
/* KPI tile — single metric.
Canonical definition consolidating prior copies in
exam_timetable.html, sections_import.html, dashboard partial. */
.kpi {
border: 1px solid var(--teal-border);
border-radius: var(--radius);
padding: 0.6rem;
background: linear-gradient(160deg, var(--teal-dim) 0%, var(--card) 100%);
box-shadow: var(--shadow-card);
}
.kpi .k {
font-family: var(--font-mono);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--t3);
}
.kpi .v {
font-family: var(--font-serif);
font-size: 1.4rem;
font-weight: 700;
color: var(--teal);
line-height: 1.15;
}
.kpi .v.warn { color: var(--danger); }
/* Clickable drill-down KPI variant. */
.kpi-click {
cursor: pointer;
transition: border-color 0.15s, box-shadow 0.15s;
}
.kpi-click:hover {
border-color: var(--teal);
box-shadow: 0 0 0 2px var(--teal-border);
}
.kpi-click .v {
text-decoration: underline;
text-decoration-style: dotted;
text-underline-offset: 3px;
}
.kpi-click.active {
border-color: var(--teal);
box-shadow: 0 0 0 2px var(--brand-glow);
}
/* Toggle chip — radio/checkbox rendered as a pill. Canonical name is
.chip-toggle; .et-chip kept as alias so templates don't have to
rename yet. */
.chip-toggle,
.et-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 10px;
border: 1.5px solid var(--t4);
border-radius: 20px;
background: transparent;
color: var(--t2);
font-size: 0.78rem;
font-weight: 600;
cursor: pointer;
user-select: none;
transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.chip-toggle:hover,
.et-chip:hover { border-color: var(--teal); }
.chip-toggle.is-active,
.chip-toggle.active,
.et-chip.is-active,
.et-chip.active,
.chip-toggle:has(input:checked),
.et-chip:has(input:checked) {
background: var(--teal);
border-color: var(--teal);
color: #fff;
}
.chip-toggle input,
.et-chip input { display: none; }
/* Amber modifier dot (e.g. online/remote indicator). */
.chip-toggle__dot,
.et-online-dot {
color: #f59e0b;
font-size: 0.6em;
line-height: 1;
vertical-align: middle;
margin-inline-start: 2px;
}
.chip-toggle.is-active .chip-toggle__dot,
.chip-toggle.active .chip-toggle__dot,
.et-chip.is-active .et-online-dot,
.et-chip.active .et-online-dot { color: #fef3c7; }
/* Dark-mode adjustments. */
html[data-theme="dark"] .page-panel,
html[data-theme="dark"] .et-panel,
html[data-theme="dark"] .planner-panel,
html[data-theme="dark"] .sp-panel,
html[data-theme="dark"] .pl-panel,
html[data-theme="dark"] .si-panel,
html[data-theme="dark"] .kpi,
html[data-theme="dark"] .sp-mc,
html[data-theme="dark"] .ov-kpi,
html[data-theme="dark"] .ov-action,
html[data-theme="dark"] .ov-activity,
html[data-theme="dark"] .student-ctx-card,
html[data-theme="dark"] .advisor-block,
html[data-theme="dark"] .cpanel,
html[data-theme="dark"] .zone-card,
html[data-theme="dark"] .drawer {
background: rgba(255,255,255,0.04);
border-color: rgba(10,142,110,0.2);
box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
html[data-theme="dark"] .chip-toggle,
html[data-theme="dark"] .et-chip { color: var(--t1); }
html[data-theme="dark"] .chip-toggle.is-active,
html[data-theme="dark"] .chip-toggle.active,
html[data-theme="dark"] .et-chip.is-active,
html[data-theme="dark"] .et-chip.active,
html[data-theme="dark"] .chip-toggle:has(input:checked),
html[data-theme="dark"] .et-chip:has(input:checked) { color: #fff; }
/* Mobile tightening. */
@media (max-width: 768px) {
.page-panel,
.et-panel,
.planner-panel,
.sp-panel,
.pl-panel { padding: 12px 14px; }
.kpi { padding: 0.4rem; }
.kpi .v { font-size: 1.1rem; }
.chip-toggle,
.et-chip { font-size: 0.7rem; padding: 1px 7px; }
}
/* ============================================================
EXAM TIMETABLE — feature-specific styles
------------------------------------------------------------
Moved out of core/templates/core/exam_timetable.html so all
project styles live in global.css. Class names kept as-is
where unique to this page; unified where shared.
============================================================ */
.et-period-start,
.et-period-end {
direction: ltr;
text-align: center;
width: 80px;
max-width: 80px;
font-variant-numeric: tabular-nums;
font-family: var(--font-mono, monospace);
}
/* Drill-down container (kpi click targets) */
#kpiDrill { border-top: 2px solid var(--teal); padding-top: 10px; }
#kpiDrill table th {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--t3);
white-space: nowrap;
}
#kpiDrill table td { vertical-align: middle; }
.drill-course-chip {
display: inline-block;
padding: 1px 7px;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 600;
margin: 1px 2px;
}
/* Run history list (sidebar) */
.et-history-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 6px 10px;
border-radius: 6px;
cursor: pointer;
transition: background 0.15s;
}
.et-history-item:hover { background: var(--teal-dim); }
.et-history-item.active { background: var(--brand-soft); font-weight: 600; }
.et-history-item .et-run-info { flex: 1; min-width: 0; }
.et-del-btn {
flex-shrink: 0;
padding: 4px 6px;
border: none;
border-radius: 4px;
background: none;
color: var(--t3);
font-size: 0.85rem;
cursor: pointer;
opacity: 0;
transition: opacity 0.15s, color 0.15s, background 0.15s;
}
.et-history-item:hover .et-del-btn { opacity: 1; }
.et-del-btn:hover {
color: var(--danger);
background: rgba(192,48,48,0.08);
}
/* Department hierarchy (course selection panel) */
.et-dept-group { margin-bottom: 4px; }
.et-dept-header {
display: flex;
align-items: center;
gap: 6px;
padding: 3px 4px;
border-radius: 4px;
font-size: 0.75rem;
cursor: pointer;
transition: background 0.15s;
}
.et-dept-header:hover { background: var(--teal-dim); }
.et-dept-header .dept-name { font-weight: 700; color: var(--t2); font-size: 0.8rem; }
.et-dept-header .dept-count { color: var(--t3); font-weight: 400; }
.et-dept-header .dept-toggle {
margin-inline-start: auto;
font-size: 0.68rem;
color: var(--teal);
text-decoration: none;
}
.et-dept-chips {
padding-block: 2px 4px;
padding-inline-start: 12px;
padding-inline-end: 0;
border-inline-start: 2px solid var(--teal-border);
margin-inline-start: 6px;
}
.et-level-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 3px;
margin-bottom: 2px;
}
.et-level-badge {
flex-shrink: 0;
min-width: 20px;
padding: 1px 5px;
border-radius: 3px;
background: var(--brand-soft);
color: var(--t3);
font-size: 0.58rem;
font-weight: 700;
text-align: center;
white-space: nowrap;
}
/* Exam schedule grid */
.et-grid { width: 100%; border-collapse: collapse; }
.et-grid th, .et-grid td {
padding: 7px 6px;
border: var(--border-mid);
text-align: center;
vertical-align: middle;
}
.et-grid thead th {
background: var(--teal-dim);
color: var(--t3);
font-size: 0.73rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap;
}
.et-grid tbody th {
background: var(--teal-dim);
color: var(--t2);
font-size: 0.78rem;
font-weight: 700;
min-width: 70px;
white-space: nowrap;
}
.et-grid td { min-width: 90px; font-size: 0.82rem; font-weight: 600; }
.et-grid .et-empty { color: var(--t5); font-size: 0.75rem; font-weight: 400; }
.et-grid .et-course {
display: inline-block;
vertical-align: top;
margin: 2px 1px;
padding: 3px 8px;
border-radius: 6px;
font-size: 0.78rem;
font-weight: 600;
}
.et-grid .et-overflow-row th,
.et-grid .et-overflow-row td { background: var(--pl-danger-bg); }
.et-grid .et-highlight { outline: 2.5px solid var(--teal); outline-offset: -2px; }
.et-grid .et-dim { opacity: 0.25; }
/* Drag-and-drop pin */
.et-course[draggable="true"] { cursor: grab; }
.et-course[draggable="true"]:active { cursor: grabbing; }
.et-course.et-pinned {
outline: 2px dashed var(--warning);
outline-offset: -1px;
}
.et-grid td.et-drag-over {
background: var(--brand-soft) !important;
outline: 2px dashed var(--teal);
outline-offset: -2px;
}
.et-pin-bar {
display: flex;
align-items: center;
gap: 8px;
margin-top: 6px;
font-size: 0.75rem;
color: var(--t3);
}
.et-pin-bar a {
color: var(--danger);
font-size: 0.72rem;
text-decoration: none;
}
/* Conflict matrix (heatmap) */
.et-matrix { border-collapse: collapse; font-size: 0.62rem; }
.et-matrix th, .et-matrix td {
border: 1px solid var(--line-h);
padding: 0;
text-align: center;
vertical-align: middle;
}
.et-matrix td {
width: 32px;
height: 32px;
min-width: 32px;
font-size: 0.6rem;
font-weight: 600;
cursor: default;
}
.et-matrix thead th {
height: 80px;
padding: 4px 0;
vertical-align: bottom;
white-space: nowrap;
cursor: pointer;
}
.et-matrix thead th > span {
display: inline-block;
width: 1.6em;
transform: rotate(-55deg);
transform-origin: left bottom;
color: var(--t2);
font-size: 0.65rem;
font-weight: 700;
}
[dir="rtl"] .et-matrix thead th > span {
transform: rotate(55deg);
transform-origin: right bottom;
}
.et-matrix tbody th {
padding: 0 5px;
background: var(--teal-dim);
color: var(--t2);
font-size: 0.65rem;
font-weight: 700;
text-align: end;
white-space: nowrap;
cursor: pointer;
}
.et-matrix td:not(.cm-0):not(.cm-diag) { cursor: pointer; }
.et-matrix .cm-0 { background: transparent; color: transparent; }
.et-matrix .cm-1 { background: hsl(45 90% 88%); color: var(--warning); }
.et-matrix .cm-2 { background: hsl(33 90% 78%); color: #7a4400; }
.et-matrix .cm-3 { background: hsl(15 85% 68%); color: #fff; }
.et-matrix .cm-4 { background: hsl(0 80% 55%); color: #fff; }
.et-matrix .cm-diag { background: var(--t5); color: transparent; }
.et-matrix tbody tr:hover > td,
.et-matrix tbody tr:hover > th,
.et-matrix .cm-col-hl { box-shadow: inset 0 0 0 50px var(--brand-soft); }
.et-matrix tbody tr:hover > .cm-col-hl { box-shadow: inset 0 0 0 50px var(--brand-glow); }
.et-legend {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin-top: 8px;
color: var(--t3);
font-size: 0.72rem;
}
.et-legend-box {
display: inline-block;
width: 18px;
height: 18px;
border: var(--border-mid);
border-radius: 3px;
vertical-align: middle;
}
/* Matrix zoom toolbar */
.et-matrix-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5rem 0.75rem;
margin-bottom: 0.5rem;
}
.et-matrix-title {
font-family: var(--font-mono);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--t3);
}
.et-zoom-controls { display: flex; align-items: center; gap: 0.35rem; }
.et-zoom-btn {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: none;
border-radius: 6px;
background: var(--glass-bg);
color: var(--t3);
font-size: 0.85rem;
font-weight: 700;
cursor: pointer;
box-shadow: var(--shadow-neu-sm);
transition: all 0.15s;
}
.et-zoom-btn:hover { color: var(--teal); }
.et-zoom-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.et-zoom-level {
min-width: 40px;
color: var(--t3);
font-family: var(--font-mono);
font-size: 0.72rem;
font-weight: 600;
text-align: center;
}
.et-matrix-viewport {
overflow: auto;
max-height: 400px;
border-radius: var(--radius);
-webkit-overflow-scrolling: touch;
}
.et-matrix-scaler { transition: transform 0.2s var(--ease); }
.et-matrix-empty { display: none; }
.et-matrix-empty.visible { display: block; }
/* Utility tags used inside the grid */
.et-period-sep { font-size: 0.75rem; color: var(--t3); }
.et-period-remove-btn { padding: 2px 6px; font-size: 0.7rem; line-height: 1; }
.et-add-period-btn { font-size: 0.72rem; }
.et-drill-table { font-size: 0.82rem; }
.et-credit-tag { opacity: 0.6; font-weight: 400; }
.et-room-tag {
display: block;
max-width: 180px;
margin-top: 2px;
font-family: var(--font-mono);
font-size: 0.65rem;
font-weight: 500;
opacity: 0.75;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.et-qa-title { color: var(--danger); }
.et-overflow-label { color: var(--danger); }
.et-pagination-ellipsis { padding: 0 0.2rem; color: var(--t3); }
/* Fullscreen matrix */
.page-panel.matrix-fullscreen,
.et-panel.matrix-fullscreen {
position: fixed;
inset: 0;
z-index: 10001;
display: flex;
flex-direction: column;
margin: 0;
padding: 12px 18px;
background: var(--card);
border-radius: 0;
overflow: hidden;
}
.page-panel.matrix-fullscreen .et-matrix-viewport,
.et-panel.matrix-fullscreen .et-matrix-viewport {
max-height: none;
flex: 1 1 auto;
}
/* Dark-mode overrides — exam timetable */
html[data-theme="dark"] .et-matrix th,
html[data-theme="dark"] .et-matrix td { border-color: var(--line); }
html[data-theme="dark"] .et-zoom-btn { box-shadow: var(--shadow-neu-sm); }
html[data-theme="dark"] .et-zoom-btn:hover { box-shadow: var(--shadow-neu); }
html[data-theme="dark"] .et-matrix .cm-diag { background: var(--glass-bg-header); }
html[data-theme="dark"] .et-matrix .cm-1 { background: hsl(45 60% 22%); color: hsl(45 90% 72%); }
html[data-theme="dark"] .et-matrix .cm-2 { background: hsl(33 60% 22%); color: hsl(33 80% 72%); }
html[data-theme="dark"] .et-matrix .cm-3 { background: hsl(15 55% 28%); color: #fff; }
html[data-theme="dark"] .et-matrix .cm-4 { background: hsl(0 60% 32%); color: #fff; }
html[data-theme="dark"] .et-grid .et-overflow-row th,
html[data-theme="dark"] .et-grid .et-overflow-row td { background: rgba(240,96,96,0.08); }
html[data-theme="dark"] .et-del-btn:hover { color: var(--danger); background: rgba(240,96,96,0.10); }
html[data-theme="dark"] .drill-course-chip { color: var(--t0); }
html[data-theme="dark"] .drill-course-chip small { color: var(--t3); }
html[data-theme="dark"] #scheduleGrid td { color: var(--t0); }
html[data-theme="dark"] #scheduleGrid th { color: var(--t3); }
/* Responsive tightening — exam timetable */
@media (max-width: 1024px) {
.et-grid td { min-width: 70px; }
.et-matrix td { width: 28px; height: 28px; min-width: 28px; }
.et-dept-chips { padding-inline-start: 8px; }
}
@media (max-width: 768px) {
.et-grid { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.et-grid td { min-width: 60px; font-size: 0.7rem; }
.et-grid th { font-size: 0.65rem; }
.et-matrix { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.et-matrix td { width: 26px; height: 26px; min-width: 26px; font-size: 0.5rem; }
.et-matrix thead th { height: 60px; }
.et-matrix thead th > span { font-size: 0.55rem; }
.et-dept-chips { padding-inline-start: 6px; margin-inline-start: 4px; }
.et-legend { gap: 6px; font-size: 0.65rem; }
.et-panel .row > [class*="col-md-"],
.page-panel .row > [class*="col-md-"] {
flex: 0 0 100%;
max-width: 100%;
}
}
/* ============================================================
TIMETABLE WORKSPACE — feature-specific styles
------------------------------------------------------------
Moved out of core/templates/core/timetable_workspace.html.
============================================================ */
.tw-cmd-bar {
position: sticky;
top: 0;
z-index: 90;
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
padding: 10px 16px;
background: var(--glass-bg-header);
backdrop-filter: var(--glass-blur);
border-bottom: 1px solid var(--line);
}
.tw-cmd-bar select,
.tw-cmd-bar input[type="search"] {
min-width: 120px;
padding: 5px 10px;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--card);
color: var(--ink);
font-size: 0.82rem;
}
.tw-cmd-bar .tw-btn {
padding: 5px 14px;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--card);
color: var(--ink);
font-size: 0.82rem;
cursor: pointer;
transition: all 0.15s var(--ease);
}
.tw-cmd-bar .tw-btn:hover { background: var(--brand-soft); }
.tw-cmd-bar .tw-btn-primary {
background: var(--teal);
color: #fff;
border-color: var(--teal);
}
.tw-cmd-bar .tw-btn-primary:hover { background: var(--teal-deep); }
.tw-cmd-bar .tw-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 10px;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 600;
}
.tw-badge-draft { background: rgba(217,119,6,0.12); color: var(--amber); }
.tw-badge-ok { background: color-mix(in srgb, var(--teal) 10%, transparent); color: var(--teal); }
.tw-badge-critical { background: rgba(192,48,48,0.1); color: var(--danger); }
.tw-cmd-sep { flex-shrink: 0; width: 1px; height: 24px; background: var(--line); }
/* Three-column workspace */
.tw-workspace {
display: grid;
grid-template-columns: 210px 1fr 260px;
gap: 0;
min-height: calc(100vh - 120px);
}
/* Left sidebar */
.tw-left {
padding: 0;
max-height: calc(100vh - 120px);
overflow-y: auto;
background: var(--card);
border-inline-end: 1px solid var(--line);
}
.tw-left-section { padding: 8px 10px; border-bottom: 1px solid var(--line); }
.tw-left-section h3 {
margin: 0 0 8px;
color: var(--t4);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.tw-board-item {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 10px;
border-radius: var(--radius-sm);
color: var(--ink);
font-size: 0.82rem;
cursor: pointer;
transition: background 0.12s;
}
.tw-board-item:hover { background: var(--brand-soft); }
.tw-board-item.active { background: var(--teal-dim); color: var(--teal); font-weight: 600; }
.tw-board-chip {
padding: 1px 6px;
border-radius: 999px;
background: color-mix(in srgb, var(--teal) 10%, transparent);
color: var(--teal);
font-size: 0.65rem;
font-weight: 600;
}
.tw-board-chip.danger { background: rgba(192,48,48,0.1); color: var(--danger); }
.tw-search {
width: 100%;
padding: 6px 10px;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--bg);
color: var(--ink);
font-size: 0.8rem;
}
.tw-section-list { max-height: 280px; margin-top: 6px; overflow-y: auto; }
.tw-section-item {
display: flex;
flex-direction: column;
gap: 2px;
margin-bottom: 4px;
padding: 7px 10px;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--card);
font-size: 0.78rem;
cursor: grab;
transition: box-shadow 0.12s;
}
.tw-section-item:hover { box-shadow: var(--shadow-card); }
.tw-section-item .code { color: var(--teal); font-weight: 700; }
.tw-section-item .meta { color: var(--t4); font-size: 0.7rem; }
.tw-quick-stat {
display: flex;
justify-content: space-between;
align-items: center;
padding: 4px 0;
color: var(--t3);
font-size: 0.78rem;
}
.tw-quick-stat .val { color: var(--ink); font-weight: 700; }
.tw-quick-stat .val.danger { color: var(--danger); }
/* Centre grid */
.tw-centre {
padding: 12px;
max-height: calc(100vh - 120px);
overflow: auto;
}
.tw-board-strip {
display: flex;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 12px;
padding: 10px 14px;
background: linear-gradient(160deg, var(--teal-dim) 0%, var(--card) 100%);
border: 1px solid var(--teal-border);
border-radius: var(--radius);
}
.tw-metric { min-width: 80px; text-align: center; }
.tw-metric .num { color: var(--teal); font-size: 1.3rem; font-weight: 800; }
.tw-metric .num.danger { color: var(--danger); }
.tw-metric .lbl {
color: var(--t4);
font-size: 0.65rem;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.tw-grid {
display: grid;
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--card);
}
.tw-grid-header {
padding: 8px 4px;
border-bottom: 1px solid var(--line);
background: var(--glass-bg-header);
color: var(--t2);
font-size: 0.75rem;
font-weight: 700;
text-align: center;
}
.tw-grid-slot-label {
display: flex;
align-items: center;
padding: 6px 8px;
border-bottom: 1px solid var(--line);
border-inline-end: 1px solid var(--line);
color: var(--t4);
font-size: 0.7rem;
}
.tw-cell {
position: relative;
min-height: 56px;
padding: 3px;
border-bottom: 1px solid var(--line);
border-inline-end: 1px solid var(--line);
transition: background 0.1s;
}
.tw-cell.drop-valid { background: var(--brand-soft); }
.tw-cell.drop-warning { background: rgba(217,119,6,0.08); }
.tw-cell.drop-critical { background: rgba(192,48,48,0.08); }
.tw-cell:last-child { border-inline-end: none; }
/* Draggable course card inside a grid cell (NOT a page-panel) */
.tw-card {
position: relative;
padding: 5px 8px;
border: 1px solid rgba(0,0,0,0.08);
border-radius: var(--radius-sm);
background: var(--bg);
font-size: 0.72rem;
cursor: grab;
transition: box-shadow 0.12s, transform 0.1s;
}
.tw-card:hover { box-shadow: var(--shadow-card); transform: translateY(-1px); }
.tw-card.info { border-color: rgba(64,86,227,0.62); box-shadow: inset 0 0 0 1px rgba(64,86,227,0.14); }
.tw-card.warning { border-color: rgba(217,119,6,0.65); box-shadow: inset 0 0 0 1px rgba(217,119,6,0.16); }
.tw-card.critical { border-color: rgba(192,48,48,0.72); box-shadow: inset 0 0 0 1px rgba(192,48,48,0.16); }
.tw-card.locked { opacity: 0.7; }
.tw-card.highlight { outline: 2px solid var(--royal); outline-offset: 1px; animation: tw-pulse 0.6s var(--ease) 2; }
.tw-card.has-issue::after {
content: '';
position: absolute;
top: 4px;
inset-inline-end: 4px;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--danger);
box-shadow: 0 0 0 2px rgba(255,255,255,0.78), 0 0 8px rgba(192,48,48,0.55);
}
.tw-card.warning.has-issue::after {
background: var(--amber);
box-shadow: 0 0 0 2px rgba(255,255,255,0.78), 0 0 8px rgba(217,119,6,0.5);
}
.tw-card.info.has-issue::after {
background: var(--royal);
box-shadow: 0 0 0 2px rgba(255,255,255,0.78), 0 0 8px rgba(64,86,227,0.5);
}
.tw-card.critical.has-issue::after {
background: var(--danger);
box-shadow: 0 0 0 2px rgba(255,255,255,0.78), 0 0 8px rgba(192,48,48,0.55);
}
/* .tw-card has a pastel background painted inline via JS — always light.
Lock text to dark ink regardless of theme so it stays readable. */
.tw-card .cc { color: #111827; font-weight: 700; }
.tw-card .ci { color: #4b5563; font-size: 0.65rem; }
.tw-card-badges { display: flex; gap: 3px; margin-top: 2px; }
.tw-card-badges .badge-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
border-radius: 50%;
font-size: 0.55rem;
font-weight: 800;
}
/* Right panel */
.tw-right {
padding: 0;
max-height: calc(100vh - 120px);
overflow-y: auto;
background: var(--card);
border-inline-start: 1px solid var(--line);
}
.tw-panel-tabs {
display: flex;
border-bottom: 1px solid var(--line);
background: var(--glass-bg-header);
}
.tw-panel-tab {
flex: 1;
padding: 8px 4px;
border-bottom: 2px solid transparent;
color: var(--t4);
font-size: 0.72rem;
font-weight: 600;
text-align: center;
cursor: pointer;
transition: all 0.12s;
}
.tw-panel-tab:hover { color: var(--ink); }
.tw-panel-tab.active { color: var(--teal); border-bottom-color: var(--teal); }
.tw-panel-body { padding: 8px 10px; }
.tw-issue-row {
display: flex;
align-items: flex-start;
gap: 6px;
margin-bottom: 3px;
padding: 6px 8px;
border-radius: var(--radius-sm);
background: var(--bg);
font-size: 0.72rem;
cursor: pointer;
transition: background 0.1s;
}
.tw-issue-row:hover { background: var(--brand-soft); }
.tw-issue-dot {
flex-shrink: 0;
width: 8px;
height: 8px;
margin-top: 4px;
border-radius: 50%;
}
.tw-issue-dot.critical { background: var(--danger); }
.tw-issue-dot.warning { background: var(--amber); }
.tw-issue-dot.info { background: var(--sky); }
/* Bottom panel */
.tw-bottom {
max-height: 0;
overflow: hidden;
background: var(--card);
border-top: 1px solid var(--line);
transition: max-height 0.25s var(--ease);
}
.tw-bottom.open { max-height: 320px; overflow-y: auto; }
.tw-bottom-handle {
display: flex;
align-items: center;
justify-content: center;
height: 32px;
border-bottom: 1px solid var(--line);
color: var(--t4);
font-size: 0.7rem;
font-weight: 600;
cursor: pointer;
}
.tw-bottom-handle:hover { background: var(--brand-soft); }
.tw-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
padding: 40px;
color: var(--t4);
text-align: center;
}
.tw-empty svg { width: 48px; height: 48px; opacity: 0.3; }
.tw-empty p { max-width: 320px; font-size: 0.85rem; }
.tw-sel-field {
display: flex;
justify-content: space-between;
padding: 4px 0;
border-bottom: 1px solid var(--line);
font-size: 0.78rem;
}
.tw-sel-field .label { color: var(--t4); }
.tw-sel-field .value { color: var(--ink); font-weight: 600; }
/* Dark mode — timetable workspace */
html[data-theme="dark"] .tw-cmd-bar { background: rgba(21,24,38,0.92); border-color: rgba(255,255,255,0.06); }
html[data-theme="dark"] .tw-cmd-bar select,
html[data-theme="dark"] .tw-cmd-bar input[type="search"],
html[data-theme="dark"] .tw-cmd-bar .tw-btn { background: var(--bg); border-color: rgba(255,255,255,0.08); }
html[data-theme="dark"] .tw-cmd-bar .tw-btn:hover { background: rgba(10,142,110,0.12); }
html[data-theme="dark"] .tw-cmd-bar .tw-btn-primary { background: var(--teal); border-color: var(--teal); }html[data-theme="dark"] .tw-left,
html[data-theme="dark"] .tw-right,
html[data-theme="dark"] .tw-grid,
html[data-theme="dark"] .tw-bottom,
html[data-theme="dark"] #twDrawer {
background: var(--card); border-color: rgba(255,255,255,0.06);
}html[data-theme="dark"] .tw-left-section,
html[data-theme="dark"] .tw-grid-slot-label,
html[data-theme="dark"] .tw-cell,
html[data-theme="dark"] .tw-bottom-handle,
html[data-theme="dark"] .tw-sel-field,
html[data-theme="dark"] .dba-section,
html[data-theme="dark"] .dba-nav-item,
html[data-theme="dark"] .sp-adv-wrap {
border-color: rgba(255,255,255,0.06);
}
html[data-theme="dark"] .tw-search { background: var(--bg); border-color: rgba(255,255,255,0.08); }
html[data-theme="dark"] .tw-section-item { background: var(--bg); border-color: rgba(255,255,255,0.06); }
html[data-theme="dark"] .tw-board-item:hover { background: rgba(10,142,110,0.10); }
html[data-theme="dark"] .tw-board-item.active { background: rgba(10,142,110,0.15); }
html[data-theme="dark"] .tw-board-strip { background: linear-gradient(160deg, rgba(10,142,110,0.08) 0%, var(--card) 100%); border-color: rgba(10,142,110,0.12); }html[data-theme="dark"] .tw-grid-header { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.06); }html[data-theme="dark"] .tw-cell.drop-valid { background: rgba(10,142,110,0.10); }
html[data-theme="dark"] .tw-cell.drop-warning { background: rgba(217,119,6,0.10); }
html[data-theme="dark"] .tw-cell.drop-critical { background: rgba(192,48,48,0.10); }
html[data-theme="dark"] .tw-card { border-color: rgba(255,255,255,0.10); }
html[data-theme="dark"] .tw-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
html[data-theme="dark"] .tw-card.warning { border-color: rgba(245,183,49,0.75); }
html[data-theme="dark"] .tw-card.critical { border-color: rgba(240,96,96,0.82); }
html[data-theme="dark"] .tw-card.info { border-color: rgba(96,120,255,0.82); }
html[data-theme="dark"] .tw-panel-tabs { background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.06); }
html[data-theme="dark"] .tw-issue-row { background: rgba(255,255,255,0.03); }
html[data-theme="dark"] .tw-issue-row:hover { background: rgba(10,142,110,0.08); }html[data-theme="dark"] .tw-bottom-handle:hover { background: rgba(10,142,110,0.08); }html[data-theme="dark"] .tw-quick-stat { color: var(--t3); }
@keyframes tw-pulse {
0%, 100% { outline-color: var(--royal); }
50% { outline-color: transparent; }
}
/* Lab grid styling */
.tw-lab-grid { background: color-mix(in srgb, var(--teal) 4%, var(--card)) !important; }
.tw-lab-grid .tw-grid-header {
background: color-mix(in srgb, var(--teal) 10%, var(--card)) !important;
color: var(--teal) !important;
}
@media (max-width: 1100px) {
.tw-workspace { grid-template-columns: 1fr; }
.tw-left,
.tw-right { display: none; }
}
/* ============================================================
STUDENT TIMETABLE PLANNER — feature-specific styles
------------------------------------------------------------
Moved out of core/templates/core/planner.html.
Introduces --pl-overlay-* / --pl-danger-* / --pl-warn-* /
--pl-ok-* / --pl-conflict-cell CSS custom properties for
this feature's overlay palette. Dark variants at the bottom.
============================================================ */
:root {
--pl-overlay-1: rgba(17,17,68,0.03);
--pl-overlay-2: rgba(17,17,68,0.04);
--pl-overlay-3: rgba(17,17,68,0.05);
--pl-overlay-4: rgba(17,17,68,0.06);
--pl-overlay-5: rgba(17,17,68,0.08);
--pl-overlay-6: rgba(17,17,68,0.025);
--pl-danger-bg: rgba(192,48,48,0.06);
--pl-danger-text: #b91c1c;
--pl-danger-btn: rgba(220,38,38,0.08);
--pl-danger-btn-h: rgba(220,38,38,0.14);
--pl-danger-border: rgba(220,38,38,0.1);
--pl-warn-text: #b45309;
--pl-warn-border: rgba(245,158,11,0.15);
--pl-ok-text: #047857;
--pl-conflict-cell: #fecaca;
}
/* ------------------------------------------------------------
Shared WeekGrid — "blocks" mode (split-screen look)
Themed CSS-grid emitted by WeekGrid.renderWeekGrid({mode:'blocks'}).
Pastel cell background + accent left-border arrive inline from
colorForCourse()/colorForCourseBorder() (already theme-aware), so
this owns only layout, grid lines, headers, and status markers —
light + dark both work via design tokens.
------------------------------------------------------------ */
.wg-blocks {
display: grid;
grid-template-columns: 50px repeat(var(--wg-days, 5), minmax(0, 1fr));
grid-auto-rows: 21px;
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
}
.wg-blocks .wg-h {
display: flex;
align-items: center;
justify-content: center;
background: var(--card);
font-size: 11px;
font-weight: 700;
color: var(--t3);
text-transform: uppercase;
letter-spacing: 0.03em;
position: sticky;
top: 0;
z-index: 3;
}
.wg-blocks .wg-cor { color: var(--t4); }
.wg-blocks .wg-t {
display: flex;
align-items: center;
justify-content: center;
background: var(--card);
font-family: var(--font-mono, monospace);
font-size: 9.5px;
color: var(--t4);
}
.wg-blocks .wg-cell {
background: var(--pl-overlay-1);
min-width: 0;
overflow: hidden;
}
.wg-blocks .wg-filled {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
gap: 1px;
padding: 2px 5px;
overflow: hidden;
border-inline-start: 3px solid var(--teal);
border-radius: 3px;
z-index: 1;
}
.wg-blocks .wg-filled .wg-cid {
font-family: var(--font-mono, monospace);
font-weight: 700;
font-size: 11px;
line-height: 1.1;
color: var(--ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wg-blocks .wg-filled .wg-meta {
font-size: 9px;
line-height: 1.15;
color: var(--t4);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* status markers: planned = dashed accent; conflict = red outline + corner dot */
.wg-blocks .wg-filled.wg-planned { border-inline-start-style: dashed; }
.wg-blocks .wg-filled.wg-clash {
outline: 2px solid var(--pl-conflict-cell);
outline-offset: -2px;
}
.wg-blocks .wg-filled.wg-clash::after {
content: '';
position: absolute;
top: 2px;
inset-inline-end: 2px;
width: 6px;
height: 6px;
border-radius: 50%;
background: #ef4444;
box-shadow: 0 0 5px #ef4444;
}
/* Workflow stepper */
.wf-stepper {
display: flex;
align-items: center;
gap: 0;
padding: 6px 8px;
border: var(--border-subtle);
border-radius: var(--radius);
background: var(--glass-bg);
backdrop-filter: blur(16px);
}
.wf-step {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border: none;
border-radius: 8px;
background: none;
color: var(--t3);
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: all 0.2s var(--ease);
}
.wf-step:hover { background: var(--pl-overlay-1); color: var(--t2); }
.wf-step.active {
background: var(--teal);
color: #fff;
box-shadow: 0 2px 8px var(--brand-glow);
}
.wf-num {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--line-h);
color: var(--t3);
font-size: 11px;
font-weight: 700;
transition: all 0.2s var(--ease);
}
.wf-step.active .wf-num { background: rgba(255,255,255,0.25); color: #fff; }
.wf-step.done .wf-num { background: var(--teal-border); color: var(--teal); }
.wf-step.done { color: var(--teal); }
.wf-sep {
flex-shrink: 0;
width: 24px;
height: 1px;
background: var(--line-h);
}
.wf-nav {
display: flex;
gap: 6px;
margin-inline-start: auto;
padding-inline-start: 12px;
}
.wf-nav button {
display: flex;
align-items: center;
gap: 4px;
padding: 6px 14px;
border: none;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all 0.15s var(--ease);
}
.wf-nav .wf-back { background: var(--pl-overlay-3); color: var(--t3); }
.wf-nav .wf-back:hover { background: var(--line-h); }
.wf-nav .wf-next { background: var(--teal); color: #fff; }
.wf-nav .wf-next:hover { filter: brightness(1.08); }
/* Sticky control bar */
.sticky-head { position: static; padding-block: 10px; }
.command-bar {
padding: 14px 18px;
border: var(--border-mid);
border-radius: var(--radius-lg);
background: var(--glass-bg);
backdrop-filter: blur(24px) saturate(130%);
-webkit-backdrop-filter: blur(24px) saturate(130%);
box-shadow: var(--shadow-neu);
}
.cb-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: var(--border-subtle);
}
.cb-title {
font-family: var(--font-serif);
font-size: 16px;
font-weight: 700;
color: var(--navy);
letter-spacing: -0.01em;
}
.cb-status {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--t3);
}
.cb-dot {
flex-shrink: 0;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--t5);
}
.cb-dot.ready { background: var(--teal); box-shadow: var(--shadow-glow); }
.cb-dot.busy { background: var(--amber); animation: pulse-dot 1.2s var(--ease) infinite; }
@keyframes pulse-dot {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
/* Status banners */
.planner-banner {
display: flex;
align-items: center;
gap: 8px;
margin-top: 8px;
padding: 8px 14px;
border-radius: var(--radius-sm);
font-size: 12.5px;
font-weight: 500;
}
.planner-banner .i { flex-shrink: 0; width: 15px; height: 15px; }
.planner-banner-info { background: var(--teal-dim); color: var(--teal); border: 1px solid var(--teal-border); }
.planner-banner-warn { background: var(--amber-dim); color: var(--pl-warn-text); border: 1px solid var(--pl-warn-border); }
.planner-banner-ok { background: var(--brand-soft); color: var(--pl-ok-text); border: 1px solid var(--teal-border); }
.planner-banner-err { background: var(--pl-danger-btn); color: var(--pl-danger-text); border: 1px solid var(--pl-danger-border); }
.planner-banner-neutral { background: var(--pl-overlay-1); color: var(--t3); border: 1px solid var(--pl-overlay-4); }
/* Trust / quality strip */
.trust-strip {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px;
margin-top: 8px;
padding: 7px 14px;
border: var(--border-subtle);
border-radius: var(--radius-sm);
background: var(--pl-overlay-6);
color: var(--t4);
font-family: var(--font-mono);
font-size: 11.5px;
}
.trust-strip .i { width: 13px; height: 13px; opacity: 0.5; }
/* Mode toggle */
.mode-toggle {
display: flex;
align-items: center;
gap: 8px;
margin-top: 10px;
padding-block: 4px;
min-height: 44px;
color: var(--t3);
font-size: 12px;
cursor: pointer;
user-select: none;
}
.mode-toggle input[type="checkbox"] {
position: relative;
flex-shrink: 0;
width: 32px;
height: 18px;
border: none;
border-radius: 10px;
background: var(--line-h);
appearance: none;
-webkit-appearance: none;
cursor: pointer;
transition: background 0.2s;
}
.mode-toggle input[type="checkbox"]::after {
content: '';
position: absolute;
top: 2px;
inset-inline-start: 2px;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--card);
box-shadow: 0 1px 3px rgba(0,0,0,0.15);
transition: transform 0.2s var(--ease);
}
.mode-toggle input[type="checkbox"]:checked { background: var(--teal); }
.mode-toggle input[type="checkbox"]:checked::after { transform: translateX(14px); }
[dir="rtl"] .mode-toggle input[type="checkbox"]:checked::after { transform: translateX(-14px); }
/* Planner panels */
.planner-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.pg-full { grid-column: 1 / -1; }
@media (max-width: 992px) {
.planner-grid { grid-template-columns: 1fr; }
.pg-full { grid-column: auto; }
}
.pane-head {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
padding-bottom: 10px;
border-bottom: var(--border-subtle);
}
.pane-icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 30px;
height: 30px;
border-radius: 8px;
}
.pane-icon .i { width: 16px; height: 16px; }
.pane-icon-teal { background: var(--teal-dim); color: var(--teal); }
.pane-icon-royal,
.pane-icon-purple { background: var(--royal-dim); color: var(--royal); }
.pane-icon-sky { background: var(--sky-dim); color: var(--sky); }
.pane-icon-amber { background: var(--amber-dim); color: var(--amber); }
/* .pane-title base styling now comes from the canonical card-heading rule.
(Previously 15px serif navy; unified to 14px teal body-font.) */
.pane-sub { margin-top: 1px; color: var(--t4); font-size: 11.5px; }
/* Plan color chips */
.plan-chip {
display: inline-block;
padding: 2px 8px;
border: 1.5px solid transparent;
border-radius: 6px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.01em;
cursor: pointer;
transition: all 0.15s var(--ease);
}
.plan-chip:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
.plan-black { background: var(--ink); color: #fff; }
.plan-red { background: var(--danger); color: #fff; }
.plan-green { background: var(--teal); color: #fff; }
.plan-prereq { background: var(--royal); color: #fff; }
/* Plan chip legend */
.chip-legend {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 10px;
color: var(--t4);
font-size: 11px;
}
.chip-legend-item { display: flex; align-items: center; gap: 5px; }
.chip-legend-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 3px; }
/* Planner action buttons */
.pl-btn {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 12px;
border: none;
border-radius: 7px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all 0.15s var(--ease);
}
.pl-btn .i { width: 13px; height: 13px; }
.pl-btn-teal { background: var(--teal-dim); color: var(--teal); }
.pl-btn-teal:hover { background: var(--teal-border); }
.pl-btn-red { background: var(--pl-danger-btn); color: var(--pl-danger-text); }
.pl-btn-red:hover { background: var(--pl-danger-btn-h); }
.pl-btn-outline { background: var(--pl-overlay-2); color: var(--t3); border: var(--border-mid); }
.pl-btn-outline:hover { background: var(--pl-overlay-5); }
.pl-btn-primary { background: var(--teal); color: #fff; }
.pl-btn-primary:hover { filter: brightness(1.08); box-shadow: 0 2px 8px var(--brand-glow); }
.pl-btn-success { background: linear-gradient(135deg, var(--teal), var(--teal-deep)); color: #fff; }
.pl-btn-success:hover { filter: brightness(1.08); }
.pl-btn[disabled] { opacity: 0.4; pointer-events: none; }
/* Planner filter checkboxes */
.pl-checks {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 16px;
color: var(--t3);
font-size: 12px;
}
.pl-checks label { display: flex; align-items: center; gap: 5px; cursor: pointer; white-space: nowrap; }
.pl-checks input[type="checkbox"] { accent-color: var(--teal); width: 18px; height: 18px; }
/* Empty state (planner-specific) */
.pl-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2rem 1rem;
text-align: center;
}
.pl-empty-icon {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
margin-bottom: 10px;
border-radius: 12px;
background: var(--pl-overlay-2);
}
.pl-empty-icon .i { width: 24px; height: 24px; color: var(--t3); }
.pl-empty-title { margin-bottom: 4px; color: var(--t3); font-size: 13px; font-weight: 600; }
.pl-empty-hint { color: var(--t3); font-size: 12px; }
/* Dock card */
.dock-card {
z-index: 30;
border: var(--border-mid);
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
}
/* Table styling within planner panels */
.planner-panel .table { margin-bottom: 0; }
.planner-panel .table thead th {
padding: 6px 10px;
border-bottom: 1px solid var(--pl-overlay-4);
color: var(--t4);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap;
}
.planner-panel .table tbody td {
padding: 8px 10px;
border-bottom: 1px solid var(--pl-overlay-1);
font-size: 13px;
}
.planner-panel .table tbody tr:last-child td { border-bottom: none; }
/* Details chevron */
details[open] > summary .i { transform: rotate(90deg); }
details > summary::-webkit-details-marker { display: none; }
/* RTL polish */
[dir="rtl"] .form-check { padding-right: 1.5em; padding-left: 0; }
[dir="rtl"] .form-check .form-check-input { float: right; margin-right: -1.5em; margin-left: 0.5em; }
[dir="rtl"] .ms-auto { margin-left: 0 !important; margin-right: auto !important; }
/* Inline visual style utility classes */
.pl-text-xs { font-size: 0.7rem; }
.pl-summary-label { color: var(--t3); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.pl-diag-heading { margin-bottom: 6px; color: var(--navy); font-size: 13px; font-weight: 600; }
.pl-legend-dot-black { background: var(--ink); }
.pl-legend-dot-red { background: var(--danger); }
.pl-legend-dot-green { background: var(--teal); }
.pl-legend-dot-purple { background: var(--royal); }
/* Planner — mobile */
@media (max-width: 768px) {
.sticky-head { position: static; }
.command-bar { margin: 0 -1rem; padding: 0.75rem 1rem !important; border-radius: 0; }
.wf-stepper {
flex-wrap: nowrap;
gap: 0;
padding-bottom: 4px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.wf-step .wf-label { display: none; }
.wf-step { padding: 8px 10px; }
.wf-sep { width: 12px; }
.wf-nav { padding-inline-start: 6px; }
.command-bar-controls { display: none; }
.command-bar-controls.expanded { display: block; }
.command-bar-toggle {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 0.4rem 0;
border: none;
background: none;
color: var(--muted);
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
}
.dock-card { position: static; }
}
@media (min-width: 769px) {
.command-bar-toggle { display: none; }
.command-bar-controls { display: block !important; }
}
/* Available courses & sections grid */
.avail-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
@media (max-width: 768px) { .avail-grid { grid-template-columns: 1fr; } }
.avail-course-card {
padding: 12px 14px;
border: var(--border-subtle);
border-radius: var(--radius-sm);
background: var(--glass-bg);
box-shadow: var(--shadow-input);
}
.avail-course-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
padding-bottom: 6px;
border-bottom: 1px solid var(--pl-overlay-2);
}
.avail-course-code { color: var(--navy); font-size: 13px; font-weight: 700; }
.avail-course-name { margin-top: 1px; color: var(--t4); font-size: 11px; }
.avail-course-credits {
padding: 2px 8px;
border-radius: 6px;
background: var(--pl-overlay-2);
color: var(--t3);
font-size: 11px;
font-weight: 600;
}
.avail-sec-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 4px;
padding: 6px 8px;
border-radius: 6px;
font-size: 12px;
cursor: pointer;
transition: all 0.15s var(--ease);
}
.avail-sec-row:hover { filter: brightness(0.97); }
.sec-teal { background: var(--teal-dim); border-inline-start: 3px solid var(--teal); }
.sec-rose { background: var(--rose-dim); border-inline-start: 3px solid var(--rose); }
.sec-red { background: var(--pl-danger-bg); border-inline-start: 3px solid var(--danger); }
.sec-gray { background: var(--pl-overlay-2); border-inline-start: 3px solid var(--t5); }
.sec-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; }
.sec-dot-teal { background: var(--teal); }
.sec-dot-rose { background: var(--rose); }
.sec-dot-red { background: var(--danger); }
.sec-dot-gray { background: var(--t5); }
.sec-id { min-width: 40px; font-weight: 700; }
.sec-time { color: var(--t3); font-size: 11px; }
.sec-program { color: var(--t3); font-size: 10px; white-space: nowrap; }
.sec-capacity { margin-inline-start: auto; font-size: 11px; font-weight: 600; }
.avail-summary-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px;
margin-bottom: 10px;
padding: 8px 14px;
border: var(--border-subtle);
border-radius: var(--radius-sm);
background: var(--pl-overlay-6);
color: var(--t4);
font-size: 11.5px;
}
.avail-summary-item { display: flex; align-items: center; gap: 5px; }
.avail-search {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
}
.avail-search input {
flex: 1;
max-width: 280px;
padding: 6px 12px;
border: var(--border-mid);
border-radius: 8px;
background: var(--glass-bg);
font-size: 12px;
outline: none;
transition: border-color 0.2s;
}
.avail-search input:focus { border-color: var(--teal); }
/* Dark-mode overrides — planner */
html[data-theme="dark"] {
--pl-overlay-1: rgba(255,255,255,0.03);
--pl-overlay-2: rgba(255,255,255,0.04);
--pl-overlay-3: rgba(255,255,255,0.06);
--pl-overlay-4: rgba(255,255,255,0.06);
--pl-overlay-5: rgba(255,255,255,0.08);
--pl-overlay-6: rgba(255,255,255,0.025);
--pl-danger-bg: rgba(240,96,96,0.08);
--pl-danger-text: #f06060;
--pl-danger-btn: rgba(240,96,96,0.10);
--pl-danger-btn-h: rgba(240,96,96,0.18);
--pl-danger-border: rgba(240,96,96,0.15);
--pl-warn-text: #f59e0b;
--pl-warn-border: rgba(245,158,11,0.20);
--pl-ok-text: #2ec9a0;
--pl-conflict-cell: hsl(0 40% 22%);
}
html[data-theme="dark"] .wf-step.active .wf-num { background: rgba(255,255,255,0.15); }
html[data-theme="dark"] .command-bar {
background: rgba(255,255,255,0.04) !important;
border-color: rgba(10,142,110,0.2) !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
}
html[data-theme="dark"] .pl-btn-red { color: var(--pl-danger-text); }
html[data-theme="dark"] .avail-course-card { box-shadow: 0 1px 4px rgba(0,0,0,0.15); }
html[data-theme="dark"] #visualGrid td,
html[data-theme="dark"] #baselineWeekly td { color: var(--t0); }
html[data-theme="dark"] #visualGrid td .text-secondary,
html[data-theme="dark"] #baselineWeekly td .text-secondary { color: var(--t3) !important; }
html[data-theme="dark"] #visualGrid th,
html[data-theme="dark"] #baselineWeekly th { color: var(--t3); }
html[data-theme="dark"] #visualGrid .table,
html[data-theme="dark"] #baselineWeekly .table,
html[data-theme="dark"] #visualGrid .table td,
html[data-theme="dark"] #baselineWeekly .table td { border-color: var(--line); }
/* ============================================================
DASHBOARD — feature-specific styles
------------------------------------------------------------
Moved out of core/templates/core/partials/dashboard/_css.html.
============================================================ */
/* ═══════════════════════════════════════════════════════
UX ENHANCEMENTS (no existing classes overridden)
═══════════════════════════════════════════════════════ */
/* ── REC 4: HP advanced settings ───────────────────── */
.hp-advanced { border: none; }
.hp-advanced-toggle {
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
list-style: none;
font-size: 0.8rem;
font-weight: 600;
color: var(--muted);
padding: 0.3rem 0;
user-select: none;
}
.hp-advanced-toggle::-webkit-details-marker { display: none; }
.hp-adv-arrow {
font-size: 0.6rem;
transition: transform 0.2s var(--ease);
display: inline-block;
}
.hp-advanced[open] .hp-adv-arrow { transform: rotate(90deg); }
.hp-adv-defaults-badge {
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.04em;
background: var(--bg);
color: var(--muted);
border-radius: 4px;
padding: 0.1rem 0.4rem;
}
.hp-advanced[open] .hp-adv-defaults-badge { display: none; }
/* ── Trace action micro-buttons ────────────────────── */
.trace-actions { display: inline-flex; gap: 4px; }
.trace-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 4px;
padding: 3px 10px; border-radius: 6px; border: none;
font-size: 11px; font-weight: 600; font-family: inherit;
cursor: pointer; transition: all 0.15s var(--ease);
line-height: 1.3;
}
.trace-btn .i { width: 12px; height: 12px; opacity: 0.7; }
.trace-btn-view { background: var(--teal-dim); color: var(--teal); }
.trace-btn-view:hover { background: color-mix(in srgb, var(--teal) 20%, transparent); box-shadow: 0 1px 4px var(--teal-border); }
.trace-btn-copy { background: var(--pl-overlay-3); color: var(--t3); }
.trace-btn-copy:hover { background: rgba(17,17,68,0.1); box-shadow: 0 1px 4px var(--pl-overlay-5); }
.trace-btn-copy.copied {
background: var(--teal-dim); color: var(--teal);
}
/* ── Scrape log viewer (neumorphic style) ────────────── */
.scrape-term {
border-radius: var(--radius); overflow: hidden;
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: 1px solid rgba(255,255,255,0.5);
box-shadow: 6px 6px 16px rgba(163,177,198,0.35),
-6px -6px 16px rgba(255,255,255,0.65);
}
.scrape-term-head {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 16px;
background: rgba(255,255,255,0.45);
border-bottom: 1px solid rgba(163,177,198,0.18);
}
.scrape-term-status { display: flex; align-items: center; gap: 8px; }
.scrape-term-status-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--teal);
box-shadow: var(--shadow-glow);
animation: scrape-pulse 2s ease-in-out infinite;
}
@keyframes scrape-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.scrape-term-label {
font-size: 11px; font-weight: 700; color: var(--t1);
letter-spacing: 0.06em; text-transform: uppercase;
}
.scrape-term-file {
font-size: 10px; font-family: var(--font-mono); color: var(--t4);
background: var(--teal-dim); padding: 2px 8px; border-radius: 6px;
}
.scrape-term-body {
padding: 14px 16px;
background: rgba(240,243,246,0.6);
font-family: var(--font-mono); font-size: 11.5px; line-height: 1.85;
max-height: 280px; overflow-y: auto; color: var(--t2);
box-shadow: inset 3px 3px 8px rgba(163,177,198,0.3),
inset -3px -3px 8px rgba(255,255,255,0.5);
}
.scrape-term-body::-webkit-scrollbar { width: 6px; }
.scrape-term-body::-webkit-scrollbar-track { background: transparent; }
.scrape-term-body::-webkit-scrollbar-thumb { background: rgba(163,177,198,0.4); border-radius: 3px; }
.scrape-term-body::-webkit-scrollbar-thumb:hover { background: rgba(163,177,198,0.6); }
.scrape-term-body div { padding: 1px 0; border-bottom: 1px solid rgba(163,177,198,0.08); }
.scrape-term-body div:last-child { border-bottom: none; }
.t-ts { color: var(--t5); font-size: 10px; }
.t-ok { color: var(--teal); font-weight: 600; }
.t-er { color: var(--danger); font-weight: 600; }
.t-hl { color: var(--royal); font-weight: 600; }
.t-wrn { color: var(--warning); font-weight: 600; }
/* ── REC 8: Advisor admin wizard bar ────────────────── */
.adm-wizard-bar {
display: flex;
align-items: center;
margin-bottom: 1.5rem;
padding: 1rem 1rem 0.75rem;
background: var(--brand-soft);
border: 1px solid var(--teal-border);
border-radius: var(--radius);
}
.adm-step {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.35rem;
flex: 0 0 auto;
}
.adm-step-circle {
width: 32px; height: 32px;
border-radius: 50%;
background: var(--brand);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
font-weight: 700;
box-shadow: 0 0 0 3px var(--teal-border);
}
.adm-step-inactive .adm-step-circle {
background: var(--card);
color: var(--muted);
border: 2px solid var(--line-strong);
box-shadow: none;
}
.adm-step-label {
font-size: 0.7rem;
font-weight: 600;
color: var(--brand-dark);
white-space: nowrap;
}
.adm-step-inactive .adm-step-label { color: var(--muted); }
.adm-step-line {
flex: 1;
height: 2px;
background: var(--brand);
margin: 0 0.5rem;
margin-bottom: 1.1rem; /* align with circle center */
}
.adm-step-line-inactive { background: var(--line-strong); }
/* ── REC 6: ⌘K Command palette ──────────────────────── */
.cmd-backdrop {
position: fixed;
inset: 0;
background: rgba(13,21,38,0.5);
backdrop-filter: blur(4px);
z-index: 2000;
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 12vh;
}
/* .d-none (!important) hides the palette; this class re-shows it when d-none is removed */
.cmd-backdrop.d-none { display: none !important; }
.cmd-modal {
background: var(--card);
border: 1px solid var(--line);
border-radius: 14px;
width: 560px;
max-width: 90vw;
box-shadow: 0 24px 64px rgba(13,21,38,0.25);
overflow: hidden;
}
.cmd-search-row {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.85rem 1rem;
border-bottom: 1px solid var(--line);
}
.cmd-search-icon { font-size: 1.1rem; color: var(--brand); }
.cmd-input {
flex: 1;
border: none;
outline: none;
font-size: 1rem;
font-family: var(--font-body);
color: var(--ink);
background: transparent;
}
.cmd-input::placeholder { color: var(--muted-light); }
.cmd-esc {
font-family: var(--font-mono);
font-size: 0.68rem;
background: var(--bg);
border: 1px solid var(--line-strong);
border-bottom-width: 2px;
border-radius: 4px;
padding: 0.1rem 0.4rem;
color: var(--muted);
}
.cmd-results { max-height: 320px; overflow-y: auto; }
.cmd-hint {
padding: 1rem;
font-size: 0.82rem;
color: var(--muted-light);
text-align: center;
}
.cmd-section-label {
padding: 0.5rem 1rem 0.25rem;
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted-light);
border-top: 1px solid var(--line);
}
.cmd-section-label:first-child { border-top: none; }
.cmd-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.6rem 1rem;
cursor: pointer;
transition: background 0.1s var(--ease);
font-size: 0.875rem;
}
.cmd-item:hover, .cmd-item.selected {
background: var(--royal-dim);
}
.cmd-item-id {
font-family: var(--font-mono);
font-weight: 600;
color: var(--brand);
min-width: 70px;
}
.cmd-item-name { flex: 1; color: var(--ink); }
.cmd-item-badge {
font-size: 0.68rem;
font-weight: 700;
padding: 0.15rem 0.45rem;
border-radius: 999px;
background: var(--teal-dim);
color: var(--teal-deep);
border: 1px solid var(--teal-border);
flex-shrink: 0;
}
/* ── REC 3: Sidebar badges ──────────────────────────── */
.sidebar-badge {
margin-inline-start: auto;
font-family: var(--font-mono);
font-size: 0.62rem;
font-weight: 700;
padding: 0.1rem 0.4rem;
border-radius: 999px;
min-width: 1.4rem;
text-align: center;
display: none; /* shown via JS when count > 0 */
}
.sidebar-badge.danger { background: rgba(248,81,73,0.2); color: #f87171; }
.sidebar-badge.warning { background: rgba(210,153,34,0.18); color: #f59e0b; }
.sidebar-badge.ready { background: rgba(63,185,80,0.18); color: #4ade80; font-size: 0.58rem; }
/* Fix sidebar nav-link layout for badge */
.sidebar .nav-link { display: flex; align-items: center; }
/* ── Overview landing panel ─── */
.ov-greeting { font-family: var(--font-serif); font-size: 1.4rem; color: var(--navy); margin-bottom: 0.25rem; padding-bottom: 0.5rem; border: none; border-bottom: 2px solid var(--teal-border); box-shadow: none; outline: none; }
.ov-date { font-size: 0.82rem; color: var(--t3); margin-bottom: 1.5rem; }
.ov-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.ov-kpi { padding: 1.25rem; transition: transform 0.15s, box-shadow 0.15s; cursor: pointer; }
.ov-kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.ov-kpi-label {
font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--t3); font-family: var(--font-mono); margin-bottom: 0.35rem; }
.ov-kpi-value { font-family: var(--font-serif); font-size: 2rem; color: var(--teal); font-weight: 700; line-height: 1; }
.ov-kpi-icon {
width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 0.75rem; }
.ov-kpi-icon svg {
width: 20px; height: 20px; stroke-width: 1.8; }
.ov-kpi-icon.teal {
background: var(--teal-dim); color: var(--teal); }
.ov-kpi-icon.royal {
background: var(--royal-dim); color: var(--royal); }
.ov-kpi-icon.warning {
background: rgba(154,106,8,0.08); color: var(--warning); }
.ov-kpi-icon.danger {
background: rgba(192,48,48,0.08); color: var(--danger); }
.ov-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem; margin-bottom: 1.5rem; }
.ov-action { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.25rem; cursor: pointer; transition: all 0.15s; text-decoration: none; color: inherit; }
.ov-action:hover { border-color: var(--teal); box-shadow: 0 0 0 2px var(--teal-dim), var(--shadow-card); }
.ov-action-icon {
width: 40px; height: 40px; border-radius: 10px; background: var(--teal-dim); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ov-action-icon svg {
width: 20px; height: 20px; stroke: var(--teal); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ov-action-text { font-weight: 600; font-size: 0.9rem; color: var(--ink); }
.ov-activity { padding: 1rem 1.25rem; }
.ov-activity-title {
font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--t3); margin-bottom: 0.75rem; }
.ov-activity-item {
display: flex; gap: 0.75rem; padding: 0.5rem 0; border-bottom: var(--border-subtle); font-size: 0.85rem; color: var(--t2); }
.ov-activity-item:last-child { border-bottom: none; }
.ov-activity-ts { font-family: var(--font-mono); font-size: 0.75rem; color: var(--t4); white-space: nowrap; }
/* Dashboard Command Center */
.dcc-hero {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
padding: 1.1rem 1.25rem;
margin-bottom: 1rem;
border: 1px solid var(--brand-glow);
border-radius: var(--radius-md);
background:
linear-gradient(135deg, color-mix(in srgb, var(--teal) 12%, transparent), rgba(0,174,218,0.07)),
var(--card);
box-shadow: var(--shadow-card);
}
.dcc-eyebrow,
/* ── Section kicker (eyebrow) — unified base; variants set only font-size ── */
.dcc-panel-kicker, .va-kicker, .ga-kicker, .tg-kicker, .twm-kicker, .tw-mri-kicker {
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--teal);
}
.dcc-panel-kicker {
font-family: var(--font-mono);
font-size: 0.66rem;
}
.dcc-title {
margin: 0.15rem 0 0.25rem;
font-family: var(--font-serif);
font-size: 1.45rem;
color: var(--ink);
border: none;
box-shadow: none;
padding: 0;
}
.dcc-subtitle {
max-width: 760px;
color: var(--t3);
font-size: 0.88rem;
}
.dcc-hero-status {
display: inline-flex;
align-items: center;
gap: 0.45rem;
min-width: 220px;
padding: 0.65rem 0.75rem;
border-radius: var(--radius-sm);
font-family: var(--font-mono);
font-size: 0.72rem;
color: var(--ink);
background: rgba(255,255,255,0.55);
border: 1px solid rgba(255,255,255,0.65);
white-space: nowrap;
}
.dcc-status-dot {
width: 0.55rem;
height: 0.55rem;
border-radius: 50%;
background: var(--teal);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--teal) 12%, transparent);
}
.dcc-status-danger .dcc-status-dot {
background: var(--danger);
box-shadow: 0 0 0 4px rgba(192,48,48,0.12);
}
.dcc-kpis,
.dcc-grid {
display: grid;
gap: 0.85rem;
}
.dcc-kpis {
grid-template-columns: repeat(4, minmax(0, 1fr));
margin-bottom: 0.85rem;
}
.dcc-kpi,
.dcc-panel,
.dcc-launcher {
border: 1px solid rgba(148,163,184,0.16);
border-radius: var(--radius-md);
background: var(--card);
box-shadow: var(--shadow-card);
}
.dcc-kpi {
display: flex;
flex-direction: column;
min-height: 124px;
padding: 0.95rem;
color: inherit;
text-decoration: none;
transition: transform 0.16s var(--ease), border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.dcc-kpi:hover {
transform: translateY(-2px);
border-color: color-mix(in srgb, var(--teal) 34%, transparent);
box-shadow: var(--shadow-lift);
}
.dcc-kpi-primary {
background: linear-gradient(145deg, color-mix(in srgb, var(--teal) 14%, transparent), rgba(255,255,255,0.6));
}
.dcc-kpi-label {
font-family: var(--font-mono);
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--t3);
}
.dcc-kpi strong {
margin: 0.45rem 0 0.3rem;
font-family: var(--font-serif);
font-size: 2rem;
line-height: 1;
color: var(--ink);
}
.dcc-kpi-note {
color: var(--t3);
font-size: 0.78rem;
line-height: 1.35;
}
.dcc-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.dcc-panel {
min-width: 0;
padding: 1rem;
}
.dcc-panel-wide {
grid-column: span 2;
}
.dcc-panel-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.8rem;
margin-bottom: 0.85rem;
}
.dcc-panel h3 {
margin: 0.15rem 0 0;
font-size: 1rem;
color: var(--ink);
border: none;
padding: 0;
box-shadow: none;
}
.dcc-link,
.dcc-panel-actions a,
.dcc-launcher a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 32px;
padding: 0.42rem 0.68rem;
border-radius: var(--radius-sm);
border: 1px solid color-mix(in srgb, var(--teal) 25%, transparent);
color: var(--teal);
background: color-mix(in srgb, var(--teal) 8%, transparent);
text-decoration: none;
font-size: 0.78rem;
font-weight: 800;
}
.dcc-link:hover,
.dcc-panel-actions a:hover,
.dcc-launcher a:hover {
border-color: color-mix(in srgb, var(--teal) 42%, transparent);
background: color-mix(in srgb, var(--teal) 14%, transparent);
}
.dcc-triage,
.dcc-activity-list,
.dcc-program-list,
.dcc-readiness-list {
display: grid;
gap: 0.55rem;
}
.dcc-triage-row,
.dcc-activity-row {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 0.65rem;
padding: 0.72rem;
border-radius: var(--radius-sm);
color: inherit;
text-decoration: none;
background: rgba(148,163,184,0.07);
border: 1px solid rgba(148,163,184,0.12);
}
.dcc-triage-row strong,
.dcc-activity-row strong {
display: block;
color: var(--ink);
font-size: 0.86rem;
}
.dcc-triage-row small {
display: block;
margin-top: 0.12rem;
color: var(--t3);
font-size: 0.76rem;
line-height: 1.35;
}
.dcc-triage-dot {
width: 0.62rem;
height: 0.62rem;
border-radius: 50%;
margin-top: 0.2rem;
background: var(--teal);
}
.dcc-triage-row.is-warning .dcc-triage-dot { background: var(--warning); }
.dcc-triage-row.is-danger .dcc-triage-dot { background: var(--danger); }
.dcc-program-row,
.dcc-readiness-list div {
display: flex;
justify-content: space-between;
gap: 0.75rem;
padding: 0.54rem 0.62rem;
border-radius: var(--radius-sm);
background: rgba(148,163,184,0.07);
}
.dcc-program-row span,
.dcc-readiness-list span {
color: var(--t3);
font-size: 0.8rem;
}
.dcc-program-row strong,
.dcc-readiness-list strong {
color: var(--ink);
font-family: var(--font-mono);
}
.dcc-mini-stats {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
margin-top: 0.75rem;
}
.dcc-mini-stats span {
padding: 0.36rem 0.52rem;
border-radius: 999px;
background: rgba(0,174,218,0.09);
color: var(--t2);
font-size: 0.72rem;
font-weight: 700;
}
.dcc-scenario-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 900;
color: var(--ink);
}
.dcc-scenario-meta {
margin-top: 0.2rem;
color: var(--t3);
font-family: var(--font-mono);
font-size: 0.72rem;
}
.dcc-mini-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.55rem;
margin: 0.85rem 0;
}
.dcc-mini-grid div {
padding: 0.72rem;
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--teal) 8%, transparent);
}
.dcc-mini-grid strong {
display: block;
font-family: var(--font-serif);
font-size: 1.35rem;
color: var(--ink);
line-height: 1;
}
.dcc-mini-grid span {
display: block;
margin-top: 0.18rem;
color: var(--t3);
font-size: 0.72rem;
}
.dcc-panel-actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.dcc-activity-row {
grid-template-columns: 150px minmax(0, 1fr) minmax(90px, auto) auto;
align-items: center;
}
.dcc-activity-time {
font-family: var(--font-mono);
font-size: 0.72rem;
color: var(--t4);
}
.dcc-activity-row > span:not(.dcc-activity-time) {
color: var(--t3);
font-size: 0.78rem;
}
.dcc-activity-status {
padding: 0.24rem 0.45rem;
border-radius: 999px;
font-size: 0.68rem;
font-style: normal;
font-weight: 900;
background: rgba(148,163,184,0.12);
color: var(--t2);
}
.dcc-activity-status.is-success,
.dcc-activity-status.is-allow {
background: color-mix(in srgb, var(--teal) 12%, transparent);
color: var(--teal);
}
.dcc-activity-status.is-error,
.dcc-activity-status.is-critical,
.dcc-activity-status.is-deny {
background: rgba(192,48,48,0.12);
color: var(--danger);
}
.dcc-empty {
padding: 0.8rem;
color: var(--t3);
border-radius: var(--radius-sm);
background: rgba(148,163,184,0.07);
}
.dcc-launcher {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
margin-top: 0.85rem;
padding: 0.85rem;
}
html[data-theme="dark"] .dcc-hero,
html[data-theme="dark"] .dcc-kpi,
html[data-theme="dark"] .dcc-panel,
html[data-theme="dark"] .dcc-launcher {
background-color: rgba(20,27,45,0.88);
border-color: rgba(148,163,184,0.16);
}
html[data-theme="dark"] .dcc-hero-status,
html[data-theme="dark"] .dcc-kpi-primary {
background: rgba(255,255,255,0.06);
border-color: rgba(255,255,255,0.08);
}
html[data-theme="dark"] .dcc-triage-row,
html[data-theme="dark"] .dcc-activity-row,
html[data-theme="dark"] .dcc-program-row,
html[data-theme="dark"] .dcc-readiness-list div,
html[data-theme="dark"] .dcc-mini-grid div,
html[data-theme="dark"] .dcc-empty {
background: rgba(255,255,255,0.045);
border-color: rgba(255,255,255,0.07);
}
/* ── Student context sidebar ── */
.student-ctx-sidebar { width: 280px; flex-shrink: 0; transition: transform 0.25s var(--ease), opacity 0.25s var(--ease); }
.student-ctx-sidebar.hidden {
display: none; }
.student-ctx-card { padding: 1rem; }
.student-ctx-card h3 {
font-family: var(--font-serif); font-size: 0.95rem; color: var(--navy); margin: 0 0 0.75rem; }
.student-ctx-row {
display: flex; justify-content: space-between; align-items: center; padding: 0.35rem 0; border-bottom: var(--border-subtle); font-size: 0.82rem; }
.student-ctx-row:last-child { border-bottom: none; }
.student-ctx-label {
color: var(--t3); font-weight: 600; font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; }
.student-ctx-value { font-weight: 700; color: var(--ink); font-family: var(--font-mono); font-size: 0.85rem; }
.student-ctx-link {
display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.75rem; padding: 0.45rem 0.85rem; border-radius: var(--radius-sm); background: var(--teal-dim); color: var(--teal); font-weight: 600; font-size: 0.78rem; text-decoration: none; transition: all 0.15s; }
.student-ctx-link:hover { background: var(--teal-border); }
@media (max-width: 991px) {
.student-ctx-sidebar {
width: 100%; margin-top: 1rem; }
}
/* ── Mobile density: compact dashboard KPIs + actions ── */
@media (max-width: 768px) {
.ov-greeting { font-size: 1.15rem; }
.ov-date { margin-bottom: 0.75rem; }
.ov-kpis { gap: 0.5rem; margin-bottom: 0.75rem; grid-template-columns: 1fr 1fr; }
.ov-kpi { padding: 0.65rem 0.75rem; }
.ov-kpi-icon { width: 28px; height: 28px; margin-bottom: 0.35rem; }
.ov-kpi-icon svg { width: 16px; height: 16px; }
.ov-kpi-value { font-size: 1.4rem; }
.ov-kpi-label { font-size: 0.6rem; margin-bottom: 0.2rem; }
.ov-actions { gap: 0.5rem; margin-bottom: 0.75rem; grid-template-columns: 1fr 1fr; }
.ov-action { padding: 0.6rem 0.75rem; gap: 0.5rem; }
.ov-action-icon { width: 32px; height: 32px; }
.ov-action-text { font-size: 0.78rem; }
.ov-activity { padding: 0.65rem 0.75rem; }
.ov-activity-title { margin-bottom: 0.4rem; }
.dcc-hero {
flex-direction: column;
padding: 0.85rem;
}
.dcc-title { font-size: 1.15rem; }
.dcc-hero-status {
width: 100%;
min-width: 0;
white-space: normal;
}
.dcc-kpis,
.dcc-grid {
grid-template-columns: 1fr;
}
.dcc-kpi {
min-height: 96px;
padding: 0.78rem;
}
.dcc-kpi strong { font-size: 1.55rem; }
.dcc-panel-wide { grid-column: auto; }
.dcc-activity-row {
grid-template-columns: 1fr;
gap: 0.35rem;
}
.dcc-launcher a {
flex: 1 1 130px;
}
}
/* ── Issue #15: Export button loading state ── */
.ux-loading { pointer-events: none; opacity: 0.7; position: relative; }
.ux-loading::after { content: ''; position: absolute; top: 50%; right: 10px; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: ux-spin 0.6s linear infinite; margin-top: -7px; }
@keyframes ux-spin { to { transform: rotate(360deg); } }
/* ── Issue #20: Batch progress indicator ── */
.batch-progress { height: 4px; background: var(--teal-dim); border-radius: 2px; margin-bottom: 1rem; overflow: hidden; }
.batch-progress-bar { height: 100%; background: var(--teal); border-radius: 2px; transition: width 0.3s var(--ease); width: 0%; }
/* ── Issue #28: Scrape log expanded ── */
.scrape-term-body.expanded { max-height: 600px; }
.scrape-term-toggle {
display: inline-flex; align-items: center; gap: 4px;
padding: 4px 10px; border-radius: 8px; border: none;
background: var(--teal-dim); color: var(--teal);
font-size: 10px; font-weight: 700; font-family: var(--font-mono);
cursor: pointer; transition: all 0.2s; letter-spacing: 0.02em;
box-shadow: 2px 2px 5px rgba(163,177,198,0.2),
-2px -2px 5px rgba(255,255,255,0.6);
}
.scrape-term-toggle:hover {
background: color-mix(in srgb, var(--teal) 14%, transparent); color: var(--teal-deep);
box-shadow: 3px 3px 6px rgba(163,177,198,0.25),
-3px -3px 6px rgba(255,255,255,0.7);
}
.scrape-term-toggle:active {
box-shadow: inset 2px 2px 4px rgba(163,177,198,0.3),
inset -2px -2px 4px rgba(255,255,255,0.5);
}
/* ── Scrape history pagination ── */
.scrape-hist-pager {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 16px; margin-top: 6px;
background: rgba(255,255,255,0.45);
backdrop-filter: blur(12px);
border-radius: var(--radius-sm);
border: 1px solid rgba(255,255,255,0.5);
box-shadow: 3px 3px 8px rgba(163,177,198,0.2),
-3px -3px 8px rgba(255,255,255,0.5);
}
.scrape-hist-page-info { font-size: 12px; color: var(--t2); font-family: var(--font-mono); }
.scrape-hist-page-info strong { color: var(--t1); }
.scrape-hist-page-btns { display: flex; align-items: center; gap: 6px; }
.sh-page-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px; border-radius: 8px; border: none;
background: var(--glass-bg); color: var(--t2); cursor: pointer;
box-shadow: 2px 2px 5px rgba(163,177,198,0.25),
-2px -2px 5px rgba(255,255,255,0.6);
transition: all 0.15s;
}
.sh-page-btn:hover:not(:disabled) {
color: var(--teal);
box-shadow: 3px 3px 6px rgba(163,177,198,0.3),
-3px -3px 6px rgba(255,255,255,0.7);
}
.sh-page-btn:active:not(:disabled) {
box-shadow: inset 2px 2px 4px rgba(163,177,198,0.3),
inset -2px -2px 4px rgba(255,255,255,0.5);
}
.sh-page-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.sh-page-num {
font-size: 12px; font-weight: 600; color: var(--t1); min-width: 50px;
text-align: center; font-family: var(--font-mono);
}
/* ── Command palette keyboard navigation ── */
.cmd-item.kbd-active { background: var(--royal-dim); outline: 2px solid var(--teal); outline-offset: -2px; }
/* ── Client-side table pagination ── */
.tbl-pager { display:flex; align-items:center; gap:12px; justify-content:space-between; padding:10px 0; font-size:0.85rem; color:var(--t4); }
.tbl-pager button { background:none; border:1px solid var(--line); border-radius:8px; padding:4px 12px; cursor:pointer; font-size:0.85rem; }
.tbl-pager button:disabled { opacity:0.4; cursor:default; }
.tbl-pager button:hover:not(:disabled) { background:var(--teal-dim); }
.tbl-pager select { border:1px solid var(--line); border-radius:6px; padding:2px 6px; font-size:0.85rem; }
/* ── Extracted utility classes (inline → class) ──── */
.mb-14 { margin-bottom: 14px; }
.mb-12 { margin-bottom: 12px; }
.mb-18 { margin-bottom: 18px; }
.mb-16 { margin-bottom: 16px; }
.mb-8 { margin-bottom: 8px; }
.mb-6 { margin-bottom: 6px; }
.mb-10 { margin-bottom: 10px; }
.mt-6 { margin-top: 6px; }
.mt-8 { margin-top: 8px; }
.mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; }
.mt-14 { margin-top: 14px; }
.mt-16 { margin-top: 16px; }
.flex-card { flex: 1; min-width: 0; }
.flex-field { flex: 1; min-width: 140px; }
.flex-spacer { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.field-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.field-row-mt { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-top: 4px; }
.field-action { flex: 0 0 auto; padding-bottom: 1px; }
.metrics-row-12 { display: flex; gap: 12px; }
.metrics-row-14 { display: flex; gap: 14px; }
.skel-row { display: flex; gap: 12px; align-items: center; }
.ghost-muted { pointer-events: none; opacity: 0.5; }
.ghost-faded { pointer-events: none; opacity: 0.40; }
.skel-pad { padding: 0 14px 6px; }
.overflow-x { overflow-x: auto; }
.empty-icon-32 { width: 32px; height: 32px; }
.empty-icon-48 { width: 48px; height: 48px; opacity: 0.30; margin-bottom: 12px; }
.empty-icon-muted { width: 32px; height: 32px; color: var(--t5); margin-bottom: 8px; }
.fb-search-full { max-width: none; }
.fb-w-110 { max-width: 110px; }
.fb-w-120 { max-width: 120px; }
.fb-w-100 { max-width: 100px; }
.filter-bar-sm { padding: 8px 14px; }
.meta-mono { font-family: var(--font-mono); font-size: 12px; border-radius: var(--radius-sm); padding: 10px 14px; }
.ts-updated { font-size: 11px; color: var(--t3); font-family: var(--font-mono); }
.color-t3 { color: var(--t3); }
.i-faint { opacity: 0.4; }
.filter-pad { padding: 8px 0; }
.step-circle { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--teal-dim); border: 1px solid var(--teal-border); color: var(--teal); font-family: var(--font-mono); font-size: 11px; font-weight: 700; }
.step-label { font-size: 12px; color: var(--t3); font-weight: 600; }
.step-arrow { stroke: var(--t5); fill: none; stroke-width: 2; stroke-linecap: round; }
.section-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.section-heading h3 { font-family: var(--font-serif); font-size: 18px; color: var(--navy); margin: 0; }
.section-badge { font-family: var(--font-mono); font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--teal-dim); color: var(--teal); border: 1px solid var(--teal-border); }
.dlg-box-lg { max-width: 800px; }
.dlg-body-scroll { max-height: 70vh; overflow-y: auto; }
.mc-val-lg { font-size: 20px; }
.mc-val-sm { font-size: 18px; }
.mc-val-mono-sm { font-size: 16px; font-family: var(--font-mono); letter-spacing: 0; }
.adv-textarea { border-radius: var(--radius-sm); border: var(--border-subtle); background: var(--glass-bg); font-size: 13px; }
.cp-flex-col { display: flex; flex-direction: column; gap: 10px; }
.sticky-16 { }
.plan-side-col { width: 340px; flex-shrink: 0; }
.plan-layout { display: flex; gap: 16px; align-items: flex-start; }
.can-register-pill { background: var(--teal-dim); }
.skel-m0 { margin: 0; }
.skel-code { width: 70px; height: 14px; }
.skel-status { width: 50px; height: 10px; }
.skel-half { width: 50%; }
.preset-actions { display: flex; gap: 6px; margin-top: 8px; }
.scrape-metrics-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
/* ── Inline style extractions (panels) ── */
.btn-compact { padding: 6px 14px; font-size: 12px; }
.btn-adv-ensure { padding: 8px 14px; }
.sp-empty-hero { padding: 2.5rem 1.5rem 1.8rem; }
.sp-empty-title { font-size: 17px; margin-bottom: 6px; }
.sp-empty-hint { max-width: 420px; margin-bottom: 22px; }
.sp-build-plan { background: var(--teal-dim); border-color: var(--teal-border); color: var(--teal); }
.dbg-col-btn { font-size: 11px; padding: 4px 10px; border-radius: var(--radius-sm); background: var(--glass-bg); border: var(--border-subtle); color: var(--t3); cursor: pointer; }
/* ═══════════════════════════════════════════════════════
DARK MODE OVERRIDES (Deep Navy theme)
═══════════════════════════════════════════════════════ */
/* ── Scrape terminal ──────────────────────────────────── */
html[data-theme="dark"] .scrape-term {
border-color: rgba(255,255,255,0.06);
box-shadow: 6px 6px 16px rgba(0,0,0,0.4), -6px -6px 16px rgba(255,255,255,0.02);
}
html[data-theme="dark"] .scrape-term-head {
background: rgba(255,255,255,0.04);
border-bottom-color: rgba(255,255,255,0.06);
}
html[data-theme="dark"] .scrape-term-label { color: var(--t0); }
html[data-theme="dark"] .scrape-term-file { color: var(--t3); }
html[data-theme="dark"] .scrape-term-body {
background: rgba(255,255,255,0.03);
color: var(--t2);
box-shadow: inset 3px 3px 8px rgba(0,0,0,0.3), inset -3px -3px 8px rgba(255,255,255,0.02);
}
html[data-theme="dark"] .scrape-term-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); }
html[data-theme="dark"] .scrape-term-body::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }html[data-theme="dark"] .scrape-term-body div,
html[data-theme="dark"] .student-ctx-row,
html[data-theme="dark"] .ov-activity-item,
html[data-theme="dark"] .sp-adv-table td,
html[data-theme="dark"] #umTable tbody td {
border-bottom-color: rgba(255,255,255,0.04);
}
/* ── Terminal token colours ───────────────────────────── */
html[data-theme="dark"] .t-ts { color: var(--t4); }
html[data-theme="dark"] .t-er { color: var(--danger); }
html[data-theme="dark"] .t-hl { color: var(--royal-bright); }
html[data-theme="dark"] .t-wrn { color: var(--warning); }
/* ── Trace buttons ────────────────────────────────────── */
html[data-theme="dark"] .trace-btn-copy { background: rgba(255,255,255,0.05); }
html[data-theme="dark"] .trace-btn-copy:hover {
background: rgba(255,255,255,0.1);
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
/* ── Command palette ──────────────────────────────────── */
html[data-theme="dark"] .cmd-modal {
background: var(--card);
border-color: rgba(255,255,255,0.08);
box-shadow: 0 24px 64px rgba(0,0,0,0.5);
}html[data-theme="dark"] .cmd-esc {
background: rgba(255,255,255,0.04);
border-color: rgba(255,255,255,0.1);
}
html[data-theme="dark"] .cmd-section-label { border-top-color: rgba(255,255,255,0.06); }
html[data-theme="dark"] .cmd-item:hover,
html[data-theme="dark"] .cmd-item.selected,
html[data-theme="dark"] .cmd-item.kbd-active {
background: rgba(255,255,255,0.04);
}
html[data-theme="dark"] .cmd-item-badge {
background: rgba(10,142,110,0.15);
border-color: rgba(10,142,110,0.25);
}
/* ── Advisor wizard bar ───────────────────────────────── */
html[data-theme="dark"] .adm-wizard-bar {
background: rgba(10,142,110,0.08);
border-color: rgba(10,142,110,0.2);
}
html[data-theme="dark"] .adm-step-inactive .adm-step-circle {
background: rgba(255,255,255,0.04);
border-color: rgba(255,255,255,0.12);
}
html[data-theme="dark"] .adm-step-label { color: var(--teal-pale); }
html[data-theme="dark"] .adm-step-line-inactive { background: rgba(255,255,255,0.1); }
/* ── Scrape history pager ─────────────────────────────── */
html[data-theme="dark"] .scrape-hist-pager {
background: rgba(255,255,255,0.04);
border-color: rgba(255,255,255,0.06);
box-shadow: 3px 3px 8px rgba(0,0,0,0.3), -3px -3px 8px rgba(255,255,255,0.02);
}
/* scrape-hist-page-info: see consolidated overrides below */
html[data-theme="dark"] .sh-page-btn {
color: var(--t2);
box-shadow: 2px 2px 5px rgba(0,0,0,0.3), -2px -2px 5px rgba(255,255,255,0.02);
}
html[data-theme="dark"] .sh-page-btn:hover:not(:disabled) {
box-shadow: 3px 3px 6px rgba(0,0,0,0.35), -3px -3px 6px rgba(255,255,255,0.03);
}
html[data-theme="dark"] .sh-page-btn:active:not(:disabled) {
box-shadow: inset 2px 2px 4px rgba(0,0,0,0.3), inset -2px -2px 4px rgba(255,255,255,0.02);
}
html[data-theme="dark"] .sh-page-num { color: var(--t0); }
/* ── Neumorphic shadow flips ──────────────────────────── */
html[data-theme="dark"] .scrape-term-toggle {
box-shadow: 2px 2px 5px rgba(0,0,0,0.3), -2px -2px 5px rgba(255,255,255,0.02);
}
html[data-theme="dark"] .scrape-term-toggle:hover {
box-shadow: 3px 3px 6px rgba(0,0,0,0.35), -3px -3px 6px rgba(255,255,255,0.03);
}
html[data-theme="dark"] .scrape-term-toggle:active {
box-shadow: inset 2px 2px 4px rgba(0,0,0,0.3), inset -2px -2px 4px rgba(255,255,255,0.02);
}
/* ── HP advanced defaults badge ───────────────────────── */
html[data-theme="dark"] .hp-adv-defaults-badge {
background: rgba(255,255,255,0.04);
}
/* ── Scrape terminal bg ─── */
html[data-theme="dark"] .scrape-term {
background: rgba(255,255,255,0.04) !important;
border-color: rgba(255,255,255,0.06) !important;
}
/* ── Cmd item badge (light green → dark teal) ─── */
html[data-theme="dark"] .cmd-item-badge {
background: rgba(10,142,110,0.15) !important;
color: var(--teal-bright) !important;
border-color: rgba(10,142,110,0.25) !important;
}
/* ── Cmd item hover ─── */
html[data-theme="dark"] .cmd-item:hover,
html[data-theme="dark"] .cmd-item.selected {
background: rgba(255,255,255,0.06) !important;
}
/* ── Scrape hist page info hardcoded colors ─── */
html[data-theme="dark"] .scrape-hist-page-info { color: var(--t3) !important; }
html[data-theme="dark"] .scrape-hist-page-info strong { color: var(--t1) !important; }
html[data-theme="dark"] .sh-page-num { color: var(--t1) !important; }
/* ── Trace btn copy hardcoded color ─── */
html[data-theme="dark"] .trace-btn-copy { color: var(--t3) !important; }
/* Dashboard-card dark surface moved to V2 UNIFIED rule above *//* ============================================================
DB ADMIN — feature-specific styles
------------------------------------------------------------
Moved out of core/templates/core/db_admin.html.
============================================================ */
/* ── DB Admin Console layout ─────────────────────────── */
pre { white-space: pre-wrap; word-break: break-all; overflow-x: auto; }
/* Stacked layout: horizontal tabs on top, work area below */
.dba-shell {
display: flex;
flex-direction: column;
gap: 1rem;
min-height: calc(100vh - 120px);
}
/* TOP: horizontal tab bar */
.dba-nav {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
width: 100%;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--pl-overlay-5);
}
.dba-nav-label {
display: none;
}
.dba-nav-item {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.4rem 0.7rem;
border-radius: var(--radius-sm, 7px);
border: 1px solid transparent;
cursor: pointer;
transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
background: var(--glass-bg);
backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
border-color: var(--pl-overlay-3);
box-shadow: 0 1px 2px rgba(13,21,38,.04);
user-select: none;
text-decoration: none;
color: inherit;
white-space: nowrap;
}
.dba-nav-item:hover {
background: var(--glass-bg-data);
border-color: var(--pl-overlay-5);
}
.dba-nav-item.active {
background: var(--glass-bg-data);
border-color: var(--teal);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--teal) 10%, transparent);
}
.dba-nav-item.danger-item.active {
background: rgba(255,245,245,0.7);
border-color: var(--danger);
box-shadow: 0 0 0 2px rgba(224,52,52,.1);
}
.dba-nav-icon {
flex-shrink: 0;
width: 26px;
height: 26px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
}
.dba-nav-icon .i { width: 14px; height: 14px; }
.icon-safe { background: #f0fdf4; color: #16a34a; }
.icon-danger { background: #fff1f2; color: #dc2626; }
.icon-warning { background: #fffbeb; color: var(--amber); }
.icon-system { background: #f0f9ff; color: #0284c7; }
.dba-nav-text { flex: 1; min-width: 0; }
.dba-nav-name {
font-size: 0.78rem;
font-weight: 600;
color: var(--ink);
line-height: 1.2;
}
.dba-nav-desc {
display: none;
}
.dba-risk-badge {
flex-shrink: 0;
font-size: 0.52rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
padding: 0.1rem 0.3rem;
border-radius: 4px;
}
.risk-danger { background: #fee2e2; color: #991b1b; }
.risk-danger-icon { font-size: 0.72em; line-height: 1; }
.risk-warning { background: #fef3c7; color: #92400e; }
.risk-safe { background: #c6f6d5; color: #14532d; border: 1px solid #86efac; }
/* BOTTOM: work area — full width */
.dba-work {
flex: 1;
min-width: 0;
width: 100%;
}
/* Individual panels */
.dba-panel { display: none; }
.dba-panel.active { display: block; }
/* Panel header */
.dba-panel-header {
display: flex;
align-items: center;
gap: 0.875rem;
margin-bottom: 1.25rem;
padding-bottom: 1rem;
border-bottom: var(--border-subtle);
}
.dba-panel-icon {
width: 48px;
height: 48px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.dba-panel-icon .i { width: 24px; height: 24px; }
.dba-panel-title {
font-size: 1.1rem;
font-weight: 700;
color: var(--ink);
letter-spacing: -0.01em;
margin-bottom: 0.2rem;
}
.dba-panel-subtitle {
font-size: 0.875rem;
color: var(--muted);
line-height: 1.45;
}
/* Danger zone panel accent */
.dba-panel.danger-panel .dba-panel-header {
background: #fff5f5;
border: 1px solid var(--pl-conflict-cell);
border-radius: var(--radius);
padding: 1rem;
margin-bottom: 1.25rem;
}
/* Output pre block */
.dba-output {
background: rgba(248,250,252,0.85);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
color: var(--t2);
border-radius: var(--radius);
padding: 0.875rem 1rem;
font-family: var(--font-mono);
font-size: 0.78rem;
line-height: 1.7;
border: 1px solid color-mix(in srgb, var(--teal) 10%, transparent);
min-height: 60px;
margin-top: 0.75rem;
white-space: pre-wrap;
word-break: break-all;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.04);
}
.dba-output:empty::before { content: '—'; color: var(--t4); }
.dba-output.has-error {
color: #991b1b;
background: rgba(254,226,226,0.6);
border-color: rgba(220,53,69,0.18);
}
.dba-output.has-success {
color: #065f46;
background: rgba(209,250,229,0.5);
border-color: var(--brand-glow);
}
/* Output wrapper (collapsible details) */
.dba-output-wrap { margin-top: 0.75rem; }
.dba-output-wrap summary {
cursor: pointer; font-size: 0.72rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.04em;
color: var(--t3); padding: 4px 0; user-select: none;
display: inline-flex; align-items: center; gap: 4px;
}
.dba-output-wrap summary::marker { content: ''; }
.dba-output-wrap summary::before { content: '▸'; font-size: 0.7rem; transition: transform 0.15s; }
.dba-output-wrap[open] summary::before { transform: rotate(90deg); }
/* Action section within panel */
.dba-section {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 1.125rem 1.25rem;
margin-bottom: 0.875rem;
}
/* .dba-section-title base (font/color/margin/layout) handled by
the canonical card-heading rule. Only the state ::before
definition lives here — the default is hidden via that rule,
but .danger-panel variant re-enables it. */
.dba-section-title::before {
content: '';
width: 3px;
height: 0.8rem;
border-radius: 2px;
background: var(--brand);
opacity: 0.55;
}
.danger-panel .dba-section-title::before { background: var(--danger); }
/* Current section snapshot: preview-first destructive workflow */
.dba-snapshot-status {
margin-bottom: 0.875rem;
padding: 0.75rem 0.9rem;
border: 1px solid var(--line);
border-radius: 10px;
color: var(--t2);
background: var(--glass-bg-data);
font-size: 0.82rem;
line-height: 1.55;
}
.dba-snapshot-status.is-success {
border-color: color-mix(in srgb, var(--success) 30%, var(--line));
color: color-mix(in srgb, var(--success) 75%, var(--ink));
background: color-mix(in srgb, var(--success) 7%, var(--card));
}
.dba-snapshot-status.is-error {
border-color: color-mix(in srgb, var(--danger) 32%, var(--line));
color: color-mix(in srgb, var(--danger) 78%, var(--ink));
background: color-mix(in srgb, var(--danger) 7%, var(--card));
}
.dba-snapshot-status.is-info {
border-color: color-mix(in srgb, var(--royal) 24%, var(--line));
background: color-mix(in srgb, var(--royal) 5%, var(--card));
}
.dba-snapshot-lock-note {
display: flex;
align-items: flex-start;
gap: 0.4rem;
margin-top: 0.75rem;
color: var(--t3);
font-size: 0.72rem;
line-height: 1.5;
}
.dba-snapshot-lock-note > span:first-child { flex: 0 0 auto; }
.dba-snapshot-heading,
.dba-snapshot-table-head,
.dba-snapshot-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.dba-snapshot-scope {
color: var(--t3);
font-size: 0.78rem;
}
.dba-preview-ready {
flex: 0 0 auto;
padding: 0.28rem 0.55rem;
border: 1px solid color-mix(in srgb, var(--success) 28%, var(--line));
border-radius: 999px;
color: var(--success);
background: color-mix(in srgb, var(--success) 7%, var(--card));
font-size: 0.69rem;
font-weight: 800;
}
.dba-snapshot-metrics {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.6rem;
margin-top: 1rem;
}
.dba-snapshot-metric {
display: flex;
min-height: 70px;
flex-direction: column;
justify-content: center;
gap: 0.2rem;
padding: 0.7rem 0.8rem;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--glass-bg-data);
}
.dba-snapshot-metric span {
color: var(--t3);
font-size: 0.71rem;
font-weight: 700;
}
.dba-snapshot-metric strong {
color: var(--danger);
font-family: var(--font-serif);
font-size: 1.45rem;
line-height: 1;
}
.dba-snapshot-note {
margin-top: 0.75rem;
padding: 0.65rem 0.75rem;
border-inline-start: 3px solid var(--amber);
border-radius: 8px;
color: var(--t2);
background: color-mix(in srgb, var(--warning) 7%, var(--card));
font-size: 0.78rem;
line-height: 1.55;
white-space: pre-line;
}
.dba-snapshot-table-head {
margin-bottom: 0.5rem;
color: var(--t2);
font-size: 0.76rem;
}
.dba-snapshot-table-head span { color: var(--t3); font-size: 0.7rem; }
.dba-snapshot-table-wrap {
max-height: 320px;
border: 1px solid var(--line);
border-radius: 10px;
}
.dba-snapshot-table {
color: var(--t2);
font-size: 0.76rem;
}
.dba-snapshot-table thead th {
position: sticky;
z-index: 1;
top: 0;
border-color: var(--line);
color: var(--t3);
background: var(--card);
font-size: 0.68rem;
white-space: nowrap;
}
.dba-snapshot-table td { border-color: var(--line); }
.dba-snapshot-table tr.is-retained td { opacity: 0.72; }
.dba-snapshot-code { color: var(--teal); font-weight: 800; }
.dba-program-chips {
display: flex;
align-items: center;
gap: 0.25rem;
flex-wrap: wrap;
}
.dba-program-chip {
display: inline-flex;
padding: 0.16rem 0.4rem;
border: 1px solid var(--teal-border);
border-radius: 999px;
color: var(--teal-deep);
background: color-mix(in srgb, var(--teal) 6%, var(--card));
font-size: 0.64rem;
font-weight: 800;
}
.dba-snapshot-action {
display: inline-flex;
padding: 0.18rem 0.4rem;
border: 1px solid var(--line);
border-radius: 999px;
font-size: 0.64rem;
font-weight: 800;
white-space: nowrap;
}
.dba-snapshot-action.is-delete {
border-color: color-mix(in srgb, var(--danger) 28%, var(--line));
color: var(--danger);
background: color-mix(in srgb, var(--danger) 6%, var(--card));
}
.dba-snapshot-action.is-retained {
color: var(--t3);
background: var(--glass-bg-data);
}
.dba-snapshot-preserved {
border-color: color-mix(in srgb, var(--success) 22%, var(--line));
background: color-mix(in srgb, var(--success) 3%, var(--card));
}
.dba-snapshot-preserved ul {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.45rem 1.25rem;
margin: 0;
padding-inline-start: 1.1rem;
color: var(--t2);
font-size: 0.76rem;
line-height: 1.5;
}
.dba-snapshot-actions {
padding: 0.9rem 1rem;
border: 1px solid color-mix(in srgb, var(--danger) 22%, var(--line));
border-radius: var(--radius);
background: color-mix(in srgb, var(--danger) 4%, var(--card));
}
.dba-snapshot-actions > div {
display: flex;
min-width: 0;
flex-direction: column;
gap: 0.15rem;
}
.dba-snapshot-actions strong { color: var(--t1); font-size: 0.8rem; }
.dba-snapshot-actions span { color: var(--t3); font-size: 0.72rem; }
.dba-snapshot-actions .btn { flex: 0 0 auto; }
/* Current-section CSV merge workflow */
.dba-current-import-route,
.dba-current-import-actions,
.dba-current-import-preview-head,
.dba-current-import-table-head,
.dba-current-import-confirm {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.dba-current-import-route {
margin-bottom: 1rem;
padding: 0.8rem 0.9rem;
border: 1px solid var(--teal-border);
border-radius: var(--radius);
background: color-mix(in srgb, var(--teal) 5%, var(--card));
}
.dba-current-import-route > div,
.dba-current-import-confirm > div {
display: flex;
min-width: 0;
flex-direction: column;
gap: 0.15rem;
}
.dba-current-import-route strong,
.dba-current-import-confirm strong { color: var(--t1); font-size: 0.8rem; }
.dba-current-import-route span,
.dba-current-import-confirm span { color: var(--t3); font-size: 0.73rem; line-height: 1.5; }
.dba-current-import-route .btn { flex: 0 0 auto; }
.dba-source-choice {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.5rem;
}
.dba-source-choice > label {
display: flex;
min-height: 64px;
align-items: flex-start;
gap: 0.55rem;
padding: 0.65rem 0.7rem;
border: 1px solid var(--line);
border-radius: 10px;
cursor: pointer;
background: var(--glass-bg-data);
}
.dba-source-choice > label:has(input:checked) {
border-color: var(--teal);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--teal) 9%, transparent);
}
.dba-source-choice input { margin-top: 0.15rem; }
.dba-source-choice label > span { display: flex; flex-direction: column; gap: 0.1rem; }
.dba-source-choice strong { color: var(--t1); font-size: 0.76rem; }
.dba-source-choice small { color: var(--t3); font-size: 0.67rem; line-height: 1.35; }
.dba-default-programmes {
margin-top: 1rem;
padding-top: 0.9rem;
border-top: 1px solid var(--line);
}
.dba-default-programmes legend {
width: auto;
margin-bottom: 0.15rem;
color: var(--t1);
font-size: 0.8rem;
font-weight: 800;
}
.dba-default-programmes p {
margin-bottom: 0.55rem;
color: var(--t3);
font-size: 0.72rem;
line-height: 1.5;
}
.dba-programme-selector { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.dba-programme-option {
display: inline-flex;
min-height: 36px;
align-items: center;
gap: 0.4rem;
padding: 0.35rem 0.65rem;
border: 1px solid var(--line);
border-radius: 999px;
cursor: pointer;
color: var(--t2);
background: var(--glass-bg-data);
font-size: 0.72rem;
font-weight: 800;
}
.dba-programme-option:has(input:checked) {
border-color: var(--teal);
color: var(--teal-deep);
background: color-mix(in srgb, var(--teal) 7%, var(--card));
}
.dba-programme-option input { margin: 0; }
.dba-current-import-actions {
align-items: flex-start;
margin-top: 1rem;
}
.dba-current-import-actions > span {
max-width: 54rem;
color: var(--t3);
font-size: 0.72rem;
line-height: 1.55;
}
.dba-current-import-actions .btn { flex: 0 0 auto; }
.dba-current-import-preview-head { align-items: flex-start; }
.dba-current-import-preview-head p { color: var(--t3); font-size: 0.75rem; }
.dba-preview-ready.is-blocked {
border-color: color-mix(in srgb, var(--danger) 28%, var(--line));
color: var(--danger);
background: color-mix(in srgb, var(--danger) 6%, var(--card));
}
.dba-current-import-metrics {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.55rem;
margin-top: 1rem;
}
.dba-current-import-metric {
display: flex;
min-height: 68px;
flex-direction: column;
justify-content: center;
gap: 0.2rem;
padding: 0.65rem 0.75rem;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--glass-bg-data);
}
.dba-current-import-metric span { color: var(--t3); font-size: 0.68rem; font-weight: 750; }
.dba-current-import-metric strong { color: var(--t1); font-size: 1.3rem; line-height: 1; }
.dba-current-import-metric.is-new strong,
.dba-current-import-metric.is-add strong { color: var(--success); }
.dba-current-import-metric.is-remove strong { color: var(--royal); }
.dba-current-import-metric.is-warning strong { color: var(--warning); }
.dba-current-import-programme-status {
margin-top: 0.7rem;
padding: 0.65rem 0.75rem;
border-inline-start: 3px solid var(--teal);
border-radius: 8px;
color: var(--t2);
background: color-mix(in srgb, var(--teal) 5%, var(--card));
font-size: 0.74rem;
line-height: 1.55;
}
.dba-current-import-table-head { margin-bottom: 0.45rem; }
.dba-current-import-table-head strong { color: var(--t2); font-size: 0.76rem; }
.dba-current-import-table-head span { color: var(--t3); font-size: 0.69rem; }
.dba-current-import-table-wrap {
max-height: 340px;
border: 1px solid var(--line);
border-radius: 10px;
}
.dba-current-import-table { color: var(--t2); font-size: 0.74rem; }
.dba-current-import-table thead th {
position: sticky;
z-index: 1;
top: 0;
border-color: var(--line);
color: var(--t3);
background: var(--card);
font-size: 0.67rem;
white-space: nowrap;
}
.dba-current-import-table td { border-color: var(--line); vertical-align: middle; }
.dba-current-import-table td:first-child small {
display: block;
max-width: 15rem;
overflow: hidden;
margin-top: 0.08rem;
color: var(--t3);
font-size: 0.63rem;
text-overflow: ellipsis;
white-space: nowrap;
}
.dba-programme-unassigned { color: var(--warning); font-size: 0.68rem; font-weight: 800; }
.dba-assignment-source {
display: inline-flex;
padding: 0.16rem 0.4rem;
border: 1px solid var(--line);
border-radius: 999px;
color: var(--t3);
background: var(--glass-bg-data);
font-size: 0.63rem;
font-weight: 800;
white-space: nowrap;
}
.dba-assignment-source.is-csv { border-color: var(--teal-border); color: var(--teal-deep); }
.dba-assignment-source.is-default { border-color: color-mix(in srgb, var(--royal) 28%, var(--line)); color: var(--royal); }
.dba-assignment-source.is-preserved { border-color: var(--line); color: var(--t2); }
.dba-assignment-source.is-mixed { border-color: color-mix(in srgb, var(--warning) 35%, var(--line)); color: var(--warning); }
.dba-assignment-source.is-unassigned { border-color: color-mix(in srgb, var(--warning) 35%, var(--line)); color: var(--warning); }
.dba-current-import-confirm {
padding: 0.9rem 1rem;
border: 1px solid var(--teal-border);
border-radius: var(--radius);
background: color-mix(in srgb, var(--teal) 4%, var(--card));
}
.dba-current-import-confirm .btn { flex: 0 0 auto; }
/* Step flow indicator (for term sections) */
.dba-steps {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1rem;
font-size: 0.78rem;
}
.dba-step {
display: flex;
align-items: center;
gap: 0.35rem;
padding: 0.3rem 0.65rem;
border-radius: 999px;
font-weight: 600;
color: var(--muted);
background: #f1f5f9;
border: 1px solid var(--line);
}
.dba-step.active {
color: var(--brand-dark);
background: var(--brand-soft);
border-color: #a8e6d4;
}
.dba-step.done {
color: var(--success);
background: #f0fdf4;
border-color: #bbf7d0;
}
.dba-step-arrow { color: var(--muted); font-size: 0.65rem; }
/* Double-confirm delete pattern */
.dba-delete-confirm {
background: #fff5f5 !important; color: var(--danger) !important;
border: 1px solid var(--pl-conflict-cell) !important;
animation: dba-pulse 0.5s var(--ease);
}
@keyframes dba-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.dba-confirm-text { font-size: 0.75rem; font-weight: 700; }
/* Mobile: single-row scrollable strip */
@media (max-width: 768px) {
.dba-nav {
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: thin;
padding-bottom: 0.35rem;
}
.dba-nav-item {
flex-shrink: 0;
}
.dba-risk-badge { display: none; }
.dba-nav-name { font-size: 0.72rem; }
.dba-snapshot-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dba-snapshot-preserved ul { grid-template-columns: 1fr; }
.dba-snapshot-actions { align-items: stretch; flex-direction: column; }
.dba-snapshot-actions .btn { width: 100%; }
.dba-current-import-route,
.dba-current-import-actions,
.dba-current-import-confirm { align-items: stretch; flex-direction: column; }
.dba-current-import-route .btn,
.dba-current-import-actions .btn,
.dba-current-import-confirm .btn { width: 100%; }
.dba-current-import-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ═══════════════════════════════════════════════════════════
DARK MODE — Deep Navy overrides
Selector: html[data-theme="dark"]
═══════════════════════════════════════════════════════════ */
/* Nav items — background and hover states */
html[data-theme="dark"] .dba-nav-item:hover {
background: rgba(255,255,255,0.04);
border-color: rgba(255,255,255,0.08);
}
html[data-theme="dark"] .dba-nav-item.active {
background: rgba(255,255,255,0.04);
border-color: var(--teal);
}
html[data-theme="dark"] .dba-nav-item.danger-item.active {
background: rgba(220,53,69,0.08);
border-color: var(--danger);
box-shadow: 0 0 0 3px rgba(224,52,52,0.12), var(--shadow-card);
}
/* Icon backgrounds */
html[data-theme="dark"] .icon-safe {
background: rgba(34,197,94,0.1);
color: #4ade80;
}
html[data-theme="dark"] .icon-danger {
background: rgba(220,38,38,0.1);
color: #f87171;
}
html[data-theme="dark"] .icon-warning {
background: rgba(245,158,11,0.1);
color: #fbbf24;
}
html[data-theme="dark"] .icon-system {
background: rgba(14,165,233,0.1);
color: #38bdf8;
}
/* Risk badges */
html[data-theme="dark"] .risk-danger {
background: rgba(220,38,38,0.12);
color: #fca5a5;
}
html[data-theme="dark"] .risk-warning {
background: rgba(245,158,11,0.12);
color: #fcd34d;
}
html[data-theme="dark"] .risk-safe {
background: rgba(34,197,94,0.12);
color: #86efac;
border-color: rgba(34,197,94,0.25);
}
/* Danger zone panel header */
html[data-theme="dark"] .dba-panel.danger-panel .dba-panel-header {
background: rgba(220,53,69,0.08);
border-color: rgba(220,53,69,0.2);
}
/* Output pre block */
html[data-theme="dark"] .dba-output {
background: rgba(255,255,255,0.04);
color: #c0c4d4;
border-color: rgba(10,142,110,0.15);
box-shadow: inset 0 1px 3px rgba(0,0,0,0.15);
}
html[data-theme="dark"] .dba-output.has-error {
color: #fca5a5;
background: rgba(220,53,69,0.08);
border-color: rgba(220,53,69,0.2);
}
html[data-theme="dark"] .dba-output.has-success {
color: #6ee7b7;
background: rgba(10,142,110,0.08);
border-color: rgba(10,142,110,0.2);
}
html[data-theme="dark"] .dba-snapshot-table thead th { background: var(--card); }
html[data-theme="dark"] .dba-snapshot-status.is-success,
html[data-theme="dark"] .dba-snapshot-preserved {
background: rgba(34,197,94,0.06);
}
html[data-theme="dark"] .dba-snapshot-status.is-error,
html[data-theme="dark"] .dba-snapshot-actions {
background: rgba(220,38,38,0.07);
}
html[data-theme="dark"] .dba-snapshot-note { background: rgba(245,158,11,0.07); }
html[data-theme="dark"] .dba-current-import-route,
html[data-theme="dark"] .dba-current-import-programme-status,
html[data-theme="dark"] .dba-current-import-confirm { background: rgba(10,142,110,0.07); }
html[data-theme="dark"] .dba-current-import-table thead th { background: var(--card); }
/* Step indicators */
html[data-theme="dark"] .dba-step {
background: rgba(255,255,255,0.04);
color: #a0a4b8;
border-color: rgba(255,255,255,0.06);
}
html[data-theme="dark"] .dba-step.done {
background: rgba(34,197,94,0.1);
color: #86efac;
border-color: rgba(34,197,94,0.25);
}
/* Double-confirm delete */
html[data-theme="dark"] .dba-delete-confirm {
background: rgba(220,53,69,0.12) !important;
color: #f87171 !important;
border-color: rgba(220,53,69,0.25) !important;
}
/* Panel header border */
/* Sections */
/* Nav bar border */
html[data-theme="dark"] .dba-nav {
border-bottom-color: rgba(255,255,255,0.08);
}
/* Nav item borders */
/* Flat inputs inside oracle preview table */
#oTableBody .form-control,
#oTableBody .form-select,
#oTableBody .form-control-sm,
#oTableBody .form-select-sm {
border-radius: 2px !important;
padding: 0.25rem 0.4rem !important;
}
/* ============================================================
AUDIT EXPLORER — feature-specific styles
------------------------------------------------------------
Moved out of core/templates/core/audit_explorer.html.
============================================================ */
/* Page-specific: audit table — neumorphic style */
.audit-table { border-collapse: collapse; width: 100%; font-size: 12px; }
.audit-table th, .audit-table td {
border-bottom: var(--border-subtle);
padding: 0.55rem 0.75rem; vertical-align: top;
}
.audit-table th {
background: var(--glass-bg-data);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
font-family: var(--font-mono); font-size: 10px;
text-transform: uppercase; letter-spacing: 0.06em;
color: var(--t3); font-weight: 700; white-space: nowrap;
user-select: none; text-align: start;
}
.audit-table td {
background: transparent;
transition: background 0.1s var(--ease);
}
/* Issue #3 fix — row hover more visible */
.audit-table tbody tr:hover td { background: color-mix(in srgb, var(--teal) 7%, transparent); }
.audit-table tbody tr:focus-within td { background: color-mix(in srgb, var(--teal) 4%, transparent); }
.audit-status-success { color: var(--pl-ok-text); font-weight: 700; }
.audit-status-error { color: var(--pl-danger-text); font-weight: 700; }
.audit-status-allow { color: var(--pl-ok-text); font-weight: 600; }
.audit-status-deny { color: var(--pl-warn-text); font-weight: 700; }
.audit-status-critical { color: #991b1b; font-weight: 700; }
.audit-hash { font-family: var(--font-mono); font-size: 11px; color: var(--t4); letter-spacing: 0.02em; }
.audit-id { font-family: var(--font-mono); font-weight: 700; color: var(--teal); font-size: 11px; }
.audit-ts { font-family: var(--font-mono); font-size: 11px; color: var(--t3); white-space: nowrap; }
.audit-endpoint { font-family: var(--font-mono); font-size: 11px; color: var(--t2); }
.audit-filter-row {
display: flex; gap: 0.5rem; flex-wrap: wrap;
margin-bottom: 1rem; align-items: flex-end;
padding: 0.75rem 1rem;
background: rgba(255,255,255,0.40);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: none; border-radius: var(--radius);
box-shadow: 5px 5px 14px rgba(163,177,198,0.25),
-5px -5px 14px rgba(255,255,255,0.75);
}
.audit-filter-row .form-control,
.audit-filter-row .form-select { max-width: 180px; }
.audit-table-wrap {
background: rgba(255,255,255,0.45);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: none; border-radius: 14px;
overflow-x: auto; overflow-y: auto;
max-height: 520px;
-webkit-overflow-scrolling: touch;
box-shadow: 6px 6px 16px rgba(163,177,198,0.28),
-6px -6px 16px rgba(255,255,255,0.8);
scrollbar-width: thin;
scrollbar-color: var(--line-strong) transparent;
}
/* Record count summary */
.audit-count {
font-family: var(--font-mono); font-size: 0.78rem;
color: var(--t3); font-weight: 600;
}
.audit-count strong { color: var(--teal); }
/* -- AE-02: Hash chain info tooltip icon -- */
.hash-chain-info {
display: inline-flex; align-items: center; justify-content: center;
margin-inline-start: 0.35rem; cursor: help;
text-decoration: none; border-bottom: none;
color: inherit; opacity: 0.7; vertical-align: middle;
border-radius: 50%;
}
.hash-chain-info:hover, .hash-chain-info:focus-visible {
opacity: 1;
}
.hash-chain-info:focus-visible {
outline: 2px solid var(--teal); outline-offset: 2px;
}
.hash-chain-info-icon { display: block; }
/* -- AE-04: Truncated cell tooltip for Endpoint / resource columns -- */
.audit-cell-truncate {
max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* -- Issue #5: Visible filter labels -- */
.audit-filter-group { display: flex; flex-direction: column; gap: 0.2rem; }
.audit-filter-label {
font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.04em; color: var(--t3); font-family: var(--font-mono);
}
/* -- Issue #5: Export CSV button styling -- */
.btn-export {
display: inline-flex; align-items: center; gap: 0.4rem;
padding: 0.35rem 1rem; border-radius: 14px;
font-size: 0.82rem; font-weight: 600;
background: var(--glass-bg); color: var(--teal);
text-decoration: none;
box-shadow: var(--shadow-neu-sm);
transition: all 0.15s;
}
.btn-export:hover { color: var(--teal-bright); box-shadow: 4px 4px 10px rgba(163,177,198,0.35), -4px -4px 10px rgba(255,255,255,0.85); }
/* -- Issue #19: Color-only status indicators — icon prefixes -- */
.audit-status-icon { display: inline-flex; align-items: center; gap: 0.25rem; }
.audit-status-icon::before { font-size: 0.7rem; line-height: 1; }
.audit-status-icon.audit-status-success::before,
.audit-status-icon.audit-status-allow::before { content: '\2713'; }
.audit-status-icon.audit-status-error::before,
.audit-status-icon.audit-status-critical::before { content: '\26A0'; }
.audit-status-icon.audit-status-deny::before { content: '\2715'; }
/* -- Pagination controls -- */
.audit-pagination {
display: flex; align-items: center; justify-content: space-between;
gap: 1rem; flex-wrap: wrap; padding: 0.75rem 1rem; margin-top: 0.75rem;
background: rgba(255,255,255,0.40); backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border-radius: var(--radius);
box-shadow: 5px 5px 14px rgba(163,177,198,0.25), -5px -5px 14px rgba(255,255,255,0.75);
font-size: 0.82rem; color: var(--t3);
}
.audit-page-nav { display: flex; align-items: center; gap: 0.35rem; }
.audit-page-btn {
width: 32px; height: 32px; border-radius: 8px; border: none;
background: var(--glass-bg); color: var(--t3);
font-size: 1rem; font-weight: 700; cursor: pointer;
box-shadow: 2px 2px 5px rgba(163,177,198,0.25), -2px -2px 5px rgba(255,255,255,0.7);
transition: all 0.15s;
display: flex; align-items: center; justify-content: center;
}
.audit-page-btn:hover:not(:disabled) { color: var(--teal); box-shadow: 3px 3px 7px rgba(163,177,198,0.3), -3px -3px 7px rgba(255,255,255,0.8); }
.audit-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.audit-page-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.audit-page-current { font-weight: 600; font-family: var(--font-mono); font-size: 0.78rem; }
.audit-page-info { font-family: var(--font-mono); font-size: 0.78rem; }
.audit-page-info strong { color: var(--teal); }
.audit-page-size { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; }
/* -- View toggle (table / timeline) -- */
.audit-view-toggle {
display: flex; gap: 0; border-radius: 10px; overflow: hidden; width: fit-content;
box-shadow: inset 3px 3px 7px rgba(163,177,198,0.3), inset -3px -3px 7px rgba(255,255,255,0.7);
}
.audit-view-btn {
padding: 0.4rem 1.2rem; border: none; background: transparent;
font-size: 0.78rem; font-weight: 700; color: var(--t3); cursor: pointer;
transition: all 0.15s; font-family: var(--font-mono);
text-transform: uppercase; letter-spacing: 0.04em;
}
.audit-view-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.audit-view-btn.active { background: var(--teal); color: #fff; box-shadow: 0 2px 6px color-mix(in srgb, var(--teal) 25%, transparent); }
/* -- Timeline view -- */
.audit-timeline { max-height: 600px; overflow-y: auto; padding: 1rem; }
.atl-day { font-family: var(--font-serif); font-size: 1rem; color: var(--navy); margin-bottom: 0.75rem; margin-top: 1.25rem; }
.atl-day:first-child { margin-top: 0; }
.atl-item {
display: flex; gap: 1rem; padding: 0.75rem 0;
border-left: 2px solid color-mix(in srgb, var(--teal) 15%, transparent);
margin-left: 0.5rem; padding-left: 1rem; position: relative;
}
[dir="rtl"] .atl-item {
border-left: none; border-right: 2px solid color-mix(in srgb, var(--teal) 15%, transparent);
margin-left: 0; margin-right: 0.5rem; padding-left: 0; padding-right: 1rem;
}
.atl-item::before {
content: ''; position: absolute; left: -5px; top: 1rem;
width: 8px; height: 8px; border-radius: 50%; background: var(--teal);
border: 2px solid #fff; box-shadow: 0 0 0 2px color-mix(in srgb, var(--teal) 15%, transparent);
}
[dir="rtl"] .atl-item::before { left: auto; right: -5px; }
.atl-time { font-family: var(--font-mono); font-size: 0.75rem; color: var(--t4); white-space: nowrap; min-width: 70px; }
.atl-content { flex: 1; }
.atl-action { font-weight: 700; font-size: 0.85rem; color: var(--ink); text-transform: uppercase; letter-spacing: 0.02em; }
.atl-detail { font-size: 0.8rem; color: var(--t3); margin-top: 0.15rem; }
.atl-status { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 4px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; }
.atl-status-success, .atl-status-allow { background: #dcfce7; color: #15803d; }
.atl-status-error { background: #fee2e2; color: var(--pl-danger-text); }
.atl-status-deny { background: #fff7ed; color: #9a3412; }
.atl-status-critical { background: #fef2f2; color: #991b1b; }
.atl-expand {
font-size: 0.75rem; color: var(--teal); cursor: pointer;
text-decoration: none; margin-top: 0.25rem; display: inline-block;
background: none; border: none; padding: 0; font-family: inherit;
}
.atl-expand:hover { text-decoration: underline; }
.atl-expand:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.atl-extra { display: none; margin-top: 0.35rem; font-family: var(--font-mono); font-size: 0.72rem; color: var(--t4); }
.atl-extra.open { display: block; }
/* Mobile filter details: collapsed on mobile, open on desktop */
.audit-filter-details { border: none; }
.audit-filter-details summary {
display: none; /* hidden on desktop */
cursor: pointer; font-weight: 600; font-size: 0.82rem; color: var(--teal);
padding: 0.5rem 0; list-style: none;
}
.audit-filter-details summary::-webkit-details-marker { display: none; }
@media (max-width: 768px) {
.audit-filter-details summary { display: block; }
.audit-filter-row { flex-direction: column; align-items: stretch; }
.audit-filter-row .form-control,
.audit-filter-row .form-select { max-width: 100% !important; width: 100%; }
.audit-filter-row .btn { width: 100%; }
.audit-table { font-size: 11px; }
.audit-table th, .audit-table td { padding: 0.4rem 0.5rem; }
.audit-table-wrap { max-height: none; }
.audit-pagination { flex-direction: column; align-items: stretch; text-align: center; }
.audit-page-nav { justify-content: center; }
.audit-page-size { justify-content: center; }
.audit-page-info { text-align: center; }
.audit-view-toggle { width: 100%; }
.audit-view-btn { flex: 1; text-align: center; }
/* Hide low-priority columns on mobile: Role, Reason, Error, Hash */
.audit-table th:nth-child(4), .audit-table td:nth-child(4),
.audit-table th:nth-child(7), .audit-table td:nth-child(7),
.audit-table th:nth-child(9), .audit-table td:nth-child(9),
.audit-table th:nth-child(10), .audit-table td:nth-child(10) { display: none; }
}
/* ── Dark mode overrides (Deep Navy) ───────────────────── */
html[data-theme="dark"] .audit-table th {
background: rgba(255,255,255,0.04);
color: #a0a4b8;
} html[data-theme="dark"] .audit-table tbody tr:hover td { background: rgba(10,142,110,0.10); }
html[data-theme="dark"] .audit-table tbody tr:focus-within td { background: rgba(10,142,110,0.06); }
html[data-theme="dark"] .audit-status-success { color: #2ec9a0; }
html[data-theme="dark"] .audit-status-error { color: #f06060; }
html[data-theme="dark"] .audit-status-allow { color: #2ec9a0; }
html[data-theme="dark"] .audit-status-deny { color: #f5a060; }
html[data-theme="dark"] .audit-status-critical { color: #f06060; }html[data-theme="dark"] .audit-filter-row,
html[data-theme="dark"] .audit-table-wrap,
html[data-theme="dark"] .audit-pagination,
html[data-theme="dark"] .btn-export {
background: rgba(255,255,255,0.04);
box-shadow: none;
border: 1px solid rgba(255,255,255,0.06);
} html[data-theme="dark"] .audit-page-btn {
background: rgba(255,255,255,0.04);
color: #a0a4b8;
box-shadow: none;
border: 1px solid rgba(255,255,255,0.06);
}
html[data-theme="dark"] .audit-page-btn:hover:not(:disabled) { color: #0CA87E; background: rgba(255,255,255,0.08); }
html[data-theme="dark"] .audit-view-toggle {
box-shadow: inset 2px 2px 5px rgba(0,0,0,0.3), inset -2px -2px 5px rgba(255,255,255,0.03);
}
html[data-theme="dark"] .audit-view-btn { color: #a0a4b8; }
html[data-theme="dark"] .audit-view-btn.active { background: #0CA87E; color: #fff; } html[data-theme="dark"] .btn-export:hover { box-shadow: none; background: rgba(255,255,255,0.08); }
/* Timeline view dark overrides */
html[data-theme="dark"] .atl-day { color: #e2e4ec; }
html[data-theme="dark"] .atl-item { border-left-color: rgba(12,168,126,0.20); }
html[data-theme="dark"] [dir="rtl"] .atl-item { border-right-color: rgba(12,168,126,0.20); }
html[data-theme="dark"] .atl-item::before { border-color: #151826; }
html[data-theme="dark"] .atl-action { color: #e2e4ec; }
html[data-theme="dark"] .atl-detail { color: #c0c4d4; }
html[data-theme="dark"] .atl-time { color: #7a7e92; }
html[data-theme="dark"] .atl-extra { color: #7a7e92; }
html[data-theme="dark"] .atl-status-success,
html[data-theme="dark"] .atl-status-allow { background: rgba(22,163,74,0.15); color: #4ade80; }
html[data-theme="dark"] .atl-status-error { background: rgba(185,28,28,0.15); color: #f87171; }
html[data-theme="dark"] .atl-status-deny { background: rgba(154,52,18,0.15); color: #fb923c; }
html[data-theme="dark"] .atl-status-critical { background: rgba(153,27,27,0.15); color: #f87171; }
/* ============================================================
SECTION PLANNING — feature-specific styles
------------------------------------------------------------
Moved out of core/templates/core/section_planning.html.
============================================================ */
.sp-caps { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; padding: 10px 16px; border-radius: var(--radius); background: color-mix(in srgb, var(--teal) 3%, transparent); border: 1px dashed color-mix(in srgb, var(--teal) 20%, transparent); margin-bottom: 4px; }
.sp-caps-lbl { font-size: .72rem; color: var(--t3); text-transform: uppercase; font-family: var(--font-mono); letter-spacing: 0.04em; font-weight: 700; margin-bottom: 2px; }
.sp-cap-grp { display: flex; flex-direction: column; min-width: 100px; }
.sp-cap-grp input { width: 80px; text-align: center; }
.sp-caps-info { font-size: .72rem; color: var(--t3); align-self: center; margin-inline-start: auto; }
.sp-toggle-caps { font-size: .78rem; color: var(--teal); cursor: pointer; background: none; border: none; font-weight: 600; padding: 2px 0; text-decoration: underline; text-underline-offset: 2px; }
/* KPI cards */
.sp-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 14px; }
.sp-mc { padding: .65rem .85rem; }
.sp-mc .k { font-size: .68rem; color: var(--t3); text-transform: uppercase; font-family: var(--font-mono); letter-spacing: 0.06em; font-weight: 700; }
.sp-mc .v { font-weight: 700; font-family: var(--font-serif); font-size: 1.35rem; color: var(--teal); }
.sp-mc.mc-navy .v { color: var(--navy); }
.sp-mc.mc-hero { border-inline-start: 3px solid var(--teal); }
/* Progress bar */
.sp-progress { height: 3px; border-radius: 2px; background: var(--t5); overflow: hidden; margin-bottom: 10px; }
.sp-progress-bar { height: 100%; background: var(--teal); width: 0%; transition: width 0.3s var(--ease); }
/* Status pills */
.sp-pill { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: .72rem; font-weight: 700; text-transform: capitalize; }
.sp-pill-full { background: color-mix(in srgb, var(--teal) 12%, transparent); color: var(--brand-dark); }
.sp-pill-under { background: rgba(192,48,48,0.10); color: var(--danger); }
.sp-pill-ext { background: rgba(100,120,140,0.10); color: var(--t4); font-size: .68rem; font-weight: 600; }
/* Fill bar */
.sp-fill-wrap { width: 100%; height: 6px; border-radius: 3px; background: var(--t5); overflow: hidden; }
.sp-fill { height: 100%; border-radius: 3px; transition: width 0.3s var(--ease); }
.sp-fill-hi { background: var(--teal); }
.sp-fill-md { background: var(--warning); }
.sp-fill-lo { background: var(--danger); }
/* Department summary */
.sp-dept-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.sp-dept-card { border: var(--border-subtle); border-radius: var(--radius); padding: .55rem .75rem; background: var(--glass-bg); }
.sp-dept-card .dept-name { font-weight: 700; font-size: .82rem; color: var(--navy); margin-bottom: 4px; }
.sp-dept-card .dept-stat { font-size: .72rem; color: var(--t3); }
.sp-dept-card .dept-stat b { color: var(--t1); }
/* Export bar */
.sp-export-bar { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 8px 0; }
.sp-export-bar .sp-ts { font-size: .72rem; color: var(--t3); margin-inline-start: auto; }
/* Alert */
.sp-alert { padding: 8px 14px; border-radius: var(--radius); font-size: .82rem; margin-bottom: 10px; }
.sp-alert-ok { background: var(--teal-dim); color: var(--brand-dark); border: 1px solid var(--teal-border); }
.sp-alert-err { background: rgba(192,48,48,0.08); color: var(--danger); border: 1px solid rgba(192,48,48,0.15); }
/* Advanced per-course table */
.sp-adv-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.sp-adv-search { width: 220px; }
.sp-adv-count { font-size: .72rem; color: var(--t3); margin-inline-start: auto; }
.sp-adv-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.sp-adv-table th { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--t3); font-weight: 700; font-family: var(--font-mono); padding: 5px 8px; border-bottom: 1.5px solid var(--t5); text-align: start; white-space: nowrap; }
.sp-adv-table td { padding: 4px 8px; border-bottom: 1px solid var(--t5); vertical-align: middle; }
.sp-adv-table tr:hover { background: color-mix(in srgb, var(--teal) 3%, transparent); }
.sp-adv-table .adv-input { width: 60px; text-align: center; padding: 2px 4px; font-size: .8rem; }
.sp-adv-table .adv-input:not(:placeholder-shown) { border-color: var(--teal); background: color-mix(in srgb, var(--teal) 4%, transparent); font-weight: 700; }
.sp-adv-table .adv-default { color: var(--t3); font-size: .72rem; }
.sp-adv-wrap { max-height: 400px; overflow-y: auto; border: var(--border-subtle); border-radius: var(--radius); padding: 0; }
.sp-adv-reset { font-size: .75rem; color: var(--t3); cursor: pointer; background: none; border: 1px solid var(--t4); border-radius: 4px; padding: 2px 8px; }
.sp-adv-reset:hover { color: var(--danger); border-color: var(--danger); }
.sp-adv-badge { display: inline-block; padding: 0 6px; border-radius: 8px; font-size: .68rem; font-weight: 700; background: var(--teal); color: #fff; margin-inline-start: 4px; }
/* Multi-program headings */
.sp-prog-heading { font-size: .95rem; font-weight: 700; color: var(--navy); padding: 10px 0 6px; margin-top: 18px; border-bottom: 2px solid var(--teal); display: flex; align-items: baseline; gap: 8px; }
.sp-prog-heading:first-child { margin-top: 0; }
.sp-prog-heading .sp-prog-count { font-size: .75rem; font-weight: 600; color: var(--t3); font-family: var(--font-mono); }
.sp-prog-heading.sp-collapsible:hover { opacity: .85; }
.sp-collapse-arrow { font-size: .7rem; color: var(--t3); transition: transform .15s; min-width: 12px; }
.sp-prog-block { margin-bottom: 20px; }
.sp-prog-block .tbl-card { margin-bottom: 8px; }
.sp-prog-block .sp-dept-grid { margin-top: 8px; }
/* Responsive */
@media(max-width:768px) {
.sp-kpi { grid-template-columns: repeat(2, 1fr); }
.sp-caps { flex-direction: column; align-items: stretch; }
.sp-cap-grp input { width: 100%; }
.sp-adv-search { width: 100%; }
}
/* ═══════════════════════════════════════════════════════════
DARK MODE — Deep Navy overrides
html[data-theme="dark"]
═══════════════════════════════════════════════════════════ */
/* .sp-panel / .sp-mc dark surface moved to V2 UNIFIED rule */
html[data-theme="dark"] .sp-caps {
background: rgba(10,142,110,0.06);
border-color: rgba(10,142,110,0.15);
}
html[data-theme="dark"] .sp-dept-card {
background: rgba(255,255,255,0.04);
border-color: rgba(255,255,255,0.06);
}
/* Status pills */
html[data-theme="dark"] .sp-pill-full {
background: rgba(12,168,126,0.15);
color: #2ec9a0;
}
html[data-theme="dark"] .sp-pill-under {
background: rgba(220,53,69,0.15);
color: #f06060;
}
html[data-theme="dark"] .sp-pill-ext {
background: rgba(255,255,255,0.06);
color: #a0a4b8;
}
/* Fill bars */
html[data-theme="dark"] .sp-fill-md {
background: rgba(240,173,78,0.15);
}
html[data-theme="dark"] .sp-fill-lo {
background: rgba(220,53,69,0.15);
}
/* Progress bar track */
/* Alerts */
html[data-theme="dark"] .sp-alert-ok {
background: rgba(12,168,126,0.10);
color: #2ec9a0;
border-color: rgba(12,168,126,0.20);
}
html[data-theme="dark"] .sp-alert-err {
background: rgba(220,53,69,0.10);
color: #f06060;
border-color: rgba(220,53,69,0.20);
}
/* Advanced table */
html[data-theme="dark"] .sp-adv-table th {
border-bottom-color: rgba(255,255,255,0.08);
} html[data-theme="dark"] .sp-adv-table tr:hover {
background: rgba(12,168,126,0.06);
}
html[data-theme="dark"] .sp-adv-table .adv-input:not(:placeholder-shown) {
border-color: rgba(12,168,126,0.4);
background: rgba(12,168,126,0.08);
}
/* Multi-program headings */
html[data-theme="dark"] .sp-prog-heading {
color: #e2e4ec;
border-bottom-color: rgba(12,168,126,0.35);
}
html[data-theme="dark"] .sp-prog-heading .sp-prog-count {
color: #a0a4b8;
}
/* Reset button hover */
html[data-theme="dark"] .sp-adv-reset {
border-color: rgba(255,255,255,0.10);
}
html[data-theme="dark"] .sp-adv-reset:hover {
color: #f06060;
border-color: #f06060;
}
/* ============================================================
ADVISOR PORTFOLIO — feature-specific styles
------------------------------------------------------------
Moved out of core/templates/core/advisor_portfolio.html.
============================================================ */
/* ═══════════════════════════════════════════════════════════
ADVISOR PORTFOLIO — Page-specific styles
═══════════════════════════════════════════════════════════ */
/* ── Advisor selector (inline in header) ─── */
.ap-advisor-bar {
display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;
margin-bottom: 0.75rem;
}
.ap-advisor-bar select { max-width: 360px; }
.ap-advisor-bar .ap-loaded-label {
font-size: 0.78rem; color: var(--muted); font-weight: 500;
display: flex; align-items: center; gap: 0.3rem;
}
.ap-advisor-bar .ap-loaded-label .ap-loaded-time {
font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted-light);
}
/* ── Insight chips (compact alert banner) ─── */
.ap-insights { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.ap-insight {
display: inline-flex; align-items: center; gap: 0.3rem;
padding: 0.3rem 0.65rem; border-radius: 999px;
font-size: 0.75rem; font-weight: 700;
}
.ap-insight-danger { background: #fff1f2; color: #be123c; border: 1px solid #fecdd3; }
.ap-insight-warn { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }
.ap-insight-info { background: #ecf9f4; color: var(--teal-deep); border: 1px solid #a8e6d4; }
/* ── Program breakdown + GPA chart row ─── */
.ap-breakdown-row {
display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-start;
margin-bottom: 0.75rem;
}
.ap-programs {
display: flex; gap: 0.3rem; flex-wrap: wrap; align-items: center;
flex: 1; min-width: 200px;
}
.ap-prog-pill {
display: inline-flex; align-items: center; gap: 0.25rem;
padding: 0.2rem 0.55rem; border-radius: 999px;
font-size: 0.75rem; font-weight: 700;
background: #eef2ff; color: #3b3fa0; border: 1px solid #c7d2fe;
}
.ap-prog-pill .ap-prog-n {
font-family: var(--font-mono); font-size: 0.72rem;
background: rgba(59,63,160,0.1); padding: 0.05rem 0.3rem;
border-radius: 999px;
}
/* GPA mini-chart */
.ap-gpa-chart {
display: flex; align-items: flex-end; gap: 2px; height: 36px;
min-width: 160px;
}
.ap-gpa-bar {
flex: 1; min-width: 8px; border-radius: 3px 3px 0 0;
transition: height 0.3s var(--ease);
}
.ap-gpa-bar-danger { background: #f87171; }
.ap-gpa-bar-warn { background: #fbbf24; }
.ap-gpa-bar-ok { background: #34d399; }
.ap-gpa-bar-great { background: #22c55e; }
.ap-gpa-labels {
display: flex; justify-content: space-between;
font-size: 0.58rem; color: var(--muted); font-weight: 600;
margin-top: 0.1rem;
}
/* Filter chips layout */
.ap-filters { display:flex; gap:0.25rem; flex-wrap:wrap; }
/* ── Batch bar ─── */
.ap-batch-bar {
display: none; align-items: center; gap: 0.75rem;
padding: 0.45rem 0.75rem; border-radius: var(--radius);
background: var(--brand-soft); border: 1px solid var(--teal-border);
margin-bottom: 0.5rem; font-size: 0.82rem; color: var(--brand-dark);
animation: dlg-fade-in 0.15s var(--ease);
}
.ap-batch-bar.active { display: flex; }
.ap-batch-count { font-weight: 700; font-family: var(--font-mono); }
/* ── Table — using global .tbl-card + .cr-row ─── */
#apTable .ap-check { width:15px; height:15px; cursor:pointer; }
.ap-expand[aria-expanded="true"] { transform:rotate(90deg); }
.ap-expand[aria-expanded="true"] .i { color:var(--teal); }
/* Detail row */
.ap-detail-row td { background: rgba(255,255,255,0.7) !important; border-top: 1px dashed var(--pl-overlay-4) !important; }
.ap-detail-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 0.5rem; padding: 0.65rem 0.5rem; font-size: 0.82rem; color: var(--ink);
}
.ap-detail-full { grid-column: 1 / -1; }
.ap-detail-label {
display: block; font-size: 0.62rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.06em;
color: var(--muted); margin-bottom: 0.1rem;
}
/* ── Student drawer (slide-out) — neumorphic ─── */
.ap-drawer-backdrop {
position: fixed; inset: 0; z-index: 1500;
background: rgba(10,18,40,0.4); backdrop-filter: blur(3px);
animation: dlg-fade-in 0.15s var(--ease);
}
.ap-drawer-backdrop.closing {
animation: dlg-fade-out 0.2s var(--ease) forwards;
}
@keyframes dlg-fade-out { to { opacity: 0; } }
.ap-drawer {
position: fixed; top: 0; bottom: 0; z-index: 1501;
inset-inline-end: 0; width: 420px; max-width: 92vw;
background: var(--bg);
box-shadow: -12px 0 40px rgba(163,177,198,0.4), 4px 0 16px rgba(255,255,255,0.6);
overflow-y: auto; padding: 1.5rem;
animation: ap-drawer-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
[dir="rtl"] .ap-drawer {
box-shadow: 12px 0 40px rgba(163,177,198,0.4), -4px 0 16px rgba(255,255,255,0.6);
}
.ap-drawer.closing {
animation: ap-drawer-out 0.2s var(--ease) forwards;
}
@keyframes ap-drawer-in {
from { transform: translateX(100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
[dir="rtl"] @keyframes ap-drawer-in {
from { transform: translateX(-100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes ap-drawer-out {
from { transform: translateX(0); opacity: 1; }
to { transform: translateX(100%); opacity: 0; }
}
[dir="rtl"] @keyframes ap-drawer-out {
from { transform: translateX(0); opacity: 1; }
to { transform: translateX(-100%); opacity: 0; }
}
.ap-drawer-close {
position: absolute; top: 0.75rem; inset-inline-end: 0.75rem;
width: 36px; height: 36px; border-radius: 50%; border: none;
background: var(--bg);
box-shadow: 3px 3px 7px rgba(163,177,198,0.35), -3px -3px 7px rgba(255,255,255,0.7);
cursor: pointer; display: flex;
align-items: center; justify-content: center; font-size: 0.85rem;
color: var(--muted); transition: all 0.15s var(--ease);
}
.ap-drawer-close:hover {
box-shadow: inset 2px 2px 5px rgba(163,177,198,0.35), inset -2px -2px 5px rgba(255,255,255,0.7);
color: var(--danger);
}
.ap-drawer-close:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ap-drawer-name { font-size: 1.25rem; font-weight: 700; color: var(--navy); margin-bottom: 0.15rem; }
.ap-drawer-id {
font-family: var(--font-mono); font-size: 0.82rem; color: var(--muted);
margin-bottom: 0.75rem;
}
.ap-drawer-id-pill {
background: var(--teal-dim); padding: 4px 10px; border-radius: 8px;
display: inline-block;
}
.ap-drawer-section {
margin-bottom: 0.75rem;
background: var(--glass-bg); border-radius: 12px; padding: 12px 14px;
box-shadow: inset 2px 2px 5px rgba(163,177,198,0.2), inset -2px -2px 5px rgba(255,255,255,0.7);
}
/* .ap-drawer-section-title base styling handled by canonical heading rule.
Keep ::before shape definition — hidden by default, could be re-enabled
for variants in future. */
.ap-drawer-section-title::before {
content: ""; width: 3px; height: 0.7rem; border-radius: 2px;
background: var(--teal); opacity: 1;
}
.ap-drawer-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem; }
.ap-drawer-kv-item { font-size: 0.88rem; }
.ap-drawer-kv-item strong { color: var(--navy); }
.ap-drawer-kv-label {
font-size: 0.65rem; font-weight: 700; color: var(--muted);
text-transform: uppercase; letter-spacing: 0.05em;
}
/* HP Missing table inside drawer — neumorphic inset */
.ap-drawer-section .table-wrap {
background: var(--glass-bg); border-radius: 10px;
box-shadow: inset 2px 2px 5px rgba(163,177,198,0.15), inset -2px -2px 5px rgba(255,255,255,0.5);
overflow: hidden;
}
.ap-drawer-section .table-wrap table {
margin-bottom: 0;
}
.ap-drawer-section .table-wrap th {
font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.05em; color: var(--muted); background: rgba(232,236,241,0.5);
border-bottom: 1px solid rgba(163,177,198,0.2);
}
.ap-drawer-section .table-wrap td {
font-size: 0.82rem; border-bottom: 1px solid rgba(163,177,198,0.12);
}
.ap-drawer-actions {
display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.75rem;
padding-top: 0.75rem; border-top: none;
}
.ap-drawer-actions .btn,
.ap-drawer-actions a.btn {
border-radius: 999px; border: none; padding: 6px 14px;
font-size: 0.78rem; font-weight: 600; transition: all 0.15s var(--ease);
}
.ap-drawer-actions .btn-outline-primary,
.ap-drawer-actions a.btn-outline-primary {
background: var(--teal); color: #fff; border: none;
box-shadow: 3px 3px 7px rgba(163,177,198,0.35), -3px -3px 7px rgba(255,255,255,0.7);
}
.ap-drawer-actions .btn-outline-primary:hover,
.ap-drawer-actions a.btn-outline-primary:hover {
box-shadow: inset 2px 2px 5px rgba(8,110,85,0.25), inset -2px -2px 5px rgba(12,170,130,0.15);
background: var(--brand-dark);
}
.ap-drawer-actions .btn-export {
background: var(--bg); color: var(--t1); border: none;
box-shadow: 3px 3px 7px rgba(163,177,198,0.35), -3px -3px 7px rgba(255,255,255,0.7);
}
.ap-drawer-actions .btn-export:hover {
box-shadow: inset 2px 2px 5px rgba(163,177,198,0.35), inset -2px -2px 5px rgba(255,255,255,0.7);
}
.ap-drawer-actions .btn:focus-visible,
.ap-drawer-actions a.btn:focus-visible {
outline: 2px solid var(--brand); outline-offset: 2px;
}
/* Row count / pagination: using global .pg-bar, .pg-btn */
/* ── Empty state ─── */
.ap-empty { text-align: center; padding: 2.5rem 1.5rem; color: var(--t5); }
.ap-empty-icon { display: block; font-size: 2.2rem; margin-bottom: 0.5rem; opacity: 0.6; }
.ap-empty-title { font-weight: 600; font-size: 0.9rem; color: var(--t4); margin-bottom: 0.3rem; }
.ap-empty-hint { font-size: 0.78rem; color: var(--t5); }
/* Override: remove default table styling on tbl-card */
/* Mobile: always show row actions & checkboxes */
@media (max-width: 768px) {
.ap-drawer { width: 100vw; max-width: 100vw; padding: 1.25rem; }
.ap-metrics { grid-template-columns: repeat(2, 1fr); }
}
/* ═══════════════════════════════════════════════════════════
DARK MODE — Deep Navy overrides
Selector: html[data-theme="dark"]
═══════════════════════════════════════════════════════════ */
html[data-theme="dark"] .ap-insight-danger {
background: rgba(220,38,38,0.1);
color: #f8a0a8;
border-color: rgba(220,38,38,0.25);
}
html[data-theme="dark"] .ap-insight-warn {
background: rgba(245,158,11,0.1);
color: #f5a060;
border-color: rgba(245,158,11,0.25);
}
html[data-theme="dark"] .ap-insight-info {
background: rgba(10,142,110,0.12);
color: #5ee8b7;
border-color: rgba(10,142,110,0.25);
}
/* Program pills */
html[data-theme="dark"] .ap-prog-pill {
background: rgba(64,86,227,0.12);
color: #8b8fff;
border-color: rgba(139,143,255,0.25);
}
html[data-theme="dark"] .ap-prog-pill .ap-prog-n {
background: rgba(139,143,255,0.12);
}
/* Detail row */
html[data-theme="dark"] .ap-detail-row td {
background: rgba(255,255,255,0.04) !important;
border-top-color: rgba(255,255,255,0.06) !important;
}
/* Drawer — neumorphic overrides */
html[data-theme="dark"] .ap-drawer {
background: #151826;
box-shadow: -12px 0 40px rgba(0,0,0,0.5), 4px 0 16px rgba(255,255,255,0.02);
}
html[data-theme="dark"] [dir="rtl"] .ap-drawer {
box-shadow: 12px 0 40px rgba(0,0,0,0.5), -4px 0 16px rgba(255,255,255,0.02);
}
html[data-theme="dark"] .ap-drawer-close {
background: #1a1e30;
box-shadow: 3px 3px 7px rgba(0,0,0,0.4), -3px -3px 7px rgba(255,255,255,0.03);
color: #a0a4b8;
}
html[data-theme="dark"] .ap-drawer-close:hover {
box-shadow: inset 2px 2px 5px rgba(0,0,0,0.4), inset -2px -2px 5px rgba(255,255,255,0.03);
color: #f87171;
}
html[data-theme="dark"] .ap-drawer-name {
color: #e2e4ec;
}
html[data-theme="dark"] .ap-drawer-id {
color: #a0a4b8;
}
html[data-theme="dark"] .ap-drawer-id-pill {
background: rgba(10,142,110,0.12);
}
html[data-theme="dark"] .ap-drawer-section {
background: rgba(255,255,255,0.04);
box-shadow: inset 2px 2px 5px rgba(0,0,0,0.25), inset -2px -2px 5px rgba(255,255,255,0.02);
}
html[data-theme="dark"] .ap-drawer-kv-item strong {
color: #e2e4ec;
}
/* Drawer table wrap */
html[data-theme="dark"] .ap-drawer-section .table-wrap {
background: rgba(255,255,255,0.04);
box-shadow: inset 2px 2px 5px rgba(0,0,0,0.2), inset -2px -2px 5px rgba(255,255,255,0.02);
}
html[data-theme="dark"] .ap-drawer-section .table-wrap th {
background: rgba(255,255,255,0.04);
border-bottom-color: rgba(255,255,255,0.06);
}
/* Drawer action buttons — neumorphic flip */
html[data-theme="dark"] .ap-drawer-actions .btn-outline-primary,
html[data-theme="dark"] .ap-drawer-actions a.btn-outline-primary {
box-shadow: 3px 3px 7px rgba(0,0,0,0.4), -3px -3px 7px rgba(255,255,255,0.03);
}
html[data-theme="dark"] .ap-drawer-actions .btn-outline-primary:hover,
html[data-theme="dark"] .ap-drawer-actions a.btn-outline-primary:hover {
box-shadow: inset 2px 2px 5px rgba(0,0,0,0.35), inset -2px -2px 5px rgba(12,170,130,0.08);
}
html[data-theme="dark"] .ap-drawer-actions .btn-export {
background: #1a1e30;
color: #e2e4ec;
box-shadow: 3px 3px 7px rgba(0,0,0,0.4), -3px -3px 7px rgba(255,255,255,0.03);
}
html[data-theme="dark"] .ap-drawer-actions .btn-export:hover {
box-shadow: inset 2px 2px 5px rgba(0,0,0,0.4), inset -2px -2px 5px rgba(255,255,255,0.03);
}
/* Batch bar */
html[data-theme="dark"] .ap-batch-bar {
background: rgba(10,142,110,0.12);
border-color: rgba(10,142,110,0.25);
color: #5ee8b7;
}
/* Empty state */
html[data-theme="dark"] .ap-empty { color: #7a7e92; }
html[data-theme="dark"] .ap-empty-title { color: #a0a4b8; }
html[data-theme="dark"] .ap-empty-hint { color: #7a7e92; }
/* ============================================================
LOGIN — feature-specific styles
------------------------------------------------------------
Moved out of core/templates/core/login.html.
Scoped with body:has(.login-wrap) so these rules only affect
the login page — prior version leaked body{display:flex} to
every page and collapsed shell width on narrow-content screens.
============================================================ */
body:has(.login-wrap) {
display: flex; align-items: center; justify-content: center;
min-height: 100vh; margin: 0;
background: #e4e9ed;
font-family: 'Inter', 'Noto Kufi Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.login-wrap {
width: 100%; max-width: 420px; padding: 1.5rem;
animation: login-fade-up 0.5s var(--ease) both;
}
.telegram-link-wrap {
max-width: 720px;
box-sizing: border-box;
}
@keyframes login-fade-up {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* ─── Neumorphic card ─── */
.login-card {
background: #e4e9ed;
border-radius: 24px;
padding: 2.5rem 2rem 2rem;
box-shadow:
8px 8px 20px rgba(163,177,198,0.6),
-8px -8px 20px rgba(255,255,255,0.8);
overflow: hidden;
}
.telegram-link-card {
width: 100%;
}
.telegram-link-card--result {
max-width: 640px;
margin-inline: auto;
}
/* ─── Avatar circle ─── */
.login-avatar {
width: 80px; height: 80px;
border-radius: 50%;
margin: 0 auto 1.5rem;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--teal), var(--sky), var(--royal));
box-shadow:
6px 6px 14px rgba(163,177,198,0.5),
-6px -6px 14px rgba(255,255,255,0.7),
0 0 0 6px #e4e9ed;
position: relative;
}
.login-avatar svg {
width: 36px; height: 36px;
stroke: #fff; stroke-width: 1.8;
fill: none; stroke-linecap: round; stroke-linejoin: round;
}
/* ─── Title & subtitle ─── */
.login-title {
font-size: 1.5rem; font-weight: 700;
color: var(--t1); text-align: center;
margin-bottom: 0.3rem; letter-spacing: -0.02em;
}
.login-sub {
font-size: 0.85rem; color: var(--t4);
text-align: center; margin-bottom: 2rem;
}
/* ─── Neumorphic input groups ─── */
.neu-input-group {
display: flex; align-items: center; gap: 0.75rem;
background: #e4e9ed;
border-radius: 14px;
padding: 0 1rem;
box-shadow:
inset 4px 4px 8px rgba(163,177,198,0.45),
inset -4px -4px 8px rgba(255,255,255,0.7);
margin-bottom: 1.25rem;
transition: box-shadow 0.25s var(--ease);
}
.neu-input-group:focus-within {
box-shadow:
inset 4px 4px 8px rgba(163,177,198,0.45),
inset -4px -4px 8px rgba(255,255,255,0.7),
0 0 0 2px color-mix(in srgb, var(--teal) 50%, transparent);
}
.neu-input-group .neu-icon {
flex-shrink: 0;
width: 20px; height: 20px;
stroke: var(--t4); stroke-width: 2;
fill: none; stroke-linecap: round; stroke-linejoin: round;
transition: stroke 0.2s;
}
.neu-input-group:focus-within .neu-icon {
stroke: var(--teal);
}
.neu-input-group input {
flex: 1; min-width: 0;
border: none !important;
outline: none !important;
box-shadow: none !important;
background: transparent !important;
background-color: transparent !important;
padding: 0.6rem 0;
font-size: 0.95rem; color: var(--t1);
font-family: inherit;
}
.neu-input-group input:focus {
border: none !important;
outline: none !important;
box-shadow: none !important;
background: transparent !important;
}
/* Autofill: delay bg-color change forever so Chrome never paints it */
.neu-input-group input:-webkit-autofill,
.neu-input-group input:-webkit-autofill:hover,
.neu-input-group input:-webkit-autofill:focus,
.neu-input-group input:-webkit-autofill:active {
-webkit-text-fill-color: #2d3748 !important;
caret-color: #2d3748;
transition: background-color 9999s ease-in-out 0s,
color 9999s ease-in-out 0s !important;
}
.neu-input-group input::-ms-reveal,
.neu-input-group input::-ms-clear,
.neu-input-group input::-webkit-credentials-auto-fill-button {
display: none !important;
}
.neu-input-group input::placeholder {
color: var(--t5);
-webkit-text-fill-color: var(--t5);
opacity: 1;
}
/* ─── Pill button (login) ─── */
.neu-btn {
width: 100%;
border: none; outline: none; cursor: pointer;
background: var(--teal);
color: #fff;
font-size: 0.78rem; font-weight: 700;
font-family: inherit;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 0.7rem 1.5rem;
border-radius: 999px;
margin-top: 0.5rem;
box-shadow:
3px 3px 7px rgba(163,177,198,0.28),
-3px -3px 7px rgba(255,255,255,0.7);
transition: all 0.25s var(--ease);
position: relative; overflow: hidden;
}
.neu-btn:hover {
background: var(--teal-bright);
box-shadow:
4px 4px 10px rgba(163,177,198,0.32),
-4px -4px 10px rgba(255,255,255,0.8);
}
.neu-btn:active {
background: var(--teal-deep);
transform: translateY(0);
box-shadow:
inset 3px 3px 7px color-mix(in srgb, var(--teal) 30%, transparent),
inset -3px -3px 7px rgba(255,255,255,0.15);
}
/* ─── Divider dots ─── */
.login-dots {
display: flex; justify-content: center; gap: 6px;
margin-bottom: 1.75rem;
}
.login-dots span {
width: 6px; height: 6px; border-radius: 50%;
background: linear-gradient(135deg, var(--teal), var(--sky), var(--royal));
opacity: 0.5;
}
.login-dots span:nth-child(2) { opacity: 0.75; }
.login-dots span:nth-child(3) { opacity: 1; }
/* ─── Alert ─── */
.login-alert {
background: rgba(220, 53, 69, 0.08);
color: var(--danger);
border-radius: 10px; padding: 0.6rem 1rem;
font-size: 0.85rem; margin-bottom: 1.25rem;
text-align: center;
}
/* ─── Language select ─── */
.login-lang {
text-align: center; margin-top: 1.5rem;
}
.login-lang select {
border: none; outline: none; cursor: pointer;
background: #e4e9ed;
border-radius: 10px;
padding: 0.45rem 2rem 0.45rem 0.8rem;
font-size: 0.8rem; color: var(--t4);
font-family: inherit;
box-shadow:
3px 3px 8px rgba(163,177,198,0.4),
-3px -3px 8px rgba(255,255,255,0.65);
transition: box-shadow 0.2s;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238492a6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.6rem center;
background-size: 12px;
}
[dir="rtl"] .login-lang select {
padding: 0.45rem 0.8rem 0.45rem 2rem;
background-position: left 0.6rem center;
}
.login-lang select:focus {
box-shadow:
inset 2px 2px 4px rgba(163,177,198,0.35),
inset -2px -2px 4px rgba(255,255,255,0.6);
}
/* ─── Password visibility toggle ─── */
.pw-toggle {
flex-shrink: 0;
background: none; border: none; outline: none; cursor: pointer;
color: var(--t4); padding: 4px;
display: flex; align-items: center; justify-content: center;
border-radius: 6px;
transition: color 0.2s, background 0.2s;
}
.pw-toggle:hover { color: var(--teal); background: color-mix(in srgb, var(--teal) 8%, transparent); }
.pw-toggle:focus-visible {
outline: 2px solid var(--teal); outline-offset: 1px;
}
/* ─── RTL adjustments ─── */
[dir="rtl"] .neu-input-group { flex-direction: row-reverse; }
/* ─── Button loading state ─── */
.neu-btn:disabled {
opacity: 0.6; cursor: not-allowed;
box-shadow: inset 3px 3px 7px rgba(163,177,198,0.3),
inset -3px -3px 7px rgba(255,255,255,0.7);
}
/* ─── Login spinner ─── */
.neu-btn-spinner {
display: none;
width: 16px; height: 16px;
border: 2px solid rgba(255,255,255,0.3);
border-top-color: #fff;
border-radius: 50%;
animation: neu-spin 0.6s linear infinite;
vertical-align: middle;
}
.neu-btn.is-loading .neu-btn-spinner { display: inline-block; }
.neu-btn.is-loading .neu-btn-text { opacity: 0.6; }
@keyframes neu-spin { to { transform: rotate(360deg); } }
/* ─── Better focus ring for login inputs ─── */
.neu-input-group input:focus-visible {
outline: none !important;
box-shadow: none !important;
}
.neu-btn:focus-visible {
outline: 2px solid var(--teal);
outline-offset: 3px;
box-shadow: 0 0 0 4px var(--brand-glow),
3px 3px 7px rgba(163,177,198,0.28),
-3px -3px 7px rgba(255,255,255,0.7);
}
/* ─── Alert icon ─── */
.login-alert {
display: flex; align-items: center; gap: 0.5rem; justify-content: center;
}
.login-alert::before {
content: ''; display: inline-block;
width: 6px; height: 6px; border-radius: 50%;
background: var(--danger); box-shadow: 0 0 4px var(--danger);
flex-shrink: 0;
}
/* ─── Student OTP resend cooldown ─── */
.otp-resend-block {
margin-top: 1.25rem;
padding-top: 1rem;
border-top: 1px solid color-mix(in srgb, var(--t4) 18%, transparent);
text-align: center;
}
.otp-resend-hint {
margin: 0 0 0.7rem;
color: var(--t4);
font-size: 0.82rem;
line-height: 1.75;
}
.otp-resend-form { margin: 0; }
.otp-resend-btn {
margin-top: 0;
background: transparent;
color: var(--teal-deep);
border: 1px solid color-mix(in srgb, var(--teal) 45%, transparent);
box-shadow: 2px 2px 6px rgba(163,177,198,0.24),
-2px -2px 6px rgba(255,255,255,0.65);
text-transform: none;
letter-spacing: 0;
}
.otp-resend-btn:hover:not(:disabled) {
color: #fff;
background: var(--teal);
}
.otp-resend-btn:disabled {
color: var(--t4);
background: color-mix(in srgb, var(--t4) 5%, transparent);
}
.otp-resend-countdown {
min-height: 1.45rem;
margin: 0.55rem 0 0;
color: var(--t4);
font-size: 0.75rem;
line-height: 1.6;
}
.otp-request-limit {
margin-top: 1rem;
margin-bottom: 1.25rem;
line-height: 1.75;
}
.otp-delivery-notice {
line-height: 1.75;
}
/* ─── Login card hover lift ─── */
.login-card {
transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.login-card:hover {
box-shadow: 10px 10px 24px rgba(163,177,198,0.55),
-10px -10px 24px rgba(255,255,255,0.85);
}
/* ─── Responsive: mobile ─── */
@media (max-width: 480px) {
.login-wrap { padding: 1rem; }
.login-card { padding: 2rem 1.5rem 1.5rem; border-radius: 20px; }
.login-avatar { width: 64px; height: 64px; }
.login-avatar svg { width: 28px; height: 28px; }
.login-title { font-size: 1.25rem; }
.login-dots { margin-bottom: 1rem; }
}
@media (max-width: 360px) {
.login-dots { display: none; }
}
/* ============================================================
DARK MODE — Login page overrides
============================================================ */
html[data-theme="dark"] body {
background: #0d0f1a !important;
color: #e2e4ec !important;
}
html[data-theme="dark"] .login-card {
background: rgba(255,255,255,0.04);
box-shadow:
8px 8px 20px rgba(0,0,0,0.5),
-8px -8px 20px rgba(255,255,255,0.03);
}
html[data-theme="dark"] .login-card:hover {
box-shadow:
10px 10px 24px rgba(0,0,0,0.55),
-10px -10px 24px rgba(255,255,255,0.04);
}
html[data-theme="dark"] .login-avatar {
box-shadow:
6px 6px 14px rgba(0,0,0,0.4),
-6px -6px 14px rgba(255,255,255,0.03),
0 0 0 6px rgba(255,255,255,0.04);
}
html[data-theme="dark"] .login-title {
color: #e2e4ec;
}
html[data-theme="dark"] .login-sub {
color: #a0a4b8;
}
html[data-theme="dark"] .neu-input-group {
background: rgba(255,255,255,0.05);
box-shadow:
inset 4px 4px 8px rgba(0,0,0,0.35),
inset -4px -4px 8px rgba(255,255,255,0.03);
}
html[data-theme="dark"] .neu-input-group:focus-within {
box-shadow:
inset 4px 4px 8px rgba(0,0,0,0.35),
inset -4px -4px 8px rgba(255,255,255,0.03),
0 0 0 2px rgba(10,142,110,0.5);
}
html[data-theme="dark"] .neu-input-group .neu-icon {
stroke: #a0a4b8;
}
html[data-theme="dark"] .neu-input-group input {
color: #e2e4ec;
}
html[data-theme="dark"] .neu-input-group input::placeholder {
color: #505468;
-webkit-text-fill-color: #505468;
}
html[data-theme="dark"] .neu-input-group input:-webkit-autofill,
html[data-theme="dark"] .neu-input-group input:-webkit-autofill:hover,
html[data-theme="dark"] .neu-input-group input:-webkit-autofill:focus,
html[data-theme="dark"] .neu-input-group input:-webkit-autofill:active {
-webkit-text-fill-color: #e2e4ec !important;
caret-color: #e2e4ec;
}
html[data-theme="dark"] .neu-btn {
box-shadow:
3px 3px 7px rgba(0,0,0,0.35),
-3px -3px 7px rgba(255,255,255,0.03);
}
html[data-theme="dark"] .neu-btn:hover {
box-shadow:
4px 4px 10px rgba(0,0,0,0.4),
-4px -4px 10px rgba(255,255,255,0.04);
}
html[data-theme="dark"] .neu-btn:active {
box-shadow:
inset 3px 3px 7px rgba(10,142,110,0.3),
inset -3px -3px 7px rgba(0,0,0,0.15);
}
html[data-theme="dark"] .neu-btn:disabled {
box-shadow:
inset 3px 3px 7px rgba(0,0,0,0.3),
inset -3px -3px 7px rgba(255,255,255,0.03);
}
html[data-theme="dark"] .neu-btn:focus-visible {
box-shadow:
0 0 0 4px rgba(10,142,110,0.18),
3px 3px 7px rgba(0,0,0,0.35),
-3px -3px 7px rgba(255,255,255,0.03);
}
html[data-theme="dark"] .login-dots span {
opacity: 0.25;
}
html[data-theme="dark"] .login-dots span:nth-child(2) { opacity: 0.4; }
html[data-theme="dark"] .login-dots span:nth-child(3) { opacity: 0.55; }
html[data-theme="dark"] .login-alert {
background: rgba(220, 53, 69, 0.15);
}
html[data-theme="dark"] .otp-resend-block {
border-top-color: rgba(255,255,255,0.1);
}
html[data-theme="dark"] .otp-resend-btn {
color: #5ee8b7;
border-color: rgba(94,232,183,0.35);
box-shadow: 2px 2px 6px rgba(0,0,0,0.3),
-2px -2px 6px rgba(255,255,255,0.025);
}
html[data-theme="dark"] .otp-resend-btn:hover:not(:disabled) {
color: #fff;
background: var(--teal);
}
html[data-theme="dark"] .otp-resend-btn:disabled {
color: #7a7e92;
background: rgba(255,255,255,0.025);
}
html[data-theme="dark"] .login-lang select {
background-color: rgba(255,255,255,0.05);
color: #a0a4b8;
box-shadow:
3px 3px 8px rgba(0,0,0,0.35),
-3px -3px 8px rgba(255,255,255,0.03);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a0a4b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
html[data-theme="dark"] .login-lang select:focus {
box-shadow:
inset 2px 2px 4px rgba(0,0,0,0.3),
inset -2px -2px 4px rgba(255,255,255,0.03);
}
html[data-theme="dark"] .login-lang select option {
background: #151826;
color: #e2e4ec;
}
html[data-theme="dark"] .pw-toggle {
color: #a0a4b8;
}
html[data-theme="dark"] .pw-toggle:hover {
color: var(--teal);
background: rgba(10,142,110,0.12);
}
/* ─── Login theme toggle button (bottom-right corner) ─── */
.login-theme-toggle {
position: fixed;
bottom: 1.25rem;
right: 1.25rem;
width: 40px; height: 40px;
border-radius: 50%;
border: none; outline: none; cursor: pointer;
display: flex; align-items: center; justify-content: center;
background: #e4e9ed;
box-shadow:
3px 3px 8px rgba(163,177,198,0.5),
-3px -3px 8px rgba(255,255,255,0.7);
color: var(--t4);
transition: all 0.25s var(--ease);
z-index: 100;
}
.login-theme-toggle:hover {
color: var(--t1);
box-shadow:
4px 4px 10px rgba(163,177,198,0.55),
-4px -4px 10px rgba(255,255,255,0.75);
}
.login-theme-toggle:focus-visible {
outline: 2px solid var(--teal);
outline-offset: 3px;
}
[dir="rtl"] .login-theme-toggle {
right: auto;
left: 1.25rem;
}
html[data-theme="dark"] .login-theme-toggle {
background: rgba(255,255,255,0.06);
box-shadow:
3px 3px 8px rgba(0,0,0,0.4),
-3px -3px 8px rgba(255,255,255,0.03);
color: #a0a4b8;
}
html[data-theme="dark"] .login-theme-toggle:hover {
color: #F5B731;
background: rgba(255,255,255,0.1);
}
/* Icon visibility driven by theme */
.login-theme-toggle .lt-icon-light { display: inline; }
.login-theme-toggle .lt-icon-dark { display: none; }
html[data-theme="dark"] .login-theme-toggle .lt-icon-light { display: none; }
html[data-theme="dark"] .login-theme-toggle .lt-icon-dark { display: inline; }
/* ============================================================
PROFILE — feature-specific styles
------------------------------------------------------------
Moved out of core/templates/core/profile.html.
============================================================ */
/* ═══════════════════════════════════════════════════════════
PROFILE PAGE — Self-service credential management
═══════════════════════════════════════════════════════════ */
.pf-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
max-width: 860px;
}
@media (max-width: 768px) {
.pf-grid { grid-template-columns: 1fr; }
}
/* Profile info card */
.pf-info-card {
grid-column: 1 / -1;
display: flex; align-items: center; gap: 1.25rem;
padding: 1.25rem 1.5rem;
border-radius: 14px;
background: rgba(255,255,255,0.45);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: none;
box-shadow: 5px 5px 14px rgba(163,177,198,0.28),
-5px -5px 14px rgba(255,255,255,0.8);
transition: box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.pf-info-card:hover {
box-shadow: 7px 7px 18px rgba(163,177,198,0.35),
-7px -7px 18px rgba(255,255,255,0.9);
}
.pf-avatar {
width: 64px; height: 64px; border-radius: 14px;
background: linear-gradient(135deg, var(--brand), var(--teal-bright));
display: flex; align-items: center; justify-content: center;
font-size: 1.5rem; font-weight: 800; color: #fff;
letter-spacing: 0.02em; flex-shrink: 0;
}
.pf-details { flex: 1; min-width: 0; }
.pf-username {
font-size: 1.15rem; font-weight: 700; color: var(--ink);
margin-bottom: 0.2rem; word-break: break-word;
}
.pf-meta { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.pf-badge {
display: inline-flex; align-items: center; gap: 0.25rem;
padding: 0.18rem 0.6rem; border-radius: 999px;
font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.04em;
}
.pf-badge-role { background: #ecf9f4; color: var(--teal-deep); border: 1px solid #a8e6d4; }
.pf-badge-dept { background: #eef2ff; color: #3b3fa0; border: 1px solid #c7d2fe; }
/* Form cards */
.pf-card {
padding: 1.25rem 1.5rem;
border-radius: 14px;
background: rgba(255,255,255,0.45);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: none;
box-shadow: 5px 5px 14px rgba(163,177,198,0.28),
-5px -5px 14px rgba(255,255,255,0.8);
transition: box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.pf-card:hover {
box-shadow: 7px 7px 18px rgba(163,177,198,0.35),
-7px -7px 18px rgba(255,255,255,0.9);
}
/* .pf-card-title base styling handled by canonical card-heading rule.
Only the inline icon size lives here. */
.pf-card-title .i { width: 18px; height: 18px; color: var(--muted); }
.pf-field { margin-bottom: 0.85rem; }
.pf-field:last-of-type { margin-bottom: 1rem; }
.pf-label {
display: block; font-size: 0.75rem; font-weight: 600;
color: var(--muted); margin-bottom: 0.3rem;
letter-spacing: 0.03em;
}
.pf-input {
width: 100%; box-sizing: border-box; padding: 0.6rem 0.85rem;
border-radius: 12px; border: none;
background: transparent;
font-size: 0.88rem; color: var(--ink);
font-family: inherit;
box-shadow: inset 3px 3px 6px rgba(163,177,198,0.35),
inset -3px -3px 6px rgba(255,255,255,0.9);
transition: box-shadow 0.2s var(--ease);
outline: none;
}
.pf-input:focus {
outline: none;
box-shadow: inset 3px 3px 6px rgba(163,177,198,0.35),
inset -3px -3px 6px rgba(255,255,255,0.9),
0 0 0 2px color-mix(in srgb, var(--teal) 50%, transparent);
}
.pf-input::placeholder { color: var(--muted-light); }
/* Password field wrapper — border lives on the wrapper so the eye
toggle sits visually *inside* the rounded container. */
.pf-pwd-wrap {
position: relative;
border-radius: 12px;
border: none;
background: transparent;
box-shadow: inset 3px 3px 6px rgba(163,177,198,0.35),
inset -3px -3px 6px rgba(255,255,255,0.9);
transition: box-shadow 0.2s var(--ease);
}
.pf-pwd-wrap:focus-within {
box-shadow: inset 3px 3px 6px rgba(163,177,198,0.35),
inset -3px -3px 6px rgba(255,255,255,0.9),
0 0 0 2px color-mix(in srgb, var(--teal) 50%, transparent);
}
.pf-pwd-wrap .pf-input {
padding-inline-end: 2.5rem;
border: none; background: transparent;
box-shadow: none;
}
.pf-pwd-wrap .pf-input:focus { outline: none; box-shadow: none; }
.pf-pwd-toggle {
position: absolute; inset-inline-end: 0.5rem; top: 50%; transform: translateY(-50%);
background: none; border: none; cursor: pointer; padding: 0.25rem;
color: var(--muted); border-radius: 6px;
display: flex; align-items: center; justify-content: center;
transition: color 0.15s;
}
.pf-pwd-toggle:hover { color: var(--ink); }
.pf-pwd-toggle .i { width: 18px; height: 18px; }
.pf-pwd-toggle .pf-eye-off { display: none; }
.pf-pwd-toggle.showing .pf-eye-on { display: none; }
.pf-pwd-toggle.showing .pf-eye-off { display: block; }
.pf-hint {
font-size: 0.7rem; color: var(--muted-light);
margin-top: 0.25rem;
}
.pf-submit {
display: inline-flex; align-items: center; gap: 0.4rem;
padding: 0.55rem 1.5rem; border-radius: 12px; border: none;
font-size: 0.82rem; font-weight: 700; cursor: pointer;
transition: all 0.2s var(--ease);
box-shadow: var(--shadow-neu-sm);
}
.pf-submit:focus-visible {
outline: 2px solid var(--brand);
outline-offset: 2px;
}
.pf-submit-primary {
background: var(--teal); color: #fff;
box-shadow: 0 2px 8px color-mix(in srgb, var(--teal) 25%, transparent);
}
.pf-submit-primary:hover {
background: #07775d; color: #fff;
box-shadow: 0 4px 12px color-mix(in srgb, var(--teal) 35%, transparent);
}
.pf-submit-primary:active {
background: #045a3e; color: #fff;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.15);
}
.pf-submit-primary:disabled {
opacity: 0.5; cursor: not-allowed; color: #fff;
box-shadow: 2px 2px 5px rgba(163,177,198,0.15),
-2px -2px 5px rgba(255,255,255,0.5);
}
.pf-submit .pf-spinner {
display: none; width: 14px; height: 14px;
border: 2px solid rgba(255,255,255,0.3);
border-top-color: #fff; border-radius: 50%;
animation: pf-spin 0.6s linear infinite;
}
.pf-submit.loading .pf-spinner { display: inline-block; }
.pf-submit.loading .pf-btn-text { opacity: 0.7; }
@keyframes pf-spin { to { transform: rotate(360deg); } }
/* Success animation */
.pf-card.pf-saved {
animation: pf-flash 0.6s var(--ease);
}
@keyframes pf-flash {
0% { box-shadow: 5px 5px 14px rgba(163,177,198,0.28), -5px -5px 14px rgba(255,255,255,0.8); }
40% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 20%, transparent), 5px 5px 14px rgba(163,177,198,0.28), -5px -5px 14px rgba(255,255,255,0.8); }
100% { box-shadow: 5px 5px 14px rgba(163,177,198,0.28), -5px -5px 14px rgba(255,255,255,0.8); }
}
/* ── Password strength indicator ── */
.pf-pw-strength {
margin-top: 0.35rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.pf-pw-bar-track {
flex: 1;
height: 4px;
border-radius: 2px;
background: var(--pl-overlay-4);
overflow: hidden;
}
.pf-pw-bar {
height: 100%;
width: 0%;
border-radius: 2px;
transition: width 0.3s var(--ease), background 0.3s var(--ease);
background: var(--danger);
}
.pf-pw-bar[data-level="1"] { width: 25%; background: var(--danger); }
.pf-pw-bar[data-level="2"] { width: 50%; background: #dd6b20; }
.pf-pw-bar[data-level="3"] { width: 75%; background: var(--warning); }
.pf-pw-bar[data-level="4"] { width: 100%; background: var(--success); }
.pf-pw-label {
font-size: 0.68rem;
font-weight: 600;
min-width: 3rem;
color: var(--muted-light);
text-align: end;
}
/* ═══════════════════════════════════════════════════════════
DARK MODE — Deep Navy overrides
html[data-theme="dark"]
═══════════════════════════════════════════════════════════ */
/* Info card + form cards: glass bg → dark glass, neumorphic → dark shadows */
html[data-theme="dark"] .pf-info-card {
background: rgba(255,255,255,0.04);
box-shadow: 5px 5px 14px rgba(0,0,0,0.4),
-5px -5px 14px rgba(255,255,255,0.02);
}
html[data-theme="dark"] .pf-info-card:hover {
box-shadow: 7px 7px 18px rgba(0,0,0,0.5),
-7px -7px 18px rgba(255,255,255,0.03);
}
html[data-theme="dark"] .pf-card {
background: rgba(255,255,255,0.04);
box-shadow: 5px 5px 14px rgba(0,0,0,0.4),
-5px -5px 14px rgba(255,255,255,0.02);
}
html[data-theme="dark"] .pf-card:hover {
box-shadow: 7px 7px 18px rgba(0,0,0,0.5),
-7px -7px 18px rgba(255,255,255,0.03);
}
/* Badge backgrounds */
html[data-theme="dark"] .pf-badge-role {
background: rgba(10,142,110,0.12);
color: #2ec9a0;
border-color: rgba(10,142,110,0.25);
}
html[data-theme="dark"] .pf-badge-dept {
background: rgba(64,86,227,0.12);
color: #8b9cf7;
border-color: rgba(64,86,227,0.25);
}
/* Inputs: inset neumorphic → dark inset shadows */
html[data-theme="dark"] .pf-input {
color: #e2e4ec;
box-shadow: inset 3px 3px 6px rgba(0,0,0,0.45),
inset -3px -3px 6px rgba(255,255,255,0.03);
}
html[data-theme="dark"] .pf-input:focus {
box-shadow: inset 3px 3px 6px rgba(0,0,0,0.45),
inset -3px -3px 6px rgba(255,255,255,0.03),
0 0 0 2px rgba(12,168,126,0.5);
}
html[data-theme="dark"] .pf-input::placeholder {
color: #7a7e92;
}
/* Password field wrapper: inset neumorphic → dark inset shadows */
html[data-theme="dark"] .pf-pwd-wrap {
box-shadow: inset 3px 3px 6px rgba(0,0,0,0.45),
inset -3px -3px 6px rgba(255,255,255,0.03);
}
html[data-theme="dark"] .pf-pwd-wrap:focus-within {
box-shadow: inset 3px 3px 6px rgba(0,0,0,0.45),
inset -3px -3px 6px rgba(255,255,255,0.03),
0 0 0 2px rgba(12,168,126,0.5);
}
/* Disabled submit button shadow */
html[data-theme="dark"] .pf-submit-primary:disabled {
box-shadow: 2px 2px 5px rgba(0,0,0,0.3),
-2px -2px 5px rgba(255,255,255,0.02);
}
/* Password strength bar track */
/* Saved flash animation — dark neumorphic variant */
html[data-theme="dark"] .pf-card.pf-saved {
animation: pf-flash-dark 0.6s ease;
}
@keyframes pf-flash-dark {
0% { box-shadow: 5px 5px 14px rgba(0,0,0,0.4), -5px -5px 14px rgba(255,255,255,0.02); }
40% { box-shadow: 0 0 0 3px rgba(12,168,126,0.25), 5px 5px 14px rgba(0,0,0,0.4), -5px -5px 14px rgba(255,255,255,0.02); }
100%{ box-shadow: 5px 5px 14px rgba(0,0,0,0.4), -5px -5px 14px rgba(255,255,255,0.02); }
}
/* ============================================================
USER MANAGEMENT — feature-specific styles
------------------------------------------------------------
Moved out of core/templates/core/user_management.html.
============================================================ */
/* ── Page-specific styles ─────────────────────────────────── */
/* Stats bar */
.um-stats { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.um-stat {
display: inline-flex; align-items: center; gap: 0.4rem;
padding: 0.35rem 0.75rem; border-radius: 999px;
font-size: 0.78rem; font-weight: 700;
border: var(--border-subtle);
background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
}
.um-stat .um-stat-n {
font-family: var(--font-mono);
font-size: 0.85rem;
color: var(--ink);
}
.um-stat-total { border-color: #a8e6d4; background: #ecf9f4; color: #045a3e; }
.um-stat-super { border-color: var(--pl-conflict-cell); background: #fff5f5; color: #991b1b; }
.um-stat-gen { border-color: #fed7aa; background: #fff7ed; color: #9a3412; }
.um-stat-adv { border-color: #a8e6d4; background: #ecf9f4; color: #056748; }
.um-stat-off { border-color: #e5e7eb; background: #f9fafb; color: #6b7280; }
/* Toolbar */
.um-toolbar {
display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;
margin-bottom: 0.75rem;
}
.um-toolbar .um-search {
flex: 1; min-width: 200px; max-width: 360px;
}
.um-toolbar .um-search input {
padding-inline-start: 2.4rem !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85zm-5.242.156a5 5 0 1 1 0-10 5 5 0 0 1 0 10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: 0.75rem center;
background-size: 14px;
}
[dir="rtl"] .um-toolbar .um-search input {
background-position: calc(100% - 0.75rem) center;
padding-inline-start: 2.4rem !important;
}
/* Table enhancements */
#umTable { border-collapse: separate; border-spacing: 0; }
#umTable thead th {
padding: 6px 10px; font-size: 0.7rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.05em;
color: var(--muted); white-space: nowrap;
border-bottom: 2px solid var(--line);
background: var(--glass-bg-header);
}
#umTable tbody td {
padding: 5px 10px; font-size: 0.82rem;
vertical-align: middle; border-bottom: 1px solid rgba(0,0,0,0.04);
}
#umTable tbody tr { cursor: pointer; transition: background 0.1s, box-shadow 0.1s; }
#umTable tbody tr:hover td { background: rgba(0,0,0,0.015); }
#umTable tbody tr.um-selected td { background: color-mix(in srgb, var(--teal) 4%, transparent) !important; }
#umTable tbody tr.um-selected { box-shadow: inset 3px 0 0 var(--teal); }
[dir="rtl"] #umTable tbody tr.um-selected { box-shadow: inset -3px 0 0 var(--brand); }
/* Role badges — compact inline pills */
.um-role-badge {
display: inline-block; padding: 2px 8px;
border-radius: 4px; font-size: 0.65rem; font-weight: 700;
letter-spacing: 0.03em; text-transform: uppercase;
line-height: 1.4; white-space: nowrap;
}
.um-role-super { background: #fff1f2; color: #be123c; border: 1px solid #fecdd3; }
.um-role-gen { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }
.um-role-adv { background: #ecf9f4; color: var(--teal-deep); border: 1px solid #a8e6d4; }
/* Status — compact dot + label */
.um-active-badge {
display: inline-flex; align-items: center; gap: 5px;
padding: 2px 8px; border-radius: 4px;
font-size: 0.68rem; font-weight: 600; cursor: pointer;
transition: all 0.12s; line-height: 1.4; white-space: nowrap;
}
.um-active-badge:hover { filter: brightness(0.95); }
.um-active-badge[role="button"] { user-select: none; }
.um-active-badge:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.um-active-on { background: #dcfce7; color: #15803d; }
.um-active-off { background: #fee2e2; color: var(--pl-danger-text); }
/* Row actions — always visible, compact icons */
.um-row-actions { display: inline-flex; gap: 2px; }
.um-row-btn {
width: 26px; height: 26px; border-radius: 5px; border: 1px solid transparent;
background: transparent; cursor: pointer; display: inline-flex;
align-items: center; justify-content: center;
color: var(--t5); transition: all 0.1s; padding: 0;
}
.um-row-btn:hover { background: #f1f5f9; color: var(--ink); border-color: var(--line); }
.um-row-btn.um-btn-edit:hover { color: var(--brand); background: var(--brand-soft); border-color: #a8e6d4; }
.um-row-btn.um-btn-key:hover { color: var(--amber); background: #fffbeb; border-color: #fde68a; }
.um-row-btn.um-btn-del:hover { color: #dc2626; background: #fff5f5; border-color: var(--pl-conflict-cell); }
/* Empty cell — subtle muted dash */
.um-empty-cell { color: var(--t5); font-size: 0.75rem; }
/* Panels: Create & Edit */
.um-panel {
border: var(--border-subtle); border-radius: var(--radius);
background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
padding: 1rem 1.25rem; margin-bottom: 1rem;
transition: box-shadow 0.15s;
}
.um-panel:hover { box-shadow: var(--shadow-card); }
.um-panel-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 0.75rem;
}
/* .um-panel-title visual now handled by the canonical card-heading rule.
Keep the ::before shape definition here so state variants (.edit / .danger)
render the colored prefix. The default base is hidden via the canonical rule. */
.um-panel-title::before {
content: ""; width: 3px; height: 0.8rem;
border-radius: 2px; background: var(--brand); opacity: 0.6;
}
.um-panel-title.edit::before { background: #f59e0b; }
.um-panel-title.danger::before { background: var(--danger); }
/* Create panel — compact single-row form */
.um-create-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: nowrap; }
.um-create-row .um-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.um-create-row .um-field label {
font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.04em; color: var(--muted); white-space: nowrap;
}
/* Inherit project form-control / form-select styles; only override size for compact row */
.um-create-row .um-field .form-control,
.um-create-row .um-field .form-select {
height: 36px; min-height: 36px !important;
padding: 0.3rem 0.85rem !important;
font-size: 0.82rem !important;
width: 100%;
}
.um-create-row .um-field-user { flex: 1.2; }
.um-create-row .um-field-pw { flex: 1.4; }
.um-create-row .um-field-role { flex: 1; }
.um-create-row .um-field-scope { flex: 0.9; }
.um-pw-wrap { display: flex; gap: 0; }
.um-pw-wrap .form-control {
border-radius: 14px 0 0 14px !important;
border-right: none !important;
}
.um-pw-wrap .um-gen-pw {
height: 36px; border-radius: 0 14px 14px 0;
border: 1px solid rgba(17,17,68,0.07); border-left: none;
padding: 0 12px; white-space: nowrap;
font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.03em; background: var(--glass-bg); color: var(--muted);
cursor: pointer; transition: all 0.12s; display: flex; align-items: center; gap: 4px;
box-shadow: inset -4px 0 8px rgba(163,177,198,0.15);
}
.um-pw-wrap .um-gen-pw:hover { background: var(--card); color: var(--brand); border-color: var(--brand); }
.um-create-btn {
height: 36px; padding: 0 20px; border: none; border-radius: 14px;
background: var(--teal); color: #fff; font-size: 0.78rem;
font-weight: 700; cursor: pointer; white-space: nowrap;
transition: background 0.12s, transform 0.1s; flex-shrink: 0;
box-shadow: 2px 2px 6px color-mix(in srgb, var(--teal) 20%, transparent), -1px -1px 4px rgba(255,255,255,0.7);
}
.um-create-btn:hover { background: var(--teal-deep); }
.um-create-btn:active { transform: scale(0.97); }
@media (max-width: 768px) {
.um-create-row { flex-wrap: wrap; }
.um-create-row .um-field { flex: 1 1 calc(50% - 6px); min-width: 120px; }
.um-create-btn { width: 100%; margin-top: 4px; }
}
/* Edit panel highlight */
.um-panel-edit { border-color: var(--teal-border); background: var(--brand-soft); }
.um-panel-edit .um-edit-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 10px;
}
.um-panel-edit .um-editing-user {
display: inline-flex; align-items: center; gap: 0.35rem;
padding: 0.25rem 0.6rem; border-radius: 10px;
background: var(--brand-soft); border: 1px solid var(--teal-border);
font-size: 0.78rem; font-weight: 600; color: var(--brand-dark);
}
.um-panel-edit .um-close-btn {
display: inline-flex; align-items: center; gap: 4px;
padding: 4px 10px; border-radius: 10px; font-size: 0.72rem;
font-weight: 600; border: 1px solid var(--line);
background: var(--glass-bg); color: var(--muted); cursor: pointer;
transition: all 0.12s;
}
.um-panel-edit .um-close-btn:hover { border-color: var(--danger); color: var(--danger); background: var(--card); }
/* Edit row — compact single-line like create panel */
.um-edit-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: nowrap; }
.um-edit-row .um-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.um-edit-row .um-field label {
font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.04em; color: var(--muted); white-space: nowrap;
}
.um-edit-row .um-field .form-control,
.um-edit-row .um-field .form-select {
height: 36px; min-height: 36px !important;
padding: 0.3rem 0.85rem !important;
font-size: 0.82rem !important;
width: 100%;
}
.um-edit-row .um-field-role { flex: 1; }
.um-edit-row .um-field-scope { flex: 0.9; }
.um-edit-row .um-edit-actions {
display: flex; align-items: center; gap: 6px; flex-shrink: 0;
padding-bottom: 1px;
}
.um-edit-row .um-edit-actions .um-act-btn {
height: 36px; padding: 0 14px; border: none; border-radius: 14px;
font-size: 0.74rem; font-weight: 700; cursor: pointer;
white-space: nowrap; transition: all 0.12s; display: inline-flex;
align-items: center; gap: 5px;
}
.um-act-btn.um-act-save {
background: var(--teal); color: #fff;
box-shadow: 2px 2px 6px color-mix(in srgb, var(--teal) 20%, transparent), -1px -1px 4px rgba(255,255,255,0.7);
}
.um-act-btn.um-act-save:hover { background: var(--teal-deep); }
.um-act-btn.um-act-reset {
background: rgba(255,255,255,0.7); color: #92610a;
border: 1px solid rgba(217,170,67,0.3) !important;
box-shadow: inset 2px 2px 4px rgba(163,177,198,0.15), inset -2px -2px 4px rgba(255,255,255,0.6);
}
.um-act-btn.um-act-reset:hover { background: #fffbeb; border-color: #d9aa43 !important; }
.um-act-btn.um-act-delete {
background: rgba(255,255,255,0.7); color: var(--pl-danger-text);
border: 1px solid rgba(239,68,68,0.2) !important;
box-shadow: inset 2px 2px 4px rgba(163,177,198,0.15), inset -2px -2px 4px rgba(255,255,255,0.6);
}
.um-act-btn.um-act-delete:hover { background: #fef2f2; border-color: #ef4444 !important; }
@media (max-width: 768px) {
.um-edit-row { flex-wrap: wrap; }
.um-edit-row .um-field { flex: 1 1 calc(50% - 6px); min-width: 120px; }
.um-edit-row .um-edit-actions { width: 100%; justify-content: stretch; }
.um-edit-row .um-edit-actions .um-act-btn { flex: 1; justify-content: center; }
}
/* (Bulk bar styles moved to fixed-bottom .bulk-bar below) */
/* ── Fixed-bottom floating bulk action bar ─────────────────── */
.bulk-bar {
position: fixed; bottom: 0; left: 0; right: 0; z-index: 900;
display: flex; align-items: center; gap: 14px;
padding: 12px 24px;
background: rgba(255,255,255,0.95);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
border-top: 1px solid var(--line);
box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
transform: translateY(100%);
transition: transform 0.25s var(--ease);
}
.bulk-bar.visible { transform: translateY(0); }
.bulk-bar .bulk-count { font-weight: 600; color: var(--teal); }
.bulk-bar button {
border-radius: 8px; padding: 6px 16px; font-size: 0.85rem;
border: 1px solid var(--line); cursor: pointer;
transition: opacity 0.15s, background 0.15s;
}
.bulk-bar button:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.bulk-bar .bulk-deactivate { background: #fef2f2; color: var(--pl-danger-text); border-color: #fca5a5; }
.bulk-bar .bulk-deactivate:hover { background: #fee2e2; }
.bulk-bar .bulk-activate { background: #f0fdf4; color: #166534; border-color: #86efac; }
.bulk-bar .bulk-activate:hover { background: #dcfce7; }
.bulk-bar .bulk-cancel { background: transparent; }
.bulk-bar .bulk-cancel:hover { background: #f1f5f9; }
/* Subtle time display */
.um-time { font-size: 0.72rem; color: var(--muted); white-space: nowrap; }
.um-time-never { font-size: 0.7rem; color: var(--t5); font-style: italic; }
/* Checkbox in table */
#umTable .um-check { width: 14px; height: 14px; cursor: pointer; accent-color: var(--brand); }
/* Empty state */
.um-empty { text-align: center; padding: 2.5rem 1.5rem; color: var(--t5); }
.um-empty-icon { display: block; font-size: 2.2rem; margin-bottom: 0.5rem; opacity: 0.6; }
.um-empty-title { font-weight: 600; font-size: 0.9rem; color: var(--t4); margin-bottom: 0.3rem; }
.um-empty-hint { font-size: 0.78rem; color: var(--t5); }
/* Scope fields fade animation */
.um-scope-field { transition: opacity 0.2s, max-height 0.25s; overflow: hidden; }
.um-scope-field.hidden { opacity: 0; max-height: 0; padding: 0; margin: 0; }
/* Subtle alternating rows */
#umTable tbody tr:nth-child(even) td { background: rgba(0,0,0,0.012); }
#umTable tbody tr:hover td { background: rgba(0,0,0,0.025) !important; }
/* ── Dark mode overrides (Deep Navy) ───────────────────── */
html[data-theme="dark"] .um-stat-total { border-color: rgba(10,142,110,0.3); background: rgba(10,142,110,0.12); color: #5ee8ba; }
html[data-theme="dark"] .um-stat-super { border-color: rgba(239,68,68,0.25); background: rgba(239,68,68,0.10); color: #f87171; }
html[data-theme="dark"] .um-stat-gen { border-color: rgba(249,115,22,0.25); background: rgba(249,115,22,0.10); color: #fb923c; }
html[data-theme="dark"] .um-stat-adv { border-color: rgba(10,142,110,0.3); background: rgba(10,142,110,0.12); color: #34d399; }
html[data-theme="dark"] .um-stat-off { border-color: rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); color: #a0a4b8; }
html[data-theme="dark"] .um-stat .um-stat-n { color: #e2e4ec; }
html[data-theme="dark"] #umTable thead th {
background: rgba(255,255,255,0.04);
color: #a0a4b8;
border-bottom-color: rgba(255,255,255,0.06);
}html[data-theme="dark"] #umTable tbody tr:nth-child(even) td { background: rgba(255,255,255,0.015); }
html[data-theme="dark"] #umTable tbody tr:hover td { background: rgba(255,255,255,0.04) !important; }
html[data-theme="dark"] #umTable tbody tr.um-selected td { background: rgba(10,142,110,0.08) !important; }
html[data-theme="dark"] .um-role-super { background: rgba(190,18,60,0.12); color: #f87171; border-color: rgba(190,18,60,0.25); }
html[data-theme="dark"] .um-role-gen { background: rgba(194,65,12,0.12); color: #fb923c; border-color: rgba(194,65,12,0.25); }
html[data-theme="dark"] .um-role-adv { background: rgba(10,142,110,0.12); color: #34d399; border-color: rgba(10,142,110,0.25); }
html[data-theme="dark"] .um-active-on { background: rgba(22,163,74,0.15); color: #4ade80; }
html[data-theme="dark"] .um-active-off { background: rgba(185,28,28,0.15); color: #f87171; }
html[data-theme="dark"] .um-row-btn { color: #a0a4b8; }
html[data-theme="dark"] .um-row-btn:hover { background: rgba(255,255,255,0.06); color: #e2e4ec; border-color: rgba(255,255,255,0.08); }
html[data-theme="dark"] .um-row-btn.um-btn-edit:hover { color: #0CA87E; background: rgba(10,142,110,0.10); border-color: rgba(10,142,110,0.25); }
html[data-theme="dark"] .um-row-btn.um-btn-key:hover { color: #fbbf24; background: rgba(217,119,6,0.10); border-color: rgba(217,119,6,0.25); }
html[data-theme="dark"] .um-row-btn.um-btn-del:hover { color: #f87171; background: rgba(220,38,38,0.10); border-color: rgba(220,38,38,0.25); }
html[data-theme="dark"] .um-empty { color: #a0a4b8; }
html[data-theme="dark"] .um-empty-icon { opacity: 0.5; }
html[data-theme="dark"] .um-empty-title { color: #c0c4d4; }
html[data-theme="dark"] .um-empty-hint { color: #a0a4b8; }
html[data-theme="dark"] .um-empty-cell { color: #7a7e92; }
html[data-theme="dark"] .um-panel-edit {
border-color: rgba(10,142,110,0.25);
background: rgba(10,142,110,0.04);
}
html[data-theme="dark"] .um-panel-edit .um-editing-user {
background: rgba(10,142,110,0.10);
border-color: rgba(10,142,110,0.25);
color: #34d399;
}
html[data-theme="dark"] .um-panel-edit .um-close-btn {
background: rgba(255,255,255,0.04);
color: #a0a4b8;
border-color: rgba(255,255,255,0.08);
}
html[data-theme="dark"] .um-panel-edit .um-close-btn:hover {
background: rgba(220,38,38,0.08);
color: #f87171;
border-color: rgba(220,38,38,0.2);
}
html[data-theme="dark"] .um-act-btn.um-act-reset {
background: rgba(255,255,255,0.04);
color: #fbbf24;
border-color: rgba(217,170,67,0.2) !important;
box-shadow: none;
}
html[data-theme="dark"] .um-act-btn.um-act-reset:hover { background: rgba(217,119,6,0.10); }
html[data-theme="dark"] .um-act-btn.um-act-delete {
background: rgba(255,255,255,0.04);
color: #f87171;
border-color: rgba(239,68,68,0.2) !important;
box-shadow: none;
}
html[data-theme="dark"] .um-act-btn.um-act-delete:hover { background: rgba(220,38,38,0.10); }
html[data-theme="dark"] .um-pw-wrap .um-gen-pw {
background: rgba(255,255,255,0.04);
border-color: rgba(255,255,255,0.06);
color: #a0a4b8;
box-shadow: none;
}
html[data-theme="dark"] .um-pw-wrap .um-gen-pw:hover { background: rgba(255,255,255,0.08); color: #0CA87E; border-color: rgba(10,142,110,0.3); }
html[data-theme="dark"] .bulk-bar {
background: rgba(13,15,26,0.95);
border-top-color: rgba(255,255,255,0.06);
box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
}
html[data-theme="dark"] .bulk-bar button { border-color: rgba(255,255,255,0.08); }
html[data-theme="dark"] .bulk-bar .bulk-deactivate { background: rgba(185,28,28,0.12); color: #f87171; border-color: rgba(239,68,68,0.25); }
html[data-theme="dark"] .bulk-bar .bulk-deactivate:hover { background: rgba(185,28,28,0.18); }
html[data-theme="dark"] .bulk-bar .bulk-activate { background: rgba(22,101,52,0.12); color: #4ade80; border-color: rgba(134,239,172,0.25); }
html[data-theme="dark"] .bulk-bar .bulk-activate:hover { background: rgba(22,101,52,0.18); }
html[data-theme="dark"] .bulk-bar .bulk-cancel { background: transparent; color: #a0a4b8; }
html[data-theme="dark"] .bulk-bar .bulk-cancel:hover { background: rgba(255,255,255,0.04); }
html[data-theme="dark"] .um-time { color: #a0a4b8; }
html[data-theme="dark"] .um-time-never { color: #7a7e92; }
html[data-theme="dark"] .um-create-btn {
box-shadow: 2px 2px 6px rgba(0,0,0,0.3), -1px -1px 4px rgba(255,255,255,0.03);
}
html[data-theme="dark"] .um-act-btn.um-act-save {
box-shadow: 2px 2px 6px rgba(0,0,0,0.3), -1px -1px 4px rgba(255,255,255,0.03);
}
/* Virtual Advisor */
.va-shell {
display: grid;
grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);
gap: 1rem;
align-items: start;
}
.va-side,
.va-chat,
.va-panel {
min-width: 0;
}
.va-side {
display: grid;
gap: 0.9rem;
align-content: start;
}
.va-panel,
.va-chat {
border: 1px solid var(--line);
background: var(--card);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
}
.va-panel {
padding: 1rem;
overflow: hidden;
}
.va-panel-head,
.va-chat-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 0.8rem;
}
.va-kicker {
font-size: 0.72rem;
}
.va-panel h2,
.va-chat h2 {
margin: 0.1rem 0 0;
font-size: 1rem;
font-weight: 800;
color: var(--t1);
}
.va-status {
display: inline-flex;
align-items: center;
gap: 0.45rem;
border: 1px solid var(--line);
border-radius: 999px;
padding: 0.35rem 0.55rem;
color: var(--t3);
font-size: 0.78rem;
margin-bottom: 0.8rem;
}
.va-status-dot {
width: 0.55rem;
height: 0.55rem;
border-radius: 50%;
background: var(--amber);
box-shadow: 0 0 0 3px rgba(217,119,6,0.12);
}
.va-status.is-ok .va-status-dot {
background: var(--teal);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 14%, transparent);
}
.va-status.is-bad .va-status-dot {
background: #dc2626;
box-shadow: 0 0 0 3px rgba(220,38,38,0.12);
}
.va-runtime {
display: grid;
gap: 0.45rem;
margin: 0 0 0.9rem;
}
.va-runtime div,
.va-context-row {
display: flex;
justify-content: space-between;
gap: 0.75rem;
border-bottom: 1px dashed var(--line);
padding-bottom: 0.35rem;
}
.va-runtime dt,
.va-context-row span {
color: var(--t4);
font-size: 0.74rem;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.va-runtime dd,
.va-context-row strong {
margin: 0;
color: var(--t2);
font-size: 0.82rem;
text-align: right;
overflow-wrap: anywhere;
}
.va-label {
display: block;
color: var(--t3);
font-size: 0.78rem;
font-weight: 700;
margin: 0.65rem 0 0.28rem;
}
.va-input,
.va-composer textarea {
box-sizing: border-box;
width: 100%;
max-width: 100%;
min-width: 0;
border: 1px solid var(--line);
background: var(--surface);
color: var(--t1);
border-radius: 8px;
padding: 0.65rem 0.75rem;
outline: none;
}
.va-input:focus,
.va-composer textarea:focus {
border-color: color-mix(in srgb, var(--teal) 55%, transparent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 11%, transparent);
}
.va-grid-2 {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.75rem;
}
.va-grid-2 > div {
min-width: 0;
}
.va-context-card {
margin-top: 0.9rem;
padding: 0.8rem;
border: 1px solid var(--line);
border-radius: 8px;
background: color-mix(in srgb, var(--brand) 7%, transparent);
color: var(--t3);
font-size: 0.82rem;
display: grid;
gap: 0.35rem;
}
.va-examples {
display: grid;
gap: 0.45rem;
}
.va-examples button {
min-width: 0;
/* `left` strands Arabic labels against the wrong edge while every neighbouring
control is start-aligned. */
text-align: start;
border: 1px solid var(--line);
border-radius: 8px;
background: var(--surface);
color: var(--t2);
padding: 0.62rem 0.7rem;
font-weight: 700;
}
.va-examples button:hover {
border-color: color-mix(in srgb, var(--teal) 45%, transparent);
color: var(--brand);
}
.va-chat {
display: grid;
grid-template-rows: auto minmax(420px, 1fr) auto;
grid-column: 2;
grid-row: 1 / span 3;
overflow: hidden;
}
.va-prompt-panel {
grid-column: 1;
}
.va-results-panel {
grid-column: 1;
}
.va-tool-results {
display: grid;
gap: 0.75rem;
color: var(--t3);
font-size: 0.82rem;
}
.va-tool-card {
display: grid;
gap: 0.7rem;
}
.va-tool-loading {
border: 1px dashed var(--line);
border-radius: 8px;
padding: 0.75rem;
color: var(--t3);
}
.va-tool-card-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.75rem;
}
.va-tool-card-head span {
color: var(--brand);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.07em;
text-transform: uppercase;
}
.va-tool-card-head strong {
color: var(--t2);
font-size: 0.82rem;
}
.va-tool-summary {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.45rem;
}
.va-tool-summary span,
.va-tool-meta span {
border: 1px solid var(--line);
border-radius: 8px;
background: var(--surface);
color: var(--t3);
padding: 0.55rem 0.6rem;
}
.va-tool-summary b {
display: block;
color: var(--t1);
font-size: 1rem;
}
.va-tool-meta {
display: grid;
gap: 0.45rem;
}
.va-tool-table-wrap {
overflow: auto;
border: 1px solid var(--line);
border-radius: 8px;
}
.va-tool-table {
width: 100%;
border-collapse: collapse;
min-width: 720px;
font-size: 0.78rem;
}
.va-tool-table th,
.va-tool-table td {
padding: 0.48rem 0.55rem;
border-bottom: 1px solid var(--line);
text-align: left;
vertical-align: top;
}
.va-tool-table th {
color: var(--brand);
font-size: 0.68rem;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.va-tool-table td {
color: var(--t2);
}
.va-chat-top {
margin: 0;
padding: 1rem 1rem 0.8rem;
border-bottom: 1px solid var(--line);
}
.va-messages {
overflow: auto;
padding: 1rem;
display: grid;
align-content: start;
gap: 0.85rem;
}
.va-message {
display: grid;
grid-template-columns: 42px minmax(0, 1fr);
gap: 0.7rem;
align-items: start;
}
.va-message-user {
grid-template-columns: minmax(0, 1fr) 42px;
}
.va-message-user .va-avatar {
grid-column: 2;
}
.va-message-user .va-bubble {
grid-column: 1;
grid-row: 1;
justify-self: end;
background: color-mix(in srgb, var(--teal) 12%, transparent);
border-color: color-mix(in srgb, var(--teal) 24%, transparent);
}
.va-avatar {
width: 42px;
height: 42px;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--brand);
color: #fff;
font-size: 0.72rem;
font-weight: 800;
}
.va-bubble {
border: 1px solid var(--line);
border-radius: 10px;
background: var(--surface);
color: var(--t2);
padding: 0.85rem 0.95rem;
line-height: 1.55;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.va-composer {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 0.75rem;
padding: 1rem;
border-top: 1px solid var(--line);
}
.va-composer textarea {
resize: vertical;
min-height: 76px;
}
.va-composer .btn {
min-width: 104px;
align-self: stretch;
}
@media (max-width: 980px) {
.va-shell {
grid-template-columns: 1fr;
}
.va-side {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.va-examples {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.va-chat {
grid-column: auto;
grid-row: auto;
grid-template-rows: auto minmax(180px, 1fr) auto;
}
.va-prompt-panel {
grid-column: auto;
}
.va-results-panel {
grid-column: auto;
}
.va-tool-summary {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 620px) {
.va-side,
.va-examples,
.va-grid-2,
.va-tool-summary,
.va-composer {
grid-template-columns: 1fr;
}
.va-chat {
grid-template-rows: auto minmax(280px, 1fr) auto;
}
}
html[data-theme="dark"] .va-panel,
html[data-theme="dark"] .va-chat {
background: rgba(18,21,34,0.9);
border-color: rgba(255,255,255,0.08);
}
html[data-theme="dark"] .va-input,
html[data-theme="dark"] .va-composer textarea,
html[data-theme="dark"] .va-examples button,
html[data-theme="dark"] .va-bubble,
html[data-theme="dark"] .va-tool-summary span,
html[data-theme="dark"] .va-tool-meta span {
background: rgba(255,255,255,0.035);
border-color: rgba(255,255,255,0.08);
}
/* ============================================================
COURSE ASSIGNMENT
============================================================ */
/* ── Segmented M/F Control ── */
.ca-seg {
display: flex;
background: var(--shadow-neu-inset);
border-radius: var(--radius-pill);
padding: var(--space-1);
height: 34px;
align-items: center;
box-shadow: var(--shadow-neu-inset);
}
.ca-seg-btn {
flex: 1;
height: 26px;
border: none;
background: transparent;
border-radius: var(--radius-pill);
font-size: var(--text-sm);
font-weight: 600;
color: var(--t3);
cursor: pointer;
transition: all var(--dur-fast);
min-width: 32px;
}
.ca-seg-btn:hover {
color: var(--t1);
}
.ca-seg-btn:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}
.ca-seg-active {
background: var(--teal-dim);
color: var(--teal-deep);
box-shadow: var(--shadow-neu-sm);
}
/* ── Status Pills ── */
.ca-pill {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-pill);
font-size: var(--text-xs);
font-weight: 600;
}
.ca-pill.is-assigned {
background: var(--teal-dim);
color: var(--teal-deep);
}
.ca-pill.is-unassigned {
background: var(--amber-dim);
color: var(--warning);
}
.ca-pill-count {
font-family: var(--font-mono);
font-weight: 700;
min-width: 20px;
text-align: center;
}
.ca-pill-label {
white-space: nowrap;
}
/* ── Bulk Action Bar ── */
.ca-bulkbar {
background: var(--teal-dim);
border: 1px solid var(--teal-border);
border-radius: var(--radius);
margin-bottom: var(--space-4);
padding: var(--space-3) var(--space-4);
animation: slideDown var(--dur) var(--ease);
}
@keyframes slideDown {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
.ca-bulk-content {
display: flex;
align-items: center;
gap: var(--space-4);
}
.ca-bulk-content .fb-search {
max-width: 300px;
}
/* ── Assignment Cells ── */
.ca-assign-cell {
min-width: 140px;
}
.ca-chip {
display: inline-flex;
align-items: center;
gap: var(--space-2);
background: var(--teal-dim);
color: var(--teal);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-pill);
font-size: var(--text-sm);
font-weight: 500;
cursor: pointer;
transition: all var(--dur-fast);
border: 1px solid var(--teal-border);
}
.ca-chip:hover {
background: var(--teal);
color: white;
box-shadow: var(--shadow-sm);
}
.ca-chip-x {
background: none;
border: none;
color: inherit;
font-size: var(--text-sm);
font-weight: 700;
cursor: pointer;
padding: 0;
width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
opacity: 0.7;
transition: opacity var(--dur-fast);
}
.ca-chip-x:hover {
opacity: 1;
background: rgba(255, 255, 255, 0.2);
}
.ca-assign-add {
background: transparent;
border: 2px dashed var(--line-strong);
color: var(--t3);
padding: var(--space-2) var(--space-4);
border-radius: var(--radius);
font-size: var(--text-xs);
font-weight: 500;
cursor: pointer;
transition: all var(--dur-fast);
}
.ca-assign-add:hover {
border-color: var(--teal);
color: var(--teal);
background: var(--teal-dim);
}
/* ── Elective tag (real course resolved from a placeholder slot) ── */
.ca-elective-tag {
display: inline-block;
margin-inline-start: var(--space-2);
padding: 1px var(--space-2);
border-radius: var(--radius-pill);
font-size: var(--text-xs);
font-weight: 600;
line-height: 1.6;
vertical-align: middle;
white-space: nowrap;
background: transparent;
color: var(--t3);
border: 1px solid var(--line-strong);
}
/* Offered this term — the placeholder is actually mapped to this course now. */
.ca-elective-tag.is-offered {
background: var(--teal-dim);
color: var(--teal);
border-color: var(--teal-border);
}
/* Legacy/orphaned assignment — a code no longer scheduled; clear it. */
.ca-elective-tag.ca-tag-warn {
background: var(--amber-dim);
color: var(--warning);
border-color: color-mix(in srgb, var(--warning) 35%, transparent);
}
/* Unmapped elective slot — its assign control is disabled. */
.ca-assign-add[disabled],
.ca-assign-add[aria-disabled="true"] {
opacity: 0.5;
cursor: not-allowed;
}
.ca-assign-add[disabled]:hover,
.ca-assign-add[aria-disabled="true"]:hover {
border-color: var(--line-strong);
color: var(--t3);
background: transparent;
}
/* ── Assignment Popover ── */
.ca-pop {
position: fixed;
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow-lift);
z-index: var(--z-drawer);
width: min(280px, calc(100vw - 16px));
max-height: 240px;
overflow: hidden;
}
.ca-pop-search {
padding: var(--space-3);
border-bottom: 1px solid var(--line);
transition: box-shadow var(--dur-fast);
}
.ca-pop-search:focus-within {
box-shadow: inset 0 -2px 0 var(--teal);
}
.ca-pop-input {
width: 100%;
border: none;
outline: none;
background: transparent;
font-size: var(--text-sm);
padding: var(--space-2) 0;
color: var(--ink);
}
.ca-pop-input::placeholder {
color: var(--t4);
}
.ca-pop-results {
max-height: 200px;
overflow-y: auto;
}
.ca-pop-opt {
padding: var(--space-3);
cursor: pointer;
border-bottom: 1px solid var(--line);
transition: background var(--dur-fast);
}
.ca-pop-opt:last-child {
border-bottom: none;
}
.ca-pop-opt:hover,
.ca-pop-opt.is-active {
background: var(--teal-dim);
}
.ca-pop-opt.is-active {
box-shadow: inset 2px 0 0 var(--teal);
}
.ca-pop-opt strong {
display: block;
color: var(--ink);
font-size: var(--text-sm);
margin-bottom: var(--space-1);
}
.ca-pop-dept {
font-size: var(--text-xs);
color: var(--t3);
}
.ca-pop-hint,
.ca-pop-loading,
.ca-pop-error {
padding: var(--space-4);
text-align: center;
color: var(--t4);
font-size: var(--text-xs);
}
.ca-pop-error {
color: var(--danger);
}
/* ── RTL Support ── */
[dir="rtl"] .ca-seg-btn {
font-family: var(--font-body);
}
[dir="rtl"] .ca-chip {
flex-direction: row-reverse;
}
[dir="rtl"] .ca-bulk-content {
flex-direction: row-reverse;
}
/* ============================================================
INSTRUCTOR MANAGEMENT
============================================================ */
/* ── Tab Navigation ── */
.im-tabs {
display: flex;
gap: var(--space-2);
margin-bottom: var(--space-8);
border-bottom: 1px solid var(--line);
padding-bottom: var(--space-1);
}
.im-tab {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-4) var(--space-6);
background: transparent;
border: none;
border-radius: var(--radius-sm);
font-size: var(--text-sm);
color: var(--t3);
cursor: pointer;
transition: all var(--dur-fast);
position: relative;
}
.im-tab:hover {
color: var(--t1);
background: var(--glass-bg-data);
}
.im-tab-active {
color: var(--teal);
background: var(--teal-dim);
}
.im-tab-active::after {
content: '';
position: absolute;
bottom: calc(var(--space-4) * -1 - 1px);
left: var(--space-6);
right: var(--space-6);
height: 2px;
background: var(--teal);
border-radius: 2px;
}
.im-tab-icon {
width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
}
.im-tab-icon svg {
width: 100%;
height: 100%;
stroke: currentColor;
fill: none;
stroke-width: 1.5;
}
/* ── Tab Content ── */
.im-tab-content {
display: none;
}
.im-tab-content-active {
display: block;
}
/* ── Panel Layout ── */
.im-panel {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius);
margin-bottom: var(--space-8);
box-shadow: var(--shadow-card);
}
.im-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-6) var(--space-8);
border-bottom: 1px solid var(--line);
background: var(--surface);
border-radius: var(--radius) var(--radius) 0 0;
}
.im-panel-title {
font-size: var(--text-lg);
font-weight: 600;
color: var(--t1);
margin: 0;
}
.im-panel-action {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-5);
background: var(--teal);
color: white;
border: none;
border-radius: var(--radius-sm);
font-size: var(--text-sm);
font-weight: 500;
cursor: pointer;
transition: all var(--dur-fast);
}
.im-panel-action:hover {
background: var(--teal-deep);
transform: translateY(-1px);
}
.im-panel-action svg {
width: 16px;
height: 16px;
stroke: currentColor;
fill: none;
stroke-width: 2;
}
/* ── Toolbar ── */
.im-toolbar {
display: flex;
align-items: center;
gap: var(--space-4);
padding: var(--space-6) var(--space-8);
background: var(--surface);
border-bottom: 1px solid var(--line);
}
.im-search {
flex: 1;
max-width: 300px;
}
.im-search input {
width: 100%;
padding: var(--space-3) var(--space-4);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--card);
font-size: var(--text-sm);
transition: border-color var(--dur-fast);
}
.im-search input:focus {
outline: none;
border-color: var(--teal);
box-shadow: 0 0 0 3px var(--teal-dim);
}
.im-filter-group {
display: flex;
align-items: center;
gap: var(--space-4);
}
.im-filter-toggle {
display: flex;
align-items: center;
gap: var(--space-3);
font-size: var(--text-sm);
color: var(--t2);
cursor: pointer;
}
.im-filter-toggle input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: var(--teal);
}
/* ── Instructor Names ── */
.im-instructor-name {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.im-instructor-name strong {
color: var(--t1);
font-weight: 600;
}
/* ── Row Actions ── */
.im-row-actions {
display: flex;
gap: var(--space-2);
}
.im-row-btn {
padding: var(--space-2);
background: transparent;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
color: var(--t3);
cursor: pointer;
transition: all var(--dur-fast);
}
.im-row-btn:hover {
background: var(--teal-dim);
border-color: var(--teal-border);
color: var(--teal);
}
.im-row-btn svg {
width: 14px;
height: 14px;
stroke: currentColor;
fill: none;
stroke-width: 1.5;
}
/* ── Assignment Notices ── */
.im-assignment-notice {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-4);
padding: var(--space-12);
color: var(--t3);
font-size: var(--text-sm);
background: var(--surface);
border-radius: var(--radius);
margin: var(--space-8);
}
.im-assignment-notice svg {
width: 20px;
height: 20px;
stroke: currentColor;
fill: none;
stroke-width: 1.5;
}
/* ── Report Table ── */
.im-report-table {
font-size: var(--text-sm);
}
.im-report-totals {
background: var(--surface);
border-top: 2px solid var(--teal);
}
.im-report-totals td {
font-weight: 600;
color: var(--t1);
}
/* ── RTL Support ── */
[dir="rtl"] .im-tab-active::after {
left: var(--space-6);
right: var(--space-6);
}
[dir="rtl"] .im-toolbar {
flex-direction: row-reverse;
}
/* ── Dark Theme ── */
html[data-theme="dark"] .im-panel,
html[data-theme="dark"] .im-toolbar,
html[data-theme="dark"] .im-panel-header {
background: rgba(18,21,34,0.9);
border-color: rgba(255,255,255,0.08);
}
html[data-theme="dark"] .im-search input {
background: rgba(255,255,255,0.035);
border-color: rgba(255,255,255,0.08);
color: var(--t1);
}
html[data-theme="dark"] .im-assignment-notice {
background: rgba(255,255,255,0.035);
border-color: rgba(255,255,255,0.08);
}
/* ── Custom Modal ── */
.im-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1050;
display: flex;
align-items: center;
justify-content: center;
}
.im-modal-backdrop {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
}
.im-modal-content {
position: relative;
width: 90%;
max-width: 500px;
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lift);
max-height: 90vh;
overflow-y: auto;
}
.im-modal-lg {
max-width: 700px;
}
.im-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-8);
border-bottom: 1px solid var(--line);
background: var(--surface);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.im-modal-header h3 {
margin: 0;
font-size: var(--text-lg);
font-weight: 600;
color: var(--t1);
}
.im-modal-close {
width: 32px;
height: 32px;
border: none;
background: transparent;
color: var(--t3);
cursor: pointer;
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
transition: all var(--dur-fast);
}
.im-modal-close:hover {
background: var(--line);
color: var(--t1);
}
.im-modal-close svg {
width: 18px;
height: 18px;
stroke: currentColor;
fill: none;
stroke-width: 2;
}
.im-modal-body {
padding: var(--space-8);
}
.im-modal-footer {
display: flex;
gap: var(--space-4);
justify-content: flex-end;
padding: var(--space-8);
border-top: 1px solid var(--line);
background: var(--surface);
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.im-form-group {
margin-bottom: var(--space-6);
}
.im-form-group label {
display: block;
margin-bottom: var(--space-2);
font-size: var(--text-sm);
font-weight: 500;
color: var(--t2);
}
/* ── Advisor-seed typeahead (custom dropdown, replaces native datalist) ── */
.im-ac {
position: relative;
}
.im-ac-panel {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-lift);
max-height: 240px;
overflow-y: auto;
z-index: 20;
}
.im-ac-opt {
padding: var(--space-3) var(--space-4);
cursor: pointer;
border-bottom: 1px solid var(--line);
transition: background var(--dur-fast);
}
.im-ac-opt:last-child {
border-bottom: none;
}
.im-ac-opt:hover,
.im-ac-opt.is-active {
background: var(--teal-dim);
}
.im-ac-main {
display: flex;
align-items: center;
gap: var(--space-2);
}
.im-ac-main strong {
color: var(--ink);
font-size: var(--text-sm);
font-weight: 600;
}
.im-ac-sub {
font-size: var(--text-xs);
color: var(--t3);
margin-top: 2px;
}
.im-ac-badge {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 1px var(--space-2);
border-radius: var(--radius-pill);
background: var(--amber-dim);
color: var(--warning);
}
.im-ac-empty {
padding: var(--space-4);
text-align: center;
color: var(--t4);
font-size: var(--text-xs);
}
.im-form-check {
display: flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-6);
}
.im-form-check input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: var(--teal);
}
.im-form-check label {
margin: 0;
font-size: var(--text-sm);
color: var(--t2);
cursor: pointer;
}
/* ── RTL Modal Support ── */
[dir="rtl"] .im-modal-footer {
justify-content: flex-start;
}
/* ── Dark Theme Modal ── */
html[data-theme="dark"] .im-modal-content {
background: rgba(18,21,34,0.95);
border-color: rgba(255,255,255,0.08);
}
html[data-theme="dark"] .im-modal-header,
html[data-theme="dark"] .im-modal-footer {
background: rgba(255,255,255,0.025);
border-color: rgba(255,255,255,0.08);
}
/* ── Student adviser: durable conversations ──────────────────────
Layout is a sidebar of conversations beside the open thread. Everything here
is direction-agnostic — margin-inline / padding-inline rather than left and
right — because the page renders RTL in Arabic and LTR in English from the
same rules. */
/* `--space-8`, not `--space-3`. The scale here is in PIXELS — `--space-3` is 6px
— so `var(--space-3, 1rem)` was a declaration whose fallback contradicted its
token: written to mean 1rem, resolving to 6px, and looking deliberate. */
main[data-page="student-advisor"] {
min-height: 100dvh;
padding: .75rem clamp(.65rem, 2vw, 1.25rem);
}
main[data-page="student-advisor"] > .content-wrap {
width: 100%;
min-height: 100%;
}
main[data-page="student-advisor"] > .content-wrap > .page-header,
main[data-page="student-advisor"] > .content-wrap > .page-intro {
display: none;
}
.sa-layout {
position: relative;
width: 100%;
max-width: 1180px;
height: var(--sa-workspace-height, calc(100dvh - 12rem));
min-height: 26rem;
margin-inline: auto;
}
.sa-drawer-backdrop {
position: absolute;
inset: 0;
z-index: 30;
border: 0;
border-radius: var(--radius);
background: rgba(15, 23, 42, .24);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .18s ease, visibility .18s ease;
}
.sa-layout > .sa-sidebar {
position: absolute;
inset-block: .65rem;
inset-inline-end: .65rem;
z-index: 40;
display: flex;
width: min(22rem, calc(100% - 1.3rem));
padding: .75rem;
flex-direction: column;
overflow: hidden;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(.5rem) scale(.985);
transform-origin: top center;
box-shadow: var(--shadow-lg, 0 24px 60px rgba(15,23,42,.22));
transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.sa-layout.history-open .sa-drawer-backdrop {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.sa-layout.history-open .sa-sidebar {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: none;
}
.sa-sidebar-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: .75rem;
padding: .2rem .25rem .7rem;
border-bottom: 1px solid var(--line);
}
.sa-sidebar-head h2 { margin: 0; color: var(--t1); font-size: .95rem; }
.sa-icon-btn {
display: grid;
width: 2rem;
height: 2rem;
padding: 0;
place-items: center;
border: 1px solid var(--line);
border-radius: .6rem;
background: var(--surface);
color: var(--t2);
font: inherit;
font-size: 1.25rem;
cursor: pointer;
}
.sa-icon-btn:hover { border-color: var(--teal-border); color: var(--brand); }
.sa-drawer-logout {
flex: 0 0 auto;
margin-top: .55rem;
padding-top: .65rem;
border-top: 1px solid var(--line);
}
.sa-conv-list {
display: flex;
min-height: 0;
margin: .55rem 0 0;
padding: 0;
flex: 1 1 auto;
flex-direction: column;
gap: .25rem;
overflow-y: auto;
list-style: none;
}
.sa-conv-item { display: block; }
/* `.va-chat` is shared with the older adviser page, whose first child is a
`.va-chat-top` this page does not have. Inheriting its row template therefore
shifts every row by one: the 420px flexible row lands on the three suggestion
chips (which stretch to fill it — 280px of them on a phone) while the message
thread gets an `auto` row, so it sizes to its content and its `overflow: auto`
never produces a scrollbar. The effect is that answering a question appears to
do nothing: the view cannot scroll to the reply, and the composer is pushed
below the fold. Re-state the rows for THIS page rather than editing the shared
rule the other page still depends on. */
.sa-main .va-chat {
position: relative;
display: flex;
min-height: 0;
flex-direction: column;
grid-column: auto;
grid-row: auto;
overflow: hidden;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
/* No `min-height: 0` here on purpose: .va-messages already carries `overflow:
auto`, which by itself sets a grid item's automatic minimum size to zero, so the
usual guard would be a rule nothing depends on. */
.sa-layout > .sa-main {
display: grid;
height: 100%;
min-width: 0;
grid-template-rows: auto minmax(0, 1fr);
overflow: hidden;
padding: 0;
}
.sa-workspace-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: .8rem 1rem;
border-bottom: 1px solid var(--line);
background: color-mix(in srgb, var(--card) 92%, var(--teal) 8%);
}
.sa-workspace-identity,
.sa-workspace-actions { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.sa-workspace-mark,
.sa-empty-mark {
display: grid;
place-items: center;
border-radius: 50%;
background: linear-gradient(135deg, var(--brand), var(--teal));
color: #fff;
font-weight: 800;
letter-spacing: -.03em;
box-shadow: 0 7px 18px color-mix(in srgb, var(--teal) 22%, transparent);
}
.sa-workspace-mark { width: 2.25rem; height: 2.25rem; font-size: .7rem; }
.sa-workspace-kicker { margin: 0 0 .08rem; color: var(--t3); font-size: .7rem; }
.sa-workspace-program {
display: inline-flex;
margin-inline-start: .3rem;
padding: .05rem .34rem;
border: 1px solid var(--teal-border);
border-radius: 999px;
background: var(--teal-dim);
color: var(--brand);
direction: ltr;
font-size: .64rem;
font-weight: 750;
unicode-bidi: isolate;
}
.sa-workspace-head h2 {
max-width: min(48vw, 34rem);
margin: 0;
overflow: hidden;
color: var(--t1);
font-size: .95rem;
text-overflow: ellipsis;
white-space: nowrap;
}
.sa-history-toggle,
.sa-new-chat { display: inline-flex; align-items: center; gap: .35rem; }
.sa-main .va-chat.has-messages .va-examples { display: none; }
/* One conversation viewport, matching the agent-chat/conversation pattern. */
.sa-main .va-messages {
position: relative;
flex: 1 1 auto;
min-height: 0;
padding: 1.25rem clamp(.85rem, 3vw, 2.25rem);
gap: 1rem;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
scroll-behavior: smooth;
scrollbar-gutter: stable;
}
.sa-empty-state {
display: grid;
width: min(100%, 48rem);
min-height: 100%;
margin: auto;
padding: clamp(1rem, 5vh, 3.5rem) 0;
place-content: center;
justify-items: center;
text-align: center;
}
.sa-empty-mark { width: 3.2rem; height: 3.2rem; margin-bottom: .85rem; font-size: .82rem; }
.sa-empty-state h3 { margin: 0 0 .35rem; color: var(--t1); font-size: 1.15rem; }
.sa-empty-state > p { max-width: 38rem; margin: 0 0 1.15rem; line-height: 1.55; }
.sa-main .va-examples {
display: grid;
width: 100%;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: .55rem;
}
.sa-main .va-examples button {
display: flex;
min-height: 3.25rem;
align-items: center;
gap: .55rem;
border-radius: .85rem;
background: var(--card);
box-shadow: 0 5px 16px rgba(15, 23, 42, .045);
cursor: pointer;
}
.sa-main .va-examples button > span {
display: grid;
width: 1.7rem;
height: 1.7rem;
flex: 0 0 auto;
place-items: center;
border-radius: .5rem;
background: var(--teal-dim);
color: var(--brand);
}
.sa-main .va-examples strong { min-width: 0; font-size: .78rem; font-weight: 700; }
.sa-main .va-message {
display: flex;
width: min(100%, 68rem);
grid-template-columns: none;
gap: .6rem;
align-items: flex-start;
}
.sa-main .va-message-assistant { align-self: center; }
.sa-main .va-message-user {
width: auto;
max-width: min(78%, 46rem);
margin-inline-start: auto;
grid-template-columns: none;
}
.sa-main .va-message-user .va-avatar { display: none; }
.sa-main .va-avatar {
width: 1.9rem;
height: 1.9rem;
flex: 0 0 auto;
background: linear-gradient(135deg, var(--brand), var(--teal));
box-shadow: 0 5px 14px color-mix(in srgb, var(--teal) 18%, transparent);
font-size: .58rem;
}
.sa-main .va-bubble { min-width: 0; }
.sa-main .va-message-assistant .va-bubble {
flex: 1 1 auto;
padding: .15rem 0 1rem;
border: 0;
background: transparent;
line-height: 1.65;
}
.sa-main .va-message-user .va-bubble {
padding: .62rem .82rem;
border-color: color-mix(in srgb, var(--teal) 26%, var(--line));
border-radius: 1rem 1rem .3rem 1rem;
background: color-mix(in srgb, var(--teal) 12%, var(--card));
box-shadow: 0 4px 14px rgba(15, 23, 42, .035);
}
[dir="rtl"] .sa-main .va-message-user .va-bubble { border-radius: 1rem 1rem 1rem .3rem; }
.sa-main .sa-body { color: var(--t1); font-size: .94rem; }
.sa-main .sa-para { margin-bottom: .72rem; }
.sa-main .sa-thinking-message {
align-self: center;
color: var(--t3);
}
.sa-main .sa-thinking-message .va-bubble {
display: inline-flex;
min-height: 2.25rem;
padding: .38rem .7rem;
align-items: center;
gap: .55rem;
border: 1px solid color-mix(in srgb, var(--teal) 18%, var(--line));
border-radius: 999px;
background: color-mix(in srgb, var(--teal) 6%, var(--card));
box-shadow: none;
font-size: .78rem;
}
.sa-thinking-dots { display: inline-flex; align-items: center; gap: .2rem; }
.sa-thinking-dots > span {
width: .32rem;
height: .32rem;
border-radius: 50%;
background: var(--brand);
opacity: .3;
animation: sa-thinking-pulse 1.05s ease-in-out infinite;
}
.sa-thinking-dots > span:nth-child(2) { animation-delay: .14s; }
.sa-thinking-dots > span:nth-child(3) { animation-delay: .28s; }
@keyframes sa-thinking-pulse {
0%, 70%, 100% { opacity: .25; transform: translateY(0); }
35% { opacity: 1; transform: translateY(-.14rem); }
}
.sa-main .va-message-assistant.is-revealing .va-bubble > [hidden] {
display: none !important;
}
.sa-answer-caret {
display: inline-block;
width: .12rem;
height: 1em;
margin-inline-start: .12rem;
vertical-align: -.12em;
border-radius: 999px;
background: var(--brand);
animation: sa-answer-caret .72s steps(1, end) infinite;
}
@keyframes sa-answer-caret { 50% { opacity: 0; } }
.sa-jump-latest {
position: absolute;
inset-inline-start: 50%;
bottom: 5.35rem;
z-index: 12;
display: grid;
width: 2.15rem;
height: 2.15rem;
padding: 0;
place-items: center;
border: 1px solid var(--line);
border-radius: 50%;
background: var(--card);
color: var(--t2);
box-shadow: var(--shadow-sm);
transform: translateX(-50%);
cursor: pointer;
}
.sa-jump-latest:hover { border-color: var(--teal-border); color: var(--brand); }
.sa-main .va-composer {
position: sticky;
bottom: 0;
z-index: 12;
display: grid;
flex: 0 0 auto;
margin: .65rem clamp(.75rem, 2.5vw, 1.5rem) 1rem;
padding: .35rem;
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
gap: .35rem;
border: 1px solid var(--line);
border-radius: 1rem;
background: var(--surface);
box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
}
.sa-main .va-input {
min-height: 2.9rem;
max-height: 9rem;
padding: .72rem .75rem;
overflow-y: auto;
resize: none;
border: 0;
border-radius: .75rem;
background: transparent;
line-height: 1.45;
}
.sa-main .va-input:focus { border-color: transparent; box-shadow: none; }
.sa-main .va-composer:focus-within {
border-color: color-mix(in srgb, var(--teal) 58%, transparent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 10%, transparent), 0 8px 24px rgba(15,23,42,.06);
}
.sa-main .va-composer .btn {
display: grid;
width: 2.75rem;
height: 2.75rem;
min-width: 2.75rem;
padding: 0;
place-items: center;
align-self: end;
border-radius: .8rem;
}
.sa-send-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.sa-send-icon { display: grid; place-items: center; font-size: 1.1rem; line-height: 1; }
.va-composer.is-busy .sa-send-icon { font-size: 0; }
.va-composer.is-busy .sa-send-icon::after {
content: '';
width: .9rem;
height: .9rem;
border: 2px solid rgba(255,255,255,.45);
border-top-color: #fff;
border-radius: 50%;
animation: sa-spin .75s linear infinite;
}
@keyframes sa-spin { to { transform: rotate(360deg); } }
.sa-main > .va-chat > .sa-error { margin: 0 clamp(.9rem, 3vw, 1.75rem); padding: .45rem .55rem 0; }
.sa-conv {
display: block;
width: 100%;
text-align: start;
padding: .5rem .625rem;
border: 1px solid transparent;
border-radius: var(--radius-sm, 8px);
background: transparent;
color: inherit;
font: inherit;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sa-conv:hover { background: var(--surface-2, rgba(127,127,127,.08)); }
.sa-conv.is-active {
background: var(--surface-2, rgba(127,127,127,.12));
border-color: var(--border, rgba(127,127,127,.25));
font-weight: 600;
}
.sa-conv:focus-visible,
.sa-fb-btn:focus-visible,
.sa-fb-reason:focus-visible,
.sa-retry:focus-visible { outline: 2px solid var(--accent, #4c8bf5); outline-offset: 2px; }
.sa-muted { color: var(--text-muted, #6b7280); font-size: .875rem; }
.sa-empty { padding: .75rem .25rem; }
.sa-error { color: var(--danger, #b42318); padding: .75rem; }
/* The answer body. `pre-wrap` moved off the container and onto the paragraph:
the container now holds real and
elements, and pre-wrap on a parent
turns the whitespace BETWEEN those elements into visible blank lines. */
/* …and the SAME trap one level higher. `.va-bubble` is shared with the older
adviser page, which puts raw text in it and needs `pre-wrap`; this page puts
elements in it, and every newline BETWEEN those elements became a blank line,
so each paragraph and list carried a doubled gap the stylesheet never asked
for. Reset here rather than on the shared rule the other page depends on. */
.sa-layout .va-bubble { white-space: normal; }
.sa-body { display: flow-root; }
.sa-para { white-space: pre-wrap; margin: 0 0 .6rem; }
.sa-body > :last-child { margin-bottom: 0; }
/* `padding-inline-start`, not `padding-left`: the marker belongs on the side the
text starts from, and an Arabic answer inside an English interface is exactly
the case this screen got wrong. */
.sa-list { margin: 0 0 .6rem; padding-inline-start: 1.35rem; }
.sa-list li { margin: 0 0 .2rem; }
.sa-list li::marker { color: var(--t2); }
/* Structured timetable evidence inside the answer. It is deliberately a set of
read-only disclosure cards: there is no select/apply affordance because the
adviser cannot save a timetable or register a course. */
.sa-timetable {
min-width: 0;
max-width: 100%;
margin-top: .8rem;
padding-top: .75rem;
border-top: 1px solid var(--line);
}
.sa-tt-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: .75rem;
margin-bottom: .4rem;
}
.sa-tt-title { margin: 0; color: var(--t1); font-size: .95rem; }
.sa-tt-term,
.sa-tt-coverage,
.sa-tt-credits {
display: inline-flex;
align-items: center;
width: fit-content;
padding: .12rem .45rem;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--surface-2);
color: var(--t2);
font-size: .75rem;
font-variant-numeric: tabular-nums;
}
.sa-tt-boundary {
margin: 0 0 .65rem;
padding: .5rem .6rem;
border-inline-start: 3px solid var(--brand);
border-radius: var(--radius-sm);
background: var(--teal-dim);
color: var(--t2);
font-size: .8rem;
}
.sa-tt-replacement {
display: grid;
gap: .35rem;
margin: 0 0 .65rem;
padding: .55rem .65rem;
border: 1px solid var(--teal-border);
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--teal-dim) 78%, var(--surface));
}
.sa-tt-replacement-swap {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .2rem;
margin: 0;
color: var(--t1);
font-size: .84rem;
font-weight: 700;
}
.sa-tt-replacement-code {
display: inline-flex;
padding: .12rem .42rem;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--surface);
font-size: .8rem;
}
.sa-tt-replacement-code.is-removed {
color: var(--danger);
text-decoration: line-through;
text-decoration-thickness: 1px;
}
.sa-tt-replacement-code.is-added {
border-color: var(--teal-border);
color: var(--brand-strong);
}
.sa-tt-replacement-caution {
margin: 0;
padding-top: .35rem;
border-top: 1px solid color-mix(in srgb, var(--warning) 30%, var(--line));
color: var(--t2);
font-size: .76rem;
line-height: 1.45;
}
.sa-tt-constraints {
margin: 0 0 .65rem;
padding: .55rem .6rem;
border: 1px solid var(--teal-border);
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--teal-dim) 70%, var(--surface));
}
.sa-tt-constraints .sa-tt-subtitle { margin-top: 0; color: var(--brand-strong); }
.sa-tt-constraint-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.sa-tt-constraint-chip {
display: inline-flex;
align-items: center;
gap: .2rem;
min-width: 0;
padding: .24rem .5rem;
border: 1px solid var(--teal-border);
border-radius: 999px;
background: var(--surface);
color: var(--t1);
font-size: .76rem;
}
.sa-tt-constraint-chip.is-pinned { border-style: dashed; }
.sa-tt-constraint-alert {
margin: 0 0 .65rem;
padding: .58rem .65rem;
border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--line));
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--danger) 7%, var(--surface));
color: var(--t1);
font-size: .8rem;
}
.sa-tt-constraint-alert .sa-tt-subtitle { margin-top: 0; color: var(--danger); }
.sa-tt-constraint-alert ul { margin: 0; padding-inline-start: 1.2rem; }
.sa-tt-constraint-alert li + li { margin-top: .25rem; }
.sa-tt-current,
.sa-tt-option {
min-width: 0;
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--surface);
}
.sa-tt-current { margin-bottom: .55rem; }
.sa-tt-current > summary,
.sa-tt-summary {
position: relative;
display: flex;
align-items: center;
gap: .55rem;
padding: .58rem .65rem;
color: var(--t1);
cursor: pointer;
list-style: none;
}
.sa-tt-current > summary::-webkit-details-marker,
.sa-tt-summary::-webkit-details-marker { display: none; }
.sa-tt-current > summary::before,
.sa-tt-summary::before {
content: '›';
flex: 0 0 auto;
color: var(--brand);
font-size: 1.15rem;
line-height: 1;
transition: transform .15s ease;
}
.sa-tt-current[open] > summary::before,
.sa-tt-option[open] > .sa-tt-summary::before { transform: rotate(90deg); }
.sa-tt-current > summary:focus-visible,
.sa-tt-summary:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.sa-tt-current-list { display: grid; gap: .4rem; padding: 0 .65rem .65rem; }
.sa-tt-current-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: .12rem .65rem;
padding: .42rem .5rem;
border-radius: var(--radius-sm);
background: var(--surface-2);
}
.sa-tt-course-name { min-width: 0; color: var(--t2); font-size: .78rem; }
.sa-tt-current-meeting { grid-column: 2; color: var(--t2); font-size: .76rem; }
.sa-tt-options { display: grid; gap: .5rem; }
.sa-tt-option[open] { border-color: var(--teal-border); box-shadow: inset 3px 0 0 var(--brand); }
.sa-tt-option-name { min-width: 0; overflow-wrap: anywhere; }
.sa-tt-summary-meta {
display: flex;
flex: 0 0 auto;
flex-wrap: wrap;
justify-content: flex-end;
gap: .3rem;
margin-inline-start: auto;
}
.sa-tt-option-body { padding: 0 .65rem .65rem; }
.sa-tt-subtitle { margin: .1rem 0 .35rem; color: var(--t2); font-size: .77rem; }
.sa-tt-meetings,
.sa-tt-unplaced { display: grid; gap: .32rem; margin: 0; padding: 0; list-style: none; }
.sa-tt-meeting {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: .5rem;
padding: .42rem .5rem;
border-radius: var(--radius-sm);
background: var(--surface-2);
}
.sa-tt-meeting-course { display: flex; min-width: 0; flex-direction: column; }
.sa-tt-meeting-course small { overflow: hidden; color: var(--t2); text-overflow: ellipsis; white-space: nowrap; }
.sa-tt-course-key { color: var(--t1); font-size: .82rem; }
.sa-tt-when { display: flex; align-items: center; gap: .45rem; white-space: nowrap; }
.sa-tt-day { color: var(--t2); font-size: .78rem; }
.sa-tt-time { color: var(--t1); font-size: .78rem; font-variant-numeric: tabular-nums; }
.sa-tt-empty { margin: .1rem 0 0; color: var(--t2); font-size: .8rem; }
.sa-tt-unplaced-title { margin-top: .65rem; color: var(--danger); }
.sa-tt-unplaced li {
padding: .42rem .5rem;
border-radius: var(--radius-sm);
background: var(--surface-2);
font-size: .8rem;
}
.sa-tt-reason { display: block; margin-top: .15rem; color: var(--t2); }
@media (max-width: 520px) {
.sa-tt-summary { align-items: flex-start; flex-wrap: wrap; }
.sa-tt-summary-meta { width: 100%; margin-inline-start: 1.7rem; justify-content: flex-start; }
.sa-tt-current-row,
.sa-tt-meeting { grid-template-columns: 1fr; }
.sa-tt-current-meeting { grid-column: 1; }
.sa-tt-when { justify-content: space-between; }
}
/* Graduation scenarios reuse the shared prerequisite SVG, but the vertical
bands are simulated academic terms rather than declared programme levels. */
.sa-graduation-map {
min-width: 0;
max-width: 100%;
margin-top: .8rem;
padding-top: .75rem;
border-top: 1px solid var(--line);
}
.sa-grad-heading-actions { display: flex; align-items: center; justify-content: flex-end; gap: .4rem; }
.sa-grad-expand { white-space: nowrap; }
html.sa-overlay-open { overflow: hidden; }
.sa-graduation-map.is-expanded {
position: fixed;
inset: clamp(.5rem, 2vw, 1.5rem);
z-index: 2000;
display: block;
max-width: none;
margin: 0;
padding: clamp(.8rem, 2vw, 1.4rem);
overflow: auto;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--card);
box-shadow: 0 30px 90px rgba(15, 23, 42, .35);
}
.sa-graduation-map.is-expanded .sa-tt-heading {
position: sticky;
top: -.05rem;
z-index: 3;
padding: .25rem 0 .7rem;
background: var(--card);
}
.sa-graduation-map.is-expanded .sa-grad-desktop { display: block; overflow-x: auto; }
.sa-graduation-map.is-expanded .sa-grad-mobile { display: none; }
.sa-graduation-map.is-expanded .sa-grad-panel { min-height: 60vh; }
.sa-grad-result {
margin: 0 0 .55rem;
padding: .5rem .6rem;
border-radius: var(--radius-sm);
color: var(--t2);
font-size: .82rem;
}
.sa-grad-result.is-complete {
background: color-mix(in srgb, var(--success) 10%, transparent);
border-inline-start: 3px solid var(--success);
}
.sa-grad-result.is-incomplete {
background: color-mix(in srgb, #b45309 9%, transparent);
border-inline-start: 3px solid #b45309;
}
.sa-grad-change {
margin: 0 0 .55rem;
padding: .45rem .55rem;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--surface-2);
color: var(--t2);
font-size: .8rem;
}
.sa-grad-panel {
min-width: 0;
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--surface);
}
.sa-grad-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: .5rem;
padding: .5rem .6rem;
border-bottom: 1px solid var(--line);
}
.sa-grad-toolbar .pg-modes { margin-inline-start: 0; }
.sa-graduation-map:not(.is-expanded) .sa-grad-toolbar .pg-modes { display: none; }
.sa-graduation-map.is-expanded .sa-grad-toolbar .pg-modes { display: flex; }
.sa-grad-desktop {
display: none;
min-width: 0;
max-width: 100%;
overflow-x: auto;
padding: .45rem;
}
.sa-grad-mobile {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
align-items: start;
gap: .5rem;
padding: .55rem;
}
.sa-grad-blockers {
margin-top: .55rem;
overflow: hidden;
border: 1px solid color-mix(in srgb, #b45309 28%, var(--line));
border-radius: var(--radius-sm);
}
.sa-grad-blockers > summary {
padding: .5rem .6rem;
color: var(--t1);
cursor: pointer;
font-size: .82rem;
font-weight: 700;
}
.sa-grad-blocker-list {
display: grid;
gap: .35rem;
margin: 0;
padding: 0 .6rem .6rem;
list-style: none;
}
.sa-grad-blocker {
padding: .42rem .5rem;
border-radius: var(--radius-sm);
background: var(--surface-2);
font-size: .8rem;
}
.sa-grad-blocker-reason { display: block; margin-top: .12rem; color: var(--t2); }
.sa-grad-mobile-term {
min-width: 0;
padding: .55rem .6rem;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--surface-2);
}
.sa-grad-band-title { margin: 0 0 .35rem; color: var(--t2); font-size: .76rem; }
.sa-grad-mobile-courses { display: flex; flex-wrap: wrap; gap: .3rem; }
.sa-grad-course {
display: inline-flex;
align-items: center;
padding: .18rem .42rem;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--surface-2);
color: var(--t2);
font-size: .72rem;
font-weight: 700;
}
.sa-grad-course.is-passed { border-color: color-mix(in srgb, var(--success) 45%, var(--line)); color: var(--success); }
.sa-grad-course.is-studying { border-color: color-mix(in srgb, var(--royal) 45%, var(--line)); color: var(--royal); }
.sa-grad-course.is-open { border-color: color-mix(in srgb, var(--teal) 45%, var(--line)); color: var(--teal); }
.sa-grad-more { margin-top: .45rem; }
.sa-grad-more > summary {
min-height: 2.25rem;
padding: .35rem .45rem;
border-radius: var(--radius-sm);
color: var(--brand);
cursor: pointer;
font-size: .75rem;
font-weight: 700;
}
.sa-grad-more > .sa-grad-mobile-courses { padding-top: .4rem; }
@media (max-width: 768px) {
.sa-grad-toolbar { justify-content: flex-end; }
}
/* Status is informative, not decorative: a failed turn has to be visibly
different from an answered one, or a student retries something that worked. */
.sa-status { margin: .5rem 0 0; font-size: .875rem; }
.sa-status-failed { color: var(--danger, #b42318); }
.sa-status-pending { color: var(--text-muted, #6b7280); font-style: italic; }
.sa-status-abstained,
.sa-status-escalated { color: var(--warning, #b54708); }
/* A failed question is still the student's message, so its recovery action stays
inside that bubble as one compact unit instead of looking like a second reply. */
.sa-retry-state {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: .5rem .75rem;
margin-top: .65rem;
padding-top: .6rem;
border-top: 1px solid color-mix(in srgb, var(--danger, #b42318) 24%, var(--line));
}
.sa-retry-state .sa-status {
flex: 1 1 13rem;
margin: 0;
line-height: 1.45;
}
.sa-retry-state .sa-retry {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
gap: .35rem;
min-height: 44px;
margin: 0;
padding: .48rem .78rem;
border: 1px solid color-mix(in srgb, var(--danger, #b42318) 42%, var(--line));
border-radius: .7rem;
background: color-mix(in srgb, var(--danger, #b42318) 6%, var(--card));
color: var(--danger, #b42318);
font: inherit;
font-size: .84rem;
font-weight: 750;
line-height: 1.2;
cursor: pointer;
touch-action: manipulation;
transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.sa-retry-state .sa-retry:hover {
border-color: color-mix(in srgb, var(--danger, #b42318) 64%, var(--line));
background: color-mix(in srgb, var(--danger, #b42318) 11%, var(--card));
}
.sa-retry-state .sa-retry:active { transform: translateY(1px); }
.sa-retry-icon { font-size: 1rem; line-height: 1; }
/* ── citations ── */
.sa-citations {
margin-top: .75rem;
padding-top: .625rem;
border-top: 1px solid var(--border, rgba(127,127,127,.25));
}
.sa-citations-title { margin: 0 0 .375rem; font-size: .8125rem; font-weight: 600; opacity: .85; }
.sa-citation-list { margin: 0; padding-inline-start: 1.1rem; display: flex; flex-direction: column; gap: .375rem; }
.sa-citation { font-size: .875rem; }
.sa-citation-text { display: block; }
.sa-citation-details { margin-top: .25rem; font-size: .8125rem; }
.sa-citation-details summary { cursor: pointer; color: var(--text-muted, #6b7280); }
.sa-citation-meta { display: grid; grid-template-columns: auto 1fr; gap: .125rem .5rem; margin: .375rem 0 0; }
.sa-citation-meta dt { font-weight: 600; opacity: .8; }
.sa-citation-meta dd { margin: 0; overflow-wrap: anywhere; }
.sa-citation-approved { margin: .375rem 0 0; opacity: .75; }
/* ── feedback ── */
.sa-feedback {
margin-top: .9rem;
padding-top: .6rem;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .375rem;
border-top: 1px solid var(--line);
}
.sa-feedback-q { color: var(--t3); font-size: .78rem; margin-inline-end: .25rem; }
.sa-feedback .sa-fb-btn {
min-height: 1.9rem;
padding: .2rem .55rem;
border-color: transparent;
background: transparent;
color: var(--t2);
font-size: .76rem;
}
.sa-feedback .sa-fb-btn:hover { border-color: var(--line); background: var(--surface-2); }
.sa-fb-btn.is-selected,
.sa-fb-reason.is-selected {
background: var(--accent, #4c8bf5);
border-color: var(--accent, #4c8bf5);
color: #fff;
}
.sa-fb-reasons { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .25rem; }
/* `display` wins over the `hidden` ATTRIBUTE, so a flex container marked hidden
stays visible. Without this the negative-feedback reasons were on screen
before the student had said anything was wrong. */
/* Scoped to this screen rather than to one class: `hidden` is an attribute the UA
sheet implements as `display: none`, so ANY rule giving an element a display
value silently outranks it. That is how the negative-feedback reasons came to be
on screen before the student had said anything was wrong, and the same trap is
one declaration away for every other element here that JS toggles. */
.sa-layout [hidden] { display: none !important; }
/* ── adviser inbox ───────────────────────────────────────────────
The queue is a working view: dense, scannable, and left-to-right even though the
questions inside it are Arabic. Each cell that holds student prose carries
dir="auto" so the text runs the way it was written without turning the table
round. */
.ai-filters { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; }
.ai-filter { display: flex; flex-direction: column; gap: .25rem; }
.ai-filter label { font-size: .8125rem; color: var(--t2); }
.ai-filter select, .ai-filter input {
border: 1px solid var(--line);
border-radius: var(--radius-sm, 8px);
padding: .375rem .5rem;
background: var(--surface);
color: inherit;
font: inherit;
}
.ai-filter-check label { flex-direction: row; align-items: center; gap: .375rem; display: flex; }
.table-wrap { overflow-x: auto; }
.ai-cases { width: 100%; border-collapse: collapse; }
.ai-cases th, .ai-cases td {
padding: .5rem .625rem;
border-bottom: 1px solid var(--line);
text-align: start;
vertical-align: top;
font-size: .875rem;
}
.ai-cases thead th { color: var(--t2); font-weight: 600; white-space: nowrap; }
.ai-question { max-width: 22rem; }
.ai-empty { text-align: center; color: var(--t2); padding: 1.5rem; }
.ai-muted { color: var(--t2); }
.ai-status { border-radius: 999px; padding: .0625rem .5rem; font-size: .8125rem; white-space: nowrap; }
.ai-status-open { background: color-mix(in srgb, var(--teal) 18%, transparent); }
.ai-status-assigned { background: color-mix(in srgb, var(--brand) 18%, transparent); }
.ai-status-needs_information { background: color-mix(in srgb, orange 22%, transparent); }
.ai-status-resolved { background: color-mix(in srgb, green 18%, transparent); }
.ai-status-closed { background: var(--surface-2, rgba(127,127,127,.14)); }
.ai-case-h { font-size: 1rem; margin: 0 0 .5rem; }
.ai-case-sub { font-size: .875rem; margin: .75rem 0 .25rem; color: var(--t2); }
.ai-case-body { margin: 0 0 .5rem; white-space: pre-wrap; }
.ai-case-meta { display: grid; grid-template-columns: auto 1fr; gap: .125rem .75rem; margin: 0; }
.ai-case-meta dt { color: var(--t2); font-size: .875rem; }
.ai-case-meta dd { margin: 0; font-size: .875rem; }
.ai-case-pre {
white-space: pre-wrap;
background: var(--surface-2, rgba(127,127,127,.06));
padding: .625rem;
border-radius: var(--radius-sm, 8px);
margin: .5rem 0 0;
font: inherit;
}
.ai-citations, .ai-missing, .ai-events { margin: 0; padding-inline-start: 1.25rem; }
.ai-events li { margin-bottom: .25rem; font-size: .875rem; }
.ai-event-kind { font-weight: 600; margin-inline-end: .375rem; }
.ai-action-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }
.ai-two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.ai-two-up textarea {
width: 100%;
border: 1px solid var(--line);
border-radius: var(--radius-sm, 8px);
padding: .5rem;
background: var(--surface);
color: inherit;
font: inherit;
resize: vertical;
margin-bottom: .5rem;
}
.ai-label { display: block; margin-bottom: .25rem; font-size: .875rem; font-weight: 600; }
.ai-notes { max-height: 12rem; overflow-y: auto; }
.ai-action-error { color: var(--danger, #b42318); margin: .75rem 0 0; }
@media (max-width: 900px) {
.ai-two-up { grid-template-columns: 1fr; }
}
/* ── handing a case to a person ──────────────────────────────────
Direction-agnostic like the rest of this screen: padding-inline and text-align
start, so the same rules serve Arabic and English. */
.sa-escalate { margin-top: .5rem; }
.sa-escalate.is-prominent {
border: 1px solid var(--line);
border-radius: var(--radius-sm, 8px);
padding: .625rem .75rem;
background: var(--surface-2, rgba(127,127,127,.06));
}
.sa-escalate-lead { margin: 0 0 .5rem; font-weight: 600; text-align: start; }
.sa-preview {
margin-top: .5rem;
padding: .75rem;
border: 1px solid var(--line);
border-radius: var(--radius-sm, 8px);
background: var(--surface);
text-align: start;
}
.sa-preview-title { margin: 0 0 .375rem; font-size: .95rem; }
.sa-preview-list { margin: 0 0 .5rem; padding-inline-start: 1.25rem; }
.sa-preview-list li { margin-bottom: .125rem; }
.sa-preview-limit { margin: 0 0 .625rem; color: var(--t2); font-size: .875rem; }
.sa-preview-note-label { display: block; margin-bottom: .25rem; font-size: .875rem; }
.sa-preview-note {
width: 100%;
border: 1px solid var(--line);
border-radius: var(--radius-sm, 8px);
padding: .5rem;
font: inherit;
background: var(--surface);
color: inherit;
resize: vertical;
}
.sa-preview-actions { display: flex; gap: .5rem; margin-top: .625rem; flex-wrap: wrap; }
.sa-preview-error { margin: .5rem 0 0; color: var(--danger, #b42318); font-size: .875rem; }
.sa-case {
margin-top: .5rem;
padding: .75rem;
border: 1px solid var(--line);
border-radius: var(--radius-sm, 8px);
background: var(--surface-2, rgba(127,127,127,.06));
text-align: start;
}
.sa-case-title { margin: 0 0 .5rem; font-size: .95rem; }
.sa-case-meta { display: grid; grid-template-columns: auto 1fr; gap: .125rem .75rem; margin: 0; }
.sa-case-meta dt { color: var(--t2); font-size: .875rem; }
.sa-case-meta dd { margin: 0; font-size: .875rem; }
/* A case number is quoted over a telephone and read back; it must not be
ellipsised, reflowed or bidi-reordered. */
.sa-case-ref { font-weight: 700; font-variant-numeric: tabular-nums; unicode-bidi: isolate; }
.sa-case-reply { margin-top: .625rem; padding-top: .625rem; border-top: 1px solid var(--line); }
.sa-case-reply h5 { margin: 0 0 .25rem; font-size: .875rem; color: var(--t2); }
.sa-case-reply p { margin: 0; }
.sa-fb-reason { font-size: .8125rem; }
.sa-retry { margin-top: .5rem; }
@media (max-width: 768px) {
.sa-layout > .sa-main { height: 100%; }
.sa-layout > .sa-sidebar {
position: absolute;
inset-block: .4rem;
inset-inline: .4rem;
width: auto;
}
.sa-workspace-head { padding: .65rem .7rem; }
.sa-workspace-kicker { display: none; }
.sa-workspace-head h2 { max-width: 34vw; font-size: .82rem; }
.sa-workspace-actions { gap: .35rem; }
.sa-workspace-actions .btn { padding-inline: .55rem; }
.sa-history-toggle span:last-child,
.sa-new-chat span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.sa-main .va-messages { padding: .85rem .75rem; }
.sa-main .va-message-user { max-width: 90%; }
.sa-main .va-message-assistant { gap: .45rem; }
.sa-main .va-avatar { width: 1.65rem; height: 1.65rem; }
.sa-main .va-examples { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sa-main .va-examples button { min-height: 3.5rem; }
.sa-empty-state { padding-block: 1rem; }
.sa-empty-state > p { margin-bottom: .8rem; }
.sa-main .va-composer { margin: .5rem .6rem .65rem; }
.sa-jump-latest { bottom: 4.9rem; }
.sa-grad-heading-actions { width: 100%; justify-content: space-between; }
.sa-graduation-map .sa-tt-heading { align-items: flex-start; flex-wrap: wrap; }
.sa-grad-expand { flex: 1 1 auto; }
}
@media (max-width: 359px) {
.sa-main .va-examples { grid-template-columns: 1fr; }
.sa-retry-state .sa-status { flex-basis: 100%; }
.sa-retry-state .sa-retry { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.sa-drawer-backdrop,
.sa-sidebar,
.sa-main .va-messages { scroll-behavior: auto; transition: none; }
.sa-thinking-dots > span,
.sa-answer-caret { animation: none; }
.va-composer.is-busy .sa-send-icon::after { animation-duration: 1.5s; }
}
/* ── student timetable planner ───────────────────────────────────
Three stacked cards: what was asked for, how to build it, and what came back.
The order is the decision order, so the destructive choice sits between the
selection and its consequences rather than beside the results.
Every colour below is a real token. The first draft reached for `--warn`, `--ok`
and `--accent-soft`, none of which this design system defines — so the hardcoded
fallbacks always won, and the two affordances that most need to read as
destructive and as chosen were the only ones that did not follow Deep Navy. */
.sp-layout { display: flex; flex-direction: column; }
.sp-boundary {
display: flex; align-items: flex-start; gap: .75rem; margin-bottom: 1rem;
padding: .875rem 1rem; border: 1px solid var(--teal-border);
border-radius: var(--radius); background: var(--teal-dim); color: var(--t1);
}
.sp-boundary-icon {
display: grid; place-items: center; flex: 0 0 1.5rem; height: 1.5rem;
border-radius: 50%; background: var(--brand); color: white; font-weight: 800;
font-family: var(--font-serif);
}
.sp-boundary p { margin: .2rem 0 0; color: var(--t2); font-size: .875rem; }
.sp-kpis {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem;
margin-bottom: 1rem;
}
.sp-kpi-card {
display: flex; flex-direction: column; gap: .15rem; padding: .75rem .875rem;
border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
}
.sp-kpi-card span { color: var(--t2); font-size: .75rem; }
.sp-kpi-card strong { color: var(--brand); font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.sp-section-head {
display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 1rem;
}
.sp-section-head > div { display: grid; grid-template-columns: auto 1fr; column-gap: .6rem; align-items: center; }
.sp-section-head p { grid-column: 2; }
.sp-step {
grid-row: 1 / span 2; display: grid; place-items: center; width: 1.8rem; height: 1.8rem;
border-radius: 50%; background: var(--brand); color: #fff; font-weight: 800; font-size: .8rem;
}
.sp-current-summary { display: flex; flex-wrap: wrap; gap: .45rem; }
.sp-current-chip {
display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .65rem;
border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
}
.sp-current-section { color: var(--t2); font-size: .78rem; }
.sp-current-details { margin-top: .75rem; }
.sp-current-details > summary,
.sp-option-details > summary { color: var(--brand); cursor: pointer; font-weight: 700; }
.sp-current-details[open] > summary { margin-bottom: .75rem; }
.sp-week { overflow-x: auto; }
.sp-week:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.sp-week .wg-blocks { min-width: 620px; }
.sp-course-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .75fr); gap: 1rem; }
.sp-catalog-panel, .sp-selection-panel { min-width: 0; }
.sp-selection-panel {
padding: .875rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--surface) 94%, var(--brand) 6%);
}
.sp-search {
display: flex; align-items: center; gap: .5rem; padding: .55rem .7rem;
border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
}
.sp-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 2px var(--teal-dim); }
.sp-search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--t1); }
.sp-filter-row { display: flex; flex-wrap: wrap; gap: .4rem; margin: .65rem 0; }
.sp-filter {
border: 1px solid var(--line); border-radius: 999px; background: transparent;
color: var(--t2); padding: .25rem .7rem; font-size: .78rem; font-weight: 650;
}
.sp-filter:hover, .sp-filter.is-active { border-color: var(--brand); background: var(--teal-dim); color: var(--brand); }
.sp-catalog-scope {
margin: -.1rem 0 .65rem; padding-inline-start: .65rem; border-inline-start: 2px solid var(--teal-border);
color: var(--t2); font-size: .74rem; line-height: 1.55;
}
.sp-catalog { display: flex; flex-direction: column; gap: .45rem; max-height: 30rem; overflow-y: auto; padding-inline-end: .2rem; }
.sp-course-card {
display: flex; align-items: center; justify-content: space-between; gap: .75rem;
padding: .65rem .7rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
background: var(--surface);
}
.sp-course-card.is-selected { border-color: var(--brand); box-shadow: inset 3px 0 0 var(--brand); }
[dir="rtl"] .sp-course-card.is-selected { box-shadow: inset -3px 0 0 var(--brand); }
.sp-course-card.is-disabled { opacity: .65; }
.sp-course-main { min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.sp-course-title, .sp-course-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
.sp-course-meta { font-size: .75rem; }
.sp-tag.sp-tag-rec { border-color: var(--brand); background: var(--teal-dim); color: var(--brand); }
.sp-tag.sp-tag-ready { border-color: var(--success); color: var(--success); }
.sp-tag.sp-tag-blocked, .sp-tag.sp-tag-warning { border-color: var(--warning); color: var(--warning); }
.sp-tag.sp-tag-current { border-color: var(--line); background: var(--glass-bg); color: var(--t2); }
.sp-requested { gap: .6rem; }
.sp-requested-item {
display: flex; flex-direction: column; align-items: stretch; gap: .55rem;
min-width: 0; padding: .15rem 0 .75rem; border-bottom: 1px solid var(--line);
}
.sp-requested-item:last-child { border-bottom: 0; }
.sp-requested-label { min-width: 0; width: 100%; display: flex; flex-direction: column; gap: .12rem; }
.sp-requested-title { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; }
.sp-requested-label .sp-code { font-size: .95rem; }
.sp-requested-label .sp-name {
display: block; max-width: 100%; font-size: .9rem; line-height: 1.5;
white-space: normal; overflow-wrap: break-word; word-break: normal;
}
.sp-requested-controls {
display: flex; align-items: stretch; flex-wrap: wrap; gap: .5rem; min-width: 0; width: 100%;
}
.sp-section-select {
flex: 1 1 15rem; width: auto; max-width: 100%; min-width: min(15rem, 100%); min-height: 44px;
}
html body .btn.sp-requested-remove {
flex: 0 0 auto; min-height: 44px; padding-inline: .75rem; white-space: nowrap;
}
.sp-section-select:disabled { opacity: .8; color: var(--t1); }
.sp-fixed-label { color: var(--t2); text-decoration: none; cursor: default; }
.sp-selection-note { margin: .75rem 0 0; color: var(--t2); font-size: .75rem; }
.sp-modes {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem;
min-width: 0; margin: 0; padding: 0; border: 0;
}
.sp-mode-card {
display: flex; align-items: flex-start; gap: .65rem; padding: .8rem;
border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer;
}
.sp-mode-card:has(input:checked) { border-color: var(--brand); background: var(--teal-dim); }
.sp-mode-card input { margin-top: .2rem; accent-color: var(--brand); }
.sp-mode-card span { display: flex; flex-direction: column; gap: .2rem; }
.sp-mode-card small { color: var(--t2); }
.sp-generate-row { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }
.sp-generate-row .sp-status { flex: 1 1 18rem; margin: 0; }
.sp-option-choices {
display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
gap: .65rem; margin-bottom: 1rem;
}
.sp-option-choice {
display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .35rem .6rem;
width: 100%; padding: .75rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
background: var(--surface); color: var(--t1); text-align: start;
}
.sp-option-choice:hover, .sp-option-choice:focus-visible { border-color: var(--brand); }
.sp-option-choice.is-active { border-color: var(--brand); background: var(--teal-dim); box-shadow: inset 0 0 0 1px var(--brand); }
.sp-option-choice-title, .sp-option-choice-coverage, .sp-option-choice > .sp-muted,
.sp-option-choice-missing { grid-column: 1; }
.sp-option-choice > .sp-tag { grid-column: 2; grid-row: 1; }
.sp-option-choice-coverage { font-weight: 750; color: var(--brand); }
.sp-option-choice-missing { color: var(--warning); font-size: .75rem; }
.sp-option-preview:empty { display: none; }
.sp-option { padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.sp-option-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.sp-option-coverage { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; }
.sp-option-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: .75rem 0; }
.sp-option-facts > div { display: flex; flex-direction: column; padding: .5rem .6rem; border-radius: var(--radius-sm); background: var(--teal-dim); }
.sp-option-facts span { color: var(--t2); font-size: .72rem; }
.sp-option-facts strong { color: var(--t1); font-variant-numeric: tabular-nums; }
.sp-option-week { margin-bottom: .75rem; }
.sp-option-legend { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; margin: .25rem 0 .65rem; color: var(--t2); font-size: .75rem; }
.sp-option-legend span::before { content: ""; display: inline-block; width: .65rem; height: .65rem; margin-inline-end: .3rem; border-radius: 50%; vertical-align: -.02rem; }
.sp-legend-current::before { background: #64748b; }
.sp-legend-proposed::before { background: var(--brand); }
.sp-recorded-clear { margin-inline-start: auto; color: var(--success); font-weight: 700; }
.sp-recorded-clear::before { background: var(--success); }
.sp-option-missing { margin: .75rem 0; padding: .7rem; border: 1px solid var(--warning); border-radius: var(--radius-sm); }
.sp-option-missing > strong { display: block; margin-bottom: .35rem; color: var(--warning); }
.sp-unplaced-box { margin-top: 1rem; padding: .75rem; border: 1px solid var(--warning); border-radius: var(--radius-sm); }
.sp-copy-buffer { position: fixed; inset: -9999px auto auto -9999px; }
.sp-layout.is-busy .sp-course-card button,
.sp-layout.is-busy .sp-section-select,
.sp-layout.is-busy .sp-filter { pointer-events: none; opacity: .6; }
/* The same guard the adviser layout needs: a flex or grid `display` on a child
beats the `hidden` attribute, and an "empty" message then sits under the list
it was meant to replace. */
.sp-layout [hidden] { display: none !important; }
.sp-muted { color: var(--t2); }
.sp-note { margin: .75rem 0 .25rem; font-weight: 600; }
.sp-status { min-height: 1.5em; color: var(--t2); }
.sp-scroll-hint { margin: .35rem 0 0; color: var(--t2); font-size: .72rem; }
/* Present to a screen reader, absent to the eye. The table caption names which
option a row belongs to; on screen the heading above it already says so. */
.sp-visually-hidden {
position: absolute; width: 1px; height: 1px;
margin: -1px; padding: 0; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.sp-requested, .sp-unplaced { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .375rem; }
.sp-code { font-weight: 600; }
.sp-name { color: var(--t2); }
.sp-reason { color: var(--t2); font-size: .875rem; }
.sp-added { font-size: .8125rem; color: var(--t2); margin: 0 0 .5rem; }
/* Fixed vs automatic is the distinction the student is actually managing, so it
is a badge rather than a sentence. */
.sp-tag { font-size: .75rem; border-radius: 999px; padding: .125rem .5rem; border: 1px solid var(--line); }
.sp-tag-fixed { border-color: var(--brand); color: var(--brand); }
.sp-tag-auto { color: var(--t2); }
.sp-confirm { margin-top: .75rem; padding: .75rem; border: 1px solid var(--warning); border-radius: var(--radius-sm); }
.sp-warning { margin: 0 0 .5rem; font-weight: 600; color: var(--warning); }
.sp-option-selected { border-color: var(--success); border-width: 2px; }
.sp-option .sp-option-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.sp-option header h3 { margin: 0; }
/* The timetable is wide and the page must not be, so the scroll lives on a
WRAPPER. Putting `display:block` on the itself scrolled correctly and
silently stripped its table semantics. */
.sp-grid-wrap { overflow-x: auto; margin-bottom: .75rem; }
.sp-grid-wrap:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.sp-grid { width: 100%; border-collapse: collapse; font-size: .875rem; }
.sp-grid th, .sp-grid td { border-bottom: 1px solid var(--line); padding: .25rem .375rem; text-align: start; white-space: nowrap; }
@media (max-width: 480px) {
/* `main` clips horizontal overflow, so a track wider than the viewport does not
scroll — it disappears. The `min()` above is the real fix; this keeps the
option cards readable once they are the full width. */
.sp-option { padding: .5rem; }
.sp-option-head { align-items: flex-start; flex-direction: column; }
.sp-option-head .btn { width: 100%; }
}
@media (max-width: 900px) {
.sp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sp-course-layout { grid-template-columns: 1fr; }
.sp-selection-panel { grid-row: 1; }
.sp-catalog-panel { grid-row: 2; }
.sp-catalog { max-height: 20rem; }
}
@media (max-width: 600px) {
.sp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sp-modes { grid-template-columns: 1fr; }
.sp-selection-panel { padding: .75rem; }
.sp-requested-controls { display: grid; grid-template-columns: minmax(0, 1fr); }
.sp-requested-remove { width: 100%; justify-content: center; }
.sp-current-chip { flex: 1 1 calc(50% - .45rem); justify-content: space-between; }
.sp-recorded-clear { width: 100%; margin-inline-start: 0; }
}
/* ── student course detail ───────────────────────────────────────
Server-rendered and zero-JavaScript, like the locked-course page it is reached
from. Every string here arrived translated from `services/course_detail.py`;
this file chooses a layout and nothing else. */
.cd-layout { display: flex; flex-direction: column; }
.cd-muted { color: var(--t2); }
.cd-empty { color: var(--t2); }
.cd-status { font-weight: 600; margin: 0 0 .5rem; }
.cd-status-blocked { color: var(--warning); }
.cd-status-passed, .cd-status-open_now { color: var(--success); }
.cd-reasons, .cd-prereqs, .cd-options {
list-style: none; margin: 0; padding: 0;
display: flex; flex-direction: column; gap: .375rem;
}
.cd-reasons li { color: var(--t2); }
.cd-prereq, .cd-option { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.cd-code { font-weight: 600; }
.cd-name { color: var(--t2); }
/* The prerequisite's own state, as a badge — the affordance a chat answer cannot
give: three of five marked passed, readable at a glance. */
.cd-tag { font-size: .75rem; border-radius: 999px; padding: .125rem .5rem; border: 1px solid var(--line); }
.cd-tag-passed { border-color: var(--success); color: var(--success); }
.cd-tag-blocked { border-color: var(--warning); color: var(--warning); }
.cd-tag-studying, .cd-tag-open { color: var(--t2); }
.cd-actions { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
/* ── student course guidance and prerequisite map ───────────────
The course page is a decision surface; the full graph lives on its own route.
These layouts keep the same server data readable from desktop down to phone. */
.student-course-jumps {
display: flex;
align-items: center;
gap: .45rem;
flex-wrap: wrap;
}
.student-course-jumps a {
display: inline-flex;
align-items: center;
gap: .3rem;
min-height: 34px;
padding: .38rem .75rem;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--glass-bg);
color: var(--t2);
font-size: .8rem;
font-weight: 700;
text-decoration: none;
transition: border-color .15s, color .15s, background .15s;
}
.student-course-jumps a:hover,
.student-course-jumps a:focus-visible {
border-color: var(--teal);
background: var(--teal-dim);
color: var(--teal);
}
.student-course-jumps .student-course-jumps-map {
margin-inline-start: auto;
border-color: var(--teal-border);
color: var(--teal);
}
.student-guidance-note {
max-width: 72rem;
padding: .55rem .7rem;
border-inline-start: 3px solid var(--teal-border);
border-radius: 8px;
background: color-mix(in srgb, var(--teal) 5%, transparent);
color: var(--t2);
font-size: .8rem;
line-height: 1.55;
}
.student-section-title {
display: flex;
align-items: center;
gap: .45rem;
margin: 0 0 .75rem;
color: var(--t1);
font-family: var(--font-body);
font-size: 1rem;
font-weight: 750;
line-height: 1.35;
}
.student-home-intro {
display: flex;
align-items: baseline;
justify-content: center;
gap: .25rem .4rem;
flex-wrap: wrap;
}
.student-home-name {
max-width: 100%;
color: var(--t1);
font-weight: 700;
overflow-wrap: anywhere;
}
.student-home-section-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: .75rem;
}
.student-home-jumps,
#student-home-summary,
.student-timetable-comparison-card,
.student-home-timetable-card,
#student-home-recommendations {
scroll-margin-top: 1rem;
}
.student-timetable-comparison-card {
border-inline-start: 4px solid var(--teal);
background: color-mix(in srgb, var(--teal) 3%, var(--glass-bg-data));
}
.student-timetable-comparison-scope,
.student-timetable-state {
display: inline-flex;
align-items: center;
width: max-content;
min-height: 25px;
padding: .18rem .5rem;
border: 1px solid var(--line);
border-radius: 999px;
font-size: .68rem;
font-weight: 800;
line-height: 1.2;
}
.student-timetable-comparison-scope {
flex: 0 0 auto;
color: var(--t2);
background: var(--glass-bg-header);
}
.student-home-timetable-card {
position: relative;
overflow: hidden;
}
.student-home-timetable-card--registered { border-inline-start: 4px solid var(--teal); }
.student-home-timetable-card--expected { border-inline-start: 4px dashed var(--line-strong); }
.student-timetable-card-title {
display: grid;
gap: .35rem;
min-width: 0;
}
.student-timetable-state--registered {
border-color: var(--teal-border);
background: var(--teal-dim);
color: var(--teal-deep);
}
.student-timetable-state--expected {
border-style: dashed;
background: var(--glass-bg-header);
color: var(--t2);
}
.student-summary-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: .75rem;
}
.student-summary-advisor {
display: inline-flex;
align-items: center;
gap: .35rem;
min-height: 34px;
padding: .38rem .7rem;
border: 1px solid var(--teal-border);
border-radius: 999px;
background: var(--teal-dim);
color: var(--teal-deep);
font-size: .78rem;
font-weight: 750;
text-decoration: none;
transition: border-color .15s, background .15s, color .15s;
}
.student-summary-advisor:hover,
.student-summary-advisor:focus-visible {
border-color: var(--teal);
background: color-mix(in srgb, var(--teal) 11%, transparent);
color: var(--teal-deep);
}
.student-timetable-host { min-width: 0; }
.student-timetable-calendar {
overflow-x: auto;
scrollbar-width: thin;
}
.student-timetable-calendar:focus-visible {
outline: 2px solid var(--teal);
outline-offset: 3px;
}
.student-timetable-calendar .wg-blocks {
min-width: 720px;
border-color: var(--line-strong);
border-radius: 10px;
background: color-mix(in srgb, var(--line) 82%, var(--t3) 18%);
box-shadow: 0 5px 16px rgba(17, 17, 68, .06);
}
.student-timetable-calendar .wg-segmented {
display: grid;
gap: .35rem;
min-width: 720px;
}
.student-timetable-calendar .wg-segmented .wg-blocks {
width: 100%;
min-width: 0;
}
.student-timetable-calendar .wg-blocks .wg-h {
background: var(--glass-bg-header);
color: var(--t1);
font-size: .72rem;
font-weight: 800;
letter-spacing: .015em;
}
.student-timetable-calendar .wg-blocks .wg-cor { color: var(--t2); }
.student-timetable-calendar .wg-blocks .wg-t {
background: var(--glass-bg-header);
color: var(--t2);
font-size: .68rem;
font-weight: 700;
}
.student-timetable-calendar .wg-blocks .wg-cell {
background: color-mix(in srgb, var(--glass-bg-data) 94%, var(--t2) 6%);
}
.student-timetable-calendar .wg-time-break {
display: grid;
grid-template-columns: minmax(24px, 1fr) auto auto minmax(24px, 1fr);
align-items: center;
gap: .55rem;
min-height: 42px;
padding: .3rem .6rem;
color: var(--t2);
font-size: .7rem;
font-weight: 750;
line-height: 1.35;
text-align: center;
}
.student-timetable-calendar .wg-time-break::before,
.student-timetable-calendar .wg-time-break::after {
content: "";
height: 1px;
background: repeating-linear-gradient(90deg, var(--line-strong) 0 6px, transparent 6px 11px);
}
.student-timetable-calendar .wg-time-break-label { white-space: nowrap; }
.student-timetable-calendar .wg-time-break-range {
padding: .15rem .4rem;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--glass-bg-header);
color: var(--t1);
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.student-timetable-calendar .wg-filled.student-timetable-block {
justify-content: flex-start;
gap: .14rem;
padding: .34rem .42rem;
border: 1px solid var(--line-strong);
border-inline-start-width: 4px;
border-radius: 7px;
box-shadow: 0 3px 10px rgba(17, 17, 68, .10);
}
.student-timetable-calendar .student-timetable-block--current {
border-color: color-mix(in srgb, var(--teal) 42%, var(--line));
border-inline-start-color: var(--teal);
background: color-mix(in srgb, var(--surface) 82%, var(--teal) 18%);
}
.student-timetable-calendar .student-timetable-block--proposed {
border-color: color-mix(in srgb, var(--t3) 40%, var(--line));
border-inline-start-color: var(--t3);
border-inline-start-style: dashed;
background: color-mix(in srgb, var(--surface) 91%, var(--t2) 9%);
}
/* The student portal's own weighting. It used to hang off #studentHomeTimetable,
which no longer exists: the portal now renders one host per snapshot
(#studentHomeTimetable-registered / -expected). Left orphaned, the registered
grid fell through to the neutral grey `--current` rule while the expected grid
kept the brand accent — the emphasis exactly inverted, with the forecast
looking like the fact. Keyed on the card class so it survives the next rename. */
.student-home-timetable-card .student-timetable-block--current {
border-color: color-mix(in srgb, var(--teal) 46%, var(--line));
border-inline-start-color: var(--teal);
background: color-mix(in srgb, var(--surface) 80%, var(--teal) 20%);
}
/* The forecast reads as secondary: dashed edge, no brand fill. Colour is not the
only carrier — the card heading and its "not an actual registration" line say
it in words, and the agenda table repeats it for anyone who cannot see either. */
.student-home-timetable-card .student-timetable-block--proposed {
border-inline-start-color: var(--t3);
border-inline-start-style: dashed;
background: color-mix(in srgb, var(--surface) 92%, var(--t2) 8%);
}
.student-timetable-block-section {
flex: 0 0 auto;
padding: .08rem .28rem;
border: 1px solid color-mix(in srgb, var(--t3) 30%, var(--line));
border-radius: 999px;
background: color-mix(in srgb, var(--surface) 78%, transparent);
color: var(--t2);
font-family: var(--font-mono);
font-size: .65rem;
font-weight: 750;
line-height: 1.2;
}
.student-timetable-block-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: .3rem;
min-width: 0;
}
.student-timetable-calendar .student-timetable-block > .wg-meta {
display: block;
color: var(--t1);
font-size: .68rem;
font-weight: 800;
font-variant-numeric: tabular-nums;
text-align: start;
}
.student-timetable-calendar .student-timetable-block .wg-cid {
color: var(--t1);
font-size: .78rem;
font-weight: 850;
}
.student-timetable-block-name {
display: -webkit-box;
overflow: hidden;
color: var(--t2);
font-size: .65rem;
font-weight: 600;
line-height: 1.25;
overflow-wrap: anywhere;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.student-timetable-block-source {
overflow: hidden;
color: var(--t2);
font-size: .58rem;
font-weight: 750;
line-height: 1.1;
text-overflow: ellipsis;
white-space: nowrap;
}
.student-timetable-agenda {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
border: 0;
white-space: nowrap;
}
.student-timetable-day {
overflow: hidden;
border: 1px solid var(--line);
border-radius: 11px;
background: var(--glass-bg-data);
}
.student-timetable-day-title {
margin: 0;
padding: .55rem .7rem;
border-block-end: 1px solid var(--line);
background: color-mix(in srgb, var(--teal) 5%, var(--glass-bg-header));
color: var(--t1);
font-size: .84rem;
font-weight: 800;
}
.student-timetable-list {
display: grid;
margin: 0;
padding: 0;
list-style: none;
}
.student-timetable-meeting {
border-block-end: 1px solid var(--line);
}
.student-timetable-meeting:last-child { border-block-end: 0; }
.student-timetable-meeting > article {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: .18rem .65rem;
padding: .65rem .7rem;
}
.student-timetable-meeting--proposed > article {
box-shadow: inset 3px 0 0 var(--brand);
}
[dir="rtl"] .student-timetable-meeting--proposed > article {
box-shadow: inset -3px 0 0 var(--brand);
}
.student-timetable-meeting-head {
display: flex;
align-items: center;
gap: .4rem;
min-width: 0;
}
.student-timetable-code {
color: var(--teal);
font-family: var(--font-mono);
font-size: .8rem;
font-weight: 800;
}
.student-timetable-section,
.student-timetable-source {
padding: .08rem .36rem;
border: 1px solid var(--line);
border-radius: 999px;
color: var(--t3);
font-size: .64rem;
font-weight: 750;
line-height: 1.35;
}
.student-timetable-source--proposed {
border-color: var(--teal-border);
color: var(--brand);
background: var(--teal-dim);
}
.student-timetable-time {
color: var(--t2);
font-size: .75rem;
font-weight: 750;
white-space: nowrap;
}
.student-timetable-name,
.student-timetable-meta {
grid-column: 1 / -1;
line-height: 1.45;
}
.student-timetable-name { color: var(--t1); font-size: .78rem; }
.student-timetable-meta { color: var(--t3); font-size: .7rem; }
.student-timetable-empty {
margin: 0;
padding: .75rem;
border: 1px dashed var(--line);
border-radius: 10px;
background: var(--glass-bg-data);
color: var(--t2);
font-size: .84rem;
}
.student-timetable-exact {
border-top: 1px solid var(--line);
padding-top: .7rem;
}
.student-disclosure > summary,
.student-timetable-exact > summary {
display: inline-flex;
align-items: center;
gap: .45rem;
width: max-content;
max-width: 100%;
min-height: 44px;
padding: .35rem .15rem;
cursor: pointer;
color: var(--brand);
font-size: .8rem;
font-weight: 750;
list-style: none;
}
.student-disclosure > summary::after,
.student-timetable-exact > summary::after {
content: "⌄";
display: inline-block;
color: currentColor;
font-size: .95rem;
transition: transform .15s ease;
}
.student-disclosure[open] > summary::after,
.student-timetable-exact[open] > summary::after { transform: rotate(180deg); }
.student-disclosure > summary:focus-visible,
.student-timetable-exact > summary:focus-visible {
border-radius: 6px;
outline: 2px solid var(--teal);
outline-offset: 2px;
}
.student-timetable-exact[open] > summary { margin-bottom: .65rem; }
.student-timetable-table-scroll {
overflow-x: auto;
border: 1px solid var(--line);
border-radius: 10px;
scrollbar-width: thin;
}
.student-timetable-table-scroll:focus-visible {
outline: 2px solid var(--teal);
outline-offset: 3px;
}
.student-timetable-table {
width: 100%;
min-width: 680px;
border-collapse: collapse;
color: var(--t1);
font-size: .8rem;
}
.student-timetable-table th,
.student-timetable-table td {
padding: .5rem .6rem;
border-block-end: 1px solid var(--line);
text-align: start;
vertical-align: top;
}
.student-timetable-table thead th {
background: var(--glass-bg-header);
color: var(--t2);
font-size: .72rem;
font-weight: 800;
white-space: nowrap;
}
.student-timetable-table tbody tr:last-child > * { border-block-end: 0; }
.student-timetable-table td:nth-child(n + 2) { white-space: nowrap; }
.student-home-subtitle {
margin-bottom: .5rem;
color: var(--t2);
font-size: .84rem;
font-weight: 800;
}
.student-home-unscheduled {
display: flex;
gap: .4rem;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
}
.student-home-unscheduled li {
padding: .35rem .55rem;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--glass-bg-data);
color: var(--t2);
font-size: .75rem;
font-weight: 750;
}
.student-home-empty {
padding: .75rem;
border: 1px dashed var(--line);
border-radius: 10px;
background: var(--glass-bg-data);
color: var(--t2);
font-size: .84rem;
line-height: 1.6;
}
.student-kpi-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: .5rem;
}
.student-kpi-grid .kpi { min-width: 0; }
.student-course-progress-grid {
grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}
.student-course-progress-caption {
color: var(--t3);
font-size: .78rem;
line-height: 1.55;
}
.student-next-step {
display: flex;
align-items: baseline;
gap: .55rem;
padding: .65rem .75rem;
border: 1px solid var(--teal-border);
border-radius: 10px;
background: color-mix(in srgb, var(--teal) 6%, transparent);
color: var(--t2);
}
.student-next-step-label {
flex: 0 0 auto;
color: var(--teal);
font-family: var(--font-mono);
font-size: .7rem;
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase;
}
.student-evidence-note {
padding-inline-start: .7rem;
border-inline-start: 3px solid var(--line-strong);
line-height: 1.6;
}
.student-course-group + .student-course-group {
padding-top: .85rem;
border-top: 1px solid var(--line);
}
.student-course-group-head {
display: flex;
align-items: center;
gap: .45rem;
margin-bottom: .2rem;
}
.student-course-group-head h3,
.student-blocker-body h3 {
margin: 0;
color: var(--t2);
font-size: .84rem;
font-weight: 750;
}
.student-course-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .55rem;
margin: 0;
padding: 0;
list-style: none;
}
.student-course-list > li { min-width: 0; }
.student-course-list > li > .student-course-row { height: 100%; }
.student-course-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
gap: .35rem .75rem;
min-height: 96px;
padding: .75rem;
border: 1px solid var(--line);
border-radius: 11px;
background: var(--glass-bg-data);
color: inherit;
text-decoration: none;
transition: border-color .15s, background .15s, transform .15s;
}
.student-course-row:hover,
.student-course-row:focus-visible {
transform: translateY(-1px);
border-color: var(--teal-border);
background: color-mix(in srgb, var(--teal) 5%, var(--glass-bg-data));
}
.student-course-row:focus-visible {
outline: 2px solid var(--teal);
outline-offset: 2px;
}
.student-course-code {
width: max-content;
color: var(--teal);
font-family: var(--font-mono);
font-size: .83rem;
font-weight: 800;
text-decoration: none;
}
.student-course-code:hover,
.student-course-code:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.student-course-code { grid-column: 1; grid-row: 1; }
.student-course-name {
grid-column: 1 / -1;
grid-row: 2;
min-width: 0;
color: var(--t1);
font-size: .86rem;
line-height: 1.45;
}
.student-course-credits {
grid-column: 1 / -1;
grid-row: 3;
color: var(--t3);
font-size: .76rem;
white-space: nowrap;
}
.student-course-status {
grid-column: 2;
grid-row: 1;
justify-self: end;
}
.student-elective-note {
display: flex;
align-items: center;
gap: .55rem;
flex-wrap: wrap;
padding: .65rem .75rem;
border-radius: 10px;
background: color-mix(in srgb, var(--royal) 5%, transparent);
}
.student-blocker-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .55rem;
align-items: start;
}
.student-blocker-item {
overflow: hidden;
border: 1px solid var(--line);
border-radius: 11px;
background: var(--glass-bg-data);
}
.student-blocker-item[open] { border-color: var(--teal-border); }
.student-blocker-item > summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: .5rem;
min-height: 48px;
padding: .55rem .7rem;
cursor: pointer;
list-style: none;
}
.student-blocker-item > summary::-webkit-details-marker { display: none; }
.student-blocker-item > summary::after {
content: '+';
flex: 0 0 auto;
color: var(--teal);
font-size: 1rem;
font-weight: 800;
}
.student-blocker-item[open] > summary::after { content: '−'; }
.student-blocker-course { display: flex; min-width: 0; align-items: baseline; gap: .4rem; }
.student-blocker-course span {
overflow: hidden;
color: var(--t3);
font-size: .78rem;
text-overflow: ellipsis;
white-space: nowrap;
}
.student-blocker-badges { display: flex; gap: .25rem; margin-inline-start: auto; }
.student-blocker-body {
padding: .7rem;
border-top: 1px solid var(--line);
color: var(--t2);
font-size: .83rem;
}
.student-blocker-body ul { padding-inline-start: 1.25rem; }
.student-map-cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
border-color: var(--teal-border);
background: linear-gradient(115deg, color-mix(in srgb, var(--teal) 8%, var(--card)), var(--card));
}
.student-map-cta .student-section-title { display: block; }
.student-map-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: .75rem;
}
.student-map-counts {
display: flex;
align-items: center;
gap: .8rem;
flex-wrap: wrap;
color: var(--t3);
font-size: .75rem;
font-weight: 700;
}
.student-map-counts span { display: inline-flex; align-items: center; gap: .3rem; }
.student-map-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--t4); }
.student-map-dot.is-passed { background: var(--success); }
.student-map-dot.is-studying { background: var(--royal); }
.student-map-dot.is-open { background: var(--teal); }
.student-map-dot.is-locked { background: var(--t4); }
.student-plan-map-card { min-height: 480px; }
.student-plan-map-intro { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.student-plan-map-host {
min-height: 0;
max-width: 100%;
overflow-x: auto;
padding-block: 1rem;
scrollbar-gutter: stable;
overscroll-behavior-inline: contain;
}
@media (max-width: 768px) {
.page-header-chips .student-program-chip { display: none; }
.page-header-chips .student-term-chip { flex: 0 0 auto; }
.student-summary-header { align-items: flex-start; flex-wrap: wrap; }
.student-home-section-head { align-items: flex-start; }
.student-timetable-comparison-card .student-home-section-head { flex-wrap: wrap; }
.student-summary-advisor { min-height: 44px; padding: .45rem .7rem; font-size: .75rem; }
.student-timetable-calendar { display: none; }
.student-timetable-agenda {
position: static !important;
display: grid;
width: auto;
height: auto;
padding: 0;
margin: 0;
overflow: visible;
clip: auto;
clip-path: none;
border: 0;
gap: .65rem;
white-space: normal;
}
.sp-week .student-timetable-agenda { margin-top: .1rem; }
.sp-scroll-hint { display: none; }
.student-course-jumps { gap: .35rem; }
.student-course-jumps a { min-height: 44px; padding: .4rem .62rem; font-size: .73rem; }
.student-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.student-kpi-grid .kpi { padding: .55rem; }
.student-next-step { align-items: flex-start; flex-direction: column; gap: .25rem; }
.student-course-list { grid-template-columns: 1fr; }
.student-course-row {
min-height: 92px;
padding: .7rem;
}
.student-course-name { font-size: .84rem; }
.student-blocker-list { grid-template-columns: 1fr; }
.student-blocker-course { flex-direction: column; gap: .05rem; }
.student-blocker-course span { max-width: 13rem; }
.student-blocker-badges { flex-direction: column; align-items: flex-end; }
.student-map-cta,
.student-map-toolbar { align-items: stretch; flex-direction: column; }
.student-map-cta .btn { width: 100%; }
.student-map-counts { justify-content: space-between; gap: .4rem; }
.student-plan-map-card { min-height: 0; padding: .75rem !important; }
.student-plan-map-card .cp-h { align-items: flex-start; flex-wrap: wrap; padding: .75rem; }
.student-plan-map-host { min-height: 0; padding: .75rem; }
.student-map-device-note { line-height: 1.5; }
}
@media (max-width: 480px) {
.student-course-jumps {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.student-course-jumps a {
justify-content: center;
text-align: center;
}
.student-course-jumps .student-course-jumps-map { margin-inline-start: 0; }
}
/* Student graduation progress and read-only completion scenario. */
.student-grad-progress-head,
.student-grad-path-heading,
.student-grad-term-head,
.student-grad-blocker-title,
.student-page-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: .75rem;
}
.student-grad-progress-value {
display: flex;
align-items: baseline;
gap: .5rem;
white-space: nowrap;
}
.student-grad-progress-value strong {
color: var(--teal);
font-family: var(--font-serif);
font-size: 1.85rem;
line-height: 1;
}
.student-grad-progress-value span { color: var(--t3); font-size: .75rem; }
.student-grad-progress-track {
width: 100%;
height: 10px;
margin-top: .75rem;
overflow: hidden;
border-radius: 999px;
background: var(--brand-soft);
box-shadow: 0 1px 2px rgba(0,0,0,.04) inset;
}
.student-grad-progress-track > span {
display: block;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, var(--teal), var(--sky));
}
.student-grad-kpis {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: .5rem;
}
.student-grad-record-note {
padding-top: .55rem;
border-top: 1px solid var(--line);
color: var(--t2);
font-size: .8rem;
}
.student-grad-record-note > summary,
.student-grad-map-details > summary {
width: max-content;
cursor: pointer;
color: var(--teal-deep);
font-weight: 700;
}
.student-grad-result {
padding: .9rem 1rem;
border: 1px solid var(--teal-border);
border-radius: 12px;
background: color-mix(in srgb, var(--teal) 6%, var(--card));
}
.student-grad-result.is-incomplete {
border-color: color-mix(in srgb, var(--warning) 40%, var(--line));
background: color-mix(in srgb, var(--warning) 7%, var(--card));
}
.student-grad-result-status {
display: block;
margin-bottom: .35rem;
color: var(--t2);
font-size: .77rem;
font-weight: 750;
}
.student-grad-result-answer {
display: flex;
align-items: baseline;
gap: .65rem;
margin-bottom: .35rem;
}
.student-grad-result-answer strong {
color: var(--teal);
font-family: var(--font-serif);
font-size: 2.25rem;
line-height: 1;
}
.student-grad-result.is-incomplete .student-grad-result-answer strong { color: var(--warning); }
.student-grad-result-answer span { color: var(--t1); font-size: .95rem; font-weight: 800; }
.student-grad-support-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: .55rem;
}
.student-grad-support {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: .18rem .55rem;
padding: .7rem .75rem;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--glass-bg-data);
}
.student-grad-support > span { color: var(--t2); font-size: .78rem; font-weight: 750; }
.student-grad-support > strong { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--teal); font-size: 1.35rem; }
.student-grad-support > small { grid-column: 1; color: var(--t3); font-size: .7rem; line-height: 1.4; }
.student-grad-assumptions,
.student-grad-code-list {
display: flex;
align-items: center;
gap: .35rem;
flex-wrap: wrap;
}
.student-grad-assumptions > span,
.student-grad-code-list > bdi {
padding: .25rem .5rem;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--glass-bg-data);
color: var(--t2);
font-size: .72rem;
font-weight: 700;
}
.student-grad-current-assumption {
display: flex;
align-items: center;
gap: .35rem .5rem;
flex-wrap: wrap;
color: var(--t2);
font-size: .8rem;
line-height: 1.55;
}
.student-grad-expected-comparison {
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--teal) 34%, var(--line));
border-radius: 12px;
background: color-mix(in srgb, var(--teal) 5%, var(--card));
}
.student-grad-expected-heading {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: .75rem;
padding: .8rem;
border-bottom: 1px solid var(--line);
}
.student-grad-expected-heading h3 {
margin: 0 0 .25rem;
color: var(--t1);
font-size: .92rem;
font-weight: 850;
}
.student-grad-expected-heading p {
color: var(--t2);
font-size: .8rem;
line-height: 1.65;
}
.student-grad-expected-courses {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: .45rem;
margin: 0;
padding: .7rem .8rem;
list-style: none;
}
.student-grad-expected-courses li {
display: grid;
grid-template-columns: max-content minmax(0, 1fr);
gap: .12rem .5rem;
padding: .55rem .6rem;
border: 1px solid var(--line);
border-radius: 9px;
background: var(--glass-bg-data);
}
.student-grad-expected-courses bdi { color: var(--teal); font-size: .8rem; font-weight: 850; }
.student-grad-expected-courses span { overflow: hidden; color: var(--t1); font-size: .76rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.student-grad-expected-courses small { grid-column: 1 / -1; color: var(--t3); font-size: .68rem; }
.student-grad-expected-impact {
margin-inline: .8rem;
padding: .65rem .75rem;
border-radius: 9px;
background: color-mix(in srgb, var(--teal) 9%, var(--glass-bg-data));
color: var(--t1);
font-size: .82rem;
line-height: 1.6;
}
.student-grad-expected-comparison > .student-guidance-note { margin-inline: .8rem; margin-bottom: .8rem !important; }
.student-grad-blockers {
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--warning) 35%, var(--line));
border-radius: 11px;
background: color-mix(in srgb, var(--warning) 4%, var(--card));
}
.student-grad-blockers > summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: .75rem;
min-height: 44px;
padding: .6rem .75rem;
cursor: pointer;
color: var(--t1);
font-weight: 800;
}
.student-grad-blocker-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .5rem;
padding: .65rem;
border-top: 1px solid var(--line);
}
.student-grad-blocker {
padding: .65rem;
border: 1px solid var(--line);
border-radius: 9px;
background: var(--glass-bg-data);
color: var(--t2);
font-size: .78rem;
line-height: 1.55;
}
.student-grad-blocker-title { align-items: baseline; justify-content: flex-start; margin-bottom: .3rem; }
.student-grad-blocker-title bdi { color: var(--teal); font-weight: 800; }
.student-grad-blocker-title span { overflow: hidden; color: var(--t1); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.student-grad-path {
display: flex;
flex-direction: column;
}
.student-grad-path-heading { order: 0; align-items: flex-start; }
.student-grad-map-details { order: 1; }
.student-grad-timeline { order: 2; }
.student-grad-timeline {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .65rem;
}
.student-grad-term {
position: relative;
overflow: hidden;
border: 1px solid var(--line);
border-radius: 12px;
background: var(--glass-bg-data);
}
.student-grad-term::before {
position: absolute;
inset-block: 0;
inset-inline-start: 0;
width: 3px;
background: var(--teal-border);
content: '';
}
.student-grad-term.is-current { border-color: color-mix(in srgb, var(--royal) 32%, var(--line)); }
.student-grad-term.is-current::before { background: var(--royal); }
.student-grad-term.is-blocked { border-color: color-mix(in srgb, var(--warning) 45%, var(--line)); }
.student-grad-term.is-blocked::before { background: var(--warning); }
.student-grad-term-head {
align-items: flex-start;
padding: .65rem .75rem;
border-bottom: 1px solid var(--line);
}
.student-grad-term-head > div { display: flex; flex-direction: column; gap: .08rem; }
.student-grad-term-head > div span { color: var(--t1); font-size: .8rem; font-weight: 800; }
.student-grad-term-head > div strong,
.student-grad-term-head > span { color: var(--t3); font-size: .72rem; }
.student-grad-term-courses { list-style: none; margin: 0; padding: .35rem .75rem .55rem; }
.student-grad-term-courses li {
display: grid;
grid-template-columns: max-content minmax(0, 1fr) auto;
align-items: baseline;
gap: .5rem;
padding: .3rem 0;
border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.student-grad-term-courses li:last-child { border-bottom: 0; }
.student-grad-term-courses bdi { color: var(--teal); font-size: .77rem; font-weight: 800; }
.student-grad-term-courses li > span { overflow: hidden; color: var(--t2); font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.student-grad-term-courses small { color: var(--t3); font-size: .65rem; white-space: nowrap; }
.student-grad-map-details {
padding-top: .7rem;
border-top: 1px solid var(--line);
}
.student-grad-map-host {
min-height: 320px;
padding: .75rem;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--glass-bg-data);
}
.student-page-actions { justify-content: flex-start; flex-wrap: wrap; }
@media (max-width: 768px) {
.student-grad-progress-head,
.student-grad-path-heading { align-items: flex-start; flex-direction: column; }
.student-grad-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.student-grad-kpis .kpi:last-child { grid-column: 1 / -1; }
.student-grad-result-answer { align-items: flex-start; flex-direction: column; gap: .25rem; }
.student-grad-support-grid,
.student-grad-blocker-list,
.student-grad-timeline { grid-template-columns: 1fr; }
.student-grad-expected-heading { flex-direction: column; }
.student-grad-expected-courses { grid-template-columns: 1fr; }
.student-grad-map-details { display: none; }
.student-page-actions { align-items: stretch; flex-direction: column; }
.student-page-actions .btn { width: 100%; }
}