/* auth-shared.css — the ONE shared design for every auth-style card
   (currently: login and hospital registration). Both pages link this
   file directly rather than keeping their own copy of these rules, so
   there is exactly one place that defines what an auth card/field/
   button looks like. Change it here and both pages update together -
   they cannot drift apart from each other again the way they
   previously did when register.php kept its own independent copy of
   the same rules.

   Page-specific CSS (the forgot-password modal on login.php; the step
   indicator, phone/country row, trial card, etc. on register.php)
   stays in each page's own stylesheet/style block and is layered on
   top of this file. */

:root {
  --brand-blue: #1670a8;
  --brand-blue-dark: #0f5686;
  --brand-blue-light: #e5f1f8;
  --brand-blue-lighter: #f0f7fb;
  --brand-green: #12946f;
  --brand-green-dark: #0d7a5c;
  --gradient-brand: linear-gradient(135deg, #0b2f4d 0%, #063d31 100%);
  --ink-900: #0f172a;
  --ink-700: #334155;
  --ink-500: #64748b;
  --ink-400: #94a3b8;
  --border: #e2e8f0;
  --card-bg: #ffffff;
  --radius-lg: 18px;
  --color-danger: #dc2626;
  --color-danger-bg: #fef2f2;
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  /* !important throughout: adminlte.min.css (loaded earlier in <head>
     for Bootstrap grid/modal support) includes Bootstrap's base reset,
     which sets "body { background-color: #fff }" - equal specificity to
     a plain "body" selector here, so without !important the two rules'
     relative order becomes fragile. */
  margin: 0 !important;
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  font-family: var(--font-family) !important;
  /* Was a dark navy-to-green gradient (var(--gradient-brand)) filling
     the whole page behind the card - color's job here is now to
     highlight specific things (the button, the icon badge below, focus
     states) against a light page, not to cover the entire background.
     --brand-blue-lighter is the same color family the rest of this page
     already themes off, just barely tinted rather than solid, so the
     page doesn't look starkly white/clinical while still reading as
     "light". */
  background: linear-gradient(180deg, var(--brand-blue-lighter) 0%, #ffffff 55%) !important;
}

/* Single source for the card width - both login and registration use
   this same 640px shell so the two pages feel like the same product
   instead of one being noticeably smaller than the other. */
.login-shell { width: 100%; max-width: 640px; }

.login-brand { text-align: center; margin-bottom: 14px; }

.login-brand .brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 8px;
  /* Was transparent, relying on the dark page background behind it for
     contrast. Now a light, tinted badge in the brand color itself - the
     "highlighting" role color plays now that it's not covering the
     whole page: this is the one spot above the card that's actually
     colored, drawing the eye to the logo specifically. */
  background: var(--brand-blue-light);
  border: 0;
  border-radius: 16px;
  font-size: 26px;
  font-weight: 800;
  color: var(--brand-blue);
  overflow: hidden;
}

/* Was forced to solid white via brightness(0) invert(1) - correct for
   a logo sitting on a dark background, but on this now-light background
   that would render most logos invisible (white-on-white/near-white).
   Shows the logo's own real colors instead; a transparent PNG/SVG still
   looks correct against the tinted badge above. */
.login-brand .brand-mark img { width: 100%; height: 100%; object-fit: cover; }

.login-brand .brand-name {
  font-size: 20px;
  font-weight: 700;
  /* Was #fff (invisible on a light background) - now the same dark ink
     color used for every other heading on this page, matching the
     "highlighting, not a wall of color" approach: the badge above
     carries the brand color, the name itself reads like a heading. */
  color: var(--ink-900);
  letter-spacing: -0.01em;
}

.login-card {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  /* Lighter shadow than before - the previous heavy dark shadow
     (rgba(0,0,0,.28)) was tuned to make a white card pop off a solid
     dark background; against this new light background the same card
     already has enough contrast, so a heavy shadow would look out of
     place rather than adding depth. */
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.12);
  overflow: hidden;
}

.login-card-body { padding: 34px 36px; }

.login-heading {
  margin: 0 0 16px;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink-900);
}

.login-heading small {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-500);
}

.alert-danger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  margin-bottom: 18px;
  color: var(--color-danger);
  background: var(--color-danger-bg);
  border: none;
  border-radius: 10px;
  font-size: 13px;
}

.field { margin-bottom: 16px; }

.field label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-700);
}

.field-input {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.field-input:focus-within {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(22, 112, 168, 0.12);
}

.field-input i { width: 42px; text-align: center; color: var(--ink-400); font-size: 14px; }

.field-input .toggle-password {
  width: 38px;
  text-align: center;
  color: var(--ink-400);
  font-size: 13px;
  cursor: pointer;
  background: none;
  border: none;
}
.field-input .toggle-password:hover { color: var(--ink-700); }

.field-input input,
.field-input select {
  flex: 1;
  min-width: 0;
  padding: 12px 14px 12px 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  font-family: inherit;
  color: var(--ink-900);
  appearance: none;
}

.field-input input[readonly] { color: var(--ink-500); }

.btn-login {
  width: 100%;
  margin-top: 6px;
  padding: 12px 16px;
  border: none;
  border-radius: 10px;
  background: var(--brand-blue);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.btn-login:hover { background: var(--brand-blue-dark); transform: translateY(-1px); }

.login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 16px;
  color: var(--ink-500);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.forgot-link {
  display: block;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-blue);
  text-decoration: none;
}
.forgot-link:hover { color: var(--brand-blue-dark); text-decoration: underline; }

.signin-link {
  display: block;
  text-align: center;
  margin-top: 18px;
  font-size: 13px;
  color: var(--ink-500);
}
.signin-link a { color: var(--brand-blue); font-weight: 700; text-decoration: none; }
.signin-link a:hover { color: var(--brand-blue-dark); text-decoration: underline; }

.back-home {
  display: block;
  margin-top: 22px;
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
}
.back-home:hover { color: #fff; }

@media (max-width: 560px) {
  .login-card-body { padding: 28px 22px; }
}