/*
 * this.nl Brand Theme Override
 * Loaded AFTER core.css to override Bootstrap 5.3.8 CSS custom properties.
 * Non-destructive: remove this <link> tag to revert to the original theme.
 *
 * Color Reference (this.nl 2025 Brand Book):
 *   Azure Blue:    #1469AE  (primary, links, buttons)
 *   Midnight Blue: #000828  (dark backgrounds)
 *   Slate Blue:    #273151  (secondary dark surfaces)
 *   Aero:          #B2C3FF  (dark mode accent - WCAG AA safe)
 *   Obsidian Black:#141414  (headings)
 *   Stone Grey:    #5E5C5A  (body text)
 *   Silver Mist:   #BABABA  (dark mode body text)
 *   Warm Grey:     #DDDAD4  (borders)
 *   Pale Sand:     #EFEEEB  (secondary backgrounds)
 *   Soft Grey:     #F3F3F3  (page background)
 *
 * WARNING: Do NOT add template-customizer.js - it would clobber these overrides at runtime.
 */

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

:root,
[data-bs-theme=light] {
  /* Primary */
  --bs-primary: #1469AE;
  --bs-primary-rgb: 20, 105, 174;
  --bs-primary-text-emphasis: #0a3557;
  --bs-primary-bg-subtle: #d0e4f2;
  --bs-primary-border-subtle: #8ab4d7;

  /* Links */
  --bs-link-color: #1469AE;
  --bs-link-color-rgb: 20, 105, 174;
  --bs-link-hover-color: #105487;
  --bs-link-hover-color-rgb: 16, 84, 135;

  /* Backgrounds */
  --bs-body-bg: #F3F3F3;
  --bs-body-bg-rgb: 243, 243, 243;
  --bs-secondary-bg: #EFEEEB;
  --bs-tertiary-bg: #FFFFFF;

  /* Text */
  --bs-body-color: #5E5C5A;
  --bs-body-color-rgb: 94, 92, 90;
  --bs-heading-color: #141414;
  --bs-secondary-color: rgba(94, 92, 90, 0.75);

  /* Borders */
  --bs-border-color: #DDDAD4;

  /* Border Radius (8px brand standard) */
  --bs-border-radius: 0.5rem;
  --bs-border-radius-lg: 0.625rem;
  --bs-border-radius-sm: 0.375rem;

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

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

[data-bs-theme=dark] {
  /* Primary - use Aero for text/links (Azure Blue fails WCAG AA on Midnight Blue: 3.44:1) */
  --bs-primary: #1469AE;
  --bs-primary-rgb: 20, 105, 174;
  --bs-primary-text-emphasis: #B2C3FF;
  --bs-primary-bg-subtle: #0a2a45;
  --bs-primary-border-subtle: #1469AE;

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

  /* Backgrounds */
  --bs-body-bg: #000828;
  --bs-body-bg-rgb: 0, 8, 40;
  --bs-secondary-bg: #273151;
  --bs-tertiary-bg: #273151;

  /* Text */
  --bs-body-color: #BABABA;
  --bs-body-color-rgb: 186, 186, 186;
  --bs-heading-color: #F3F3F3;
  --bs-secondary-color: rgba(186, 186, 186, 0.75);

  /* Borders */
  --bs-border-color: #273151;

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

/* ==========================================================================
   Component Overrides - Light Mode
   ========================================================================== */

/* Sidebar */
.layout-menu,
.menu {
  background-color: #000828 !important;
  color: #FFFFFF;
}

.menu .menu-inner > .menu-item > .menu-link,
.menu .menu-inner > .menu-item > .menu-toggle {
  color: rgba(255, 255, 255, 0.85);
}

.menu .menu-inner > .menu-item > .menu-link:hover,
.menu .menu-inner > .menu-item > .menu-toggle:hover {
  color: #FFFFFF !important;
  background-color: rgba(20, 105, 174, 0.25) !important;
}

.menu .menu-inner > .menu-item.active > .menu-link,
.menu .menu-inner > .menu-item.open > .menu-toggle {
  color: #FFFFFF;
  background-color: #1469AE;
}

.menu .menu-inner .menu-sub .menu-link {
  color: rgba(255, 255, 255, 0.75);
}

.menu .menu-inner .menu-sub .menu-item.active > .menu-link {
  color: #FFFFFF;
}

.menu .menu-header {
  color: rgba(255, 255, 255, 0.4);
}

/* Primary buttons */
.btn-primary {
  --bs-btn-bg: #1469AE;
  --bs-btn-border-color: #1469AE;
  --bs-btn-hover-bg: #105487;
  --bs-btn-hover-border-color: #105487;
  --bs-btn-active-bg: #0d4a77;
  --bs-btn-active-border-color: #0d4a77;
  --bs-btn-disabled-bg: #1469AE;
  --bs-btn-disabled-border-color: #1469AE;
}

.btn-outline-primary {
  --bs-btn-color: #1469AE;
  --bs-btn-border-color: #1469AE;
  --bs-btn-hover-bg: #1469AE;
  --bs-btn-hover-border-color: #1469AE;
  --bs-btn-active-bg: #1469AE;
  --bs-btn-active-border-color: #1469AE;
}

.btn-label-primary {
  --bs-btn-bg: rgba(20, 105, 174, 0.16);
  --bs-btn-color: #1469AE;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-bg: rgba(20, 105, 174, 0.24);
  --bs-btn-hover-color: #1469AE;
  --bs-btn-active-bg: rgba(20, 105, 174, 0.24);
  --bs-btn-active-color: #1469AE;
}

.btn-text-primary {
  --bs-btn-color: #1469AE;
  --bs-btn-hover-color: #1469AE;
  --bs-btn-active-color: #1469AE;
}

/* Cards */
.card {
  border-color: #DDDAD4;
}

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

/* Badge primary */
.badge.bg-primary {
  background-color: #1469AE !important;
}

.badge.bg-label-primary {
  background-color: rgba(20, 105, 174, 0.16) !important;
  color: #1469AE !important;
}

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

/* Nav pills active */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: #1469AE;
}

/* Pagination active */
.page-item.active .page-link {
  background-color: #1469AE;
  border-color: #1469AE;
}

/* Progress bar */
.progress-bar {
  background-color: #1469AE;
}

/* Form switch checked */
.form-check-input:checked {
  background-color: #1469AE;
  border-color: #1469AE;
}

/* Brand logo: hide text when sidebar is collapsed */
.layout-menu:not(.menu-expanded) .app-brand-text,
html:not([class*="layout-menu-expanded"]) .layout-menu-collapsed .app-brand-text {
  display: none !important;
}

/* ==========================================================================
   Dark Mode Component Overrides
   ========================================================================== */

[data-bs-theme=dark] .layout-menu,
[data-bs-theme=dark] .menu {
  background-color: #000828 !important;
}

[data-bs-theme=dark] .menu .menu-inner > .menu-item > .menu-link:hover,
[data-bs-theme=dark] .menu .menu-inner > .menu-item > .menu-toggle:hover {
  background-color: rgba(178, 195, 255, 0.08);
}

[data-bs-theme=dark] .menu .menu-inner > .menu-item.active > .menu-link,
[data-bs-theme=dark] .menu .menu-inner > .menu-item.open > .menu-toggle {
  background-color: rgba(178, 195, 255, 0.12);
}

[data-bs-theme=dark] .card {
  background-color: #273151;
  border-color: #273151;
}

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

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

[data-bs-theme=dark] .btn-text-primary {
  --bs-btn-color: #B2C3FF;
  --bs-btn-hover-color: #B2C3FF;
  --bs-btn-active-color: #B2C3FF;
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.card-title,
.page-title {
  font-weight: 500;
  letter-spacing: -0.05em;
}

body {
  font-size: 1rem;
  line-height: 1.5;
}

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

.login-video-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  overflow: hidden;
  background-color: #000828;
}

/*
 * The video element uses two independent CSS animations on separate
 * transform properties (translate + scale).  Because their durations
 * are coprime (53 s and 71 s) the combined visual pattern doesn't
 * repeat for 53×71 = 3 763 seconds (~63 min).
 *
 * "alternate" reverses direction each cycle, "ease-in-out" is an
 * inherently sinusoidal timing curve — the motion decelerates smoothly
 * into each turnaround with zero velocity at the peaks.
 *
 * Everything is GPU-composited → locked 60 fps, no decoder stutter.
 */
.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;

  /* Base centering (overridden by animations once they start) */
  translate: -50% -50%;
  scale: 1.15;

  /* Two independent axes, coprime durations → quasi-random path */
  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%
  );
}

/* Auth card elevated above video background */
.login-video-page .authentication-wrapper .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;
  }
}