/** * NetShield panel — theme (light/dark) + modern UI layer * Loaded after ns-admin.css; overrides via [data-theme] on */ /* —— Light theme (default) —— */ :root, [data-theme="light"] { color-scheme: light; --ns-bg: #f4f6f9; --ns-bg-glow: #e8edf4; --ns-ink: #0f172a; --ns-muted: #64748b; --ns-line: #e2e8f0; --ns-line-strong: #cbd5e1; --ns-card: #ffffff; --ns-card-solid: #ffffff; --ns-card-hover: #ffffff; --ns-surface: #f8fafc; --ns-surface-2: #f1f5f9; --ns-input-bg: #ffffff; --ns-input-border: #cbd5e1; --ns-top-bg: rgba(244, 246, 249, 0.88); --ns-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06); --ns-shadow-lg: 0 16px 48px rgba(15, 23, 42, 0.1); --ns-radius: 14px; --ns-radius-sm: 10px; --ns-sidebar: #ffffff; --ns-sidebar-elev: #f8fafc; --ns-sidebar-hover: #f1f5f9; --ns-sidebar-active: rgba(15, 23, 42, 0.07); --ns-sidebar-text: #334155; --ns-sidebar-muted: #64748b; --ns-sidebar-border: rgba(15, 23, 42, 0.08); --ns-sidebar-shadow: 1px 0 0 var(--ns-sidebar-border); --ns-table-head: #f8fafc; --ns-table-hover: rgba(56, 189, 248, 0.06); --ns-act-ghost-bg: #ffffff; --ns-act-ghost-hover: #f8fafc; --ns-dropdown-bg: #ffffff; --ns-dropdown-shadow: 0 12px 40px rgba(15, 23, 42, 0.12); --ns-hero-bg: linear-gradient(135deg, #0b1220 0%, #0f1c33 42%, #0a1628 100%); --ns-scroll-thumb: #cbd5e1; --ns-footer-bg: linear-gradient(180deg, transparent, rgba(241, 245, 249, 0.96) 40%); --ns-footer-inner-bg: rgba(255, 255, 255, 0.94); --ns-footer-inner-border: rgba(213, 222, 232, 0.95); --ns-footer-shadow: 0 -4px 24px rgba(11, 21, 36, 0.06); --ns-accent: #38bdf8; --ns-accent-2: #0ea5e9; --ns-accent-soft: rgba(56, 189, 248, 0.12); } /* —— Dark theme —— */ [data-theme="dark"] { color-scheme: dark; --ns-bg: #0c1118; --ns-bg-glow: #111827; --ns-ink: #e2e8f0; --ns-muted: #94a3b8; --ns-line: #1e293b; --ns-line-strong: #334155; --ns-card: #151b24; --ns-card-solid: #151b24; --ns-card-hover: #1a222d; --ns-surface: #111820; --ns-surface-2: #0f141c; --ns-input-bg: #0f141c; --ns-input-border: #334155; --ns-top-bg: rgba(12, 17, 24, 0.92); --ns-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.25); --ns-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.35); --ns-sidebar: #080b10; --ns-sidebar-elev: #0d1219; --ns-sidebar-hover: #1a222d; --ns-sidebar-active: rgba(255, 255, 255, 0.08); --ns-sidebar-text: #cbd5e1; --ns-sidebar-muted: #8b97a8; --ns-sidebar-border: rgba(255, 255, 255, 0.06); --ns-sidebar-shadow: 4px 0 24px rgba(0, 0, 0, 0.25); --ns-table-head: #111820; --ns-table-hover: rgba(56, 189, 248, 0.08); --ns-act-ghost-bg: #151b24; --ns-act-ghost-hover: #1a222d; --ns-dropdown-bg: #151b24; --ns-dropdown-shadow: 0 16px 48px rgba(0, 0, 0, 0.45); --ns-hero-bg: linear-gradient(135deg, #060a10 0%, #0c1525 42%, #060d18 100%); --ns-scroll-thumb: #334155; --ns-footer-bg: linear-gradient(180deg, transparent, rgba(12, 17, 24, 0.98) 40%); --ns-footer-inner-bg: rgba(21, 27, 36, 0.96); --ns-footer-inner-border: rgba(30, 41, 59, 0.9); --ns-footer-shadow: 0 -4px 24px rgba(0, 0, 0, 0.35); --ns-accent: #38bdf8; --ns-accent-2: #0ea5e9; --ns-accent-soft: rgba(56, 189, 248, 0.14); } /* —— Base / shell —— */ body { background: radial-gradient(ellipse 80% 50% at 100% -20%, rgba(56, 189, 248, 0.06), transparent 50%), radial-gradient(ellipse 60% 40% at -10% 100%, rgba(14, 165, 233, 0.04), transparent 45%), var(--ns-bg) !important; color: var(--ns-ink); transition: background-color 0.2s ease, color 0.2s ease; } [data-theme="dark"] body { background: radial-gradient(ellipse 80% 50% at 100% -20%, rgba(56, 189, 248, 0.08), transparent 50%), radial-gradient(ellipse 60% 40% at -10% 100%, rgba(14, 165, 233, 0.05), transparent 45%), var(--ns-bg) !important; } /* Sidebar */ .ns-sidebar { background: linear-gradient(180deg, var(--ns-sidebar-elev) 0%, var(--ns-sidebar) 35%, var(--ns-sidebar) 100%) !important; color: var(--ns-sidebar-text) !important; border-right: 1px solid var(--ns-sidebar-border) !important; box-shadow: var(--ns-sidebar-shadow) !important; } [data-theme="light"] .ns-sidebar .ns-brand-logo { filter: none !important; opacity: 1 !important; } [data-theme="dark"] .ns-sidebar .ns-brand-logo { filter: brightness(0) invert(1); opacity: 0.96; } .ns-sidebar-collapse { color: var(--ns-sidebar-muted) !important; } .ns-sidebar-collapse:hover { background: var(--ns-sidebar-hover) !important; color: var(--ns-sidebar-text) !important; } .ns-nav-parent { color: var(--ns-sidebar-muted) !important; font-weight: 600 !important; padding: 10px 12px !important; border-radius: 10px !important; } .ns-nav-parent:hover, .ns-nav-drop:not(.is-open) .ns-nav-parent:hover { background: var(--ns-sidebar-hover) !important; color: var(--ns-sidebar-text) !important; } .ns-nav-drop.is-open .ns-nav-parent { color: var(--ns-sidebar-text) !important; background: transparent !important; } .ns-nav-parent-left i { color: var(--ns-sidebar-muted) !important; opacity: 1 !important; } .ns-nav-drop.is-open .ns-nav-parent-left i, .ns-nav-parent.is-active .ns-nav-parent-left i { color: var(--ns-sidebar-text) !important; } /* Açık grup — mavi çizgi / glow yok */ .ns-nav-drop.is-open { background: transparent !important; box-shadow: none !important; padding-bottom: 2px !important; } .ns-nav-children { padding: 2px 6px 6px 12px !important; gap: 2px !important; } .ns-nav-child { color: var(--ns-sidebar-muted) !important; padding: 8px 12px 8px 24px !important; border-radius: 8px !important; font-size: 0.84rem !important; } .ns-nav-child::before { width: 4px !important; height: 4px !important; left: 12px !important; background: var(--ns-sidebar-muted) !important; opacity: 0.5; box-shadow: none !important; } .ns-nav-child:hover { color: var(--ns-sidebar-text) !important; background: var(--ns-sidebar-hover) !important; } .ns-nav-child.active { background: var(--ns-sidebar-active) !important; color: var(--ns-sidebar-text) !important; font-weight: 600 !important; } .ns-nav-child.active::before { background: var(--ns-sidebar-text) !important; opacity: 0.85 !important; box-shadow: none !important; } .ns-nav-link { border-radius: 10px !important; margin-bottom: 4px !important; } .ns-nav-link:hover { background: var(--ns-sidebar-hover) !important; color: var(--ns-sidebar-text) !important; } .ns-nav-link.active { background: var(--ns-sidebar-active) !important; color: var(--ns-sidebar-text) !important; } .ns-nav-link.active .ns-nav-parent-left i { color: var(--ns-sidebar-text) !important; } .ns-nav-foot-link { color: var(--ns-sidebar-muted) !important; } .ns-nav-foot-link:hover { background: var(--ns-sidebar-hover) !important; color: var(--ns-sidebar-text) !important; } .ns-user-chip { background: var(--ns-sidebar-hover) !important; border: 1px solid var(--ns-sidebar-border); } .ns-user-name { color: var(--ns-sidebar-text) !important; } .ns-user-role { color: var(--ns-sidebar-muted) !important; } /* Top bar */ .ns-main-stick { background: var(--ns-top-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--ns-line); } .ns-top { background: transparent !important; } .ns-crumb { color: var(--ns-muted) !important; } .ns-title { color: var(--ns-ink) !important; } /* Footer */ .ns-footer { background: var(--ns-footer-bg) !important; color: var(--ns-muted) !important; } .ns-footer-inner { background: var(--ns-footer-inner-bg) !important; border-color: var(--ns-footer-inner-border) !important; box-shadow: var(--ns-footer-shadow) !important; } .ns-footer-brand { color: var(--ns-ink) !important; } .ns-footer a { color: var(--ns-accent) !important; } /* Typography in content area */ .ns-stat-value, .ns-card-head h2, .ns-pager-cur { color: var(--ns-ink) !important; } .ns-card-head .ns-meta { color: var(--ns-muted) !important; } .ns-pager { background: var(--ns-surface) !important; border-top-color: var(--ns-line) !important; } .ns-domain-btn:hover, .ns-domain-btn:focus { background: var(--ns-card-hover) !important; border-color: var(--ns-line-strong) !important; color: var(--ns-ink) !important; } .ns-top { border-bottom-color: var(--ns-line) !important; } .ns-act-danger:hover { background: rgba(220, 38, 38, 0.12) !important; border-color: rgba(248, 113, 113, 0.45) !important; color: #fca5a5 !important; } /* Cards */ .ns-card { background: var(--ns-card) !important; border-color: var(--ns-line) !important; box-shadow: var(--ns-shadow) !important; } .ns-card:hover { border-color: var(--ns-line-strong) !important; box-shadow: var(--ns-shadow-lg) !important; } .ns-stat-ico.danger { background: rgba(220, 38, 38, 0.12); color: #f87171; } .ns-stat-ico.warn { background: rgba(217, 119, 6, 0.12); color: #fb923c; } .ns-stat-ico.ok { background: rgba(5, 150, 105, 0.12); color: #34d399; } .ns-stat-ico.ink { background: var(--ns-surface); color: var(--ns-muted); } .ns-quick-tile { background: var(--ns-surface) !important; border-color: var(--ns-line) !important; color: var(--ns-ink) !important; } .ns-quick-tile:hover { background: var(--ns-card) !important; border-color: var(--ns-accent) !important; color: var(--ns-ink) !important; } .ns-node-chip { background: var(--ns-surface) !important; border-color: var(--ns-line) !important; } /* Forms & Bootstrap */ .form-control, .form-select { background-color: var(--ns-input-bg) !important; border-color: var(--ns-input-border) !important; color: var(--ns-ink) !important; } .form-control:focus, .form-select:focus { background-color: var(--ns-input-bg) !important; color: var(--ns-ink) !important; border-color: var(--ns-accent) !important; } .form-control::placeholder { color: var(--ns-muted); opacity: 0.75; } [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { color-scheme: dark; } [data-theme="dark"] .dropdown-menu { background: var(--ns-dropdown-bg); border-color: var(--ns-line); box-shadow: var(--ns-dropdown-shadow); } [data-theme="dark"] .dropdown-item { color: var(--ns-ink); } [data-theme="dark"] .dropdown-item:hover, [data-theme="dark"] .dropdown-item:focus { background: var(--ns-surface); color: var(--ns-ink); } [data-theme="dark"] .dropdown-item.active { background: var(--ns-sidebar-active); color: var(--ns-accent); } [data-theme="dark"] .dropdown-divider { border-color: var(--ns-line); } .ns-domain-btn { background: var(--ns-card) !important; border-color: var(--ns-line) !important; color: var(--ns-ink) !important; } /* Buttons */ .btn-ns-outline { background: var(--ns-act-ghost-bg) !important; border-color: var(--ns-line-strong) !important; color: var(--ns-ink) !important; } .btn-ns-outline:hover { background: var(--ns-act-ghost-hover) !important; border-color: var(--ns-muted) !important; color: var(--ns-ink) !important; } .ns-act-ghost { background: var(--ns-act-ghost-bg) !important; color: var(--ns-ink) !important; border-color: var(--ns-line) !important; } .ns-act-ghost:hover { background: var(--ns-act-ghost-hover) !important; border-color: var(--ns-line-strong) !important; color: var(--ns-ink) !important; } .ns-act-danger { background: var(--ns-act-ghost-bg) !important; } /* Tables — modern */ .ns-table-wrap { border: 1px solid var(--ns-line); border-radius: var(--ns-radius-sm); overflow: hidden; background: var(--ns-card); } .table-responsive.ns-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .ns-table th, .ns-table td { border-bottom-color: var(--ns-line) !important; } .ns-table th { background: var(--ns-table-head) !important; color: var(--ns-muted) !important; position: sticky; top: 0; z-index: 2; } .ns-table tbody tr:hover { background: var(--ns-table-hover) !important; } .ns-col-actions { width: 1%; white-space: nowrap; text-align: right !important; } .ns-table td.ns-col-actions, .ns-table th.ns-col-actions { position: sticky; right: 0; z-index: 3; background: var(--ns-card); box-shadow: -8px 0 16px rgba(0, 0, 0, 0.04); } .ns-table th.ns-col-actions { background: var(--ns-table-head) !important; } .ns-table tbody tr:hover td.ns-col-actions { background: var(--ns-card-hover, var(--ns-card)); } [data-theme="dark"] .ns-table td.ns-col-actions, [data-theme="dark"] .ns-table th.ns-col-actions { box-shadow: -8px 0 16px rgba(0, 0, 0, 0.2); } /* Action buttons — compact + menu */ .ns-actions { gap: 6px; position: relative; } .ns-act { min-width: auto !important; height: 32px !important; padding: 0 10px !important; border-radius: 8px !important; font-size: 0.78rem !important; } .ns-actions:not(.ns-actions--menu) .ns-act span { display: none; } .ns-actions:not(.ns-actions--menu) .ns-act { min-width: 32px !important; width: 32px; padding: 0 !important; } .ns-actions:not(.ns-actions--menu) .ns-act i { margin: 0; font-size: 0.85rem; } @media (min-width: 992px) { .ns-actions:not(.ns-actions--menu) .ns-act { min-width: auto !important; width: auto; padding: 0 12px !important; } .ns-actions:not(.ns-actions--menu) .ns-act span { display: inline; } } /* Collapsed action menu */ .ns-actions--menu .ns-actions-menu { position: relative; display: inline-flex; } .ns-actions-toggle { min-width: 32px !important; width: 32px; padding: 0 !important; } .ns-actions-toggle span { display: none !important; } .ns-actions-panel { position: absolute; top: calc(100% + 6px); right: 0; min-width: 168px; padding: 6px; background: var(--ns-dropdown-bg); border: 1px solid var(--ns-line); border-radius: var(--ns-radius-sm); box-shadow: var(--ns-dropdown-shadow); z-index: 1050; display: flex; flex-direction: column; gap: 4px; } .ns-actions-panel[hidden] { display: none !important; } .ns-actions-panel .ns-act, .ns-actions-panel-item { width: 100% !important; min-width: 0 !important; justify-content: flex-start !important; height: 34px !important; padding: 0 12px !important; } .ns-actions-panel .ns-act span, .ns-actions-panel-item span { display: inline !important; } /* Table accordion (node list) */ .ns-table-accordion .ns-table-drawer td { padding: 0 !important; background: var(--ns-surface); border-bottom: 1px solid var(--ns-line); } .ns-table-accordion .ns-table-main-row.is-expanded td { border-bottom-color: transparent; } .ns-row-drawer-panel { padding: 12px 16px 14px; border-top: 1px dashed var(--ns-line); } .ns-actions--drawer { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; } .ns-actions--drawer .ns-act { min-width: 108px !important; width: auto !important; padding: 0 12px !important; height: 34px !important; font-weight: 600 !important; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06); } .ns-actions--drawer .ns-act span { display: inline !important; } .ns-actions--drawer .ns-act-ghost { background: var(--ns-card) !important; border: 1px solid var(--ns-line-strong) !important; color: var(--ns-ink) !important; } .ns-actions--drawer .ns-act-ghost:hover { background: var(--ns-surface-2) !important; border-color: var(--ns-muted) !important; } .ns-actions--drawer .ns-act-danger { background: #fef2f2 !important; border: 1px solid #fecaca !important; color: #b91c1c !important; } .ns-actions--drawer .ns-act-danger:hover { background: #fee2e2 !important; border-color: #f87171 !important; color: #991b1b !important; } .ns-actions--drawer .ns-act-primary { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 4px 14px var(--ns-btn-shadow); } [data-theme="dark"] .ns-row-drawer-panel { background: rgba(255, 255, 255, 0.02); } [data-theme="dark"] .ns-actions--drawer .ns-act { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); } [data-theme="dark"] .ns-actions--drawer .ns-act-ghost { background: rgba(255, 255, 255, 0.07) !important; border-color: rgba(148, 163, 184, 0.4) !important; color: #e2e8f0 !important; } [data-theme="dark"] .ns-actions--drawer .ns-act-ghost:hover { background: rgba(255, 255, 255, 0.11) !important; border-color: rgba(148, 163, 184, 0.6) !important; color: #f8fafc !important; } [data-theme="dark"] .ns-actions--drawer .ns-act-danger { background: rgba(220, 38, 38, 0.2) !important; border-color: rgba(248, 113, 113, 0.5) !important; color: #fca5a5 !important; } [data-theme="dark"] .ns-actions--drawer .ns-act-danger:hover { background: rgba(220, 38, 38, 0.32) !important; border-color: rgba(248, 113, 113, 0.7) !important; color: #fecaca !important; } [data-theme="dark"] .ns-actions--drawer .ns-act-primary { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 4px 16px rgba(56, 189, 248, 0.28); } .ns-row-toggle { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .ns-row-toggle .ns-row-toggle-icon { transition: transform 0.2s ease; font-size: 0.72rem; } .ns-table-main-row.is-expanded .ns-row-toggle .ns-row-toggle-icon { transform: rotate(180deg); } .ns-terminal-log { max-height: 360px; overflow: auto; background: #0f1419; color: #d7e0ea; font-size: 12px; line-height: 1.45; border: 1px solid var(--ns-line); } [data-theme="dark"] .ns-terminal-log { background: #0a0e12; } @media (max-width: 767.98px) { .ns-table-accordion .ns-table-main-row td.ns-col-actions { display: table-cell; } .ns-actions--drawer { flex-direction: column; align-items: stretch; } .ns-actions--drawer .ns-act { width: 100% !important; justify-content: flex-start !important; } } /* Theme toggle */ .ns-theme-toggle { width: 38px; height: 38px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px !important; } .ns-theme-toggle i { font-size: 0.95rem; } /* Page hero — stays dark in both themes */ .ns-page-hero, .ns-cluster-hero { background: var(--ns-hero-bg) !important; } /* Settings hub */ .ns-settings-side { background: var(--ns-card); border-color: var(--ns-line); } .ns-settings-side-item { color: var(--ns-ink); border-color: transparent; } .ns-settings-side-item:hover { background: var(--ns-surface); color: var(--ns-ink); } .ns-settings-side-item:hover .ns-settings-side-hint { color: var(--ns-muted); } .ns-settings-side-item:hover .ns-settings-side-icon { background: var(--ns-surface-2); color: var(--ns-ink); } .ns-settings-side-item.active { background: var(--ns-sidebar-active); color: var(--ns-ink); box-shadow: none; } .ns-settings-side-item.active .ns-settings-side-icon { background: var(--ns-surface); color: var(--ns-ink); } .ns-settings-tile { background: var(--ns-card) !important; border-color: var(--ns-line) !important; } .ns-settings-tile:hover { border-color: var(--ns-accent) !important; background: var(--ns-surface) !important; } /* Modals */ [data-theme="dark"] .modal-content { background: var(--ns-card); border-color: var(--ns-line); color: var(--ns-ink); } [data-theme="dark"] .modal-header, [data-theme="dark"] .modal-footer { border-color: var(--ns-line); } [data-theme="dark"] .btn-close { filter: invert(1) grayscale(1); opacity: 0.7; } /* Feedback panel */ .ns-feedback-panel { background: var(--ns-card-solid) !important; border-color: var(--ns-line) !important; } /* Login page theme */ .ns-login-page .ns-login-form-side { background: var(--ns-bg); color: var(--ns-ink); } [data-theme="light"] .ns-login-form-side .form-control { background: #fff !important; } .ns-login-theme { position: fixed; top: 16px; right: 16px; z-index: 100; } /* Mobile — table stack */ @media (max-width: 767.98px) { .ns-table-stack { border: 0; background: transparent; } .ns-table-stack .ns-table, .ns-table-stack .ns-table thead, .ns-table-stack .ns-table tbody, .ns-table-stack .ns-table tr, .ns-table-stack .ns-table th, .ns-table-stack .ns-table td { display: block; width: 100%; } .ns-table-stack .ns-table thead { display: none; } .ns-table-stack .ns-table tbody tr { margin-bottom: 12px; border: 1px solid var(--ns-line); border-radius: var(--ns-radius-sm); background: var(--ns-card); overflow: hidden; } .ns-table-stack .ns-table tbody tr:hover { background: var(--ns-card); } .ns-table-stack .ns-table td { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--ns-line); text-align: right; } .ns-table-stack .ns-table td:last-child { border-bottom: 0; } .ns-table-stack .ns-table td::before { content: attr(data-label); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ns-muted); text-align: left; flex-shrink: 0; max-width: 42%; } .ns-table-stack .ns-table td.ns-col-actions { position: static; box-shadow: none; flex-wrap: wrap; justify-content: flex-end; } .ns-table-stack .ns-table td.ns-col-actions::before { content: attr(data-label); } .ns-page-hero, .ns-cluster-hero { padding: 20px 18px; } .ns-page-hero-actions, .ns-cluster-hero-actions { width: 100%; } .ns-page-hero-actions .btn, .ns-cluster-hero-actions .btn { flex: 1 1 auto; min-width: 0; } .ns-top .ns-domain-btn { max-width: 140px; overflow: hidden; text-overflow: ellipsis; } .ns-settings-hub { flex-direction: column; } .ns-settings-side { width: 100%; border-right: 0; border-bottom: 1px solid var(--ns-line); } .ns-settings-side-nav { flex-direction: row; overflow-x: auto; gap: 8px; padding-bottom: 8px; } .ns-settings-side-item { flex: 0 0 auto; min-width: 140px; } .ns-settings-side-hint { display: none; } } @media (max-width: 991.98px) { .ns-content { padding-bottom: 24px; } } /* Misc dark fixes */ [data-theme="dark"] pre, [data-theme="dark"] .bg-light { background: var(--ns-surface) !important; color: var(--ns-ink) !important; border-color: var(--ns-line); } [data-theme="dark"] .text-muted { color: var(--ns-muted) !important; } [data-theme="dark"] .ns-empty { color: var(--ns-muted); } [data-theme="dark"] .ns-asn-tip { background: var(--ns-card); border-color: var(--ns-line); } [data-theme="dark"] .ns-asn-tip-head { background: var(--ns-surface); } [data-theme="dark"] .ns-asn-tip-org { color: var(--ns-ink); } [data-theme="dark"] .accordion-item { background: var(--ns-card); border-color: var(--ns-line); } [data-theme="dark"] .accordion-button { background: var(--ns-surface); color: var(--ns-ink); } [data-theme="dark"] .accordion-button:not(.collapsed) { background: var(--ns-sidebar-active); color: var(--ns-accent); } /* Pills — dark mode */ [data-theme="dark"] .ns-pill-ok { background: rgba(5, 150, 105, 0.2); color: #34d399; } [data-theme="dark"] .ns-pill-off { background: rgba(100, 116, 139, 0.2); color: #94a3b8; } [data-theme="dark"] .ns-pill-admin { background: rgba(14, 116, 144, 0.2); color: #22d3ee; } [data-theme="dark"] .ns-pill-reseller { background: rgba(109, 40, 217, 0.2); color: #c4b5fd; } /* Language switch */ .ns-lang-switch .btn { background: var(--ns-act-ghost-bg); border-color: var(--ns-line); color: var(--ns-ink); } .ns-lang-switch .btn.active { background: var(--ns-sidebar-active); border-color: var(--ns-accent); color: var(--ns-accent); } /* Login — form panel follows theme */ [data-theme="light"] .ns-login-split .ns-login-form-wrap { background: var(--ns-bg); } [data-theme="dark"] .ns-login-split .ns-login-form-wrap { background: var(--ns-bg); } [data-theme="dark"] .ns-login-form-wrap .form-control { background: var(--ns-input-bg) !important; border-color: var(--ns-input-border) !important; color: var(--ns-ink) !important; } [data-theme="dark"] .ns-login-form-wrap label, [data-theme="dark"] .ns-login-form-wrap .ns-login-h2, [data-theme="dark"] .ns-login-form-wrap .ns-login-sub { color: var(--ns-ink); } /* Toast host */ .ns-toast-host { z-index: 1090; } /* Smooth transitions */ .ns-sidebar, .ns-card, .ns-top, .ns-settings-side, .form-control, .form-select, .btn-ns-outline { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } /* —— Modern charts —— */ .ns-chart-card { overflow: hidden; position: relative; } .ns-chart-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--ns-accent), var(--ns-accent-2, #0ea5e9), transparent); opacity: 0.85; border-radius: var(--ns-radius) var(--ns-radius) 0 0; pointer-events: none; } .ns-chart-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; } .ns-chart-kpi { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--ns-radius-sm); background: var(--ns-surface); border: 1px solid var(--ns-line); position: relative; overflow: hidden; } .ns-chart-kpi::after { content: ""; position: absolute; right: -20px; top: -20px; width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle, var(--ns-accent-soft, rgba(56, 189, 248, 0.1)), transparent 70%); pointer-events: none; } .ns-chart-kpi--peak { border-color: rgba(56, 189, 248, 0.25); background: linear-gradient(135deg, var(--ns-surface), rgba(56, 189, 248, 0.06)); } .ns-chart-kpi-val { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.03em; color: var(--ns-ink); font-variant-numeric: tabular-nums; line-height: 1.1; } .ns-chart-kpi--peak .ns-chart-kpi-val { color: var(--ns-accent); } .ns-chart-kpi-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ns-muted); } .ns-chart-wrap--modern { position: relative; height: 280px; width: 100%; padding: 8px 4px 4px; border-radius: var(--ns-radius-sm); background: linear-gradient(180deg, var(--ns-surface) 0%, transparent 100%); border: 1px solid var(--ns-line); } .ns-chart-grid-bg { position: absolute; inset: 8px 4px 4px; border-radius: calc(var(--ns-radius-sm) - 2px); background-image: linear-gradient(var(--ns-line) 1px, transparent 1px), linear-gradient(90deg, var(--ns-line) 1px, transparent 1px); background-size: 24px 24px; opacity: 0.35; pointer-events: none; mask-image: linear-gradient(180deg, black 0%, transparent 92%); -webkit-mask-image: linear-gradient(180deg, black 0%, transparent 92%); } [data-theme="dark"] .ns-chart-grid-bg { opacity: 0.2; } .ns-chart-wrap--modern canvas { position: relative; z-index: 1; } .ns-chart-empty { text-align: center; padding: 24px 16px; color: var(--ns-muted); font-size: 0.875rem; font-weight: 600; } .ns-cluster-chart-wrap { height: 260px !important; margin: 4px 0 12px; padding: 8px; border-radius: var(--ns-radius-sm); background: linear-gradient(180deg, var(--ns-surface), transparent); border: 1px solid var(--ns-line); } .ns-cluster-chart-center strong { background: linear-gradient(135deg, var(--ns-accent), #22d3ee); -webkit-background-clip: text; background-clip: text; color: transparent; } .ns-cluster-legend span i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 2px var(--ns-card); } @media (max-width: 575.98px) { .ns-chart-kpis { grid-template-columns: 1fr; } .ns-chart-wrap--modern { height: 220px; } } /* —— Protection page —— */ .ns-sensor-status-box { background: var(--ns-surface) !important; border-color: var(--ns-line) !important; color: var(--ns-ink); } .ns-sensor-status-box strong { color: var(--ns-ink); } .ns-profile-card { background: var(--ns-card) !important; border-color: var(--ns-line) !important; color: var(--ns-ink) !important; } .ns-profile-card:hover { border-color: var(--ns-line-strong) !important; background: var(--ns-surface) !important; } .ns-profile-card.is-active { border-color: var(--ns-line-strong) !important; box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.25) !important; background: var(--ns-surface) !important; } [data-theme="dark"] .ns-profile-card.is-active { box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.15) !important; } .ns-profile-card i { background: var(--ns-surface) !important; color: var(--ns-muted) !important; } .ns-profile-card.is-active i { background: var(--ns-sidebar-active) !important; color: var(--ns-ink) !important; } .ns-profile-card strong { color: var(--ns-ink); } .ns-prot-nav { background: var(--ns-surface) !important; border-color: var(--ns-line) !important; padding: 6px !important; gap: 2px !important; } .ns-prot-nav button { color: var(--ns-muted) !important; border-radius: 8px !important; padding: 9px 11px !important; font-weight: 600 !important; border-left: 3px solid transparent !important; } .ns-prot-nav button i { color: var(--ns-muted) !important; opacity: 0.85; } .ns-prot-nav button:hover { background: var(--ns-card) !important; color: var(--ns-ink) !important; } .ns-prot-nav button:hover i { color: var(--ns-ink) !important; } .ns-prot-nav button.is-active { background: var(--ns-card) !important; color: var(--ns-ink) !important; border-left-color: var(--ns-ink) !important; box-shadow: none !important; } [data-theme="dark"] .ns-prot-nav button.is-active { border-left-color: var(--ns-sidebar-text) !important; } .ns-prot-nav button.is-active i { color: var(--ns-ink) !important; opacity: 1; } .ns-prot-savebar { background: var(--ns-card) !important; border-color: var(--ns-line) !important; box-shadow: var(--ns-shadow-lg) !important; } .ns-field-label { color: var(--ns-ink); } /* Form controls — input groups, selects, textareas */ .input-group-text { background: var(--ns-surface) !important; border-color: var(--ns-input-border) !important; color: var(--ns-muted) !important; font-size: 0.8125rem; font-weight: 600; } textarea.form-control { background-color: var(--ns-input-bg) !important; border-color: var(--ns-input-border) !important; color: var(--ns-ink) !important; } select.form-select option { background: var(--ns-card); color: var(--ns-ink); } .form-check-input { background-color: var(--ns-input-bg); border-color: var(--ns-input-border); } .form-check-input:checked { background-color: var(--ns-accent); border-color: var(--ns-accent); } .form-check-label { color: var(--ns-ink); } .ns-meth-chk { background: var(--ns-card) !important; border-color: var(--ns-line) !important; color: var(--ns-ink) !important; } .ns-meth-chk:has(input:checked) { background: var(--ns-surface) !important; border-color: var(--ns-line-strong) !important; color: var(--ns-ink) !important; } .ns-origin-row .form-select, .ns-origin-row .form-control { background-color: var(--ns-input-bg) !important; } [data-theme="dark"] .alert-warning { background: rgba(217, 119, 6, 0.12) !important; border-color: rgba(251, 191, 36, 0.25) !important; color: var(--ns-ink) !important; } [data-theme="dark"] .alert-warning strong { color: #fbbf24; } [data-theme="dark"] .btn-outline-dark { color: var(--ns-ink) !important; border-color: var(--ns-line-strong) !important; background: var(--ns-surface) !important; } [data-theme="dark"] .btn-outline-dark:hover { background: var(--ns-card-hover) !important; color: var(--ns-ink) !important; } /* Remove duplicate dark nav overrides */ [data-theme="dark"] .ns-nav-drop.is-open .ns-nav-parent { color: var(--ns-sidebar-text) !important; } [data-theme="dark"] .ns-nav-link:hover, [data-theme="dark"] .ns-nav-link.active { color: var(--ns-sidebar-text) !important; } /* ═══════════════════════════════════════════════════════════════ DARK MODE — comprehensive component overrides ═══════════════════════════════════════════════════════════════ */ [data-theme="dark"] .ns-content, [data-theme="dark"] .ns-page { color: var(--ns-ink); } [data-theme="dark"] .ns-content strong, [data-theme="dark"] .ns-content b, [data-theme="dark"] .ns-table td, [data-theme="dark"] .ns-table td strong { color: var(--ns-ink); } [data-theme="dark"] .ns-content code { background: var(--ns-surface); color: #7dd3fc; border: 1px solid var(--ns-line); padding: 0.1em 0.35em; border-radius: 4px; } [data-theme="dark"] .text-dark, [data-theme="dark"] .text-body-emphasis { color: var(--ns-ink) !important; } [data-theme="dark"] hr, [data-theme="dark"] .dropdown-divider { border-color: var(--ns-line) !important; opacity: 1; } /* Notifications / feeds */ [data-theme="dark"] .ns-notif-item:hover { background: var(--ns-surface) !important; } [data-theme="dark"] .ns-notif-item strong { color: var(--ns-ink); } [data-theme="dark"] .ns-feed-list::-webkit-scrollbar-thumb { background: var(--ns-scroll-thumb); } [data-theme="dark"] .ns-event-row { border-bottom-color: var(--ns-line); color: var(--ns-ink); } [data-theme="dark"] .ns-event-ico.warn { background: rgba(217, 119, 6, 0.18); color: #fb923c; } [data-theme="dark"] .ns-event-ico.ban { background: rgba(220, 38, 38, 0.18); color: #f87171; } [data-theme="dark"] .ns-event-ico.ok { background: rgba(5, 150, 105, 0.18); color: #34d399; } [data-theme="dark"] .ns-event-ico.info { background: rgba(14, 116, 144, 0.18); color: #22d3ee; } /* Protection page — dark icon accents */ [data-theme="dark"] .ns-prot-savebar { background: rgba(21, 27, 36, 0.96) !important; border-color: var(--ns-line) !important; box-shadow: var(--ns-shadow-lg) !important; } [data-theme="dark"] .ns-field-label { color: var(--ns-ink); } [data-theme="dark"] .ns-profile-card.is-lock i { background: rgba(220, 38, 38, 0.15); color: #f87171; } [data-theme="dark"] .ns-profile-card.is-strict i { background: rgba(217, 119, 6, 0.15); color: #fb923c; } [data-theme="dark"] .ns-profile-card.is-off i { background: var(--ns-surface); color: var(--ns-muted); } /* Cluster */ [data-theme="dark"] .ns-cluster-topology { background: linear-gradient(180deg, var(--ns-surface), var(--ns-surface-2)) !important; border-color: var(--ns-line) !important; } [data-theme="dark"] .ns-cluster-topo-head { background: linear-gradient(90deg, rgba(56, 189, 248, 0.06), transparent) !important; border-bottom-color: var(--ns-line) !important; } [data-theme="dark"] .ns-cluster-node-card { background: linear-gradient(180deg, var(--ns-card), var(--ns-surface)) !important; border-color: var(--ns-line) !important; } [data-theme="dark"] .ns-cluster-node-card:hover { border-color: var(--ns-accent) !important; } [data-theme="dark"] .ns-cluster-node-ico { background: rgba(56, 189, 248, 0.12) !important; border-color: rgba(56, 189, 248, 0.25) !important; color: var(--ns-accent) !important; } [data-theme="dark"] .ns-cluster-node-title strong { color: var(--ns-ink) !important; } [data-theme="dark"] .ns-cluster-topo-tile { background: var(--ns-card) !important; color: var(--ns-ink) !important; } [data-theme="dark"] .ns-cluster-topo-tile.is-off { border-color: rgba(248, 113, 113, 0.35) !important; background: rgba(127, 29, 29, 0.12) !important; } [data-theme="dark"] .ns-cluster-node-body, [data-theme="dark"] .ns-cluster-node-name, [data-theme="dark"] .ns-cluster-node-meta { color: var(--ns-ink) !important; } [data-theme="dark"] .ns-cluster-node-meta { color: var(--ns-muted) !important; } [data-theme="dark"] .ns-cluster-rps-bar { background: var(--ns-line) !important; } [data-theme="dark"] .ns-cluster-topo-chip.is-on { background: rgba(5, 150, 105, 0.18); color: #34d399; border-color: rgba(52, 211, 153, 0.25); } [data-theme="dark"] .ns-cluster-topo-chip.is-warn { background: rgba(217, 119, 6, 0.18); color: #fbbf24; border-color: rgba(251, 191, 36, 0.25); } [data-theme="dark"] .ns-cluster-topo-chip.is-off { background: rgba(220, 38, 38, 0.18); color: #f87171; border-color: rgba(248, 113, 113, 0.25); } [data-theme="dark"] .ns-cluster-node-status.is-on { background: rgba(5, 150, 105, 0.18); color: #34d399; } [data-theme="dark"] .ns-cluster-node-status.is-off { background: rgba(220, 38, 38, 0.18); color: #f87171; } [data-theme="dark"] .ns-cluster-node-status.is-warn { background: rgba(217, 119, 6, 0.18); color: #fbbf24; } [data-theme="dark"] .ns-cluster-node-status.is-idle { background: rgba(100, 116, 139, 0.2); color: #94a3b8; } [data-theme="dark"] .ns-cluster-node-metrics div { background: var(--ns-surface) !important; border-color: var(--ns-line) !important; } [data-theme="dark"] .ns-cluster-node-metrics span { color: var(--ns-muted) !important; } [data-theme="dark"] .ns-cluster-node-metrics strong { color: var(--ns-ink) !important; } [data-theme="dark"] .ns-cluster-node-bar { background: var(--ns-line) !important; } [data-theme="dark"] .ns-cluster-hub-compact-ico { background: rgba(56, 189, 248, 0.12) !important; border-color: rgba(56, 189, 248, 0.25) !important; color: var(--ns-accent) !important; } [data-theme="dark"] .ns-cluster-hub-compact-label, [data-theme="dark"] .ns-cluster-hub-compact strong { color: var(--ns-ink) !important; } [data-theme="dark"] .ns-cluster-topo-meta { color: var(--ns-muted) !important; } [data-theme="dark"] .ns-cluster-topo-meta b { color: var(--ns-ink) !important; } [data-theme="dark"] .ns-cluster-topo-name { color: var(--ns-ink) !important; } [data-theme="dark"] .ns-cluster-topo-region { color: var(--ns-muted) !important; background: var(--ns-surface) !important; border-color: var(--ns-line) !important; } [data-theme="dark"] .ns-cluster-node-title code { color: var(--ns-muted) !important; } [data-theme="dark"] .ns-cluster-empty, [data-theme="dark"] .ns-cluster-topo-empty { color: var(--ns-muted) !important; } [data-theme="dark"] .ns-cluster-chart-center span { color: var(--ns-muted) !important; } [data-theme="dark"] .ns-cluster-legend-more { color: var(--ns-muted) !important; } [data-theme="dark"] .ns-table-accordion .ns-table-drawer td { background: var(--ns-surface-2) !important; } /* Modals (ns-modal + bootstrap) */ [data-theme="dark"] .ns-modal .modal-content, [data-theme="dark"] .modal-content { background: var(--ns-card) !important; border-color: var(--ns-line) !important; color: var(--ns-ink) !important; } [data-theme="dark"] .ns-modal .modal-header, [data-theme="dark"] .modal-header { background: var(--ns-surface) !important; border-bottom-color: var(--ns-line) !important; color: var(--ns-ink) !important; } [data-theme="dark"] .ns-modal .modal-footer, [data-theme="dark"] .modal-footer { background: var(--ns-surface) !important; border-top-color: var(--ns-line) !important; } [data-theme="dark"] .ns-modal .modal-title, [data-theme="dark"] .modal-title { color: var(--ns-ink) !important; } [data-theme="dark"] .ns-modal-danger .modal-header { background: rgba(127, 29, 29, 0.2) !important; } [data-theme="dark"] .ns-modal-danger .modal-title { color: #fca5a5 !important; } /* Tabs */ [data-theme="dark"] .nav-tabs { border-bottom-color: var(--ns-line); } [data-theme="dark"] .nav-tabs .nav-link { color: var(--ns-muted) !important; } [data-theme="dark"] .nav-tabs .nav-link:hover { color: var(--ns-ink) !important; } [data-theme="dark"] .nav-tabs .nav-link.active { color: var(--ns-ink) !important; background: var(--ns-card) !important; border-color: var(--ns-line) var(--ns-line) var(--ns-card) !important; } /* Backups accordion */ [data-theme="dark"] .ns-remote-accordion { --bs-accordion-active-bg: var(--ns-surface); --bs-accordion-active-color: var(--ns-ink); --bs-accordion-bg: var(--ns-card); --bs-accordion-color: var(--ns-ink); --bs-accordion-border-color: var(--ns-line); } [data-theme="dark"] .ns-remote-accordion .accordion-button { background: var(--ns-surface) !important; color: var(--ns-ink) !important; } [data-theme="dark"] .ns-remote-accordion .accordion-button:not(.collapsed) { background: var(--ns-surface) !important; color: var(--ns-ink) !important; border-bottom-color: var(--ns-line) !important; } [data-theme="dark"] .ns-remote-accordion .accordion-body { background: var(--ns-card); color: var(--ns-ink); } /* Reports */ [data-theme="dark"] .ns-rep-label { color: var(--ns-ink) !important; } [data-theme="dark"] .ns-rep-act { background: var(--ns-surface) !important; border-color: var(--ns-line) !important; color: var(--ns-muted) !important; } [data-theme="dark"] .ns-rep-act:hover { background: var(--ns-sidebar-active) !important; color: var(--ns-accent) !important; } /* Brand upload preview — keep dark preview box */ [data-theme="dark"] .ns-tag-picker { background: var(--ns-input-bg) !important; border-color: var(--ns-input-border) !important; } [data-theme="dark"] .ns-tag-input { color: var(--ns-ink) !important; } [data-theme="dark"] .ns-tag { background: rgba(56, 189, 248, 0.12) !important; border-color: rgba(56, 189, 248, 0.25) !important; color: #7dd3fc !important; } [data-theme="dark"] .ns-tag-readonly { background: var(--ns-surface) !important; border-color: var(--ns-line) !important; color: var(--ns-muted) !important; } [data-theme="dark"] .ns-tag-suggest { background: var(--ns-dropdown-bg) !important; border-color: var(--ns-line) !important; } [data-theme="dark"] .ns-tag-opt { color: var(--ns-ink) !important; } [data-theme="dark"] .ns-tag-opt:hover, [data-theme="dark"] .ns-tag-opt.is-active { background: var(--ns-surface) !important; } [data-theme="dark"] .ns-tag-src { background: rgba(217, 119, 6, 0.15) !important; border-color: rgba(251, 191, 36, 0.25) !important; color: #fbbf24 !important; } [data-theme="dark"] .ns-tag-cnt { color: var(--ns-muted) !important; } [data-theme="dark"] .ns-asn-suggest-btn { background: var(--ns-card) !important; border-color: var(--ns-line) !important; color: var(--ns-ink) !important; } [data-theme="dark"] .ns-asn-suggest-btn:hover { background: var(--ns-surface) !important; border-color: var(--ns-accent) !important; } [data-theme="dark"] .ns-asn-suggest-main { color: var(--ns-ink) !important; } [data-theme="dark"] .ns-asn-info { color: var(--ns-accent) !important; } [data-theme="dark"] .ns-asn-info:hover { color: #7dd3fc !important; } /* Reports rows */ [data-theme="dark"] .ns-rep-row { border-bottom-color: var(--ns-line) !important; } [data-theme="dark"] .ns-rep-asn-main, [data-theme="dark"] .ns-rep-sub { color: var(--ns-muted) !important; } [data-theme="dark"] .ns-brand-preview { background: #0c1118 !important; border-color: var(--ns-line) !important; } /* Bootstrap table (automation etc.) */ [data-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: var(--ns-ink); --bs-table-border-color: var(--ns-line); --bs-table-striped-bg: var(--ns-surface); --bs-table-hover-bg: var(--ns-table-hover); --bs-table-hover-color: var(--ns-ink); } [data-theme="dark"] .table > :not(caption) > * > * { background-color: transparent; color: var(--ns-ink); border-bottom-color: var(--ns-line); } [data-theme="dark"] .table thead th { background: var(--ns-table-head) !important; color: var(--ns-muted) !important; } /* Pills — extended */ [data-theme="dark"] .ns-pill-customer { background: rgba(100, 116, 139, 0.2); color: #cbd5e1; } [data-theme="dark"] .ns-pill-danger { background: rgba(220, 38, 38, 0.2); color: #f87171; } [data-theme="dark"] .ns-pill-warn { background: rgba(217, 119, 6, 0.2); color: #fbbf24; } /* Settings side nav icons */ [data-theme="dark"] .ns-settings-side-icon { background: var(--ns-surface) !important; color: var(--ns-muted) !important; } [data-theme="dark"] .ns-settings-side-item.active .ns-settings-side-icon { background: var(--ns-surface) !important; color: var(--ns-ink) !important; } [data-theme="dark"] .ns-settings-side-item.active .ns-settings-side-hint { color: var(--ns-muted); } [data-theme="dark"] .ns-settings-panel-title { color: var(--ns-ink); } /* Changelog */ [data-theme="dark"] .ns-changelog-item { border-bottom-color: var(--ns-line) !important; } [data-theme="dark"] .ns-changelog-meta strong { color: var(--ns-ink); } /* Feedback admin — list group */ [data-theme="dark"] .ns-feedback-inbox .list-group-item { background: var(--ns-card) !important; color: var(--ns-ink) !important; border-color: var(--ns-line) !important; } [data-theme="dark"] .ns-feedback-inbox .list-group-item.active { background: var(--ns-sidebar-active) !important; border-color: var(--ns-line) !important; color: var(--ns-ink) !important; } /* Impersonate bar — keep visible on dark */ [data-theme="dark"] .ns-impersonate-bar { background: rgba(120, 53, 15, 0.35) !important; border-color: rgba(251, 191, 36, 0.25) !important; color: #fde68a !important; } /* Attack banner — readable on dark */ [data-theme="dark"] .ns-attack-banner { background: rgba(127, 29, 29, 0.45) !important; border-color: rgba(248, 113, 113, 0.35) !important; } [data-theme="dark"] .ns-attack-banner-copy strong { color: #fecaca; } [data-theme="dark"] .ns-attack-banner-copy span, [data-theme="dark"] .ns-attack-banner-copy small { color: #fca5a5; } [data-theme="dark"] .ns-attack-banner .btn-ns { background: var(--ns-card) !important; color: #fca5a5 !important; } /* Page filter bar */ [data-theme="dark"] .ns-page-filter-bar, [data-theme="dark"] .ns-filter-bar { background: transparent; } [data-theme="dark"] .ns-search input { background: var(--ns-input-bg) !important; color: var(--ns-ink) !important; border-color: var(--ns-input-border) !important; } /* List group / badges bootstrap */ [data-theme="dark"] .list-group-item { background: var(--ns-card); border-color: var(--ns-line); color: var(--ns-ink); } [data-theme="dark"] .list-group-item-action:hover { background: var(--ns-surface); color: var(--ns-ink); } [data-theme="dark"] .badge.text-bg-secondary { background: var(--ns-surface) !important; color: var(--ns-muted) !important; } [data-theme="dark"] .badge.text-bg-light { background: var(--ns-surface) !important; color: var(--ns-ink) !important; } /* Sidebar nav open state — avoid hardcoded #fff */ [data-theme="dark"] .ns-nav-drop.is-open .ns-nav-parent { color: var(--ns-sidebar-text) !important; } [data-theme="dark"] .ns-nav-link:hover, [data-theme="dark"] .ns-nav-link.active { color: var(--ns-accent) !important; } /* User chip avatar border */ [data-theme="dark"] .ns-user-avatar { background: var(--ns-sidebar-active) !important; color: var(--ns-accent) !important; } /* Login page dark */ [data-theme="dark"] .ns-login-page .ns-login-form-wrap, [data-theme="dark"] .ns-login-split .ns-login-form-side { background: var(--ns-bg) !important; } [data-theme="dark"] .ns-login-card { background: var(--ns-card) !important; border-color: var(--ns-line) !important; } [data-theme="dark"] .ns-login-card label, [data-theme="dark"] .ns-login-h2, [data-theme="dark"] .ns-login-sub, [data-theme="dark"] .ns-login-form-wrap .form-label { color: var(--ns-ink) !important; } [data-theme="dark"] .ns-login-err { color: #fca5a5; } /* Ensure table header in ns-admin rgba override */ [data-theme="dark"] .ns-table th { background: var(--ns-table-head) !important; } [data-theme="dark"] .ns-table tbody tr:hover td { color: var(--ns-ink); } [data-theme="dark"] .ns-table tbody tr:hover td.ns-col-actions { background: var(--ns-card-hover) !important; } [data-theme="dark"] .ns-empty { color: var(--ns-muted) !important; } [data-theme="dark"] .ns-asn-tip-head { background: var(--ns-surface) !important; } [data-theme="dark"] .ns-asn-tip-org { color: var(--ns-ink) !important; } [data-theme="dark"] .ns-asn-tip-meta { color: var(--ns-muted) !important; } [data-theme="dark"] a:not(.btn):not(.ns-act):not(.ns-nav-child):not(.ns-nav-link):not(.dropdown-item) { color: var(--ns-accent); } .ns-customer-meta dt { font-weight: 600; } .ns-customer-meta dd { margin-bottom: 0.65rem; } /* User profile page (customer / reseller detail) */ .ns-user-profile { margin-bottom: 1.5rem; } .ns-profile-hero { position: relative; border-radius: var(--ns-radius); overflow: hidden; border: 1px solid var(--ns-line); margin-bottom: 1rem; } .ns-profile-hero-bg { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(56, 189, 248, 0.14) 0%, rgba(14, 165, 233, 0.06) 40%, transparent 70%), linear-gradient(180deg, var(--ns-surface) 0%, var(--ns-card) 100%); pointer-events: none; } .ns-profile-hero.is-reseller .ns-profile-hero-bg { background: linear-gradient(135deg, rgba(168, 85, 247, 0.14) 0%, rgba(139, 92, 246, 0.06) 40%, transparent 70%), linear-gradient(180deg, var(--ns-surface) 0%, var(--ns-card) 100%); } .ns-profile-hero.is-admin .ns-profile-hero-bg { background: linear-gradient(135deg, rgba(251, 191, 36, 0.12) 0%, rgba(245, 158, 11, 0.05) 40%, transparent 70%), linear-gradient(180deg, var(--ns-surface) 0%, var(--ns-card) 100%); } .ns-profile-hero-inner { position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1.25rem; padding: 1.5rem 1.5rem 1.25rem; } .ns-profile-hero-main { display: flex; align-items: flex-start; gap: 1rem; min-width: 0; flex: 1; } .ns-profile-avatar { width: 72px; height: 72px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; font-weight: 800; letter-spacing: 0.02em; color: var(--ns-accent); background: var(--ns-accent-soft); border: 2px solid rgba(56, 189, 248, 0.25); flex-shrink: 0; box-shadow: 0 8px 24px rgba(56, 189, 248, 0.12); } .ns-profile-hero.is-reseller .ns-profile-avatar { color: #a855f7; background: rgba(168, 85, 247, 0.12); border-color: rgba(168, 85, 247, 0.25); box-shadow: 0 8px 24px rgba(168, 85, 247, 0.1); } .ns-profile-kicker { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ns-muted); margin-bottom: 0.35rem; } .ns-profile-kicker a { color: var(--ns-muted); text-decoration: none; } .ns-profile-kicker a:hover { color: var(--ns-accent); } .ns-profile-name { font-size: 1.65rem; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 0.25rem; color: var(--ns-ink); line-height: 1.15; } .ns-profile-sub { font-size: 0.875rem; color: var(--ns-muted); margin: 0 0 0.65rem; } .ns-profile-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; } .ns-profile-action-grid { display: grid; grid-template-columns: repeat(2, minmax(108px, 1fr)); gap: 0.5rem; flex-shrink: 0; } .ns-profile-act { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem; min-height: 72px; padding: 0.65rem 0.5rem; border-radius: 12px; border: 1px solid var(--ns-line); background: var(--ns-card); color: var(--ns-ink); font-size: 0.72rem; font-weight: 700; cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 0.12s; } .ns-profile-act i { font-size: 1rem; opacity: 0.9; } .ns-profile-act:hover { border-color: var(--ns-line-strong); background: var(--ns-surface); transform: translateY(-1px); } .ns-profile-act[data-tone="primary"] { border-color: rgba(56, 189, 248, 0.35); background: rgba(56, 189, 248, 0.08); color: var(--ns-accent); } .ns-profile-act[data-tone="warn"] { border-color: rgba(217, 119, 6, 0.35); background: rgba(217, 119, 6, 0.08); color: #d97706; } .ns-profile-act[data-tone="danger"] { border-color: rgba(220, 38, 38, 0.35); background: rgba(220, 38, 38, 0.08); color: #dc2626; } [data-theme="dark"] .ns-profile-act[data-tone="warn"] { color: #fbbf24; } [data-theme="dark"] .ns-profile-act[data-tone="danger"] { color: #f87171; } .ns-profile-stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.75rem; margin-bottom: 1rem; } .ns-profile-stat { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1rem; border-radius: var(--ns-radius-sm); border: 1px solid var(--ns-line); background: var(--ns-card); box-shadow: var(--ns-shadow); } .ns-profile-stat-wide { grid-column: span 2; flex-direction: column; align-items: stretch; gap: 0.4rem; } .ns-profile-stat-ico { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--ns-surface); color: var(--ns-muted); flex-shrink: 0; } .ns-profile-stat-ico.ok { background: rgba(5, 150, 105, 0.12); color: #059669; } [data-theme="dark"] .ns-profile-stat-ico.ok { color: #34d399; } .ns-profile-stat strong { display: block; font-size: 1.15rem; font-weight: 800; line-height: 1.1; color: var(--ns-ink); } .ns-profile-stat span { display: block; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ns-muted); margin-top: 2px; } .ns-profile-stat-bar { height: 6px; border-radius: 999px; background: var(--ns-line); overflow: hidden; } .ns-profile-stat-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--ns-accent), var(--ns-accent-2)); margin: 0; } .ns-profile-tabs-wrap { margin-bottom: 0; border: 1px solid var(--ns-line); border-bottom: 0; border-radius: var(--ns-radius-sm) var(--ns-radius-sm) 0 0; background: var(--ns-card); padding: 0.35rem 0.5rem 0; } .ns-profile-tabs { border-bottom: 0; gap: 0.25rem; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; } .ns-profile-tabs .nav-link { display: inline-flex; align-items: center; gap: 0.45rem; border: 0 !important; border-radius: 10px 10px 0 0 !important; padding: 0.65rem 1rem !important; font-size: 0.8125rem; font-weight: 700; color: var(--ns-muted) !important; white-space: nowrap; background: transparent !important; } .ns-profile-tabs .nav-link i { font-size: 0.85rem; opacity: 0.85; } .ns-profile-tabs .nav-link:hover { color: var(--ns-ink) !important; background: var(--ns-surface) !important; } .ns-profile-tabs .nav-link.active { color: var(--ns-ink) !important; background: var(--ns-surface) !important; box-shadow: inset 0 -2px 0 var(--ns-accent); } .ns-profile-tab-panels { border: 1px solid var(--ns-line); border-top: 0; border-radius: 0 0 var(--ns-radius-sm) var(--ns-radius-sm); background: var(--ns-surface); padding: 1.25rem; } .ns-profile-form-card .ns-card-head, .ns-profile-side-card .ns-card-head { padding-bottom: 0.5rem; } .ns-profile-form .input-group-text { background: var(--ns-surface); border-color: var(--ns-input-border); color: var(--ns-muted); min-width: 42px; justify-content: center; } .ns-profile-form-foot { margin-top: 0.5rem; padding-top: 1rem; border-top: 1px solid var(--ns-line); } .ns-profile-meta { display: flex; flex-direction: column; gap: 0.65rem; } .ns-profile-meta-item { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.55rem 0; border-bottom: 1px dashed var(--ns-line); font-size: 0.8125rem; } .ns-profile-meta-item:last-child { border-bottom: 0; } .ns-profile-meta-item .label { color: var(--ns-muted); font-weight: 600; } .ns-profile-meta-item .value { text-align: right; color: var(--ns-ink); font-weight: 600; } .ns-code-chip { display: inline-block; padding: 0.15rem 0.45rem; border-radius: 6px; background: var(--ns-surface); border: 1px solid var(--ns-line); font-size: 0.75rem; } @media (max-width: 767.98px) { .ns-profile-hero-inner { padding: 1.15rem; } .ns-profile-name { font-size: 1.35rem; } .ns-profile-avatar { width: 56px; height: 56px; font-size: 1.1rem; border-radius: 14px; } .ns-profile-action-grid { width: 100%; grid-template-columns: repeat(2, 1fr); } .ns-profile-stat-wide { grid-column: span 1; } .ns-profile-tab-panels { padding: 1rem; } } [data-theme="dark"] .ns-profile-hero { border-color: var(--ns-line); } [data-theme="dark"] .ns-profile-act { background: var(--ns-surface); } [data-theme="dark"] .ns-profile-tabs-wrap, [data-theme="dark"] .ns-profile-tab-panels { background: var(--ns-card); border-color: var(--ns-line); } [data-theme="dark"] .ns-profile-tabs .nav-link.active { background: var(--ns-surface-2) !important; } /* User list table */ .ns-table-users .ns-user-list-id { display: flex; align-items: center; gap: 0.75rem; min-width: 0; } .ns-user-list-avatar { width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 800; flex-shrink: 0; color: var(--ns-accent); background: var(--ns-accent-soft); border: 1px solid rgba(56, 189, 248, 0.22); } .ns-user-list-avatar.is-reseller { color: #a855f7; background: rgba(168, 85, 247, 0.12); border-color: rgba(168, 85, 247, 0.25); } .ns-user-list-avatar.is-admin { color: #d97706; background: rgba(217, 119, 6, 0.12); border-color: rgba(217, 119, 6, 0.25); } .ns-user-list-name { font-weight: 700; color: var(--ns-ink); text-decoration: none; display: block; line-height: 1.25; } a.ns-user-list-name:hover { color: var(--ns-accent); } .ns-user-quota-cell { font-variant-numeric: tabular-nums; white-space: nowrap; } .ns-user-quota-used { font-weight: 700; color: var(--ns-ink); } .ns-table-users td.ns-col-actions { white-space: nowrap; vertical-align: middle; } .ns-table-users .ns-user-quick-detail { margin-right: 0.35rem; vertical-align: middle; } .ns-table-users .ns-row-toggle { vertical-align: middle; } .ns-table-users tbody tr.ns-table-main-row td { vertical-align: middle; padding-top: 0.85rem; padding-bottom: 0.85rem; } @media (max-width: 1199.98px) { .ns-table-users .ns-user-quick-detail { display: none !important; } } @media (max-width: 767.98px) { .ns-table-users .ns-user-list-avatar { width: 34px; height: 34px; font-size: 0.72rem; } }