/* PharmaSync v95.20zzvd — login surface refresh.
   Presentation/accessibility only. Authentication and routing behavior remain unchanged. */
#ps-login-screen { min-height: 100dvh !important; }
#ps-login-eye { cursor: pointer; border-radius: 10px; }
#ps-login-eye:focus-visible,
#ps-login-submit:focus-visible,
#ps-login-forgot:focus-visible,
#ps-login-pharmacy:focus-visible,
#ps-login-candidate:focus-visible,
#ps-login-remember:focus-visible,
#ps-native-desktop-language-login-v94-425:focus-visible {
  outline: 3px solid rgba(26,111,216,.28) !important;
  outline-offset: 2px !important;
}
#ps-login-submit { cursor: pointer; }
#ps-login-forgot,
#ps-login-pharmacy,
#ps-login-candidate,
#ps-login-remember { cursor: pointer; }


/* v95.20zzvu — Consistent login credential-label hierarchy on every device.
   Username and Password labels are semi-bold; input/placeholder text remains unchanged. */
#ps-login-username-row > *:last-child:not(:first-child),
#ps-login-password-row > *:last-child:not(:first-child) {
  font-weight: 600 !important;
}

/* Phone: keep the primary task above the fold and reduce visual competition. */
@media (max-width: 600px) {
  #ps-login-screen { overflow-x: hidden !important; }
  #ps-login-card {
    width: 100% !important;
    max-width: 460px !important;
    margin: 0 auto !important;
  }
  #ps-login-brand {
    padding-top: 2px !important;
    padding-bottom: 14px !important;
  }
  #ps-login-logo,
  #ps-login-brand img {
    width: 88px !important;
    height: 88px !important;
    max-width: 88px !important;
    max-height: 88px !important;
    filter: drop-shadow(0 8px 15px rgba(26,111,216,.14));
  }
  #ps-login-title {
    margin-top: 8px !important;
    font-size: 28px !important;
    line-height: 1.12 !important;
  }
  #ps-login-audience {
    margin-bottom: 14px !important;
    padding: 8px 11px !important;
    border-radius: 11px !important;
    box-shadow: none !important;
  }
  #ps-login-input-group {
    overflow: hidden !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 24px rgba(35,55,80,.07) !important;
  }
  #ps-login-username-row,
  #ps-login-password-row {
    min-height: 56px !important;
  }
  #ps-login-eye {
    min-width: 44px !important;
    width: 44px !important;
    min-height: 44px !important;
    height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 0 !important;
  }
  html[lang="ar"] #ps-login-eye {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  #ps-login-remember {
    min-height: 42px !important;
    margin-top: 7px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
  #ps-login-submit {
    min-height: 52px !important;
    height: 52px !important;
    margin-top: 4px !important;
    border-radius: 13px !important;
    box-shadow: 0 10px 24px rgba(26,111,216,.20) !important;
  }
  #ps-login-forgot {
    min-height: 40px !important;
    justify-content: center !important;
    margin-top: 5px !important;
  }
  #ps-native-desktop-language-login-v94-425 {
    margin-top: 8px !important;
    min-height: 42px !important;
  }
  #ps-login-pharmacy {
    min-height: 44px !important;
    justify-content: center !important;
    margin-top: 14px !important;
    padding-top: 13px !important;
    border-top: 1px solid rgba(124,147,171,.18) !important;
  }
  #ps-login-candidate {
    min-height: 42px !important;
    justify-content: center !important;
    margin-top: 2px !important;
  }
  #ps-login-footer {
    margin-top: 12px !important;
    padding-bottom: max(6px, env(safe-area-inset-bottom)) !important;
  }
}

/* Dark login: make the shell and secondary surfaces belong to the same theme. */
html[data-ps-ui-theme="dark"] #ps-login-audience {
  background: rgba(77,166,255,.09) !important;
  border-color: rgba(77,166,255,.22) !important;
}
html[data-ps-ui-theme="dark"] #ps-login-input-group {
  background: rgba(22,27,34,.96) !important;
  border-color: rgba(96,107,120,.60) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.24) !important;
}
html[data-ps-ui-theme="dark"] #ps-login-username-row,
html[data-ps-ui-theme="dark"] #ps-login-password-row {
  background: transparent !important;
}
html[data-ps-ui-theme="dark"] #ps-login-pharmacy {
  border-top-color: rgba(139,148,158,.18) !important;
}

