/* Qupic Customer-Web - Feinschliff (Konzept-Punkt 15: UI/UX-Modernisierung).
   Ergaenzt QupicTheme.cs (Theme/QupicTheme.cs) um dezente Transitions,
   Focus-Ringe und Card-Hover-Verhalten. Keine eigene Layout-Sprache, nur
   Politur auf Basis der MudBlazor-CSS-Variablen. */

html {
    scroll-behavior: smooth;
}

body {
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* MudBlazor's bundled utility CSS only ships a handful of unconditional
   classes (.d-flex, .d-none, ...) - there are no responsive variants like
   .d-md-flex/.d-md-none, so using those Bootstrap-style names silently did
   nothing. MudStack/MudIconButton also add their own unconditional .d-flex
   class alongside these, and MudBlazor's .d-flex/.d-none both carry
   !important - so these overrides need !important too, or MudBlazor's own
   .d-flex silently wins regardless of media query. These two classes give
   MainLayout.razor a real, breakpoint-driven mobile/desktop nav split.
   959.98px matches MudBlazor's own "md" breakpoint. */
.qupic-mobile-only {
    display: none !important;
}

.qupic-desktop-only {
    display: flex !important;
}

@media (max-width: 959.98px) {
    .qupic-mobile-only {
        display: flex !important;
    }

    .qupic-desktop-only {
        display: none !important;
    }
}

/* Typo.h1's fixed 3rem size (QupicTheme.cs) overflows narrow viewports and
   forces horizontal page scroll on the hero heading - scale it down below
   the sm breakpoint. */
@media (max-width: 599.98px) {
    .qupic-hero .mud-typography-h1 {
        font-size: 2rem;
        line-height: 1.25;
    }
}

/* MudStepper (CenterLabels="true") sizes each step button to fit its own
   label text and only spaces buttons ~44px apart regardless of that width -
   with 4 German labels ("Event-Details", "Uebersicht & Buchen") this makes
   adjacent step labels overlap on narrow viewports. Keeping only the active
   step's label visible (numbered circles + connector line stay for the
   others) removes the overlap without fighting MudStepper's internal
   layout math. */
@media (max-width: 599.98px) {
    .mud-step-label:not(.mud-step-label-active) .mud-step-label-content {
        display: none;
    }
}

/* Step-tab affordance (Plan 17 Task 4c): the stepper is linear
   (MudStepper's NonLinear defaults to false, and Configure.razor never sets
   it), so clicking a step header never actually navigates - but
   MudBlazor's own .mud-stepper-step-button CSS always sets cursor:pointer,
   which looked clickable regardless. Navigation happens exclusively via the
   "Zurueck"/"Weiter" buttons in the sticky price bar; this only removes the
   misleading pointer cursor for the non-active step headers, it does not
   change any navigation behavior. */
.mud-stepper-step-button:not(:has(.mud-step-label-active)) {
    cursor: default;
}

/* Used by every selectable card (Paket-/Modul-Auswahl im Konfigurator) so
   the whole card is clearly clickable and gives subtle hover feedback.
   Border-width is fixed at 2px in BOTH states (transparent when
   unselected) - MudPaper's own Outlined border is 1px, so toggling only
   .qupic-selected-card's border-width from 1 to 2px shrank the card's
   inner content area by ~2px on selection, which could flip a headline's
   or description's word-wrap right at the card's edge (viewport/resolution
   dependent - user-reported). Only the border *color* changes now, so
   selecting a card never resizes its content box. */
.qupic-selectable-card {
    cursor: pointer;
    border-width: 2px !important;
    border-color: transparent;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.qupic-selectable-card:hover {
    transform: translateY(-2px);
}

.qupic-selectable-card:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.qupic-hero {
    background: linear-gradient(135deg, var(--mud-palette-primary) 0%, #7C73F0 100%);
    color: var(--mud-palette-primary-text);
    border-radius: var(--mud-default-borderradius);
}

/* Root cause of the "sporadic border around the hero" (Konzept Phase 17):
   blazor.web.js's enhanced navigation programmatically focuses the page's
   first <h1> after a client-side page transition (assigning it a temporary
   tabindex="-1") so keyboard/screen-reader users notice the navigation -
   see https://learn.microsoft.com/aspnet/core/blazor/fundamentals/navigation.
   The hero's <h1> fills most of .qupic-hero's width, so the browser's
   default focus ring on that heading looked like an outline around the
   whole hero band - only after an enhanced-nav transition landing on "/",
   never after a hard reload, which is why it seemed sporadic. This is the
   standard fix for that Blazor Web App behaviour (also shipped in the
   default project template): suppress the ring only for these
   programmatic, non-interactive focus targets (tabindex="-1"). Real
   interactive elements (buttons, links, inputs) never carry tabindex="-1"
   here, so their normal :focus-visible outlines are unaffected. */
[tabindex='-1']:focus {
    outline: none !important;
}

.qupic-step-card {
    height: 100%;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

/* Selected state for Paket-/Modul-Karten in Configure.razor. Only the
   border color and background change - width is already reserved by
   .qupic-selectable-card above, so this never shifts layout. */
.qupic-selected-card {
    border-color: var(--mud-palette-primary) !important;
    background-color: var(--mud-palette-primary-hover);
}

.qupic-price-bar {
    border-top: 1px solid var(--mud-palette-lines-default);
}

.qupic-footer {
    border-top: 1px solid var(--mud-palette-lines-default);
}

.qupic-logo-link {
    text-decoration: none;
    color: inherit;
    display: inline-flex;
    align-items: center;
}

/* Eigenes Reconnect-Overlay (Plan 17 Task 1b) - Gegenstueck zum
   #components-reconnect-modal-Element in App.razor. blazor.web.js schaltet
   beim Verbindungsabbruch genau eine der folgenden Zustandsklassen direkt auf
   diesem Element um (nie mehrere gleichzeitig - blazor.web.js raeumt vorher
   immer alle anderen Zustandsklassen ab):
   - components-reconnect-show / -retrying: Wiederverbindung laeuft.
   - components-reconnect-failed / -paused / -resume-failed: Wiederverbindung
     gescheitert, nur noch per Neuladen der Seite loesbar.
   - components-reconnect-rejected: Sitzung serverseitig nicht mehr
     wiederherstellbar (z. B. nach Server-Neustart).
   Ohne dieses Element im DOM wuerde blazor.web.js stattdessen sein eigenes
   (englisches) Standard-Overlay generieren. */
#components-reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    align-items: center;
    justify-content: center;
    background-color: rgba(30, 27, 46, 0.55);
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-retrying,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-paused,
#components-reconnect-modal.components-reconnect-resume-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
}

#components-reconnect-modal .qupic-reconnect-dialog {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    max-width: 22rem;
    padding: 2rem;
    text-align: center;
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border-radius: var(--mud-default-borderradius);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

#components-reconnect-modal .qupic-reconnect-spinner {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 3px solid var(--mud-palette-lines-default);
    border-top-color: var(--mud-palette-primary);
    animation: qupic-reconnect-spin 0.8s linear infinite;
}

#components-reconnect-modal.components-reconnect-failed .qupic-reconnect-spinner,
#components-reconnect-modal.components-reconnect-paused .qupic-reconnect-spinner,
#components-reconnect-modal.components-reconnect-resume-failed .qupic-reconnect-spinner,
#components-reconnect-modal.components-reconnect-rejected .qupic-reconnect-spinner {
    display: none;
}

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

#components-reconnect-modal .qupic-reconnect-status {
    display: none;
    margin: 0;
}

