/* ============================================================
   Nexovirt — Monochrome Theme Override für Tabler (Dist/CSS)
   Einbinden NACH tabler.min.css. Kein SCSS-Build nötig.
   Dark Mode schaltet über data-bs-theme="dark".
   ============================================================ */

/* ---------- Neutrale Graustufen (gilt für beide Modes) ------ */
:root {
  --tblr-gray-50:  #fafafa;
  --tblr-gray-100: #f4f4f5;
  --tblr-gray-200: #e4e4e7;
  --tblr-gray-300: #d4d4d8;
  --tblr-gray-400: #a1a1aa;
  --tblr-gray-500: #71717a;
  --tblr-gray-600: #52525b;
  --tblr-gray-700: #3f3f46;
  --tblr-gray-800: #27272a;
  --tblr-gray-900: #18181b;
  --tblr-gray-950: #09090b;
}

/* ---------- LIGHT MODE -------------------------------------- */
:root {
  /* Brand / Primary */
  --tblr-primary: #18181b;
  --tblr-primary-rgb: 24, 24, 27;
  --tblr-primary-fg: #ffffff;
  --tblr-primary-text-emphasis: #18181b;
  --tblr-primary-bg-subtle: #f4f4f5;
  --tblr-primary-border-subtle: #e4e4e7;

  /* Links */
  --tblr-link-color: #18181b;
  --tblr-link-color-rgb: 24, 24, 27;
  --tblr-link-hover-color: #3f3f46;

  /* Body */
  --tblr-body-bg: #fafafa;
  --tblr-body-bg-rgb: 250, 250, 250;
  --tblr-body-color: #0a0a0a;
  --tblr-body-color-rgb: 10, 10, 10;
  --tblr-emphasis-color: #000000;

  /* Surfaces */
  --tblr-bg-surface: #ffffff;
  --tblr-bg-surface-secondary: #f4f4f5;
  --tblr-bg-surface-tertiary: #fafafa;
  --tblr-bg-surface-dark: #18181b;
  --tblr-bg-forms: #ffffff;

  /* Borders */
  --tblr-border-color: #e4e4e7;
  --tblr-border-color-translucent: rgba(9, 9, 11, 0.08);

  /* Sekundär- / Muted-Text */
  --tblr-secondary: #71717a;
  --tblr-secondary-rgb: 113, 113, 122;
  --tblr-secondary-color: #71717a;
  --tblr-muted: #71717a;
  --tblr-tertiary-color: #a1a1aa;

  /* Dark/Light Theme-Color-Aliase */
  --tblr-dark: #18181b;
  --tblr-dark-rgb: 24, 24, 27;
  --tblr-light: #fafafa;

  /* Semantische Farben (funktional, kannst du bei Bedarf mono ziehen) */
  --tblr-success: #16a34a;
  --tblr-success-rgb: 22, 163, 74;
  --tblr-warning: #d97706;
  --tblr-warning-rgb: 217, 119, 6;
  --tblr-danger: #dc2626;
  --tblr-danger-rgb: 220, 38, 38;
  --tblr-info: #0891b2;
  --tblr-info-rgb: 8, 145, 178;
}

/* Buttons sind im Dist gebacken -> lokale Vars überschreiben */
.btn-primary {
  --tblr-btn-color: #ffffff;
  --tblr-btn-bg: #18181b;
  --tblr-btn-border-color: #18181b;
  --tblr-btn-hover-color: #ffffff;
  --tblr-btn-hover-bg: #27272a;
  --tblr-btn-hover-border-color: #27272a;
  --tblr-btn-active-color: #ffffff;
  --tblr-btn-active-bg: #3f3f46;
  --tblr-btn-active-border-color: #3f3f46;
  --tblr-btn-disabled-bg: #18181b;
  --tblr-btn-disabled-border-color: #18181b;
}

.btn-outline-primary {
  --tblr-btn-color: #18181b;
  --tblr-btn-border-color: #18181b;
  --tblr-btn-hover-color: #ffffff;
  --tblr-btn-hover-bg: #18181b;
  --tblr-btn-hover-border-color: #18181b;
  --tblr-btn-active-color: #ffffff;
  --tblr-btn-active-bg: #18181b;
  --tblr-btn-active-border-color: #18181b;
}