/* Tablet/desktop: stable IDs now supplement the older presentation classes. */
@media (min-width: 601px) {
  #ps-login-eye {
    min-width: 44px !important;
    min-height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #ps-login-forgot,
  #ps-login-pharmacy,
  #ps-login-candidate {
    min-height: 36px !important;
    justify-content: center !important;
  }
}

/* On phones, recovery belongs to the credential task, before the primary action. */
@media (max-width: 600px) {
  #ps-login-brand { order: 1 !important; }
  #ps-login-audience { order: 2 !important; }
  #ps-login-form { order: 3 !important; }
  #ps-login-forgot { order: 4 !important; }
  #ps-login-submit { order: 5 !important; }
  #ps-native-desktop-language-login-v94-425 { order: 6 !important; }
  #ps-login-pharmacy { order: 7 !important; }
  #ps-login-candidate { order: 8 !important; }
}


/* v95.20zzvd — French LTR alignment: keep saved-identifier control on the left. */
html[lang="fr"] #ps-login-remember {
  width: 100% !important;
  align-self: stretch !important;
  justify-content: flex-start !important;
  direction: ltr !important;
  text-align: left !important;
}
html[lang="fr"] #ps-login-remember * {
  text-align: left !important;
}

/* v95.20zzvq — Candidate onboarding CTA: make account creation clearly discoverable
   without changing login or registration behavior. */
#ps-login-candidate {
  width: 100% !important;
  min-height: 46px !important;
  margin-top: 9px !important;
  padding: 0 16px !important;
  border: 1.5px solid rgba(13, 148, 136, .42) !important;
  border-radius: 13px !important;
  background: linear-gradient(135deg, rgba(20,184,166,.13), rgba(14,165,233,.10)) !important;
  box-shadow: 0 7px 18px rgba(13,148,136,.10) !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease !important;
}
#ps-login-candidate * {
  color: #0f766e !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  text-align: center !important;
}
@media (hover:hover) and (pointer:fine) {
  #ps-login-candidate:hover {
    transform: translateY(-1px) !important;
    border-color: rgba(13,148,136,.66) !important;
    background: linear-gradient(135deg, rgba(20,184,166,.18), rgba(14,165,233,.14)) !important;
    box-shadow: 0 10px 22px rgba(13,148,136,.15) !important;
  }
}
html[data-ps-ui-theme="dark"] #ps-login-candidate {
  border-color: rgba(45,212,191,.42) !important;
  background: linear-gradient(135deg, rgba(20,184,166,.16), rgba(14,165,233,.13)) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.18) !important;
}
html[data-ps-ui-theme="dark"] #ps-login-candidate * {
  color: #5eead4 !important;
}
@media (max-width: 600px) {
  #ps-login-candidate {
    min-height: 48px !important;
    margin-top: 5px !important;
  }
}
/* Preserve the v95.20zzvo no-scroll desktop contract on short PC windows. */
@media (min-width: 900px) and (hover:hover) and (pointer:fine) and (max-height: 640px) {
  #ps-login-candidate {
    min-height: 38px !important;
    margin-top: 3px !important;
    border-radius: 11px !important;
    box-shadow: 0 5px 12px rgba(13,148,136,.09) !important;
  }
  #ps-login-candidate * { font-size: 14.5px !important; }
}
@media (min-width: 900px) and (hover:hover) and (pointer:fine) and (max-height: 540px) {
  #ps-login-candidate {
    min-height: 32px !important;
    margin-top: 2px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  #ps-login-candidate * { font-size: 13.5px !important; }
}

/* v95.20zzvt — Phone password-field fit without removing the visible label.
   Keep “Mot de passe” / “كلمة المرور” as a compact in-row label above the
   eye + password input, so the complete placeholder has the full row width. */
@media (max-width: 600px) {
  #ps-login-password-row {
    flex-wrap: wrap !important;
    align-items: stretch !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    min-height: 72px !important;
  }
  #ps-login-password-row > *:last-child:not(:first-child) {
    display: block !important;
    order: -1 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 0 1px 0 !important;
    padding: 0 6px !important;
    box-sizing: border-box !important;
    font-size: 12.5px !important;
    line-height: 16px !important;
    font-weight: 600 !important;
    text-align: start !important;
    opacity: .88 !important;
  }
  #ps-login-password-row > *:first-child {
    order: 1 !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  #ps-login-password {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    font-size: 16px !important;
  }
  #ps-login-password::placeholder {
    font-size: 15px !important;
  }
}


