@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300;400;500;600;700&family=Fira+Mono:wght@400;500;700&display=swap');

/* ============================================================
   K-INFO — BME Képzésinformációs Portál
   Stíluslap / design system
   ------------------------------------------------------------
   Felépítés:
     1. Nyers paletta (márkaszínek + skálák)
     2. Szemantikus tokenek (világos mód)
     3. Sötét mód
     4. Tipográfia, térköz, sugár, árnyék, layout tokenek
     5. Alap / reset
     6. Tipográfiai elemek
     7. Layout (konténer, fejléc, rács)
     8. Navigáció
     9. Gombok
    10. Űrlapmezők
    11. Szűrőpanel
    12. Tantárgykártyák + címkék (pill) + kódjelvény
    13. Lapozó
    14. Segédosztályok, fókusz, mozgáscsökkentés, reszponzív

   Márkaszín: Pantone 202 C  ->  #862633
   Betűkészlet: Fira Sans / Fira Mono (SIL Open Font License,
   szabadon felhasználható és self-hostolható).
   ============================================================ */

:root {
  /* ---- 1. Nyers paletta -------------------------------- */

  /* Márka — bordó (Pantone 202 C = #862633 a 700-as fok) */
  --maroon-50:  #faeef0;
  --maroon-100: #f1d6da;
  --maroon-200: #e3afb6;
  --maroon-300: #d28591;
  --maroon-400: #bb5868;
  --maroon-500: #a23a4b;
  --maroon-600: #94303f;
  --maroon-700: #862633;   /* alap márkaszín */
  --maroon-800: #6c1d28;
  --maroon-900: #52151e;

  /* Kék kiegészítő — #263386 */
  --blue-50:  #ecedf5;
  --blue-100: #c9cde6;
  --blue-200: #9ba2d2;
  --blue-300: #6e77b9;
  --blue-400: #46519f;
  --blue-500: #263386;   /* alap */
  --blue-600: #1f2a6e;
  --blue-700: #182055;

  /* Zöld kiegészítő — #268679 (logó-akcent) */
  --teal-50:  #e9f4f2;
  --teal-100: #c3e4df;
  --teal-200: #93d0c7;
  --teal-300: #5fb8ac;
  --teal-400: #34a192;
  --teal-500: #268679;   /* alap */
  --teal-600: #1f6e63;
  --teal-700: #18564e;

  /* Sötétsárga / olíva kiegészítő — #867926 */
  --olive-50:  #f4f2e9;
  --olive-100: #e6e1c6;
  --olive-200: #d2c993;
  --olive-300: #b9ac5f;
  --olive-400: #a19834;
  --olive-500: #867926;  /* alap */
  --olive-600: #6e631f;
  --olive-700: #564e18;

  /* Semleges (a bordóhoz hangolt, enyhén meleg szürkék) */
  --neutral-0:   #ffffff;
  --neutral-25:  #fbfaf9;
  --neutral-50:  #f7f5f3;
  --neutral-100: #efece9;
  --neutral-200: #e1dbd6;
  --neutral-300: #cbc4bd;
  --neutral-400: #a89f98;
  --neutral-500: #827a73;
  --neutral-600: #635c56;
  --neutral-700: #463f3a;
  --neutral-800: #2e2925;
  --neutral-900: #1c1815;

  /* ---- 2. Szemantikus tokenek (világos mód) ------------ */

  --color-bg:            var(--neutral-50);
  --color-surface:       var(--neutral-0);
  --color-surface-alt:   var(--neutral-50);
  --color-border:        rgba(28, 24, 21, 0.12);
  --color-border-strong: rgba(28, 24, 21, 0.22);

  --color-text:          var(--neutral-900);
  --color-text-muted:    var(--neutral-600);
  --color-text-subtle:   var(--neutral-500);
  --color-text-inverse:  var(--neutral-0);

  /* Márka */
  --color-brand:         var(--maroon-700);
  --color-brand-hover:   var(--maroon-800);
  --color-brand-soft:    var(--maroon-50);
  --color-brand-soft-text: var(--maroon-800);
  --color-on-brand:      var(--neutral-0);

  /* Szemantikus állapotok a megadott palettából */
  --color-info:          var(--blue-500);
  --color-info-soft:     var(--blue-50);
  --color-info-text:     var(--blue-700);

  --color-success:       var(--teal-500);
  --color-success-soft:  var(--teal-50);
  --color-success-text:  var(--teal-700);

  --color-warning:       var(--olive-500);
  --color-warning-soft:  var(--olive-50);
  --color-warning-text:  var(--olive-700);

  --color-danger:        var(--maroon-500);
  --color-danger-soft:   var(--maroon-50);
  --color-danger-text:   var(--maroon-800);

  --color-focus-ring:    rgba(38, 51, 134, 0.45); /* kék fókuszgyűrű */

  /* ---- 4. Tipográfia ----------------------------------- */
  --font-sans: 'Fira Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: 'Fira Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --fs-xs:  0.75rem;    /* 12px */
  --fs-sm:  0.8125rem;  /* 13px */
  --fs-md:  0.9375rem;  /* 15px — alap UI méret */
  --fs-lg:  1.0625rem;  /* 17px */
  --fs-xl:  1.375rem;   /* 22px */
  --fs-2xl: 1.75rem;    /* 28px */
  --fs-3xl: 2.25rem;    /* 36px */

  --fw-light:  300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.25;
  --lh-normal: 1.55;
  --lh-relaxed: 1.7;

  /* ---- Térköz ------------------------------------------ */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  /* ---- Sugár ------------------------------------------- */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-pill: 999px;

  /* ---- Árnyék (visszafogott) --------------------------- */
  --shadow-sm: 0 1px 2px rgba(28, 24, 21, 0.06);
  --shadow-md: 0 4px 14px rgba(28, 24, 21, 0.08);

  /* ---- Layout ------------------------------------------ */
  --container-max: 1200px;
  --sidebar-width: 264px;
  --transition: 140ms ease;
}

