/*
 * this.nl Brand Theme Override for Tabler
 * Loaded AFTER tabler.min.css to override Tabler/Bootstrap CSS custom properties.
 * Non-destructive: remove this <link> tag to revert to default Tabler theme.
 *
 * Colors now come from the canonical token layer: inquerio-tokens.css
 * (styleguide v4, 260715). This file MUST load AFTER inquerio-tokens.css so the
 * var(--blue-*) / var(--grey-*) references below resolve. The core palette was
 * de-duplicated onto those tokens (exact-match swap, no visual change):
 *   --blue-38 azure · --blue-3 midnight · --blue-21 slate · --blue-79 aero ·
 *   --blue-76 lilac · --grey-6 obsidian · --grey-39 stone · --grey-76 silver ·
 *   --grey-87 warm-sand · --grey-94 pale-sand · --grey-96 soft-grey · --white
 *
 * DELIBERATE DIVERGENCE from v4 (kept as raw hex — do NOT swap to tokens
 * without a design decision, the values differ and swapping would change the UI):
 *   button/link hover  #0127B2   ← v4 --btn-primary-hover  #105693
 *   success            #1BAD8A   ← v4 --status-ok          #1F8A5B
 *   danger             #FB3E3E   ← v4 --status-bad          #C0392B
 *   warning            #F68E1E   ← v4 --status-warn         #C77A1E
 * The dashboard's current semantic palette is punchier than v4's muted status
 * colors; aligning them is a separate brand call (see style-guide Brand section).
 *
 * rgba(...) and --*-rgb triplets are left as literals: tokens are hex only.
 */

/* ==========================================================================
   Light Mode
   ========================================================================== */

:root,
[data-bs-theme=light] {
  /* Primary — Tabler uses both --tblr-* and --bs-* */
  --tblr-primary: var(--blue-38);
  --tblr-primary-rgb: 20, 105, 174;
  --tblr-primary-text-emphasis: #0a3557;
  --tblr-primary-bg-subtle: #d0e4f2;
  --tblr-primary-border-subtle: #8ab4d7;
  --bs-primary: var(--blue-38);
  --bs-primary-rgb: 20, 105, 174;

  /* Secondary — this.nl uses Stone Grey, not Tabler's default #6b7280 */
  --tblr-secondary: var(--grey-39);
  --tblr-secondary-rgb: 94, 92, 90;
  --tblr-muted: var(--grey-39);
  --tblr-muted-rgb: 94, 92, 90;
  --bs-secondary: var(--grey-39);
  --bs-secondary-rgb: 94, 92, 90;

  /* Semantic colors mapped to this.nl palette */
  --tblr-success: #1BAD8A;
  --tblr-success-rgb: 27, 173, 138;
  --tblr-danger: #FB3E3E;
  --tblr-danger-rgb: 251, 62, 62;
  --tblr-warning: #F68E1E;
  --tblr-warning-rgb: 246, 142, 30;
  --tblr-info: var(--blue-38);
  --tblr-info-rgb: 20, 105, 174;

  /* Links */
  --tblr-link-color: var(--blue-38);
  --tblr-link-color-rgb: 20, 105, 174;
  --tblr-link-hover-color: #0127B2;
  --tblr-link-hover-color-rgb: 1, 39, 178;
  --bs-link-color: var(--blue-38);
  --bs-link-color-rgb: 20, 105, 174;
  --bs-link-hover-color: #0127B2;

  /* Backgrounds */
  --tblr-body-bg: var(--grey-96);
  --tblr-body-bg-rgb: 243, 243, 243;
  --tblr-secondary-bg: var(--grey-94);
  --tblr-secondary-bg-rgb: 239, 238, 235;
  --tblr-tertiary-bg: var(--white);
  --tblr-tertiary-bg-rgb: 255, 255, 255;
  --bs-body-bg: var(--grey-96);
  --bs-body-bg-rgb: 243, 243, 243;
  --bs-secondary-bg: var(--grey-94);
  --bs-tertiary-bg: var(--white);

  /* Text */
  --tblr-body-color: var(--grey-39);
  --tblr-body-color-rgb: 94, 92, 90;
  --tblr-heading-color: var(--grey-6);
  --tblr-secondary-color: rgba(94, 92, 90, 0.75);
  --tblr-emphasis-color: var(--grey-6);
  --bs-body-color: var(--grey-39);
  --bs-body-color-rgb: 94, 92, 90;
  --bs-heading-color: var(--grey-6);
  --bs-secondary-color: rgba(94, 92, 90, 0.75);

  /* Borders */
  --tblr-border-color: var(--grey-87);
  --tblr-border-color-translucent: rgba(20, 20, 20, 0.1);
  --bs-border-color: var(--grey-87);

  /* Border Radius — this.nl uses 8px (--radius-md) as standard */
  --tblr-border-radius: 0.5rem;
  --tblr-border-radius-lg: 0.75rem;
  --tblr-border-radius-sm: 0.25rem;
  --tblr-border-radius-xl: 1.25rem;
  --bs-border-radius: 0.5rem;
  --bs-border-radius-lg: 0.75rem;
  --bs-border-radius-sm: 0.25rem;

  /* Shadows — this.nl elevation system (exact extracted values) */
  --tblr-box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.08);       /* --elevation-normal scaled for light bg */
  --tblr-box-shadow-sm: 0px 2px 15px rgba(0, 0, 0, 0.04);    /* --elevation-pressed scaled */
  --tblr-box-shadow-lg: 0px 8px 40px rgba(0, 0, 0, 0.12);    /* --elevation-hover scaled */
  --bs-box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.08);
  --bs-box-shadow-sm: 0px 2px 15px rgba(0, 0, 0, 0.04);
  --bs-box-shadow-lg: 0px 8px 40px rgba(0, 0, 0, 0.12);

  /* Focus Ring */
  --tblr-focus-ring-color: rgba(20, 105, 174, 0.4);
  --bs-focus-ring-color: rgba(20, 105, 174, 0.4);
}

