/* ============================================================
   obz-dark-auth.css
   Dark-theme override for NHCC standalone auth + portal pages.
   Added 2026-06-22 to match the obizworks.com / NHCC homepage.

   Strategy: link this AFTER each page's inline <style> block so
   the cascade lets these rules win without touching the originals.
   Original light-theme files are unchanged on disk.

   Targets: login, register, forgot_password, reset_password,
   change_password, verify_device (Phase A). Phase B/C reuse it.
   ============================================================ */

:root {
    --accent:       #f97316;
    --accent-dark:  #ea580c;
    --dark:         #e2e8f0;            /* was used as TEXT color → flip to light */
    --slate:        #cbd5e1;            /* was secondary text → lighter */
    --muted:        #94a3b8;            /* muted on dark */
    --border:       rgba(255,255,255,.08);
    --bg:           #0a0a0a;
    --white:        #141417;            /* was used as CARD bg → dark card */
    --danger:       #ef4444;
    --success:      #22c55e;
}

/* === Page chrome === */
body { background: #0a0a0a !important; color: #e2e8f0 !important; }

/* === Wrapper cards (login grid, register/forgot/reset/verify wraps) === */
.login-grid,
.register-wrap,
.verify-wrap,
.reset-wrap,
.forgot-wrap,
.change-wrap,
.wrap,
.auth-card {
    background: #141417 !important;
    box-shadow: 0 20px 48px -12px rgba(0,0,0,.7) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
}

/* === Wordmark (brand text "NHCC × Obizworks" at top of forgot/reset/change) === */
.wordmark { color: #ffffff !important; }
.wordmark span { color: #f97316 !important; }

/* === Generic headings inside .wrap === */
.wrap h1,
.wrap h2 { color: #ffffff !important; }
.wrap p { color: #cbd5e1 !important; }
.wrap a { color: #f97316 !important; }
.wrap .subtle,
.wrap .lead-sub { color: #94a3b8 !important; }

/* === Back-link / divider helpers === */
.back-link { color: #94a3b8 !important; }
.back-link:hover { color: #f97316 !important; }
.divider { border-top-color: rgba(255,255,255,.08) !important; }

/* === Left brand panel (login.php two-column) === */
.brand-panel { background: #0a0a0a !important; border-right: 1px solid rgba(255,255,255,.06); }
.brand-panel::before { opacity: .35; }   /* fade the orange grid lines on dark */
.brand-logo .wordmark { color: #94a3b8 !important; }
.brand-content h2 { color: #ffffff !important; }
.brand-content p { color: #cbd5e1 !important; }
.pill { background: #141417 !important; border-color: rgba(255,255,255,.08) !important; }
.pill span { color: #e2e8f0 !important; }

/* === Right form panel === */
.form-panel { background: #141417 !important; }
.form-header h1,
.form-header h2,
.form-panel h1,
.form-panel h2 { color: #ffffff !important; }
.form-header p { color: #94a3b8 !important; }
.form-header p a { color: #f97316 !important; }

/* === Form fields === */
.field label { color: #cbd5e1 !important; }
.field input,
.field select,
.field textarea {
    background: #1a1a1f !important;
    color: #e2e8f0 !important;
    border-color: rgba(255,255,255,.12) !important;
}
.field input::placeholder,
.field textarea::placeholder { color: #64748b !important; }
.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: #f97316 !important;
    background: #1f1f25 !important;
}

/* Password toggle */
.pw-toggle { color: #94a3b8 !important; background: transparent !important; }
.pw-toggle:hover { color: #f97316 !important; }

/* Password strength bars */
.pw-bar { background: rgba(255,255,255,.08) !important; }

/* === Buttons === */
.btn-primary,
.btn-submit,
.btn-cta-primary {
    background: #f97316 !important;
    color: #ffffff !important;
    border: none !important;
}
.btn-primary:hover,
.btn-submit:hover { background: #ea580c !important; }

.btn-secondary,
.btn-otp,
.btn-ghost,
.btn-link {
    background: transparent !important;
    color: #e2e8f0 !important;
    border: 1.5px solid rgba(255,255,255,.15) !important;
}
.btn-secondary:hover,
.btn-otp:hover,
.btn-ghost:hover {
    border-color: #f97316 !important;
    color: #f97316 !important;
}

/* === Alerts === */
.alert-error {
    background: rgba(239,68,68,.10) !important;
    border-color: rgba(239,68,68,.35) !important;
    color: #fca5a5 !important;
}
.alert-error::before { background: #ef4444 !important; }
.alert-success {
    background: rgba(34,197,94,.10) !important;
    border-color: rgba(34,197,94,.35) !important;
    color: #86efac !important;
}
.alert-warning,
.device-notice,
.info-banner,
.info-notice {
    background: rgba(249,115,22,.08) !important;
    border-color: rgba(249,115,22,.3) !important;
    color: #fcd34d !important;
}

/* === Footer / form-footer / hint text === */
.form-footer,
.footer-text,
.page-footer,
.field-hint,
.hint { color: #94a3b8 !important; }

.form-footer a,
.footer-text a,
.page-footer a { color: #f97316 !important; }

/* === "or" divider === */
.divider-or { color: #64748b !important; }
.divider-or::before,
.divider-or::after { background: rgba(255,255,255,.08) !important; }

/* === OTP input boxes (verify_device) === */
.otp-box,
.otp-digit {
    background: #1a1a1f !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,.12) !important;
}
.otp-box:focus,
.otp-digit:focus { border-color: #f97316 !important; }

/* === Anti-Bootstrap leftovers (safety nets) === */
.bg-white { background: #141417 !important; color: #e2e8f0 !important; }
.text-muted { color: #94a3b8 !important; }
.text-dark { color: #e2e8f0 !important; }

/* === Mobile breakpoint preserves dark === */
@media (max-width: 640px) {
    body { background: #0a0a0a !important; }
    .form-panel,
    .auth-card { background: #141417 !important; }
}