/* ---- 3. Sötét mód --------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --color-bg:            #16110f;
    --color-surface:       #211a17;
    --color-surface-alt:   #2a211d;
    --color-border:        rgba(255, 255, 255, 0.10);
    --color-border-strong: rgba(255, 255, 255, 0.20);

    --color-text:          #f2ece8;
    --color-text-muted:    #b9aea7;
    --color-text-subtle:   #8a7f78;

    --color-brand:         var(--maroon-300);
    --color-brand-hover:   var(--maroon-200);
    --color-brand-soft:    rgba(210, 133, 145, 0.14);
    --color-brand-soft-text: var(--maroon-200);
    --color-on-brand:      #16110f;

    --color-info:          var(--blue-300);
    --color-info-soft:     rgba(110, 119, 185, 0.16);
    --color-info-text:     var(--blue-200);

    --color-success:       var(--teal-300);
    --color-success-soft:  rgba(95, 184, 172, 0.16);
    --color-success-text:  var(--teal-200);

    --color-warning:       var(--olive-300);
    --color-warning-soft:  rgba(185, 172, 95, 0.16);
    --color-warning-text:  var(--olive-200);

    --color-danger:        var(--maroon-400);
    --color-danger-soft:   rgba(187, 88, 104, 0.16);
    --color-danger-text:   var(--maroon-200);

    --color-focus-ring:    rgba(110, 119, 185, 0.55);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 18px rgba(0, 0, 0, 0.5);
  }
}

/* Manuális sötét mód kapcsoló: <html data-theme="dark"> */
:root[data-theme='dark'] {
  --color-bg:            #16110f;
  --color-surface:       #211a17;
  --color-surface-alt:   #2a211d;
  --color-border:        rgba(255, 255, 255, 0.10);
  --color-border-strong: rgba(255, 255, 255, 0.20);
  --color-text:          #f2ece8;
  --color-text-muted:    #b9aea7;
  --color-text-subtle:   #8a7f78;
  --color-brand:         var(--maroon-300);
  --color-brand-hover:   var(--maroon-200);
  --color-brand-soft:    rgba(210, 133, 145, 0.14);
  --color-brand-soft-text: var(--maroon-200);
  --color-on-brand:      #16110f;
  --color-info:          var(--blue-300);
  --color-info-soft:     rgba(110, 119, 185, 0.16);
  --color-info-text:     var(--blue-200);
  --color-success:       var(--teal-300);
  --color-success-soft:  rgba(95, 184, 172, 0.16);
  --color-success-text:  var(--teal-200);
  --color-warning:       var(--olive-300);
  --color-warning-soft:  rgba(185, 172, 95, 0.16);
  --color-warning-text:  var(--olive-200);
  --color-danger:        var(--maroon-400);
  --color-danger-soft:   rgba(187, 88, 104, 0.16);
  --color-danger-text:   var(--maroon-200);
  --color-focus-ring:    rgba(110, 119, 185, 0.55);
}

