/* ========================================================= SITE-WIDE LIGHT/DARK THEME ========================================================= Loaded on every page (dashboards + landing page), after that page's own stylesheet(s). Two layers: 1. Dark redefinitions of the CSS custom properties every shell already uses for its surfaces/text (--bg-main, --white, --text-dark, --text-gray, --text-muted, --card-border, --card-shadow). admin_dashboard.css, student_dashboard.css, coordinator_dashboard.css (inherits student's), set_password.css and landing_page.css all build their components on top of these same variable names, so redefining them once here re-themes the overwhelming majority of every page's chrome automatically -- no need to duplicate this block per file. 2. Targeted overrides for the specific places a page hardcodes a raw color instead of a variable (a handful of white card/input backgrounds in landing_page.css, set_password.css, and plain HTML form controls that get their light-gray border/background from the browser default or an inline style). Kept to a short, named list rather than trying to chase every inline style in the app -- see the session notes for what's intentionally out of scope. Toggled via [data-theme="dark"] on , set by js/theme_toggle.js and persisted in localStorage; the inline anti-flash snippet in each page's applies it before first paint. */ /* ===== PAGE TRANSITION: CROSSFADE + SUBTLE SLIDE ===== Applies to every page (dashboards AND the landing page -- this is a generic navigation-feel polish, unrelated to the light/dark theme, so unlike the theme itself it isn't excluded from index.php). Paired with js/theme_toggle.js, which toggles .page-exiting on the right element just before an internal link is actually followed, so leaving a page crossfades out instead of cutting straight to a blank flash while the next page loads; arriving at the new page then plays the entrance below the same way. A real single-page-app transition (old and new page visible at once) isn't possible across a full page navigation -- this is the closest equivalent that works with plain multi-page PHP. On a dashboard page the sidebar/topbar are meant to read as persistent app chrome, not as content that reloads -- fading the WHOLE page (sidebar included) on every tab click undercuts that and made the sidebar look like it "flickers" on each navigation instead of staying put. So only .content-area/.main-content (the actual page content, next to a sidebar that stays exactly where it is) transitions on those pages; body is the fallback target for pages that don't have either (the landing page has no sidebar at all, so the whole page transitioning there is correct, not a compromise). */ body { animation: pageEnter 0.35s ease-out; } .content-area, .main-content { animation: pageEnter 0.35s ease-out; } body:has(.content-area, .main-content) { animation: none; } @keyframes pageEnter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .page-exiting { opacity: 0; transform: translateY(-10px); transition: opacity 0.2s ease, transform 0.2s ease; } /* ===== TOAST NOTIFICATIONS ===== Paired with window.showToast() in js/theme_toggle.js -- the replacement for the plain browser alert() previously scattered across the app's AJAX error/validation handling. Stacks in the top-right corner; each toast slides+fades in independently and the container itself never needs sizing/positioning logic since flex + gap handles stacking multiple. */ #toastContainer { position: fixed; top: 20px; right: 20px; z-index: 10000; display: flex; flex-direction: column; gap: 10px; pointer-events: none; max-width: 360px; } .toast { display: flex; align-items: flex-start; gap: 12px; min-width: 280px; background: var(--white); color: var(--text-dark); border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow-lift, 0 10px 30px rgba(0, 0, 0, 0.15)); border-left: 4px solid #999; pointer-events: auto; opacity: 0; transform: translateX(30px); transition: opacity 0.3s var(--ease-out-expo), transform 0.3s var(--ease-out-expo); } .toast.toast-visible { opacity: 1; transform: translateX(0); } .toast.toast-leaving { opacity: 0; transform: translateX(30px); } .toast-icon { font-size: 17px; flex-shrink: 0; margin-top: 1px; } .toast-message { font-size: 13px; line-height: 1.45; flex: 1; font-family: 'Montserrat', sans-serif; } .toast-close { background: none; border: none; cursor: pointer; color: var(--text-gray); font-size: 16px; line-height: 1; padding: 0; flex-shrink: 0; } @media (hover: hover) and (pointer: fine) { .toast-close:hover { color: var(--text-dark); } } .toast-success { border-left-color: #22c55e; } .toast-success .toast-icon { color: #22c55e; } .toast-error { border-left-color: #dc3545; } .toast-error .toast-icon { color: #dc3545; } .toast-warning { border-left-color: #f59e0b; } .toast-warning .toast-icon { color: #f59e0b; } .toast-info { border-left-color: #3b82f6; } .toast-info .toast-icon { color: #3b82f6; } @media (max-width: 480px) { #toastContainer { left: 12px; right: 12px; top: 12px; max-width: none; } .toast { min-width: 0; width: 100%; } } /* ===== SKELETON LOADING PLACEHOLDER ===== For a KPI number that genuinely doesn't exist yet -- the Analytics pages' 3 summary numbers start unknown and only get a real value once their AJAX fetch resolves, unlike the Dashboard pages' KPI cards, which are server-rendered with the real number already and only animate it cosmetically. Showing a plain "0" for that gap reads as real data (an actual zero), not as "still loading" -- this shimmer communicates the difference. Add/remove the class in JS around the real fetch; the element's own text stays in the DOM (color: transparent), so nothing needs restructuring once the real value replaces it. */ .stat-skeleton { color: transparent !important; display: inline-block; min-width: 64px; border-radius: 6px; background: linear-gradient(90deg, rgba(0, 0, 0, 0.06) 25%, rgba(0, 0, 0, 0.12) 37%, rgba(0, 0, 0, 0.06) 63%); background-size: 400% 100%; animation: skeletonShimmer 1.4s ease infinite; } :root[data-theme="dark"] .stat-skeleton { background: linear-gradient(90deg, rgba(255, 255, 255, 0.06) 25%, rgba(255, 255, 255, 0.14) 37%, rgba(255, 255, 255, 0.06) 63%); background-size: 400% 100%; } @keyframes skeletonShimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } /* ===== TABLE ROW ENTRANCE (staggered, one level deeper than the panel) ===== The panel/card holding a table already fades+slides in (the shared entrance system further up this file); rows inside it used to just appear fully rendered the instant the panel's own animation finished, which reads as the stagger stopping abruptly at the panel boundary. This extends the same "staggered loading" language one level deeper, into the actual rows -- covers both table shapes in the app: real `` markup (admin/offense classifications/AI knowledge base/user management) and the div-grid ".report-row" pattern (student/coordinator's reports and student lists). Runs identically whether the rows were server-rendered at page load or just replaced via an AJAX table refresh -- a CSS animation plays whenever a matching element is inserted into the render tree, regardless of how it got there, so no JS wiring is needed per page. Capped at the first 10 rows; anything beyond that shares the last step's delay so a long table doesn't take increasingly longer to finish appearing. */ .data-table tbody tr, .report-row { opacity: 0; animation: tableRowIn 0.35s ease-out forwards; } @keyframes tableRowIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .data-table tbody tr:nth-child(1), .report-row:nth-child(1) { animation-delay: 0.03s; } .data-table tbody tr:nth-child(2), .report-row:nth-child(2) { animation-delay: 0.06s; } .data-table tbody tr:nth-child(3), .report-row:nth-child(3) { animation-delay: 0.09s; } .data-table tbody tr:nth-child(4), .report-row:nth-child(4) { animation-delay: 0.12s; } .data-table tbody tr:nth-child(5), .report-row:nth-child(5) { animation-delay: 0.15s; } .data-table tbody tr:nth-child(6), .report-row:nth-child(6) { animation-delay: 0.18s; } .data-table tbody tr:nth-child(7), .report-row:nth-child(7) { animation-delay: 0.21s; } .data-table tbody tr:nth-child(8), .report-row:nth-child(8) { animation-delay: 0.24s; } .data-table tbody tr:nth-child(9), .report-row:nth-child(9) { animation-delay: 0.27s; } .data-table tbody tr:nth-child(10), .report-row:nth-child(10) { animation-delay: 0.3s; } .data-table tbody tr:nth-child(n+11), .report-row:nth-child(n+11) { animation-delay: 0.3s; } /* ===== EMPTY-STATE ICON BOUNCE ===== Every "no data yet" empty state across the app (no reports, no announcements, no coordinators, no pending registrations, ...) uses the same faded icon treatment -- literally the same two inline colors (color: #ddd or #ccc) copy-pasted at every one of its ~13 call sites across both PHP-rendered markup and two AJAX-rendered ones (fetch_admin_reports.php, fetch_registrations.php's own empty-table HTML string). That repetition is what makes a single attribute-value selector viable here instead of touching each file: it reliably targets exactly those icons and nothing else, with zero markup changes needed anywhere (works on the two AJAX-built ones the same as the static ones). A small personality touch for a state that otherwise reads as "nothing happened" rather than "designed for this." */ i[style*="color: #ddd"], i[style*="color:#ddd"], i[style*="color: #ccc"], i[style*="color:#ccc"] { display: inline-block; animation: emptyIconBounce 0.5s var(--ease-out-expo) forwards; } @keyframes emptyIconBounce { 0% { opacity: 0; transform: scale(0.5); } 60% { opacity: 1; transform: scale(1.15); } 100% { opacity: 1; transform: scale(1); } } /* ===== DASHBOARD GREETING TYPEWRITER ===== Paired with js/theme_toggle.js's typewriterEffect(). Starts hidden via visibility (not opacity/display -- the heading still occupies its real layout space immediately, so nothing around it jumps once the text starts appearing) so there's no flash of the full, server-rendered greeting before JS blanks it and starts typing it back in. JS flips this to visible at the exact moment it's ready to reveal the first character, matching every dashboard's actual greeting heading (Admin's "Good morning, Admin!" h2, Student's/Coordinator's h1.greeting). */ .welcome-header h2, h1.greeting { visibility: hidden; } /* The JS-positioned sliding active-tab indicator bar that used to be styled here was removed (see js/theme_toggle.js's own comment at the end of its IIFE) -- it lagged behind the page's own instant CSS active-pill background and could drift out of sync with the actual
  • . .sidebar-nav keeps position:relative since other absolutely-positioned children may still rely on it. */ .sidebar-nav { position: relative; } /* ===== SHARED DASHBOARD ENTRANCE ANIMATION SYSTEM ===== One set of keyframes + timing/easing, used by every dashboard tab across every role (Admin, Coordinator, Student, and their Analytics/Reports pages) instead of each page's own CSS file inventing its own duration, easing curve, and slide-up-only motion. Originally built for admin_dashboard.php's KPI cards; moved here (the one stylesheet already loaded everywhere) so every other dashboard's cards/panels reference the exact same keyframes and can stagger with the same 0.1s-per-step convention -- literally the same animation engine everywhere, not a lookalike re-implementation per file. Each page's own CSS still decides WHICH of these five to use on which element and what accent color goes with it (that's genuinely page-specific -- a KPI's meaning drives its color), but the motion itself, its duration, and its easing curve are shared so the whole app reads as one system. --ease-out-expo is also defined locally in admin_dashboard.css/ student_dashboard.css/landing_page.css (same value) for pages that use it before this file loads; declared again here so it's available to anything that only depends on theme.css. */ :root { --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* Modal spacing system -- consolidates the 5/6/8/12/15/20/25/30px values previously copy-pasted (inconsistently) across every modal in the app into one shared, tunable scale. Tightest at the top (label -> its own input), loosest at the bottom (content -> the action buttons), same intent every modal already had, just not expressed consistently. Deliberately generous (not just a 1-2px nudge from the old values) so the change reads as an obvious, intentional spacing upgrade rather than something that could pass for a caching artifact. */ --modal-padding: 36px; --modal-padding-mobile: 24px; --modal-header-gap: 12px; /* header title -> subtitle */ --modal-section-gap: 28px; /* header block -> body content */ --modal-field-gap: 20px; /* between stacked input-groups */ --modal-label-gap: 8px; /* label -> its input */ --modal-action-gap: 32px; /* last field/content -> button(s) */ --modal-button-gap: 14px; /* between multiple buttons */ /* Entrance-animation tiers -- 3 durations instead of the 9 distinct values previously in use, all on the same --ease-out-expo curve. */ --anim-micro: 0.3s var(--ease-out-expo); /* badges, pulses, bubbles */ --anim-standard: 0.6s var(--ease-out-expo); /* cards, panels, modal pop-in */ --anim-section: 0.8s var(--ease-out-expo); /* page headers, hero content */ /* Unread-report row highlight (staff queues: admin/coordinator/GHD Reports Tables + the admin dashboard's "Needs Action" list) -- the brand green: a soft green wash with a solid green stripe, so it sits inside the system's palette instead of introducing a blue. Referenced via var() from inline styles generated in PHP, so it still re-themes correctly even though those rows aren't built from a CSS class. */ --unread-bg: rgba(10, 95, 37, 0.09); --unread-accent: #0a5f25; } @keyframes cardFadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } /* Report Viewing Animation -- the modal SHELL already fades+scales in on .active (see .modal-content below), but its inner content used to just snap from "Loading..." to the real report with no transition at all, feeling like two disconnected motions back to back. This is applied via JS the moment real content replaces the loading placeholder (see openAdminReport() et al.) -- micro tier (0.3s) on purpose, so it reads as quick and natural rather than delaying access to the report. */ .report-content-fade-in { animation: cardFadeUp var(--anim-micro, 0.3s ease) both; } @keyframes cardSlideLeft { from { opacity: 0; transform: translateX(-32px); } to { opacity: 1; transform: translateX(0); } } @keyframes cardSlideRight { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: translateX(0); } } @keyframes cardZoomIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } } @keyframes cardBounceIn { 0% { opacity: 0; transform: scale(0.7) translateY(10px); } 60% { opacity: 1; transform: scale(1.04) translateY(-2px); } 100% { opacity: 1; transform: scale(1) translateY(0); } } @keyframes iconPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } } /* Baseline every dashboard card/panel picks up automatically -- a page that never customizes further (admin_reports.php, user_management.php, coordinator_reports.php, ai_knowledge_base.php, offense_classifications.php, my_reports.php, etc.) still fades its panels in on the same curve as everywhere else, instead of appearing with no motion at all. Pages that DO want a specific card to slide/zoom/bounce instead just set that element's own animation-name + animation-delay -- duration/easing/fill-mode stay inherited from here so the "feel" never drifts between a hand-tuned card and a default one. */ .stat-card, .panel, .glass-panel, .counter-card { animation-duration: 0.6s; animation-timing-function: var(--ease-out-expo); /* "both", not "forwards" -- a staggered card's animation-delay would otherwise render it at full opacity during the wait (fill-mode "forwards" only holds the END state, not the START one), so a later card flashes visible then snaps back to invisible the instant its delayed animation actually begins. "both" holds the keyframe's 0% state through the delay too, so it stays properly hidden until its turn in the stagger. */ animation-fill-mode: both; animation-name: cardFadeUp; } /* A per-page entrance animation on .top-header was tried here and reverted -- `animation-fill-mode: forwards` leaves a permanent (if visually identity) `transform` on the element even after the animation finishes, and ANY non-"none" transform on an ancestor makes it the containing block for `position: fixed` descendants (the logout modal, notification/ profile dropdowns, ...) instead of the real viewport. That silently broke exactly the kind of thing it looks like: fixed-position UI rendering in the wrong place or not at all, worst on Coordinator's pages (its sidebar is itself position:fixed, a different layout model than Admin's/Student's flex-based one, so the breakage compounded there). The topbar intentionally has no entrance animation -- it's persistent app chrome, matching the sidebar's own (correct) lack of one. */ /* ===== MODAL DARK-MODE FIX ===== Every modal in the app (logout confirmation on ~18 pages, the report- submission form, student/report detail popups, add/edit/confirm dialogs in user_management.php, etc.) was built the same way: a `.modal-content` box with its background, text colors, and borders set as literal inline `style="..."` attributes (background: #ffffff, color: #222/#666/#555, border: 1px solid #ddd, ...) instead of this app's `var(--white)`/ `var(--text-dark)` design tokens. An inline style always wins over an external stylesheet's normal rule, so toggling dark mode left every one of these modals a bright white box with dark text -- the exact bug reported. `!important` here is deliberate and the only way to win against an inline style without editing 18+ files' worth of individual `style="..."` attributes one at a time; it's scoped tightly (dark theme only, .modal-content/.modal-overlay descendants only) so it can't leak into anything else. 1. The container itself: every modal shares `.modal-content` (a plain `.modal` wrapper for compact dialogs like the logout confirmation, or `.modal-overlay` for the larger report-submission forms), so fixing this one class re-themes all of them at once. */ :root[data-theme="dark"] .modal-content { background: var(--white) !important; color: var(--text-dark) !important; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55) !important; } :root[data-theme="dark"] .modal-overlay { background: rgba(0, 0, 0, 0.6) !important; } /* 2. Form fields inside any modal -- the report-submission forms (student/faculty/security/GHD) hardcode every /