/* NewVoip UI Design System v0.1 - development bundle */

/*
 * NewVoip UI Design System
 * 00-foundation.css
 *
 * Token NON cromatici e token cromatici semantici.
 * Le palette vere sono definite in css/themes/*.css.
 *
 * Regola fondamentale:
 * - --nv-accent-* = identità visuale del tema
 * - --nv-success/info/warning/danger-* = significato operativo
 * Non usare mai l'accent del tema per rappresentare uno stato.
 */

:root {
  /* Typography */
  --nv-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --nv-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --nv-font-size-xs: 0.72rem;
  --nv-font-size-sm: 0.80rem;
  --nv-font-size-md: 0.90rem;
  --nv-font-size-base: 1rem;
  --nv-font-size-lg: 1.14rem;
  --nv-font-size-xl: 1.45rem;
  --nv-font-size-2xl: 1.90rem;
  --nv-font-size-3xl: 2.25rem;

  --nv-line-height-tight: 1.12;
  --nv-line-height-base: 1.50;
  --nv-letter-tight: -0.035em;

  /* Spacing */
  --nv-space-1: 4px;
  --nv-space-2: 8px;
  --nv-space-3: 12px;
  --nv-space-4: 16px;
  --nv-space-5: 20px;
  --nv-space-6: 24px;
  --nv-space-7: 30px;
  --nv-space-8: 38px;
  --nv-space-9: 48px;

  /* Radius */
  --nv-radius-xs: 7px;
  --nv-radius-sm: 10px;
  --nv-radius-md: 13px;
  --nv-radius-lg: 16px;
  --nv-radius-xl: 20px;
  --nv-radius-2xl: 28px;
  --nv-radius-pill: 999px;

  /* Sizing */
  --nv-sidebar-width: 230px;
  --nv-sidebar-compact-width: 78px;
  --nv-topbar-height: 70px;
  --nv-content-max: 1500px;

  /* Motion */
  --nv-transition-fast: 120ms ease;
  --nv-transition-base: 200ms ease;

  /* Focus */
  --nv-focus-width: 3px;

  /* Z-index */
  --nv-z-sidebar: 20;
  --nv-z-topbar: 30;
  --nv-z-dropdown: 60;
  --nv-z-modal: 100;
  --nv-z-toast: 120;

  /*
   * Default palette = Light.
   * Se l'utente non ha ancora una preferenza, il DOM può anche non avere
   * data-nv-theme: questi valori garantiscono un default completo.
   */
  --nv-bg: #f4f7fa;
  --nv-surface: #ffffff;
  --nv-surface-2: #edf2f6;
  --nv-surface-3: #f8fafc;
  --nv-sidebar-bg: #eef3f6;
  --nv-topbar-bg: rgba(255, 255, 255, 0.96);

  --nv-text: #17202d;
  --nv-text-muted: #667386;
  --nv-text-subtle: #7d8998;
  --nv-text-on-accent: #ffffff;

  --nv-border: #d8e0e7;
  --nv-border-strong: #bcc8d3;

  --nv-accent: #00794d;
  --nv-accent-hover: #006a43;
  --nv-accent-soft: rgba(0, 121, 77, 0.09);
  --nv-accent-border: rgba(0, 121, 77, 0.24);

  /* Semantic states: significato costante tra i temi */
  --nv-success: #20cf8b;
  --nv-success-soft: rgba(32, 207, 139, 0.11);
  --nv-success-border: rgba(32, 207, 139, 0.25);

  --nv-info: #5da8ff;
  --nv-info-soft: rgba(93, 168, 255, 0.11);
  --nv-info-border: rgba(93, 168, 255, 0.25);

  --nv-warning: #ffc857;
  --nv-warning-soft: rgba(255, 200, 87, 0.12);
  --nv-warning-border: rgba(255, 200, 87, 0.28);

  --nv-danger: #ff6b6b;
  --nv-danger-soft: rgba(255, 107, 107, 0.11);
  --nv-danger-border: rgba(255, 107, 107, 0.25);

  /* Privileged/admin semantic color */
  --nv-admin: #ff9f43;
  --nv-admin-soft: rgba(255, 159, 67, 0.12);
  --nv-admin-border: rgba(255, 159, 67, 0.30);

  --nv-shadow-sm: 0 4px 14px rgba(34, 54, 75, 0.06);
  --nv-shadow-md: 0 10px 28px rgba(34, 54, 75, 0.08);
  --nv-shadow-lg: 0 18px 44px rgba(34, 54, 75, 0.11);
}


