:root {
  --color-ink: #1e2328;
  --color-ink-soft: #5b6472;
  --color-ink-faint: #8992a1;
  --color-paper: #f8f9fb;
  --color-card: #ffffff;
  --color-border: #e3e7ed;
  --color-border-soft: #edf0f4;
  --color-accent: #2a6f6a;
  --color-accent-soft: #eaf3f2;
  --color-accent-border: #cfe4e1;
  --color-weak: #8992a1;
  --color-shadow: rgba(30, 35, 40, 0.08);
  --color-shadow-sm: rgba(30, 35, 40, 0.04);
  --color-table-header-bg: #f4f5f8;
  --color-table-hover-bg: #fafbfc;
  --color-on-accent: #ffffff;
  --font-display: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

:root[data-theme="dark"] {
  --color-ink: #e7e9ec;
  --color-ink-soft: #a7afb9;
  --color-ink-faint: #737c87;
  --color-paper: #14171a;
  --color-card: #1b1f23;
  --color-border: #2a2f34;
  --color-border-soft: #23272b;
  --color-accent: #4fb8b0;
  --color-accent-soft: #17302e;
  --color-accent-border: #2b4a46;
  --color-weak: #737c87;
  --color-shadow: rgba(0, 0, 0, 0.45);
  --color-shadow-sm: rgba(0, 0, 0, 0.3);
  --color-table-header-bg: #202428;
  --color-table-hover-bg: #1f2327;
  /* --color-accent is light against this dark palette, so text on top of it needs to be
     dark, not the white that works for the other three (darker-accent) themes. */
  --color-on-accent: #0c1817;
}

:root[data-theme="light-pink"] {
  --color-ink: #3d1f2c;
  --color-ink-soft: #8a5468;
  --color-ink-faint: #c090a3;
  --color-paper: #fdf2f7;
  --color-card: #ffffff;
  --color-border: #f4d7e4;
  --color-border-soft: #faeaf1;
  --color-accent: #d6336c;
  --color-accent-soft: #fbe0eb;
  --color-accent-border: #f3bcd3;
  --color-weak: #c090a3;
  --color-shadow: rgba(90, 30, 55, 0.1);
  --color-shadow-sm: rgba(90, 30, 55, 0.05);
  --color-table-header-bg: #faeaf1;
  --color-table-hover-bg: #fdf4f8;
  --color-on-accent: #ffffff;
}

:root[data-theme="dark-pink"] {
  --color-ink: #f8e6ee;
  --color-ink-soft: #d29bb2;
  --color-ink-faint: #8c5a6d;
  --color-paper: #22131a;
  --color-card: #2c1721;
  --color-border: #472736;
  --color-border-soft: #3a2029;
  --color-accent: #ff6fa8;
  --color-accent-soft: #3d1f2b;
  --color-accent-border: #6a3448;
  --color-weak: #8c5a6d;
  --color-shadow: rgba(0, 0, 0, 0.5);
  --color-shadow-sm: rgba(0, 0, 0, 0.32);
  --color-table-header-bg: #2a1720;
  --color-table-hover-bg: #28151d;
  /* Same reasoning as dark's --color-on-accent: this theme's accent is a light pink. */
  --color-on-accent: #29121b;
}

/* Albanian flag ("Shqipëri"): red field, black double-headed eagle — rendered as a dark
   theme (per the user's request), not a light one. The eagle's black isn't given its own
   slot (same call as dark-pink not surfacing a second flag color anywhere but --color-ink);
   --color-paper/--color-card instead lean warm-near-black, evoking it directly. The red
   accent is brightened vs. what a light theme would use (#e41e20 -> #ff4d4d) for the same
   reason dark/dark-pink brighten their accents — a color this size needs to read against a
   near-black background, not a white one — which is also why --color-on-accent goes dark
   here (WCAG-checked: white-on-#ff4d4d is ~3.3:1, fails AA normal text; dark-on-#ff4d4d is
   ~5.4:1, passes) instead of the white that a straight flag-red would suggest. */
:root[data-theme="shqiperi"] {
  --color-ink: #f3e6e4;
  --color-ink-soft: #c99f99;
  --color-ink-faint: #8c6560;
  --color-paper: #180f0d;
  --color-card: #221512;
  --color-border: #3d221e;
  --color-border-soft: #2c1916;
  --color-accent: #ff4d4d;
  --color-accent-soft: #3d1613;
  --color-accent-border: #6b2c26;
  --color-weak: #8c6560;
  --color-shadow: rgba(0, 0, 0, 0.5);
  --color-shadow-sm: rgba(0, 0, 0, 0.32);
  --color-table-header-bg: #271713;
  --color-table-hover-bg: #241614;
  --color-on-accent: #29130f;
}

/* Kosovo flag: blue field, gold map silhouette and stars — same reasoning as Albania's
   above for why the gold doesn't get its own variable slot. */
:root[data-theme="kosove"] {
  --color-ink: #131c2e;
  --color-ink-soft: #566a8c;
  --color-ink-faint: #96a6c2;
  --color-paper: #f4f7fc;
  --color-card: #ffffff;
  --color-border: #d7e0f2;
  --color-border-soft: #e9eef9;
  --color-accent: #244aa5;
  --color-accent-soft: #e3ebf9;
  --color-accent-border: #b9cced;
  --color-weak: #96a6c2;
  --color-shadow: rgba(10, 25, 60, 0.1);
  --color-shadow-sm: rgba(10, 25, 60, 0.05);
  --color-table-header-bg: #e9eef9;
  --color-table-hover-bg: #f4f7fc;
  --color-on-accent: #ffffff;
}

* {
  box-sizing: border-box;
}

/* Baseline transition so switching themes fades colors instead of snapping — any selector
   below that declares its own `transition` (e.g. hover states) still wins on specificity. */
*,
*::before,
*::after {
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

html {
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-paper);
  margin: 0;
  min-height: 100vh;
}

a {
  color: var(--color-accent);
}

/* Nav */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-card);
  border-bottom: 1px solid var(--color-border);
}

