@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap'); :root { /* ── Dark Theme Variables (Default) ── */ --bg-gradient: linear-gradient(135deg, #090d16 0%, #111827 50%, #070a0f 100%); --bg-glow-1: radial-gradient(circle at 10% 20%, rgba(168, 85, 247, 0.15) 0%, transparent 40%); --bg-glow-2: radial-gradient(circle at 90% 80%, rgba(6, 182, 212, 0.15) 0%, transparent 40%); --glass-bg: rgba(17, 24, 39, 0.55); --glass-border: rgba(255, 255, 255, 0.08); --glass-border-glow: rgba(6, 182, 212, 0.3); --text-primary: #f8fafc; --text-secondary: #cbd5e1; --text-muted: #94a3b8; --accent-primary: #06b6d4; /* Cyber Cyan */ --accent-secondary: #a855f7; /* Electric Purple */ --accent-success: #10b981; /* Emerald Green */ --accent-warning: #f59e0b; /* Neon Amber */ --accent-danger: #ef4444; /* Crimson Red */ --accent-glow: 0 0 15px rgba(6, 182, 212, 0.4); --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); --sidebar-bg: rgba(13, 17, 28, 0.75); --card-hover-bg: rgba(255, 255, 255, 0.04); --input-bg: rgba(17, 24, 39, 0.7); --input-focus-border: rgba(6, 182, 212, 0.6); /* Background overlays for Auth layout */ --auth-bg-overlay: linear-gradient(135deg, rgba(7, 10, 17, 0.85) 0%, rgba(15, 23, 42, 0.95) 100%); --auth-visual-overlay: linear-gradient(135deg, rgba(9, 14, 23, 0.65) 0%, rgba(16, 26, 43, 0.85) 100%); --auth-card-bg: rgba(17, 24, 39, 0.55); --auth-card-border: rgba(255, 255, 255, 0.08); } /* ══════════════════════════════════════════════════════════════════ LIGHT THEME OVERRIDES Applied when has the class "light-theme" ══════════════════════════════════════════════════════════════════ */ html.light-theme { --bg-gradient: linear-gradient(135deg, #e8f4fd 0%, #f0f9ff 50%, #e0f2fe 100%); --bg-glow-1: radial-gradient(circle at 10% 20%, rgba(6, 182, 212, 0.08) 0%, transparent 40%); --bg-glow-2: radial-gradient(circle at 90% 80%, rgba(168, 85, 247, 0.06) 0%, transparent 40%); --glass-bg: rgba(255, 255, 255, 0.72); --glass-border: rgba(0, 0, 0, 0.08); --glass-border-glow: rgba(6, 182, 212, 0.35); --text-primary: #0f172a; --text-secondary: #334155; --text-muted: #64748b; --accent-primary: #0891b2; --accent-secondary: #7c3aed; --accent-success: #059669; --accent-warning: #d97706; --accent-danger: #dc2626; --accent-glow: 0 0 15px rgba(8, 145, 178, 0.3); --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.10); --sidebar-bg: rgba(248, 250, 252, 0.88); --card-hover-bg: rgba(6, 182, 212, 0.04); --input-bg: rgba(255, 255, 255, 0.85); --input-focus-border: rgba(8, 145, 178, 0.55); --auth-bg-overlay: linear-gradient(135deg, rgba(232, 244, 253, 0.9) 0%, rgba(240, 249, 255, 0.97) 100%); --auth-visual-overlay: linear-gradient(135deg, rgba(6, 182, 212, 0.08) 0%, rgba(168, 85, 247, 0.08) 100%); --auth-card-bg: rgba(255, 255, 255, 0.75); --auth-card-border: rgba(0, 0, 0, 0.08); --label-bg: #ffffff; } /* Light theme — body & background image overlay */ html.light-theme body { background: linear-gradient(135deg, rgba(232,244,253,0.92) 0%, rgba(240,249,255,0.95) 100%), url('../images/san_vicente_bg.png') no-repeat center center fixed !important; background-size: cover !important; color: var(--text-primary); } /* Light theme — sidebar text/icon colours */ html.light-theme .sidebar-link { color: var(--text-secondary); } html.light-theme .sidebar-link:hover { color: var(--text-primary); background: rgba(6, 182, 212, 0.07); } html.light-theme .sidebar-link.active { color: #ffffff; } /* Light theme — top navbar & footer backgrounds */ html.light-theme .top-navbar, html.light-theme .footer { background: rgba(255, 255, 255, 0.80); border-color: rgba(0, 0, 0, 0.08); } /* Light theme — ensure page title and navbar text are dark */ html.light-theme .top-navbar h5, html.light-theme .top-navbar .text-white { color: var(--text-primary) !important; } html.light-theme .top-navbar .text-white-50 { color: var(--text-secondary) !important; } /* Light theme — sidebar user info */ html.light-theme .sidebar h6.text-white { color: var(--text-primary) !important; } /* Light theme — glass panels & cards */ html.light-theme .glass-panel, html.light-theme .glass-card { background: rgba(255, 255, 255, 0.75); border-color: rgba(0, 0, 0, 0.07); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); } /* Light theme — form inputs */ html.light-theme .form-control-glass, html.light-theme .form-select-glass { background-color: rgba(255, 255, 255, 0.9) !important; color: var(--text-primary) !important; border-color: rgba(0, 0, 0, 0.12) !important; } html.light-theme .form-select-glass option { background: #ffffff !important; color: #0f172a !important; } /* Light theme — table rows */ html.light-theme .table-glass th { background: rgba(0, 0, 0, 0.02) !important; color: var(--text-secondary) !important; } html.light-theme .table-glass td { background: rgba(255, 255, 255, 0.6) !important; color: var(--text-secondary) !important; border-color: rgba(0, 0, 0, 0.06) !important; } /* Light theme — modal */ html.light-theme .modal-glass .modal-content { background: rgba(255, 255, 255, 0.97) !important; border-color: rgba(6, 182, 212, 0.2) !important; color: var(--text-primary) !important; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15) !important; } html.light-theme .modal-glass .modal-header, html.light-theme .modal-glass .modal-footer { border-color: rgba(0, 0, 0, 0.06) !important; } html.light-theme .modal-glass .btn-close { filter: none; } /* Light theme — DataTables */ html.light-theme .dataTables_wrapper .dataTables_filter input, html.light-theme .dataTables_wrapper .dataTables_length select { background: rgba(255, 255, 255, 0.9) !important; border-color: rgba(0, 0, 0, 0.12) !important; color: var(--text-primary) !important; } html.light-theme .dataTables_wrapper .pagination .page-item .page-link { background: rgba(255, 255, 255, 0.8) !important; border-color: rgba(0, 0, 0, 0.1) !important; color: var(--text-secondary) !important; } /* Light theme — scrollbar */ html.light-theme ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.15); } /* Light theme — mobile-toggle icon colour */ html.light-theme .mobile-toggle { color: var(--text-primary); } /* ══════════════════════════════════════════════════════════════════ LIGHT THEME — APPLICANT LAYOUT ══════════════════════════════════════════════════════════════════ */ /* Top applicant navbar */ html.light-theme .applicant-navbar { background: rgba(255, 255, 255, 0.88) !important; border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important; backdrop-filter: blur(20px); } html.light-theme .applicant-navbar .brand-text { color: var(--text-primary) !important; } html.light-theme .applicant-navbar .user-info-name { color: var(--text-primary) !important; } html.light-theme .applicant-navbar .user-info-role { color: var(--text-muted) !important; } /* Permit module sidebar */ html.light-theme .permit-sidebar { background: rgba(248, 250, 252, 0.90) !important; border-right: 1px solid rgba(0, 0, 0, 0.08) !important; } html.light-theme .permit-sidebar::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.12); } html.light-theme .sidebar-header { border-bottom-color: rgba(0, 0, 0, 0.06) !important; } html.light-theme .sidebar-header .sidebar-permit-title { color: var(--text-muted) !important; } html.light-theme .sidebar-header .sidebar-permit-name { color: var(--text-primary) !important; } html.light-theme .sidebar-section-label { color: var(--text-muted) !important; } html.light-theme .sidebar-back { color: var(--text-muted) !important; } html.light-theme .sidebar-back:hover { color: var(--accent-primary) !important; } /* Sidebar nav items */ html.light-theme .sidebar-nav-item { color: var(--text-secondary) !important; } html.light-theme .sidebar-nav-item:hover { color: var(--text-primary) !important; background: rgba(6, 182, 212, 0.06) !important; border-left-color: rgba(6, 182, 212, 0.3) !important; } html.light-theme .sidebar-nav-item.active { color: var(--accent-primary) !important; background: rgba(6, 182, 212, 0.08) !important; border-left-color: var(--accent-primary) !important; } html.light-theme .sidebar-nav-item .nav-icon { background: rgba(0, 0, 0, 0.04) !important; } html.light-theme .sidebar-nav-item.active .nav-icon { background: rgba(6, 182, 212, 0.12) !important; } /* Step dots */ html.light-theme .step-dot { background: rgba(0, 0, 0, 0.12) !important; } /* Notification dropdown panel */ html.light-theme .dropdown-menu.glass-panel { background: rgba(255, 255, 255, 0.97) !important; border: 1px solid rgba(6, 182, 212, 0.18) !important; } html.light-theme .dropdown-menu .fw-bold.text-white { color: var(--text-primary) !important; } html.light-theme .dropdown-menu .border-bottom, html.light-theme .dropdown-menu .border-top { border-color: rgba(0, 0, 0, 0.07) !important; } html.light-theme .dropdown-menu .text-muted { color: var(--text-muted) !important; } html.light-theme .dropdown-menu [style*="rgba(255, 255, 255, 0.015)"] { background: rgba(0, 0, 0, 0.02) !important; border-color: rgba(0, 0, 0, 0.05) !important; } html.light-theme .dropdown-menu .fw-bold.text-white.d-flex span { color: var(--text-primary) !important; } /* Applicant footer */ html.light-theme .applicant-layout > footer { color: var(--text-muted) !important; border-top-color: rgba(0, 0, 0, 0.07) !important; } /* ══════════════════════════════════════════════════════════════════ LIGHT THEME — ADMIN / CONTENT-WRAPPER OVERRIDES Ensures dashboard & administrative panels are readable in light theme ══════════════════════════════════════════════════════════════════ */ /* Force readability of text-white elements in light theme globally, excluding buttons, badges, and gradient backgrounds */ html.light-theme .text-white:not(.bg-gradient):not([style*="background"]):not(.rounded-circle):not(.btn):not(.badge):not([class*="badge-glass"]), html.light-theme h1.text-white, html.light-theme h2.text-white:not(.bg-gradient):not([style*="background"]):not(.rounded-circle):not(.btn):not(.badge):not([class*="badge-glass"]), html.light-theme h3.text-white:not(.btn):not(.badge), html.light-theme h4.text-white:not(.btn):not(.badge), html.light-theme h5.text-white:not(.btn):not(.badge), html.light-theme h6.text-white:not(.btn):not(.badge), html.light-theme td.text-white { color: var(--text-primary) !important; text-shadow: none !important; } html.light-theme .text-white-50:not(.bg-gradient):not([style*="background"]):not(.rounded-circle):not(.btn):not(.badge):not([class*="badge-glass"]) { color: var(--text-secondary) !important; } /* Ensure muted labels in content cards and panels are highly readable */ html.light-theme .content-wrapper .text-muted, html.light-theme .content-wrapper .glass-card .text-muted, html.light-theme .content-wrapper .glass-panel .text-muted { color: var(--text-secondary) !important; } /* Ensure glass buttons and badges have strong visibility in light theme */ html.light-theme .btn-glass { background: rgba(0, 0, 0, 0.05) !important; border-color: rgba(0, 0, 0, 0.1) !important; color: var(--text-primary) !important; } html.light-theme .btn-glass:hover { background: var(--accent-primary) !important; color: #ffffff !important; border-color: var(--accent-primary) !important; box-shadow: 0 0 15px rgba(8, 145, 178, 0.3) !important; } html.light-theme .btn-glass-secondary { background: rgba(0, 0, 0, 0.03) !important; border-color: rgba(0, 0, 0, 0.08) !important; color: var(--text-secondary) !important; } html.light-theme .btn-glass-secondary:hover { background: rgba(0, 0, 0, 0.07) !important; color: var(--text-primary) !important; border-color: rgba(0, 0, 0, 0.15) !important; } /* Specific Welcome Section card text overrides */ html.light-theme .content-wrapper [style*="background: linear-gradient"] h2.text-white, html.light-theme .content-wrapper [style*="background: linear-gradient"] .text-white, html.light-theme .content-wrapper [style*="background: linear-gradient"] .text-secondary { color: var(--text-primary) !important; } /* ══════════════════════════════════════════════════════════════════ LIGHT THEME — APPLICANT CONTENT (Dashboard & inner pages) Fix: hardcoded `text-white` headings & `text-muted` descriptions are invisible / too faint on the light background. ══════════════════════════════════════════════════════════════════ */ /* Page header — main title */ html.light-theme .applicant-page-header h1, html.light-theme .applicant-page-header h1.text-white, html.light-theme .applicant-main h1.text-white, html.light-theme .applicant-main-full h1.text-white, html.light-theme .applicant-main h1.fw-bold, html.light-theme .applicant-main-full h1.fw-bold { color: var(--text-primary) !important; text-shadow: none !important; } /* Page header subtitle / description */ html.light-theme .applicant-page-header p, html.light-theme .applicant-page-header .text-muted, html.light-theme .applicant-main .text-muted, html.light-theme .applicant-main-full .text-muted { color: var(--text-secondary) !important; } /* Permit card glass panel */ html.light-theme .permit-card { background: rgba(255, 255, 255, 0.82) !important; border-color: rgba(0, 0, 0, 0.07) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07) !important; } html.light-theme .permit-card:not(.permit-card-locked):hover { background: rgba(255, 255, 255, 0.95) !important; box-shadow: 0 12px 40px rgba(6, 182, 212, 0.15), 0 4px 20px rgba(0, 0, 0, 0.08) !important; } /* Locked cards — subtle light border instead of near-invisible white */ html.light-theme .permit-card-locked { border: 1px solid rgba(0, 0, 0, 0.08) !important; opacity: 0.80; } /* Card headings (h5.text-white) */ html.light-theme .permit-card h5.text-white, html.light-theme .permit-card h4.text-white, html.light-theme .permit-card h3.text-white { color: var(--text-primary) !important; text-shadow: none !important; } /* Card body text */ html.light-theme .permit-card .text-muted, html.light-theme .permit-card p.text-muted { color: var(--text-secondary) !important; } /* Permit tags */ html.light-theme .permit-tag { color: var(--text-secondary) !important; } /* Breadcrumb */ html.light-theme .applicant-breadcrumb { color: var(--text-muted) !important; } html.light-theme .applicant-breadcrumb .sep { color: var(--text-muted) !important; } /* General text-white inside applicant content areas */ html.light-theme .applicant-main .fw-bold.text-white, html.light-theme .applicant-main-full .fw-bold.text-white { color: var(--text-primary) !important; } /* Glass panel cards within applicant content */ html.light-theme .applicant-main .glass-panel, html.light-theme .applicant-main-full .glass-panel, html.light-theme .applicant-main .glass-card, html.light-theme .applicant-main-full .glass-card { background: rgba(255, 255, 255, 0.80) !important; border-color: rgba(0, 0, 0, 0.07) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07) !important; } /* ══════════════════════════════════════════════════════════════════ LIGHT THEME — PRE-EVALUATION PAGE (applicant submissions list + wizard) ══════════════════════════════════════════════════════════════════ */ /* Submission history cards */ html.light-theme .applicant-main .d-flex.flex-column.gap-4 > .glass-panel { background: rgba(255, 255, 255, 0.88) !important; border-color: rgba(0, 0, 0, 0.08) !important; } /* text-white inside submission cards → dark */ html.light-theme .applicant-main .text-white, html.light-theme .applicant-main h6.text-white, html.light-theme .applicant-main h5.text-white, html.light-theme .applicant-main h1.text-white, html.light-theme .applicant-main strong.text-white { color: var(--text-primary) !important; } /* text-white-50 (section sub-labels) → readable muted */ html.light-theme .applicant-main .text-white-50, html.light-theme .applicant-main h6.text-white-50 { color: var(--text-secondary) !important; } /* ── Status / Info Alert Boxes ───────────────────────────────────── */ /* "File Locked" info box (cyan) */ html.light-theme .applicant-main .alert.glass-panel[style*="rgba(6,182,212"] { background: rgba(6, 182, 212, 0.08) !important; border-color: rgba(6, 182, 212, 0.25) !important; } html.light-theme .applicant-main .alert.glass-panel .text-white-50 { color: #0f172a !important; } /* Rejection remarks box (red) */ html.light-theme .applicant-main [style*="rgba(239,68,68,0.06)"], html.light-theme .applicant-main [style*="rgba(239, 68, 68, 0.06)"] { background: rgba(239, 68, 68, 0.08) !important; border-color: rgba(239, 68, 68, 0.25) !important; } /* Supplemental requirements warning box (amber) — THE MAIN FIX */ html.light-theme .applicant-main [style*="rgba(245,158,11,0.06)"], html.light-theme .applicant-main [style*="rgba(245, 158, 11, 0.06)"] { background: rgba(245, 158, 11, 0.10) !important; border-color: rgba(245, 158, 11, 0.30) !important; } /* text-white inside any remark box → dark readable */ html.light-theme .applicant-main [style*="rgba(245,158,11"] p.text-white, html.light-theme .applicant-main [style*="rgba(239,68,68"] p.text-white, html.light-theme .applicant-main [style*="rgba(245, 158, 11"] p.text-white, html.light-theme .applicant-main [style*="rgba(239, 68, 68"] p.text-white { color: #0f172a !important; } /* ── Submission card inner detail panels ─────────────────────────── */ html.light-theme .applicant-main [style*="rgba(255,255,255,0.015)"], html.light-theme .applicant-main [style*="rgba(255, 255, 255, 0.015)"], html.light-theme .applicant-main [style*="rgba(255,255,255,0.02)"], html.light-theme .applicant-main [style*="rgba(255, 255, 255, 0.02)"] { background: rgba(248, 250, 252, 0.90) !important; border-color: rgba(0, 0, 0, 0.07) !important; } /* Quick summary grid dividers */ html.light-theme .applicant-main .row.text-white { color: var(--text-primary) !important; border-color: rgba(0, 0, 0, 0.07) !important; } html.light-theme .applicant-main .row.text-white.border-top, html.light-theme .applicant-main .row.text-white.border-bottom { border-color: rgba(0, 0, 0, 0.08) !important; } /* Document upload cards */ html.light-theme .applicant-main .document-upload-card { background: rgba(255, 255, 255, 0.85) !important; border-color: rgba(0, 0, 0, 0.08) !important; } html.light-theme .applicant-main .document-upload-card h6.text-white { color: var(--text-primary) !important; } /* Upload slot empty state */ html.light-theme .applicant-main .upload-slot-btn[style*="dashed"] { background: rgba(248, 250, 252, 0.95) !important; border-color: rgba(6, 182, 212, 0.35) !important; } /* Wizard step indicators */ html.light-theme .applicant-main .step-indicator .text-white, html.light-theme .applicant-main .step-indicator .fw-semibold.text-white { color: var(--text-primary) !important; } /* Wizard section headings (h5.text-white, h6.text-white-50) */ html.light-theme .applicant-main .wizard-step-section h5.text-white, html.light-theme .applicant-main .wizard-step-section h6 { color: var(--text-primary) !important; } html.light-theme .applicant-main .wizard-step-section h6.text-white-50 { color: var(--text-secondary) !important; } /* Form label text-white inside wizard */ html.light-theme .applicant-main .form-group-glass label.text-white, html.light-theme .applicant-main .form-label.text-white { color: var(--text-primary) !important; } /* Wizard progress connector line */ html.light-theme .applicant-main [style*="rgba(255,255,255,0.05)"][style*="height: 3px"], html.light-theme .applicant-main [style*="rgba(255,255,255,0.05)"][style*="height:3px"] { background: rgba(0, 0, 0, 0.08) !important; } /* Inactive wizard step circles */ html.light-theme .applicant-main .step-circle[style*="rgba(255,255,255,0.05)"] { background: rgba(0, 0, 0, 0.06) !important; border-color: rgba(0, 0, 0, 0.15) !important; color: var(--text-secondary) !important; } /* Validation error alert in wizard */ html.light-theme .applicant-main .alert.glass-panel[style*="rgba(239,68,68,0.12)"] { background: rgba(239, 68, 68, 0.08) !important; } html.light-theme .applicant-main .alert ul.text-white li { color: #7f1d1d !important; } /* Wizard border-bottom separators inside glass panels */ html.light-theme .applicant-main .glass-panel .border-bottom[style*="rgba(255,255,255,0.06)"] { border-color: rgba(0, 0, 0, 0.07) !important; } /* ══════════════════════════════════════════════════════════════════ LIGHT THEME — AUTH PAGE (Login / Register) ══════════════════════════════════════════════════════════════════ */ /* Outer page background — keep the background image more vivid in light mode */ html.light-theme .auth-bg { background: linear-gradient(135deg, rgba(224, 242, 254, 0.55) 0%, rgba(240, 249, 255, 0.60) 100%), var(--auth-bg-image) no-repeat center center !important; background-size: cover !important; } /* Luxury card wrapper — crisp white glass */ html.light-theme .auth-luxury-wrapper { background: rgba(255, 255, 255, 0.88) !important; border: 1px solid rgba(6, 182, 212, 0.18) !important; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(255,255,255,0.6) !important; } /* Left visual column — let the beach photo breathe with a subtle light tint */ html.light-theme .luxury-visual-col { background: linear-gradient(160deg, rgba(6, 182, 212, 0.22) 0%, rgba(16, 185, 129, 0.18) 100%), var(--auth-bg-image) no-repeat center center !important; background-size: cover !important; } /* Keep all text in the visual column white — it sits on the photo */ html.light-theme .luxury-visual-col, html.light-theme .luxury-visual-col * { color: #ffffff !important; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45) !important; } html.light-theme .luxury-visual-col .text-secondary, html.light-theme .luxury-visual-col .text-muted { color: rgba(255, 255, 255, 0.88) !important; } html.light-theme .luxury-visual-col .text-glow { color: #06b6d4 !important; text-shadow: 0 0 12px rgba(6, 182, 212, 0.7), 0 1px 4px rgba(0,0,0,0.4) !important; } html.light-theme .luxury-visual-col .eco-badge { background: rgba(16, 185, 129, 0.25) !important; border-color: rgba(16, 185, 129, 0.55) !important; color: #ffffff !important; text-shadow: none !important; } html.light-theme .luxury-visual-col .brand-logo-container { background: rgba(255, 255, 255, 0.18) !important; border-color: rgba(255, 255, 255, 0.35) !important; } html.light-theme .luxury-visual-col .telemetry-widget { background: rgba(255, 255, 255, 0.15) !important; border-color: rgba(255, 255, 255, 0.3) !important; backdrop-filter: blur(10px) !important; } /* Glow orbs — more subtle in light mode */ html.light-theme .auth-glow-orb { opacity: 0.06 !important; } /* Right form column — clean white surface with strong dark text */ html.light-theme .form-luxury-col { background: transparent; } /* Form heading and labels in light mode */ html.light-theme .form-luxury-col h3.text-white, html.light-theme .form-luxury-col .text-white { color: var(--text-primary) !important; text-shadow: none !important; } html.light-theme .form-luxury-col .text-secondary { color: var(--text-secondary) !important; } html.light-theme .form-luxury-col .text-muted { color: var(--text-muted) !important; } /* Form inputs inside the auth form — only target glass variant to avoid conflicting with Bootstrap's .form-control floating-label padding */ html.light-theme .form-luxury-col .form-floating > .form-control-glass { background: rgba(255, 255, 255, 0.95) !important; border-color: rgba(0, 0, 0, 0.15) !important; color: #0f172a !important; /* Preserve correct floating-label padding */ height: calc(3.5rem + 2px) !important; padding: 1.625rem 0.75rem 0.625rem !important; } html.light-theme .form-luxury-col .form-control-glass:focus { border-color: #0891b2 !important; box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.18) !important; } /* ── Fix floating label overlap in light mode ────────────────────────────── In dark mode the dark input background hides the placeholder text when the label rests on top of it. In light mode the white background is transparent-enough that both the label AND the placeholder are visible at the same time. Solution: hide the placeholder while the field is unfocused (the label covers that area), then reveal it when the label floats up on focus so the user still gets the hint text. */ html.light-theme .form-luxury-col .form-control-glass:not(:focus)::placeholder { color: transparent !important; } html.light-theme .form-luxury-col .form-control-glass:focus::placeholder { color: #94a3b8 !important; transition: color 0.2s ease; } /* Floating labels inside auth form */ html.light-theme .form-luxury-col .form-floating > label { color: #64748b !important; } html.light-theme .form-luxury-col .form-floating > .form-control-glass:focus ~ label, html.light-theme .form-luxury-col .form-floating > .form-control-glass:not(:placeholder-shown) ~ label { color: #0891b2 !important; background-color: #ffffff !important; } /* Remember me checkbox + label */ html.light-theme .form-luxury-col .form-check-input { background-color: rgba(0, 0, 0, 0.04) !important; border-color: rgba(0, 0, 0, 0.2) !important; } html.light-theme .form-luxury-col .form-check-label { color: var(--text-secondary) !important; } /* Submit / CTA button */ html.light-theme .form-luxury-col .btn-glass { background: rgba(8, 145, 178, 0.12) !important; border-color: rgba(8, 145, 178, 0.35) !important; color: #0f172a !important; } html.light-theme .form-luxury-col .btn-glass:hover { background: #0891b2 !important; color: #ffffff !important; border-color: #0891b2 !important; } /* Error alert in light mode */ html.light-theme .form-luxury-col .alert { background: rgba(220, 38, 38, 0.08) !important; border-color: rgba(220, 38, 38, 0.22) !important; } html.light-theme .form-luxury-col .alert li { color: #991b1b !important; } .text-primary { color: var(--text-primary) !important; } .text-secondary { color: var(--text-secondary) !important; } .text-muted { color: var(--text-muted) !important; } /* Global Transitions and Styles */ * { box-sizing: border-box; margin: 0; padding: 0; } /* ── Required field red asterisk (global, automatic) ───────────────────── Bootstrap form-floating: input[required] + label → appends * after label Standard layout: label:has(+ [required]) → same effect */ input[required] + label::after, select[required] + label::after, textarea[required] + label::after { content: ' *'; color: #ef4444; font-weight: 700; font-size: 0.85em; margin-left: 2px; text-shadow: 0 0 6px rgba(239, 68, 68, 0.5); } body { font-family: 'Inter', sans-serif; background: var(--bg-gradient); color: var(--text-primary); min-height: 100vh; overflow-x: hidden; position: relative; transition: background 0.5s ease, color 0.3s ease; } /* Background Glowing Orbs */ body::before, body::after { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; pointer-events: none; transition: background 0.5s ease; } body::before { background: var(--bg-glow-1); } body::after { background: var(--bg-glow-2); } h1, h2, h3, h4, h5, h6, .display-font { font-family: 'Outfit', sans-serif; font-weight: 600; letter-spacing: -0.02em; } a { color: var(--accent-primary); text-decoration: none; transition: all 0.3s ease; } a:hover { color: var(--accent-secondary); } /* Premium Unified Brand Logo Container (Emphasize Logo) */ .brand-logo-container { display: inline-block; padding: 0.65rem 0.9rem; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 16px; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.25), 0 0 20px 0 rgba(6, 182, 212, 0.15), inset 0 1px 1px 0 rgba(255, 255, 255, 0.12); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .brand-logo-container:hover { transform: scale(1.06) translateY(-2px); background: rgba(255, 255, 255, 0.08); border-color: rgba(6, 182, 212, 0.4) !important; box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.35), 0 0 28px 0 rgba(16, 185, 129, 0.3), inset 0 1px 1px 0 rgba(255, 255, 255, 0.2); } .brand-logo-img { height: 68px; max-width: 100%; object-fit: contain; filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.25)); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .brand-logo-container:hover .brand-logo-img { filter: drop-shadow(0 0 15px rgba(6, 182, 212, 0.55)) scale(1.04); } /* Glassmorphism Containers */ .glass-panel { background: var(--glass-bg); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); border: 1px solid var(--glass-border); border-radius: 16px; box-shadow: var(--glass-shadow); transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } /* Glass Cards & Hover Zoom */ .glass-card { background: var(--glass-bg); backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%); border: 1px solid var(--glass-border); border-radius: 14px; box-shadow: var(--glass-shadow); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; overflow: hidden; } .glass-card:hover { transform: translateY(-5px); box-shadow: var(--glass-shadow), 0 0 20px rgba(6, 182, 212, 0.05); background-color: var(--card-hover-bg); border-color: var(--glass-border-glow); } /* Glowing Neon Elements */ .text-glow { text-shadow: 0 0 10px var(--accent-primary); } .text-glow-purple { text-shadow: 0 0 10px var(--accent-secondary); } .border-glow { border-color: var(--glass-border-glow) !important; box-shadow: var(--accent-glow) !important; } /* Glass Buttons with Glows */ .btn-glass { background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--glass-border); color: var(--text-primary); border-radius: 10px; padding: 0.5rem 1.25rem; font-weight: 500; transition: all 0.3s ease; } .btn-glass:hover { background: var(--accent-primary); color: #ffffff !important; border-color: var(--accent-primary); box-shadow: 0 0 15px rgba(6, 182, 212, 0.4); transform: scale(1.02); } .btn-glass-secondary { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--glass-border); color: var(--text-secondary); border-radius: 10px; padding: 0.5rem 1.25rem; transition: all 0.3s ease; } .btn-glass-secondary:hover { background: rgba(255, 255, 255, 0.12); color: var(--text-primary); border-color: rgba(255, 255, 255, 0.25); transform: scale(1.02); } .btn-glass-success { background: rgba(16, 185, 129, 0.1); backdrop-filter: blur(8px); border: 1px solid rgba(16, 185, 129, 0.2); color: var(--text-primary); border-radius: 10px; transition: all 0.3s ease; } .btn-glass-success:hover { background: var(--accent-success); color: white !important; border-color: var(--accent-success); box-shadow: 0 0 15px rgba(16, 185, 129, 0.3); } .btn-glass-danger { background: rgba(239, 68, 68, 0.1); backdrop-filter: blur(8px); border: 1px solid rgba(239, 68, 68, 0.2); color: var(--text-primary); border-radius: 10px; transition: all 0.3s ease; } .btn-glass-danger:hover { background: var(--accent-danger); color: white !important; border-color: var(--accent-danger); box-shadow: 0 0 15px rgba(239, 68, 68, 0.3); } /* Glass Inputs & Floating Labels */ .form-control-glass { background: var(--input-bg); border: 1px solid var(--glass-border); color: var(--text-primary) !important; border-radius: 10px; padding: 0.75rem 1rem; backdrop-filter: blur(5px); transition: all 0.3s ease; } .form-control-glass:focus { background: var(--input-bg); border-color: var(--input-focus-border); box-shadow: 0 0 12px rgba(6, 182, 212, 0.25); outline: none; } .form-control-glass::placeholder { color: var(--text-muted); } .form-select-glass { display: block; width: 100%; padding: 0.75rem 2.25rem 0.75rem 1rem !important; font-size: 0.88rem; font-weight: 400; line-height: 1.5; background-color: var(--input-bg) !important; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2306b6d4' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important; background-repeat: no-repeat !important; background-position: right 1rem center !important; background-size: 14px 10px !important; border: 1px solid var(--glass-border) !important; color: var(--text-primary) !important; border-radius: 10px !important; backdrop-filter: blur(5px); appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; transition: all 0.3s ease; } .form-select-glass:focus { border-color: var(--input-focus-border) !important; box-shadow: 0 0 12px rgba(6, 182, 212, 0.25) !important; outline: none !important; } .form-select-glass option { background: #0f172a !important; color: #ffffff !important; } .form-select-glass:disabled { opacity: 0.7; background-color: rgba(0, 0, 0, 0.2) !important; } /* Ensure dropdowns inside form-floating containers align text and label correctly */ .form-floating > .form-select-glass { height: calc(3.5rem + 2px) !important; padding: 1.625rem 2.25rem 0.625rem 1rem !important; } /* Floating Label Glass styling overrides */ /* CSS variable for label chip background */ :root { --label-bg: #111827; } /* Ensure inputs inside .form-floating have correct Bootstrap padding and height */ .form-floating > .form-control-glass { height: calc(3.5rem + 2px) !important; padding: 1.625rem 0.75rem 0.625rem !important; } .form-floating > .form-control-glass:focus, .form-floating > .form-control-glass:not(:placeholder-shown) { padding-top: 1.625rem !important; padding-bottom: 0.625rem !important; } /* Base label — resting (placeholder) position */ .form-floating > label { color: var(--text-secondary); transition: all 0.2s ease-in-out; pointer-events: none; } /* Remove Bootstrap 5's default white background mask on floating labels */ .form-floating > label::after, .form-floating > .form-control:focus ~ label::after, .form-floating > .form-control:not(:placeholder-shown) ~ label::after, .form-floating > .form-control-glass:focus ~ label::after, .form-floating > .form-control-glass:not(:placeholder-shown) ~ label::after, .form-floating > .form-select ~ label::after, .form-floating > .form-select-glass ~ label::after { background-color: transparent !important; background: transparent !important; } /* Floated label (when input has value or is focused) */ .form-floating > .form-control-glass:focus ~ label, .form-floating > .form-control-glass:not(:placeholder-shown) ~ label, .form-floating > .form-select-glass ~ label, .form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-select ~ label { color: var(--accent-primary) !important; background-color: var(--label-bg) !important; padding: 0 6px !important; border-radius: 4px; height: auto !important; } /* Dark theme: fix focus glow to use cyan */ body.dark-theme .form-control-glass:focus, body.dark-theme .form-control:focus { box-shadow: 0 0 12px rgba(6, 182, 212, 0.25); } /* Glass Responsive Tables */ .table-glass { color: var(--text-primary) !important; border-collapse: separate !important; border-spacing: 0 8px !important; background: transparent !important; } .table-glass th { background: rgba(255, 255, 255, 0.03) !important; color: var(--text-secondary) !important; font-weight: 600; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em; border: none !important; padding: 1rem !important; } .table-glass td { background: rgba(255, 255, 255, 0.01) !important; color: var(--text-secondary) !important; border-top: 1px solid var(--glass-border) !important; border-bottom: 1px solid var(--glass-border) !important; padding: 1rem !important; vertical-align: middle !important; transition: all 0.2s ease; } .table-glass td:first-child { border-left: 1px solid var(--glass-border) !important; border-radius: 12px 0 0 12px !important; } .table-glass td:last-child { border-right: 1px solid var(--glass-border) !important; border-radius: 0 12px 12px 0 !important; } .table-glass tbody tr { transition: all 0.3s ease; } .table-glass tbody tr:hover td { background: var(--card-hover-bg) !important; border-color: var(--glass-border-glow) !important; transform: scale(1.002); } /* Custom Styled Status Badges */ .badge-glass-pending { background: rgba(245, 158, 11, 0.15); color: var(--accent-warning); border: 1px solid rgba(245, 158, 11, 0.3); padding: 0.35em 0.8em; font-weight: 500; border-radius: 20px; box-shadow: 0 0 10px rgba(245, 158, 11, 0.05); } .badge-glass-approved { background: rgba(16, 185, 129, 0.15); color: var(--accent-success); border: 1px solid rgba(16, 185, 129, 0.3); padding: 0.35em 0.8em; font-weight: 500; border-radius: 20px; box-shadow: 0 0 10px rgba(16, 185, 129, 0.05); } .badge-glass-rejected { background: rgba(239, 68, 68, 0.15); color: var(--accent-danger); border: 1px solid rgba(239, 68, 68, 0.3); padding: 0.35em 0.8em; font-weight: 500; border-radius: 20px; box-shadow: 0 0 10px rgba(239, 68, 68, 0.05); } /* ================================================== LAYOUT STRUCTURE (SIDEBAR, NAVBAR, WRAPPERS) ================================================== */ .app-wrapper { display: flex; min-height: 100vh; position: relative; } /* Sidebar Structure */ .sidebar { width: 260px; height: 100vh; position: fixed; top: 0; left: 0; z-index: 1030; background: var(--sidebar-bg); backdrop-filter: blur(25px) saturate(180%); -webkit-backdrop-filter: blur(25px) saturate(180%); border-right: 1px solid var(--glass-border); transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); display: flex; flex-direction: column; } .sidebar-brand { padding: 1.5rem 1.5rem; border-bottom: 1px solid var(--glass-border); } .sidebar-menu { list-style: none; padding: 1.5rem 0.75rem; flex-grow: 1; overflow-y: auto; } .sidebar-item { margin-bottom: 0.5rem; } .sidebar-link { display: flex; align-items: center; padding: 0.75rem 1rem; color: var(--text-secondary); border-radius: 10px; font-weight: 500; transition: all 0.3s ease; } .sidebar-link i { width: 24px; font-size: 1.1rem; margin-right: 0.75rem; transition: transform 0.3s ease; } .sidebar-link:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.04); } .sidebar-link:hover i { transform: scale(1.1); } .sidebar-link.active { color: #ffffff; background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%); box-shadow: 0 4px 15px rgba(6, 182, 212, 0.25); } /* Sidebar Sub-menu Specifics (Libraries collapse support) */ .sidebar-link[aria-expanded="true"] .sub-menu-arrow { transform: rotate(180deg); } .sub-menu-arrow { font-size: 0.75rem; transition: transform 0.3s ease; } /* Top Navigation Bar */ .top-navbar { height: 70px; background: var(--glass-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--glass-border); display: flex; align-items: center; padding: 0 2rem; position: sticky; top: 0; z-index: 1020; } /* Main Content Area */ .content-wrapper { flex-grow: 1; margin-left: 260px; min-height: 100vh; display: flex; flex-direction: column; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .main-content { flex-grow: 1; padding: 2rem; } /* Footer styling */ .footer { padding: 1.25rem 2rem; border-top: 1px solid var(--glass-border); background: var(--glass-bg); backdrop-filter: blur(10px); text-align: center; color: var(--text-muted); font-size: 0.85rem; } /* ================================================== LIGHT / DARK THEME TOGGLE SWITCH ================================================== */ .theme-toggle-btn { display: flex; align-items: center; gap: 0.5rem; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 50px; padding: 0.3rem 0.75rem; cursor: pointer; color: var(--text-secondary); font-size: 0.8rem; font-weight: 600; transition: all 0.3s ease; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); white-space: nowrap; user-select: none; } .theme-toggle-btn:hover { border-color: var(--glass-border-glow); color: var(--text-primary); box-shadow: var(--accent-glow); transform: translateY(-1px); } /* The pill track */ .theme-switch-wrapper { display: flex; align-items: center; gap: 0.4rem; } .theme-switch { display: inline-block; height: 22px; position: relative; width: 42px; flex-shrink: 0; } .theme-switch input { display: none; } .slider { background-color: rgba(255, 255, 255, 0.15); border: 1px solid var(--glass-border); bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: background 0.35s ease, border-color 0.35s ease; border-radius: 34px; } .slider:before { background-color: #fff; bottom: 2px; content: ""; height: 16px; left: 3px; position: absolute; transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1); width: 16px; border-radius: 50%; box-shadow: 0 2px 5px rgba(0,0,0,0.3); } input:checked + .slider { background-color: var(--accent-primary); border-color: var(--accent-primary); } input:checked + .slider:before { transform: translateX(20px); background-color: #ffffff; } /* Icon on each side of the toggle */ .theme-switch-icon { font-size: 0.85rem; line-height: 1; transition: color 0.3s ease; } /* Mobile Toggling */ .mobile-toggle { display: none; background: transparent; border: none; color: var(--text-primary); font-size: 1.5rem; cursor: pointer; margin-right: 1rem; transition: all 0.3s ease; } /* Scrollbar Style overrides */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.05); } ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: var(--accent-primary); } /* ================================================== RESPONSIVE DESIGN (MEDIA QUERIES) ================================================== */ @media (max-width: 991.98px) { .sidebar { transform: translateX(-100%); } .sidebar.show { transform: translateX(0); box-shadow: var(--glass-shadow), 0 0 30px rgba(0,0,0,0.5); } .content-wrapper { margin-left: 0; } .mobile-toggle { display: block; } } /* ================================================== AUTH TEMPLATE SPECIAL SPECIFICS ================================================== */ .auth-bg { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--auth-bg-overlay), var(--auth-bg-image) no-repeat center center; background-size: cover !important; padding: 1.5rem; position: relative; z-index: 1; transition: background 0.5s ease; } /* Complete Luxury Glass Card Container */ .auth-luxury-wrapper { background: var(--auth-card-bg); border: 1px solid var(--auth-card-border); backdrop-filter: blur(25px) saturate(180%); -webkit-backdrop-filter: blur(25px) saturate(180%); border-radius: 24px; box-shadow: var(--glass-shadow); overflow: hidden; max-width: 1100px; width: 100%; transition: background 0.5s ease, border-color 0.3s ease; } .luxury-visual-col { position: relative; background: var(--auth-visual-overlay), var(--auth-bg-image) no-repeat center center; background-size: cover !important; display: flex; flex-direction: column; justify-content: space-between; padding: 3.5rem; min-height: 600px; transition: background 0.5s ease; } .luxury-visual-col::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 10% 20%, rgba(6, 182, 212, 0.12) 0%, transparent 50%), radial-gradient(circle at 90% 80%, rgba(16, 185, 129, 0.12) 0%, transparent 50%); z-index: 1; pointer-events: none; } .eco-badge { background: rgba(16, 185, 129, 0.12); border: 1px solid rgba(16, 185, 129, 0.3); color: #10b981; box-shadow: 0 0 15px rgba(16, 185, 129, 0.1); font-size: 0.75rem; letter-spacing: 1px; text-transform: uppercase; font-weight: 600; } .playfair-heading { font-family: 'Playfair Display', serif; font-weight: 700; color: #ffffff; line-height: 1.2; } .telemetry-widget { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 16px; padding: 1.25rem; z-index: 10; } .tick-time { font-family: 'Outfit', sans-serif; font-weight: 800; letter-spacing: 1px; color: #ffffff; text-shadow: 0 0 10px rgba(255, 255, 255, 0.2); } .form-luxury-col { padding: 4rem 3.5rem; } /* Ambient floating keyframe animations for organic leaf effect */ .ambient-leaf { position: absolute; color: rgba(16, 185, 129, 0.12); pointer-events: none; z-index: 2; animation: floatLeaf 8s ease-in-out infinite alternate; } @keyframes floatLeaf { 0% { transform: translateY(0) rotate(0deg); } 100% { transform: translateY(-15px) rotate(10deg); } } @media (max-width: 991.98px) { .luxury-visual-col { display: none; } .form-luxury-col { padding: 3rem 2rem; } } /* Force bright, high-contrast text readability inside the tropical photographic column in both theme states */ .luxury-visual-col, .luxury-visual-col .text-white, .luxury-visual-col h1, .luxury-visual-col h2, .luxury-visual-col h3, .luxury-visual-col h4, .luxury-visual-col h5, .luxury-visual-col h6, .luxury-visual-col p, .luxury-visual-col span, .luxury-visual-col div, .luxury-visual-col small, .luxury-visual-col i, .luxury-visual-col .text-secondary, .luxury-visual-col .text-muted { color: #ffffff !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important; } .luxury-visual-col .text-secondary { color: rgba(255, 255, 255, 0.85) !important; } .luxury-visual-col .text-muted { color: rgba(255, 255, 255, 0.6) !important; } /* Specific glows and badges for left panel */ .luxury-visual-col .text-glow { color: #06b6d4 !important; text-shadow: 0 0 12px rgba(6, 182, 212, 0.6) !important; } .luxury-visual-col .text-glow-purple { color: #a855f7 !important; text-shadow: 0 0 12px rgba(168, 85, 247, 0.6) !important; } .luxury-visual-col .eco-badge { background: rgba(16, 185, 129, 0.2) !important; border-color: rgba(16, 185, 129, 0.5) !important; color: #10b981 !important; text-shadow: none !important; } .luxury-visual-col .telemetry-widget { background: rgba(255, 255, 255, 0.05) !important; border-color: rgba(255, 255, 255, 0.1) !important; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3) !important; } /* Floating animated elements on Auth screen */ .auth-glow-orb { position: absolute; border-radius: 50%; filter: blur(100px); z-index: -1; pointer-events: none; } .auth-glow-1 { width: 300px; height: 300px; background: var(--accent-primary); top: 15%; left: 20%; opacity: 0.18; } .auth-glow-2 { width: 400px; height: 400px; background: var(--accent-secondary); bottom: 10%; right: 15%; opacity: 0.15; } /* Split screen layout options */ .auth-split-wrapper { display: flex; max-width: 1000px; width: 100%; overflow: hidden; } .auth-split-form { flex: 1.2; padding: 3rem 2.5rem; } .auth-split-visual { flex: 1; background: linear-gradient(135deg, rgba(6, 182, 212, 0.12) 0%, rgba(168, 85, 247, 0.12) 100%); border-left: 1px solid var(--glass-border); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 3rem; position: relative; } @media (max-width: 767.98px) { .auth-split-visual { display: none; } .auth-split-form { padding: 2rem 1.5rem; } } /* ═══════════════════════════════════════════════════════════════════════════ YAJRA DATATABLES — GLASSMORPHISM THEME OVERRIDES ═══════════════════════════════════════════════════════════════════════════ */ /* ── Wrapper & Controls Row ───────────────────────────────────────────────── */ .dataTables_wrapper { color: var(--text-primary); } .dataTables_wrapper .dataTables_length label, .dataTables_wrapper .dataTables_filter label, .dataTables_wrapper .dataTables_info { color: var(--text-secondary) !important; font-size: 0.825rem; } /* ── Search Input ─────────────────────────────────────────────────────────── */ .dataTables_wrapper .dataTables_filter input { background: var(--input-bg) !important; border: 1px solid var(--glass-border) !important; border-radius: 8px !important; color: var(--text-primary) !important; padding: 0.45rem 0.85rem !important; font-size: 0.875rem !important; transition: border-color 0.25s ease, box-shadow 0.25s ease !important; margin-left: 0.5rem; min-width: 220px; } .dataTables_wrapper .dataTables_filter input:focus { outline: none !important; border-color: var(--input-focus-border) !important; box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.15) !important; } .dataTables_wrapper .dataTables_filter input::placeholder { color: var(--text-muted) !important; } /* ── Length Select ────────────────────────────────────────────────────────── */ .dataTables_wrapper .dataTables_length select { background: var(--input-bg) !important; border: 1px solid var(--glass-border) !important; border-radius: 8px !important; color: var(--text-primary) !important; padding: 0.35rem 0.7rem !important; font-size: 0.875rem !important; margin: 0 0.35rem; transition: border-color 0.25s ease !important; } .dataTables_wrapper .dataTables_length select:focus { outline: none !important; border-color: var(--input-focus-border) !important; } /* ── Pagination ───────────────────────────────────────────────────────────── */ .dataTables_wrapper .dataTables_paginate { margin-top: 0.75rem; } /* Reset Bootstrap defaults bleeding through */ .dataTables_wrapper .pagination { margin-bottom: 0; gap: 3px; } .dataTables_wrapper .pagination .page-item .page-link { background: rgba(255, 255, 255, 0.03) !important; border: 1px solid var(--glass-border) !important; color: var(--text-secondary) !important; border-radius: 6px !important; padding: 0.38rem 0.78rem !important; font-size: 0.8rem !important; transition: all 0.2s ease !important; box-shadow: none !important; line-height: 1.4; } .dataTables_wrapper .pagination .page-item .page-link:hover { background: var(--card-hover-bg) !important; border-color: var(--glass-border-glow) !important; color: var(--text-primary) !important; } .dataTables_wrapper .pagination .page-item.active .page-link, .dataTables_wrapper .pagination .page-item.active .page-link:hover { background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)) !important; border-color: transparent !important; color: #ffffff !important; box-shadow: 0 0 10px rgba(6, 182, 212, 0.3) !important; } .dataTables_wrapper .pagination .page-item.disabled .page-link, .dataTables_wrapper .pagination .page-item.disabled .page-link:hover { background: rgba(255, 255, 255, 0.01) !important; border-color: rgba(255, 255, 255, 0.04) !important; color: var(--text-muted) !important; cursor: not-allowed !important; opacity: 0.5; } /* ── Info Text ────────────────────────────────────────────────────────────── */ .dataTables_wrapper .dataTables_info { padding-top: 0.85rem; font-size: 0.8rem; } /* ── Sorting Icons ────────────────────────────────────────────────────────── */ table.dataTable thead th.sorting, table.dataTable thead th.sorting_asc, table.dataTable thead th.sorting_desc { cursor: pointer; } table.dataTable thead th.sorting::after, table.dataTable thead th.sorting_asc::after, table.dataTable thead th.sorting_desc::after { opacity: 0.5; } table.dataTable thead th.sorting_asc::after { color: var(--accent-primary); opacity: 1; } table.dataTable thead th.sorting_desc::after { color: var(--accent-secondary); opacity: 1; } /* ── Processing Indicator ─────────────────────────────────────────────────── */ .dataTables_wrapper .dataTables_processing { background: rgba(15, 23, 42, 0.88) !important; border: 1px solid var(--glass-border) !important; border-radius: 10px !important; color: var(--text-primary) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important; backdrop-filter: blur(16px) !important; font-size: 0.875rem !important; padding: 1rem 1.5rem !important; } .dt-processing-glass { display: flex; align-items: center; justify-content: center; color: var(--text-secondary); font-size: 0.875rem; } /* ───────────────────────────────────────────────────────────────────────────── PREMIUM MODAL & ACCORDION GLASS STYLING OVERRIDES ───────────────────────────────────────────────────────────────────────────── */ .modal-glass .modal-content { background: rgba(9, 13, 22, 0.95) !important; backdrop-filter: blur(25px) saturate(180%) !important; -webkit-backdrop-filter: blur(25px) saturate(180%) !important; border: 1px solid rgba(6, 182, 212, 0.25) !important; border-radius: 18px !important; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55), 0 0 35px rgba(6, 182, 212, 0.18), inset 0 1px 1px rgba(255, 255, 255, 0.08) !important; color: var(--text-primary) !important; transition: all 0.3s ease; } .modal-glass .modal-header { border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important; background: rgba(255, 255, 255, 0.01); padding: 1.25rem 1.75rem !important; } .modal-glass .modal-footer { border-top: 1px solid rgba(255, 255, 255, 0.07) !important; background: rgba(255, 255, 255, 0.01); padding: 1rem 1.75rem !important; } .modal-glass .btn-close { filter: invert(1) grayscale(1) brightness(2); opacity: 0.7; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); } .modal-glass .btn-close:hover { opacity: 1; transform: rotate(90deg); } .modal-glass .nav-tabs-glass { border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .modal-glass .nav-tabs-glass .nav-link { color: var(--text-muted); border: none; background: transparent; padding: 0.8rem 1.5rem; font-weight: 600; font-size: 0.85rem; transition: all 0.3s ease; border-radius: 8px 8px 0 0; letter-spacing: 0.5px; } .modal-glass .nav-tabs-glass .nav-link:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.02); } .modal-glass .nav-tabs-glass .nav-link.active { color: var(--accent-primary) !important; border-bottom: 2px solid var(--accent-primary) !important; background: rgba(6, 182, 212, 0.04) !important; text-shadow: 0 0 10px rgba(6, 182, 212, 0.3); } .modal-glass .accordion-glass .accordion-item { background: rgba(255, 255, 255, 0.01) !important; border: 1px solid rgba(255, 255, 255, 0.05) !important; border-radius: 10px !important; margin-bottom: 0.65rem; overflow: hidden; transition: all 0.25s ease; } .modal-glass .accordion-glass .accordion-item:hover { border-color: rgba(6, 182, 212, 0.15) !important; background: rgba(255, 255, 255, 0.02) !important; } .modal-glass .accordion-glass .accordion-button { background: rgba(255, 255, 255, 0.01) !important; color: #ffffff !important; border: none !important; font-size: 0.85rem; font-weight: 600; padding: 1rem 1.25rem; box-shadow: none !important; transition: all 0.25s ease; } .modal-glass .accordion-glass .accordion-button:not(.collapsed) { color: var(--accent-primary) !important; background: rgba(6, 182, 212, 0.04) !important; text-shadow: 0 0 8px rgba(6, 182, 212, 0.2); } .modal-glass .accordion-glass .accordion-button::after { filter: invert(1) brightness(1.8); transition: transform 0.25s ease; } .modal-glass .accordion-glass .accordion-body { padding: 1.25rem 1.5rem !important; background: rgba(0, 0, 0, 0.15); border-top: 1px solid rgba(255, 255, 255, 0.04) !important; } .modal-glass .requirements-list { margin: 0; padding-left: 1.25rem; list-style: none; } .modal-glass .requirements-list li { position: relative; padding-left: 1.5rem; margin-bottom: 0.5rem; font-size: 0.8rem; color: var(--text-secondary); } .modal-glass .requirements-list li::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: 0; top: 1px; color: var(--accent-success); font-size: 0.72rem; text-shadow: 0 0 6px rgba(16, 185, 129, 0.4); } .modal-glass .requirements-list li.sub-item { color: var(--text-muted); font-size: 0.75rem; margin-left: 1rem; } .modal-glass .requirements-list li.sub-item::before { content: "\f105"; color: var(--accent-primary); } /* ── Empty / Zero Records ─────────────────────────────────────────────────── */ table.dataTable tbody td.dataTables_empty { text-align: center; padding: 2rem !important; color: var(--text-muted) !important; } /* ── Top/Bottom spacing ───────────────────────────────────────────────────── */ .dataTables_wrapper .row:first-child { margin-bottom: 1rem; align-items: center; } .dataTables_wrapper .row:last-child { margin-top: 0.5rem; align-items: center; } /* ── SweetAlert2 Button Spacing & Layout Overrides ───────────────────────── */ .swal2-actions { gap: 16px !important; } .swal2-actions button { margin: 0 12px !important; /* Forces generous physical spacing between prompts */ } /* ── Premium Pulsing Status Indicators ───────────────────────────────────── */ .status-pulse-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background-color: currentColor; vertical-align: middle; box-shadow: 0 0 8px currentColor; animation: statusPulseDot 2s infinite ease-in-out; } @keyframes statusPulseDot { 0% { opacity: 0.45; transform: scale(0.85); box-shadow: 0 0 6px currentColor; } 50% { opacity: 1; transform: scale(1.2); box-shadow: 0 0 14px currentColor; } 100% { opacity: 0.45; transform: scale(0.85); box-shadow: 0 0 6px currentColor; } }