/* v95.20zzvv — Credential labels must remain visible on every device.
   Tablet/desktop reserve a real horizontal label column; phones stack the
   label above the control so neither the label nor placeholder is sacrificed. */
#ps-login-username-row > *:last-child:not(:first-child),
#ps-login-password-row > *:last-child:not(:first-child) {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  flex-shrink: 0 !important;
}

@media (min-width: 601px) {
  #ps-login-username-row,
  #ps-login-password-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 16px !important;
  }
  #ps-login-username-row > *:first-child,
  #ps-login-password-row > *:first-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
  }
  #ps-login-username-row > *:last-child:not(:first-child),
  #ps-login-password-row > *:last-child:not(:first-child) {
    flex: 0 0 clamp(132px, 29%, 176px) !important;
    width: auto !important;
    min-width: 132px !important;
    max-width: 176px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    line-height: 22px !important;
  }
  html[lang="fr"] #ps-login-username-row > *:last-child:not(:first-child),
  html[lang="fr"] #ps-login-password-row > *:last-child:not(:first-child) {
    text-align: left !important;
  }
  html[lang="ar"] #ps-login-username-row > *:last-child:not(:first-child),
  html[lang="ar"] #ps-login-password-row > *:last-child:not(:first-child) {
    text-align: right !important;
    direction: rtl !important;
  }
}

@media (max-width: 600px) {
  #ps-login-username-row,
  #ps-login-password-row {
    flex-wrap: wrap !important;
    align-items: stretch !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    min-height: 72px !important;
  }
  #ps-login-username-row > *:last-child:not(:first-child),
  #ps-login-password-row > *:last-child:not(:first-child) {
    order: -1 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 0 1px 0 !important;
    padding: 0 6px !important;
    box-sizing: border-box !important;
    font-size: 12.5px !important;
    line-height: 16px !important;
    text-align: start !important;
  }
  #ps-login-username-row > *:first-child,
  #ps-login-password-row > *:first-child {
    order: 1 !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  #ps-login-username,
  #ps-login-password {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 16px !important;
  }
}


/* v95.20zzvw — Mobile credentials use the same single-line structure as PC.
   Keep the visible label and input side-by-side; never stack the label above
   the field. Narrow phones compress spacing/type instead of creating a second row. */
@media (max-width: 600px) {
  #ps-login-username-row,
  #ps-login-password-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 52px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  #ps-login-username-row > *:first-child,
  #ps-login-password-row > *:first-child {
    order: initial !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
  }

  #ps-login-username-row > *:last-child:not(:first-child),
  #ps-login-password-row > *:last-child:not(:first-child) {
    display: block !important;
    order: initial !important;
    flex: 0 0 104px !important;
    width: 104px !important;
    min-width: 104px !important;
    max-width: 104px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    font-size: 13px !important;
    line-height: 17px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  html[lang="fr"] #ps-login-username-row,
  html[lang="fr"] #ps-login-password-row,
  html[data-ps-lang="fr"] #ps-login-username-row,
  html[data-ps-lang="fr"] #ps-login-password-row {
    flex-direction: row-reverse !important;
  }
  html[lang="fr"] #ps-login-username-row > *:last-child:not(:first-child),
  html[lang="fr"] #ps-login-password-row > *:last-child:not(:first-child),
  html[data-ps-lang="fr"] #ps-login-username-row > *:last-child:not(:first-child),
  html[data-ps-lang="fr"] #ps-login-password-row > *:last-child:not(:first-child) {
    text-align: left !important;
    direction: ltr !important;
  }

  html[lang="ar"] #ps-login-username-row,
  html[lang="ar"] #ps-login-password-row,
  html[data-ps-lang="ar"] #ps-login-username-row,
  html[data-ps-lang="ar"] #ps-login-password-row {
    flex-direction: row-reverse !important;
  }
  html[lang="ar"] #ps-login-username-row > *:last-child:not(:first-child),
  html[lang="ar"] #ps-login-password-row > *:last-child:not(:first-child),
  html[data-ps-lang="ar"] #ps-login-username-row > *:last-child:not(:first-child),
  html[data-ps-lang="ar"] #ps-login-password-row > *:last-child:not(:first-child) {
    text-align: right !important;
    direction: rtl !important;
  }

  #ps-login-username,
  #ps-login-password {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 16px !important;
  }
  #ps-login-username::placeholder,
  #ps-login-password::placeholder {
    font-size: 14px !important;
  }
}