.site-nav-inner {
  max-width: 880px;
  margin: 0 auto;
  padding: 0.85rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--color-ink);
}

.site-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
}

.site-brand-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.site-nav-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.site-nav-link {
  color: var(--color-ink-soft);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.92rem;
  padding: 0.4rem 0.7rem;
  border-radius: 6px;
  transition: background 0.15s ease, color 0.15s ease;
}

.site-nav-link:hover {
  color: var(--color-ink);
  background: var(--color-border-soft);
}

.site-nav-dropdown {
  position: relative;
}

.site-nav-dropdown .dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.site-nav-dropdown .dropdown-toggle::after {
  border-top-color: currentColor;
  opacity: 0.6;
}

.site-nav-dropdown .dropdown-menu {
  margin-top: 0.35rem;
  padding: 0.4rem;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 8px 24px var(--color-shadow);
  font-family: var(--font-body);
}

.site-nav-dropdown .dropdown-item {
  border-radius: 6px;
  padding: 0.45rem 0.75rem;
  font-size: 0.92rem;
  color: var(--color-ink-soft);
}

.site-nav-dropdown .dropdown-item:hover,
.site-nav-dropdown .dropdown-item:focus {
  background: var(--color-border-soft);
  color: var(--color-ink);
}

.site-nav-toggler {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-card);
  color: var(--color-ink);
  font-size: 1.15rem;
}

@media (min-width: 576px) {
  .site-nav-links.collapse:not(.show) {
    display: flex !important;
  }

  .site-nav-toggler {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .site-nav-links {
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    padding-top: 0.5rem;
  }
}

/* Page content */
.page-content {
  max-width: 760px;
  margin: 0 auto;
  padding: 3rem 1.5rem 5rem;
}

.page-content h1 {
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 0.75rem;
}

/* Cross-navigation between a family of related pages (e.g. the Nouns section) — structural
   chrome rendered by the page template, not editorial content. */
.related-pages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.related-pages-label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-ink-faint);
  margin-right: 0.25rem;
}

.related-pages-link,
.related-pages-current {
  font-size: 0.88rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
}

.related-pages-link {
  background: var(--color-card);
  color: var(--color-ink-soft);
  text-decoration: none;
}

.related-pages-link:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.related-pages-current {
  background: var(--color-accent-soft);
  border-color: var(--color-accent-border);
  color: var(--color-accent);
  font-weight: 600;
}

/* Pill-shaped search box (Declensions page) — matches the site's rounded, understated form
   language instead of a generic Bootstrap input+button pair. */
.declension-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 380px;
  margin-bottom: 1.75rem;
  padding: 0.3rem 0.3rem 0.3rem 1rem;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.declension-search:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}

.declension-search-icon {
  color: var(--color-ink-faint);
  font-size: 0.9rem;
}

.declension-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-ink);
  padding: 0.45rem 0;
}

