/* =============================================================================
   Återanslutningsskärmen
   =============================================================================

   Ersätter Blazors inbyggda "Rejoin failed... trying again in 5 seconds" — en vit
   ruta med en blå ring, på engelska, mitt i en svensk portal.

   ---------------------------------------------------------------------------
   VARFÖR REGLERNA LIGGER HÄR OCH INTE I ETT <style>-BLOCK

   Skärmen visas när kretsen är död. Då renderar Blazor ingenting, kör ingen C# och
   byter inga klasser i vårt render-träd — ramverket växlar klasser på ETT element
   med id="components-reconnect-modal" via sin egen JavaScript, och det är allt.

   Allt som ska synas måste alltså redan finnas i DOM:en, och all stil måste redan
   vara inläst. En stilmall i wwwroot/styles är exakt det: den ligger i webbläsarens
   cache innan avbrottet inträffar.

   ---------------------------------------------------------------------------
   BARA KLASSELEKTORER

   partner-utilities.css länkas efter den här filen och inleds med Preflight, som
   normaliserar element. Skulle vi styra på elementnamn (button, img, p) vinner
   Preflight på lika specificitet eftersom den kommer senare. En klass slår alltid
   ett elementnamn, så här finns inga bara-element-regler.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   HÖLJET

   inset: 0 och inte width: 100vw. 100vw räknar in rullningslisten, så överlägget
   blir bredare än det synliga fältet och allt centrerat innehåll hamnar en halv
   rullningslist för långt åt höger. Det var precis den buggen vi nyss rättade i
   huvudwebbens laddskärm, och den ska inte återuppstå här.
   -------------------------------------------------------------------------- */
.pp-reconnect {
    position: fixed;
    inset: 0;
    box-sizing: border-box;
    z-index: 100000; /* över kontopanelen (99999), som är det högsta som finns */
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgb(var(--pp-chrome-footer) / 0.94);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Blazor växlar de här klasserna. Alla lägen utom hide ska visa skärmen —
   ramverket sätter show när kontakten bryts och lägger sedan på retrying, failed
   eller rejected ovanpå, utan att ta bort show. */
.pp-reconnect.components-reconnect-show,
.pp-reconnect.components-reconnect-retrying,
.pp-reconnect.components-reconnect-failed,
.pp-reconnect.components-reconnect-rejected,
.pp-reconnect.components-reconnect-paused,
.pp-reconnect.components-reconnect-resume-failed {
    display: flex;
}

/* Uppe igen. Skärmen tas bort direkt — en uttoning här skulle ligga kvar över en
   sida som redan svarar på klick igen. */
.pp-reconnect.components-reconnect-hide {
    display: none;
}

/* -----------------------------------------------------------------------------
   PANELEN

   Samma formspråk som LfbBusyOverlay: ogenomskinlig chrome-raised, gul kant,
   stor rundning. De två är samma sorts händelse — något pågår och du kan inte
   göra något åt det — och ska läsas som samma familj.
   -------------------------------------------------------------------------- */
.pp-reconnect-panel {
    box-sizing: border-box;
    width: 100%;
    max-width: 30rem;
    padding: 2rem 1.75rem 1.75rem;
    border: 2px solid rgb(var(--pp-accent));
    border-radius: var(--pp-radius-xl);
    background: rgb(var(--pp-chrome-raised));
    box-shadow: var(--pp-shadow-accent);
    text-align: center;
}

/* -----------------------------------------------------------------------------
   LOGOTYP OCH PULSANDE RING

   Ramen har FAST storlek, uträknad ur bildens verkliga proportion (3840x647).
   Ringen mäts mot ramen, så geometrin är densamma innan bilden hunnit läsas in
   som efteråt.

   Det spelar roll just här: skärmen visas när nätet krånglar, alltså precis när
   en bild kan komma sent eller inte alls. Bilden ligger därför lokalt i wwwroot,
   inte på ett CDN — hämtas den utifrån är den borta när den som bäst behövs.
   -------------------------------------------------------------------------- */
.pp-reconnect-logoframe {
    --pp-rc-logo-w: 240px;
    --pp-rc-logo-pad: 26px;
    --pp-rc-logo-aspect: 5.9351; /* 3840 / 647 */

    position: relative;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 2.25rem;
    padding: var(--pp-rc-logo-pad);
    width: calc(var(--pp-rc-logo-w) + var(--pp-rc-logo-pad) * 2);
    height: calc(var(--pp-rc-logo-w) / var(--pp-rc-logo-aspect) + var(--pp-rc-logo-pad) * 2);
    max-width: 100%;
}

.pp-reconnect-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 0 22px rgb(var(--pp-brand-500) / 0.35));
}

