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

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

/* Steps counter: Tabler hardcodes the step number to --tblr-white, which is
   invisible on the near-white dark-mode primary circle (white-on-white). The dot
   background is --tblr-primary, so the number must be its contrast fg. */
.steps-counter .step-item::before {
  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");
}

/* ---------- Scrollbar-gutter override ----------
   Tabler ships `@media (min-width:992px){:host,:root{margin-left:calc(100vw - 100%)}}`
   to offset content by the scrollbar width. It produced an asymmetric gap on the left,
   so we zero it out (loads after tabler.min.css → wins on source order). */
@media (min-width: 992px) {
  :host,
  :root {
    margin-left: 0;
    margin-right: 0;
  }
}

/* NexoVirt logo (partials/logo.php) — structure follows the theme body colour; the centre node
   follows --tblr-primary (set in the SVG). Mirrors the panel/admin app.css so the logo renders
   identically (esp. in dark mode) across all three apps. */
.nx-logo { color: var(--tblr-body-color); display: block; }

/* Sidebar nav-link count badges (e.g. the Beta "Approved"/"Pending" status badge).
   Tabler core positions ANY `.navbar .navbar-nav .nav-link .badge` ABSOLUTELY at the nav-link's
   top-right with `transform: translate(50%,-50%)` — that's for a notification DOT on a horizontal
   top-navbar icon. In our VERTICAL sidebar it mis-targets the inline `ms-auto` badges: they get
   shoved half their width past the fixed 15rem edge and clipped. Make them normal inline items
   again so `ms-auto` right-aligns them fully inside the sidebar. (Matches panel/admin app.css.) */
.navbar-vertical .navbar-nav .nav-link .badge {
  position: static;
  transform: none;
  top: auto;
  right: auto;
}

/* ---------- Architecture-diagram flow connectors (sections/architecture.php) ----------
   The animated "marching" dashed lines between the component cards, ported 1:1 from the panel's
   NAT / network-map (.gd-conn) so the landing diagram matches that view. --gd-c sets the line
   colour; defaults to the brand. Connectors are a short fixed line so the cards take the width. */
.gd-conn {
  flex: 1 1 auto;
  min-width: 40px;
  height: 3px;
  align-self: center;
  border-radius: 2px;
  --gd-c: var(--tblr-primary);
  background-image: repeating-linear-gradient(90deg, var(--gd-c) 0 7px, transparent 7px 15px);
  background-size: 15px 100%;
  animation: gd-march .6s linear infinite;
}
/* Coloured route variants (the diagram lines). */
.gd-conn-azure  { --gd-c: var(--tblr-azure); }
.gd-conn-purple { --gd-c: var(--tblr-purple); }
.gd-conn-green  { --gd-c: var(--tblr-green); }
.gd-conn-muted  { --gd-c: var(--tblr-secondary); }
/* Vertical variant — used between the stacked cards on small screens (the horizontal line dangles
   off the side once the cards wrap, so we swap to a vertical connector there). */
.gd-conn-v {
  flex: 0 0 auto;
  width: 3px;
  height: 32px;
  min-width: 0;
  align-self: center;
  background-image: repeating-linear-gradient(180deg, var(--gd-c) 0 7px, transparent 7px 15px);
  background-size: 100% 15px;
  animation-name: gd-march-v;
}
@keyframes gd-march { to { background-position: 15px 0; } }
@keyframes gd-march-v { to { background-position: 0 15px; } }
@media (prefers-reduced-motion: reduce) { .gd-conn { animation: none; } }

/* ── Hero coverflow showcase (Swiper) ────────────────────────────────────────────────────────────
   The active screenshot sits centered in a browser-window card at full size/opacity; the previous
   and next shots peek in angled (Swiper's coverflowEffect) and are dimmed by the rules below. Dots
   sit below; a small notification card floats over the bottom-right corner. Brand-monochrome via
   --tblr-* only. */

/* Single browser-framed screenshot that crossfades (side-by-side hero, product on the right). */
.hero-coverflow { padding-block: .5rem; }
.heroSwiper {
  overflow: hidden;
  padding-bottom: 2rem;          /* room for the pagination dots below the card */
}
.heroSwiper .swiper-slide { width: 100%; }
.heroSwiper .swiper-slide .card { margin: 0; }

