/* ═══════════════════════════════════════════════════════════════════════════ SDU STUDENT PORTAL — GLOBAL THEME SYSTEM sdu-theme.css | Light default, [data-theme="dark"] override Include in every student page inside ═══════════════════════════════════════════════════════════════════════════ */ /* ── GOOGLE FONTS ─────────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); /* ══════════════════════════ CSS VARIABLES ═══════════════════════════════════ LIGHT MODE (default) ═══════════════════════════════════════════════════════════════════════════ */ :root { /* Backgrounds */ --bg-main: #f1f5f9; --bg-card: #ffffff; --bg-card2: #f8fafc; --bg-sidebar: #1e293b; --bg-sidebar2: #0f172a; --bg-input: #f8fafc; --bg-table-head: #f1f5f9; --bg-table-stripe: #f8fafc; --bg-modal: #ffffff; --bg-dropdown: #ffffff; --bg-navbar: #ffffff; --bg-tag: #ede9fe; --bg-success: #ecfdf5; --bg-danger: #fef2f2; --bg-warning: #fffbeb; --bg-info: #eff6ff; /* Text */ --text-primary: #0f172a; --text-secondary: #475569; --text-muted: #94a3b8; --text-inverse: #f8fafc; /* Borders */ --border: #e2e8f0; --border-focus: #818cf8; /* Brand / Accent */ --accent: #4f46e5; --accent2: #7c3aed; --accent3: #06b6d4; --accent-hover: #4338ca; --accent-light: #ede9fe; --accent-rgb: 79,70,229; /* Status */ --success: #10b981; --danger: #ef4444; --warning: #f59e0b; --info: #3b82f6; /* Shadows */ --shadow-sm: 0 1px 4px rgba(0,0,0,.06); --shadow: 0 4px 16px rgba(0,0,0,.08); --shadow-lg: 0 10px 40px rgba(0,0,0,.12); --shadow-accent: 0 8px 24px rgba(79,70,229,.25); /* Radius */ --radius-sm: 8px; --radius: 14px; --radius-lg: 20px; --radius-xl: 24px; /* Sidebar */ --sidebar-width: 250px; /* Cover gradient (profile, etc.) */ --cover-grad: linear-gradient(135deg,#4f46e5,#7c3aed,#06b6d4); } /* ══════════════════════════ DARK MODE ═══════════════════════════════════════ */ [data-theme="dark"] { --bg-main: #0f172a; --bg-card: #1e293b; --bg-card2: #1a2539; --bg-sidebar: #0c1629; --bg-sidebar2: #080f1e; --bg-input: #273347; --bg-table-head: #1a2539; --bg-table-stripe: #1e2d44; --bg-modal: #1e293b; --bg-dropdown: #1e293b; --bg-navbar: #1e293b; --bg-tag: #312e81; --bg-success: #052e16; --bg-danger: #1f0a0a; --bg-warning: #1c1400; --bg-info: #0c1629; --text-primary: #f1f5f9; --text-secondary: #94a3b8; --text-muted: #64748b; --text-inverse: #0f172a; --border: #2d3f55; --border-focus: #818cf8; --accent: #818cf8; --accent2: #a78bfa; --accent3: #22d3ee; --accent-hover: #6366f1; --accent-light: #312e81; --accent-rgb: 129,140,248; --success: #34d399; --danger: #f87171; --warning: #fbbf24; --info: #60a5fa; --shadow-sm: 0 1px 4px rgba(0,0,0,.2); --shadow: 0 4px 16px rgba(0,0,0,.3); --shadow-lg: 0 10px 40px rgba(0,0,0,.5); --shadow-accent: 0 8px 24px rgba(129,140,248,.2); --cover-grad: linear-gradient(135deg,#312e81,#4c1d95,#164e63); } /* ══════════════════════════ BASE RESET ══════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; background: var(--bg-main) !important; color: var(--text-primary) !important; font-size: .875rem; line-height: 1.6; transition: background .25s ease, color .25s ease; min-height: 100vh; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); } /* ══════════════════════════ LAYOUT ══════════════════════════════════════════ */ .wrapper, .content-wrapper, .content, .container-fluid, section { background: transparent !important; } .content-wrapper { margin-left: var(--sidebar-width) !important; min-height: 100vh !important; transition: margin .25s; } /* ══════════════════════════ NAVBAR ══════════════════════════════════════════ */ .main-header.navbar, nav.main-header { background: var(--bg-navbar) !important; border-bottom: 1px solid var(--border) !important; box-shadow: var(--shadow-sm) !important; transition: background .25s, border-color .25s; } .navbar-light .navbar-nav .nav-link, .main-header .nav-link, .main-header .nav-link i { color: var(--text-secondary) !important; transition: color .2s; } .main-header .nav-link:hover, .main-header .nav-link:hover i { color: var(--accent) !important; } /* University title in navbar */ .main-header .navbar-nav a strong { color: var(--text-primary) !important; font-size: 1rem !important; font-weight: 800 !important; } /* Live clock */ #live-clock { font-size: .78rem !important; font-weight: 600 !important; color: var(--text-secondary) !important; font-variant-numeric: tabular-nums; } /* Theme toggle button */ #theme-toggle { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-card2); color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .2s; font-size: .85rem; } #theme-toggle:hover { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: var(--shadow-accent); } /* Dropdown */ .dropdown-menu { background: var(--bg-dropdown) !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; box-shadow: var(--shadow-lg) !important; color: var(--text-primary) !important; } .dropdown-item { color: var(--text-primary) !important; border-radius: var(--radius-sm) !important; } .dropdown-item:hover { background: var(--accent-light) !important; color: var(--accent) !important; } .dropdown-divider { border-color: var(--border) !important; } .dropdown-item-title { color: var(--text-primary) !important; } /* ══════════════════════════ SIDEBAR ══════════════════════════════════════════ */ /* ── Sidebar shell ─────────────────────────────────────────────────────────── */ .main-sidebar, .main-sidebar.sidebar-dark-primary { background: var(--sidebar-bg) !important; width: var(--sidebar-width) !important; box-shadow: 4px 0 24px rgba(0,0,0,.12) !important; border-right: 1px solid var(--sidebar-border) !important; transition: background .25s, border-color .25s, box-shadow .25s; } /* ── Sidebar tokens: LIGHT mode (default) — white/clean sidebar ─────────────── */ :root { --sidebar-bg: #ffffff; --sidebar-bg2: #f1f5f9; --sidebar-border: #e2e8f0; --sidebar-text: #334155; --sidebar-text-muted: #64748b; --sidebar-hover-bg: #f1f5f9; --sidebar-active-bg: #4f46e5; --sidebar-active-text: #ffffff; --sidebar-sub-text: #64748b; --sidebar-icon: #94a3b8; --sidebar-divider: #e2e8f0; --sidebar-hover-text: #1e293b; } /* ── Sidebar tokens: DARK mode — deep navy sidebar ───────────────────────────── */ [data-theme="dark"] { --sidebar-bg: #1e293b; --sidebar-bg2: #0f172a; --sidebar-border: rgba(255,255,255,.06); --sidebar-text: rgba(255,255,255,.82); --sidebar-text-muted: rgba(255,255,255,.42); --sidebar-hover-bg: rgba(255,255,255,.09); --sidebar-active-bg: #818cf8; --sidebar-active-text: #ffffff; --sidebar-sub-text: rgba(255,255,255,.52); --sidebar-icon: rgba(255,255,255,.55); --sidebar-divider: rgba(255,255,255,.07); --sidebar-hover-text: #ffffff; } /* ── Brand / logo area ─────────────────────────────────────────────────────── */ .brand-link { border-bottom: 1px solid var(--sidebar-divider) !important; padding: 12px 16px !important; display: flex !important; align-items: center !important; background: var(--sidebar-bg2) !important; transition: background .25s; } .brand-link img { max-width: 180px; height: auto; } /* ── User panel ────────────────────────────────────────────────────────────── */ .user-panel { border-bottom: 1px solid var(--sidebar-divider) !important; padding: 12px 16px !important; margin: 0 !important; transition: border-color .25s; } .user-panel .image img { width: 36px !important; height: 36px !important; border-radius: 50% !important; border: 2px solid var(--sidebar-icon) !important; object-fit: cover; } /* Override inline styles on aside.php user panel links */ .user-panel .info a, .user-panel a { color: var(--sidebar-text) !important; font-size: .82rem !important; font-weight: 600 !important; } .user-panel .info a:hover, .user-panel a:hover { color: var(--sidebar-hover-text) !important; } .user-panel .info span { color: var(--sidebar-text-muted) !important; font-size: .7rem !important; } .user-panel .info { padding-left: 10px; overflow: hidden; } .user-panel .info a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } /* ── Nav items ─────────────────────────────────────────────────────────────── */ .nav-sidebar .nav-link { color: var(--sidebar-text) !important; border-radius: 10px !important; margin: 2px 10px !important; padding: 9px 14px !important; font-size: .82rem !important; font-weight: 500 !important; transition: all .2s !important; display: flex !important; align-items: center !important; gap: 10px !important; } .nav-sidebar .nav-link:hover { color: #fff !important; background: var(--sidebar-hover-bg) !important; } .nav-sidebar .nav-link.active, .nav-sidebar > .nav-item > .nav-link.active { background: var(--sidebar-active-bg) !important; color: var(--sidebar-active-text) !important; box-shadow: 0 4px 12px rgba(var(--accent-rgb),.35) !important; } .nav-sidebar .nav-icon { font-size: .85rem !important; width: 20px !important; text-align: center !important; color: var(--sidebar-icon) !important; flex-shrink: 0; } .nav-sidebar .nav-link.active .nav-icon { color: #fff !important; } /* ── Treeview sub-items ────────────────────────────────────────────────────── */ .nav-treeview .nav-link { padding: 7px 14px 7px 36px !important; font-size: .79rem !important; color: var(--sidebar-sub-text) !important; } .nav-treeview .nav-link:hover { color: #fff !important; background: var(--sidebar-hover-bg) !important; } .nav-treeview .nav-link.active { background: rgba(var(--accent-rgb),.28) !important; color: #fff !important; } /* ── Collapse arrow ────────────────────────────────────────────────────────── */ .nav-sidebar .nav-link p .right { color: var(--sidebar-icon) !important; } /* ── Log Out nav item (red) always red regardless of mode ──────────────────── */ .nav-sidebar .nav-link .fa-power-off { color: #f87171 !important; } /* ══════════════════════════ CONTENT HEADER ══════════════════════════════════ */ .content-header { background: var(--bg-card) !important; border-bottom: 1px solid var(--border) !important; padding: 14px 24px !important; box-shadow: var(--shadow-sm) !important; } .content-header h1 { font-size: 1.15rem !important; font-weight: 700 !important; color: var(--text-primary) !important; margin: 0 !important; } /* Breadcrumb */ .breadcrumb { background: transparent !important; margin: 0 !important; padding: 0 !important; } .breadcrumb-item, .breadcrumb-item a { color: var(--text-secondary) !important; font-size: .78rem !important; } .breadcrumb-item.active { color: var(--text-muted) !important; } .breadcrumb-item + .breadcrumb-item::before { color: var(--text-muted) !important; } /* ══════════════════════════ CARDS ═══════════════════════════════════════════ */ .card { background: var(--bg-card) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow) !important; color: var(--text-primary) !important; transition: background .25s, border-color .25s, box-shadow .25s; overflow: hidden; } .card-header { background: var(--bg-card2) !important; border-bottom: 1px solid var(--border) !important; color: var(--text-primary) !important; font-weight: 600 !important; padding: 14px 20px !important; } .card-body { color: var(--text-primary) !important; padding: 20px !important; } .card-footer { background: var(--bg-card2) !important; border-top: 1px solid var(--border) !important; color: var(--text-secondary) !important; } /* Card variants */ .card-primary { border-top: 3px solid var(--accent) !important; } .card-success { border-top: 3px solid var(--success) !important; } .card-danger { border-top: 3px solid var(--danger) !important; } .card-warning { border-top: 3px solid var(--warning) !important; } .card-info { border-top: 3px solid var(--info) !important; } /* ══════════════════════════ TABLES ══════════════════════════════════════════ */ .table { color: var(--text-primary) !important; border-color: var(--border) !important; } .table th { background: var(--bg-table-head) !important; color: var(--text-secondary) !important; font-size: .72rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .05em !important; border-color: var(--border) !important; white-space: nowrap; } .table td { color: var(--text-primary) !important; border-color: var(--border) !important; vertical-align: middle !important; font-size: .84rem !important; } .table-striped tbody tr:nth-of-type(odd) { background: var(--bg-table-stripe) !important; } .table-hover tbody tr:hover { background: var(--accent-light) !important; } .table-bordered { border: 1px solid var(--border) !important; } .table-bordered th, .table-bordered td { border: 1px solid var(--border) !important; } /* ══════════════════════════ FORMS ═══════════════════════════════════════════ */ .form-control, .form-select, select.form-control, textarea.form-control { background: var(--bg-input) !important; border: 1px solid var(--border) !important; color: var(--text-primary) !important; border-radius: var(--radius-sm) !important; font-size: .85rem !important; transition: border-color .2s, box-shadow .2s !important; font-family: 'Inter', sans-serif !important; } .form-control:focus, .form-select:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.15) !important; background: var(--bg-card) !important; outline: none !important; } .form-control::placeholder { color: var(--text-muted) !important; } .form-control:read-only { opacity: .7; cursor: default; } .form-control[disabled] { opacity: .6; cursor: not-allowed; } label, .col-form-label { color: var(--text-secondary) !important; font-weight: 600 !important; font-size: .78rem !important; text-transform: uppercase !important; letter-spacing: .04em !important; margin-bottom: 5px !important; } .input-group-text { background: var(--bg-card2) !important; border: 1px solid var(--border) !important; color: var(--text-secondary) !important; border-radius: var(--radius-sm) !important; } /* Select2 */ .select2-container--default .select2-selection--single { background: var(--bg-input) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-sm) !important; height: 38px !important; color: var(--text-primary) !important; } .select2-dropdown { background: var(--bg-dropdown) !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; box-shadow: var(--shadow-lg) !important; } .select2-container--default .select2-results__option { color: var(--text-primary) !important; font-size: .83rem !important; } .select2-container--default .select2-results__option--highlighted { background: var(--accent) !important; color: #fff !important; } /* ══════════════════════════ BUTTONS ═════════════════════════════════════════ */ .btn { font-family: 'Inter', sans-serif !important; font-weight: 600 !important; border-radius: var(--radius-sm) !important; font-size: .82rem !important; padding: 8px 18px !important; transition: all .2s !important; border: none !important; } .btn-primary { background: var(--accent) !important; color: #fff !important; box-shadow: 0 4px 12px rgba(var(--accent-rgb),.3) !important; } .btn-primary:hover { background: var(--accent-hover) !important; transform: translateY(-1px); } .btn-secondary { background: var(--bg-card2) !important; color: var(--text-primary) !important; border: 1px solid var(--border) !important; } .btn-secondary:hover { background: var(--border) !important; } .btn-success { background: var(--success) !important; color: #fff !important; } .btn-danger { background: var(--danger) !important; color: #fff !important; } .btn-warning { background: var(--warning) !important; color: #fff !important; } .btn-info { background: var(--info) !important; color: #fff !important; } .btn-default { background: var(--bg-card2) !important; color: var(--text-secondary) !important; border: 1px solid var(--border) !important; } .btn-lg { padding: 11px 24px !important; font-size: .9rem !important; border-radius: var(--radius) !important; } .btn-block { width: 100% !important; display: block !important; } /* ══════════════════════════ ALERTS ══════════════════════════════════════════ */ .alert { border-radius: var(--radius) !important; border: none !important; font-size: .84rem !important; font-weight: 500 !important; } .alert-success { background: var(--bg-success) !important; color: var(--success) !important; } .alert-danger { background: var(--bg-danger) !important; color: var(--danger) !important; } .alert-warning { background: var(--bg-warning) !important; color: var(--warning) !important; } .alert-info { background: var(--bg-info) !important; color: var(--info) !important; } /* ══════════════════════════ BADGES ══════════════════════════════════════════ */ .badge { font-weight: 600 !important; border-radius: 20px !important; padding: 3px 10px !important; font-size: .7rem !important; } .badge-primary { background: var(--accent-light) !important; color: var(--accent) !important; } .badge-success { background: var(--bg-success) !important; color: var(--success) !important; } .badge-danger { background: var(--bg-danger) !important; color: var(--danger) !important; } .badge-warning { background: var(--bg-warning) !important; color: var(--warning) !important; } .badge-info { background: var(--bg-info) !important; color: var(--info) !important; } /* ══════════════════════════ MODALS ══════════════════════════════════════════ */ .modal-content { background: var(--bg-modal) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-xl) !important; box-shadow: var(--shadow-lg) !important; color: var(--text-primary) !important; } .modal-header { border-bottom: 1px solid var(--border) !important; background: var(--bg-card2) !important; border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important; } .modal-footer { border-top: 1px solid var(--border) !important; background: var(--bg-card2) !important; } .modal-title { color: var(--text-primary) !important; font-weight: 700 !important; } .close { color: var(--text-secondary) !important; } /* W3 Modals (logout) */ .w3-modal-content { background: var(--bg-modal) !important; border-radius: var(--radius-xl) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-lg) !important; overflow: hidden; color: var(--text-primary) !important; } .w3-modal-content header { background: var(--bg-card2) !important; border-bottom: 1px solid var(--border) !important; } .w3-modal-content header h2 { color: var(--text-primary) !important; } /* ══════════════════════════ TABS (nav-pills) ════════════════════════════════ */ .nav-pills .nav-link { color: var(--text-secondary) !important; border-radius: var(--radius-sm) !important; font-size: .8rem !important; font-weight: 600 !important; padding: 7px 16px !important; transition: all .2s !important; } .nav-pills .nav-link:hover { color: var(--accent) !important; background: var(--accent-light) !important; } .nav-pills .nav-link.active { background: var(--accent) !important; color: #fff !important; box-shadow: 0 4px 12px rgba(var(--accent-rgb),.3) !important; } /* ══════════════════════════ LIST GROUP ══════════════════════════════════════ */ .list-group-item { background: var(--bg-card) !important; border: 1px solid var(--border) !important; color: var(--text-primary) !important; } .list-group-item:hover { background: var(--bg-card2) !important; } /* ══════════════════════════ TEXT UTILITIES ═══════════════════════════════════ */ .text-muted { color: var(--text-muted) !important; } .text-primary-custom { color: var(--text-primary) !important; } .text-accent { color: var(--accent) !important; } /* ══════════════════════════ FOOTER ══════════════════════════════════════════ */ .main-footer { background: var(--bg-card) !important; border-top: 1px solid var(--border) !important; color: var(--text-secondary) !important; font-size: .78rem !important; padding: 12px 24px !important; } /* ══════════════════════════ PAGE SECTIONS ═══════════════════════════════════ */ /* Reusable section header used by content pages */ .sdu-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 2px solid var(--border); } .sdu-section-title { font-size: 1rem; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 8px; } .sdu-section-title i { color: var(--accent); } /* Stat / info pill */ .sdu-stat-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--accent-light); color: var(--accent); border-radius: 20px; padding: 5px 14px; font-size: .75rem; font-weight: 700; } /* Empty state */ .sdu-empty { text-align: center; padding: 40px 20px; color: var(--text-muted); } .sdu-empty i { font-size: 2.5rem; opacity: .4; margin-bottom: 10px; } .sdu-empty p { font-size: .85rem; } /* ══════════════════════════ SCROLLBAR ═══════════════════════════════════════ */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--bg-main); } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 20px; } ::-webkit-scrollbar-thumb:hover { background: var(--accent); } /* ══════════════════════════ RESPONSIVE ══════════════════════════════════════ */ @media (max-width: 768px) { .content-wrapper { margin-left: 0 !important; } .content-header { padding: 10px 16px !important; } .card-body { padding: 14px !important; } } /* ══════════════════════════ TRANSITION OVERRIDE ══════════════════════════════ */ /* Prevent layout flash on theme switch */ .main-sidebar, .main-header, .card, .modal-content, .form-control, .table, .btn { transition-duration: .25s !important; }