/*
 * codo-login.css: Stile der Anmeldeseiten (Breeze-Blade, nicht Nova).
 * Laden die Seiten layouts/guest.blade.php, ohne Vite und ohne public/build.
 * Muss auf jeder Instanz ohne gebaute Assets funktionieren: keine Tailwind-Klassen verwenden.
 *
 * Quelle der Werte: docs/design/codo_UI-Backend.ai (Seite 1) und docs/design/PLAN.md, Abschnitt 6.
 * Bilder und Icons: ../codo/img und ../codo/icons (siehe public/codo/README.md).
 */

/* Schrift: Outfit, SIL OFL 1.1 (Lizenztext: ../codo/fonts/OFL.txt). Kein CDN. */
@font-face {
    font-family: 'Outfit';
    src: url('../codo/fonts/Outfit-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --codo-teal: #54BBAB;
    --codo-pink: #F088B6;
    --codo-teal-hover: #4CA89A;   /* Teal ca. 10 % dunkler */
    --codo-pink-hover: #D87AA4;   /* Rosa ca. 10 % dunkler */
    --codo-yellow: #FFE163;
    --codo-text: #3C3C3B;
    --codo-muted: #9D9D9C;
    --codo-field: #F9F9F9;   /* #EDEDED bei 30 % auf Weiss */
    --codo-white: #FFFFFF;

    /* Nicht im Entwurf definiert, abgeleitet (Kontrast auf Weiss siehe PLAN.md): */
    --codo-error: #B3265E;   /* 6,26:1 auf Weiss */
    --codo-focus: #00A583;   /* Logofarbe, 3,13:1 auf Weiss */
    --codo-status-bg: rgba(84, 187, 171, 0.18);

    --codo-radius-card: 27.3px;
    --codo-radius-pill: 999px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    /* Keine automatische Dunkel-/Farbanpassung des Browsers: Teal und Rosa bleiben exakt wie im Token */
    color-scheme: light;
}

body.codo-auth-body {
    margin: 0;
    min-height: 100vh;
    color: var(--codo-text);
    font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    /* Hintergrund aus dem Design (ohne Panel und Formular); Rosa als Ersatzfarbe, falls das Bild nicht laedt */
    background-color: var(--codo-pink);
    background-image: url('../codo/img/login-bg.jpg');
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

/* ---------- Rahmen ---------- */

.codo-auth {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}

/* Glaspanel: Weiss 30 %, Rand 0,75 pt Weiss, Radius 27,3 (Design Seite 1: 992 x 462 pt) */
.codo-auth__card {
    width: 100%;
    max-width: 992px;
    display: grid;
    grid-template-columns: minmax(0, 509.3fr) minmax(0, 482.7fr);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--codo-radius-card);
    background: rgba(255, 255, 255, 0.3);
}

/*
 * Linke Seite: Logo, Begruessung und Maskottchen. Alle Masse in cqw (Breite dieses Blocks, Design: 509,3 pt),
 * damit alles proportional skaliert und oben verankert bleibt, auch wenn das Formular hoeher wird.
 */
.codo-auth__aside {
    position: relative;
    container-type: inline-size;
    aspect-ratio: 509.3 / 461.9;
    min-width: 0;
}

.codo-auth__logo {
    position: absolute;
    left: 8.38cqw;
    top: 7.42cqw;
    width: 39.6cqw;
    height: auto;
}

/* Sprechblase als Text (aus lang). Mitte wie im Design; waechst bei laengerem Text nach beiden Seiten. */
.codo-auth__bubble {
    position: absolute;
    left: 54.7cqw;
    top: 32.46cqw;
    transform: translateX(-50%);
    min-width: 33.4cqw;
    max-width: 90cqw;
    width: max-content;
    height: 6.95cqw;
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.2em;
    border-radius: var(--codo-radius-pill);
    background: var(--codo-white);
    color: var(--codo-pink);
    font-size: 18px;
    font-weight: 400;
    white-space: nowrap;
}

@supports (font-size: 1cqw) {
    .codo-auth__bubble {
        font-size: clamp(14px, 3.9cqw, 22px);
    }
}

.codo-auth__mascots {
    position: absolute;
    left: 20.75cqw;
    top: 40.73cqw;
    width: 54.69cqw;
    height: auto;
}

/* Rechte Seite: weisse Formularkarte, Abstaende wie im Design (oben 37, rechts 34, unten 39 pt) */
.codo-auth__main {
    display: flex;
    padding: 37px 34px 39px 0;
}

.codo-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 36px 30px;
    border-radius: var(--codo-radius-card);
    background: var(--codo-white);
}

/* ---------- Inhalt ---------- */