#components-reconnect-modal.components-reconnect-show .qupic-reconnect-status--reconnecting,
#components-reconnect-modal.components-reconnect-retrying .qupic-reconnect-status--reconnecting {
    display: block;
}

#components-reconnect-modal.components-reconnect-failed .qupic-reconnect-status--failed,
#components-reconnect-modal.components-reconnect-paused .qupic-reconnect-status--failed,
#components-reconnect-modal.components-reconnect-resume-failed .qupic-reconnect-status--failed {
    display: block;
}

#components-reconnect-modal.components-reconnect-rejected .qupic-reconnect-status--rejected {
    display: block;
}

#components-reconnect-modal .qupic-reconnect-reload-button {
    display: none;
    border: none;
    border-radius: var(--mud-default-borderradius);
    padding: 0.5rem 1.5rem;
    font: inherit;
    font-weight: 600;
    color: var(--mud-palette-primary-text);
    background-color: var(--mud-palette-primary);
    cursor: pointer;
}

#components-reconnect-modal .qupic-reconnect-reload-button:hover {
    background-color: var(--mud-palette-primary-darken);
}

#components-reconnect-modal.components-reconnect-failed .qupic-reconnect-reload-button,
#components-reconnect-modal.components-reconnect-paused .qupic-reconnect-reload-button,
#components-reconnect-modal.components-reconnect-resume-failed .qupic-reconnect-reload-button,
#components-reconnect-modal.components-reconnect-rejected .qupic-reconnect-reload-button {
    display: inline-flex;
}