/* ============================================================
   Bootstrap-compat layer.
   Several legacy templates use Bootstrap grid/utility classes but
   Bootstrap CSS was never loaded (they rendered as stacked blocks).
   This thin layer gives them a real grid + the most-used helpers,
   styled with v2 tokens. Page-level CSS (extra_css) loads after
   this file and wins any conflicts.
   ============================================================ */

.row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
}

[class*="col-"] {
  grid-column: span 12;
  min-width: 0;
}

@media (min-width: 768px) {
  .col-md-1 { grid-column: span 1; }
  .col-md-2 { grid-column: span 2; }
  .col-md-3 { grid-column: span 3; }
  .col-md-4 { grid-column: span 4; }
  .col-md-5 { grid-column: span 5; }
  .col-md-6 { grid-column: span 6; }
  .col-md-7 { grid-column: span 7; }
  .col-md-8 { grid-column: span 8; }
  .col-md-9 { grid-column: span 9; }
  .col-md-10 { grid-column: span 10; }
  .col-md-12 { grid-column: span 12; }
}

@media (min-width: 992px) {
  .col-lg-2 { grid-column: span 2; }
  .col-lg-3 { grid-column: span 3; }
  .col-lg-4 { grid-column: span 4; }
  .col-lg-5 { grid-column: span 5; }
  .col-lg-6 { grid-column: span 6; }
  .col-lg-7 { grid-column: span 7; }
  .col-lg-8 { grid-column: span 8; }
  .col-lg-9 { grid-column: span 9; }
  .col-lg-12 { grid-column: span 12; }
}

/* Row gutters */
.g-2 { gap: 0.5rem; }
.g-3 { gap: 0.75rem; }
.g-4 { gap: 1.25rem; }
.g-5 { gap: 2rem; }

/* Flex helpers */
.d-flex { display: flex; }
.d-grid { display: grid; }
.d-none { display: none; }
.flex-column { flex-direction: column; }
.justify-content-between { justify-content: space-between; }
.justify-content-center { justify-content: center; }
.justify-content-end { justify-content: flex-end; }
.align-items-center { align-items: center; }
.align-items-start { align-items: flex-start; }
.align-items-end { align-items: flex-end; }
.flex-grow-1 { flex-grow: 1; }
.flex-wrap { flex-wrap: wrap; }

/* Text alignment / sizing */
.text-end { text-align: right; }
.text-start { text-align: left; }
.text-center { text-align: center; }
.small { font-size: 0.85rem; }
.fw-bold { font-weight: 700; }
.h-100 { height: 100%; }
.w-100 { width: 100%; }

/* Display headings (Bootstrap scale, Cinzel flavored) */
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: var(--font-display);
  line-height: 1.1;
  font-weight: 700;
}
.display-1 { font-size: 4.5rem; }
.display-2 { font-size: 3.75rem; }
.display-3 { font-size: 3rem; }
.display-4 { font-size: 2.5rem; }
.display-5 { font-size: 2rem; }
.display-6 { font-size: 1.6rem; }

/* Surfaces & borders */
.rounded-pill { border-radius: var(--radius-pill); }
.rounded-4 { border-radius: 1rem; }
/* Legacy name from the dark era: teacher templates use .bg-dark as
   "a raised block" — in the light system that is a soft tinted panel. */
.bg-dark { background-color: var(--ink-950); }
.bg-opacity-60 { --bs-noop: 0; }
.border { border: 1px solid var(--border-soft); }
.border-secondary { border-color: var(--border-soft) !important; }