/* Native number-input spinner arrows are drawn by the browser/OS, not this stylesheet — they
   can't be recolored to follow the theme, so hidden entirely instead (Number composer's input). */
.declension-search-input::-webkit-outer-spin-button,
.declension-search-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.declension-search-input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.declension-search-input::placeholder {
  color: var(--color-ink-faint);
}

.declension-search-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  color: var(--color-ink-faint);
  text-decoration: none;
  font-size: 0.7rem;
}

.declension-search-clear:hover {
  background: var(--color-border-soft);
  color: var(--color-ink);
}

.declension-search-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 0.9rem;
  transition: filter 0.15s ease;
}

.declension-search-submit:hover {
  filter: brightness(0.92);
}

.page-content .lede {
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--color-ink-soft);
  max-width: 60ch;
  margin-bottom: 0;
}

.page-content .prose {
  font-size: 1.06rem;
  line-height: 1.75;
  color: var(--color-ink);
  margin-top: 1.5rem;
}

.page-content .prose p {
  margin-bottom: 1.1rem;
}

/* An inline style="max-width:100%" on an <img> doesn't survive Quill's getSemanticHTML()
   round-trip (same class of loss as the table styling note below), so an image embedded at
   its native size would otherwise overflow .page-content's 760px column — capped here instead,
   for every image any content ever embeds, not just the one that prompted this. */
.page-content .prose img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.25rem 0;
}

/* Tables an editor builds inline in Quill content — deliberately styled to match
   .grammar-table-card/.grammar-table (the same "reference table" look used for the
   auto-rendered paradigm tables elsewhere on the site), so a hand-built example table and a
   data-driven one read as the same design language. Quill's table blot only preserves plain
   <td> cells (no <th>, no class/style attributes survive the round-trip), so the header row
   is marked with <strong> text inside the cell and styled generically rather than via a
   class or real <th> semantics. */
.page-content .prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 2rem;
  font-size: 0.95rem;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 2px var(--color-shadow-sm);
}

.page-content .prose table td {
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--color-border-soft);
  text-align: left;
  vertical-align: top;
}

/* table-better wraps each cell's content in its own <p> (needed for its editing model) —
   without this override that would add the standard .prose p bottom margin inside every
   cell, throwing off the row's vertical rhythm. */
.page-content .prose table td p {
  margin-bottom: 0;
}

.page-content .prose table tr:last-child td {
  border-bottom: none;
}

.page-content .prose table tr:first-child td {
  background: var(--color-table-header-bg);
}

.page-content .prose table tr:not(:first-child):hover td {
  background: var(--color-table-hover-bg);
}

.page-content .prose table tr:first-child td strong {
  color: var(--color-ink-soft);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Editor content is now saved via Quill's getSemanticHTML(), which emits plain <ul>/<ol>/<li>
   — no internal data-list/.ql-ui markup to work around, just normal list styling. */
.page-content .prose ul,
.page-content .prose ol {
  margin: 0 0 1.1rem;
  padding-left: 1.4em;
}

.page-content .prose li {
  margin-bottom: 0.4rem;
}

.page-content .prose li:last-child {
  margin-bottom: 0;
}

.page-content .prose ul li::marker,
.page-content .prose ol li::marker {
  color: var(--color-ink-faint);
}

.page-content .prose em {
  color: var(--color-accent);
  font-style: normal;
  font-weight: 600;
}

.page-content .prose blockquote {
  background: var(--color-accent-soft);
  border: 1px solid var(--color-accent-border);
  border-left: 4px solid var(--color-accent);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin: 1.75rem 0;
  font-size: 0.95rem;
  color: var(--color-ink-soft);
}

.page-content .prose blockquote strong {
  color: var(--color-ink);
}

/* Table key legend — describes the visual convention only, no grammatical claims (that
   belongs in editable prose, not hardcoded UI chrome) */
.table-key {
  font-size: 0.88rem;
  color: var(--color-ink-soft);
  margin: 1.5rem 0 0.75rem;
}

/* Grammar table cards */
.grammar-table-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 2rem;
  box-shadow: 0 1px 2px var(--color-shadow-sm);
}

.grammar-table-card h2 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
}

.grammar-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.grammar-table th,
.grammar-table td {
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--color-border-soft);
  text-align: left;
}

.grammar-table thead th {
  color: var(--color-ink-soft);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: var(--color-table-header-bg);
}

