/* ── Auth pages (Login, ForgotPassword, ResetPassword) ─────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
body.auth-page{font-family:'DM Sans',system-ui,sans-serif;background:linear-gradient(135deg,#0F1623 0%,#161E2E 55%,#1a2235 100%);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
[lang="ar"] body.auth-page{font-family:'Cairo',system-ui,sans-serif}

/* Login two-column layout */
.auth-wrap{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:860px;width:100%}
@media(max-width:640px){.auth-wrap{grid-template-columns:1fr}.creds-panel{display:none}}

/* Card */
.auth-card{background:#fff;border-radius:14px;padding:36px 40px;box-shadow:0 4px 32px rgba(0,0,0,0.25);width:100%;max-width:420px}

/* Logo */
.auth-logo{display:flex;align-items:center;gap:10px;margin-bottom:28px}
.auth-logo-box{width:36px;height:36px;background:linear-gradient(135deg,#3B82F6,#1D4ED8);border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#fff;box-shadow:0 2px 8px rgba(59,130,246,.4)}
.auth-brand{font-weight:700;font-size:16px;color:#0F1623}
.auth-brand-sub{font-size:10px;color:#8A96A8;letter-spacing:.5px;text-transform:uppercase}

/* Headings */
.auth-card h1{font-size:20px;font-weight:700;color:#0F1623;margin-bottom:4px}
.auth-card .auth-sub{font-size:12px;color:#8A96A8;margin-bottom:24px;line-height:1.6}

/* Form fields */
.auth-card label{font-size:11px;color:#3D4A5C;font-weight:500;margin-bottom:5px;display:block}
.auth-card input[type=email],
.auth-card input[type=password],
.auth-card input[type=text]{width:100%;background:#F5F6F9;border:1px solid rgba(0,0,0,.14);border-radius:7px;padding:10px 13px;font-size:13px;color:#0F1623;outline:none;margin-bottom:14px;font-family:inherit;transition:border-color .15s}
.auth-card input[type=email]:focus,
.auth-card input[type=password]:focus{border-color:#2563EB;background:#fff}
.auth-card input[readonly]{background:#f0f4ff;color:#4B6A9A;border-color:rgba(37,99,235,.2);cursor:not-allowed}

/* Remember-me row */
.auth-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.auth-chk-row{display:flex;align-items:center;gap:6px;font-size:11.5px;color:#3D4A5C;cursor:pointer}
.auth-chk-row input{margin:0;width:14px;height:14px;accent-color:#2563EB;cursor:pointer}

/* Forgot link */
.auth-forgot{font-size:11.5px;color:#2563EB;text-decoration:none;font-weight:500}
.auth-forgot:hover{text-decoration:underline}

/* Submit button */
.auth-btn{width:100%;background:#2563EB;border:none;border-radius:7px;padding:12px;font-size:13px;font-weight:600;color:#fff;cursor:pointer;transition:background .15s;font-family:inherit;margin-bottom:12px}
.auth-btn:hover{background:#1D4ED8}

/* Back link */
.auth-link{display:block;text-align:center;font-size:12px;color:#8A96A8;text-decoration:none}
.auth-link span{color:#2563EB}
.auth-link:hover span{text-decoration:underline}

/* Alerts */
.auth-err{background:#fef2f2;border:1px solid rgba(220,38,38,.2);color:#DC2626;font-size:11.5px;padding:8px 12px;border-radius:7px;margin-bottom:14px}
.auth-ok{background:#f0fdf4;border:1px solid rgba(22,163,74,.2);color:#16A34A;font-size:11.5px;padding:10px 12px;border-radius:7px;margin-bottom:14px;line-height:1.5}
.auth-info{background:#EFF6FF;border:1px solid rgba(37,99,235,.15);color:#1D4ED8;font-size:11px;padding:10px 12px;border-radius:7px;margin-bottom:16px;line-height:1.6}

/* Password rules hint */
.auth-rules{font-size:10.5px;color:#8A96A8;background:#F5F6F9;border-radius:7px;padding:9px 11px;margin-bottom:14px;line-height:1.7}

/* Password strength bar */
.auth-strength{height:4px;border-radius:3px;margin-bottom:12px;margin-top:-10px;transition:width .3s,background .3s;width:0}
#strength-wrap{margin-top:4px;height:4px;background:#eee;border-radius:3px;overflow:hidden;display:none}
#strength-bar{height:100%;border-radius:3px;transition:width .3s,background .3s;width:0}
#strength-label{font-size:10px;color:#8A96A8;margin-top:4px;display:none}

/* Credentials demo panel */
.creds-panel{display:flex;flex-direction:column;gap:0}
.creds-hdr{color:#E8EDF5;font-size:13px;font-weight:600;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.creds-hdr::before{content:'🔑';font-size:16px}
.cred-row{display:grid;grid-template-columns:1fr 1fr;gap:0;cursor:pointer;border-radius:8px;padding:8px 10px;transition:background .12s;margin-bottom:2px;border:1px solid transparent}
.cred-row:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.08)}
.cred-row.active{background:rgba(59,130,246,.15);border-color:rgba(59,130,246,.3)}
.cred-role{font-size:11px;color:#8A9BB5;text-transform:uppercase;letter-spacing:.4px;margin-bottom:2px}
.cred-name{font-size:12.5px;font-weight:500;color:#E8EDF5}
.cred-email{font-size:11px;color:#8A9BB5}
.cred-badge{display:inline-flex;align-items:center;justify-content:flex-end}
.cred-badge .badge{font-size:9px;padding:2px 7px;border-radius:8px;font-weight:600}
.cred-badge .badge.gn{background:rgba(22,163,74,.15);color:#16A34A}
.cred-badge .badge.rd{background:rgba(220,38,38,.15);color:#DC2626}
.pw-note{font-size:10px;color:#8A9BB5;margin-top:12px;padding:8px 10px;background:rgba(255,255,255,.04);border-radius:6px;border:1px solid rgba(255,255,255,.06)}
.pw-note strong{color:#E8EDF5}

/* ═══════════════════════════════════════════════════════════════
   ChangePassword Page — CSS Extraction
   ═════════════════════════════════════════════════════════════ */

/* ── MAIN CONTAINER ──────────────────────────────────────────– */
.auth-main { max-width: 480px; margin: 0 auto; }

/* ── ALERTS ──────────────────────────────────────────────────– */
.auth-success-margin { margin-bottom: 14px; }
.auth-error-margin { margin-bottom: 10px; }

/* ── PASSWORD HINT TEXT ──────────────────────────────────────– */
.auth-hint-text { margin-bottom: 16px; font-size: 11.5px; }

/* ── PASSWORD STRENGTH INDICATOR ─────────────────────────────– */
.auth-strength-wrapper { margin-top: 4px; height: 4px; background: var(--s3); border-radius: 3px; overflow: hidden; display: none; }
.auth-strength-bar { height: 100%; border-radius: 3px; transition: width 0.3s, background 0.3s; width: 0; }
.auth-strength-label { font-size: 10px; color: var(--t3); margin-top: 4px; display: none; }

/* ── FORM ACTIONS ────────────────────────────────────────────– */
.auth-form-actions { padding-top: 12px; border-top: 1px solid var(--bo); margin-top: 8px; display: flex; gap: 8px; }
.auth-action-button { flex: 1; justify-content: center; }
.auth-action-button-center { text-align: center; }

/* ═══════════════════════════════════════════════════════════════
   Shared Error Pages — CSS Extraction
   ═════════════════════════════════════════════════════════════ */

/* ── ACCESS DENIED PAGE ──────────────────────────────────────– */
.access-denied-wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 24px; text-align: center; }
.access-denied-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.5; }
.access-denied-title { font-size: 18px; font-weight: 700; color: var(--t); margin-bottom: 8px; }
.access-denied-message { font-size: 13px; color: var(--t3); max-width: 420px; line-height: 1.6; margin-bottom: 24px; }
.access-denied-button { text-decoration: none; }