/* ============================================================
   User Access Manager — Frontend Styles
   ============================================================ */

/* ── Wrapper ──────────────────────────────────────────────── */
.uam-form-wrap {
    max-width: 480px;
    margin: 0 auto;
    padding: 2rem;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,.07);
    box-sizing: border-box;
}

/* Tabbed login overrides base wrapper padding — tabs handle their own spacing */
.uam-form-wrap.uam-tabbed-login {
    padding: 0 !important;
}

/* ── Fields ───────────────────────────────────────────────── */
.uam-form-wrap .uam-field {
    margin-bottom: 1.25rem;
}

.uam-form-wrap .uam-field label {
    display: block;
    font-weight: 600;
    margin-bottom: .35rem;
    color: #333;
    font-size: .9rem;
}

.uam-form-wrap .uam-field input[type="text"],
.uam-form-wrap .uam-field input[type="email"],
.uam-form-wrap .uam-field input[type="password"],
.uam-form-wrap .uam-field input[type="url"],
.uam-form-wrap .uam-field select {
    width: 100%;
    padding: .6rem .85rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
    transition: border-color .2s;
    box-sizing: border-box;
}

.uam-form-wrap .uam-field input:focus,
.uam-form-wrap .uam-field select:focus {
    border-color: #0073aa;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0,115,170,.15);
}

/* Half-width fields */
.uam-form-wrap .uam-field-half {
    display: inline-block;
    width: calc(50% - .5rem);
    vertical-align: top;
}
.uam-form-wrap .uam-field-half:nth-child(odd) {
    margin-right: .5rem;
}

/* ── Remember me row — sits below the submit button ──────── */
.uam-remember-row {
    margin-top: .85rem;
    text-align: center;
}

/* The label is the clickable row */
.uam-remember-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: .5rem !important;
    font-size: .875rem !important;
    font-weight: normal !important;
    color: #555 !important;
    cursor: pointer !important;
    line-height: 1 !important;
    user-select: none;
}

/* Visually hide the native checkbox — keep it accessible/focusable */
.uam-remember-checkbox {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
}

/* Custom drawn checkbox box */
.uam-custom-checkbox {
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    border: 2px solid #aaa !important;
    border-radius: 3px !important;
    background: #fff !important;
    box-sizing: border-box !important;
    position: relative !important;
    flex-shrink: 0 !important;
    transition: border-color .15s, background .15s;
}

/* Checkmark — drawn with a CSS pseudo-element, no images needed */
.uam-custom-checkbox::after {
    content: '' !important;
    position: absolute !important;
    display: none !important;
    left: 3px !important;
    top: 0px !important;
    width: 5px !important;
    height: 9px !important;
    border: 2px solid #fff !important;
    border-top: none !important;
    border-left: none !important;
    transform: rotate(45deg) !important;
}

/* When checked: fill box and show tick */
.uam-remember-checkbox:checked + .uam-custom-checkbox {
    background: #0073aa !important;
    border-color: #0073aa !important;
}
.uam-remember-checkbox:checked + .uam-custom-checkbox::after {
    display: block !important;
}

/* Focus ring for keyboard accessibility */
.uam-remember-checkbox:focus + .uam-custom-checkbox {
    outline: 2px solid #0073aa !important;
    outline-offset: 1px !important;
}

/* Admin tab — use amber accent when checked */
.uam-admin-login-form .uam-remember-checkbox:checked + .uam-custom-checkbox {
    background: #b45309 !important;
    border-color: #b45309 !important;
}
.uam-admin-login-form .uam-remember-checkbox:focus + .uam-custom-checkbox {
    outline-color: #b45309 !important;
}

/* Required asterisk */
.uam-form-wrap .uam-field .required {
    color: #c00;
}

/* ── Buttons ──────────────────────────────────────────────── */
.uam-button {
    display: inline-block;
    padding: .65rem 1.5rem;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background .2s, opacity .2s;
    line-height: 1.4;
}

.uam-button-primary {
    background: #0073aa;
    color: #fff !important;
}
.uam-button-primary:hover {
    background: #005f8d;
    color: #fff !important;
}

.uam-button-secondary {
    background: #f0f0f0;
    color: #333 !important;
    border: 1px solid #ccc;
}
.uam-button-secondary:hover {
    background: #e0e0e0;
}

.uam-submit-field {
    margin-top: 1.5rem;
}

/* Full-width button */
.uam-button-full {
    width: 100%;
    text-align: center;
    display: block;
    box-sizing: border-box;
}

/* ── Messages & Errors ────────────────────────────────────── */
.uam-errors,
.uam-messages {
    margin-bottom: 1.25rem;
    padding: .85rem 1rem;
    border-radius: 5px;
}

.uam-errors {
    background: #fef2f2;
    border-left: 4px solid #dc2626;
}
.uam-error {
    color: #b91c1c;
    margin: 0 0 .25rem;
    font-size: .9rem;
}