/* Pagination dots — brand-colored active dot. */
.heroSwiper .swiper-pagination { position: static; margin-top: .85rem; }
.heroSwiper .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  background-color: var(--tblr-border-color-active, #98a2b3);
  opacity: .4;
  margin: 0 5px !important;
  transition: opacity .15s ease, background-color .15s ease;
}
.heroSwiper .swiper-pagination-bullet:hover { opacity: .75; }
.heroSwiper .swiper-pagination-bullet-active {
  opacity: 1;
  background-color: var(--tblr-primary);
}

/* Reduced motion: hold the deck still, drop the dim transition. */
@media (prefers-reduced-motion: reduce) {
  .heroSwiper .swiper-slide { transition: none; }
}

/* Wider page container: extend .container-xl on large screens to roughly halve the
   left/right whitespace (Tabler default caps at 1320px). Tune the 1600px to taste. */
@media (min-width: 1200px) {
  .container-xl { max-width: 1600px; }
}

/* ── "Start now" install terminal: always-dark card (works in both site themes), brand zinc palette. */
.install-terminal { border-radius: .9rem; overflow: hidden; border-color: #262628; }
.install-terminal-bar { background: #18181b; border-bottom: 1px solid #262628; }
.install-terminal-bar .status-dot { background: #52525b; }
.install-terminal-title { color: #a1a1aa; }
.install-terminal-bar .btn-ghost-secondary { color: #a1a1aa; }
.install-terminal-bar .btn-ghost-secondary:hover { color: #fafafa; background: rgba(255, 255, 255, .08); }
.install-terminal-body { background: #0a0a0a; }
.install-terminal-body pre,
.install-terminal-body code { color: #fafafa; background: transparent; font-size: 1rem; }
.install-prompt {
  color: #22c55e;
  font-family: var(--tblr-font-monospace, ui-monospace, monospace);
  font-weight: 700; font-size: 1.05rem;
}

/* Full-width "segment" bands with angled (diagonal/triangle) top + bottom edges — the section rhythm
   that breaks up the flat whitespace. `.hp-segment` = subtle tint, `.hp-segment-dark` = near-black
   focal band. Content stays in the normal container inside. */
.hp-segment,
.hp-segment-dark {
  position: relative;
  padding: 6.5rem 0;
  margin: 2.5rem 0;
  clip-path: polygon(0 2.6vw, 100% 0, 100% calc(100% - 2.6vw), 0 100%);
}
.hp-segment { background: var(--tblr-bg-surface-secondary); }

.hp-segment-dark { background: #0a0a0a; color: #fafafa; }
.hp-segment-dark h1, .hp-segment-dark h2, .hp-segment-dark .h1 { color: #fafafa; }
.hp-segment-dark .text-secondary { color: #a1a1aa !important; }
.hp-segment-dark .badge.bg-primary { background: #fafafa !important; color: #0a0a0a !important; }
.hp-segment-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;
}
.hp-segment-dark .btn-ghost-secondary { color: #d4d4d8; }
.hp-segment-dark .btn-ghost-secondary:hover { color: #fff; background: rgba(255, 255, 255, .08); }

@media (max-width: 767.98px) {
  .hp-segment,
  .hp-segment-dark { padding: 4rem 0; clip-path: polygon(0 4vw, 100% 0, 100% calc(100% - 4vw), 0 100%); }
}

/* "Up and running in three steps" — a connected step flow: numbered circle nodes joined by a line. */
.hiw-steps { display: flex; gap: 0; }
.hiw-step {
  flex: 1 1 0;
  text-align: center;
  padding: 0 1.5rem;
  position: relative;
}
.hiw-step-node {
  width: 4rem; height: 4rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.5rem; font-weight: 700;
  background: var(--tblr-primary); color: var(--tblr-primary-fg);
  position: relative; z-index: 1; margin-bottom: 1.5rem;
  box-shadow: 0 0 0 6px var(--tblr-primary-bg-subtle);
}
/* Connector line from this node's centre to the next node's centre (behind the circles). */
.hiw-step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 2rem; left: 50%; right: -50%;
  height: 2px;
  background: var(--tblr-border-color);
  z-index: 0;
}
@media (max-width: 767.98px) {
  .hiw-steps { flex-direction: column; gap: 2.5rem; }
  .hiw-step { padding: 0; }
  .hiw-step:not(:last-child)::before { display: none; }
}