/* ============================================================
   Steve-TradingBot — Filament Login Branding (SEC-1c-1c-FU)
   Basiert auf Claude-Design-System-Handoff (recon-mh-design)
   Anwendungs-Scope: /admin/login + /admin/password-reset/*
   ============================================================ */

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

/* ---- Design-Tokens (aus tokens.css portiert) ---- */
:root {
    --c-primary-50:  #f0f9ff;
    --c-primary-500: #0ea5e9;
    --c-primary-600: #0284c7;
    --c-primary-700: #0369a1;
    --c-primary-900: #0c4a6e;

    --c-success-500: #10b981;
    --c-danger-500:  #f43f5e;
    --c-warning-500: #f59e0b;

    --c-gray-50:     #f8fafc;
    --c-gray-200:    #e2e8f0;
    --c-gray-400:    #94a3b8;
    --c-gray-500:    #64748b;
    --c-gray-700:    #334155;
    --c-gray-800:    #1e293b;
    --c-gray-900:    #0f172a;
    --c-gray-950:    #020617;

    --font-sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'Geist Mono', 'JetBrains Mono', 'SF Mono', Consolas, monospace;
}

/* ---- App-Hintergrund + Schrift ---- */
html, body, .fi-simple-page {
    font-family: var(--font-sans) !important;
    background:
        radial-gradient(1200px 600px at 20% -10%, rgba(14,165,233,.14), transparent 60%),
        radial-gradient(900px 500px at 90% 110%, rgba(16,185,129,.10), transparent 60%),
        linear-gradient(180deg, var(--c-gray-950) 0%, var(--c-gray-900) 100%) !important;
    color: var(--c-gray-200) !important;
    min-height: 100vh;
}

/* ---- TESTNET-Banner sticky-top ---- */
.steve-testnet-banner {
    position: relative;
    z-index: 100;
    margin: 0;
    padding: 8px 16px;
    background: linear-gradient(90deg, rgba(245,158,11,.20), rgba(245,158,11,.08));
    border-bottom: 1px solid rgba(245,158,11,.45);
    color: var(--c-warning-500);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-align: center;
    text-transform: uppercase;
}
.steve-testnet-banner-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    background: var(--c-warning-500);
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(245,158,11,.7);
    animation: steve-pulse 2.4s ease-in-out infinite;
    vertical-align: middle;
}
@keyframes steve-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .55; transform: scale(.85); }
}

/* ---- Login-Container ---- */
.fi-simple-page-content {
    max-width: 420px !important;
    margin: 6vh auto !important;
    padding: 32px !important;
    background: rgba(15, 23, 42, 0.78) !important;
    border: 1px solid rgba(148, 163, 184, 0.12) !important;
    border-radius: 14px !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,.05) inset,
        0 30px 60px -20px rgba(0,0,0,.6),
        0 0 0 1px rgba(14,165,233,.05);
    backdrop-filter: blur(12px);
}

/* ---- Brand-Logo (Filament rendert es als img/svg im Header) ---- */
.fi-logo,
.fi-simple-page-content img[alt*="logo" i],
.fi-simple-page-content svg.fi-logo {
    width: 56px !important;
    height: 56px !important;
    color: var(--c-primary-500) !important;
    filter: drop-shadow(0 4px 16px rgba(14,165,233,.35));
}

/* ---- Heading + Subheading ---- */
.fi-simple-header h1,
.fi-simple-header [class*="heading"] {
    font-family: var(--font-sans) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    letter-spacing: -.01em !important;
    color: var(--c-gray-50) !important;
    margin-top: 12px !important;
}

.fi-simple-header p,
.fi-simple-header [class*="subheading"] {
    color: var(--c-gray-400) !important;
    font-size: 13px !important;
    margin-top: 4px !important;
}

/* ---- Form-Inputs ---- */
.fi-input-wrp,
.fi-fo-text-input input,
input[type="email"],
input[type="password"],
input[type="text"] {
    background: rgba(2, 6, 23, 0.7) !important;
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
    border-radius: 8px !important;
    color: var(--c-gray-50) !important;
    font-family: var(--font-mono) !important;
    transition: border-color .15s, box-shadow .15s;
}
.fi-fo-text-input input:focus,
input[type="email"]:focus,
input[type="password"]:focus {
    border-color: var(--c-primary-500) !important;
    box-shadow: 0 0 0 3px rgba(14,165,233,.18) !important;
    outline: none !important;
}
.fi-fo-text-input input::placeholder {
    color: var(--c-gray-500) !important;
}

/* ---- Labels + Hilfstexte ---- */
label, .fi-fo-field-wrp-label {
    color: var(--c-gray-200) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: .01em;
}

/* ---- Submit-Button ---- */
.fi-btn.fi-color-primary,
button[type="submit"].fi-btn,
button[wire\:click*="authenticate"] {
    background: linear-gradient(180deg, var(--c-primary-500) 0%, var(--c-primary-600) 100%) !important;
    border: 1px solid var(--c-primary-700) !important;
    color: #fff !important;
    font-weight: 600 !important;
    letter-spacing: .02em !important;
    border-radius: 8px !important;
    box-shadow: 0 6px 18px -6px rgba(14,165,233,.55);
    transition: transform .08s, box-shadow .15s;
}
.fi-btn.fi-color-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -8px rgba(14,165,233,.7);
}