/* ============================================================
   5. Alap / reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; display: block; }

a { color: var(--color-info); text-decoration: none; }
a:hover { text-decoration: underline; }

hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: var(--space-5) 0;
}

::selection { background: var(--color-brand-soft); color: var(--color-brand-soft-text); }

/* ============================================================
   6. Tipográfia
   ============================================================ */
h1, h2, h3, h4 {
  margin: 0 0 var(--space-3);
  color: var(--color-text);
  line-height: var(--lh-tight);
  font-weight: var(--fw-semibold);
}
h1 { font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: -0.01em; }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }

p { margin: 0 0 var(--space-4); }

.text-muted  { color: var(--color-text-muted); }
.text-subtle { color: var(--color-text-subtle); }
.text-brand  { color: var(--color-brand); }

small, .text-sm { font-size: var(--fs-sm); }

code, kbd, .mono { font-family: var(--font-mono); }

/* ============================================================
   7. Layout
   ============================================================ */
.kinfo-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.kinfo-layout {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
  padding-block: var(--space-5);
}

.kinfo-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding-block: var(--space-5) var(--space-2);
}
.kinfo-page-head p { margin: 0; color: var(--color-text-muted); font-size: var(--fs-sm); }

/* ============================================================
   8. Fejléc + navigáció
   ============================================================ */
.kinfo-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  backdrop-filter: saturate(1.1);
}
.kinfo-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 60px;
}

/* Logó: a mellékelt K-INFO kép. Helyezd pl. /img/k-info-logo.svg alá,
   és add meg az alt szöveget. SVG ajánlott a méretezhetőség miatt. */
.kinfo-logo { display: inline-flex; align-items: center; }
.kinfo-logo img { height: 34px; width: auto; }

.kinfo-nav { display: flex; align-items: center; gap: var(--space-1); }
.kinfo-nav a {
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  transition: color var(--transition), background-color var(--transition);
}
.kinfo-nav a:hover { color: var(--color-text); background: var(--color-surface-alt); text-decoration: none; }
.kinfo-nav a.is-active { color: var(--color-brand); background: var(--color-brand-soft); }

.kinfo-divider-v { width: 1px; height: 20px; background: var(--color-border); margin-inline: var(--space-2); }

.lang-switch { display: inline-flex; gap: 2px; }
.lang-switch a {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--color-text-subtle);
}
.lang-switch a.is-active { color: var(--color-brand); }

/* ============================================================
   9. Gombok
   ============================================================ */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--color-text);
  --btn-bd: var(--color-border-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: inherit;
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  line-height: 1;
  padding: 0 var(--space-4);
  height: 38px;
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius-md);
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition), transform var(--transition);
}
.btn:hover { background: var(--color-surface-alt); text-decoration: none; }
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn--primary {
  --btn-bg: var(--color-brand);
  --btn-fg: var(--color-on-brand);
  --btn-bd: var(--color-brand);
}
.btn--primary:hover { background: var(--color-brand-hover); border-color: var(--color-brand-hover); }

.btn--ghost { --btn-bd: transparent; }
.btn--ghost:hover { background: var(--color-surface-alt); }

