/* 3D nav link enhancement */
.navbar .nav-link:not(.no-elevate) {
  position:relative;
  padding:.55rem 1rem !important;
  border-radius:.65rem;
  font-weight:500;
  line-height:1.1;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  background:linear-gradient(145deg, color-mix(in oklab, var(--background-container) 94%, var(--primary-color) 6%), var(--background-container));
  box-shadow:0 2px 4px -1px rgba(0,0,0,.18), 0 1px 2px rgba(0,0,0,.12);
  border:1px solid color-mix(in oklab, var(--primary-color), transparent 70%);
  transition:background .3s, box-shadow .3s, transform .25s, color .3s;
}
.navbar .nav-link:not(.no-elevate):hover, .navbar .nav-link:not(.no-elevate):focus-visible {
  background:linear-gradient(145deg, color-mix(in oklab, var(--primary-color) 25%, var(--background-container) 75%), var(--background-container));
  box-shadow:0 4px 12px -2px color-mix(in oklab, var(--primary-color), transparent 55%), 0 2px 6px rgba(0,0,0,.25);
  transform:translateY(-2px);
  text-decoration:none;
}
.navbar .nav-link:not(.no-elevate):active {
  transform:translateY(0);
  box-shadow:0 2px 5px -1px color-mix(in oklab, var(--primary-color), transparent 55%), 0 1px 3px rgba(0,0,0,.25);
}
/* Active page indicator - stronger fill */
.navbar .nav-link:not(.no-elevate).active, .navbar .nav-link:not(.no-elevate)[aria-current="page"] {
  background:linear-gradient(150deg, var(--primary-color), color-mix(in oklab, var(--primary-hover,#1e4fd1), var(--primary-color) 35%));
  color:var(--btn-text-color,#fff) !important;
  box-shadow:0 4px 14px -2px color-mix(in oklab, var(--primary-color), transparent 45%), 0 2px 6px rgba(0,0,0,.3);
  border-color:color-mix(in oklab, var(--primary-hover,#1e4fd1), transparent 20%);
}
/* ---------------------------------------------------------
   Global 3D button variables & classes (shared site-wide)
   Ensures .btn-3d-primary / .btn-3d-secondary adapt to theme
   --------------------------------------------------------- */
body:not([data-bs-theme]), html:not([data-bs-theme]) body {
  --btn3d-primary-top:#1b6ef2; --btn3d-primary-bottom:#0a4db5; --btn3d-primary-shadow:#063b89;
  --btn3d-secondary-top:#7d8892; --btn3d-secondary-bottom:#5c646b; --btn3d-secondary-shadow:#475056;
  --btn3d-focus-ring:rgba(13,110,253,.35);
}
[data-bs-theme='light'] {
  --btn3d-primary-top:#1b6ef2; --btn3d-primary-bottom:#0a4db5; --btn3d-primary-shadow:#063b89;
  --btn3d-secondary-top:#7d8892; --btn3d-secondary-bottom:#5c646b; --btn3d-secondary-shadow:#475056;
  --btn3d-focus-ring:rgba(13,110,253,.35);
}
[data-bs-theme='dark'] {
  --btn3d-primary-top:#2e82ff; --btn3d-primary-bottom:#0d55b8; --btn3d-primary-shadow:#093b80;
  --btn3d-secondary-top:#5c6368; --btn3d-secondary-bottom:#3e4448; --btn3d-secondary-shadow:#24282b;
  --btn3d-focus-ring:rgba(56,139,253,.45);
}
[data-bs-theme='blue'] {
  --btn3d-primary-top:#3d8bff; --btn3d-primary-bottom:#0d5ed8; --btn3d-primary-shadow:#0a47a6;
  --btn3d-secondary-top:#62707d; --btn3d-secondary-bottom:#46515a; --btn3d-secondary-shadow:#2d353b;
  --btn3d-focus-ring:rgba(61,139,255,.55);
}
.btn-3d { position:relative; display:inline-flex; align-items:center; justify-content:center; font-weight:600; border:1px solid rgba(255,255,255,.15); color:#fff !important; text-shadow:0 1px 1px rgba(0,0,0,.35); border-radius:.75rem; line-height:1; transform-style:preserve-3d; transition:transform .14s ease, box-shadow .14s ease, filter .25s, background-position .25s; background-size:100% 100%; -webkit-font-smoothing:antialiased; text-decoration:none !important; padding:.85rem 1.15rem; cursor:pointer; }
.btn-3d-primary, .btn-3d-secondary { background:linear-gradient(var(--btn3d-top), var(--btn3d-bottom)); box-shadow:0 .38rem 0 var(--btn3d-shadow), 0 .6rem 1rem -.25rem rgba(0,0,0,.5); }
.btn-3d-primary { background-color:#1557c9; --btn3d-top:var(--btn3d-primary-top); --btn3d-bottom:var(--btn3d-primary-bottom); --btn3d-shadow:var(--btn3d-primary-shadow); }
.btn-3d-secondary { background-color:#5d6670; --btn3d-top:var(--btn3d-secondary-top); --btn3d-bottom:var(--btn3d-secondary-bottom); --btn3d-shadow:var(--btn3d-secondary-shadow); }
.btn-3d-primary:focus-visible, .btn-3d-secondary:focus-visible { outline:0; box-shadow:0 .18rem 0 var(--btn3d-shadow), 0 .45rem .9rem -.15rem rgba(0,0,0,.55), 0 0 0 .25rem var(--btn3d-focus-ring); }
.btn-3d-primary:hover, .btn-3d-secondary:hover { filter:brightness(1.09); }
.btn-3d-primary:active, .btn-3d-secondary:active { transform:translateY(.34rem); box-shadow:0 .07rem 0 var(--btn3d-shadow), 0 .32rem .55rem -.18rem rgba(0,0,0,.55); }
@supports not (background:linear-gradient(#000,#111)) { .btn-3d-primary, .btn-3d-secondary { background-color:var(--btn3d-bottom); } }
/* Theme-specific overrides to ensure visible color shifts */
[data-bs-theme='light'] .btn-3d-primary { --btn3d-primary-top:#1f7eff; --btn3d-primary-bottom:#0d56c4; }
[data-bs-theme='dark'] .btn-3d-primary { --btn3d-primary-top:#4d9dff; --btn3d-primary-bottom:#114d99; }
[data-bs-theme='blue'] .btn-3d-primary { --btn3d-primary-top:#5ab0ff; --btn3d-primary-bottom:#0d63e0; }

[data-bs-theme='light'] .btn-3d-secondary { --btn3d-secondary-top:#89939c; --btn3d-secondary-bottom:#646c73; }
[data-bs-theme='dark'] .btn-3d-secondary { --btn3d-secondary-top:#6d7680; --btn3d-secondary-bottom:#434a52; }
[data-bs-theme='blue'] .btn-3d-secondary { --btn3d-secondary-top:#6f7b86; --btn3d-secondary-bottom:#4a545d; }

/* Trigger re-evaluation on theme switch */
[data-bs-theme] .btn-3d-primary,[data-bs-theme] .btn-3d-secondary { background-image:linear-gradient(180deg,var(--btn3d-top) 0%, var(--btn3d-bottom) 100%); }
/* Dark & blue theme tuning */
[data-bs-theme='dark'] .navbar .nav-link:not(.no-elevate) { box-shadow:0 2px 3px -1px rgba(0,0,0,.5), 0 1px 1px rgba(0,0,0,.35); }
[data-bs-theme='dark'] .navbar .nav-link:not(.no-elevate):hover, [data-bs-theme='dark'] .navbar .nav-link:not(.no-elevate):focus-visible { box-shadow:0 4px 12px -3px color-mix(in oklab, var(--primary-color,#4f83ff), transparent 40%), 0 2px 6px rgba(0,0,0,.55); }
[data-bs-theme='blue'] .navbar .nav-link:not(.no-elevate) { box-shadow:0 2px 3px -1px rgba(6,24,61,.55), 0 1px 1px rgba(6,24,61,.4); }
[data-bs-theme='blue'] .navbar .nav-link:not(.no-elevate):hover, [data-bs-theme='blue'] .navbar .nav-link:not(.no-elevate):focus-visible { box-shadow:0 4px 12px -3px color-mix(in oklab, var(--primary-color,#50a4ff), transparent 42%), 0 2px 6px rgba(6,24,61,.55); }
/* Compact spacing on very narrow screens */
@media (max-width:600px){ .navbar .nav-link { padding:.5rem .75rem !important; } }
/* Offcanvas width for left and right navs */
.offcanvas.card-menu {
  width: 85vw;
  max-width: 360px;
}
  /* Utility classes added during inline style removal */
  .layout-maxw-1700{max-width:1700px!important;}
  .gap-1rem{gap:1rem!important;}
  .thumb-50{width:50px!important;height:50px!important;object-fit:cover;}
  .thumb-50.contain{object-fit:contain!important;}
  .qr-print-dim{width:4cm;height:4cm;object-fit:contain;}
/* Hero logo sizing (expanded for greater visual impact)
  - Base: slightly larger than before
  - Scales up on wider breakpoints while respecting container width
*/
.hero-logo { max-height:200px; }
@media (min-width:576px){ .hero-logo { max-height:240px; } }
@media (min-width:768px){ .hero-logo { max-height:300px; } }
@media (min-width:1200px){ .hero-logo { max-height:340px; } }
.about-hero-logo { max-height:200px; }
.nav-spacer-82 { height:82px; }
.card-max-480 { max-width:480px; margin:0 auto; }
.minw-140 { min-width:140px !important; }
.minw-160 { min-width:160px !important; }
.minw-120 { min-width:120px !important; }
.maxw-340 { max-width:340px !important; }
.maxw-520 { max-width:520px !important; }
@media (max-width: 576px) {
  .offcanvas.card-menu {
    width: 80vw;
    max-width: 320px;
  }
}

/* Global 3D button style for generic action buttons using .nav-btn (e.g., tools page) */
.btn.nav-btn:not(.nav-link) {
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  font-weight:500;
  line-height:1.1;
  border-radius:.75rem;
  padding:.65rem 1rem;
  transform:translateZ(0);
  transition:background .4s, box-shadow .4s, transform .28s, color .3s, border-color .4s;
}
/* Primary filled variant */
.btn-primary.nav-btn:not(.nav-link) {
  background:linear-gradient(155deg, var(--primary-color) 0%, color-mix(in oklab, var(--primary-hover,#1e4fd1), var(--primary-color) 40%) 100%) !important;
  border:1px solid color-mix(in oklab, var(--primary-hover,#1e4fd1), transparent 15%) !important;
  box-shadow:0 4px 10px -3px color-mix(in oklab, var(--primary-color), transparent 40%), 0 2px 6px -2px rgba(0,0,0,.25), 0 0 0 1px color-mix(in oklab, var(--primary-color) 50%, transparent 80%);
  color:var(--btn-text-color,#fff)!important;
}
.btn-primary.nav-btn:not(.nav-link)::before { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(to bottom, rgba(255,255,255,.5), rgba(255,255,255,0)); mix-blend-mode:overlay; opacity:.55; transition:opacity .4s; }
.btn-primary.nav-btn:not(.nav-link):where(:hover,:focus-visible) {
  transform:translateY(-4px);
  box-shadow:0 10px 24px -8px color-mix(in oklab, var(--primary-color), transparent 25%), 0 6px 14px -4px rgba(0,0,0,.35), 0 0 0 1px color-mix(in oklab, var(--primary-color) 55%, transparent 70%);
}
.btn-primary.nav-btn:not(.nav-link):where(:hover,:focus-visible)::before { opacity:.75; }
.btn-primary.nav-btn:not(.nav-link):active { transform:translateY(-2px); box-shadow:0 6px 16px -6px color-mix(in oklab, var(--primary-color), transparent 35%), 0 4px 10px -4px rgba(0,0,0,.4); }

/* Info filled variant (to mirror primary style for secondary actions) */
.btn-info.nav-btn:not(.nav-link) {
  --info-base: var(--accent-info,#0dcaf0);
  --info-hover: var(--accent-info-hover, var(--info-base));
  background:linear-gradient(155deg, var(--info-base) 0%, color-mix(in oklab, var(--info-hover) 55%, var(--info-base) 45%));
  border:1px solid color-mix(in oklab, var(--info-base) 60%, transparent 20%) !important;
  box-shadow:0 4px 10px -3px color-mix(in oklab, var(--info-base), transparent 45%), 0 2px 6px -2px rgba(0,0,0,.25), 0 0 0 1px color-mix(in oklab, var(--info-base) 55%, transparent 78%);
  color:var(--accent-info-contrast,#fff)!important;
}
.btn-info.nav-btn:not(.nav-link)::before { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(to bottom, rgba(255,255,255,.55), rgba(255,255,255,0)); mix-blend-mode:overlay; opacity:.55; transition:opacity .4s; }
.btn-info.nav-btn:not(.nav-link):where(:hover,:focus-visible) {
  transform:translateY(-4px);
  background:linear-gradient(155deg, color-mix(in oklab, var(--info-base) 85%, white 15%) 0%, color-mix(in oklab, var(--info-hover) 65%, #000 4%) 100%);
  box-shadow:0 10px 24px -8px color-mix(in oklab, var(--info-base), transparent 25%), 0 6px 14px -4px rgba(0,0,0,.35), 0 0 0 1px color-mix(in oklab, var(--info-base) 65%, transparent 65%);
}
.btn-info.nav-btn:not(.nav-link):where(:hover,:focus-visible)::before { opacity:.75; }
.btn-info.nav-btn:not(.nav-link):active { transform:translateY(-2px); box-shadow:0 6px 16px -6px color-mix(in oklab, var(--info-base), transparent 35%), 0 4px 10px -4px rgba(0,0,0,.4); }

[data-bs-theme='dark'] .btn-info.nav-btn:not(.nav-link),
[data-bs-theme='blue'] .btn-info.nav-btn:not(.nav-link) {
  box-shadow:0 4px 10px -4px color-mix(in oklab, var(--info-base), transparent 38%), 0 2px 6px -2px rgba(0,0,0,.55), 0 0 0 1px color-mix(in oklab, var(--info-base) 48%, transparent 80%);
}
[data-bs-theme='dark'] .btn-info.nav-btn:not(.nav-link):where(:hover,:focus-visible),
[data-bs-theme='blue'] .btn-info.nav-btn:not(.nav-link):where(:hover,:focus-visible) {
  box-shadow:0 14px 32px -10px color-mix(in oklab, var(--info-base), transparent 22%), 0 8px 18px -6px rgba(0,0,0,.65), 0 0 0 1px color-mix(in oklab, var(--info-base) 60%, transparent 65%);
}

/* Dark & blue theme adjustments for global nav-btn */
[data-bs-theme='dark'] .btn-primary.nav-btn:not(.nav-link),
[data-bs-theme='blue'] .btn-primary.nav-btn:not(.nav-link) {
  box-shadow:0 4px 10px -4px color-mix(in oklab, var(--primary-color), transparent 35%), 0 2px 6px -2px rgba(0,0,0,.55), 0 0 0 1px color-mix(in oklab, var(--primary-color) 48%, transparent 80%);
}
[data-bs-theme='dark'] .btn-primary.nav-btn:not(.nav-link):where(:hover,:focus-visible),
[data-bs-theme='blue'] .btn-primary.nav-btn:not(.nav-link):where(:hover,:focus-visible) {
  box-shadow:0 14px 32px -10px color-mix(in oklab, var(--primary-color), transparent 20%), 0 8px 18px -6px rgba(0,0,0,.65), 0 0 0 1px color-mix(in oklab, var(--primary-color) 60%, transparent 65%);
}
/* Outline primary variant upgrade (if used) */
.btn-outline-primary.nav-btn:not(.nav-link) {
  background:linear-gradient(150deg, color-mix(in oklab, var(--background-container) 92%, var(--primary-color) 8%), var(--background-container));
  color:var(--primary-color) !important;
  border:1px solid color-mix(in oklab, var(--primary-color) 65%, transparent 55%) !important;
  box-shadow:0 2px 5px -2px rgba(0,0,0,.18), 0 1px 2px rgba(0,0,0,.12);
}
.btn-outline-primary.nav-btn:not(.nav-link):where(:hover,:focus-visible) {
  color:color-mix(in oklab, var(--primary-color) 90%, #fff 10%) !important;
  background:linear-gradient(150deg, color-mix(in oklab, var(--primary-color) 24%, var(--background-container) 76%), var(--background-container));
  transform:translateY(-3px);
  box-shadow:0 8px 20px -8px color-mix(in oklab, var(--primary-color), transparent 35%), 0 5px 12px -4px rgba(0,0,0,.28);
}
.btn-outline-primary.nav-btn:not(.nav-link):active { transform:translateY(-1px); box-shadow:0 4px 10px -5px color-mix(in oklab, var(--primary-color), transparent 45%), 0 3px 6px -3px rgba(0,0,0,.35); }

/* Outline secondary variant 3D (Cancel buttons) */
.btn-outline-secondary.nav-btn:not(.nav-link) {
  position:relative;
  background:linear-gradient(150deg, color-mix(in oklab, var(--background-container) 90%, var(--secondary-color,#64748b) 10%), var(--background-container));
  color:color-mix(in oklab, var(--secondary-color,#64748b) 90%, #fff 10%) !important;
  border:1px solid color-mix(in oklab, var(--secondary-color,#64748b) 65%, transparent 55%) !important;
  box-shadow:0 2px 5px -2px rgba(0,0,0,.18), 0 1px 2px rgba(0,0,0,.12);
  transition:background .4s, box-shadow .4s, transform .28s, color .3s, border-color .4s;
}
.btn-outline-secondary.nav-btn:not(.nav-link)::before { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(to bottom, rgba(255,255,255,.5), rgba(255,255,255,0)); mix-blend-mode:overlay; opacity:.5; transition:opacity .4s; }
.btn-outline-secondary.nav-btn:not(.nav-link):where(:hover,:focus-visible) {
  background:linear-gradient(150deg, color-mix(in oklab, var(--secondary-color,#64748b) 28%, var(--background-container) 72%), var(--background-container));
  transform:translateY(-3px);
  box-shadow:0 8px 20px -8px color-mix(in oklab, var(--secondary-color,#64748b), transparent 40%), 0 5px 12px -4px rgba(0,0,0,.28);
}
.btn-outline-secondary.nav-btn:not(.nav-link):where(:hover,:focus-visible)::before { opacity:.72; }
.btn-outline-secondary.nav-btn:not(.nav-link):active { transform:translateY(-1px); box-shadow:0 4px 10px -5px color-mix(in oklab, var(--secondary-color,#64748b), transparent 50%), 0 3px 6px -3px rgba(0,0,0,.35); }
[data-bs-theme='dark'] .btn-outline-secondary.nav-btn:not(.nav-link),
[data-bs-theme='blue'] .btn-outline-secondary.nav-btn:not(.nav-link) {
  box-shadow:0 2px 3px -1px rgba(0,0,0,.5), 0 1px 1px rgba(0,0,0,.35);
}
[data-bs-theme='dark'] .btn-outline-secondary.nav-btn:not(.nav-link):where(:hover,:focus-visible),
[data-bs-theme='blue'] .btn-outline-secondary.nav-btn:not(.nav-link):where(:hover,:focus-visible) {
  box-shadow:0 10px 24px -8px color-mix(in oklab, var(--secondary-color,#64748b), transparent 30%), 0 6px 14px -4px rgba(0,0,0,.55);
}
[data-bs-theme='dark'] .btn-outline-secondary.nav-btn:not(.nav-link):active,
[data-bs-theme='blue'] .btn-outline-secondary.nav-btn:not(.nav-link):active {
  box-shadow:0 6px 12px -5px color-mix(in oklab, var(--secondary-color,#64748b), transparent 45%), 0 3px 6px -3px rgba(0,0,0,.45);
}

/* ---------------------------------------------------------
   Error Page Styles (error_handler.php)
   Uses existing design tokens for light/dark/blue themes
   --------------------------------------------------------- */
.error-container {
  max-width: 760px;
  margin: 12vh auto;
  padding: 1.5rem;
  border-radius: .75rem;
  /* Prefer Bootstrap card background, fallback to theme container token, then a neutral */
  background: var(--bs-card-bg, var(--background-container, #ffffff));
  color: var(--text-color, #0b0d0f);
  border: 1px solid var(--bs-border-color, rgba(15,23,42,0.12));
  /* Soft, subtle shadow (no heavy 3D) */
  box-shadow: var(--box-shadow, 0 8px 24px rgba(16,24,40,.06));
  position: relative;
  overflow: hidden;
}
/* Ensure non-light themes do not render pure white */
[data-bs-theme='dark'] .error-container {
  background: color-mix(in oklab, var(--background-container, #121821) 96%, #0b0f14 4%);
}
[data-bs-theme='blue'] .error-container {
  background: var(--bs-card-bg, rgba(10,32,80,0.35));
  border-color: color-mix(in oklab, var(--bs-border-color, #314165), transparent 25%);
}

/* Accent stripe with subtle animated gradient */
/* Remove left accent stripe to avoid any 3D-look on the edge */
.error-container::before{ content:none !important; }
/* Remove glossy overlay for a flatter look */
.error-container::after{ content:none; }

@keyframes errorStripeFlow {
  0%   { background-position: 0 0; }
  50%  { background-position: 0 100%; }
  100% { background-position: 0 0; }
}

.error-hero .error-icon{ width:64px; height:64px; display:flex; align-items:center; justify-content:center; border-radius:50%;
  background: color-mix(in oklab, var(--primary-color, #2563eb) 12%, var(--background-container, #fff) 88%);
  border: 1px solid color-mix(in oklab, var(--primary-color, #2563eb), transparent 70%);
  color: var(--primary-color, #2563eb);
  font-size: 1.6rem;
  box-shadow: none;
}
.error-title{ font-weight:800; letter-spacing:.3px; }
.error-subtitle{ color: color-mix(in oklab, var(--text-color, #0b0d0f) 60%, #6b7280); }
.error-code{ margin-top:.35rem; font-weight:600; color: color-mix(in oklab, var(--text-color, #0b0d0f) 82%, #64748b); }

.error-actions { display:flex; gap:.75rem; flex-wrap:wrap; margin-top:1rem; }

/* Simple button style for error page actions */
a.button { 
  display:inline-block; 
  padding:.6rem 1rem; 
  border-radius:.55rem; 
  background: var(--primary-color, #2563eb); 
  color:#fff !important; 
  text-decoration:none; 
  border:1px solid color-mix(in oklab, var(--primary-color, #2563eb), transparent 20%);
  box-shadow: none;
  transition: filter .2s ease, transform .12s ease;
}
a.button:hover, a.button:focus-visible { filter: brightness(1.05); transform: translateY(-1px); }
a.button:active { transform: translateY(0); }

a.button.secondary { 
  background: transparent; 
  color: var(--text-color, #0b0d0f) !important; 
  border:1px solid var(--bs-border-color, rgba(15,23,42,0.12)); 
  box-shadow: none;
}
a.button.secondary:hover, a.button.secondary:focus-visible { 
  background: color-mix(in oklab, var(--background-container, #fff) 92%, var(--primary-color, #2563eb) 8%);
}
/* Improve base visibility of secondary action across all themes */
[data-bs-theme='light'] a.button.secondary { background:#eef2f7; }
[data-bs-theme='dark'] a.button.secondary,
[data-bs-theme='blue'] a.button.secondary { color: var(--text-color) !important; border-color: color-mix(in oklab, var(--text-color), transparent 80%); }

.error-meta {
  font-size:.95rem; 
  color: color-mix(in oklab, var(--text-color, #0b0d0f) 84%, #475569);
  background: color-mix(in oklab, var(--background-container, #fff) 94%, #f8fafc);
  border:1px solid var(--bs-border-color, rgba(15,23,42,0.12)); 
  border-radius:.55rem; 
  padding:.75rem; 
  margin:.9rem 0 0;
}
.error-meta code { color: var(--text-color, #0b0d0f); }

/* Ensure button contrast in light theme inside error container */
[data-bs-theme='light'] .error-container .btn {
  color: var(--text-color, #0b0d0f) !important;
}
[data-bs-theme='light'] .error-container .btn-outline-secondary {
  color: var(--text-color, #0b0d0f) !important;
  border-color: var(--bs-border-color, rgba(15,23,42,0.12));
}
[data-bs-theme='light'] .error-container .btn-outline-secondary:hover,
[data-bs-theme='light'] .error-container .btn-outline-secondary:focus-visible {
  background: color-mix(in oklab, var(--background-container, #fff) 92%, var(--primary-color, #2563eb) 8%);
  color: var(--text-color, #0b0d0f) !important;
}

/* Improve legibility for error-meta and technical details across themes */
.error-container pre { color: var(--text-color, #0b0d0f); }
[data-bs-theme='light'] .error-container .error-meta { 
  background: #f8fafc; 
  border-color: #e2e8f0; 
  color: var(--text-color, #0b0d0f);
}
[data-bs-theme='dark'] .error-container .error-meta,
[data-bs-theme='blue'] .error-container .error-meta {
  color: var(--text-color);
  background: color-mix(in oklab, var(--background-container) 88%, #0b0f14 12%);
}

/* Force heading/body text to be readable in light theme */
[data-bs-theme='light'] .error-container h1,
[data-bs-theme='light'] .error-container p,
[data-bs-theme='light'] .error-container summary,
[data-bs-theme='light'] .error-container strong {
  color: var(--text-color, #0b0d0f) !important;
  opacity: 1 !important;
}

/* Make the secondary action button clearly visible in light theme */
[data-bs-theme='light'] .error-container a.button.secondary {
  background: #eef2f7; /* light slate */
  border-color: #cbd5e1; /* slate-300 */
  color: var(--text-color, #0b0d0f) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
}
[data-bs-theme='light'] .error-container a.button.secondary:hover,
[data-bs-theme='light'] .error-container a.button.secondary:focus-visible {
  background: #e2e8f0; /* slate-200 */
  color: var(--text-color, #0b0d0f) !important;
}

/* Firefox/light-mode fallback: enforce dark text for common elements inside error card */
[data-bs-theme='light'] .error-container { color: var(--text-color, #0b0d0f) !important; }
[data-bs-theme='light'] .error-container :where(h1,h2,h3,h4,h5,h6,p,summary,code,div,span,strong,small,label,dt,dd) {
  color: var(--text-color, #0b0d0f) !important;
}
/* Keep primary action button white-on-primary */
[data-bs-theme='light'] .error-container a.button { color: #fff !important; }

/* 3D small action buttons inside tables (user management etc.) */
.table .nav-btn {
  position:relative;
  font-weight:500;
  border-radius:.65rem;
  padding:.35rem .65rem!important; /* override btn-sm tighter spacing */
  line-height:1.1;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  background:linear-gradient(155deg,
      color-mix(in oklab, var(--background-container) 92%, var(--primary-color) 8%),
      var(--background-container));
  border:1px solid color-mix(in oklab, var(--primary-color) 55%, transparent 55%);
  box-shadow:0 1px 2px rgba(0,0,0,.18), 0 1px 1px rgba(0,0,0,.12);
  transition:background .35s, box-shadow .35s, transform .25s, color .3s, border-color .35s;
  text-decoration:none;
}
.table .nav-btn::before { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(to bottom, rgba(255,255,255,.5), rgba(255,255,255,0)); mix-blend-mode:overlay; opacity:.45; transition:opacity .4s; }
.table .nav-btn:where(:hover,:focus-visible) {
  background:linear-gradient(155deg,
      color-mix(in oklab, var(--primary-color) 22%, var(--background-container) 78%),
      var(--background-container));
  box-shadow:0 2px 6px -1px color-mix(in oklab, var(--primary-color), transparent 55%), 0 2px 4px -1px rgba(0,0,0,.25);
  transform:translateY(-2px);
  text-decoration:none;
}
.table .nav-btn:where(:hover,:focus-visible)::before { opacity:.7; }
.table .nav-btn:active { transform:translateY(-1px); box-shadow:0 1px 4px -1px color-mix(in oklab, var(--primary-color), transparent 60%), 0 1px 3px rgba(0,0,0,.25); }
.table .nav-btn.active, .table .nav-btn[aria-current="page"] {
  background:linear-gradient(155deg, var(--primary-color), color-mix(in oklab, var(--primary-hover,#1e4fd1), var(--primary-color) 35%));
  color:var(--btn-text-color,#fff)!important;
  border-color:color-mix(in oklab, var(--primary-hover,#1e4fd1), transparent 25%);
  box-shadow:0 3px 8px -2px color-mix(in oklab, var(--primary-color), transparent 45%), 0 2px 5px rgba(0,0,0,.3);
}
/* Danger variant */
.table .nav-btn.btn-outline-danger {
  --danger-color: var(--bs-danger,#dc3545);
  color:var(--danger-color)!important;
  background:linear-gradient(150deg, color-mix(in oklab, var(--background-container) 92%, var(--danger-color) 8%), var(--background-container));
  border:1px solid color-mix(in oklab, var(--danger-color) 65%, transparent 45%);
  box-shadow:0 1px 2px rgba(0,0,0,.15), 0 1px 1px rgba(0,0,0,.1);
}
.table .nav-btn.btn-outline-danger:where(:hover,:focus-visible) {
  background:linear-gradient(150deg, color-mix(in oklab, var(--danger-color) 28%, var(--background-container) 72%), var(--background-container));
  box-shadow:0 2px 6px -1px color-mix(in oklab, var(--danger-color), transparent 50%), 0 2px 4px -1px rgba(0,0,0,.25);
  transform:translateY(-2px);
  color:color-mix(in oklab, var(--danger-color) 85%, #fff 15%)!important;
}
.table .nav-btn.btn-outline-danger:active { transform:translateY(-1px); }
.table .nav-btn.btn-outline-danger.active, .table .nav-btn.btn-outline-danger[aria-current="page"] {
  background:linear-gradient(150deg, var(--danger-color), color-mix(in oklab, var(--danger-color) 70%, #000 8%));
  color:#fff!important;
  border-color:color-mix(in oklab, var(--danger-color) 60%, transparent 15%);
  box-shadow:0 3px 8px -2px color-mix(in oklab, var(--danger-color), transparent 45%), 0 2px 5px rgba(0,0,0,.3);
}
/* Success variant (restore) */
.table .nav-btn.btn-outline-success {
  --success-color: var(--bs-success,#198754);
  color:var(--success-color)!important;
  background:linear-gradient(150deg, color-mix(in oklab, var(--background-container) 92%, var(--success-color) 8%), var(--background-container));
  border:1px solid color-mix(in oklab, var(--success-color) 55%, transparent 55%);
  box-shadow:0 1px 2px rgba(0,0,0,.15), 0 1px 1px rgba(0,0,0,.1);
}
.table .nav-btn.btn-outline-success:where(:hover,:focus-visible) {
  background:linear-gradient(150deg, color-mix(in oklab, var(--success-color) 26%, var(--background-container) 74%), var(--background-container));
  box-shadow:0 2px 6px -1px color-mix(in oklab, var(--success-color), transparent 50%), 0 2px 4px -1px rgba(0,0,0,.25);
  transform:translateY(-2px);
  color:color-mix(in oklab, var(--success-color) 85%, #fff 15%)!important;
}
.table .nav-btn.btn-outline-success:active { transform:translateY(-1px); }
.table .nav-btn.btn-outline-success.active, .table .nav-btn.btn-outline-success[aria-current="page"] {
  background:linear-gradient(150deg, var(--success-color), color-mix(in oklab, var(--success-color) 70%, #000 8%));
  color:#fff!important;
  border-color:color-mix(in oklab, var(--success-color) 55%, transparent 25%);
  box-shadow:0 3px 8px -2px color-mix(in oklab, var(--success-color), transparent 45%), 0 2px 5px rgba(0,0,0,.3);
}
/* Theme adjustments for dark/blue to keep elevation readable */
[data-bs-theme='dark'] .table .nav-btn,
[data-bs-theme='blue'] .table .nav-btn { box-shadow:0 1px 2px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,0.04); }
[data-bs-theme='dark'] .table .nav-btn:where(:hover,:focus-visible),
[data-bs-theme='blue'] .table .nav-btn:where(:hover,:focus-visible) { box-shadow:0 2px 6px -1px color-mix(in oklab, var(--primary-color), transparent 45%), 0 2px 4px -1px rgba(0,0,0,.55); }
[data-bs-theme='dark'] .table .nav-btn.btn-outline-danger:where(:hover,:focus-visible),
[data-bs-theme='blue'] .table .nav-btn.btn-outline-danger:where(:hover,:focus-visible) { box-shadow:0 2px 6px -1px color-mix(in oklab, var(--danger-color,#dc3545), transparent 45%), 0 2px 4px -1px rgba(0,0,0,.55); }
[data-bs-theme='dark'] .table .nav-btn.btn-outline-success:where(:hover,:focus-visible),
[data-bs-theme='blue'] .table .nav-btn.btn-outline-success:where(:hover,:focus-visible) { box-shadow:0 2px 6px -1px color-mix(in oklab, var(--success-color,#198754), transparent 45%), 0 2px 4px -1px rgba(0,0,0,.55); }

/* Center menu content inside offcanvas using flexbox */
.offcanvas .card-menu,
.offcanvas .card.form-control-bg {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}
/* Fix right nav offcanvas centering and prevent overflow */
.offcanvas-end .card-menu,
.offcanvas-end .card.form-control-bg {
  margin-right: auto !important;
  margin-left: auto !important;
  /* Let Bootstrap handle horizontal positioning; avoid forcing left/right */
  width: 85vw;
  max-width: 360px;
}

@media (max-width: 576px) {
  .offcanvas-end .card-menu,
  .offcanvas-end .card.form-control-bg {
    width: 80vw;
    max-width: 320px;
  }
}
/* Center only the menu/card content inside offcanvas, not the header or X icon */
.offcanvas .card-menu,
.offcanvas .card.form-control-bg {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Make offcanvas narrower on mobile devices so users can click outside to close */
.offcanvas.card-menu,
.offcanvas .card-menu,
.offcanvas .card.form-control-bg {
  width: 85vw;
  max-width: 360px;
}

@media (max-width: 576px) {
  .offcanvas.card-menu,
  .offcanvas .card-menu,
  .offcanvas .card.form-control-bg {
    width: 80vw;
    max-width: 320px;
  }
}
/* Light/Dark/Blue theme design tokens
   - Professional palettes
   - Mapped to Bootstrap CSS variables
   - Includes app-specific tokens used across the site */
:root,
[data-bs-theme='light'] {
  /* Core palette */
  --background: #f6f7f9;                 /* page background */
  --background-container: #ffffff;       /* container/card background */
  --text-color: #0b0d0f;                 /* primary text */
  --muted-text: #5b6472;
  --primary-color: #2563eb;              /* brand primary */
  --primary-hover: #1e4fd1;
  --secondary-color: #64748b;            /* neutral secondary */
  --link-color: #1f4fcc;
  --link-hover-color: #153a99;

  /* UI surfaces */
  --glass-bg: rgba(255,255,255,0.65);
  --glass-bg-2: rgba(255,255,255,0.9);
  --glass-border: rgba(2, 41, 136, 0.12);
  --border-radius: 15px;

  /* Navbar */
  --navbar-background-color: transparent;
  --navbar-text-color: #111827;
  --navbar-link-color: #111827;

  /* Scrollbar */
  --scrollbar-thumb-color: #9bb6ff;
  --scrollbar-track-color: #eef2f7;
  --scrollbar-thumb-hover-color: #7fa0ff;

  /* Forms & Buttons */
  --form-control-bg: rgba(0,0,0,0.03);
  --form-container-border: rgba(15, 23, 42, 0.1);
  --form-btn-text-color: #ffffff;
  --button-submit-background-color: var(--primary-color);
  --btn-text-color: #111827;
  --close-btn-color: #111827;
  --close-btn-text-shadow: none;
  --required-color: #b91c1c;

  /* Footer */
  --footer-bg-color: transparent;
  --footer-text-color: #4b5563;
  --footer-link-color: #334155;
  
  /* Shadows */
  --box-shadow: 0 8px 24px rgba(16, 24, 40, 0.06);
  --shadow-light: 0 10px 30px rgba(16, 24, 40, 0.08);
  --shadow-hover: 0 14px 40px rgba(16, 24, 40, 0.12);

  /* Bootstrap bridge */
  --bs-body-bg: var(--background);
  --bs-body-color: var(--text-color);
  --bs-tertiary-bg: #f3f4f6;
  --bs-secondary-bg: #f3f4f6;
  --bs-border-color: rgba(15, 23, 42, 0.12);
  --bs-link-color: var(--link-color);
  --bs-link-hover-color: var(--link-hover-color);
  --bs-primary: var(--primary-color);
  --bs-primary-rgb: 37, 99, 235;
  /* Tables text color token used by charts/scripts */
  --table-text: var(--text-color);
}

/* Variables for dark theme */
[data-bs-theme='dark'] {
  color-scheme: dark;
  /* Core palette */
  --background: #0b0f14;
  --background-container: #121821;       /* elevated surfaces */
  --text-color: #e5e7eb;
  --muted-text: #9aa4b2;
  --primary-color: #4f83ff;
  --primary-hover: #3e6de0;
  --secondary-color: #7b8794;
  --link-color: #9ec0ff;
  --link-hover-color: #c8daff;

  /* UI surfaces */
  --glass-bg: rgba(17, 24, 39, 0.6);
  --glass-bg-2: rgba(9, 12, 16, 0.7);
  --glass-border: rgba(255, 255, 255, 0.08);
  --border-radius: 15px;

  /* Navbar */
  --navbar-background-color: transparent;
  --navbar-text-color: #e5e7eb;
  --navbar-link-color: #eef2ff;

  /* Scrollbar */
  --scrollbar-thumb-color: #6b7280;
  --scrollbar-track-color: #111827;
  --scrollbar-thumb-hover-color: #9aa4b2;

  /* Forms & Buttons */
  --form-control-bg: rgba(255,255,255,0.06);
  --form-container-border: rgba(255,255,255,0.08);
  --form-btn-text-color: #0b0f14;
  --button-submit-background-color: var(--primary-color);
  --btn-text-color: #e5e7eb;
  --close-btn-color: #e5e7eb;
  --close-btn-text-shadow: 0 0 6px rgba(79,131,255,0.6);
  --required-color: #fca5a5;

  /* Footer */
  --footer-bg-color: transparent;
  --footer-text-color: #98a2b3;
  --footer-link-color: #cbd5e1;
  
  /* Shadows */
  --box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65);
  --shadow-light: 0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-hover: 0 16px 46px rgba(0, 0, 0, 0.6);

  /* Bootstrap bridge */
  --bs-body-bg: var(--background);
  --bs-body-color: var(--text-color);
  --bs-tertiary-bg: #0f141b;
  --bs-secondary-bg: #0f141b;
  --bs-border-color: rgba(255,255,255,0.12);
  --bs-link-color: var(--link-color);
  --bs-link-hover-color: var(--link-hover-color);
  --bs-primary: var(--primary-color);
  --bs-primary-rgb: 79, 131, 255;
  --table-text: var(--text-color);
}

[data-bs-theme='blue'] {
  /* Core palette */
  --background: radial-gradient(1200px 800px at 10% -10%, #2757c7 0%, #0a2a66 55%, #06183d 100%);
  --background-container: rgba(10, 32, 80, 0.55);
  --text-color: #eaf2ff;
  --muted-text: #c3d7ff;
  --primary-color: #50a4ff;
  --primary-hover: #3b8fe8;
  --secondary-color: #86bafc;
  --link-color: #d8e7ff;
  --link-hover-color: #ffffff;

  /* UI surfaces */
  --glass-bg: rgba(45, 139, 233, 0.18);
  --glass-bg-2: rgba(0, 30, 70, 0.7);
  --glass-border: rgba(255, 255, 255, 0.28);
  --border-radius: 15px;

  /* Navbar */
  --navbar-background-color: transparent;
  --navbar-text-color: #eaf2ff;
  --navbar-link-color: #eaf2ff;

  /* Scrollbar */
  --scrollbar-thumb-color: #4db3ff;
  --scrollbar-track-color: #0a2a66;
  --scrollbar-thumb-hover-color: #8cd0ff;

  /* Forms & Buttons */
  --form-control-bg: rgba(255,255,255,0.06);
  --form-container-border: rgba(255,255,255,0.18);
  --form-btn-text-color: #001a3a;
  --button-submit-background-color: var(--primary-color);
  --btn-text-color: #eaf2ff;
  --close-btn-color: #eaf2ff;
  --close-btn-text-shadow: 0 0 6px rgba(77, 179, 255, 0.6);
  --required-color: #ffd1d1;

  /* Bootstrap bridge */
  --bs-body-bg: transparent; /* keep gradient bg on body */
  --bs-body-color: var(--text-color);
  --bs-tertiary-bg: var(--background-container);
  --bs-secondary-bg: var(--background-container);
  --bs-border-color: rgba(255,255,255,0.25);
  --bs-link-color: var(--link-color);
  --bs-link-hover-color: var(--link-hover-color);
  --bs-primary: var(--primary-color);
  --bs-primary-rgb: 80, 164, 255;
  --bs-light-rgb: 231, 241, 255;
  --bs-light-bg-subtle: #e7f1ff;
  --bs-secondary-color: #cfe7ff;
  --bs-secondary-color-rgb: 207, 231, 255;
  
  /* Shadows */
  --box-shadow: 0 8px 24px rgba(12, 55, 120, 0.45);
  --shadow-light: 0 10px 30px rgba(12, 55, 120, 0.55);
  --shadow-hover: 0 16px 48px rgba(0, 0, 0, 0.35);
  --table-text: var(--text-color);
}

/* --- Blue theme refinements for admin/user management surfaces --- */
[data-bs-theme='blue'] .card,
[data-bs-theme='blue'] .card.card-wide {
  background: linear-gradient(180deg, rgba(77, 179, 255, 0.08) 0%, rgba(0,0,0,0) 22%) , var(--background-container) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  box-shadow: 0 0 0 1px rgba(77, 179, 255, 0.16), var(--shadow-light) !important;
}

[data-bs-theme='blue'] .card .card-title,
[data-bs-theme='blue'] .card h1,
[data-bs-theme='blue'] .card h2,
[data-bs-theme='blue'] .card h3,
[data-bs-theme='blue'] .card h4,
[data-bs-theme='blue'] .card h5,
[data-bs-theme='blue'] .card h6 { color: var(--text-color) !important; }

/* Forms inside cards */
[data-bs-theme='blue'] .card .form-control,
[data-bs-theme='blue'] .card .form-select {
  background-color: var(--form-control-bg) !important;
  color: var(--text-color) !important;
  border-color: var(--form-container-border) !important;
}
[data-bs-theme='blue'] .card .form-control::placeholder { color: rgba(234,242,255,0.65); }

/* Tables in blue: clearer borders and hover */
[data-bs-theme='blue'] .table {
  --bs-table-color: var(--text-color);
  --bs-table-bg: var(--background-container);
  --bs-table-border-color: rgba(255,255,255,0.22);
  --bs-table-hover-bg: rgba(77,179,255,0.06);
  --bs-table-hover-color: var(--text-color);
}
[data-bs-theme='blue'] .table thead th,
[data-bs-theme='blue'] .table thead td { color: var(--text-color) !important; }
[data-bs-theme='blue'] .table-hover > tbody > tr:hover > * {
  background-color: rgba(77,179,255,0.06) !important;
  color: var(--text-color) !important;
}

/* Badges contrast in blue */
[data-bs-theme='blue'] .badge.bg-secondary {
  background-color: rgba(77,179,255,0.18) !important;
  color: #dbeafe !important;
  border: 1px solid rgba(140,208,255,0.35);
}
[data-bs-theme='blue'] .badge.bg-warning { color: #0b1220 !important; }

/* Guard: keep text color stable when hovering action buttons inside a row */
[data-bs-theme='blue'] .table tbody tr:hover > td,
[data-bs-theme='blue'] .table tbody tr:hover > th {
  color: var(--text-color) !important;
}

/* Footer adjustments for blue theme */
[data-bs-theme='blue'] footer.bg-light {
  background-color: var(--background) !important; /* unify footer band with blue background */
}

[data-bs-theme='blue'] footer .footer-section {
  border-top-color: rgba(255, 255, 255, 0.25) !important;
}

/* Avoid a darker block inside footer; let the band be uniform */
[data-bs-theme='blue'] footer .container {
  background: transparent !important;
  box-shadow: none !important;
}

[data-bs-theme='blue'] footer a {
  color: var(--bs-link-color);
}

[data-bs-theme='blue'] footer a:hover {
  color: var(--bs-link-hover-color);
}

/* Blue theme: make footer section titles and CTA copy white for stronger contrast */
[data-bs-theme='blue'] footer .footer-section h6 {
  color: rgba(234, 242, 255, 0.92) !important; /* softer than pure white */
}
[data-bs-theme='blue'] .footer-cta .cta-kicker,
[data-bs-theme='blue'] .footer-cta .cta-text {
  color: rgba(234, 242, 255, 0.88) !important; /* reduce brightness for professionalism */
}

/* Footer link colors (avoid purple visited) but do NOT affect buttons */
footer a:not(.btn),
footer a:not(.btn):link,
footer a:not(.btn):visited { color: var(--bs-link-color) !important; }
footer a:not(.btn):hover,
footer a:not(.btn):focus { color: var(--bs-link-hover-color) !important; }

/* Keep button text color consistent even when visited */
footer .btn:link,
footer .btn:visited { color: var(--bs-btn-color, inherit) !important; }

/* === Blue theme: Offcanvas/nav contrast improvements === */
[data-bs-theme='blue'] .bg-body-secondary {
  background: var(--glass-bg-2) !important;
  color: var(--bs-body-color) !important;
  border: 1px solid var(--bs-border-color) !important;
  box-shadow: 0 0 0 1px rgba(77, 179, 255, 0.18), 0 8px 24px rgba(0, 0, 0, 0.25) !important;
}
[data-bs-theme='blue'] .bg-body-secondary h1,
[data-bs-theme='blue'] .bg-body-secondary h2,
[data-bs-theme='blue'] .bg-body-secondary h3,
[data-bs-theme='blue'] .bg-body-secondary h4,
[data-bs-theme='blue'] .bg-body-secondary h5,
[data-bs-theme='blue'] .bg-body-secondary h6 {
  color: var(--bs-body-color) !important;
}
[data-bs-theme='blue'] .bg-body-secondary a {
  color: var(--bs-link-color);
}
[data-bs-theme='blue'] .bg-body-secondary a:hover {
  color: var(--bs-link-hover-color);
}
[data-bs-theme='blue'] .offcanvas.card-menu,
[data-bs-theme='blue'] .offcanvas .card-menu,
[data-bs-theme='blue'] .offcanvas .card.form-control-bg {
  background: var(--glass-bg-2) !important; /* darker glass for clarity */
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 0 0 1px rgba(77, 179, 255, 0.25), 0 10px 30px rgba(0,0,0,.25) !important;
}

[data-bs-theme='blue'] .offcanvas .btn.btn-outline-primary {
  color: #e7f1ff;
  border-color: #4db3ff;
  box-shadow: inset 0 0 0 1px rgba(77, 179, 255, 0.35);
}

[data-bs-theme='blue'] .offcanvas .btn.btn-outline-primary:hover,
[data-bs-theme='blue'] .offcanvas .btn.btn-outline-primary:focus {
  background-color: rgba(77, 179, 255, 0.18);
  border-color: #8cd0ff;
  color: #ffffff;
  box-shadow: 0 0 0 .25rem rgba(77, 179, 255, 0.25);
}

[data-bs-theme='blue'] .offcanvas .btn.btn-outline-primary.active,
[data-bs-theme='blue'] .offcanvas .btn.btn-outline-primary[aria-current="page"],
[data-bs-theme='blue'] .offcanvas .btn.btn-outline-primary:active,
[data-bs-theme='blue'] .offcanvas .btn.btn-outline-primary[aria-pressed="true"] {
  background-color: #4db3ff !important;
  border-color: #4db3ff !important;
  color: #0b1220 !important;
  box-shadow: 0 0 0 .25rem rgba(77, 179, 255, 0.3) !important;
}

[data-bs-theme='blue'] .offcanvas .offcanvas-header .btn-close,
[data-bs-theme='blue'] .offcanvas .offcanvas-header .navbar-toggler {
  filter: drop-shadow(0 0 4px rgba(77, 179, 255, 0.6));
}

/* Blue theme: improve native select dropdown readability (options list in browser UI) */
[data-bs-theme='blue'] select.form-select option { color:#eaf2ff; background:#0d2760; }
[data-bs-theme='blue'] select.form-select option:checked { background:#1e4fd1; color:#ffffff; }
[data-bs-theme='blue'] select.form-select option:hover { background:#2563eb; color:#ffffff; }
[data-bs-theme='blue'] select.form-select:disabled { opacity:0.75; }
[data-bs-theme='blue'] .form-select:not(:disabled) { color: var(--text-color) !important; }

/* Blue theme: custom select background to avoid stark white */
[data-bs-theme='blue'] .form-select {
  background-color:rgba(255,255,255,0.06) !important;
  border:1px solid rgba(255,255,255,0.28) !important;
  color:var(--text-color) !important;
  box-shadow:0 0 0 1px rgba(77,179,255,0.18) inset;
  backdrop-filter:saturate(140%) brightness(1.05);
  transition:background .3s, border-color .3s, box-shadow .3s;
}
[data-bs-theme='blue'] .form-select:hover:not(:disabled) {
  background-color:rgba(255,255,255,0.10) !important;
  border-color:rgba(255,255,255,0.38) !important;
}
[data-bs-theme='blue'] .form-select:focus {
  background-color:rgba(255,255,255,0.14) !important;
  border-color:#8cd0ff !important;
  box-shadow:0 0 0 .25rem rgba(77,179,255,0.30) !important;
  color:var(--text-color) !important;
}
[data-bs-theme='blue'] .form-select:focus option { color:#0b1220; }

/* Ensure light text color everywhere inside blue theme selects */
[data-bs-theme='blue'] .form-select { color:#eaf2ff !important; --bs-form-select-color:#eaf2ff; }
[data-bs-theme='blue'] .form-select option { color:#eaf2ff !important; }
[data-bs-theme='blue'] .form-select option:checked { color:#ffffff !important; }
[data-bs-theme='blue'] .form-select:disabled { color:rgba(234,242,255,0.55) !important; }

/* Light colored custom caret for blue theme (Bootstrap uses this CSS var) */
[data-bs-theme='blue'] .form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23eaf2ff'%3e%3cpath d='M3.3 5.3a1 1 0 0 1 1.4 0L8 8.59l3.3-3.3a1 1 0 0 1 1.4 1.42l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 0-1.42z'/%3e%3c/svg%3e");
  background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none), linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0));
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: 16px 12px;
}

/* Footer adjustments for dark theme */
[data-bs-theme='dark'] footer.bg-light {
  background-color: var(--background) !important; /* unify footer band with dark background */
}

[data-bs-theme='dark'] footer .footer-section {
  border-top-color: rgba(255, 255, 255, 0.2) !important;
}

[data-bs-theme='dark'] footer .container {
  background: transparent !important;
  box-shadow: none !important;
}

[data-bs-theme='dark'] footer a {
  color: var(--bs-link-color);
}

[data-bs-theme='dark'] footer a:hover {
  color: var(--bs-link-hover-color);
}

/* Make the site-wide promo blend with themes */
.alert.bg-transparent {
  background: transparent !important;
  color: var(--text-color);
  border-color: rgba(255,255,255,0.25);
}

[data-bs-theme='light'] .alert.bg-transparent { border-color: rgba(0,0,0,0.15); }
[data-bs-theme='blue'] .alert.bg-transparent { border-color: rgba(77, 179, 255, 0.35); }

/* Custom scrollbar for Webkit browsers */
::-webkit-scrollbar {
  width: 12px; /* width of the entire scrollbar */
}

::-webkit-scrollbar-track {
  background-color: var(--background-color); /* color of the tracking area */
}

::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb-color); /* color of the scroll thumb */
  border-radius: 6px; /* roundness of the scroll thumb */
  border: 3px solid var(--background-color); /* creates padding around scroll thumb */
}

/* Hover effect for the scrollbar thumb */
::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover-color);
}
/* ================================
    Basic Reset
   ================================ */
   * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  /* ================================
     2) Body & Theme Modes
     ================================ */
     body {
      font-family: 'Inter', 'Roboto', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
      margin: 0;
      padding: 0;
      background: var(--background);
      color: var(--text-color);
      transition: background 0.3s ease, color 0.3s ease;
        /* Layout: make body a column flex container so footer stays after main content */
        display: flex;
        flex-direction: column;
        min-height: 100vh;
  }

    /* Ensure main grows to push the footer to the bottom on short pages */
    main {
      flex: 1 0 auto;
    }

    footer {
      flex-shrink: 0; /* prevent footer from shrinking */
    }
  
  .logo-container {
    position: fixed;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    z-index: 1050;
  }
  /* Reserve space below the fixed navbar + centered logo */
  .spacer {
  height: 96px; /* minimal fallback; JS adjusts dynamically */
  }
  @media (min-width: 576px) {
  .spacer { height: 108px; }
  }
  @media (min-width: 768px) {
  .spacer { height: 112px; }
  }
  @media (min-width: 992px) {
  .spacer { height: 120px; }
  }

  /* Ensure top-of-page alerts do not hide under fixed logo */
  .below-logo-alert,
  .container > .alert:first-child,
  .container > .message:first-child {
    margin-top: 0.5rem;
    display: block;
  }
  /* If an alert/message appears immediately after the page title, add spacing */
  .container h1 + .alert,
  .container h1 + .message,
  .container h2 + .alert,
  .container h2 + .message {
    margin-top: 1rem;
  }
  .form-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 30px;
    padding-bottom: 20px; /* Adjusted to maintain the 20px padding */
    padding-left: 20px; /* Maintain side paddings */
    padding-right: 20px;
    border: 0px solid var(--form-container-border); 
    margin-bottom: 20px;
    width: 100%;
    position: relative;
}

  .form-container button,
  .form-container input[type="submit"] {
      color: var(--form-btn-text-color); /* Apply the new color */
      background-color: var(--button-submit-background-color); 
  }  

  .form-container input[type='time'] {
    color: var(--text-color); 
    background-color: var(--form-control-bg); 
    margin-bottom: 10px; /* Adds space between the inputs */
}

.form-container input[type='time']:last-child {
    margin-bottom: 0; /* Removes the margin from the last input to maintain the container's padding */
    color: var(--text-color); 
    background-color: var(--form-control-bg); 
  }


  .form-container .btn {
    color: var(--form-btn-text-color) !important; /* Override Bootstrap's styles */
}


.form-floating {
  color: var(--glass-bg);
  width: 80%; /* Adjust the width as needed */
  margin: 0 auto; /* This centers the div */
}
.centered-form-floating {
  width: 80%; /* Adjust the width as needed */
  margin: 0 auto; /* This centers the div */
}

/* Checkbox Container Styling */
.form-check {
  background-color: var(--background-light);
  color: var(--text-light);
  padding: 10px;
  border-radius: 5px;
  border: 1px solid var(--border-light);
  transition: background-color 0.3s, color 0.3s, border 0.3s;
}

/* Checkbox Input */
.form-check-input {
  accent-color: var(--link-light);
}

/* Label and Link */
.form-check-label {
  color: var(--text-light);
}

.form-check-label a {
  color: var(--link-light);
}

.form-check-label a:hover {
  text-decoration: none;
  opacity: 0.8;
}

  .right-nav-container {
    margin-right: auto; /* This will push the container to the left */
    padding-right: 0px; /* Adjust this to control space inside the container */
  }



.navbar {
    display: flex;
    overflow-x: auto; /* Enable horizontal scrolling */
    white-space: nowrap; 
    scrollbar-width: thin; 
    background-color: var(--navbar-background-color); 
    color: var(--navbar-text-color); 
    scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color); 
    overflow: visible; 
}

.navbar::-webkit-scrollbar {
    height: 8px; 
}

.navbar::-webkit-scrollbar-track {
  background: var(--scrollbar-track-color);
}

.navbar::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb-color); 
  border-radius: 4px;
}

.container-fluid {
  display: flex;
  flex-wrap: nowrap;
  background-color: var(--navbar-background-color); 
}

  .navbar-collapse {
    background-color: var(--navbar-background-color);
  }

  .navbar-custom-space {
    padding-top: 0px; 
    padding-bottom: 0px;
    padding-left: 0px; 
    padding-right: 0px;
  }
  
.align-items-center {
    justify-content: space-between; /* This will push the logo to the right */
}

.flex-justify-start {
  justify-content: flex-start; /* Aligns items to the start, pushing both to the left */
}

.navbar-brand {
  font-size: 24px;
  font-weight: bold;
    margin-left: auto; /* Ensures the logo is pushed to the right */
}

  
  
  .navbar-menu {
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
  }
  
 .navbar-menu li {
    margin: 10px 0;
  }
  
  .navbar .btn-group .btn {
    margin: 1vh 5px; 
}

.custom-close {
    color: var(--close-btn-color);
    background-color: transparent;
    border: none;
}

.custom-close::before {
    content: "×";
    font-size: 30px;
    font-weight: bold;
    line-height: 1;
    text-shadow: var(--close-btn-text-shadow);
}

.required {
    color: var(--required-color);
    margin-left: 9px;
}

  .navbar-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h22M4 15h22M4 22h22'/%3e%3cpath fill='none' stroke='%23FFF' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 14h22M4 21h22'/%3e%3c/svg%3e");
  }
  
  .navbar-toggler.collapsed .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M7 7l16 16M23 7l-16 16'/%3e%3c/svg%3e");
  }
  
  /* Removing the border and outline for the close button */
  .navbar .offcanvas-header .button-close {
    background-color: transparent;
    border: none;
  }
  
  .navbar .offcanvas-header .button-close::after {
    content: "×";
    font-size: 2.5rem;
    color: var(--navbar-link-color);
  }
  
  /* Removing the focus outline for the close button */
  .navbar .offcanvas-header .button-close:focus {
    outline: none !important;
    box-shadow: none !important;
  }
  
  /* New styles to remove focus outline or border for the navbar-toggler */
  .navbar-toggler:focus, .navbar-toggler:active {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
  }
  
  
   .nav-link {
    color: var(--navbar-link-color);
  }
  
   .nav-link:hover,
   .nav-link:focus,
   .nav-link:active {
    color: var(--button-background-color); /* Replace with your desired hover color */
  }
  
  .navbar-toggler .navbar-toggler-icon {
  filter: drop-shadow(0 0 5px rgba(0,0,0,.6));
  }  
     








h1, h2, h3 {
  text-align: center;
}

 
  /* ================================
     5) Main Content
     ================================ */
  main {
    min-height: 40vh;
    display: block; /* allow Bootstrap containers to control width */
    padding: 40px 20px;
  }
  
  /* Container for main content or form */
  .container {
    width: 95%;
  background: var(--background-container);
    box-shadow: var(--box-shadow);
    transition: background 0.3s;
    border-radius: 8px;
    max-width: 900px;
    margin: 40px auto;
    padding: 20px;
    line-height: 1.6;
  }
  .container h2 {
    font-size: 1.8rem;
    margin-bottom: 20px;
  }
  .container p {
    line-height: 1.6;
    margin-bottom: 20px;
  }
  
 
  
  /* ================================
    Contact Form Styles
     ================================ */
  form {
    max-width: 700px;
    margin: 20px auto;
    padding: 20px;
    border-radius: 8px;
  background: var(--background);
    box-shadow: var(--box-shadow);
    transition: background 0.3s;
  }

  /* Inline action forms (e.g., in tables) should not inherit block form styling */
  form.d-inline,
  form.d-inline-block,
  .table td form,
  td.text-nowrap form {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    max-width: none !important;
  }

  label {
    display: block;
    margin-top: 15px;
    margin-bottom: 5px;
    font-weight: bold;
  }
  input,
  textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--bs-border-color);
    border-radius: 10px;
    background-color: var(--form-control-bg);
    color: var(--text-color);
    box-sizing: border-box;
    font-size: 1rem;
  }

  button {
    background: var(--primary-color);
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 10px;
    transition: background 0.25s ease, box-shadow .25s ease;
  }

  /* Table action buttons should not pick up generic button background */
  .table td .btn,
  td.text-nowrap .btn {
    background: transparent; /* variants will set as needed */
    border-width: 1px;
  }

button:hover {
    background: var(--primary-hover);
    box-shadow: 0 0 0 .2rem color-mix(in oklab, var(--primary-color), transparent 70%);
}
  #clearBtn {
    background-color: #888; /* Grayish */
    margin-left: 10px;
  }
  #clearBtn:hover {
    background-color: #777;
  }
  
  /* ================================
      Success/Error Messages
     ================================ */
  .error-container {
    max-width: 600px;
    margin: 100px auto;
    padding: 20px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}


  .message {
    max-width: 700px;
    margin: 20px auto;
    padding: 15px;
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
    font-size: 1.1rem;
  }
  .success {
    background-color: #4caf50;
    color: #fff;
  }
  .error {
    background-color: #f44336;
    color: #fff;
  }
  
 
  
  /* PRODUCT GRID (optional enhancements) */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

.product-card {
  background-color: rgba(0, 0, 0, 0.1); /* adjusted in dark vs. light mode */
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
}

.product-card img {
  max-width: 100%;
  height: auto;
  margin-bottom: 0.5rem;
  border-radius: 5px;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.price {
  font-weight: bold;
  color: #4caf50;
  margin-top: 0.5rem;
}


    /* Progress Bar Container */
    #progress-bar {
      position: fixed;
      top: 0;
      left: 0;
      width: 0%;
      height: 4px; /* Thinness of the bar */
      background-color: #29d; /* Color of the progress bar */
      z-index: 9999; /* Ensure it's above all other elements */
      transition: width 0.4s ease, opacity 0.4s ease;
      opacity: 1;
  }

  /* Hidden State */
  #progress-bar.hidden {
      opacity: 0;
      width: 100%;
  }


.header-background {
  background-color: rgba(249, 249, 249, 0.5); /* Light grey background with 50% transparency */
  display: inline-block; /* or 'block' depending on your layout needs */
  padding: 10px 30px; /* Adjust padding as needed */
   border-radius: 50px; /* This creates the rounded ends of the pill */
  text-align: center; /* Center the text inside the pill */
  color: #000000;
}

.card {
  text-align: left;
  color: var(--text-color);
  min-width: 150px;
  max-width: 500px;
  margin: 10px 15px;
  border: none;
  border-radius: var(--border-radius);
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-light);
  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
  transition: background-color 0.8s, box-shadow 0.8s, transform 0.8s ease-in-out;
  padding: 10px;
  border: .5px solid var(--glass-border);
  position: relative; /* Ensures it doesn't affect modal stacking */
  z-index: 1; /* Keep it above but lower than the modal */
}
.card-wide {
  color: var(--text-color);
  max-width: none; /* allow wide admin tables */
  width: 100%; /* fill available column width */
  margin: 10px 15px;
  border: none;
  border-radius: var(--bs-border-radius-2xl); /* Extra rounded corners */
  background: var(--glass-bg);
  backdrop-filter: blur(12px); /* Stronger blur for glass effect */
  box-shadow: var(--shadow-light);
  transition: background-color 0.6s, box-shadow 0.6s, transform 0.6s ease-in-out;
  padding: 15px 20px;
  border: 1px solid var(--glass-border);
  overflow: visible; /* ensure dropdowns aren't clipped */
}

/* Ensure error events card truly spans full width and aligns content left */
.events-card { max-width: none !important; width: 100% !important; margin-left: 0; margin-right: 0; }
.events-card .card-body { text-align: left !important; }
@media (max-width: 991.98px){
  .events-card form { width: 100% !important; max-width: none !important; }
  .events-card form .mb-2, .events-card form .mb-3 { width: 100% !important; }
  .events-card .form-control, .events-card .form-select { width: 100% !important; max-width: none !important; }
}

/* Page-hero promo: center horizontally with a sensible max-width */
.card-hero-centered {
  max-width: 740px;
  margin-left: auto;
  margin-right: auto;
}

/* Error events table column sizing */
.table-error-events { table-layout: auto; }
.table-error-events th, .table-error-events td { text-align: left !important; }
.table-error-events col.col-time  { width: 170px; }
.table-error-events col.col-code  { width: 80px; }
.table-error-events col.col-host  { width: 220px; }
.table-error-events col.col-ip    { width: 170px; }
.table-error-events col.col-event { width: 240px; }
/* URI should take remaining space; control link truncation for readability */
.table-error-events a.uri-link { display: inline-block; max-width: min(70vw, 1000px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table-error-events td.cell-uri { overflow: hidden; }

.card-menu {
  color: var(--text-color);
  max-width: 500px;
  margin: 10px 15px;
  border: none;
  border-radius: var(--border-radius);
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-light);

  padding: 10px;
  border: .5px solid var(--glass-border);
}

.card:hover, .card-wide:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);
}

.card-header {
  color: var(--text-color);
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  text-align: center;
  padding: 10px;
  font-size: 2.4rem;
  font-weight: bold;
  letter-spacing: 0.5px;
}
.card-wide-body {
  padding: 25px;
  text-align: left;
}
.card-body {
  padding: 25px;
  text-align: center;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}
.form-control {
  border-radius: 10px;
  border: .5px solid var(--glass-border);
  background-color: var(--form-control-bg);
  color: var(--text-color);
  padding: 12px;
}

.form-control:focus {
  border-color: var(--primary-color);
  box-shadow: 0px 0px 8px var(--primary-color);
}

.header-link {
  text-decoration: underline;
  font-size: 1.2rem;
  font-weight: bold;
  letter-spacing: 0.5px;
  color: var(--text-color) !important;
}

.header-background {
  color: var(--text-color);
}

.btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  margin-left: 10px;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  color: var(--btn-text-color);
  border-radius: 10px;
  transition: all .6s ease;
  cursor: pointer;
}

.btn-theme-switch {
display: inline-block;
font-size: 1rem;
font-weight: 600;
text-align: center;
text-decoration: none;
color: var(--btn-text-color);
/* background-color: var(--btn-bg-color); */
border-radius: 0px;
transition: all 0.3s ease;
cursor: pointer;
}

.btn:hover {
  opacity: 0.8;
}

/* Keep buttons crisp inside table action cells */
.table td.text-nowrap,
.table td .btn + form,
.table td form + .btn {
  margin-left: .25rem;
}

/* Harmonize Bootstrap button variants with theme tokens */
.btn-primary {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
  box-shadow: 0 0 0 .2rem color-mix(in oklab, var(--primary-color), transparent 70%) !important;
}
.btn-outline-primary {
  color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  background-color: transparent !important;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--primary-color), transparent 65%) !important;
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
  background-color: color-mix(in oklab, var(--primary-color), transparent 92%) !important; /* lighter tint, keep contrast */
  color: var(--primary-color) !important; /* retain brand color text instead of washing out */
  border-color: var(--primary-hover) !important;
  box-shadow: none !important;
}

/* High-contrast active state for outline primary (used for current page buttons) */
.btn-outline-primary.active,
.btn-outline-primary[aria-current="page"],
.btn-outline-primary:active,
.btn-outline-primary[aria-pressed="true"] {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: var(--btn-text-color,#fff) !important;
  box-shadow: 0 0 0 .2rem color-mix(in oklab, var(--primary-color), transparent 80%) !important;
}

/* Modal close button — high contrast and consistent across themes */
.modal-header .btn-close,
.modal .btn-close {
  opacity: 1 !important;               /* ensure full visibility */
  width: 1.25rem;                      /* slightly larger target */
  height: 1.25rem;
  padding: .5rem;                      /* comfortable hit area */
  border-radius: 50%;
  background-size: 1em 1em;            /* scale of the X glyph */
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 0 4px rgba(0,0,0,.45));
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease;
}
.modal .btn-close:hover,
.modal .btn-close:focus {
  transform: scale(1.06);
  box-shadow: 0 0 0 .2rem color-mix(in oklab, var(--primary-color), transparent 68%);
}
.modal .btn-close:focus { outline: none; }

/* Light theme: dark X for clarity on light surfaces */
[data-bs-theme='light'] .modal .btn-close,
:root .modal .btn-close,
[data-bs-theme='light'] .modal .btn-close:hover,
:root .modal .btn-close:hover,
[data-bs-theme='light'] .modal .btn-close:focus,
:root .modal .btn-close:focus {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230b0d0f'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293A1 1 0 11.293 14.293L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e");
}

/* Dark and Blue themes: bright white X with subtle glow */
[data-bs-theme='dark'] .modal .btn-close,
[data-bs-theme='dark'] .modal .btn-close:hover,
[data-bs-theme='dark'] .modal .btn-close:focus,
[data-bs-theme='blue'] .modal .btn-close,
[data-bs-theme='blue'] .modal .btn-close:hover,
[data-bs-theme='blue'] .modal .btn-close:focus {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293A1 1 0 11.293 14.293L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e");
  filter: drop-shadow(0 0 6px rgba(77, 179, 255, 0.6));
}

/* Subtle circular backdrop (always on), slightly stronger on hover/focus */
[data-bs-theme='light'] .modal .btn-close { background-color: rgba(0,0,0,0.04); }
[data-bs-theme='light'] .modal .btn-close:hover,
[data-bs-theme='light'] .modal .btn-close:focus { background-color: rgba(0,0,0,0.08); }

[data-bs-theme='dark'] .modal .btn-close,
[data-bs-theme='blue'] .modal .btn-close { background-color: rgba(255,255,255,0.08); }
[data-bs-theme='dark'] .modal .btn-close:hover,
[data-bs-theme='dark'] .modal .btn-close:focus,
[data-bs-theme='blue'] .modal .btn-close:hover,
[data-bs-theme='blue'] .modal .btn-close:focus { background-color: rgba(255,255,255,0.14); }

/* (Legacy blue-theme specific button variant overrides removed; now unified via core-tokens semantic variant system) */

/* Offcanvas and nav cards use stronger glass surface per theme */
.offcanvas.card-menu,
.offcanvas .card-menu,
.offcanvas .card.form-control-bg {
  background: var(--glass-bg-2) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,.25) !important;
}

/* Left offcanvas: make all nav buttons equal width */
#offcanvasNavbar .card.form-control-bg .btn {
  width: 100%;
  display: block;
  margin-left: 0;
}

/* Right offcanvas: make all nav buttons equal width */
#navbarRightAlignedMenu .card.form-control-bg .btn {
  width: 100%;
  display: block;
  margin-left: 0;
}

.hidden-btn {
  display: none;
}

footer {
  height: auto;
  padding: 0px; /* Applies to top, right, and left */
  padding-bottom: 20px; /* Specifically overrides bottom padding */
  text-align: center;
  background-color: var(--footer-bg-color);
}

.footer-bottom {
  text-align: center;
  padding: 1rem 10px 0; 
  color: var(--footer-text-color);
}

footer section h6 {
  color: var(--footer-link-color); 
  padding-top: 20px; 
  padding-bottom: 0px; 
}

.footer-copyright {
text-align: center;
margin-top: 20px; /* Adds space above the copyright text */
color: var(--footer-text-color);
}

/* Footer Websites & Hosting CTA layout */
.footer-cta {
  padding: 1rem 1.25rem;
}
.footer-cta .cta-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .75rem 1rem;
  align-items: center;
}
.footer-cta .cta-copy {
  text-align: left;
}
.footer-cta .cta-kicker {
  display: inline-block;
  font-weight: 700;
  margin-right: .5rem;
}
.footer-cta .cta-text {
  color: var(--footer-text-color);
}
.footer-cta .cta-actions .btn {
  white-space: nowrap;
}
@media (max-width: 576px) {
  .footer-cta .cta-inner { grid-template-columns: 1fr; }
  .footer-cta .cta-copy { text-align: center; }
  .footer-cta .cta-actions { justify-content: center; }
}