/* ---------- DARK MODE --------------------------------------- */
[data-bs-theme="dark"] {
  /* Brand / Primary -> Weiß, damit es auf Schwarz lesbar bleibt */
  --tblr-primary: #fafafa;
  --tblr-primary-rgb: 250, 250, 250;
  --tblr-primary-fg: #0a0a0a;
  --tblr-primary-text-emphasis: #fafafa;
  --tblr-primary-bg-subtle: #1f1f22;
  --tblr-primary-border-subtle: #262628;

  /* Links */
  --tblr-link-color: #fafafa;
  --tblr-link-color-rgb: 250, 250, 250;
  --tblr-link-hover-color: #d4d4d8;

  /* Body */
  --tblr-body-bg: #0a0a0a;
  --tblr-body-bg-rgb: 10, 10, 10;
  --tblr-body-color: #fafafa;
  --tblr-body-color-rgb: 250, 250, 250;
  --tblr-emphasis-color: #ffffff;

  /* Surfaces */
  --tblr-bg-surface: #161616;
  --tblr-bg-surface-secondary: #1f1f22;
  --tblr-bg-surface-tertiary: #121212;
  --tblr-bg-surface-dark: #000000;
  --tblr-bg-forms: #161616;

  /* Borders */
  --tblr-border-color: #262628;
  --tblr-border-color-translucent: rgba(250, 250, 250, 0.12);

  /* Sekundär- / Muted-Text */
  --tblr-secondary: #a1a1aa;
  --tblr-secondary-rgb: 161, 161, 170;
  --tblr-secondary-color: #a1a1aa;
  --tblr-muted: #a1a1aa;
  --tblr-tertiary-color: #71717a;

  /* Semantische Farben (im Dark Mode etwas heller) */
  --tblr-success: #22c55e;
  --tblr-success-rgb: 34, 197, 94;
  --tblr-warning: #f59e0b;
  --tblr-warning-rgb: 245, 158, 11;
  --tblr-danger: #ef4444;
  --tblr-danger-rgb: 239, 68, 68;
  --tblr-info: #22d3ee;
  --tblr-info-rgb: 34, 211, 238;
}

[data-bs-theme="dark"] .btn-primary {
  --tblr-btn-color: #0a0a0a;
  --tblr-btn-bg: #fafafa;
  --tblr-btn-border-color: #fafafa;
  --tblr-btn-hover-color: #0a0a0a;
  --tblr-btn-hover-bg: #e4e4e7;
  --tblr-btn-hover-border-color: #e4e4e7;
  --tblr-btn-active-color: #0a0a0a;
  --tblr-btn-active-bg: #d4d4d8;
  --tblr-btn-active-border-color: #d4d4d8;
  --tblr-btn-disabled-bg: #fafafa;
  --tblr-btn-disabled-border-color: #fafafa;
}

[data-bs-theme="dark"] .btn-outline-primary {
  --tblr-btn-color: #fafafa;
  --tblr-btn-border-color: #fafafa;
  --tblr-btn-hover-color: #0a0a0a;
  --tblr-btn-hover-bg: #fafafa;
  --tblr-btn-hover-border-color: #fafafa;
  --tblr-btn-active-color: #0a0a0a;
  --tblr-btn-active-bg: #fafafa;
  --tblr-btn-active-border-color: #fafafa;
}
/* Inlined Tabler css-variables illustrations follow --tblr-primary (the brand override above).
   The SVGs have no intrinsic width/height (stripped) so constrain + center them here. */
.auth-illustration svg { display: block; width: 100%; height: auto; max-width: 340px; margin-inline: auto; }

/* ============================================================
   Baked-in component overrides
   These Tabler dist classes hardcode the default blue (they do NOT read
   --tblr-primary), so the variable cluster above can't reach them. Re-point each
   to the brand / theme vars here — this is the rest of the skill's "Quick test".
   ============================================================ */

/* Pagination active page — decoupled from --tblr-primary (which is near-white in dark
   mode → would be unreadable). Inverts to the body text colour so it always contrasts
   the surface in both modes. Scoped to NexoTable's <ul>. */
.nx-pages {
  --tblr-pagination-active-bg: var(--tblr-body-color);
  --tblr-pagination-active-border-color: var(--tblr-body-color);
  --tblr-pagination-active-color: var(--tblr-bg-surface);
}
.nx-pages .page-item.active .page-link:hover,
.nx-pages .page-item.active .page-link:focus {
  background-color: var(--tblr-body-color);
  border-color: var(--tblr-body-color);
  color: var(--tblr-bg-surface);
}

/* Nav pills active (the app-wide tab style) → the brand colour + its contrast fg. */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--tblr-primary);
  color: var(--tblr-primary-fg);
}

