/* ======================================================
   Core layout sizes (kept)
   ====================================================== */
:root {
  --qa-sidebar-w: 18rem; /* ≈ 240px */
  --qa-topbar-h: 4rem;   /* ≈ 64px */
}

/* ======================================================
   LIGHT THEME TOKENS (default)
   + one-time mapping to Bootstrap vars
   ====================================================== */
:root {
  /* Brand */
  --qa-primary: #3B82F6;
  --qa-primary-rgb: 59,130,246; /* for rgba() */

  --qa-secondary: #e9ecef; /* slate-500 */

  --qa-success: #10B981;
  --qa-danger: #EF4444;
  /* Typography & borders */
  --qa-text: #0f172a; /* slate-900 */
  --qa-text-muted: #475569; /* slate-600 */
  --qa-border: #e5e7eb; /* slate-200 */
  /* Surfaces */
  --qa-canvas: #f8fafc; /* page background */
  --qa-surface: #ffffff; /* cards + topbar share this */
  --qa-elevation-shadow: 0 1px 2px rgba(16,24,40,.06), 0 8px 16px rgba(16,24,40,.06);
  /* Sidebar */
  --qa-sidebar-bg: #0f1d35;
  --qa-sidebar-fg: #cbd5e1;
  --qa-sidebar-icon: #94a3b8;
  /* ===== Map QA -> Bootstrap (JUST ONCE) ===== */
  --bs-body-bg: var(--qa-canvas);
  --bs-body-color: var(--qa-text);
  --bs-heading-color: var(--qa-text);
  --bs-border-color: var(--qa-border);
  --bs-primary: var(--qa-primary);
  --bs-primary-rgb: var(--qa-primary-rgb);
  --bs-success: var(--qa-success);
  --bs-danger: var(--qa-danger);
  --bs-focus-ring-color: rgba(var(--qa-primary-rgb), .35);
  /* optional helpers Bootstrap uses in components */
  --bs-secondary-bg: var(--qa-secondary);
  --bs-tertiary-bg: var(--qa-canvas);
  --bs-link-color: var(--qa-primary);
  --bs-link-hover-color: color-mix(in srgb, var(--qa-primary) 85%, black 15%);
  --hx-multi-select-background-color: var(--qa-surface);
  --bs-dropdown-bg: var(--qa-surface);
  --bs-border-radius: 10px;

  --bs-info-rgb: 5,80,198;
}

/* ======================================================
   DARK THEME TOKENS (override only QA tokens)
   ====================================================== */
[data-bs-theme="dark"] {
  --qa-primary: #3B82F6;
  --qa-primary-rgb: 59,130,246;
  --qa-secondary: #2c364e;
  --qa-text: #e5e7eb; /* slate-200 */
  --qa-text-muted: #94a3b8; /* slate-400 */
  --qa-border: #1f2937; /* slate-800 */

  --qa-canvas: #0b1020; /* page background */
  --qa-surface: #0f172a; /* cards + topbar */
  --qa-elevation-shadow: 0 1px 2px rgba(0,0,0,.25), 0 8px 16px rgba(0,0,0,.25);
  --qa-sidebar-bg: var(--qa-surface);
  --qa-sidebar-fg: #cbd5e1;
  --qa-sidebar-icon: #93a4bd;

  --bs-info-rgb: 106,164,255;
}

/* ======================================================
   Global base
   ====================================================== */
* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
}

a,
div,
h1,
h2,
h3,
h4,
h5,
p,
span {
  text-shadow: none;
      text-decoration: none;
}

/* ======================================================
   Sidebar (HxSidebar maps to our tokens)
   ====================================================== */
.hx-sidebar {
  --hx-sidebar-background-color: var(--qa-sidebar-bg);
  --hx-sidebar-item-color: var(--qa-sidebar-fg);
  --hx-sidebar-item-icon-color: var(--qa-sidebar-icon);

  /* Hover/active expect RGB triplet -> use Bootstrap mapped rgb */
  --hx-sidebar-item-hover-background-color: var(--bs-primary-rgb);
  --hx-sidebar-item-hover-background-opacity: .12;
  --hx-sidebar-item-hover-color: #fff;
  --hx-sidebar-item-hover-icon-color: #fff;

  --hx-sidebar-item-active-background-color: var(--bs-primary-rgb);
  --hx-sidebar-item-active-background-opacity: .18;
  --hx-sidebar-item-active-color: #fff;
  --hx-sidebar-item-active-icon-color: #fff;
  --hx-sidebar-item-active-font-weight: 600;

  --hx-sidebar-parent-item-active-color: var(--qa-sidebar-fg);
  --hx-sidebar-parent-item-active-icon-color: #fff;
  --hx-sidebar-brand-name-color: var(--qa-sidebar-fg);
}

