/* ---------------------------------------------------------------------------
   Global styles. Direct port of Angular's src/styles.scss, plus the two rules
   that lived in src/app/app.component.scss (which was a global-scope stylesheet
   in the Angular build because it targeted the bare `main` element).

   Typography now comes from the county design tokens rather than Poppins at 12px.
   The tokens are injected onto :root by the design-system bundle in index.html.

   Every token below carries a literal fallback, matching the convention in
   mdc-bootstrap-bridge.css. The bundle is fetched at runtime from www.miamidade.gov, so if that
   host is blocked an unguarded var() would be invalid at computed-value time -- and the rule on
   `main` is what establishes the 16px the whole type scale is measured against.
   --------------------------------------------------------------------------- */

body {
    font-family: var(--mdcgov-font-family-base, "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif);
}

.spinner {
    width: 100%;
    text-align: center;
    padding-top: 20px;
}

.spinner .fa-spinner {
    font-size: 48px;
}

.fa-spinner {
    color: var(--mdcgov-color-border-default, #DEE2E6);
}

.pointer {
    cursor: pointer;
}

/* ---------------------------------------------------------------------------
   The app's content column, in one place.

   This was duplicated as `.container { max-width: 1100px }` across five scoped
   stylesheets (NavBar, Home, SearchResults, ProductDetailsPage,
   ApplicantDetail). Blazor compiles each to .container[b-xxxxxxxxxx], so each
   copy reached only its own component -- and the three routes that never got a
   copy silently fell through to Bootstrap's own .container, which is 1140px
   from 1200px up and 1320px from 1400px up.

   The result was visible misalignment on /basic-search-result, /no-results and
   /product-control/noa-status-key: the page body hung 20px per side outside the
   1100px NavBar above it at 1200-1399px, and 110px per side at 1400px and
   wider. It did not show at 1280px, which is the only wide width
   DESIGN_SYSTEM.md records as having been checked.

   One global rule, so a new page cannot drift again by omission. It loads after
   bootstrap.min.css and matches its (0,1,0) specificity, so it wins on order.
   `container-fluid` is untouched -- SearchResults uses it deliberately for the
   full-width results table.
   --------------------------------------------------------------------------- */
.container {
    max-width: 1100px;
}

/* From app.component.scss.

   Two changes from the port:

   overflow-x: auto is gone. It made the PAGE scroll sideways, which is what
   WCAG 2.1 1.4.10 Reflow exists to prevent. The rule exempts data tables, so a
   scrollbar belongs on a wide table, never on the page. The results tables use
   table-layout: fixed with word-break and stack into cards below 768px, so they
   wrap instead of overflowing and need no scrollbar of their own.

   font-size is 12px no longer. The county body size is 1rem/16px
   (--mdcgov-font-size-md); 12px was below it and hard to read. */
main {
    width: 100%;
    min-height: 100%;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    position: relative;
    padding: 0;
    margin: 0;
    font-family: var(--mdcgov-font-family-base, "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif);
    font-size: var(--mdcgov-font-size-md, 1rem);
}

/* Safety net for any table that is not table-layout: fixed and could therefore
   outgrow its column. Scrolls the table, not the page — the distinction 1.4.10
   turns on. Matches the wrapper the county's own <mdcgov-table> renders. */
.table-wrapper {
    width: 100%;
    overflow-x: auto;
    border-radius: var(--mdcgov-border-radius-sm, 4px);
}

/* ---------------------------------------------------------------------------
   Blazor's unhandled-error bar. Styled to match the county palette rather than
   the default template yellow. Complements — it does not replace — the
   <ErrorBoundary> wrappers in MainLayout.
   --------------------------------------------------------------------------- */
#blazor-error-ui {
    background: var(--mdcgov-color-semantic-error-bg, #FFEBEB);
    border-top: 1px solid var(--mdcgov-color-semantic-error, #9C201C);
    color: var(--mdcgov-color-semantic-error, #9C201C);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1080;
    font-family: var(--mdcgov-font-family-base, "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif);
    font-size: var(--mdcgov-font-size-sm, 0.875rem);
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

#blazor-error-ui .reload {
    color: var(--mdcgov-color-semantic-error, #9C201C);
    text-decoration: underline;
    margin-left: 0.5rem;
}

/* PDF viewer route paints the document chrome dark; see PdfViewer.razor.css. */
body.pdf-viewer-body {
    background-color: #000;
    margin: 0;
}