/*
 * Pages de connexion UVMASTER : console plateforme (/platform) et espace entreprise (/master).
 * Identité UVMASTER (mêmes couleurs que la page d'accueil) : vert forêt, vert, citron.
 * Uniquement de la mise en forme : aucun comportement, aucun champ, aucune route n'est modifié.
 * Portée : :is(.fi-panel-platform, .fi-panel-admin) (corps de la page de ce panneau seulement) ; les pages connectées ne sont pas touchées.
 */

:is(.fi-panel-platform, .fi-panel-admin) {
    --pf-forest: #0b2f21;
    --pf-forest-2: #124b35;
    --pf-green: #168447;
    --pf-green-dark: #0f6a38;
    --pf-lime: #d9f36a;
    --pf-ink: #102019;
    --pf-muted: #526159;
    --pf-line: #d7e0d9;
    --pf-paper: #f3f7f4;
}

/* ---------- fond et conteneur -------------------------------------------------------------------------------- */
:is(.fi-panel-platform, .fi-panel-admin) .fi-simple-layout {
    background:
        radial-gradient(60rem 30rem at 85% -10%, rgba(22, 132, 71, 0.10), transparent 60%),
        var(--pf-paper) !important;
    color: var(--pf-ink);
}

:is(.fi-panel-platform, .fi-panel-admin) .fi-simple-main-ctn {
    padding: 1.5rem 1rem;
}

/* ---------- carte du formulaire ------------------------------------------------------------------------------ */
:is(.fi-panel-platform, .fi-panel-admin) .fi-simple-main {
    max-width: 28rem;
    margin-block: 0;
    padding: 2.5rem 2rem 2rem;
    background: #fff !important;
    color: var(--pf-ink);
    border: 1px solid var(--pf-line);
    border-radius: 1.25rem;
    box-shadow: 0 1px 2px rgba(11, 47, 33, 0.06), 0 24px 60px -24px rgba(11, 47, 33, 0.28);
    --tw-ring-shadow: 0 0 #0000;
}

@media (min-width: 640px) {
    :is(.fi-panel-platform, .fi-panel-admin) .fi-simple-main {
        padding: 3rem 2.75rem 2.25rem;
    }
}

:is(.fi-panel-platform, .fi-panel-admin) .fi-simple-header {
    margin-bottom: 0.25rem;
}

:is(.fi-panel-platform, .fi-panel-admin) .fi-simple-header img.fi-logo {
    height: 4rem !important;
    width: auto;
}

:is(.fi-panel-platform, .fi-panel-admin) .fi-simple-header-heading {
    margin-top: 0.5rem;
    color: var(--pf-ink) !important;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

:is(.fi-panel-platform, .fi-panel-admin) .fi-simple-header-subheading {
    margin-top: 0.375rem;
    color: var(--pf-muted) !important;
    font-size: 0.9375rem;
    line-height: 1.5;
    text-align: center;
}

/* ---------- champs ------------------------------------------------------------------------------------------- */
:is(.fi-panel-platform, .fi-panel-admin) .fi-simple-main .fi-fo-field-wrp-label span {
    color: var(--pf-ink) !important;
    font-weight: 600;
}

:is(.fi-panel-platform, .fi-panel-admin) .fi-simple-main .fi-input-wrp {
    background: #fff !important;
    border-radius: 0.75rem;
    --tw-ring-color: var(--pf-line) !important;
    box-shadow: 0 0 0 1px var(--pf-line);
    transition: box-shadow 0.15s ease;
}

:is(.fi-panel-platform, .fi-panel-admin) .fi-simple-main .fi-input-wrp:focus-within {
    box-shadow: 0 0 0 2px var(--pf-green) !important;
}

:is(.fi-panel-platform, .fi-panel-admin) .fi-simple-main .fi-input {
    min-height: 2.75rem;
    color: var(--pf-ink) !important;
    background: transparent !important;
}

:is(.fi-panel-platform, .fi-panel-admin) .fi-simple-main .fi-input-wrp-suffix {
    background: transparent !important;
    border-color: var(--pf-line) !important;
}

:is(.fi-panel-platform, .fi-panel-admin) .fi-simple-main .fi-input-wrp button {
    color: var(--pf-muted);
}

:is(.fi-panel-platform, .fi-panel-admin) .fi-simple-main .fi-checkbox-input {
    background-color: #fff;
    border-color: #9db0a5;
    box-shadow: inset 0 0 0 1px #9db0a5;
    --tw-ring-shadow: 0 0 #0000;
}

:is(.fi-panel-platform, .fi-panel-admin) .fi-simple-main .fi-checkbox-input:checked {
    background-color: var(--pf-green);
    border-color: var(--pf-green);
}

:is(.fi-panel-platform, .fi-panel-admin) .fi-simple-main .fi-fo-checkbox span,
:is(.fi-panel-platform, .fi-panel-admin) .fi-simple-main label span {
    color: var(--pf-ink);
}

/* ---------- bouton principal --------------------------------------------------------------------------------- */
:is(.fi-panel-platform, .fi-panel-admin) .fi-simple-main .fi-btn {
    min-height: 2.875rem;
    border-radius: 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    background: var(--pf-green) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px -6px rgba(22, 132, 71, 0.55);
    transition: background 0.15s ease, transform 0.05s ease;
}

:is(.fi-panel-platform, .fi-panel-admin) .fi-simple-main .fi-btn:hover {
    background: var(--pf-green-dark) !important;
}

:is(.fi-panel-platform, .fi-panel-admin) .fi-simple-main .fi-btn:active {
    transform: translateY(1px);
}

:is(.fi-panel-platform, .fi-panel-admin) .fi-simple-main .fi-btn:focus-visible {
    outline: 3px solid rgba(22, 132, 71, 0.35);
    outline-offset: 2px;
}

/* ---------- messages d'erreur -------------------------------------------------------------------------------- */
:is(.fi-panel-platform, .fi-panel-admin) .fi-simple-main .fi-fo-field-wrp-error-message {
    color: #b42318 !important;
    font-weight: 500;
}

/* ---------- liens et mentions sous le formulaire ------------------------------------------------------------- */
:is(.fi-panel-platform, .fi-panel-admin) .pf-help {
    margin-top: 1.25rem;
    text-align: center;
    font-size: 0.9rem;
}

:is(.fi-panel-platform, .fi-panel-admin) .pf-help a {
    color: var(--pf-green);
    font-weight: 600;
    text-decoration: none;
}

:is(.fi-panel-platform, .fi-panel-admin) .pf-help a:hover {
    text-decoration: underline;
}

:is(.fi-panel-platform, .fi-panel-admin) .pf-note .pf-link {
    color: var(--pf-green);
    font-weight: 600;
    text-decoration: none;
}

:is(.fi-panel-platform, .fi-panel-admin) .pf-note .pf-link:hover {
    text-decoration: underline;
}

:is(.fi-panel-platform, .fi-panel-admin) .pf-note {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--pf-line);
    color: var(--pf-muted);
    font-size: 0.8125rem;
    line-height: 1.5;
    text-align: center;
}

