/* ==========================================================================
   PMC PIRES login — presentation only.

   Same design system as CSS/reports.css (tokens, teal palette, NRT, arc hero).
   The token block is repeated rather than @import-ed so each page loads
   exactly one stylesheet and the service worker caches one file per page.

   Direction comes from one place: dir="rtl|ltr" on <html>. Every rule here
   uses CSS logical properties so the layout mirrors from that single
   attribute. Do not introduce padding-left/right, margin-left/right or bare
   left:/right: — they will not flip for Arabic, Kurdish or Badini.

   Unlike the reports page this one does NOT scroll: hero + sheet fill the
   viewport and only the form area gives way on a short screen.

   ---------------------------------------------------------------------------
   ADMIN-THEMABLE. Login.php writes a `:root` override block from the settings
   in Connection/login_page_settings.php, so the five tokens below marked
   "admin" are replaced at render time. Everything else derives from them:
   change --cta and the tabs, button, links and focus ring all follow. Keep it
   that way — do not hard-code the teal anywhere below.
   ========================================================================== */

@font-face {
  font-family: 'NRT';
  src: url('../Font/NRT%20Font/NRT-Reg.woff') format('woff'),
       url('../Font/NRT%20Font/NRT-Reg.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- admin-themable (Login.php overrides these from the settings) --- */
  --cta: #0f766e;           /* accent_color     — primary button, active tab */
  --sheet: #ffffff;         /* panel_background — the white sheet            */
  --ink: #0f172a;           /* text_color       — body text                  */
  --page: #eef3f5;          /* page_background  — behind the sheet           */
  --hero-base: #072a31;     /* top_bar_color    — the hero                   */

  /* --- derived from the admin tokens --- */
  --cta-hov: color-mix(in srgb, var(--cta) 88%, #000);
  --ring: color-mix(in srgb, var(--cta) 65%, #5eead4);
  --cta-soft: color-mix(in srgb, var(--cta) 14%, transparent);

  /* The arc hero: two offset radial pools over a diagonal base. Each stop is
     mixed from --hero-base so a single admin colour re-tints the whole thing
     instead of needing five pickers. */
  --arc-1: color-mix(in srgb, var(--hero-base) 88%, #000);
  --arc-2: color-mix(in srgb, var(--hero-base) 82%, #ffffff);
  --arc-3: color-mix(in srgb, var(--hero-base) 68%, #ffffff);
  --hero-grad:
    radial-gradient(circle at 96% -28%, var(--arc-3) 0 45%, transparent 45.4%),
    radial-gradient(circle at 96% -28%, var(--arc-2) 0 74%, transparent 74.4%),
    linear-gradient(165deg, var(--arc-1) 0%, var(--hero-base) 100%);

  --field: #f1f5f7;
  --muted: #5d6b7d;
  --line: #e3eaee;
  --card-line: #cddfe2;

  --danger-bg: #fef2f2;
  --danger-line: #fecaca;
  --danger-ink: #b91c1c;
  --ok-bg: #ecfdf5;
  --ok-line: #a7f3d0;
  --ok-ink: #065f46;

  --pad-x: clamp(14px, 4vw, 26px);
  --radius: clamp(16px, 4vw, 22px);
  --gap: clamp(10px, 2vh, 14px);

  --font: 'NRT', 'Segoe UI', Tahoma, Arial, sans-serif;
}

html[lang="ar"] { --font: 'NRT', 'Noto Sans Arabic', Tahoma, Arial, sans-serif; }
html[lang="ku"], html[lang="ba"] { --font: 'NRT', 'Noto Sans Arabic', Tahoma, sans-serif; }

/* color-mix is recent. Without it the derived tokens above resolve to nothing
   and the page would lose its accent entirely, so restate flat fallbacks. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  :root {
    --cta-hov: #0e6d66;
    --ring: #14b8a6;
    --cta-soft: rgba(15, 118, 110, .14);
    --arc-1: #0a333c;
    --arc-2: #0d3f49;
    --arc-3: #12505c;
  }
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
  min-block-size: 100vh;
  min-block-size: 100dvh;
  overflow-x: hidden;
}

.auth-shell {
  display: flex;
  flex-direction: column;
  min-block-size: 100vh;
  min-block-size: 100dvh;
  max-inline-size: 560px;
  margin-inline: auto;
}

/* ===== Hero ===== */
.hero {
  position: relative;
  background: var(--hero-grad);
  color: #fff;
  padding-block-start: calc(env(safe-area-inset-top, 0px) + clamp(14px, 3vh, 22px));
  padding-block-end: clamp(20px, 4vh, 34px);
  padding-inline: var(--pad-x);
  border-end-start-radius: var(--radius);
  border-end-end-radius: var(--radius);
  box-shadow: 0 6px 22px rgba(7, 42, 49, .22);
}

.hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.hero-brand {
  display: flex;
  align-items: center;
  min-inline-size: 0;
}
.hero-brand img {
  block-size: clamp(38px, 8vw, 52px);
  inline-size: auto;
  max-inline-size: 190px;
  object-fit: contain;
  /* The logo is supplied by the lab and is usually dark artwork on white, so
     it is given its own light plate rather than being dropped onto the hero. */
  background: #fff;
  border-radius: 12px;
  padding: 5px 9px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
}

.hero h1 {
  margin-block-start: clamp(16px, 3.4vh, 26px);
  font-size: clamp(1.35rem, 5.2vw, 1.72rem);
  font-weight: 700;
  letter-spacing: .2px;
}
.hero-sub {
  margin-block-start: 5px;
  font-size: clamp(.82rem, 3.2vw, .92rem);
  color: rgba(255, 255, 255, .82);
}

/* ===== Language + install chips ===== */
.lang-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  flex: none;
}

.lang-btn, .install-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font: inherit;
  font-size: .74rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 7px 11px;
  min-block-size: 34px;
  cursor: pointer;
  transition: background .2s;
}
.lang-btn:hover, .install-chip:hover { background: rgba(255, 255, 255, .22); }

/* The install chip only exists once the browser says an install is possible
   (js/login.js flips data-ready), so it must start hidden. */
.install-chip[data-ready="false"] { display: none; }

.lang-pop, .ios-pop {
  position: absolute;
  inset-block-start: calc(100% + 8px);
  inset-inline-end: 0;
  z-index: 40;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(7, 42, 49, .28);
  padding: 6px;
  min-inline-size: 172px;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .18s, transform .18s;
}
.lang-pop[data-open="true"], .ios-pop[data-open="true"] {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.lang-opt {
  display: flex;
  align-items: center;
  gap: 9px;
  inline-size: 100%;
  border: 0;
  background: none;
  font: inherit;
  font-size: .86rem;
  color: var(--ink);
  padding: 9px 10px;
  border-radius: 10px;
  cursor: pointer;
  text-align: start;
}
.lang-opt:hover { background: var(--field); }
.lang-opt.active { background: var(--cta-soft); color: var(--cta); font-weight: 700; }
.lang-opt img { inline-size: 18px; block-size: 18px; border-radius: 50%; object-fit: cover; flex: none; }

.ios-pop { min-inline-size: 236px; padding: 13px; color: var(--ink); }
.ios-pop-title { font-size: .88rem; font-weight: 700; margin-block-end: 9px; }
.ios-steps { list-style: none; display: grid; gap: 8px; }
.ios-steps li { display: flex; align-items: flex-start; gap: 8px; font-size: .8rem; line-height: 1.45; }
.ios-num {
  flex: none;
  inline-size: 19px;
  block-size: 19px;
  border-radius: 50%;
  background: var(--cta);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ios-share { color: var(--cta); margin-inline-start: 3px; }

/* ===== Sheet ===== */
.sheet {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding-inline: var(--pad-x);
  padding-block-start: clamp(14px, 2.6vh, 20px);
  padding-block-end: calc(env(safe-area-inset-bottom, 0px) + clamp(14px, 2.6vh, 20px));
}

/* ===== Role tabs =====
   The same segmented component as .rep-segs on the reports page: the thumb is
   anchored logically and moved by a transform whose sign --dir flips, so it
   tracks correctly in RTL and js/login.js never needs a direction check — it
   only ever sets --i to 0, 1 or 2. */
.role-tabs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: #fff;
  border-radius: 999px;
  padding: 4px;
  --i: 0;
  --dir: 1;
  box-shadow: 0 2px 10px rgba(7, 42, 49, .06);
}
[dir="rtl"] .role-tabs { --dir: -1; }

.role-tabs::before {
  content: "";
  position: absolute;
  inset-block: 4px;
  inset-inline-start: 4px;
  inline-size: calc((100% - 8px) / 3);
  border-radius: 999px;
  background: var(--cta);
  transform: translateX(calc(var(--i) * var(--dir) * 100%));
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}

.role-tab {
  position: relative;
  z-index: 1;
  background: none;
  border: 0;
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  color: var(--muted);
  block-size: 40px;
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: color .2s;
}
.role-tab[aria-selected="true"] { color: #fff; }
.role-tab i { font-size: .82rem; }

/* ===== Doctors strip =====
   PMC PIRES addition, not in the source design: the consultants are shown on
   the login page. One block per doctor, free text from the admin settings, so
   the number of lines and the number of doctors are both open-ended. */
.doctors-strip {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.doctor-card {
  background: var(--sheet);
  border: 1px solid var(--card-line);
  border-radius: 14px;
  padding: 9px 12px;
  text-align: center;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--cta);
  white-space: pre-line;
  box-shadow: 0 2px 10px rgba(7, 42, 49, .05);
}

/* ===== Alerts ===== */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  background: var(--danger-bg);
  border: 1px solid var(--danger-line);
  color: var(--danger-ink);
  border-radius: 13px;
  padding: 11px 13px;
  font-size: .84rem;
  line-height: 1.5;
}
.alert i { margin-block-start: 2px; flex: none; }

.prefill-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--ok-bg);
  border: 1px solid var(--ok-line);
  color: var(--ok-ink);
  border-radius: 12px;
  padding: 9px 12px;
  font-size: .8rem;
  margin-block-end: 4px;
}
.prefill-note button {
  border: 0;
  background: none;
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
  color: var(--cta);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
}

/* ===== Forms =====
   All three are in the DOM; only the active one is shown. display:none rather
   than visibility so a hidden form's required fields never block submit. */
.forms-wrap { flex: 1; }
.login-form { display: none; }
.login-form.active { display: block; }

.field { margin-block-end: 12px; }
.field > label {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
  margin-block-end: 6px;
}

.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap > i {
  position: absolute;
  inset-inline-start: 14px;
  color: var(--muted);
  font-size: .9rem;
  pointer-events: none;
}
.input-wrap input {
  inline-size: 100%;
  block-size: 50px;
  border: 1.5px solid transparent;
  background: var(--field);
  border-radius: 13px;
  font: inherit;
  /* 16px: anything smaller makes iOS Safari zoom in on focus. */
  font-size: 16px;
  color: var(--ink);
  padding-inline-start: 42px;
  padding-inline-end: 14px;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.input-wrap.has-toggle input { padding-inline-end: 46px; }
.input-wrap input::placeholder { color: var(--muted); opacity: .75; }
.input-wrap input:focus {
  outline: none;
  background: var(--sheet);
  border-color: var(--ring);
  box-shadow: 0 0 0 4px var(--cta-soft);
}
.input-wrap input[readonly] { opacity: .78; }

.toggle-pass {
  position: absolute;
  inset-inline-end: 6px;
  inline-size: 38px;
  block-size: 38px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: .9rem;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.toggle-pass:hover { color: var(--cta); background: var(--field); }

.remember-row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-block: 4px 14px;
  min-block-size: 30px;
}
.remember-row input[type="checkbox"] {
  inline-size: 19px;
  block-size: 19px;
  flex: none;
  accent-color: var(--cta);
  cursor: pointer;
}
.remember-row label { font-size: .84rem; color: var(--muted); cursor: pointer; }

.login-btn {
  inline-size: 100%;
  min-block-size: 52px;
  border: 0;
  border-radius: 14px;
  background: var(--cta);
  color: #fff;
  font: inherit;
  font-size: .98rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  box-shadow: 0 8px 22px var(--cta-soft);
  transition: background .2s, transform .12s;
}
.login-btn:hover { background: var(--cta-hov); }
.login-btn:active { transform: scale(.988); }
.login-btn[disabled] { opacity: .55; cursor: not-allowed; box-shadow: none; }
.login-btn.auto-login { background: var(--ok-ink); }

/* ===== Footer ===== */
.sheet-foot {
  margin-block-start: auto;
  padding-block-start: 6px;
  display: grid;
  gap: 9px;
  justify-items: center;
}
.quick-links { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.quick-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--sheet);
  border: 1px solid var(--card-line);
  color: var(--cta);
  text-decoration: none;
  font-size: .78rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 8px 14px;
  min-block-size: 36px;
  transition: background .18s;
}
.quick-link:hover { background: var(--cta-soft); }
.site-credit { font-size: .72rem; color: var(--muted); text-align: center; }

/* ===== Wider screens =====
   The design stays a single centred column — it is a phone-first layout that
   simply gains breathing room, not a second column. */
@media (min-width: 640px) {
  .auth-shell {
    min-block-size: auto;
    margin-block: clamp(20px, 6vh, 56px);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 30px 70px rgba(7, 42, 49, .18);
    background: var(--sheet);
  }
  .hero { border-end-start-radius: 0; border-end-end-radius: 0; }
  body { display: block; }
}

/* Touch devices have no hover state, so a tapped control would keep its hover
   colour until the next tap. */
@media (hover: none) {
  .login-btn:hover { background: var(--cta); }
  .quick-link:hover { background: var(--sheet); }
  .toggle-pass:hover { color: var(--muted); background: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}