@media (max-width: 340px) {
  #ps-login-username-row,
  #ps-login-password-row {
    gap: 4px !important;
  }
  #ps-login-username-row > *:last-child:not(:first-child),
  #ps-login-password-row > *:last-child:not(:first-child) {
    flex-basis: 96px !important;
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
    font-size: 11.8px !important;
  }
  #ps-login-username::placeholder {
    font-size: 13px !important;
  }
  #ps-login-password::placeholder {
    font-size: 12.2px !important;
  }
}


/* v95.20zzvx — Arabic mobile credential rows keep the PC-style single-line
   composition but use a true RTL main axis.  The DOM stores the input first
   and label second; row-reverse + direction:rtl therefore places the label on
   the right and the field on the left, matching the Arabic desktop layout. */
@media (max-width: 600px) {
  html[lang="ar"] #ps-login-username-row,
  html[lang="ar"] #ps-login-password-row,
  html[data-ps-lang="ar"] #ps-login-username-row,
  html[data-ps-lang="ar"] #ps-login-password-row {
    direction: rtl !important;
    flex-direction: row-reverse !important;
  }
  html[lang="ar"] #ps-login-username,
  html[lang="ar"] #ps-login-password,
  html[data-ps-lang="ar"] #ps-login-username,
  html[data-ps-lang="ar"] #ps-login-password {
    text-align: right !important;
  }
}


/* v95.20zzvy — Arabic password eye belongs on the physical LEFT of the field.
   Keep the outer credential row RTL (label on the right), but isolate only the
   inner eye + password-control flex row from inherited RTL. The input itself
   remains RTL/right-aligned. Applies to phone, tablet and desktop. */
html[lang="ar"] #ps-login-password-row > *:first-child,
html[data-ps-lang="ar"] #ps-login-password-row > *:first-child {
  direction: ltr !important;
  flex-direction: row !important;
}
html[lang="ar"] #ps-login-password,
html[data-ps-lang="ar"] #ps-login-password {
  direction: rtl !important;
  text-align: right !important;
}
html[lang="ar"] #ps-login-eye,
html[data-ps-lang="ar"] #ps-login-eye {
  order: 0 !important;
  margin-left: 0 !important;
  margin-right: 4px !important;
}

/* The security lock shown directly above the version is always a PharmaSync
   SVG icon in both locales; never fall back to native emoji styling. */
#ps-login-footer [data-ps-icon="lock"] {
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
}

/* v95.20zzwe — French credential rows are unambiguously LTR on every device.
   The React DOM stores the field/control before the visible label. Use explicit
   flex order instead of relying on inherited direction/row-reverse so the
   French label is physically left and the control is physically right. */
html[lang="fr"] #ps-login-username-row,
html[lang="fr"] #ps-login-password-row,
html[data-ps-lang="fr"] #ps-login-username-row,
html[data-ps-lang="fr"] #ps-login-password-row {
  direction: ltr !important;
  flex-direction: row !important;
}
html[lang="fr"] #ps-login-username-row > *:last-child:not(:first-child),
html[lang="fr"] #ps-login-password-row > *:last-child:not(:first-child),
html[data-ps-lang="fr"] #ps-login-username-row > *:last-child:not(:first-child),
html[data-ps-lang="fr"] #ps-login-password-row > *:last-child:not(:first-child) {
  order: 0 !important;
  direction: ltr !important;
  text-align: left !important;
}
html[lang="fr"] #ps-login-username-row > *:first-child,
html[lang="fr"] #ps-login-password-row > *:first-child,
html[data-ps-lang="fr"] #ps-login-username-row > *:first-child,
html[data-ps-lang="fr"] #ps-login-password-row > *:first-child {
  order: 1 !important;
  direction: ltr !important;
}
html[lang="fr"] #ps-login-username,
html[lang="fr"] #ps-login-password,
html[data-ps-lang="fr"] #ps-login-username,
html[data-ps-lang="fr"] #ps-login-password {
  direction: ltr !important;
  text-align: left !important;
}
/* Preserve the established French eye-on-right layout inside the password control. */
html[lang="fr"] #ps-login-password-row > *:first-child,
html[data-ps-lang="fr"] #ps-login-password-row > *:first-child {
  flex-direction: row-reverse !important;
}