/**
 * Dark Mode CSS for Authentication Pages
 * Applies to: login, register, verify_2fa, reset-password, verify_otp, forgot-password
 * Only active when [data-theme="dark"] is set
 * CHỈ SỬA MÀU SẮC - KHÔNG CAN THIỆP CSS KHÁC
 */

/* ============================================
   Base Page Styles - Dark Mode
   ============================================ */
[data-theme="dark"] .user-form-part,
[data-theme="dark"] .auth-page-wrapper,
[data-theme="dark"] section.inner-section.profile-part {
    background: #0f172a;
}

/* ============================================
   Auth Card Styles
   ============================================ */
[data-theme="dark"] .user-form-card {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .user-form-card:hover {
    border-color: #475569;
}

/* Card in Velzon/Admin style pages */
[data-theme="dark"] .auth-page-wrapper .card {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .auth-page-wrapper .card-body {
    background: transparent;
}

/* ============================================
   Form Title Styles
   ============================================ */
[data-theme="dark"] .user-form-title h2 {
    color: #f1f5f9;
}

[data-theme="dark"] .user-form-title p {
    color: #94a3b8;
}

/* Velzon style title */
[data-theme="dark"] .auth-page-wrapper .text-muted {
    color: #94a3b8 !important;
}

/* ============================================
   Form Input Styles
   ============================================ */
[data-theme="dark"] .user-form .form-control,
[data-theme="dark"] .auth-page-wrapper .form-control {
    background: #0f172a;
    border-color: #334155;
    color: #f1f5f9;
}

[data-theme="dark"] .user-form .form-control:focus,
[data-theme="dark"] .auth-page-wrapper .form-control:focus {
    background: #0f172a;
    border-color: #6b7280;
    box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.2);
    color: #f1f5f9;
}

[data-theme="dark"] .user-form .form-control::placeholder,
[data-theme="dark"] .auth-page-wrapper .form-control::placeholder {
    color: #6b7280;
}

/* Autofill styles for dark mode */
[data-theme="dark"] .user-form .form-control:-webkit-autofill,
[data-theme="dark"] .user-form .form-control:-webkit-autofill:hover,
[data-theme="dark"] .user-form .form-control:-webkit-autofill:focus,
[data-theme="dark"] .auth-page-wrapper .form-control:-webkit-autofill,
[data-theme="dark"] .auth-page-wrapper .form-control:-webkit-autofill:hover,
[data-theme="dark"] .auth-page-wrapper .form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: #f1f5f9;
    -webkit-box-shadow: 0 0 0px 1000px #0f172a inset;
}

/* Form labels */
[data-theme="dark"] .user-form label,
[data-theme="dark"] .auth-page-wrapper .form-label {
    color: #d1d5db;
}

/* ============================================
   Button Styles - CHỈ SỬA MÀU
   ============================================ */
[data-theme="dark"] .user-form .form-button button:disabled {
    background: #374151;
    color: #6b7280;
}

/* ============================================
   Links Styles
   ============================================ */
[data-theme="dark"] .user-form .form-button p {
    color: #94a3b8;
}

