/* ============================================================
   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");
}