/* List-group active row → a neutral themed highlight (left accent in the body colour),
   NOT the dist's baked primary-blue. */
.list-group-item.active {
  background-color: var(--tblr-bg-surface-secondary);
  border-color: var(--tblr-border-color);
  color: var(--tblr-body-color);
  box-shadow: inset 2px 0 0 0 var(--tblr-body-color);
}

/* Native file-input "Choose file" button → neutral themed surface (was the OS/dist default). */
.form-control[type="file"]::file-selector-button {
  background-color: var(--tblr-bg-surface-secondary);
  color: var(--tblr-body-color);
  border: 0;
  border-inline-end: var(--tblr-border-width, 1px) solid var(--tblr-border-color);
  margin-inline-end: .75rem;
}
.form-control[type="file"]:hover::file-selector-button {
  background-color: var(--tblr-bg-surface-tertiary);
}

/* ============================================================
   SCSS-baked derived vars + form focus  (per the updated Tabler skill)
   Tabler pre-computes these from $primary at build time as hardcoded values,
   so overriding --tblr-primary alone doesn't reach them. Re-derive from the
   brand at runtime with color-mix. (--tblr-info kept functional on purpose.)
   ============================================================ */

/* ---------- LIGHT MODE ---------- */
:root {
  --tblr-primary-lt:      color-mix(in oklab, var(--tblr-primary) 10%, transparent);
  --tblr-primary-lt-rgb:  var(--tblr-primary-rgb);
  --tblr-primary-darken:  color-mix(in oklab, var(--tblr-primary), transparent 20%);
  --tblr-active-bg:       rgba(var(--tblr-primary-rgb), 0.04);
  --tblr-link-hover-color-rgb: var(--tblr-secondary-rgb);
  --tblr-blue:            var(--tblr-primary);   /* monochrome: kill the raw-blue anchor */
  --tblr-blue-rgb:        var(--tblr-primary-rgb);
  --tblr-form-focus-border-color: color-mix(in oklab, var(--tblr-primary) 50%, white);
}

/* Form focus borders → brand tint (Bootstrap ships these with !important, so we match). */
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.input-group-flat:focus-within .form-control,
.input-group-flat:focus-within .input-group-text {
  border-color: var(--tblr-form-focus-border-color) !important;
}

/* Switch toggle dot colour on focus (encoded in an SVG data URL). */
.form-switch .form-check-input:focus {
  --tblr-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%238C8C8E'/%3e%3c/svg%3e");
}

/* ---------- DARK MODE ---------- */
[data-bs-theme="dark"] {
  --tblr-active-bg:       rgba(var(--tblr-primary-rgb), 0.08);  /* the dark dropdown-active leak */
  --tblr-primary-lt:      color-mix(in oklab, var(--tblr-primary) 10%, transparent);
  --tblr-primary-lt-rgb:  var(--tblr-primary-rgb);
  --tblr-primary-darken:  color-mix(in oklab, var(--tblr-primary), transparent 20%);
  --tblr-link-hover-color-rgb: var(--tblr-secondary-rgb);
  --tblr-blue:            var(--tblr-primary);
  --tblr-blue-rgb:        var(--tblr-primary-rgb);
  --tblr-form-focus-border-color: color-mix(in oklab, var(--tblr-primary) 50%, black);
}
[data-bs-theme="dark"] .form-switch .form-check-input:focus {
  --tblr-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23727272'/%3e%3c/svg%3e");
}

/* Checked switch in dark mode. The brand --tblr-primary is near-white (#fafafa)
   in dark mode, so the accent-coloured track + Tabler's white knob render
   white-on-white (the knob disappears). Mirror light mode (dark track + white
   knob) by forcing a white track + a DARK knob in dark mode. */
[data-bs-theme="dark"] .form-switch .form-check-input:checked {
  background-color: var(--tblr-primary);
  border-color: var(--tblr-primary);
  --tblr-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2318181b'/%3e%3c/svg%3e");
}

/* Checked checkbox + radio in dark mode — same root cause as the switch above.
   Tabler fills a checked box with --tblr-primary (near-white #fafafa in dark mode)
   and draws the tick/dot via --tblr-form-check-bg-image with a WHITE stroke/fill,
   so the mark renders white-on-white (invisible). Mirror light mode (dark box +
   white mark) by keeping the white box and forcing a DARK tick/dot in dark mode. */