.btn--sm { height: 32px; font-size: var(--fs-sm); padding: 0 var(--space-3); }
.btn--icon { padding: 0; width: 38px; }

/* ============================================================
   10. Űrlapmezők
   ============================================================ */
.field { margin-bottom: var(--space-3); }
.field__label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
  margin-bottom: var(--space-1);
}

.input, .select, .textarea {
  width: 100%;
  font-family: inherit;
  font-size: var(--fs-md);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: 0 var(--space-3);
  height: 38px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.textarea { height: auto; padding: var(--space-2) var(--space-3); line-height: var(--lh-normal); }
.input::placeholder, .textarea::placeholder { color: var(--color-text-subtle); }

.select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23837a73' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  padding-right: var(--space-6);
  cursor: pointer;
}

.input:hover, .select:hover, .textarea:hover { border-color: var(--color-text-subtle); }

/* Keresőmező ikonnal */
.search { position: relative; }
.search .input { padding-left: var(--space-6); }
.search__icon {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-subtle);
  pointer-events: none;
}

/* ============================================================
   11. Szűrőpanel (sidebar)
   ============================================================ */
.filters {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}
.filters__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}
.filters__title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--fw-medium);
  font-size: var(--fs-md);
}
.filters__reset { font-size: var(--fs-sm); color: var(--color-brand); }

/* ============================================================
   12. Tantárgykártyák + címkék + kódjelvény
   ============================================================ */
.results__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.subject-card {
  position: relative;
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
  color: inherit;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.subject-card:hover {
  border-color: var(--color-brand);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}
.subject-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}
.subject-card__title { font-weight: var(--fw-medium); font-size: var(--fs-lg); line-height: var(--lh-tight); }
.subject-card__subtitle { font-size: var(--fs-sm); color: var(--color-text-muted); margin-top: 2px; }
.subject-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* Kódjelvény (monospace) */
.code-badge {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  color: var(--color-info-text);
  background: var(--color-info-soft);
  padding: 3px var(--space-2);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

/* Címke (pill) — alap + szemantikus változatok */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  padding: 3px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}
.pill i { font-size: 0.95em; }

.pill--brand   { background: var(--color-brand-soft);   color: var(--color-brand-soft-text); border-color: transparent; }
.pill--info    { background: var(--color-info-soft);    color: var(--color-info-text);    border-color: transparent; }
.pill--success { background: var(--color-success-soft); color: var(--color-success-text); border-color: transparent; }
.pill--warning { background: var(--color-warning-soft); color: var(--color-warning-text); border-color: transparent; }
.pill--danger  { background: var(--color-danger-soft);  color: var(--color-danger-text);  border-color: transparent; }

/* Logó-motívum: kis "node" pont aktív/kiemelt elemekhez (szignatúra) */
.node-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-teal-500, var(--teal-500));
  vertical-align: middle;
}

/* ============================================================
   13. Lapozó
   ============================================================ */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  margin-top: var(--space-4);
}
.pagination a, .pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 var(--space-2);
  font-size: var(--fs-sm);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
}
.pagination a:hover { background: var(--color-surface-alt); color: var(--color-text); text-decoration: none; }
.pagination a.is-active {
  color: var(--color-brand);
  border: 1px solid var(--color-brand);
  font-weight: var(--fw-medium);
}
.pagination .is-gap { color: var(--color-text-subtle); }

/* ============================================================
   14. Segédosztályok, fókusz, mozgáscsökkentés, reszponzív
   ============================================================ */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

