/* Covenant University Online — EduDash-style portal skin (Redesign step 1)
Loaded AFTER cu-design.css. Everything here is scoped to .portal (student, faculty,
marketing, dean and Back Office screens); the public site is untouched.
Colors come from the theme variables (--navy, --gold = brand accent), so CU's navy and
blue stay in charge — only the structure and surfaces follow the EduDash layout.
ROLLBACK: delete the to this file in index.html (and sw.js's precache entry). */
:root{
--ed-canvas:#f4f6fb; /* page background behind the cards */
--ed-surface:#fff;
--ed-line:#e6eaf2;
--ed-ink:#1f2a3d;
--ed-muted:#5a6a80;
--ed-radius:12px;
--ed-shadow:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.06);
--ed-active-bg:color-mix(in srgb,var(--gold) 12%,white);
}
/* ---------- Frame: no bordered box, a light canvas with floating cards ---------- */
.portal{
background:transparent;border:0;box-shadow:none;border-radius:0;overflow:visible;
gap:20px;padding:4px 0 24px;
}
@media(min-width:761px){.portal:not(.nav-hidden){grid-template-columns:268px minmax(0,1fr)}}
body:has(.portal){background:var(--ed-canvas)}
/* ---------- Sidebar: dark navy card (both modes), user chip, soft pill for the active item ---------- */
.pside{
background:var(--navy);color:#cdd7ea;padding:14px 12px 16px;
border:1px solid color-mix(in srgb,var(--navy) 70%,black);border-radius:var(--ed-radius);box-shadow:var(--ed-shadow);
align-self:start;position:sticky;top:calc(var(--bar-h,56px) + 12px);
max-height:calc(100vh - var(--bar-h,56px) - 24px);overflow-y:auto;
-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;
--sidebar-avatar-border:rgba(255,255,255,.85);
}
.pside .who{
background:rgba(255,255,255,.07);border:0;border-radius:10px;padding:10px 12px;margin:0 0 12px;
display:flex;align-items:center;gap:10px;
}
.pside .who b{color:#fff;font-family:var(--font-heading);font-size:14px;font-weight:600}
.pside .who span{color:#9fb2d1;font-size:12px}
.pside-collapse{color:#cdd7ea;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:8px;width:30px;height:30px}
.pside-collapse:hover{color:#fff;border-color:var(--accent-fill)}
.pside a{
color:#cdd7ea;padding:5px 12px;border-left:0;border-radius:8px;font-size:14px;font-weight:500;
margin:0;transition:background .15s,color .15s;
}
.pside a .ico{color:#9fb2d1;opacity:1}
.pside a:hover{background:rgba(255,255,255,.08);color:#fff;border-left-color:transparent}
.pside a.active{
background:var(--accent-fill);color:var(--on-accent);font-weight:600;border-left-color:transparent;
box-shadow:0 4px 12px -4px color-mix(in srgb,var(--gold) 70%,transparent);
}
.pside a.active .ico,.pside a.active:hover .ico{color:var(--on-accent)}
.pside a.active:hover{background:var(--accent-fill-hover);color:var(--on-accent)}
/* Groups read as section captions, like EduDash's menu headings */
.pnav .nav-group>a{
color:#e6edf8;font-family:var(--font-body);font-size:15px;font-weight:700;letter-spacing:0;text-transform:none;
padding:8px 12px 3px;background:none;border-radius:0;box-shadow:none;margin:0;
}
.pnav .nav-group>a:hover{background:none;color:#fff}
.pnav .nav-toggle,.pnav .nav-group>a .nav-toggle{color:#b7c6df}
.pnav .nav-children{margin-left:0}
/* Nested pages: a thin guide line under the parent's icon so depth is readable at a glance (works at any depth). */
.pnav .nav-children{position:relative}
.pnav .nav-children::before{content:'';position:absolute;left:calc(19px + (var(--d,1) - 1)*14px);top:2px;bottom:2px;width:1px;background:rgba(255,255,255,.12);pointer-events:none}
.pnav-add{border-color:rgba(255,255,255,.2);color:#cdd7ea;background:transparent}
.pnav-add:hover{border-color:var(--accent-fill);background:rgba(255,255,255,.08);color:#fff}
.pnav-hint{color:rgba(205,215,234,.55)}
.pside::-webkit-scrollbar{width:6px}
.pside::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:3px}
/* Mobile drawer keeps the same look */
@media(max-width:760px){
.pside{border-radius:0 var(--ed-radius) var(--ed-radius) 0;position:fixed;top:0;max-height:none;
box-shadow:6px 0 24px rgba(16,24,40,.35)}
/* The drawer is pinned top and bottom, but the base rule's align-self:start makes a pinned box shrink to
its content — a long admin menu then ran past the screen and the page behind took the swipe. Give it
the screen's height so the menu scrolls inside itself. */
.pside{align-self:stretch;height:100vh;height:100dvh;max-height:100dvh;overscroll-behavior:contain}
}
/* ---------- Main column: the page header and content sit on the canvas ---------- */
.pmain{padding:0;min-width:0}
.pmain>.dash-head,.pmain>h1:first-child{margin-top:2px}
.dash-head{align-items:center;margin-bottom:var(--sp-4)}
.pmain h1:not(.be-canvas *),.dash-head h1,.dash-head h3{color:var(--ed-ink);font-weight:600;font-size:22px;letter-spacing:-.01em}
.dash-head p{color:var(--ed-muted)}
/* ---------- Cards, panels, stat tiles ---------- */
.pmain .card,.pmain .panel,.pmain .stat{
background:var(--ed-surface);border:1px solid var(--ed-line);border-radius:var(--ed-radius);box-shadow:var(--ed-shadow);
}
.pmain .panel{overflow:hidden}
.pmain .panel>h4,.pmain .panel-h{
padding:14px 18px;font-size:15px;font-weight:600;color:var(--ed-ink);background:var(--ed-surface);border-bottom:1px solid var(--ed-line);
}
.pmain .panel-b{padding:6px 18px 14px}
.pmain .card{padding:20px}
.stat-row{gap:14px}
.pmain .stat{padding:16px 18px;gap:6px}
.pmain .stat .v{font-size:28px;font-weight:700;color:var(--ed-ink);letter-spacing:-.02em}
.pmain .stat .l{color:var(--ed-muted);font-size:13px}
.pmain .stat .l .ico{
width:30px;height:30px;padding:7px;border-radius:9px;background:var(--ed-active-bg);color:var(--accent-text);box-sizing:border-box;
}
.pmain button.stat:hover,.pmain a.stat:hover{
border-color:color-mix(in srgb,var(--gold) 45%,white);background:var(--ed-surface);
box-shadow:0 6px 16px -8px color-mix(in srgb,var(--gold) 55%,transparent);
}
.pmain .stat.is-warn .v{color:var(--st-warn-fg)}
.pmain .stat.is-good .v{color:var(--st-good-fg)}
.pmain .rowlink{border-bottom-color:var(--ed-line)}
.pmain .rowlink .rl-ico{border-radius:10px;width:36px;height:36px}
.pmain .rowlink:hover .rl-t{text-decoration:none;color:var(--accent-text)}
/* ---------- Tables: quiet header band, airy rows ---------- */
.pmain table{border-collapse:separate;border-spacing:0;width:100%}
.pmain th{
background:var(--ed-canvas);color:var(--ed-muted);font-size:12px;font-weight:600;text-transform:uppercase;
letter-spacing:.04em;padding:11px 14px;border-bottom:1px solid var(--ed-line);text-align:left;
}
.pmain th:first-child{border-top-left-radius:10px}.pmain th:last-child{border-top-right-radius:10px}
.pmain td{padding:12px 14px;border-bottom:1px solid var(--ed-line);color:var(--ed-ink)}
.pmain tbody tr:hover td{background:color-mix(in srgb,var(--gold) 4%,white)}
.pmain tbody tr:last-child td{border-bottom:0}
/* ---------- Controls ---------- */
.pmain input[type=text],.pmain input[type=search],.pmain input[type=email],.pmain input[type=number],
.pmain input[type=password],.pmain input[type=date],.pmain input[type=tel],.pmain input[type=url],
.pmain select,.pmain textarea{
background:#fff;border:1px solid #d8deea;border-radius:10px;min-height:40px;color:var(--ed-ink);
}
.pmain input:focus,.pmain select:focus,.pmain textarea:focus{border-color:var(--accent-fill)}
.pmain .btn{border-radius:10px;font-weight:600}
.pmain .btn.ghost{background:var(--ed-surface);border:1px solid var(--accent-fill)}
.pmain .btn.ghost:hover{background:var(--accent-fill)}
.pill{font-weight:600}
/* Account/notification buttons in the top breadcrumb row */
.portal .btn-icon{border-radius:10px;background:var(--ed-surface);border-color:var(--ed-line)}
/* ---------- Dark mode (toggle in the portal's top bar; html[data-ed-theme="dark"]) ---------- */
html[data-ed-theme="dark"]{color-scheme:dark}
/* On , not : the saved theme writes --ink/--card/etc. inline on , which would beat a rule there. */
html[data-ed-theme="dark"] body{
--ed-canvas:#0d1522;--ed-surface:#162033;--ed-line:#25324a;--ed-ink:#e7edf7;--ed-muted:#97a6bf;
--ed-shadow:0 1px 2px rgba(0,0,0,.4);--ed-active-bg:color-mix(in srgb,var(--gold) 22%,#162033);
--ink:#e7edf7;--muted:#97a6bf;--line:#25324a;--bg:#0d1522;--card:#162033;--card-bg:#162033;--lineColor:#25324a;
--accent-text:color-mix(in srgb,var(--gold) 55%,white);
--shadow:0 1px 2px rgba(0,0,0,.4);--shadow-lg:0 10px 40px rgba(0,0,0,.55);
--st-good-fg:#7fd6ae;--st-good-bg:#173528;--st-warn-fg:#f0c27a;--st-warn-bg:#3a2b12;
--st-bad-fg:#f1a1a1;--st-bad-bg:#3d1c1c;--st-info-fg:#9db9f2;--st-info-bg:#1b2c4d;
}
html[data-ed-theme="dark"] body{background:var(--ed-canvas);color:var(--ed-ink)}
html[data-ed-theme="dark"] header.top{background:color-mix(in srgb,var(--navy) 55%,black)}
html[data-ed-theme="dark"] .pside{background:color-mix(in srgb,var(--navy) 55%,black);border-color:var(--ed-line)}
html[data-ed-theme="dark"] .rowlink .rl-ico{background:var(--ed-active-bg);color:var(--accent-text)}
html[data-ed-theme="dark"] .rowlink{color:var(--ed-ink)}
/* Text that is "navy" on a light page becomes light here — but the sidebar and header keep the real navy. */
html[data-ed-theme="dark"] .pmain,html[data-ed-theme="dark"] .modal,html[data-ed-theme="dark"] .portal .btn-icon,
html[data-ed-theme="dark"] .crumb,html[data-ed-theme="dark"] .confirm-box{--navy:#e7edf7;--gold-d:#7db8f2}
html[data-ed-theme="dark"] .pmain .btn,html[data-ed-theme="dark"] .pmain .btn:hover{color:#fff}
html[data-ed-theme="dark"] .pmain .btn.ghost{color:var(--accent-text)}
html[data-ed-theme="dark"] .pmain .btn.ghost:hover{color:#fff}
html[data-ed-theme="dark"] .portal,html[data-ed-theme="dark"] .pmain{color:var(--ed-ink)}
html[data-ed-theme="dark"] .pmain input,html[data-ed-theme="dark"] .pmain select,html[data-ed-theme="dark"] .pmain textarea,
html[data-ed-theme="dark"] .modal input,html[data-ed-theme="dark"] .modal select,html[data-ed-theme="dark"] .modal textarea{
background:#0f1828;border-color:#2c3b57;color:var(--ed-ink);
}
html[data-ed-theme="dark"] .pmain ::placeholder{color:#7384a0}
html[data-ed-theme="dark"] .modal,html[data-ed-theme="dark"] .confirm-box{background:var(--ed-surface);color:var(--ed-ink)}
html[data-ed-theme="dark"] .pmain th{background:#101a2b}
html[data-ed-theme="dark"] .pmain tbody tr:hover td{background:#1a2740}
html[data-ed-theme="dark"] .pmain .muted{color:var(--ed-muted)}
html[data-ed-theme="dark"] .pmain a:not(.btn){color:var(--accent-text)}
html[data-ed-theme="dark"] .pmain .stat .v,html[data-ed-theme="dark"] .pmain h1:not(.be-canvas *),html[data-ed-theme="dark"] .pmain h2:not(.be-canvas *),
html[data-ed-theme="dark"] .pmain h3:not(.be-canvas *),html[data-ed-theme="dark"] .pmain h4:not(.be-canvas *){color:var(--ed-ink)}
html[data-ed-theme="dark"] .pmain button.stat:hover,html[data-ed-theme="dark"] .pmain a.stat:hover{background:var(--ed-surface)}
/* The toggle itself */
.ed-theme-toggle .ico{width:1.15em;height:1.15em}
.ed-theme-toggle .ico-moon{display:inline-block}.ed-theme-toggle .ico-sun{display:none}
html[data-ed-theme="dark"] .ed-theme-toggle .ico-moon{display:none}
html[data-ed-theme="dark"] .ed-theme-toggle .ico-sun{display:inline-block}
html[data-ed-theme="dark"] .btn-icon,html[data-ed-theme="dark"] .portal .btn-icon{background:var(--ed-surface);color:var(--ed-ink);border-color:var(--ed-line)}
html[data-ed-theme="dark"] .btn-icon:hover{background:#1d2a42;border-color:#3a4b6b}
/* ---- Dark mode: components that hard-code a white surface (generated from the stylesheets) ---- */
html[data-ed-theme="dark"] .accordion,
html[data-ed-theme="dark"] .accordion>button,
html[data-ed-theme="dark"] .be-block,
html[data-ed-theme="dark"] .be-block-actions a,
html[data-ed-theme="dark"] .be-block-actions a[role=button],
html[data-ed-theme="dark"] .be-block-toolbar,
html[data-ed-theme="dark"] .be-block-toolbar .be-block-actions > .be-chip-btn,
html[data-ed-theme="dark"] .be-block-toolbar .be-block-actions > .pex-tool,
html[data-ed-theme="dark"] .be-block-toolbar .be-block-actions > a,
html[data-ed-theme="dark"] .be-col-btn,
html[data-ed-theme="dark"] .be-colcount button,
html[data-ed-theme="dark"] .be-collayout,
html[data-ed-theme="dark"] .be-colseg button,
html[data-ed-theme="dark"] .be-inserter-btn,
html[data-ed-theme="dark"] .be-meta .be-toggle,
html[data-ed-theme="dark"] .be-mini-toolbar button,
html[data-ed-theme="dark"] .be-mini-toolbar select,
html[data-ed-theme="dark"] .be-palette,
html[data-ed-theme="dark"] .be-palette .cu-pal-head,
html[data-ed-theme="dark"] .be-palette button,
html[data-ed-theme="dark"] .be-palette button.be-palette-wide .be-palette-icon,
html[data-ed-theme="dark"] .be-paste-area,
html[data-ed-theme="dark"] .be-tb-iconselect,
html[data-ed-theme="dark"] .be-topbar,
html[data-ed-theme="dark"] .btn-icon,
html[data-ed-theme="dark"] .calchip,
html[data-ed-theme="dark"] .card,
html[data-ed-theme="dark"] .cb-chip,
html[data-ed-theme="dark"] .cb-row,
html[data-ed-theme="dark"] .ced-readonly,
html[data-ed-theme="dark"] .confirm-box,
html[data-ed-theme="dark"] .cu-menu-list,
html[data-ed-theme="dark"] .disc-input,
html[data-ed-theme="dark"] .disc-item.sel,
html[data-ed-theme="dark"] .disc-panel,
html[data-ed-theme="dark"] .dsc-board,
html[data-ed-theme="dark"] .dsc-bubble,
html[data-ed-theme="dark"] .dsc-chip,
html[data-ed-theme="dark"] .dsc-compose,
html[data-ed-theme="dark"] .dsc-composer,
html[data-ed-theme="dark"] .dsc-export>div,
html[data-ed-theme="dark"] .dsc-layout,
html[data-ed-theme="dark"] .dsc-list,
html[data-ed-theme="dark"] .dsc-locked,
html[data-ed-theme="dark"] .dsc-scroll,
html[data-ed-theme="dark"] .fb-toolbar button,
html[data-ed-theme="dark"] .fbx-bar,
html[data-ed-theme="dark"] .fbx-paper,
html[data-ed-theme="dark"] .fbx-ptabs button.on,
html[data-ed-theme="dark"] .ml-card,
html[data-ed-theme="dark"] .modal,
html[data-ed-theme="dark"] .panel,
html[data-ed-theme="dark"] .pe-colcount button,
html[data-ed-theme="dark"] .pex-bar,
html[data-ed-theme="dark"] .pex-outline,
html[data-ed-theme="dark"] .pex-stage .be-canvas,
html[data-ed-theme="dark"] .player-shell,
html[data-ed-theme="dark"] .player-sidebar,
html[data-ed-theme="dark"] .player-sidebar-progress,
html[data-ed-theme="dark"] .player-topbar,
html[data-ed-theme="dark"] .portal,
html[data-ed-theme="dark"] .ra,
html[data-ed-theme="dark"] .rowmenu,
html[data-ed-theme="dark"] .stat,
html[data-ed-theme="dark"] .wb-block,
html[data-ed-theme="dark"] .wb-canvas,
html[data-ed-theme="dark"] .wb-drop-end.dragover,
html[data-ed-theme="dark"] .wb-palette .pi,
html[data-ed-theme="dark"] tbody tr:nth-child(even){background:var(--ed-surface);border-color:var(--ed-line);color:var(--ed-ink)}
html[data-ed-theme="dark"] body{--accent:#8fb3f5}
html[data-ed-theme="dark"] tfoot td,html[data-ed-theme="dark"] tr:nth-child(even) td{background:#121c2e}
html[data-ed-theme="dark"] .portal .ra{background:var(--ed-surface);color:var(--accent-text)}
html[data-ed-theme="dark"] .demo-note{background:color-mix(in srgb,var(--gold) 14%,var(--ed-surface));border-color:var(--ed-line);color:var(--ed-ink)}
html[data-ed-theme="dark"] .kpi,html[data-ed-theme="dark"] .editable{background:var(--ed-surface);color:var(--ed-ink)}
/* ---- Dark mode: tinted callouts (white-mixed backgrounds, generated) ---- */
html[data-ed-theme="dark"] .cur-course{background:color-mix(in srgb,var(--gold) 5%,var(--ed-surface))}
html[data-ed-theme="dark"] .cur-course:hover{background:color-mix(in srgb,var(--gold) 10%,var(--ed-surface))}
html[data-ed-theme="dark"] .prof-course:hover{background:color-mix(in srgb,var(--gold) 5%,var(--ed-surface))}
html[data-ed-theme="dark"] .prof-course.gold:hover{background:color-mix(in srgb,#c8a24a 8%,var(--ed-surface))}
html[data-ed-theme="dark"] .cur-course.gold{background:color-mix(in srgb,#c8a24a 8%,var(--ed-surface))}
html[data-ed-theme="dark"] .cur-course.gold:hover{background:color-mix(in srgb,#c8a24a 15%,var(--ed-surface))}
html[data-ed-theme="dark"] .pill.gold{background:color-mix(in srgb,var(--gold) 16%,var(--ed-surface))}
html[data-ed-theme="dark"] button.stat:hover{background:color-mix(in srgb,var(--gold) 5%,var(--ed-surface))}
html[data-ed-theme="dark"] a.stat:hover{background:color-mix(in srgb,var(--gold) 5%,var(--ed-surface))}
html[data-ed-theme="dark"] .rowlink .rl-ico{background:color-mix(in srgb,var(--gold) 12%,var(--ed-surface))}
html[data-ed-theme="dark"] .next-up{background:color-mix(in srgb,var(--gold) 5%,var(--ed-surface))}
html[data-ed-theme="dark"] th{background:color-mix(in srgb,var(--navy) 7%,var(--ed-surface))}
html[data-ed-theme="dark"] .demo-note{background:color-mix(in srgb,var(--gold) 7%,var(--ed-surface))}
html[data-ed-theme="dark"] .notifTab.active{background:color-mix(in srgb,var(--gold) 14%,var(--ed-surface))}
html[data-ed-theme="dark"] .notifRow.unread{background:color-mix(in srgb,var(--gold) 7%,var(--ed-surface))}
html[data-ed-theme="dark"] .ra:hover{background:color-mix(in srgb,var(--gold) 9%,var(--ed-surface))}
html[data-ed-theme="dark"] .cu-tabs>.btn span[style*="opacity"]{background:color-mix(in srgb,var(--navy) 8%,var(--ed-surface))}
html[data-ed-theme="dark"] .cu-tabs>.btn[aria-current="page"] span[style*="opacity"]{background:color-mix(in srgb,var(--gold) 16%,var(--ed-surface))}
html[data-ed-theme="dark"] .dsc-board:hover{background:color-mix(in srgb,var(--gold) 8%,var(--ed-surface))}
html[data-ed-theme="dark"] .dsc-chip.on{background:color-mix(in srgb,var(--gold) 14%,var(--ed-surface))}
html[data-ed-theme="dark"] .dsc-row:hover{background:color-mix(in srgb,var(--navy) 5%,var(--ed-surface))}
html[data-ed-theme="dark"] .dsc-row.sel{background:color-mix(in srgb,var(--gold) 12%,var(--ed-surface))}
html[data-ed-theme="dark"] .dsc-badge.is-pin{background:color-mix(in srgb,var(--gold) 14%,var(--ed-surface))}
html[data-ed-theme="dark"] .dsc-avatar{background:color-mix(in srgb,var(--navy) 10%,var(--ed-surface))}
html[data-ed-theme="dark"] .dsc-avatar.r-professor{background:color-mix(in srgb,var(--gold) 20%,var(--ed-surface))}
html[data-ed-theme="dark"] .dsc-avatar.r-dean{background:color-mix(in srgb,var(--gold) 20%,var(--ed-surface))}
html[data-ed-theme="dark"] .dsc-avatar.r-marketing{background:color-mix(in srgb,var(--gold) 20%,var(--ed-surface))}
html[data-ed-theme="dark"] .dsc-role{background:color-mix(in srgb,var(--navy) 10%,var(--ed-surface))}
html[data-ed-theme="dark"] .dsc-role.r-professor,html[data-ed-theme="dark"] .dsc-role.r-dean{background:color-mix(in srgb,var(--gold) 18%,var(--ed-surface))}
html[data-ed-theme="dark"] .dsc-msg.mine .dsc-bubble{background:color-mix(in srgb,var(--gold) 9%,var(--ed-surface))}
html[data-ed-theme="dark"] .dsc-replychip{background:color-mix(in srgb,var(--gold) 12%,var(--ed-surface))}
html[data-ed-theme="dark"] .dsc-replychip button:hover{background:color-mix(in srgb,var(--gold) 20%,var(--ed-surface))}
html[data-ed-theme="dark"] .fi-icon{background:color-mix(in srgb,var(--gold) 12%,var(--ed-surface))}
html[data-ed-theme="dark"] #app [id^=testiSlide_]{background:color-mix(in srgb,var(--navy) 3%,var(--ed-surface))}
html[data-ed-theme="dark"] .accordion>button:hover{background:color-mix(in srgb,var(--navy) 3%,var(--ed-surface))}
html[data-ed-theme="dark"] .auth-ico{background:color-mix(in srgb,var(--gold) 12%,var(--ed-surface))}
html[data-ed-theme="dark"] .pmain .listrow a:hover{background:color-mix(in srgb,var(--gold) 10%,var(--ed-surface))}
html[data-ed-theme="dark"] #modal .listrow a:hover{background:color-mix(in srgb,var(--gold) 10%,var(--ed-surface))}
html[data-ed-theme="dark"] .be-block-actions a:hover{background:color-mix(in srgb,var(--gold) 10%,var(--ed-surface))}
html[data-ed-theme="dark"] .fb-item:hover{background:color-mix(in srgb,var(--gold) 8%,var(--ed-surface))}
html[data-ed-theme="dark"] .pex-outline li:hover{background:color-mix(in srgb,var(--navy) 5%,var(--ed-surface))}
html[data-ed-theme="dark"] .pex-n{background:color-mix(in srgb,var(--navy) 9%,var(--ed-surface))}
html[data-ed-theme="dark"] .pmain label,html[data-ed-theme="dark"] .pmain .fld,html[data-ed-theme="dark"] .modal label,
html[data-ed-theme="dark"] .modal .fld{color:var(--ed-muted)}
html[data-ed-theme="dark"] .pmain small,html[data-ed-theme="dark"] .pmain .sub,html[data-ed-theme="dark"] .pmain .hint,
html[data-ed-theme="dark"] .pmain .empty,html[data-ed-theme="dark"] .pmain .empty p{color:var(--ed-muted)}
html[data-ed-theme="dark"] .nu-t,html[data-ed-theme="dark"] .nu-k{color:var(--ed-ink)}
html[data-ed-theme="dark"] .nu-k{color:var(--accent-text)}
html[data-ed-theme="dark"] .next-up{border-color:color-mix(in srgb,var(--gold) 35%,var(--ed-surface));background:color-mix(in srgb,var(--gold) 12%,var(--ed-surface))}
/* ---------- Student/faculty portal polish ---------- */
/* Profile: the name field shares a row with "Request name change" — let it wrap instead of crushing the input */
.pmain div:has(>#sp_name){flex-wrap:wrap}
.pmain #sp_name{min-width:180px}
/* ---- Dark mode: hard-coded dark text colors (generated from the stylesheets) ---- */
html[data-ed-theme="dark"] .cur-course.gold .cur-course-eyebrow{color:var(--ed-muted)}
html[data-ed-theme="dark"] .be-block-toolbar .be-block-actions > a.be-act-danger{color:var(--ed-muted)}
html[data-ed-theme="dark"] .be-block-toolbar .be-block-actions > .pex-tool.is-danger{color:var(--ed-muted)}
html[data-ed-theme="dark"] .seo-preview-site{color:var(--ed-ink)}
html[data-ed-theme="dark"] .seo-preview-title{color:var(--ed-ink)}
html[data-ed-theme="dark"] .seo-preview-desc{color:var(--ed-ink)}
html[data-ed-theme="dark"]
${color:var(--ed-muted)}
html[data-ed-theme="dark"] h1{color:var(--ed-ink)}
html[data-ed-theme="dark"] .meta{color:var(--ed-muted)}
html[data-ed-theme="dark"] .hd h1{color:var(--ed-ink)}
html[data-ed-theme="dark"] .doc{color:var(--ed-muted)}
html[data-ed-theme="dark"] .meta b{color:var(--ed-ink)}
html[data-ed-theme="dark"] .sig{color:var(--ed-muted)}
html[data-ed-theme="dark"] h2{color:var(--ed-ink)}
html[data-ed-theme="dark"] .note{color:var(--ed-muted)}
html[data-ed-theme="dark"] .sum{color:var(--ed-muted)}
html[data-ed-theme="dark"] .info .nm{color:var(--ed-ink)}
html[data-ed-theme="dark"] .info .row{color:var(--ed-ink)}
html[data-ed-theme="dark"] .info .row b{color:var(--ed-muted)}
html[data-ed-theme="dark"] .idnum{color:var(--ed-ink)}
html[data-ed-theme="dark"] .renew{color:var(--ed-muted)}
html[data-ed-theme="dark"] :where(input{color:var(--ed-muted)}
html[data-ed-theme="dark"] select{color:var(--ed-muted)}
html[data-ed-theme="dark"] textarea)::placeholder{color:var(--ed-muted)}
html[data-ed-theme="dark"] label.fld{color:var(--ed-ink)}
html[data-ed-theme="dark"] .notifRow-time{color:var(--ed-muted)}
html[data-ed-theme="dark"] .notifGroupLabel{color:var(--ed-muted)}
html[data-ed-theme="dark"] .seo-count{color:var(--ed-muted)}
html[data-ed-theme="dark"] .pmain .muted{color:var(--ed-muted)}
html[data-ed-theme="dark"] .cu-tabs>.btn{color:var(--ed-ink)}
html[data-ed-theme="dark"] .cu-export{color:var(--ed-ink)}
html[data-ed-theme="dark"] .dsc-list-title p{color:var(--ed-muted)}
html[data-ed-theme="dark"] .dsc-search>span{color:var(--ed-muted)}
html[data-ed-theme="dark"] .dsc-row-time{color:var(--ed-muted)}
html[data-ed-theme="dark"] .dsc-row-snip{color:var(--ed-ink)}
html[data-ed-theme="dark"] .dsc-thread-title p{color:var(--ed-muted)}
html[data-ed-theme="dark"] .dsc-empty{color:var(--ed-muted)}
html[data-ed-theme="dark"] .dsc-msg-head time{color:var(--ed-muted)}
html[data-ed-theme="dark"] .dsc-edited{color:var(--ed-muted)}
html[data-ed-theme="dark"] .dsc-quote{color:var(--ed-muted)}
html[data-ed-theme="dark"] .dsc-note{color:var(--ed-muted)}
html[data-ed-theme="dark"] .dsc-act{color:var(--ed-muted)}
html[data-ed-theme="dark"] .dsc-tool{color:var(--ed-ink)}
html[data-ed-theme="dark"] .dsc-attachname{color:var(--ed-muted)}
html[data-ed-theme="dark"] .dsc-hint{color:var(--ed-muted)}
html[data-ed-theme="dark"] .lead{color:var(--ed-ink)}
html[data-ed-theme="dark"] .fi-p{color:var(--ed-ink)}
html[data-ed-theme="dark"] .tq-role{color:var(--ed-muted)}
html[data-ed-theme="dark"] .accordion .body{color:var(--ed-ink)}
html[data-ed-theme="dark"] .auth-head p{color:var(--ed-muted)}
html[data-ed-theme="dark"] .pw-wrap button{color:var(--ed-muted)}
html[data-ed-theme="dark"] .check-row{color:var(--ed-ink)}
html[data-ed-theme="dark"] .ced-tab{color:var(--ed-ink)}
html[data-ed-theme="dark"] .empty-cell-in{color:var(--ed-muted)}
html[data-ed-theme="dark"] .be-drag-handle{color:var(--ed-ink)}
html[data-ed-theme="dark"] .be-block-type{color:var(--ed-ink)}
html[data-ed-theme="dark"] .fbx-saved{color:var(--ed-muted)}
html[data-ed-theme="dark"] .fbx-tip{color:var(--ed-muted)}
html[data-ed-theme="dark"] .fbx-ptabs button{color:var(--ed-ink)}
html[data-ed-theme="dark"] .fbx-sect{color:var(--ed-muted)}
html[data-ed-theme="dark"] .pex-outline h3{color:var(--ed-muted)}
html[data-ed-theme="dark"] .pex-lbl small{color:var(--ed-muted)}
html[data-ed-theme="dark"] .pex-eye{color:var(--ed-muted)}
html[data-ed-theme="dark"] .pex-live{color:var(--ed-muted)}
html[data-ed-theme="dark"] .pex-tool{color:var(--ed-ink)}
/* Older .kpi tiles (faculty dashboard and several admin screens) now match the .stat tiles */
.kpis{gap:14px}
.pmain .kpi{
background:var(--ed-surface);border:1px solid var(--ed-line);border-left-width:1px;border-radius:var(--ed-radius);
box-shadow:var(--ed-shadow);padding:16px 18px;
}
.pmain .kpi b{font-family:var(--font-heading);font-size:28px;font-weight:700;letter-spacing:-.02em;color:var(--ed-ink);line-height:1.15}
.pmain .kpi span{font-size:13px;text-transform:none;letter-spacing:0;color:var(--ed-muted)}
/* =====================================================================================
Step 4 — Course player (/mycourse/). It renders outside .portal, so it is skinned
here by its own classes. Light and dark both covered (dark overrides at the end).
===================================================================================== */
body:has(.player-shell){background:var(--ed-canvas)}
.player-shell{
border:1px solid var(--ed-line);border-radius:var(--ed-radius);background:var(--ed-surface);box-shadow:var(--ed-shadow);
}
/* Top bar: previous/next + a thicker progress bar */
.player-topbar{background:var(--ed-surface);border-bottom:1px solid var(--ed-line);padding:10px 20px}
.player-topbar-nav a{color:var(--accent-text);font-weight:600}
.player-topbar-progress-label{color:var(--ed-muted);font-size:12px;font-weight:600;letter-spacing:.02em}
.player-topbar-progress-track,.player-sidebar-progress .player-topbar-progress-track{height:8px;border-radius:8px;background:var(--ed-canvas);max-width:360px}
.player-topbar-progress-fill{background:linear-gradient(90deg,var(--accent-fill),color-mix(in srgb,var(--accent-fill) 70%,#5ad1a0));border-radius:8px}
/* Sidebar: navy course outline, like the portal sidebar */
.player-sidebar{background:var(--navy);border-right:0;color:#cdd7ea;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}
.player-sidebar-header{background:color-mix(in srgb,var(--navy) 80%,black);padding:18px 16px;border-bottom:1px solid rgba(255,255,255,.1)}
.player-sidebar-header-title{font-family:var(--font-heading);font-weight:600;font-size:15px}
.player-sidebar-back{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.06)}
.player-module-row{padding:14px 16px 3px;border-radius:0}
.player-module-row:hover{background:rgba(255,255,255,.06)}
.player-module-name{color:#fff;font-weight:600;font-size:14.5px}
.player-module-dot{border-color:#8ea3c4;width:16px;height:16px}
.player-module-dot.done{background:var(--st-good-fg,#2e7d5b);border-color:var(--st-good-fg,#2e7d5b)}
.player-module-count{color:#8ea3c4;font-size:12.5px}
.player-module-count:hover{text-decoration:none;color:#fff}
.player-item{color:#cdd7ea;margin:1px 10px 1px 14px;padding:8px 10px 8px 28px;border-left:0;border-radius:9px;font-size:14px}
.player-item:hover{background:rgba(255,255,255,.08);color:#fff}
.player-item.active{background:var(--accent-fill);color:var(--on-accent);font-weight:600;box-shadow:0 4px 12px -4px color-mix(in srgb,var(--gold) 70%,transparent)}
.player-item-dot{border-color:#8ea3c4}
.player-item.active .player-item-dot{border-color:#fff;background:rgba(255,255,255,.25)}
.player-item-dot.done{background:#3fcf8e;border-color:#3fcf8e}
.player-item-children{border-left-color:rgba(255,255,255,.18)}
.player-sidebar-progress{background:color-mix(in srgb,var(--navy) 80%,black);border-top:1px solid rgba(255,255,255,.1)}
.player-sidebar-progress .player-topbar-progress-label{color:#cdd7ea}
.player-sidebar-progress .player-topbar-progress-track{background:rgba(255,255,255,.14)}
/* Lesson area */
.player-main{padding:26px 32px;background:var(--ed-surface)}
.player-item-title{font-family:var(--font-heading);font-weight:600;font-size:26px;letter-spacing:-.01em;color:var(--ed-ink);margin-bottom:16px}
.player-breadcrumb-row{background:var(--ed-canvas);border:1px solid var(--ed-line);border-radius:10px;color:var(--ed-muted);font-size:13px}
.player-breadcrumb-row b{color:var(--ed-ink)}
.player-status-badge{background:color-mix(in srgb,var(--gold) 14%,var(--ed-surface));color:var(--accent-text);border:1px solid color-mix(in srgb,var(--gold) 35%,var(--ed-surface));font-weight:700}
.player-status-badge.done{background:var(--st-good-bg);color:var(--st-good-fg);border-color:transparent}
.player-footer-nav{border-top-color:var(--ed-line)}
.player-footer-nav a{color:var(--accent-text);font-weight:600}
.player-video-wrap{border-radius:var(--ed-radius)}
.player-topbar .btn,.player-footer-nav .btn{border-radius:10px;font-weight:600}
@media(max-width:760px){
.player-main{padding:18px 16px}
.player-sidebar{border-radius:0}
.player-item-title{font-size:22px}
}
/* Dark mode */
html[data-ed-theme="dark"] .player-shell,html[data-ed-theme="dark"] .player-main,html[data-ed-theme="dark"] .player-topbar{background:var(--ed-surface);border-color:var(--ed-line)}
html[data-ed-theme="dark"] .player-sidebar{background:color-mix(in srgb,var(--navy) 55%,black)}
html[data-ed-theme="dark"] .player-sidebar-header,html[data-ed-theme="dark"] .player-sidebar-progress{background:color-mix(in srgb,var(--navy) 40%,black)}
html[data-ed-theme="dark"] .player-item.active{color:#fff}
html[data-ed-theme="dark"] .player-item-title,html[data-ed-theme="dark"] .player-breadcrumb-row b{color:var(--ed-ink)}
html[data-ed-theme="dark"] .player-breadcrumb-row{background:#101a2b}
html[data-ed-theme="dark"] .player-topbar-progress-track{background:#101a2b}
html[data-ed-theme="dark"] .player-topbar-progress-label{color:var(--ed-muted)}
html[data-ed-theme="dark"] .lesson-body{color:var(--ed-ink)}
/* =====================================================================================
Step 5 — Back Office fixes found by auditing every admin tab in both modes
===================================================================================== */
/* Tab bars (cu-enhance builds these from ghost buttons) keep their text readable in dark mode */
html[data-ed-theme="dark"] .cu-tabs>.btn{color:var(--ed-muted)!important}
html[data-ed-theme="dark"] .cu-tabs>.btn:hover{background:rgba(255,255,255,.06)!important;color:var(--ed-ink)!important}
html[data-ed-theme="dark"] .cu-tabs>.btn[aria-current="page"]{color:var(--accent-text)!important}
html[data-ed-theme="dark"] .cu-tabs>.btn span[style*="opacity"]{background:#1d2a42}
html[data-ed-theme="dark"] .cu-tabs>.btn[aria-current="page"] span[style*="opacity"]{background:color-mix(in srgb,var(--gold) 24%,var(--ed-surface))}
/* Ghost buttons in dark mode: readable outline buttons, including the red (Cancel / Delete) kind */
html[data-ed-theme="dark"] .btn.ghost{color:var(--accent-text);border-color:color-mix(in srgb,var(--gold) 55%,var(--ed-surface));background:transparent}
html[data-ed-theme="dark"] .btn.ghost:hover{background:var(--accent-fill);color:#fff}
html[data-ed-theme="dark"] .btn.ghost[class*="danger"],html[data-ed-theme="dark"] .btn.ghost.warn,
html[data-ed-theme="dark"] .btn.ghost[style*="--st-bad"],html[data-ed-theme="dark"] .btn.ghost[style*="a53b3b"],
html[data-ed-theme="dark"] .btn.ghost[style*="9a2f2f"]{color:var(--st-bad-fg);border-color:color-mix(in srgb,var(--st-bad-fg) 60%,var(--ed-surface))}
/* Status pills: tinted, readable on dark surfaces */
html[data-ed-theme="dark"] .pill{border:0}
html[data-ed-theme="dark"] .pill.good{background:var(--st-good-bg);color:var(--st-good-fg)}
html[data-ed-theme="dark"] .pill.warn{background:var(--st-warn-bg);color:var(--st-warn-fg)}
html[data-ed-theme="dark"] .pill.bad{background:var(--st-bad-bg);color:var(--st-bad-fg)}
html[data-ed-theme="dark"] .pill.info{background:var(--st-info-bg);color:var(--st-info-fg)}
html[data-ed-theme="dark"] .pill:not(.good):not(.warn):not(.bad):not(.info):not(.gold){background:#1d2a42;color:var(--ed-ink)}
html[data-ed-theme="dark"] .swtoggle-label{color:var(--ed-muted)}
html[data-ed-theme="dark"] .swtoggle[aria-checked="true"] .swtoggle-label{color:var(--st-good-fg)}
/* The SEO tab's Google-result mock-up is meant to look like a white search result in either mode */
html[data-ed-theme="dark"] .seo-preview{background:#fff;border-color:#dadce0}
html[data-ed-theme="dark"] .seo-preview-site{color:#202124}
html[data-ed-theme="dark"] .seo-preview-title{color:#1a0dab}
html[data-ed-theme="dark"] .seo-preview-desc{color:#4d5156}
/* Inline style="" colors written into screens' templates (attribute selectors, since inline beats classes) */
html[data-ed-theme="dark"] body{--warn:#f0c27a;--good:#7fd6ae;--bad:#f1a1a1}
html[data-ed-theme="dark"] [style*="color:#a53b3b"],html[data-ed-theme="dark"] [style*="color:#c0392b"],
html[data-ed-theme="dark"] [style*="color:#a33"]{color:#f1a1a1!important}
html[data-ed-theme="dark"] .btn[style*="border-color:#a53b3b"]{border-color:#f1a1a1!important}
html[data-ed-theme="dark"] [style*="color:#5c6b82"],html[data-ed-theme="dark"] [style*="color:#555"]{color:var(--ed-muted)!important}
html[data-ed-theme="dark"] [style*="color:#2e7d32"],html[data-ed-theme="dark"] [style*="color:#2f8a4b"]{color:var(--st-good-fg)!important}
html[data-ed-theme="dark"] [style*="color:#1a0dab"]{color:#8ab4f8!important}
html[data-ed-theme="dark"] .seo-preview [style*="color:#1a0dab"]{color:#1a0dab!important}
html[data-ed-theme="dark"] [style*="background:#f1f3f7"],html[data-ed-theme="dark"] [style*="background:#eef1f7"],
html[data-ed-theme="dark"] [style*="background:#f4f4f4"]{background:#1d2a42!important;color:var(--ed-ink)}
html[data-ed-theme="dark"] [style*="background:#fdf6ec"],html[data-ed-theme="dark"] [style*="background:#fff3b0"]{background:var(--st-warn-bg)!important;color:var(--st-warn-fg)}
html[data-ed-theme="dark"] [style*="background:#f7e3e3"]{background:var(--st-bad-bg)!important;color:var(--st-bad-fg)}
/* Sidebar rows: don't reserve room for a group chevron on rows that have no children (it clipped long labels) */
.pnav .nav-toggle-empty{display:none}
.pnav .nav-label{flex:1;min-width:0}
/* Tables: horizontal row rules only (EduDash style) instead of a full grid, in both modes */
.pmain th,.pmain td{border-left:0;border-right:0;border-top:0;border-bottom:1px solid var(--ed-line)}
.pmain table{border:0}
/* Notification-rule phone/email mock-ups are drawn as light screens in either mode */
html[data-ed-theme="dark"] .nrPhone-screen,html[data-ed-theme="dark"] .nrPhone-screen *{--ink:#222d3d;--muted:#5c6b82;--navy:#0c2d51}
html[data-ed-theme="dark"] .nrPhone-screen{color:#222d3d}
/* =====================================================================================
Step 6 — Public pages (home, about, programs, catalog, tuition, admissions, FAQ, contact,
course pages, sign-in). Scoped so the portal and the player are untouched.
===================================================================================== */
body:not(:has(.portal)):not(:has(.player-shell)){background:var(--ed-canvas)}
/* Header: quieter bar, pill nav, a light/dark toggle */
body:not(:has(.portal)):not(:has(.player-shell)) header.top{box-shadow:0 1px 0 rgba(255,255,255,.06),0 4px 18px -8px rgba(0,0,0,.35)}
body:not(:has(.portal)):not(:has(.player-shell)) .topbar{padding:10px 20px}
body:not(:has(.portal)):not(:has(.player-shell)) nav.main a,body:not(:has(.portal)):not(:has(.player-shell)) nav.main .navlink-label{border-radius:999px;padding:7px 13px;font-weight:500;color:#d5deee;transition:background .15s,color .15s}
body:not(:has(.portal)):not(:has(.player-shell)) nav.main a:hover{background:rgba(255,255,255,.1);color:#fff}
body:not(:has(.portal)):not(:has(.player-shell)) nav.main a.active,body:not(:has(.portal)):not(:has(.player-shell)) nav.main a[aria-current="page"]{background:rgba(255,255,255,.16);color:#fff;font-weight:600}
body:not(:has(.portal)):not(:has(.player-shell)) nav.main a.nav-btn,body:not(:has(.portal)):not(:has(.player-shell)) #navApplyBtn a,body:not(:has(.portal)):not(:has(.player-shell)) #navApplyBtn .btn{background:var(--accent-fill);color:var(--on-accent);border-radius:999px;font-weight:600;padding:8px 18px}
body:not(:has(.portal)):not(:has(.player-shell)) #navApplyBtn a:hover,body:not(:has(.portal)):not(:has(.player-shell)) #navApplyBtn .btn:hover{background:var(--accent-fill-hover);color:var(--on-accent)}
body:not(:has(.portal)):not(:has(.player-shell)) #navAuthLink,body:not(:has(.portal)):not(:has(.player-shell)) #navAccountLink{border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:6px 14px}
body:not(:has(.portal)):not(:has(.player-shell)) #navAuthLink:hover,body:not(:has(.portal)):not(:has(.player-shell)) #navAccountLink:hover{border-color:rgba(255,255,255,.55)}
.nav-theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:transparent;color:#d5deee;cursor:pointer;margin-right:6px;padding:0}
.nav-theme-toggle:hover{background:rgba(255,255,255,.12);color:#fff}
.nav-theme-toggle .ico{width:17px;height:17px}
.nav-theme-toggle-top{display:none}
@media(max-width:940px){
/* Phone: the theme toggle sits in the top bar beside the hamburger as a round button, not inside the menu. */
nav.main .nav-theme-toggle{display:none}
.nav-theme-toggle-top{display:inline-flex;margin:0 0 0 auto;width:44px;height:44px;flex:none;border-radius:50%;aspect-ratio:1}
.nav-theme-toggle-top+.menu-toggle{margin-left:0}
.nav-theme-toggle-top .ico{width:20px;height:20px}
}
.nav-theme-toggle.ed-theme-toggle .ico-moon{display:inline-block}.nav-theme-toggle.ed-theme-toggle .ico-sun{display:none}
html[data-ed-theme="dark"] .nav-theme-toggle .ico-moon{display:none}
html[data-ed-theme="dark"] .nav-theme-toggle .ico-sun{display:inline-block}
/* Hero: deeper gradient, bigger primary button */
body:not(:has(.portal)):not(:has(.player-shell)) .hero{position:relative}
body:not(:has(.portal)):not(:has(.player-shell)) .hero .cta .btn{border-radius:999px;box-shadow:0 10px 24px -10px rgba(0,0,0,.5);font-weight:600}
body:not(:has(.portal)):not(:has(.player-shell)) .hero .cta .btn.ghost{box-shadow:none;backdrop-filter:blur(2px)}
/* Section headings */
body:not(:has(.portal)):not(:has(.player-shell)) .section-title h2,body:not(:has(.portal)):not(:has(.player-shell)) .section-title h1{font-weight:600;color:var(--ed-ink)}
body:not(:has(.portal)):not(:has(.player-shell)) h1.section-title{color:var(--ed-ink)}
body:not(:has(.portal)):not(:has(.player-shell)) .lead{color:var(--ed-muted)}
/* Cards: the same 14px radius, hairline border and soft shadow as the portal */
body:not(:has(.portal)):not(:has(.player-shell)) main .card,body:not(:has(.portal)):not(:has(.player-shell)) .course-card,body:not(:has(.portal)):not(:has(.player-shell)) .program-card,body:not(:has(.portal)):not(:has(.player-shell)) .faq-item,body:not(:has(.portal)):not(:has(.player-shell)) .grid>.card{
background:var(--ed-surface);border:1px solid var(--ed-line);border-radius:14px;box-shadow:var(--ed-shadow);
}
body:not(:has(.portal)):not(:has(.player-shell)) .course-card{border-top:1px solid var(--ed-line);overflow:hidden}
body:not(:has(.portal)):not(:has(.player-shell)) .course-card:hover,body:not(:has(.portal)):not(:has(.player-shell)) .program-card:hover,body:not(:has(.portal)):not(:has(.player-shell)) main .grid>.card:hover{
transform:translateY(-3px);border-color:color-mix(in srgb,var(--gold) 40%,var(--ed-line));
box-shadow:0 16px 32px -16px color-mix(in srgb,var(--navy) 38%,transparent);
}
body:not(:has(.portal)):not(:has(.player-shell)) .course-card .cover{height:150px}
body:not(:has(.portal)):not(:has(.player-shell)) .course-card h4,body:not(:has(.portal)):not(:has(.player-shell)) .program-card h4{font-weight:600;color:var(--ed-ink)}
body:not(:has(.portal)):not(:has(.player-shell)) .course-card .price{font-size:22px;color:var(--ed-ink)}
body:not(:has(.portal)):not(:has(.player-shell)) .course-card .btn,body:not(:has(.portal)):not(:has(.player-shell)) .program-card .btn{border-radius:10px;font-weight:600}
/* Feature icons (Affordable / Accessible / ...) as rounded tiles */
body:not(:has(.portal)):not(:has(.player-shell)) main .card.center .ico-badge,body:not(:has(.portal)):not(:has(.player-shell)) main .card.center>div:first-child:has(svg){border-radius:14px}
/* Buttons across the public site */
body:not(:has(.portal)):not(:has(.player-shell)) main .btn{border-radius:999px;font-weight:600}
body:not(:has(.portal)):not(:has(.player-shell)) main .btn.sm{border-radius:10px}
body:not(:has(.portal)):not(:has(.player-shell)) main .btn.ghost{background:transparent}
/* Quote / testimonial and the closing call-to-action band */
body:not(:has(.portal)):not(:has(.player-shell)) .testimonial,body:not(:has(.portal)):not(:has(.player-shell)) .quote-card{background:var(--ed-surface);border:1px solid var(--ed-line);border-radius:14px}
body:not(:has(.portal)):not(:has(.player-shell)) .cta-band,body:not(:has(.portal)):not(:has(.player-shell)) main .card.cta,body:not(:has(.portal)):not(:has(.player-shell)) .band{border-radius:18px}
/* Forms on public pages (enrollment, contact, sign-in) */
body:not(:has(.portal)):not(:has(.player-shell)) main input[type=text],body:not(:has(.portal)):not(:has(.player-shell)) main input[type=email],body:not(:has(.portal)):not(:has(.player-shell)) main input[type=password],body:not(:has(.portal)):not(:has(.player-shell)) main input[type=tel],
body:not(:has(.portal)):not(:has(.player-shell)) main input[type=number],body:not(:has(.portal)):not(:has(.player-shell)) main input[type=date],body:not(:has(.portal)):not(:has(.player-shell)) main select,body:not(:has(.portal)):not(:has(.player-shell)) main textarea{
border:1px solid #d8deea;border-radius:10px;min-height:42px;background:#fff;color:var(--ed-ink);
}
body:not(:has(.portal)):not(:has(.player-shell)) main input:focus,body:not(:has(.portal)):not(:has(.player-shell)) main select:focus,body:not(:has(.portal)):not(:has(.player-shell)) main textarea:focus{border-color:var(--accent-fill)}
body:not(:has(.portal)):not(:has(.player-shell)) .auth-card,body:not(:has(.portal)):not(:has(.player-shell)) .auth-wrap .card{border-radius:16px;box-shadow:0 20px 40px -24px rgba(12,45,81,.35)}
/* Footer */
body:not(:has(.portal)):not(:has(.player-shell)) footer.site{background:color-mix(in srgb,var(--navy) 88%,black)}
body:not(:has(.portal)):not(:has(.player-shell)) footer.site a{color:#b9c7e0;transition:color .15s}
body:not(:has(.portal)):not(:has(.player-shell)) footer.site a:hover{color:#fff;text-decoration:none}
body:not(:has(.portal)):not(:has(.player-shell)) footer.site h5{color:#fff;font-weight:600}
/* Dark mode on public pages */
html[data-ed-theme="dark"] body:not(:has(.portal)):not(:has(.player-shell)) .hero{filter:brightness(.92)}
html[data-ed-theme="dark"] body:not(:has(.portal)):not(:has(.player-shell)) main input,html[data-ed-theme="dark"] body:not(:has(.portal)):not(:has(.player-shell)) main select,html[data-ed-theme="dark"] body:not(:has(.portal)):not(:has(.player-shell)) main textarea{background:#0f1828;border-color:#2c3b57;color:var(--ed-ink)}
html[data-ed-theme="dark"] body:not(:has(.portal)):not(:has(.player-shell)) main,html[data-ed-theme="dark"] body:not(:has(.portal)):not(:has(.player-shell)) main p,html[data-ed-theme="dark"] body:not(:has(.portal)):not(:has(.player-shell)) main li{color:var(--ed-ink)}
html[data-ed-theme="dark"] body:not(:has(.portal)):not(:has(.player-shell)) main .muted,html[data-ed-theme="dark"] body:not(:has(.portal)):not(:has(.player-shell)) .meta-row{color:var(--ed-muted)}
html[data-ed-theme="dark"] body:not(:has(.portal)):not(:has(.player-shell)) main h1,html[data-ed-theme="dark"] body:not(:has(.portal)):not(:has(.player-shell)) main h2,html[data-ed-theme="dark"] body:not(:has(.portal)):not(:has(.player-shell)) main h3,html[data-ed-theme="dark"] body:not(:has(.portal)):not(:has(.player-shell)) main h4{color:var(--ed-ink)}
html[data-ed-theme="dark"] body:not(:has(.portal)):not(:has(.player-shell)) main a:not(.btn){color:var(--accent-text)}
html[data-ed-theme="dark"] body:not(:has(.portal)):not(:has(.player-shell)) header.top{background:color-mix(in srgb,var(--navy) 55%,black)}
html[data-ed-theme="dark"] body:not(:has(.portal)):not(:has(.player-shell)) footer.site{background:color-mix(in srgb,var(--navy) 40%,black)}
/* Wide screens keep the whole nav on one line; between the phone menu (940px) and 1239px it wraps as it always did */
@media(min-width:1240px){
.nav-acct{white-space:nowrap}
.nav-acct a{white-space:nowrap}
nav.main{flex-wrap:nowrap}
#navLinks{display:inline-flex;flex-wrap:nowrap;align-items:center;gap:2px}
}
@media(min-width:941px) and (max-width:1239px){
body:not(:has(.portal)):not(:has(.player-shell)) .logo{flex:none}
body:not(:has(.portal)):not(:has(.player-shell)) nav.main{justify-content:flex-end;row-gap:4px}
body:not(:has(.portal)):not(:has(.player-shell)) nav.main a,body:not(:has(.portal)):not(:has(.player-shell)) nav.main .navlink-label{padding:7px 9px}
body:not(:has(.portal)):not(:has(.player-shell)) nav.main .nav-acct{flex-direction:row;gap:6px;margin-left:2px}
body:not(:has(.portal)):not(:has(.player-shell)) nav.main .nav-acct #navAuthLink.nav-logout{margin-top:0}
}
@media(min-width:1240px){
body:not(:has(.portal)):not(:has(.player-shell)) .topbar{max-width:1320px;gap:10px}
body:not(:has(.portal)):not(:has(.player-shell)) nav.main a,body:not(:has(.portal)):not(:has(.player-shell)) nav.main .navlink-label{padding:7px 10px;font-size:13.5px}
body:not(:has(.portal)):not(:has(.player-shell)) #navAuthLink,body:not(:has(.portal)):not(:has(.player-shell)) #navAccountLink{padding:6px 12px}
}
/* Inline style="color:var(--gold-d)" (step numbers, accents) needs a lighter blue on dark surfaces.
--accent-fill-hover is resolved on :root, so button hovers are unaffected. */
html[data-ed-theme="dark"] body{--gold-d:#5cb0f5}
/* Public data tables (course facts, tuition, schedules): row rules only, quiet header cells */
body:not(:has(.portal)):not(:has(.player-shell)) main table{border-collapse:separate;border-spacing:0;width:100%}
body:not(:has(.portal)):not(:has(.player-shell)) main th,body:not(:has(.portal)):not(:has(.player-shell)) main td{border:0;border-bottom:1px solid var(--ed-line);padding:11px 14px;text-align:left;font-family:var(--font-body,inherit)}
body:not(:has(.portal)):not(:has(.player-shell)) main th{background:var(--ed-canvas);color:var(--ed-muted);font-size:12.5px;font-weight:600;letter-spacing:.02em}
body:not(:has(.portal)):not(:has(.player-shell)) main tr:last-child th,body:not(:has(.portal)):not(:has(.player-shell)) main tr:last-child td{border-bottom:0}
body:not(:has(.portal)):not(:has(.player-shell)) main .card:has(>table),body:not(:has(.portal)):not(:has(.player-shell)) main .card:has(table){overflow:hidden}
html[data-ed-theme="dark"] body:not(:has(.portal)):not(:has(.player-shell)) main th{background:#101a2b}
/* =====================================================================================
Step 7 — Visual Website Editor (page editor, Navigation & Footer, Design & Theme)
===================================================================================== */
/* The editor's page preview shows PUBLIC content (hero, cards, ...), so portal heading/colour rules must not reach into it —
see the :not(.be-canvas *) on the .pmain heading rules above. */
/* Light "paper" behind the preview frame and the font specimens, as on the real public page */
html[data-ed-theme="dark"] .pex-stage{background:#101a2b;border:1px solid var(--ed-line)}
html[data-ed-theme="dark"] #deFontPreviewHeading,html[data-ed-theme="dark"] #deFontPreviewBody{background:#fff;padding:10px 14px;border-radius:8px}
/* ---- Public header: "Log out" is a round icon button to the right of "My account" ---- */
body:not(:has(.portal)):not(:has(.player-shell)) nav.main .nav-acct{display:inline-flex;flex-direction:row;align-items:center;gap:6px;margin-left:2px}
body:not(:has(.portal)):not(:has(.player-shell)) nav.main .nav-acct #navAuthLink.nav-logout{
width:36px;height:36px;padding:0;margin:0;border:1px solid rgba(255,255,255,.28);border-radius:50%;
display:inline-flex;align-items:center;justify-content:center;
font-size:0;line-height:0;color:#d5deee!important;opacity:1;background:transparent;
}
body:not(:has(.portal)):not(:has(.player-shell)) nav.main #navAuthLink.nav-logout .ico{width:17px;height:17px;margin:0}
body:not(:has(.portal)):not(:has(.player-shell)) nav.main #navAuthLink.nav-logout:hover{background:rgba(255,255,255,.12);color:#fff!important;text-decoration:none}
@media(max-width:940px){
body:not(:has(.portal)):not(:has(.player-shell)) nav.main .nav-acct{margin:8px 0 0;justify-content:center}
body:not(:has(.portal)):not(:has(.player-shell)) nav.main .nav-acct #navAccountLink{align-self:center}
}
body:not(:has(.portal)):not(:has(.player-shell)) nav.main .nav-acct #navAuthLink.nav-logout{flex:none;min-width:36px;align-self:center}
/* =====================================================================================
Step 8 — Charts and trends (Dashboard, Reports). Drawn by cuChart in index.html.
===================================================================================== */
:root{
--cc-c1:var(--accent-fill); --cc-c2:#2e9d6e; --cc-c3:#d9972b; --cc-c4:#7b8ad4; --cc-c5:#c9544f; --cc-c6:#98a2b3;
}
html[data-ed-theme="dark"] body{--cc-c2:#47c28f;--cc-c3:#f0b24f;--cc-c4:#98a6ee;--cc-c5:#ee7b76;--cc-c6:#8591a6}
.dash-charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:var(--sp-4);margin-bottom:var(--sp-5)}
.dash-charts .panel-h{align-items:baseline}
.cc-note{font-size:12px;font-weight:400;color:var(--ed-muted)}
.cc-body{padding:12px 16px 14px;display:flex;flex-direction:column;justify-content:center}
.dash-charts .panel{display:flex;flex-direction:column}
.dash-charts .panel .cc-body{flex:1}
.cc-box{width:100%;min-height:120px}
.cc-loading{padding:56px 0;text-align:center;color:var(--ed-muted);font-size:13px}
.cc-svg{display:block;width:100%;height:auto;overflow:visible}
.cc-grid{stroke:var(--ed-line);stroke-width:1}
.cc-axis{fill:var(--ed-muted);font-size:11px;font-family:inherit}
.cc-val{fill:var(--ed-ink);font-size:11px;font-weight:600;font-family:inherit}
.cc-bar{fill:color-mix(in srgb,var(--accent-fill) 72%,var(--ed-surface));transition:fill .15s}
.cc-col.now .cc-bar{fill:var(--accent-fill-hover)}
.cc-col.future .cc-bar{fill:color-mix(in srgb,var(--accent-fill) 14%,var(--ed-surface));stroke:var(--accent-fill);stroke-width:1.2;stroke-dasharray:3 3}
.cc-col:hover .cc-bar{fill:var(--accent-fill)}
.cc-donut{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:center}
.cc-donut svg{width:150px;height:150px;flex:none}
.cc-track{stroke:var(--ed-line)}
.cc-seg.cc-c1{stroke:var(--cc-c1)}.cc-seg.cc-c2{stroke:var(--cc-c2)}.cc-seg.cc-c3{stroke:var(--cc-c3)}
.cc-seg.cc-c4{stroke:var(--cc-c4)}.cc-seg.cc-c5{stroke:var(--cc-c5)}.cc-seg.cc-c6{stroke:var(--cc-c6)}
.cc-center-big{fill:var(--ed-ink);font-size:24px;font-weight:700;font-family:var(--font-heading,inherit)}
.cc-center-small{fill:var(--ed-muted);font-size:9.5px;font-family:inherit}
.cc-legend{list-style:none;margin:0;padding:0;flex:1;min-width:150px;display:grid;gap:7px}
.cc-legend li{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ed-ink)}
.cc-legend li span{flex:1}
.cc-legend li b{font-variant-numeric:tabular-nums}
.cc-sw{width:10px;height:10px;border-radius:3px;flex:none}
.cc-sw.cc-c1{background:var(--cc-c1)}.cc-sw.cc-c2{background:var(--cc-c2)}.cc-sw.cc-c3{background:var(--cc-c3)}
.cc-sw.cc-c4{background:var(--cc-c4)}.cc-sw.cc-c5{background:var(--cc-c5)}.cc-sw.cc-c6{background:var(--cc-c6)}
.cc-hbars{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.cc-hl{display:flex;justify-content:space-between;gap:12px;font-size:13px;margin-bottom:5px;color:var(--ed-ink)}
.cc-hl b{font-variant-numeric:tabular-nums;color:var(--ed-muted);font-weight:600;white-space:nowrap}
.cc-ht{height:8px;border-radius:8px;background:var(--ed-canvas);overflow:hidden}
.cc-ht i{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,var(--accent-fill),color-mix(in srgb,var(--accent-fill) 60%,#3fcf8e))}
html[data-ed-theme="dark"] .cc-ht{background:#101a2b}
/* Trend line under a figure on a stat tile */
.stat .trend{font-size:12px;font-weight:600;color:var(--ed-muted)}
.stat .trend.up{color:var(--st-good-fg)}
.stat .trend.down{color:var(--st-bad-fg)}
.stat .trend span[aria-hidden]{font-size:9px;margin-right:2px;vertical-align:1px}
/* The Dashboard's six tiles sit as a tidy 3 x 2 (2 x 3 on narrow screens); other screens keep their auto-fit rows */
.stat-row.six{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:620px){.stat-row.six{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* =====================================================================================
Step 8 — Top-bar search (Back Office). Markup/JS: gsearchHtml() and gs* in index.html.
===================================================================================== */
.gsearch{position:relative;flex:1 1 260px;max-width:440px;min-width:200px;margin:0 auto}
.gsearch input{width:100%;height:40px;padding:0 46px 0 40px;border:1px solid #d8deea;border-radius:10px;background:#fff;color:var(--ed-ink);font:inherit;font-size:14px}
.gsearch input::-webkit-search-cancel-button{display:none}
.gsearch input:focus{border-color:var(--accent-fill)}
.gs-ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--ed-muted);display:flex;pointer-events:none}
.gs-key{position:absolute;right:10px;top:50%;transform:translateY(-50%);font:600 11px/1 inherit;color:var(--ed-muted);background:var(--ed-canvas);border:1px solid var(--ed-line);border-radius:5px;padding:3px 7px;pointer-events:none}
.gsearch:focus-within .gs-key{display:none}
.gs-pop{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:70;background:var(--ed-surface);border:1px solid var(--ed-line);border-radius:12px;box-shadow:0 18px 40px -14px rgba(16,24,40,.35);max-height:min(70vh,460px);overflow:auto;padding:6px}
.gs-pop[hidden]{display:none}
.gs-group{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ed-muted);padding:9px 10px 4px}
.gs-opt{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:9px;cursor:pointer}
.gs-opt.on{background:var(--ed-active-bg)}
.gs-t{display:flex;flex-direction:column;min-width:0;flex:1}
.gs-t b{font-size:14px;font-weight:600;color:var(--ed-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gs-t small{font-size:12px;color:var(--ed-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gs-opt mark{background:color-mix(in srgb,var(--gold) 26%,transparent);color:inherit;border-radius:3px;padding:0 1px}
.gs-badge{width:28px;height:28px;flex:none;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;background:var(--ed-active-bg);color:var(--accent-text)}
.gs-empty{padding:18px 12px;text-align:center;color:var(--ed-muted);font-size:13.5px}
html[data-ed-theme="dark"] .gsearch input{background:#0f1828;border-color:#2c3b57;color:var(--ed-ink)}
html[data-ed-theme="dark"] .gs-pop{box-shadow:0 18px 40px -14px rgba(0,0,0,.7)}
@media(max-width:760px){
.gsearch{order:3;flex:1 1 100%;max-width:none}
.gs-key{display:none}
}
/* =====================================================================================
Step 9 — Dashboard customization (Customize dialog, single-column grid, shortcuts)
===================================================================================== */
.dash-grid.single{grid-template-columns:1fr}
.dash-col{display:grid;gap:var(--sp-4);align-content:start;min-width:0}
.dc-body{max-height:62vh;overflow:auto;padding-right:4px}
.dc-group{margin:0 0 16px}
.dc-group h4{margin:0 0 6px;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--ed-muted)}
.dc-row{display:flex;align-items:center;gap:10px;padding:6px 2px;cursor:pointer;font-size:14px;margin:0}
.dc-row input{width:auto;min-height:0;margin:0}
.dc-list{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:6px}
.dc-sc{display:flex;align-items:center;gap:6px;padding:6px 8px;border:1px solid var(--ed-line);border-radius:10px;background:var(--ed-canvas)}
.dc-sc-t{flex:1;min-width:0;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dc-sc .btn-icon{min-width:32px;min-height:32px;padding:0 6px}
.dc-add{display:flex;gap:8px;align-items:center}
.dc-add select{flex:1;min-width:0}
.dc-foot{display:flex;justify-content:space-between;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid var(--ed-line)}
/* Inactivity warning (see idleBanner in index.html) */
.idle-dialog{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:99999;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
width:max-content;max-width:min(580px,calc(100vw - 24px));padding:14px 16px;border-radius:14px;background:var(--navy);color:#fff;
box-shadow:0 18px 50px -12px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.14)}
.idle-ico{display:inline-flex;width:38px;height:38px;flex:none;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.12)}
.idle-ico .ico{width:20px;height:20px}
.idle-text{display:flex;flex-direction:column;gap:2px;flex:1 1 230px;min-width:0;font-size:13.5px;line-height:1.4}
.idle-text b{font-size:15px}
.idle-actions{display:flex;gap:8px;flex-wrap:wrap}
.idle-dialog .btn.ghost{color:#fff;border-color:rgba(255,255,255,.5);background:transparent}
.idle-dialog .btn.ghost:hover{background:rgba(255,255,255,.14);color:#fff}
html[data-ed-theme="dark"] .idle-dialog{background:color-mix(in srgb,var(--navy) 55%,black)}
/* =====================================================================================
Step 10 — Dashboard layout: one 12-column grid of blocks; Arrange mode (drag + resize)
===================================================================================== */
.dash-board{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--sp-4);align-items:stretch;container:dboard / inline-size}
.dash-block{grid-column:span var(--span,4);position:relative;min-width:0;display:flex;flex-direction:column}
.dash-block>.stat,.dash-block>.panel{flex:1;width:100%;margin:0}
.dash-block>.stat{height:100%}
/* Narrower main areas: wide blocks go full width, the rest pair up, small screens stack */
@container dboard (max-width:900px){
.dash-block{grid-column:span 6}
.dash-block[data-w="8"],.dash-block[data-w="9"],.dash-block[data-w="10"],.dash-block[data-w="11"],.dash-block[data-w="12"]{grid-column:1/-1}
.db-resize,.db-tools .db-step{display:none}
}
@container dboard (max-width:560px){ .dash-block{grid-column:1/-1} }
.dash-arrange-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 var(--sp-4);padding:10px 14px;
border:1px solid color-mix(in srgb,var(--accent-fill) 40%,var(--ed-line));background:var(--ed-active-bg);border-radius:12px;font-size:13.5px;color:var(--ed-ink)}
.dash-arrange-bar>span:first-child{display:flex;align-items:center;gap:8px;flex:1 1 320px;line-height:1.45}
.dash-arrange-bar .ico{color:var(--accent-text);flex:none}
.dab-actions{display:flex;gap:8px}
.dash-board.arranging .dash-block{padding-top:46px;outline:2px dashed color-mix(in srgb,var(--accent-fill) 55%,transparent);outline-offset:3px;border-radius:14px;transition:box-shadow .15s,opacity .15s}
.dash-board.arranging .dash-block>.stat,.dash-board.arranging .dash-block>.panel{pointer-events:none;user-select:none}
.db-tools{position:absolute;top:6px;left:6px;right:6px;z-index:3;display:flex;align-items:center;gap:2px;padding:3px 4px;
background:var(--ed-surface);border:1px solid var(--ed-line);border-radius:10px;box-shadow:0 6px 18px -10px rgba(16,24,40,.45)}
.db-name{flex:1;min-width:0;padding:0 4px;font-size:12px;font-weight:600;color:var(--ed-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.db-handle,.db-btn{min-width:28px;min-height:28px;padding:0 6px;border:0;border-radius:7px;background:transparent;color:var(--ed-ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font:inherit;font-size:12px;font-weight:600}
.db-handle{cursor:grab;touch-action:none;color:var(--ed-muted)}
.db-handle:active{cursor:grabbing}
.db-handle:hover,.db-btn:hover{background:var(--ed-canvas)}
.db-h{border:1px solid var(--ed-line);min-width:52px}
.db-resize{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:12px;height:56px;border-radius:8px;background:var(--accent-fill);
cursor:ew-resize;touch-action:none;z-index:4;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.db-resize:after{content:"";position:absolute;left:4px;right:4px;top:18px;bottom:18px;border-left:1.5px solid rgba(255,255,255,.8);border-right:1.5px solid rgba(255,255,255,.8)}
.dash-block.dragging{opacity:.55;z-index:6;box-shadow:0 18px 40px -14px rgba(16,24,40,.5)}
.dash-block.resizing{outline-style:solid}
.dash-board.is-dragging,.dash-board.is-dragging *{cursor:grabbing!important}
/* Step tags: show which sidebar items make up the progress bar */
.player-step-tag{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;background:rgba(255,255,255,.14);color:#cdd7ea;vertical-align:middle}
.player-item.active .player-step-tag{background:rgba(255,255,255,.28);color:#fff}
.player-progress-legend{margin-top:8px;font-size:11.5px;line-height:1.4;color:#a9b8d3}
.player-progress-legend .player-step-tag{margin:0 2px}
/* Loading placeholders: grey bars that follow the theme (the base .skel is light-only) so a slow
screen reads as "on its way" in dark mode too. Markup comes from loadingRowsHtml() in index.html. */
.skel-rows{display:flex;flex-direction:column;gap:12px;padding:6px 2px}
.skel-rows .skel{height:14px;background:linear-gradient(90deg,var(--line),color-mix(in srgb,var(--line) 50%,var(--card,var(--bg))),var(--line));background-size:200% 100%}
.skel-rows .skel:nth-child(3n+1){width:92%}
.skel-rows .skel:nth-child(3n+2){width:78%}
.skel-rows .skel:nth-child(3n){width:60%}
@media (prefers-reduced-motion:reduce){.skel-rows .skel{animation:none}}
/* Gradebook on a phone: each student becomes a small stacked card instead of a 460px-wide table that
hides the Override / History buttons off the right edge. Cells carry data-label for their caption. */
@media(max-width:620px){
.gb-table,.gb-table tbody,.gb-table tr,.gb-table td{display:block;width:100%;box-sizing:border-box}
.gb-table thead{display:none}
.gb-table tr{padding:12px 0;border-bottom:1px solid var(--line)}
.gb-table tr:last-child{border-bottom:0}
.gb-table td{padding:3px 0;border:0}
.gb-table td[data-label]::before{content:attr(data-label);display:block;margin-bottom:2px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.gb-table td.gb-name{font-size:15px;font-weight:700}
.gb-table td[data-label="Current %"],.gb-table td[data-label="Letter"]{display:inline-block;width:auto;margin-right:22px;vertical-align:top}
.gb-table td.gb-acts{display:flex;flex-wrap:wrap;gap:8px;padding-top:8px}
}
/* A professor's written feedback, shown under the graded item on the student's Grades screen. */
.grade-feedback{margin-top:8px;padding:8px 12px;border-left:3px solid var(--gold,#c9a24a);border-radius:0 8px 8px 0;background:color-mix(in srgb,var(--gold,#c9a24a) 10%,transparent);font-size:13px;line-height:1.5}
.grade-feedback>b{display:block;margin-bottom:2px;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
/* Discussions, Facebook-style (post / comments / reactions) */
html[data-ed-theme="dark"] .fbp{border-bottom-color:var(--ed-line)}
html[data-ed-theme="dark"] .fbc-bubble,html[data-ed-theme="dark"] .fbc-inlinebox{background:color-mix(in srgb,var(--ed-ink) 10%,var(--ed-surface))}
html[data-ed-theme="dark"] .fbc.mine .fbc-bubble{background:color-mix(in srgb,var(--gold) 14%,var(--ed-surface))}
html[data-ed-theme="dark"] .dsc-rxpick,html[data-ed-theme="dark"] .dsc-menu-list,html[data-ed-theme="dark"] .dsc-rxsum.is-comment{background:var(--ed-surface);border-color:var(--ed-line)}
html[data-ed-theme="dark"] .dsc-rxico{border-color:var(--ed-surface);background:color-mix(in srgb,var(--ed-ink) 14%,var(--ed-surface))}
html[data-ed-theme="dark"] .fbp-who b,html[data-ed-theme="dark"] .fbc-name b,html[data-ed-theme="dark"] .dsc-rxrow b,html[data-ed-theme="dark"] .dsc-rxtab.on{color:var(--ed-ink)}
html[data-ed-theme="dark"] .dsc-rxtab.on{border-bottom-color:var(--ed-ink)}
/* ---------- Phone fit: nothing may be wider than the screen ----------
Wide content scrolls inside its own box (tables, code) or stacks (multi-column grids, wrapped rows);
it must never widen the page. Kept last so it wins over the per-feature rules above. */
@media(max-width:760px){
html,body{max-width:100%;overflow-x:clip}
.portal{grid-template-columns:minmax(0,1fr)}
.portal,.pmain,.pmain>*{min-width:0;max-width:100%}
.pmain img,.pmain video,.pmain iframe,.pmain canvas{max-width:100%}
.pmain img,.pmain video{height:auto}
.pmain pre{max-width:100%;overflow-x:auto}
.pmain table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.pmain input,.pmain select,.pmain textarea{max-width:100%;box-sizing:border-box}
.pmain [style*="grid-template-columns"]:not(.tb-kanban):not(.apx-rail){grid-template-columns:minmax(0,1fr)!important}
.pmain [style*="display:flex"],.pmain [style*="display: flex"]{flex-wrap:wrap}
.pmain [style*="width:"]:not(svg):not(.ico):not(img){max-width:100%}
.modal,.confirm-box{max-width:calc(100vw - 16px);box-sizing:border-box}
.modal-bg .modal{overflow-x:auto}
.modal table{display:block;max-width:100%;overflow-x:auto}
}
/* Compact stacked rows (gb-table gb-compact): for tables whose values are short — the Dean's roster,
payments and view-only gradebook — each field is one line, caption on the left and value on the right,
instead of a caption above the value. A 10-field student card goes from ~470px to about half that. */
@media(max-width:620px){
.gb-table.gb-compact td[data-label]{display:flex;justify-content:space-between;align-items:baseline;gap:14px;width:100%;text-align:right}
.gb-table.gb-compact td[data-label]::before{display:block;flex:none;margin:0;text-align:left}
.gb-table.gb-compact td.gb-name{padding-bottom:6px}
}
/* ---------- Back Office: full-width workspace + collapsible icon rail (Arketa-style) ----------
Admin only (.portal-admin). The page uses the whole window; the menu collapses to an icon rail whose
rows open a hover flyout (see the .rail-fly script in index.html). Phones keep the slide-out drawer. */
#app:has(.portal-admin){max-width:none;padding-left:16px;padding-right:16px}
body:has(.portal-admin) .topbar{max-width:none}
.pside-rail-toggle,.crumb-sep,.nav-gicon{display:none}
@media(min-width:761px){
.portal-admin:not(.nav-hidden){grid-template-columns:252px minmax(0,1fr)}
.portal-admin.nav-hidden{grid-template-columns:52px minmax(0,1fr);gap:14px}
.portal-admin.nav-hidden .pside{display:block;width:52px;padding:8px 7px;overflow:visible;max-height:none}
.portal-admin.nav-hidden .pside .who{padding:6px 0;justify-content:center;background:none;margin-bottom:8px}
.portal-admin.nav-hidden .pside .who>div,
.portal-admin.nav-hidden .pside .nav-label,.portal-admin.nav-hidden .pside .nav-toggle,.portal-admin.nav-hidden .pside .nav-star,
.portal-admin.nav-hidden .pside .nav-count,.portal-admin.nav-hidden .pside .nav-children,
.portal-admin.nav-hidden .pside .pnav-add,.portal-admin.nav-hidden .pside .pnav-hint{display:none!important}
.portal-admin.nav-hidden .pside .who-avatar{width:34px;height:34px}
/* The expand button sits right under the photo so it is one click away */
.portal-admin.nav-hidden .pside .who{flex-direction:column;align-items:center;gap:8px}
.portal-admin.nav-hidden .pside .pside-collapse{display:inline-flex;width:34px;height:30px;padding:0}
.portal-admin.nav-hidden .pside .pside-collapse .ico{transform:scaleX(-1)}
.portal-admin.nav-hidden .pnav .nav-item>a,.portal-admin.nav-hidden .pnav .nav-group>a{justify-content:center;width:36px;height:36px;padding:0;margin:3px auto;border-radius:9px;color:#cdd7ea;box-shadow:none}
.portal-admin.nav-hidden .pnav .nav-item>a{padding:0!important;gap:0!important} /* rows carry an inline padding-left for nesting depth */
.portal-admin.nav-hidden .nav-gicon{display:inline-flex}
.portal-admin.nav-hidden .pnav .nav-item>a .ico{width:19px;height:19px;color:#cdd7ea}
.portal-admin.nav-hidden .pside-fab{display:none}
.portal-bar .pside-rail-toggle{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:0;border-radius:8px;background:none;color:var(--muted);cursor:pointer;flex:none}
.portal-bar .pside-rail-toggle:hover{background:color-mix(in srgb,var(--navy) 8%,transparent);color:var(--navy)}
.portal-admin.nav-hidden .pmain,.portal-admin.nav-hidden .pmain:has(.pex){padding-top:0}
.portal-bar .crumb-sep{display:inline-block;width:1px;height:18px;background:var(--line);margin:0 4px}
.portal-admin .pmain{max-width:none}
}
.rail-fly{position:fixed;z-index:9998;min-width:200px;max-width:300px;max-height:calc(100vh - 16px);overflow-y:auto;background:#fff;color:#14213d;border:1px solid var(--line);border-radius:10px;padding:6px;box-shadow:0 10px 30px rgba(12,30,60,.22);display:none}
.rail-fly .rf-head{font:700 11.5px/1 var(--font-body,system-ui);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);padding:8px 12px 6px}
.rail-fly .rf-cap{font:700 12px/1 var(--font-body,system-ui);color:var(--muted);padding:10px 12px 4px}
.rail-fly .rf-empty{padding:8px 12px;font-size:13px;color:var(--muted)}
.rail-fly .rf-item{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:8px;font-size:13.5px;font-weight:500;color:#14213d;cursor:pointer;text-decoration:none;white-space:nowrap}
.rail-fly .rf-item .ico{width:15px;height:15px;color:var(--muted)}
.rail-fly .rf-item:hover{background:color-mix(in srgb,var(--navy) 8%,white)}
.rail-fly .rf-item.active{background:var(--accent-fill);color:var(--on-accent);font-weight:600}
.rail-fly .rf-item.active .ico{color:var(--on-accent)}
.rail-fly .rf-solo{padding:7px 12px;font-weight:600}
html[data-ed-theme="dark"] .rail-fly{background:#1b2740;color:#e6edf8;border-color:rgba(255,255,255,.14)}
html[data-ed-theme="dark"] .rail-fly .rf-item{color:#e6edf8}
html[data-ed-theme="dark"] .rail-fly .rf-item:hover{background:rgba(255,255,255,.08)}
/* Sidebar type: page rows a size smaller, group headings keep their larger weight and size. */
.pside a{font-size:13px}
.pside .nav-children a{font-size:12.5px}
.pnav .nav-group>a{font-size:13.5px;font-weight:800;color:#fff;padding-top:10px;padding-bottom:3px}
.pnav .nav-group .nav-group>a{font-size:13px;font-weight:700;padding-top:6px;color:#cdd7ea}
.pside a .ico{width:15px;height:15px}
/* ===== Customize sidebar dialog ===== */
.nsc-intro{font-size:13px;line-height:1.5;margin:0 0 14px}
.nsc-cap{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.nsc-top,.nsc-add,.nsc-hidden{border:1px solid var(--line);border-radius:12px;padding:12px;margin:0 0 12px}
.nsc-groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:12px;margin:0 0 12px;align-items:start}
.nsc-group{border:1px solid var(--line);border-radius:12px;padding:10px;min-width:0}
.nsc-group .nsc-group{margin:6px 0 0;background:color-mix(in srgb,var(--navy) 3%,transparent)}
.nsc-ghead,.nsc-row,.nsc-line{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.nsc-ghead{margin:0 0 8px}
.nsc-gname{flex:1 1 120px;min-width:90px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#c9641d}
.nsc-in{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--muted)}
.nsc-in select,.nsc-line select,.nsc-line input,.nsc-gname{padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:var(--surface,#fff);color:inherit;font:inherit;font-size:13px}
.nsc-row{padding:7px 8px;margin:0 0 4px;border-radius:8px;background:color-mix(in srgb,var(--navy) 5%,transparent);flex-wrap:nowrap;cursor:grab}
.nsc-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nsc-name small{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-left:4px}
.nsc-grip{color:var(--muted);cursor:grab;letter-spacing:-2px;user-select:none}
.nsc-ar{border:0;background:transparent;color:var(--muted);cursor:pointer;padding:4px 6px;font-size:12px}
.nsc-ar:hover{color:var(--navy)}
.nsc-txt{border:0;background:transparent;color:var(--muted);cursor:pointer;font:inherit;font-size:12px;white-space:nowrap;padding:4px 6px}
.nsc-txt:hover{color:var(--accent)}
.nsc-empty{font-size:12px;color:var(--muted);padding:6px 4px;font-style:italic}
.nsc-before{box-shadow:0 -2px 0 #2f7df6}.nsc-after{box-shadow:0 2px 0 #2f7df6}.nsc-into{outline:2px solid #2f7df6}
.nsc-foot{display:flex;justify-content:space-between;gap:8px;margin-top:6px}
/* Customize dialog: pages with subpages */
.nsc-sub{margin:0 0 4px 18px;padding-left:8px;border-left:1px solid var(--line)}
.nsc-rowwrap>.nsc-row{margin-bottom:3px}
/* Course editor bar: .pmain has no padding in EduDash, so the old -24px margins pulled the bar over the header and the sidebar.
Keep it inside the content column and stick it just under the header. */
.be-topbar{margin:0 0 18px;top:var(--bar-h,56px);border:1px solid var(--line);border-radius:14px}
.nsc-insel{max-width:140px;padding:4px 6px;border:1px solid var(--line);border-radius:8px;background:var(--surface,#fff);color:inherit;font:inherit;font-size:12px}
.nsc-row .nsc-in{flex:none}
.nsc-row{flex-wrap:wrap}.nsc-row .nsc-name{flex:1 1 120px}
/* Staff tabs toolbar: search grows, filters sit beside it, Export + the New button are pinned to the right, all one height. */
.staff-toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 14px}
.staff-toolbar>input{flex:1 1 240px;max-width:340px;margin:0}
.staff-toolbar>select{flex:0 1 190px;width:auto;max-width:200px;margin:0}
.staff-toolbar input,.staff-toolbar select{height:40px;padding-top:0;padding-bottom:0}
.staff-toolbar .stb-end{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.staff-toolbar .btn.sm,.staff-toolbar summary.btn{height:40px;display:inline-flex;align-items:center}
.staff-toolbar .stb-end .stu-menu-body{left:auto;right:0}
@media (max-width:700px){.staff-toolbar>input,.staff-toolbar>select{flex:1 1 100%;max-width:none}.staff-toolbar .stb-end{margin-left:0;width:100%}}
/* Condensed course cards: code + category share a row, 2-line description, price and button share the footer */
.course-card .code-row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.course-card .code-row .pill{margin:0;padding:2px 9px;font-size:11.5px}
.course-card .desc{flex:none!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4;margin:0 0 4px}
.course-card .meta-row{gap:2px 12px;margin:6px 0 8px;font-size:12.5px}
.course-card .meta-row .meta-note{font-size:11.5px;opacity:.85}
.course-card .foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto}
.course-card .foot .price{margin:0;font-size:20px}
.course-card .foot .btn{margin:0;flex:0 0 auto;white-space:nowrap}
body:not(:has(.portal)):not(:has(.player-shell)) .course-card .cover,.course-card .cover{height:110px;aspect-ratio:auto}
.course-card .body{padding:14px 16px}
.course-card h4{font-size:16px;margin:4px 0}
/* Practicum dates: an empty date reads "Select a date" (in the accent colour), not a grey mm/dd/yyyy that looks pre-filled */
.pr-date{position:relative;display:block}
.pr-date.inline{display:inline-block;width:auto}
.pr-date input{width:100%}
.pr-date[data-empty] input:not(:focus){color:transparent!important}
.pr-date[data-empty] input:not(:focus)::-webkit-datetime-edit{opacity:0}
.pr-date[data-empty]::after{content:'Select a date';position:absolute;left:12px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--accent-text,#0a58a8);font-size:14px}
.pr-date[data-empty]:focus-within::after{display:none}
|