/* NovaNAS v4 Pro · functional frontend skin · dark Roboto · 2026-10 */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700;800&display=swap');

:root,
:root[data-theme],
html[data-theme],
body {
  color-scheme: dark !important;
  --bg: #0b1020 !important;
  --background: #0b1020 !important;
  --surface: #141b2e !important;
  --surface2: #1b2540 !important;
  --surface-2: #1b2540 !important;
  --card: #151e34 !important;
  --panel: #151e34 !important;
  --text: #eff3ff !important;
  --text-primary: #eff3ff !important;
  --text-secondary: #a9b6d1 !important;
  --muted: #a9b6d1 !important;
  --border: #2b3653 !important;
  --border-color: #2b3653 !important;
  --accent: #8775f8 !important;
  --accent2: #a59aff !important;
  --accent-soft: #28234b !important;
  --primary: #8775f8 !important;
  --nv-accent: #8775f8 !important;
  --nv-accent-hover: #a091ff !important;
  --nv-accent-soft: #2c254c !important;
  --nv-action: #8775f8 !important;
  --nv-action-hover: #a091ff !important;
  --nv-control-blue: #8775f8 !important;
  --nv-control-blue-hover: #a091ff !important;
  --nv-control-radius: 10px !important;
  --nv-unified-accent: #8775f8 !important;
  --nv-unified-radius: 10px !important;
  --success: #38d2aa !important;
  --warning: #f6ba66 !important;
  --danger: #ff6685 !important;
  --v4-page: #0b1020;
  --v4-sidebar: #10162a;
  --v4-card: #151e34;
  --v4-elevated: #1c2743;
  --v4-border: #2b3653;
  --v4-text: #eff3ff;
  --v4-muted: #a9b6d1;
  --v4-accent: #8775f8;
  --v4-hover: #a091ff;
  --v4-cyan: #39bcf8;
  --v4-teal: #38d2aa;
  --v4-pink: #fa80b3;
  --v4-orange: #f6ba66;
}