.codo-title {
    margin: 0 0 24px;
    font-size: 32px;
    font-weight: 300;
    line-height: 1.2;
    color: var(--codo-text);
}

.codo-text {
    margin: 0 0 20px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
}

.codo-form {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin: 0;
}

.codo-field {
    margin-bottom: 18px;
}

.codo-label {
    display: block;
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--codo-text);
}

.codo-input {
    display: block;
    width: 100%;
    height: 46px;
    padding: 0 22px;
    border: 0;
    border-radius: var(--codo-radius-pill);
    background: var(--codo-field);
    color: var(--codo-text);
    font: 400 15px/1 'Outfit', system-ui, sans-serif;
}

.codo-input::placeholder {
    color: var(--codo-muted);
    opacity: 1;
}

.codo-input:focus-visible,
.codo-btn:focus-visible,
.codo-link:focus-visible {
    outline: 3px solid var(--codo-focus);
    outline-offset: 2px;
}

/* Fehler: genau eine Umrandung. Ohne Fokus innen rosa, mit Fokus der Fokusring selbst in Rosa (kein Teal darueber). */
.codo-input[aria-invalid='true'] {
    box-shadow: inset 0 0 0 2px var(--codo-pink);
}

.codo-input[aria-invalid='true']:focus-visible {
    box-shadow: none;
    outline-color: var(--codo-pink);
}

.codo-error {
    margin: 8px 0 0;
    padding: 0 0 0 22px;
    list-style: none;
    font-size: 14px;
    line-height: 1.4;
    color: var(--codo-error);
}

.codo-status {
    margin: 0 0 18px;
    padding: 12px 18px;
    border-radius: 20px;
    background: var(--codo-status-bg);
    font-size: 14px;
    line-height: 1.4;
    color: var(--codo-text);
}

/* ---------- Aktionen ---------- */

.codo-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 28px;
}

.codo-actions--end {
    justify-content: flex-end;
}

.codo-actions form {
    margin: 0;
}

/* Weisser Text auf Teal/Rosa wie im Entwurf: Kontrast 2,3:1, unter WCAG AA (siehe Bericht) */
.codo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 48px;
    padding: 0 22px;
    border: 0;
    border-radius: var(--codo-radius-pill);
    color: var(--codo-white);
    font: 500 16px/1 'Outfit', system-ui, sans-serif;
    text-decoration: none;
    cursor: pointer;
    opacity: 1;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color 0.15s ease;
}

/* Farben fest aus den Tokens, ohne Filter oder Transparenz */
.codo-btn--primary {
    background-color: var(--codo-teal);
}

.codo-btn--primary:hover {
    background-color: var(--codo-teal-hover);
}

.codo-btn--secondary {
    background-color: var(--codo-pink);
}

.codo-btn--secondary:hover {
    background-color: var(--codo-pink-hover);
}

.codo-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--codo-text);
    font: 400 15px/1.4 'Outfit', system-ui, sans-serif;
    text-decoration: underline;
    cursor: pointer;
}

.codo-link:hover {
    text-decoration-thickness: 2px;
}

/* Icons: Vektoren aus dem Design (../codo/icons/), faerben sich mit der Textfarbe */
.codo-icon {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    background: currentColor;
    -webkit-mask: var(--codo-icon) center / contain no-repeat;
    mask: var(--codo-icon) center / contain no-repeat;
}

.codo-icon--login {
    --codo-icon: url('../codo/icons/icon-login.svg');
}

.codo-icon--forgot-password {
    --codo-icon: url('../codo/icons/icon-forgot-password.svg');
}

/* ---------- Hinweise (Passwort setzen) ---------- */

.codo-hint {
    display: flex;
    gap: 12px;
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.4;
}

.codo-hint::before {
    content: 'i';
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border: 2px solid var(--codo-focus);
    border-radius: 50%;
    color: var(--codo-focus);
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
}

/* ---------- Schmale Bildschirme ---------- */

@media (max-width: 860px) {
    .codo-auth__card {
        grid-template-columns: minmax(0, 1fr);
    }

    .codo-auth__aside {
        width: min(100%, 420px);
        margin: 0 auto;
    }

    .codo-auth__main {
        padding: 20px;
    }
}

@media (max-width: 480px) {
    .codo-auth {
        padding: 12px;
    }

    .codo-panel {
        padding: 28px 22px;
    }

    .codo-title {
        font-size: 28px;
    }

    /* Anmelden oben, sekundaere Aktion darunter */
    .codo-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .codo-actions .codo-btn {
        width: 100%;
    }

    .codo-actions--end {
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    .codo-btn {
        transition: none;
    }
}