/* ============================================================
   bootstrap-overrides.css
   Overrides Bootstrap defaults so public (static SSR) pages render
   in the e-Vibe Bento Grid look (flat, boxed, token-driven, light/dark).
   Pairs with: custom.css (tokens + own classes) · mudblazor-overrides.css.
   Tokens live in custom.css — reference var(--token), never literals.

   Strategy: remap Bootstrap's own CSS variables (--bs-*) onto our design
   tokens so every Bootstrap component inherits the Bento palette/shape
   automatically, then restyle the handful of components used on public
   pages (buttons, cards, forms). Phase 3 expands this as public pages
   move onto Bootstrap markup.
   ============================================================ */

/* ---------- Map Bootstrap variables onto e-Vibe tokens (theme-aware) ---------- */
:root {
    --bs-body-bg: var(--bg);
    --bs-body-color: var(--text-primary);
    --bs-secondary-color: var(--text-secondary);
    --bs-tertiary-color: var(--text-disabled);
    --bs-border-color: var(--outline);
    --bs-border-radius: var(--radius-sm);
    --bs-border-radius-sm: var(--radius-sm);
    --bs-border-radius-lg: var(--radius);
    --bs-border-radius-xl: var(--radius);
    --bs-border-radius-pill: var(--radius-pill);
    --bs-primary: var(--accent);
    --bs-link-color: var(--accent);
    --bs-link-hover-color: var(--accent);
    --bs-emphasis-color: var(--text-primary);
    --bs-font-sans-serif: "Inter", system-ui, sans-serif;
    --bs-success: var(--success);
    --bs-warning: var(--warning);
    --bs-danger: var(--error);
}

/* ---------- Base ---------- */
body { background-color: var(--bg); color: var(--text-primary); }

/* ---------- Buttons: pill, flat, gradient primary ---------- */
.btn { border-radius: var(--radius-pill); font-weight: 600; box-shadow: none; }
.btn:focus, .btn:active:focus { box-shadow: 0 0 0 3px var(--accent-soft); }
.btn-primary {
    background: var(--ai-gradient);
    border: none;
    color: var(--on-accent);
}
.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
    background: var(--ai-gradient);
    color: var(--on-accent);
    filter: brightness(1.06);
}
.btn-outline-primary {
    border: 1px solid var(--outline-strong);
    color: var(--text-primary);
    background: transparent;
}
.btn-outline-primary:hover {
    background: var(--surface-2);
    border-color: var(--accent-line);
    color: var(--text-primary);
}
.btn-link { color: var(--accent); text-decoration: none; }
.btn-link:hover { text-decoration: underline; }

/* ---------- Cards: flat matte Bento boxes (contrast, not shadow) ---------- */
.card {
    background: var(--surface);
    border: 1px solid var(--outline);
    border-radius: var(--radius);
    box-shadow: var(--shadow-bento);
    color: var(--text-primary);
}
.card-header, .card-footer {
    background: transparent;
    border-color: var(--outline);
}

/* ---------- Forms: Bento "Filled" inputs (match the MudBlazor Filled variant) ----------
   Filled box, rounded only at the top, flat underlined bottom; the underline is an inset
   box-shadow (not a border) so the 1px→2px accent transition on focus causes no reflow.
   background-color (not the background shorthand) keeps the .form-select chevron image. */
.form-control, .form-select {
    background-color: var(--field-fill);
    color: var(--text-primary);
    border: none;
    border-radius: var(--radius-input) var(--radius-input) 0 0;
    box-shadow: inset 0 -1px 0 0 var(--outline-strong);
}
.form-control:hover, .form-select:hover {
    background-color: var(--field-fill-hover);
    box-shadow: inset 0 -1px 0 0 var(--text-secondary);
}
.form-control:focus, .form-select:focus {
    background-color: var(--field-fill);
    color: var(--text-primary);
    border: none;
    box-shadow: inset 0 -2px 0 0 var(--accent);
}
.form-control::placeholder { color: var(--text-disabled); }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.form-check-input:focus { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); }

/* ---------- Surfaces / dividers ---------- */
hr { border-color: var(--outline); opacity: 1; }
a { color: var(--accent); }