/* ---------------------------------------------------------------------------
   Bootstrap -> Miami-Dade County token bridge.

   Loaded after bootstrap.min.css and before app.css. It contains no layout and
   no new components: it only re-points Bootstrap's own colours at the county
   design tokens -- button custom properties, links and the .text-* utilities,
   and the focus ring on buttons and form controls -- so the existing markup
   renders in the county palette with no markup change.

   Why this rather than <mdcgov-button>:

     * mdcgov-button has no variants. There is no variant/kind/size attribute in
       the bundle -- one style only (#295D92, white text, 8px radius). The
       county's own sample form passes variant="primary", which the component
       silently ignores. Their documented route to a second appearance is
       overriding --mdcgov-button-background in CSS, i.e. exactly the technique
       used below.
     * Blazor cannot bind the components' events declaratively on this toolchain
       (see docs/DESIGN_SYSTEM.md), so every button would need a JS interop
       bridge, and mdcgov-button has no `disabled` attribute -- which the Home
       "Go" button requires.

   Every value is var(--mdcgov-*, #literal). The fallbacks matter: the tokens are
   injected at runtime by the county bundle, so if www.miamidade.gov is blocked
   the buttons still render in county colours instead of reverting to Bootstrap
   blue. This mirrors what the county components do internally.
   --------------------------------------------------------------------------- */

/* Shape. County buttons use an 8px radius; Bootstrap's default is 6px. */
.btn {
    --bs-btn-border-radius: var(--mdcgov-border-radius-md, 8px);
}

/* ---------------------------------------------------------------------------
   Filled primary -- the county brand blue.

   Hover and active come from --mdcgov-color-brand-primary-hover/-active rather
   than from the arithmetic mdcgov-button itself uses. That component computes
   hover as hsl(from #295D92 h s calc(l + 20)) = #5290CF, which against white
   text is 3.36:1 and fails WCAG AA; it never reads its own -hover token. The
   token value #2878C8 is 4.54:1 and passes, so the tokens win here.
   --------------------------------------------------------------------------- */