/*
 * 10-base.css
 * Reset leggero e primitive globali NewVoip.
 * Tutto è namespaced tramite classi nv-* dove possibile.
 */

html.nv-ui,
html.nv-ui body {
  min-height: 100%;
}

html.nv-ui body {
  margin: 0;
  font-family: var(--nv-font-sans);
  font-size: var(--nv-font-size-base);
  line-height: var(--nv-line-height-base);
  background: var(--nv-bg);
  color: var(--nv-text);
}

.nv-ui *,
.nv-ui *::before,
.nv-ui *::after {
  box-sizing: border-box;
}

.nv-ui a {
  color: inherit;
}

.nv-ui button,
.nv-ui input,
.nv-ui select,
.nv-ui textarea {
  font: inherit;
}

.nv-ui button,
.nv-ui [role="button"],
.nv-ui a {
  -webkit-tap-highlight-color: transparent;
}

.nv-ui :focus-visible {
  outline: var(--nv-focus-width) solid var(--nv-info);
  outline-offset: 2px;
}

.nv-ui h1,
.nv-ui h2,
.nv-ui h3,
.nv-ui h4,
.nv-ui p {
  margin-top: 0;
}

.nv-ui h1,
.nv-ui h2,
.nv-ui h3 {
  letter-spacing: var(--nv-letter-tight);
}

.nv-ui h1 {
  font-size: var(--nv-font-size-3xl);
  line-height: var(--nv-line-height-tight);
}

.nv-ui h2 {
  font-size: var(--nv-font-size-xl);
  line-height: 1.20;
}

.nv-ui h3 {
  font-size: var(--nv-font-size-lg);
  line-height: 1.25;
}

.nv-ui ::selection {
  background: var(--nv-accent-soft);
  color: var(--nv-text);
}


/*
 * 20-layout.css
 * Struttura applicativa: sidebar, topbar, contenuto, griglie.
 */

.nv-app {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--nv-sidebar-width) minmax(0, 1fr);
  background:
    radial-gradient(circle at 10% 0%, var(--nv-accent-soft), transparent 28%),
    var(--nv-bg);
}

.nv-sidebar {
  position: sticky;
  top: 0;
  z-index: var(--nv-z-sidebar);
  height: 100vh;
  overflow-y: auto;
  padding: 18px 14px;
  background: var(--nv-sidebar-bg);
  border-right: 1px solid var(--nv-border);
}

.nv-main {
  min-width: 0;
}

.nv-topbar {
  position: sticky;
  top: 0;
  z-index: var(--nv-z-topbar);
  min-height: var(--nv-topbar-height);
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nv-space-4);
  background: var(--nv-topbar-bg);
  border-bottom: 1px solid var(--nv-border);
  backdrop-filter: blur(14px);
}

.nv-content {
  width: 100%;
  max-width: var(--nv-content-max);
  margin: 0 auto;
  padding: var(--nv-space-7);
}

.nv-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--nv-space-5);
  margin-bottom: var(--nv-space-6);
}

.nv-grid {
  display: grid;
  gap: var(--nv-space-4);
}

.nv-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.nv-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.nv-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.nv-layout-main-side {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(290px, .65fr);
  gap: 18px;
}

.nv-stack {
  display: grid;
  gap: var(--nv-space-4);
}

