/*
 * portal-login-theme.css — BahaaldinEMR skin for the PATIENT PORTAL login page.
 *
 * Mounted at public/themes/style_bahaaldin_portal.css and selected by the
 * `portal_css_header` global. This exists so the login page can be branded with
 * ZERO core overrides: portal/index.php is stock (43 KB) and overriding it
 * would need re-diffing on every OpenEMR upgrade — exactly the maintenance
 * trap the dropped CCDA overrides taught.
 *
 * It IMPORTS the stock sheet first and only overrides afterwards, so every
 * other page that inherits this global (the account/reset pages, the stock
 * messaging screens, the Backbone patient app) keeps its Bootstrap layout and
 * merely changes colour. Removing the @import would break those pages.
 *
 * The stock sheet's relative url(../assets/…) references keep resolving because
 * this file sits in the SAME directory it does.
 *
 * Tokens are the ones portal_epic.php uses, so the login page and the workspace
 * the patient lands in are visibly the same product.
 */

@import url("style_dark.css");

:root {
  --bg: #0f1620;
  --panel: #16202c;
  --panel2: #1b2836;
  --border: #26374a;
  --soft: #1f2e3d;
  --text: #e6edf5;
  --muted: #93a4b8;
  --accent: #4a9eff;
  --danger: #ff6b6b;
  --navy: #122d4d;
}

/* ── Page ─────────────────────────────────────────────────────────────── */
body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  -webkit-text-size-adjust: 100%;
}

/* ⚠️ Stock's inline <style> (emitted AFTER this sheet, so it wins at equal
   specificity) sets `body { display:flex; align-items:center; height:100vh }`.
   On a phone that CLIPS the top of any form taller than the viewport — the
   forced-credential-reset screen loses its heading and cannot be scrolled back
   to. Anchor to the top and let the page grow instead. */
body.login {
  align-items: flex-start !important;
  height: auto !important;
  min-height: 100vh;
  padding: 18px 0 calc(28px + env(safe-area-inset-bottom));
  overflow-y: auto;
}

/* The card lives on #wrapper, not on .container-xl: the login branch has both
   elements but the credential-reset branch has only #wrapper, and styling the
   inner one would leave that screen with no card at all. Higher specificity
   than the inline `.login-wrapper` rule, so the width/padding here win. */
#wrapper.login-wrapper {
  width: auto;
  max-width: 460px !important;
  margin: 0 auto !important;
  padding: 22px 20px !important;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35) !important;
}

/* …and the inner container stops being a second, nested card. */
.login-wrapper .container-xl {
  background: transparent;
  border: 0;
  padding: 0 !important;
  max-width: none;
}

/* ── Brand mark ───────────────────────────────────────────────────────── */
/* The white variant, deliberately: the navy artwork knocks the cross OUT and
   relies on a light card behind it, which is invisible on this dark panel.
   (Same reasoning as the topbar mark — see CLAUDE.md "brand surfaces".) */
.login-wrapper .img-fluid.text-center { margin: 4px 0 18px; }

img.login-logo {
  width: 86px;
  height: 86px;
  object-fit: contain;
}

/* The page already prints the site's configured portal title in a <legend>.
   Style THAT rather than adding a wordmark of our own — one source of truth,
   and it follows the practice name if it is ever changed. Stock ships it as
   `bg-light text-dark`, i.e. a grey band with dark text, which is wrong on a
   dark card. */
.login-wrapper legend {
  background: transparent !important;
  color: var(--text) !important;
  padding: 0 !important;
  margin: 0 0 18px !important;
  border: 0;
  text-align: center;
}
.login-wrapper legend h1,
.login-wrapper legend h2,
.login-wrapper legend h3 {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .2px;
  margin: 0;
  color: var(--text) !important;
}
/* Bootstrap utility classes the stock markup hardcodes on that band. */
.login-wrapper .bg-light { background: transparent !important; }
.login-wrapper .text-dark { color: var(--text) !important; }

/* ── Fields ───────────────────────────────────────────────────────────── */
.login-wrapper .form-group { margin-bottom: 14px; }

.login-wrapper .form-control,
.login-wrapper input.form-control,
.login-wrapper select.form-control {
  background: var(--bg) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 9px !important;
  min-height: 48px;
  /* 16px keeps iOS from zooming the page when a field takes focus. */
  font-size: 16px !important;
  padding: 11px 12px !important;
  box-shadow: none !important;
}

.login-wrapper .form-control::placeholder { color: var(--muted) !important; }

