/* ========================================================================== LRN Portal — Modern Light Theme Created 2026-08-17. Polished light theme for regular (non-classic) pages: any page rendering WITHOUT data-theme-locked. Classic "-alt" pages render data-theme-locked and are explicitly excluded — they keep the flat legacy look from lrn-light-overrides.css. lrn-framework.css's html[data-theme="light"] variable block now does most of the heavy lifting (colors, shadows, gradients), so this file stays lean: it fixes hard-coded dark-literal values the base framework never themed, and restyles the handful of components (.badge/.alert/.card/.dropdown-menu/scrollbars/table) that used to be styled — badly, for light — only by lrn-dark-theme-enhanced.css. That file is now scoped to [data-theme="dark"]/[data-theme="midnight"] (see its 2026-08-17 header note), so those components have NO styling at all on light pages unless defined here. No !important is used except where framework.css itself applies !important on the same selector (table row hover/active state) — this file's selectors are already high-specificity (html[data-theme="light"]:not([data-theme-locked]) …) so they win on specificity alone everywhere else. ========================================================================== */ /* ---------- Top nav (.lrn-admin-header) ---------- */ html[data-theme="light"]:not([data-theme-locked]) .lrn-admin-header { background: var(--lrn-bg-secondary); border-bottom: 1px solid var(--lrn-border-color); box-shadow: var(--lrn-shadow-sm); backdrop-filter: blur(10px); } html[data-theme="light"]:not([data-theme-locked]) .lrn-nav-btn, html[data-theme="light"]:not([data-theme-locked]) .lrn-nav-btn span, html[data-theme="light"]:not([data-theme-locked]) .lrn-nav-btn i { color: var(--lrn-text-secondary); } html[data-theme="light"]:not([data-theme-locked]) .lrn-nav-btn:hover, html[data-theme="light"]:not([data-theme-locked]) .lrn-nav-btn:hover span, html[data-theme="light"]:not([data-theme-locked]) .lrn-nav-btn:hover i { background: rgba(58, 123, 213, 0.08); color: var(--lrn-primary); } html[data-theme="light"]:not([data-theme-locked]) .lrn-admin-header .lrn-view-as-select { background: var(--lrn-bg-secondary); color: var(--lrn-text-primary); border-color: var(--lrn-border-color); } /* User chip */ html[data-theme="light"]:not([data-theme-locked]) .lrn-username { color: var(--lrn-text-primary); } html[data-theme="light"]:not([data-theme-locked]) .lrn-role, html[data-theme="light"]:not([data-theme-locked]) .lrn-dropdown-icon { color: var(--lrn-text-secondary); } html[data-theme="light"]:not([data-theme-locked]) .lrn-user-menu-toggle:hover { background: rgba(58, 123, 213, 0.08); } html[data-theme="light"]:not([data-theme-locked]) .lrn-user-avatar { background: var(--lrn-gradient-primary); color: var(--lrn-text-inverse); } html[data-theme="light"]:not([data-theme-locked]) .lrn-logout-btn:hover { background: rgba(198, 40, 40, 0.08); color: var(--lrn-danger); } /* ---------- Sidebar (.lrn-side-nav) ---------- */ html[data-theme="light"]:not([data-theme-locked]) .lrn-side-nav { background: var(--lrn-bg-secondary); border-right: 1px solid var(--lrn-border-color); box-shadow: var(--lrn-shadow-sm); } html[data-theme="light"]:not([data-theme-locked]) .lrn-side-nav-title { color: var(--lrn-text-secondary); background: transparent; } html[data-theme="light"]:not([data-theme-locked]) .lrn-side-nav-title.collapsible:hover { background: var(--lrn-bg-tertiary); color: var(--lrn-text-primary); } html[data-theme="light"]:not([data-theme-locked]) .lrn-side-nav a, html[data-theme="light"]:not([data-theme-locked]) .lrn-nav-group li a { color: var(--lrn-text-secondary); background: transparent; } html[data-theme="light"]:not([data-theme-locked]) .lrn-side-nav a i, html[data-theme="light"]:not([data-theme-locked]) .lrn-nav-group li a i { color: var(--lrn-text-muted); } /* Hover/active states get a soft tinted background + readable brand-blue text (never white-on-white — the base framework assumes a dark sidebar and swaps text to white here, which was the original bug) */ html[data-theme="light"]:not([data-theme-locked]) .lrn-side-nav a:hover, html[data-theme="light"]:not([data-theme-locked]) .lrn-nav-group li a:hover { background: rgba(58, 123, 213, 0.08); color: var(--lrn-primary); } html[data-theme="light"]:not([data-theme-locked]) .lrn-side-nav a:hover i, html[data-theme="light"]:not([data-theme-locked]) .lrn-nav-group li a:hover i { color: var(--lrn-primary); } html[data-theme="light"]:not([data-theme-locked]) .lrn-side-nav a.active, html[data-theme="light"]:not([data-theme-locked]) .lrn-nav-group li a.active { background: rgba(58, 123, 213, 0.08); color: var(--lrn-primary); border-left-color: var(--lrn-primary); } html[data-theme="light"]:not([data-theme-locked]) .lrn-side-nav a.active i, html[data-theme="light"]:not([data-theme-locked]) .lrn-nav-group li a.active i { color: var(--lrn-primary); } html[data-theme="light"]:not([data-theme-locked]) .lrn-nav-search, html[data-theme="light"]:not([data-theme-locked]) .lrn-side-nav-toggle, html[data-theme="light"]:not([data-theme-locked]) .lrn-nav-collapse-toggle { background: var(--lrn-bg-tertiary); border-color: var(--lrn-border-color); color: var(--lrn-text-secondary); } html[data-theme="light"]:not([data-theme-locked]) .lrn-search-input { background: var(--lrn-bg-secondary); border: 1px solid var(--lrn-border-color); color: var(--lrn-text-primary); } html[data-theme="light"]:not([data-theme-locked]) .lrn-search-input:focus { border-color: var(--lrn-primary); box-shadow: var(--lrn-shadow-glow); } html[data-theme="light"]:not([data-theme-locked]) .lrn-search-input::placeholder { color: var(--lrn-text-muted); } /* Footer */ html[data-theme="light"]:not([data-theme-locked]) .lrn-footer, html[data-theme="light"]:not([data-theme-locked]) .portal-footer { background: var(--lrn-bg-secondary); border-top: 1px solid var(--lrn-border-color); color: var(--lrn-text-secondary); } html[data-theme="light"]:not([data-theme-locked]) .lrn-footer a, html[data-theme="light"]:not([data-theme-locked]) .portal-footer a { color: var(--lrn-primary); } /* ---------- Cards ---------- */ html[data-theme="light"]:not([data-theme-locked]) .card, html[data-theme="light"]:not([data-theme-locked]) .lrn-card, html[data-theme="light"]:not([data-theme-locked]) .dashboard-card, html[data-theme="light"]:not([data-theme-locked]) .station-section { background: var(--lrn-card-bg); border: 1px solid var(--lrn-card-border); box-shadow: var(--lrn-shadow-card); } html[data-theme="light"]:not([data-theme-locked]) .card:hover, html[data-theme="light"]:not([data-theme-locked]) .lrn-card:hover, html[data-theme="light"]:not([data-theme-locked]) .dashboard-card:hover { background: var(--lrn-card-bg-hover); box-shadow: var(--lrn-shadow-card-hover); transform: translateY(-2px); } html[data-theme="light"]:not([data-theme-locked]) .card-header, html[data-theme="light"]:not([data-theme-locked]) .lrn-card-header { background: var(--lrn-gradient-primary); border-bottom: 1px solid var(--lrn-border-primary); color: var(--lrn-text-inverse); } /* When a card header has no colored fill behind it (bare framework default), keep its text dark instead of inheriting white-on-light */ html[data-theme="light"]:not([data-theme-locked]) .lrn-card-header { background: var(--lrn-bg-tertiary); color: var(--lrn-text-primary); border-bottom-color: var(--lrn-border-color); } html[data-theme="light"]:not([data-theme-locked]) .lrn-card-header h1, html[data-theme="light"]:not([data-theme-locked]) .lrn-card-header h2, html[data-theme="light"]:not([data-theme-locked]) .lrn-card-header h3, html[data-theme="light"]:not([data-theme-locked]) .lrn-card-header i { color: var(--lrn-text-primary); } /* Gradient-clipped page titles/text are invisible once the gradient they clip to is unavailable/undesired on a plain card face */ html[data-theme="light"]:not([data-theme-locked]) .page-title, html[data-theme="light"]:not([data-theme-locked]) .page-title *, html[data-theme="light"]:not([data-theme-locked]) .gradient-text { background: none; -webkit-text-fill-color: var(--lrn-text-primary); color: var(--lrn-text-primary); } html[data-theme="light"]:not([data-theme-locked]) .page-title .title-icon, html[data-theme="light"]:not([data-theme-locked]) .page-title .title-icon * { -webkit-text-fill-color: var(--lrn-text-inverse); color: var(--lrn-text-inverse); } /* ---------- Tables ---------- */ html[data-theme="light"]:not([data-theme-locked]) table, html[data-theme="light"]:not([data-theme-locked]) .table, html[data-theme="light"]:not([data-theme-locked]) .stations-table, html[data-theme="light"]:not([data-theme-locked]) .accounts-table, html[data-theme="light"]:not([data-theme-locked]) .formats-table, html[data-theme="light"]:not([data-theme-locked]) .lrn-table, html[data-theme="light"]:not([data-theme-locked]) .lrn-data-table, html[data-theme="light"]:not([data-theme-locked]) .data-table { background: var(--lrn-card-bg); } html[data-theme="light"]:not([data-theme-locked]) table thead, html[data-theme="light"]:not([data-theme-locked]) .stations-table thead, html[data-theme="light"]:not([data-theme-locked]) .accounts-table thead, html[data-theme="light"]:not([data-theme-locked]) .formats-table thead, html[data-theme="light"]:not([data-theme-locked]) .lrn-table thead, html[data-theme="light"]:not([data-theme-locked]) .lrn-data-table thead { background: #f6f8fc; } html[data-theme="light"]:not([data-theme-locked]) table th, html[data-theme="light"]:not([data-theme-locked]) .stations-table th, html[data-theme="light"]:not([data-theme-locked]) .accounts-table th, html[data-theme="light"]:not([data-theme-locked]) .formats-table th, html[data-theme="light"]:not([data-theme-locked]) .lrn-table th, html[data-theme="light"]:not([data-theme-locked]) .lrn-data-table th, html[data-theme="light"]:not([data-theme-locked]) .data-table th { background: #f6f8fc; color: var(--lrn-text-secondary); border-bottom: 2px solid var(--lrn-border-color); } html[data-theme="light"]:not([data-theme-locked]) table td, html[data-theme="light"]:not([data-theme-locked]) .stations-table td, html[data-theme="light"]:not([data-theme-locked]) .accounts-table td, html[data-theme="light"]:not([data-theme-locked]) .formats-table td, html[data-theme="light"]:not([data-theme-locked]) .lrn-table td, html[data-theme="light"]:not([data-theme-locked]) .lrn-data-table td, html[data-theme="light"]:not([data-theme-locked]) .data-table td { color: var(--lrn-text-primary); border-bottom: 1px solid #e8edf5; } html[data-theme="light"]:not([data-theme-locked]) table tbody tr, html[data-theme="light"]:not([data-theme-locked]) .stations-table tbody tr, html[data-theme="light"]:not([data-theme-locked]) .accounts-table tbody tr, html[data-theme="light"]:not([data-theme-locked]) .formats-table tbody tr, html[data-theme="light"]:not([data-theme-locked]) .lrn-table tbody tr, html[data-theme="light"]:not([data-theme-locked]) .lrn-data-table tbody tr, html[data-theme="light"]:not([data-theme-locked]) .data-table tbody tr { background: transparent; } /* framework.css marks its base :hover / .active row states !important — need !important here too, or these lose the cascade outright */ html[data-theme="light"]:not([data-theme-locked]) table tbody tr:hover, html[data-theme="light"]:not([data-theme-locked]) .stations-table tbody tr:hover, html[data-theme="light"]:not([data-theme-locked]) .accounts-table tbody tr:hover, html[data-theme="light"]:not([data-theme-locked]) .formats-table tbody tr:hover, html[data-theme="light"]:not([data-theme-locked]) .lrn-table tbody tr:hover, html[data-theme="light"]:not([data-theme-locked]) .lrn-data-table tbody tr:hover, html[data-theme="light"]:not([data-theme-locked]) .data-table tbody tr:hover { background: rgba(58, 123, 213, 0.04) !important; box-shadow: none !important; } html[data-theme="light"]:not([data-theme-locked]) .lrn-table tbody tr.highlight, html[data-theme="light"]:not([data-theme-locked]) .lrn-table tbody tr.active, html[data-theme="light"]:not([data-theme-locked]) .lrn-data-table tbody tr.highlight, html[data-theme="light"]:not([data-theme-locked]) .lrn-data-table tbody tr.active { background: rgba(58, 123, 213, 0.10) !important; box-shadow: none !important; } /* ---------- Forms / inputs ---------- */ html[data-theme="light"]:not([data-theme-locked]) .form-control, html[data-theme="light"]:not([data-theme-locked]) .lrn-input, html[data-theme="light"]:not([data-theme-locked]) .lrn-select, html[data-theme="light"]:not([data-theme-locked]) .form-select, html[data-theme="light"]:not([data-theme-locked]) select, html[data-theme="light"]:not([data-theme-locked]) input[type="text"], html[data-theme="light"]:not([data-theme-locked]) input[type="number"], html[data-theme="light"]:not([data-theme-locked]) input[type="email"], html[data-theme="light"]:not([data-theme-locked]) input[type="password"], html[data-theme="light"]:not([data-theme-locked]) input[type="search"], html[data-theme="light"]:not([data-theme-locked]) input[type="tel"], html[data-theme="light"]:not([data-theme-locked]) input[type="url"], html[data-theme="light"]:not([data-theme-locked]) input[type="date"], html[data-theme="light"]:not([data-theme-locked]) textarea { background: var(--lrn-bg-secondary); border: 1px solid var(--lrn-border-color); color: var(--lrn-text-primary); } html[data-theme="light"]:not([data-theme-locked]) .form-control:focus, html[data-theme="light"]:not([data-theme-locked]) .lrn-input:focus, html[data-theme="light"]:not([data-theme-locked]) .lrn-select:focus, html[data-theme="light"]:not([data-theme-locked]) .form-select:focus, html[data-theme="light"]:not([data-theme-locked]) select:focus, html[data-theme="light"]:not([data-theme-locked]) input:focus, html[data-theme="light"]:not([data-theme-locked]) textarea:focus { outline: none; border-color: var(--lrn-primary); box-shadow: var(--lrn-shadow-glow); } html[data-theme="light"]:not([data-theme-locked]) .form-control::placeholder, html[data-theme="light"]:not([data-theme-locked]) input::placeholder, html[data-theme="light"]:not([data-theme-locked]) textarea::placeholder { color: var(--lrn-text-muted); } html[data-theme="light"]:not([data-theme-locked]) .form-group label, html[data-theme="light"]:not([data-theme-locked]) .lrn-form-group label, html[data-theme="light"]:not([data-theme-locked]) .form-label { color: var(--lrn-text-primary); } html[data-theme="light"]:not([data-theme-locked]) .form-text, html[data-theme="light"]:not([data-theme-locked]) small.text-muted { color: var(--lrn-text-muted); } /* ---------- Buttons ---------- */ html[data-theme="light"]:not([data-theme-locked]) .btn-primary, html[data-theme="light"]:not([data-theme-locked]) .button.blue { background: var(--lrn-gradient-primary); color: var(--lrn-text-inverse); border: none; } html[data-theme="light"]:not([data-theme-locked]) .btn-primary:hover, html[data-theme="light"]:not([data-theme-locked]) .button.blue:hover { box-shadow: var(--lrn-shadow-primary); } html[data-theme="light"]:not([data-theme-locked]) .btn-success { background: var(--lrn-gradient-success); color: var(--lrn-text-inverse); } html[data-theme="light"]:not([data-theme-locked]) .btn-danger { background: var(--lrn-gradient-danger); color: var(--lrn-text-inverse); } html[data-theme="light"]:not([data-theme-locked]) .btn-secondary, html[data-theme="light"]:not([data-theme-locked]) .btn-outline { background: var(--lrn-bg-secondary); color: var(--lrn-text-secondary); border: 1px solid var(--lrn-border-color); } html[data-theme="light"]:not([data-theme-locked]) .btn-secondary:hover, html[data-theme="light"]:not([data-theme-locked]) .btn-outline:hover { background: var(--lrn-bg-tertiary); color: var(--lrn-text-primary); } /* ---------- Badges / alerts ---------- .badge / .alert base structure + colors used to come exclusively from lrn-dark-theme-enhanced.css, which no longer reaches light pages — redefine both structure and light-appropriate tints here. */ html[data-theme="light"]:not([data-theme-locked]) .badge { padding: 0.35rem 0.75rem; border-radius: var(--lrn-radius-pill); font-weight: 500; letter-spacing: 0.3px; font-size: 0.75rem; } html[data-theme="light"]:not([data-theme-locked]) .badge-primary { background: rgba(58, 123, 213, 0.12); color: var(--lrn-primary-dark); } html[data-theme="light"]:not([data-theme-locked]) .badge-success { background: rgba(30, 142, 62, 0.12); color: var(--lrn-success); } html[data-theme="light"]:not([data-theme-locked]) .badge-danger { background: rgba(198, 40, 40, 0.12); color: var(--lrn-danger); } html[data-theme="light"]:not([data-theme-locked]) .badge-warning { background: rgba(178, 106, 0, 0.12); color: var(--lrn-warning); } html[data-theme="light"]:not([data-theme-locked]) .alert { border-radius: var(--lrn-radius-md); border: 1px solid; } html[data-theme="light"]:not([data-theme-locked]) .alert-success { background: rgba(30, 142, 62, 0.10); border-color: var(--lrn-success); color: var(--lrn-success); } html[data-theme="light"]:not([data-theme-locked]) .alert-danger { background: rgba(198, 40, 40, 0.10); border-color: var(--lrn-danger); color: var(--lrn-danger); } html[data-theme="light"]:not([data-theme-locked]) .alert-warning { background: rgba(178, 106, 0, 0.10); border-color: var(--lrn-warning); color: var(--lrn-warning); } html[data-theme="light"]:not([data-theme-locked]) .alert-info { background: rgba(2, 119, 189, 0.10); border-color: var(--lrn-info); color: var(--lrn-info); } /* ---------- Modals / dropdowns ---------- */ html[data-theme="light"]:not([data-theme-locked]) .modal-content, html[data-theme="light"]:not([data-theme-locked]) .modal-container, html[data-theme="light"]:not([data-theme-locked]) .lrn-modal, html[data-theme="light"]:not([data-theme-locked]) .lrn-modal-content { background: var(--lrn-card-bg); border: 1px solid var(--lrn-card-border); box-shadow: var(--lrn-shadow-lg); } html[data-theme="light"]:not([data-theme-locked]) .modal-header { background: var(--lrn-bg-tertiary); border-bottom: 1px solid var(--lrn-border-color); } html[data-theme="light"]:not([data-theme-locked]) .modal-header h3, html[data-theme="light"]:not([data-theme-locked]) .modal-header h4 { color: var(--lrn-text-primary); } html[data-theme="light"]:not([data-theme-locked]) .modal-footer { background: var(--lrn-bg-tertiary); border-top: 1px solid var(--lrn-border-color); } html[data-theme="light"]:not([data-theme-locked]) .modal-backdrop, html[data-theme="light"]:not([data-theme-locked]) .lrn-modal-backdrop { background: rgba(23, 43, 77, 0.4); } html[data-theme="light"]:not([data-theme-locked]) .dropdown-menu { background: var(--lrn-bg-secondary); border: 1px solid var(--lrn-border-color); box-shadow: var(--lrn-shadow-md); } /* ---------- Scrollbars (webkit) ---------- */ html[data-theme="light"]:not([data-theme-locked]) ::-webkit-scrollbar-track, html[data-theme="light"]:not([data-theme-locked]) .table-wrapper::-webkit-scrollbar-track { background: #eef1f6; } html[data-theme="light"]:not([data-theme-locked]) ::-webkit-scrollbar-thumb, html[data-theme="light"]:not([data-theme-locked]) .table-wrapper::-webkit-scrollbar-thumb { background: #c3ccd9; border-color: #eef1f6; } html[data-theme="light"]:not([data-theme-locked]) ::-webkit-scrollbar-thumb:hover, html[data-theme="light"]:not([data-theme-locked]) .table-wrapper::-webkit-scrollbar-thumb:hover { background: #a9b4c6; } /* ---------- Code / pre ---------- */ html[data-theme="light"]:not([data-theme-locked]) pre, html[data-theme="light"]:not([data-theme-locked]) code { background: #f6f8fa; color: #1c2433; } /* ---------- Misc ---------- */ html[data-theme="light"]:not([data-theme-locked]) ::selection { background: rgba(58, 123, 213, 0.2); color: var(--lrn-text-primary); } html[data-theme="light"]:not([data-theme-locked]) :focus-visible { outline: 2px solid var(--lrn-primary); outline-offset: 2px; } html[data-theme="light"]:not([data-theme-locked]) .empty-state .empty-icon { color: var(--lrn-text-muted); }