.btn-primary {
    --bs-btn-color: var(--mdcgov-color-text-inverse, #ffffff);
    --bs-btn-bg: var(--mdcgov-color-brand-primary, #295D92);
    --bs-btn-border-color: var(--mdcgov-color-brand-primary, #295D92);
    --bs-btn-hover-color: var(--mdcgov-color-text-inverse, #ffffff);
    --bs-btn-hover-bg: var(--mdcgov-color-brand-primary-hover, #2878C8);
    --bs-btn-hover-border-color: var(--mdcgov-color-brand-primary-hover, #2878C8);
    --bs-btn-active-color: var(--mdcgov-color-text-inverse, #ffffff);
    --bs-btn-active-bg: var(--mdcgov-color-brand-primary-active, #1F476F);
    --bs-btn-active-border-color: var(--mdcgov-color-brand-primary-active, #1F476F);
    /* Kept on-brand so the Home "Go" button's loading state does not turn
       Bootstrap blue while its spinner runs. */
    --bs-btn-disabled-color: var(--mdcgov-color-text-inverse, #ffffff);
    --bs-btn-disabled-bg: var(--mdcgov-color-brand-primary, #295D92);
    --bs-btn-disabled-border-color: var(--mdcgov-color-brand-primary, #295D92);
}

/* ---------------------------------------------------------------------------
   Outline / secondary -- the county <mdcgov-reset> appearance.

   The design system has no grey button: its only two button appearances are
   filled brand-primary, and white with a brand-primary border. Bootstrap's grey
   btn-secondary and btn-outline-secondary therefore both map here, as does
   btn-outline-primary, which was already this shape in the wrong blue.

   Deliberate deviation: hover fills to brand-primary with white text, the
   Bootstrap convention. mdcgov-reset instead hovers to #F2F2F2 -- computed as
   hsl(from #ffffff h s calc(l - 5)) -- which is almost invisible on a white
   page and gives no usable hover feedback. Filling is clearer and still
   entirely on-token.
   --------------------------------------------------------------------------- */
.btn-secondary,
.btn-outline-secondary,
.btn-outline-primary {
    --bs-btn-color: var(--mdcgov-color-brand-primary, #295D92);
    --bs-btn-bg: var(--mdcgov-color-base-white, #ffffff);
    --bs-btn-border-color: var(--mdcgov-color-brand-primary, #295D92);
    /* County outline buttons use a 2px border; Bootstrap's default is 1px. */
    --bs-btn-border-width: 2px;
    --bs-btn-hover-color: var(--mdcgov-color-text-inverse, #ffffff);
    --bs-btn-hover-bg: var(--mdcgov-color-brand-primary, #295D92);
    --bs-btn-hover-border-color: var(--mdcgov-color-brand-primary, #295D92);
    --bs-btn-active-color: var(--mdcgov-color-text-inverse, #ffffff);
    --bs-btn-active-bg: var(--mdcgov-color-brand-primary-active, #1F476F);
    --bs-btn-active-border-color: var(--mdcgov-color-brand-primary-active, #1F476F);
    --bs-btn-disabled-color: var(--mdcgov-color-text-muted, #6C757D);
    --bs-btn-disabled-bg: var(--mdcgov-color-base-white, #ffffff);
    --bs-btn-disabled-border-color: var(--mdcgov-color-border-default, #DEE2E6);
}

/* ---------------------------------------------------------------------------
   btn-success -- county brand secondary (#547744).

   Note this is a muted olive, not Bootstrap's #198754. In the county system
   green carries a success / secondary-brand meaning and is used for the
   header's call-to-action button.
   --------------------------------------------------------------------------- */
.btn-success {
    --bs-btn-color: var(--mdcgov-color-text-inverse, #ffffff);
    --bs-btn-bg: var(--mdcgov-color-brand-secondary, #547744);
    --bs-btn-border-color: var(--mdcgov-color-brand-secondary, #547744);
    --bs-btn-hover-color: var(--mdcgov-color-text-inverse, #ffffff);
    --bs-btn-hover-bg: var(--mdcgov-color-brand-secondary-hover, #466538);
    --bs-btn-hover-border-color: var(--mdcgov-color-brand-secondary-hover, #466538);
    --bs-btn-active-color: var(--mdcgov-color-text-inverse, #ffffff);
    --bs-btn-active-bg: var(--mdcgov-color-brand-secondary-active, #3A532E);
    --bs-btn-active-border-color: var(--mdcgov-color-brand-secondary-active, #3A532E);
    --bs-btn-disabled-color: var(--mdcgov-color-text-inverse, #ffffff);
    --bs-btn-disabled-bg: var(--mdcgov-color-brand-secondary, #547744);
    --bs-btn-disabled-border-color: var(--mdcgov-color-brand-secondary, #547744);
}

/* ---------------------------------------------------------------------------
   Links and the contextual text utilities.

   Bootstrap paints a bare <a> with --bs-link-color-rgb (#0d6efd) and the
   .text-* utilities with --bs-<variant>-rgb, so links and the text-success
   ticks on /no-results were still rendering in the Bootstrap palette after the
   buttons were fixed.

   These override `color` directly rather than the --bs-*-rgb variables:
   Bootstrap wants comma-separated channel triples, and the county publishes
   tokens as hex, so feeding the variables would mean hardcoding "41, 93, 146"
   and losing the token. !important is required only because Bootstrap's own
   utility declarations carry it.

   .btn is unaffected -- `.btn { color: var(--bs-btn-color) }` at (0,1,0) beats
   a bare `a` at (0,0,1) -- so anchors styled as buttons keep their button
   colour.
   --------------------------------------------------------------------------- */
a {
    color: var(--mdcgov-color-text-link, #295D92);
}

a:hover {
    color: var(--mdcgov-color-text-link-hover, #2878C8);
}

.text-primary {
    color: var(--mdcgov-color-brand-primary, #295D92) !important;
}

.text-success {
    color: var(--mdcgov-color-brand-secondary, #547744) !important;
}

.text-danger {
    color: var(--mdcgov-color-semantic-error, #9C201C) !important;
}

.text-warning {
    color: var(--mdcgov-color-semantic-warning, #CD4C1E) !important;
}

.text-muted {
    color: var(--mdcgov-color-text-muted, #6C757D) !important;
}

/* ---------------------------------------------------------------------------
   Focus indicator.

   This is a fix, not just a restyle. Bootstrap's `.btn:focus-visible` sets
   `outline: 0`, and at (0,2,0) it outranks the bare `:focus-visible` rule the
   county bundle injects at (0,1,0) -- so the county focus ring was being
   suppressed on every button in the app, with Bootstrap's blue glow showing in
   its place. Restoring the outline from the accessibility tokens and dropping
   the glow leaves exactly one focus indicator: the county's.
   --------------------------------------------------------------------------- */
.btn:focus-visible,
.btn-close:focus-visible {
    outline: var(--mdcgov-accessibility-focus-outline-width, 3px)
             var(--mdcgov-accessibility-focus-outline-style, dotted)
             var(--mdcgov-accessibility-focus-outline-color, #3BD1FF);
    outline-offset: var(--mdcgov-accessibility-focus-outline-offset, 4px);
    box-shadow: none;
}

/* The same fix for form controls, which Bootstrap focuses with

       border-color: #86b7fe; outline: 0; box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25)

   -- the last two Bootstrap blues left in the app after 733bc6a and 16f6b28, and the same
   `outline: 0` suppression of the county ring that the .btn rule above exists to undo.

   This targets :focus rather than :focus-visible on purpose. Bootstrap's own selector is
   :focus, so matching it means replacing that ring; declaring :focus-visible instead would
   leave Bootstrap's glow to paint underneath on pointer focus and give the control two
   indicators. Text fields are also the case where :focus-visible and :focus agree in practice,
   since browsers show the ring for keyboard and pointer focus alike. */
.form-control:focus,
.form-select:focus {
    border-color: var(--mdcgov-color-brand-primary, #295D92);
    outline: var(--mdcgov-accessibility-focus-outline-width, 3px)
             var(--mdcgov-accessibility-focus-outline-style, dotted)
             var(--mdcgov-accessibility-focus-outline-color, #3BD1FF);
    outline-offset: var(--mdcgov-accessibility-focus-outline-offset, 4px);
    box-shadow: none;
}

/* The navbar toggler contrast fix that used to sit here moved into
   Shared/NavBar.razor.css. It is one component's colour rather than a global
   Bootstrap re-point, its comment referenced the assets/images/navBgBlue.jpg
   that the same change deleted, and `header .navbar` in a global sheet would
   match any other header > .navbar added later. */


/* ---------------------------------------------------------------------------
   Alerts.

   733bc6a retokenised the hand-rolled error styling in app.css and
   BasicSearchResult.razor.css, but the seven Bootstrap .alert components
   rendering the same semantic states were never touched -- they had no CSS at
   all, so a sweep looking for off-palette declarations found nothing to fix.
   They still paint from --bs-<variant>-bg-subtle / -text-emphasis:
   #f8d7da/#842029, #fff3cd/#664d03, #cff4fc/#055160.

   Each variant assigns the four --bs-alert-* properties the base .alert reads.
   Same technique as the buttons above.
   --------------------------------------------------------------------------- */
.alert-danger {
    --bs-alert-bg: var(--mdcgov-color-semantic-error-bg, #FFEBEB);
    --bs-alert-color: var(--mdcgov-color-semantic-error, #9C201C);
    --bs-alert-border-color: var(--mdcgov-color-semantic-error, #9C201C);
    --bs-alert-link-color: var(--mdcgov-color-semantic-error, #9C201C);
}

/* Warning is the one variant that cannot follow the danger pattern.
   --mdcgov-color-semantic-warning (#CD4C1E) is a burnt orange: it measures
   4.51:1 on pure white and therefore clears AA *only* there -- on any tint of
   itself it drops to about 4.06:1 and fails as body text. So the body text is
   text-primary (13.3:1 on the tint below) and the warning hue is carried by the
   border and the icon instead. The icon is non-text content under WCAG 1.4.11,
   which needs 3:1, and 4.06:1 clears that comfortably.

   The county publishes no -warning-bg token -- SKILL.md:87-92 defines bg pairs
   for success and error only. The literal below is ours; it is still written
   through a var() so the app picks the real token up automatically if one is
   ever published. */
.alert-warning {
    --bs-alert-bg: var(--mdcgov-color-semantic-warning-bg, #FDF1EB);
    --bs-alert-color: var(--mdcgov-color-text-primary, #282828);
    --bs-alert-border-color: var(--mdcgov-color-semantic-warning, #CD4C1E);
    --bs-alert-link-color: var(--mdcgov-color-text-link, #295D92);
}

.alert-warning .fa-exclamation-triangle {
    color: var(--mdcgov-color-semantic-warning, #CD4C1E);
}

/* There is no semantic-info token at all -- the county defines success,
   warning and error and stops. Rather than invent a fourth semantic blue, and
   in particular one that would collide with the brand blue used for links and
   headers, this is the neutral informational panel from SKILL.md:169-171:
   surface-alt ground, primary text, default border. Measures 13.3:1. */
.alert-info {
    --bs-alert-bg: var(--mdcgov-color-background-surface-alt, #F1F3F5);
    --bs-alert-color: var(--mdcgov-color-text-primary, #282828);
    --bs-alert-border-color: var(--mdcgov-color-border-default, #DEE2E6);
    --bs-alert-link-color: var(--mdcgov-color-text-link, #295D92);
}