/* ==========================================================================
   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;
}

/* 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
   -------------------------------------------------------------------------- */

/* 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;
}

/* 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;
}

/* --------------------------------------------------------------------------
   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;
    }
}