/* ========================================================================== SHAIFEK DESIGN SYSTEM v3 Attendance Tracking System by Geospatial Intelligence Systems Brand Colors: #b5dbff · #2fafe6 · #006df4 · #000242 ========================================================================== */ /* -------------------------------------------------------------------------- 1. DESIGN TOKENS -------------------------------------------------------------------------- */ :root { /* Brand Palette (from GEO-SIS guidelines) */ --shaifek-primary: #006df4; /* Core blue */ --shaifek-primary-dark: #0055cc; --shaifek-primary-light: #e8f1ff; --shaifek-primary-rgb: 0, 109, 244; --shaifek-accent: #2fafe6; /* Cyan accent */ --shaifek-accent-light: #e0f6fd; --shaifek-navy: #000242; /* Deep navy for text & headings */ --shaifek-navy-rgb: 0, 2, 66; --shaifek-sky: #b5dbff; /* Soft sky blue for tints */ --shaifek-secondary: #E63946; /* Red accent for alerts */ --shaifek-secondary-light: #fde8ea; /* Neutrals */ --shaifek-bg: #F2F6FC; --shaifek-card-bg: #FFFFFF; --shaifek-text: #0a1128; /* Very dark — high contrast */ --shaifek-text-secondary: #3d4f6f; --shaifek-text-light: #7b8eb5; --shaifek-text-muted: #9aa8c7; --shaifek-border: #dce4f0; --shaifek-border-light: #eaf0f9; /* Status */ --shaifek-success: #0bb783; --shaifek-success-light: #e1f8f0; --shaifek-danger: #E63946; --shaifek-danger-light: #fde8ea; --shaifek-warning: #F59E0B; --shaifek-warning-light: #fef3d6; /* Typography */ --shaifek-font-en: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --shaifek-font-ar: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif; /* Geometry */ --shaifek-radius-sm: 8px; --shaifek-radius: 12px; --shaifek-radius-lg: 16px; --shaifek-radius-xl: 20px; --shaifek-radius-pill: 50px; /* Shadows */ --shaifek-shadow-sm: 0 1px 3px rgba(0, 2, 66, 0.04); --shaifek-shadow-card: 0 2px 8px rgba(0, 2, 66, 0.06); --shaifek-shadow-lg: 0 12px 32px rgba(0, 2, 66, 0.1); --shaifek-shadow-primary: 0 6px 20px rgba(0, 109, 244, 0.25); /* Transitions */ --shaifek-transition: 0.2s ease; --shaifek-transition-slow: 0.3s ease; /* Layout */ --shaifek-sidebar-width: 17.875rem; } /* Dark mode — uses .dark class on , set by Phoenix config.js */ .dark { --shaifek-bg: #121317; --shaifek-card-bg: #1a1b21; --shaifek-text: #e2e4e9; --shaifek-text-secondary: #a8adb8; --shaifek-text-light: #787d8a; --shaifek-text-muted: #555962; --shaifek-border: #2a2c34; --shaifek-border-light: #232530; --shaifek-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25); --shaifek-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.35); --shaifek-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.4); --shaifek-shadow-primary: 0 6px 20px rgba(0, 109, 244, 0.2); --shaifek-primary-light: rgba(0, 109, 244, 0.15); --shaifek-accent-light: rgba(47, 175, 230, 0.12); --shaifek-success-light: rgba(11, 183, 131, 0.12); --shaifek-danger-light: rgba(230, 57, 70, 0.12); --shaifek-warning-light: rgba(245, 158, 11, 0.12); --shaifek-secondary-light: rgba(230, 57, 70, 0.12); } /* -------------------------------------------------------------------------- 2. GLOBAL BASE -------------------------------------------------------------------------- */ body { font-family: var(--shaifek-font-en) !important; color: var(--shaifek-text-secondary); background-color: var(--shaifek-bg) !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.01em; font-size: 0.875rem; } html[dir="rtl"] body, html[lang="ar"] body { font-family: var(--shaifek-font-ar) !important; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--shaifek-font-en) !important; font-weight: 700; color: var(--shaifek-text); letter-spacing: -0.02em; } html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6 { font-family: var(--shaifek-font-ar) !important; } a { color: var(--shaifek-primary); text-decoration: none; } a:hover { color: var(--shaifek-primary-dark); } /* -------------------------------------------------------------------------- 3. SIDEBAR -------------------------------------------------------------------------- */ .navbar-vertical { background: var(--shaifek-card-bg) !important; border-right: 1px solid var(--shaifek-border) !important; box-shadow: none !important; } .dark .navbar-vertical { background: var(--shaifek-card-bg) !important; border-right-color: var(--shaifek-border) !important; } html[dir="rtl"] .navbar-vertical { border-left: 1px solid var(--shaifek-border) !important; border-right: none !important; } /* Sidebar top padding (to clear fixed navbar) */ .navbar-vertical .navbar-vertical-content { padding-top: 0.75rem; } /* Section labels */ .navbar-vertical-label, .shaifek-nav-section-label { color: var(--shaifek-text-muted) !important; font-size: 0.65rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; padding: 1.25rem 1.25rem 0.35rem !important; margin: 0 !important; } /* Nav links */ .navbar-vertical .navbar-vertical-content .navbar-nav .nav-link { color: var(--shaifek-text-secondary) !important; padding: 0.5rem 1rem !important; margin: 1px 0.5rem; border-radius: var(--shaifek-radius-sm); font-size: 0.85rem; font-weight: 500; transition: all var(--shaifek-transition); position: relative; } .navbar-vertical .navbar-vertical-content .navbar-nav .nav-link:hover { color: var(--shaifek-text) !important; background-color: var(--shaifek-primary-light) !important; } .navbar-vertical .navbar-vertical-content .navbar-nav .nav-link.active { color: var(--shaifek-primary) !important; background: var(--shaifek-primary-light) !important; font-weight: 600; } /* Active indicator line */ .navbar-vertical .navbar-vertical-content .navbar-nav .nav-link.active::before { content: ''; position: absolute; right: -0.5rem; top: 15%; height: 70%; width: 4px; background: linear-gradient(180deg, var(--shaifek-accent) 0%, var(--shaifek-primary) 100%); border-radius: 4px 0 0 4px; } html[dir="rtl"] .navbar-vertical .navbar-vertical-content .navbar-nav .nav-link.active::before { right: auto; left: -0.5rem; border-radius: 0 4px 4px 0; } /* Nav icons */ .navbar-vertical .nav-link-icon { width: 1.35rem; min-width: 1.35rem; text-align: center; font-size: 0.95rem; color: var(--shaifek-text-light) !important; transition: color var(--shaifek-transition); } .navbar-vertical .nav-link.active .nav-link-icon { color: var(--shaifek-primary) !important; } .navbar-vertical-line { display: none !important; } .navbar-vertical .navbar-vertical-footer { border-top: 1px solid var(--shaifek-border) !important; background: transparent !important; } /* -------------------------------------------------------------------------- 4. TOP NAVIGATION BAR -------------------------------------------------------------------------- */ .navbar-top { background-color: var(--shaifek-card-bg) !important; border-bottom: 1px solid var(--shaifek-border) !important; box-shadow: var(--shaifek-shadow-sm) !important; padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; z-index: 1050; } .dark .navbar-top { background-color: var(--shaifek-card-bg) !important; border-bottom-color: var(--shaifek-border) !important; } .navbar-top .logo-text { color: var(--shaifek-text) !important; font-weight: 700; font-size: 0.95rem; line-height: 1.2; display: block; } .navbar-top .shaifek-school-info { color: var(--shaifek-primary-dark) !important; font-size: 1.1rem; font-weight: 500; display: block; line-height: 1.2; margin-top: 1px; } .navbar-top .nav-link { color: var(--shaifek-text-light) !important; } .navbar-top .nav-link:hover { color: var(--shaifek-primary) !important; } /* Top nav language switcher */ .shaifek-lang-toggle { display: inline-flex; align-items: center; gap: 0.5rem; border: 1px solid var(--shaifek-border); border-radius: var(--shaifek-radius-sm); background-color: var(--shaifek-card-bg); color: var(--shaifek-text) !important; padding: 0.45rem 0.85rem; font-weight: 600; font-size: 0.8rem; cursor: pointer; text-decoration: none !important; } .shaifek-lang-toggle:hover { border-color: var(--shaifek-primary); } .shaifek-lang-flag { width: 20px; height: 15px; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 2, 66, 0.08); flex-shrink: 0; } .dropdown-menu .dropdown-item.active .shaifek-lang-flag { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6); } /* Help button */ .shaifek-help-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 1rem; font-size: 0.8rem; font-weight: 600; color: var(--shaifek-primary) !important; background: var(--shaifek-primary-light); border: none; border-radius: var(--shaifek-radius-sm); text-decoration: none; transition: all var(--shaifek-transition); } .shaifek-help-btn:hover { background: var(--shaifek-sky); text-decoration: none; color: var(--shaifek-navy) !important; } /* User avatar */ .navbar-top .avatar img { border: 2px solid var(--shaifek-border); } /* -------------------------------------------------------------------------- 5. CONTENT AREA -------------------------------------------------------------------------- */ .content { background-color: var(--shaifek-bg); padding-top: 5.5rem !important; } /* -------------------------------------------------------------------------- 6. CARDS -------------------------------------------------------------------------- */ .card { background-color: var(--shaifek-card-bg); border: 1px solid var(--shaifek-border-light) !important; border-radius: var(--shaifek-radius-lg) !important; box-shadow: var(--shaifek-shadow-card) !important; transition: box-shadow var(--shaifek-transition-slow); margin-bottom: 1.25rem; } .card:hover { box-shadow: var(--shaifek-shadow-lg) !important; } .card-header { background-color: transparent; border-bottom: 1px solid var(--shaifek-border-light) !important; padding: 1.25rem 1.5rem 0.75rem; } .card-header h5, .card-header .h5 { font-size: 0.95rem; font-weight: 700; color: var(--shaifek-text); margin-bottom: 0; } .card-body { padding: 1.25rem 1.5rem; } /* -------------------------------------------------------------------------- 7. DASHBOARD — Greeting Banner -------------------------------------------------------------------------- */ .shaifek-greeting-card { background: linear-gradient(135deg, var(--shaifek-navy) 0%, var(--shaifek-primary) 50%, var(--shaifek-accent) 100%); border-radius: var(--shaifek-radius-lg) !important; padding: 2rem 2.25rem; color: #fff; position: relative; overflow: hidden; border: none; box-shadow: var(--shaifek-shadow-primary); } .shaifek-greeting-card::before { content: ''; position: absolute; top: -40%; right: -5%; width: 280px; height: 280px; border-radius: 50%; background: rgba(181, 219, 255, 0.1); pointer-events: none; } .shaifek-greeting-card::after { content: ''; position: absolute; bottom: -50%; left: 10%; width: 200px; height: 200px; border-radius: 50%; background: rgba(47, 175, 230, 0.08); pointer-events: none; } /* RTL: mirror gradient direction */ html[dir="rtl"] .shaifek-greeting-card { background: linear-gradient(225deg, var(--shaifek-navy) 0%, var(--shaifek-primary) 50%, var(--shaifek-accent) 100%); } /* RTL: large circle flips to top-LEFT */ html[dir="rtl"] .shaifek-greeting-card::before { right: auto; left: -5%; top: -40%; } /* RTL: subtle bottom circle flips to bottom-RIGHT */ html[dir="rtl"] .shaifek-greeting-card::after { left: auto; right: 10%; } .shaifek-greeting-card .greeting-text { font-size: 1.5rem; font-weight: 800; margin-bottom: 0.3rem; color: #fff; letter-spacing: -0.02em; } .shaifek-greeting-card .greeting-subtitle { font-size: 0.9rem; font-weight: 400; color: rgba(181, 219, 255, 0.9); } .shaifek-greeting-card .greeting-date { display: inline-flex; align-items: center; gap: 0.4rem; background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(4px); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: var(--shaifek-radius-sm); padding: 0.35rem 0.85rem; font-size: 0.75rem; font-weight: 600; margin-top: 0.85rem; color: #fff; } /* -------------------------------------------------------------------------- 8. DASHBOARD — Stat Cards -------------------------------------------------------------------------- */ .shaifek-stat-card { border: 1px solid var(--shaifek-border-light); border-radius: var(--shaifek-radius-lg) !important; background: var(--shaifek-card-bg); box-shadow: var(--shaifek-shadow-card); padding: 1.25rem 1.5rem; transition: all var(--shaifek-transition-slow); } .shaifek-stat-card:hover { box-shadow: var(--shaifek-shadow-lg); transform: translateY(-2px); } .shaifek-stat-card .shaifek-stat-icon { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; } .shaifek-stat-card .shaifek-stat-value { font-size: 1.75rem; font-weight: 800; color: var(--shaifek-text); line-height: 1; margin-bottom: 0.2rem; } .shaifek-stat-card .shaifek-stat-label { font-size: 0.8rem; color: var(--shaifek-text-light); font-weight: 600; } /* Stat icon tints */ .shaifek-stat-card.stat-blue .shaifek-stat-icon { background: var(--shaifek-primary-light); color: var(--shaifek-primary); } .shaifek-stat-card.stat-green .shaifek-stat-icon { background: var(--shaifek-success-light); color: var(--shaifek-success); } .shaifek-stat-card.stat-red .shaifek-stat-icon { background: var(--shaifek-danger-light); color: var(--shaifek-danger); } .shaifek-stat-card.stat-navy .shaifek-stat-icon { background: rgba(0, 2, 66, 0.06); color: var(--shaifek-navy); } .dark .shaifek-stat-card { background: var(--shaifek-card-bg); border-color: var(--shaifek-border); } .dark .shaifek-stat-card .shaifek-stat-value { color: var(--shaifek-text); } /* -------------------------------------------------------------------------- 9. DASHBOARD — Chart Card Badges -------------------------------------------------------------------------- */ .chart-badge-row { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; margin-top: 1rem; } .chart-badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.75rem; border-radius: var(--shaifek-radius-sm); font-size: 0.75rem; font-weight: 600; } .chart-badge.badge-green { background: var(--shaifek-success-light); color: var(--shaifek-success); } .chart-badge.badge-red { background: var(--shaifek-danger-light); color: var(--shaifek-danger); } .chart-badge.badge-blue { background: var(--shaifek-primary-light); color: var(--shaifek-primary); } /* -------------------------------------------------------------------------- 10. BUTTONS -------------------------------------------------------------------------- */ .btn { border-radius: var(--shaifek-radius-sm) !important; font-weight: 600; font-size: 0.825rem; padding: 0.5rem 1.25rem; letter-spacing: 0.01em; border: none !important; transition: all var(--shaifek-transition); } .btn-primary, .btn-phoenix-primary { background: linear-gradient(135deg, var(--shaifek-primary) 0%, var(--shaifek-accent) 100%) !important; color: #fff !important; box-shadow: var(--shaifek-shadow-primary); } .btn-primary:hover, .btn-phoenix-primary:hover { background: linear-gradient(135deg, var(--shaifek-primary-dark) 0%, var(--shaifek-primary) 100%) !important; box-shadow: 0 8px 24px rgba(0, 109, 244, 0.35); } .btn-success { background-color: var(--shaifek-success) !important; color: #fff !important; } .btn-danger { background-color: var(--shaifek-danger) !important; color: #fff !important; } .btn-outline-secondary { border: 1px solid var(--shaifek-border) !important; color: var(--shaifek-text-secondary) !important; background: transparent !important; } .btn-outline-secondary:hover { background: var(--shaifek-bg) !important; color: var(--shaifek-text) !important; } /* Soft buttons for table actions */ .btn-soft-primary { background-color: var(--shaifek-primary-light) !important; color: var(--shaifek-primary) !important; padding: 0.35rem 0.65rem; border-radius: 8px !important; } .btn-soft-success { background-color: var(--shaifek-success-light) !important; color: var(--shaifek-success) !important; padding: 0.35rem 0.65rem; border-radius: 8px !important; } .btn-soft-warning { background-color: var(--shaifek-warning-light) !important; color: #D97706 !important; padding: 0.35rem 0.65rem; border-radius: 8px !important; } .btn-soft-danger { background-color: var(--shaifek-danger-light) !important; color: var(--shaifek-danger) !important; padding: 0.35rem 0.65rem; border-radius: 8px !important; } .btn-soft-primary:hover, .btn-soft-success:hover, .btn-soft-warning:hover, .btn-soft-danger:hover { filter: brightness(0.95); } .dark .btn-soft-primary { background-color: rgba(0,109,244,0.15) !important; } .dark .btn-soft-success { background-color: rgba(11,183,131,0.15) !important; } .dark .btn-soft-danger { background-color: rgba(230,57,70,0.15) !important; } .dark .btn-soft-warning { background-color: rgba(245,158,11,0.15) !important; color: var(--shaifek-warning) !important; } /* Icon spacing in buttons */ .btn .fa, .btn .fas, .btn .far, .btn .bi { margin-right: 0.3rem; } html[dir="rtl"] .btn .fa, html[dir="rtl"] .btn .fas, html[dir="rtl"] .btn .far, html[dir="rtl"] .btn .bi { margin-right: 0; margin-left: 0.3rem; } /* -------------------------------------------------------------------------- 11. TABLES -------------------------------------------------------------------------- */ .table { border: none !important; margin-bottom: 0; } .table > thead > tr > th { background-color: var(--shaifek-bg) !important; color: var(--shaifek-text-secondary); font-weight: 700; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1px solid var(--shaifek-border) !important; padding: 0.75rem !important; white-space: nowrap; } .table > tbody > tr > td { padding: 0.75rem !important; vertical-align: middle; border-bottom: 1px solid var(--shaifek-border-light); font-size: 0.85rem; color: var(--shaifek-text); font-weight: 500; } .table > tbody > tr > td:first-child { padding-left: 0.75rem !important; } /* Remove zebra striping */ .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: transparent !important; color: inherit; } .table-striped > tbody > tr:hover > * { background-color: var(--shaifek-primary-light) !important; } .dark .table > thead > tr > th { color: var(--shaifek-text-light); background-color: rgba(255,255,255,0.03) !important; } .dark .table-striped > tbody > tr:hover > * { background-color: rgba(255,255,255,0.04) !important; } /* DataTables */ .dataTables_wrapper .dataTables_filter input { border: 1px solid var(--shaifek-border); border-radius: var(--shaifek-radius-sm); padding: 0.4rem 0.75rem; font-size: 0.85rem; } .dataTables_wrapper .dataTables_filter input:focus { border-color: var(--shaifek-primary); box-shadow: 0 0 0 3px var(--shaifek-primary-light); outline: none; } .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--shaifek-primary) !important; border-color: var(--shaifek-primary) !important; color: #fff !important; border-radius: var(--shaifek-radius-sm); } /* -------------------------------------------------------------------------- 12. FORM ELEMENTS -------------------------------------------------------------------------- */ .form-control { border: 1px solid var(--shaifek-border); border-radius: var(--shaifek-radius-sm); background-color: var(--shaifek-card-bg); padding: 0.55rem 0.85rem; font-size: 0.85rem; color: var(--shaifek-text); font-weight: 500; transition: border-color var(--shaifek-transition), box-shadow var(--shaifek-transition); } .form-select { border: 1px solid var(--shaifek-border); border-radius: var(--shaifek-radius-sm); background-color: var(--shaifek-card-bg); padding: 0.55rem 2.25rem 0.55rem 0.85rem; font-size: 0.85rem; color: var(--shaifek-text); font-weight: 500; transition: border-color var(--shaifek-transition), box-shadow var(--shaifek-transition); } .form-select-sm { padding-top: 0.25rem; padding-bottom: 0.25rem; padding-right: 2rem !important; padding-left: 0.5rem !important; } html[dir="rtl"] .form-select { padding: 0.55rem 0.85rem 0.55rem 2.25rem !important; } html[dir="rtl"] .form-select-sm { padding-left: 2rem !important; padding-right: 0.5rem !important; } .form-control:focus, .form-select:focus { background-color: var(--shaifek-card-bg); border-color: var(--shaifek-primary); box-shadow: 0 0 0 3px var(--shaifek-primary-light); } .dark .form-control, .dark .form-select { background-color: var(--shaifek-card-bg); border-color: var(--shaifek-border); color: var(--shaifek-text); } .form-label { font-weight: 600; color: var(--shaifek-text); font-size: 0.825rem; margin-bottom: 0.3rem; } label { margin-top: 8px; } .form-check-input:checked { background-color: var(--shaifek-primary); border-color: var(--shaifek-primary); } /* -------------------------------------------------------------------------- 13. BADGES -------------------------------------------------------------------------- */ .badge { font-weight: 600; font-size: 0.72rem; padding: 0.3rem 0.6rem; border-radius: 6px; } .badge.bg-success { background-color: var(--shaifek-success-light) !important; color: var(--shaifek-success) !important; } .badge.bg-danger { background-color: var(--shaifek-danger-light) !important; color: var(--shaifek-danger) !important; } .badge.bg-primary { background-color: var(--shaifek-primary-light) !important; color: var(--shaifek-primary) !important; } .badge.bg-warning { background-color: var(--shaifek-warning-light) !important; color: #92600C !important; } /* -------------------------------------------------------------------------- 14. MODALS -------------------------------------------------------------------------- */ .modal-content { border-radius: var(--shaifek-radius-lg) !important; border: none; box-shadow: var(--shaifek-shadow-lg); overflow: hidden; } .modal-header { border-bottom: 1px solid var(--shaifek-border-light); background: linear-gradient(135deg, var(--shaifek-primary-light) 0%, var(--shaifek-card-bg) 100%); padding: 1rem 1.25rem; } .modal-header .modal-title { font-weight: 700; font-size: 1rem; color: var(--shaifek-text); } .modal-footer { border-top: 1px solid var(--shaifek-border-light); padding: 0.75rem 1.25rem; } /* -------------------------------------------------------------------------- 15. DROPDOWN -------------------------------------------------------------------------- */ .dropdown-menu { border: 1px solid var(--shaifek-border-light) !important; border-radius: var(--shaifek-radius) !important; box-shadow: var(--shaifek-shadow-lg) !important; padding: 0.5rem; } .dropdown-menu .dropdown-item { border-radius: var(--shaifek-radius-sm); font-size: 0.85rem; padding: 0.5rem 0.75rem; color: var(--shaifek-text-secondary); } .dropdown-menu .dropdown-item:hover { background-color: var(--shaifek-primary-light); color: var(--shaifek-primary); } /* -------------------------------------------------------------------------- 16. LOGIN PAGE -------------------------------------------------------------------------- */ .shaifek-login-wrapper { min-height: 100vh; display: flex; } .shaifek-lang-switcher { position: fixed; top: 1.25rem; inset-inline-end: 1.25rem; z-index: 1000; display: flex; gap: 2px; background: #fff; border-radius: var(--shaifek-radius-pill); box-shadow: var(--shaifek-shadow-lg); padding: 4px; } .shaifek-lang-switcher a { padding: 0.4rem 0.9rem; border-radius: var(--shaifek-radius-pill); font-size: 0.8rem; font-weight: 600; color: var(--shaifek-text-secondary); text-decoration: none; transition: all var(--shaifek-transition); } .shaifek-lang-switcher a.active { background: var(--shaifek-primary); color: #fff; } .shaifek-lang-switcher a:not(.active):hover { background: var(--shaifek-primary-light); color: var(--shaifek-primary); } .dark .shaifek-lang-switcher { background: #1a1b21; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4); } .dark .shaifek-lang-switcher a { color: #9a9caa; } .dark .shaifek-lang-switcher a.active { background: var(--shaifek-accent); color: #0a1128; } .dark .shaifek-lang-switcher a:not(.active):hover { background: rgba(0, 109, 244, 0.15); color: var(--shaifek-accent); } @media (max-width: 480px) { .shaifek-lang-switcher { top: 0.75rem; inset-inline-end: 0.75rem; } .shaifek-lang-switcher a { padding: 0.35rem 0.7rem; font-size: 0.75rem; } } .shaifek-login-left { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; background-color: #02040f; } .shaifek-login-left-bg { position: absolute; inset: 0; background-size: contain; background-repeat: no-repeat; background-position: center; background-color: #02040f; } .shaifek-login-left-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0, 2, 66, 0.88) 0%, rgba(0, 109, 244, 0.75) 50%, rgba(47, 175, 230, 0.7) 100%); } .shaifek-login-left-content { position: relative; z-index: 1; color: #fff; padding: 3rem; max-width: 500px; } .shaifek-login-left-content h2 { color: #fff; font-size: 1.75rem; margin-bottom: 0.5rem; } .shaifek-login-left-content p { color: rgba(181, 219, 255, 0.9); font-size: 0.95rem; } .shaifek-login-left-features { margin-top: 2rem; display: flex; flex-direction: column; gap: 1rem; } .shaifek-login-left-features .feature-item { display: flex; align-items: center; gap: 0.75rem; font-size: 0.9rem; font-weight: 500; } .shaifek-login-left-features .feature-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: rgba(47, 175, 230, 0.2); border: 1px solid rgba(181, 219, 255, 0.15); font-size: 0.9rem; color: var(--shaifek-sky); } .shaifek-login-right { flex: 0 0 480px; display: flex; align-items: center; justify-content: center; padding: 2rem; background: var(--shaifek-card-bg); } .shaifek-login-card { width: 100%; max-width: 380px; } .shaifek-login-logo { text-align: center; margin-bottom: 2rem; } .shaifek-login-logo img { width: 56px; height: 56px; border-radius: 12px; margin-bottom: 0.75rem; } .shaifek-login-logo h3 { font-size: 1.25rem; margin-bottom: 0.15rem; } .shaifek-login-logo p { color: var(--shaifek-text-light); font-size: 0.8rem; } .shaifek-login-divider { text-align: center; font-size: 0.8rem; color: var(--shaifek-text-light); font-weight: 600; margin-bottom: 1.5rem; } .btn-login { width: 100%; background: linear-gradient(135deg, var(--shaifek-primary) 0%, var(--shaifek-accent) 100%) !important; color: #fff !important; font-weight: 600; padding: 0.65rem; border-radius: var(--shaifek-radius-sm) !important; box-shadow: var(--shaifek-shadow-primary); } .btn-login:hover { background: linear-gradient(135deg, var(--shaifek-primary-dark) 0%, var(--shaifek-primary) 100%) !important; box-shadow: 0 8px 24px rgba(0, 109, 244, 0.35); } .shaifek-login-footer { margin-top: 1.5rem; text-align: center; font-size: 0.75rem; } .shaifek-login-footer a { color: var(--shaifek-text-light); margin: 0 0.5rem; } .shaifek-login-footer .shaifek-powered-by { margin-top: 0.75rem; color: var(--shaifek-text-light); font-size: 0.7rem; } .shaifek-store-buttons { display: flex; gap: 0.75rem; justify-content: center; margin-top: 1rem; } .shaifek-store-buttons img { height: 36px; border-radius: 6px; } @media (max-width: 991px) { .shaifek-login-left { display: none; } .shaifek-login-right { flex: 1; } } /* -------------------------------------------------------------------------- 16b. CONTACT US — Button & Modal -------------------------------------------------------------------------- */ /* Standout Contact Us call-to-action button (above the footer links) */ .shaifek-contact-cta { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; margin-top: 1.25rem; padding: 0.65rem 1.25rem; background: var(--shaifek-primary-light); border: 1.5px solid var(--shaifek-primary); color: var(--shaifek-primary); font-weight: 600; font-size: 0.85rem; border-radius: var(--shaifek-radius-pill); cursor: pointer; transition: all var(--shaifek-transition); font-family: inherit; } .shaifek-contact-cta:hover { background: var(--shaifek-primary); color: #fff; box-shadow: var(--shaifek-shadow-primary); transform: translateY(-1px); } .shaifek-contact-cta-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--shaifek-primary); color: #fff; font-size: 0.7rem; flex-shrink: 0; transition: background var(--shaifek-transition), color var(--shaifek-transition); } .shaifek-contact-cta:hover .shaifek-contact-cta-icon { background: #fff; color: var(--shaifek-primary); } /* Modal */ .shaifek-contact-modal { border: none; border-radius: 16px; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 2, 66, 0.2); } .shaifek-contact-modal-header { background: linear-gradient(135deg, var(--shaifek-navy) 0%, var(--shaifek-primary) 60%, var(--shaifek-accent) 100%); color: #fff; padding: 1.5rem; border-bottom: none; } .shaifek-contact-modal-icon { width: 48px; height: 48px; background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: #fff; flex-shrink: 0; } .shaifek-contact-modal .modal-body { background: #fff; } .shaifek-contact-modal .form-label { font-size: 0.8rem; font-weight: 600; color: #555; margin-bottom: 6px; } /* Captcha (Google reCAPTCHA v2 widget) */ .shaifek-captcha-box { background: #f8f9fc; border: 1px solid #e3e6ed; border-radius: 10px; padding: 1rem 1.25rem; display: flex; justify-content: center; } /* Dark mode contact modal */ .dark .shaifek-contact-modal .modal-body, .dark .shaifek-contact-modal .modal-footer { background: #1a1b21; color: #c8cad0; } .dark .shaifek-contact-modal .form-label { color: #9a9caa; } .dark .shaifek-contact-modal .form-control { background: #24252d; border-color: #34353f; color: #e0e1e8; } .dark .shaifek-captcha-box { background: #24252d; border-color: #34353f; } .dark .shaifek-contact-cta { background: rgba(0, 109, 244, 0.12); border-color: var(--shaifek-accent); color: var(--shaifek-accent); } .dark .shaifek-contact-cta:hover { background: var(--shaifek-accent); color: #0a1128; } .dark .shaifek-contact-cta-icon { background: var(--shaifek-accent); color: #0a1128; } .dark .shaifek-contact-cta:hover .shaifek-contact-cta-icon { background: #0a1128; color: var(--shaifek-accent); } .text-brand-primary { color: var(--shaifek-primary) !important; } .text-brand-secondary { color: var(--shaifek-accent) !important; } .text-brand-navy { color: var(--shaifek-navy) !important; } /* Footer */ .shaifek-footer { border-top: 1px solid var(--shaifek-border-light); padding: 1rem; margin-top: 2rem; text-align: center; font-size: 0.75rem; color: var(--shaifek-text-light); } .shaifek-footer a { color: var(--shaifek-primary); font-weight: 600; } /* Scrollbar */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--shaifek-border); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--shaifek-text-light); } /* -------------------------------------------------------------------------- 18. RESPONSIVE -------------------------------------------------------------------------- */ @media (max-width: 576px) { .shaifek-stat-card { padding: 1rem; } .shaifek-stat-card .shaifek-stat-value { font-size: 1.35rem; } .shaifek-stat-card .shaifek-stat-icon { width: 40px; height: 40px; font-size: 1rem; } .shaifek-greeting-card { padding: 1.25rem; } .shaifek-greeting-card .greeting-text { font-size: 1.1rem; } } /* -------------------------------------------------------------------------- 19. DATATABLES RTL SORT ICON FIXES -------------------------------------------------------------------------- */ html[dir="rtl"] table.dataTable>thead>tr>th:not(.sorting_disabled), html[dir="rtl"] table.dataTable>thead>tr>td:not(.sorting_disabled) { padding-left: 30px !important; padding-right: 15px !important; } html[dir="rtl"] table.dataTable>thead .sorting::before, html[dir="rtl"] table.dataTable>thead .sorting_asc::before, html[dir="rtl"] table.dataTable>thead .sorting_desc::before, html[dir="rtl"] table.dataTable>thead .sorting_asc_disabled::before, html[dir="rtl"] table.dataTable>thead .sorting_desc_disabled::before { left: 15px !important; right: auto !important; } html[dir="rtl"] table.dataTable>thead .sorting::after, html[dir="rtl"] table.dataTable>thead .sorting_asc::after, html[dir="rtl"] table.dataTable>thead .sorting_desc::after, html[dir="rtl"] table.dataTable>thead .sorting_asc_disabled::after, html[dir="rtl"] table.dataTable>thead .sorting_desc_disabled::after { left: 8px !important; right: auto !important; } /* Small tables */ html[dir="rtl"] table.dataTable.table-sm>thead>tr>th:not(.sorting_disabled) { padding-left: 20px !important; padding-right: 8px !important; } html[dir="rtl"] table.dataTable.table-sm .sorting::before, html[dir="rtl"] table.dataTable.table-sm .sorting_asc::before, html[dir="rtl"] table.dataTable.table-sm .sorting_desc::before { left: 8px !important; right: auto !important; } html[dir="rtl"] table.dataTable.table-sm .sorting::after, html[dir="rtl"] table.dataTable.table-sm .sorting_asc::after, html[dir="rtl"] table.dataTable.table-sm .sorting_desc::after { left: 3px !important; right: auto !important; } /* -------------------------------------------------------------------------- 20. DATATABLES LENGTH SELECT SPACING FIX -------------------------------------------------------------------------- */ div.dataTables_length select.form-select, div.dataTables_wrapper .dataTables_length select { min-width: 80px !important; padding-right: 1.75rem !important; padding-left: 0.5rem !important; } html[dir="rtl"] div.dataTables_length select.form-select, html[dir="rtl"] div.dataTables_wrapper .dataTables_length select { padding-left: 1.75rem !important; padding-right: 0.5rem !important; min-width: 80px !important; } /* ========================================================================== 21. COMPREHENSIVE DARK MODE OVERRIDES Uses `.dark` class on , set by Phoenix theme controller (config.js). All our CSS variables already switch via `.dark { ... }` above, so most component styles adapt automatically. These rules handle edge-cases, hard-coded colors, and third-party elements. ========================================================================== */ /* --- 21.1 Body & Content Area ------------------------------------------ */ .dark body { background-color: var(--shaifek-bg) !important; color: var(--shaifek-text-secondary); } .dark .content { background-color: var(--shaifek-bg) !important; } /* --- 21.2 Cards -------------------------------------------------------- */ .dark .card { background-color: var(--shaifek-card-bg) !important; border-color: var(--shaifek-border) !important; box-shadow: var(--shaifek-shadow-card) !important; } .dark .card:hover { box-shadow: var(--shaifek-shadow-lg) !important; } .dark .card-header { background-color: rgba(255, 255, 255, 0.02) !important; border-bottom-color: var(--shaifek-border) !important; } .dark .card-header h5, .dark .card-header .h5 { color: var(--shaifek-text) !important; } .dark .card-body { color: var(--shaifek-text-secondary); } .dark .card-footer { background-color: transparent !important; border-top-color: var(--shaifek-border) !important; } /* --- 21.3 Sidebar (Navbar Vertical) ------------------------------------ */ .dark .navbar-vertical .navbar-vertical-content .navbar-nav .nav-link { color: var(--shaifek-text-light) !important; } .dark .navbar-vertical .navbar-vertical-content .navbar-nav .nav-link:hover { color: var(--shaifek-text) !important; background-color: rgba(0, 109, 244, 0.1) !important; } .dark .navbar-vertical .navbar-vertical-content .navbar-nav .nav-link.active { color: var(--shaifek-primary) !important; background: rgba(0, 109, 244, 0.12) !important; } .dark .navbar-vertical .nav-link-icon { color: var(--shaifek-text-muted) !important; } .dark .navbar-vertical .nav-link.active .nav-link-icon { color: var(--shaifek-primary) !important; } .dark .navbar-vertical .navbar-vertical-footer { border-top-color: var(--shaifek-border) !important; } .dark .navbar-vertical-label, .dark .shaifek-nav-section-label { color: var(--shaifek-text-muted) !important; } html[dir="rtl"].dark .navbar-vertical { border-left-color: var(--shaifek-border) !important; } /* --- 21.4 Top Navigation Bar ------------------------------------------- */ .dark .navbar-top .logo-text { color: var(--shaifek-text) !important; } .dark .navbar-top .shaifek-school-info { color: var(--shaifek-text-muted); } .dark .navbar-top .nav-link { color: var(--shaifek-text-light) !important; } .dark .navbar-top .nav-link:hover { color: var(--shaifek-primary) !important; } .dark .shaifek-lang-toggle { background-color: rgba(255, 255, 255, 0.05) !important; border-color: var(--shaifek-border) !important; color: var(--shaifek-text) !important; } .dark .navbar-top .avatar img { border-color: var(--shaifek-border); } .dark .shaifek-help-btn { background: rgba(0, 109, 244, 0.12); color: var(--shaifek-accent) !important; } .dark .shaifek-help-btn:hover { background: rgba(0, 109, 244, 0.2); color: #fff !important; } /* --- 21.5 Tables ------------------------------------------------------- */ .dark .table > thead > tr > th { background-color: rgba(255, 255, 255, 0.03) !important; color: var(--shaifek-text-light) !important; border-bottom-color: var(--shaifek-border) !important; } .dark .table > tbody > tr > td { color: var(--shaifek-text-secondary) !important; border-bottom-color: var(--shaifek-border) !important; } .dark .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: transparent !important; } .dark .table-striped > tbody > tr:hover > * { background-color: rgba(0, 109, 244, 0.06) !important; } /* DataTables dark overrides */ .dark .dataTables_wrapper .dataTables_filter input { background-color: var(--shaifek-card-bg) !important; border-color: var(--shaifek-border) !important; color: var(--shaifek-text) !important; } .dark .dataTables_wrapper .dataTables_filter input:focus { border-color: var(--shaifek-primary) !important; box-shadow: 0 0 0 3px rgba(0, 109, 244, 0.15) !important; } .dark .dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--shaifek-text-light) !important; } .dark .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background-color: rgba(0, 109, 244, 0.1) !important; color: var(--shaifek-primary) !important; border-color: transparent !important; } .dark .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--shaifek-primary) !important; color: #fff !important; border-color: var(--shaifek-primary) !important; } .dark .dataTables_wrapper .dataTables_info { color: var(--shaifek-text-muted) !important; } .dark .dataTables_wrapper .dataTables_length label, .dark .dataTables_wrapper .dataTables_filter label { color: var(--shaifek-text-light) !important; } .dark .dataTables_wrapper .dataTables_length select { background-color: var(--shaifek-card-bg) !important; border-color: var(--shaifek-border) !important; color: var(--shaifek-text) !important; } /* --- 21.6 Form Elements ------------------------------------------------ */ .dark .form-control:focus, .dark .form-select:focus { background-color: var(--shaifek-card-bg) !important; border-color: var(--shaifek-primary) !important; box-shadow: 0 0 0 3px rgba(0, 109, 244, 0.15) !important; color: var(--shaifek-text) !important; } .dark .form-label { color: var(--shaifek-text) !important; } .dark label { color: var(--shaifek-text-secondary); } .dark .form-check-label { color: var(--shaifek-text-secondary) !important; } .dark .form-control::placeholder { color: var(--shaifek-text-muted) !important; } .dark .input-group-text { background-color: rgba(255, 255, 255, 0.04) !important; border-color: var(--shaifek-border) !important; color: var(--shaifek-text-light) !important; } /* --- 21.7 Buttons ------------------------------------------------------ */ .dark .btn-outline-secondary { border-color: var(--shaifek-border) !important; color: var(--shaifek-text-light) !important; } .dark .btn-outline-secondary:hover { background-color: rgba(255, 255, 255, 0.05) !important; color: var(--shaifek-text) !important; border-color: var(--shaifek-text-muted) !important; } .dark .btn-soft-primary:hover, .dark .btn-soft-success:hover, .dark .btn-soft-warning:hover, .dark .btn-soft-danger:hover { filter: brightness(1.2); } .dark .btn-phoenix-secondary { background-color: rgba(255, 255, 255, 0.05) !important; border-color: var(--shaifek-border) !important; color: var(--shaifek-text-light) !important; } .dark .btn-phoenix-secondary:hover { background-color: rgba(255, 255, 255, 0.1) !important; color: var(--shaifek-text) !important; } .dark .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* --- 21.8 Badges ------------------------------------------------------- */ .dark .badge.bg-success { background-color: rgba(11, 183, 131, 0.15) !important; color: #3dd9a4 !important; } .dark .badge.bg-danger { background-color: rgba(230, 57, 70, 0.15) !important; color: #f07178 !important; } .dark .badge.bg-primary { background-color: rgba(0, 109, 244, 0.15) !important; color: #6db3ff !important; } .dark .badge.bg-warning { background-color: rgba(245, 158, 11, 0.15) !important; color: #f5c542 !important; } .dark .badge.bg-info { background-color: rgba(47, 175, 230, 0.15) !important; color: #5cc8f0 !important; } .dark .badge.bg-secondary { background-color: rgba(255, 255, 255, 0.08) !important; color: var(--shaifek-text-light) !important; } /* --- 21.9 Modals ------------------------------------------------------- */ .dark .modal-content { background-color: var(--shaifek-card-bg) !important; border-color: var(--shaifek-border) !important; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important; } .dark .modal-header { background: linear-gradient(135deg, rgba(0, 109, 244, 0.08) 0%, var(--shaifek-card-bg) 100%) !important; border-bottom-color: var(--shaifek-border) !important; } .dark .modal-header .modal-title { color: var(--shaifek-text) !important; } .dark .modal-body { color: var(--shaifek-text-secondary); } .dark .modal-footer { border-top-color: var(--shaifek-border) !important; } .dark .modal-backdrop { background-color: rgba(0, 0, 0, 0.7) !important; } /* --- 21.10 Dropdowns --------------------------------------------------- */ .dark .dropdown-menu { background-color: var(--shaifek-card-bg) !important; border-color: var(--shaifek-border) !important; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4) !important; } .dark .dropdown-menu .dropdown-item { color: var(--shaifek-text-secondary) !important; } .dark .dropdown-menu .dropdown-item:hover, .dark .dropdown-menu .dropdown-item:focus { background-color: rgba(0, 109, 244, 0.1) !important; color: var(--shaifek-primary) !important; } .dark .dropdown-divider { border-top-color: var(--shaifek-border) !important; } /* --- 21.11 Dashboard Greeting Banner ----------------------------------- */ .dark .shaifek-greeting-card { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3); } /* --- 21.12 Dashboard Stat Card Icon Tints ------------------------------ */ .dark .shaifek-stat-card.stat-blue .shaifek-stat-icon { background: rgba(0, 109, 244, 0.15); color: #6db3ff; } .dark .shaifek-stat-card.stat-green .shaifek-stat-icon { background: rgba(11, 183, 131, 0.15); color: #3dd9a4; } .dark .shaifek-stat-card.stat-red .shaifek-stat-icon { background: rgba(230, 57, 70, 0.15); color: #f07178; } .dark .shaifek-stat-card.stat-navy .shaifek-stat-icon { background: rgba(181, 219, 255, 0.08); color: var(--shaifek-sky); } .dark .shaifek-stat-card .shaifek-stat-label { color: var(--shaifek-text-light); } /* --- 21.13 Chart Badges ------------------------------------------------ */ .dark .chart-badge.badge-green { background: rgba(11, 183, 131, 0.15); color: #3dd9a4; } .dark .chart-badge.badge-red { background: rgba(230, 57, 70, 0.15); color: #f07178; } .dark .chart-badge.badge-blue { background: rgba(0, 109, 244, 0.15); color: #6db3ff; } /* --- 21.14 Login Page -------------------------------------------------- */ .dark .shaifek-login-right { background: var(--shaifek-card-bg); } .dark .shaifek-login-logo h3 { color: var(--shaifek-text); } .dark .shaifek-login-logo p { color: var(--shaifek-text-light); } .dark .shaifek-login-divider { color: var(--shaifek-text-muted); } .dark .shaifek-login-footer a { color: var(--shaifek-text-muted); } .dark .shaifek-login-footer .shaifek-powered-by { color: var(--shaifek-text-muted); } /* --- 21.15 Footer ------------------------------------------------------ */ .dark .shaifek-footer { border-top-color: var(--shaifek-border) !important; color: var(--shaifek-text-muted); } /* --- 21.16 Alerts ------------------------------------------------------ */ .dark .alert-success { background-color: rgba(11, 183, 131, 0.12) !important; border-color: rgba(11, 183, 131, 0.2) !important; color: #3dd9a4 !important; } .dark .alert-danger { background-color: rgba(230, 57, 70, 0.12) !important; border-color: rgba(230, 57, 70, 0.2) !important; color: #f07178 !important; } .dark .alert-warning { background-color: rgba(245, 158, 11, 0.12) !important; border-color: rgba(245, 158, 11, 0.2) !important; color: #f5c542 !important; } .dark .alert-info { background-color: rgba(47, 175, 230, 0.12) !important; border-color: rgba(47, 175, 230, 0.2) !important; color: #5cc8f0 !important; } .dark .alert-primary { background-color: rgba(0, 109, 244, 0.12) !important; border-color: rgba(0, 109, 244, 0.2) !important; color: #6db3ff !important; } /* --- 21.17 Scrollbar --------------------------------------------------- */ .dark ::-webkit-scrollbar-track { background: var(--shaifek-bg); } .dark ::-webkit-scrollbar-thumb { background: var(--shaifek-border); } .dark ::-webkit-scrollbar-thumb:hover { background: var(--shaifek-text-muted); } /* --- 21.18 Misc & third-party ------------------------------------------ */ .dark .text-body, .dark .text-dark { color: var(--shaifek-text) !important; } .dark .text-muted { color: var(--shaifek-text-muted) !important; } .dark .text-body-secondary { color: var(--shaifek-text-light) !important; } .dark .bg-body-emphasis { background-color: var(--shaifek-card-bg) !important; } .dark .bg-body, .dark .bg-light { background-color: var(--shaifek-bg) !important; } .dark .bg-white { background-color: var(--shaifek-card-bg) !important; } .dark .border, .dark .border-top, .dark .border-bottom, .dark .border-start, .dark .border-end { border-color: var(--shaifek-border) !important; } .dark hr { border-color: var(--shaifek-border); opacity: 0.3; } .dark .list-group-item { background-color: var(--shaifek-card-bg) !important; border-color: var(--shaifek-border) !important; color: var(--shaifek-text-secondary) !important; } .dark .list-group-item.active { background-color: var(--shaifek-primary) !important; border-color: var(--shaifek-primary) !important; color: #fff !important; } .dark .breadcrumb-item a { color: var(--shaifek-text-light); } .dark .breadcrumb-item.active { color: var(--shaifek-text-muted); } .dark .nav-tabs .nav-link { color: var(--shaifek-text-light) !important; } .dark .nav-tabs .nav-link.active { background-color: var(--shaifek-card-bg) !important; border-color: var(--shaifek-border) var(--shaifek-border) var(--shaifek-card-bg) !important; color: var(--shaifek-primary) !important; } .dark .nav-tabs { border-bottom-color: var(--shaifek-border) !important; } .dark .nav-pills .nav-link { color: var(--shaifek-text-light) !important; } .dark .nav-pills .nav-link.active { background-color: var(--shaifek-primary) !important; color: #fff !important; } .dark .page-link { background-color: var(--shaifek-card-bg) !important; border-color: var(--shaifek-border) !important; color: var(--shaifek-text-light) !important; } .dark .page-link:hover { background-color: rgba(0, 109, 244, 0.1) !important; color: var(--shaifek-primary) !important; } .dark .page-item.active .page-link { background-color: var(--shaifek-primary) !important; border-color: var(--shaifek-primary) !important; color: #fff !important; } .dark .page-item.disabled .page-link { background-color: rgba(255, 255, 255, 0.03) !important; color: var(--shaifek-text-muted) !important; } /* Accordion */ .dark .accordion-item { background-color: var(--shaifek-card-bg) !important; border-color: var(--shaifek-border) !important; } .dark .accordion-button { background-color: var(--shaifek-card-bg) !important; color: var(--shaifek-text) !important; } .dark .accordion-button:not(.collapsed) { background-color: rgba(0, 109, 244, 0.08) !important; color: var(--shaifek-primary) !important; } .dark .accordion-button::after { filter: invert(1) brightness(2); } /* Tooltips */ .dark .tooltip-inner { background-color: var(--shaifek-navy) !important; } /* Progress bars */ .dark .progress { background-color: rgba(255, 255, 255, 0.06) !important; } /* Select2 (if used) */ .dark .select2-container--default .select2-selection--single, .dark .select2-container--default .select2-selection--multiple { background-color: var(--shaifek-card-bg) !important; border-color: var(--shaifek-border) !important; color: var(--shaifek-text) !important; } .dark .select2-container--default .select2-results__option { background-color: var(--shaifek-card-bg) !important; color: var(--shaifek-text-secondary) !important; } .dark .select2-container--default .select2-results__option--highlighted { background-color: var(--shaifek-primary) !important; color: #fff !important; } .dark .select2-dropdown { background-color: var(--shaifek-card-bg) !important; border-color: var(--shaifek-border) !important; } .dark .select2-search__field { background-color: var(--shaifek-bg) !important; color: var(--shaifek-text) !important; border-color: var(--shaifek-border) !important; } /* Toast notifications */ .dark .toast { background-color: var(--shaifek-card-bg) !important; border-color: var(--shaifek-border) !important; color: var(--shaifek-text) !important; } .dark .toast-header { background-color: rgba(255, 255, 255, 0.03) !important; border-bottom-color: var(--shaifek-border) !important; color: var(--shaifek-text) !important; } /* Popover */ .dark .popover { background-color: var(--shaifek-card-bg) !important; border-color: var(--shaifek-border) !important; } .dark .popover-body { color: var(--shaifek-text-secondary) !important; } .dark .popover-header { background-color: rgba(255, 255, 255, 0.03) !important; border-bottom-color: var(--shaifek-border) !important; color: var(--shaifek-text) !important; } /* ============================================================================ EXPERIMENTAL — distinct color per sidebar tab Just trying this out. Delete this whole block to fully revert. ============================================================================ */ .navbar-vertical .navbar-nav .nav-link:has(.bi-grid-1x2-fill) { --tab-color: #006df4; } /* Dashboard */ .navbar-vertical .navbar-nav .nav-link:has(.fa-asterisk) { --tab-color: #7c5cfc; } /* Section Management */ .navbar-vertical .navbar-nav .nav-link:has(.fa-chalkboard-teacher), .navbar-vertical .navbar-nav .nav-link:has(.fa-chalkboard-user) { --tab-color: #ca8a04; } /* Class Management */ .navbar-vertical .navbar-nav .nav-link:has(.bi-pin-map) { --tab-color: #f59e0b; } /* Route & Driver Management */ .navbar-vertical .navbar-nav .nav-link:has(.fa-user) { --tab-color: #ec4899; } /* Student Management */ .navbar-vertical .navbar-nav .nav-link:has(.fa-trash) { --tab-color: #ef4444; } /* Deleted Student List */ .navbar-vertical .navbar-nav .nav-link:has(.fa-book) { --tab-color: #6366f1; } /* Pickup & Drop Register */ .navbar-vertical .navbar-nav .nav-link:has(.bi-pin-map-fill) { --tab-color: #06b6d4; } /* Driver Live Location */ .navbar-vertical .navbar-nav .nav-link:has(.fa-location-arrow) { --tab-color: #22c55e; } /* Driver Navigation View */ .navbar-vertical .navbar-nav .nav-link:has(.bi-calendar3) { --tab-color: #8b5cf6; } /* Attendance Management */ .navbar-vertical .navbar-nav .nav-link:has(.fa-gear) { --tab-color: #f97316; } /* Device Management */ .navbar-vertical .navbar-nav .nav-link:has(.fa-university) { --tab-color: #006df4; } /* School Management */ .navbar-vertical .navbar-nav .nav-link:has(.fa-graduation-cap) { --tab-color: #0ea5e9; } /* Academics */ .navbar-vertical .navbar-nav .nav-link:has(.fa-users) { --tab-color: #14b8a6; } /* Human Resources */ .navbar-vertical .navbar-nav .nav-link:has(.fa-user-graduate) { --tab-color: #ec4899; } /* Students */ .navbar-vertical .navbar-nav .nav-link:has(.fa-bullhorn) { --tab-color: #a855f7; } /* Communication */ .navbar-vertical .navbar-nav .nav-link:has(.fa-sliders-h) { --tab-color: #d946ef; } /* Module Subscriptions */ .navbar-vertical .navbar-vertical-content .navbar-nav .nav-link .nav-link-icon { color: var(--tab-color, var(--shaifek-text-light)) !important; } .navbar-vertical .navbar-vertical-content .navbar-nav .nav-link:hover { background-color: color-mix(in srgb, var(--tab-color, var(--shaifek-primary)) 12%, transparent) !important; } .navbar-vertical .navbar-vertical-content .navbar-nav .nav-link.active { color: var(--tab-color, var(--shaifek-primary)) !important; background: color-mix(in srgb, var(--tab-color, var(--shaifek-primary)) 15%, transparent) !important; } .navbar-vertical .navbar-vertical-content .navbar-nav .nav-link.active .nav-link-icon { color: var(--tab-color, var(--shaifek-primary)) !important; } .navbar-vertical .navbar-vertical-content .navbar-nav .nav-link.active::before { background: var(--tab-color, var(--shaifek-primary)) !important; } .dark .navbar-vertical .navbar-vertical-content .navbar-nav .nav-link:hover { background-color: color-mix(in srgb, var(--tab-color, var(--shaifek-primary)) 16%, transparent) !important; } .dark .navbar-vertical .navbar-vertical-content .navbar-nav .nav-link.active { color: var(--tab-color, var(--shaifek-primary)) !important; background: color-mix(in srgb, var(--tab-color, var(--shaifek-primary)) 20%, transparent) !important; } /* ============================================================================ END EXPERIMENTAL block ============================================================================ */