/* User Form Remind Box */
[data-theme="dark"] .user-form-remind {
    background: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .user-form-remind p {
    color: #94a3b8;
}

[data-theme="dark"] .user-form .form-button p a,
[data-theme="dark"] .user-form-remind p a,
[data-theme="dark"] .user-form a {
    color: var(--primary);
}

[data-theme="dark"] .user-form .form-button p a:hover,
[data-theme="dark"] .user-form-remind p a:hover,
[data-theme="dark"] .user-form a:hover {
    color: var(--primary1);
}

/* Velzon links */
[data-theme="dark"] .auth-page-wrapper a {
    color: var(--primary);
}

[data-theme="dark"] .auth-page-wrapper a:hover {
    color: var(--primary1);
}

/* ============================================
   Footer Styles
   ============================================ */
[data-theme="dark"] .user-form-footer p {
    color: #6b7280;
}

[data-theme="dark"] .user-form-footer a {
    color: #94a3b8;
}

/* ============================================
   Social Login Styles
   ============================================ */
[data-theme="dark"] .social-login-divider::before,
[data-theme="dark"] .social-login-divider::after {
    background: #334155;
}

[data-theme="dark"] .social-login-divider span {
    color: #6b7280;
}

[data-theme="dark"] .btn-google-signin {
    background: #0f172a;
    border-color: #334155;
    color: #d1d5db;
}

[data-theme="dark"] .btn-google-signin:hover {
    background: #374151;
    border-color: #4b5563;
    color: #f1f5f9;
}

/* ============================================
   Password Strength Indicator
   ============================================ */
[data-theme="dark"] #password-strength-status.weak {
    background: rgba(248, 113, 113, 0.15);
    border-color: rgba(248, 113, 113, 0.3);
    color: #f87171;
}

[data-theme="dark"] #password-strength-status.medium {
    background: rgba(251, 191, 36, 0.15);
    border-color: rgba(251, 191, 36, 0.3);
    color: #fbbf24;
}

[data-theme="dark"] #password-strength-status.strong {
    background: rgba(52, 211, 153, 0.15);
    border-color: rgba(52, 211, 153, 0.3);
    color: #34d399;
}

/* ============================================
   Terms & Policy Checkbox
   ============================================ */
[data-theme="dark"] .agree-terms-label {
    color: #94a3b8;
}

[data-theme="dark"] .terms-link {
    color: var(--primary);
}

/* ============================================
   Policy Modal Dark Mode
   ============================================ */