/* ======================================================
   Cards (Bootstrap)
   ====================================================== */
.card {
  --bs-card-bg: var(--qa-surface);
  --bs-card-cap-bg: var(--qa-surface);
  --bs-card-border-radius: 20px;
  --bs-card-inner-border-radius: 20px;
  --bs-card-spacer-y: 20px;
  --bs-card-spacer-x: 20px;

  border: 1px solid var(--bs-border-color) !important;
  box-shadow: var(--qa-elevation-shadow);
}

.list-group {
  --bs-list-group-bg: var(--qa-surface);
}

.table {
  --bs-table-bg: var(--qa-surface);
}

.dropdown-menu {
  --bs-dropdown-bg: var(--qa-surface);
}
/* ======================================================
   Buttons (reuse Bootstrap mapped tokens)
   ====================================================== */
.btn {
  --bs-btn-padding-x: .8rem;
  --bs-btn-padding-y: .4rem;
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: 10px;
  --bs-btn-focus-box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color);
  letter-spacing: .01em;
}

/* Filled primary */
.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: rgba(var(--bs-primary-rgb), .90);
  --bs-btn-hover-border-color: rgba(var(--bs-primary-rgb), .90);
  --bs-btn-active-bg: rgba(var(--bs-primary-rgb), .82);
  --bs-btn-active-border-color: rgba(var(--bs-primary-rgb), .82);
}

/* Outline primary */
.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: rgba(var(--bs-primary-rgb), .55);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgba(var(--bs-primary-rgb), .18);
  --bs-btn-hover-border-color: rgba(var(--bs-primary-rgb), .35);
}

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: rgb(var(--bs-primary-rgb));
}
.btn-ghost:hover,
.btn-ghost:focus-visible {
  background: rgba(var(--bs-primary-rgb), .10);
  border-color: transparent;
  color: rgb(var(--bs-primary-rgb));
}

.btn-subtle {
  color: rgb(var(--bs-primary-rgb));
  background: rgba(var(--bs-primary-rgb), .12);
  border-color: transparent;
}

.btn-subtle:hover {
  background: rgba(var(--bs-primary-rgb), .18);
  border-color: transparent;
}

  /* Light/soft action (neutral) */
  /*.btn-light {
  --bs-btn-bg: var(--bs-secondary-bg);
  --bs-btn-border-color: var(--bs-border-color);
  --bs-btn-hover-bg: var(--bs-tertiary-bg);
  --bs-btn-hover-border-color: var(--bs-border-color);
  --bs-btn-color: var(--bs-body-color);
}*/
  /* ======================================================
   Forms (theme-aware basics)
   ====================================================== */
  .form-control, .form-select {
  background: var(--qa-surface);
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}
.form-control:focus, .form-select:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color);
}

/* ======================================================
   Blazor error boundary (theme-aware text)
   ====================================================== */
.blazor-error-boundary {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3dy53My5vcmcvMTk5OS94bGluayIgb3ZlcmZsb3c9ImhpZGRlbiI+PGRlZnM+PGNsaXBQYXRoIGlkPSJjbGlwMCI+PHJlY3QgeD0iMjM1IiB5PSI1MSIgd2lkdGg9IjU2IiBoZWlnaHQ9IjQ5Ii8+PC9jbGlwUGF0aD48L2RlZnM+PGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwKSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIzNSAtNTEpIj48cGF0aCBkPSJNMjYzLjUwNiA1MUMyNjQuNzE3IDUxIDI2NS44MTMgNTEuNDgzNyAyNjYuNjA2IDUyLjI2NThMMjY3LjA1MiA1Mi43OTg3IDI2Ny41MzkgNTMuNjI4MyAyOTAuMTg1IDkyLjE4MzEgMjkwLjU0NSA5Mi43OTUgMjkwLjY1NiA5Mi45OTZD290Ii8+PC9nPjwvc3ZnPg==) no-repeat 1rem/1.8rem, #ffb020;
  padding: 1rem 1rem 1rem 3.7rem;
  color: var(--bs-body-color);
}
.blazor-error-boundary::after {
  content: "An error has occurred.";
  margin-left: 2.5rem;
  font-weight: 500;
}