/* Centrerad med inset, inte med translate(-50%, -50%).

   En procentflytt räknas mot elementets EGEN storlek, och den storleken låses när
   animationen börjar köras på kompositorn. Ändras den efteråt blir förskjutningen
   kvar med gammalt mått och ringen driver åt sidan. Här flyttar animationen
   ingenting alls — den skalar bara kring ramens mitt. */
.pp-reconnect-ring {
    position: absolute;
    inset: -14px -22px;
    border: 2px solid rgb(var(--pp-brand-500));
    border-radius: 999px;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.92);
    will-change: transform, opacity;
    animation: ppReconnectPulse 2.5s infinite cubic-bezier(0.4, 0, 0.6, 1);
}

@keyframes ppReconnectPulse {
    0% {
        transform: scale(0.92);
        opacity: 0.6;
    }

    100% {
        transform: scale(1.25);
        opacity: 0;
    }
}

/* -----------------------------------------------------------------------------
   STATUS, MÄTARE OCH FÖRSÖKSRÄKNARE
   -------------------------------------------------------------------------- */
.pp-reconnect-status {
    margin: 0 0 1.25rem;
    font-size: 1.05rem;
    font-weight: 900;
    line-height: 1.4;
    color: var(--pp-fg);
}

.pp-reconnect-meter {
    height: 6px;
    margin: 0 0 0.75rem;
    border-radius: 10px;
    background: var(--pp-glass-strong);
    overflow: hidden;
}

/* Bredden sätts av JavaScript och följer den verkliga nedräkningen till nästa
   försök. Ingen påhittad förloppsindikator: LfbBusyOverlay har redan skrivit ner
   varför en sådan är värre än ingen alls. */
.pp-reconnect-meter-fill {
    height: 100%;
    width: 0;
    border-radius: 10px;
    background: linear-gradient(90deg, rgb(var(--pp-brand-800)), rgb(var(--pp-brand-500)));
    transition: width 250ms linear;
}

/* Under själva försöket finns ingen nedräkning att visa. Då pulsar en full stapel
   i stället — den säger "det pågår, längden är okänd", vilket är sant.

   Klassen sitter på mätaren och inte på överlägget, eftersom överlägget är Blazors
   element. Se kommentaren i ReconnectOverlay.razor. */
.pp-reconnect-meter.is-indeterminate .pp-reconnect-meter-fill {
    animation: ppReconnectSweep 1.4s infinite ease-in-out;
}

@keyframes ppReconnectSweep {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.35;
    }
}

/* I failed och rejected görs inga fler försök av sig självt. Då finns ingen tid att
   räkna ner till, och en stapel som ligger kvar med en bredd från förra väntan påstår
   ett förlopp som inte pågår. Hellre ingen mätare än en som ljuger. */
.pp-reconnect.components-reconnect-failed .pp-reconnect-meter,
.pp-reconnect.components-reconnect-rejected .pp-reconnect-meter,
.pp-reconnect.components-reconnect-resume-failed .pp-reconnect-meter {
    display: none;
}

.pp-reconnect-attempt {
    margin: 0 0 1.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--pp-fg-faint);
}