/* Csak képernyőolvasónak (akadálymentesség) */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Látható billentyűzet-fókusz */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-focus-ring);
  border-radius: var(--radius-sm);
}
.input:focus-visible, .select:focus-visible, .textarea:focus-visible {
  border-color: var(--color-info);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

/* Reszponzív: szűrő a tartalom fölé kerül kis kijelzőn */
@media (max-width: 900px) {
  .kinfo-layout { grid-template-columns: 1fr; }
  .filters { position: static; }
}
@media (max-width: 560px) {
  .kinfo-container { padding-inline: var(--space-4); }
  .kinfo-nav a { padding: var(--space-2); }
  h1 { font-size: var(--fs-xl); }
}

/* Mozgáscsökkentés tisztelete */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Dark Mode Bootstrap and Text Visibility Overrides
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .form-control,
  :root:not([data-theme='light']) .form-select,
  :root:not([data-theme='light']) .form-check-input,
  :root:not([data-theme='light']) .input-group-text {
    background-color: var(--color-surface) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border-strong) !important;
  }
  
  :root:not([data-theme='light']) .form-control::placeholder {
    color: var(--color-text-subtle) !important;
  }
  
  :root:not([data-theme='light']) .form-control:focus,
  :root:not([data-theme='light']) .form-select:focus,
  :root:not([data-theme='light']) .form-check-input:focus {
    border-color: var(--color-info) !important;
    box-shadow: 0 0 0 3px var(--color-focus-ring) !important;
  }
  
  :root:not([data-theme='light']) .form-check-input:checked {
    background-color: var(--color-brand) !important;
    border-color: var(--color-brand) !important;
  }
  
  :root:not([data-theme='light']) .accordion-item {
    background-color: var(--color-surface) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
  }
  
  :root:not([data-theme='light']) .accordion-button {
    background-color: var(--color-surface-alt) !important;
    color: var(--color-text) !important;
  }
  
  :root:not([data-theme='light']) .accordion-button::after {
    filter: invert(1) grayscale(1) brightness(2);
  }
  
  :root:not([data-theme='light']) .accordion-button:not(.collapsed) {
    background-color: var(--color-brand-soft) !important;
    color: var(--color-brand-soft-text) !important;
  }
  
  :root:not([data-theme='light']) .text-muted {
    color: var(--color-text-muted) !important;
  }
  
  :root:not([data-theme='light']) .text-subtle {
    color: var(--color-text-subtle) !important;
  }
  
  :root:not([data-theme='light']) .text-dark {
    color: var(--color-text) !important;
  }
  
  :root:not([data-theme='light']) .bg-light,
  :root:not([data-theme='light']) .bg-light-subtle,
  :root:not([data-theme='light']) .bg-surface-container-low,
  :root:not([data-theme='light']) .bg-surface-container-high {
    background-color: var(--color-surface-alt) !important;
  }
  
  :root:not([data-theme='light']) .bg-white {
    background-color: var(--color-surface) !important;
  }
  
  :root:not([data-theme='light']) .card,
  :root:not([data-theme='light']) .bg-surface {
    background-color: var(--color-surface) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
  }
}

/* Explicit data-theme="dark" overrides */
:root[data-theme='dark'] .form-control,
:root[data-theme='dark'] .form-select,
:root[data-theme='dark'] .form-check-input,
:root[data-theme='dark'] .input-group-text {
  background-color: var(--color-surface) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border-strong) !important;
}

:root[data-theme='dark'] .form-control::placeholder {
  color: var(--color-text-subtle) !important;
}

:root[data-theme='dark'] .form-control:focus,
:root[data-theme='dark'] .form-select:focus,
:root[data-theme='dark'] .form-check-input:focus {
  border-color: var(--color-info) !important;
  box-shadow: 0 0 0 3px var(--color-focus-ring) !important;
}

:root[data-theme='dark'] .form-check-input:checked {
  background-color: var(--color-brand) !important;
  border-color: var(--color-brand) !important;
}

