/*
 * ============================================================
 * auth.css — SPK Exercise
 * ============================================================
 * Berisi seluruh style untuk halaman autentikasi:
 *   - Login (app/Views/auth/login.php)
 *   - Register (app/Views/auth/register.php)
 *
 * Dikelola oleh layout: app/Views/layouts/auth.php
 *
 * Catatan desain:
 *   - Halaman auth TIDAK menggunakan sidebar Sneat.
 *   - CSS token (:root) didefinisikan di sini karena layout auth
 *     tidak memuat spk.css (file auth standalone).
 *   - Gaya mengikuti desain sistem SPK: teal primary, dark card header.
 * ============================================================
 */


/* ──────────────────────────────────────────────────────────────
 * DESIGN TOKENS
 * Salinan token utama — auth layout tidak load spk.css penuh.
 * ────────────────────────────────────────────────────────────── */
:root {
    --c-primary:        #0d9488;
    --c-primary-dark:   #0f766e;
    --c-primary-xlight: #ccfbf1;
    --c-danger:         #dc2626;
    --c-border:         #e2e8f0;
    --c-border-strong:  #cbd5e1;
    --c-text:           #0f1923;
    --c-text-2:         #1e293b;
    --c-text-muted:     #475569;
    --c-text-faint:     #64748b;
    --c-surface-2:      #f8fafc;
    --r-md:             12px;
    --r-pill:           100px;
}


/* ──────────────────────────────────────────────────────────────
 * RESET & BASE
 * ────────────────────────────────────────────────────────────── */
*, *::before, *::after {
    font-family: 'DM Sans', -apple-system, sans-serif !important;
    box-sizing: border-box;
}

body {
    background: #f1f5f9 !important;
    min-height: 100vh;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow-x: hidden;
}

/* Dekorasi lingkaran gradasi di background */
body::before {
    content: '';
    position: fixed; top: -150px; left: -150px;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(13,148,136,.12) 0%, transparent 65%);
    border-radius: 50%; pointer-events: none;
}
body::after {
    content: '';
    position: fixed; bottom: -120px; right: -120px;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(101,163,13,.09) 0%, transparent 65%);
    border-radius: 50%; pointer-events: none;
}


/* ──────────────────────────────────────────────────────────────
 * LAYOUT WRAPPER
 * ────────────────────────────────────────────────────────────── */
.auth-wrapper {
    width: 100%; min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 2rem 1rem; position: relative; z-index: 1;
}
.auth-box { width: 100%; max-width: 440px; }


/* ──────────────────────────────────────────────────────────────
 * KARTU AUTENTIKASI
 * ────────────────────────────────────────────────────────────── */
.auth-card {
    background: #fff !important;
    border: 1.5px solid var(--c-border) !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 40px rgba(0,0,0,.1), 0 2px 12px rgba(13,148,136,.08) !important;
    overflow: hidden;
}

/* Header kartu — background gradasi gelap */
.auth-card-header {
    background: linear-gradient(135deg, #0a1f1c 0%, #0f3d37 55%, #0d9488 100%);
    padding: 1.75rem 2rem 1.5rem;
    position: relative; overflow: hidden;
}
.auth-card-header::before {
    content: ''; position: absolute; top: -50px; right: -50px;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(45,212,191,.2) 0%, transparent 70%);
    border-radius: 50%;
}
.auth-card-body { padding: 1.75rem 2rem 2rem; }


/* ──────────────────────────────────────────────────────────────
 * BRAND / LOGO DI HEADER
 * ────────────────────────────────────────────────────────────── */
.auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: .9rem; position: relative; z-index: 1; }

