/* Dark theme adapted from the ContactPro reference project (React/Tailwind) onto SIMRS's server-rendered Bootstrap 5.3 stack. Bootstrap's own data-bs-theme="dark"/"light" (set on in layout.html, toggle button in the topbar flips it via simrs-theme.js) already themes every native component (tables, forms, modals, dropdowns, alerts, badges) across all business modules' existing templates for free - the blocks below just define ContactPro's slate+blue palette (and a light counterpart) as CSS custom properties that both Bootstrap's own variables and the bespoke classes further down (sidebar, hero banner, stat cards) read from, so every rule automatically follows whichever theme is active without being duplicated per-theme. */ :root, [data-bs-theme="dark"] { --sr-bg: #0f172a; --sr-surface: #1e293b; --sr-surface-translucent: rgba(30, 41, 59, .6); --sr-border: #1e293b; --sr-border-strong: #334155; --sr-text: #f1f5f9; --sr-text-muted: #94a3b8; --sr-heading: #ffffff; --sr-primary: #3b82f6; --sr-primary-rgb: 59, 130, 246; --sr-purple: #8b5cf6; --sr-emerald: #10b981; --sr-amber: #f59e0b; --sr-red: #ef4444; --sr-nav-hover-bg: rgba(255, 255, 255, 0.06); --sr-status-bg: rgba(255, 255, 255, .04); --bs-body-bg: var(--sr-bg); --bs-body-color: var(--sr-text); --bs-border-color: var(--sr-border); --bs-emphasis-color: #ffffff; --bs-secondary-color: var(--sr-text-muted); --bs-tertiary-color: var(--sr-text-muted); --bs-secondary-bg: var(--sr-surface); --bs-tertiary-bg: #16213a; --bs-primary: var(--sr-primary); --bs-primary-rgb: var(--sr-primary-rgb); --bs-link-color: var(--sr-primary); --bs-link-hover-color: #60a5fa; --bs-card-bg: var(--sr-surface-translucent); --bs-card-border-color: var(--sr-border); } [data-bs-theme="light"] { --sr-bg: #f3f5f9; --sr-surface: #ffffff; --sr-surface-translucent: rgba(255, 255, 255, .78); --sr-border: #e2e8f0; --sr-border-strong: #cbd5e1; --sr-text: #1e293b; --sr-text-muted: #64748b; --sr-heading: #0f172a; --sr-primary: #3b82f6; --sr-primary-rgb: 59, 130, 246; --sr-purple: #8b5cf6; --sr-emerald: #059669; --sr-amber: #d97706; --sr-red: #dc2626; --sr-nav-hover-bg: rgba(15, 23, 42, 0.05); --sr-status-bg: rgba(15, 23, 42, .03); --bs-body-bg: var(--sr-bg); --bs-body-color: var(--sr-text); --bs-border-color: var(--sr-border); --bs-emphasis-color: #000000; --bs-secondary-color: var(--sr-text-muted); --bs-tertiary-color: var(--sr-text-muted); --bs-secondary-bg: #eef1f6; --bs-tertiary-bg: #e7ebf2; --bs-primary: var(--sr-primary); --bs-primary-rgb: var(--sr-primary-rgb); --bs-link-color: var(--sr-primary); --bs-link-hover-color: #1d4ed8; --bs-card-bg: var(--sr-surface-translucent); --bs-card-border-color: var(--sr-border); --bs-body-color-rgb: 30, 41, 59; } body { background-color: var(--sr-bg); } :root { --sidebar-width: 270px; } .app-shell { display: flex; align-items: stretch; min-height: 100vh; } /* ---------- Sidebar (dark, pill nav, glow on active) ---------- */ .sidebar { width: var(--sidebar-width); flex: 0 0 var(--sidebar-width); background-color: var(--sr-bg); color: var(--sr-text-muted); border-right: 1px solid var(--sr-border); overflow: hidden; transition: width 0.2s ease, flex-basis 0.2s ease, padding 0.2s ease; position: sticky; top: 0; height: 100vh; overflow-y: auto; } body.sidebar-hidden .sidebar { width: 0; flex-basis: 0; padding: 0; } .sidebar-brand { padding: 1.5rem 1.5rem 1rem; white-space: nowrap; border-bottom: 1px solid var(--sr-border); margin-bottom: 0.5rem; } .sidebar-brand a { color: var(--sr-primary); text-decoration: none; font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; display: block; } .sidebar-brand-subtitle { font-size: 0.65rem; color: var(--sr-text-muted); text-transform: uppercase; letter-spacing: 0.15em; margin-top: 0.15rem; } .sidebar-nav { padding: 0.5rem 1rem 1.5rem; white-space: nowrap; } .sidebar-menu .nav-link { color: var(--sr-text-muted); padding: 0.6rem 1rem; margin-bottom: 0.15rem; display: flex; align-items: center; justify-content: space-between; border-radius: 0.75rem; transition: background-color .15s ease, color .15s ease, box-shadow .15s ease; } .sidebar-menu .nav-link:hover { background-color: var(--sr-nav-hover-bg); color: var(--sr-heading); } .sidebar-menu .nav-link.active, .sidebar-menu .nav-link[aria-current="page"] { background-color: var(--sr-primary); color: #fff; box-shadow: 0 10px 20px -8px rgba(var(--sr-primary-rgb), .5); } .sidebar-menu .nav-link i:first-child, .sidebar-menu .nav-link span > i { width: 1.25rem; text-align: center; margin-right: 0.5rem; } .sidebar-menu .submenu-caret { font-size: 0.75rem; transition: transform 0.15s ease; } .sidebar-menu .submenu-toggle[aria-expanded="true"] .submenu-caret { transform: rotate(180deg); } .sidebar-menu .submenu-level-1 .nav-link { padding-left: 2.25rem; font-size: .92rem; } .sidebar-menu .submenu-level-2 .nav-link { padding-left: 3rem; } .sidebar-menu .submenu-level-3 .nav-link { padding-left: 3.75rem; } .sidebar-menu .submenu-level-4 .nav-link { padding-left: 4.5rem; } .sidebar-footer { margin: 1.5rem 1rem 1.25rem; padding-top: 1rem; border-top: 1px solid var(--sr-border); } .sidebar-status { display: flex; align-items: center; gap: .65rem; padding: .65rem .85rem; background-color: var(--sr-status-bg); border: 1px solid var(--sr-border-strong); border-radius: .85rem; } .topbar-icon-btn { color: var(--sr-text-muted); border-color: var(--sr-border-strong); } .topbar-icon-btn:hover { color: var(--sr-heading); background-color: var(--sr-nav-hover-bg); border-color: var(--sr-border-strong); } /* ---------- Main area / topbar ---------- */ .app-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .topbar { display: flex; align-items: center; padding: 0.65rem 1.25rem; background-color: var(--sr-bg); border-bottom: 1px solid var(--sr-border); position: sticky; top: 0; z-index: 1020; } .topbar-spacer { flex: 1 1 auto; } .topbar-search { max-width: 320px; width: 100%; } .role-badge { display: inline-flex; align-items: center; padding: .3rem .85rem; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #fff; background-color: var(--sr-primary); border-radius: 999px; } @media (max-width: 768px) { .sidebar { position: fixed; z-index: 1030; } .topbar-search { max-width: 160px; } } /* ---------- Cards, forms, tables (glass surface) ---------- */ .card { background-color: var(--sr-surface-translucent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--sr-border); border-radius: 1rem; } .table { --bs-table-bg: transparent; } .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_length label, .dataTables_wrapper .dataTables_filter label, .dataTables_wrapper .dataTables_paginate { color: var(--sr-text-muted); } .dataTables_wrapper .dataTables_length select, .dataTables_wrapper .dataTables_filter input { background-color: var(--sr-surface); color: var(--sr-text); border: 1px solid var(--sr-border-strong); border-radius: .5rem; } /* ---------- Dashboard: hero banner ---------- */ .hero-banner { position: relative; overflow: hidden; padding: 2.25rem 2.5rem; border-radius: 1.5rem; border: 1px solid var(--sr-border); background: linear-gradient(120deg, rgba(59, 130, 246, .18), rgba(139, 92, 246, .18)); box-shadow: 0 25px 50px -20px rgba(0, 0, 0, .5); } .hero-banner::after { content: ""; position: absolute; top: -30%; right: -8%; width: 16rem; height: 16rem; border-radius: 50%; background: rgba(59, 130, 246, .12); filter: blur(60px); } .hero-banner h2 { position: relative; font-weight: 700; } .hero-banner p { position: relative; color: var(--sr-text-muted); max-width: 32rem; } /* ---------- Dashboard: stat cards ---------- */ .stat-card { padding: 1.5rem; height: 100%; } .stat-card:hover { border-color: rgba(var(--sr-primary-rgb), .5); } .stat-card .stat-label { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--sr-text-muted); } .stat-card .stat-value { font-size: 2.25rem; font-weight: 700; color: var(--sr-heading); margin-top: .15rem; } .icon-chip { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: .85rem; font-size: 1.35rem; transition: background-color .2s ease, color .2s ease, transform .2s ease; } .icon-chip-primary { background-color: rgba(59, 130, 246, .12); color: var(--sr-primary); } .icon-chip-purple { background-color: rgba(139, 92, 246, .12); color: var(--sr-purple); } .icon-chip-emerald { background-color: rgba(16, 185, 129, .12); color: var(--sr-emerald); } .icon-chip-amber { background-color: rgba(245, 158, 11, .12); color: var(--sr-amber); } .stat-card:hover .icon-chip-primary { background-color: var(--sr-primary); color: #fff; transform: scale(1.08); } .stat-card:hover .icon-chip-purple { background-color: var(--sr-purple); color: #fff; transform: scale(1.08); } .stat-card:hover .icon-chip-emerald { background-color: var(--sr-emerald); color: #fff; transform: scale(1.08); } .stat-card:hover .icon-chip-amber { background-color: var(--sr-amber); color: #fff; transform: scale(1.08); } .status-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background-color: var(--sr-emerald); box-shadow: 0 0 0 rgba(16, 185, 129, .6); animation: sr-pulse 2s infinite; } @keyframes sr-pulse { 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, .55); } 70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); } 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } } /* ---------- Login ---------- */ .login-page-wrapper { min-height: calc(100vh - 1rem); display: flex; align-items: center; justify-content: center; margin: -1rem -0.75rem 0; padding: 1rem; background: radial-gradient(circle at 25% 20%, rgba(59, 130, 246, .22), transparent 55%), var(--sr-bg); } .card-login { max-width: 420px; width: 100%; } .captcha-img { border: 1px solid var(--sr-border-strong); border-radius: 0.5rem; vertical-align: middle; } @media (max-width: 576px) { .container-fluid { padding-left: 0.75rem; padding-right: 0.75rem; } }