/* Web-only styles for ToolboxApp.App.Endpoint.
   Loaded AFTER _content/ToolboxApp.Shared.UI/css/shared.css (see App.razor), so any
   rule here beats shared.css at equal specificity — including shared.css's @media
   overrides, which carry no extra weight. Never copy a shared.css rule into this file
   "for reference": a duplicated base rule silently disables its responsive variants on
   web while still looking correct in shared.css, and it only breaks on the web app
   (MAUI loads shared.css alone). Put shared styles in shared.css and web-only styles
   here. A rule that intentionally differs from shared.css is fine, but say why.

   Third link in App.razor, and last, is MudBlazor.min.css — so MudBlazor's own rules beat
   BOTH files at equal specificity. Any property MudBlazor also declares on the same class
   (display, padding, margin, colour on .mud-* components) needs !important or a more
   specific selector, and since the package floats at `9.*`, prefer !important. A rule that
   looks correct here and still does nothing is usually this, not shared.css. */

/* === Self-hosted Roboto (variable font, latin subset) === */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300 500;
    font-stretch: 100%;
    font-display: swap;
    src: url('/fonts/roboto-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* === Base Styles === */
html, body {
    height: 100%;
    margin: 0;
}

/* === Layout === */

.appbar-logo {
    height: 48px;
    margin-left: -8px;
    vertical-align: middle;
}

.appbar-logo-link {
    display: flex;
    align-items: center;
}

.breadcrumb-bar {
    background-color: var(--mud-palette-tertiary);
    padding: 6px 12px !important;
    min-height: 0 !important;
    font-size: 14px;
}

.breadcrumb-bar * {
    color: var(--breadcrumb-color) !important;
}

/* An active manufacturer label (brand-accented on MudLayout, --brand-accent from the Brand
   record) recolors the breadcrumb bar to the brand's accent, with white text to match. */
.brand-accented .breadcrumb-bar {
    background-color: var(--brand-accent);
}

.brand-accented .breadcrumb-bar * {
    color: #fff !important;
}

.layout-content {
    padding: 0;
    width: 100%;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.tool-detail-row .detail-value--multiline {
    white-space: pre-line;
}

/* === Select / Autocomplete highlight === */
.mud-list-item-gutters.mud-list-item-clickable:hover {
    background-color: var(--mud-palette-action-default-hover) !important;
}

.mud-list-item-gutters.mud-selected-item {
    background-color: var(--mud-palette-divider) !important;
}

.mud-list-item-gutters.mud-selected-item .mud-list-item-text,
.mud-list-item-gutters.mud-selected-item .mud-list-item-text * {
    color: var(--mud-palette-text-primary) !important;
}

/* === Tooltips === */
.mud-tooltip {
    font-size: 14px !important;
}

/* === Hide number input spinners === */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.oa-station-cta-actions {
    display: flex;
    gap: 0.5rem;
}

.mud-radio-group {
    gap: 16px;
}

/* === Sidebar Nav === */

.sidebar-nav {
    padding: 0;
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    padding: 6px 16px;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #fff;
    background: var(--mud-palette-secondary);
}

.nav-external-icon {
    opacity: 0.5;
    font-size: 14px !important;
    margin-bottom: -2px;
}

.sidebar-brand-link {
    display: flex;
    align-items: center;
    gap: 12px;
    color: inherit;
    text-decoration: none;
}

/* Parent group headers */
.nav-group-header {
    font-weight: 600 !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    background: var(--mud-palette-divider) !important;
    border-top: 1px solid rgba(var(--mud-palette-info-rgb), 0.15);
}

.mud-nav-group:last-child {
    border-bottom: 1px solid rgba(var(--mud-palette-info-rgb), 0.15);
}

/* Heavier border on the pinned Favorites group to set it apart from the category groups */
.nav-favorites-group {
    border-bottom: 4px solid rgba(var(--mud-palette-info-rgb), 0.3);
}

.nav-group-active,
.nav-group-active .mud-nav-link-icon {
    color: var(--mud-palette-info) !important;
}

.mud-drawer .mud-nav-group .mud-collapse .mud-nav-link {
    border-bottom: 1px solid var(--mud-palette-divider);
}

.mud-drawer .mud-nav-link:hover,
.mud-drawer .mud-nav-link.active {
    background: rgba(var(--mud-palette-info-rgb), 0.15) !important;
}

/* App store badges — fixed size, softened, brighten to full opacity on hover */
.app-store-badge { width: 130px; height: 42px; display: block; opacity: 0.85; transition: opacity 0.15s ease; }
.app-store-badge:hover { opacity: 1; }

/* Right-aligned in the About card on most screens, left-aligned on phones (<600px) */
.app-store-badges { justify-content: flex-end; }
@media (max-width: 600px) { .app-store-badges { justify-content: flex-start; } }

/* === Focus Styles === */
:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* Wide-desktop only: the sidebar is roomy enough to pair up result cards; on MAUI
   shared.css keeps them full width. */
@media (min-width: 1600px) {
    .psychro-sidebar .psychro-results > .mud-paper {
        width: calc(50% - 4px);
    }
}

@media (min-width: 2560px) {
    .psychro-sidebar .psychro-results > .mud-paper {
        width: calc(33.33% - 6px);
    }
}

/* === Responsive === */
/* Phones: drop the breadcrumb bar. Three crumbs plus separators wrap to two lines at this
   width and cost more vertical space than they save in navigation — the drawer and the
   browser Back button already cover going up a level. This also hides the home page's
   `&nbsp;` spacer strip, which shares the class (MainLayout renders it in place of the
   crumbs), so the band disappears on every route instead of leaving one empty coloured bar.
   The BreadcrumbList JSON-LD is emitted independently in each page's head via
   SeoSchemas.BuildBreadcrumbSchema, so the rich result is unaffected.

   !important because MudBlazor.min.css is linked LAST in App.razor and sets
   `display: flex` on `.mud-breadcrumbs`, the same specificity as `.breadcrumb-bar`, so it
   wins on order. Without it only the home page's plain <div> was hidden — it carries no
   .mud-breadcrumbs class, so nothing overrode it — while every calculator page kept its
   crumbs. Out-specifying is not the fix here: MudBlazor is referenced as `9.*`, so its
   selectors are not ours to depend on. This is the same reason the base rule above forces
   padding and min-height. */
@media (max-width: 600px) {
    .breadcrumb-bar {
        display: none !important;
    }
}

@media (max-width: 1280px) {
    /* Centred over the toolbar, so it must never grow into the drawer toggle (left)
       or the theme menu (right). 152px reserves a 48px icon button plus the toolbar
       gutter on each side; the logo scales down inside whatever is left. */
    .appbar-logo-link {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        max-width: calc(100% - 152px);
    }
    /* The SVGs are natively much larger than they render (the CaptiveAire mark is
       864x119), so width/height must never both go auto — that drops the element's
       width/height attributes and the logo springs to full natural size. Pin the box
       to the brand's own ratio instead (--logo-ar, set inline from the Brand record)
       so it scales down uniformly and stays capped at its normal 48px height. */
    .appbar-logo {
        margin-left: 0;
        height: auto;
        max-height: 48px;
        max-width: 100%;
        aspect-ratio: var(--logo-ar);
    }
}

/* Blazor circuit reconnect UI — rolling update resilience */
.blazor-reconnect-hide {
    display: none;
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    inset: 0;
    z-index: 10000;
}

#components-reconnect-modal .blazor-reconnect-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(2px);
}

#components-reconnect-modal .blazor-reconnect-dialog {
    position: relative;
    background: var(--mud-palette-surface, #fff);
    color: var(--mud-palette-text-primary, #333);
    border-radius: 8px;
    padding: 1rem 1.5rem;
    text-align: center;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    z-index: 1;
}

#components-reconnect-modal .blazor-reconnect-message {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 500;
}

#components-reconnect-modal .blazor-reconnect-spinner + .blazor-reconnect-message,
#components-reconnect-modal .blazor-reconnect-message + .blazor-reconnect-spinner {
    margin-top: 0.75rem;
}

#components-reconnect-modal .blazor-reconnect-spinner {
    width: 28px;
    height: 28px;
    margin: 0 auto;
    border: 3px solid var(--mud-palette-lines-default, #ddd);
    border-top-color: var(--mud-palette-primary, #1976d2);
    border-radius: 50%;
    animation: blazor-reconnect-spin 0.8s linear infinite;
}

@keyframes blazor-reconnect-spin {
    to { transform: rotate(360deg); }
}

/* State-scoped visibility: elements are hidden by default and revealed only
   when the modal carries the matching framework state class. */
#components-reconnect-modal .blazor-reconnect-show-only,
#components-reconnect-modal .blazor-reconnect-failed-only,
#components-reconnect-modal .blazor-reconnect-rejected-only {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .blazor-reconnect-show-only,
#components-reconnect-modal.components-reconnect-failed .blazor-reconnect-failed-only,
#components-reconnect-modal.components-reconnect-rejected .blazor-reconnect-rejected-only {
    display: revert;
}

#components-reconnect-modal.components-reconnect-show .blazor-reconnect-spinner.blazor-reconnect-show-only {
    display: block;
}