/* [2026-10-01] Login screens of the three portals share the identity of
   dawaei.com: pharmacy paper, ink text, the pharmacy green, Reem Kufi headings.
   Scoped to the login containers only — the dashboards keep their own themes.
   The !important flags are needed: these pages carry several earlier theme
   layers (surgical-fix, pharmacy-theme, dawaei-md3) that force colours with
   !important on bare element selectors. */

#pharmacy-auth, #admin-auth, #auth-screen {
  --pa-paper: #F5F8F6;
  --pa-sheet: #FFFFFF;
  --pa-ink: #16302A;
  --pa-ink-soft: #4A6159;
  --pa-rule: #CFDDD6;
  --pa-green: #0B7A55;
  --pa-green-deep: #075C40;
  --pa-focus: #2B4BA8;
  --pa-error: #B42318;
  --pa-display: 'Reem Kufi', 'IBM Plex Sans Arabic', sans-serif;
  --pa-text: 'IBM Plex Sans Arabic', 'Tajawal', 'Segoe UI', sans-serif;
  background: var(--pa-paper) !important;
  background-image: none !important;
  color: var(--pa-ink) !important;
  font-family: var(--pa-text) !important;
}

/* ── Brand block ───────────────────────────────────────────────────────── */
#pharmacy-auth .auth-brand, #admin-auth .auth-brand { text-align: center; margin-bottom: 24px !important; animation: none !important; }
#pharmacy-auth .brand-logo, #admin-auth .brand-logo {
  width: 56px !important; height: 56px !important; border-radius: 14px !important;
  background: var(--pa-green) !important; box-shadow: none !important;
  display: inline-flex !important; align-items: center; justify-content: center; margin: 0 auto 12px !important;
}
#pharmacy-auth .brand-logo .material-symbols-outlined, #admin-auth .brand-logo .material-symbols-outlined { color: #FFFFFF !important; font-size: 30px !important; }
#pharmacy-auth .auth-brand h1, #admin-auth .auth-brand h1 {
  font-family: var(--pa-display) !important; font-size: 34px !important; font-weight: 700 !important;
  color: var(--pa-ink) !important; -webkit-text-fill-color: var(--pa-ink) !important;
  background: none !important; letter-spacing: 0 !important; margin: 0 !important;
}
#pharmacy-auth .auth-brand p, #admin-auth .auth-brand p { color: var(--pa-ink-soft) !important; font-size: 15px !important; margin-top: 4px !important; }

/* ── Card ──────────────────────────────────────────────────────────────── */
#pharmacy-auth .auth-card, #admin-auth .auth-card {
  background: var(--pa-sheet) !important; border: 0 !important; border-radius: 18px !important;
  box-shadow: 0 1px 0 var(--pa-rule), 0 24px 48px -28px rgba(22, 48, 42, .45) !important;
  backdrop-filter: none !important; padding: 28px !important; max-width: 420px; width: 100%;
}
#pharmacy-auth .auth-card h2, #admin-auth .auth-card h2 {
  font-family: var(--pa-display) !important; font-size: 24px !important; font-weight: 700 !important;
  color: var(--pa-ink) !important; -webkit-text-fill-color: var(--pa-ink) !important; text-align: right !important; margin-bottom: 20px !important;
}

/* ── Fields (all three portals) ────────────────────────────────────────── */
#pharmacy-auth .input-label, #admin-auth .input-label, #auth-screen .input-label {
  color: var(--pa-ink) !important; -webkit-text-fill-color: var(--pa-ink) !important;
  font-size: 14.5px !important; font-weight: 500 !important; margin-bottom: 6px !important;
}
#pharmacy-auth .input-field, #admin-auth .input-field, #auth-screen .input-field {
  background: var(--pa-sheet) !important; color: var(--pa-ink) !important; -webkit-text-fill-color: var(--pa-ink) !important;
  border: 1.5px solid var(--pa-rule) !important; border-radius: 12px !important; min-height: 52px !important;
  font-family: var(--pa-text) !important; font-size: 16px !important; box-shadow: none !important; caret-color: var(--pa-green);
}
#pharmacy-auth .input-field::placeholder, #admin-auth .input-field::placeholder, #auth-screen .input-field::placeholder {
  color: #7C918A !important; -webkit-text-fill-color: #7C918A !important; opacity: 1 !important;
}
#pharmacy-auth .input-field:focus, #admin-auth .input-field:focus, #auth-screen .input-field:focus {
  border-color: var(--pa-green) !important; outline: 3px solid rgba(43, 75, 168, .25) !important; outline-offset: 0 !important;
}
#pharmacy-auth .input-field:-webkit-autofill, #admin-auth .input-field:-webkit-autofill, #auth-screen .input-field:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 40px var(--pa-sheet) inset !important; -webkit-text-fill-color: var(--pa-ink) !important;
}
#pharmacy-auth .auth-toggle-pwd, #admin-auth .auth-toggle-pwd, #auth-screen .auth-toggle-pwd { color: var(--pa-ink-soft) !important; background: none !important; }
#pharmacy-auth .auth-toggle-pwd .material-symbols-outlined, #admin-auth .auth-toggle-pwd .material-symbols-outlined, #auth-screen .auth-toggle-pwd .material-symbols-outlined { color: var(--pa-ink-soft) !important; }