.grammar-table tbody th {
  color: var(--color-ink-soft);
  font-weight: 600;
  white-space: nowrap;
}

.grammar-table tbody tr:hover td {
  background: var(--color-table-hover-bg);
}

.grammar-table tbody tr:last-child td,
.grammar-table tbody tr:last-child th {
  border-bottom: none;
}

.form-pair {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.form-strong {
  font-weight: 600;
}

.form-weak {
  color: var(--color-weak);
}

.site-nav-mega-panel {
  position: static;
  padding: 1.1rem 1.35rem;
}

.site-nav-mega-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

.site-nav-mega-col {
  display: flex;
  flex-direction: column;
}

.site-nav-mega-heading {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-ink-faint);
  margin-bottom: 0.4rem;
}

@media (min-width: 576px) {
  .site-nav-inner {
    position: relative;
  }

  .site-nav-mega-panel {
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    width: min(720px, calc(100vw - 2rem));
    margin-top: 0.5rem;
  }

  .site-nav-mega-grid {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 1.25rem 1.5rem;
  }
}

.start-path {
  list-style: none;
  margin: 2rem 0 2.5rem;
  padding: 0;
}

.start-path-stage {
  margin-bottom: 1.5rem;
}

.start-path-stage:last-child {
  margin-bottom: 0;
}

.start-stage-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-ink-faint);
  margin-bottom: 0.6rem;
}

.start-path-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.start-path-step {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 0.8rem 1.1rem;
}

.start-step-num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  margin-top: 0.1rem;
}

.start-step-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.start-step-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-ink);
  text-decoration: none;
}

.start-step-title:hover {
  color: var(--color-accent);
}

.start-step-hint {
  font-size: 0.87rem;
  color: var(--color-ink-soft);
}

.start-tools-heading {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  margin-top: 2.5rem;
  margin-bottom: 0.5rem;
}

.start-here-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
  padding: 1.1rem 1.4rem;
  background: var(--color-accent-soft);
  border: 1px solid var(--color-accent-border);
  border-radius: 12px;
}

.start-here-callout-text strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--color-ink);
}

.start-here-callout-text span {
  display: block;
  font-size: 0.9rem;
  color: var(--color-ink-soft);
  margin-top: 0.15rem;
}

.start-here-callout-link {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  background: var(--color-accent);
  color: var(--color-on-accent);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: 999px;
  transition: filter 0.15s ease;
}

.start-here-callout-link:hover {
  filter: brightness(0.92);
  color: var(--color-on-accent);
}

/* Homepage / topic grid */
.topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.85rem;
  margin-top: 2rem;
}

.topic-card {
  display: block;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 1.1rem 1.3rem;
  text-decoration: none;
  color: var(--color-ink);
  transition: border-color 0.15s ease;
}

a.topic-card:hover {
  border-color: var(--color-accent);
  color: var(--color-ink);
}

.topic-card.is-disabled {
  color: var(--color-ink-faint);
}

.topic-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-size: 0.95rem;
  margin-bottom: 0.7rem;
}

.topic-card.is-disabled .topic-icon {
  background: var(--color-border-soft);
  color: var(--color-ink-faint);
}

.topic-card .topic-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
}

.topic-card .topic-hint {
  display: block;
  color: var(--color-ink-soft);
  font-size: 0.87rem;
  margin-top: 0.25rem;
  line-height: 1.5;
}

.topic-card.is-disabled .topic-hint {
  color: var(--color-ink-faint);
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--color-border);
  margin-top: 2rem;
}

.site-footer-inner {
  max-width: 880px;
  margin: 0 auto;
  padding: 1.5rem 1.5rem;
  font-size: 0.85rem;
  color: var(--color-ink-faint);
}

/* "Report a problem" link at the foot of a content page (see _ReportIssueLink.cshtml) —
   deliberately muted so it doesn't compete with the grammar content above it. */
.report-issue-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border-soft);
  font-size: 0.85rem;
  color: var(--color-ink-faint);
  text-decoration: none;
}

.report-issue-link:hover {
  color: var(--color-accent);
}

/* Theme picker (see _ThemePicker.cshtml, wwwroot/js/theme.js) — reuses .site-nav-dropdown's
   dropdown-menu/dropdown-item styling; this block only adds what's specific to it. */
.theme-picker-toggle {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 1rem;
}

/* Icon-only toggle — the family dropdowns (Pronouns, Nouns, ...) show a caret because they
   have a text label; this one is a single icon and doesn't need one. */
.theme-picker-toggle::after {
  display: none;
}