/* Badge */
.badge {
  display: inline-block;
  padding: 0.3em 0.65em;
  font-size: 0.75em;
  font-weight: 700;
  line-height: 1;
  border-radius: var(--radius-pill);
  background: var(--primary-50);
  color: var(--primary-700);
  border: 1px solid var(--primary-100);
}
.bg-danger { background: var(--danger-color); color: #fff; }
.bg-success { background: var(--success-color); color: #fff; }
.bg-warning { background: var(--warning-color); color: #fff; }
.bg-secondary { background: var(--ink-600); color: var(--text-color); }

/* Token-named utilities Tailwind never generates (it has no such colours in
   its palette and none are registered in tailwind.config). Without these the
   class is a no-op: the background never paints, so any .text-white sitting
   on it renders white-on-white. */
.bg-accent-color { background: var(--accent-color); color: #fff; }
.text-primary-600 { color: var(--primary-600); }
.border-accent { border-color: var(--accent-color); }
.border-success { border-color: var(--success-color); }
.border-danger { border-color: var(--danger-color); }
.border-warning { border-color: var(--warning-color); }
.fill-success { fill: var(--success-color); }

/* Text colors (token-mapped).
   .text-white / .text-light were written against dark surfaces; on the
   light system they resolve to the primary ink so legacy templates stay
   legible. Intentionally-dark pages (arena) override via their own CSS
   or Tailwind utilities, which load after this file. */
.text-accent { color: var(--accent-color); }
.text-info { color: var(--info-color); }
.text-success { color: var(--success-color); }
.text-danger { color: var(--danger-color); }
.text-warning { color: var(--warning-color); }
.text-white { color: var(--text-color); }
.text-light { color: var(--text-color); }
.text-muted { color: var(--text-muted); }

/* Serif helper used across cockpit pages */
.font-serif { font-family: var(--font-display); }
.uppercase { text-transform: uppercase; }
.tracking-widest { letter-spacing: 0.12em; }

/* Higher specificity rules to override Tailwind Play CDN dynamic styles
   for pastel/light text utilities when NOT on dark buttons/backgrounds */
/* NOTE: .text-white is deliberately NOT swept here. 44 of its 48 template
   usages sit on a coloured button/gradient, and the remaining ones are a white
   bot icon (base.html) plus .wuxia-btn / .summit-oath-btn, which paint their
   own coloured background from page CSS rather than a bg-* utility. Sweeping
   it would turn all of those dark-on-dark. Fix genuine white-on-white cases at
   the element (see .bg-accent-color above, which was the real culprit: a
   phantom background that never painted). */
:root .text-slate-50:not(button):not(.btn):not([class*="bg-"]):not([class*="from-"]),
:root .text-slate-100:not(button):not(.btn):not([class*="bg-"]):not([class*="from-"]),
:root .text-slate-200:not(button):not(.btn):not([class*="bg-"]):not([class*="from-"]) {
  color: var(--text-color) !important;
}

:root .text-slate-300:not(button):not(.btn):not([class*="bg-"]):not([class*="from-"]),
:root .text-slate-400:not(button):not(.btn):not([class*="bg-"]):not([class*="from-"]) {
  color: var(--text-muted) !important;
}

:root .text-amber-100:not(button):not(.btn):not([class*="bg-"]):not([class*="from-"]),
:root .text-amber-200:not(button):not(.btn):not([class*="bg-"]):not([class*="from-"]),
:root .text-amber-300:not(button):not(.btn):not([class*="bg-"]):not([class*="from-"]),
:root .text-yellow-100:not(button):not(.btn):not([class*="bg-"]):not([class*="from-"]),
:root .text-yellow-200:not(button):not(.btn):not([class*="bg-"]):not([class*="from-"]),
:root .text-yellow-300:not(button):not(.btn):not([class*="bg-"]):not([class*="from-"]) {
  color: var(--gold-500) !important;
}

:root .text-purple-100:not(button):not(.btn):not([class*="bg-"]):not([class*="from-"]),
:root .text-purple-200:not(button):not(.btn):not([class*="bg-"]):not([class*="from-"]),
:root .text-purple-300:not(button):not(.btn):not([class*="bg-"]):not([class*="from-"]) {
  color: var(--violet-500) !important;
}

:root .text-rose-100:not(button):not(.btn):not([class*="bg-"]):not([class*="from-"]),
:root .text-rose-200:not(button):not(.btn):not([class*="bg-"]):not([class*="from-"]),
:root .text-rose-300:not(button):not(.btn):not([class*="bg-"]):not([class*="from-"]) {
  color: var(--crimson-500) !important;
}

:root .text-blue-100:not(button):not(.btn):not([class*="bg-"]):not([class*="from-"]),
:root .text-blue-200:not(button):not(.btn):not([class*="bg-"]):not([class*="from-"]),
:root .text-blue-300:not(button):not(.btn):not([class*="bg-"]):not([class*="from-"]) {
  color: var(--primary-600) !important;
}

:root .text-emerald-100:not(button):not(.btn):not([class*="bg-"]):not([class*="from-"]),
:root .text-emerald-200:not(button):not(.btn):not([class*="bg-"]):not([class*="from-"]),
:root .text-emerald-300:not(button):not(.btn):not([class*="bg-"]):not([class*="from-"]) {
  color: var(--jade-500) !important;
}