@media (max-width: 1100px) {
  .nv-app {
    grid-template-columns: var(--nv-sidebar-compact-width) minmax(0, 1fr);
  }

  .nv-sidebar .nv-sidebar-label,
  .nv-sidebar .nv-menu-section-title,
  .nv-sidebar .nv-sidebar-footer {
    display: none;
  }

  .nv-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nv-layout-main-side {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .nv-app {
    grid-template-columns: 1fr;
  }

  .nv-sidebar {
    display: none;
  }

  .nv-topbar {
    padding-left: 14px;
    padding-right: 14px;
  }

  .nv-content {
    padding: 20px 14px;
  }

  .nv-page-header {
    display: block;
  }

  .nv-grid--2,
  .nv-grid--3,
  .nv-grid--4 {
    grid-template-columns: 1fr;
  }
}


/*
 * 30-components.css
 * Componenti riutilizzabili.
 */

/* Brand */
.nv-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 4px 8px 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.nv-brand-mark {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--nv-text-on-accent);
  background: linear-gradient(135deg, var(--nv-accent), var(--nv-accent-hover));
  box-shadow: var(--nv-shadow-sm);
}

/* Sidebar menu */
.nv-menu-section-title {
  padding: 12px 10px 8px;
  color: var(--nv-text-muted);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.nv-menu-item {
  min-height: 42px;
  margin-bottom: 4px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: var(--nv-text-muted);
  text-decoration: none;
  transition:
    background var(--nv-transition-base),
    color var(--nv-transition-base),
    border-color var(--nv-transition-base);
}

.nv-menu-item:hover {
  color: var(--nv-text);
  background: var(--nv-surface);
}

.nv-menu-item.is-active {
  color: var(--nv-text);
  background: var(--nv-accent-soft);
  border-color: var(--nv-accent-border);
}

.nv-menu-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.nv-sidebar-footer {
  color: var(--nv-text-subtle);
  font-size: var(--nv-font-size-xs);
}

/* Page headings */
.nv-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--nv-accent);
  font-size: var(--nv-font-size-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .14em;
}

.nv-eyebrow::before {
  content: "";
  width: 24px;
  height: 2px;
  border-radius: var(--nv-radius-pill);
  background: var(--nv-accent);
}

.nv-page-subtitle {
  margin: 8px 0 0;
  color: var(--nv-text-muted);
  font-size: 0.94rem;
}

/* Cards / panels */
.nv-card,
.nv-panel {
  background: var(--nv-surface);
  border: 1px solid var(--nv-border);
  border-radius: var(--nv-radius-lg);
  box-shadow: var(--nv-shadow-md);
}

.nv-card {
  padding: 18px;
}

.nv-card--accent {
  background: linear-gradient(135deg, var(--nv-accent-soft), var(--nv-surface));
  border-color: var(--nv-accent-border);
}

.nv-panel {
  overflow: hidden;
}

.nv-panel-header {
  min-height: 64px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nv-space-3);
  border-bottom: 1px solid var(--nv-border);
}

.nv-panel-header h2,
.nv-panel-header h3 {
  margin-bottom: 0;
}

/* Metrics */
.nv-metric-value {
  display: block;
  margin-bottom: 3px;
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: -0.045em;
}

.nv-card--accent .nv-metric-value {
  color: var(--nv-accent);
}

.nv-metric-label {
  color: var(--nv-text-muted);
  font-size: var(--nv-font-size-sm);
}

/* Buttons */
.nv-btn {
  min-height: 40px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--nv-border);
  border-radius: var(--nv-radius-sm);
  background: var(--nv-surface);
  color: var(--nv-text);
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--nv-transition-fast),
    background var(--nv-transition-fast),
    border-color var(--nv-transition-fast);
}

.nv-btn:hover {
  transform: translateY(-1px);
  border-color: var(--nv-border-strong);
}