/* ==========================================================================
   Dark Mode
   ========================================================================== */

[data-bs-theme=dark] {
  /* Primary — keep Azure Blue for filled elements */
  --tblr-primary: var(--blue-38);
  --tblr-primary-rgb: 20, 105, 174;
  --tblr-primary-text-emphasis: var(--blue-79);
  --tblr-primary-bg-subtle: #0a2a45;
  --tblr-primary-border-subtle: var(--blue-38);
  --bs-primary: var(--blue-38);
  --bs-primary-rgb: 20, 105, 174;

  /* Secondary — dark mode uses Lavender Grey */
  --tblr-secondary: var(--blue-76);
  --tblr-secondary-rgb: 181, 184, 220;
  --tblr-muted: var(--blue-76);
  --tblr-muted-rgb: 181, 184, 220;
  --bs-secondary: var(--blue-76);
  --bs-secondary-rgb: 181, 184, 220;

  /* Semantic colors */
  --tblr-success: #1BAD8A;
  --tblr-success-rgb: 27, 173, 138;
  --tblr-danger: #FB3E3E;
  --tblr-danger-rgb: 251, 62, 62;
  --tblr-warning: #F68E1E;
  --tblr-warning-rgb: 246, 142, 30;

  /* Links — Aero for WCAG AA compliance (~11:1 on Midnight Blue) */
  --tblr-link-color: var(--blue-79);
  --tblr-link-color-rgb: 178, 195, 255;
  --tblr-link-hover-color: #c9d5ff;
  --tblr-link-hover-color-rgb: 201, 213, 255;
  --bs-link-color: var(--blue-79);
  --bs-link-color-rgb: 178, 195, 255;
  --bs-link-hover-color: #c9d5ff;

  /* Backgrounds */
  --tblr-body-bg: var(--blue-3);
  --tblr-body-bg-rgb: 0, 8, 40;
  --tblr-secondary-bg: var(--blue-21);
  --tblr-secondary-bg-rgb: 39, 49, 81;
  --tblr-tertiary-bg: var(--blue-21);
  --tblr-tertiary-bg-rgb: 39, 49, 81;
  --bs-body-bg: var(--blue-3);
  --bs-body-bg-rgb: 0, 8, 40;
  --bs-secondary-bg: var(--blue-21);
  --bs-tertiary-bg: var(--blue-21);

  /* Text */
  --tblr-body-color: var(--grey-76);
  --tblr-body-color-rgb: 186, 186, 186;
  --tblr-heading-color: var(--grey-96);
  --tblr-emphasis-color: var(--grey-96);
  --tblr-secondary-color: rgba(186, 186, 186, 0.75);
  --bs-body-color: var(--grey-76);
  --bs-body-color-rgb: 186, 186, 186;
  --bs-heading-color: var(--grey-96);
  --bs-secondary-color: rgba(186, 186, 186, 0.75);

  /* Borders */
  --tblr-border-color: var(--blue-21);
  --tblr-border-color-translucent: rgba(178, 195, 255, 0.1);
  --bs-border-color: var(--blue-21);

  /* Shadows — this.nl elevation (exact values for dark backgrounds) */
  --tblr-box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.25);
  --tblr-box-shadow-sm: 0px 2px 15px rgba(0, 0, 0, 0.15);
  --tblr-box-shadow-lg: 0px 8px 40px rgba(0, 0, 0, 0.35);
  --bs-box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.25);
  --bs-box-shadow-sm: 0px 2px 15px rgba(0, 0, 0, 0.15);
  --bs-box-shadow-lg: 0px 8px 40px rgba(0, 0, 0, 0.35);

  /* Focus Ring */
  --tblr-focus-ring-color: rgba(178, 195, 255, 0.4);
  --bs-focus-ring-color: rgba(178, 195, 255, 0.4);
}