.auth-brand-logo {
    width: 36px; height: 36px;
    background: linear-gradient(135deg, #14b8a6, #84cc16);
    border-radius: 10px; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 3px 10px rgba(20,184,166,.4); flex-shrink: 0;
}
.auth-brand-logo i { color: #fff !important; font-size: 1.1rem !important; }

.auth-brand-name { font-size: 1rem; font-weight: 800; color: #fff !important; letter-spacing: -.02em; }
.auth-brand-name span { color: #2dd4bf; }

.auth-title { font-size: 1.3rem; font-weight: 800; color: #fff !important; margin: 0 0 .25rem; letter-spacing: -.02em; position: relative; z-index: 1; }
.auth-sub   { font-size: .8rem; color: rgba(226,250,245,.6) !important; margin: 0; position: relative; z-index: 1; font-weight: 600; }


/* ──────────────────────────────────────────────────────────────
 * FORM ELEMENTS
 * ────────────────────────────────────────────────────────────── */
.auth-card-body .form-label {
    font-size: .8rem !important; font-weight: 700 !important;
    color: var(--c-text-2) !important; margin-bottom: 5px !important;
}
.auth-card-body .form-control {
    border: 1.5px solid var(--c-border-strong) !important;
    border-radius: var(--r-md) !important;
    font-size: .875rem !important; font-weight: 500 !important;
    color: var(--c-text) !important; min-height: 42px !important;
    padding: .55rem .9rem !important;
    transition: border-color .16s, box-shadow .16s !important;
    background: #fff !important;
}
.auth-card-body .form-control:focus {
    border-color: var(--c-primary) !important;
    box-shadow: 0 0 0 3px rgba(13,148,136,.12) !important;
    outline: none !important;
}
.auth-card-body .form-control.is-invalid  { border-color: var(--c-danger) !important; }
.auth-card-body .form-control::placeholder { color: var(--c-text-faint) !important; font-weight: 400 !important; }
.auth-card-body .invalid-feedback          { font-size: .73rem !important; color: var(--c-danger) !important; font-weight: 700 !important; }


/* ──────────────────────────────────────────────────────────────
 * INPUT DENGAN ICON PREFIX (.auth-iw)
 * Digunakan untuk field email, password dengan ikon di kiri.
 * ────────────────────────────────────────────────────────────── */
.auth-iw { position: relative; }

/* Ikon di dalam input */
.auth-iw .ai {
    position: absolute; left: .85rem; top: 50%; transform: translateY(-50%);
    color: var(--c-text-muted); font-size: .95rem;
    z-index: 3; pointer-events: none;
}
.auth-iw .form-control { padding-left: 2.45rem !important; }

/* Tombol show/hide password */
.auth-iw .pw-eye {
    position: absolute; right: .85rem; top: 50%; transform: translateY(-50%);
    color: var(--c-text-muted); cursor: pointer; z-index: 3;
    font-size: 1rem; background: none; border: none; padding: 0;
    line-height: 1; transition: color .14s;
}
.auth-iw .pw-eye:hover { color: var(--c-primary); }
.auth-iw .form-control.has-eye { padding-right: 2.5rem !important; }


/* ──────────────────────────────────────────────────────────────
 * INDIKATOR KEKUATAN PASSWORD
 * Bar hijau/merah yang muncul saat mengetik password baru.
 * ────────────────────────────────────────────────────────────── */
.pw-str     { height: 4px; border-radius: 4px; background: var(--c-border); margin-top: 5px; overflow: hidden; }
.pw-str-bar { height: 100%; border-radius: 4px; transition: width .3s, background .3s; width: 0; }


/* ──────────────────────────────────────────────────────────────
 * TOMBOL SUBMIT
 * ────────────────────────────────────────────────────────────── */
.btn-submit {
    width: 100%; padding: .72rem;
    border-radius: var(--r-md) !important;
    font-weight: 800 !important; font-size: .9rem;
    background: var(--c-primary) !important;
    border: none !important; color: #fff !important;
    transition: all .18s ease !important;
}
.btn-submit:hover {
    background: var(--c-primary-dark) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 14px rgba(13,148,136,.35) !important;
}


/* ──────────────────────────────────────────────────────────────
 * ALERT / NOTIFIKASI (flash message di form login/register)
 * ────────────────────────────────────────────────────────────── */
.auth-alert {
    border-radius: var(--r-md); padding: 10px 14px;
    font-size: .82rem; font-weight: 600;
    display: flex; align-items: flex-start; gap: 8px;
    margin-bottom: 1rem;
}
.auth-alert i { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
.alert-ok  { background: #f0fdf4; border: 1.5px solid #bbf7d0; color: #14532d !important; }
.alert-err { background: #fff1f2; border: 1.5px solid #fecdd3; color: #7f1d1d !important; }


/* ──────────────────────────────────────────────────────────────
 * LINK FOOTER KARTU ("Belum punya akun? Daftar")
 * ────────────────────────────────────────────────────────────── */
.auth-foot { text-align: center; margin-top: 1.2rem; font-size: .82rem; color: var(--c-text-muted) !important; font-weight: 600; }
.auth-foot a { color: var(--c-primary) !important; font-weight: 700; text-decoration: none; }
.auth-foot a:hover { color: var(--c-primary-dark) !important; text-decoration: underline; }


/* ──────────────────────────────────────────────────────────────
 * TEKS PERSYARATAN (di bawah field password)
 * ────────────────────────────────────────────────────────────── */
.req { font-size: .7rem; color: var(--c-text-muted) !important; font-weight: 600; margin-top: 3px; }


/* ──────────────────────────────────────────────────────────────
 * RESPONSIVE — layar kecil (mobile)
 * ────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .auth-card-header { padding: 1.4rem 1.4rem 1.2rem; }
    .auth-card-body   { padding: 1.4rem; }
    .auth-title       { font-size: 1.1rem; }
}