.nv-btn--primary {
  color: var(--nv-text-on-accent);
  background: var(--nv-accent);
  border-color: var(--nv-accent);
  font-weight: 700;
}

.nv-btn--primary:hover {
  background: var(--nv-accent-hover);
  border-color: var(--nv-accent-hover);
}

.nv-btn--danger {
  color: var(--nv-danger);
  background: var(--nv-danger-soft);
  border-color: var(--nv-danger-border);
}

/* Badges */
.nv-badge {
  width: max-content;
  max-width: 100%;
  padding: 6px 9px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--nv-border);
  border-radius: var(--nv-radius-pill);
  font-size: var(--nv-font-size-xs);
  font-weight: 700;
  line-height: 1;
}

.nv-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: currentColor;
}

.nv-badge--success {
  color: var(--nv-success);
  background: var(--nv-success-soft);
  border-color: var(--nv-success-border);
}

.nv-badge--info {
  color: var(--nv-info);
  background: var(--nv-info-soft);
  border-color: var(--nv-info-border);
}

.nv-badge--warning {
  color: var(--nv-warning);
  background: var(--nv-warning-soft);
  border-color: var(--nv-warning-border);
}

.nv-badge--danger {
  color: var(--nv-danger);
  background: var(--nv-danger-soft);
  border-color: var(--nv-danger-border);
}

.nv-badge--admin {
  color: var(--nv-admin);
  background: var(--nv-admin-soft);
  border-color: var(--nv-admin-border);
}

/* Tables */
.nv-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.nv-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

.nv-table th,
.nv-table td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--nv-border);
  text-align: left;
  vertical-align: middle;
}

.nv-table th {
  color: var(--nv-text-muted);
  background: var(--nv-surface-2);
  font-size: 0.70rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.nv-table td {
  font-size: var(--nv-font-size-md);
}

.nv-table tbody tr:last-child td {
  border-bottom: 0;
}

.nv-table tbody tr:hover td {
  background: var(--nv-surface-3);
}

/* Forms */
.nv-field {
  display: grid;
  gap: 7px;
}

.nv-label {
  color: var(--nv-text-muted);
  font-size: var(--nv-font-size-sm);
  font-weight: 700;
}

.nv-input,
.nv-select,
.nv-textarea {
  width: 100%;
  border: 1px solid var(--nv-border);
  border-radius: var(--nv-radius-sm);
  background: var(--nv-surface-3);
  color: var(--nv-text);
}

.nv-input,
.nv-select {
  min-height: 42px;
  padding: 0 12px;
}

.nv-textarea {
  min-height: 110px;
  padding: 10px 12px;
  resize: vertical;
}

.nv-input::placeholder,
.nv-textarea::placeholder {
  color: var(--nv-text-subtle);
}

/* User */
.nv-user-chip {
  padding: 7px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--nv-border);
  border-radius: 12px;
  background: var(--nv-surface);
}

.nv-avatar {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--nv-accent);
  background: var(--nv-accent-soft);
  font-size: var(--nv-font-size-sm);
  font-weight: 800;
}

/* Elevated privilege banner */
.nv-admin-warning {
  margin: 18px 30px 0;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid var(--nv-admin-border);
  border-radius: 14px;
  background: linear-gradient(90deg, var(--nv-admin-soft), var(--nv-surface));
  box-shadow: var(--nv-shadow-sm);
}

.nv-admin-warning strong {
  display: block;
  margin-bottom: 2px;
  color: var(--nv-admin);
  font-size: var(--nv-font-size-sm);
}

.nv-admin-warning p {
  margin: 0;
  color: var(--nv-text-muted);
  font-size: var(--nv-font-size-xs);
}

.nv-admin-warning-role {
  padding: 7px 9px;
  border-radius: 9px;
  background: var(--nv-admin);
  color: #1d1208;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: .16em;
}

/* Alerts */
.nv-alert {
  padding: 13px 15px;
  border: 1px solid var(--nv-border);
  border-radius: var(--nv-radius-md);
  background: var(--nv-surface);
}