[data-theme="dark"] .policy-modal .policy-modal-dialog {
    background: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .policy-modal .policy-modal-header {
    border-bottom-color: #334155;
}

[data-theme="dark"] .policy-modal .policy-modal-header h5 {
    color: #f1f5f9;
}

[data-theme="dark"] .policy-modal .policy-modal-close {
    color: #94a3b8;
}

[data-theme="dark"] .policy-modal .policy-content-scroll {
    color: #94a3b8;
}

[data-theme="dark"] .policy-modal .policy-content-scroll h1,
[data-theme="dark"] .policy-modal .policy-content-scroll h2,
[data-theme="dark"] .policy-modal .policy-content-scroll h3,
[data-theme="dark"] .policy-modal .policy-content-scroll h4 {
    color: #f1f5f9;
}

[data-theme="dark"] .policy-modal .policy-modal-footer {
    border-top-color: #334155;
}

[data-theme="dark"] .policy-modal .btn-secondary {
    background: #0f172a;
    border-color: #334155;
    color: #94a3b8;
}

[data-theme="dark"] .policy-modal .btn-secondary:hover {
    background: #374151;
    border-color: #4b5563;
}

[data-theme="dark"] .policy-modal .btn-primary:disabled {
    background: #374151;
    color: #6b7280;
}

/* ============================================
   Alert Styles
   ============================================ */
[data-theme="dark"] .auth-page-wrapper .alert-info {
    background: rgba(96, 165, 250, 0.15);
    border-color: rgba(96, 165, 250, 0.3);
    color: #60a5fa;
}

[data-theme="dark"] .auth-page-wrapper .alert-warning {
    background: rgba(251, 191, 36, 0.15);
    border-color: rgba(251, 191, 36, 0.3);
    color: #fbbf24;
}

[data-theme="dark"] .auth-page-wrapper .alert-danger {
    background: rgba(248, 113, 113, 0.15);
    border-color: rgba(248, 113, 113, 0.3);
    color: #f87171;
}

[data-theme="dark"] .auth-page-wrapper .alert-success {
    background: rgba(52, 211, 153, 0.15);
    border-color: rgba(52, 211, 153, 0.3);
    color: #34d399;
}

/* ============================================
   2FA & OTP Page Specific Styles
   ============================================ */
[data-theme="dark"] .auth-page-wrapper .auth-one-bg {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

[data-theme="dark"] .auth-page-wrapper .auth-one-bg .bg-overlay {
    background: transparent;
}

[data-theme="dark"] .auth-page-wrapper .auth-one-bg .shape svg path {
    fill: #1e293b;
}

[data-theme="dark"] .auth-page-wrapper .text-white-50 {
    color: #94a3b8 !important;
}

/* ============================================
   SweetAlert2 Dark Mode Override
   ============================================ */
[data-theme="dark"] .swal2-popup {
    background: #1e293b !important;
    border-color: #334155 !important;
}

[data-theme="dark"] .swal2-title {
    color: #f1f5f9 !important;
}

[data-theme="dark"] .swal2-html-container,
[data-theme="dark"] .swal2-content {
    color: #94a3b8 !important;
}

[data-theme="dark"] .swal2-cancel {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #94a3b8 !important;
}

/* ============================================
   Scrollbar Styling
   ============================================ */
[data-theme="dark"] .policy-content-scroll::-webkit-scrollbar-track {
    background: #0f172a;
}

[data-theme="dark"] .policy-content-scroll::-webkit-scrollbar-thumb {
    background: #334155;
}

[data-theme="dark"] .policy-content-scroll::-webkit-scrollbar-thumb:hover {
    background: #4b5563;
}
/* Gmail verification controls */
.registration-otp { text-align: left; }
.registration-otp > button { min-height: 44px; padding: 10px 18px; margin-bottom: 8px; border: 1px solid #2563eb; border-radius: 8px; color: #1d4ed8; background: #eff6ff; font-weight: 600; }
.registration-otp > button:disabled { cursor: wait; opacity: .7; }
[data-theme="dark"] .registration-otp > button { color: #bfdbfe; background: #172554; border-color: #60a5fa; }
.registration-otp label { display: block; margin: 12px 0 8px; font-weight: 600; }
.registration-otp #register-otp { font-size: 20px; letter-spacing: 5px; }
.registration-otp p { margin: 4px 0; overflow-wrap: anywhere; }
.registration-otp small { display: block; margin-top: 6px; }
/* Shared sign-in and registration layout, scoped to these two pages. */
body.shop-app .auth-page { padding: 30px 0 40px !important; }
body.shop-app .auth-page .auth-column { width: 100%; max-width: 560px; flex: 0 1 560px; }
body.shop-app .auth-page .user-form-card { padding: 30px 32px; border-radius: 16px; margin: 0; box-shadow: 0 8px 28px #17233b08; }
body.shop-app .auth-page .user-form-title { text-align: left; margin-bottom: 26px; }
body.shop-app .auth-page .user-form-title h2 { font-size: 25px !important; margin: 0 0 6px; line-height: 1.3; font-weight: 700; }
body.shop-app .auth-page .user-form-title p { margin: 0; font-size: 15px !important; }
.auth-heading-icon { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid #dbe6fa; background: #eff5ff; color: #2563eb; border-radius: 12px; margin-bottom: 16px; }
body.shop-app .auth-page .user-form .form-group { margin-bottom: 18px; }
body.shop-app .auth-page .user-form label { color: #334155; font-size: 15px !important; font-weight: 600; margin-bottom: 7px; }
body.shop-app .auth-page .user-form .form-control { height: 46px; min-height: 46px; padding: 10px 13px; font-size: 16px !important; box-shadow: none; }
body.shop-app .auth-page .user-form .form-control:focus { border-color: #2563eb; box-shadow: 0 0 0 3px #2563eb12; }
body.shop-app .auth-page .user-form small { display: block; color: #64748b; font-size: 13px !important; margin: 6px 0 0; line-height: 1.5; }
.auth-password-field { position: relative; }
body.shop-app .auth-page .auth-password-field .form-control { padding-right: 48px; }
.auth-password-toggle { position: absolute; right: 2px; top: 2px; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; border-radius: 6px; color: #64748b; }
.auth-password-toggle:hover, .auth-password-toggle:focus-visible { color: #2563eb; background: #eff5ff; }
body.shop-app .auth-page #password-strength-status:empty { margin: 0; }
body.shop-app .auth-page #captcha-container { margin: 0 0 18px; text-align: left; }
body.shop-app .auth-page #captcha-container > div { max-width: none !important; justify-content: flex-start !important; }
body.shop-app .auth-page #builtin-captcha-input { min-width: 0; width: 100%; font-size: 14px !important; letter-spacing: 1px !important; }
body.shop-app .auth-page #builtin-captcha-img { width: 125px !important; object-fit: contain; }
body.shop-app .auth-page .agree-terms-row { align-items: flex-start; gap: 10px; }
body.shop-app .auth-page .agree-terms-row input { flex: none; margin-top: 3px; }
body.shop-app .auth-page .agree-terms-row label { margin: 0; font-weight: 400; }
body.shop-app .auth-page .registration-otp { padding: 16px; background: #f5f8ff; border: 1px solid #dce7fa; border-radius: 10px; margin: 4px 0 22px; }
.auth-verify-title { display: flex; align-items: center; gap: 9px; color: #234a85; margin-bottom: 12px; }
.auth-verify-title strong { font-weight: 600; }
.auth-otp-row { display: grid; grid-template-columns: minmax(100px, 1fr) auto; gap: 10px; }
body.shop-app .auth-page .registration-otp #register-otp { font-size: 19px !important; letter-spacing: 4px; background: #fff; }
body.shop-app .auth-page #send-registration-otp { min-height: 46px; padding: 9px 12px; white-space: nowrap; background: #fff; color: #1d4ed8; border: 1px solid #a9c3f8; border-radius: 8px; font-size: 14px !important; font-weight: 600; }
body.shop-app .auth-page #send-registration-otp:disabled { opacity: .65; }
body.shop-app .auth-page #registration-otp-status { margin: 8px 0 0; font-size: 14px !important; color: #315781; }
body.shop-app .auth-page #registration-otp-status:empty { display: none; }
body.shop-app .auth-page .form-button > button { height: 48px; line-height: 1.4; text-transform: none; font-size: 16px !important; font-weight: 600; }
body.shop-app .auth-page .form-button > p, body.shop-app .auth-page .auth-switch { margin: 20px 0 0; text-align: center; color: #64748b; }
body.shop-app .auth-page .auth-switch { padding-top: 20px; border-top: 1px solid #e5eaf2; }
body.shop-app .auth-page a { text-underline-offset: 3px; }
[data-theme="dark"] body.shop-app .auth-page .registration-otp { background: #17233b; border-color: #334765; }
[data-theme="dark"] body.shop-app .auth-page :is(.auth-verify-title, #registration-otp-status, .user-form label) { color: #dbeafe; }
[data-theme="dark"] body.shop-app .auth-page :is(small, .auth-switch) { color: #a5b5cc; }
[data-theme="dark"] body.shop-app .auth-page #register-otp { background: #0f172a; }
@media (max-width: 600px) {
    body.shop-app .auth-page { padding: 12px 0 26px !important; }
    body.shop-app .auth-page .container { padding-inline: 0; }
    body.shop-app .auth-page .row { margin-inline: 0; }
    body.shop-app .auth-page .auth-column { padding-inline: 0; }
    body.shop-app .auth-page .user-form-card { padding: 24px 20px; border-radius: 14px; }
    body.shop-app .auth-page .user-form-title h2 { font-size: 23px !important; }
}
@media (max-width: 400px) {
    body.shop-app .auth-page .user-form-card { padding: 22px 16px; }
    .auth-otp-row { grid-template-columns: minmax(0, 1fr); }
    body.shop-app .auth-page .registration-otp { padding: 13px; }
    body.shop-app .auth-page #captcha-container > div { flex-wrap: wrap; }
    body.shop-app .auth-page #builtin-captcha-input { flex: 1; min-width: 85px; }
}
.auth-password-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
body.shop-app .auth-page #password-strength-status { text-align: left; font-size: 13px !important; font-weight: 500; }
@media (max-width: 600px) { .auth-password-grid { grid-template-columns: minmax(0, 1fr); gap: 0; } }
@media (max-width: 400px) {
    body.shop-app .auth-page #captcha-container > div { display: grid !important; grid-template-columns: 108px minmax(0, 1fr) 36px; gap: 6px !important; }
    body.shop-app .auth-page #builtin-captcha-img { width: 108px !important; }
    body.shop-app .auth-page #builtin-captcha-input { width: 100%; min-width: 0; }
    body.shop-app .auth-page #captcha-container > div > button { width: 36px; padding: 0 !important; }
}
/* Center the login heading and its supporting text. */
body.shop-app .auth-login .user-form-title { text-align: center; }
body.shop-app .auth-login .auth-heading-icon { margin-inline: auto; }
/* Registration heading and readable policy dialog. */
body.shop-app .auth-register .user-form-title { text-align: center; }
body.shop-app .auth-register .auth-heading-icon { margin-inline: auto; }
body.shop-app #policy-modal { z-index: 1200; padding: 16px; }
body.shop-app #policy-modal.show { display: flex; align-items: center; justify-content: center; }
body.shop-app #policy-modal .policy-modal-dialog { width: 100%; max-width: 680px; margin: 0; border-radius: 14px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: hidden; }
body.shop-app #policy-modal .policy-modal-header { padding: 16px 20px; flex: none; gap: 10px; }
body.shop-app #policy-modal .policy-modal-header h5 { font-size: 20px !important; line-height: 1.4; }
body.shop-app #policy-modal .policy-modal-close { width: 40px; height: 40px; flex: none; border-radius: 8px; }
body.shop-app #policy-modal .policy-modal-body { padding: 0 20px; min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain; }
body.shop-app #policy-modal .policy-content-scroll { max-height: none !important; overflow: visible; padding: 18px 0; }
body.shop-app #policy-modal .registration-policy-copy section { margin: 20px 0; }
body.shop-app #policy-modal .registration-policy-copy h6 { font-size: 16px !important; margin-bottom: 7px; color: #17233b; }
body.shop-app #policy-modal .registration-policy-copy p { margin: 0 0 10px; color: #475569; line-height: 1.7; }
body.shop-app #policy-modal .policy-modal-footer { padding: 14px 20px; flex: none; flex-wrap: wrap; }
body.shop-app #policy-modal .policy-modal-footer button { min-height: 44px; border-radius: 8px; }
[data-theme="dark"] body.shop-app #policy-modal .policy-modal-dialog { background: #1e293b; color: #f1f5f9; }
[data-theme="dark"] body.shop-app #policy-modal :is(.policy-modal-header, .policy-modal-footer) { border-color: #334155; }
[data-theme="dark"] body.shop-app #policy-modal :is(.registration-policy-copy h6, .policy-modal-close) { color: #f1f5f9; }
[data-theme="dark"] body.shop-app #policy-modal .registration-policy-copy p { color: #cbd5e1; }
@media (max-width: 400px) {
    body.shop-app #policy-modal { padding: 10px; }
    body.shop-app #policy-modal .policy-modal-dialog { max-height: calc(100dvh - 20px); }
    body.shop-app #policy-modal :is(.policy-modal-header, .policy-modal-footer) { padding: 12px 14px; }
    body.shop-app #policy-modal .policy-modal-body { padding-inline: 14px; }
    body.shop-app #policy-modal .policy-modal-header h5 { font-size: 18px !important; }
}