[data-bs-theme="dark"] .form-check-input:checked[type="checkbox"] {
  --tblr-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'%3e%3cpath fill='none' stroke='%2318181b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8.5l2.5 2.5l5.5 -5.5'/%3e%3c/svg%3e");
}
[data-bs-theme="dark"] .form-check-input:checked[type="radio"] {
  --tblr-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3ccircle r='3' fill='%2318181b' cx='8' cy='8' /%3e%3c/svg%3e");
}

/* ============================================================
   Modern shell (rounded + soft): var-only refresh
   Tabler derives every radius from a single scale var and reads --tblr-box-shadow*
   on cards/dropdowns/modals, so bumping these globally rounds and lifts the whole
   panel without touching any component markup. Reversible: delete this block.
   ============================================================ */
:root {
  /* One knob scales ALL radii (sm 4 / md 6 / lg 8 px * scale). 1.5 => 6/9/12px. */
  --tblr-border-radius-scale: 1.5;

  /* Shared height for the sidebar logo card + the content top bar, so they always match and
     resize together. Bump this one value to make both taller. */
  --nx-topbar-h: 4rem;

  /* Softer, layered shadows (default Tabler card shadow is nearly flat). */
  --tblr-box-shadow-sm: 0 1px 2px rgba(9, 9, 11, .05);
  --tblr-box-shadow:    0 1px 3px rgba(9, 9, 11, .06), 0 1px 2px -1px rgba(9, 9, 11, .05);
  --tblr-box-shadow-lg: 0 12px 28px -8px rgba(9, 9, 11, .14), 0 6px 12px -6px rgba(9, 9, 11, .08);
  --tblr-card-box-shadow: var(--tblr-box-shadow);
}

/* Cards: give every card the soft shadow + keep the hairline border a touch lighter,
   so surfaces read as lifted panels rather than flat boxes. */
.card {
  box-shadow: var(--tblr-box-shadow);
}

/* Dark mode: shadows need real black (rgba-body would be near-white) and a bit more depth. */
[data-bs-theme="dark"] {
  --tblr-box-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --tblr-box-shadow:    0 1px 3px rgba(0, 0, 0, .5), 0 1px 2px -1px rgba(0, 0, 0, .4);
  --tblr-box-shadow-lg: 0 14px 32px -8px rgba(0, 0, 0, .6), 0 6px 14px -6px rgba(0, 0, 0, .45);
  --tblr-card-box-shadow: var(--tblr-box-shadow);
}

/* ============================================================
   Sectioned sidebar (nx-side-card): floating rounded panels
   The vertical sidebar is split into logo / search / nav / user panels with gaps,
   each a lifted surface. Scoped to lg+ so the mobile collapse stays Tabler-default.
   (Custom layout, requested.)
   ============================================================ */
@media (min-width: 992px) {
  .nx-sidebar {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0;
  }
  /* Wider sidebar (Tabler hardcodes 15rem on the aside + the content offset). Override the aside
     width AND the matching page offsets so the main content stays aligned. Same specificity as
     Tabler's rules, so source order (this file loads after tabler.min.css) wins. */
  .nx-sidebar.navbar-vertical { width: 17.5rem; }
  .nx-sidebar.navbar-vertical ~ .page-wrapper { margin-left: 17.5rem; }
  .nx-sidebar.navbar-vertical ~ .page { padding-left: 17.5rem; }
  /* Tabler zeroes padding on the vertical navbar's direct container
     (.navbar-vertical.navbar-expand-lg > [class^=container]); match its specificity + !important
     so the outer inset (top / bottom / left / right gap to the screen edges) actually applies. */
  .nx-sidebar.navbar-vertical > .nx-side-stack {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: .5rem;
    padding: 1rem !important;
  }
  .nx-side-collapse {
    display: flex !important;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    gap: .5rem;
    padding: 0;
    overflow: visible;
  }
  .nx-side-card {
    background: var(--tblr-bg-surface);
    border: var(--tblr-border-width, 1px) solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius-lg);
    box-shadow: var(--tblr-box-shadow);
  }
  .nx-side-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--nx-topbar-h);
    padding: 0 .75rem;
  }
  .nx-side-search { padding: 0; }
  .nx-side-nav {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: .5rem;
  }
  .nx-side-nav-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }
  .nx-side-nav-foot {
    flex-shrink: 0;
    padding-top: .5rem;
    margin-top: .25rem;
  }
  .nx-side-nav .navbar-nav { padding: 0; }
  .nx-side-user { padding: .5rem; }
}

