/* ── CSS VARIABLES ─────────────────────────────────────────────────────── */ :root { --navy: #1B3A6B; --blue: #2E6DB4; --blue-bg: #E6F1FB; --gold: #C8960C; --gold-light: #F5E6B8; --bg: #F4F6FA; --surface: #FFFFFF; --surface2: #EEF1F8; --surface3: #E4E8F2; --border: #DDE1EE; --text: #18192A; --text2: #52576E; --text3: #8A90A8; --green: #1A6B3A; --green-hover: #145A30; --green-bg: #E8F5EE; --green-border: #B8DFC8; --amber: #7A4800; --amber-bg: #FEF3E2; --amber-border: #F5D99A; --red: #8B1A1A; --red-bg: #FCEAEA; --red-border: #F0B8B8; --purple: #3C3489; --purple-bg: #EEEDFE; --radius: 12px; --radius-sm: 8px; --shadow: 0 2px 12px rgba(27,58,107,.08); --shadow-lg: 0 8px 32px rgba(27,58,107,.14); } /* ── Dark theme ────────────────────────────────────────────────────────────── Charcoal background, deepened navy header (themes itself via --navy), brighter accents so they read on dark, status colors kept legible, shadows softened. Applied via [data-theme="dark"] (explicit toggle) OR prefers-color-scheme when the user hasn't chosen (data-theme unset). */ :root[data-theme="dark"] { --navy: #11233f; /* deepened so the header reads dark */ --blue: #5B9BE0; /* brighter so it pops on charcoal */ --blue-bg: #1C2A3D; /* dark "info" surface */ --gold: #E0B84A; --gold-light: #4A3E1C; --bg: #16181D; /* balanced charcoal, not pure black */ --surface: #1E2128; /* cards sit slightly above the bg */ --surface2: #262A33; /* hover / secondary surface */ --surface3: #303541; --border: #333845; --text: #E8EAF0; --text2: #AEB4C4; --text3: #767D90; --green: #5FC98A; --green-hover: #4FB87A; --green-bg: #16291F; --green-border: #2C5A3E; --amber: #E0A94A; --amber-bg: #2C2310; --amber-border: #5A471C; --red: #E07070; --red-bg: #2C1717; --red-border: #5A2C2C; --purple: #9189E0; --purple-bg: #211E3A; --shadow: 0 2px 12px rgba(0,0,0,.35); --shadow-lg: 0 8px 32px rgba(0,0,0,.5); } /* Auto dark when the user hasn't explicitly chosen a theme */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --navy: #11233f; --blue: #5B9BE0; --blue-bg: #1C2A3D; --gold: #E0B84A; --gold-light: #4A3E1C; --bg: #16181D; --surface: #1E2128; --surface2: #262A33; --surface3: #303541; --border: #333845; --text: #E8EAF0; --text2: #AEB4C4; --text3: #767D90; --green: #5FC98A; --green-hover: #4FB87A; --green-bg: #16291F; --green-border: #2C5A3E; --amber: #E0A94A; --amber-bg: #2C2310; --amber-border: #5A471C; --red: #E07070; --red-bg: #2C1717; --red-border: #5A2C2C; --purple: #9189E0; --purple-bg: #211E3A; --shadow: 0 2px 12px rgba(0,0,0,.35); --shadow-lg: 0 8px 32px rgba(0,0,0,.5); } } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; overflow-x: clip; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; font-size: 15px; line-height: 1.6; /* Guard: a page must never scroll horizontally, which would also widen position:fixed modals off-screen. `clip` doesn't break the sticky header. */ overflow-x: clip; } a { color: var(--blue); text-decoration: none; } a:hover { text-decoration: underline; } /* ── APP SHELL ─────────────────────────────────────────────────────────── */ /* Blazor's moves focus to the page

after each navigation (so screen readers announce the new page). It adds tabindex="-1" to that heading; the focus is programmatic, not user-initiated, so suppress the visible focus ring — otherwise the page title shows an odd box on every load. */ [tabindex="-1"]:focus { outline: none; } .app-root { min-height: 100vh; } /* Content sits to the right of the fixed left sidebar on desktop. The padding is reset to 0 in the ≤1024px media query, where the sidebar is hidden and the hamburger menu takes over. */ .app-main { min-height: calc(100vh - 58px); padding-left: var(--sidebar-w, 220px); } .auth-main { min-height: 100vh; } /* ── DESKTOP LEFT SIDEBAR NAV ────────────────────────────────────────────── Holds the page links (Dashboard, Students, …). Fixed below the 58px header, full-height, independently scrollable. Hidden ≤1024px (hamburger instead). */ .app-sidebar { position: fixed; top: 58px; left: 0; bottom: 0; width: var(--sidebar-w, 220px); background: var(--surface); border-right: 1px solid var(--border); padding: 14px 10px; overflow-y: auto; z-index: 150; } .sidebar-nav { display: flex; flex-direction: column; gap: 2px; } /* Nav section separator + small group label (used in the sidebar AND the mobile menu; both are light-surfaced, so border/text3 read correctly in each). */ .nav-sep { height: 1px; background: var(--border); margin: 12px 8px 6px; } .nav-grouplabel { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--text3); padding: 2px 12px 4px; } .app-sidebar .nav-link { color: var(--text2); padding: 10px 12px; font-size: 14px; border-radius: var(--radius-sm); } .app-sidebar .nav-link:hover { background: var(--surface2); color: var(--text); } .app-sidebar .nav-link.active { background: var(--blue-bg); color: var(--blue); font-weight: 600; } .app-sidebar .nav-link .ti { font-size: 18px; } .app-header { background: linear-gradient(135deg, var(--navy) 0%, #1E4A8A 100%); color: #fff; height: 58px; padding: 0 1.5rem; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 200; box-shadow: 0 2px 12px rgba(27,58,107,.3); } .header-left { display: flex; align-items: center; gap: 10px; } .header-logo { width: 36px; height: 36px; background: rgba(255,255,255,.15); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 20px; } /* When a custom logo is set, drop the icon "tile" box and let the logo breathe. */ .header-logo.has-logo { width: auto; min-width: 0; height: 42px; padding: 0; background: transparent; border-radius: 0; } .header-logo.has-logo .header-logo-img { max-height: 42px; max-width: 180px; width: auto; } .header-logo-img { max-width: 100%; max-height: 30px; border-radius: 6px; display: block; object-fit: contain; } .logo-preview { width: 64px; height: 64px; flex: none; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface2); display: flex; align-items: center; justify-content: center; overflow: hidden; } .logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; } .header-title-block {} /* ── File drop zone (drag-to-upload) ─────────────────────────────────────── */ /* A transparent fills the zone, so dropping a file onto it (or clicking anywhere in it) fires the same OnChange — no JS needed. */ .dropzone { position: relative; border: 2px dashed var(--border); border-radius: var(--radius); padding: 22px 16px; text-align: center; color: var(--text2); transition: border-color .12s ease, background .12s ease; } .dropzone.dragover { border-color: var(--blue); background: var(--blue-bg); } .dropzone i { font-size: 28px; color: var(--text3); display: block; margin-bottom: 6px; } .dropzone .dz-main { display: block; font-size: 14px; } .dropzone .dz-hint { display: block; font-size: 12px; color: var(--text3); margin-top: 4px; } .dz-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .header-title { font-size: 15px; font-weight: 700; white-space: nowrap; } /* Small "Beta" tag — theme-aware amber pill so it reads on the dark header, the light header, and the login card alike. */ .beta-badge { display: inline-block; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 1px 6px; border-radius: 999px; background: var(--amber-bg); color: var(--amber); vertical-align: middle; position: relative; top: -1px; } .beta-badge.login-beta { font-size: 11px; padding: 2px 9px; top: -3px; } .header-sub { font-size: 11px; opacity: .7; } .header-nav { display: flex; gap: 4px; } .nav-link { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; color: rgba(255,255,255,.75); transition: all .15s; text-decoration: none; } .nav-link:hover { background: rgba(255,255,255,.15); color: #fff; text-decoration: none; } .nav-link.active { background: rgba(255,255,255,.2); color: #fff; } .header-right { display: flex; align-items: center; gap: 16px; } .view-toggle { display: flex; align-items: center; gap: 2px; background: rgba(0,0,0,.18); border-radius: 20px; padding: 3px; } .view-toggle-btn { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; font-family: inherit; padding: 5px 12px; border: none; border-radius: 16px; background: transparent; color: rgba(255,255,255,.7); cursor: pointer; transition: all .15s; white-space: nowrap; } .view-toggle-btn:hover { color: #fff; } .view-toggle-btn.active { background: rgba(255,255,255,.95); color: var(--navy); } .user-menu { display: flex; align-items: center; gap: 8px; } .user-avatar { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; } .user-name { font-size: 13px; color: rgba(255,255,255,.85); } .btn-icon { width: 32px; height: 32px; border-radius: var(--radius-sm); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.8); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; transition: all .15s; } .btn-icon:hover { background: rgba(255,255,255,.2); color: #fff; } .role-badge { font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 20px; } .role-badge.admin { background: rgba(200,150,12,.35); color: #F5E6B8; } .role-badge.instructor { background: rgba(46,109,180,.35); color: #B8D4F8; } .role-badge.student { background: rgba(26,107,58,.35); color: #B8DFC8; } /* ── USER / ACCOUNT-SETTINGS MENU (click your name) ───────────────────────── */ .user-menu { position: relative; cursor: pointer; } .user-menu-caret { font-size: 14px; opacity: .7; } .user-panel { position: absolute; top: calc(100% + 10px); right: 0; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 12px 30px rgba(0,0,0,.22); min-width: 290px; padding: 8px; z-index: 300; } .user-panel-header { display: flex; align-items: center; gap: 10px; padding: 8px 10px; } .user-panel-header .user-avatar { background: var(--blue-bg); color: var(--blue); } .user-panel-name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-panel-role { font-size: 12px; color: var(--text2); } .user-panel-sep { height: 1px; background: var(--border); margin: 6px 4px; } .user-panel-toggle { display: flex; align-items: center; gap: 12px; padding: 8px 10px; } .user-panel-toggle-title { font-size: 13px; font-weight: 500; } .user-panel-toggle-sub { font-size: 12px; color: var(--text3); margin-top: 2px; } .user-panel-toggle-err { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; color: var(--red); padding: 0 10px 8px; } /* Super-admin tenant cards (responsive — no horizontal scroll) */ .tenant-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .tenant-card-main { min-width: 0; flex: 1 1 260px; } .tenant-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .tenant-card-name { font-size: 16px; font-weight: 700; } .tenant-card-meta { display: flex; gap: 16px; flex-wrap: wrap; color: var(--text2); font-size: 12px; margin-top: 6px; } .tenant-card-meta .ti { margin-right: 3px; color: var(--text3); } .tenant-card-actions { display: flex; gap: 8px; flex-wrap: wrap; } /* Super-admin "viewing a tenant" banner (shown across admin pages while scoped) */ .superadmin-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-border); border-radius: var(--radius-sm); padding: 10px 14px; margin: 1rem 1.5rem 0; font-size: 13px; } .user-panel-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; border: none; background: none; cursor: pointer; font-family: inherit; font-size: 14px; color: var(--text); text-align: left; border-radius: var(--radius-sm); } .user-panel-item:hover { background: var(--surface2); } .user-panel-item .ti { font-size: 18px; color: var(--text2); } /* On/off pill switch */ .switch { position: relative; display: inline-block; width: 42px; height: 24px; flex: none; } .switch input { opacity: 0; width: 0; height: 0; } .switch-slider { position: absolute; inset: 0; background: var(--surface2); border: 1px solid var(--border); border-radius: 24px; transition: .15s; cursor: pointer; } .switch-slider::before { content: ""; position: absolute; height: 18px; width: 18px; left: 2px; top: 2px; background: #fff; border-radius: 50%; transition: .15s; box-shadow: 0 1px 3px rgba(0,0,0,.3); } .switch input:checked + .switch-slider { background: var(--blue); border-color: var(--blue); } .switch input:checked + .switch-slider::before { transform: translateX(18px); } /* A labeled setting row with a control (e.g. a switch) pinned right */ .course-setting-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface2); margin-bottom: 1rem; } .course-setting-title { font-size: 14px; font-weight: 600; } .course-setting-sub { font-size: 12px; color: var(--text3); margin-top: 2px; max-width: 560px; } /* % complete on the student My Training course cards */ .course-card-progress { display: flex; align-items: center; gap: 8px; margin: 10px 0 4px; } .course-card-progress .progress-bar-wrap { flex: 1; } .course-card-progress-label { font-size: 12px; font-weight: 600; color: var(--text2); white-space: nowrap; } /* ── LAYOUT ─────────────────────────────────────────────────────────────── */ .app-body { max-width: 820px; margin: 0 auto; padding: 1.5rem; } /* Wider canvas for table/dashboard/list pages (forms & reading pages stay narrow). */ .app-body.wide { max-width: 1240px; } .page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.5rem; gap: 1rem; flex-wrap: wrap; } .page-title { font-size: 22px; font-weight: 700; } .page-sub { font-size: 13px; color: var(--text2); margin-top: 2px; } /* ── LOGIN ──────────────────────────────────────────────────────────────── */ .login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; } .login-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 2.25rem; width: 100%; max-width: 420px; box-shadow: var(--shadow-lg); } .login-logo { width: 60px; height: 60px; background: linear-gradient(135deg, var(--navy), var(--blue)); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; font-size: 28px; color: #fff; box-shadow: 0 4px 16px rgba(27,58,107,.3); } .login-title { text-align: center; font-size: 20px; font-weight: 700; margin-bottom: 4px; } .login-sub { text-align: center; font-size: 13px; color: var(--text2); margin-bottom: 2rem; } /* ── FORMS ──────────────────────────────────────────────────────────────── */ .form-group { margin-bottom: 1rem; } .form-label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 5px; color: var(--text); } .form-hint { font-size: 11px; color: var(--text3); margin-top: 4px; } .form-input { width: 100%; padding: 10px 13px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 14px; background: var(--surface); color: var(--text); outline: none; transition: border .15s, box-shadow .15s; font-family: inherit; } .form-input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(46,109,180,.15); } .form-input-sm { font-size: 13px; padding: 7px 10px; } textarea.form-input { resize: vertical; min-height: 80px; line-height: 1.5; } /* Inline form validation */ .input-error { border-color: var(--red); } .input-error:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(220,53,69,.15); } .field-error { color: var(--red); font-size: 12px; margin-top: 4px; display: flex; align-items: center; gap: 4px; } .form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; } .form-actions { display: flex; gap: 8px; align-items: center; margin-top: 1rem; flex-wrap: wrap; } .color-pick { width: 40px; height: 36px; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; padding: 2px; } /* ── BUTTONS ────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 18px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 13px; font-weight: 500; cursor: pointer; transition: all .15s; font-family: inherit; text-decoration: none; white-space: nowrap; } .btn:hover { background: var(--surface2); } .btn:active { transform: scale(.98); } .btn:disabled { opacity: .5; cursor: not-allowed; transform: none; } .btn-primary { background: linear-gradient(135deg, var(--navy), var(--blue)); border-color: var(--navy); color: #fff; } .btn-primary:hover, .btn-primary:focus { background: linear-gradient(135deg, #14294d, #235a94); /* darker navy→blue */ border-color: #14294d; color: #fff; } .btn-ghost { border-color: transparent; background: transparent; color: var(--text2); } .btn-ghost:hover { background: var(--surface2); border-color: var(--border); } .btn-warning { background: var(--amber-bg); border-color: var(--amber-border); color: var(--amber); } .btn-warning:hover { background: var(--amber-border); color: var(--amber); border-color: var(--amber); } .btn-danger { background: var(--red-bg); border-color: var(--red-border); color: var(--red); } .btn-danger:hover { background: var(--red); color: #fff; } .btn-danger-ghost { border-color: transparent; background: transparent; color: var(--text3); } .btn-danger-ghost:hover { color: var(--red); background: var(--red-bg); } .btn-full { width: 100%; } .btn-sm { padding: 6px 12px; font-size: 12px; } .btn-xs { padding: 4px 8px; font-size: 11px; } .back-btn { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--text2); cursor: pointer; background: none; border: none; padding: 0; margin-bottom: 1rem; font-family: inherit; transition: color .15s; } .back-btn:hover { color: var(--navy); } /* ── CARDS ──────────────────────────────────────────────────────────────── */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem 1.375rem; margin-bottom: 1rem; box-shadow: var(--shadow); } .card-title { font-size: 14px; font-weight: 700; margin-bottom: .875rem; display: flex; align-items: center; gap: 6px; } .card-progress-header { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 13px; font-weight: 600; } .alert-card { border-left: 3px solid; } .alert-card.amber { border-left-color: var(--gold); background: var(--amber-bg); } .alert-card.amber .card-title { color: var(--amber); } /* ── STATS ──────────────────────────────────────────────────────────────── */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 14px; margin-bottom: 1.25rem; } .stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.125rem 1.25rem; box-shadow: var(--shadow); } .stat-num { font-size: 30px; font-weight: 800; color: var(--blue); line-height: 1.1; } .stat-label { font-size: 11px; color: var(--text2); margin-top: 6px; font-weight: 600; } /* ── PROGRESS BARS ──────────────────────────────────────────────────────── */ .progress-bar-wrap { background: var(--surface2); border-radius: 20px; height: 8px; overflow: hidden; border: 1px solid var(--border); } .progress-bar-fill { height: 100%; border-radius: 20px; background: linear-gradient(90deg, var(--navy), var(--blue)); transition: width .5s cubic-bezier(.4,0,.2,1); } .progress-bar-fill.gold { background: linear-gradient(90deg, var(--gold), #E5A800); } /* ── TAGS ───────────────────────────────────────────────────────────────── */ .tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 20px; white-space: nowrap; } .tag.success { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); } .tag.warning { background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-border); } .tag.danger { background: var(--red-bg); color: var(--red); border: 1px solid var(--red-border); } .tag.blue { background: var(--blue-bg); color: var(--blue); border: 1px solid rgba(46,109,180,.25); } .tag.navy { background: rgba(27,58,107,.1); color: var(--navy); border: 1px solid rgba(27,58,107,.2); } .tag.gray { background: var(--surface2); color: var(--text2); border: 1px solid var(--border); } .tag.purple { background: var(--purple-bg); color: var(--purple); border: 1px solid rgba(60,52,137,.2); } .tag.amber { background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-border); } .badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; border-radius: 9px; font-size: 10px; font-weight: 700; padding: 0 4px; } .badge.amber { background: var(--gold); color: #fff; } /* ── PHASE BLOCKS ───────────────────────────────────────────────────────── */ .phase-block { margin-bottom: 10px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow); } .phase-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 15px; cursor: pointer; user-select: none; transition: filter .15s; } .phase-header:hover { filter: brightness(.97); } .phase-title { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; } .phase-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; } .phase-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .phase-meta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; margin-left: 10px; } .phase-count { font-size: 12px; color: var(--text2); white-space: nowrap; font-weight: 500; } .phase-pb { width: 70px; } .phase-body { background: var(--surface); padding: 4px 12px 12px; border-top: 1px solid var(--border); } /* ── ITEMS ──────────────────────────────────────────────────────────────── */ .module-label { font-size: 11px; font-weight: 700; color: var(--text2); text-transform: uppercase; letter-spacing: .07em; padding: 10px 6px 4px; } .section-cat { font-size: 11px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: .06em; padding: 6px 6px 2px; } .item-row { display: flex; align-items: flex-start; gap: 10px; padding: 6px 8px; border-radius: var(--radius-sm); transition: background .1s; } .item-row:hover { background: var(--surface2); } .item-row.done .item-text { color: var(--text3); text-decoration: line-through; } .item-row.flagged { background: var(--amber-bg); } .item-row.flagged .item-text { color: var(--amber); } .item-row input[type=checkbox] { width: 16px; height: 16px; margin-top: 3px; flex-shrink: 0; accent-color: var(--navy); cursor: pointer; } .item-content { flex: 1; min-width: 0; } .item-text { font-size: 13px; color: var(--text); line-height: 1.5; display: block; } .item-actions { display: flex; align-items: center; gap: 6px; margin-top: 4px; flex-wrap: wrap; } .item-link { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--blue); padding: 2px 7px; border-radius: 20px; background: rgba(46,109,180,.1); border: 1px solid rgba(46,109,180,.2); transition: all .15s; text-decoration: none; } .item-link:hover { background: rgba(46,109,180,.2); text-decoration: none; } .quiz-required-note { font-size: 11px; color: var(--blue); font-weight: 600; margin-left: 4px; } .quiz-btn { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 20px; border: 1.5px solid var(--blue); background: rgba(46,109,180,.1); color: var(--blue); cursor: pointer; transition: all .15s; font-family: inherit; } .quiz-btn:hover { background: var(--blue); color: #fff; } .quiz-btn.passed { border-color: var(--green); background: var(--green-bg); color: var(--green); cursor: default; } .quiz-btn.passed:hover { background: var(--green-bg); color: var(--green); } .quiz-attempt-info { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--text3); } .flag-btn { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; padding: 2px 7px; border-radius: 20px; border: 1px solid var(--border); background: none; cursor: pointer; color: var(--text3); transition: all .15s; font-family: inherit; } .flag-btn:hover { border-color: var(--amber-border); color: var(--amber); background: var(--amber-bg); } .flag-btn.active { border-color: var(--amber-border); color: var(--amber); background: var(--amber-bg); } /* ── VIDEO EMBED ────────────────────────────────────────────────────────── */ .video-embed-toggle { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; margin-top: 6px; } .video-thumb { width: 48px; height: 36px; border-radius: 4px; overflow: hidden; flex-shrink: 0; } .video-thumb img { width: 100%; height: 100%; object-fit: cover; } .video-title-small { font-size: 12px; font-weight: 500; flex: 1; min-width: 0; } .video-embed-wrap { margin-top: 6px; } .video-iframe { width: 100%; aspect-ratio: 16/9; border: none; border-radius: var(--radius-sm); } /* ── STUDENT LIST ───────────────────────────────────────────────────────── */ .student-row { display: flex; align-items: center; gap: 12px; padding: 16px 12px; border-radius: var(--radius-sm); cursor: pointer; transition: background .1s; border: 1px solid transparent; } .student-row:hover { background: var(--surface2); border-color: var(--border); } .student-row.archived { opacity: .6; } .avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; flex-shrink: 0; } .avatar.lg { width: 52px; height: 52px; font-size: 18px; } .student-info { flex: 1; min-width: 0; } .student-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .student-name { font-size: 14px; font-weight: 700; } .student-course { font-size: 12px; color: var(--text2); margin-top: 2px; } /* Simple data grid (waitlist, and reusable) */ .wl-table { width: 100%; border-collapse: collapse; font-size: 13px; } .wl-table th { text-align: left; padding: 8px 12px; color: var(--text2); font-weight: 600; font-size: 12px; border-bottom: 1px solid var(--border); white-space: nowrap; } .wl-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; } .wl-table tbody tr:hover { background: var(--surface2); } .wl-table th.sortable { cursor: pointer; user-select: none; } .wl-table th.sortable:hover { color: var(--text); } /* Course-builder "how it works" guide (shown when a course has no phases yet) */ .builder-guide { background: var(--blue-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 1rem; } .builder-guide-title { display: flex; align-items: center; gap: 8px; font-weight: 700; margin-bottom: 6px; } .builder-guide p { font-size: 13px; color: var(--text); margin: 6px 0; } .builder-guide ul { margin: 6px 0; padding-left: 20px; } .builder-guide li { font-size: 13px; color: var(--text2); margin: 4px 0; } .builder-guide-foot { color: var(--text2); } /* "Not yet enrolled" rows on the instructor dashboard: avatar + name (flex, ellipsis) on the left, enroll control + Archive pinned right. Dedicated layout so the select (which is .form-input width:100%) can't expand and crush the name. */ .enroll-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); margin-bottom: 6px; } .enroll-row .student-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .enroll-controls { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: auto; } .enroll-select { width: auto; min-width: 200px; } .enroll-hint { font-size: 12px; color: var(--text3); } @media (max-width: 560px) { .enroll-row { flex-wrap: wrap; } .enroll-controls { width: 100%; margin-left: 52px; } .enroll-select { flex: 1; min-width: 0; } } .student-meta-small { font-size: 12px; color: var(--text2); } .student-last-active { font-size: 11px; color: var(--text3); margin-top: 2px; } .progress-row { display: flex; align-items: center; gap: 8px; margin-top: 5px; } .progress-text { font-size: 12px; color: var(--text2); font-weight: 500; } .attention-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--amber-border); font-size: 13px; cursor: pointer; } .attention-item > span:first-child { min-width: 0; } .attention-item .tag, .attention-item .badge { flex-shrink: 0; } /* ── STUDENT DETAIL ─────────────────────────────────────────────────────── */ .student-detail-header .student-header-content { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; } .student-header-info { flex: 1; min-width: 0; } .student-header-info h2 { font-size: 18px; font-weight: 700; } .student-meta-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; } .student-header-actions { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; } .manage-section { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); } .manage-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; } .manage-toggle .control-label { cursor: pointer; } .manage-toggle .ti-chevron-down { color: var(--text3); transition: transform .15s; } .manage-body { margin-top: 1.25rem; padding-bottom: 6px; display: flex; flex-direction: column; gap: 14px; } .checkride-date { font-size: 13px; color: var(--text2); margin-top: 4px; display: flex; align-items: center; gap: 4px; } .detail-tabs { display: flex; gap: 4px; background: var(--surface2); padding: 4px; border-radius: var(--radius-sm); margin-bottom: 1rem; border: 1px solid var(--border); } .detail-tab { flex: 1; text-align: center; padding: 8px; border-radius: 4px; font-size: 13px; font-weight: 500; cursor: pointer; color: var(--text2); background: none; border: none; transition: all .15s; font-family: inherit; display: flex; align-items: center; justify-content: center; gap: 5px; } .detail-tab.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,.1); } .tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; border-radius: 9px; font-size: 10px; font-weight: 700; background: var(--blue); color: #fff; padding: 0 4px; } /* Muted count (not a "new"/unread signal) — e.g. instructor's total lesson-note count. */ .tab-badge.muted { background: var(--surface3); color: var(--text2); } .detail-phase { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 8px; overflow: hidden; } .detail-phase-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; cursor: pointer; transition: background .1s; } .detail-phase-header:hover { background: var(--surface2); } .detail-phase-body { padding: 8px 14px 12px; border-top: 1px solid var(--border); } .detail-module-label { font-size: 11px; font-weight: 700; color: var(--text2); text-transform: uppercase; letter-spacing: .07em; padding: 8px 0 2px; } .detail-cat { font-size: 11px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: .06em; padding: 4px 0 2px; } .detail-item { display: flex; align-items: flex-start; gap: 9px; padding: 4px 0; } .detail-item-icon { width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; font-size: 10px; } .detail-item-icon.done { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); } .detail-item-icon.todo { background: var(--surface2); color: var(--text3); border: 1px solid var(--border); } .detail-item-icon.flagged { background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-border); } .detail-item-text { font-size: 13px; line-height: 1.5; color: var(--text); } .detail-item-text.done { color: var(--text3); } .flagged-item { padding: 5px 0; border-bottom: 1px solid var(--amber-border); font-size: 13px; display: flex; align-items: center; gap: 6px; } /* ── FLIGHT NOTES ───────────────────────────────────────────────────────── */ .note-card { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: .5rem; overflow: hidden; } .note-header { display: flex; align-items: center; gap: 10px; padding: .75rem 1rem; cursor: pointer; transition: background .15s; user-select: none; } .note-header:hover { background: var(--surface3); } .note-title { font-size: 13px; font-weight: 700; color: var(--text); } .note-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text3); margin-top: 3px; } .note-body { padding: .5rem 1rem 1rem; font-size: 13px; color: var(--text); line-height: 1.6; white-space: pre-wrap; } .note-form { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1rem; margin-bottom: 1rem; } .ti-chevron-down { transition: transform .2s; } .ti-chevron-down.open { transform: rotate(180deg); display: inline-block; } /* ── QUIZ HISTORY ───────────────────────────────────────────────────────── */ .quiz-history-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); } .quiz-history-row:last-child { border-bottom: none; } .quiz-history-title { font-size: 13px; font-weight: 600; } .quiz-history-meta { font-size: 12px; color: var(--text2); margin-top: 2px; } /* ── QUIZ MODAL ─────────────────────────────────────────────────────────── */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 500; display: flex; align-items: center; justify-content: center; padding: 1rem; } .modal-box { background: var(--surface); border-radius: var(--radius); width: 100%; max-width: 600px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-lg); } .modal-lg { max-width: 720px; } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); } .modal-header h3 { font-size: 15px; font-weight: 700; } .modal-body { padding: 1.25rem; } /* Report screenshots: attach control (modal) + admin thumbnail. */ .screenshot-attach { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .screenshot-thumb { max-width: 100%; max-height: 160px; border: 1px solid var(--border); border-radius: var(--radius-sm); display: block; } .report-shot-thumb { max-width: 180px; max-height: 130px; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-top: 8px; display: block; cursor: zoom-in; } /* Inline help tooltip (HelpTip.razor): hover on desktop, tap/focus on mobile. */ .help-tip { position: relative; display: inline-flex; align-items: center; vertical-align: middle; color: var(--text3); cursor: help; outline: none; } .help-tip .ti { font-size: 15px; } .help-tip:hover, .help-tip:focus-visible { color: var(--blue); } .help-tip-bubble { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--text); color: var(--bg); padding: 8px 10px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500; line-height: 1.45; text-align: left; text-transform: none; letter-spacing: normal; width: max-content; max-width: 240px; box-shadow: var(--shadow-lg); z-index: 300; opacity: 0; visibility: hidden; transition: opacity .12s ease; pointer-events: none; } .help-tip:hover .help-tip-bubble, .help-tip:focus-within .help-tip-bubble { opacity: 1; visibility: visible; } .modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 1rem 1.25rem; border-top: 1px solid var(--border); } .quiz-header { background: linear-gradient(135deg, var(--navy), var(--blue)); color: #fff; padding: 1.25rem 1.5rem; border-radius: var(--radius) var(--radius) 0 0; } .quiz-header-title { font-size: 16px; font-weight: 700; margin-bottom: 2px; } .quiz-progress-bar { height: 4px; background: rgba(255,255,255,.25); border-radius: 2px; margin-top: 10px; overflow: hidden; } .quiz-progress-bar div { height: 100%; background: #fff; border-radius: 2px; transition: width .3s; } .quiz-body { padding: 1.5rem; } .quiz-q-num { font-size: 11px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; } .quiz-q-text { font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.5; margin-bottom: 1.25rem; } .quiz-option { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 8px; cursor: pointer; transition: all .15s; } .quiz-option:hover { border-color: var(--blue); background: rgba(46,109,180,.05); } .quiz-option.selected { border-color: var(--blue); background: rgba(46,109,180,.1); } .quiz-option.correct { border-color: var(--green); background: var(--green-bg); cursor: default; } .quiz-option.incorrect { border-color: var(--red); background: var(--red-bg); cursor: default; } .quiz-option.faded { opacity: .5; cursor: default; } .quiz-option-letter { width: 24px; height: 24px; border-radius: 50%; background: var(--surface2); border: 1.5px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; color: var(--text2); } .quiz-option.selected .quiz-option-letter { background: var(--blue); border-color: var(--blue); color: #fff; } .quiz-option.correct .quiz-option-letter { background: var(--green); border-color: var(--green); color: #fff; } .quiz-option.incorrect .quiz-option-letter { background: var(--red); border-color: var(--red); color: #fff; } .quiz-option-text { font-size: 14px; color: var(--text); line-height: 1.4; padding-top: 2px; } .quiz-explanation { background: var(--gold-light); border: 1px solid rgba(200,150,12,.3); border-radius: var(--radius-sm); padding: .875rem 1rem; margin-top: 1rem; font-size: 13px; color: var(--amber); line-height: 1.6; display: none; } .quiz-explanation.show { display: block; } .quiz-footer { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; border-top: 1px solid var(--border); gap: 10px; } .quiz-score-screen { padding: 2rem 1.5rem; text-align: center; } .quiz-score-circle { width: 100px; height: 100px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0 auto 1rem; border: 4px solid; } .quiz-score-circle.pass { border-color: var(--green); background: var(--green-bg); color: var(--green); } .quiz-score-circle.fail { border-color: var(--red); background: var(--red-bg); color: var(--red); } .score-pct { font-size: 28px; font-weight: 800; } .score-fraction { font-size: 12px; font-weight: 500; } .quiz-result-title { font-size: 20px; font-weight: 700; margin-bottom: 8px; } .quiz-result-msg { font-size: 13px; color: var(--text2); max-width: 380px; margin: 0 auto; line-height: 1.6; } .xp-earned { display: inline-flex; align-items: center; gap: 6px; background: var(--gold-light); border: 1px solid rgba(200,150,12,.3); border-radius: 20px; padding: 5px 14px; font-size: 14px; font-weight: 700; color: var(--amber); margin-bottom: 12px; } /* ── GAMIFICATION ───────────────────────────────────────────────────────── */ .xp-row { display: flex; align-items: center; gap: 12px; margin-bottom: 1rem; flex-wrap: wrap; } .streak-badge { display: inline-flex; align-items: center; gap: 5px; background: linear-gradient(135deg, #FF6B2B, #FF9A3C); color: #fff; border-radius: 20px; padding: 5px 12px; font-size: 13px; font-weight: 700; box-shadow: 0 2px 8px rgba(255,107,43,.3); } .xp-block { flex: 1; min-width: 180px; } .xp-meta { display: flex; justify-content: space-between; margin-bottom: 4px; font-size: 12px; font-weight: 600; color: var(--text2); } .level-name { font-size: 12px; color: var(--text3); } .xp-to-next { font-size: 11px; color: var(--text3); margin-top: 3px; } .milestone-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin-top: .75rem; } .milestone { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .4rem .6rem; display: flex; align-items: center; gap: 8px; } .milestone.earned { background: var(--gold-light); border-color: rgba(200,150,12,.35); } .milestone-icon { font-size: 16px; flex-shrink: 0; filter: grayscale(1); opacity: .4; } .milestone.earned .milestone-icon { filter: none; opacity: 1; } .milestone-name { font-size: 12px; font-weight: 600; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .milestone.earned .milestone-name { color: var(--amber); } .milestone-check { margin-left: auto; font-size: 14px; color: var(--gold); flex-shrink: 0; } /* ── COURSE CARDS ───────────────────────────────────────────────────────── */ .course-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; margin-bottom: .75rem; cursor: pointer; transition: all .15s; box-shadow: var(--shadow); } .course-card:hover { border-color: var(--blue); box-shadow: var(--shadow-lg); } .course-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .course-title { font-size: 15px; font-weight: 700; margin-bottom: 5px; } .course-meta { display: flex; gap: 6px; flex-wrap: wrap; } .course-description { font-size: 13px; color: var(--text2); margin-top: 8px; } .course-tabs { display: flex; gap: 4px; margin-bottom: 1rem; } .course-tab { flex: 1; padding: 8px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; cursor: pointer; color: var(--text2); background: var(--surface); border: 1px solid var(--border); transition: all .15s; font-family: inherit; } .course-tab.active { background: var(--navy); color: #fff; border-color: var(--navy); } .course-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border); } .course-row:last-child { border-bottom: none; } /* ── CURRICULUM EDITOR ──────────────────────────────────────────────────── */ .curriculum-editor {} .editor-phase { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 1rem; overflow: hidden; box-shadow: var(--shadow); } .editor-phase-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--surface2); } .editor-phase-title { font-size: 14px; font-weight: 700; } .builder-toolbar { display: flex; justify-content: flex-end; margin-bottom: 6px; } /* Collapsible card section header (caret + title + count), full-width clickable. */ .section-toggle { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: none; padding: 0; margin: 0; cursor: pointer; color: inherit; font-family: inherit; text-align: left; } .section-toggle .ti-chevron-down { color: var(--text3); font-size: 16px; } .section-toggle .tag { margin-left: auto; } /* Phase color picker: preset swatches + custom input below. */ .color-palette { display: flex; flex-direction: column; gap: 8px; } .color-swatches { display: flex; flex-wrap: wrap; gap: 6px; } .color-swatch { width: 24px; height: 24px; border-radius: var(--radius-sm); border: 1px solid rgba(0,0,0,.15); cursor: pointer; padding: 0; transition: transform .1s; } .color-swatch:hover { transform: scale(1.1); } .color-swatch.sel { outline: 2px solid var(--text); outline-offset: 2px; } .color-custom { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text2); cursor: pointer; } /* Stacked phase editors so the title, palette, and actions sit on their own rows. */ .phase-edit { display: flex; flex-direction: column; gap: 10px; width: 100%; align-items: flex-start; } .add-phase-form.stacked { flex-direction: column; align-items: stretch; } .phase-collapse-btn { display: inline-flex; align-items: center; gap: 8px; background: none; border: none; padding: 0; margin: 0; cursor: pointer; color: inherit; font-family: inherit; text-align: left; } .phase-collapse-btn .ti-chevron-down { font-size: 16px; color: var(--text3); } .editor-module { margin: 4px 0 14px; } .editor-module-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px 4px; } .module-label-edit { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text2); } /* Module contents step in from the module heading so the hierarchy is legible. */ .editor-module-body { padding: 0 12px 0 28px; } .editor-section { margin: 6px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; } .editor-section-header { display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; background: var(--surface2); } .section-cat-badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 20px; } .section-cat-badge.reading { background: var(--blue-bg); color: var(--blue); } .section-cat-badge.video { background: var(--red-bg); color: var(--red); } .section-cat-badge.practice { background: var(--green-bg); color: var(--green); } .section-cat-badge.document { background: var(--purple-bg); color: var(--purple); } .editor-item { padding: 4px 8px; border-radius: var(--radius-sm); } .editor-item:hover { background: var(--surface2); } .item-display { display: flex; align-items: center; gap: 8px; } /* ── Groups (containers) vs content (checkable leaves) ── */ /* Builder: a group is a clean heading with a softly-indented body (not a filled pill-row — that read as a file tree). */ .editor-group { margin: 8px 0 2px; } .editor-group-header { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: var(--radius-sm); } .editor-group-header:hover { background: var(--surface2); } .editor-group-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; color: var(--text2); } .editor-group-header.top { border-bottom: 1px solid var(--border); padding-bottom: 5px; } .editor-group-header.top .editor-group-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text3); } .editor-group-count { font-size: 11px; font-weight: 500; color: var(--text3); } .editor-group-body { margin-left: 14px; padding-left: 0; } /* Add affordances recede until hovered, so they don't dominate the structure. */ .add-item-row { display: flex; gap: 2px; padding: 2px 6px 6px; flex-wrap: wrap; } .add-item-row .btn { color: var(--text3); font-size: 11px; } .add-item-row .btn:hover { color: var(--blue); background: var(--blue-bg); } /* Student view / preview: a module's contents step in from its heading, and a group's children step in again — so it's clear what sits under what. */ .module-items { padding-left: 16px; } .item-children { margin-left: 16px; } .course-group { margin: 14px 0 2px; } .course-group-header { display: flex; align-items: center; gap: 8px; padding: 2px 2px 5px; } .course-group-header.top { border-bottom: 1px solid var(--border); } .course-group-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; color: var(--text2); } .course-group-header.top .course-group-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text3); } .course-group-count { font-size: 11px; font-weight: 500; color: var(--text3); background: var(--surface2); padding: 1px 8px; border-radius: 999px; white-space: nowrap; } /* Instructor read-only progress view: group heading. */ .detail-group { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text2); padding: 6px 0 2px; } .item-type-icon { font-size: 14px; flex-shrink: 0; } .item-title { font-size: 13px; flex: 1; min-width: 0; } .item-edit-form { padding: 8px 0; } .editor-actions { display: flex; align-items: center; gap: 6px; } .editor-actions-sm { display: flex; align-items: center; gap: 4px; } .add-module-btn, .add-section-btn { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--blue); background: none; border: 1px dashed rgba(46,109,180,.3); border-radius: var(--radius-sm); padding: 5px 10px; cursor: pointer; width: 100%; margin: 6px 16px; width: calc(100% - 32px); font-family: inherit; transition: all .15s; } .add-module-btn:hover, .add-section-btn:hover { background: rgba(46,109,180,.05); border-color: var(--blue); } .add-phase-form, .add-module-form, .add-section-form { padding: 12px 16px; background: var(--surface2); border-top: 1px solid var(--border); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .inline-edit { font-size: 14px; font-weight: 700; border: 1px solid var(--blue); border-radius: 4px; padding: 4px 8px; background: var(--surface); color: var(--text); font-family: inherit; flex: 1; } .course-editor-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 1.25rem; flex-wrap: wrap; } .course-title-input { font-size: 20px; font-weight: 700; border: none; border-bottom: 2px solid var(--border); background: transparent; color: var(--text); font-family: inherit; padding: 4px 0; outline: none; width: 100%; } .course-title-input:focus { border-bottom-color: var(--blue); } .editor-actions { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; } .settings-panel { background: var(--surface2); } /* ── Mobile sweep: course builder + waitlist filters ─────────────────────── */ @media (max-width: 640px) { /* Curriculum editor: stack each header's label and its action buttons so titles aren't crushed to one-word-per-line by the move/edit/delete cluster. */ .editor-phase-header, .editor-module-header, .editor-section-header { flex-wrap: wrap; gap: 8px; } .editor-phase-title, .module-label-edit { flex: 1 1 auto; min-width: 0; } .editor-actions-sm { margin-left: auto; flex-shrink: 0; } /* Item rows: title on its own line, actions beneath aligned right. */ .item-display { flex-wrap: wrap; } .item-title { flex: 1 1 100%; } .item-display .editor-actions-sm { width: 100%; justify-content: flex-end; } /* Top editor header + its action cluster wrap to full width. */ .course-editor-header > div:first-child { flex: 1 1 100%; } /* Constrain the actions to full width so the inner buttons actually wrap (flex-wrap alone doesn't, since flex-shrink:0 sizes it to max-content). */ .editor-actions { flex-wrap: wrap; flex-basis: 100%; } /* Add/edit forms stack; inline rename input goes full width. */ .add-phase-form, .add-module-form, .add-section-form { flex-direction: column; align-items: stretch; } .inline-edit { flex: 1 1 100%; width: 100%; } /* Trim nested indentation so deeply nested items keep usable width. */ .editor-module { margin: 8px; } .editor-section { margin: 6px; } .add-module-btn, .add-section-btn { width: calc(100% - 16px); margin: 6px 8px; } /* Waitlist filter toolbar: stack the cert/search/export controls full-width. */ .wl-filters { gap: 8px; } .wl-filters .form-group { min-width: 0 !important; flex: 1 1 100%; } .wl-filters > .btn { margin-left: 0 !important; width: 100%; } } /* ── QUIZ EDITOR ────────────────────────────────────────────────────────── */ .quiz-question-editor { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1rem; margin-bottom: 1rem; } .quiz-q-num-editor { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text3); margin-bottom: 8px; } .option-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .option-row input[type=radio] { flex-shrink: 0; accent-color: var(--green); } /* ── ALERTS ─────────────────────────────────────────────────────────────── */ .alert { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 1rem; } .alert-danger { background: var(--red-bg); color: var(--red); border: 1px solid var(--red-border); } .alert-success { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); } .info-box { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .875rem 1rem; font-size: 13px; color: var(--text2); line-height: 1.6; } /* ── LOADING ────────────────────────────────────────────────────────────── */ .loading-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; gap: 1rem; color: var(--text2); font-size: 14px; } .loading-state { display: flex; justify-content: center; padding: 3rem; } .spinner { width: 36px; height: 36px; border: 3px solid var(--border); border-top-color: var(--navy); border-radius: 50%; animation: spin .7s linear infinite; } .spinner-sm { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Blazor reconnect overlay — hidden until Blazor adds a state class to the modal. */ #components-reconnect-modal { display: none; } #components-reconnect-modal.components-reconnect-show, #components-reconnect-modal.components-reconnect-failed, #components-reconnect-modal.components-reconnect-rejected { display: flex; position: fixed; inset: 0; z-index: 99999; align-items: center; justify-content: center; background: rgba(0,0,0,.45); } .reconnect-box { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 220px; padding: 24px 28px; background: var(--surface); color: var(--text); border-radius: var(--radius); box-shadow: var(--shadow); } .reconnect-spinner { width: 28px; height: 28px; border: 3px solid var(--border); border-top-color: var(--blue); border-radius: 50%; animation: spin .8s linear infinite; } .reconnect-text { font-size: 14px; color: var(--text2); } .reconnect-failed-text { display: none; font-size: 13px; color: var(--text2); } #components-reconnect-modal.components-reconnect-failed .reconnect-text, #components-reconnect-modal.components-reconnect-rejected .reconnect-text { display: none; } #components-reconnect-modal.components-reconnect-failed .reconnect-failed-text, #components-reconnect-modal.components-reconnect-rejected .reconnect-failed-text { display: block; } /* ── ARCHIVED ───────────────────────────────────────────────────────────── */ .archived-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; margin-top: 1rem; } .archived-section summary { font-size: 13px; color: var(--text2); cursor: pointer; font-weight: 500; } /* ── EMPTY STATES ───────────────────────────────────────────────────────── */ .empty-state { text-align: center; padding: 2rem; color: var(--text2); font-size: 13px; } .empty-state i { font-size: 32px; color: var(--text3); display: block; margin-bottom: .5rem; } .empty-state-large { text-align: center; padding: 4rem 2rem; } .empty-state-large i { font-size: 48px; color: var(--text3); display: block; margin-bottom: 1rem; } .empty-state-large h2 { font-size: 20px; font-weight: 700; margin-bottom: .5rem; } .empty-state-large p { color: var(--text2); margin-bottom: 1.5rem; } .not-found { text-align: center; padding: 4rem; } /* ── RESPONSIVE ─────────────────────────────────────────────────────────── */ /* Mobile shell (hidden on desktop) */ .nav-toggle { display: none; } .mobile-menu { display: none; } /* ── Top bar → hamburger ────────────────────────────────────────────────── The desktop right-cluster (feedback + workspace pill + name + buttons) is heavy, so the bar needs to collapse to a hamburger well before phone widths to avoid cramming. Everything secondary moves into the slide-down menu. */ @media (max-width: 1024px) { .app-header { padding: 0 1rem; } /* clear the right-edge gutter; align with .app-body */ .header-left { gap: 6px; min-width: 0; } .app-sidebar { display: none; } /* sidebar → hamburger menu */ .app-main { padding-left: 0; } /* reclaim the sidebar gutter */ .nav-toggle { display: flex; } /* hamburger */ .header-title-block { display: none; } /* logo carries identity */ .header-nav { display: none; } /* desktop tabs → into the menu */ .header-right { gap: 6px; min-width: 0; } .header-right .btn-feedback { display: none; } /* → menu (specificity beats later base rule) */ .header-right .ws-switcher { display: none; } /* → menu */ .user-info { display: none; } .user-menu .btn-icon { display: none; } /* change-pw + sign out → menu */ .btn-icon { width: 40px; height: 40px; } /* ≥44px-ish touch targets */ /* The slide-down menu */ /* Full-height fixed panel so only the menu scrolls — the page behind doesn't scroll under it (was position:absolute + max-height, which let both scroll). */ .mobile-menu { display: none; position: fixed; top: 58px; left: 0; right: 0; bottom: 0; background: var(--surface); box-shadow: 0 10px 24px rgba(0,0,0,.18); padding: 8px; overflow-y: auto; -webkit-overflow-scrolling: touch; z-index: 250; } .app-header.menu-open .mobile-menu { display: block; } .mobile-menu-nav { display: flex; flex-direction: column; gap: 2px; } .mobile-menu .nav-link { color: var(--text); padding: 12px 14px; font-size: 15px; } .mobile-menu .nav-link:hover, .mobile-menu .nav-link.active { background: var(--surface2); color: var(--text); } .mobile-menu-sep { height: 1px; background: var(--border); margin: 8px 4px; } .mobile-menu-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text3); padding: 6px 14px 2px; } .mobile-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border: none; background: none; cursor: pointer; font-family: inherit; font-size: 15px; color: var(--text); text-align: left; border-radius: var(--radius-sm); } .mobile-menu-item:hover, .mobile-menu-item.active { background: var(--surface2); } .mobile-menu-item .ti { font-size: 18px; color: var(--text2); } /* Keep the notifications panel on-screen instead of overflowing off the right */ .notif-panel { position: fixed; top: 58px; left: 8px; right: 8px; width: auto; max-width: none; } /* Same for the account dropdown */ .user-panel { position: fixed; top: 58px; left: 8px; right: 8px; min-width: 0; } .user-menu-caret { display: none; } } /* ── Phone content/layout ─────────────────────────────────────────────────── */ @media (max-width: 640px) { .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat-num { font-size: 20px; } .app-body { padding: 1rem; } .form-row-2, .form-row-3 { grid-template-columns: 1fr; } .view-toggle { display: none; } .modal-overlay { padding: .5rem; } /* box is width:100%; gutter via overlay padding (not box margin → no overflow) */ /* Prevent iOS zoom-on-focus — form fields must be ≥16px on mobile */ .form-input, .form-input-sm { font-size: 16px; } /* Student-detail header: tidy the crammed card on phones. Actions become an even 2-col grid; the per-course instructor select goes full width with its label stacked above it. */ .student-header-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .student-header-actions .btn { width: 100%; justify-content: center; } .course-instructor-row { flex-direction: column; align-items: stretch; gap: 4px; } .course-instructor-row .form-input { max-width: none !important; width: 100%; } /* Tabs stay on one line (no "Lesson notes" wrap). */ .detail-tabs { gap: 2px; } .detail-tab { padding: 8px 4px; font-size: 12px; gap: 4px; white-space: nowrap; } .detail-tab .ti { font-size: 14px; } } /* ── Note acknowledgment ─────────────────────────────────────────────────── */ .note-ack-row { display: flex; align-items: center; padding: 8px 14px 12px; border-top: 0.5px solid var(--border); margin-top: 4px; } .note-ack-done { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--green); font-weight: 500; } .note-ack-done .ti { font-size: 14px; } /* ── Notification bell + panel ───────────────────────────────────────────── */ .notif-wrap { position: relative; } .notif-bell { position: relative; } .notif-badge { position: absolute; top: -2px; right: -2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--radius-sm); background: var(--red); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; } .notif-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 50; width: 340px; max-height: 420px; overflow-y: auto; background: var(--surface); color: var(--text); border: 0.5px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); } /* Keep the notifications panel on-screen on mobile. This re-asserts the fixed, full-width panel AFTER the base rule above (which otherwise wins by source order over the same override inside the earlier max-width:1024px block). */ @media (max-width: 1024px) { .notif-panel { position: fixed; top: 58px; left: 8px; right: 8px; width: auto; max-width: none; } } .notif-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 0.5px solid var(--border); font-weight: 600; font-size: 14px; position: sticky; top: 0; background: var(--surface); } .notif-mark-all { background: none; border: none; color: var(--blue); font-size: 12px; cursor: pointer; font-family: inherit; } .notif-mark-all:hover { text-decoration: underline; } .notif-list { display: flex; flex-direction: column; } .notif-empty { padding: 24px 14px; text-align: center; color: var(--text3); font-size: 13px; } .notif-item { padding: 10px 14px; border-bottom: 0.5px solid var(--border); cursor: pointer; transition: background .12s; } .notif-item:hover { background: var(--surface2); } .notif-item.unread { background: var(--blue-bg); } .notif-item.unread:hover { background: rgba(46,109,180,.14); } .notif-item-title { font-size: 13px; font-weight: 500; color: var(--text); } .notif-item-body { font-size: 12px; color: var(--text2); margin-top: 2px; } .notif-item-time { font-size: 11px; color: var(--text3); margin-top: 3px; } /* ── Nav badge (Notes tab) ───────────────────────────────────────────────── */ .nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 9px; background: var(--gold, #C8920F); color: #1B3A6B; font-size: 11px; font-weight: 700; line-height: 18px; } /* ── Dashboard notes nudge ───────────────────────────────────────────────── */ .notes-nudge { display: flex; align-items: center; justify-content: space-between; cursor: pointer; transition: border-color .12s, box-shadow .12s; } .notes-nudge:hover { border-color: var(--blue); box-shadow: var(--shadow-lg); } .notes-nudge-left { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text); } .notes-nudge-link { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 500; color: var(--blue); white-space: nowrap; } /* ── Notes master-detail layout ──────────────────────────────────────────── */ .notes-layout { display: grid; grid-template-columns: 320px 1fr; gap: 16px; align-items: start; } .notes-list { background: var(--surface); border: 0.5px solid var(--border); border-radius: var(--radius); overflow: hidden; max-height: 70vh; overflow-y: auto; } .notes-list-item { display: flex; align-items: flex-start; gap: 8px; padding: 12px 14px; border-bottom: 0.5px solid var(--border); cursor: pointer; transition: background .12s; } .notes-list-item:last-child { border-bottom: none; } .notes-list-item:hover { background: var(--surface2); } .notes-list-item.active { background: var(--blue-bg); } .notes-list-dot { width: 10px; flex: 0 0 10px; padding-top: 5px; } .notes-list-dot .dot { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--gold, #C8920F); } .notes-list-main { min-width: 0; } .notes-list-title { font-size: 14px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .notes-list-item.unacked .notes-list-title { font-weight: 600; } .notes-list-meta { font-size: 12px; color: var(--text3); margin-top: 2px; } .notes-reader { background: var(--surface); border: 0.5px solid var(--border); border-radius: var(--radius); padding: 20px; min-height: 240px; } .notes-reader-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--text3); min-height: 200px; } .notes-reader-back { display: none; margin-bottom: 12px; } .notes-reader-head h2 { margin: 0 0 6px; font-size: 18px; color: var(--text); } .notes-reader-body { margin-top: 16px; font-size: 14px; line-height: 1.7; color: var(--text); white-space: pre-wrap; } /* Responsive: collapse to single column, list-then-reader */ @media (max-width: 720px) { .notes-layout { grid-template-columns: 1fr; } .notes-layout.reading .notes-list { display: none; } .notes-layout:not(.reading) .notes-reader { display: none; } .notes-reader-back { display: inline-flex; } .notes-list { max-height: none; } } /* ── Theme transition & toggle ───────────────────────────────────────────── */ body, .card, .app-header, .login-box, .notes-list, .notes-reader, .notif-panel, .stat, .student-row, .modal-box { transition: background-color .2s ease, border-color .2s ease, color .2s ease; } .theme-toggle .ti { font-size: 18px; } /* Dark-mode foreground fixes: a few elements use --navy as a text/accent color, which is intentionally dark for the header but unreadable on dark surfaces. Override just those to a readable tone in dark mode. */ :root[data-theme="dark"] .back-btn:hover { color: var(--blue); } :root[data-theme="dark"] .tag.navy { background: rgba(91,155,224,.14); color: var(--blue); border-color: rgba(91,155,224,.3); } :root[data-theme="dark"] .item-row input[type=checkbox] { accent-color: var(--blue); } :root[data-theme="dark"] .spinner { border-top-color: var(--blue); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) .back-btn:hover { color: var(--blue); } :root:not([data-theme="light"]):not([data-theme="dark"]) .tag.navy { background: rgba(91,155,224,.14); color: var(--blue); border-color: rgba(91,155,224,.3); } :root:not([data-theme="light"]):not([data-theme="dark"]) .item-row input[type=checkbox] { accent-color: var(--blue); } :root:not([data-theme="light"]):not([data-theme="dark"]) .spinner { border-top-color: var(--blue); } } /* ── Segmented toggle (invite vs manual, etc.) ───────────────────────────── */ .seg-toggle { display: inline-flex; gap: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface2); } .seg-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; font-size: 13px; font-weight: 500; background: transparent; border: none; color: var(--text2); cursor: pointer; transition: background .15s, color .15s; } .seg-btn:hover { color: var(--text); } .seg-btn.active { background: var(--blue); color: #fff; } .seg-btn:not(:last-child) { border-right: 1px solid var(--border); } /* ── Document lists (course resources) ───────────────────────────────────── */ .doc-list { display: flex; flex-direction: column; gap: 6px; } .doc-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); } .doc-row-btn { width: 100%; text-align: left; cursor: pointer; transition: background .15s; font: inherit; color: inherit; } .doc-row-btn:hover { background: var(--surface3); } .doc-icon { font-size: 22px; color: var(--blue); flex-shrink: 0; } .doc-meta { flex: 1; min-width: 0; } .doc-name { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .doc-sub { font-size: 12px; color: var(--text2); margin-top: 1px; } /* ── Problem report cards ────────────────────────────────────────────────── */ .report-card.resolved { opacity: .6; } .report-card.resolved:hover { opacity: 1; } /* ── Student courses home + completion ───────────────────────────────────── */ .section-heading { font-size: 13px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .05em; margin: 0 0 14px; } .course-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; } .course-home-card { width: 100%; text-align: left; align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; display: flex; flex-direction: column; gap: 14px; min-height: 140px; position: relative; overflow: hidden; font-family: inherit; } .course-home-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--blue); } .course-home-card.completed::before { background: var(--green); } .course-home-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,.14); border-color: var(--blue); } .course-home-card.completed:hover { border-color: var(--green); } .course-home-card-top { display: flex; align-items: center; justify-content: space-between; } .course-home-card-top > i { font-size: 26px; color: var(--blue); } .course-home-card.completed .course-home-card-top > i { color: var(--green); } .course-home-card-title { font-size: 18px; font-weight: 700; color: var(--text); line-height: 1.3; flex: 1; } .course-home-card-meta { font-size: 13px; color: var(--text2); display: flex; align-items: center; gap: 6px; font-weight: 600; } .course-home-card:hover .course-home-card-meta { color: var(--blue); } .course-home-card.completed:hover .course-home-card-meta { color: var(--green); } /* Enrollment chips on the admin/instructor students list */ .enroll-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .enroll-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); cursor: pointer; transition: border-color .12s ease, background .12s ease; max-width: 240px; } .enroll-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .enroll-chip:hover { border-color: var(--blue); background: var(--blue-bg); } .enroll-chip.completed { background: var(--green-bg); border-color: var(--green-border); } .enroll-chip.completed > i { color: var(--green); } /* Success button */ .btn-success { background: var(--success-btn, var(--green)); color: #fff; border: 1px solid var(--success-btn, var(--green)); } .btn-success:hover { background: var(--success-btn-hover, var(--green-hover)); border-color: var(--success-btn-hover, var(--green-hover)); color: #fff; } /* ── Admin/instructor manage-student card (stacked) ──────────────────────── */ /* ── Shared list row (Team / Instructors / Students etc.) ─────────────────── */ .list-row { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 10px; transition: border-color .12s ease; } .list-row.clickable { cursor: pointer; } .list-row.clickable:hover { border-color: var(--blue); } .list-row-main { flex: 1; min-width: 0; } .list-row-name { font-weight: 600; font-size: 15px; color: var(--text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .list-row-sub { font-size: 12px; color: var(--text3); margin-top: 3px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .list-row-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .list-row-chevron { color: var(--text3); flex-shrink: 0; font-size: 18px; } .list-section-title { font-size: 13px; font-weight: 600; color: var(--text2); margin: 1.25rem 0 .5rem; display: flex; align-items: center; gap: 6px; } .list-search { position: relative; max-width: 360px; margin-bottom: 1rem; } .list-search > .ti { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text3); font-size: 16px; pointer-events: none; } .list-search .form-input { padding-left: 32px; } /* Clickwrap gate + legal pages */ .agree-wrap { display: flex; justify-content: center; align-items: flex-start; padding: 2.5rem 1rem; min-height: 100vh; } .agree-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.55; color: var(--text2); cursor: pointer; } .agree-check input { margin-top: 3px; flex-shrink: 0; } .legal-doc { max-width: 800px; margin: 0 auto; line-height: 1.65; color: var(--text); } .legal-doc h1 { font-size: 22px; font-weight: 700; margin-bottom: 4px; } .legal-doc h2 { font-size: 16px; font-weight: 700; margin: 1.4rem 0 .4rem; } .legal-doc p, .legal-doc li { font-size: 14px; color: var(--text2); } .legal-doc ul { margin: .3rem 0 .3rem 1.25rem; } .legal-doc .legal-meta { font-size: 12px; color: var(--text3); margin-bottom: 1rem; } .legal-doc .legal-check { margin-top: 1.25rem; padding: 12px 14px; background: var(--surface2); border-radius: var(--radius-sm); font-size: 13px; color: var(--text); } .student-manage-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 12px; background: var(--surface); transition: border-color .12s ease; } .student-manage-card:hover { border-color: var(--border-strong, var(--border)); } .student-manage-top { display: flex; align-items: center; gap: 12px; } .student-manage-top .student-info { flex: 1; min-width: 0; } .student-manage-controls { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); } .control-field { display: flex; flex-direction: column; gap: 4px; min-width: 200px; flex: 1; max-width: 280px; } .control-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text3); } /* ── Instructor dashboard: grouped student rows ──────────────────────────── */ .student-group { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 8px; background: var(--surface); } .student-group-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .student-group-head .student-info { flex: 1; min-width: 0; } /* Compact avatars in roster rows (the 64px profile-header avatar is inline-sized). */ .student-group-head .avatar, .enroll-row .avatar { width: 34px; height: 34px; font-size: 13px; } .student-course-list { display: flex; flex-direction: column; gap: 6px; } .course-progress-row { display: flex; align-items: center; gap: 12px; padding: 6px 10px; border-radius: var(--radius-sm); background: var(--surface2); cursor: pointer; transition: background .1s ease; } .course-progress-row:hover { background: var(--blue-bg); } .course-progress-main { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; } .course-progress-title { font-size: 14px; font-weight: 600; color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .course-progress-main .tag { flex-shrink: 0; } /* Mobile: stack the course row so the title isn't crushed to one-word-per-line. */ @media (max-width: 640px) { .course-progress-row { flex-wrap: wrap; } .course-progress-row .course-progress-main { flex: 1 1 100%; } .course-progress-row .progress-row { flex: 1 1 100%; margin-top: 8px; } .course-progress-row > .ti-chevron-right { display: none; } .course-progress-title { white-space: normal; overflow: visible; } .course-progress-row .progress-bar-wrap { max-width: none !important; } } .course-instructor-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* ── Notes: course grouping + flight meta ────────────────────────────────── */ .notes-course-header { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text3); padding: 12px 12px 6px; border-bottom: 1px solid var(--border); margin-bottom: 4px; } .notes-reader-course { font-size: 13px; color: var(--blue); font-weight: 600; margin: 2px 0 8px; display: flex; align-items: center; gap: 6px; } .flight-meta { display: flex; gap: 16px; font-size: 13px; color: var(--text2); padding: 8px 1rem; margin-bottom: 6px; border-bottom: 1px solid var(--border); } .flight-meta span { display: flex; align-items: center; gap: 5px; } .note-footer { display: flex; align-items: center; gap: 8px; justify-content: flex-end; flex-wrap: wrap; padding: 0 1rem .75rem; } .note-delete-confirm { font-size: 12px; color: var(--text2); margin-right: auto; } .note-delete-btn { color: var(--text3); } .note-delete-btn:hover { color: var(--red); } /* ── In-course notes (student dashboard) ─────────────────────────────────── */ .course-notes-list { display: flex; flex-direction: column; gap: 8px; } .course-note { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .course-note.unacked { border-color: var(--blue); } .course-note-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; cursor: pointer; transition: background .1s; flex-wrap: wrap; } .course-note-head:hover { background: var(--surface2); } .course-note-title-row { display: flex; align-items: center; gap: 8px; } .course-note-title { font-weight: 600; font-size: 14px; color: var(--text); } .course-note-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text3); flex-wrap: wrap; } .course-note-body { padding: 0 14px 12px; font-size: 14px; line-height: 1.6; white-space: pre-wrap; color: var(--text); } /* ── Form validation ─────────────────────────────────────────────────────── */ .required-mark { color: var(--red); font-weight: 700; } .input-error { border-color: var(--red) !important; box-shadow: 0 0 0 2px rgba(220,53,69,.12); } /* ── Course builder: student preview ─────────────────────────────────────── */ .preview-banner { display: flex; align-items: flex-start; gap: 8px; background: var(--blue-bg); color: var(--blue); border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 1rem; font-size: 13px; line-height: 1.5; } .preview-banner .ti { flex-shrink: 0; margin-top: 1px; } .student-preview { } .preview-module { padding: 10px 14px; } .preview-module-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text3); margin-bottom: 8px; } .preview-section { margin-bottom: 12px; } .preview-section-title { font-weight: 600; font-size: 14px; color: var(--text); margin-bottom: 6px; } .preview-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 6px; background: var(--surface); } .preview-item-icon { color: var(--text3); } .preview-item-title { flex: 1; font-size: 14px; color: var(--text); } /* ── Feedback button (prominent during early rollout) ────────────────────── */ .btn-feedback { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-border); font-size: 13px; font-weight: 600; cursor: pointer; transition: background .12s ease, border-color .12s ease; white-space: nowrap; } .btn-feedback:hover { background: var(--amber-border); border-color: var(--amber); } .btn-feedback i { font-size: 15px; } @media (max-width: 640px) { .btn-feedback-text { display: none; } .btn-feedback { padding: 7px 10px; } } /* ── Flag notes ──────────────────────────────────────────────────────────── */ .flag-note-display { display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; padding: 6px 10px; background: var(--amber-bg); color: var(--amber); border-radius: var(--radius-sm); font-size: 13px; font-style: italic; } .flagged-item-content { display: flex; flex-direction: column; gap: 2px; } .flagged-item-title { font-weight: 500; } .flagged-item-note { font-size: 13px; color: var(--text2); font-style: italic; } /* ── Workspace / tenant switcher ─────────────────────────────────────────── */ .ws-switcher { position: relative; display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,.08); color: var(--text); border: 1px solid rgba(255,255,255,.15); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; } .ws-switcher:hover { background: rgba(255,255,255,.14); } .ws-switcher-label { max-width: 220px; overflow: hidden; text-overflow: ellipsis; } .ws-switcher-menu { position: absolute; top: calc(100% + 6px); right: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); min-width: 280px; padding: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.18); z-index: 100; } .ws-menu-header { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text3); padding: 6px 10px 8px; } .ws-menu-item { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 12px; border-radius: var(--radius-sm); background: transparent; border: 0; cursor: pointer; color: var(--text); text-align: left; } .ws-menu-item:hover { background: var(--surface2); } .ws-menu-item.active { background: var(--blue-bg); color: var(--blue); } .ws-menu-item-main { display: flex; flex-direction: column; gap: 2px; } .ws-menu-role { font-weight: 600; font-size: 14px; } .ws-menu-tenant { font-size: 12px; color: var(--text3); } .ws-menu-item.active .ws-menu-tenant { color: var(--blue); opacity: .8; } /* Group the switcher by tenant with a labeled divider between schools. */ .ws-menu-group + .ws-menu-group { margin-top: 4px; border-top: 1px solid var(--border); padding-top: 4px; } .ws-menu-group-label { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text2); padding: 6px 12px 2px; } .ws-menu-group-label .ti { font-size: 13px; } /* Super-admin (cross-tenant) set clearly apart from the schools. */ .ws-menu-group.platform { margin-top: 8px; border-top: 2px solid var(--border); padding-top: 8px; } .ws-menu-group.platform .ws-menu-group-label { color: var(--blue); } .mobile-menu-sublabel { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text3); padding: 8px 14px 2px; } .mobile-menu-sublabel.platform { color: var(--blue); border-top: 1px solid var(--border); margin-top: 4px; padding-top: 8px; } /* ═══════════════════════════════════════════════════════════════════════════ THEME v2 — "warm neutral" identity (2026-06-04) --------------------------------------------------------------------------- A self-contained re-skin appended LAST so it overrides the original tokens above (same selectors, later wins). To FULLY REVERT: delete this whole block AND remove the IBM Plex in Components/App.razor. Nothing else changes. Levers: warm-grey neutrals (not cool slate), IBM Plex Sans + Mono (mono for the domain's numbers), hairline borders, tighter radius, one muted accent. Want fully monochrome? set --blue to a graphite like #3A3733. Different accent? change --blue (light) and the --blue under the two dark scopes. ═══════════════════════════════════════════════════════════════════════════ */ /* OPTION 6 · MUI X-inspired light (ACTIVE) — white cards on a cool light-grey canvas, blue-grey hairline borders, near-black navy text, azure accent. Saved: Tailwind/indigo light = git f70b146; Option 1 (cool indigo) = git 40ecd38. */ :root { --navy: #1C2025; /* near-black navy — headings + gradient base */ --blue: #0072E5; /* azure — primary, links, active (MUI primary) */ --blue-bg: #F0F7FF; /* pale azure highlight (nav-active, selected) */ --sky: #3399FF; --gold: #B45309; --gold-light: #FEF3C7; --bg: #F6F8FA; /* cool light-grey canvas (slight blue) */ --surface: #FFFFFF; --surface2: #F3F6F9; /* cool inset */ --surface3: #E7EBF0; --border: #DAE2ED; /* cool blue-grey hairline (MUI divider) */ --text: #1C2025; /* near-black, slight cool */ --text2: #3E5060; /* blue-grey secondary (MUI) */ --text3: #8A9BAD; /* muted blue-grey */ --green: #059669; --green-hover: #047857; --green-bg: #ECFDF5; --green-border: #A7F3D0; /* emerald */ --amber: #B45309; --amber-bg: #FFFBEB; --amber-border: #FDE68A; /* amber */ --red: #DC2626; --red-bg: #FEF2F2; --red-border: #FECACA; /* red */ --purple: #0072E5; --purple-bg: #F0F7FF; --primary-btn: #0072E5; --primary-btn-hover: #005FC4; /* azure 600 → 700 */ --success-btn: #059669; --success-btn-hover: #047857; /* emerald 600 → 700 (white-text safe) */ --radius: 4px; /* tighter, crisper corners */ --radius-sm: 4px; --shadow: 0 2px 1px -1px rgba(0,0,0,.07), 0 1px 1px 0 rgba(0,0,0,.05), 0 1px 3px 0 rgba(0,0,0,.05); /* crisp Material-style layered elevation */ --shadow-lg: 0 3px 5px -1px rgba(0,0,0,.10), 0 6px 10px 0 rgba(0,0,0,.06), 0 1px 18px 0 rgba(0,0,0,.05); } :root[data-theme="dark"] { /* Prod neutral zinc dark, with the indigo/violet accent swapped to blue. */ --navy: #18181B; /* zinc-900 header */ --blue: #3B82F6; /* blue accent (was indigo violet) */ --blue-bg: #12345A; /* dark blue highlight (was violet) */ --sky: #38BDF8; --gold: #FBBF24; --gold-light: #2E2611; --bg: #101012; /* near zinc-950, neutral */ --surface: #19191C; --surface2: #232327; --surface3: #2E2E33; --border: #2C2C31; --text: #ECECEE; --text2: #A1A1AA; /* zinc-400 */ --text3: #71717A; /* zinc-500 */ --green: #34D399; --green-hover: #2BBE87; --green-bg: #0E2A20; --green-border: #2A5642; --amber: #FBBF24; --amber-bg: #2A2410; --amber-border: #574716; --red: #F87171; --red-bg: #2C1717; --red-border: #5A2C2C; --purple: #3B82F6; --purple-bg: #12345A; --primary-btn: #2563EB; --primary-btn-hover: #1D4ED8; /* blue 600 → 700 (was indigo) */ --success-btn: #15803D; --success-btn-hover: #166534; /* deeper green so white text reads on dark */ --shadow: 0 2px 12px rgba(0,0,0,.5); --shadow-lg: 0 10px 34px rgba(0,0,0,.6); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { /* Prod neutral zinc dark + blue accent (mirrors :root[data-theme="dark"]). */ --navy: #18181B; --blue: #3B82F6; --blue-bg: #12345A; --sky: #38BDF8; --gold: #FBBF24; --gold-light: #2E2611; --bg: #101012; --surface: #19191C; --surface2: #232327; --surface3: #2E2E33; --border: #2C2C31; --text: #ECECEE; --text2: #A1A1AA; --text3: #71717A; --green: #34D399; --green-hover: #2BBE87; --green-bg: #0E2A20; --green-border: #2A5642; --amber: #FBBF24; --amber-bg: #2A2410; --amber-border: #574716; --red: #F87171; --red-bg: #2C1717; --red-border: #5A2C2C; --purple: #3B82F6; --purple-bg: #12345A; --primary-btn: #2563EB; --primary-btn-hover: #1D4ED8; --success-btn: #15803D; --success-btn-hover: #166534; --shadow: 0 2px 12px rgba(0,0,0,.6); --shadow-lg: 0 10px 34px rgba(0,0,0,.7); } } /* Typeface: Hanken Grotesk everywhere (everything else uses font: inherit). */ body { font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } /* Tabular (aligned) figures for the domain's numbers — clean, Stripe-style. */ .stat-num, .progress-text, .course-card-progress-label, .score-pct, .score-fraction, .card-progress-header span:last-child { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* Cockpit-style micro-labels: small, uppercase, tracked. */ .stat-label, .control-label { text-transform: uppercase; letter-spacing: .04em; font-size: 11px; } /* Squarer buttons + inputs (crisper than the rounded default). */ .btn, .form-input, .form-input-sm, .seg-toggle, .seg-btn { border-radius: 4px; } .seg-toggle { overflow: hidden; } /* No underlines on links (color is the affordance). */ a, a:hover { text-decoration: none; } /* Flatten the old navy→blue gradients to solid fills (Stripe is flat, not gradient). */ .app-header { background: var(--navy); } .progress-bar-fill { background: var(--blue); } .quiz-header { background: var(--blue); } .login-logo { background: var(--blue); } /* Squarer header controls (workspace switcher + feedback) to match the buttons. */ .btn-feedback, .ws-switcher { border-radius: 4px; } /* Header adapts to the theme — light header (surface + border) on light, dark on dark — instead of a fixed dark bar that floats on the light app. */ .app-header { background: var(--surface2); color: var(--text); border-bottom: 1px solid var(--border); box-shadow: 0 1px 4px rgba(0,0,0,.05); } .header-title { color: var(--text); } .header-logo { background: var(--surface2); } .nav-link { color: var(--text2); } .nav-link:hover { background: var(--surface2); color: var(--text); } .nav-link.active { background: var(--blue-bg); color: var(--blue); } .user-avatar { background: var(--blue-bg); color: var(--blue); } /* accent avatar pops on the grey header */ .user-name { color: var(--text2); } .btn-icon { background: var(--surface); border-color: var(--border); color: var(--text2); } /* white chips on the grey header */ .btn-icon:hover { background: var(--surface3); color: var(--text); } .ws-switcher { background: var(--surface); color: var(--text); border-color: var(--border); } .ws-switcher:hover { background: var(--surface3); } .role-badge.admin { background: var(--amber-bg); color: var(--amber); } .role-badge.instructor { background: var(--blue-bg); color: var(--blue); } .role-badge.student { background: var(--green-bg); color: var(--green); } /* Super admin: neon-green glowing badge. Dark chip so the neon reads on any header. */ .role-badge.super_admin { background: #07140B; color: #4CFF8F; border: 1px solid rgba(64,255,140,.55); font-weight: 700; letter-spacing: .02em; text-shadow: 0 0 6px rgba(64,255,140,.9); box-shadow: 0 0 8px rgba(64,255,140,.45), inset 0 0 5px rgba(64,255,140,.20); animation: superGlow 2.2s ease-in-out infinite; } @keyframes superGlow { 0%, 100% { box-shadow: 0 0 5px rgba(64,255,140,.30), inset 0 0 4px rgba(64,255,140,.12); } 50% { box-shadow: 0 0 13px rgba(64,255,140,.65), inset 0 0 7px rgba(64,255,140,.24); } } .view-toggle { background: var(--surface2); } .view-toggle-btn { color: var(--text2); } .view-toggle-btn.active { background: var(--blue); color: #fff; } /* Square the labels/tags/badges/chips to match the buttons (were pill-shaped). */ .tag, .role-badge, .section-cat-badge, .item-link, .quiz-btn, .flag-btn, .xp-earned, .streak-badge, .enroll-chip { border-radius: 4px; } .badge, .tab-badge, .nav-badge { border-radius: 4px; } /* Crisp "floating" cards — drop the 1px outline in light and let the layered shadow define them (the MudBlazor look). Keep a hairline in dark, where shadows don't read. */ .card, .stat, .settings-panel { border-color: transparent; } :root[data-theme="dark"] .card, :root[data-theme="dark"] .stat, :root[data-theme="dark"] .settings-panel { border-color: var(--border); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) .card, :root:not([data-theme="light"]):not([data-theme="dark"]) .stat, :root:not([data-theme="light"]):not([data-theme="dark"]) .settings-panel { border-color: var(--border); } } /* Primary buttons use --primary-btn (Stripe blurple) with a subtle Stripe-style lift. */ .btn-primary { background: var(--primary-btn); border-color: var(--primary-btn); color: #fff; box-shadow: 0 1px 1px rgba(0,0,0,.06), 0 2px 4px rgba(50,50,93,.16); } .btn-primary:hover { background: var(--primary-btn-hover); border-color: var(--primary-btn-hover); } /* ============================================================ Weather Trainer (METAR/TAF practice) — /student/practice/weather ============================================================ */ .nav-section { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text3); padding: 14px 14px 4px; font-weight: 600; } .nav-new { margin-left: auto; font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 1px 6px; border-radius: 999px; background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); } .wx-levels { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; } .wx-level-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 9px 11px; min-width: 0; min-height: 92px; cursor: pointer; touch-action: manipulation; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); text-align: left; } .wx-level-btn.active { background: var(--blue); border-color: var(--blue); color: #fff; } .wx-level-btn.locked { opacity: .55; cursor: not-allowed; } .wx-level-btn.mastered:not(.active) { border-color: var(--green-border); } .wx-level-num { font-size: 11px; opacity: .7; } .wx-level-btn.mastered:not(.active) .wx-level-num { color: var(--green); opacity: 1; } /* Reserve two lines so cards with 1-line names align with wrapping ones. */ .wx-level-name { font-size: 14px; font-weight: 600; line-height: 1.2; min-height: 2.4em; white-space: normal; } .wx-level-kind { font-size: 10px; letter-spacing: .04em; opacity: .65; } /* Footer pinned to the card bottom so every progress bar lines up across cards. */ .wx-level-foot { margin-top: auto; width: 100%; padding-top: 8px; } .wx-level-prog { width: 100%; height: 5px; background: var(--surface3); border-radius: 999px; overflow: hidden; } .wx-level-prog-fill { height: 100%; background: var(--blue); border-radius: 999px; transition: width .3s ease; } .wx-level-btn.active .wx-level-prog { background: rgba(255,255,255,.3); } .wx-level-btn.active .wx-level-prog-fill { background: #fff; } .wx-level-btn.mastered .wx-level-prog-fill { background: var(--green); } .wx-level-prog-txt { display: block; font-size: 10px; opacity: .7; margin-top: 3px; } .wx-level-btn.mastered:not(.active) .wx-level-prog-txt { color: var(--green); opacity: 1; } .wx-level-desc { color: var(--text2); font-size: 14px; margin: 0 0 16px; } .wx-unlock-hint { color: var(--text3); } .wx-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .wx-mode { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; } .wx-mode button { border: none; background: var(--surface); color: var(--text); padding: 8px 16px; font-size: 14px; cursor: pointer; touch-action: manipulation; display: inline-flex; align-items: center; gap: 6px; } .wx-mode button.active { background: var(--blue); color: #fff; } .wx-stats { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--text2); } .wx-stat strong { color: var(--text); } .wx-stat-hint { color: var(--text3); font-size: 13px; } .wx-line { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 18px 20px; background: var(--surface2); border-radius: var(--radius); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 17px; margin-bottom: 14px; } .wx-break { flex-basis: 100%; height: 0; } .wx-indent { width: 16px; } .wx-chip { font-family: inherit; font-size: 17px; padding: 4px 10px; cursor: pointer; touch-action: manipulation; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); } .wx-chip:active { background: var(--surface2); border-color: var(--blue); } .wx-chip.active { background: var(--blue); border-color: var(--blue); color: #fff; } .wx-chip.correct { background: var(--green-bg); border-color: var(--green-border); color: var(--green); } .wx-chip.wrong { background: var(--red-bg); border-color: var(--red-border); color: var(--red); } .wx-panel { min-height: 92px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 20px; margin-bottom: 14px; } .wx-panel-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .wx-code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 16px; font-weight: 600; } .wx-code-inline { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 600; } .wx-cat-badge { font-size: 12px; padding: 3px 10px; border-radius: var(--radius-sm); background: var(--blue-bg); color: var(--blue); } .wx-verdict-tag { font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; } .wx-verdict-tag.ok { color: var(--green); } .wx-verdict-tag.no { color: var(--red); } .wx-meaning { margin: 0 0 12px; font-size: 15px; line-height: 1.6; } .wx-missed-note { margin: 10px 0 0; font-size: 13px; color: var(--text2); } .wx-hint { margin: 0; color: var(--text3); font-size: 14px; display: flex; align-items: center; gap: 6px; } .wx-explain-btn, .wx-choice, .wx-cat-btn { cursor: pointer; touch-action: manipulation; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: 14px; } .wx-explain-btn { padding: 7px 12px; display: inline-flex; align-items: center; gap: 6px; } .wx-question { font-size: 14px; color: var(--text2); margin-bottom: 10px; } .wx-choices { display: flex; flex-direction: column; gap: 8px; } .wx-choice { text-align: left; padding: 10px 12px; line-height: 1.4; } .wx-choice:disabled { cursor: default; } .wx-choice.dim { opacity: .5; } .wx-choice.picked-correct { background: var(--green-bg); border-color: var(--green-border); color: var(--green); opacity: 1; } .wx-choice.picked-wrong { background: var(--red-bg); border-color: var(--red-border); color: var(--red); opacity: 1; } .wx-result-missed { font-size: 14px; color: var(--text2); margin-bottom: 6px; } .wx-deep { margin-top: 0; padding: 12px 14px; background: var(--surface2); border-radius: var(--radius-sm); font-size: 14px; line-height: 1.7; } .wx-term { color: var(--blue); border-bottom: 1px dotted var(--blue); cursor: help; } .wx-termdef { margin-top: 10px; padding: 10px 14px; background: var(--blue-bg); border-radius: var(--radius-sm); font-size: 14px; line-height: 1.6; color: var(--text); } .wx-refgrid { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); } .wx-refgrid-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text2); margin-bottom: 6px; } .wx-refgrid table { width: 100%; border-collapse: collapse; font-size: 13px; } .wx-refgrid td { padding: 4px 8px; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: top; } .wx-refgrid tr:last-child td { border-bottom: none; } .wx-refdigit { font-family: var(--mono, ui-monospace, monospace); font-weight: 700; width: 2.5em; text-align: center; color: var(--blue); } .wx-refrow-active td { background: var(--blue-bg); font-weight: 700; color: var(--text); } .wx-refrow-active td:first-child { box-shadow: inset 3px 0 0 var(--blue); } .wx-refrow-active .wx-refdigit { color: var(--blue); } .wx-verdict-prompt { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 20px; margin-bottom: 14px; } .wx-verdict-q { font-size: 14px; font-weight: 600; margin-bottom: 10px; } .wx-cat-choices { display: flex; gap: 8px; flex-wrap: wrap; } .wx-cat-btn { padding: 8px 18px; font-weight: 600; } .wx-result { border-radius: var(--radius); padding: 16px 20px; margin-bottom: 14px; } .wx-result.perfect { background: var(--green-bg); border: 1px solid var(--green-border); } .wx-result.imperfect { background: var(--amber-bg); border: 1px solid var(--amber-border); } .wx-result-head { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 6px; } .wx-result.perfect .wx-result-head { color: var(--green); } .wx-result.imperfect .wx-result-head { color: var(--amber); } .wx-result-cat { font-size: 14px; line-height: 1.6; color: var(--text2); } .wx-result-cat strong { color: var(--text); } .wx-actions { display: flex; gap: 10px; } /* Hover styles only on devices that truly hover (desktop). On touch, sticky :hover was overriding the .active highlight on level/mode buttons until a second tap. */ @media (hover: hover) { .wx-level-btn:hover:not(:disabled):not(.active) { background: var(--surface2); } .wx-mode button:hover:not(.active) { background: var(--surface2); } .wx-chip:hover:not(.active):not(.correct):not(.wrong) { border-color: var(--blue); } .wx-explain-btn:hover { background: var(--surface2); } .wx-choice:hover:not(:disabled) { background: var(--surface2); border-color: var(--blue); } .wx-cat-btn:hover { background: var(--surface2); border-color: var(--blue); } .settings-card-head:hover .card-title { color: var(--blue); } } /* Weather trainer progress card on the student profile (instructor view) */ .wx-prof-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 4px 0 16px; } .wx-prof-stat { background: var(--surface2); border-radius: var(--radius-sm); padding: 10px; text-align: center; } .wx-prof-num { font-size: 20px; font-weight: 600; } .wx-prof-lbl { font-size: 11px; color: var(--text3); } .wx-prof-levels { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px 16px; } .wx-prof-level-head { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 4px; color: var(--text2); } .wx-prof-mastered { color: var(--green); font-weight: 600; } .progress-bar-fill.is-mastered { background: var(--green); } .wx-prof-weak { margin-top: 14px; font-size: 13px; color: var(--text2); display: flex; align-items: center; gap: 6px; } /* Online-presence dot (rosters). Green = connected now; faint grey = offline. */ .presence-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; vertical-align: middle; } .presence-dot.online { background: var(--green); box-shadow: 0 0 0 2px rgba(26,107,58,.18); } .presence-dot.offline { background: var(--border); } /* Per-level mastery-goal inputs on School Settings */ .wx-goal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } /* Collapsible settings cards */ .settings-card-head { width: 100%; display: flex; align-items: center; justify-content: space-between; background: none; border: none; padding: 0; cursor: pointer; color: var(--text); text-align: left; } .settings-card-head { touch-action: manipulation; } .settings-card-head .ti { color: var(--text3); font-size: 18px; } .settings-card-body { margin-top: 14px; } @media (max-width: 560px) { .wx-prof-summary { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 860px) { .wx-levels { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 560px) { .wx-levels { grid-template-columns: repeat(3, 1fr); } .wx-line { padding: 14px; font-size: 15px; } .wx-chip { font-size: 15px; } } /* ---- VOR trainer ---- */ .vor-page { padding: 12px; } .vor-stage { display: flex; gap: 16px; align-items: stretch; } .vor-map-wrap { flex: 1 1 auto; min-width: 0; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .vor-map { display: block; width: 100%; height: 100%; touch-action: none; } /* viewBox keeps the drawing square; no aspect-ratio (Firefox over-sized it) */ .vor-side { flex: 0 0 320px; display: flex; flex-direction: column; gap: 12px; } .vor-cdi { width: 100%; max-width: 320px; height: auto; touch-action: none; } .vor-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } /* standalone icon buttons (turn / pause / radials / reset) — match the app .btn theme */ .vor-btn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: 17px; font-weight: 600; cursor: pointer; transition: all .15s; } .vor-btn:hover { background: var(--surface2); } .vor-btn:active { transform: scale(.96); } .vor-btn.vor-active { background: var(--amber-bg); border-color: var(--amber); color: var(--amber); } /* paused */ /* each ±-stepper is a boxed pill so the groups don't run together */ .vor-speed, .vor-obs, .vor-bug { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); } .vor-speed .vor-btn, .vor-obs .vor-btn, .vor-bug .vor-btn { width: 30px; height: 30px; border: none; background: transparent; } .vor-speed .vor-btn:hover, .vor-obs .vor-btn:hover, .vor-bug .vor-btn:hover { background: var(--surface); } .vor-obs-label { font-size: 12px; color: var(--text2); white-space: nowrap; } /* Phone / narrow (Practice): a map band on top (whole map visible), the two instruments side-by-side at EQUAL size, and the controls on their own full-width row below — so the DG isn't squeezed by the buttons, and it all fits without scrolling. */ @media (max-width: 720px) { .vor-stage { flex-direction: column; gap: 8px; } .vor-map-wrap { flex: 0 0 auto; height: 34vh; display: flex; align-items: center; justify-content: center; } .vor-map { width: auto; height: 100%; } .vor-page:not(.vor-challenge) .vor-side { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; } .vor-page:not(.vor-challenge) .vor-inst .vor-cdi, .vor-page:not(.vor-challenge) .vor-inst .vor-dg { width: 100%; max-width: none; } .vor-page:not(.vor-challenge) .vor-controls { grid-column: 1 / -1; } } .vor-dg { width: 100%; max-width: 320px; height: auto; touch-action: none; } .vor-topbar { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; flex-wrap: wrap; } .vor-banner { font-size: 14px; font-weight: 600; color: var(--text2); } .vor-banner.vor-ok { color: var(--green, #2ea043); } .vor-chal-btn { display: none; } .vor-challenge .vor-map-wrap { display: none; } .vor-challenge .vor-chal-btn { display: inline-flex; } .vor-challenge .vor-side { flex: 1 1 auto; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 16px; } .vor-challenge .vor-inst { flex: 1 1 320px; max-width: 480px; } .vor-challenge .vor-inst .vor-cdi, .vor-challenge .vor-inst .vor-dg { max-width: 100%; } .vor-challenge .vor-controls { flex: 1 1 100%; } .vor-challenge.vor-revealed .vor-map-wrap { display: block; } @media (max-width: 720px) { .vor-challenge .vor-inst { flex: 1 1 45%; } } .vor-inst { display: flex; flex-direction: column; align-items: center; gap: 3px; } .vor-inst-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text2); font-weight: 600; }