/* Freibad Management System - Gemeinsame Styles für Login/Onboarding-Seiten (Design v2) */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-color: #2563eb;
    --primary-hover: #1d4ed8;
    --primary-soft: #eff4ff;
    --secondary-color: #0891b2;
    --success-color: #16a34a;
    --danger-color: #dc2626;
    --light-bg: #f4f6fb;
    --dark-text: #0f172a;
    --border-color: #e4e8f0;
    --surface: #ffffff;
    --text-secondary: #52607a;
    --text-muted: #94a1b8;
    --radius-sm: 8px;
    --radius: 14px;
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] {
    --primary-color: #5b9bff;
    --primary-hover: #7cadff;
    --primary-soft: rgba(91, 155, 255, 0.14);
    --secondary-color: #22d3ee;
    --success-color: #34d399;
    --danger-color: #f87171;
    --light-bg: #0b0f19;
    --dark-text: #eef1f8;
    --border-color: #262d3d;
    --surface: #131826;
    --text-secondary: #a6b0c3;
    --text-muted: #6b7488;
}

.fb-icon {
    width: 1.1em;
    height: 1.1em;
    flex-shrink: 0;
    vertical-align: -0.18em;
}

.fb-icon--sm {
    width: 0.95em;
    height: 0.95em;
}

.fb-icon--lg {
    width: 1.5em;
    height: 1.5em;
    vertical-align: -0.25em;
}

.fb-icon--xl {
    width: 2rem;
    height: 2rem;
}

.icon-heading {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.icon-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.theme-toggle-btn {
    position: fixed;
    top: 1rem;
    right: 1rem;
    background-color: rgba(255, 255, 255, 0.16);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.5);
    padding: 0.5rem 0.8rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    transition: background-color 0.2s var(--ease);
    backdrop-filter: blur(4px);
}

.theme-toggle-btn:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    position: relative;
    background:
        radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.16), transparent 42%),
        radial-gradient(circle at 82% 78%, rgba(255, 255, 255, 0.12), transparent 42%),
        linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    background-size: 140% 140%, 140% 140%, 100% 100%;
    animation: auth-bg-drift 18s ease-in-out infinite alternate;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

@keyframes auth-bg-drift {
    from { background-position: 0% 0%, 100% 100%, 0 0; }
    to { background-position: 12% 8%, 88% 92%, 0 0; }
}

/* Weiche, unscharfe Farbflecken hinter der Karte für etwas Tiefe im Hintergrund - rein
   dekorativ, daher pointer-events:none und hinter allem anderen (z-index). */
body::before,
body::after {
    content: '';
    position: fixed;
    width: 40vmax;
    height: 40vmax;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
}

body::before {
    top: -12vmax;
    left: -10vmax;
    background: rgba(255, 255, 255, 0.16);
}

body::after {
    bottom: -14vmax;
    right: -10vmax;
    background: rgba(0, 0, 0, 0.12);
}

.login-container,
.box,
.container {
    position: relative;
    z-index: 1;
    background: var(--surface);
    border-radius: calc(var(--radius) + 4px);
    box-shadow: 0 30px 60px -12px rgba(15, 23, 42, 0.35), 0 8px 20px -6px rgba(15, 23, 42, 0.15);
    width: 100%;
    max-width: 400px;
    padding: 2.1rem 2rem;
    animation: slideUp 0.4s var(--ease);
    overflow: hidden;
}

.login-container::before,
.box::before,
.container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
}

.box {
    text-align: center;
}

/* Login-Layout: die eigentliche Anmeldekarte bleibt komplett unabhängig von Testkonten -
   sieht exakt so aus, als gäbe es keine. Testkonten (falls vorhanden) stehen als eigenes,
   bewusst andersartig gestaltetes Seitenpanel daneben (siehe .test-panel unten), nicht
   innerhalb der Karte. */
.login-page {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    width: 100%;
    max-width: 900px;
}

.login-page .login-container {
    margin: 0;
}

/* Icon-Präfix in Eingabefeldern (Benutzername/Passwort) */
.input-icon-group {
    position: relative;
}

.input-icon-group input[type="text"],
.input-icon-group input[type="password"],
.input-icon-group input[type="email"] {
    padding-left: 3rem;
}

.input-icon-group .input-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
    display: flex;
    width: 1.1em;
    height: 1.1em;
}

.input-icon-group .input-icon .fb-icon {
    width: 100%;
    height: 100%;
}

.input-icon-group:focus-within .input-icon {
    color: var(--primary-color);
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-header,
.header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.login-header h1,
.header h1,
.box h1 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    color: var(--dark-text);
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin-bottom: 0.35rem;
}

.auth-logo {
    height: 56px;
    width: auto;
    max-width: 100%;
    flex-shrink: 0;
    filter: drop-shadow(0 6px 14px rgba(37, 99, 235, 0.25));
}

.login-header p,
.header p,
.box p {
    color: var(--text-secondary);
    font-size: 0.88rem;
}