html, body, #root, #app, .app, .nv3-app {
  font-family: 'Roboto', 'Arial', sans-serif !important;
  background: var(--v4-page) !important;
  color: var(--v4-text) !important;
  -webkit-font-smoothing: antialiased;
}
html, body { min-height: 100%; }
body { font-size: 14px; }
button, input, select, textarea, table, .recharts-wrapper, .recharts-text {
  font-family: 'Roboto', 'Arial', sans-serif !important;
}
::selection { background: #8775f866; color: white; }
*:focus-visible { outline: 2px solid var(--v4-hover) !important; outline-offset: 2px; }

/* Workspace geometry and visual hierarchy */
html body .app > main, html body main, html body .workspace,
html body .content, html body .nv3-main, html body .nv3-content {
  background: var(--v4-page) !important;
  color: var(--v4-text) !important;
}
html body .app > main > header, html body main > header, html body .topbar,
html body .nv3-topbar, html body .page-header {
  background: #11182b !important;
  color: var(--v4-text) !important;
  border-color: var(--v4-border) !important;
  box-shadow: none !important;
}
html body header h1, html body .page-heading h2, html body .content h1,
html body .content h2, html body .content h3, html body main h1,
html body main h2, html body main h3 {
  color: var(--v4-text) !important;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 700;
  letter-spacing: -.025em;
}
html body .eyebrow, html body .overline, html body .nav-section {
  color: #b4a9ff !important;
  font-weight: 700;
  letter-spacing: .075em;
}
html body .header-left p { display: none !important; } /* redundant static tagline */
html body .subtitle, html body .muted, html body .panel-header > span,
html body .stat-card .subtitle, html body .content p, html body .page-heading p {
  color: var(--v4-muted) !important;
}

/* Sidebar keeps the characteristic NovaNAS lavender accent. */
html body .sidebar, html body aside.sidebar, html body .nv3-sidebar {
  background: linear-gradient(180deg, #11162c 0%, #0d1225 100%) !important;
  color: #b5bfd9 !important;
  border-right: 1px solid var(--v4-border) !important;
}
html body .sidebar .brand, html body .sidebar .brand strong,
html body .nv3-sidebar .brand { color: #f7f6ff !important; }
html body .brand-icon, html body .nv3-brand-icon {
  background: linear-gradient(145deg,#9b8bff,#6958ea) !important;
  color: white !important;
  border-radius: 12px !important;
  box-shadow: 0 5px 19px #6958ea3b !important;
}
html body .nav-item, html body .sidebar nav button,
html body .nv3-sidebar button {
  border-radius: 10px !important;
  color: #b9c3df !important;
  background: transparent;
  font-weight: 500;
  transition: background-color .16s ease, color .16s ease, transform .16s ease !important;
}
html body .nav-item:hover, html body .sidebar nav button:hover,
html body .nv3-sidebar button:hover {
  background: #252747 !important;
  color: #f6f5ff !important;
}
html body .nav-item.active, html body .sidebar nav button.active,
html body .sidebar nav button[aria-current="page"], html body .nv3-sidebar button.active {
  background: #30295b !important;
  color: #fff !important;
  box-shadow: inset 3px 0 #9e90ff !important;
}
html body .sidebar nav svg.lucide, html body .nav-item svg.lucide,
html body .nv3-sidebar svg.lucide { color: #aa9dff !important; stroke: currentColor !important; }
html body .nav-item.active svg.lucide, html body .sidebar nav button.active svg.lucide {color: #ded8ff !important;}
html body .server-status, html body .sidebar-bottom { border-color: #29314a !important; }


/* Keep all non-status line icons on the same lavender visual system. */
html body main svg.lucide,
html body .content svg.lucide,
html body .nfm svg.lucide,
html body .nss svg.lucide,
html body .nv-docker-v14 svg.lucide {
  color: #ab9eff !important;
  stroke: currentColor !important;
}
html body button.nv-btn--primary svg.lucide,
html body button.primary svg.lucide,
html body button.raid-primary svg.lucide,
html body button.nv-btn--danger svg.lucide,
html body button.raid-danger svg.lucide {
  color: inherit !important;
  stroke: currentColor !important;
}
html body [class*="success"] svg.lucide, html body [class*="healthy"] svg.lucide,
html body [class*="warning"] svg.lucide, html body [class*="danger"] svg.lucide,
html body [class*="error"] svg.lucide { color: inherit !important; }

/* Cards, metrics, dashboard panels, tables, feature workspaces. */
html body .stat-card, html body .panel, html body .card,
html body .welcome, html body .health, html body .drive,
html body .service, html body .disk-card, html body .pool-card,
html body .dashboard-card, html body .summary-card,
html body .nfm .card, html body .nfm .panel,
html body .nss .card, html body .nss .panel,
html body .nv-docker-v14 .card, html body .nv-docker-v14 .panel,
html body .nv3-card, html body .nv3-panel {
  background: var(--v4-card) !important;
  color: var(--v4-text) !important;
  border: 1px solid var(--v4-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 28px #00000020 !important;
}
html body .stat-card { position: relative; overflow: hidden; }
html body .stat-card::before {
  content: ''; height: 3px; width: 100%; position:absolute; top:0; left:0;
  background: var(--v4-accent); border-radius: 3px 3px 0 0;
}
html body .stat-card:nth-child(4n+2)::before { background: var(--v4-cyan); }
html body .stat-card:nth-child(4n+3)::before { background: var(--v4-teal); }
html body .stat-card:nth-child(4n+4)::before { background: var(--v4-orange); }
html body .stat-card svg.lucide, html body .stat-icon svg.lucide,
html body .drive-icon svg.lucide, html body .panel-header svg.lucide {
  color: var(--v4-accent) !important; stroke: currentColor !important;
}
html body .stats > .stat-card:nth-child(4n+2) svg.lucide { color: var(--v4-cyan) !important; }
html body .stats > .stat-card:nth-child(4n+3) svg.lucide { color: var(--v4-teal) !important; }
html body .stats > .stat-card:nth-child(4n+4) svg.lucide { color: var(--v4-orange) !important; }
html body .welcome {
  background: linear-gradient(112deg,#211d46 0%,#1b2343 65%,#1a3350 100%) !important;
  border-color: #40366c !important;
}
html body .welcome h2, html body .welcome p, html body .welcome strong {
  color: #f8f7ff !important;
}
html body .welcome .eyebrow { color: #c0b5ff !important; }

/* Tabs, tables, dividers, lists and drawers */
html body table { background: transparent !important; color: var(--v4-text) !important; }
html body th, html body thead, html body table thead tr {
  background: #1b2540 !important;
  color: #b7c2dc !important;
  border-color: var(--v4-border) !important;
}
html body td, html body tr, html body .drive, html body .service,
html body .pool-row, html body .disk-row, html body .file-row {
  border-color: var(--v4-border) !important;
}
html body tbody tr:hover { background: #202947 !important; }
html body .modal, html body [role="dialog"], html body .drawer,
html body .dialog-content, html body .modal-content {
  background: var(--v4-card) !important;
  color: var(--v4-text) !important;
  border-color: var(--v4-border) !important;
}
html body .docker-tabs, html body .tabs, html body .tab-bar,
html body .nv-docker-v14-tabs, html body .nv3-storage-tabs {
  border-color: var(--v4-border) !important;
}
html body .tab.active, html body .tabs button.active,
html body button[aria-selected="true"]:not(.nav-item),
html body .nv-docker-v14-tabs button[aria-selected="true"] {
  border-color: var(--v4-accent) !important;
  color: #ddd7ff !important;
  background: #2a254d !important;
}

/* Consistent controls, preserving destructive semantic red. */
html body button, html body .nv-btn, html body input,
html body select, html body textarea {
  font-family: 'Roboto', Arial, sans-serif !important;
}
html body button.nv-btn, html body button.primary,
html body button.secondary, html body .nfm button,
html body .nss button, html body .nv-docker-v14 button {
  border-radius: 10px !important;
  transition: background-color .18s ease, border-color .18s ease,
    color .18s ease, box-shadow .18s ease, transform .15s ease !important;
}
html body button.nv-btn--primary, html body button.primary,
html body button.pool-primary, html body button.raid-primary,
html body button.btn-primary, html body .nfm button.primary {
  color: white !important;
  background: var(--v4-accent) !important;
  border: 1px solid var(--v4-accent) !important;
  box-shadow: 0 3px 12px #7568fd24 !important;
}
html body button.nv-btn--primary:not(:disabled):hover,
html body button.primary:not(:disabled):hover,
html body button.pool-primary:not(:disabled):hover,
html body button.raid-primary:not(:disabled):hover {
  background: var(--v4-hover) !important;
  border-color: var(--v4-hover) !important;
  box-shadow: 0 5px 18px #7568fd44 !important;
}
html body button.nv-btn--secondary, html body button.secondary,
html body button.pool-secondary, html body button.raid-cancel,
html body button.disk-button, html body button.refresh-button {
  background: var(--v4-elevated) !important;
  border: 1px solid #3c4866 !important;
  color: #e9eafe !important;
}
html body button.nv-btn--secondary:not(:disabled):hover,
html body button.secondary:not(:disabled):hover,
html body button.disk-button:not(:disabled):hover,
html body button.refresh-button:not(:disabled):hover {
  background: #302b54 !important;
  border-color: var(--v4-accent) !important;
  color: #f6f3ff !important;
}
html body button.nv-btn--danger, html body button.raid-danger,
html body button.pool-danger, html body button.danger,
html body button.delete-button {
  background: #b83452 !important;
  border: 1px solid #e35d79 !important;
  color: #fff !important;
}
html body button.nv-btn--danger:hover, html body button.raid-danger:hover,
html body button.pool-danger:hover, html body button.danger:hover {
  background: #d14464 !important;
}
html body button svg.lucide { stroke: currentColor !important; color: inherit !important; }
html body button:not(:disabled):not(.nav-item):active { transform: scale(.985) !important; }
html body button:disabled { opacity:.55; box-shadow:none !important; }
html body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html body textarea, html body select {
  background: #10182e !important;
  border: 1px solid #34405e !important;
  color: #f0f4ff !important;
  border-radius: 9px !important;
}
html body input::placeholder, html body textarea::placeholder { color: #8491af !important; }
html body input[type="checkbox"], html body input[type="radio"],
html body input[type="range"] { accent-color: var(--v4-accent) !important; }
html body input[type="range"]::-webkit-slider-thumb { background: var(--v4-accent) !important; }
html body progress { accent-color: var(--v4-accent) !important; }
html body progress::-webkit-progress-value { background: var(--v4-accent) !important; }
html body .progress, html body .progress-bar, html body .usage-track {
  border-radius: 999px !important;
  overflow: hidden;
}
html body .progress > div, html body .progress-fill,
html body .usage-bar, html body .usage-fill {
  background: linear-gradient(90deg,#7b6df1,#a69aff) !important;
  border-radius: inherit !important;
}
html body .recharts-cartesian-grid line { stroke: #2c3652 !important; }
html body .recharts-cartesian-axis-tick text, html body .recharts-legend-item-text { fill: #aebad6 !important; color: #aebad6 !important; }
html body .recharts-default-tooltip { background: #1c2640 !important; border-color: #485170 !important; color: white !important; }

/* Ensure package sub-app surfaces are dark without harming camera/video imagery. */
html body .nfm, html body .nss, html body .nv-docker-v14,
html body .nvm, html body .nv3-app { color: var(--v4-text) !important; }
html body .nfm [class*="toolbar"], html body .nss [class*="toolbar"],
html body .nv-docker-v14 [class*="toolbar"] {
  background: #151e34 !important; border-color: var(--v4-border) !important;
}
html body a { color: #aa9dff; }
html body a:hover { color: #d7cfff; }
html body ::-webkit-scrollbar { width: 10px; height: 10px; }
html body ::-webkit-scrollbar-thumb { background: #364260; border: 2px solid #10182b; border-radius: 15px; }
html body ::-webkit-scrollbar-track { background: #10182b; }
@media (prefers-reduced-motion: reduce) {
  html body button, html body .nav-item { transition: none !important; transform: none !important; }
}