/** * Admin panel styles. * * Follows a sidebar + main column layout with a topbar. * Supports dark mode via [data-bs-theme="dark"] on . */ /* --- CSS variables (light mode) --- */ :root { --sidebar-w: 240px; --sidebar-bg: #1e293b; --sidebar-text: #94a3b8; --sidebar-active: #3b82f6; --topbar-h: 56px; --body-bg: #f1f5f9; } [data-bs-theme="dark"] { --body-bg: #0f172a; --sidebar-bg: #0c1524; } /* --- Reset / base --- */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: 'Segoe UI', system-ui, sans-serif; background: var(--body-bg); } /* --- Login page --- */ .login-body { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #3b82f6, #8b5cf6); } .login-container { width: 100%; max-width: 400px; padding: 1rem; } .login-container .card { border: 0; border-radius: .75rem; } /* --- Admin layout --- */ .admin-layout { display: flex; min-height: 100vh; } /* Sidebar */ .sidebar { width: var(--sidebar-w); background: var(--sidebar-bg); color: var(--sidebar-text); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 1040; transition: transform .25s ease; } .sidebar-brand { display: flex; align-items: center; gap: .5rem; padding: 1rem 1.25rem; font-size: 1.2rem; font-weight: 700; color: #fff; } .sidebar-nav { flex: 1; padding: .5rem .75rem; } .sidebar-nav .nav-link { display: flex; align-items: center; gap: .6rem; padding: .65rem 1rem; border-radius: .5rem; color: var(--sidebar-text); text-decoration: none; transition: background .15s, color .15s; margin-bottom: .15rem; } .sidebar-nav .nav-link:hover, .sidebar-nav .nav-link.active { background: rgba(255,255,255,.08); color: #fff; } .sidebar-nav .nav-link.active { background: var(--sidebar-active); } .sidebar-nav .nav-link i { width: 1.25rem; text-align: center; } /* Main column */ .main-column { margin-left: var(--sidebar-w); flex: 1; display: flex; flex-direction: column; min-width: 0; } .topbar { height: var(--topbar-h); display: flex; align-items: center; gap: .75rem; padding: 0 1.5rem; background: var(--bs-body-bg, #fff); border-bottom: 1px solid var(--bs-border-color, #dee2e6); position: sticky; top: 0; z-index: 1030; } .topbar-title { font-size: 1.1rem; font-weight: 600; margin: 0; } .topbar-actions { margin-left: auto; display: flex; align-items: center; gap: .5rem; } .sidebar-toggle { display: none; font-size: 1.2rem; } .content { flex: 1; padding: 1.5rem; } .app-footer { padding: 1rem 1.5rem; text-align: center; border-top: 1px solid var(--bs-border-color, #dee2e6); } /* Stat cards */ .stat-card { border-left: 4px solid transparent; } .stat-primary { border-left-color: #3b82f6; } .stat-success { border-left-color: #22c55e; } .stat-info { border-left-color: #06b6d4; } /* Template cards */ .template-card { transition: transform .15s, box-shadow .15s; } .template-card:hover { transform: translateY(-4px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); } .template-preview { border-radius: .375rem .375rem 0 0; } /* Responsive */ @media (max-width: 991.98px) { .sidebar { transform: translateX(-100%); } .sidebar.show { transform: translateX(0); } .sidebar-toggle { display: block; } .main-column { margin-left: 0; } } /* Overlay for mobile sidebar */ .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1035; } .sidebar.show ~ .sidebar-backdrop { display: block; }