.uam-messages {
    background: #f0fdf4;
    border-left: 4px solid #16a34a;
}
.uam-message {
    color: #15803d;
    margin: 0 0 .25rem;
    font-size: .9rem;
}

/* ── Form links ───────────────────────────────────────────── */
.uam-form-links {
    margin-top: 1.25rem;
    font-size: .875rem;
    text-align: center;
    color: #555;
}
.uam-form-links a {
    color: #0073aa;
    text-decoration: none;
}
.uam-form-links a:hover {
    text-decoration: underline;
}

/* ── reCAPTCHA ────────────────────────────────────────────── */
.uam-recaptcha-field {
    margin-bottom: 1.25rem;
}

/* ── Account page ─────────────────────────────────────────── */
.uam-account-wrap {
    max-width: 600px;
    margin: 0 auto;
}
.uam-account-wrap h2 {
    margin-bottom: .5rem;
}
.uam-account-wrap h3 {
    border-bottom: 1px solid #eee;
    padding-bottom: .5rem;
    margin-top: 2rem;
}
.uam-profile-form {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 2px 8px rgba(0,0,0,.07);
}

/* ── Already-logged-in notice ─────────────────────────────── */
.uam-already-logged-in {
    padding: 1rem;
    background: #f0fdf4;
    border-left: 4px solid #16a34a;
    border-radius: 5px;
}

/* ============================================================
   Tabbed Login Form
   ============================================================ */