/* ==========================================================================
   Sidebar — Tabler uses .navbar-vertical
   ========================================================================== */

.navbar-vertical {
  background-color: var(--blue-3) !important;
  color: var(--white);
}

.navbar-vertical .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.85);
}

.navbar-vertical .navbar-nav .nav-link:hover {
  color: var(--white) !important;
  background-color: rgba(20, 105, 174, 0.25) !important;
}

.navbar-vertical .navbar-nav .nav-item.active > .nav-link,
.navbar-vertical .navbar-nav .nav-link.active {
  color: var(--white);
  background-color: var(--blue-38);
}

.navbar-vertical .navbar-nav .nav-link .nav-link-icon {
  color: rgba(255, 255, 255, 0.7);
}

.navbar-vertical .navbar-nav .nav-item.active > .nav-link .nav-link-icon,
.navbar-vertical .navbar-nav .nav-link.active .nav-link-icon {
  color: var(--white);
}

/* Submenu links */
.navbar-vertical .navbar-nav .dropdown-menu .dropdown-item {
  color: rgba(255, 255, 255, 0.75);
}

.navbar-vertical .navbar-nav .dropdown-menu .dropdown-item:hover {
  color: var(--white);
  background-color: rgba(20, 105, 174, 0.15);
}

.navbar-vertical .navbar-nav .dropdown-menu .dropdown-item.active {
  color: var(--white);
  background-color: rgba(20, 105, 174, 0.25);
}

/* Sidebar section headers */
.navbar-vertical .navbar-heading {
  color: rgba(255, 255, 255, 0.4);
}

/* Sidebar brand */
.navbar-vertical .navbar-brand {
  color: var(--white);
}

/* ==========================================================================
   Dark Mode Sidebar Overrides
   ========================================================================== */

[data-bs-theme=dark] .navbar-vertical {
  background-color: var(--blue-3) !important;
}

[data-bs-theme=dark] .navbar-vertical .navbar-nav .nav-link:hover {
  background-color: rgba(178, 195, 255, 0.08) !important;
}

[data-bs-theme=dark] .navbar-vertical .navbar-nav .nav-item.active > .nav-link,
[data-bs-theme=dark] .navbar-vertical .navbar-nav .nav-link.active {
  background-color: rgba(178, 195, 255, 0.12);
}

/* ==========================================================================
   Component Overrides — Light Mode
   ========================================================================== */

/* Primary buttons — use this.nl exact states */
.btn-primary {
  --bs-btn-bg: var(--blue-38);
  --bs-btn-border-color: var(--blue-38);
  --bs-btn-hover-bg: #0127B2;
  --bs-btn-hover-border-color: #0127B2;
  --bs-btn-active-bg: #0127B2;
  --bs-btn-active-border-color: #0127B2;
  --bs-btn-disabled-bg: var(--grey-76);
  --bs-btn-disabled-border-color: var(--grey-76);
}

.btn-outline-primary {
  --bs-btn-color: var(--blue-38);
  --bs-btn-border-color: var(--blue-38);
  --bs-btn-hover-bg: var(--blue-38);
  --bs-btn-hover-border-color: var(--blue-38);
  --bs-btn-active-bg: #0127B2;
  --bs-btn-active-border-color: #0127B2;
}

