/*
 * Shared Dashboard chrome.
 *
 * Each dashboard section lives in its own component so the page order can be changed easily.
 * Blazor CSS isolation only matches elements rendered by the component that owns the stylesheet,
 * so styling that several section components rely on is declared globally here instead.
 */

/* Guided-tour spotlight states applied to the outer element of every dashboard section. */
.dashboard-tour-target {
    border-radius: 16px;
    transition: box-shadow 180ms ease, outline-color 180ms ease;
}

.dashboard-tour-highlight {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--mud-palette-primary) 38%, transparent), var(--mud-elevation-3);
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 3px;
    position: relative;
    z-index: 1;
}

.dashboard-tour-dimmed {
    filter: brightness(0.52) saturate(0.72) blur(0.1rem);
    opacity: 0.54;
    transition: filter 180ms ease, opacity 180ms ease;
}

.dashboard-mobile-home.is-touring .dashboard-tour-target {
    scroll-margin-bottom: 14rem;
}

/* Desktop section headings pair a title block with an optional drill-down action. */
.dashboard-section-heading {
    align-items: flex-end;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

/* Mobile section headings use the same layout with tap-friendly actions. */
.dashboard-mobile-section-heading {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.dashboard-mobile-section-heading h2 {
    margin: 0;
}

.dashboard-mobile-section-heading .mud-button-root {
    min-height: 44px;
}

/* Mobile section cards share a common surface shape. */
.dashboard-mobile-header,
.dashboard-mobile-work,
.dashboard-mobile-explore {
    border-radius: 14px;
    min-width: 0;
}

/*
 * Paired desktop rows keep both section cards at a matching height.
 * These rules are global because the rows and items are MudGrid/MudItem components, which
 * never receive an owning component's CSS-isolation attribute.
 */
.dashboard-insights-row,
.dashboard-status-row,
.dashboard-wait-performance-row {
    align-items: stretch;
}

.dashboard-insights-item,
.dashboard-wait-performance-item,
.dashboard-status-chart-item,
.dashboard-status-summary-item {
    display: flex;
    min-width: 0;
}

/* Flex children default to their intrinsic content width. Constrain every layer to its MudItem so
   long headings, chips, or chart content can never push one paired card across the grid gutter. */
.dashboard-insights-item > *,
.dashboard-wait-performance-item > *,
.dashboard-insights-item .dashboard-section-shell,
.dashboard-wait-performance-item .dashboard-section-shell,
.dashboard-insights-item .dashboard-section,
.dashboard-wait-performance-item .dashboard-section {
    box-sizing: border-box;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    height: 100%;
    max-width: 100%;
    min-width: 0;
    width: 100%;
}

/* The status chart and its summary list fill the height of the taller of the two columns. */
.dashboard-status-chart,
.dashboard-ticket-status-grid {
    flex: 1 1 auto;
    height: 100%;
}

/* The summary reads as a stacked legend: one full-width row per status, never a button wall. */
.dashboard-ticket-status-grid {
    align-content: flex-start;
}

.dashboard-ticket-status-grid > .mud-grid-item {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
}

.dashboard-ticket-status-grid .dashboard-metric-shell,
.dashboard-ticket-status-grid .dashboard-metric-card {
    width: 100%;
}

/* Aging and wait-time rows are MudLink/MudProgressLinear components, so their layout is declared
   globally. Aging stays compact so it cannot add empty vertical space to the paired attention card. */
.dashboard-aging-row,
.dashboard-wait-row {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}

.dashboard-aging-row {
    flex: 0 0 auto;
    min-height: 44px;
}

.dashboard-wait-row {
    flex: 0 0 auto;
    min-height: 48px;
}

.dashboard-aging-bar,
.dashboard-wait-bar {
    margin-top: 0.5rem;
}

/* MudBlazor sizes its own bar height, so the aging bars use a compact, consistently visible height. */
.dashboard-aging-bar.mud-progress-linear {
    height: 12px;
}

.dashboard-aging-row:hover .dashboard-aging-bar,
.dashboard-aging-row:focus-visible .dashboard-aging-bar,
.dashboard-wait-row:hover .dashboard-wait-bar,
.dashboard-wait-row:focus-visible .dashboard-wait-bar {
    filter: brightness(1.1);
}

@media (max-width: 1279.95px) {
    .dashboard-section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.5rem;
    }

    .dashboard-tour-target {
        scroll-margin-bottom: 14rem;
    }
}

@media (max-width: 599.95px) {
    .dashboard-section-heading > .mud-button-root {
        align-self: stretch;
        justify-content: flex-start;
        min-height: 44px;
    }
}