/* Sätts av JS när Blazor inte har några värden att fylla i — i failed och rejected
   pågår ingen nedräkning. display och inte visibility: en dold rad som ändå tar plats
   lämnar ett tomt hål mitt i panelen. Höjden ändras när läget byts, men då byter
   panelen ändå utseende eftersom knapparna dyker upp. */
.pp-reconnect-attempt.is-hidden {
    display: none;
}

/* Nedräkningens svans. Döljs under själva anslutningsförsöket — då står siffran på
   noll och "nästa om 0 sekunder" är ingen upplysning. */
.pp-reconnect-next.is-hidden {
    display: none;
}

/* -----------------------------------------------------------------------------
   BUDSKAPET

   Roterar medan man väntar. Ingen aria-live: en skärmläsare ska läsa upp vad som
   händer med anslutningen, inte ett nytt budskap var sjätte sekund.
   -------------------------------------------------------------------------- */
.pp-reconnect-message {
    /* Höjden reserveras för två rader så att panelen inte hoppar när en kort rad byts
       mot en lång. Innehållet centreras i den, annars hänger en ensam rad i överkant
       med ett tomrum under. */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3.25rem;
    margin: 0 0 1.5rem;
    padding: 0 0.5rem;
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.5;
    color: rgb(var(--pp-accent));
    transition: opacity 400ms var(--pp-ease-panel);
}

/* JS tonar ut, byter text, tonar in. min-height ovan gör att panelen inte hoppar
   när en kort rad byts mot en lång. */
.pp-reconnect-message.is-fading {
    opacity: 0;
}

/* -----------------------------------------------------------------------------
   KNAPPARNA

   Bara i de lägen där de betyder något. Under pågående försök finns ingenting att
   trycka på, och en knapp som inte gör något är sämre än ingen knapp.
   -------------------------------------------------------------------------- */
.pp-reconnect-actions {
    display: none;
    justify-content: center;
    gap: 0.75rem;
    margin: 0 0 1.25rem;
}

.pp-reconnect.components-reconnect-failed .pp-reconnect-actions,
.pp-reconnect.components-reconnect-rejected .pp-reconnect-actions,
.pp-reconnect.components-reconnect-resume-failed .pp-reconnect-actions {
    display: flex;
}

/* .pp-btn-primary bär utseendet. Den skrevs för MudBlazors knappar och sätter
   varken kant eller pekare, eftersom Mud redan gjorde det — en naken <button>
   behöver båda. */
.pp-reconnect-btn {
    display: none;
    border: 0;
    cursor: pointer;
    font: inherit;
}

.pp-reconnect.components-reconnect-failed .pp-reconnect-retry,
.pp-reconnect.components-reconnect-rejected .pp-reconnect-reload,
.pp-reconnect.components-reconnect-resume-failed .pp-reconnect-reload {
    display: inline-flex;
}

.pp-reconnect-reassurance {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--pp-fg-muted);
}

/* -----------------------------------------------------------------------------
   MINDRE SKÄRMAR
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
    .pp-reconnect-logoframe {
        --pp-rc-logo-w: 180px;
        --pp-rc-logo-pad: 20px;
        margin-bottom: 1.75rem;
    }

    .pp-reconnect-panel {
        padding: 1.5rem 1.25rem 1.25rem;
    }

    .pp-reconnect-status {
        font-size: 0.95rem;
    }

    .pp-reconnect-message {
        font-size: 0.875rem;
    }
}

/* -----------------------------------------------------------------------------
   MINDRE RÖRELSE

   Den som bett om det får en stillastående ring och ett byte utan uttoning.
   Innehållet är detsamma — det är rörelsen som tas bort, inte informationen.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .pp-reconnect-ring {
        animation: none;
        transform: none;
        opacity: 0.3;
    }

    .pp-reconnect-meter.is-indeterminate .pp-reconnect-meter-fill {
        animation: none;
    }

    .pp-reconnect-message {
        transition: none;
    }

    .pp-reconnect-meter-fill {
        transition: none;
    }
}