/* ========================================================================== SCMS Design System — Bulacan Polytechnic College (BPC Malolos) Design Language: Modern Academic SaaS (Navy / Modern Blue / Institutional Gold) Proportional Compact Fit System for Laptops, Desktops & Tablets ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@300;400;500;600;700&family=Outfit:wght@500;600;700;800;900&display=swap'); :root { /* ═══════════════════════════════════════════════════════════════════ NEW SEMANTIC DESIGN TOKENS (Modern Academic SaaS Foundation) ═══════════════════════════════════════════════════════════════════ */ /* Primary: BPC Deep Institutional Green */ --color-primary: #0B3D26; /* Institutional Green: Main navigation, primary brand anchors, primary CTA */ --color-primary-hover: #082D1C; /* Darker green hover state */ --color-primary-light: #124A30; /* Raised green surfaces, active submenu, nav hover */ --color-primary-border: #1D5C3E; /* Green divider lines and borders */ --color-primary-text: #D9E8DE; /* Light green-white text on dark green surfaces */ --color-primary-muted: #8FB09D; /* Muted text on dark green surfaces */ /* Brand Accent: Authentic BPC Institutional Gold */ --brand-gold: #AF8F23; /* Authentic BPC institutional gold accent (icons, borders, accents) */ --brand-gold-strong: #755C10; /* Verified WCAG AA compliant gold (>= 4.5:1 on light surfaces & tints) */ --brand-gold-tint: #FBF3D9; /* Soft golden tint for badges and highlights */ --brand-gold-glow: rgba(175, 143, 35, 0.20); /* Authentic BPC Institutional Green (Preserved) */ --brand-green: #0B3D26; /* Accent: BPC Gold as Brand Accent & Modern Blue for Tech/Info */ --color-accent: #AF8F23; /* Primary brand accent is BPC Gold */ --color-accent-hover: #755C10; --color-accent-light: #FBF3D9; --color-accent-cyan: #0284C7; /* Technology-related actions, scanner states */ --color-accent-cyan-tint: #F0F9FF; /* Subtle cyan background tint */ /* Neutral Surfaces (Academic SaaS Paper & Slate) */ --color-bg: #F8FAFC; /* Page background (soft, clean off-white / slate-50) */ --color-surface: #FFFFFF; /* Pure white cards, modal surfaces, table body */ --color-surface-hover: #F8FAFC; /* Subtle hover state for table rows and list items */ --color-surface-subtle: #F1F5F9; /* Input background, secondary containers, header pills */ --color-border: #E2E8F0; /* Clean, subtle slate borders */ --color-border-hover: #CBD5E1; /* Border hover and active boundary */ /* Typography Colors */ --color-text: #0F172A; /* Slate 900: High-contrast primary headings & text */ --color-text-secondary: #334155; /* Slate 700: Secondary body text, form labels */ --color-text-muted: #475569; /* Slate 600: High-contrast accessible subtext & hints (7.0:1 contrast) */ /* Status Colors (Semantic & High-Contrast) */ --color-success: #16A34A; /* Present / Success / Approved */ --color-success-tint: #DCFCE7; /* Soft green badge / alert tint */ --color-warning: #D97706; /* Late / Warning / Pending */ --color-warning-tint: #FEF3C7; /* Soft amber badge / alert tint */ --color-danger: #DC2626; /* Absent / Danger / Rejected */ --color-danger-tint: #FEE2E2; /* Soft red badge / alert tint */ --color-info: #2563EB; /* Information / Neutral / Faculty */ --color-info-tint: #DBEAFE; /* Soft blue badge / alert tint */ --color-purple: #7C3AED; /* Security status / Gate pass */ --color-purple-tint: #F3E8FF; --color-cyan: #0284C7; /* Registrar status / Queue */ --color-cyan-tint: #E0F2FE; /* ═══════════════════════════════════════════════════════════════════ LEGACY COMPATIBILITY MAPPINGS (Preserves 20+ specialized pages) ═══════════════════════════════════════════════════════════════════ */ --ink: var(--color-primary); --ink-raised: var(--color-primary-light); --ink-line: var(--color-primary-border); --ink-text: var(--color-primary-text); --ink-text-muted: var(--color-primary-muted); --verify: var(--color-accent); --verify-strong: var(--color-accent-hover); --verify-tint: var(--color-accent-light); --paper: var(--color-bg); --paper-raised: var(--color-surface); --paper-line: var(--color-border); --paper-line-hover: var(--color-border-hover); --slate: var(--color-text); --slate-soft: var(--color-text-secondary); --slate-muted: var(--color-text-muted); --signal-green: var(--color-success); --signal-green-tint: var(--color-success-tint); --signal-amber: var(--color-warning); --signal-amber-tint: var(--color-warning-tint); --signal-red: var(--color-danger); --signal-red-tint: var(--color-danger-tint); --signal-blue: var(--color-info); --signal-blue-tint: var(--color-info-tint); --signal-purple: var(--color-purple); --signal-purple-tint: var(--color-purple-tint); --signal-cyan: var(--color-cyan); --signal-cyan-tint: var(--color-cyan-tint); --bpc-navy: var(--color-primary); --bpc-navy-mid: var(--color-primary-light); --bpc-navy-light: var(--color-primary-border); --bpc-gold: var(--brand-gold); --bpc-gold-light: #C8A836; --bpc-gold-dim: var(--brand-gold-tint); --bpc-gold-glow: var(--brand-gold-glow); --bpc-blue: var(--color-info); --bpc-blue-light: #3B82F6; --accent: var(--color-accent); --accent-dim: var(--color-accent-light); --rose: var(--color-danger); --rose-dim: var(--color-danger-tint); --violet: var(--color-purple); --violet-dim: var(--color-purple-tint); --amber: var(--color-warning); --sky: var(--color-cyan); --surface: var(--color-bg); --surface-2: var(--color-surface-subtle); --surface-3: #E2E8F0; --card-bg: var(--color-surface); --card-bg-hover: var(--color-surface-hover); --card-border: var(--color-border); --card-border-hover: var(--color-border-hover); --text-primary: var(--color-text); --text-secondary: var(--color-text-secondary); --text-muted: var(--color-text-muted); --border: var(--color-border); --card: var(--color-surface); --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-heading: 'Outfit', sans-serif; --font-mono: 'IBM Plex Mono', monospace; /* Dimensions */ --sidebar-w: 240px; --topbar-h: 56px; --radius-lg: 12px; --radius: 8px; --radius-sm: 6px; --radius-xs: 4px; /* Shadows (Subtle, professional SaaS elevation) */ --shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.04); --shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.06), 0 1px 2px -1px rgba(15, 23, 42, 0.04); --shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.04); --shadow-md: 0 6px 12px -2px rgba(15, 23, 42, 0.07), 0 3px 6px -3px rgba(15, 23, 42, 0.05); --shadow-lg: 0 10px 25px -3px rgba(15, 23, 42, 0.08), 0 4px 10px -4px rgba(15, 23, 42, 0.04); --shadow-gold: 0 3px 12px rgba(175, 143, 35, 0.20); --shadow-green: 0 3px 12px rgba(22, 163, 74, 0.20); --shadow-accent: 0 4px 14px rgba(37, 99, 235, 0.20); /* Transitions */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --dur: 0.15s; } /* ═══════════════════════════════════════════════════════════════════ PREMIUM INSTITUTIONAL DARK MODE SYSTEM Deep Obsidian / Dark Slate Canvas with Radiant Emerald & Gold Accents ═══════════════════════════════════════════════════════════════════ */ [data-theme="dark"] { /* Surfaces: Sleek Obsidian & Slate (No murky green-wash) */ --color-bg: #0B0F17; /* High-end dark charcoal/obsidian background */ --color-surface: #151D2A; /* Elevated slate card surface */ --color-surface-hover: #1C2638; --color-surface-subtle: #1A2332; --color-border: #243044; /* Clean subtle slate borders */ --color-border-hover: #354763; /* Typography: High-contrast, clean & crisp */ --color-text: #F8FAFC; /* Slate 50: Pure crisp heading text */ --color-text-secondary: #CBD5E1; /* Slate 300: Clear body and labels */ --color-text-muted: #94A3B8; /* Slate 400: Clear subtitles and timestamps */ /* Legacy Semantic Mappings */ --paper: #0B0F17; --paper-raised: #151D2A; --paper-line: #243044; --paper-line-hover: #354763; --slate: #F8FAFC; --slate-soft: #CBD5E1; --slate-muted: #94A3B8; --surface: #0B0F17; --surface-2: #151D2A; --surface-3: #243044; --card-bg: #151D2A; --card-bg-hover: #1C2638; --card-border: #243044; --card-border-hover: #354763; --card: #151D2A; --border: #243044; --text-primary: #F8FAFC; --text-secondary: #CBD5E1; --text-muted: #94A3B8; /* Radiant Accents in Dark Mode */ --brand-gold: #F59E0B; /* Bright amber gold */ --brand-gold-strong: #FBBF24; --brand-gold-tint: rgba(245, 158, 11, 0.16); --brand-gold-glow: rgba(245, 158, 11, 0.30); --brand-green: #10B981; /* Radiant emerald */ --color-accent: #F59E0B; --color-accent-hover: #FBBF24; --color-accent-light: rgba(245, 158, 11, 0.16); /* Status Colors & Dark Alpha Tints (Prevents bright pastel glare in Dark Mode) */ --color-success: #34D399; --color-success-tint: rgba(16, 185, 129, 0.16); --color-warning: #FBBF24; --color-warning-tint: rgba(245, 158, 11, 0.16); --color-danger: #F87171; --color-danger-tint: rgba(239, 68, 68, 0.18); --color-info: #60A5FA; --color-info-tint: rgba(59, 130, 246, 0.16); --color-purple: #C084FC; --color-purple-tint: rgba(168, 85, 247, 0.16); --color-cyan: #38BDF8; --color-cyan-tint: rgba(14, 165, 233, 0.16); --signal-green: var(--color-success); --signal-green-tint: var(--color-success-tint); --signal-amber: var(--color-warning); --signal-amber-tint: var(--color-warning-tint); --signal-red: var(--color-danger); --signal-red-tint: var(--color-danger-tint); --signal-blue: var(--color-info); --signal-blue-tint: var(--color-info-tint); --signal-purple: var(--color-purple); --signal-purple-tint: var(--color-purple-tint); --signal-cyan: var(--color-cyan); --signal-cyan-tint: var(--color-cyan-tint); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.6); --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.6); --shadow: 0 6px 20px rgba(0, 0, 0, 0.7); --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.8); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.9); } [data-theme="dark"] body { background: var(--color-bg) !important; color: var(--color-text) !important; } /* ── Topbar & Mobile App Bar ────────────────────────────── */ [data-theme="dark"] .topbar { background: #0B0F17 !important; border-bottom: 1px solid #1E293B !important; } [data-theme="dark"] .mobile-app-bar { background: #0F172A !important; border-bottom: 1px solid #1E293B !important; } [data-theme="dark"] .mobile-app-bar-toggle, [data-theme="dark"] #sidebar-toggle { background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.15) !important; color: var(--brand-gold, #F6C90E) !important; } [data-theme="dark"] .mobile-app-bar-title { color: #F8FAFC !important; } [data-theme="dark"] .mobile-app-bar-action { background: #1A2234 !important; border-color: #2D3748 !important; color: #CBD5E1 !important; } [data-theme="dark"] .page-title { color: #F8FAFC !important; } [data-theme="dark"] .clock-display { background: #151D2A !important; border: 1px solid #243044 !important; color: #F59E0B !important; } /* ── Cards & Surfaces ───────────────────────────────────── */ [data-theme="dark"] .card { background: #151D2A !important; border: 1px solid #243044 !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important; color: #F8FAFC !important; } [data-theme="dark"] .card-title { color: #F8FAFC !important; } [data-theme="dark"] .card-header { border-bottom-color: #243044 !important; } /* ── Stat Metric Cards ──────────────────────────────────── */ [data-theme="dark"] .stat-card { background: #151D2A !important; border-color: #243044 !important; } [data-theme="dark"] .stat-card:hover { background: #1C2638 !important; border-color: #354763 !important; } [data-theme="dark"] .stat-number { color: #F8FAFC !important; } [data-theme="dark"] .stat-label { color: #94A3B8 !important; } [data-theme="dark"] .stat-icon { opacity: 0.25; color: #FFFFFF !important; } /* ── Buttons Hierarchy ──────────────────────────────────── */ [data-theme="dark"] .btn-secondary { background: #1B2433 !important; border-color: #2C3A50 !important; color: #F1F5F9 !important; } [data-theme="dark"] .btn-secondary:hover { background: #243247 !important; border-color: #3D506E !important; color: #FFFFFF !important; } [data-theme="dark"] .btn-outline { border-color: #2C3A50 !important; color: #CBD5E1 !important; } [data-theme="dark"] .btn-outline:hover { background: #1B2433 !important; color: #FFFFFF !important; } /* ── Forms, Search & Inputs ─────────────────────────────── */ [data-theme="dark"] .form-control, [data-theme="dark"] .form-input, [data-theme="dark"] select, [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="search"], [data-theme="dark"] input[type="date"], [data-theme="dark"] input[type="password"], [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="number"], [data-theme="dark"] textarea { background: #0E141E !important; color: #F8FAFC !important; border-color: #28364C !important; } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-input:focus, [data-theme="dark"] select:focus, [data-theme="dark"] input:focus { border-color: #10B981 !important; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2) !important; } /* ── Data Tables & Table Wrappers in Dark Mode ────────────────────────── */ [data-theme="dark"] .table-wrap, [data-theme="dark"] .table-wrapper, [data-theme="dark"] .table-responsive { background: #111827 !important; border-color: #243044 !important; box-shadow: none !important; } [data-theme="dark"] table, [data-theme="dark"] .table, [data-theme="dark"] .data-table { background: transparent !important; } [data-theme="dark"] thead, [data-theme="dark"] thead tr, [data-theme="dark"] thead th, [data-theme="dark"] .table thead tr, [data-theme="dark"] .table thead th, [data-theme="dark"] .data-table thead tr, [data-theme="dark"] .data-table th, [data-theme="dark"] .table-wrap table thead tr, [data-theme="dark"] .table-wrap table thead th { background: #0E141E !important; color: #94A3B8 !important; border-bottom: 1px solid #243044 !important; } [data-theme="dark"] tbody tr, [data-theme="dark"] .table tbody tr, [data-theme="dark"] .data-table tbody tr, [data-theme="dark"] .table-wrap table tbody tr { background: transparent !important; border-bottom: 1px solid #1E293B !important; } [data-theme="dark"] tbody tr:nth-child(even), [data-theme="dark"] .table tbody tr:nth-child(even), [data-theme="dark"] .data-table tbody tr:nth-child(even), [data-theme="dark"] .table-wrap table tbody tr:nth-child(even) { background: rgba(26, 35, 50, 0.45) !important; } [data-theme="dark"] tbody tr:hover, [data-theme="dark"] .table tbody tr:hover, [data-theme="dark"] .data-table tbody tr:hover, [data-theme="dark"] .table-wrap table tbody tr:hover { background: #1E293B !important; } [data-theme="dark"] td, [data-theme="dark"] .table td, [data-theme="dark"] .data-table td, [data-theme="dark"] .table-wrap table tbody td { border-color: #1E293B !important; color: #E2E8F0 !important; } /* ── Modals & Drawers ───────────────────────────────────── */ [data-theme="dark"] .modal-box { background: #151D2A !important; border-color: #243044 !important; color: #F8FAFC !important; } [data-theme="dark"] .modal-title { color: #F8FAFC !important; } /* ── Accessible Color Overrides for Inline Styles ───────── */ [data-theme="dark"] [style*="color:var(--color-primary, #0B3D26)"], [data-theme="dark"] [style*="color:var(--color-primary)"], [data-theme="dark"] [style*="color:var(--brand-green)"] { color: #34D399 !important; } [data-theme="dark"] [style*="color:var(--brand-gold-strong)"] { color: #FBBF24 !important; } [data-theme="dark"] [style*="color:var(--brand-gold)"] { color: #F59E0B !important; } [data-theme="dark"] [style*="color:var(--ink)"] { color: #F8FAFC !important; } [data-theme="dark"] [style*="color:var(--slate)"] { color: #F1F5F9 !important; } [data-theme="dark"] [style*="color:var(--slate-soft)"] { color: #CBD5E1 !important; } [data-theme="dark"] [style*="color:var(--slate-muted)"] { color: #94A3B8 !important; } [data-theme="dark"] [style*="background:var(--paper)"], [data-theme="dark"] [style*="background: var(--paper)"] { background: #0B0F17 !important; } [data-theme="dark"] [style*="background:var(--paper-line)"], [data-theme="dark"] [style*="background: var(--paper-line)"] { background: #1B2433 !important; } [data-theme="dark"] [style*="border-color:var(--paper-line)"], [data-theme="dark"] [style*="border-bottom:1px solid var(--paper-line)"], [data-theme="dark"] [style*="border-top:1px solid var(--paper-line)"] { border-color: #243044 !important; } /* ── Keyframe Animations ────────────────────────────────── */ @keyframes slideUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } } /* ── Global Reset ────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; font-size: 15px; } body { font-family: 'Inter', system-ui, sans-serif; background: var(--paper); color: var(--slate); min-height: 100vh; line-height: 1.5; overflow-x: hidden; } p { line-height: 1.55; margin-bottom: 0.75rem; overflow-wrap: break-word; word-break: break-word; } p:last-child { margin-bottom: 0; } h1, h2, h3, h4, h5, h6 { line-height: 1.35; overflow-wrap: break-word; word-break: break-word; } a { color: var(--verify-strong); text-decoration: none; } a:hover { color: var(--brand-gold-strong); } img { max-width: 100%; } /* ── Sleek Custom Scrollbars ────────────────────────────── */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--paper, #F4F6F5); } ::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #94A3B8; } /* Focus visibility */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--verify); outline-offset: 2px; } /* ── App Shell & Responsive Container System ────────────── */ .app-container { display: block; min-height: 100vh; background: var(--paper); width: 100%; max-width: 100vw; overflow-x: hidden; position: relative; } .main-content { margin-left: var(--sidebar-w); min-height: 100vh; min-width: 0; width: calc(100% - var(--sidebar-w)); max-width: calc(100vw - var(--sidebar-w)); display: flex; flex-direction: column; background: var(--paper); position: relative; box-sizing: border-box; background-image: radial-gradient(ellipse 70% 40% at 20% 0%, rgba(31, 122, 77, 0.02) 0%, transparent 60%), radial-gradient(ellipse 60% 30% at 90% 100%, rgba(175, 143, 35, 0.03) 0%, transparent 60%); } .app-footer { margin-left: calc(var(--sidebar-w) + 26px); margin-right: 26px; max-width: calc(1560px); margin-bottom: 26px; margin-top: 40px; padding: 16px 24px; background: var(--paper-raised); border: 1px solid var(--paper-line); border-radius: var(--radius); box-shadow: 0 2px 10px rgba(11, 61, 38, 0.04); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; box-sizing: border-box; } .footer-brand { display: flex; align-items: center; gap: 12px; } .footer-logo { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.12)); } .footer-title { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 0.88rem; color: var(--brand-green); line-height: 1.2; } .footer-subtitle { font-size: 0.72rem; color: var(--slate-muted); margin-top: 2px; } .footer-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .footer-badge { display: inline-flex; align-items: center; gap: 6px; background: #E8F3ED; color: var(--brand-green); font-weight: 700; font-size: 0.74rem; padding: 4px 10px; border-radius: 20px; border: 1px solid rgba(11,61,38,0.12); } .footer-copy { font-size: 0.75rem; color: var(--slate-soft); font-weight: 600; } .status-dot { width: 7px; height: 7px; border-radius: 50%; background: #2F9E5B; box-shadow: 0 0 0 2px rgba(47, 158, 91, 0.25); display: inline-block; animation: pulseGreen 2s infinite ease-in-out; } @keyframes pulseGreen { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.25); opacity: 0.75; } } .page-body { flex: 1; padding: 20px 26px; width: 100%; max-width: 1560px; margin: 0 auto; box-sizing: border-box; min-width: 0; } /* Standard Box & Container Helpers */ .container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 16px; box-sizing: border-box; min-width: 0; } .container-sm { width: 100%; max-width: 860px; margin: 0 auto; padding: 0 16px; box-sizing: border-box; min-width: 0; } .container-fluid { width: 100%; padding: 0 16px; box-sizing: border-box; min-width: 0; } /* ── Sidebar (Institutional BPC Deep Green) ─────────────── */ .sidebar { position: fixed; top: 0; left: 0; width: var(--sidebar-w); height: 100vh; height: 100dvh; max-height: 100dvh; background: var(--ink); color: var(--ink-text); border-right: 1px solid var(--ink-line); display: flex; flex-direction: column; z-index: 100; overflow: hidden; box-shadow: 2px 0 10px rgba(15, 23, 42, 0.08); } /* Sidebar Brand */ .brand { display: flex; align-items: center; gap: 10px; padding: 14px 14px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); position: relative; flex-shrink: 0; } .brand-icon { width: 36px; height: 36px; background: #FFFFFF; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); } .brand-title { font-family: 'Outfit', sans-serif; font-size: 1.05rem; font-weight: 800; color: #FFFFFF; letter-spacing: 0.3px; line-height: 1.1; } .brand-sub { font-size: 0.60rem; color: var(--color-primary-muted, #94A3B8); letter-spacing: 0.6px; text-transform: uppercase; margin-top: 2px; font-weight: 600; } /* Nav Section — scrollable container so user-profile stays anchored */ .nav-section { flex: 1 1 auto; min-height: 0; padding: 10px 8px; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } .nav-group { padding: 0 0 8px; margin: 0 0 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); } .nav-group-label { list-style: none; cursor: pointer; user-select: none; } .nav-group-label::-webkit-details-marker { display: none; } .nav-group-label:focus-visible { outline: 2px solid var(--brand-gold, #AF8F23); outline-offset: 2px; border-radius: var(--radius-sm); } .nav-group-chevron { margin-left: auto; font-size: 0.58rem !important; transition: transform 0.15s ease; } .nav-group[open] .nav-group-chevron { transform: rotate(180deg); } .nav-group-description { margin: 0 10px 6px 31px; color: #9AA99F; font-size: 0.67rem; line-height: 1.45; } .nav-group:last-child { border-bottom: 0; margin-bottom: 0; } .nav-group-label { display: flex; align-items: center; gap: 7px; padding: 8px 10px 5px; color: #829388; font-size: 0.61rem; font-weight: 700; letter-spacing: 0.09em; line-height: 1.3; text-transform: uppercase; } .nav-group-label i { width: 14px; color: var(--brand-gold, #AF8F23); font-size: 0.67rem; text-align: center; } .nav-label { font-size: 0.62rem; font-weight: 700; color: #64748B; text-transform: uppercase; letter-spacing: 1.1px; padding: 10px 8px 4px; } .nav-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--radius-sm); color: #CBD5E1; font-size: 0.83rem; font-weight: 500; transition: all var(--dur) var(--ease); margin-bottom: 2px; cursor: pointer; position: relative; } .nav-item:hover { background: var(--color-primary-light, #124A30); color: #FFFFFF; padding-left: 12px; } .nav-item.active { background: var(--color-primary-light, #124A30); color: #FFFFFF; font-weight: 700; } .nav-item.active::before { content: ''; position: absolute; left: 0; top: 15%; bottom: 15%; width: 3.5px; background: var(--brand-gold, #AF8F23); border-radius: 0 3px 3px 0; } .nav-icon { font-size: 0.9rem; width: 18px; text-align: center; flex-shrink: 0; opacity: 0.9; } .nav-item.active .nav-icon { opacity: 1; color: var(--brand-gold, #AF8F23); } .nav-item:hover .nav-icon { opacity: 1; color: #FFFFFF; } /* User profile at sidebar bottom (Anchored & always fully visible) */ .user-profile { flex-shrink: 0; padding: 12px 14px; border-top: 1px solid var(--color-primary-border, #1D5C3E); margin-top: auto; background: #072818; position: relative; z-index: 10; } .user-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-gold, #AF8F23), #16A34A); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; color: #FFFFFF; flex-shrink: 0; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); } .user-info { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .user-name { font-size: 0.80rem; font-weight: 600; color: #FFFFFF; } .user-role { font-size: 0.62rem; color: #F3DC87; text-transform: uppercase; font-weight: 700; letter-spacing: 0.6px; } /* ── Topbar (Clean White with Subtle Slate Borders) ───────── */ .topbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; min-height: var(--topbar-h); height: auto; background: var(--color-surface, #FFFFFF); border-bottom: 1px solid var(--color-border, #E2E8F0); position: sticky; top: 0; z-index: 50; box-shadow: var(--shadow-xs); gap: 12px; flex-wrap: wrap; box-sizing: border-box; } .page-title { font-family: 'Outfit', sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--slate); line-height: 1.25; } .topbar-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .clock-display { font-size: 0.75rem; color: var(--verify-strong); font-weight: 600; background: var(--verify-tint); padding: 4px 10px; border-radius: 16px; border: 1px solid rgba(31, 122, 77, 0.2); } /* ── Cards (Pure White with Crisp Institutional Border) ─── */ .card { background: var(--paper-raised); border: 1px solid var(--paper-line); border-radius: var(--radius); padding: 18px 20px; box-shadow: 0 2px 10px rgba(11, 61, 38, 0.035); transition: border-color 0.2s ease, box-shadow 0.2s ease; position: relative; min-width: 0; box-sizing: border-box; margin-bottom: 16px; overflow-wrap: break-word; word-break: break-word; } .card p, .card-body p { line-height: 1.55; margin-bottom: 0.75rem; overflow-wrap: break-word; word-break: break-word; } .card p:last-child, .card-body p:last-child { margin-bottom: 0; } .card.card-clickable:hover, .card-interactive:hover, a.card:hover { border-color: rgba(11, 61, 38, 0.18); box-shadow: 0 8px 24px rgba(11, 61, 38, 0.07); } .card-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; min-width: 0; } .card-header > * { min-width: 0; } .card-title { font-family: 'Outfit', sans-serif; font-size: 0.92rem; font-weight: 700; color: var(--slate); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; line-height: 1.35; overflow-wrap: break-word; word-break: break-word; } /* Page header — used at top of page-body for title + actions row */ .page-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; } .page-header-title { font-family: 'Outfit', sans-serif; font-size: 1.1rem; font-weight: 800; color: var(--slate); } .page-header-sub { font-size: 0.76rem; color: var(--slate-muted); margin-top: 2px; } /* Tint highlight boxes */ .tint-gold { background: var(--brand-gold-tint); border: 1px solid rgba(175,143,35,0.25); border-radius: var(--radius-sm); padding: 14px 16px; } .tint-green { background: var(--verify-tint); border: 1px solid rgba(31,122,77,0.22); border-radius: var(--radius-sm); padding: 14px 16px; } .tint-red { background: var(--signal-red-tint); border: 1px solid rgba(196,69,60,0.22); border-radius: var(--radius-sm); padding: 14px 16px; } .tint-blue { background: var(--signal-blue-tint); border: 1px solid rgba(29,99,184,0.22); border-radius: var(--radius-sm); padding: 14px 16px; } .tint-amber { background: var(--signal-amber-tint); border: 1px solid rgba(199,127,26,0.22); border-radius: var(--radius-sm); padding: 14px 16px; } .tint-purple { background: var(--signal-purple-tint); border: 1px solid rgba(109,59,168,0.22); border-radius: var(--radius-sm); padding: 14px 16px; } /* Mini live stat (used in faculty dashboard today summary) */ .mini-stat { background: var(--paper); border: 1px solid var(--paper-line); border-radius: var(--radius-sm); padding: 10px 8px; text-align: center; min-width: 0; } .mini-stat-value { font-family: 'Outfit', sans-serif; font-size: 1.6rem; font-weight: 800; line-height: 1.25; margin-bottom: 2px; overflow-wrap: break-word; word-break: break-word; } .mini-stat-label { font-size: 0.64rem; color: var(--slate-muted); margin-top: 4px; font-weight: 600; line-height: 1.35; overflow-wrap: break-word; word-break: break-word; } /* Divider with label */ .section-divider { border: 0; border-top: 1px solid var(--paper-line); margin: 18px 0; } /* ── Stat Cards ─────────────────────────────────────────── */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 18px; } .stat-card { background: var(--color-surface, #FFFFFF); border: 1px solid var(--color-border, #E2E8F0); border-radius: var(--radius); padding: 14px 16px; position: relative; overflow: hidden; min-width: 0; box-shadow: var(--shadow-xs); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); } .stat-card.card-clickable:hover, .stat-card[onclick]:hover, a.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: var(--color-border-hover, #CBD5E1); } /* Coloured left indicator */ .stat-card::before { content: ''; position: absolute; top: 0; left: 0; width: 3.5px; height: 100%; } .stat-card.gold::before { background: var(--brand-gold, #AF8F23); } .stat-card.green::before { background: var(--color-success, #16A34A); } .stat-card.blue::before { background: var(--color-accent, #2563EB); } .stat-card.rose::before { background: var(--color-danger, #DC2626); } .stat-card.violet::before { background: var(--color-purple, #7C3AED); } .stat-card.cyan::before { background: var(--color-cyan, #0284C7); } .stat-number { font-family: 'Outfit', sans-serif; font-size: 1.65rem; font-weight: 800; color: var(--color-text, #0F172A); line-height: 1.25; margin-bottom: 4px; letter-spacing: -0.3px; overflow-wrap: break-word; word-break: break-word; } .stat-label { font-size: 0.74rem; color: var(--color-text-secondary, #475569); font-weight: 600; line-height: 1.35; overflow-wrap: break-word; word-break: break-word; } .stat-icon { font-size: 1.5rem; position: absolute; top: 12px; right: 14px; opacity: 0.12; color: var(--color-text); } /* ── Buttons (Academic Navy & Modern Accent Hierarchy) ───── */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--radius-sm); font-size: 0.82rem; font-weight: 600; border: 1px solid transparent; cursor: pointer; transition: all var(--dur) var(--ease); text-decoration: none; white-space: nowrap; line-height: 1.35; } .btn:active { transform: scale(0.98); } /* Primary Button: Deep BPC Institutional Green */ .btn-primary { background: var(--color-primary, #0B3D26); border-color: var(--color-primary, #0B3D26); color: #FFFFFF; font-weight: 600; box-shadow: var(--shadow-xs); } .btn-primary:hover { background: var(--color-primary-light, #124A30); border-color: var(--color-primary-light, #124A30); color: #FFFFFF; transform: translateY(-1px); box-shadow: var(--shadow-sm); } /* Brand Accent / Action Button: Subtle Gold Accent (Non-overused) */ .btn-accent, .btn-cta { background: var(--brand-gold-tint, #FBF3D9); border: 1px solid var(--brand-gold, #AF8F23); color: var(--brand-gold-strong, #755C10); font-weight: 600; box-shadow: var(--shadow-xs); } .btn-accent:hover, .btn-cta:hover { background: var(--brand-gold, #AF8F23); border-color: var(--brand-gold-strong, #755C10); color: #0F172A; /* 5.76:1 contrast (WCAG AA) */ transform: translateY(-1px); } /* Institutional Gold Filled Button: Dark Gold with White Text */ .btn-gold { background: #8F7218; border-color: #755C10; color: #FFFFFF; /* 4.58:1 contrast (WCAG AA) */ font-weight: 600; box-shadow: var(--shadow-xs); } .btn-gold:hover { background: #755C10; border-color: #5C490E; color: #FFFFFF; /* 6.37:1 contrast (WCAG AA) */ transform: translateY(-1px); } /* Secondary Button: Paper Raised with Slate Border */ .btn-secondary { background: var(--color-surface, #FFFFFF); border-color: var(--color-border, #E2E8F0); color: var(--color-text, #0F172A); box-shadow: var(--shadow-xs); } .btn-secondary:hover { background: var(--color-surface-subtle, #F1F5F9); border-color: var(--color-border-hover, #CBD5E1); color: var(--color-primary, #0F1E36); transform: translateY(-1px); } /* Success Button: Modern Emerald */ .btn-success { background: var(--color-success, #16A34A); border-color: var(--color-success, #16A34A); color: #FFFFFF; box-shadow: var(--shadow-green); } .btn-success:hover { background: #15803D; border-color: #15803D; color: #FFFFFF; transform: translateY(-1px); } /* Danger Button: Modern Rose */ .btn-danger { background: var(--color-danger-tint, #FEE2E2); border-color: rgba(220, 38, 38, 0.25); color: var(--color-danger, #DC2626); } .btn-danger:hover { background: var(--color-danger, #DC2626); border-color: var(--color-danger, #DC2626); color: #FFFFFF; transform: translateY(-1px); } /* Warning Button */ .btn-warning { background: var(--color-warning-tint, #FEF3C7); border-color: rgba(217, 119, 6, 0.25); color: var(--color-warning, #D97706); } .btn-warning:hover { background: var(--color-warning, #D97706); border-color: var(--color-warning, #D97706); color: #FFFFFF; } .btn-ghost { background: transparent; border-color: var(--color-border, #E2E8F0); color: var(--color-text-secondary, #475569); } .btn-ghost:hover { border-color: var(--color-accent, #2563EB); color: var(--color-accent, #2563EB); } .btn-sm { padding: 5px 10px; font-size: 0.75rem; border-radius: var(--radius-xs); } .btn-lg { padding: 10px 20px; font-size: 0.9rem; } .btn-full { width: 100%; justify-content: center; } .btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none !important; } /* Outline Button: Bordered, transparent background */ .btn-outline { background: transparent; border-color: var(--color-border, #E2E8F0); color: var(--color-text-secondary, #475569); } .btn-outline:hover { background: var(--color-surface-subtle, #F1F5F9); border-color: var(--color-accent, #2563EB); color: var(--color-accent, #2563EB); } /* Info Button: Signal Blue */ .btn-info { background: var(--color-info-tint, #DBEAFE); border-color: rgba(37, 99, 235, 0.25); color: var(--color-info, #2563EB); } .btn-info:hover { background: var(--color-info, #2563EB); color: #FFFFFF; transform: translateY(-1px); } /* Link-style Button */ .btn-link { background: transparent; border-color: transparent; color: var(--color-accent, #2563EB); padding-left: 0; padding-right: 0; } .btn-link:hover { color: var(--color-accent-hover, #1D4ED8); text-decoration: underline; } /* ── Forms & Inputs ─────────────────────────────────────── */ .form-group { margin-bottom: 14px; } .form-label { display: block; font-size: 0.72rem; font-weight: 700; color: var(--color-text, #0F172A); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.4px; } .form-control { width: 100%; padding: 8px 12px; background: var(--color-surface, #FFFFFF); border: 1px solid var(--color-border, #E2E8F0); border-radius: var(--radius-sm); color: var(--color-text, #0F172A); font-size: 0.86rem; transition: border-color var(--dur), box-shadow var(--dur); } .form-control:focus { outline: none; border-color: var(--color-accent, #2563EB); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); } .form-control::placeholder { color: var(--color-text-muted, #64748B); } select.form-control { cursor: pointer; background-color: var(--color-surface, #FFFFFF); } .form-hint { font-size: 0.7rem; color: var(--color-text-muted, #64748B); margin-top: 3px; } /* ── Drag-and-Drop File Dropzone ─────────────────────────── */ .file-dropzone { border: 2px dashed var(--color-border, #E2E8F0); border-radius: var(--radius); padding: 24px 16px; text-align: center; cursor: pointer; transition: border-color 0.2s, background 0.2s; background: var(--paper, #F4F6F5); position: relative; } .file-dropzone:hover, .file-dropzone.drag-over { border-color: var(--brand-green, #1F7A4D); background: rgba(31, 122, 77, 0.04); } .file-dropzone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; } .file-dropzone-icon { font-size: 2rem; color: var(--brand-green, #1F7A4D); margin-bottom: 8px; } .file-dropzone-label { font-size: 0.82rem; font-weight: 600; color: var(--slate, #334155); } .file-dropzone-hint { font-size: 0.72rem; color: var(--slate-muted, #64748B); margin-top: 4px; } /* ── Password Strength Meter ─────────────────────────────── */ .password-strength-wrap { margin-top: 6px; } .password-strength-bar { height: 4px; border-radius: 2px; background: #E2E8F0; overflow: hidden; margin-bottom: 4px; } .password-strength-fill { height: 100%; border-radius: 2px; width: 0%; transition: width 0.3s ease, background 0.3s ease; } .password-strength-label { font-size: 0.7rem; font-weight: 700; } /* ── Password Reveal Toggle ──────────────────────────────── */ .input-with-reveal { position: relative; } .input-with-reveal input { padding-right: 40px; } .input-reveal-btn { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--slate-muted, #64748B); cursor: pointer; font-size: 0.9rem; padding: 4px; line-height: 1; transition: color 0.15s; } .input-reveal-btn:hover { color: var(--brand-green, #1F7A4D); } /* ── Modern Toggle Switch ────────────────────────────────── */ .toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #CBD5E1; transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 24px; } .toggle-slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.25); } .toggle-switch input:checked + .toggle-slider { background-color: var(--brand-green, #1F7A4D); } .toggle-switch.toggle-danger input:checked + .toggle-slider { background-color: #EF4444; } .toggle-switch input:checked + .toggle-slider:before { transform: translateX(20px); } /* ── Tables (Crisp High-Contrast Grid) ───────────────────── */ .table-wrap, .table-wrapper, .table-responsive, .reg-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-sm); border: 1px solid var(--color-border, #E2E8F0); background: var(--color-surface, #FFFFFF); width: 100%; } table, .table { width: 100%; border-collapse: collapse; font-size: 0.82rem; } thead th, .table th { background: #F8FAFC; padding: 10px 14px; text-align: left; font-size: 0.70rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--color-text-secondary, #334155); border-bottom: 1px solid var(--color-border, #E2E8F0); white-space: nowrap; position: sticky; top: 0; z-index: 2; } tbody tr, .table tbody tr { border-bottom: 1px solid var(--color-border, #E2E8F0); transition: background var(--dur); } tbody tr:last-child, .table tbody tr:last-child { border-bottom: none; } tbody tr:hover, .table tbody tr:hover { background: #F8FAFC; } tbody td, .table td { padding: 10px 14px; color: var(--color-text, #0F172A); vertical-align: middle; } /* data-table: alias that also inherits table-wrap scroll + clean borders */ .data-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; } .data-table th { background: #F8FAFC; padding: 10px 14px; text-align: left; font-size: 0.70rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--color-text-secondary, #334155); border-bottom: 1px solid var(--color-border, #E2E8F0); white-space: nowrap; position: sticky; top: 0; z-index: 2; } .data-table td { padding: 10px 14px; color: var(--color-text, #0F172A); vertical-align: middle; border-bottom: 1px solid var(--color-border, #E2E8F0); } .data-table tbody tr:last-child td { border-bottom: none; } .data-table tbody tr:hover { background: #F8FAFC; } /* ── Badges ─────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px; border-radius: 16px; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; white-space: nowrap; } .badge-present { background: var(--color-success-tint); color: var(--color-success); border: 1px solid rgba(22,163,74,0.25); } .badge-absent { background: var(--color-danger-tint); color: var(--color-danger); border: 1px solid rgba(220,38,38,0.25); } .badge-late { background: var(--color-warning-tint); color: var(--color-warning); border: 1px solid rgba(217,119,6,0.25); } .badge-timeout { background: var(--color-cyan-tint); color: var(--color-cyan); border: 1px solid rgba(2,132,199,0.25); } .badge-active { background: var(--color-success-tint); color: var(--color-success); border: 1px solid rgba(22,163,74,0.25); } .badge-pending { background: var(--brand-gold-tint); color: var(--brand-gold-strong); border: 1px solid rgba(175,143,35,0.25); } .badge-inactive { background: var(--color-surface-subtle); color: var(--color-text-muted); border: 1px solid var(--color-border); } .badge-info { background: var(--color-info-tint); color: var(--color-info); border: 1px solid rgba(37,99,235,0.25); } /* Role Badges */ .badge-admin { background: var(--color-danger-tint); color: var(--color-danger); border: 1px solid rgba(220,38,38,0.2); } .badge-faculty { background: var(--color-info-tint); color: var(--color-info); border: 1px solid rgba(37,99,235,0.2); } .badge-student { background: var(--color-success-tint); color: var(--color-success); border: 1px solid rgba(22,163,74,0.2); } .badge-program_head { background: var(--brand-gold-tint); color: var(--brand-gold-strong); border: 1px solid rgba(175,143,35,0.2); } .badge-registrar { background: var(--color-cyan-tint); color: var(--color-cyan); border: 1px solid rgba(2,132,199,0.2); } .badge-security { background: var(--color-purple-tint); color: var(--color-purple); border: 1px solid rgba(124,58,237,0.2); } /* ── Alerts ─────────────────────────────────────────────── */ .alert { padding: 10px 16px; border-radius: var(--radius-sm); font-size: 0.82rem; font-weight: 500; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; border: 1px solid transparent; } .alert-success { background: var(--signal-green-tint); border-color: rgba(47,158,91,0.3); color: var(--signal-green); } .alert-danger { background: var(--signal-red-tint); border-color: rgba(196,69,60,0.3); color: var(--signal-red); } .alert-warning { background: var(--signal-amber-tint); border-color: rgba(199,127,26,0.3); color: var(--signal-amber); } .alert-info { background: var(--signal-blue-tint); border-color: rgba(29,99,184,0.3); color: var(--signal-blue); } /* ── Modals ─────────────────────────────────────────────── */ .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(11, 35, 20, 0.65); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 200; align-items: center; justify-content: center; padding: 16px; opacity: 0; transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1); } .modal-overlay.active { display: flex; opacity: 1; } .modal-box { background: var(--paper-raised); border: 1px solid var(--paper-line); border-radius: var(--radius); padding: 22px 24px; width: 100%; max-width: min(520px, 95vw); box-sizing: border-box; box-shadow: var(--shadow-lg); position: relative; max-height: 90vh; overflow-y: auto; transform: scale(0.95) translateY(8px); transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1); } .modal-overlay.active .modal-box { transform: scale(1) translateY(0); } .modal-title { font-family: 'Outfit', sans-serif; font-size: 1.05rem; font-weight: 700; margin-bottom: 16px; display: flex; align-items: center; gap: 7px; color: var(--ink); } /* ── Utility Grid & Responsive Container Blocks ─────────── */ .dossier-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; } @media (max-width: 600px) { .dossier-grid { grid-template-columns: 1fr !important; gap: 8px !important; } } .grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; min-width: 0; } .grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; min-width: 0; } .grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; min-width: 0; } .section-gap { margin-top: 18px; } /* ── Flex Utilities ─────────────────────────────────────── */ .flex { display: flex; } .flex-col { display: flex; flex-direction: column; } .flex-center { display: flex; align-items: center; justify-content: center; } .flex-between { display: flex; align-items: center; justify-content: space-between; } .flex-wrap { flex-wrap: wrap; } .flex-1 { flex: 1; } .items-center { align-items: center; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } /* ── Text Utilities ─────────────────────────────────────── */ .text-muted { color: var(--slate-muted); } .text-primary { color: var(--verify-strong); } .text-success { color: var(--signal-green); } .text-danger { color: var(--signal-red); } .text-warning { color: var(--signal-amber); } .text-info { color: var(--signal-blue); } .text-gold { color: var(--brand-gold); } .text-sm { font-size: 0.78rem; } .text-xs { font-size: 0.68rem; } .text-lg { font-size: 1.05rem; } .fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; } .fw-800 { font-weight: 800; } .text-center { text-align: center; } .text-right { text-align: right; } .text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── Spacing Utilities ──────────────────────────────────── */ .mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; } .mb-5 { margin-bottom: 20px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .p-0 { padding: 0; } .w-full { width: 100%; } /* ── Empty State ────────────────────────────────────────── */ .empty-state { text-align: center; padding: 36px 20px; color: var(--slate-muted); } .empty-state-icon { font-size: 2.4rem; margin-bottom: 10px; opacity: 0.55; } .empty-state-text { font-size: 0.86rem; font-weight: 500; } /* ── Progress Bar ───────────────────────────────────────── */ .progress { background: var(--paper-line); border-radius: 12px; height: 7px; overflow: hidden; width: 100%; } .progress-bar { height: 100%; border-radius: 12px; background: var(--verify); transition: width 0.5s var(--ease); } .progress-bar.gold { background: var(--brand-gold); } .progress-bar.red { background: var(--signal-red); } .progress-bar.amber { background: var(--signal-amber); } /* ── Pill / Tag ─────────────────────────────────────────── */ .pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 20px; font-size: 0.7rem; font-weight: 600; background: var(--paper); border: 1px solid var(--paper-line); color: var(--slate-soft); } /* ── Divider ────────────────────────────────────────────── */ .divider { border: 0; border-top: 1px solid var(--paper-line); margin: 14px 0; } /* ── Hidden / Visibility Utility ───────────────────────── */ .hidden { display: none !important; } .invisible { visibility: hidden; } .no-print { /* handled in @media print block */ } /* ── Loading Spinner ────────────────────────────────────── */ .spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid var(--paper-line); border-top-color: var(--verify); border-radius: 50%; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ══════════════════════════════════════════════════════ MISSING COMPONENT STYLES — All pages ══════════════════════════════════════════════════════ */ /* form-input: alias for form-control */ .form-input { width: 100%; padding: 8px 12px; background: var(--paper-raised); border: 1px solid var(--paper-line); border-radius: var(--radius-sm); color: var(--slate); font-size: 0.86rem; font-family: inherit; transition: border-color var(--dur), box-shadow var(--dur); } .form-input:focus { outline: none; border-color: var(--verify); box-shadow: 0 0 0 3px var(--verify-tint); } .form-input::placeholder { color: var(--slate-muted); } /* topbar-left: left side of topbar */ .topbar-left { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; } /* page-subtitle */ .page-subtitle { font-size: 0.76rem; color: var(--slate-muted); margin-top: 3px; } /* ── Tabs ───────────────────────────────────────────── */ .tab-btn { padding: 7px 16px; border-radius: var(--radius-sm); font-size: 0.82rem; font-weight: 600; border: 1px solid var(--paper-line); background: var(--paper-raised); color: var(--slate-soft); cursor: pointer; transition: all var(--dur) var(--ease); } .tab-btn.btn-primary, .tab-btn:hover { background: var(--brand-gold); color: #FFF; border-color: var(--brand-gold-strong); } .tab-content { margin-top: 16px; } .tab-pane { animation: fadeIn 0.15s ease; } /* ── Modal Components ───────────────────────────────── */ .modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--paper-line); } .modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--paper-line); } .modal-card { background: var(--paper-raised); border-radius: var(--radius); border: 1px solid var(--paper-line); box-shadow: var(--shadow-lg); padding: 22px 24px; position: relative; overflow: hidden; } .modal-close { background: none; border: none; font-size: 1.2rem; cursor: pointer; color: var(--slate-muted); line-height: 1; padding: 2px 6px; border-radius: 4px; transition: color var(--dur); } .modal-close:hover { color: var(--signal-red); } /* ── Status Tags ────────────────────────────────────── */ .status-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 12px; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; } .status-off { opacity: 0.5; } /* ── Hover Action ───────────────────────────────────── */ .hover-action { opacity: 0; transition: opacity var(--dur); } tr:hover .hover-action, .card:hover .hover-action { opacity: 1; } /* ── Info Tile ──────────────────────────────────────── */ .info-tile { background: var(--paper-raised); border: 1px solid var(--paper-line); border-radius: var(--radius-sm); padding: 12px 14px; display: flex; align-items: center; gap: 10px; } .icon-wrap { width: 38px; height: 38px; border-radius: 8px; background: var(--verify-tint); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; } /* ── Summary Box ────────────────────────────────────── */ .summary-box { background: var(--paper-raised); border: 1px solid var(--paper-line); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 16px; } /* ── Stat Mini Card ─────────────────────────────────── */ .stat-mini-card { background: var(--paper-raised); border: 1px solid var(--paper-line); border-radius: var(--radius-sm); padding: 10px 14px; display: flex; flex-direction: column; gap: 4px; } /* ── Meta Grid ──────────────────────────────────────── */ .meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .meta-item { font-size: 0.78rem; color: var(--slate-soft); } .meta-item strong { display: block; color: var(--slate); font-weight: 600; font-size: 0.82rem; } /* ── Tile Header ────────────────────────────────────── */ .tile-header { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 0.88rem; color: var(--slate); display: flex; align-items: center; gap: 6px; margin-bottom: 10px; } /* ── QR Box ─────────────────────────────────────────── */ .qr-box { background: #FFFFFF; padding: 12px; border-radius: var(--radius-sm); border: 1px solid var(--paper-line); display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); } /* ── Legacy ID Card Styles (Scoped) ─────────────────── */ .legacy-id-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; padding: 10px; } .legacy-id-card { width: 260px; background: var(--paper-raised); border-radius: 10px; border: 1px solid var(--paper-line); overflow: hidden; box-shadow: var(--shadow); page-break-inside: avoid; } .id-header { background: var(--ink); color: var(--ink-text); padding: 10px 12px; display: flex; align-items: center; gap: 8px; } .id-logo { width: 32px; height: 32px; object-fit: contain; } .id-inst { flex: 1; } .id-inst-title { font-family: 'Outfit',sans-serif; font-weight: 800; font-size: 0.72rem; color: var(--brand-gold-tint); } .id-inst-sub { font-size: 0.56rem; color: var(--ink-text-muted); text-transform: uppercase; letter-spacing: 0.6px; } .id-body { padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; } .id-photo-box { width: 72px; height: 72px; border-radius: 8px; overflow: hidden; border: 2px solid var(--brand-gold); background: var(--paper); display: flex; align-items: center; justify-content: center; } .id-info { width: 100%; text-align: center; } .id-name { font-family: 'Outfit',sans-serif; font-weight: 800; font-size: 0.88rem; color: var(--slate); } .id-prog { font-size: 0.66rem; color: var(--slate-soft); margin-top: 1px; } .id-no { font-size: 0.68rem; font-weight: 700; color: var(--verify-strong); margin-top: 3px; } .id-qr { margin: 4px 0; } .id-campus { font-size: 0.56rem; color: var(--slate-muted); text-align: center; } .id-footer { background: var(--brand-gold); color: #FFFFFF; text-align: center; padding: 5px 8px; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.5px; } /* ── Kiosk / Gate TV ────────────────────────────────── */ .kiosk-header { background: var(--ink); color: var(--ink-text); padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; } .kiosk-body { padding: 20px; } .kiosk-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 20px; } /* ── Gate Ticker ────────────────────────────────────── */ .gate-ticker { width: 100%; overflow: hidden; } .ticker-list { display: flex; flex-direction: column; gap: 4px; } .ticker-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--paper-raised); border: 1px solid var(--paper-line); transition: background var(--dur); } .ticker-row:hover { background: var(--paper); } .ticker-icon { font-size: 1.2rem; flex-shrink: 0; } .ticker-name { font-weight: 600; font-size: 0.84rem; color: var(--slate); flex: 1; } .ticker-meta { font-size: 0.7rem; color: var(--slate-muted); } .ticker-badge { flex-shrink: 0; } /* ── Live Indicators ────────────────────────────────── */ .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--signal-green); display: inline-block; animation: pulse 2s infinite; } .live-date { font-size: 0.7rem; color: var(--slate-muted); } /* ── Cam Icon (Scan Page) ───────────────────────────── */ .cam-icon { font-size: 3rem; color: var(--slate-muted); margin-bottom: 12px; opacity: 0.4; } .scan-section-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--slate-muted); margin-bottom: 8px; } /* ── Signature & Sig Grid (Print Attendance) ────────── */ .sig-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-top: 24px; } .sig-line { border-top: 1px solid var(--slate); padding-top: 6px; font-size: 0.72rem; color: var(--slate-soft); } .sig-title { font-weight: 700; font-size: 0.72rem; color: var(--slate); } /* ── Announce Bar / Scroller ────────────────────────── */ .announce-bar { background: var(--ink); color: var(--ink-text); padding: 8px 16px; display: flex; align-items: center; gap: 10px; overflow: hidden; } .announce-label { background: var(--brand-gold); color: #FFF; font-size: 0.65rem; font-weight: 800; padding: 2px 8px; border-radius: 4px; flex-shrink: 0; text-transform: uppercase; letter-spacing: 0.4px; } .announce-inner { flex: 1; overflow: hidden; } .announce-scroller { white-space: nowrap; animation: marquee 30s linear infinite; } .announce-item { display: inline-block; padding-right: 40px; font-size: 0.8rem; } @keyframes marquee { from { transform: translateX(100%); } to { transform: translateX(-100%); } } /* ── Broadcast Item ─────────────────────────────────── */ .broadcast-item { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--paper-line); } .broadcast-item:last-child { border-bottom: none; } /* ── Document Styles ────────────────────────────────── */ .doc-wrap { display: flex; flex-direction: column; gap: 12px; } .doc-title { font-weight: 700; font-size: 0.9rem; color: var(--slate); margin-bottom: 4px; } /* ── Calendar Event Styles ──────────────────────────── */ .event-row { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--paper-line); } .event-row:last-child { border-bottom: none; } .event-date-box { display: flex; flex-direction: column; align-items: center; min-width: 44px; } .event-day { font-family: 'Outfit',sans-serif; font-weight: 800; font-size: 1.4rem; line-height: 1; color: var(--slate); } .event-month { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; color: var(--slate-muted); } .event-title { font-weight: 600; font-size: 0.84rem; color: var(--slate); } .event-loc { font-size: 0.7rem; color: var(--slate-muted); margin-top: 2px; } /* ── Brand Logo Wrap (login/register) ───────────────── */ .brand-logo-wrap { display: flex; align-items: center; justify-content: center; margin-bottom: 14px; } .brand-logo { width: 60px; height: 60px; object-fit: contain; } .brand-area { display: flex; flex-direction: column; align-items: center; text-align: center; } .brand-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(175,143,35,0.2); border: 1px solid var(--brand-gold); color: var(--brand-gold-tint); font-size: 0.68rem; font-weight: 700; padding: 3px 10px; border-radius: 20px; text-transform: uppercase; letter-spacing: .06em; } /* ── Auth Wrap (login/register) ─────────────────────── */ .auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--paper); padding: 24px 16px; } .auth-box { width: 100%; max-width: 420px; background: var(--paper-raised); padding: 28px 24px; border-radius: var(--radius); border: 1px solid var(--paper-line); box-shadow: var(--shadow-lg); } /* ── Result Box (scanner feedback) ─────────────────── */ .result-box { border-radius: var(--radius); padding: 18px 20px; border: 1px solid var(--paper-line); text-align: center; transition: all 0.3s var(--ease); } /* ── Clock Area / Live display ──────────────────────── */ .clock-area { display: flex; align-items: center; gap: 8px; } /* ── Print Styles ───────────────────────────────────── */ .print-header { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; } .print-logo { width: 56px; height: 56px; object-fit: contain; } .print-toolbar { margin-bottom: 16px; display: flex; gap: 8px; align-items: center; } .no-print-bar { /* shown only on screen */ } @media print { .no-print-bar, .print-toolbar { display: none !important; } } /* ── Inst Title / Sub (ID card header text) ─────────── */ .inst-title { font-family: 'Outfit',sans-serif; font-weight: 800; font-size: 0.82rem; } .inst-sub { font-size: 0.62rem; opacity: 0.75; } /* ── Orb Decorations ────────────────────────────────── */ .orb { position: absolute; border-radius: 50%; pointer-events: none; opacity: 0.08; } .orb-1 { width: 300px; height: 300px; background: var(--verify); top: -80px; right: -60px; } .orb-2 { width: 200px; height: 200px; background: var(--brand-gold); bottom: -60px; left: -40px; } /* ── Lbl (small label span used in kiosk) ───────────── */ .lbl { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--slate-muted); } /* ── Right Panel ────────────────────────────────────── */ .right-panel { display: flex; flex-direction: column; gap: 14px; } /* ── Sig-grid responsive fix ─────────────────────────── */ @media (max-width: 600px) { .sig-grid { grid-template-columns: 1fr; } .meta-grid { grid-template-columns: 1fr; } } /* ── Custom Scrollbars ──────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--paper); } ::-webkit-scrollbar-thumb { background: var(--paper-line); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--slate-muted); } .sidebar::-webkit-scrollbar-track { background: var(--ink); } .sidebar::-webkit-scrollbar-thumb { background: var(--ink-line); } .sidebar::-webkit-scrollbar-thumb:hover { background: var(--brand-gold); } /* ══════════════════════════════════════════════════════════════════════════ COMPREHENSIVE MOBILE & CELLPHONE INTERFACE SYSTEM (ZERO OVERLAP) ══════════════════════════════════════════════════════════════════════════ */ /* Global container & viewport guards */ html, body { max-width: 100vw; overflow-x: hidden; } /* Mobile App Bar & Navigation Desktop Defaults */ .mobile-app-bar { display: none !important; } #sidebar-toggle { display: none !important; } .sidebar-backdrop { display: none; } .sidebar-close-btn { display: none !important; } /* ── Tablet & Small Laptops (<= 1024px) ─────────────────── */ @media (max-width: 1024px) { .page-body { padding: 14px 16px; } .grid-2, .grid-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .stat-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); } } /* ── Tablet & Mobile Sidebar Drawer (<= 900px) ──────────── */ @media (max-width: 900px) { :root { --sidebar-w: 270px; } .sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: var(--sidebar-w); height: 100vh; height: 100dvh; max-height: 100dvh; transform: translateX(-100%); transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1050; box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35); display: flex; flex-direction: column; overflow: hidden; } .sidebar.open { transform: translateX(0); } .sidebar .user-profile { padding: 12px 14px; padding-bottom: max(22px, env(safe-area-inset-bottom, 22px)); background: #062315; flex-shrink: 0; } .app-container { display: block !important; width: 100% !important; max-width: 100vw !important; overflow-x: hidden !important; } .main-content { margin-left: 0 !important; width: 100% !important; max-width: 100vw !important; min-width: 0 !important; box-sizing: border-box !important; } .app-footer { margin-left: 12px !important; margin-right: 12px !important; width: calc(100% - 24px) !important; max-width: calc(100vw - 24px) !important; margin-top: 24px !important; margin-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; padding: 16px 18px !important; box-sizing: border-box !important; } /* Mobile App Bar — Sticky Header Housing Sidebar Toggle, Brand & Quick Actions (ZERO Page Header Overlap) */ .mobile-app-bar { display: flex !important; align-items: center; justify-content: space-between; position: sticky; top: 0; left: 0; right: 0; width: 100%; min-height: 52px; background: var(--paper-raised, #FFFFFF); border-bottom: 1px solid var(--paper-line, #E2E8F0); padding: 0 12px; box-sizing: border-box; z-index: 1030; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); } .mobile-app-bar-toggle, #sidebar-toggle { display: inline-flex !important; position: static !important; top: auto !important; left: auto !important; margin: 0 !important; width: 38px !important; height: 38px !important; align-items: center; justify-content: center; background: rgba(15, 76, 58, 0.08) !important; border: 1px solid rgba(15, 76, 58, 0.16) !important; border-radius: 8px !important; color: var(--brand-forest, #0F4C3A) !important; font-size: 1.05rem !important; cursor: pointer; box-shadow: none !important; flex-shrink: 0; transition: background 0.15s ease, transform 0.1s ease; } .mobile-app-bar-toggle:hover, #sidebar-toggle:hover { background: rgba(15, 76, 58, 0.14) !important; } .mobile-app-bar-toggle:active, #sidebar-toggle:active { transform: scale(0.92) !important; } .mobile-app-bar-brand { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; margin: 0 10px; overflow: hidden; } .mobile-app-bar-logo { width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; } .mobile-app-bar-title { font-size: 0.92rem; font-weight: 700; color: var(--text-dark, #0F172A); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.01em; } .mobile-app-bar-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .mobile-app-bar-action { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--paper-bg, #F8FAFC); border: 1px solid var(--paper-line, #E2E8F0); border-radius: 8px; color: var(--slate, #64748B); font-size: 0.95rem; cursor: pointer; transition: all 0.15s ease; } .mobile-app-bar-action:hover { background: var(--paper-line, #E2E8F0); color: var(--text-dark, #0F172A); } /* Sidebar Close Button & Mobile Backdrop */ .sidebar-backdrop { display: block; position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; height: 100dvh; background: rgba(15, 23, 42, 0.65); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: 1040; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; } .sidebar-backdrop.active { opacity: 1; visibility: visible; } .sidebar-close-btn { display: inline-flex !important; align-items: center; justify-content: center; width: 32px; height: 32px; margin-left: auto; background: rgba(255, 255, 255, 0.12); border: none; border-radius: 6px; color: #FFFFFF; font-size: 0.95rem; cursor: pointer; transition: background 0.15s ease; flex-shrink: 0; } .sidebar-close-btn:hover { background: rgba(255, 255, 255, 0.22); } .topbar { position: static; background: var(--paper-raised); padding: 10px 12px; border-bottom: 1px solid var(--paper-line); gap: 8px; width: 100% !important; max-width: 100vw !important; box-sizing: border-box !important; } .page-body { width: 100% !important; max-width: 100vw !important; padding: 14px 12px 100px !important; /* 100px bottom clearance so floating buttons never block content */ box-sizing: border-box !important; min-width: 0 !important; } /* Ensure page header on mobile has crisp spacing and never overlaps */ .page-header { margin-top: 2px !important; margin-bottom: 16px !important; padding-top: 0 !important; } } /* ── Smartphones & Cellphones (<= 768px) ────────────────── */ @media (max-width: 768px) { /* Prevent any element horizontal stretching */ *, *::before, *::after { box-sizing: border-box; } /* Topbar responsive wrap */ .topbar { padding: 8px 12px 8px 56px; flex-wrap: wrap; gap: 6px; } .page-title { font-size: 0.92rem; white-space: normal; word-break: break-word; line-height: 1.3; } .topbar-actions { width: 100%; justify-content: flex-start; gap: 6px; margin-top: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; } .topbar-actions .clock-display { font-size: 0.68rem; padding: 2px 7px; } .topbar-actions .btn { padding: 4px 8px; font-size: 0.72rem; white-space: nowrap; } /* Floating AI Assistant on Mobile (Smaller & positioned cleanly) */ #floatingAiWidget { bottom: 16px !important; right: 14px !important; } #globalAiToggleBtn { width: 44px !important; height: 44px !important; font-size: 1.15rem !important; } /* Cards and Surfaces */ .card { padding: 14px 12px; margin-bottom: 12px; border-radius: 8px; } .card-header { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 10px; } .card-title { font-size: 0.88rem; flex-wrap: wrap; } /* Single Column Stacking for Form & Layout Grids */ .grid-2, .grid-3, .grid-4, .form-grid { grid-template-columns: 1fr !important; gap: 10px !important; } /* Mobile Stat Grid: Clean 2-column layout */ .stat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; } .stat-tile, .card .stat-card { padding: 10px 8px; min-width: 0; } .stat-tile .num { font-size: 1.3rem !important; } .stat-tile .lbl { font-size: 0.6rem !important; white-space: normal !important; line-height: 1.2; } /* All Data Tables: Touch Scroll with Zero Clipping & Clean Wrapping */ .table-wrap, .table-wrapper, .table-responsive, .reg-table-wrap, table:not(.id-qr-box table) { display: block; width: 100% !important; max-width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; } table:not(.id-qr-box table) th, table:not(.id-qr-box table) td { padding: 8px 10px; font-size: 0.76rem; white-space: nowrap; } table:not(.id-qr-box table) td .badge, table:not(.id-qr-box table) td div { max-width: 240px; word-break: break-word; } /* Filters, Search Bars & Date Selectors */ form[method="GET"] > div, .filter-bar, .search-filter-row { flex-direction: column !important; align-items: stretch !important; width: 100% !important; gap: 8px !important; } .filter-bar > div, .search-filter-row > div { min-width: 100% !important; width: 100% !important; } /* Scanner HUD (scan.php) Mobile Stacking */ .kiosk-grid-container { grid-template-columns: 1fr !important; gap: 12px !important; width: 100% !important; } .kiosk-cam-viewport { height: 240px !important; min-height: 240px !important; width: 100% !important; } /* QR Pass Display Card (qr-pass.php) */ #qrcode canvas, #qrcode img { max-width: 100% !important; height: auto !important; } /* Modals & Dialogs (No clipping, phone-optimized padding) */ .modal-content, .dialog-box, .modal-box { width: 95% !important; max-width: 95vw !important; margin: 10px auto !important; padding: 18px 14px !important; box-sizing: border-box !important; } /* Interactive Smartphone Simulator Modal Mobile Stack */ .phone-simulator-modal-box { grid-template-columns: 1fr !important; max-height: 90vh !important; overflow-y: auto !important; padding: 0 !important; } .phone-simulator-modal-box > div:first-child { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; padding: 20px 12px !important; } /* Touch-Friendly Form Controls (Prevents iOS Auto-Zoom) */ .form-control, .form-input, .form-select, select, input[type="text"], input[type="password"], input[type="email"], input[type="date"], input[type="number"], input[type="search"] { min-height: 42px; font-size: 16px !important; /* 16px threshold prevents iOS Safari auto-zoom */ box-sizing: border-box !important; } /* Touch-Friendly Button Sizing */ .btn { min-height: 38px; font-size: 0.8rem; padding: 8px 14px; box-sizing: border-box; } .btn-group { flex-wrap: wrap; width: 100%; } /* Floating AI Assistant on Mobile */ #floatingAiWidget { bottom: 14px !important; right: 14px !important; } #globalAiCard { position: fixed !important; left: 10px !important; right: 10px !important; bottom: 74px !important; width: auto !important; max-width: calc(100vw - 20px) !important; height: 72vh !important; max-height: calc(100dvh - 90px) !important; border-radius: 14px !important; z-index: 9999 !important; } #globalAiMessages { padding: 10px !important; gap: 8px !important; } #globalAiMessages table, #aiChatBox table { display: block !important; width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; } #globalAiInput, #aiUserInput { font-size: 16px !important; /* Prevents iOS auto-zoom */ } .d-none-mobile { display: none !important; } /* ── Mobile Timetable & Master Schedule Grid ── */ .timetable-grid-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; padding-bottom: 8px !important; } .timetable-grid-wrap::-webkit-scrollbar { height: 6px; } .timetable-grid-wrap::-webkit-scrollbar-thumb { background: var(--brand-forest, #0F4C3A); border-radius: 4px; } .mobile-timetable-col { min-width: 260px !important; } /* ── Mobile Modal Fullscreen Safe Area ── */ .modal-overlay { padding: 10px !important; align-items: flex-end !important; /* Sheet style on mobile for thumb accessibility */ } .modal-box { max-height: 90vh !important; max-height: 90dvh !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; } .modal-header, .modal-title { padding: 12px 14px !important; font-size: 0.95rem !important; } /* ── Mobile Input & Select Font Size (Anti-iOS Zoom) ── */ .form-control, .form-input, input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="date"], select, textarea { font-size: 16px !important; /* Crucial: Prevents iOS Safari from forcefully zooming in */ } /* ── Mobile Touch Targets Minimum Size ── */ .btn, .tab-btn, .tab-nav__item, .badge { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; } } /* ── Extra Small Phones (<= 420px) ──────────────────────── */ @media (max-width: 420px) { .stat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; } .page-body { padding: 10px 10px 100px !important; } .card { padding: 12px 10px !important; } .topbar { padding: 6px 10px 6px 54px !important; } } /* ── Print Styles ───────────────────────────────────────── */ @media print { .sidebar, .topbar, .mobile-app-bar, #mobileAppBar, #sidebar-toggle, .sidebar-backdrop, #sidebar-backdrop, .mobile-bottom-nav, .app-footer, #toast-container, #floatingAiWidget, #globalAiCard, #globalAiToggleBtn, #globalAiToggle, #cmdPaletteOverlay, .no-print, .card.no-print, .role-tabs, .batch-action-bar, .page-header.no-print { display: none !important; } .main-content { margin-left: 0 !important; margin: 0 !important; padding: 0 !important; } .page-body { padding: 0 !important; } .card:not(.no-print) { box-shadow: none !important; border: 1px solid #ccc !important; } } /* ══════════════════════════════════════════════════════════════════════════ MOBILE BOTTOM NAVIGATION & TOUCH ENHANCEMENTS (NATIVE PWA EXPERIENCE) ══════════════════════════════════════════════════════════════════════════ */ /* Semi-transparent drawer backdrop overlay */ .sidebar-backdrop { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(5, 26, 16, 0.65); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 1040; opacity: 0; transition: opacity 0.28s ease; pointer-events: none; } .sidebar-backdrop.show, .sidebar-backdrop.active { display: block; opacity: 1; pointer-events: auto; } /* Mobile Bottom Navigation Bar */ .mobile-bottom-nav { display: none; } @media (max-width: 768px) { .mobile-bottom-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; height: calc(62px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--color-border, #E2E8F0); box-shadow: 0 -2px 10px rgba(15, 23, 42, 0.05); z-index: 1000; justify-content: space-around; align-items: center; padding-left: 8px; padding-right: 8px; } .mobile-nav-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; height: 100%; color: var(--color-text-muted, #64748B); text-decoration: none; font-size: 0.65rem; font-weight: 600; transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); padding: 6px 2px; gap: 3px; position: relative; border-radius: 8px; } .mobile-nav-tab i { font-size: 1.15rem; transition: transform 0.15s ease, color 0.15s ease; } .mobile-nav-tab.active { color: var(--color-primary, #0B3D26); font-weight: 700; } .mobile-nav-tab.active i { color: var(--brand-gold-strong, #755C10); transform: translateY(-1px) scale(1.1); } /* Micro-pill active top indicator */ .mobile-nav-tab.active::before { content: ''; position: absolute; top: 3px; width: 22px; height: 3px; border-radius: 3px; background: var(--brand-gold-strong, #755C10); box-shadow: 0 1px 4px rgba(117, 92, 16, 0.35); } .mobile-nav-tab:active { transform: scale(0.92); } /* Sleek, Non-Blocking Floating AI Widget on Mobile */ #floatingAiWidget { bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; right: 14px !important; } #globalAiToggleBtn { width: 44px !important; height: 44px !important; font-size: 1.15rem !important; box-shadow: 0 4px 16px rgba(11, 61, 38, 0.32) !important; } #globalAiCard { width: calc(100vw - 28px) !important; max-width: 380px !important; max-height: calc(100vh - 150px) !important; right: 0 !important; bottom: 56px !important; } /* Responsive App Footer on Mobile (Centered & Clean) */ .app-footer { flex-direction: column !important; text-align: center !important; padding: 14px 16px !important; margin-top: 20px !important; margin-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; gap: 12px !important; } .footer-brand { flex-direction: column !important; text-align: center !important; gap: 6px !important; } .footer-meta { flex-direction: column !important; text-align: center !important; gap: 6px !important; } /* Clean padding for bottom clearance across all main content */ .page-body, .main-content, .content-area, .container-fluid { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; max-width: 100vw !important; box-sizing: border-box !important; } /* Prevent page horizontal shifting or wobble on mobile */ html, body { max-width: 100vw !important; overflow-x: hidden !important; position: relative; } /* Automatically collapse 2-column or 3-column inline grids into clean 1-column stack */ div[style*="grid-template-columns: 1fr 1fr"], div[style*="grid-template-columns:1fr 1fr"], div[style*="grid-template-columns: repeat(2"], div[style*="grid-template-columns:repeat(2"], div[style*="grid-template-columns: repeat(3"], div[style*="grid-template-columns:repeat(3"], div[style*="grid-template-columns: repeat(4"], div[style*="grid-template-columns:repeat(4"], .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; gap: 12px !important; } /* Responsive image scaling */ img, svg { max-width: 100% !important; height: auto; } /* Prevent auto-zooming on mobile text inputs (iOS / Android) */ input[type="text"], input[type="password"], input[type="email"], input[type="number"], select, textarea { font-size: 16px !important; max-width: 100% !important; } /* Touch target sizes (WCAG 44px recommended) */ .btn { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; } /* Full-width filter and action buttons on mobile */ .filter-bar, .filter-bar > div, form[method="GET"] > div { width: 100% !important; align-self: stretch !important; } /* Smooth swipeable touch tables with right-side shadow cue */ .table-wrap, .table-wrapper, .table-responsive { width: 100% !important; max-width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; position: relative; border-radius: 8px; box-shadow: inset -4px 0 8px -4px rgba(0,0,0,0.15); } /* Mobile dialog & modal responsiveness */ .modal-dialog, .modal-content { max-width: 95vw !important; margin: 10px auto !important; } /* ═══════════════════════════════════════════════════════════════════ UNIVERSAL HORIZONTAL TOUCH-SCROLL FOR OVERLAPPING NAVIGATION & TABS Ensures every button, day pill, and navigation tab can be swiped smoothly ═══════════════════════════════════════════════════════════════════ */ .mobile-bottom-nav, .topbar-actions, .nav-tabs, .tabs, .tab-nav, .tabs-nav, .scrollable-tabs, .pills-row, .day-pills, .filter-tabs, .chip-group, div[style*="border-bottom:2px solid"], div[style*="border-bottom: 2px solid"], div[style*="border-top:1px solid var(--paper-line)"][style*="display:flex"], div[style*="border-top: 1px solid var(--paper-line)"][style*="display:flex"] { display: flex !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; flex-wrap: nowrap !important; scrollbar-width: none !important; -ms-overflow-style: none !important; max-width: 100% !important; } .mobile-bottom-nav::-webkit-scrollbar, .topbar-actions::-webkit-scrollbar, .nav-tabs::-webkit-scrollbar, .tabs::-webkit-scrollbar, .tab-nav::-webkit-scrollbar, .tabs-nav::-webkit-scrollbar, .scrollable-tabs::-webkit-scrollbar, .pills-row::-webkit-scrollbar, .day-pills::-webkit-scrollbar, .filter-tabs::-webkit-scrollbar, .chip-group::-webkit-scrollbar, div[style*="border-bottom:2px solid"]::-webkit-scrollbar, div[style*="border-bottom: 2px solid"]::-webkit-scrollbar { display: none !important; } /* Prevent tabs, buttons and pills from shrinking or cutting off text */ .nav-tabs > *, .tabs > *, .tab-nav > *, .tabs-nav > *, .scrollable-tabs > *, .pills-row > *, .day-pills > *, .filter-tabs > *, .chip-group > *, .topbar-actions > *, div[style*="border-bottom:2px solid"] > *, div[style*="border-bottom: 2px solid"] > * { flex-shrink: 0 !important; white-space: nowrap !important; } } /* ========================================================================== PHASE 2 — PAGE-LEVEL COMPONENT SYSTEM Additive rules only. Applied to all pages using header/sidebar/footer. ========================================================================== */ /* ── Page Header (Universal for all user roles and layout containers) ───── */ .page-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } /* When .page-header sits directly at the top of .main-content */ .main-content > .page-header { padding: 16px 28px; background: var(--color-surface, #FFFFFF); border-bottom: 1px solid var(--color-border, #E2E8F0); margin-bottom: 0; min-height: 64px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); } [data-theme="dark"] .main-content > .page-header { background: #111827 !important; border-bottom-color: #1F2937 !important; } /* When .page-header is inside .page-body */ .page-body > .page-header { margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--color-border, #E2E8F0); } [data-theme="dark"] .page-body > .page-header { border-bottom-color: #1F2937 !important; } .page-header-left { flex: 1; min-width: 0; } .page-title { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 1.28rem; font-weight: 800; color: var(--color-text, #0F172A); display: flex; align-items: center; gap: 12px; margin: 0 0 2px; line-height: 1.25; } [data-theme="dark"] .page-title { color: #F8FAFC !important; } /* Institutional Icon Badge */ .page-title i { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 9px; background: rgba(11, 61, 38, 0.09); color: var(--color-primary, #0B3D26); font-size: 1.05rem; flex-shrink: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); } [data-theme="dark"] .page-title i { background: rgba(175, 143, 35, 0.16) !important; color: var(--brand-gold, #F59E0B) !important; } .page-subtitle { font-size: 0.82rem; font-weight: 500; color: var(--color-text-muted, #64748B); margin: 0; line-height: 1.45; } [data-theme="dark"] .page-subtitle { color: #94A3B8 !important; } .page-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; } /* Live clock styling inside page header */ .page-actions .clock-display { display: inline-flex; align-items: center; gap: 6px; font-family: 'IBM Plex Mono', monospace; font-size: 0.78rem; font-weight: 600; padding: 6px 12px; border-radius: 8px; background: var(--paper, #F8FAFC); border: 1px solid var(--paper-line, #CBD5E1); color: var(--slate, #334155); } [data-theme="dark"] .page-actions .clock-display { background: #1E293B !important; border-color: #334155 !important; color: #E2E8F0 !important; } /* Mobile & Tablet Responsive Handling (<= 900px) */ @media (max-width: 900px) { .main-content > .page-header { padding: 14px 16px !important; gap: 12px !important; min-height: auto !important; } .page-title { font-size: 1.15rem !important; gap: 10px !important; } .page-title i { width: 32px !important; height: 32px !important; font-size: 0.95rem !important; border-radius: 7px !important; } .page-subtitle { font-size: 0.76rem !important; } .page-actions { width: 100% !important; justify-content: flex-start !important; gap: 6px !important; } .page-actions .btn { font-size: 0.78rem !important; padding: 6px 10px !important; } .page-actions .clock-display { display: none !important; } } /* ── Page Alerts ────────────────────────────────────────────────────────── */ .page-alert { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 10px; font-size: 0.85rem; font-weight: 500; margin-bottom: 20px; border: 1px solid transparent; line-height: 1.5; } .page-alert i { font-size: 1rem; flex-shrink: 0; } .page-alert-body { flex: 1; } .page-alert-title { font-weight: 700; } .page-alert-link { margin-left: auto; font-weight: 700; text-decoration: none; white-space: nowrap; flex-shrink: 0; } .page-alert--info { background: var(--color-info-tint); border-color: rgba(37, 99, 235, 0.25); color: var(--color-info); } .page-alert--info .page-alert-link { color: var(--color-info); } .page-alert--warning { background: var(--color-warning-tint); border-color: rgba(217, 119, 6, 0.25); color: #92400E; } .page-alert--warning .page-alert-link { color: var(--color-warning); } .page-alert--danger { background: var(--color-danger-tint); border-color: rgba(220, 38, 38, 0.25); color: #991B1B; } .page-alert--danger .page-alert-link { color: var(--color-danger); } .page-alert--success { background: var(--color-success-tint); border-color: rgba(22, 163, 74, 0.25); color: #166534; } .page-alert--success .page-alert-link { color: var(--color-success); } .page-alert--gold { background: var(--brand-gold-tint); border-color: rgba(175, 143, 35, 0.3); color: var(--brand-gold-strong); } .page-alert--gold .page-alert-link { color: var(--brand-gold-strong); } /* ── Filter Panel ───────────────────────────────────────────────────────── */ .filter-panel { background: var(--color-surface); border: 1px solid var(--color-border); border-top: 3px solid var(--color-primary); border-radius: 10px; padding: 16px 20px; margin-bottom: 20px; } .filter-panel-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--color-text-muted); margin-bottom: 12px; display: flex; align-items: center; gap: 6px; } .filter-panel-title i { color: var(--color-primary); } .filter-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; } .filter-group { display: flex; flex-direction: column; gap: 4px; min-width: 140px; flex: 1; } .filter-group.filter-group--wide { min-width: 200px; flex: 2; } .filter-group.filter-group--fixed { flex: none; } .filter-label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: var(--color-text-secondary); } .filter-actions { display: flex; gap: 8px; align-items: flex-end; flex-shrink: 0; } /* ── Card Enhancements ──────────────────────────────────────────────────── */ .card-body { padding: 16px 20px; } .card-body + .card-body { border-top: 1px solid var(--color-border); padding-top: 16px; } .card-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .card-footer { padding: 12px 20px; border-top: 1px solid var(--color-border); background: var(--color-surface-subtle); border-radius: 0 0 10px 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 0.8rem; color: var(--color-text-muted); } /* ── Table Refinements ──────────────────────────────────────────────────── */ .table-wrap table thead tr { background: var(--color-surface-subtle); } .table-wrap table tbody tr:nth-child(even) { background: var(--color-surface-subtle); } .table-wrap table tbody tr:hover { background: var(--color-surface-hover, rgba(0,0,0,0.04)); } .table-meta { display: flex; align-items: center; justify-content: space-between; padding: 10px 0 6px; font-size: 0.78rem; color: var(--color-text-muted); gap: 12px; flex-wrap: wrap; } .table-meta strong { color: var(--color-text-secondary); } /* ── Empty State ────────────────────────────────────────────────────────── */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; text-align: center; color: var(--color-text-muted); } .empty-state__icon { width: 56px; height: 56px; background: var(--color-surface-subtle); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; font-size: 1.4rem; color: var(--color-primary); border: 1px solid var(--color-border); } .empty-state__title { font-size: 0.95rem; font-weight: 700; color: var(--color-text-secondary); margin: 0 0 6px; } .empty-state__body { font-size: 0.82rem; line-height: 1.55; max-width: 320px; } /* ── Tab Navigation ─────────────────────────────────────────────────────── */ .tab-nav { display: flex; gap: 4px; background: var(--color-surface-subtle); border: 1px solid var(--color-border); border-radius: 10px; padding: 4px; margin-bottom: 20px; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; } .tab-nav::-webkit-scrollbar { display: none; } .tab-nav__item { display: inline-flex; align-items: center; gap: 7px; padding: 7px 16px; border-radius: 7px; font-size: 0.83rem; font-weight: 600; color: var(--color-text-muted); text-decoration: none; white-space: nowrap; transition: background 0.15s, color 0.15s; flex-shrink: 0; cursor: pointer; border: none; background: transparent; } .tab-nav__item:hover { background: var(--color-surface); color: var(--color-text); } .tab-nav__item--active, .tab-nav__item.active { background: var(--color-primary) !important; color: #FFFFFF !important; box-shadow: 0 2px 8px rgba(11, 61, 38, 0.25); } .tab-nav__item--active i, .tab-nav__item.active i { color: var(--brand-gold); } .tab-nav__badge { background: rgba(255,255,255,0.25); color: inherit; font-size: 0.65rem; font-weight: 700; padding: 1px 6px; border-radius: 10px; line-height: 1.6; } .tab-nav__item--active .tab-nav__badge { background: rgba(255,255,255,0.2); } /* ── Form Controls ──────────────────────────────────────────────────────── */ .form-group { display: flex; flex-direction: column; gap: 5px; } .form-row { display: flex; gap: 16px; flex-wrap: wrap; } .form-row .form-group { flex: 1; min-width: 180px; } .form-label { font-size: 0.78rem; font-weight: 600; color: var(--color-text-secondary); letter-spacing: 0.2px; } .form-label.required::after { content: ' *'; color: var(--color-danger); } .form-input, .form-select, .form-textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--color-border); border-radius: 8px; font-size: 0.85rem; font-family: var(--font-body); color: var(--color-text); background: var(--color-surface); transition: border-color 0.15s, box-shadow 0.15s; box-sizing: border-box; outline: none; } .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--color-primary-border); box-shadow: 0 0 0 3px rgba(11, 61, 38, 0.12); } .form-input::placeholder, .form-textarea::placeholder { color: var(--color-text-muted); } .form-textarea { min-height: 90px; resize: vertical; } .form-hint { font-size: 0.73rem; color: var(--color-text-muted); line-height: 1.4; } .form-error { font-size: 0.73rem; color: var(--color-danger); font-weight: 600; } .form-input.is-invalid, .form-select.is-invalid { border-color: var(--color-danger); } .form-input.is-valid, .form-select.is-valid { border-color: var(--color-success); } /* ── Modal Standardization ──────────────────────────────────────────────── */ .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(7, 27, 18, 0.65); backdrop-filter: blur(5px); z-index: 99990; align-items: center; justify-content: center; padding: 20px; animation: fadeIn 0.15s ease; } .modal-overlay.active { display: flex; } .modal-box { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; width: 100%; max-width: 520px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28); animation: slideUp 0.2s ease; overflow: hidden; position: relative; } .modal-box--sm { max-width: 380px; } .modal-box--lg { max-width: 720px; } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--color-border); background: var(--color-surface-subtle); gap: 12px; } .modal-title { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--color-text); display: flex; align-items: center; gap: 8px; margin: 0; } .modal-title i { color: var(--color-primary); } .modal-close { background: none; border: none; cursor: pointer; color: var(--color-text-muted); font-size: 1.2rem; padding: 4px; border-radius: 6px; line-height: 1; transition: background 0.15s, color 0.15s; flex-shrink: 0; } .modal-close:hover { background: var(--color-border); color: var(--color-text); } .modal-body { padding: 20px; } .modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--color-border); background: var(--color-surface-subtle); } .modal-accent-bar { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--color-primary) 0%, var(--brand-gold) 100%); } /* ── Status Dot ─────────────────────────────────────────────────────────── */ .status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--color-success); flex-shrink: 0; } .status-dot--warning { background: var(--color-warning); } .status-dot--danger { background: var(--color-danger); } .status-dot--info { background: var(--color-info); } .status-dot--muted { background: var(--color-border-hover); } .status-dot--pulse { animation: pulse-dot 1.8s ease-in-out infinite; } @keyframes pulse-dot { 0%, 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5); } 50% { box-shadow: 0 0 0 5px rgba(22, 163, 74, 0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* ── Mobile Bottom Nav Token Cleanup ────────────────────────────────────── */ .mobile-bottom-nav { border-top-color: var(--color-primary-border) !important; background: var(--color-primary) !important; } .mobile-nav-tab { color: var(--color-primary-muted) !important; } .mobile-nav-tab.active, .mobile-nav-tab:hover { color: #FFFFFF !important; } .mobile-nav-tab.active i { color: var(--brand-gold) !important; } .mobile-nav-tab.active span { color: #FFFFFF !important; } /* ── Responsive adjustments for Phase 2 components ─────────────────────── */ @media (max-width: 768px) { .page-header { flex-direction: column; gap: 12px; } .page-actions { width: 100%; justify-content: flex-start; } .filter-row { flex-direction: column; gap: 10px; } .filter-group { min-width: 0; flex: none; width: 100%; } .filter-group--fixed { width: auto; } .filter-actions { width: 100%; } .form-row { flex-direction: column; gap: 12px; } .form-row .form-group { min-width: 0; } .modal-box { margin: 0; border-radius: 12px; } .tab-nav { gap: 2px; padding: 3px; } .tab-nav__item { padding: 6px 12px; font-size: 0.79rem; } } /* ══════════════════════════════════════════════════════════════════════════ PROFESSIONAL UI/UX REFINEMENTS: DESKTOP & MOBILE ACCESSIBILITY ══════════════════════════════════════════════════════════════════════════ */ /* 1. Global Smooth Scrolling */ html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } /* 2. Ultra-Wide Desktop Ergonomics (1080p, 1440p, 4K Monitors) */ @media (min-width: 1600px) { .page-body { max-width: 1540px !important; margin-left: auto !important; margin-right: auto !important; } .app-footer { max-width: 1540px !important; margin-left: auto !important; margin-right: auto !important; } } /* 3. Desktop Tactile Hover Micro-Interactions */ @media (hover: hover) and (min-width: 901px) { .card.card-clickable, .card-interactive, a.card { transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1); } .card.card-clickable:hover, .card-interactive:hover, a.card:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); } .stat-tile[onclick]:hover, .stat-card[onclick]:hover, a.stat-card:hover, a.stat-tile:hover { transform: translateY(-2px); transition: transform 0.18s ease, box-shadow 0.18s ease; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06); } .btn { transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; } .btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); } } /* 4. Mobile & Touch Tactile Feedback (Active Tap States) */ @media (max-width: 900px) { .btn:active, .mobile-nav-tab:active, .badge:active, .tab-nav__item:active { transform: scale(0.96) !important; transition: transform 0.08s ease !important; } /* Prevent any unintentional text-selection during fast double-tapping on mobile controls */ .btn, .mobile-nav-tab, .badge, #sidebar-toggle { -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; } } /* 5. Modern Custom Scrollbar (Desktop) */ @media (min-width: 901px) { * { scrollbar-width: thin; scrollbar-color: var(--paper-line, #CBD5E1) transparent; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.45); border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.75); } } /* ────────────────────────────────────────────────────────────────────────── UNIVERSAL CROSS-DEVICE & COMPUTER COMPATIBILITY SYSTEM Ensures optimal layout, touch ergonomics, and visual hierarchy across: - Mobile Phones (320px – 480px: iOS Safari, Android Chrome) - Tablets & Foldables (481px – 1024px: iPad Mini, iPad Pro, Galaxy Tab) - Laptops & Desktops (1025px – 1920px: MacBook, ThinkPad, 1080p Full HD) - Ultrawide & 4K Displays (1921px+: High DPI Retina, 1440p, 4K) ────────────────────────────────────────────────────────────────────────── */ /* Executive KPI Cards Responsive Grid */ .exec-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-bottom: 20px; width: 100%; } .exec-kpi-card { background: var(--paper); border: 1px solid var(--paper-line); border-radius: 10px; padding: 12px 16px; display: flex; align-items: center; gap: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); min-width: 0; transition: transform 0.15s ease, box-shadow 0.15s ease; } .exec-kpi-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); } .exec-kpi-icon { width: 42px; height: 42px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; flex-shrink: 0; } .exec-kpi-content { min-width: 0; flex: 1; } .exec-kpi-label { font-size: 0.7rem; font-weight: 700; color: var(--slate-muted); text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .exec-kpi-value { font-size: 1.3rem; font-weight: 800; color: var(--ink); line-height: 1.2; } .exec-kpi-sub { font-size: 0.75rem; font-weight: 600; color: var(--slate-muted); } /* Tablet & Landscape Phones (481px - 768px) */ @media (max-width: 768px) { .exec-kpi-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; margin-bottom: 14px !important; } .exec-kpi-card { padding: 10px 12px !important; gap: 10px !important; } .exec-kpi-icon { width: 36px !important; height: 36px !important; font-size: 1rem !important; } .exec-kpi-value { font-size: 1.15rem !important; } .exec-kpi-label { font-size: 0.65rem !important; } } /* Portrait Phones (<= 480px: iPhone, Galaxy, Pixel) */ @media (max-width: 480px) { .exec-kpi-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; } .exec-kpi-card { padding: 8px 10px !important; gap: 8px !important; border-radius: 8px !important; } .exec-kpi-icon { width: 32px !important; height: 32px !important; font-size: 0.9rem !important; } .exec-kpi-value { font-size: 1.05rem !important; } .exec-kpi-sub { font-size: 0.68rem !important; } } /* Ultra-compact Phones (<= 340px: iPhone SE 1st gen, small Androids) */ @media (max-width: 340px) { .exec-kpi-grid { grid-template-columns: 1fr !important; } } /* Universal Table Horizontal Scroll Engine for Touch Devices */ .table-wrap, .table-responsive, .reg-table-wrap { width: 100% !important; max-width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; position: relative; border-radius: 8px; } /* Prevent text clipping in table headers on mobile */ .table-wrap table th, .table-responsive table th, .reg-table-wrap table th { white-space: nowrap; } /* Smooth Touch and Mobile Tap Hygiene */ @media (max-width: 900px) { .page-body { padding: 12px 14px 90px !important; } .page-header { margin-bottom: 14px !important; } .page-title { font-size: 1.25rem !important; } } /* ══════════════════════════════════════════════════════════════════════════ ANTI-OVERLAP, TEXT FLOW & PARAGRAPH BEAUTIFICATION ENGINE Ensures seamless readability, zero text overlap, and graceful responsive wrapping for all cards, headings, paragraphs, metric tiles, and flex rows. ══════════════════════════════════════════════════════════════════════════ */ /* 1. Global Paragraph Spacing & Word-Break Hygiene */ p, .card p, .card-body p, .page-subtitle, .stat-label, .text-muted, .text-secondary { line-height: 1.55; margin-bottom: 0.75rem; overflow-wrap: break-word; word-break: break-word; } p:last-child, .card p:last-child, .card-body p:last-child, .card > p:last-child { margin-bottom: 0 !important; } /* 2. Headings & Titles: Stable Line-Heights and Word Boundary Wrapping */ h1, h2, h3, h4, h5, h6, .card-title, .modal-title, .page-header-title, .card-header .card-title { line-height: 1.35; overflow-wrap: break-word; word-break: break-word; } /* 3. Card Container Flex Safety (Prevents child blowout on narrow viewports) */ .card, .card-body, .stat-card, .exec-kpi-card, .mini-stat, .filter-card { min-width: 0; overflow-wrap: break-word; word-break: break-word; } .card-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; min-width: 0; } .card-header > * { min-width: 0; } /* 4. Stat & Metric Numbers Collision Prevention */ .stat-number, .mini-stat-value, .exec-kpi-value, .stat-tile .num, .stat-val { line-height: 1.25 !important; margin-bottom: 4px; overflow-wrap: break-word; word-break: break-word; } .stat-label, .mini-stat-label, .exec-kpi-label, .stat-tile .lbl { line-height: 1.35; overflow-wrap: break-word; word-break: break-word; } /* 5. Badges, Pills & Status Tags Overlap and Ellipsis Safety */ .badge, .status-pill, .status-tag, .pill { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; white-space: nowrap; vertical-align: middle; } /* 6. Form Flex & Button Group Overlap Safety */ .card-actions, .page-actions, .form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; } /* 7. Flex Rows & Lists Inside Cards (Prevent text running over adjacent items) */ .card-list-item, .card-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; min-width: 0; } .card-list-item > *, .card-row > * { min-width: 0; } /* ── Room picker status (rooms free for the chosen date and time) ── */ .room-picker-status { margin-top: 6px; padding: 8px 10px; border-radius: 8px; font-size: 0.78rem; line-height: 1.45; border: 1px solid var(--color-border); background: var(--color-surface-subtle); color: var(--color-text-secondary); } .room-picker-status summary { cursor: pointer; font-weight: 600; } .room-picker-info { background: var(--color-info-tint); border-color: rgba(37, 99, 235, 0.25); color: #1E3A8A; } .room-picker-success { background: var(--color-success-tint); border-color: rgba(22, 163, 74, 0.3); color: #14532D; } .room-picker-warning { background: var(--color-warning-tint); border-color: rgba(217, 119, 6, 0.3); color: #78350F; } .room-picker-danger { background: var(--color-danger-tint); border-color: rgba(220, 38, 38, 0.3); color: #7F1D1D; } .room-picker-clash { margin-top: 6px; font-weight: 700; color: #92400E; } [data-theme="dark"] .room-picker-info { color: #BFDBFE; } [data-theme="dark"] .room-picker-success { color: #BBF7D0; } [data-theme="dark"] .room-picker-warning { color: #FDE68A; } [data-theme="dark"] .room-picker-danger { color: #FECACA; } [data-theme="dark"] .room-picker-clash { color: #FCD34D; } /* ── Sidebar: a collapsed group shows how many new items it holds ── */ .nav-group-badge { margin-left: auto; background: var(--color-danger, #DC2626); color: #FFFFFF; font-size: 0.6rem; font-weight: 700; letter-spacing: 0; padding: 1px 6px; border-radius: 10px; line-height: 1.5; } .nav-group-badge + .nav-group-chevron { margin-left: 6px; } .nav-group[open] > .nav-group-label .nav-group-badge { display: none; } .nav-group[open] > .nav-group-label .nav-group-badge + .nav-group-chevron { margin-left: auto; } /* ── Announcement pop-up (urgent / emergency, and dated today or tomorrow) ── */ .ann-popup-overlay { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(8, 15, 12, 0.55); opacity: 0; visibility: hidden; transition: opacity 0.18s ease, visibility 0.18s ease; } .ann-popup-overlay.is-open { opacity: 1; visibility: visible; } .ann-popup { width: 100%; max-width: 540px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; background: var(--color-surface, #FFFFFF); color: var(--color-text, #14140F); border-radius: 14px; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28); overflow: hidden; transform: translateY(8px); transition: transform 0.18s ease; } .ann-popup-overlay.is-open .ann-popup { transform: none; } .ann-popup-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; font-weight: 800; font-size: 1rem; color: #FFFFFF; background: #0B3D26; } .ann-popup--emergency .ann-popup-head { background: #B91C1C; } .ann-popup--urgent .ann-popup-head { background: #B45309; } .ann-popup-close { margin-left: auto; background: transparent; border: 0; color: inherit; font-size: 1.4rem; line-height: 1; cursor: pointer; opacity: 0.85; } .ann-popup-close:hover { opacity: 1; } .ann-popup-body { padding: 14px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; } .ann-item { border: 1px solid var(--color-border, #E8E6DF); border-left: 4px solid #2563EB; border-radius: 10px; padding: 10px 12px; background: var(--color-surface-subtle, #FAF9F5); } .ann-item--emergency { border-left-color: #DC2626; } .ann-item--urgent { border-left-color: #D97706; } .ann-item--reminder { border-left-color: #0B3D26; } .ann-item-title { font-weight: 700; font-size: 0.92rem; } .ann-chip { display: inline-block; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.04em; padding: 2px 7px; border-radius: 10px; margin-right: 4px; vertical-align: middle; background: rgba(37, 99, 235, 0.12); color: #1D4ED8; } .ann-item--emergency .ann-chip { background: rgba(220, 38, 38, 0.12); color: #B91C1C; } .ann-item--urgent .ann-chip { background: rgba(217, 119, 6, 0.14); color: #B45309; } .ann-item--reminder .ann-chip { background: rgba(11, 61, 38, 0.1); color: #0B3D26; } .ann-item-text { margin-top: 6px; font-size: 0.84rem; line-height: 1.5; color: var(--color-text-secondary, #334155); } .ann-item-meta { margin-top: 6px; font-size: 0.76rem; font-weight: 600; color: var(--brand-gold-strong, #8A6D10); } .ann-section-label { margin-top: 4px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted, #64748B); } .ann-popup-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--color-border, #E8E6DF); flex-wrap: wrap; } [data-theme="dark"] .ann-item-text { color: var(--color-text-secondary); } [data-theme="dark"] .ann-item--reminder .ann-chip { background: rgba(134, 239, 172, 0.14); color: #86EFAC; } [data-theme="dark"] .ann-chip { color: #93C5FD; } [data-theme="dark"] .ann-item--emergency .ann-chip { color: #FCA5A5; } [data-theme="dark"] .ann-item--urgent .ann-chip { color: #FCD34D; }