/* ========================================================================== THEME NOVA (v3 - "Aurora", switchable) Light-by-default, card-based admin console with a real light/dark toggle and a swappable accent color, both driven by data-nova-theme / data-nova-accent on (see js/theme-switcher.js). No dependency on the vendor light.css/dark.css toggle or Bootstrap's own dark-mode table variables - a custom .nova-table component guarantees contrast. ========================================================================== */ :root, html[data-nova-theme="light"] { --nova-bg-0: #eef0f4; --nova-bg-1: #f4f5f8; --nova-bg-2: #ffffff; --nova-surface: #ffffff; --nova-surface-strong: #f6f7fa; --nova-surface-hover: #fff3ef; --nova-border: #e6e8ee; --nova-text: #14161f; --nova-text-muted: #7a7f8d; --nova-sidebar-bg: #14151c; --nova-sidebar-bg-2: #0e0f15; --nova-sidebar-text: #9298ab; --nova-code-bg: #14151c; --nova-code-text: #d7ffe6; } html[data-nova-theme="dark"] { --nova-bg-0: #0b0c12; --nova-bg-1: #101219; --nova-bg-2: #171923; --nova-surface: #171923; --nova-surface-strong: #1e2029; --nova-surface-hover: #23181a; --nova-border: #2a2d3a; --nova-text: #eef0f6; --nova-text-muted: #9298ab; --nova-sidebar-bg: #0a0b10; --nova-sidebar-bg-2: #050506; --nova-sidebar-text: #868ca0; --nova-code-bg: #05060a; --nova-code-text: #b6ffd6; } :root { --nova-violet: #7c5cff; --nova-cyan: #22b8d3; --nova-pink: #ef4899; --nova-amber: #f59e0b; --nova-green: #22c55e; --nova-red: #ef4444; --nova-blue: #3b82f6; --nova-radius: 20px; --nova-radius-sm: 12px; --nova-shadow: 0 10px 30px rgba(20, 22, 31, 0.06); --nova-shadow-lg: 0 18px 46px rgba(20, 22, 31, 0.12); } html[data-nova-theme="dark"] { --nova-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); --nova-shadow-lg: 0 18px 46px rgba(0, 0, 0, 0.45); } /* ---------- accent color presets ---------- */ :root, html[data-nova-accent="orange"] { --nova-primary: #ff5a36; --nova-primary-2: #ff8a3d; --nova-gradient-1: linear-gradient(135deg, #ff5a36 0%, #ff8a3d 100%); } html[data-nova-accent="blue"] { --nova-primary: #3b82f6; --nova-primary-2: #22b8d3; --nova-gradient-1: linear-gradient(135deg, #3b82f6 0%, #22b8d3 100%); } html[data-nova-accent="violet"] { --nova-primary: #7c5cff; --nova-primary-2: #ef4899; --nova-gradient-1: linear-gradient(135deg, #7c5cff 0%, #ef4899 100%); } html[data-nova-accent="green"] { --nova-primary: #16a34a; --nova-primary-2: #22b8d3; --nova-gradient-1: linear-gradient(135deg, #16a34a 0%, #22b8d3 100%); } :root { --nova-gradient-2: linear-gradient(135deg, #3b82f6 0%, #22b8d3 100%); --nova-gradient-3: linear-gradient(135deg, #22c55e 0%, #22b8d3 100%); --nova-gradient-4: linear-gradient(135deg, #7c5cff 0%, #ef4899 100%); } /* ---------- base canvas ---------- */ body { background: var(--nova-bg-0) !important; color: var(--nova-text); font-family: "Inter", "Poppins", -apple-system, BlinkMacSystemFont, sans-serif; } ::selection { background: color-mix(in srgb, var(--nova-primary) 25%, transparent); color: var(--nova-text); } * { scrollbar-width: thin; scrollbar-color: var(--nova-border) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--nova-border); border-radius: 20px; border: 2px solid transparent; background-clip: padding-box; } h1, h2, h3, h4, h5, h6 { color: var(--nova-text); font-weight: 700; letter-spacing: -0.01em; } a { color: var(--nova-blue); } .text-muted { color: var(--nova-text-muted) !important; } /* ---------- sidebar: slim dark icon+label rail (stays dark in both modes) */ #sidebar.sidebar, .sidebar { background: linear-gradient(180deg, var(--nova-sidebar-bg) 0%, var(--nova-sidebar-bg-2) 100%) !important; border-right: none; width: 236px; } .sidebar .sidebar-content, .sidebar-content.bg-white { background: transparent !important; } .sidebar-brand { border-bottom: 1px solid rgba(255,255,255,0.06) !important; } .sidebar-brand span { color: #ffffff !important; font-weight: 800; letter-spacing: 0.2px; } .nova-nav-group-label { color: #565b6c; text-transform: uppercase; letter-spacing: 1.2px; font-size: 0.66rem; font-weight: 700; padding: 16px 18px 6px; } .nova-nav-item { display: flex; align-items: center; gap: 10px; color: var(--nova-sidebar-text); padding: 8px 14px; margin: 1px 10px; border-radius: 10px; cursor: pointer; font-size: 0.86rem; transition: all 0.15s ease; white-space: nowrap; } .nova-nav-item i { width: 18px; text-align: center; font-size: 0.85rem; } .nova-nav-item:hover { color: #fff; background: rgba(255,255,255,0.07); } .nova-nav-item.nova-active { color: #fff; background: var(--nova-gradient-1); box-shadow: 0 6px 18px color-mix(in srgb, var(--nova-primary) 45%, transparent); } /* The vendor template absolutely-positions .nav-bottom (the copyright line) at the bottom of .sidebar-content, which is set to height:100vh. With the longer nav list this console now has, that meant the pinned footer visually overlapped/overlaid the last one or two menu items instead of sitting cleanly below them. Fix: turn the sidebar into a real flex column so the footer is a normal flex item (pushed down with margin-top:auto) and the nav list gets its own independent scroll region that stops exactly where the footer begins - no overlap possible. */ #sidebar .sidebar-content { display: flex; flex-direction: column; height: 100vh; } .nova-sidebar-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-bottom: 12px; } .nav-bottom { position: static !important; left: auto !important; bottom: auto !important; width: auto !important; margin-top: auto; flex: 0 0 auto; background: var(--nova-sidebar-bg-2); color: var(--nova-sidebar-text) !important; border-top-color: rgba(255,255,255,0.06) !important; } .nav-bottom a { color: #cfd2db !important; } /* ---------- top navbar ---------- */ .navbar.navbar-bg { background: color-mix(in srgb, var(--nova-surface) 80%, transparent) !important; backdrop-filter: blur(14px); border-bottom: 1px solid var(--nova-border); } .navbar .nav-link, .navbar .text-dark { color: var(--nova-text) !important; } /* theme switcher popover */ .nova-theme-toggle { display: flex; align-items: center; gap: 6px; cursor: pointer; } .nova-theme-popover { /* Positioned via JS (theme-switcher.js) with position:fixed and inline top/left, and moved to be a direct child of . This deliberately escapes .main's overflow-y:hidden (the vendor template's scroll-lock wrapper), which was clipping it when it lived inline in the navbar. */ position: fixed; top: 0; left: 0; background: var(--nova-surface); border: 1px solid var(--nova-border); border-radius: var(--nova-radius-sm); box-shadow: var(--nova-shadow-lg); padding: 14px; width: 230px; z-index: 100000; display: none; } .nova-theme-popover.open { display: block; } .nova-theme-popover .nova-tp-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.6px; color: var(--nova-text-muted); font-weight: 700; margin: 8px 0 6px; } .nova-mode-row { display: flex; gap: 8px; } .nova-mode-btn { flex: 1; border: 1px solid var(--nova-border); background: var(--nova-surface-strong); color: var(--nova-text); border-radius: 10px; padding: 6px 0; font-size: 0.78rem; cursor: pointer; } .nova-mode-btn.active { background: var(--nova-gradient-1); color: #fff; border-color: transparent; } .nova-accent-row { display: flex; gap: 10px; } .nova-accent-swatch { width: 26px; height: 26px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; } .nova-accent-swatch.active { border-color: var(--nova-text); } /* ---------- surfaces: cards / panels ---------- */ .card { background: var(--nova-surface) !important; border: 1px solid var(--nova-border) !important; border-radius: var(--nova-radius) !important; box-shadow: var(--nova-shadow); color: var(--nova-text); } .card-header { background: transparent !important; border-bottom: 1px solid var(--nova-border) !important; } .card-title { color: var(--nova-text) !important; font-weight: 700; } /* ---------- Nova KPI stat cards ---------- */ .nova-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; margin-bottom: 22px; } .nova-stat-card { position: relative; border-radius: var(--nova-radius); border: 1px solid var(--nova-border); background: var(--nova-surface); padding: 20px 22px; box-shadow: var(--nova-shadow); transition: transform 0.2s ease, box-shadow 0.2s ease; } .nova-stat-card:hover { transform: translateY(-3px); box-shadow: var(--nova-shadow-lg); } .nova-stat-card .nova-stat-icon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--nova-accent, var(--nova-gradient-1)); color: #fff; font-size: 1.1rem; box-shadow: 0 8px 18px rgba(20,22,31,0.18); margin-bottom: 12px; } .nova-stat-card .nova-stat-value { font-size: 2rem; font-weight: 800; line-height: 1.1; color: var(--nova-text); } .nova-stat-card .nova-stat-label { color: var(--nova-text-muted); font-size: 0.8rem; font-weight: 600; margin-top: 4px; } .nova-stat-card .nova-stat-sub { color: var(--nova-text-muted); font-size: 0.78rem; margin-top: 6px; } .nova-accent-violet { --nova-accent: var(--nova-gradient-4); } .nova-accent-pink { --nova-accent: var(--nova-gradient-4); } .nova-accent-cyan { --nova-accent: var(--nova-gradient-2); } .nova-accent-amber { --nova-accent: var(--nova-gradient-1); } .nova-panel { border-radius: var(--nova-radius); border: 1px solid var(--nova-border); background: var(--nova-surface); box-shadow: var(--nova-shadow); padding: 20px; margin-bottom: 18px; } .nova-panel-title { font-weight: 700; font-size: 1rem; color: var(--nova-text); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .nova-panel-title .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--nova-primary); } /* ---------- buttons ---------- */ .btn-primary { background: var(--nova-text) !important; border: none !important; color: var(--nova-bg-0) !important; } .btn-primary:hover { filter: brightness(1.2); } .btn-outline-dark, .btn-outline-secondary { color: var(--nova-text) !important; border-color: var(--nova-border) !important; background: var(--nova-surface) !important; } .btn-outline-dark:hover, .btn-outline-secondary:hover { background: var(--nova-surface-strong) !important; border-color: var(--nova-text) !important; } .btn-nova { background: var(--nova-gradient-1); color: #fff; border: none; border-radius: 12px; padding: 8px 18px; font-weight: 700; box-shadow: 0 8px 20px color-mix(in srgb, var(--nova-primary) 35%, transparent); transition: transform 0.15s ease, filter 0.15s ease; } .btn-nova:hover { transform: translateY(-1px); filter: brightness(1.05); color: #fff; } .btn-nova-danger { background: linear-gradient(135deg, #ef4444, #f59e0b); box-shadow: 0 8px 18px rgba(239,68,68,0.25); } .btn-nova-outline { background: var(--nova-surface); color: var(--nova-text); border: 1px solid var(--nova-border); border-radius: 12px; padding: 7px 16px; font-weight: 600; transition: all .15s ease; } .btn-nova-outline:hover { border-color: var(--nova-primary); color: var(--nova-primary); background: var(--nova-surface-strong); } /* circular icon action buttons (edit/delete/etc in tables) */ .nova-icon-btn { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--nova-surface-strong); border: 1px solid var(--nova-border); color: var(--nova-text-muted); cursor: pointer; transition: all .15s ease; font-size: 0.8rem; } .nova-icon-btn:hover { background: var(--nova-primary); color: #fff; border-color: transparent; transform: translateY(-1px); box-shadow: 0 6px 14px color-mix(in srgb, var(--nova-primary) 40%, transparent); } .nova-icon-btn.danger:hover { background: var(--nova-red); box-shadow: 0 6px 14px rgba(239,68,68,0.4); } /* ---------- custom data table (no Bootstrap .table dependency) ---------- */ .nova-table-wrap { overflow-x: auto; } .nova-table { width: 100%; border-collapse: separate; border-spacing: 0 8px; } .nova-table thead th { text-align: left; color: var(--nova-text-muted); text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.6px; font-weight: 700; padding: 0 16px 8px; border: none; background: transparent; } .nova-table tbody tr { background: var(--nova-surface-strong); transition: background 0.15s ease, transform 0.1s ease; } .nova-table tbody tr:hover { background: var(--nova-surface-hover); } .nova-table tbody td { padding: 13px 16px; border: none; color: var(--nova-text); font-size: 0.87rem; vertical-align: middle; } .nova-table tbody td:first-child { border-radius: 12px 0 0 12px; } .nova-table tbody td:last-child { border-radius: 0 12px 12px 0; } .nova-table .nova-table-empty { text-align: center; padding: 40px 20px; color: var(--nova-text-muted); background: transparent; } /* legacy Bootstrap tables (DataTables etc, any remaining page) still get a readable baseline, but nothing here is allowed to go dark-on-dark. */ .table { color: var(--nova-text); --bs-table-bg: transparent; } .table > :not(caption) > * > * { background: transparent; color: var(--nova-text); } .table-striped > tbody > tr:nth-of-type(odd) > * { background: var(--nova-surface-strong); color: var(--nova-text); } .table thead th { border-bottom: 1px solid var(--nova-border) !important; color: var(--nova-text-muted); text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.6px; font-weight: 700; } .table td, .table th { border-color: var(--nova-border) !important; } .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--nova-text) !important; border: none !important; color: var(--nova-bg-0) !important; border-radius: 8px !important; } .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info { color: var(--nova-text-muted); } /* ---------- badges / pills ---------- */ .badge.badge-pill.badge-secondary, .badge-secondary { background: var(--nova-surface-strong) !important; color: var(--nova-text) !important; border: 1px solid var(--nova-border); font-weight: 600; } .nova-badge-green { background: rgba(34,197,94,0.14) !important; color: #16803c !important; border: 1px solid rgba(34,197,94,0.3); } .nova-badge-amber { background: rgba(245,158,11,0.16) !important; color: #92620a !important; border: 1px solid rgba(245,158,11,0.32); } .nova-badge-red { background: rgba(239,68,68,0.14) !important; color: #b91c1c !important; border: 1px solid rgba(239,68,68,0.3); } .nova-badge-cyan { background: rgba(59,130,246,0.14) !important; color: #1d4ed8 !important; border: 1px solid rgba(59,130,246,0.3); } .nova-badge-dark { background: var(--nova-text) !important; color: var(--nova-bg-0) !important; border: 1px solid var(--nova-text); } html[data-nova-theme="dark"] .nova-badge-green { color: #6ee7a8 !important; } html[data-nova-theme="dark"] .nova-badge-amber { color: #ffd28f !important; } html[data-nova-theme="dark"] .nova-badge-red { color: #ffb1c0 !important; } html[data-nova-theme="dark"] .nova-badge-cyan { color: #9dc4ff !important; } /* ---------- modals ---------- */ .modal-content { background: var(--nova-bg-2) !important; border: 1px solid var(--nova-border) !important; border-radius: var(--nova-radius) !important; color: var(--nova-text); box-shadow: var(--nova-shadow-lg); } .modal-header, .modal-footer { border-color: var(--nova-border) !important; } html[data-nova-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* ---------- forms ---------- */ .form-control, .form-select { background: var(--nova-surface) !important; border: 1px solid var(--nova-border) !important; color: var(--nova-text) !important; border-radius: 10px !important; } .form-control:focus, .form-select:focus { border-color: var(--nova-primary) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--nova-primary) 16%, transparent) !important; } .form-label { color: var(--nova-text); font-weight: 600; font-size: 0.85rem; } .form-text.small { color: var(--nova-text-muted); } /* ---------- JSON / code editor surfaces ---------- */ .nova-code-editor { width: 100%; min-height: 340px; background: var(--nova-code-bg); color: var(--nova-code-text); border: 1px solid var(--nova-border); border-radius: var(--nova-radius-sm); font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: 0.85rem; line-height: 1.5; padding: 14px; resize: vertical; tab-size: 2; } .nova-code-editor:focus { outline: none; border-color: var(--nova-blue); box-shadow: 0 0 0 3px rgba(59,130,246,0.18); } .nova-json-error { color: var(--nova-red); font-size: 0.8rem; margin-top: 6px; display: none; } /* ---------- Global Network map chrome ---------- */ .nova-map-shell { border-radius: var(--nova-radius); overflow: hidden; border: 1px solid var(--nova-border); box-shadow: var(--nova-shadow); } .leaflet-container { background: var(--nova-bg-0) !important; } .leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--nova-surface) !important; color: var(--nova-text) !important; } .nova-legend { background: var(--nova-surface); border: 1px solid var(--nova-border); border-radius: var(--nova-radius-sm); padding: 10px 14px; font-size: 0.82rem; } .nova-legend .swatch { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; } .nova-region-row { cursor: pointer; border-radius: 12px; padding: 10px 12px; transition: background .15s ease; } .nova-region-row:hover { background: var(--nova-surface-hover); } /* ---------- resource manager (list + form) ---------- */ .nova-resource-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; flex-wrap: wrap; gap: 12px; } .nova-resource-title h3 { margin-bottom: 2px; } .nova-field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 18px; } .nova-field-grid .full-span { grid-column: 1 / -1; } .nova-empty-state { text-align: center; padding: 40px 20px; color: var(--nova-text-muted); } @keyframes nova-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .nova-animate { animation: nova-fade-up 0.35s ease both; }