/* ── Bootstrap theming layer ──────────────────────────────────────────────
   Phase 2a (docs/ole-coffee-restyle-brief-v2.md). Loaded AFTER
   bootstrap.min.css and BEFORE static/css/styles.css.

   Bootstrap 5.3 components read their real CSS properties from local
   custom properties the component itself defines (e.g. .btn reads
   background-color from var(--bs-btn-bg), which .btn-primary etc. then
   redefine). Re-pointing those --bs-* variables is the intended, clean
   way to theme Bootstrap — no specificity fights, no !important needed
   for the components handled this way (.btn-primary, .card, .modal,
   .toast).

   .alert-*/.text-bg-*/.badge.bg-*/.btn-success/.btn-danger/.btn-outline-*
   are the one group that DOES use !important: Bootstrap's own rules for
   these already declare their real properties directly (not just via a
   --bs-* variable), so ours must win the same way. This block was
   originally proven correct live in the browser during Phase 1 before
   moving here — do not "clean up" the !important on these specifically. */

/* ── Form validation state ────────────────────────────────────────────────
   Bootstrap's .is-invalid/.invalid-feedback read from --bs-form-invalid-*,
   defined globally on :root — redefining it here cascades everywhere,
   no !important needed (pure custom-property override, not competing with
   a direct property assignment). Live today via app.js phone masking on
   customer_checkin.html/customer_register.html/kiosk_checkin.html, and is
   what templates/_macros.html's form_field(..., error=...) renders into.
   NOTE: the small inline invalid-state icon Bootstrap draws inside the
   input is a baked-in SVG data URI (stroke='%23dc3545') that can't be
   re-colored via CSS variables — left as a minor known gap, low visual
   impact at 12x12px, not worth a hand-authored SVG replacement this phase. */
:root {
    --bs-form-invalid-color: var(--danger);
    --bs-form-invalid-border-color: var(--danger);
}

/* ── Semantic alerts / badges / buttons (moved from styles.css, Phase 1) ── */
.alert-success { background-color: var(--success-bg) !important; border-color: var(--success) !important; color: var(--gold-deep) !important; }
.alert-danger  { background-color: var(--danger-bg) !important;  border-color: var(--danger) !important;  color: var(--danger) !important; }
.alert-warning { background-color: var(--success-bg) !important; border-color: var(--gold) !important;    color: var(--gold-deep) !important; }
.alert-info    { background-color: var(--surface-2) !important;  border-color: var(--line) !important;    color: var(--secondary) !important; }

.text-bg-success, .badge.bg-success { background-color: var(--success) !important; color: var(--ink) !important; }
.text-bg-danger,  .badge.bg-danger  { background-color: var(--danger) !important;  color: #fff !important; }
.text-bg-warning, .badge.bg-warning { background-color: var(--gold) !important;    color: #fff !important; }

.btn-success { background-color: var(--success); border-color: var(--success); color: var(--ink); }
.btn-success:hover, .btn-success:focus { background-color: var(--gold-deep); border-color: var(--gold-deep); color: #fff; }
.btn-danger  { background-color: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover, .btn-danger:focus { background-color: #6E2E20; border-color: #6E2E20; color: #fff; }
.btn-outline-danger { color: var(--danger); border-color: var(--danger); }
.btn-outline-danger:hover { background-color: var(--danger); border-color: var(--danger); color: #fff; }
.btn-outline-success { color: var(--gold-deep); border-color: var(--success); }
.btn-outline-success:hover { background-color: var(--success); border-color: var(--success); color: var(--ink); }

/* ── .btn-primary — via --bs-btn-* variables ──────────────────────────────
   Not currently used anywhere in the app (it uses its own .btn-brand
   instead) — themed anyway per the brief, so it's correct by default the
   day anyone reaches for Bootstrap's own primary button instead of ours. */
.btn-primary {
    --bs-btn-color: var(--ink);
    --bs-btn-bg: var(--gold);
    --bs-btn-border-color: var(--gold);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--gold-deep);
    --bs-btn-hover-border-color: var(--gold-deep);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--gold-deep);
    --bs-btn-active-border-color: var(--gold-deep);
    --bs-btn-disabled-bg: var(--muted);
    --bs-btn-disabled-border-color: var(--muted);
}

/* ── .card — via --bs-card-* variables ────────────────────────────────────
   Not currently used anywhere either (the app uses .app-card throughout)
   — themed for the same future-proofing reason as .btn-primary. */
.card {
    --bs-card-bg: var(--paper);
    --bs-card-border-color: var(--line);
    --bs-card-cap-bg: var(--surface);
    --bs-card-color: var(--ink);
}

/* ── .modal — via --bs-modal-* variables ──────────────────────────────────
   Real usage: admin.html (edit product), index.html (cancel & refund),
   kiosk_status.html (voucher popup). Previously each carried its own
   inline style="background:var(--paper);border:1px solid var(--line)"
   duplicate of this — removed now that it's centralized here. */
.modal-content {
    --bs-modal-bg: var(--paper);
    --bs-modal-border-color: var(--line);
    --bs-modal-header-border-color: var(--line);
    --bs-modal-footer-border-color: var(--line);
    --bs-modal-color: var(--ink);
}

/* ── .toast — via --bs-toast-* variables ──────────────────────────────────
   Real usage: customer_shop.html voucher-earned toast (its border/text
   color were already set inline per-instance; this covers the base
   component so any future toast is correct without needing that repeated
   inline override). */
.toast {
    --bs-toast-bg: var(--paper);
    --bs-toast-border-color: var(--line);
    --bs-toast-color: var(--ink);
}

/* ── .nav-pill hex/!important cleanup ──────────────────────────────────────
   Handled directly in styles.css (Phase 2a note): converted to tokens,
   !important removed — safe since nothing in the app currently uses this
   class, confirmed via a full-repo grep. Left as a styles.css rule since
   it isn't a Bootstrap override, just app-local dead-but-tokenized CSS. */