.login-wrapper .form-control:focus {
  border-color: var(--accent) !important;
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* The show/hide-password affordance sits in an input-group addon. */
.login-wrapper .input-group-text {
  background: var(--soft) !important;
  border: 1px solid var(--border) !important;
  border-left: 0 !important;
  border-radius: 0 9px 9px 0 !important;
  color: var(--muted) !important;
  min-height: 48px;
}
.login-wrapper .input-group .form-control { border-radius: 9px 0 0 9px !important; }

/* ── Buttons ──────────────────────────────────────────────────────────── */
/* Stock uses btn-success (green). Ours is the portal accent, so the login and
   the workspace agree on what a primary action looks like. */
.login-wrapper .btn-success,
.login-wrapper .btn-primary {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #04121f !important;
  font-weight: 650;
  border-radius: 9px !important;
  min-height: 48px;
  font-size: 15.5px;
}
.login-wrapper .btn-success:hover,
.login-wrapper .btn-success:focus {
  background: #6cb0ff !important;
  border-color: #6cb0ff !important;
}
.login-wrapper .btn-secondary {
  background: var(--soft) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  border-radius: 9px !important;
  min-height: 48px;
}

/* ── Messages ─────────────────────────────────────────────────────────── */
/* The `&w` family of failures renders here. Stock styles them as a yellow
   Bootstrap warning on a dark page — low contrast and alarming for what is
   usually a typo. */
.login-wrapper .alert {
  border-radius: 10px !important;
  font-size: 14px;
  background: rgba(255, 107, 107, .12) !important;
  border: 1px solid rgba(255, 107, 107, .35) !important;
  color: #ffd4d4 !important;
}
.login-wrapper .alert .close { color: #ffd4d4 !important; opacity: .8; }

/* ── Forced credential reset ──────────────────────────────────────────────
   NOT a rare branch: freshly issued portal credentials carry
   portal_pwd_status = 0, so "Please Enter New Credentials" is the FIRST screen
   a new patient ever sees. It reuses #wrapper.login-wrapper (so the card,
   inputs and buttons above already apply) but lays out with .form-row /
   .col-form-label instead of .form-group, and titles with h2.title. */
.login-wrapper h2.title {
  font-size: 19px;
  font-weight: 700;
  text-align: center;
  margin: 0 0 18px;
  color: var(--text);
}

.login-wrapper .form-row { margin: 0 0 14px !important; }

.login-wrapper .col-form-label {
  padding-bottom: 4px;
  font-size: 13px;
  color: var(--muted);
}

/* The stock placeholders here carry the password rules ("Min length is 8 with
   upper,lowercase,numbers mix"), which is the only place a patient is told
   them — keep them legible rather than washed out. */
.login-wrapper .form-control::placeholder { opacity: 1; }

.login-wrapper input.btn[type="button"],
.login-wrapper input.btn[type="submit"] {
  min-height: 48px;
  border-radius: 9px !important;
  font-weight: 650;
  margin-top: 6px;
}
.login-wrapper input.btn-primary[type="submit"] {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #04121f !important;
}

/* ── Getting-in help ──────────────────────────────────────────────────────
   Self-service password reset is not enabled on this install (it needs
   reCAPTCHA keys and a mail relay), so the stock page offers a locked-out
   patient nothing at all. Worse, stock's only failure message is
   "Something went wrong. Please try again." — its own source carries the
   comment "Would be good to include some clue about what went wrong!" — and
   bsAlert auto-dismisses it after a few seconds.

   A permanent line under the form is the honest fix: it is always visible,
   never races a timeout, and does not hijack the alert element (whose text we
   cannot change from CSS anyway, and which is also used for success states).
   If the reset flow is ever enabled, delete this block. */
.login-wrapper form::after {
  content: "Trouble signing in? Call the office and we can reset your access for you.";
  display: block;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}

/* ── Footer / misc ────────────────────────────────────────────────────── */
.login-wrapper a { color: var(--accent); }
.login-wrapper label, .login-wrapper .col-form-label { color: var(--muted); font-size: 13px; }

/* Anything the stock sheet paints white-on-white inside our dark card. */
.login-wrapper .card, .login-wrapper .card-body {
  background: transparent !important;
  border: 0 !important;
  color: var(--text) !important;
}

@media (max-width: 480px) {
  .login-wrapper .container-xl { margin-top: 14px; border-radius: 12px; }
  img.login-logo { width: 74px; height: 74px; }
}