:root[data-theme='dark'] .accordion-item {
  background-color: var(--color-surface) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

:root[data-theme='dark'] .accordion-button {
  background-color: var(--color-surface-alt) !important;
  color: var(--color-text) !important;
}

:root[data-theme='dark'] .accordion-button::after {
  filter: invert(1) grayscale(1) brightness(2);
}

:root[data-theme='dark'] .accordion-button:not(.collapsed) {
  background-color: var(--color-brand-soft) !important;
  color: var(--color-brand-soft-text) !important;
}

.text-muted {
  color: var(--color-text-muted) !important;
}

.text-subtle {
  color: var(--color-text-subtle) !important;
}

.text-dark {
  color: var(--color-text) !important;
}

:root[data-theme='dark'] .bg-light,
:root[data-theme='dark'] .bg-light-subtle,
:root[data-theme='dark'] .bg-surface-container-low,
:root[data-theme='dark'] .bg-surface-container-high {
  background-color: var(--color-surface-alt) !important;
}

:root[data-theme='dark'] .bg-white {
  background-color: var(--color-surface) !important;
}

:root[data-theme='dark'] .card,
:root[data-theme='dark'] .bg-surface {
  background-color: var(--color-surface) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

/* Admin Sidebar Navigation styling */
.active-admin-nav {
  background-color: #862633 !important;
  color: #ffffff !important;
}
.active-admin-nav .material-symbols-outlined {
  color: #ffffff !important;
}

.text-muted-admin-nav {
  color: var(--color-text-muted) !important;
}
.text-muted-admin-nav .material-symbols-outlined {
  color: var(--color-text-subtle) !important;
}

.text-muted-admin-nav:hover {
  background-color: var(--color-brand-soft) !important;
  color: var(--color-brand) !important;
}
.text-muted-admin-nav:hover .material-symbols-outlined {
  color: var(--color-brand) !important;
}

/* Sidebar Submenu items */
.submenu-admin-link {
  color: var(--color-text-muted) !important;
  font-size: 13px !important;
  padding: 6px 12px !important;
  border-radius: 4px;
  text-decoration: none !important;
  transition: all 0.2s ease;
  display: block;
}
.submenu-admin-link:hover {
  color: var(--color-brand) !important;
  background-color: var(--color-brand-soft) !important;
}
.submenu-admin-link.active {
  color: var(--color-brand) !important;
  background-color: var(--color-brand-soft) !important;
  font-weight: 600 !important;
}

.arrow-icon {
  transition: transform 0.2s ease !important;
}
a[aria-expanded="true"] .arrow-icon {
  transform: rotate(180deg) !important;
}

/* ============================================================
   Dropdown and dropdown item theme overrides
   ============================================================ */
.dropdown-menu {
  background-color: var(--color-surface) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

.dropdown-item {
  color: var(--color-text) !important;
  transition: background-color var(--transition);
}

.dropdown-item:hover, .dropdown-item:focus {
  background-color: var(--color-surface-alt) !important;
  color: var(--color-text) !important;
}

/* Explicit data-theme="dark" overrides */
:root[data-theme='dark'] .dropdown-menu {
  background-color: var(--color-surface) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

:root[data-theme='dark'] .dropdown-item {
  color: var(--color-text) !important;
}

:root[data-theme='dark'] .dropdown-item:hover,
:root[data-theme='dark'] .dropdown-item:focus {
  background-color: var(--color-surface-alt) !important;
  color: var(--color-text) !important;
}

/* prefers-color-scheme: dark overrides */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .dropdown-menu {
    background-color: var(--color-surface) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
  }

  :root:not([data-theme='light']) .dropdown-item {
    color: var(--color-text) !important;
  }

  :root:not([data-theme='light']) .dropdown-item:hover,
  :root:not([data-theme='light']) .dropdown-item:focus {
    background-color: var(--color-surface-alt) !important;
    color: var(--color-text) !important;
  }
}

/* ============================================================
   Button hover contrast overrides
   ============================================================ */
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--color-brand-hover) !important;
  border-color: var(--color-brand-hover) !important;
  color: var(--color-on-brand) !important;
}

.btn-success:hover, .btn-success:focus {
  background-color: var(--color-success-text) !important;
  border-color: var(--color-success-text) !important;
  color: #ffffff !important;
}

.btn-danger:hover, .btn-danger:focus {
  background-color: var(--color-danger-text) !important;
  border-color: var(--color-danger-text) !important;
  color: #ffffff !important;
}

.btn-warning:hover, .btn-warning:focus {
  background-color: var(--color-warning-text) !important;
  border-color: var(--color-warning-text) !important;
  color: #ffffff !important;
}

.btn-outline-primary:hover, .btn-outline-primary:focus {
  background-color: var(--color-brand) !important;
  border-color: var(--color-brand) !important;
  color: var(--color-on-brand) !important;
}

.btn-outline-success:hover, .btn-outline-success:focus {
  background-color: var(--color-success) !important;
  border-color: var(--color-success) !important;
  color: #ffffff !important;
}

.btn-outline-danger:hover, .btn-outline-danger:focus {
  background-color: var(--color-danger) !important;
  border-color: var(--color-danger) !important;
  color: #ffffff !important;
}

/* Custom dark mode and responsive additions */
.text-secondary {
  color: var(--color-text-muted) !important;
}

.btn-outline-info {
  color: var(--color-info) !important;
  border-color: var(--color-info) !important;
}
.btn-outline-info:hover, .btn-outline-info:focus {
  background-color: var(--color-info) !important;
  border-color: var(--color-info) !important;
  color: #ffffff !important;
}

/* Prefers-color-scheme: dark table & bg overrides */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .bg-light,
  :root:not([data-theme='light']) .bg-light-subtle,
  :root:not([data-theme='light']) .bg-surface-container-low,
  :root:not([data-theme='light']) .bg-surface-container-high {
    background-color: var(--color-surface-alt) !important;
  }

  :root:not([data-theme='light']) thead.table-light th {
    background-color: var(--color-surface-alt) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
  }
  :root:not([data-theme='light']) table.table {
    color: var(--color-text) !important;
    --bs-table-color: var(--color-text) !important;
    --bs-table-bg: transparent !important;
    --bs-table-border-color: var(--color-border) !important;
  }
  :root:not([data-theme='light']) table.table tbody tr {
    background-color: transparent !important;
    color: var(--color-text) !important;
  }
  :root:not([data-theme='light']) table.table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    --bs-table-hover-bg: rgba(255, 255, 255, 0.05) !important;
  }
}

