/* Habillage "Frediverse" du portail Authelia, calque sur phare
   (https://frediver.se/register/...). Injecte par nginx (authelia-skin) ;
   Authelia 4.39 se theme par variables CSS ([data-theme] sur <body>). */

@font-face { font-family: "Sansation"; font-weight: 300; font-display: swap; src: url("fonts/Sansation-300.woff2") format("woff2"); }
@font-face { font-family: "Sansation"; font-weight: 400; font-display: swap; src: url("fonts/Sansation-400.woff2") format("woff2"); }
@font-face { font-family: "Sansation"; font-weight: 700; font-display: swap; src: url("fonts/Sansation-700.woff2") format("woff2"); }
@font-face { font-family: "Rubik 80s Fade"; font-weight: 400; font-display: swap; src: url("fonts/Rubik80sFade-400.woff2") format("woff2"); }

/* Palette de phare (--sh-*) */
body[data-theme] {
    --background: #101114;
    --foreground: #e9e9ee;
    --card: #1b1c22;
    --card-foreground: #e9e9ee;
    --popover: #1b1c22;
    --popover-foreground: #e9e9ee;
    --primary: #8b5cf6;
    --primary-foreground: #fff;
    --muted: #24252c;
    --muted-foreground: #92929e;
    --accent: #24252c;
    --accent-foreground: #e9e9ee;
    --destructive: #f16469;
    --success: #34d399;
    --warning: #f0a94e;
    --border: #2f303a;
    --input: #2f303a;
    --ring: #8b5cf6;
    --radius: 0.5rem;
    --custom-loading-bar: #8b5cf6;
    --custom-icon: #e9e9ee;
    color-scheme: dark;
}

/* Ciel etoile */
html,
body[data-theme] {
    min-height: 100%;
    background-color: #03040c;
    background-image:
        url("stars.svg"),
        linear-gradient(180deg, #03040c 0%, #06091b 25%, #090e2a 50%, #17183f 85%, #1c1b45 100%);
    background-size: cover, 100% 100%;
    background-position: center, center;
    background-attachment: fixed;
}
body[data-theme],
body[data-theme] :is(input, button, label, p, span, a, div, h1, h2, h3, h4, h5, h6) {
    font-family: "Sansation", system-ui, sans-serif;
}

/* Mot-symbole en haut de page, comme phare */
body[data-theme]::before {
    content: "frediverse";
    position: absolute;
    top: 52px;
    left: 0;
    right: 0;
    text-align: center;
    font-family: "Rubik 80s Fade", "Sansation", system-ui, sans-serif;
    font-size: 64px;
    line-height: 1;
    color: #fff;
    pointer-events: none;
}

/* Le bloc central devient une carte */
[id$="-stage"] > div > .flex-col {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 1.25rem 1.25rem 0.75rem;
    text-align: left;
}
/* conteneur a px-8 : 512 - 2*32 = carte de 448px comme phare */
[id$="-stage"] > div {
    max-width: 512px;
    margin-top: 40px;
}

/* Logo d'Authelia remplace par le mot-symbole */
[id$="-stage"] > div > .flex-col > .w-full.p-2:first-child {
    display: none;
}

/* Titre ("Sign in") : police de marque, aligne a gauche */
[id$="-stage"] h5,
[id$="-stage"] h6 {
    font-family: "Rubik 80s Fade", "Sansation", system-ui, sans-serif !important;
    font-size: 1.15rem;
    color: #fff;
    text-align: left;
    margin-bottom: 0.25rem;
}

/* Champs */
[data-slot="floating-input"],
[data-slot="input"] {
    background: var(--card);
    border-color: var(--border);
    border-radius: var(--radius);
}
[data-slot="floating-input"]:focus,
[data-slot="input"]:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
}
[id$="-stage"] label {
    color: var(--muted-foreground);
}

/* Bouton principal violet, sans majuscules forcees */
[data-slot="button"] {
    border-radius: var(--radius);
    font-weight: 700;
    text-transform: none;
}
#sign-in-button,
[id$="-stage"] form [data-slot="button"][type="submit"] {
    background: var(--primary);
    color: var(--primary-foreground);
}
#sign-in-button:hover,
[id$="-stage"] form [data-slot="button"][type="submit"]:hover {
    background: #7c3aed;
}

/* Liens et case a cocher ("Powered by Authelia" reste discret) */
[id$="-stage"] form a,
#reset-password-button {
    color: #a78bfa;
}
[id$="-stage"] > div > .flex-col > :last-child a {
    color: var(--muted-foreground);
}
[data-slot="checkbox"][data-checked],
[data-slot="checkbox"][data-state="checked"] {
    background: var(--primary);
    border-color: var(--primary);
}

@media (max-width: 520px) {
    body[data-theme]::before { font-size: 44px; top: 56px; }
    [id$="-stage"] > div { margin-top: 72px; padding-left: 1rem; padding-right: 1rem; }
}