/* ════════════════════════════════════════════════ DARK MODE — Student Attendance System Add [data-theme="dark"] to via JS toggle. Optionally combine with prefers-color-scheme. ════════════════════════════════════════════════ */ [data-theme="dark"] { /* ── Core brand vars (your existing names, dark-adapted) ── */ --primary-color: #f07c79; --primary-hover: #f59490; --secondary-color: #8a8a8a; --secondary-hover: #9e9e9e; --background-color: #121212; --white: #1e1e1e; /* used as card/form bg in dark */ --text-dark: #e0e0e0; --text-medium: #aaaaaa; --text-light: #707070; --border-color: rgba(255,255,255,0.10); --border-input: rgba(255,255,255,0.18); --success-color: #75c475; --warning-color: #f5bf62; --error-bg: #3a1414; --error-text: #f5a0a0; /* ── Backgrounds ── */ --bg-primary: #121212; --bg-secondary: #1a1a1a; --bg-tertiary: #252525; --bg-elevated: #222222; --bg-overlay: rgba(255,255,255,0.05); --login-overlay: rgba(0, 0, 0, 0.65); --grid-line: rgba(255, 255, 255, 0.08); --bg-input: #242424; --bg-code: #2d2d2d; --bg-tooltip: #e8e8e8; --bg-modal: #1e1e1e; --bg-sidebar: #161616; --bg-navbar: #1a1a1a; --bg-card: #1e1e1e; --bg-tag: #2a2a2a; --bg-badge: #3a1414; --bg-hover: rgba(255,255,255,0.06); --bg-active: rgba(255,255,255,0.10); --bg-selected: rgba(240, 124, 121, 0.12); --bg-disabled: #1e1e1e; --bg-success: #0d240d; --bg-warning: #2a1e00; --bg-danger: #3a1414; --bg-info: #0d1f2d; --bg-skeleton: linear-gradient(90deg, #2a2a2a 25%, #333333 50%, #2a2a2a 75%); /* ── Text ── */ --text-primary: #e0e0e0; --text-secondary: #aaaaaa; --text-tertiary: #707070; --text-placeholder: #505050; --text-disabled: #454545; --text-inverse: #111111; --text-link: #f07c79; --text-link-visited: #ce93d8; --text-link-hover: #f5a0a0; --text-success: #75c475; --text-warning: #f5bf62; --text-danger: #f07c79; --text-info: #79b8ff; --text-code: #f48fb1; --text-on-accent: #ffffff; --text-on-badge: #f5a0a0; --text-heading: #f0f0f0; --text-caption: #606060; /* ── Accents (red & gray brand, brightened for dark bg) ── */ --accent-primary: #f07c79; --accent-primary-hover: #f59490; --accent-primary-active: #e06865; --accent-secondary: #8a8a8a; --accent-secondary-hover: #9e9e9e; --accent-danger: #f07c79; --accent-danger-hover: #f59490; --accent-warning: #f5bf62; --accent-warning-hover: #f7cc7a; --accent-purple: #b39ddb; --accent-purple-hover: #c5b0e8; --accent-teal: #4db6ac; --accent-teal-hover: #63c8bd; --accent-pink: #f48fb1; --accent-pink-hover: #f7a8c4; --accent-orange: #f5bf62; --accent-orange-hover: #f7cc7a; --accent-renew: #FDE2B2; --accent-renew-hover: #f0d9b5; --accent-retry: #C93030; --accent-retry-hover: #f54d6d; /* ── Borders ── */ --border-default: rgba(255,255,255,0.12); --border-subtle: rgba(255,255,255,0.06); --border-strong: rgba(255,255,255,0.22); --border-focus: #f07c79; --border-error: #f07c79; --border-success: #75c475; --border-warning: #f5bf62; --border-info: #79b8ff; --border-divider: rgba(255,255,255,0.08); --border-input: rgba(255,255,255,0.16); --border-input-hover: rgba(255,255,255,0.32); --border-card: rgba(255,255,255,0.08); --border-table: rgba(255,255,255,0.08); /* ── Shadows (heavier opacity for dark surfaces) ── */ --shadow-xs: 0 1px 2px rgba(0,0,0,0.35); --shadow-sm: 0 1px 3px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.35); --shadow-md: 0 2px 5px rgba(0,0,0,0.45); --shadow-lg: 0 4px 6px rgba(0,0,0,0.45); --shadow-xl: 0 10px 20px rgba(0,0,0,0.50); --shadow-inset: inset 0 2px 4px rgba(0,0,0,0.35); --shadow-focus: 0 0 0 3px rgba(240,124,121,0.28); --shadow-focus-danger: 0 0 0 3px rgba(240,124,121,0.42); /* ── Misc ── */ --scroll-bar: rgba(255,255,255,0.18); --scroll-bar-hover: rgba(255,255,255,0.32); --overlay-backdrop: rgba(0,0,0,0.72); /* ── Charts ── */ --chart-1: #f07c79; --chart-2: #75c475; --chart-3: #f5bf62; --chart-4: #79b8ff; --chart-5: #b39ddb; --chart-6: #4db6ac; --chart-7: #f48fb1; --chart-8: #9e9e9e; } /* ════════════════════════════════════════════════ DARK MODE SCROLLBARS ════════════════════════════════════════════════ */ [data-theme="dark"] ::-webkit-scrollbar { width: 12px; height: 12px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg-secondary); border-radius: 10px; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--scroll-bar); border-radius: 10px; border: 2px solid var(--bg-secondary); } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--scroll-bar-hover); } /* Firefox scrollbar */ [data-theme="dark"] * { scrollbar-width: thin; scrollbar-color: var(--scroll-bar) var(--bg-secondary); } /* ════════════════════════════════════════════════ DARK MODE CONFIRM MODAL OVERLAY ════════════════════════════════════════════════ */ [data-theme="dark"] .confirm-overlay { background: rgba(0, 0, 0, 0.82); /* dark overlay instead of white */ } [data-theme="dark"] .confirm-dialog { background: var(--bg-modal); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6); } [data-theme="dark"] .confirm-title { color: var(--text-heading); } [data-theme="dark"] .confirm-message { color: var(--text-secondary); } [data-theme="dark"] .confirm-btn-cancel { background: var(--bg-secondary); color: var(--text-primary); } [data-theme="dark"] .confirm-btn-cancel:hover { background: var(--bg-tertiary); } [data-theme="dark"] .confirm-btn-confirm { background: var(--accent-danger); color: #ffffff; } [data-theme="dark"] .confirm-btn-confirm:hover { background: var(--accent-danger-hover); } /* ════════════════════════════════════════════════ DARK MODE MODAL OVERLAYS (ALL PAGES) ════════════════════════════════════════════════ */ /* Students page modal */ [data-theme="dark"] #studentModal.modal-overlay { background-color: rgba(0, 0, 0, 0.82) !important; } /* Organizations page modals */ [data-theme="dark"] #organizationModal.modal-overlay, [data-theme="dark"] #viewOrganizationModal.modal-overlay { background-color: rgba(0, 0, 0, 0.82) !important; } /* Groups page modals */ [data-theme="dark"] #mainGroupModal.modal-overlay, [data-theme="dark"] #groupModal.modal-overlay, [data-theme="dark"] #locationModal.modal-overlay { background-color: rgba(0, 0, 0, 0.82) !important; } /* QR Scanner modals */ [data-theme="dark"] .qr-modal { background-color: rgba(0, 0, 0, 0.82) !important; } /* Time Management modal */ [data-theme="dark"] .time-modal { background-color: rgba(0, 0, 0, 0.82) !important; } [data-theme="dark"] #holidayConfirmModal { background-color: rgba(0, 0, 0, 0.82) !important; } /* Generic modal overlays (staff, sessions, classes, roles, encounter-types) */ [data-theme="dark"] .modal-overlay { background-color: rgba(0, 0, 0, 0.82) !important; } /* ════════════════════════════════════════════════ DARK MODE STAFF & ORGANIZATION DETAIL PAGES ════════════════════════════════════════════════ */ /* Tab Navigation */ [data-theme="dark"] .tabs { border-bottom: none !important; } [data-theme="dark"] .tab { color: var(--text-secondary); } [data-theme="dark"] .tab:hover { color: var(--text-primary); } [data-theme="dark"] .tab.active { color: #79b8ff; } [data-theme="dark"] .tab.active::after { background-color: #79b8ff; } /* Tab Content */ [data-theme="dark"] .tab-content { background: var(--bg-secondary); } /* Organization Detail Page */ [data-theme="dark"] .org-detail-header { border-bottom: none !important; } [data-theme="dark"] .org-name { color: var(--text-heading); } [data-theme="dark"] .org-stats-inline { border-bottom: none !important; } [data-theme="dark"] .stat-label { color: var(--text-primary); } [data-theme="dark"] .stat-value { color: var(--text-heading); } [data-theme="dark"] .section-title { color: var(--text-heading); border-bottom: none !important; } [data-theme="dark"] .detail-row { border-bottom: none !important; } [data-theme="dark"] .detail-label { color: var(--text-primary); } [data-theme="dark"] .detail-value { color: var(--text-secondary); } /* Detail Grid Items */ [data-theme="dark"] .detail-item { border-bottom: none !important; } [data-theme="dark"] .detail-item .detail-label { color: var(--text-primary); } [data-theme="dark"] .detail-item .detail-value { color: var(--text-secondary); } /* Staff Detail Page */ [data-theme="dark"] .detail-grid { background: transparent; } [data-theme="dark"] .stats-inline { border-bottom: none !important; } [data-theme="dark"] .staff-detail-header { border-bottom: none !important; } /* ════════════════════════════════════════════════ DARK MODE GOOGLE LOGIN BUTTON ════════════════════════════════════════════════ */ [data-theme="dark"] .btn-google { background: transparent; border-color: var(--border-default); color: var(--text-primary); } [data-theme="dark"] .btn-google:hover { background: var(--bg-hover); border-color: var(--border-strong); box-shadow: var(--shadow-sm); } [data-theme="dark"] .btn-google:active { background: var(--bg-active); } [data-theme="dark"] .toggle-link { color: var(--text-secondary); } [data-theme="dark"] .toggle-link:hover { color: var(--text-primary); }