/* static/css/main.css */
/* Import base styles */
@import url("base/layout.a87824b1ce96.css");
@import url("base/typography.d2261b5bfd94.css");

/* Import component styles */
@import url("components/buttons.8df363b0721c.css");
@import url("components/cards.ae8309acb18d.css");
@import url("components/navbar.3981c0797c55.css");
@import url("components/sidebar.6a3756d15260.css");
@import url("components/forms.c5761b5ecc3f.css");
@import url("components/panels.283854254c74.css");
@import url("components/footer.18b00c2020cf.css");

/* Import theme */
@import url("themes/colors.21e3f1f75062.css");

/* ---------------------------------------------------------------------------
   Badge contrast safety net.
   Bootstrap 5.3 .badge defaults to WHITE text. The "warning" (#ffc107 amber)
   and "info" (#0dcaf0 cyan) backgrounds are LIGHT, so a bare `badge bg-warning`
   or `badge bg-info` renders white-on-light and is effectively unreadable.
   Bootstrap's own .text-bg-warning/.text-bg-info pair these light backgrounds
   with dark text — mirror that here so every status tag stays legible without
   editing each template. !important also overrides stray `text-white` placed
   directly on these badges.
   --------------------------------------------------------------------------- */
.badge.bg-warning { color: #000 !important; }
.badge.bg-info    { color: #000 !important; }

/* The soft-pill badge theme (components/panels.css) restyles bg-success/
   warning/danger/info/secondary but has no rules for bg-primary or bg-dark,
   so those keep their solid dark Bootstrap background while inheriting the
   pill base's dark-gray text — dark-on-dark and unreadable. Pair the dark
   backgrounds with white text. */
.badge.bg-primary { color: #fff !important; }
.badge.bg-dark    { color: #fff !important; }

/* Same failure, third variant: a template supplies its own SOLID DARK fill
   inline (style="background-color: var(--hoa-deep-purple)") and no colour, so
   the pill base in components/panels.css hands it dark-gray text and the label
   disappears into the fill. These selectors match the inline style itself, so
   such a badge stays legible even where the markup hasn't been converted to
   `badge bg-purple`. The trailing ")" matters — without it the selector would
   also match var(--hoa-deep-purple-light), a LIGHT fill that needs dark text. */
.badge[style*="--hoa-deep-purple)"],
.badge[style*="--hoa-purple)"],
.badge[style*="#6F42C2" i],
.badge[style*="#6a11cb" i] { color: #fff !important; }

/* Readable amber for TEXT on white/light backgrounds. Bootstrap's .text-warning
   (#ffc107) is ~1.6:1 on white and fails WCAG; use this darker amber (~5:1) when
   amber-toned text is wanted as a heading/body color rather than a badge fill. */
.text-amber-dark { color: #9a6700 !important; }

/* Note: Page-specific styles should be imported directly in the templates that need them */