/**
* NetVision operator console — design system layer.
*
* Loaded LAST in admin/header_sidebar.php and admin/login.php, after the
* webpack bundles (vendor/app.min.css), design-tokens.css, nv-forms.css,
* modern-ui.css and the legacy bootstrap.css theme. It only restyles: no
* markup contract or JS hook depends on it.
*
* 1. Tokens (light, dark via prefers-color-scheme or html[data-theme])
* 2. Base (type, links, focus, scrollbars)
* 3. Shell (topbar, sidebar, content, footer, mobile off-canvas)
* 4. Command palette (global search)
* 5. Components (cards, buttons, forms, tables/DataTables, badges and
* status, tabs/wizard, modals, dropdowns, alerts, toasts, pagination,
* progress, empty states, skeletons, third-party widgets)
* 6. Screens (dashboard, forms with sticky save bar, login)
* 7. Motion / density preferences
*
* Theme: html[data-theme="light"|"dark"] forces a theme (cookie nv_theme,
* set by the topbar toggle); without it the OS preference decides.
* Selectors on the shell are prefixed with `body.nv-console #wrapper` so
* they win over the legacy UBold rules (app_sidebar.css) without !important.
*/
/* ==========================================================================
1. Tokens
========================================================================== */
:root {
color-scheme: light;
/* Type */
--nv-font: "Inter", "InterVariable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
--nv-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
--nv-text-xs: 0.75rem; /* 12 */
--nv-text-sm: 0.8125rem; /* 13 */
--nv-text-base: 0.875rem; /* 14 */
--nv-text-md: 0.9375rem; /* 15 */
--nv-text-lg: 1rem; /* 16 */
--nv-text-xl: 1.125rem; /* 18 */
--nv-text-2xl: 1.375rem; /* 22 */
--nv-text-3xl: 1.75rem; /* 28 */
--nv-leading: 1.5;
--nv-weight-medium: 500;
--nv-weight-semibold: 600;
/* Spacing (4px grid) */
--nv-space-1: 0.25rem;
--nv-space-2: 0.5rem;
--nv-space-3: 0.75rem;
--nv-space-4: 1rem;
--nv-space-5: 1.25rem;
--nv-space-6: 1.5rem;
--nv-space-8: 2rem;
--nv-space-10: 2.5rem;
/* Radius */
--nv-r-xs: 4px;
--nv-r-sm: 6px;
--nv-r-md: 8px;
--nv-r-lg: 12px;
--nv-r-xl: 16px;
--nv-r-pill: 999px;
/* Layout */
--nv-topbar-h: 56px;
--nv-sidebar-w: 248px;
--nv-sidebar-rail: 64px;
--nv-content-max: 1600px;
--nv-gutter: 24px;
/* Neutrals / surfaces (light) */
--nv-bg: #f6f7f9;
--nv-surface: #ffffff;
--nv-surface-2: #f9fafb;
--nv-surface-3: #f2f4f7;
--nv-surface-inverse: #101828;
--nv-overlay: rgba(16, 24, 40, 0.45);
--nv-border: #e4e7ec;
--nv-border-strong: #d0d5dd;
--nv-text: #101828;
--nv-text-2: #475467;
--nv-text-3: #5d6778;
--nv-text-inverse: #ffffff;
--nv-sidebar-bg: #fbfbfc;
--nv-topbar-bg: rgba(255, 255, 255, 0.86);
/* Accent (indigo) */
--nv-accent: #4f46e5;
--nv-accent-hover: #4338ca;
--nv-accent-text: #4338ca;
--nv-accent-soft: rgba(79, 70, 229, 0.08);
--nv-accent-soft-2: rgba(79, 70, 229, 0.14);
--nv-accent-ring: rgba(79, 70, 229, 0.45);
--nv-on-accent: #ffffff;
/* Semantic: fg (text on soft bg) / bg (soft) / border / solid */
--nv-success-fg: #067647; --nv-success-bg: #ecfdf3; --nv-success-bd: #abefc6; --nv-success: #067647;
--nv-danger-fg: #b42318; --nv-danger-bg: #fef3f2; --nv-danger-bd: #fecdca; --nv-danger: #d92d20;
--nv-warning-fg: #b54708; --nv-warning-bg: #fffaeb; --nv-warning-bd: #fedf89; --nv-warning: #b54708;
--nv-info-fg: #175cd3; --nv-info-bg: #eff8ff; --nv-info-bd: #b2ddff; --nv-info: #175cd3;
--nv-violet-fg: #5925dc; --nv-violet-bg: #f4f3ff; --nv-violet-bd: #d9d6fe; --nv-violet: #6938ef;
--nv-neutral-fg: #344054; --nv-neutral-bg: #f2f4f7; --nv-neutral-bd: #e4e7ec; --nv-neutral: #667085;
/* Elevation */
--nv-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
--nv-shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
--nv-shadow-md: 0 4px 12px -2px rgba(16, 24, 40, 0.08), 0 2px 4px -2px rgba(16, 24, 40, 0.04);
--nv-shadow-lg: 0 12px 24px -4px rgba(16, 24, 40, 0.12), 0 4px 8px -4px rgba(16, 24, 40, 0.05);
--nv-shadow-overlay: 0 24px 48px -12px rgba(16, 24, 40, 0.28);
/* Focus */
--nv-focus: 0 0 0 2px var(--nv-surface), 0 0 0 4px var(--nv-accent-ring);
/* Motion */
--nv-ease: cubic-bezier(0.2, 0, 0, 1);
--nv-dur-fast: 120ms;
--nv-dur: 180ms;
--nv-dur-slow: 260ms;
/* Table density */
--nv-cell-py: 0.625rem;
--nv-cell-px: 0.875rem;
/* Bridge legacy token names (design-tokens.css, nv-forms.css, modern-ui.css) */
--nv-font-sans: var(--nv-font);
--nv-primary: var(--nv-accent);
--nv-primary-hover: var(--nv-accent-hover);
--nv-primary-rgb: 79, 70, 229;
--nv-radius-sm: var(--nv-r-sm);
--nv-radius-md: var(--nv-r-md);
--nv-radius-lg: var(--nv-r-lg);
--nv-focus-ring: 0 0 0 3px var(--nv-accent-ring);
--nv-form-label-color: var(--nv-text);
--nv-form-hint-color: var(--nv-text-3);
--nv-form-control-border: var(--nv-border-strong);
--nv-form-control-bg: var(--nv-surface);
--nv-form-control-color: var(--nv-text);
--nv-form-control-placeholder: #98a2b3;
--nv-form-control-disabled-bg: var(--nv-surface-3);
--nv-form-control-disabled-color: var(--nv-text-3);
}
/* Dark tokens: shared by the OS preference (unless forced light) and the explicit toggle. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
--nv-bg: #0b0d12;
--nv-surface: #12151c;
--nv-surface-2: #161a22;
--nv-surface-3: #1d222c;
--nv-surface-inverse: #f2f4f7;
--nv-overlay: rgba(0, 0, 0, 0.6);
--nv-border: #252b36;
--nv-border-strong: #333a47;
--nv-text: #e7e9ee;
--nv-text-2: #b4bac6;
--nv-text-3: #8f97a6;
--nv-text-inverse: #0b0d12;
--nv-sidebar-bg: #0f1218;
--nv-topbar-bg: rgba(15, 18, 24, 0.82);
--nv-accent: #5b5bd6;
--nv-accent-hover: #6e6ade;
--nv-accent-text: #a5b4fc;
--nv-accent-soft: rgba(129, 140, 248, 0.12);
--nv-accent-soft-2: rgba(129, 140, 248, 0.2);
--nv-accent-ring: rgba(129, 140, 248, 0.6);
--nv-success-fg: #75e0a7; --nv-success-bg: rgba(23, 178, 106, 0.12); --nv-success-bd: rgba(23, 178, 106, 0.32); --nv-success: #067647;
--nv-danger-fg: #fda29b; --nv-danger-bg: rgba(240, 68, 56, 0.12); --nv-danger-bd: rgba(240, 68, 56, 0.35); --nv-danger: #d92d20;
--nv-warning-fg: #fec84b; --nv-warning-bg: rgba(247, 144, 9, 0.12); --nv-warning-bd: rgba(247, 144, 9, 0.35); --nv-warning: #b54708;
--nv-info-fg: #84caff; --nv-info-bg: rgba(46, 144, 250, 0.12); --nv-info-bd: rgba(46, 144, 250, 0.35); --nv-info: #175cd3;
--nv-violet-fg: #bdb4fe; --nv-violet-bg: rgba(122, 90, 248, 0.14); --nv-violet-bd: rgba(122, 90, 248, 0.38); --nv-violet: #6938ef;
--nv-neutral-fg: #cdd2da; --nv-neutral-bg: rgba(255, 255, 255, 0.06); --nv-neutral-bd: rgba(255, 255, 255, 0.12); --nv-neutral: #8f97a6;
--nv-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
--nv-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
--nv-shadow-md: 0 6px 16px -4px rgba(0, 0, 0, 0.55);
--nv-shadow-lg: 0 16px 32px -8px rgba(0, 0, 0, 0.6);
--nv-shadow-overlay: 0 24px 64px -12px rgba(0, 0, 0, 0.75);
--nv-form-control-placeholder: #6b7383;
}
}
:root[data-theme="dark"] {
color-scheme: dark;
--nv-bg: #0b0d12;
--nv-surface: #12151c;
--nv-surface-2: #161a22;
--nv-surface-3: #1d222c;
--nv-surface-inverse: #f2f4f7;
--nv-overlay: rgba(0, 0, 0, 0.6);
--nv-border: #252b36;
--nv-border-strong: #333a47;
--nv-text: #e7e9ee;
--nv-text-2: #b4bac6;
--nv-text-3: #8f97a6;
--nv-text-inverse: #0b0d12;
--nv-sidebar-bg: #0f1218;
--nv-topbar-bg: rgba(15, 18, 24, 0.82);
--nv-accent: #5b5bd6;
--nv-accent-hover: #6e6ade;
--nv-accent-text: #a5b4fc;
--nv-accent-soft: rgba(129, 140, 248, 0.12);
--nv-accent-soft-2: rgba(129, 140, 248, 0.2);
--nv-accent-ring: rgba(129, 140, 248, 0.6);
--nv-success-fg: #75e0a7; --nv-success-bg: rgba(23, 178, 106, 0.12); --nv-success-bd: rgba(23, 178, 106, 0.32); --nv-success: #067647;
--nv-danger-fg: #fda29b; --nv-danger-bg: rgba(240, 68, 56, 0.12); --nv-danger-bd: rgba(240, 68, 56, 0.35); --nv-danger: #d92d20;
--nv-warning-fg: #fec84b; --nv-warning-bg: rgba(247, 144, 9, 0.12); --nv-warning-bd: rgba(247, 144, 9, 0.35); --nv-warning: #b54708;
--nv-info-fg: #84caff; --nv-info-bg: rgba(46, 144, 250, 0.12); --nv-info-bd: rgba(46, 144, 250, 0.35); --nv-info: #175cd3;
--nv-violet-fg: #bdb4fe; --nv-violet-bg: rgba(122, 90, 248, 0.14); --nv-violet-bd: rgba(122, 90, 248, 0.38); --nv-violet: #6938ef;
--nv-neutral-fg: #cdd2da; --nv-neutral-bg: rgba(255, 255, 255, 0.06); --nv-neutral-bd: rgba(255, 255, 255, 0.12); --nv-neutral: #8f97a6;
--nv-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
--nv-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
--nv-shadow-md: 0 6px 16px -4px rgba(0, 0, 0, 0.55);
--nv-shadow-lg: 0 16px 32px -8px rgba(0, 0, 0, 0.6);
--nv-shadow-overlay: 0 24px 64px -12px rgba(0, 0, 0, 0.75);
--nv-form-control-placeholder: #6b7383;
}
/* ==========================================================================
2. Base
========================================================================== */
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body.nv-console {
background: var(--nv-bg);
color: var(--nv-text);
font-family: var(--nv-font);
font-size: var(--nv-text-base);
line-height: var(--nv-leading);
font-feature-settings: "cv02", "cv03", "cv04", "cv11", "tnum" 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
padding-bottom: 0;
}
.nv-console h1, .nv-console h2, .nv-console h3,
.nv-console h4, .nv-console h5, .nv-console h6,
.nv-console .h1, .nv-console .h2, .nv-console .h3,
.nv-console .h4, .nv-console .h5, .nv-console .h6 {
color: var(--nv-text);
font-family: var(--nv-font);
font-weight: var(--nv-weight-semibold);
letter-spacing: -0.01em;
}
.nv-console a { color: var(--nv-accent-text); }
.nv-console a:hover { color: var(--nv-accent-hover); }
.nv-console .text-muted { color: var(--nv-text-3) !important; }
.nv-console .text-dark { color: var(--nv-text) !important; }
.nv-console .text-body { color: var(--nv-text) !important; }
.nv-console .text-secondary { color: var(--nv-text-2) !important; }
.nv-console .text-primary { color: var(--nv-accent-text) !important; }
.nv-console .text-success { color: var(--nv-success-fg) !important; }
.nv-console .text-danger { color: var(--nv-danger-fg) !important; }
.nv-console .text-warning { color: var(--nv-warning-fg) !important; }
.nv-console .text-info { color: var(--nv-info-fg) !important; }
.nv-console .text-pink, .nv-console .text-purple { color: var(--nv-violet-fg) !important; }
.nv-console .bg-white { background-color: var(--nv-surface) !important; }
.nv-console .bg-light { background-color: var(--nv-surface-2) !important; }
.nv-console .border, .nv-console .border-top, .nv-console .border-bottom,
.nv-console .border-left, .nv-console .border-right { border-color: var(--nv-border) !important; }
.nv-console hr { border-top-color: var(--nv-border); }
.nv-console code, .nv-console kbd, .nv-console pre, .nv-console samp { font-family: var(--nv-font-mono); }
.nv-console code { color: var(--nv-violet-fg); background: var(--nv-violet-bg); padding: 0.1em 0.35em; border-radius: var(--nv-r-xs); font-size: 0.85em; }
.nv-console pre { color: var(--nv-text); background: var(--nv-surface-2); border: 1px solid var(--nv-border); border-radius: var(--nv-r-md); padding: var(--nv-space-3); }
.nv-console ::selection { background: var(--nv-accent-soft-2); }
/* Visible, consistent focus for keyboard users only */
.nv-console :focus { outline: none; }
.nv-console :focus-visible {
outline: 2px solid transparent;
box-shadow: var(--nv-focus) !important;
border-radius: var(--nv-r-sm);
}
.nv-console .form-control:focus-visible,
.nv-console .custom-select:focus-visible { border-radius: var(--nv-r-md); }
/* Thin, theme-aware scrollbars */
.nv-console * { scrollbar-width: thin; scrollbar-color: var(--nv-border-strong) transparent; }
.nv-console ::-webkit-scrollbar { width: 10px; height: 10px; }
.nv-console ::-webkit-scrollbar-thumb { background: var(--nv-border-strong); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
.nv-console ::-webkit-scrollbar-track { background: transparent; }
.nv-skip-link:focus {
left: 12px !important;
z-index: 2000;
background: var(--nv-surface);
color: var(--nv-text);
padding: 8px 12px;
border-radius: var(--nv-r-md);
box-shadow: var(--nv-shadow-lg), var(--nv-focus);
}
.nv-sr-only {
position: absolute !important;
width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* ==========================================================================
3. Shell
========================================================================== */
body.nv-console #wrapper {
overflow: visible;
height: auto;
min-height: 100vh;
}
/* ---- Topbar ---- */
body.nv-console #wrapper .navbar-custom.nv-topbar {
position: fixed;
top: 0; left: 0; right: 0;
height: var(--nv-topbar-h);
z-index: 1030;
display: flex;
align-items: center;
gap: var(--nv-space-3);
padding: 0 var(--nv-space-4) 0 var(--nv-space-3);
background: var(--nv-topbar-bg);
-webkit-backdrop-filter: saturate(180%) blur(12px);
backdrop-filter: saturate(180%) blur(12px);
border-bottom: 1px solid var(--nv-border);
box-shadow: none;
background-image: none;
}
.nv-topbar__left { display: flex; align-items: center; gap: var(--nv-space-2); min-width: 0; flex: 0 0 auto; }
body.nv-console.menu-layout-sidebar .nv-topbar__left { width: calc(var(--nv-sidebar-w) - var(--nv-space-3)); }
.nv-topbar__center { flex: 1 1 auto; min-width: 0; display: flex; justify-content: flex-start; }
body.nv-console #wrapper .nv-topbar .nv-topbar__right {
display: flex;
align-items: center;
gap: var(--nv-space-1);
margin: 0 0 0 auto;
padding: 0;
float: none;
flex: 0 0 auto;
}
body.nv-console #wrapper .nv-topbar .nv-topbar__right > li { float: none; display: flex; align-items: center; }
body.nv-console #wrapper .nv-topbar .logo-box {
float: none;
width: auto !important; /* app_sidebar.css forces 70px when .enlarged */
min-width: 0;
height: var(--nv-topbar-h);
display: flex;
align-items: center;
background: transparent;
}
body.nv-console #wrapper .nv-topbar .logo { display: flex; align-items: center; line-height: 1; padding: 0 var(--nv-space-1); }
body.nv-console #wrapper .nv-topbar .logo { gap: var(--nv-space-2); text-decoration: none; }
body.nv-console #wrapper .nv-topbar .logo img { height: 24px; width: auto; max-width: 150px; object-fit: contain; }
body.nv-console #wrapper .nv-topbar .logo .logo-lg { display: none; }
body.nv-console #wrapper .nv-topbar .logo .logo-sm { display: inline-flex; }
.nv-brand-name {
color: var(--nv-text);
font-size: var(--nv-text-md);
font-weight: var(--nv-weight-semibold);
letter-spacing: -0.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 150px;
}
/* Icon buttons (menu toggle, theme toggle, settings) */
body.nv-console #wrapper .nv-topbar .nv-icon-btn,
body.nv-console #wrapper .nv-topbar .button-menu-mobile,
body.nv-console #wrapper .nv-topbar .topnav-menu .nav-link.nv-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
min-width: 36px;
padding: 0;
margin: 0;
line-height: 1;
border: 1px solid transparent;
border-radius: var(--nv-r-md);
background: transparent;
color: var(--nv-text-2) !important;
font-size: 20px;
cursor: pointer;
transition: background-color var(--nv-dur-fast) var(--nv-ease), color var(--nv-dur-fast) var(--nv-ease);
max-height: none;
}
body.nv-console #wrapper .nv-topbar .nv-icon-btn:hover,
body.nv-console #wrapper .nv-topbar .button-menu-mobile:hover,
body.nv-console #wrapper .nv-topbar .dropdown.show > .nv-icon-btn {
background: var(--nv-surface-3);
color: var(--nv-text) !important;
}
body.nv-console #wrapper .nv-topbar .nv-icon-btn i { font-size: 20px; line-height: 1; }
body.nv-console #wrapper .nv-topbar .nv-icon-btn::after { display: none; }
/* Search trigger */
.nv-search-trigger {
display: inline-flex;
align-items: center;
gap: var(--nv-space-2);
width: 100%;
max-width: 440px;
height: 36px;
padding: 0 var(--nv-space-2) 0 var(--nv-space-3);
border: 1px solid var(--nv-border);
border-radius: var(--nv-r-md);
background: var(--nv-surface-2);
color: var(--nv-text-3);
font-size: var(--nv-text-sm);
text-align: left;
cursor: text;
transition: border-color var(--nv-dur-fast) var(--nv-ease), background-color var(--nv-dur-fast) var(--nv-ease);
}
.nv-search-trigger:hover { border-color: var(--nv-border-strong); background: var(--nv-surface); }
.nv-search-trigger i { font-size: 18px; line-height: 1; }
.nv-search-trigger__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nv-kbd, .nv-console kbd.nv-kbd {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 1px 6px;
border: 1px solid var(--nv-border);
border-bottom-width: 2px;
border-radius: var(--nv-r-xs);
background: var(--nv-surface);
color: var(--nv-text-3);
font-family: var(--nv-font);
font-size: 11px;
font-weight: var(--nv-weight-medium);
line-height: 16px;
box-shadow: none;
}
/* Server health pill */
.nv-health {
display: inline-flex;
align-items: center;
gap: var(--nv-space-2);
height: 32px;
padding: 0 var(--nv-space-3);
border-radius: var(--nv-r-pill);
border: 1px solid var(--nv-border);
background: var(--nv-surface);
color: var(--nv-text-2) !important;
font-size: var(--nv-text-sm);
font-weight: var(--nv-weight-medium);
white-space: nowrap;
text-decoration: none !important;
line-height: 1;
}
.nv-health:hover { border-color: var(--nv-border-strong); color: var(--nv-text) !important; }
.nv-health--ok .nv-dot { --nv-dot: var(--nv-success); }
.nv-health--warn { border-color: var(--nv-danger-bd); background: var(--nv-danger-bg); color: var(--nv-danger-fg) !important; }
.nv-health--warn .nv-dot { --nv-dot: var(--nv-danger); animation: nv-pulse 1.8s var(--nv-ease) infinite; }
.nv-dot {
--nv-dot: var(--nv-neutral);
display: inline-block;
width: 8px;
height: 8px;
flex: 0 0 8px;
border-radius: 50%;
background: var(--nv-dot);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--nv-dot) 22%, transparent);
}
@keyframes nv-pulse {
0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--nv-dot) 25%, transparent); }
50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--nv-dot) 5%, transparent); }
}
/* Credits (reseller) */
.nv-credits {
display: inline-flex; align-items: center; gap: 6px;
height: 32px; padding: 0 var(--nv-space-3);
border-radius: var(--nv-r-pill);
background: var(--nv-warning-bg); color: var(--nv-warning-fg) !important;
font-weight: var(--nv-weight-semibold); font-size: var(--nv-text-sm);
font-variant-numeric: tabular-nums;
}
/* User menu */
body.nv-console #wrapper .nv-topbar .nv-user-btn {
display: inline-flex;
align-items: center;
gap: var(--nv-space-2);
height: 36px;
padding: 0 var(--nv-space-2) 0 4px;
border: 1px solid transparent;
border-radius: var(--nv-r-pill);
background: transparent;
color: var(--nv-text) !important;
font-size: var(--nv-text-sm);
font-weight: var(--nv-weight-medium);
line-height: 1;
cursor: pointer;
}
body.nv-console #wrapper .nv-topbar .nv-user-btn:hover,
body.nv-console #wrapper .nv-topbar .dropdown.show > .nv-user-btn { background: var(--nv-surface-3); }
body.nv-console #wrapper .nv-topbar .nv-user-btn::after { display: none; }
.nv-avatar {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px; flex: 0 0 28px;
border-radius: 50%;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
color: #fff;
font-size: 12px; font-weight: var(--nv-weight-semibold); letter-spacing: 0.02em;
text-transform: uppercase;
}
.nv-user-btn__name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nv-user-btn .mdi-chevron-down { color: var(--nv-text-3); font-size: 16px; }
.nv-menu-header { padding: var(--nv-space-2) var(--nv-space-3) var(--nv-space-2); }
.nv-menu-header__name { font-weight: var(--nv-weight-semibold); color: var(--nv-text); font-size: var(--nv-text-base); }
.nv-menu-header__role { color: var(--nv-text-3); font-size: var(--nv-text-xs); }
/* ---- Sidebar ---- */
body.nv-console.menu-layout-sidebar #wrapper .left-side-menu {
position: fixed;
top: var(--nv-topbar-h);
bottom: 0;
left: 0;
z-index: 1020;
width: var(--nv-sidebar-w);
padding: var(--nv-space-3) 0 var(--nv-space-4);
background: var(--nv-sidebar-bg);
border-right: 1px solid var(--nv-border);
box-shadow: none;
display: block;
transition: width var(--nv-dur) var(--nv-ease), transform var(--nv-dur-slow) var(--nv-ease);
}
body.nv-console #wrapper .left-side-menu .slimScrollDiv { height: 100% !important; overflow: visible !important; }
body.nv-console #wrapper .left-side-menu .slimscroll-menu {
height: 100% !important;
overflow-x: hidden !important;
overflow-y: auto !important;
overscroll-behavior: contain;
padding: 0 var(--nv-space-3);
}
body.nv-console #wrapper .left-side-menu .slimScrollBar,
body.nv-console #wrapper .left-side-menu .slimScrollRail { display: none !important; }
body.nv-console #wrapper #sidebar-menu { padding: 0; }
body.nv-console #wrapper #sidebar-menu > ul { margin: 0; padding: 0; list-style: none; }
body.nv-console #wrapper #sidebar-menu > ul > li { margin: 1px 0; }
body.nv-console #wrapper #sidebar-menu .menu-title {
padding: var(--nv-space-4) var(--nv-space-3) var(--nv-space-1);
color: var(--nv-text-3);
font-size: 11px;
font-weight: var(--nv-weight-semibold);
letter-spacing: 0.06em;
text-transform: uppercase;
pointer-events: none;
white-space: nowrap;
}
body.nv-console #wrapper #sidebar-menu > ul > li.menu-title:first-child { padding-top: var(--nv-space-1); }
body.nv-console #wrapper #sidebar-menu > ul > li > a {
display: flex;
align-items: center;
gap: var(--nv-space-3);
min-height: 36px;
padding: 0 var(--nv-space-3);
border-radius: var(--nv-r-md);
color: var(--nv-text-2);
font-size: var(--nv-text-base);
font-weight: var(--nv-weight-medium);
line-height: 1.25;
text-decoration: none;
transition: background-color var(--nv-dur-fast) var(--nv-ease), color var(--nv-dur-fast) var(--nv-ease);
position: relative;
}
body.nv-console #wrapper #sidebar-menu > ul > li > a > span:not(.arrow-right):not(.arrow-down):not(.menu-arrow) {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
body.nv-console #wrapper #sidebar-menu > ul > li > a i {
display: inline-flex;
width: 20px;
min-width: 20px;
justify-content: center;
margin: 0;
font-size: 18px;
line-height: 1;
color: var(--nv-text-3) !important;
transition: color var(--nv-dur-fast) var(--nv-ease);
}
body.nv-console #wrapper #sidebar-menu > ul > li > a:hover,
body.nv-console #wrapper #sidebar-menu > ul > li > a:focus-visible {
background: var(--nv-surface-3);
color: var(--nv-text);
}
body.nv-console #wrapper #sidebar-menu > ul > li > a:hover i { color: var(--nv-text-2) !important; }
body.nv-console #wrapper #sidebar-menu > ul > li.mm-active > a,
body.nv-console #wrapper #sidebar-menu > ul > li.active > a,
body.nv-console #wrapper #sidebar-menu > ul > li > a.active {
color: var(--nv-text);
background: transparent;
}
body.nv-console #wrapper #sidebar-menu > ul > li > a.active,
body.nv-console #wrapper #sidebar-menu > ul > li > a[aria-current="page"] {
background: var(--nv-accent-soft);
color: var(--nv-accent-text);
}
body.nv-console #wrapper #sidebar-menu > ul > li > a.active i,
body.nv-console #wrapper #sidebar-menu > ul > li.nv-has-active > a i { color: var(--nv-accent-text) !important; }
body.nv-console #wrapper #sidebar-menu > ul > li.nv-has-active > a { color: var(--nv-text); }
/* Chevron for groups (legacy spans .arrow-right/.arrow-down) */
body.nv-console #wrapper #sidebar-menu .arrow-right,
body.nv-console #wrapper #sidebar-menu .arrow-down {
display: inline-block;
flex: 0 0 auto;
width: 7px;
height: 7px;
margin: 0 2px 0 auto;
border: solid var(--nv-text-3);
border-width: 0 1.5px 1.5px 0;
transform: rotate(-45deg);
transition: transform var(--nv-dur) var(--nv-ease);
float: none;
position: static;
}
body.nv-console #wrapper #sidebar-menu li.mm-active > a .arrow-right,
body.nv-console #wrapper #sidebar-menu li.mm-active > a .arrow-down,
body.nv-console #wrapper #sidebar-menu li > a[aria-expanded="true"] .arrow-right,
body.nv-console #wrapper #sidebar-menu li > a[aria-expanded="true"] .arrow-down { transform: rotate(45deg); }
/* Second level */
body.nv-console #wrapper #sidebar-menu .nav-second-level {
margin: 2px 0 var(--nv-space-2) calc(var(--nv-space-3) + 9px);
padding: 0 0 0 var(--nv-space-3);
border-left: 1px solid var(--nv-border);
list-style: none;
}
body.nv-console #wrapper #sidebar-menu .nav-second-level.collapse:not(.in):not(.show) { display: none; }
body.nv-console #wrapper #sidebar-menu .nav-second-level.collapse.in,
body.nv-console #wrapper #sidebar-menu .nav-second-level.collapse.show { display: block; }
body.nv-console #wrapper #sidebar-menu .nav-second-level li a {
display: flex;
align-items: center;
gap: var(--nv-space-2);
min-height: 32px;
padding: 4px var(--nv-space-2);
border-radius: var(--nv-r-sm);
color: var(--nv-text-2);
font-size: var(--nv-text-sm);
line-height: 1.3;
text-decoration: none;
white-space: normal;
}
body.nv-console #wrapper #sidebar-menu .nav-second-level li a .mdi { font-size: 15px !important; color: var(--nv-text-3); width: 16px; text-align: center; }
body.nv-console #wrapper #sidebar-menu .nav-second-level li a .mdi::before { font-size: 15px; }
body.nv-console #wrapper #sidebar-menu .nav-second-level li a:hover,
body.nv-console #wrapper #sidebar-menu .nav-second-level li a:focus-visible { background: var(--nv-surface-3); color: var(--nv-text); }
body.nv-console #wrapper #sidebar-menu .nav-second-level li.active > a,
body.nv-console #wrapper #sidebar-menu .nav-second-level li a.active,
body.nv-console #wrapper #sidebar-menu .nav-second-level li a[aria-current="page"] {
background: var(--nv-accent-soft);
color: var(--nv-accent-text);
font-weight: var(--nv-weight-medium);
}
body.nv-console #wrapper #sidebar-menu .nav-second-level li a[aria-current="page"] .mdi { color: var(--nv-accent-text); }
/* ---- Content area ---- */
body.nv-console.menu-layout-sidebar #wrapper > .content-page,
body.nv-console.menu-layout-sidebar #wrapper > .wrapper {
margin: 0 0 0 var(--nv-sidebar-w);
padding: calc(var(--nv-topbar-h) + var(--nv-space-6)) var(--nv-gutter) var(--nv-space-6);
min-height: 100vh;
overflow: visible;
background: transparent;
transition: margin-left var(--nv-dur) var(--nv-ease);
}
body.nv-console.menu-layout-sidebar #wrapper > .content-page > .content { padding: 0; margin: 0; }
body.nv-console #wrapper .container-fluid { padding-left: 0; padding-right: 0; max-width: var(--nv-content-max); margin-left: auto; margin-right: auto; }
body.nv-console #wrapper .boxed-layout .container-fluid,
body.nv-console #wrapper .content.boxed-layout .container-fluid { max-width: 1120px; }
/* ---- Horizontal menu layout (profile setting menu_layout = horizontal) ---- */
body.nv-console.menu-layout-horizontal #wrapper > .wrapper,
body.nv-console.menu-layout-horizontal #wrapper > .content-page {
margin: 0 !important;
padding: calc(var(--nv-topbar-h) + var(--nv-topnav-h, 45px) + var(--nv-space-6)) var(--nv-gutter) var(--nv-space-6);
min-height: 100vh;
}
@media (min-width: 992px) {
body.nv-console.menu-layout-horizontal #wrapper #topnav .navigation-menu { display: flex !important; flex-wrap: wrap; gap: 0 2px; }
body.nv-console.menu-layout-horizontal #wrapper #topnav .navigation-menu > li { float: none; margin: 0; }
}
body.nv-console.menu-layout-horizontal #wrapper #topnav.topnav-horizontal {
top: var(--nv-topbar-h);
z-index: 1025;
background: var(--nv-surface);
border-bottom: 1px solid var(--nv-border);
box-shadow: none;
}
body.nv-console.menu-layout-horizontal #wrapper #topnav .container-fluid { max-width: none; padding: 0 var(--nv-space-3); }
body.nv-console.menu-layout-horizontal #wrapper #topnav .navigation-menu > li > a {
display: flex;
align-items: center;
gap: 6px;
padding: 12px 10px;
color: var(--nv-text-2);
font-size: var(--nv-text-sm);
font-weight: var(--nv-weight-medium);
line-height: 20px;
}
body.nv-console.menu-layout-horizontal #wrapper #topnav .navigation-menu > li > a i { color: var(--nv-text-3) !important; font-size: 16px; }
body.nv-console.menu-layout-horizontal #wrapper #topnav .navigation-menu > li > a:hover,
body.nv-console.menu-layout-horizontal #wrapper #topnav .navigation-menu > li.has-submenu:hover > a { color: var(--nv-text); }
body.nv-console.menu-layout-horizontal #wrapper #topnav .navigation-menu > li > a.active,
body.nv-console.menu-layout-horizontal #wrapper #topnav .navigation-menu > li.active > a { color: var(--nv-accent-text); box-shadow: inset 0 -2px 0 var(--nv-accent); }
body.nv-console.menu-layout-horizontal #wrapper #topnav .navigation-menu .submenu {
background: var(--nv-surface);
border: 1px solid var(--nv-border);
border-radius: var(--nv-r-lg);
box-shadow: var(--nv-shadow-lg);
padding: var(--nv-space-1);
}
body.nv-console.menu-layout-horizontal #wrapper #topnav .navigation-menu .submenu li a {
display: flex; align-items: center; gap: 8px;
padding: 6px var(--nv-space-3);
border-radius: var(--nv-r-sm);
color: var(--nv-text);
font-size: var(--nv-text-sm);
}
body.nv-console.menu-layout-horizontal #wrapper #topnav .navigation-menu .submenu li a:hover { background: var(--nv-surface-3); color: var(--nv-text); }
body.nv-console.menu-layout-horizontal #wrapper #topnav .navbar-toggle button,
body.nv-console.menu-layout-horizontal #wrapper #topnav .navbar-toggle span { color: var(--nv-text-2) !important; }
body.nv-console.menu-layout-horizontal #wrapper #topnav .navbar-toggle span { background-color: var(--nv-text-2) !important; }
@media (max-width: 991.98px) {
body.nv-console.menu-layout-horizontal #wrapper #topnav #navigation { background: var(--nv-surface); border-top: 1px solid var(--nv-border); }
body.nv-console.menu-layout-horizontal #wrapper > .wrapper,
body.nv-console.menu-layout-horizontal #wrapper > .content-page { padding-top: calc(var(--nv-topbar-h) + var(--nv-topnav-h, 48px) + var(--nv-space-4)); }
}
/* Footer */
body.nv-console .footer {
position: static;
left: auto; right: auto;
margin-left: 0;
padding: var(--nv-space-4) var(--nv-gutter);
border-top: 1px solid var(--nv-border);
background: transparent;
color: var(--nv-text-3);
font-size: var(--nv-text-xs);
}
body.nv-console.menu-layout-sidebar .footer { margin-left: var(--nv-sidebar-w); transition: margin-left var(--nv-dur) var(--nv-ease); }
body.nv-console.menu-layout-sidebar #wrapper > .content-page > .footer { margin: var(--nv-space-6) calc(-1 * var(--nv-gutter)) calc(-1 * var(--nv-space-6)); }
/* ---- Collapsed rail (body.enlarged, >= 768px) ---- */
@media (min-width: 768px) {
body.nv-console.menu-layout-sidebar.enlarged { --nv-sidebar-current: var(--nv-sidebar-rail); }
body.nv-console.menu-layout-sidebar.enlarged #wrapper .left-side-menu {
width: var(--nv-sidebar-rail);
z-index: 1025;
position: fixed;
top: var(--nv-topbar-h);
}
body.nv-console.menu-layout-sidebar.enlarged #wrapper .left-side-menu .slimscroll-menu { overflow: visible !important; padding: 0 var(--nv-space-2); }
body.nv-console.menu-layout-sidebar.enlarged #wrapper #sidebar-menu .menu-title {
height: 1px; padding: 0; margin: var(--nv-space-2) var(--nv-space-2);
background: var(--nv-border); font-size: 0; overflow: hidden;
}
body.nv-console.menu-layout-sidebar.enlarged #wrapper #sidebar-menu > ul > li { position: relative; }
body.nv-console.menu-layout-sidebar.enlarged #wrapper #sidebar-menu > ul > li > a {
justify-content: center;
padding: 0;
width: 44px;
min-height: 40px;
margin: 0 auto;
}
body.nv-console.menu-layout-sidebar.enlarged #wrapper #sidebar-menu > ul > li > a > span,
body.nv-console.menu-layout-sidebar.enlarged #wrapper #sidebar-menu > ul > li > a .arrow-right,
body.nv-console.menu-layout-sidebar.enlarged #wrapper #sidebar-menu > ul > li > a .arrow-down { display: none !important; }
body.nv-console.menu-layout-sidebar.enlarged #wrapper #sidebar-menu > ul > li > a i { font-size: 20px; }
/* Flyout on hover/focus-within: label + submenu */
body.nv-console.menu-layout-sidebar.enlarged #wrapper #sidebar-menu > ul > li > .nav-second-level,
body.nv-console.menu-layout-sidebar.enlarged #wrapper #sidebar-menu > ul > li > .nav-second-level.in { display: none !important; }
body.nv-console.menu-layout-sidebar.enlarged #wrapper #sidebar-menu > ul > li:hover > .nav-second-level,
body.nv-console.menu-layout-sidebar.enlarged #wrapper #sidebar-menu > ul > li:focus-within > .nav-second-level {
display: block !important;
position: absolute;
top: 0;
left: calc(100% + 6px);
width: 240px;
height: auto !important;
margin: 0;
padding: var(--nv-space-2);
border: 1px solid var(--nv-border);
border-radius: var(--nv-r-lg);
background: var(--nv-surface);
box-shadow: var(--nv-shadow-lg);
z-index: 1040;
}
body.nv-console.menu-layout-sidebar.enlarged #wrapper #sidebar-menu > ul > li:hover > .nav-second-level::before,
body.nv-console.menu-layout-sidebar.enlarged #wrapper #sidebar-menu > ul > li:focus-within > .nav-second-level::before {
/* hover bridge between the rail and the flyout */
content: ""; position: absolute; top: 0; bottom: 0; left: -10px; width: 10px;
}
body.nv-console.menu-layout-sidebar.enlarged #wrapper #sidebar-menu > ul > li:hover > a,
body.nv-console.menu-layout-sidebar.enlarged #wrapper #sidebar-menu > ul > li > a:hover { width: 44px; background: var(--nv-surface-3); }
body.nv-console.menu-layout-sidebar.enlarged #wrapper > .content-page,
body.nv-console.menu-layout-sidebar.enlarged #wrapper > .wrapper,
body.nv-console.menu-layout-sidebar.enlarged .footer { margin-left: var(--nv-sidebar-rail); }
body.nv-console.menu-layout-sidebar.enlarged #wrapper > .content-page > .footer { margin-left: calc(-1 * var(--nv-gutter)); }
}
/* Rail tooltip label (set by nv-console.js as data-nv-label) */
@media (min-width: 768px) {
body.nv-console.menu-layout-sidebar.enlarged #wrapper #sidebar-menu > ul > li > a[data-nv-label]:not([aria-expanded]):hover::after,
body.nv-console.menu-layout-sidebar.enlarged #wrapper #sidebar-menu > ul > li > a[data-nv-label]:not([aria-expanded]):focus-visible::after {
content: attr(data-nv-label);
position: absolute;
left: calc(100% + 10px);
top: 50%;
transform: translateY(-50%);
padding: 4px 8px;
border-radius: var(--nv-r-sm);
background: var(--nv-surface-inverse);
color: var(--nv-text-inverse);
font-size: var(--nv-text-xs);
white-space: nowrap;
pointer-events: none;
z-index: 1050;
}
}
/* ---- Mobile: off-canvas sidebar ---- */
@media (max-width: 767.98px) {
:root { --nv-gutter: 16px; }
body.nv-console.menu-layout-sidebar .nv-topbar__left { width: auto; }
body.nv-console #wrapper .nv-topbar .logo-box { display: flex; }
body.nv-console.menu-layout-sidebar #wrapper .left-side-menu {
display: block;
width: min(84vw, 300px);
top: 0;
z-index: 1045 !important;
padding-top: var(--nv-space-4);
transform: translateX(-105%);
box-shadow: var(--nv-shadow-overlay);
visibility: hidden;
transition: transform var(--nv-dur-slow) var(--nv-ease), visibility 0s linear var(--nv-dur-slow);
}
body.nv-console.menu-layout-sidebar.sidebar-enable #wrapper .left-side-menu {
transform: translateX(0);
visibility: visible;
transition: transform var(--nv-dur-slow) var(--nv-ease), visibility 0s;
}
body.nv-console.menu-layout-sidebar #wrapper .nv-sidebar-backdrop {
position: fixed; inset: 0; z-index: 1040;
background: var(--nv-overlay);
opacity: 0; pointer-events: none;
transition: opacity var(--nv-dur-slow) var(--nv-ease);
}
body.nv-console.menu-layout-sidebar.sidebar-enable #wrapper .nv-sidebar-backdrop { opacity: 1; pointer-events: auto; }
body.nv-console.menu-layout-sidebar #wrapper > .content-page,
body.nv-console.menu-layout-sidebar #wrapper > .wrapper,
body.nv-console.menu-layout-sidebar .footer,
body.nv-console.menu-layout-sidebar.enlarged #wrapper > .content-page,
body.nv-console.menu-layout-sidebar.enlarged #wrapper > .wrapper,
body.nv-console.menu-layout-sidebar.enlarged .footer { margin-left: 0 !important; }
body.nv-console.menu-layout-sidebar #wrapper > .content-page,
body.nv-console.menu-layout-sidebar #wrapper > .wrapper { padding: calc(var(--nv-topbar-h) + var(--nv-space-4)) var(--nv-gutter) var(--nv-space-6); }
/* Enlarged state is meaningless on phones: always show the full menu when open */
body.nv-console.menu-layout-sidebar.enlarged #wrapper #sidebar-menu > ul > li > a > span { display: inline !important; }
.nv-topbar__center { justify-content: flex-end; }
.nv-search-trigger { width: 36px; padding: 0; justify-content: center; border-color: transparent; background: transparent; color: var(--nv-text-2); }
.nv-search-trigger__label, .nv-search-trigger kbd.nv-kbd { display: none; }
.nv-brand-name { max-width: 34vw; font-size: var(--nv-text-base); }
.nv-health__label, .nv-user-btn__name, .nv-user-btn .mdi-chevron-down { display: none; }
.nv-health { width: 32px; padding: 0; justify-content: center; }
body.nv-console #wrapper .nv-topbar .logo img { max-width: 110px; }
body.nv-console #wrapper .nv-topbar .nv-topbar__right { gap: 0; }
}
@media (min-width: 768px) {
.nv-sidebar-backdrop { display: none; }
}
@media (max-width: 420px) {
.nv-brand-name { display: none; }
}
/* Every table/grid scrolls inside its own container; the page never scrolls sideways */
body.nv-console #wrapper > .content-page,
body.nv-console #wrapper > .wrapper { max-width: 100vw; }
@media (min-width: 768px) {
body.nv-console.menu-layout-sidebar #wrapper > .content-page,
body.nv-console.menu-layout-sidebar #wrapper > .wrapper { max-width: calc(100vw - var(--nv-sidebar-w)); }
body.nv-console.menu-layout-sidebar.enlarged #wrapper > .content-page,
body.nv-console.menu-layout-sidebar.enlarged #wrapper > .wrapper { max-width: calc(100vw - var(--nv-sidebar-rail)); }
}
body.nv-console .row { min-width: 0; }
body.nv-console [class*="col-"] { min-width: 0; }
/* ---- Page header ---- */
body.nv-console .page-title-box {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--nv-space-3);
padding: 0;
margin: 0 0 var(--nv-space-5);
min-height: 0;
background: none;
}
body.nv-console .page-title-box .page-title {
order: 0;
margin: 0;
line-height: 1.25;
font-size: var(--nv-text-2xl);
font-weight: var(--nv-weight-semibold);
letter-spacing: -0.02em;
color: var(--nv-text);
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--nv-space-2);
}
body.nv-console .page-title-box .page-title-right {
order: 1;
float: none;
margin: 0 0 0 auto;
}
body.nv-console .page-title-box .breadcrumb {
display: flex;
flex-wrap: wrap;
gap: var(--nv-space-2);
margin: 0;
padding: 0;
background: none;
}
body.nv-console .page-title-box .breadcrumb > li { display: flex; flex-wrap: wrap; gap: var(--nv-space-2); align-items: center; }
body.nv-console .page-title-box .breadcrumb a { text-decoration: none; }
@media (max-width: 767.98px) {
body.nv-console .page-title-box .page-title { font-size: var(--nv-text-xl); }
body.nv-console .page-title-box .page-title-right { margin-left: 0; width: 100%; }
}
/* ==========================================================================
4. Command palette
========================================================================== */
.nv-cmdk[hidden] { display: none !important; }
.nv-cmdk {
position: fixed;
inset: 0;
z-index: 1060;
display: flex;
align-items: flex-start;
justify-content: center;
padding: min(14vh, 120px) var(--nv-space-4) var(--nv-space-4);
}
.nv-cmdk__backdrop { position: absolute; inset: 0; background: var(--nv-overlay); animation: nv-fade-in var(--nv-dur) var(--nv-ease); }
.nv-cmdk__panel {
position: relative;
width: 100%;
max-width: 640px;
max-height: min(70vh, 560px);
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid var(--nv-border);
border-radius: var(--nv-r-xl);
background: var(--nv-surface);
box-shadow: var(--nv-shadow-overlay);
animation: nv-pop-in var(--nv-dur) var(--nv-ease);
}
.nv-cmdk__field {
display: flex;
align-items: center;
gap: var(--nv-space-3);
padding: 0 var(--nv-space-4);
border-bottom: 1px solid var(--nv-border);
}
.nv-cmdk__field > i { font-size: 20px; color: var(--nv-text-3); }
.nv-cmdk__input {
flex: 1 1 auto;
height: 56px;
border: 0;
background: transparent;
color: var(--nv-text);
font-size: var(--nv-text-lg);
outline: none;
min-width: 0;
}
.nv-cmdk__input::placeholder { color: var(--nv-text-3); }
.nv-cmdk__input:focus-visible { box-shadow: none !important; }
.nv-cmdk__spinner {
width: 16px; height: 16px; border-radius: 50%;
border: 2px solid var(--nv-border-strong); border-top-color: var(--nv-accent);
animation: nv-spin 0.7s linear infinite;
}
.nv-cmdk__list { overflow-y: auto; padding: var(--nv-space-2); margin: 0; list-style: none; }
.nv-cmdk__group {
padding: var(--nv-space-3) var(--nv-space-3) var(--nv-space-1);
color: var(--nv-text-3);
font-size: 11px;
font-weight: var(--nv-weight-semibold);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.nv-cmdk__item,
.nv-console a.nv-cmdk__item,
.nv-console a.nv-cmdk__item:hover {
display: flex;
align-items: center;
gap: var(--nv-space-3);
padding: var(--nv-space-2) var(--nv-space-3);
border-radius: var(--nv-r-md);
color: var(--nv-text);
text-decoration: none !important;
cursor: pointer;
}
.nv-cmdk__item > i { font-size: 18px; color: var(--nv-text-3); width: 20px; text-align: center; }
.nv-cmdk__item-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nv-cmdk__item-meta { color: var(--nv-text-3); font-size: var(--nv-text-xs); white-space: nowrap; font-variant-numeric: tabular-nums; }
.nv-cmdk__item[aria-selected="true"], .nv-cmdk__item:hover { background: var(--nv-accent-soft); color: var(--nv-text); }
.nv-cmdk__item[aria-selected="true"] > i { color: var(--nv-accent-text); }
.nv-cmdk__empty { padding: var(--nv-space-8) var(--nv-space-4); text-align: center; color: var(--nv-text-3); }
.nv-cmdk__footer {
display: flex; gap: var(--nv-space-4); align-items: center;
padding: var(--nv-space-2) var(--nv-space-4);
border-top: 1px solid var(--nv-border);
background: var(--nv-surface-2);
color: var(--nv-text-3);
font-size: var(--nv-text-xs);
}
.nv-cmdk__footer span { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 767.98px) {
.nv-cmdk { padding: var(--nv-space-3); }
.nv-cmdk__panel { max-height: 80vh; }
.nv-cmdk__footer { display: none; }
}
/* ==========================================================================
5. Components
========================================================================== */
/* ---- Cards ---- */
body.nv-console .card,
body.nv-console .card-box {
background: var(--nv-surface);
color: var(--nv-text);
border: 1px solid var(--nv-border);
border-radius: var(--nv-r-lg);
box-shadow: var(--nv-shadow-xs);
margin-bottom: var(--nv-space-6);
}
body.nv-console .card:hover { box-shadow: var(--nv-shadow-xs); }
body.nv-console .card-box { padding: var(--nv-space-5); }
body.nv-console .card .card { box-shadow: none; }
body.nv-console .card-body { padding: var(--nv-space-5); }
body.nv-console .card-header,
body.nv-console .card-footer {
background: var(--nv-surface);
border-color: var(--nv-border);
color: var(--nv-text);
padding: var(--nv-space-3) var(--nv-space-5);
}
body.nv-console .card-header:first-child { border-radius: calc(var(--nv-r-lg) - 1px) calc(var(--nv-r-lg) - 1px) 0 0; }
body.nv-console .card-title,
body.nv-console .header-title {
color: var(--nv-text);
font-size: var(--nv-text-md);
font-weight: var(--nv-weight-semibold);
letter-spacing: -0.005em;
text-transform: none;
}
body.nv-console .sub-header { color: var(--nv-text-3); font-size: var(--nv-text-sm); }
body.nv-console .card-widgets > a,
body.nv-console .card-widgets > .btn { color: var(--nv-text-3); }
@media (max-width: 767.98px) {
body.nv-console .card-body, body.nv-console .card-box { padding: var(--nv-space-4); }
}
/* ---- Buttons ---- */
body.nv-console .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 36px;
padding: 0.4375rem 0.875rem;
border-radius: var(--nv-r-md);
border-width: 1px;
font-family: var(--nv-font);
font-size: var(--nv-text-sm);
font-weight: var(--nv-weight-medium);
line-height: 1.25;
letter-spacing: 0;
box-shadow: var(--nv-shadow-xs);
background-image: none !important;
text-transform: none;
transform: none !important;
transition: background-color var(--nv-dur-fast) var(--nv-ease), border-color var(--nv-dur-fast) var(--nv-ease), color var(--nv-dur-fast) var(--nv-ease), box-shadow var(--nv-dur-fast) var(--nv-ease);
}
body.nv-console .btn.btn-block { display: flex; width: 100%; }
body.nv-console .btn:hover { transform: none; }
body.nv-console .btn:focus, body.nv-console .btn.focus { box-shadow: var(--nv-shadow-xs); }
body.nv-console .btn:focus-visible { box-shadow: var(--nv-focus) !important; }
body.nv-console .btn:disabled, body.nv-console .btn.disabled { opacity: 0.55; cursor: not-allowed; }
body.nv-console .btn-sm, body.nv-console .btn-group-sm > .btn { min-height: 30px; padding: 0.25rem 0.625rem; font-size: var(--nv-text-xs); border-radius: var(--nv-r-sm); }
body.nv-console .btn-xs { min-height: 24px; padding: 0.125rem 0.5rem; font-size: 11px; border-radius: var(--nv-r-sm); }
body.nv-console .btn-lg { min-height: 44px; padding: 0.625rem 1.125rem; font-size: var(--nv-text-md); }
body.nv-console .btn-rounded { border-radius: var(--nv-r-pill); }
body.nv-console .btn i, body.nv-console .btn .mdi { line-height: 1; }
body.nv-console .btn-primary,
body.nv-console .btn-purple {
background-color: var(--nv-accent);
border-color: var(--nv-accent);
color: var(--nv-on-accent);
}
body.nv-console .btn-primary:hover, body.nv-console .btn-primary:focus,
body.nv-console .btn-primary:not(:disabled):not(.disabled):active,
body.nv-console .btn-purple:hover { background-color: var(--nv-accent-hover); border-color: var(--nv-accent-hover); color: var(--nv-on-accent); }
body.nv-console .btn-secondary,
body.nv-console .btn-light,
body.nv-console .btn-white,
body.nv-console .btn-dark,
body.nv-console .btn-outline-secondary,
body.nv-console .btn-outline-light,
body.nv-console .btn-outline-dark {
background-color: var(--nv-surface);
border-color: var(--nv-border-strong);
color: var(--nv-text);
}
body.nv-console .btn-secondary:hover, body.nv-console .btn-light:hover, body.nv-console .btn-white:hover,
body.nv-console .btn-dark:hover, body.nv-console .btn-outline-secondary:hover,
body.nv-console .btn-outline-light:hover, body.nv-console .btn-outline-dark:hover,
body.nv-console .btn-secondary:not(:disabled):not(.disabled):active,
body.nv-console .btn-secondary:not(:disabled):not(.disabled).active,
body.nv-console .btn-light:not(:disabled):not(.disabled).active {
background-color: var(--nv-surface-3);
border-color: var(--nv-border-strong);
color: var(--nv-text);
}
body.nv-console .btn-success { background-color: var(--nv-success); border-color: var(--nv-success); color: #fff; }
body.nv-console .btn-success:hover { background-color: #05603a; border-color: #05603a; color: #fff; }
body.nv-console .btn-danger { background-color: var(--nv-danger); border-color: var(--nv-danger); color: #fff; }
body.nv-console .btn-danger:hover { background-color: #912018; border-color: #912018; color: #fff; }
body.nv-console .btn-warning { background-color: var(--nv-warning); border-color: var(--nv-warning); color: #fff; }
body.nv-console .btn-warning:hover { background-color: #93370d; border-color: #93370d; color: #fff; }
body.nv-console .btn-info, body.nv-console .btn-blue { background-color: var(--nv-info); border-color: var(--nv-info); color: #fff; }
body.nv-console .btn-info:hover, body.nv-console .btn-blue:hover { background-color: #1849a9; border-color: #1849a9; color: #fff; }
body.nv-console .btn-pink { background-color: var(--nv-violet); border-color: var(--nv-violet); color: #fff; }
body.nv-console .btn-outline-primary { color: var(--nv-accent-text); border-color: var(--nv-accent-soft-2); background: var(--nv-surface); }
body.nv-console .btn-outline-primary:hover { background: var(--nv-accent-soft); color: var(--nv-accent-text); border-color: var(--nv-accent); }
body.nv-console .btn-outline-success { color: var(--nv-success-fg); border-color: var(--nv-success-bd); background: var(--nv-surface); }
body.nv-console .btn-outline-success:hover { background: var(--nv-success-bg); color: var(--nv-success-fg); }
body.nv-console .btn-outline-danger { color: var(--nv-danger-fg); border-color: var(--nv-danger-bd); background: var(--nv-surface); }
body.nv-console .btn-outline-danger:hover { background: var(--nv-danger-bg); color: var(--nv-danger-fg); }
body.nv-console .btn-outline-warning { color: var(--nv-warning-fg); border-color: var(--nv-warning-bd); background: var(--nv-surface); }
body.nv-console .btn-outline-warning:hover { background: var(--nv-warning-bg); color: var(--nv-warning-fg); }
body.nv-console .btn-outline-info { color: var(--nv-info-fg); border-color: var(--nv-info-bd); background: var(--nv-surface); }
body.nv-console .btn-outline-info:hover { background: var(--nv-info-bg); color: var(--nv-info-fg); }
body.nv-console .btn-outline-pink, body.nv-console .btn-outline-purple { color: var(--nv-violet-fg); border-color: var(--nv-violet-bd); background: var(--nv-surface); }
body.nv-console .btn-link { box-shadow: none; color: var(--nv-accent-text); background: transparent; border-color: transparent; }
body.nv-console .btn-group > .btn { box-shadow: none; }
body.nv-console .btn-group { box-shadow: var(--nv-shadow-xs); border-radius: var(--nv-r-md); }
body.nv-console .btn-group-sm { border-radius: var(--nv-r-sm); }
/* Table row action buttons (legacy .btn-light.btn-xs icon groups) */
body.nv-console table .btn-group .btn,
body.nv-console table .btn.btn-xs:not(.btn-rounded) {
min-height: 28px;
min-width: 28px;
padding: 0 6px;
}
/* ---- Forms ---- */
body.nv-console label,
body.nv-console .col-form-label { color: var(--nv-text); font-weight: var(--nv-weight-medium); font-size: var(--nv-text-sm); }
body.nv-console .form-control,
body.nv-console .custom-select,
body.nv-console select.form-control,
body.nv-console .dataTables_length select,
body.nv-console .dataTables_filter input {
min-height: 36px;
height: auto;
padding: 0.4375rem 0.75rem;
border: 1px solid var(--nv-border-strong);
border-radius: var(--nv-r-md);
background-color: var(--nv-surface);
color: var(--nv-text);
font-family: var(--nv-font);
font-size: var(--nv-text-base);
line-height: 1.4;
box-shadow: var(--nv-shadow-xs);
transition: border-color var(--nv-dur-fast) var(--nv-ease), box-shadow var(--nv-dur-fast) var(--nv-ease);
}
body.nv-console select.form-control,
body.nv-console .custom-select {
-webkit-appearance: none;
appearance: none;
padding-right: 2rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.625rem center;
background-size: 16px;
}
body.nv-console select.form-control[multiple],
body.nv-console select.form-control[size]:not([size="1"]) { background-image: none; padding-right: 0.75rem; }
body.nv-console textarea.form-control { min-height: 84px; }
body.nv-console input:-webkit-autofill,
body.nv-console input:-webkit-autofill:hover,
body.nv-console input:-webkit-autofill:focus {
-webkit-text-fill-color: var(--nv-text);
-webkit-box-shadow: 0 0 0 1000px var(--nv-surface) inset;
caret-color: var(--nv-text);
transition: background-color 9999s ease-out 0s;
}
body.nv-console .form-control::placeholder { color: var(--nv-form-control-placeholder); opacity: 1; }
body.nv-console .form-control:hover:not(:disabled):not([readonly]) { border-color: color-mix(in srgb, var(--nv-border-strong) 60%, var(--nv-text-3)); }
body.nv-console .form-control:focus,
body.nv-console .custom-select:focus {
border-color: var(--nv-accent);
background-color: var(--nv-surface);
color: var(--nv-text);
box-shadow: 0 0 0 3px var(--nv-accent-soft-2);
outline: none;
}
body.nv-console .form-control:disabled,
body.nv-console .form-control[readonly] { background-color: var(--nv-surface-3); color: var(--nv-text-2); box-shadow: none; }
body.nv-console .form-control-sm { min-height: 30px; padding: 0.25rem 0.5rem; font-size: var(--nv-text-sm); border-radius: var(--nv-r-sm); }
body.nv-console .form-group { margin-bottom: var(--nv-space-5); }
body.nv-console .form-text,
body.nv-console small.form-text,
body.nv-console .nv-help { color: var(--nv-text-3); font-size: var(--nv-text-xs); margin-top: var(--nv-space-1); line-height: 1.45; }
body.nv-console .input-group-text {
background: var(--nv-surface-2);
border-color: var(--nv-border-strong);
color: var(--nv-text-2);
border-radius: var(--nv-r-md);
font-size: var(--nv-text-sm);
}
body.nv-console .input-group > .form-control { box-shadow: none; }
body.nv-console .input-group-append .btn,
body.nv-console .input-group-prepend .btn {
box-shadow: none;
min-height: 36px;
min-width: 36px;
background: var(--nv-surface-2);
border-color: var(--nv-border-strong);
color: var(--nv-text-2);
}
body.nv-console .input-group-append .btn:hover,
body.nv-console .input-group-prepend .btn:hover { background: var(--nv-surface-3); color: var(--nv-text); }
body.nv-console .input-group-append .btn-danger,
body.nv-console .input-group-append .btn-danger:hover { color: var(--nv-danger-fg); }
body.nv-console .input-group-append .btn-primary:hover { color: var(--nv-accent-text); }
body.nv-console .input-group-append .btn + .btn { margin-left: -1px; }
body.nv-console .input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
body.nv-console .input-group-append > .btn { border-radius: 0; }
body.nv-console .input-group-append > .btn:last-child { border-top-right-radius: var(--nv-r-md); border-bottom-right-radius: var(--nv-r-md); }
body.nv-console .nv-hint-row { margin-top: calc(-1 * var(--nv-space-3)); }
body.nv-console label.nv-required::after { content: " *"; color: var(--nv-danger-fg); font-weight: var(--nv-weight-semibold); }
/* Validation (Bootstrap .is-invalid + Parsley + native, rendered by nv-console.js) */
body.nv-console .form-control.is-invalid,
body.nv-console .form-control.parsley-error,
body.nv-console .was-validated .form-control:invalid {
border-color: var(--nv-danger);
background-image: none;
padding-right: 0.75rem;
}
body.nv-console .form-control.is-invalid:focus,
body.nv-console .form-control.parsley-error:focus { box-shadow: 0 0 0 3px var(--nv-danger-bg); }
body.nv-console .form-control.parsley-success { border-color: var(--nv-border-strong); }
body.nv-console .invalid-feedback,
body.nv-console .nv-field-error,
body.nv-console .parsley-errors-list > li {
display: flex;
align-items: center;
gap: 4px;
margin-top: 6px;
color: var(--nv-danger-fg);
font-size: var(--nv-text-xs);
font-weight: var(--nv-weight-medium);
}
body.nv-console .nv-field-error::before,
body.nv-console .parsley-errors-list > li::before {
content: "";
display: inline-block;
width: 12px; height: 12px; flex: 0 0 12px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 15h-2v-2h2v2Zm0-4h-2V7h2v6Z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 15h-2v-2h2v2Zm0-4h-2V7h2v6Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.nv-console .parsley-errors-list { margin: 0; padding: 0; list-style: none; }
body.nv-console .nv-tab-has-error::after {
content: "";
display: inline-block;
width: 6px; height: 6px;
margin-left: 6px;
border-radius: 50%;
background: var(--nv-danger);
vertical-align: middle;
}
body.nv-console .text-danger:is(sup, span) { font-weight: var(--nv-weight-semibold); }
/* Checkboxes / radios / switches */
body.nv-console .custom-control-label::before {
border-color: var(--nv-border-strong);
background-color: var(--nv-surface);
box-shadow: none;
}
body.nv-console .custom-control-input:checked ~ .custom-control-label::before {
border-color: var(--nv-accent);
background-color: var(--nv-accent);
}
body.nv-console .custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 3px var(--nv-accent-soft-2); }
body.nv-console .custom-control-input:focus:not(:checked) ~ .custom-control-label::before { border-color: var(--nv-accent); }
body.nv-console .custom-switch .custom-control-label::after { background-color: var(--nv-text-3); }
body.nv-console .custom-switch .custom-control-input:checked ~ .custom-control-label::after { background-color: #fff; }
body.nv-console .switchery {
border-color: var(--nv-border-strong) !important;
background-color: var(--nv-surface-3) !important;
box-shadow: none !important;
}
body.nv-console .switchery[style*="rgb(3, 156, 253)"],
body.nv-console .switchery[style*="#039cfd"] { background-color: var(--nv-accent) !important; border-color: var(--nv-accent) !important; }
body.nv-console .switchery > small { box-shadow: 0 1px 2px rgba(16, 24, 40, 0.25) !important; background: #fff; }
body.nv-console input[type="checkbox"]:not(.custom-control-input):not(.js-switch),
body.nv-console input[type="radio"]:not(.custom-control-input) { accent-color: var(--nv-accent); }
/* Select2 */
body.nv-console .select2-container--default .select2-selection--single,
body.nv-console .select2-container--default .select2-selection--multiple {
min-height: 36px;
border: 1px solid var(--nv-border-strong);
border-radius: var(--nv-r-md);
background: var(--nv-surface);
box-shadow: var(--nv-shadow-xs);
}
body.nv-console .select2-container--default .select2-selection--single { height: 36px; }
body.nv-console .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 34px; color: var(--nv-text); padding-left: 12px; }
body.nv-console .select2-container--default .select2-selection--single .select2-selection__arrow { height: 34px; right: 6px; }
body.nv-console .select2-container--default .select2-selection--single .select2-selection__placeholder,
body.nv-console .select2-container--default .select2-search--inline .select2-search__field::placeholder { color: var(--nv-form-control-placeholder); }
body.nv-console .select2-container--default.select2-container--focus .select2-selection--multiple,
body.nv-console .select2-container--default.select2-container--open .select2-selection--single,
body.nv-console .select2-container--default.select2-container--open .select2-selection--multiple {
border-color: var(--nv-accent);
box-shadow: 0 0 0 3px var(--nv-accent-soft-2);
}
body.nv-console .select2-container--default .select2-selection--multiple .select2-selection__choice {
display: inline-flex; align-items: center;
background: var(--nv-neutral-bg);
border: 1px solid var(--nv-neutral-bd);
border-radius: var(--nv-r-sm);
color: var(--nv-text);
font-size: var(--nv-text-sm);
padding: 1px 8px;
margin-top: 5px;
}
body.nv-console .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: var(--nv-text-3); margin-right: 4px; }
body.nv-console .select2-container--default .select2-search--inline .select2-search__field { color: var(--nv-text); margin-top: 6px; }
.nv-console .select2-dropdown,
body.nv-console .select2-dropdown {
background: var(--nv-surface);
border: 1px solid var(--nv-border);
border-radius: var(--nv-r-md);
box-shadow: var(--nv-shadow-lg);
color: var(--nv-text);
overflow: hidden;
}
body.nv-console .select2-container--default .select2-search--dropdown .select2-search__field {
border: 1px solid var(--nv-border-strong);
border-radius: var(--nv-r-sm);
background: var(--nv-surface);
color: var(--nv-text);
padding: 6px 8px;
}
body.nv-console .select2-results__option { padding: 7px 12px; font-size: var(--nv-text-sm); }
body.nv-console .select2-container--default .select2-results__option[aria-selected="true"] { background: var(--nv-surface-3); color: var(--nv-text); }
body.nv-console .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--nv-accent-soft); color: var(--nv-text); }
body.nv-console .select2-container--default .select2-results__group { color: var(--nv-text-3); }
/* Bootstrap-select / nice-select */
body.nv-console .bootstrap-select > .dropdown-toggle,
body.nv-console .nice-select {
background: var(--nv-surface);
border: 1px solid var(--nv-border-strong);
border-radius: var(--nv-r-md);
color: var(--nv-text);
min-height: 36px;
box-shadow: var(--nv-shadow-xs);
}
body.nv-console .nice-select .list { background: var(--nv-surface); border: 1px solid var(--nv-border); border-radius: var(--nv-r-md); box-shadow: var(--nv-shadow-lg); }
body.nv-console .nice-select .option:hover,
body.nv-console .nice-select .option.focus,
body.nv-console .nice-select .option.selected.focus { background: var(--nv-accent-soft); }
/* Touchspin, colorpicker, daterangepicker, clockpicker (dropdown surfaces) */
body.nv-console .daterangepicker,
body.nv-console .popover,
body.nv-console .clockpicker-popover {
background: var(--nv-surface);
border: 1px solid var(--nv-border);
border-radius: var(--nv-r-lg);
color: var(--nv-text);
box-shadow: var(--nv-shadow-lg);
}
body.nv-console .daterangepicker .calendar-table { background: var(--nv-surface); border-color: var(--nv-border); }
body.nv-console .daterangepicker td.off { background: transparent; color: var(--nv-text-3); }
body.nv-console .daterangepicker td.available:hover { background: var(--nv-surface-3); }
body.nv-console .daterangepicker td.active, body.nv-console .daterangepicker td.active:hover { background: var(--nv-accent); color: #fff; }
body.nv-console .daterangepicker td.in-range { background: var(--nv-accent-soft); color: var(--nv-text); }
body.nv-console .popover-header { background: var(--nv-surface-2); border-color: var(--nv-border); color: var(--nv-text); }
body.nv-console .popover-body { color: var(--nv-text-2); }
/* jsTree (stream/server trees) */
body.nv-console .jstree-default .jstree-anchor { color: var(--nv-text); border-radius: var(--nv-r-xs); }
body.nv-console .jstree-default .jstree-hovered { background: var(--nv-surface-3); box-shadow: none; }
body.nv-console .jstree-default .jstree-clicked { background: var(--nv-accent-soft); box-shadow: none; }
/* ---- Tables + DataTables ---- */
body.nv-console table { background-color: transparent; }
body.nv-console .table {
background-color: var(--nv-surface);
color: var(--nv-text);
margin-bottom: 0;
border-collapse: separate;
border-spacing: 0;
font-size: var(--nv-text-sm);
font-variant-numeric: tabular-nums;
}
body.nv-console .table thead th,
body.nv-console table.dataTable thead th,
body.nv-console table.dataTable thead td {
padding: 0.5625rem var(--nv-cell-px);
background: var(--nv-surface-2);
color: var(--nv-text-3);
border-top: 0;
border-bottom: 1px solid var(--nv-border);
font-size: 11px;
font-weight: var(--nv-weight-semibold);
letter-spacing: 0.05em;
text-transform: uppercase;
white-space: nowrap;
vertical-align: middle;
}
body.nv-console .table thead th:first-child { border-top-left-radius: 0; }
body.nv-console .table td,
body.nv-console .table tbody th {
padding: var(--nv-cell-py) var(--nv-cell-px);
border-top: 0;
border-bottom: 1px solid var(--nv-border);
vertical-align: middle;
background: transparent;
color: var(--nv-text);
}
body.nv-console .table tbody tr:last-child > td { border-bottom: 0; }
body.nv-console .table th, body.nv-console .table td { border-left: 0 !important; border-right: 0 !important; }
body.nv-console table .btn-group .btn,
body.nv-console table .btn-group .btn.btn-light,
body.nv-console table .btn-group .btn.btn-light:not(:disabled):not(.disabled):active {
background: var(--nv-surface);
border-color: var(--nv-border);
color: var(--nv-text-2);
box-shadow: none;
}
body.nv-console table .btn-group .btn:hover { background: var(--nv-surface-3); color: var(--nv-text); border-color: var(--nv-border-strong); }
/* bootstrap.css paints `.odd button.btn-light` white with !important */
body.nv-console table .odd button.btn-light,
body.nv-console table .even button.btn-light { background-color: var(--nv-surface) !important; color: var(--nv-text-2) !important; border-color: var(--nv-border) !important; }
body.nv-console table .odd button.btn-light:hover,
body.nv-console table .even button.btn-light:hover { background-color: var(--nv-surface-3) !important; color: var(--nv-text) !important; }
body.nv-console table .btn-group .btn:focus-visible { position: relative; z-index: 2; }
body.nv-console table .btn-group .btn:disabled,
body.nv-console table .btn-group .btn.disabled,
body.nv-console table .btn:disabled,
body.nv-console table .btn.disabled {
background: var(--nv-surface-2) !important;
border-color: var(--nv-border) !important;
color: var(--nv-text-3) !important;
opacity: 0.5;
}
body.nv-console .table tbody tr { background: transparent; transition: background-color var(--nv-dur-fast) var(--nv-ease); }
body.nv-console .table-striped tbody tr:nth-of-type(odd) { background: transparent; }
body.nv-console .table-hover tbody tr:hover,
body.nv-console table.dataTable tbody tr:hover,
body.nv-console .table tbody tr:hover { background: var(--nv-surface-2); color: var(--nv-text); }
body.nv-console .table-bordered, body.nv-console .table-bordered td, body.nv-console .table-bordered th { border-color: var(--nv-border); }
body.nv-console table.dataTable tbody tr.selected,
body.nv-console table.dataTable tbody tr.selected:hover { background: var(--nv-accent-soft) !important; color: var(--nv-text); }
body.nv-console table.dataTable tbody tr.selected td { color: var(--nv-text); }
body.nv-console table.dataTable { margin-top: 0 !important; margin-bottom: 0 !important; }
body.nv-console table.dataTable.nowrap td { white-space: nowrap; }
body.nv-console table.dataTable thead .sorting::before,
body.nv-console table.dataTable thead .sorting::after,
body.nv-console table.dataTable thead .sorting_asc::before,
body.nv-console table.dataTable thead .sorting_asc::after,
body.nv-console table.dataTable thead .sorting_desc::before,
body.nv-console table.dataTable thead .sorting_desc::after { opacity: 0.25; font-size: 0.7em; bottom: 0.7em; }
body.nv-console table.dataTable thead .sorting_asc::before,
body.nv-console table.dataTable thead .sorting_desc::after { opacity: 0.9; color: var(--nv-accent-text); }
body.nv-console table.dataTable thead > tr > th.sorting,
body.nv-console table.dataTable thead > tr > th.sorting_asc,
body.nv-console table.dataTable thead > tr > th.sorting_desc { padding-right: 26px; }
body.nv-console .table td .font-size-13, body.nv-console .table td small { color: var(--nv-text-3); }
body.nv-console .table img { border-radius: var(--nv-r-xs); }
/* Scroll containers: tables scroll inside their card, header stays sticky */
body.nv-console .table-responsive,
body.nv-console .dataTables_wrapper .col-sm-12:has(> table.dataTable),
body.nv-console .dataTables_wrapper .dataTables_scrollBody,
body.nv-console .card-body:has(> table.table),
body.nv-console .card-box:has(> table.table),
body.nv-console .card-body:has(> .table-wrapper > table.table) {
overflow: auto;
-webkit-overflow-scrolling: touch;
max-width: 100%;
}
body.nv-console .dataTables_wrapper .col-sm-12:has(> table.dataTable),
body.nv-console .table-responsive:has(> table.dataTable) {
max-height: max(420px, calc(100vh - 260px));
border: 1px solid var(--nv-border);
border-radius: var(--nv-r-md);
padding: 0;
background: var(--nv-surface);
}
body.nv-console .dataTables_wrapper .col-sm-12:has(> table.dataTable) > table > thead th,
body.nv-console .table-responsive > table > thead th {
position: sticky;
top: 0;
z-index: 2;
}
body.nv-console .table-responsive:has(> .dataTables_wrapper) { max-height: none; border: 0; overflow: visible; }
body.nv-console .dataTables_wrapper .table-responsive .col-sm-12:has(> table.dataTable) { max-height: none; }
@media (max-width: 767.98px) {
body.nv-console .dataTables_wrapper .col-sm-12:has(> table.dataTable) { max-height: 70vh; }
}
body.nv-console .dataTables_wrapper > .row { margin-left: 0; margin-right: 0; }
body.nv-console .dataTables_wrapper > .row > [class*="col-"] { padding-left: 0; padding-right: 0; }
body.nv-console .dataTables_wrapper > .row + .row { margin-top: var(--nv-space-3); }
body.nv-console .dataTables_wrapper .dataTables_info { color: var(--nv-text-3); font-size: var(--nv-text-xs); padding-top: 0.5rem; }
body.nv-console .dataTables_wrapper .dataTables_length label,
body.nv-console .dataTables_wrapper .dataTables_filter label { color: var(--nv-text-2); font-weight: var(--nv-weight-medium); font-size: var(--nv-text-sm); }
body.nv-console .dataTables_wrapper .dataTables_processing {
background: var(--nv-surface);
color: var(--nv-text-2);
border: 1px solid var(--nv-border);
border-radius: var(--nv-r-md);
box-shadow: var(--nv-shadow-md);
padding: 10px 16px !important;
height: auto !important;
font-size: var(--nv-text-sm);
z-index: 3;
}
body.nv-console .dataTables_empty,
body.nv-console table.dataTable td.dataTables_empty {
padding: var(--nv-space-10) var(--nv-space-4) !important;
color: var(--nv-text-3);
text-align: center;
background: var(--nv-surface) !important;
}
body.nv-console table.dataTable td.dataTables_empty::before {
content: "";
display: block;
width: 40px; height: 40px;
margin: 0 auto var(--nv-space-3);
border-radius: var(--nv-r-lg);
background: var(--nv-surface-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2398a2b3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E") center no-repeat;
}
/* Responsive child rows */
body.nv-console table.dataTable > tbody > tr.child ul.dtr-details > li { border-bottom-color: var(--nv-border); }
body.nv-console table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
body.nv-console table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before { background-color: var(--nv-accent); box-shadow: none; border: 0; }
/* Compact density (html.nv-density-compact, toggled from the user menu) */
html.nv-density-compact { --nv-cell-py: 0.3125rem; --nv-cell-px: 0.625rem; }
html.nv-density-compact body.nv-console .table { font-size: var(--nv-text-xs); }
html.nv-density-compact body.nv-console table .btn.btn-xs,
html.nv-density-compact body.nv-console table .btn-group .btn { min-height: 24px; min-width: 24px; }
/* ---- Badges and status ---- */
body.nv-console .badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border: 1px solid var(--nv-neutral-bd);
border-radius: var(--nv-r-pill);
background: var(--nv-neutral-bg);
color: var(--nv-neutral-fg);
font-size: 11px;
font-weight: var(--nv-weight-medium);
line-height: 16px;
letter-spacing: 0;
text-transform: none;
box-shadow: none;
}
body.nv-console .badge-success, body.nv-console .badge-soft-success { background: var(--nv-success-bg); color: var(--nv-success-fg); border-color: var(--nv-success-bd); }
body.nv-console .badge-danger, body.nv-console .badge-soft-danger { background: var(--nv-danger-bg); color: var(--nv-danger-fg); border-color: var(--nv-danger-bd); }
body.nv-console .badge-warning, body.nv-console .badge-soft-warning { background: var(--nv-warning-bg); color: var(--nv-warning-fg); border-color: var(--nv-warning-bd); }
body.nv-console .badge-info, body.nv-console .badge-soft-info { background: var(--nv-info-bg); color: var(--nv-info-fg); border-color: var(--nv-info-bd); }
body.nv-console .badge-primary, body.nv-console .badge-soft-primary { background: var(--nv-accent-soft); color: var(--nv-accent-text); border-color: var(--nv-accent-soft-2); }
body.nv-console .badge-pink, body.nv-console .badge-purple { background: var(--nv-violet-bg); color: var(--nv-violet-fg); border-color: var(--nv-violet-bd); }
body.nv-console .badge-dark, body.nv-console .badge-secondary, body.nv-console .badge-light { background: var(--nv-neutral-bg); color: var(--nv-neutral-fg); border-color: var(--nv-neutral-bd); }
/* Canonical status badge: Online */
.nv-status {
--nv-st-fg: var(--nv-neutral-fg);
--nv-st-bg: var(--nv-neutral-bg);
--nv-st-bd: var(--nv-neutral-bd);
--nv-dot: var(--nv-neutral);
display: inline-flex;
align-items: center;
gap: 6px;
height: 22px;
padding: 0 8px;
border: 1px solid var(--nv-st-bd);
border-radius: var(--nv-r-pill);
background: var(--nv-st-bg);
color: var(--nv-st-fg);
font-size: 11px;
font-weight: var(--nv-weight-semibold);
letter-spacing: 0.02em;
line-height: 1;
white-space: nowrap;
}
.nv-status::before {
content: "";
width: 6px; height: 6px; flex: 0 0 6px;
border-radius: 50%;
background: var(--nv-dot);
}
.nv-status--online { --nv-st-fg: var(--nv-success-fg); --nv-st-bg: var(--nv-success-bg); --nv-st-bd: var(--nv-success-bd); --nv-dot: var(--nv-success); }
.nv-status--offline { --nv-st-fg: var(--nv-neutral-fg); --nv-st-bg: var(--nv-neutral-bg); --nv-st-bd: var(--nv-neutral-bd); --nv-dot: var(--nv-neutral); }
.nv-status--ondemand { --nv-st-fg: var(--nv-violet-fg); --nv-st-bg: var(--nv-violet-bg); --nv-st-bd: var(--nv-violet-bd); --nv-dot: var(--nv-violet); }
.nv-status--error { --nv-st-fg: var(--nv-danger-fg); --nv-st-bg: var(--nv-danger-bg); --nv-st-bd: var(--nv-danger-bd); --nv-dot: var(--nv-danger); }
.nv-status--warning, .nv-status--starting { --nv-st-fg: var(--nv-warning-fg); --nv-st-bg: var(--nv-warning-bg); --nv-st-bd: var(--nv-warning-bd); --nv-dot: var(--nv-warning); }
.nv-status--info, .nv-status--direct { --nv-st-fg: var(--nv-info-fg); --nv-st-bg: var(--nv-info-bg); --nv-st-bd: var(--nv-info-bd); --nv-dot: var(--nv-info); }
.nv-status--error::before, .nv-status--starting::before { animation: nv-blink 1.4s ease-in-out infinite; }
@keyframes nv-blink { 50% { opacity: 0.35; } }
/* Legacy status pills rendered by table_search.php / Alpine lists
( ...)
become the same badge. They are not interactive. */
body.nv-console table .btn-rounded.btn-xs[class*="btn-outline-"] {
min-height: 22px;
height: 22px;
padding: 0 8px;
gap: 6px;
border-radius: var(--nv-r-pill);
font-size: 11px;
font-weight: var(--nv-weight-semibold);
letter-spacing: 0.02em;
box-shadow: none;
cursor: default;
pointer-events: none;
}
body.nv-console table .btn-rounded.btn-xs[class*="btn-outline-"]::before {
content: ""; width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: currentColor; opacity: 0.9;
}
body.nv-console table .btn-rounded.btn-xs[class*="btn-outline-"] > i { display: none; }
body.nv-console table .btn-rounded.btn-xs.btn-outline-success { background: var(--nv-success-bg); border-color: var(--nv-success-bd); color: var(--nv-success-fg); }
body.nv-console table .btn-rounded.btn-xs.btn-outline-danger { background: var(--nv-danger-bg); border-color: var(--nv-danger-bd); color: var(--nv-danger-fg); }
body.nv-console table .btn-rounded.btn-xs.btn-outline-warning { background: var(--nv-neutral-bg); border-color: var(--nv-neutral-bd); color: var(--nv-neutral-fg); }
body.nv-console table .btn-rounded.btn-xs.btn-outline-primary { background: var(--nv-warning-bg); border-color: var(--nv-warning-bd); color: var(--nv-warning-fg); }
body.nv-console table .btn-rounded.btn-xs.btn-outline-pink { background: var(--nv-violet-bg); border-color: var(--nv-violet-bd); color: var(--nv-violet-fg); }
body.nv-console table .btn-rounded.btn-xs.btn-outline-purple,
body.nv-console table .btn-rounded.btn-xs.btn-outline-info { background: var(--nv-info-bg); border-color: var(--nv-info-bd); color: var(--nv-info-fg); }
/* ---- Tabs, pills, wizard headers ---- */
body.nv-console .nav-tabs {
border-bottom: 1px solid var(--nv-border);
gap: var(--nv-space-1);
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
}
body.nv-console .nav-tabs::-webkit-scrollbar { display: none; }
body.nv-console .nav-tabs .nav-link {
border: 0;
border-bottom: 2px solid transparent;
border-radius: 0;
margin-bottom: -1px;
padding: var(--nv-space-2) var(--nv-space-3);
background: transparent;
color: var(--nv-text-3);
font-weight: var(--nv-weight-medium);
font-size: var(--nv-text-sm);
white-space: nowrap;
}
body.nv-console .nav-tabs .nav-link:hover { color: var(--nv-text); border-bottom-color: var(--nv-border-strong); }
body.nv-console .nav-tabs .nav-link.active,
body.nv-console .nav-tabs .nav-item.show .nav-link {
color: var(--nv-text);
background: transparent;
border-bottom-color: var(--nv-accent);
}
body.nv-console .nav-pills,
body.nv-console .nav-pills.bg-light,
body.nv-console .form-wizard-header {
display: flex;
flex-wrap: nowrap;
gap: 2px;
padding: 4px;
margin-bottom: var(--nv-space-5) !important;
border: 1px solid var(--nv-border);
border-radius: var(--nv-r-md);
background: var(--nv-surface-2) !important;
overflow-x: auto;
scrollbar-width: none;
}
body.nv-console .nav-pills::-webkit-scrollbar { display: none; }
body.nv-console .form-wizard-header { margin-left: 0 !important; margin-right: 0 !important; margin-top: 0 !important; }
body.nv-console .nav-pills .nav-item { flex: 1 0 auto; }
body.nv-console .nav-pills .nav-link,
body.nv-console .form-wizard-header .nav-link {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 32px;
padding: 4px 12px !important;
border-radius: var(--nv-r-sm) !important;
background: transparent;
color: var(--nv-text-3);
font-size: var(--nv-text-sm);
font-weight: var(--nv-weight-medium);
white-space: nowrap;
transition: background-color var(--nv-dur-fast) var(--nv-ease), color var(--nv-dur-fast) var(--nv-ease);
}
body.nv-console .nav-pills .nav-link:hover { color: var(--nv-text); }
body.nv-console .nav-pills .nav-link.active,
body.nv-console .nav-pills .show > .nav-link,
body.nv-console .form-wizard-header .nav-link.active {
background: var(--nv-surface) !important;
color: var(--nv-text) !important;
box-shadow: var(--nv-shadow-sm);
}
body.nv-console .nav-pills .nav-link i,
body.nv-console .form-wizard-header .nav-link i { font-size: 16px; }
body.nv-console .nav-pills .nav-link.active i { color: var(--nv-accent-text); }
body.nv-console .tab-content { color: var(--nv-text); }
/* Sticky save bar: wizard pager (.list-inline.wizard) and explicit .nv-form-actions */
body.nv-console .list-inline.wizard,
body.nv-console .nv-form-actions,
body.nv-console .nv-savebar {
position: sticky;
bottom: 0;
z-index: 5;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--nv-space-2);
margin: var(--nv-space-5) calc(-1 * var(--nv-space-5)) calc(-1 * var(--nv-space-5)) !important;
padding: var(--nv-space-3) var(--nv-space-5) !important;
border-top: 1px solid var(--nv-border);
border-radius: 0 0 var(--nv-r-lg) var(--nv-r-lg);
background: color-mix(in srgb, var(--nv-surface) 88%, transparent);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
list-style: none;
}
body.nv-console .list-inline.wizard > li { margin: 0 !important; float: none !important; }
body.nv-console .list-inline.wizard > li.previous { margin-right: auto !important; }
body.nv-console .list-inline.wizard > li.next { order: 2; }
body.nv-console .list-inline.wizard > li.next:has(button[type="submit"]) { order: 3; }
body.nv-console .list-inline.wizard > li.disabled > .btn,
body.nv-console .list-inline.wizard > li.disabled > a { opacity: 0.5; pointer-events: none; }
@media (max-width: 767.98px) {
body.nv-console .list-inline.wizard,
body.nv-console .nv-form-actions { margin: var(--nv-space-4) calc(-1 * var(--nv-space-4)) calc(-1 * var(--nv-space-4)) !important; padding: var(--nv-space-3) var(--nv-space-4) !important; }
body.nv-console .list-inline.wizard > li.next:has(button[type="submit"]) { flex: 1 1 100%; order: 4; }
body.nv-console .list-inline.wizard > li.next:has(button[type="submit"]) .btn { width: 100%; }
}
/* ---- Modals ---- */
body.nv-console .modal-backdrop.show { opacity: 1; background: var(--nv-overlay); }
body.nv-console .modal-content {
background: var(--nv-surface);
color: var(--nv-text);
border: 1px solid var(--nv-border);
border-radius: var(--nv-r-xl);
box-shadow: var(--nv-shadow-overlay);
overflow: hidden;
}
body.nv-console .modal-header,
body.nv-console .modal-footer { border-color: var(--nv-border); padding: var(--nv-space-4) var(--nv-space-5); background: var(--nv-surface); }
body.nv-console .modal-header { background: var(--nv-surface) !important; }
body.nv-console .modal-header .modal-title { color: var(--nv-text) !important; font-size: var(--nv-text-lg); font-weight: var(--nv-weight-semibold); }
body.nv-console .modal-footer { background: var(--nv-surface-2); gap: var(--nv-space-2); }
body.nv-console .modal-body { padding: var(--nv-space-5); }
body.nv-console .close,
body.nv-console .btn-close {
color: var(--nv-text-3);
opacity: 1;
text-shadow: none;
font-weight: 400;
font-size: 1.375rem;
line-height: 1;
border-radius: var(--nv-r-sm);
width: 28px; height: 28px;
display: inline-flex; align-items: center; justify-content: center;
padding: 0;
background: transparent;
border: 0;
}
body.nv-console .close:hover { color: var(--nv-text); background: var(--nv-surface-3); opacity: 1; }
body.nv-console .modal-header .close { margin: -4px -8px -4px auto; padding: 0; }
/* ---- Dropdowns ---- */
body.nv-console .dropdown-menu {
min-width: 12rem;
padding: var(--nv-space-1);
border: 1px solid var(--nv-border);
border-radius: var(--nv-r-lg);
background: var(--nv-surface);
color: var(--nv-text);
box-shadow: var(--nv-shadow-lg);
font-size: var(--nv-text-sm);
animation: nv-pop-in var(--nv-dur-fast) var(--nv-ease);
}
body.nv-console .dropdown-item,
body.nv-console .dropdown-menu .notify-item {
display: flex;
align-items: center;
gap: var(--nv-space-2);
padding: 6px var(--nv-space-3);
border-radius: var(--nv-r-sm);
color: var(--nv-text);
font-size: var(--nv-text-sm);
white-space: nowrap;
}
body.nv-console .dropdown-item .mdi,
body.nv-console .dropdown-item i { color: var(--nv-text-3); font-size: 16px !important; width: 18px; text-align: center; line-height: 1; }
body.nv-console .dropdown-item:hover,
body.nv-console .dropdown-item:focus { background: var(--nv-surface-3); color: var(--nv-text); }
body.nv-console .dropdown-item:active,
body.nv-console .dropdown-item.active { background: var(--nv-accent-soft); color: var(--nv-accent-text); }
body.nv-console .dropdown-item.nv-danger { color: var(--nv-danger-fg); }
body.nv-console .dropdown-item.nv-danger i { color: var(--nv-danger-fg); }
body.nv-console .dropdown-divider { border-top-color: var(--nv-border); margin: var(--nv-space-1) 0; }
body.nv-console .dropdown-header { color: var(--nv-text-3); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; padding: 6px var(--nv-space-3); }
/* The legacy theme (bootstrap.css) forces `.dropdown-menu-right { right:0 !important; left:auto !important }`.
Once Popper positions a menu (x-placement + inline translate3d from left:0) that rule shifted every
right-aligned menu left by its own width: the settings / account menus opened far from their button. */
body.nv-console .dropdown-menu.dropdown-menu-right[x-placement] { left: 0 !important; right: auto !important; }
body.nv-console .nv-topbar .profile-dropdown { width: auto; min-width: 220px; max-height: calc(100vh - var(--nv-topbar-h) - 24px); overflow-y: auto; }
.nv-menu-switch { display: flex; align-items: center; justify-content: space-between; gap: var(--nv-space-3); width: 100%; background: transparent; border: 0; text-align: left; cursor: pointer; }
.nv-menu-switch__track {
position: relative; width: 28px; height: 16px; flex: 0 0 28px;
border-radius: var(--nv-r-pill); background: var(--nv-border-strong);
transition: background-color var(--nv-dur-fast) var(--nv-ease);
}
.nv-menu-switch__track::after {
content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%;
background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
transition: transform var(--nv-dur-fast) var(--nv-ease);
}
.nv-menu-switch[aria-checked="true"] .nv-menu-switch__track { background: var(--nv-accent); }
.nv-menu-switch[aria-checked="true"] .nv-menu-switch__track::after { transform: translateX(12px); }
/* ---- Alerts ---- */
body.nv-console .alert {
display: block;
border: 1px solid var(--nv-neutral-bd);
border-radius: var(--nv-r-md);
background: var(--nv-neutral-bg);
color: var(--nv-neutral-fg);
font-size: var(--nv-text-sm);
padding: var(--nv-space-3) var(--nv-space-4);
box-shadow: none;
}
body.nv-console .alert-dismissible { padding-right: 3rem; }
body.nv-console .alert-dismissible .close { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); padding: 0; color: inherit; }
body.nv-console .alert-success { background: var(--nv-success-bg); border-color: var(--nv-success-bd); color: var(--nv-success-fg); }
body.nv-console .alert-danger { background: var(--nv-danger-bg); border-color: var(--nv-danger-bd); color: var(--nv-danger-fg); }
body.nv-console .alert-warning { background: var(--nv-warning-bg); border-color: var(--nv-warning-bd); color: var(--nv-warning-fg); }
body.nv-console .alert-info, body.nv-console .alert-primary { background: var(--nv-info-bg); border-color: var(--nv-info-bd); color: var(--nv-info-fg); }
body.nv-console .alert .alert-link, body.nv-console .alert a { color: inherit; text-decoration: underline; }
/* ---- Toasts ---- */
.nv-toast-region {
position: fixed;
top: calc(var(--nv-topbar-h, 56px) + 12px);
right: 16px;
z-index: 1090;
display: flex;
flex-direction: column;
gap: 8px;
width: min(380px, calc(100vw - 32px));
pointer-events: none;
}
.nv-toast-region > div { display: flex; flex-direction: column; gap: 8px; }
.nv-toast {
--nv-toast-accent: var(--nv-info);
pointer-events: auto;
position: relative;
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px 12px 12px 14px;
border: 1px solid var(--nv-border);
border-radius: var(--nv-r-lg);
background: var(--nv-surface);
color: var(--nv-text);
box-shadow: var(--nv-shadow-lg);
font-size: var(--nv-text-sm);
line-height: 1.45;
overflow: hidden;
animation: nv-toast-in var(--nv-dur-slow) var(--nv-ease);
}
.nv-toast::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--nv-toast-accent); }
.nv-toast--success { --nv-toast-accent: var(--nv-success); }
.nv-toast--error, .nv-toast--danger { --nv-toast-accent: var(--nv-danger); }
.nv-toast--warning { --nv-toast-accent: var(--nv-warning); }
.nv-toast--info { --nv-toast-accent: var(--nv-info); }
.nv-toast__icon { flex: 0 0 auto; font-size: 18px; line-height: 20px; color: var(--nv-toast-accent); }
.nv-toast--warning .nv-toast__icon { color: var(--nv-warning-fg); }
.nv-toast__body { flex: 1 1 auto; min-width: 0; word-wrap: break-word; white-space: pre-line; }
.nv-toast__title { display: block; font-weight: var(--nv-weight-semibold); margin-bottom: 1px; }
.nv-toast__close {
flex: 0 0 auto;
width: 24px; height: 24px; margin: -2px -2px 0 0;
display: inline-flex; align-items: center; justify-content: center;
border: 0; border-radius: var(--nv-r-sm);
background: transparent; color: var(--nv-text-3);
font-size: 18px; line-height: 1; cursor: pointer;
}
.nv-toast__close:hover { background: var(--nv-surface-3); color: var(--nv-text); }
.nv-toast.is-leaving { animation: nv-toast-out var(--nv-dur) var(--nv-ease) forwards; }
@keyframes nv-toast-in { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes nv-toast-out { to { opacity: 0; transform: translateX(12px); } }
/* jquery-toast-plugin ($.toast, used by ~240 call sites) wears the same skin */
.nv-console .jq-toast-wrap { width: min(380px, calc(100vw - 32px)); z-index: 1090 !important; }
.nv-console .jq-toast-wrap.top-right { top: calc(var(--nv-topbar-h) + 12px) !important; right: 16px !important; }
.nv-console .jq-toast-wrap .jq-toast-single {
position: relative;
margin: 0 0 8px;
padding: 12px 34px 12px 44px;
border: 1px solid var(--nv-border);
border-radius: var(--nv-r-lg);
background: var(--nv-surface) !important;
color: var(--nv-text) !important;
box-shadow: var(--nv-shadow-lg);
font-family: var(--nv-font);
font-size: var(--nv-text-sm);
line-height: 1.45;
background-image: none !important;
overflow: hidden;
}
.nv-console .jq-toast-single::before {
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--nv-info);
}
.nv-console .jq-toast-single::after {
content: "";
position: absolute;
left: 14px; top: 13px;
width: 18px; height: 18px;
background: var(--nv-info);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 15h-2v-6h2v6Zm0-8h-2V7h2v2Z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 15h-2v-6h2v6Zm0-8h-2V7h2v2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.nv-console .jq-toast-single.jq-icon-success::before, .nv-console .jq-toast-single.jq-icon-success::after { background: var(--nv-success); }
.nv-console .jq-toast-single.jq-icon-error::before, .nv-console .jq-toast-single.jq-icon-error::after { background: var(--nv-danger); }
.nv-console .jq-toast-single.jq-icon-warning::before, .nv-console .jq-toast-single.jq-icon-warning::after { background: var(--nv-warning); }
.nv-console .jq-toast-single.jq-icon-success::after {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1.5 14.5-4-4 1.4-1.4 2.6 2.6 5.6-5.6 1.4 1.4-7 7Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1.5 14.5-4-4 1.4-1.4 2.6 2.6 5.6-5.6 1.4 1.4-7 7Z'/%3E%3C/svg%3E");
}
.nv-console .jq-toast-single.jq-icon-error::after,
.nv-console .jq-toast-single.jq-icon-warning::after {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 15h-2v-2h2v2Zm0-4h-2V7h2v6Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 15h-2v-2h2v2Zm0-4h-2V7h2v6Z'/%3E%3C/svg%3E");
}
.nv-console .jq-toast-single h2.jq-toast-heading { margin: 0 0 2px; font-family: var(--nv-font); font-size: var(--nv-text-sm); font-weight: var(--nv-weight-semibold); color: var(--nv-text); }
.nv-console .jq-toast-single .close-jq-toast-single { top: 8px; right: 10px; font-size: 18px; color: var(--nv-text-3); }
.nv-console .jq-toast-single .jq-toast-loader { display: none !important; }
/* ---- Pagination ---- */
body.nv-console .pagination { gap: 4px; margin: 0; flex-wrap: wrap; }
body.nv-console .page-link,
body.nv-console .pagination-rounded .page-link {
min-width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 10px;
margin: 0 !important;
border: 1px solid var(--nv-border);
border-radius: var(--nv-r-md) !important;
background: var(--nv-surface);
color: var(--nv-text-2);
font-size: var(--nv-text-sm);
font-weight: var(--nv-weight-medium);
box-shadow: none;
}
body.nv-console .page-link:hover { background: var(--nv-surface-3); color: var(--nv-text); border-color: var(--nv-border-strong); }
body.nv-console .page-item.active .page-link { background: var(--nv-accent); border-color: var(--nv-accent); color: #fff; }
body.nv-console .page-item.disabled .page-link { background: var(--nv-surface); color: var(--nv-text-3); opacity: 0.6; }
/* ---- Progress ---- */
body.nv-console .progress { height: 6px; border-radius: var(--nv-r-pill); background: var(--nv-surface-3); box-shadow: none; overflow: hidden; }
body.nv-console .progress-sm { height: 4px; }
body.nv-console .progress-bar { border-radius: var(--nv-r-pill); background-image: none; }
body.nv-console .progress-bar.bg-success { background-color: var(--nv-success) !important; }
body.nv-console .progress-bar.bg-warning { background-color: var(--nv-warning) !important; }
body.nv-console .progress-bar.bg-danger { background-color: var(--nv-danger) !important; }
body.nv-console .progress-bar.bg-info, body.nv-console .progress-bar.bg-primary { background-color: var(--nv-accent) !important; }
/* ---- List groups, tooltips ---- */
body.nv-console .list-group-item { background: var(--nv-surface); border-color: var(--nv-border); color: var(--nv-text); }
body.nv-console .list-group-item.active { background: var(--nv-accent-soft); border-color: var(--nv-accent-soft-2); color: var(--nv-accent-text); }
body.nv-console .tooltip-inner { background: var(--nv-surface-inverse); color: var(--nv-text-inverse); border-radius: var(--nv-r-sm); font-size: var(--nv-text-xs); padding: 4px 8px; }
body.nv-console .bs-tooltip-top .arrow::before, body.nv-console .bs-tooltip-auto[x-placement^="top"] .arrow::before { border-top-color: var(--nv-surface-inverse); }
body.nv-console .bs-tooltip-bottom .arrow::before, body.nv-console .bs-tooltip-auto[x-placement^="bottom"] .arrow::before { border-bottom-color: var(--nv-surface-inverse); }
/* ---- Empty states ---- */
.nv-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--nv-space-2);
padding: var(--nv-space-10) var(--nv-space-6);
border: 1px dashed var(--nv-border-strong);
border-radius: var(--nv-r-lg);
background: var(--nv-surface);
color: var(--nv-text-3);
text-align: center;
}
.nv-empty__icon {
display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px; margin-bottom: var(--nv-space-1);
border-radius: var(--nv-r-lg);
background: var(--nv-surface-3);
color: var(--nv-text-2);
font-size: 22px;
}
.nv-empty__title { color: var(--nv-text); font-weight: var(--nv-weight-semibold); font-size: var(--nv-text-md); margin: 0; }
.nv-empty__text { margin: 0; max-width: 42ch; font-size: var(--nv-text-sm); }
/* ---- Skeleton loaders ---- */
.nv-skeleton,
body.nv-console .skeleton-loader {
position: relative;
overflow: hidden;
border-radius: var(--nv-r-sm);
background: var(--nv-surface-3) !important;
background-image: none !important;
}
.nv-skeleton::after,
body.nv-console .skeleton-loader::after {
content: "";
position: absolute;
inset: 0;
transform: translateX(-100%);
background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--nv-surface) 55%, transparent), transparent);
animation: nv-shimmer 1.4s ease-in-out infinite;
}
.nv-skeleton--line { height: 12px; margin: 6px 0; }
.nv-skeleton--title { height: 18px; width: 40%; margin: 4px 0 12px; }
@keyframes nv-shimmer { to { transform: translateX(100%); } }
/* ---- Loading overlay ---- */
body.nv-console .loading-overlay { background: var(--nv-overlay) !important; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
/* ---- Misc legacy helpers ---- */
body.nv-console .bg-soft-light,
body.nv-console .bg-soft-dark,
body.nv-console .bg-soft-secondary { background-color: var(--nv-surface-2) !important; border-color: var(--nv-border) !important; color: var(--nv-text); }
body.nv-console .bg-soft-primary { background-color: var(--nv-accent-soft) !important; }
body.nv-console .bg-soft-success { background-color: var(--nv-success-bg) !important; }
body.nv-console .bg-soft-danger { background-color: var(--nv-danger-bg) !important; }
body.nv-console .bg-soft-warning { background-color: var(--nv-warning-bg) !important; }
body.nv-console .bg-soft-info { background-color: var(--nv-info-bg) !important; }
body.nv-console .note-editor.note-frame,
body.nv-console .note-editor.card { border-color: var(--nv-border-strong); border-radius: var(--nv-r-md); background: var(--nv-surface); overflow: hidden; }
body.nv-console .note-editor .note-toolbar,
body.nv-console .note-editor .note-statusbar { background: var(--nv-surface-2) !important; border-color: var(--nv-border) !important; }
body.nv-console .note-editor .note-editing-area .note-editable { background: var(--nv-surface); color: var(--nv-text); }
body.nv-console .note-btn { background: var(--nv-surface); border-color: var(--nv-border); color: var(--nv-text-2); }
body.nv-console .bg-dark:not(.progress-bar):not(.badge) { background-color: var(--nv-surface-2) !important; color: var(--nv-text) !important; }
body.nv-console .card-header.bg-dark .text-white,
body.nv-console .card-header.bg-dark.text-white { color: var(--nv-text) !important; }
body.nv-console .table-dark, body.nv-console .thead-dark th { background: var(--nv-surface-2) !important; color: var(--nv-text-3) !important; border-color: var(--nv-border) !important; }
body.nv-console .thead-light th { background: var(--nv-surface-2); color: var(--nv-text-3); border-color: var(--nv-border); }
body.nv-console .avatar-title { color: inherit; }
body.nv-console .waves-ripple { display: none !important; }
body.nv-console .apexcharts-text, body.nv-console .apexcharts-legend-text { fill: var(--nv-text-3) !important; color: var(--nv-text-2) !important; }
body.nv-console .apexcharts-gridline, body.nv-console .apexcharts-xaxis line, body.nv-console .apexcharts-yaxis line { stroke: var(--nv-border) !important; }
body.nv-console .apexcharts-tooltip { background: var(--nv-surface) !important; border: 1px solid var(--nv-border) !important; color: var(--nv-text) !important; box-shadow: var(--nv-shadow-md) !important; }
body.nv-console .apexcharts-tooltip-title { background: var(--nv-surface-2) !important; border-color: var(--nv-border) !important; }
body.nv-console .apexcharts-menu { background: var(--nv-surface) !important; border-color: var(--nv-border) !important; }
/* ==========================================================================
6. Screens
========================================================================== */
/* ---- Dashboard KPI tiles (legacy .card-box.bg-* summary cards) ---- */
body.nv-console .dashboard-summary-cards {
flex-wrap: wrap !important;
overflow: visible;
margin: 0 -8px;
padding: 0;
}
body.nv-console .dashboard-summary-cards > [class*="col-"] { padding-left: 8px; padding-right: 8px; min-width: 0; }
@media (min-width: 1200px) {
body.nv-console .dashboard-summary-cards > .col-xl-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
}
body.nv-console .dashboard-summary-cards > .w-100 { flex: 0 0 100% !important; max-width: 100% !important; min-width: 0; }
@media (min-width: 768px) and (max-width: 1199.98px) {
body.nv-console .dashboard-summary-cards > .col-xl-2 { flex: 0 0 33.333%; max-width: 33.333%; }
}
@media (max-width: 767.98px) {
body.nv-console .dashboard-summary-cards > .col-xl-2 { flex: 0 0 50%; max-width: 50%; }
}
body.nv-console .dashboard-summary-cards a { text-decoration: none; display: block; color: inherit; }
body.nv-console .dashboard-summary-cards > .w-100 { padding-left: 8px; padding-right: 8px; }
body.nv-console .dashboard-summary-cards > .w-100 > .row { margin-left: -8px; margin-right: -8px; }
body.nv-console .dashboard-summary-cards > .w-100 > .row > .col-12 { padding-left: 0; padding-right: 0; }
body.nv-console .dashboard-summary-cards > .w-100 > .row > .col-12 > .row { margin-left: 0; margin-right: 0; }
body.nv-console .dashboard-summary-cards > .w-100 .row > .col-xl-3 { padding-left: 8px; padding-right: 8px; }
body.nv-console :is(.dashboard-summary-cards, .nv-kpi-row > .col-xl-3) .card-box {
--nv-kpi: var(--nv-accent);
position: relative;
margin-bottom: 16px;
padding: var(--nv-space-4);
min-height: 104px;
background: var(--nv-surface) !important;
border: 1px solid var(--nv-border);
box-shadow: var(--nv-shadow-xs);
transition: border-color var(--nv-dur-fast) var(--nv-ease), box-shadow var(--nv-dur-fast) var(--nv-ease);
}
body.nv-console :is(.dashboard-summary-cards, .nv-kpi-row > .col-xl-3) a:hover .card-box { border-color: var(--nv-border-strong); box-shadow: var(--nv-shadow-sm); }
body.nv-console :is(.dashboard-summary-cards, .nv-kpi-row > .col-xl-3) .card-box > .row { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: flex-start; margin: 0; flex-wrap: nowrap; }
body.nv-console :is(.dashboard-summary-cards, .nv-kpi-row > .col-xl-3) .card-box > .row > [class*="col-"] { flex: 0 1 auto; max-width: none; width: auto; padding: 0; }
body.nv-console :is(.dashboard-summary-cards, .nv-kpi-row > .col-xl-3) .card-box > .row > .col-6:last-child { flex: 1 1 auto; min-width: 0; }
body.nv-console :is(.dashboard-summary-cards, .nv-kpi-row > .col-xl-3) .card-box .text-right { text-align: left !important; display: flex; flex-direction: column-reverse; gap: 6px; }
body.nv-console :is(.dashboard-summary-cards, .nv-kpi-row > .col-xl-3) .card-box h3 {
margin: 0 !important;
color: var(--nv-text) !important;
font-size: var(--nv-text-3xl);
font-weight: var(--nv-weight-semibold);
letter-spacing: -0.02em;
line-height: 1.1;
font-variant-numeric: tabular-nums;
}
body.nv-console :is(.dashboard-summary-cards, .nv-kpi-row > .col-xl-3) .card-box h3 small { color: var(--nv-text-3); font-size: var(--nv-text-sm); font-weight: var(--nv-weight-medium); letter-spacing: 0; }
body.nv-console :is(.dashboard-summary-cards, .nv-kpi-row > .col-xl-3) .card-box p {
margin: 0 !important;
color: var(--nv-text-3) !important;
font-size: var(--nv-text-xs);
font-weight: var(--nv-weight-medium);
letter-spacing: 0.02em;
text-transform: uppercase;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
body.nv-console :is(.dashboard-summary-cards, .nv-kpi-row > .col-xl-3) .card-box .avatar-md {
width: 32px; height: 32px;
display: flex; align-items: center; justify-content: center;
border-radius: var(--nv-r-md) !important;
background: color-mix(in srgb, var(--nv-kpi) 12%, transparent) !important;
}
body.nv-console :is(.dashboard-summary-cards, .nv-kpi-row > .col-xl-3) .card-box .avatar-title { font-size: 16px !important; color: var(--nv-kpi) !important; background: transparent !important; }
body.nv-console .nv-kpi-row .card-box.bg-info { --nv-kpi: var(--nv-info); }
body.nv-console .nv-kpi-row .card-box.bg-success { --nv-kpi: var(--nv-success); }
body.nv-console .nv-kpi-row .card-box.bg-purple,
body.nv-console .nv-kpi-row .card-box.bg-pink { --nv-kpi: var(--nv-violet); }
body.nv-console .nv-kpi-row .card-box.bg-warning { --nv-kpi: var(--nv-warning); }
body.nv-console .nv-kpi-row .card-box.bg-danger { --nv-kpi: var(--nv-danger); }
body.nv-console .nv-kpi-row .card-box.bg-primary { --nv-kpi: var(--nv-accent); }
body.nv-console :is(.dashboard-summary-cards, .nv-kpi-row > .col-xl-3) .card-box.active-connections { --nv-kpi: var(--nv-accent); }
body.nv-console :is(.dashboard-summary-cards, .nv-kpi-row > .col-xl-3) .card-box.online-users { --nv-kpi: var(--nv-success); }
body.nv-console :is(.dashboard-summary-cards, .nv-kpi-row > .col-xl-3) .card-box.input-flow { --nv-kpi: var(--nv-violet); }
body.nv-console :is(.dashboard-summary-cards, .nv-kpi-row > .col-xl-3) .card-box.output-flow { --nv-kpi: var(--nv-info); }
body.nv-console :is(.dashboard-summary-cards, .nv-kpi-row > .col-xl-3) .card-box.active-streams { --nv-kpi: var(--nv-success); }
body.nv-console :is(.dashboard-summary-cards, .nv-kpi-row > .col-xl-3) .card-box.offline-streams { --nv-kpi: var(--nv-danger); }
body.nv-console :is(.dashboard-summary-cards, .nv-kpi-row > .col-xl-3) .card-box::after {
content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 2px;
border-radius: 2px 2px 0 0; background: var(--nv-kpi); opacity: 0.55;
}
/* ---- Dashboard server cards ---- */
body.nv-console .server-card {
border: 1px solid var(--nv-border) !important;
box-shadow: var(--nv-shadow-xs) !important;
height: calc(100% - 16px);
margin-bottom: 16px;
}
body.nv-console .server-card.border-danger { border-color: var(--nv-danger-bd) !important; }
body.nv-console .server-card > .card-header {
background: var(--nv-surface) !important;
color: var(--nv-text) !important;
border-bottom: 1px solid var(--nv-border);
padding: var(--nv-space-3) var(--nv-space-4);
gap: var(--nv-space-2);
}
body.nv-console .server-card > .card-header .card-title { color: var(--nv-text) !important; font-size: var(--nv-text-md); display: flex; align-items: center; gap: var(--nv-space-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.nv-console .server-card > .card-header .btn-outline-light {
color: var(--nv-text-2); border-color: var(--nv-border); background: var(--nv-surface); min-height: 28px; min-width: 28px; padding: 0 6px; box-shadow: none;
}
body.nv-console .server-card > .card-header .btn-outline-light:hover { background: var(--nv-surface-3); color: var(--nv-text); }
body.nv-console .server-card .card-body { padding: var(--nv-space-4); }
body.nv-console .server-card .row.text-center { margin-left: 0; margin-right: 0; text-align: left !important; }
body.nv-console .server-card .row.text-center > [class*="col-"] { padding: 0 4px; }
body.nv-console .server-card small.text-muted { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: var(--nv-weight-medium); }
body.nv-console .server-card strong { color: var(--nv-text); font-variant-numeric: tabular-nums; font-weight: var(--nv-weight-semibold); }
body.nv-console .server-card strong.text-success { color: var(--nv-success-fg) !important; }
body.nv-console .server-card strong.text-danger { color: var(--nv-danger-fg) !important; }
body.nv-console .server-card .server-usage-label { color: var(--nv-text) !important; font-weight: var(--nv-weight-semibold); font-variant-numeric: tabular-nums; }
body.nv-console .server-card .row.text-center + .row.text-center { padding-top: var(--nv-space-3); border-top: 1px solid var(--nv-border); }
body.nv-console .analytics-section-header { border-bottom: 0 !important; margin-bottom: var(--nv-space-3) !important; padding-bottom: 0 !important; }
body.nv-console .analytics-card { background: var(--nv-surface); border: 1px solid var(--nv-border) !important; box-shadow: none !important; transform: none !important; }
body.nv-console .analytics-card h5 { color: var(--nv-text); font-size: var(--nv-text-md); }
body.nv-console .chart-container,
body.nv-console .chart-container-line { background: var(--nv-surface-2); border: 1px solid var(--nv-border); border-radius: var(--nv-r-md); }
body.nv-console .metric-item:hover { background: var(--nv-surface-2); }
body.nv-console .server-card:hover { transform: none; }
body.nv-console .metric-badge {
background: var(--nv-surface-2) !important;
border: 1px solid var(--nv-border) !important;
border-radius: var(--nv-r-md) !important;
color: var(--nv-text) !important;
box-shadow: none !important;
transform: none !important;
}
body.nv-console .metric-badge.badge-success { background: var(--nv-success-bg) !important; border-color: var(--nv-success-bd) !important; color: var(--nv-success-fg) !important; }
body.nv-console .metric-badge.badge-warning { background: var(--nv-warning-bg) !important; border-color: var(--nv-warning-bd) !important; color: var(--nv-warning-fg) !important; }
body.nv-console .metric-badge.badge-danger { background: var(--nv-danger-bg) !important; border-color: var(--nv-danger-bd) !important; color: var(--nv-danger-fg) !important; }
body.nv-console .metric-badge.badge-info { background: var(--nv-info-bg) !important; border-color: var(--nv-info-bd) !important; color: var(--nv-info-fg) !important; }
body.nv-console .metric-badge * { color: inherit; }
body.nv-console .top-content-card { background: var(--nv-surface); border-color: var(--nv-border); }
/* ==========================================================================
Login (admin/login.php, body.nv-login)
========================================================================== */
body.authentication-bg.authentication-bg-pattern.nv-login.nv-console {
/* login-modern.css reads these; map them onto the console tokens so both themes follow */
--nv-login-ink: var(--nv-text);
--nv-login-ink-muted: var(--nv-text-3);
--nv-login-surface: var(--nv-surface);
--nv-login-surface-muted: var(--nv-surface-2);
--nv-login-border: var(--nv-border);
--nv-login-page-from: var(--nv-bg);
--nv-login-page-to: var(--nv-bg);
--nv-login-brand-from: #0b0d12;
--nv-login-brand-to: #1b1942;
--nv-login-field-bg: var(--nv-surface);
--nv-login-field-border: var(--nv-border-strong);
--nv-login-field-text: var(--nv-text);
--nv-login-field-placeholder: var(--nv-form-control-placeholder);
--nv-login-label: var(--nv-text-2);
--nv-login-title: var(--nv-text);
--nv-login-subtitle: var(--nv-text-3);
--nv-login-card-bg: var(--nv-surface);
--nv-login-card-border: var(--nv-border);
--nv-login-card-shadow: var(--nv-shadow-lg);
background-color: var(--nv-bg);
background-image:
radial-gradient(900px 480px at 15% -10%, var(--nv-accent-soft-2), transparent 60%),
radial-gradient(700px 420px at 100% 0%, var(--nv-accent-soft), transparent 55%);
color: var(--nv-text);
}
body.nv-login.nv-console .nv-login-brand {
background:
radial-gradient(900px 500px at 0% 110%, rgba(99, 102, 241, 0.38), transparent 60%),
radial-gradient(700px 420px at 110% -10%, rgba(139, 92, 246, 0.3), transparent 60%),
linear-gradient(160deg, #0b0d12 0%, #17153a 100%);
}
body.nv-login.nv-console .nv-login-brand__logo:not([src]),
body.nv-login.nv-console .nv-login-mobile-brand__logo:not([src]) { display: none; }
body.nv-login.nv-console .nv-login-mobile-brand__logo { background: #0b0d12; border-radius: var(--nv-r-md); padding: 6px 10px; }
body.nv-login.nv-console .form-control,
body.nv-login.nv-console .form-login {
min-height: 42px;
border-radius: var(--nv-r-md);
background: var(--nv-surface);
border-color: var(--nv-border-strong);
color: var(--nv-text);
}
body.nv-login.nv-console .form-control:focus,
body.nv-login.nv-console .form-login:focus { border-color: var(--nv-accent); box-shadow: 0 0 0 3px var(--nv-accent-soft-2); }
body.nv-login.nv-console .btn-primary,
body.nv-login.nv-console .nv-login-actions .btn {
background: var(--nv-accent);
border-color: var(--nv-accent);
color: #fff;
border-radius: var(--nv-r-md);
min-height: 42px;
font-weight: var(--nv-weight-semibold);
box-shadow: var(--nv-shadow-xs);
background-image: none;
}
body.nv-login.nv-console .btn-primary:hover,
body.nv-login.nv-console .nv-login-actions .btn:hover { background: var(--nv-accent-hover); border-color: var(--nv-accent-hover); }
body.nv-login.nv-console .alert-danger { background: var(--nv-danger-bg); border-color: var(--nv-danger-bd); color: var(--nv-danger-fg); }
body.nv-login.nv-console .footer { margin-left: 0; border-top: 0; text-align: center; }
body.nv-login.nv-console .nv-login-theme {
position: fixed; top: 16px; right: 16px; z-index: 10;
width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--nv-border); border-radius: var(--nv-r-md);
background: var(--nv-surface); color: var(--nv-text-2); font-size: 18px; cursor: pointer;
box-shadow: var(--nv-shadow-xs);
}
body.nv-login.nv-console .nv-login-theme:hover { color: var(--nv-text); background: var(--nv-surface-3); }
/* --------------------------------------------------------------------------
Dashboard: operations block (Views/dashboard/partials/ops.php)
-------------------------------------------------------------------------- */
.nv-ops { margin-bottom: var(--nv-space-6); }
.nv-ops-slot .nv-ops { margin-top: var(--nv-space-2); }
.nv-ops__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--nv-space-4); flex-wrap: wrap; margin-bottom: var(--nv-space-4); }
.nv-ops__title { font-size: var(--nv-text-2xl); font-weight: var(--nv-weight-semibold); margin: 0; color: var(--nv-text); letter-spacing: -0.01em; }
.nv-ops__meta { display: flex; align-items: center; gap: var(--nv-space-2); margin: 2px 0 0; color: var(--nv-text-3); font-size: var(--nv-text-sm); }
.nv-ops__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--nv-neutral); flex: none; }
.nv-ops__dot.is-live { background: var(--nv-success); box-shadow: 0 0 0 3px var(--nv-success-bg); animation: nv-blink 2.4s ease-in-out infinite; }
.nv-ops__dot.is-error { background: var(--nv-danger); }
.nv-ops__transport { display: inline-flex; align-items: center; padding: 0 6px; border-radius: 999px; font-size: 11px; line-height: 18px; font-weight: 600; letter-spacing: .02em; border: 1px solid var(--nv-neutral-bd); background: var(--nv-neutral-bg); color: var(--nv-neutral-fg); cursor: default; }
.nv-ops__transport.is-live { border-color: var(--nv-success-bd); background: var(--nv-success-bg); color: var(--nv-success-fg); }
.nv-ops__tools { display: flex; gap: var(--nv-space-2); align-items: center; }
.nv-ops__tools .btn { display: inline-flex; align-items: center; gap: 6px; }
.nv-ops__menu { min-width: 220px; }
.nv-ops__check { display: flex; align-items: center; gap: var(--nv-space-2); cursor: pointer; margin: 0; }
.nv-ops__check input { accent-color: var(--nv-accent); }
.mdi-spin::before { animation: nv-spin 0.9s linear infinite; display: inline-block; }
.nv-ops__attention { margin-bottom: var(--nv-space-4); }
.nv-ops__alerts { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--nv-space-2); grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.nv-ops-alert {
--a-fg: var(--nv-info-fg); --a-bg: var(--nv-info-bg); --a-bd: var(--nv-info-bd);
display: flex; align-items: flex-start; gap: var(--nv-space-3);
padding: var(--nv-space-3) var(--nv-space-4); border: 1px solid var(--a-bd); border-left-width: 3px;
border-radius: var(--nv-r-md); background: var(--nv-surface); min-width: 0;
}
.nv-ops-alert > .mdi { font-size: 20px; line-height: 1.1; color: var(--a-fg); flex: none; }
.nv-ops-alert__body { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.nv-ops-alert__body strong { color: var(--nv-text); font-weight: var(--nv-weight-semibold); font-size: var(--nv-text-base); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nv-ops-alert__body span { color: var(--nv-text-2); font-size: var(--nv-text-sm); }
.nv-ops-alert__go { flex: none; align-self: center; font-size: var(--nv-text-sm); font-weight: var(--nv-weight-medium); color: var(--nv-accent-text); white-space: nowrap; }
.nv-ops-alert--danger { --a-fg: var(--nv-danger-fg); --a-bg: var(--nv-danger-bg); --a-bd: var(--nv-danger-bd); background: var(--nv-danger-bg); }
.nv-ops-alert--warning { --a-fg: var(--nv-warning-fg); --a-bg: var(--nv-warning-bg); --a-bd: var(--nv-warning-bd); }
.nv-ops-alert--ok { --a-fg: var(--nv-success-fg); --a-bd: var(--nv-success-bd); background: var(--nv-success-bg); }
.nv-ops-alert--skeleton { border-color: var(--nv-border); }
.nv-ops-alert--skeleton .skeleton-line { width: 40%; }
.nv-ops__more { padding-left: 0; margin-top: var(--nv-space-1); }
.nv-ops__kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--nv-space-3); margin-bottom: var(--nv-space-4); }
.nv-ops-kpi {
display: flex; flex-direction: column; gap: 2px; padding: var(--nv-space-3) var(--nv-space-4);
background: var(--nv-surface); border: 1px solid var(--nv-border); border-radius: var(--nv-r-lg);
color: inherit; text-decoration: none; min-width: 0;
transition: border-color var(--nv-dur-fast) var(--nv-ease), box-shadow var(--nv-dur-fast) var(--nv-ease);
}
.nv-ops-kpi:hover { border-color: var(--nv-border-strong); box-shadow: var(--nv-shadow-sm); text-decoration: none; color: inherit; }
.nv-ops-kpi__label { color: var(--nv-text-3); font-size: var(--nv-text-xs); font-weight: var(--nv-weight-medium); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nv-ops-kpi__value { font-size: var(--nv-text-2xl); font-weight: var(--nv-weight-semibold); color: var(--nv-text); font-variant-numeric: tabular-nums; line-height: 1.2; }
.nv-ops-kpi__value--accent { color: var(--nv-accent-text); }
.nv-ops-kpi__value--warn { color: var(--nv-warning-fg); }
.nv-ops-kpi__sub { color: var(--nv-text-3); font-size: var(--nv-text-xs); font-variant-numeric: tabular-nums; }
.nv-ops__grid { display: grid; gap: var(--nv-space-4); margin-bottom: var(--nv-space-4); }
.nv-ops__grid--2 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.nv-ops__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nv-ops__grid > .card { margin-bottom: 0; }
.nv-ops-card { display: flex; flex-direction: column; min-width: 0; }
.nv-ops-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--nv-space-2); padding: var(--nv-space-3) var(--nv-space-4); border-bottom: 1px solid var(--nv-border); }
.nv-ops-card__head h3 { font-size: var(--nv-text-md); font-weight: var(--nv-weight-semibold); margin: 0; display: flex; align-items: center; gap: var(--nv-space-2); color: var(--nv-text); }
.nv-ops-card__head h3 .mdi { color: var(--nv-text-3); font-size: 18px; }
.nv-ops-card__link { font-size: var(--nv-text-sm); color: var(--nv-accent-text); white-space: nowrap; }
.nv-ops-card__body { padding: var(--nv-space-3) var(--nv-space-4); flex: 1 1 auto; min-width: 0; }
.nv-ops-empty { color: var(--nv-text-3); margin: var(--nv-space-2) 0; display: flex; align-items: center; gap: var(--nv-space-2); }
.nv-ops-empty .mdi { color: var(--nv-success-fg); font-size: 18px; }
.nv-ops-badge {
display: inline-flex; align-items: center; padding: 1px 8px; border-radius: var(--nv-r-pill);
font-size: var(--nv-text-xs); font-weight: var(--nv-weight-semibold); font-variant-numeric: tabular-nums;
background: var(--nv-neutral-bg); color: var(--nv-neutral-fg); border: 1px solid var(--nv-neutral-bd);
}
.nv-ops-badge--danger { background: var(--nv-danger-bg); color: var(--nv-danger-fg); border-color: var(--nv-danger-bd); }
.nv-ops-badge--warn { background: var(--nv-warning-bg); color: var(--nv-warning-fg); border-color: var(--nv-warning-bd); }
.nv-ops-table th { font-size: var(--nv-text-xs); color: var(--nv-text-3); font-weight: var(--nv-weight-medium); text-transform: uppercase; letter-spacing: 0.04em; border-top: 0; }
.nv-ops-table td { vertical-align: middle; }
.nv-ops-table__name { font-weight: var(--nv-weight-medium); }
.nv-ops-table__err span { display: inline-block; max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; color: var(--nv-danger-fg); font-family: var(--nv-font-mono); font-size: var(--nv-text-xs); }
.nv-ops-table .btn-xs { padding: 2px 7px; font-size: 14px; line-height: 1.4; }
.nv-ops-iconbtn { background: var(--nv-surface); color: var(--nv-text-2); border: 1px solid var(--nv-border-strong); border-radius: var(--nv-r-sm); }
.nv-ops-iconbtn:hover:not(:disabled) { color: var(--nv-text); background: var(--nv-surface-3); }
.nv-ops-iconbtn:disabled { opacity: 0.55; }
.nv-ops-bars { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--nv-space-2); }
.nv-ops-bars__row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(60px, 1fr) auto; align-items: center; gap: var(--nv-space-3); }
.nv-ops-bars__label { display: flex; flex-direction: column; min-width: 0; }
.nv-ops-bars__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--nv-text); font-size: var(--nv-text-sm); }
.nv-ops-bars__label small { font-size: var(--nv-text-xs); }
.nv-ops-bars__track { height: 6px; border-radius: var(--nv-r-pill); background: var(--nv-surface-3); overflow: hidden; }
.nv-ops-bars__fill { display: block; height: 100%; border-radius: inherit; background: var(--nv-accent); transition: width var(--nv-dur-slow) var(--nv-ease); }
.nv-ops-bars__fill--violet { background: var(--nv-violet); }
.nv-ops-bars__fill--info { background: var(--nv-info); }
.nv-ops-bars__value { font-variant-numeric: tabular-nums; font-size: var(--nv-text-sm); color: var(--nv-text-2); min-width: 3ch; text-align: right; }
.nv-ops-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--nv-space-2); margin-bottom: var(--nv-space-3); }
.nv-ops-mini__item { display: flex; flex-direction: column; padding: var(--nv-space-2) var(--nv-space-3); border-radius: var(--nv-r-md); background: var(--nv-surface-2); border: 1px solid var(--nv-border); color: inherit; min-width: 0; }
a.nv-ops-mini__item[href]:hover { border-color: var(--nv-border-strong); text-decoration: none; color: inherit; }
.nv-ops-mini__value { font-size: var(--nv-text-xl); font-weight: var(--nv-weight-semibold); font-variant-numeric: tabular-nums; color: var(--nv-text); }
.nv-ops-mini__label { font-size: var(--nv-text-xs); color: var(--nv-text-3); }
.nv-ops-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.nv-ops-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--nv-space-2); font-size: var(--nv-text-sm); }
.nv-ops-list li a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Reseller tools (admin/Views/reseller/partials/tools.php, reseller_credits) */
.nv-rt__actions { flex-wrap: wrap; justify-content: flex-end; }
.nv-rt-kpi { text-align: left; font: inherit; cursor: pointer; width: 100%; }
.nv-rt-kpi:focus-visible, .nv-rt-tab:focus-visible { outline: none; box-shadow: var(--nv-focus); }
.nv-rt-lines__head { flex-wrap: wrap; }
.nv-rt-tabs { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; background: var(--nv-surface-3); border-radius: var(--nv-r-md); }
.nv-rt-tab { border: 0; background: transparent; color: var(--nv-text-2); font-size: var(--nv-text-sm); font-weight: var(--nv-weight-medium); padding: 4px 10px; border-radius: var(--nv-r-sm); cursor: pointer; white-space: nowrap; }
.nv-rt-tab:hover { color: var(--nv-text); }
.nv-rt-tab.is-active { background: var(--nv-surface); color: var(--nv-text); box-shadow: var(--nv-shadow-xs); }
.nv-rt-filters { display: flex; flex-wrap: wrap; gap: var(--nv-space-2); align-items: flex-end; margin-bottom: var(--nv-space-3); }
.nv-rt-search { position: relative; flex: 1 1 220px; min-width: 0; }
.nv-rt-search .mdi { z-index: 1; position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: var(--nv-text-3); pointer-events: none; }
.nv-rt .nv-rt-search input.form-control { padding-left: 30px; }
.nv-rt-days, .nv-rt-owner { width: auto; flex: 0 0 auto; }
.nv-rt-filter { display: flex; flex-direction: column; gap: 2px; margin: 0; font-size: var(--nv-text-xs); color: var(--nv-text-3); }
.nv-rt-bulk { display: flex; align-items: center; flex-wrap: wrap; gap: var(--nv-space-2); padding: var(--nv-space-2) var(--nv-space-3); margin-bottom: var(--nv-space-3); border: 1px solid var(--nv-accent-soft-2); background: var(--nv-accent-soft); border-radius: var(--nv-r-md); font-size: var(--nv-text-sm); color: var(--nv-text); }
.nv-rt-table .nv-rt-check { width: 28px; }
.nv-rt-table .nv-rt-check input { accent-color: var(--nv-accent); }
.nv-rt-sub { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nv-rt-badge--ok { background: var(--nv-success-bg); color: var(--nv-success-fg); border-color: var(--nv-success-bd); }
.nv-rt-pager { display: flex; align-items: center; justify-content: space-between; gap: var(--nv-space-2); margin-top: var(--nv-space-3); font-size: var(--nv-text-sm); }
.nv-rt-pager .btn + .btn { margin-left: 4px; }
.nv-rt-moves { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--nv-space-2); }
.nv-rt-moves li { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: var(--nv-space-2); align-items: baseline; font-size: var(--nv-text-sm); }
.nv-rt-moves__body { display: flex; flex-direction: column; min-width: 0; }
.nv-rt-moves__body strong { font-weight: var(--nv-weight-medium); color: var(--nv-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nv-rt-moves__body small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nv-rt-moves__amount, .nv-rt-amount { font-variant-numeric: tabular-nums; font-weight: var(--nv-weight-semibold); text-align: right; }
.nv-rt-moves__date { white-space: nowrap; font-variant-numeric: tabular-nums; }
.nv-rt .is-plus, .nv-rt .nv-ops-table td.is-plus { color: var(--nv-success-fg); }
.nv-rt .is-minus, .nv-rt .nv-ops-table td.is-minus { color: var(--nv-danger-fg); }
.nv-rt-desc span { display: inline-block; max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.nv-rt-skeleton { height: 12px; width: 50%; border-radius: var(--nv-r-pill); background: var(--nv-surface-3); margin: var(--nv-space-3) 0; }
.nv-rt-modal { position: fixed; inset: 0; z-index: 1060; display: flex; align-items: flex-start; justify-content: center; padding: 8vh var(--nv-space-4) var(--nv-space-4); }
.nv-rt-modal__backdrop { position: absolute; inset: 0; background: var(--nv-overlay); }
.nv-rt-modal__panel { position: relative; width: 100%; max-width: 560px; max-height: 84vh; display: flex; flex-direction: column; background: var(--nv-surface); color: var(--nv-text); border: 1px solid var(--nv-border); border-radius: var(--nv-r-lg); box-shadow: var(--nv-shadow-overlay); }
.nv-rt-modal__head, .nv-rt-modal__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--nv-space-2); padding: var(--nv-space-3) var(--nv-space-4); }
.nv-rt-modal__head { border-bottom: 1px solid var(--nv-border); }
.nv-rt-modal__head h3 { font-size: var(--nv-text-lg); font-weight: var(--nv-weight-semibold); margin: 0; }
.nv-rt-modal__head .close { color: var(--nv-text-2); }
.nv-rt-modal__foot { border-top: 1px solid var(--nv-border); justify-content: flex-end; }
.nv-rt-modal__body { padding: var(--nv-space-4); overflow-y: auto; }
.nv-rt-cost { display: grid; grid-template-columns: 1fr auto; gap: 4px var(--nv-space-4); margin: 0 0 var(--nv-space-3); font-size: var(--nv-text-base); }
.nv-rt-cost dt { font-weight: normal; color: var(--nv-text-2); }
.nv-rt-cost dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.nv-rt-cost .nv-rt-cost__total { font-weight: var(--nv-weight-semibold); color: var(--nv-text); font-size: var(--nv-text-md); }
.nv-rt-renew-lines { list-style: none; padding: var(--nv-space-2) var(--nv-space-3); margin: 0 0 var(--nv-space-3); background: var(--nv-surface-2); border: 1px solid var(--nv-border); border-radius: var(--nv-r-md); font-size: var(--nv-text-sm); display: grid; gap: 2px; }
.nv-rt-fields { display: grid; gap: var(--nv-space-2); }
.nv-rt-field { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: var(--nv-space-2); align-items: center; }
.nv-rt-field__label { font-size: var(--nv-text-xs); color: var(--nv-text-3); text-transform: uppercase; letter-spacing: 0.04em; }
.nv-rt-field__value { font-family: var(--nv-font-mono); font-size: var(--nv-text-sm); color: var(--nv-text); background: var(--nv-surface-2); border: 1px solid var(--nv-border); border-radius: var(--nv-r-sm); padding: 3px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nv-rt-client-text { font-family: var(--nv-font-mono); font-size: var(--nv-text-sm); }
.nv-log-green { color: var(--nv-success-fg); }
.nv-log-red { color: var(--nv-danger-fg); }
.nv-log-orange { color: var(--nv-warning-fg); }
.nv-log-blue { color: var(--nv-info-fg); }
@media (max-width: 575.98px) {
.nv-rt-field { grid-template-columns: minmax(0, 1fr) auto; }
.nv-rt-field__label { grid-column: 1 / -1; }
.nv-rt-moves li { grid-template-columns: 64px minmax(0, 1fr); }
.nv-rt-moves__date { grid-column: 2; }
}
/* Extra lines on the classic server cards */
.nv-srv-extra { margin-top: var(--nv-space-3); padding-top: var(--nv-space-3); border-top: 1px dashed var(--nv-border); display: grid; gap: 6px; }
.nv-srv-extra__row { display: flex; align-items: center; gap: var(--nv-space-2); flex-wrap: wrap; font-size: var(--nv-text-xs); min-width: 0; }
.nv-srv-extra__row--bar { flex-wrap: nowrap; }
.nv-srv-extra__row--bar > small:first-child { flex: 0 0 auto; min-width: 72px; }
.nv-srv-extra__row .progress { min-width: 60px; flex: 1 1 auto; width: auto; }
.nv-srv-extra__badge { padding: 1px 8px; border-radius: var(--nv-r-pill); font-weight: var(--nv-weight-semibold); background: var(--nv-neutral-bg); color: var(--nv-neutral-fg); border: 1px solid var(--nv-neutral-bd); }
.nv-srv-extra__badge.is-distro { background: var(--nv-success-bg); color: var(--nv-success-fg); border-color: var(--nv-success-bd); }
.nv-srv-extra__badge.is-classic { background: var(--nv-warning-bg); color: var(--nv-warning-fg); border-color: var(--nv-warning-bd); }
.nv-srv-extra__badge.is-main { background: var(--nv-accent-soft); color: var(--nv-accent-text); border-color: var(--nv-accent-soft-2); }
.nv-srv-extra__mono { font-family: var(--nv-font-mono); color: var(--nv-text-2); }
.nv-srv-extra__seen { margin-left: auto; color: var(--nv-text-3); }
.nv-srv-extra__spark { flex: 1 1 auto; height: 24px; min-width: 60px; color: var(--nv-accent); }
@media (max-width: 1399.98px) {
.nv-ops__kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1199.98px) {
.nv-ops__grid--2, .nv-ops__grid--3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575.98px) {
.nv-ops__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nv-ops__alerts { grid-template-columns: minmax(0, 1fr); }
.nv-ops-table__err span { max-width: 140px; }
.nv-ops-mini { grid-template-columns: minmax(0, 1fr); }
}
/* Support tickets (reseller + admin conversation, TicketController) */
.nv-tk__title { overflow-wrap: anywhere; }
.nv-tk .nv-ops-alert { margin-bottom: var(--nv-space-4); }
.nv-tk > .card { margin-bottom: var(--nv-space-4); }
.nv-tk-status { display: inline-flex; align-items: center; padding: 0 8px; border-radius: var(--nv-r-pill); font-size: var(--nv-text-xs); line-height: 20px; font-weight: var(--nv-weight-semibold); border: 1px solid var(--nv-neutral-bd); background: var(--nv-neutral-bg); color: var(--nv-neutral-fg); }
.nv-tk-status.is-open { border-color: var(--nv-success-bd); background: var(--nv-success-bg); color: var(--nv-success-fg); }
.nv-tk-thread { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--nv-space-3); }
.nv-tk-msg { max-width: min(760px, 92%); padding: var(--nv-space-3) var(--nv-space-4); border: 1px solid var(--nv-border); border-radius: var(--nv-r-lg); background: var(--nv-surface-2); }
.nv-tk-msg.is-admin { justify-self: end; background: var(--nv-accent-soft); border-color: var(--nv-accent-soft-2); }
.nv-tk-msg__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--nv-space-3); margin-bottom: var(--nv-space-1); font-size: var(--nv-text-sm); }
.nv-tk-msg__head strong { color: var(--nv-text); font-weight: var(--nv-weight-semibold); }
.nv-tk-msg__head time { color: var(--nv-text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nv-tk-msg__body { color: var(--nv-text); overflow-wrap: anywhere; }
.nv-tk-reply__foot { display: flex; justify-content: flex-end; gap: var(--nv-space-2); margin-top: var(--nv-space-3); }
.nv-tk-reply__foot .btn { display: inline-flex; align-items: center; gap: 6px; }
.nv-tk-row.is-unread .nv-ops-table__name a { font-weight: var(--nv-weight-semibold); }
.nv-tk-unread { margin-left: var(--nv-space-2); }
.nv-tk-table .nv-ops-table__name a { overflow-wrap: anywhere; }
@media (max-width: 575.98px) {
.nv-tk-msg { max-width: 100%; }
}
/* ==========================================================================
7. Motion / preferences
========================================================================== */
@keyframes nv-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes nv-pop-in { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes nv-spin { to { transform: rotate(360deg); } }
/* modern-ui-enhancements.js staggers a fade-in on every card: keep it subtle */
body.nv-console .fade-in { animation: nv-fade-in var(--nv-dur) var(--nv-ease) both; }
body.nv-console .card-hover:hover { transform: none; box-shadow: inherit; }
@media (prefers-reduced-motion: reduce) {
.nv-console *, .nv-console *::before, .nv-console *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
@media print {
body.nv-console #wrapper .left-side-menu,
body.nv-console #wrapper .navbar-custom,
.nv-toast-region { display: none !important; }
body.nv-console.menu-layout-sidebar #wrapper > .content-page,
body.nv-console.menu-layout-sidebar #wrapper > .wrapper { margin: 0 !important; padding: 0 !important; max-width: none; }
}