/* ── Buttons ───────────────────────────────────────────────────────────── */
#pharmacy-auth .btn-primary, #admin-auth .btn-primary, #auth-screen .btn-primary {
  background: var(--pa-green) !important; background-image: none !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important;
  border: 0 !important; border-radius: 14px !important; min-height: 52px !important; box-shadow: none !important;
  font-family: var(--pa-text) !important; font-weight: 700 !important; font-size: 16.5px !important;
}
#pharmacy-auth .btn-primary:hover, #admin-auth .btn-primary:hover, #auth-screen .btn-primary:hover { background: var(--pa-green-deep) !important; transform: none !important; }
#pharmacy-auth .btn-primary *, #admin-auth .btn-primary *, #auth-screen .btn-primary * { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; }
#auth-screen .btn-secondary, #auth-screen .auth-biometric-btn {
  background: var(--pa-sheet) !important; color: var(--pa-ink) !important; -webkit-text-fill-color: var(--pa-ink) !important;
  border: 2px solid var(--pa-ink) !important; border-radius: 14px !important; min-height: 52px !important; box-shadow: none !important;
}
#auth-screen .btn-secondary *, #auth-screen .auth-biometric-btn * { color: var(--pa-ink) !important; -webkit-text-fill-color: var(--pa-ink) !important; }

/* ── Links and errors ─────────────────────────────────────────────────── */
#pharmacy-auth a, #admin-auth a, #auth-screen a { color: var(--pa-green) !important; -webkit-text-fill-color: var(--pa-green) !important; }
#pharmacy-auth a:hover, #admin-auth a:hover, #auth-screen a:hover { text-decoration: underline !important; text-underline-offset: 4px; }
#pharmacy-auth a[href="/"], #admin-auth a[href="/"] { color: var(--pa-ink-soft) !important; -webkit-text-fill-color: var(--pa-ink-soft) !important; }
#pharmacy-auth .auth-error, #admin-auth .auth-error, #auth-screen .auth-error {
  color: var(--pa-error) !important; -webkit-text-fill-color: var(--pa-error) !important;
  background: #FEF3F2 !important; border: 1px solid #FECDCA !important; border-radius: 10px !important; padding: 10px 12px !important; font-size: 14px !important;
}

/* ── Keyboard focus, visible everywhere ───────────────────────────────── */
#pharmacy-auth a:focus-visible, #admin-auth a:focus-visible, #auth-screen a:focus-visible,
#pharmacy-auth button:focus-visible, #admin-auth button:focus-visible, #auth-screen button:focus-visible {
  outline: 3px solid var(--pa-focus) !important; outline-offset: 3px !important; border-radius: 8px;
}

/* ── Patient web login: hero, tabs and the phone/email switch ──────────── */
#auth-screen .auth-hero, #auth-screen .auth-hero * { color: var(--pa-ink) !important; -webkit-text-fill-color: var(--pa-ink) !important; background-image: none !important; }
#auth-screen .auth-hero h1, #auth-screen .auth-hero h2 { font-family: var(--pa-display) !important; font-weight: 700 !important; }
#auth-screen .auth-hero p { color: var(--pa-ink-soft) !important; -webkit-text-fill-color: var(--pa-ink-soft) !important; }
#auth-screen .auth-tabs, #auth-screen .auth-toggle-container {
  background: #E8F0EC !important; border: 0 !important; border-radius: 14px !important; padding: 4px !important; box-shadow: none !important;
}
#auth-screen .auth-tab, #auth-screen .auth-toggle-btn {
  background: transparent !important; color: var(--pa-ink-soft) !important; -webkit-text-fill-color: var(--pa-ink-soft) !important;
  border: 0 !important; border-radius: 10px !important; font-weight: 700 !important; box-shadow: none !important; min-height: 44px;
}
#auth-screen .auth-tab.active, #auth-screen .auth-toggle-btn.active {
  background: var(--pa-sheet) !important; color: var(--pa-ink) !important; -webkit-text-fill-color: var(--pa-ink) !important;
  box-shadow: 0 1px 2px rgba(22, 48, 42, .15) !important;
}
#auth-screen .auth-input-icon, #auth-screen .auth-phone-prefix { color: var(--pa-ink-soft) !important; -webkit-text-fill-color: var(--pa-ink-soft) !important; }
#auth-screen .auth-phone-card { background: transparent !important; border: 0 !important; box-shadow: none !important; }

@media (prefers-reduced-motion: reduce) {
  #pharmacy-auth *, #admin-auth *, #auth-screen * { animation: none !important; transition: none !important; }
}

/* Admin logo had a drop-shadow glow from an earlier theme layer. */
#admin-auth .brand-logo { filter: none !important; }

/* [2026-10-02] One brand mark everywhere: the green square with the white cross of dawaei.com. */
#pharmacy-auth .brand-mark, #admin-auth .brand-mark, #auth-screen .brand-mark {
  display: block; width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 14px;
}