/* Ghost/label button — Tabler calls it btn-ghost-primary */
.btn-ghost-primary,
.btn-label-primary {
  --bs-btn-bg: rgba(20, 105, 174, 0.16);
  --bs-btn-color: var(--blue-38);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-bg: rgba(20, 105, 174, 0.24);
  --bs-btn-hover-color: var(--blue-38);
  --bs-btn-active-bg: rgba(20, 105, 174, 0.24);
  --bs-btn-active-color: var(--blue-38);
}

/* Success button */
.btn-success {
  --bs-btn-bg: #1BAD8A;
  --bs-btn-border-color: #1BAD8A;
}

/* Danger button */
.btn-danger {
  --bs-btn-bg: #FB3E3E;
  --bs-btn-border-color: #FB3E3E;
}

/* Warning button */
.btn-warning {
  --bs-btn-bg: #F68E1E;
  --bs-btn-border-color: #F68E1E;
}

/* Cards */
.card {
  border-color: var(--grey-87);
}

[data-bs-theme=dark] .card {
  background-color: var(--blue-21);
  border-color: var(--blue-21);
}

/* Table zebra stripes */
.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-bg-type: rgba(0, 0, 0, 0.02);
}

/* Badge — compatibility shim for Materialize bg-label-* classes */
.badge.bg-primary,
.badge.bg-label-primary {
  background-color: rgba(20, 105, 174, 0.16) !important;
  color: var(--blue-38) !important;
}

.badge.bg-label-success {
  background-color: rgba(27, 173, 138, 0.16) !important;
  color: #1BAD8A !important;
}

.badge.bg-label-danger {
  background-color: rgba(251, 62, 62, 0.16) !important;
  color: #FB3E3E !important;
}

.badge.bg-label-warning {
  background-color: rgba(246, 142, 30, 0.16) !important;
  color: #F68E1E !important;
}

.badge.bg-label-secondary {
  background-color: rgba(94, 92, 90, 0.16) !important;
  color: var(--grey-39) !important;
}

.badge.bg-label-info {
  background-color: rgba(20, 105, 174, 0.16) !important;
  color: var(--blue-38) !important;
}

[data-bs-theme=dark] .badge.bg-label-primary {
  background-color: rgba(178, 195, 255, 0.16) !important;
  color: var(--blue-79) !important;
}

/* Form controls */
.form-control:focus,
.form-select:focus {
  border-color: var(--blue-38);
  box-shadow: 0 0 0 0.15rem rgba(20, 105, 174, 0.4);
}

[data-bs-theme=dark] .form-control:focus,
[data-bs-theme=dark] .form-select:focus {
  border-color: var(--blue-79);
  box-shadow: 0 0 0 0.15rem rgba(178, 195, 255, 0.4);
}

/* Nav pills active */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--blue-38);
}

/* Pagination active */
.page-item.active .page-link {
  background-color: var(--blue-38);
  border-color: var(--blue-38);
}

/* Progress bar */
.progress-bar {
  background-color: var(--blue-38);
}

/* Form switch checked */
.form-check-input:checked {
  background-color: var(--blue-38);
  border-color: var(--blue-38);
}

/* ==========================================================================
   Typography — this.nl exact token values per size
   Font: Inter, weight 500 for headings, per-size letter-spacing & line-height
   ========================================================================== */

body {
  font-family: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.875rem; /* 14px — dashboard-appropriate (this.nl website uses 16px) */
  line-height: 1.5;    /* this.nl --line-height-sm: 150% */
  font-weight: 400;
}

h1, .h1 { font-weight: 500; letter-spacing: -0.15rem;  line-height: 104%; } /* --ls-5xl, --lh-5xl */
h2, .h2 { font-weight: 500; letter-spacing: -0.1rem;   line-height: 105%; } /* --ls-4xl, --lh-4xl */
h3, .h3 { font-weight: 500; letter-spacing: -0.08rem;  line-height: 106%; } /* --ls-3xl, --lh-3xl */
h4, .h4 { font-weight: 500; letter-spacing: -0.07rem;  line-height: 107%; } /* --ls-2xl, --lh-2xl */
h5, .h5 { font-weight: 500; letter-spacing: -0.045rem; line-height: 108%; } /* --ls-xl,  --lh-xl  */
h6, .h6 { font-weight: 500; letter-spacing: -0.0375rem;line-height: 130%; } /* --ls-lg,  --lh-lg  */