/* ============================================================
   Sidebar nav active/hover  — soft tint pill
   Active entry = rounded pill with a soft brand tint + brand-coloured icon/text; hover = fainter
   tint. Scoped to the sidebar nav card so it never touches Tabler tabs/pills elsewhere.
   ============================================================ */
.nx-side-nav .navbar-nav .nav-link {
  border-radius: var(--tblr-border-radius);
  transition: background-color .12s ease, color .12s ease;
}
.nx-side-nav .navbar-nav .nav-link:hover {
  background-color: var(--tblr-active-bg);
}
.nx-side-nav .navbar-nav > .nav-item.active > .nav-link,
.nx-side-nav .navbar-nav .nav-link.active,
.nx-side-nav .navbar-nav .nav-link.show {
  background-color: var(--tblr-primary-lt);
  color: var(--tblr-primary);
  font-weight: 500;
  box-shadow: none;
}
.nx-side-nav .navbar-nav > .nav-item.active > .nav-link .nav-link-icon,
.nx-side-nav .navbar-nav .nav-link.active .nav-link-icon {
  color: var(--tblr-primary);
}
/* Sub-items (Nodes / Provisioning dropdowns): rounded inset pills, subtle active (no full-bleed bar). */
.nx-side-nav .dropdown-menu .dropdown-item {
  border-radius: var(--tblr-border-radius);
  width: auto;
  margin: 1px .25rem;
  padding-inline: .5rem;
}
.nx-side-nav .dropdown-menu .dropdown-item.active,
.nx-side-nav .dropdown-menu .dropdown-item:active {
  background-color: var(--tblr-active-bg);
  color: var(--tblr-primary);
  font-weight: 500;
}
.nx-side-nav .dropdown-menu .dropdown-item:hover {
  background-color: var(--tblr-active-bg);
  color: var(--tblr-body-color);
}

/* ============================================================
   Content top bar  (page-header as a floating card)
   Float the content header like the sidebar logo card: same 1rem top inset so they sit on one
   line, rounded surface + soft shadow, gap to the right edge. Holds the theme toggle top-right.
   Scoped to lg+ so mobile keeps the default full-width header.
   ============================================================ */
@media (min-width: 992px) {
  .page-wrapper > .page-header {
    display: flex;
    align-items: center;
    min-height: var(--nx-topbar-h);
    margin: 1rem 1rem 0 0;
    padding: 0 1rem;
    background: var(--tblr-bg-surface);
    border: var(--tblr-border-width, 1px) solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius-lg);
    box-shadow: var(--tblr-box-shadow);
  }
  .page-wrapper > .page-header > .container-fluid {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
  /* The sidebar already provides the left gap (its own right margin), so the content needs no extra
     left inset: zero the container's left padding so content sits flush against the sidebar gap.
     Keep a right gutter so content does not touch the viewport edge. */
  .page-wrapper > .page-body > .container-fluid {
    padding-left: 0;
    padding-right: 1rem;
  }
}



/* ============================================================
   Mobile sidebar drawer (slides from the LEFT). Self-contained (js-nav-drawer in app.js), so the
   desktop static sidebar (lg+) is untouched. Only active below lg.
   ============================================================ */
@media (max-width: 991.98px) {
  .nx-side-collapse {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 17rem;
    max-width: 85vw;
    z-index: 1045;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1rem;
    background: var(--tblr-bg-surface);
    border-right: var(--tblr-border-width, 1px) solid var(--tblr-border-color);
    transform: translateX(-100%);
    transition: transform .25s ease;
    overflow-y: auto;
  }
  .nx-side-collapse { padding: .75rem; }
  .nx-side-collapse.show { transform: translateX(0); }
  /* Left-align + flush the nav in the drawer (Tabler centres it in a collapsed navbar; the
     flex-start rule is lg+-only, so force it here with id specificity + !important). */
  #sidebar-menu .navbar-nav { align-items: stretch !important; padding-left: 0; margin-left: 0; }
  #sidebar-menu .nav-item { width: 100%; text-align: left; }
  #sidebar-menu .navbar-nav .nav-link {
    display: flex !important;
    justify-content: flex-start !important;
    text-align: left !important;
    padding-left: .5rem;
    padding-right: .5rem;
  }
  #sidebar-menu .dropdown-menu { padding-left: 0; }
  #sidebar-menu .dropdown-item { justify-content: flex-start !important; text-align: left !important; padding-left: .75rem; }
  .nx-nav-backdrop { position: fixed; inset: 0; z-index: 1044; background: rgba(0, 0, 0, .45); }
  body.nx-nav-open { overflow: hidden; }
}