/**
 * PDS OTP Plugin - Native Dark Mode Support
 * Version: 1.0.0
 * Description: Dark mode styles for OTP plugin using PDS misc-tools CSS variables
 *
 * Scope: Login page and frontend only (admin area excluded)
 *
 * This file integrates with the PDS dark mode system from pds-misc-tools plugin.
 * It uses CSS variables defined in pds-dark-mode-core.css for consistent theming.
 *
 * All styles are scoped with :root[data-pds-theme="dark"] to only apply in dark mode.
 */

/* ============================================
   OTP CONSENT MODAL (Frontend)
   ============================================ */

/* Modal overlay backdrop */
:root[data-pds-theme="dark"] #otp-consent-modal {
    background-color: var(--pds-overlay-bg, rgba(0, 0, 0, 0.7));
}

/* Modal content container */
:root[data-pds-theme="dark"] #otp-consent-modal .modal-content {
    background-color: var(--pds-bg-elevated, #1e293b);
    border-color: var(--pds-border-medium, #475569);
    box-shadow: var(--pds-shadow-xl, 0 20px 60px rgba(0, 0, 0, 0.7));
}

/* Modal header */
:root[data-pds-theme="dark"] #otp-consent-modal .modal-header {
    background-color: var(--pds-bg-tertiary, #334155);
    border-bottom-color: var(--pds-border-medium, #475569);
    color: var(--pds-text-primary, #f1f5f9);
}

:root[data-pds-theme="dark"] #otp-consent-modal .modal-header h3 {
    color: var(--pds-text-primary, #f1f5f9);
}

/* Modal body */
:root[data-pds-theme="dark"] #otp-consent-modal .modal-body {
    background-color: var(--pds-bg-elevated, #1e293b);
    color: var(--pds-text-primary, #f1f5f9);
}

:root[data-pds-theme="dark"] #otp-consent-modal .modal-body p {
    color: var(--pds-text-secondary, #cbd5e1);
}

/* Modal buttons */
:root[data-pds-theme="dark"] #otp-consent-modal .button {
    background-color: var(--pds-bg-tertiary, #334155);
    border-color: var(--pds-border-medium, #475569);
    color: var(--pds-text-primary, #f1f5f9);
}

:root[data-pds-theme="dark"] #otp-consent-modal .button:hover {
    background-color: var(--pds-bg-active, #475569);
    border-color: var(--pds-border-dark, #64748b);
}

:root[data-pds-theme="dark"] #otp-consent-modal .button-primary {
    background-color: var(--pds-brand-blue, #38bdf8);
    border-color: var(--pds-brand-blue, #38bdf8);
    color: var(--pds-text-inverse, #0f172a);
}

:root[data-pds-theme="dark"] #otp-consent-modal .button-primary:hover {
    background-color: var(--pds-brand-blue-hover, #0ea5e9);
    border-color: var(--pds-brand-blue-hover, #0ea5e9);
}


/* ============================================
   LOGIN PAGE - OTP VERIFICATION
   ============================================ */

/* Login form container */
:root[data-pds-theme="dark"] #login {
    color: var(--pds-text-primary, #f1f5f9);
}

:root[data-pds-theme="dark"] #login h1 a {
    color: var(--pds-text-primary, #f1f5f9);
}

/* Login form box */
:root[data-pds-theme="dark"] #loginform,
:root[data-pds-theme="dark"] .login form {
    background-color: var(--pds-bg-elevated, #1e293b);
    border-color: var(--pds-border-medium, #475569);
    box-shadow: var(--pds-shadow-lg, 0 8px 30px rgba(0, 0, 0, 0.6));
}

/* Login form labels */
:root[data-pds-theme="dark"] #loginform label,
:root[data-pds-theme="dark"] .login form label {
    color: var(--pds-text-primary, #f1f5f9);
}

/* Login form inputs */
:root[data-pds-theme="dark"] #loginform input[type="text"],
:root[data-pds-theme="dark"] #loginform input[type="password"],
:root[data-pds-theme="dark"] #loginform input[type="email"],
:root[data-pds-theme="dark"] .login form input[type="text"],
:root[data-pds-theme="dark"] .login form input[type="password"],
:root[data-pds-theme="dark"] .login form input[type="email"] {
    background-color: var(--pds-bg-tertiary, #334155);
    border-color: var(--pds-border-medium, #475569);
    color: var(--pds-text-primary, #f1f5f9);
}

:root[data-pds-theme="dark"] #loginform input[type="text"]:focus,
:root[data-pds-theme="dark"] #loginform input[type="password"]:focus,
:root[data-pds-theme="dark"] #loginform input[type="email"]:focus,
:root[data-pds-theme="dark"] .login form input[type="text"]:focus,
:root[data-pds-theme="dark"] .login form input[type="password"]:focus,
:root[data-pds-theme="dark"] .login form input[type="email"]:focus {
    border-color: var(--pds-brand-blue, #38bdf8);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
}

/* Verification code input (larger styling) */
:root[data-pds-theme="dark"] input#verification-code-input {
    background-color: var(--pds-bg-tertiary, #334155);
    border-color: var(--pds-border-medium, #475569);
    color: var(--pds-text-primary, #f1f5f9);
}

:root[data-pds-theme="dark"] input#verification-code-input:focus {
    border-color: var(--pds-brand-blue, #38bdf8);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
}

:root[data-pds-theme="dark"] input#verification-code-input::placeholder {
    color: var(--pds-text-muted, #94a3b8);
    opacity: 0.7;
}

/* Help text */
:root[data-pds-theme="dark"] #code-help-text,
:root[data-pds-theme="dark"] .description {
    color: var(--pds-text-secondary, #cbd5e1);
}

/* Links */
:root[data-pds-theme="dark"] #login a,
:root[data-pds-theme="dark"] .login a {
    color: var(--pds-brand-blue, #38bdf8);
}

:root[data-pds-theme="dark"] #login a:hover,
:root[data-pds-theme="dark"] .login a:hover {
    color: var(--pds-brand-blue-hover, #0ea5e9);
}


/* ============================================
   OTP PROGRESS INDICATORS
   ============================================ */

:root[data-pds-theme="dark"] .otp-progress {
    color: var(--pds-text-primary, #f1f5f9);
}

:root[data-pds-theme="dark"] .otp-step {
    background-color: var(--pds-bg-tertiary, #334155);
    color: var(--pds-text-primary, #f1f5f9);
    border: 1px solid var(--pds-border-medium, #475569);
}

:root[data-pds-theme="dark"] .otp-step.active {
    background-color: var(--pds-bg-secondary, #1e293b);
    border-color: var(--pds-brand-blue, #38bdf8);
    color: var(--pds-brand-blue, #38bdf8);
}

:root[data-pds-theme="dark"] .otp-step.completed {
    background-color: var(--pds-success-bg, #14532d);
    border-color: var(--pds-success-border, #22c55e);
    color: var(--pds-success-text, #86efac);
}


/* ============================================
   OTP BANNERS & MESSAGES
   ============================================ */

/* Base OTP banner */
:root[data-pds-theme="dark"] .otp-banner {
    background-color: var(--pds-bg-secondary, #1e293b);
    border-left: 4px solid var(--pds-border-medium, #475569);
    color: var(--pds-text-primary, #f1f5f9);
}

:root[data-pds-theme="dark"] .otp-banner p {
    color: var(--pds-text-primary, #f1f5f9);
}

/* Verification instructions */
:root[data-pds-theme="dark"] .verification-instructions {
    background-color: var(--pds-bg-tertiary, #334155);
    border: 1px solid var(--pds-border-medium, #475569);
    color: var(--pds-text-primary, #f1f5f9);
}

:root[data-pds-theme="dark"] .verification-instructions p {
    color: var(--pds-text-primary, #f1f5f9);
}

:root[data-pds-theme="dark"] .verification-instructions strong {
    color: var(--pds-text-primary, #f1f5f9);
}

/* Error banner/message */
:root[data-pds-theme="dark"] .otp-banner[style*="background-color: #f8d7da"],
:root[data-pds-theme="dark"] #login_error,
:root[data-pds-theme="dark"] .login .message.error {
    background-color: var(--pds-error-bg, #7f1d1d) !important;
    border-left-color: var(--pds-error-border, #f87171) !important;
    color: var(--pds-error-text, #fca5a5) !important;
}

:root[data-pds-theme="dark"] .otp-banner[style*="background-color: #f8d7da"] p,
:root[data-pds-theme="dark"] #login_error p,
:root[data-pds-theme="dark"] .login .message.error p {
    color: var(--pds-error-text, #fca5a5) !important;
}

/* Success banner/message */
:root[data-pds-theme="dark"] .otp-banner[style*="background-color: #e7f5ff"],
:root[data-pds-theme="dark"] .otp-banner[style*="background-color: #d4edda"],
:root[data-pds-theme="dark"] .login .message.success {
    background-color: var(--pds-success-bg, #14532d) !important;
    border-left-color: var(--pds-success-border, #22c55e) !important;
    color: var(--pds-success-text, #86efac) !important;
}

:root[data-pds-theme="dark"] .otp-banner[style*="background-color: #e7f5ff"] p,
:root[data-pds-theme="dark"] .otp-banner[style*="background-color: #d4edda"] p,
:root[data-pds-theme="dark"] .login .message.success p {
    color: var(--pds-success-text, #86efac) !important;
}

/* Warning banner */
:root[data-pds-theme="dark"] .otp-banner[style*="background-color: #fff3cd"],
:root[data-pds-theme="dark"] .login .message.warning {
    background-color: var(--pds-warning-bg, #78350f) !important;
    border-left-color: var(--pds-warning-border, #fbbf24) !important;
    color: var(--pds-warning-text, #fcd34d) !important;
}

:root[data-pds-theme="dark"] .otp-banner[style*="background-color: #fff3cd"] p,
:root[data-pds-theme="dark"] .login .message.warning p {
    color: var(--pds-warning-text, #fcd34d) !important;
}

/* Info banner */
:root[data-pds-theme="dark"] .otp-banner[style*="background-color: #f0f8ff"],
:root[data-pds-theme="dark"] .login .message.info {
    background-color: var(--pds-info-bg, #164e63) !important;
    border-left-color: var(--pds-info-border, #06b6d4) !important;
    color: var(--pds-info-text, #67e8f9) !important;
}

:root[data-pds-theme="dark"] .otp-banner[style*="background-color: #f0f8ff"] p,
:root[data-pds-theme="dark"] .login .message.info p {
    color: var(--pds-info-text, #67e8f9) !important;
}

/* OTP message container */
:root[data-pds-theme="dark"] .otp-message {
    background-color: var(--pds-warning-bg, #78350f);
    border-color: var(--pds-warning-border, #fbbf24);
    color: var(--pds-warning-text, #fcd34d);
}

:root[data-pds-theme="dark"] .otp-message p {
    color: var(--pds-warning-text, #fcd34d);
}


/* ============================================
   COOLDOWN MESSAGES & COUNTDOWN
   ============================================ */

/* Cooldown banner */
:root[data-pds-theme="dark"] #cooldown-banner {
    background-color: var(--pds-error-bg, #7f1d1d) !important;
    border-left-color: var(--pds-error-border, #f87171) !important;
}

:root[data-pds-theme="dark"] #cooldown-banner p {
    color: var(--pds-error-text, #fca5a5) !important;
}

/* Countdown display */
:root[data-pds-theme="dark"] #cooldown-countdown {
    color: var(--pds-error-text, #fca5a5);
    font-weight: bold;
}

/* Countdown message container */
:root[data-pds-theme="dark"] #countdown-message {
    background-color: var(--pds-bg-tertiary, #334155);
    border: 1px solid var(--pds-border-medium, #475569);
    color: var(--pds-text-secondary, #cbd5e1);
}

:root[data-pds-theme="dark"] #countdown-message > div {
    color: var(--pds-text-primary, #f1f5f9);
}

:root[data-pds-theme="dark"] #countdown-message > div > div:first-child {
    color: var(--pds-brand-blue, #38bdf8);
}


/* ============================================
   BUTTONS
   ============================================ */

/* Primary button (WordPress default) */
:root[data-pds-theme="dark"] .button-primary,
:root[data-pds-theme="dark"] #login .button-primary {
    background-color: var(--pds-brand-blue, #38bdf8);
    border-color: var(--pds-brand-blue, #38bdf8);
    color: var(--pds-text-inverse, #0f172a);
    box-shadow: none;
}

:root[data-pds-theme="dark"] .button-primary:hover,
:root[data-pds-theme="dark"] #login .button-primary:hover {
    background-color: var(--pds-brand-blue-hover, #0ea5e9);
    border-color: var(--pds-brand-blue-hover, #0ea5e9);
}

:root[data-pds-theme="dark"] .button-primary:focus,
:root[data-pds-theme="dark"] #login .button-primary:focus {
    border-color: var(--pds-brand-blue, #38bdf8);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
}

/* Secondary button */
:root[data-pds-theme="dark"] .button,
:root[data-pds-theme="dark"] #login .button {
    background-color: var(--pds-bg-tertiary, #334155);
    border-color: var(--pds-border-medium, #475569);
    color: var(--pds-text-primary, #f1f5f9);
}

:root[data-pds-theme="dark"] .button:hover,
:root[data-pds-theme="dark"] #login .button:hover {
    background-color: var(--pds-bg-active, #475569);
    border-color: var(--pds-border-dark, #64748b);
    color: var(--pds-text-primary, #f1f5f9);
}

:root[data-pds-theme="dark"] .button:focus,
:root[data-pds-theme="dark"] #login .button:focus {
    border-color: var(--pds-brand-blue, #38bdf8);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
}

/* Button disabled state */
:root[data-pds-theme="dark"] .button:disabled,
:root[data-pds-theme="dark"] #login .button:disabled {
    background-color: var(--pds-bg-secondary, #1e293b);
    border-color: var(--pds-border-light, #334155);
    color: var(--pds-text-muted, #94a3b8);
    cursor: not-allowed;
    opacity: 0.6;
}


/* ============================================
   PASSWORDLESS LOGIN COMPONENTS
   ============================================ */

/* Passwordless login button container */
:root[data-pds-theme="dark"] .passwordless-login-button-container {
    border-top-color: var(--pds-border-medium, #475569);
}

:root[data-pds-theme="dark"] .passwordless-login-button-container a {
    color: var(--pds-brand-blue, #38bdf8);
}

:root[data-pds-theme="dark"] .passwordless-login-button-container a:hover {
    color: var(--pds-brand-blue-hover, #0ea5e9);
}

:root[data-pds-theme="dark"] .passwordless-login-button-container p {
    color: var(--pds-text-secondary, #cbd5e1);
}

/* Email sent container */
:root[data-pds-theme="dark"] .email-sent-container {
    background-color: var(--pds-info-bg, #164e63);
    border-left-color: var(--pds-info-border, #06b6d4);
}

:root[data-pds-theme="dark"] .email-sent-container h2 {
    color: var(--pds-info-text, #67e8f9);
}

:root[data-pds-theme="dark"] .email-sent-container p {
    color: var(--pds-info-text, #67e8f9);
}

:root[data-pds-theme="dark"] .email-icon {
    color: var(--pds-info, #67e8f9);
}

:root[data-pds-theme="dark"] .back-to-login {
    color: var(--pds-brand-blue, #38bdf8);
}

:root[data-pds-theme="dark"] .back-to-login:hover {
    color: var(--pds-brand-blue-hover, #0ea5e9);
}

/* Passwordless form container */
:root[data-pds-theme="dark"] .passwordless-form-container {
    background-color: var(--pds-bg-elevated, #1e293b);
    border: 1px solid var(--pds-border-medium, #475569);
    box-shadow: var(--pds-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.5));
}

:root[data-pds-theme="dark"] .passwordless-form-container h2 {
    color: var(--pds-text-primary, #f1f5f9);
}

:root[data-pds-theme="dark"] .passwordless-form-container p {
    color: var(--pds-text-secondary, #cbd5e1);
}

:root[data-pds-theme="dark"] .passwordless-email-input {
    background-color: var(--pds-bg-tertiary, #334155);
    border-color: var(--pds-border-medium, #475569);
    color: var(--pds-text-primary, #f1f5f9);
}

:root[data-pds-theme="dark"] .passwordless-email-input:focus {
    border-color: var(--pds-brand-blue, #38bdf8);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
}

:root[data-pds-theme="dark"] .passwordless-submit-button {
    background-color: var(--pds-brand-blue, #38bdf8);
    color: var(--pds-text-inverse, #0f172a);
}

:root[data-pds-theme="dark"] .passwordless-submit-button:hover {
    background-color: var(--pds-brand-blue-hover, #0ea5e9);
}


/* ============================================
   LOGIN OVERLAY (Frontend - for protected content)
   ============================================ */

:root[data-pds-theme="dark"] .pds-login-overlay {
    background-color: var(--pds-bg-primary, #0f172a) !important;
}

:root[data-pds-theme="dark"] .pds-login-content {
    background-color: var(--pds-bg-elevated, #1e293b);
    border: 1px solid var(--pds-border-medium, #475569);
    box-shadow: var(--pds-shadow-xl, 0 20px 60px rgba(0, 0, 0, 0.7));
}

:root[data-pds-theme="dark"] .pds-login-logo {
    filter: brightness(0) invert(1);
}

:root[data-pds-theme="dark"] .pds-login-logo-text {
    color: var(--pds-text-primary, #f1f5f9);
}

:root[data-pds-theme="dark"] .pds-login-message {
    color: var(--pds-text-primary, #f1f5f9);
}

:root[data-pds-theme="dark"] .pds-login-button {
    background-color: var(--pds-brand-blue, #38bdf8);
    color: var(--pds-text-inverse, #0f172a);
}

:root[data-pds-theme="dark"] .pds-login-button:hover {
    background-color: var(--pds-brand-blue-hover, #0ea5e9);
    color: var(--pds-text-inverse, #0f172a);
}


/* ============================================
   LOADING SPINNER
   ============================================ */

:root[data-pds-theme="dark"] .otp-spinner-container {
    background-color: var(--pds-bg-primary, #0f172a);
}

:root[data-pds-theme="dark"] .otp-spinner {
    border-color: var(--pds-border-light, #334155);
    border-top-color: var(--pds-brand-blue, #38bdf8);
}


/* ============================================
   RADIO BUTTONS & CHECKBOXES
   ============================================ */

:root[data-pds-theme="dark"] input[type="radio"],
:root[data-pds-theme="dark"] input[type="checkbox"] {
    border-color: var(--pds-border-medium, #475569);
    background-color: var(--pds-bg-tertiary, #334155);
}

:root[data-pds-theme="dark"] input[type="radio"]:checked,
:root[data-pds-theme="dark"] input[type="checkbox"]:checked {
    border-color: var(--pds-brand-blue, #38bdf8);
    background-color: var(--pds-brand-blue, #38bdf8);
}

:root[data-pds-theme="dark"] input[type="radio"]:focus,
:root[data-pds-theme="dark"] input[type="checkbox"]:focus {
    border-color: var(--pds-brand-blue, #38bdf8);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
}


/* ============================================
   TRANSITIONS
   ============================================ */

/* Smooth transitions for all OTP elements */
:root[data-pds-theme="dark"] .otp-banner,
:root[data-pds-theme="dark"] .otp-step,
:root[data-pds-theme="dark"] .otp-message,
:root[data-pds-theme="dark"] .verification-instructions,
:root[data-pds-theme="dark"] #otp-consent-modal,
:root[data-pds-theme="dark"] .pds-login-overlay,
:root[data-pds-theme="dark"] input,
:root[data-pds-theme="dark"] button,
:root[data-pds-theme="dark"] .button {
    transition: background-color 0.3s ease,
                border-color 0.3s ease,
                color 0.3s ease,
                box-shadow 0.3s ease;
}

/* Disable transitions for reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    :root[data-pds-theme="dark"] * {
        transition: none !important;
    }
}


/* ============================================
   ACCESSIBILITY ENHANCEMENTS
   ============================================ */

/* Focus visible styles for keyboard navigation */
:root[data-pds-theme="dark"] *:focus-visible {
    outline: 2px solid var(--pds-brand-blue, #38bdf8);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root[data-pds-theme="dark"] {
        --pds-border-medium: #cbd5e1;
        --pds-border-dark: #e2e8f0;
    }
}


/* ============================================
   MODERN OTP VERIFICATION UI - DARK MODE
   ============================================ */

/* Compact header with email/phone + countdown badge */
:root[data-pds-theme="dark"] .otp-header-modern {
    background-color: var(--pds-bg-tertiary, #1e293b);
    border-color: var(--pds-border-medium, #475569);
}

:root[data-pds-theme="dark"] .otp-sent-to {
    color: var(--pds-text-primary, #f1f5f9);
}

:root[data-pds-theme="dark"] .otp-destination {
    color: var(--pds-text-secondary, #94a3b8);
}

/* Hint text */
:root[data-pds-theme="dark"] .otp-hint {
    color: var(--pds-text-tertiary, #64748b);
}

/* Countdown badge */
:root[data-pds-theme="dark"] .countdown-ring-circle {
    stroke: var(--pds-brand-blue, #38bdf8);
}

:root[data-pds-theme="dark"] .countdown-number {
    color: var(--pds-brand-blue, #38bdf8);
}

/* Resend button */
:root[data-pds-theme="dark"] .otp-resend-btn-inline {
    background: transparent;
    border-color: var(--pds-border-medium, #475569);
    color: var(--pds-brand-blue, #38bdf8);
}

:root[data-pds-theme="dark"] .otp-resend-btn-inline:hover {
    background: var(--pds-bg-tertiary, #1e293b);
    border-color: var(--pds-brand-blue, #38bdf8);
}

/* Input label */
:root[data-pds-theme="dark"] .otp-input-label {
    color: var(--pds-text-primary, #f1f5f9);
}

/* Code input field */
:root[data-pds-theme="dark"] .otp-code-input {
    background-color: var(--pds-bg-tertiary, #1e293b) !important;
    border-color: var(--pds-border-medium, #475569) !important;
    color: var(--pds-text-primary, #f1f5f9) !important;
}

:root[data-pds-theme="dark"] .otp-code-input:focus {
    border-color: var(--pds-brand-blue, #38bdf8) !important;
    box-shadow: 0 0 0 3px var(--pds-brand-blue-alpha, rgba(56, 189, 248, 0.15)) !important;
}

:root[data-pds-theme="dark"] .otp-code-input::placeholder {
    color: var(--pds-text-tertiary, #475569);
}

/* Verify button */
:root[data-pds-theme="dark"] .otp-verify-btn {
    background: var(--pds-brand-blue, #38bdf8) !important;
    border-color: var(--pds-brand-blue, #38bdf8) !important;
    color: var(--pds-bg-primary, #0f172a) !important;
}

:root[data-pds-theme="dark"] .otp-verify-btn:hover {
    background: var(--pds-brand-blue-hover, #0ea5e9) !important;
    border-color: var(--pds-brand-blue-hover, #0ea5e9) !important;
}

/* Resend section */
:root[data-pds-theme="dark"] .otp-resend-section {
    border-top-color: var(--pds-border-medium, #475569);
}

:root[data-pds-theme="dark"] .otp-resend-section p,
:root[data-pds-theme="dark"] #otp-resend-cooldown p,
:root[data-pds-theme="dark"] #resend-form-container p {
    color: var(--pds-text-secondary, #94a3b8);
}

:root[data-pds-theme="dark"] #otp-resend-cooldown strong {
    color: var(--pds-brand-blue, #38bdf8);
}

:root[data-pds-theme="dark"] .otp-resend-btn {
    background: var(--pds-bg-tertiary, #1e293b) !important;
    border-color: var(--pds-border-medium, #475569) !important;
    color: var(--pds-text-primary, #f1f5f9) !important;
}

:root[data-pds-theme="dark"] .otp-resend-btn:hover {
    background: var(--pds-bg-secondary, #334155) !important;
    border-color: var(--pds-brand-blue, #38bdf8) !important;
}