.nv-alert--success {
  border-color: var(--nv-success-border);
  background: var(--nv-success-soft);
}

.nv-alert--info {
  border-color: var(--nv-info-border);
  background: var(--nv-info-soft);
}

.nv-alert--warning {
  border-color: var(--nv-warning-border);
  background: var(--nv-warning-soft);
}

.nv-alert--danger {
  border-color: var(--nv-danger-border);
  background: var(--nv-danger-soft);
}

/* Theme selector preview */
.nv-theme-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--nv-space-3);
}

.nv-theme-choice {
  padding: 12px;
  border: 1px solid var(--nv-border);
  border-radius: var(--nv-radius-md);
  background: var(--nv-surface);
  color: var(--nv-text);
  cursor: pointer;
  text-align: left;
}

.nv-theme-choice.is-active {
  border-color: var(--nv-accent);
  box-shadow: 0 0 0 2px var(--nv-accent-soft);
}

@media (max-width: 760px) {
  .nv-admin-warning {
    margin: 14px;
  }

  .nv-theme-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/*
 * 40-utilities.css
 * Utility volutamente piccole. Evitare di trasformarlo in un secondo Bootstrap.
 */

.nv-text-muted { color: var(--nv-text-muted) !important; }
.nv-text-subtle { color: var(--nv-text-subtle) !important; }

.nv-text-success { color: var(--nv-success) !important; }
.nv-text-info { color: var(--nv-info) !important; }
.nv-text-warning { color: var(--nv-warning) !important; }
.nv-text-danger { color: var(--nv-danger) !important; }
.nv-text-admin { color: var(--nv-admin) !important; }

.nv-fw-700 { font-weight: 700 !important; }
.nv-fw-800 { font-weight: 800 !important; }

.nv-m-0 { margin: 0 !important; }
.nv-mb-0 { margin-bottom: 0 !important; }
.nv-mb-2 { margin-bottom: var(--nv-space-2) !important; }
.nv-mb-4 { margin-bottom: var(--nv-space-4) !important; }
.nv-mb-6 { margin-bottom: var(--nv-space-6) !important; }

.nv-hidden { display: none !important; }


/* All NewVoip themes. Generated from css/themes/*.css */

/*
 * Theme: Night Mist
 * Apply with: <html class="nv-ui" data-nv-theme="night">
 */
html.nv-ui[data-nv-theme="night"] {
  --nv-bg: #edf2f7;
  --nv-surface: #ffffff;
  --nv-surface-2: #e7edf3;
  --nv-surface-3: #f5f8fb;
  --nv-sidebar-bg: #e5ecf3;
  --nv-topbar-bg: rgba(255,255,255,.96);

  --nv-text: #17263a;
  --nv-text-muted: #536579;
  --nv-text-subtle: #748397;
  --nv-text-on-accent: #ffffff;

  --nv-border: #cfdae5;
  --nv-border-strong: #afbecc;

  --nv-accent: #245b83;
  --nv-accent-hover: #194b70;
  --nv-accent-soft: rgba(36,91,131,.10);
  --nv-accent-border: rgba(36,91,131,.25);

  --nv-shadow-sm: 0 4px 14px rgba(35,59,82,.07);
  --nv-shadow-md: 0 10px 28px rgba(35,59,82,.09);
  --nv-shadow-lg: 0 18px 44px rgba(35,59,82,.12);
}


/*
 * Theme: Light
 * Apply with: <html class="nv-ui" data-nv-theme="light">
 */
html.nv-ui[data-nv-theme="light"] {
  --nv-bg: #f4f7fa;
  --nv-surface: #ffffff;
  --nv-surface-2: #edf2f6;
  --nv-surface-3: #f8fafc;
  --nv-sidebar-bg: #eef3f6;
  --nv-topbar-bg: rgba(255,255,255,.96);

  --nv-text: #17202d;
  --nv-text-muted: #667386;
  --nv-text-subtle: #7d8998;
  --nv-text-on-accent: #ffffff;

  --nv-border: #d8e0e7;
  --nv-border-strong: #bcc8d3;

  --nv-accent: #00794d;
  --nv-accent-hover: #006a43;
  --nv-accent-soft: rgba(0,121,77,.09);
  --nv-accent-border: rgba(0,121,77,.24);

  --nv-shadow-sm: 0 4px 14px rgba(34,54,75,.06);
  --nv-shadow-md: 0 10px 28px rgba(34,54,75,.08);
  --nv-shadow-lg: 0 18px 44px rgba(34,54,75,.11);
}


/*
 * Theme: Blue
 * Apply with: <html class="nv-ui" data-nv-theme="blue">
 */
html.nv-ui[data-nv-theme="blue"] {
  --nv-bg: #eef7fc;
  --nv-surface: #ffffff;
  --nv-surface-2: #e5f1f8;
  --nv-surface-3: #f5fafe;
  --nv-sidebar-bg: #e8f3f9;
  --nv-topbar-bg: rgba(255,255,255,.96);

  --nv-text: #15334a;
  --nv-text-muted: #506b7c;
  --nv-text-subtle: #708797;
  --nv-text-on-accent: #ffffff;

  --nv-border: #cfe0ea;
  --nv-border-strong: #aac4d3;

  --nv-accent: #2474a6;
  --nv-accent-hover: #1d638e;
  --nv-accent-soft: rgba(36,116,166,.10);
  --nv-accent-border: rgba(36,116,166,.25);

  --nv-shadow-sm: 0 4px 14px rgba(35,83,112,.06);
  --nv-shadow-md: 0 10px 28px rgba(35,83,112,.08);
  --nv-shadow-lg: 0 18px 44px rgba(35,83,112,.11);
}


/*
 * Theme: Graphite
 * Apply with: <html class="nv-ui" data-nv-theme="graphite">
 */
html.nv-ui[data-nv-theme="graphite"] {
  --nv-bg: #f1f2f4;
  --nv-surface: #ffffff;
  --nv-surface-2: #e9ebee;
  --nv-surface-3: #f7f8f9;
  --nv-sidebar-bg: #e9ebee;
  --nv-topbar-bg: rgba(255,255,255,.96);

  --nv-text: #252a31;
  --nv-text-muted: #626b75;
  --nv-text-subtle: #7c848d;
  --nv-text-on-accent: #ffffff;

  --nv-border: #d5d9de;
  --nv-border-strong: #b9c0c8;

  --nv-accent: #4d5966;
  --nv-accent-hover: #3e4854;
  --nv-accent-soft: rgba(77,89,102,.10);
  --nv-accent-border: rgba(77,89,102,.24);

  --nv-shadow-sm: 0 4px 14px rgba(42,47,54,.06);
  --nv-shadow-md: 0 10px 28px rgba(42,47,54,.08);
  --nv-shadow-lg: 0 18px 44px rgba(42,47,54,.11);
}


/*
 * Theme: Ivory
 * Apply with: <html class="nv-ui" data-nv-theme="ivory">
 */
html.nv-ui[data-nv-theme="ivory"] {
  --nv-bg: #f5f1e8;
  --nv-surface: #fffdf8;
  --nv-surface-2: #ece6da;
  --nv-surface-3: #faf7f0;
  --nv-sidebar-bg: #eee8dc;
  --nv-topbar-bg: rgba(255,253,248,.97);

  --nv-text: #26312c;
  --nv-text-muted: #68746e;
  --nv-text-subtle: #858f89;
  --nv-text-on-accent: #ffffff;

  --nv-border: #ddd5c8;
  --nv-border-strong: #c2b8a8;

  --nv-accent: #137357;
  --nv-accent-hover: #0d6249;
  --nv-accent-soft: rgba(19,115,87,.10);
  --nv-accent-border: rgba(19,115,87,.24);

  --nv-shadow-sm: 0 4px 14px rgba(70,59,43,.06);
  --nv-shadow-md: 0 10px 28px rgba(70,59,43,.08);
  --nv-shadow-lg: 0 18px 44px rgba(70,59,43,.11);
}


/*
 * Theme: Slate
 * Apply with: <html class="nv-ui" data-nv-theme="slate">
 */
html.nv-ui[data-nv-theme="slate"] {
  --nv-bg: #edf2f4;
  --nv-surface: #ffffff;
  --nv-surface-2: #e4ebee;
  --nv-surface-3: #f6f9fa;
  --nv-sidebar-bg: #e6edef;
  --nv-topbar-bg: rgba(255,255,255,.96);

  --nv-text: #263640;
  --nv-text-muted: #61727d;
  --nv-text-subtle: #7c8b94;
  --nv-text-on-accent: #ffffff;

  --nv-border: #d1dde1;
  --nv-border-strong: #afc0c7;

  --nv-accent: #3f6d7e;
  --nv-accent-hover: #345d6d;
  --nv-accent-soft: rgba(63,109,126,.10);
  --nv-accent-border: rgba(63,109,126,.25);

  --nv-shadow-sm: 0 4px 14px rgba(45,70,80,.06);
  --nv-shadow-md: 0 10px 28px rgba(45,70,80,.08);
  --nv-shadow-lg: 0 18px 44px rgba(45,70,80,.11);
}


/*
 * Theme: Violet
 * Apply with: <html class="nv-ui" data-nv-theme="violet">
 */
html.nv-ui[data-nv-theme="violet"] {
  --nv-bg: #f6f2fb;
  --nv-surface: #ffffff;
  --nv-surface-2: #eee7f7;
  --nv-surface-3: #faf8fd;
  --nv-sidebar-bg: #eee9f6;
  --nv-topbar-bg: rgba(255,255,255,.96);

  --nv-text: #312944;
  --nv-text-muted: #6c627f;
  --nv-text-subtle: #877e98;
  --nv-text-on-accent: #ffffff;

  --nv-border: #ddd5e9;
  --nv-border-strong: #c2b5d4;

  --nv-accent: #6d4cac;
  --nv-accent-hover: #5c3d99;
  --nv-accent-soft: rgba(109,76,172,.10);
  --nv-accent-border: rgba(109,76,172,.24);

  --nv-shadow-sm: 0 4px 14px rgba(65,48,92,.06);
  --nv-shadow-md: 0 10px 28px rgba(65,48,92,.08);
  --nv-shadow-lg: 0 18px 44px rgba(65,48,92,.11);
}


/*
 * Theme: Admin Amber
 * Apply with: <html class="nv-ui" data-nv-theme="admin-amber">
 */
html.nv-ui[data-nv-theme="admin-amber"] {
  --nv-bg: #fff4e6;
  --nv-surface: #fffdf8;
  --nv-surface-2: #f9e7cf;
  --nv-surface-3: #fff9f0;
  --nv-sidebar-bg: #f8ead7;
  --nv-topbar-bg: rgba(255,253,248,.97);

  --nv-text: #4a2c12;
  --nv-text-muted: #76563b;
  --nv-text-subtle: #947459;
  --nv-text-on-accent: #ffffff;

  --nv-border: #e7c9a6;
  --nv-border-strong: #d6aa76;

  --nv-accent: #a94d00;
  --nv-accent-hover: #913f00;
  --nv-accent-soft: rgba(169,77,0,.10);
  --nv-accent-border: rgba(169,77,0,.28);

  --nv-shadow-sm: 0 4px 14px rgba(91,52,20,.06);
  --nv-shadow-md: 0 10px 28px rgba(91,52,20,.09);
  --nv-shadow-lg: 0 18px 44px rgba(91,52,20,.12);
}