.login-footer {
    text-align: center;
    margin-top: 1.25rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.form-group {
    margin-bottom: 1.1rem;
}

label {
    display: block;
    margin-bottom: 0.45rem;
    color: var(--dark-text);
    font-weight: 600;
    font-size: 0.87rem;
}

input[type="text"],
input[type="password"],
input[type="email"] {
    width: 100%;
    padding: 0.75rem 0.9rem;
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    font-size: 1rem;
    transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease), background-color 0.15s var(--ease);
    font-family: inherit;
    background-color: var(--light-bg);
    color: var(--dark-text);
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus {
    outline: none;
    border-color: var(--primary-color);
    background-color: var(--surface);
    box-shadow: 0 0 0 3px var(--primary-soft);
}

.form-group input::placeholder {
    color: var(--text-muted);
}

.remember-me {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.1rem;
    font-size: 0.85rem;
}

.remember-me input[type="checkbox"] {
    width: auto;
    cursor: pointer;
}

.remember-me label {
    margin: 0;
    color: var(--text-secondary);
    font-weight: 500;
    cursor: pointer;
}

.btn-login,
.btn-submit {
    width: 100%;
    padding: 0.8rem;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: 0 6px 16px -4px rgba(37, 99, 235, 0.45);
    transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), filter 0.15s var(--ease);
}

.btn-login:hover,
.btn-submit:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow: 0 12px 24px -4px rgba(37, 99, 235, 0.5);
}

.btn-login:active,
.btn-submit:active {
    transform: translateY(0) scale(0.99);
}

.btn-login:disabled,
.btn-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none;
}

.btn-resend {
    width: 100%;
    padding: 0.6rem;
    background: var(--surface);
    color: var(--dark-text);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease);
    margin-top: 0.6rem;
}

.btn-resend:hover {
    background-color: var(--light-bg);
    border-color: var(--text-muted);
}

.alert {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 0.9rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1.1rem;
    font-size: 0.88rem;
    animation: slideDown 0.2s var(--ease);
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.alert-error {
    background-color: #fef2f2;
    color: var(--danger-color);
    border: 1px solid rgba(220, 38, 38, 0.2);
}

.alert-success {
    background-color: #ecfdf3;
    color: var(--success-color);
    border: 1px solid rgba(22, 163, 74, 0.2);
}

.alert-info {
    background-color: var(--primary-soft);
    color: var(--primary-hover);
    border: 1px solid rgba(37, 99, 235, 0.2);
}

.demo-credentials {
    background-color: var(--light-bg);
    padding: 0.8rem 0.9rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1.1rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.demo-credentials strong {
    color: var(--dark-text);
}

.demo-credentials .credentials-list {
    margin-top: 0.5rem;
}

.demo-credentials .credentials-list p {
    margin: 0.3rem 0;
    font-family: 'Courier New', monospace;
}

.dev-hint {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--primary-soft);
    border: 1px dashed var(--primary-color);
    border-radius: var(--radius-sm);
    padding: 0.75rem 0.9rem;
    margin-bottom: 1.1rem;
    font-size: 0.85rem;
    color: var(--dark-text);
}

.password-requirements {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 0.4rem;
}

.box a {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
}

.box a:hover {
    text-decoration: underline;
}

/* Testkonten-Seitenpanel: bewusst als eigenständiges "Dev-Tool"-Glaspanel gestaltet (immer
   dunkel/transluzent, unabhängig vom Light-/Dark-Mode-Stand der eigentlichen Anmeldekarte
   daneben) - macht auf den ersten Blick klar, dass das ein Testing-Werkzeug ist und nicht
   Teil der normalen Anmeldung. Siehe TEST-LOGIN FEATURE-Markierungen in login.php. */
.test-panel {
    position: relative;
    z-index: 1;
    width: 270px;
    max-width: 100%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: rgba(15, 20, 32, 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: calc(var(--radius) + 4px);
    padding: 1.1rem;
    max-height: 542px;
    box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.45);
    animation: slideUp 0.4s var(--ease) 0.12s both;
}

.test-panel-header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.9rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
}

.test-panel-badge {
    flex-shrink: 0;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #1a1200;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 0.22rem 0.4rem;
    border-radius: 6px;
}

.test-panel-header strong {
    display: block;
    color: #fff;
    font-size: 0.87rem;
}

.test-panel-header small {
    display: block;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.72rem;
    margin-top: 0.1rem;
}

.test-panel-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    overflow-y: auto;
    padding-right: 0.2rem;
}

.test-panel-list::-webkit-scrollbar {
    width: 6px;
}

.test-panel-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 999px;
}

.test-login-chip {
    width: 100%;
    font-size: 0.82rem;
    padding: 0.55rem 0.75rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: #f1f3f8;
    cursor: pointer;
    line-height: 1.3;
    text-align: left;
    transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease), transform 0.15s var(--ease);
}

.test-login-chip:hover {
    border-color: rgba(91, 155, 255, 0.5);
    background: rgba(91, 155, 255, 0.14);
    transform: translateX(2px);
}

.test-login-chip:active {
    transform: translateX(0);
}

.test-login-chip-role {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 760px) {
    .login-page {
        flex-direction: column;
        align-items: center;
    }

    .test-panel {
        width: 100%;
        max-width: 400px;
        max-height: 320px;
    }
}

@media (max-width: 480px) {
    .login-container,
    .box,
    .container {
        padding: 1.5rem;
    }

    .login-header h1,
    .header h1,
    .box h1 {
        font-size: 1.25rem;
    }
}