.theme-picker-option {
  display: flex;
  align-items: center;
  width: 100%;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
}

.theme-picker-option[aria-pressed="true"] {
  background: var(--color-border-soft);
  color: var(--color-ink);
  font-weight: 600;
}

/* Each swatch shows what that theme's page background and accent color actually look like,
   so it can't read from the live --color-* variables (those only reflect the theme in effect
   right now) — the four gradients below are a deliberate, one-time snapshot of each palette. */
.theme-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border-radius: 50%;
  margin-right: 0.6rem;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

.theme-swatch-light {
  background: linear-gradient(135deg, #f8f9fb 50%, #2a6f6a 50%);
}

.theme-swatch-dark {
  background: linear-gradient(135deg, #14171a 50%, #4fb8b0 50%);
}

.theme-swatch-light-pink {
  background: linear-gradient(135deg, #fdf2f7 50%, #d6336c 50%);
}

.theme-swatch-dark-pink {
  background: linear-gradient(135deg, #22131a 50%, #ff6fa8 50%);
}

.theme-swatch-shqiperi {
  background: linear-gradient(135deg, #180f0d 50%, #ff4d4d 50%);
}

.theme-swatch-kosove {
  background: linear-gradient(135deg, #f4f7fc 50%, #244aa5 50%);
}

/* Plain Bootstrap form controls used as-is, not given a custom class (e.g. Report a problem's
   category <select>/description <textarea>/submit button) — every theme above only reached the
   custom-built site chrome (nav, cards, pill buttons), never Bootstrap's own component classes,
   so these still rendered with Bootstrap's hardcoded stock colors regardless of [data-theme].
   Same category of gap as the Keycloak login theme's ::after-border bug, just on Bootstrap's
   side of this project instead of PatternFly's: bridge the Bootstrap CSS variables .form-control
   /.form-select actually read (--bs-body-bg/--bs-body-color/--bs-border-color — confirmed by
   reading bootstrap.min.css directly, the same "check the real rule instead of guessing" lesson
   from that earlier fix) once, here, rather than fighting each component's own hardcoded colors
   piecemeal. --bs-body-bg intentionally maps to --color-card, not --color-paper: these are a
   surface sitting on the page, the same relationship --la-card had in the Keycloak theme. */
.page-content {
  --bs-body-bg: var(--color-card);
  --bs-body-color: var(--color-ink);
  --bs-border-color: var(--color-border);
}

/* The <select> arrow is a raw SVG data URI with its stroke color baked in (Bootstrap's
   --bs-form-select-bg-img variable) — can't reference --color-* from inside that string, so
   this picks one of two fixed, muted grays depending on whether the active theme's card is
   light or dark, rather than exactly matching each theme's own ink-faint hue. A visible,
   working arrow slightly off-hue beats an invisible one exactly on-hue. */
.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'%3e%3cpath fill='none' stroke='%236c757d' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

:root[data-theme="dark"] .form-select,
:root[data-theme="dark-pink"] .form-select,
:root[data-theme="shqiperi"] .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'%3e%3cpath fill='none' stroke='%23adb5bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* :focus hardcodes Bootstrap's own blue directly (border-color/box-shadow, not a variable —
   confirmed the same way as the bg-img above), so the bridge alone doesn't reach it. */
.form-control:focus,
.form-select:focus {
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 0.25rem var(--color-accent-soft) !important;
}

/* .btn-primary carries its own scoped --bs-btn-* variables with hardcoded hex (not the global
   --bs-primary), same "per-component, not global" shape as the Keycloak theme's button fix —
   hover/active reuse the same accent rather than computing a theme-correct darker/lighter
   shade for all six palettes; brightness() gives the pressed-state feedback instead. */
.btn-primary {
  --bs-btn-color: var(--color-on-accent);
  --bs-btn-bg: var(--color-accent);
  --bs-btn-border-color: var(--color-accent);
  --bs-btn-hover-color: var(--color-on-accent);
  --bs-btn-hover-bg: var(--color-accent);
  --bs-btn-hover-border-color: var(--color-accent);
  --bs-btn-active-color: var(--color-on-accent);
  --bs-btn-active-bg: var(--color-accent);
  --bs-btn-active-border-color: var(--color-accent);
  --bs-btn-disabled-bg: var(--color-accent);
  --bs-btn-disabled-border-color: var(--color-accent);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  filter: brightness(0.92);
}

.btn-link {
  color: var(--color-accent);
}