/* ---------- panneau de marque (écrans larges) ---------------------------------------------------------------- */
:is(.fi-panel-platform, .fi-panel-admin) .pf-aside {
    display: none;
}

@media (min-width: 1024px) {
    :is(.fi-panel-platform, .fi-panel-admin) .pf-aside {
        display: block;
        position: fixed;
        inset: 0 auto 0 0;
        width: 44%;
        max-width: 38rem;
        z-index: 1;
        color: #fff;
        background:
            radial-gradient(34rem 24rem at 100% 0%, rgba(217, 243, 106, 0.18), transparent 60%),
            radial-gradient(30rem 22rem at 0% 100%, rgba(40, 167, 92, 0.30), transparent 60%),
            linear-gradient(160deg, var(--pf-forest-2), var(--pf-forest) 70%);
    }

    .pf-aside ~ .fi-simple-layout {
        padding-left: min(44%, 38rem);
    }

    :is(.fi-panel-platform, .fi-panel-admin) .pf-aside__inner {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        padding: 2.75rem 3rem;
    }

    :is(.fi-panel-platform, .fi-panel-admin) .pf-aside__brand {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin: 0;
        font-size: 1.125rem;
        font-weight: 700;
        letter-spacing: -0.01em;
    }

    :is(.fi-panel-platform, .fi-panel-admin) .pf-aside__brand small {
        display: block;
        margin-top: 0.125rem;
        color: rgba(255, 255, 255, 0.72);
        font-size: 0.75rem;
        font-weight: 500;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    :is(.fi-panel-platform, .fi-panel-admin) .pf-aside__mark {
        display: inline-grid;
        place-items: center;
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 0.75rem;
        background: var(--pf-lime);
        color: var(--pf-forest);
        font-size: 1.375rem;
        font-weight: 800;
    }

    :is(.fi-panel-platform, .fi-panel-admin) .pf-aside__body h2 {
        margin: 0;
        max-width: 24ch;
        font-size: clamp(1.75rem, 2.6vw, 2.5rem);
        font-weight: 700;
        line-height: 1.15;
        letter-spacing: -0.03em;
    }

    :is(.fi-panel-platform, .fi-panel-admin) .pf-aside__lead {
        max-width: 42ch;
        margin: 1rem 0 0;
        color: rgba(255, 255, 255, 0.78);
        font-size: 1rem;
        line-height: 1.6;
    }

    :is(.fi-panel-platform, .fi-panel-admin) .pf-aside__list {
        display: grid;
        gap: 1.25rem;
        margin: 2.25rem 0 0;
        padding: 0;
        list-style: none;
    }

    :is(.fi-panel-platform, .fi-panel-admin) .pf-aside__list li {
        display: flex;
        gap: 0.875rem;
        align-items: flex-start;
        font-size: 0.9375rem;
        line-height: 1.5;
        color: rgba(255, 255, 255, 0.78);
    }

    :is(.fi-panel-platform, .fi-panel-admin) .pf-aside__list strong {
        display: block;
        color: #fff;
        font-weight: 600;
    }

    :is(.fi-panel-platform, .fi-panel-admin) .pf-aside__icon {
        flex: none;
        box-sizing: content-box;
        width: 1.25rem;
        height: 1.25rem;
        padding: 0.5rem;
        border-radius: 0.75rem;
        background: rgba(255, 255, 255, 0.10);
        color: var(--pf-lime);
    }

    :is(.fi-panel-platform, .fi-panel-admin) .pf-aside__foot {
        margin: 0;
        color: rgba(255, 255, 255, 0.55);
        font-size: 0.8125rem;
    }
}

/* ---------- logo de l'espace entreprise (affiché par le thème, voir AdminPanelProvider) ---------------------- */
:is(.fi-panel-platform, .fi-panel-admin) .pf-logo {
    display: block;
    height: 4rem;
    width: auto;
    margin: 0 auto 1rem;
}

/* ---------- accessibilité ------------------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    :is(.fi-panel-platform, .fi-panel-admin) .fi-simple-main .fi-btn,
    :is(.fi-panel-platform, .fi-panel-admin) .fi-simple-main .fi-input-wrp {
        transition: none;
    }
}