/* ── Tab Navigation Bar ───────────────────────────────────── */
.uam-tabbed-login .uam-tab-nav {
    display: flex !important;
    flex-direction: row !important;
    border-bottom: 2px solid #e5e7eb;
    background: #f9fafb;
    border-radius: 8px 8px 0 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.uam-tabbed-login .uam-tab-btn {
    flex: 1 1 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .5rem;
    padding: .85rem 1rem;
    background: transparent !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    border-radius: 8px 8px 0 0 !important;
    margin: 0 !important;
    margin-bottom: -2px !important;
    font-size: .9rem;
    font-weight: 600;
    color: #6b7280 !important;
    cursor: pointer;
    transition: color .2s, border-color .2s, background .2s;
    letter-spacing: .01em;
    line-height: 1.4;
    box-shadow: none !important;
    text-decoration: none !important;
}

.uam-tabbed-login .uam-tab-btn:hover {
    color: #374151 !important;
    background: #f0f0f0 !important;
}

.uam-tabbed-login .uam-tab-btn.uam-tab-active {
    color: #0073aa !important;
    border-bottom-color: #0073aa !important;
    background: #fff !important;
}

/* Admin tab gets amber accent when active */
.uam-tabbed-login .uam-tab-btn-admin.uam-tab-active {
    color: #b45309 !important;
    border-bottom-color: #b45309 !important;
}

/* ── Tab icon SVGs — hard size lock to prevent blowout ───── */
.uam-tabbed-login .uam-tab-btn svg,
.uam-tabbed-login .uam-tab-btn img {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
    vertical-align: middle;
    pointer-events: none;
}

/* ── Tab Panels ───────────────────────────────────────────────────────
   Visibility is controlled by inline style="display:block/none" set
   directly in PHP and toggled by JS element.style — this cannot be
   overridden by any theme stylesheet. These CSS rules only handle
   the visual appearance of a visible panel, NOT its show/hide state.
   ─────────────────────────────────────────────────────────────────── */
.uam-tabbed-login .uam-tab-panel {
    /* Layout & appearance only — show/hide is via inline style in HTML/JS */
    padding: 1.75rem 2rem 2rem;
    background: #fff;
    border-radius: 0 0 8px 8px;
    box-sizing: border-box;
}

/* ── Admin notice banner inside admin panel ───────────────── */
.uam-tabbed-login .uam-admin-notice {
    display: flex !important;
    align-items: center;
    gap: .6rem;
    padding: .65rem 1rem;
    margin-bottom: 1.25rem;
    background: #fef3c7;
    border: 1px solid #f59e0b;
    border-radius: 6px;
    font-size: .875rem;
    font-weight: 600;
    color: #92400e;
    box-sizing: border-box;
}

/* Hard-constrain the shield SVG inside the admin notice */
.uam-tabbed-login .uam-admin-notice svg {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    flex-shrink: 0 !important;
    color: #d97706;
}

/* ── Admin submit button ──────────────────────────────────── */
.uam-button-admin {
    background: #92400e;
    color: #fff !important;
}
.uam-button-admin:hover {
    background: #78350f;
    color: #fff !important;
}

/* ============================================================
   UAM Themes — Dark (default) & Light
   ============================================================ */

/* ── Dark Theme ──────────────────────────────────────────── */
.uam-theme-dark.uam-form-wrap,
.uam-theme-dark .uam-tab-panel {
    background: #1e1e2e !important;
    border-color: #3b3b52 !important;
    color: #c9d1d9 !important;
}

.uam-theme-dark .uam-tab-nav {
    background: #16162a !important;
    border-bottom-color: #3b3b52 !important;
}

.uam-theme-dark .uam-tab-btn {
    color: #8b949e !important;
}
.uam-theme-dark .uam-tab-btn:hover {
    background: #2a2a3e !important;
    color: #c9d1d9 !important;
}
.uam-theme-dark .uam-tab-btn.uam-tab-active {
    color: #58a6ff !important;
    border-bottom-color: #58a6ff !important;
    background: #1e1e2e !important;
}
.uam-theme-dark .uam-tab-btn-admin.uam-tab-active {
    color: #f59e0b !important;
    border-bottom-color: #f59e0b !important;
}

.uam-theme-dark .uam-field label {
    color: #8b949e !important;
}

.uam-theme-dark .uam-field input[type="text"],
.uam-theme-dark .uam-field input[type="email"],
.uam-theme-dark .uam-field input[type="password"],
.uam-theme-dark .uam-field select {
    background: #2a2a3e !important;
    border-color: #3b3b52 !important;
    color: #c9d1d9 !important;
}
.uam-theme-dark .uam-field input:focus,
.uam-theme-dark .uam-field select:focus {
    border-color: #58a6ff !important;
    box-shadow: 0 0 0 2px rgba(88,166,255,.2) !important;
}

.uam-theme-dark .uam-button-primary {
    background: #1f6feb !important;
}
.uam-theme-dark .uam-button-primary:hover {
    background: #388bfd !important;
}
.uam-theme-dark .uam-button-admin {
    background: #92400e !important;
}
.uam-theme-dark .uam-button-admin:hover {
    background: #b45309 !important;
}

.uam-theme-dark .uam-admin-notice {
    background: #2d1f00 !important;
    border-color: #f59e0b !important;
    color: #fbbf24 !important;
}

.uam-theme-dark .uam-form-links a {
    color: #58a6ff !important;
}
.uam-theme-dark .uam-remember-label {
    color: #8b949e !important;
}
.uam-theme-dark .uam-custom-checkbox {
    background: #2a2a3e !important;
    border-color: #4b5563 !important;
}
.uam-theme-dark .uam-remember-checkbox:checked + .uam-custom-checkbox {
    background: #1f6feb !important;
    border-color: #1f6feb !important;
}

/* ── Light Theme ─────────────────────────────────────────── */
.uam-theme-light.uam-form-wrap,
.uam-theme-light .uam-tab-panel {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #1e293b !important;
}

.uam-theme-light .uam-tab-nav {
    background: #f8fafc !important;
    border-bottom-color: #e2e8f0 !important;
}

.uam-theme-light .uam-tab-btn {
    color: #64748b !important;
}
.uam-theme-light .uam-tab-btn:hover {
    background: #f1f5f9 !important;
    color: #334155 !important;
}
.uam-theme-light .uam-tab-btn.uam-tab-active {
    color: #0073aa !important;
    border-bottom-color: #0073aa !important;
    background: #ffffff !important;
}
.uam-theme-light .uam-tab-btn-admin.uam-tab-active {
    color: #b45309 !important;
    border-bottom-color: #b45309 !important;
}

.uam-theme-light .uam-field label {
    color: #374151 !important;
}

.uam-theme-light .uam-field input[type="text"],
.uam-theme-light .uam-field input[type="email"],
.uam-theme-light .uam-field input[type="password"],
.uam-theme-light .uam-field select {
    background: #f9fafb !important;
    border-color: #d1d5db !important;
    color: #111827 !important;
}
.uam-theme-light .uam-field input:focus,
.uam-theme-light .uam-field select:focus {
    border-color: #0073aa !important;
    box-shadow: 0 0 0 2px rgba(0,115,170,.15) !important;
    background: #fff !important;
}

.uam-theme-light .uam-button-primary {
    background: #0073aa !important;
}
.uam-theme-light .uam-button-primary:hover {
    background: #005f8d !important;
}
.uam-theme-light .uam-button-admin {
    background: #92400e !important;
}
.uam-theme-light .uam-button-admin:hover {
    background: #78350f !important;
}

.uam-theme-light .uam-admin-notice {
    background: #fef3c7 !important;
    border-color: #f59e0b !important;
    color: #92400e !important;
}

.uam-theme-light .uam-form-links a {
    color: #0073aa !important;
}
.uam-theme-light .uam-remember-label {
    color: #6b7280 !important;
}
.uam-theme-light .uam-custom-checkbox {
    background: #fff !important;
    border-color: #9ca3af !important;
}
.uam-theme-light .uam-remember-checkbox:checked + .uam-custom-checkbox {
    background: #0073aa !important;
    border-color: #0073aa !important;
}