/* ==========================================================================
   Global Styles - app.css
   Only truly global styles belong here. Component-specific styles go in
   their respective .razor.css files.
   ========================================================================== */

/* --------------------------------------------------------------------------
   WCAG 2.1 1.4.10 Reflow (400% zoom / ~320px-wide viewport)
   Baseline: flex/grid children need min-width: 0 to shrink; text must wrap.
   DPIP-1737 — apply across all routes using MainLayout.
   -------------------------------------------------------------------------- */

.mud-layout {
    min-width: 0;
    max-width: 100%;
}

/* MudContainer in app bar + main: default min-width:auto can block reflow next to wide siblings */
.mud-layout .mud-appbar .mud-container,
main#main-content .mud-container,
.mud-main-content > .mud-container {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

main#main-content,
.mud-main-content {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* MudBlazor: grid items default to min-width: auto and can refuse to shrink */
.mud-main-content .mud-grid {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.mud-main-content .mud-grid-item {
    min-width: 0;
}

.mud-main-content .mud-stack {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.mud-main-content .mud-card,
.mud-main-content .mud-paper {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

/* Tables: prefer wrapping; horizontal scroll only if content truly cannot reflow */
.mud-main-content .mud-table-container {
    max-width: 100%;
    overflow-x: auto;
}

.mud-main-content table td,
.mud-main-content table th {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Charts: SVG scales within panel */
.mud-main-content .mud-chart {
    max-width: 100%;
    min-width: 0;
}

.mud-main-content .mud-chart svg {
    max-width: 100%;
    height: auto;
}

/* Apex groups adjacent series without an inter-series gap. Narrow only grouped
   bars around their own centers so blue/yellow pairs remain visually distinct. */
.apex-bar-chart--two-series .apexcharts-bar-area {
    transform-box: fill-box;
    transform-origin: center;
    transform: scaleX(0.92);
}

/* Label + value rows (MetricRow component + Homelessness total rows sharing .metric-row) */
.mud-main-content .metric-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    padding: 0.75rem 1rem;
    background-color: #f4f8f9;
    border-radius: 4px;
    min-width: 0;
    box-sizing: border-box;
}

.mud-main-content .metric-row > *:first-child {
    flex: 1 1 9rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.mud-main-content .metric-row > *:last-child {
    flex: 0 1 auto;
    min-width: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Focus & Accessibility
   -------------------------------------------------------------------------- */

html,
body,
button,
input,
select,
textarea {
    font-family: var(--dhcs-font-family-default, "Public Sans", sans-serif) !important;
}

body {
    color: var(--dhcs-color-body-text, #1B1B1B);
    font-size: var(--dhcs-font-web-minimum-size);
}

main#main-content :is(p, li, td, th, label, dd, dt) {
    font-family: var(--dhcs-font-family-default, "Public Sans", sans-serif) !important;
    color: var(--dhcs-color-body-text, #1B1B1B) !important;
}

/* County Profile heading hierarchy. Keep semantic heading levels consistent
   across every tab while allowing component-specific weight and spacing. */
main#main-content h1 {
    color: #1B1B1B !important;
    font-size: var(--dhcs-font-heading-h1-size) !important;
}

main#main-content h2,
main#main-content [role="heading"][aria-level="2"] {
    color: #1B1B1B !important;
    font-size: var(--dhcs-font-heading-h2-size) !important;
}

main#main-content h3,
main#main-content [role="heading"][aria-level="3"] {
    color: #17315A !important;
    font-size: var(--dhcs-font-heading-h3-size) !important;
}

main#main-content a:not([class*="button"]):not([role="button"]) {
    color: var(--dhcs-color-link, #2D6E8D);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/* WCAG 2.1 AAA 1.4.8 / SiteImprove — paragraph leading ≥1.5× font size.
   Must beat .mud-typography-* on <p>. Token lives in typography-tokens.css (drift guard). */
p {
    line-height: var(--dhcs-paragraph-line-height) !important;
}

h1:focus {
    outline: none;
}

main#main-content .apexcharts-text,
main#main-content .apexcharts-datalabel,
main#main-content .apexcharts-xaxis-label,
main#main-content .apexcharts-yaxis-label {
    font-family: var(--dhcs-font-family-default, "Public Sans", sans-serif) !important;
}

main#main-content .apexcharts-xaxis-title-text,
main#main-content .apexcharts-yaxis-title-text {
    color: var(--dhcs-color-secondary, #2D6E8D) !important;
    fill: var(--dhcs-color-secondary, #2D6E8D) !important;
}

main#main-content .apexcharts-xaxis-label,
main#main-content .apexcharts-yaxis-label,
main#main-content .apexcharts-datalabel {
    color: var(--dhcs-color-body-text, #1B1B1B) !important;
    fill: var(--dhcs-color-body-text, #1B1B1B) !important;
}

/* Data-source URLs are attribution/body copy, not actionable teal UI labels. */
main#main-content .attribution-footer__source,
main#main-content .attribution-footer__source .dhcs-chart-caption,
main#main-content .attribution-footer__source strong,
main#main-content .attribution-footer__source a {
    color: #000000 !important;
}

main#main-content .attribution-footer__suppression,
main#main-content .attribution-footer__suppression .dhcs-chart-caption,
main#main-content .attribution-footer__extra-footnote,
main#main-content .attribution-footer__extra-footnote .dhcs-chart-caption {
    color: #1B1B1B !important;
}

/* DPIP-2547: guarantee visible keyboard focus in footer links. */
.dhcs-footer a:focus,
.dhcs-footer a:focus-visible,
.dhcs-footer [role="link"]:focus,
.dhcs-footer [role="link"]:focus-visible,
.dhcs-footer *:focus,
.dhcs-footer *:focus-visible {
    outline: 3px solid var(--mud-palette-primary) !important;
    outline-offset: 2px;
    border-radius: 4px;
    text-decoration: underline !important;
    text-underline-offset: 2px;
    box-shadow: 0 0 0 2px var(--mud-palette-surface), 0 0 0 5px var(--mud-palette-primary);
    background-color: #eaf2ff;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   Form Validation (Blazor)
   -------------------------------------------------------------------------- */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

/* --------------------------------------------------------------------------
   Layout Utilities
   -------------------------------------------------------------------------- */
.flex {
    display: flex;
}

.flex-container {
    display: flex;
    align-items: center;
    padding: 16px 0;
}

/* --------------------------------------------------------------------------
   MudBlazor Global Overrides
   -------------------------------------------------------------------------- */

/* Equal height grid items */
.mud-grid-equal-height {
    align-items: stretch;
}

.mud-grid-equal-height > .mud-grid-item {
    display: flex;
}

.mud-grid-equal-height > .mud-grid-item > .mud-card {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Input styling */
.mud-input.mud-disabled {
    cursor: default;
    background-color: #EFEFEF;
}

.mud-input.mud-input-outlined {
    border-radius: 4px;
}

/* Select popover z-index */
.select-popover {
    z-index: 1500 !important;
}

/* --------------------------------------------------------------------------
   County Compare — combobox listbox must float above table body
   -------------------------------------------------------------------------- */

/*
 * MudSimpleTable wraps the <table> in .mud-table-container { overflow-x: auto }. An auto
 * overflow box clips any absolutely-positioned descendant, so the portal Select listbox
 * (absolute, z-index:200) can only grow to the bottom of the visible table. With header
 * only, the listbox is cut after one row of options; with data it fits and looks fine.
 * These rules live in the global sheet (not Compare.razor.css) because Blazor scoped CSS
 * rewrites the ::deep selector with the page's scope id, which MudBlazor's own scope
 * attribute on .mud-table-container then prevents from matching.
 */
.compare-table-host .mud-table-container,
.compare-table-host .mud-table-container.mud-table-root,
.compare-table-host .mud-simple-table {
    overflow: visible !important;
    contain: none;
}

.compare-table-host .compare-metrics-table {
    overflow: visible;
}

/*
 * Paint order: <tbody> is painted after <thead>, so tbody rows draw ON TOP of anything
 * protruding out of thead. Put thead into its own stacking context above tbody so the
 * combobox (rendered inside <th>) can draw over metric rows without being covered.
 */
.compare-table-host .compare-metrics-table > thead,
.compare-table-host .compare-metrics-header {
    position: relative;
    z-index: 30;
}

.compare-table-host .compare-metrics-table > tbody {
    position: relative;
    z-index: 0;
}

.compare-table-host .compare-metrics-header th {
    overflow: visible;
}

/*
 * Keep the combobox listbox visually above everything in the compare card (table rows,
 * striped backgrounds, and the tabs region below the table).
 */
.compare-county-selector {
    position: relative;
    z-index: 40;
}

.compare-county-selector .dhcs-combobox-listbox {
    z-index: 1000;
}

/* --------------------------------------------------------------------------
   Performance Overview — Safari combobox listbox clipping fixes
   -------------------------------------------------------------------------- */

/*
 * In Safari, the stratification Select listboxes can be clipped when ancestor cards
 * establish overflow clipping. Keep overflow visible only within this section so the
 * listbox can render to full height over the summary content below.
 */
.performance-overview .section-container,
.performance-overview .section-container__body,
.performance-overview .collapsible-sub-card,
.performance-overview .collapsible-sub-card__content {
    overflow-x: visible !important;
    overflow-y: visible !important;
}

/* Keep the filter row in a higher stacking context than content below. */
.performance-overview .stratification-filters,
.performance-overview .stratification-filters__row {
    position: relative;
    z-index: 25;
}

/* Keep each filter field as a local stacking context for its listbox. */
.performance-overview .stratification-filters__field {
    position: relative;
    z-index: 30;
}

/* Ensure the options list paints above neighboring cards/content. */
.performance-overview .stratification-filters__field .dhcs-combobox-listbox {
    z-index: 2000 !important;
}

/* --------------------------------------------------------------------------
   Dashboard Tabs
   -------------------------------------------------------------------------- */

.dashboard-tabs {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

/* WCAG 1.4.10 reflow: tab panels must not force horizontal overflow at 400% zoom */
.dashboard-tabs .mud-tabs-panels,
.dashboard-tabs .mud-tab-panel {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: break-word;
}

.dashboard-tabs .mud-tabs-tabbar {
    border-radius: 0 !important;
    padding: 3px;
    gap: 0;
}

.dashboard-tabs .mud-tabs-tabbar-inner {
    min-height: 0 !important;
}

/* Override MudBlazor defaults — Figma uses Title Case, brand-primary text */
.dashboard-tabs .mud-tab {
    text-transform: none;
    color: var(--dhcs-color-primary);
    font-weight: var(--dhcs-font-tab-weight);
}

/* --------------------------------------------------------------------------
   Tabs Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 960px) {
    .dashboard-tabs .mud-tab {
        font-size: var(--dhcs-font-tab-size-md);
        padding: 6px 6px;
    }
}

@media (max-width: 600px) {
    .dashboard-tabs .mud-tabs-tabbar {
        flex-wrap: wrap;
        border-radius: 8px;
    }

    .dashboard-tabs .mud-tab {
        font-size: var(--dhcs-font-tab-size-sm);
        flex-basis: 33.33%;
        padding: 6px 4px;
    }

    .dashboard-tabs .mud-tab.mud-tab-active {
        border-radius: 6px;
    }
}