.card-title,
.page-title {
  font-weight: 500;
  letter-spacing: -0.0375rem; /* --ls-lg */
}

/* ==========================================================================
   Login Video Background
   ========================================================================== */

.login-video-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  overflow: hidden;
  background-color: var(--blue-3);
}

.login-video-bg video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 130%;
  min-height: 130%;
  width: auto;
  height: auto;
  object-fit: cover;
  will-change: translate, scale;
  translate: -50% -50%;
  scale: 1.15;
  animation:
    driftPos   53s ease-in-out infinite alternate,
    driftScale 71s ease-in-out infinite alternate;
}

@keyframes driftPos {
  0%   { translate: -57% -51%; }
  100% { translate: -43% -49%; }
}

@keyframes driftScale {
  0%   { scale: 1.10; }
  100% { scale: 1.22; }
}

.login-video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(0, 8, 40, 0.65) 0%,
    rgba(20, 105, 174, 0.25) 50%,
    rgba(0, 8, 40, 0.65) 100%
  );
}

/* Tabler sets an opaque body background (--tblr-body-bg). The video sits at
   position:fixed; z-index:-2, so an opaque body paints over it. Make the
   login page body transparent so the looping video shows through again. */
.login-video-page {
  background-color: transparent !important;
}

/* htmx spinner indicators inside buttons must not reserve layout space while
   idle. The spinner span is opacity:0 (invisible) but still display:block with
   width + margin, which pushes centered button text (e.g. "Next") off-center
   inside a .btn.d-grid. Collapse it when idle; reveal it during the request. */
.btn .spinner-border.htmx-indicator {
  display: none;
}
.btn.htmx-request .spinner-border.htmx-indicator,
.htmx-request .btn .spinner-border.htmx-indicator {
  display: inline-block;
}

/* Auth card elevated above video background.
   NOTE: the Tabler restyle dropped the .authentication-wrapper element, so the
   current markup is .login-video-page > … > .card. Target .card directly. */
.login-video-page .card {
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 40px rgba(0, 8, 40, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .login-video-bg video {
    animation: none;
    translate: -50% -50%;
    scale: 1.15;
  }
}

/* ==========================================================================
   Tagify — ensure remove button (X) is visible with Tabler theme
   ========================================================================== */

.tagify__tag__removeBtn {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 14px;
  height: 14px;
  color: var(--tag-remove-btn-color, black);
  cursor: pointer;
}

.tagify__tag__removeBtn::after {
  content: "\00D7" !important;
}

/* ==========================================================================
   Badge text contrast — Tabler bg-* utilities don't auto-set text color,
   so dark backgrounds need explicit white text.
   ========================================================================== */

.badge.bg-secondary,
.badge.bg-primary,
.badge.bg-info,
.badge.bg-danger {
  color: var(--white) !important;
}

.badge.bg-warning {
  color: var(--grey-6) !important;
}

[data-bs-theme=dark] .badge.bg-secondary {
  background-color: rgba(255, 255, 255, 0.12) !important;
  color: var(--white) !important;
}

/* Middle-align table cells so mixed content (text, badges, icon buttons)
   shares a visual baseline instead of snapping to the top of the cell. */
.table > tbody > tr > td,
.table > tbody > tr > th {
  vertical-align: middle;
}

/* NOTE: previously we clipped `.card-body.p-0` to the card's rounded
   corners via `overflow: hidden`, but that clips dropdown menus that
   originate inside table rows. Priority is the dropdown working, so we
   accept a small visual mismatch where the thead edges meet the card's
   rounded corners. */

/* Ensure html/body/.page all share one background so no seam appears where
   one element's min-height ends and the next begins. */
html, body, .page, .page-wrapper, .page-body {
  background-color: var(--tblr-body-bg);
}

/* ==========================================================================
   Pre/code blocks — Tabler sets pre color to --tblr-light (near-white),
   making preformatted text invisible on light backgrounds.
   ========================================================================== */

pre {
  color: var(--tblr-body-color) !important;
}

pre code {
  color: inherit !important;
}