/*
 * IMadani auth UI - token & komponen (audit UX v2, 28 Okt 2026).
 * Dipakai halaman auth AdminLTE (login, lupa/reset kata sandi) dan halaman error.
 * Palet madani-tech: lihat docs audit §3. Jangan pakai ungu/navy di sini.
 */
:root {
    --im-g900: #14402F;
    --im-g800: #1A4333;
    --im-g700: #1F6B4F;
    --im-g600: #238765;
    --im-teal: #3BB58F;
    --im-mint: #E8F4EE;
    --im-mint2: #C9DFD5;
    --im-orange: #F2994A;
    --im-amber: #FBAB24;
    --im-cta-ink: #3A2306;
    --im-cream: #FBF8F2;
    --im-card: #FFFFFF;
    --im-ink: #1F2A24;
    --im-muted: #5B6B63;
    --im-line: #D9E3DD;
    --im-err: #C2410C;
    --im-errbg: #FFF4ED;
    --im-ok: #15803D;
    --im-focus: 0 0 0 3px #fff, 0 0 0 5px #238765;
    --im-shadow: 0 10px 40px rgba(20, 64, 47, .08);
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"], :root[data-theme="dark"] {
        --im-cream: #0F1A15;
        --im-card: #16241D;
        --im-ink: #E6EFEA;
        --im-muted: #A9BBB1;
        --im-line: #2A3B33;
        --im-g800: #E6EFEA;
        --im-g900: #E6EFEA;
        --im-g600: #3BB58F;
    }
}

/* LG-06: focus ring global yang terlihat */
.im-auth a:focus-visible,
.im-auth button:focus-visible,
.im-auth input:focus-visible,
.im-auth select:focus-visible,
.im-auth textarea:focus-visible,
.im-auth [tabindex]:focus-visible {
    outline: none !important;
    box-shadow: var(--im-focus) !important;
}

body.im-auth {
    background: var(--im-cream) !important;
    color: var(--im-ink);
    font-family: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    overflow-x: hidden;
}

.im-auth .login-box, .im-auth .register-box {
    width: 100%;
    max-width: 460px;
    padding: 0 16px;
}

.im-auth .login-logo a, .im-auth .im-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 22px;
    color: var(--im-g800) !important;
    text-decoration: none;
}

.im-auth .card {
    background: var(--im-card);
    border: 0;
    border-radius: 20px;
    box-shadow: var(--im-shadow);
}
.im-auth .card-header { border-bottom: 0; background: transparent; padding: 32px 32px 0; }
.im-auth .card-body { padding: 24px 32px 32px; }
.im-auth .card-footer { background: transparent; border-top: 1px solid var(--im-line); padding: 16px 32px; text-align: center; font-size: 14px; color: var(--im-muted); }

.im-auth h1.im-title, .im-auth .card-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--im-g800);
    margin: 0 0 6px;
    line-height: 1.25;
}
.im-auth .im-sub { color: var(--im-muted); font-size: 15px; margin: 0 0 20px; }

/* LG-02: label terlihat */
.im-auth .im-label {
    display: block;
    font-weight: 600;
    font-size: 14px;
    color: var(--im-g900);
    margin: 16px 0 6px;
}
.im-auth .im-label .req { color: var(--im-err); }

.im-auth .im-field { position: relative; }
.im-auth .im-input {
    width: 100%;
    height: 48px;
    border: 1.5px solid var(--im-line);
    border-radius: 12px;
    padding: 0 14px;
    font-size: 16px; /* MB-04: cegah auto-zoom iOS */
    background: var(--im-card);
    color: var(--im-ink);
    transition: border-color .15s ease-out, background-color .15s ease-out;
}
.im-auth .im-input:focus { border-color: var(--im-g600); outline: none; }
.im-auth .im-input.has-toggle { padding-right: 116px; }
.im-auth .im-input.is-invalid {
    border-color: var(--im-err);
    background: var(--im-errbg);
    background-image: none;
}
.im-auth .im-msg {
    display: flex;
    gap: 6px;
    align-items: flex-start;
    font-size: 13px;
    color: var(--im-err);
    margin-top: 6px;
}
.im-auth .im-msg[hidden] { display: none; }
.im-auth .im-hint { font-size: 13px; color: var(--im-muted); margin-top: 6px; }

/* LG-07: tombol tampilkan kata sandi */
.im-auth .im-toggle {
    position: absolute;
    right: 2px;
    top: 2px;
    height: 44px;
    min-width: 44px;
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: var(--im-g600);
    font-weight: 600;
    font-size: 14px;
    border-radius: 10px;
    cursor: pointer;
}

.im-auth .im-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 16px 0 20px;
    flex-wrap: wrap;
}
.im-auth .im-check { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 0; min-height: 44px; }
.im-auth .im-check input { width: 18px; height: 18px; accent-color: var(--im-g600); }

.im-auth a, .im-auth .im-link { color: var(--im-g600); font-weight: 600; }
.im-auth a:hover, .im-auth .im-link:hover { color: var(--im-g700); text-decoration: underline; }

/* Tombol pill */
.im-auth .im-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    height: 50px;
    width: 100%;
    border-radius: 999px;
    border: 0;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    text-decoration: none !important;
    transition: filter .15s ease-out, transform .15s ease-out;
}
.im-auth .im-btn-cta { background: linear-gradient(90deg, var(--im-orange), var(--im-amber)); color: var(--im-cta-ink) !important; }
.im-auth .im-btn-cta:hover { filter: brightness(1.04); }
.im-auth .im-btn-sec { background: var(--im-card); border: 1.5px solid var(--im-line); color: var(--im-g900) !important; }
.im-auth .im-btn[disabled], .im-auth .im-btn[aria-busy="true"] { opacity: .85; cursor: progress; }
.im-auth .im-spin {
    width: 18px; height: 18px;
    border: 3px solid rgba(58, 35, 6, .3);
    border-top-color: var(--im-cta-ink);
    border-radius: 50%;
    animation: im-spin .7s linear infinite;
}
.im-auth .im-spin[hidden] { display: none; }
@keyframes im-spin { to { transform: rotate(360deg); } }

/* Alert */
.im-auth .im-alert {
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 14px;
    display: flex;
    gap: 10px;
    margin-bottom: 8px;
}
.im-auth .im-alert-error { background: var(--im-errbg); color: #7C2D12; border: 1px solid #FDBA8C; }
.im-auth .im-alert-ok { background: var(--im-mint); color: var(--im-g900); border: 1px solid var(--im-mint2); }
.im-auth .im-alert a { color: inherit; text-decoration: underline; }

.im-auth .im-back { display: inline-block; font-size: 14px; margin-bottom: 12px; }
.im-auth .im-bottom { text-align: center; font-size: 14px; color: var(--im-muted); margin-top: 20px; }
.im-auth .im-footer { text-align: center; font-size: 13px; color: var(--im-muted); margin: 24px 0; }

/* 404 / error */
.im-auth .im-err-code { font-size: 120px; line-height: 1; font-weight: 800; color: var(--im-mint2); margin: 0 0 8px; }

@media (max-width: 640px) {
    .im-auth .card-header { padding: 24px 20px 0; }
    .im-auth .card-body { padding: 20px; }
    .im-auth .card-footer { padding: 14px 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .im-auth *, .im-auth *::before, .im-auth *::after { transition: none !important; animation: none !important; }
}