/* * Namaha admin — design system layer. * Loaded AFTER dist/css/style.min.css so these rules win the cascade. * Phase 1 scope: topbar + sidebar (global, every page) + dashboard content * (index.php only). Other pages' content areas are restyled in Phase 2. */ :root { --n-bg: #f4f6fb; --n-surface: #ffffff; --n-surface-alt: #f8f9fc; --n-text: #1f2430; --n-text-muted: #6b7280; --n-border: #e5e7f0; --n-primary: #4f46e5; --n-primary-hover: #4338ca; --n-primary-soft: #eef0fd; --n-accent: #f59e0b; --n-success: #16a34a; --n-success-soft: #e8f8ee; --n-danger: #dc2626; --n-danger-soft: #fdecec; --n-warning: #d97706; --n-warning-soft: #fdf3e3; --n-info: #0891b2; --n-info-soft: #e6f6f9; --n-shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04); --n-shadow-md: 0 8px 24px rgba(15, 23, 42, .08); --n-radius: 14px; --n-radius-sm: 8px; /* Sidebar/topbar keep a fixed dark identity in both themes. */ --n-side-bg: #171a2e; --n-side-bg-alt: #1e2140; --n-side-text: #c6c9e0; --n-side-text-active: #ffffff; --n-side-border: #2a2d4a; } :root[data-theme="dark"] { --n-bg: #10131c; --n-surface: #171b28; --n-surface-alt: #1d2231; --n-text: #e7e9f2; --n-text-muted: #9aa1b5; --n-border: #262c3f; --n-primary: #6366f1; --n-primary-hover: #818cf8; --n-primary-soft: #23264a; --n-accent: #fbbf24; --n-success: #22c55e; --n-success-soft: #123822; --n-danger: #f87171; --n-danger-soft: #3a1a1a; --n-warning: #fbbf24; --n-warning-soft: #3a2c0f; --n-info: #22d3ee; --n-info-soft: #0f2e35; --n-shadow: 0 1px 3px rgba(0, 0, 0, .4); --n-shadow-md: 0 8px 24px rgba(0, 0, 0, .5); } /* ---------- Base ---------- */ html, body { background: var(--n-bg) !important; color: var(--n-text); font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } /* The actual visible page background is these wrapper divs, not — they sit on top of it and cover the whole content area, so styling body alone left the page looking white/unthemed even with the toggle on. */ #main-wrapper, .page-wrapper, .container-fluid { background: var(--n-bg) !important; } /* ---------- Theme toggle button ---------- */ .n-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .08); border: none; color: var(--n-side-text-active); cursor: pointer; transition: background .15s ease; } .n-theme-toggle:hover { background: rgba(255, 255, 255, .18); } .n-theme-toggle i { font-size: 16px; } /* ---------- Topbar ---------- */ .topbar, .topbar .navbar { background: var(--n-side-bg) !important; box-shadow: var(--n-shadow); } .topbar .app-search input { background: rgba(255, 255, 255, .08); border: 1px solid var(--n-side-border); color: var(--n-side-text-active); border-radius: var(--n-radius-sm); } .topbar .app-search input::placeholder { color: var(--n-side-text); } .topbar .nav-link { color: var(--n-side-text) !important; } .topbar .nav-link:hover { color: var(--n-side-text-active) !important; } /* ---------- Sidebar ---------- */ .left-sidebar { background: var(--n-side-bg) !important; border-right: 1px solid var(--n-side-border); } .left-sidebar .user-profile { background: var(--n-side-bg-alt); border-bottom: 1px solid var(--n-side-border); } .left-sidebar .user-profile .link, .left-sidebar .user-profile .u-dropdown { color: var(--n-side-text-active) !important; } #sidebarnav > li > a { color: var(--n-side-text) !important; border-radius: var(--n-radius-sm); margin: 2px 10px; transition: background .15s ease, color .15s ease; } #sidebarnav > li > a:hover, #sidebarnav > li.active > a { background: rgba(99, 102, 241, .18) !important; color: var(--n-side-text-active) !important; } #sidebarnav ul { background: var(--n-side-bg-alt) !important; } #sidebarnav ul li a { color: var(--n-side-text) !important; border-radius: var(--n-radius-sm); } #sidebarnav ul li a:hover { color: var(--n-side-text-active) !important; background: rgba(99, 102, 241, .14) !important; } #sidebarnav > li > a i { color: var(--n-primary); } /* ---------- Cards ---------- */ .card { background: var(--n-surface); border: 1px solid var(--n-border); border-radius: var(--n-radius); box-shadow: var(--n-shadow); color: var(--n-text); } .card .card-title { color: var(--n-text); font-weight: 600; } .card .card-subtitle, .text-muted { color: var(--n-text-muted) !important; } /* ---------- Dashboard: KPI stat cards ---------- */ .n-kpi-card { display: flex; align-items: flex-start; gap: 14px; padding: 4px 2px; } .n-kpi-icon { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; } .n-kpi-icon.n-primary { background: var(--n-primary-soft); color: var(--n-primary); } .n-kpi-icon.n-success { background: var(--n-success-soft); color: var(--n-success); } .n-kpi-icon.n-info { background: var(--n-info-soft); color: var(--n-info); } .n-kpi-icon.n-warning { background: var(--n-warning-soft); color: var(--n-warning); } .n-kpi-body h2 { color: var(--n-text); font-weight: 700; margin: 2px 0; } /* ---------- Dashboard: management section grid ---------- */ .n-action-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; } .n-action-card { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: var(--n-radius-sm); background: var(--n-surface-alt); border: 1px solid var(--n-border); color: var(--n-text) !important; text-decoration: none !important; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .n-action-card:hover { transform: translateY(-2px); box-shadow: var(--n-shadow-md); border-color: var(--n-primary); color: var(--n-text) !important; } .n-action-card.n-disabled { opacity: .5; pointer-events: none; } .n-action-card .n-action-icon { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: var(--n-primary-soft); color: var(--n-primary); font-size: 15px; } .n-section-label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--n-text-muted); margin: 22px 0 10px; } /* ---------- Buttons ---------- */ .btn { border-radius: var(--n-radius-sm); } .btn-primary { background: var(--n-primary); border-color: var(--n-primary); } .btn-primary:hover { background: var(--n-primary-hover); border-color: var(--n-primary-hover); } /* ---------- Tables ---------- */ .table { color: var(--n-text); } .table thead th { color: var(--n-text-muted); border-bottom: 1px solid var(--n-border); font-weight: 600; } .table td, .table th { border-color: var(--n-border); } .table-hover tbody tr:hover { background: var(--n-surface-alt); } /* Bootstrap's own zebra striping (.table-striped, no DataTables JS involved) uses a fixed light rgba overlay that shows as a white row on a dark background. */ .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--n-surface-alt); color: var(--n-text); } /* ---------- Breadcrumb / page header ---------- */ .page-titles { background: transparent; } .text-themecolor { color: var(--n-text) !important; font-weight: 700; } .breadcrumb { background: transparent; } .breadcrumb-item a { color: var(--n-primary); } /* ---------- Footer ---------- */ .footer { background: transparent; color: var(--n-text-muted); border-top: 1px solid var(--n-border); } /* ---------- Forms ---------- */ .form-control { background: var(--n-surface); border: 1px solid var(--n-border); color: var(--n-text); border-radius: var(--n-radius-sm); } .form-control:focus { background: var(--n-surface); color: var(--n-text); border-color: var(--n-primary); box-shadow: 0 0 0 3px var(--n-primary-soft); } .form-control::placeholder { color: var(--n-text-muted); } select.form-control option { background: var(--n-surface); color: var(--n-text); } label { color: var(--n-text); } /* ---------- Select2 (renders its own markup outside .form-control) ---------- */ .select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple { background: var(--n-surface) !important; border: 1px solid var(--n-border) !important; color: var(--n-text) !important; } .select2-container--default .select2-selection__rendered { color: var(--n-text) !important; } .select2-container--default .select2-selection__placeholder { color: var(--n-text-muted) !important; } .select2-container--default .select2-selection--multiple .select2-selection__choice { background: var(--n-surface-alt) !important; border: 1px solid var(--n-border) !important; color: var(--n-text) !important; } .select2-container--default .select2-selection__arrow b { border-color: var(--n-text-muted) transparent transparent transparent !important; } .select2-dropdown { background: var(--n-surface) !important; border: 1px solid var(--n-border) !important; color: var(--n-text) !important; } .select2-search__field { background: var(--n-surface) !important; color: var(--n-text) !important; border: 1px solid var(--n-border) !important; } .select2-results__option { background: var(--n-surface) !important; color: var(--n-text) !important; } .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--n-primary) !important; color: #fff !important; } .select2-container--default .select2-results__option[aria-selected=true] { background: var(--n-surface-alt) !important; } /* ---------- DataTables (used on every list page) ---------- */ .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate { color: var(--n-text-muted); } .dataTables_wrapper .dataTables_length select, .dataTables_wrapper .dataTables_filter input { background: var(--n-surface); color: var(--n-text); border: 1px solid var(--n-border); border-radius: var(--n-radius-sm); } .dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--n-text) !important; border-radius: var(--n-radius-sm); } .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--n-primary) !important; border-color: var(--n-primary) !important; color: #fff !important; } .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--n-primary-soft) !important; color: var(--n-text) !important; border-color: var(--n-border) !important; } .dataTables_wrapper table.dataTable thead th, .dataTables_wrapper table.dataTable thead td { border-bottom: 1px solid var(--n-border); color: var(--n-text-muted); } table.dataTable tbody tr { background: var(--n-surface); color: var(--n-text); } table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd { background: var(--n-surface-alt); } /* ---------- Modals & dropdowns ---------- */ .modal-content { background: var(--n-surface); color: var(--n-text); border: 1px solid var(--n-border); border-radius: var(--n-radius); } .modal-header, .modal-footer { border-color: var(--n-border); } .dropdown-menu { background: var(--n-surface); color: var(--n-text); border: 1px solid var(--n-border); box-shadow: var(--n-shadow-md); } .dropdown-item { color: var(--n-text); } .dropdown-item:hover, .dropdown-item:focus { background: var(--n-surface-alt); color: var(--n-text); } .dropdown-divider { border-color: var(--n-border); } /* ---------- Toasts / alerts ---------- */ /* Bootstrap's default alert/toast variants use hardcoded pastel backgrounds with dark text (e.g. #d4edda for alert-success) — left alone these render as bright white/pastel boxes sitting in an otherwise dark page. */ .alert-info { background: var(--n-info-soft); color: var(--n-info); border-color: var(--n-info); } .alert-success { background: var(--n-success-soft); color: var(--n-success); border-color: var(--n-success); } .alert-danger { background: var(--n-danger-soft); color: var(--n-danger); border-color: var(--n-danger); } .alert-warning { background: var(--n-warning-soft); color: var(--n-warning); border-color: var(--n-warning); } .alert-secondary { background: var(--n-surface-alt); color: var(--n-text); border-color: var(--n-border); } .btn-close { filter: none; } :root[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* Toasts (e.g. save-confirmation popups) — Bootstrap's default .toast background is a semi-transparent white regardless of theme. */ .toast { background-color: var(--n-surface); color: var(--n-text); border: 1px solid var(--n-border); box-shadow: var(--n-shadow-md); } .toast-body { color: inherit; } /* These already carry their own solid bg-success/bg-danger color via Bootstrap utility classes in the markup, just need dark-safe text. */ .toast.bg-success, .toast.bg-danger { color: #fff; } /* ---------- Card headers, switches, checkboxes ---------- */ .card-header { background: var(--n-surface-alt); border-bottom: 1px solid var(--n-border); color: var(--n-text); } .card-header.bg-white { background: var(--n-surface-alt) !important; } .custom-control-label::before, .form-check-input { background-color: var(--n-surface); border-color: var(--n-border); } .form-switch .form-check-input { background-color: var(--n-border); } .form-check-input:checked { background-color: var(--n-primary); border-color: var(--n-primary); } /* ---------- Home list live/not-live row highlight ---------- */ /* Semi-transparent overlays instead of solid pastel hex, so they read correctly tinted against either a white or a dark surface underneath. */ .n-live-row { background: rgba(34, 197, 94, .15) !important; } .n-not-live-row { background: rgba(239, 68, 68, .15) !important; } /* ---------- Misc ---------- */ hr { border-color: var(--n-border); } .badge.bg-info { background: var(--n-info) !important; } .badge.bg-secondary { background: var(--n-text-muted) !important; } /* Hints the browser to render native widgets (date pickers, scrollbars on some platforms) in a dark-safe variant instead of always-light. */ :root[data-theme="dark"] { color-scheme: dark; } .preloader { background: var(--n-bg); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--n-bg); } ::-webkit-scrollbar-thumb { background: var(--n-border); border-radius: 6px; }