/* Explicit data-theme="dark" overrides */
:root[data-theme='dark'] thead.table-light th {
  background-color: var(--color-surface-alt) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}
:root[data-theme='dark'] table.table {
  color: var(--color-text) !important;
  --bs-table-color: var(--color-text) !important;
  --bs-table-bg: transparent !important;
  --bs-table-border-color: var(--color-border) !important;
}
:root[data-theme='dark'] table.table tbody tr {
  background-color: transparent !important;
  color: var(--color-text) !important;
}
:root[data-theme='dark'] table.table-hover tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
  --bs-table-hover-bg: rgba(255, 255, 255, 0.05) !important;
}

/* ============================================================
   Admin Sidebar Collapsed State
   ============================================================ */
#admin-sidebar {
  transition: width 0.2s ease-in-out !important;
}

#admin-sidebar.sidebar-collapsed {
  width: 72px !important;
}

#admin-sidebar.sidebar-collapsed .sidebar-text,
#admin-sidebar.sidebar-collapsed .arrow-icon,
#admin-sidebar.sidebar-collapsed .collapse,
#admin-sidebar.sidebar-collapsed hr,
#admin-sidebar.sidebar-collapsed h2,
#admin-sidebar.sidebar-collapsed p {
  display: none !important;
}

#admin-sidebar.sidebar-collapsed .mb-4.px-2 {
  margin-bottom: 0 !important;
  padding: 0 !important;
}

#admin-sidebar.sidebar-collapsed nav {
  align-items: center !important;
}

#admin-sidebar.sidebar-collapsed nav a {
  justify-content: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 40px !important;
  height: 40px !important;
  margin: 0 auto !important;
}

#admin-sidebar.sidebar-collapsed form button {
  justify-content: center !important;
  padding: 0 !important;
  width: 40px !important;
  height: 40px !important;
  margin: 0 auto !important;
}

#admin-sidebar.sidebar-collapsed nav a span.material-symbols-outlined {
  margin: 0 !important;
}