/* Global app overrides — theme-aware styling not covered by MudBlazor defaults. */

/* GlobalSearch in the app bar: uses currentColor so fill, border, and text stay legible
   against the app bar in both light and dark mode. */
.global-search-input .mud-input-control {
    background-color: color-mix(in srgb, currentColor 8%, transparent);
    border-radius: 4px;
    transition: background-color 0.15s ease;
}

.global-search-input .mud-input-control:hover,
.global-search-input .mud-input-control:focus-within {
    background-color: color-mix(in srgb, currentColor 16%, transparent);
}

.global-search-input .mud-input-outlined-border {
    border-color: color-mix(in srgb, currentColor 45%, transparent);
}

.global-search-input .mud-input-control:hover .mud-input-outlined-border,
.global-search-input .mud-input-control:focus-within .mud-input-outlined-border {
    border-color: currentColor;
}

.global-search-input input,
.global-search-input input::placeholder {
    color: currentColor;
}

.global-search-input input::placeholder {
    opacity: 0.75;
}

/* In light mode the app bar uses dark text on a light surface; match the input text to the
   same faded currentColor the border uses so the two read as a unified control. */
html:not([data-mud-theme="dark"]) .global-search-input input,
html:not([data-mud-theme="dark"]) .global-search-input input::placeholder {
    color: color-mix(in srgb, currentColor 45%, transparent);
}

/* Keep the header from wrapping on small screens by hiding long text labels. */
@media (max-width: 599.98px) {
    .app-bar-title,
    .app-bar-username {
        display: none;
    }

    .global-search-input {
        max-width: 180px;
    }
}

/* KPI card value: single-line, auto-shrink so large numbers fit inside the card instead of
   wrapping to a second line. Callers should also use NumberFormat.Compact* for huge values. */
.kpi-card .kpi-value {
    font-size: clamp(1.15rem, 2.6vw, 2.125rem);
    line-height: 1.15;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kpi-card .kpi-label {
    text-align: center;
    max-width: 100%;
    overflow-wrap: break-word;
}

/* App-bar action buttons (Sign in, Sign out, Register) should never wrap to a second line. */
.mud-appbar .mud-button {
    white-space: nowrap;
}

/* Page header toolbars (Title + spacer + "View history" / "New X" buttons) routinely
   exceed mobile width across the 73 AdventureWorks CRUD pages. Allow these row-stacks
   to wrap onto a second line on small screens, and keep each button's own label intact
   on a single line so the icon + text stay together. */
@media (max-width: 599.98px) {
    .mud-stack-row:has(.mud-button) {
        flex-wrap: wrap;
        row-gap: 0.5rem;
    }

    .mud-stack-row .mud-button {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* MudButton's inner label can also wrap awkwardly with long words like
       "View history" / "New product subcategory". Keep them on one line. */
    .mud-button .mud-button-label {
        white-space: nowrap;
    }
}

/* Fill the MudGrid row height so cards with/without a Trend row line up. */
.kpi-card,
.dashboard-skeleton {
    height: 100%;
}

/* Skeleton loaders match content density */
.dashboard-skeleton {
    min-height: 120px;
}

/* Home page analytics feature cards — equal height across the row and single-line
   captions so Sales / Production / HR / Purchasing / Forecasts all line up. */
.home-feature-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.home-feature-card .mud-card-header {
    flex: 1 1 auto;
    min-height: 96px;
    min-width: 0;
}

/* Force the header content column to be shrinkable below intrinsic width so
   long titles/subtitles ellipse instead of overflowing into adjacent cards
   on narrow screens. */
.home-feature-card .mud-card-header .mud-card-header-content {
    min-width: 0;
    overflow: hidden;
}

.home-feature-card .mud-card-header .mud-card-header-content .mud-typography-h6,
.home-feature-card .mud-card-header .mud-card-header-content .mud-typography-body2 {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-feature-card .mud-card-actions {
    margin-top: auto;
}

/* API Explorer — endpoint list + JSON viewer */
.api-endpoint-row {
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.1s ease;
}

.api-endpoint-row:hover {
    background-color: color-mix(in srgb, currentColor 8%, transparent);
}

.api-endpoint-row.selected {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 20%, transparent);
}

.api-endpoint-path {
    font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, monospace;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.api-method-chip {
    min-width: 60px;
    justify-content: center;
}

/* My Activity contribution heatmap — GitHub-style grid. Colors tuned for both themes. */
.heatmap-scroll { overflow-x: auto; padding-bottom: 4px; }

.heatmap-grid-header {
    display: grid;
    grid-template-columns: repeat(53, 14px);
    gap: 3px;
    margin-bottom: 4px;
    padding-left: 24px;
}

.heatmap-month-label {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
}

.heatmap-grid {
    display: grid;
    grid-template-rows: repeat(7, 14px);
    grid-template-columns: repeat(53, 14px);
    grid-auto-flow: column;
    gap: 3px;
    padding-left: 24px;
}

.heatmap-cell {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background-color: color-mix(in srgb, var(--mud-palette-primary) 12%, var(--mud-palette-background-grey));
}

.heatmap-placeholder { background-color: transparent; }
.heatmap-level-0 { background-color: color-mix(in srgb, var(--mud-palette-text-primary) 6%,  transparent); }
.heatmap-level-1 { background-color: color-mix(in srgb, var(--mud-palette-success) 30%, transparent); }
.heatmap-level-2 { background-color: color-mix(in srgb, var(--mud-palette-success) 55%, transparent); }
.heatmap-level-3 { background-color: color-mix(in srgb, var(--mud-palette-success) 80%, transparent); }
.heatmap-level-4 { background-color: var(--mud-palette-success); }

.api-explorer-json {
    background-color: var(--mud-palette-background-grey);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 6px;
    padding: 12px;
    max-height: 520px;
    overflow: auto;
    font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, monospace;
    font-size: 0.82rem;
    line-height: 1.4;
    white-space: pre;
}

/* User guide article cards — uniform height with clamped summary + pinned footer. */
.guide-article-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 220px;
}

.guide-article-header {
    align-items: flex-start;
}

.guide-article-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    line-height: 1.3;
}

.guide-article-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 0.5rem;
}

.guide-article-summary {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}

.guide-article-chips {
    margin-top: auto;
}

/* KPI tiles on /kpis — compact tile with large value + sparkline footer. */
.kpi-tile .kpi-value {
    font-size: clamp(1.25rem, 2.6vw, 2.25rem);
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kpi-tile .kpi-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Quick-access cards (Forecasts / Tool Slots / Database Explorer) equal height too. */
.home-quick-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 160px;
}

.home-quick-card .mud-card-content {
    flex: 1 1 auto;
}