/* ---- Forgot-Password + Footer-Aktionen ---- */
.fi-ac-link-action a,
.fi-btn.fi-link a,
a[href*="password-reset"] {
    color: var(--c-primary-500) !important;
    font-weight: 500;
    text-decoration: none !important;
    transition: color .15s;
}
.fi-ac-link-action a:hover,
a[href*="password-reset"]:hover {
    color: var(--c-primary-50) !important;
    text-decoration: underline !important;
}

/* ---- Checkbox (Remember-me) ---- */
input[type="checkbox"] {
    accent-color: var(--c-primary-500) !important;
}

/* ---- Steve-Footer ---- */
.steve-login-footer {
    position: fixed;
    bottom: 12px;
    left: 0;
    right: 0;
    text-align: center;
    color: var(--c-gray-500);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    pointer-events: none;
}
.steve-login-footer a {
    color: var(--c-gray-400);
    pointer-events: auto;
}

/* ============================================================
   MOBILE — Iter-2 Mobile-Treatment (≤ 640px)
   - Touch-Targets ≥ 44px (A11y aus Design-Handoff §7)
   - Container randlos auf Mobile, weniger Padding
   - Brand-Logo runter auf 40px (Filament setzt inline 3rem = 48px)
   - Eingabefelder & Submit auf Touch-Höhe
   ============================================================ */
@media (max-width: 640px) {
    .fi-simple-page-content {
        max-width: 100% !important;
        margin: 0 !important;
        padding: 28px 20px 24px !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        min-height: 100vh;
        box-shadow: none !important;
        backdrop-filter: none;
        background: rgba(15, 23, 42, 0.92) !important;
    }

    /* Brand-Logo: Filament rendert inline style="height:3rem"; mit !important runter */
    .fi-logo,
    img.fi-logo,
    .fi-simple-header img,
    .fi-simple-page-content img[alt*="logo" i],
    .fi-simple-page-content svg.fi-logo {
        width: 40px !important;
        height: 40px !important;
        margin: 0 auto !important;
        display: block !important;
    }
    .fi-simple-header {
        text-align: center !important;
        margin-bottom: 20px !important;
    }
    .fi-simple-header h1,
    .fi-simple-header-heading,
    .fi-simple-header [class*="heading"] {
        font-size: 19px !important;
        margin-top: 10px !important;
    }
    .fi-simple-header-subheading,
    .fi-simple-header p,
    .fi-simple-header [class*="subheading"] {
        font-size: 12.5px !important;
        line-height: 1.4 !important;
    }

    /* TESTNET-Banner ueber Login-Card kompakter */
    .steve-testnet-banner {
        font-size: 10.5px !important;
        padding: 6px 12px !important;
        letter-spacing: .03em !important;
    }

    /* Inputs Touch-Target ≥ 44px, volle Breite, kein horizontaler Overflow */
    .fi-input-wrp,
    .fi-fo-text-input,
    .fi-fo-field-content-col {
        width: 100% !important;
        max-width: 100% !important;
    }
    .fi-fo-text-input input,
    input[type="email"],
    input[type="password"],
    input[type="text"] {
        height: 46px !important;
        font-size: 16px !important; /* verhindert iOS-Zoom-on-focus */
        padding: 10px 14px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Password-Reveal Icon-Button Touch-Target */
    .fi-icon-btn,
    .fi-ac-icon-btn-action {
        min-width: 44px !important;
        min-height: 44px !important;
    }

    /* Label kompakter */
    label,
    .fi-fo-field-wrp-label,
    .fi-fo-field-label {
        font-size: 13px !important;
        margin-bottom: 4px !important;
    }

    /* Submit-Button Touch-Target + volle Breite */
    .fi-btn.fi-color-primary,
    button[type="submit"].fi-btn,
    button[wire\:click*="authenticate"] {
        width: 100% !important;
        min-height: 48px !important;
        font-size: 15px !important;
        border-radius: 10px !important;
    }
    .fi-ac, .fi-sc-actions {
        width: 100% !important;
    }

    /* "Passwort vergessen"-Link + Remember-Zeile kompakter */
    .fi-ac-link-action,
    .fi-ac-link-action a,
    a[href*="password-reset"] {
        font-size: 13px !important;
    }

    /* Field-Spacing enger */
    .fi-fo-component-ctn,
    .fi-fo-field-wrp {
        margin-bottom: 8px !important;
    }

    /* Footer raus aus Fixed (keine Ueberlappung beim Tippen mit Soft-Keyboard) */
    .steve-login-footer {
        position: static !important;
        margin-top: 24px;
        padding-bottom: 16px;
    }
}

/* Extra-kleine Geraete (iPhone SE, < 380px) — noch ein bisschen runter */
@media (max-width: 380px) {
    .fi-simple-page-content {
        padding: 24px 16px 20px !important;
    }
    .fi-simple-header h1,
    .fi-simple-header-heading {
        font-size: 18px !important;
    }
    .fi-logo,
    img.fi-logo,
    .fi-simple-header img {
        width: 36px !important;
        height: 36px !important;
    }
}