/* Spartacus EHR -- shared authentication shell.  (one source for five pages)
 * =============================================================================
 * Used by: login.php and admin_login.php (includes/login_template.php),
 *          forgot_password*.php (includes/forgot_password_template.php),
 *          reset_password.php (includes/reset_password_template.php),
 *          admin_mfa.php, patient_mfa.php
 *
 * WHY THIS FILE EXISTS
 * --------------------
 * This shell was copy-pasted into four files and had already drifted: of the 23
 * rules all four shared, EIGHT differed -- orbs 340px here and 320px there,
 * margins 20 vs 22, the mobile avatar 96px vs 88px. Nobody chose any of that;
 * it is what four copies do. The five footers went the same way, which is why
 * they now come from brand_attribution().
 *
 * CANONICAL VALUES ARE login_template.php's, because it is the primary surface.
 * Adopting them moves the other pages by a few pixels -- that is the cost of
 * having one answer, and it was accepted deliberately on 2026-10-26.
 *
 * ⚠️ THE DESIGN TOKENS ARE NOT HERE. The :root block calls brand_css_vars(),
 * so it is per-practice and must stay in PHP: includes/auth_tokens.php. This
 * file only REFERENCES var(--brand), var(--sx-*) and so on. A page that links
 * this stylesheet without including that partial renders unstyled, so the two
 * go together -- tests/test_auth_shell.php asserts it.
 *
 * ⚠️ Paths are relative to the WEB ROOT. All five pages live there (the three
 * templates are included BY root-level pages, so relative URLs resolve against
 * the including script), which is why the existing css/bootstrap.min.css links
 * work the same way.
 *
 * ⚠️ Add a page-specific rule to that PAGE, not here, and mark it with the
 * SX-AUTH-OVERRIDE comment the test looks for. Dropping it in here because it
 * is "auth-ish" is how this file becomes four files again.
 */

    *, *::before, *::after { box-sizing: border-box; }
    html, body { height: 100%; margin: 0; padding: 0; }
    body {
      font-family: 'Roboto', sans-serif;
      background: var(--sx-light);
      min-height: 100vh;
      overflow-x: hidden;
    }

    /* ── Wrapper ── */
    .sx-auth-wrap {
      display: flex;
      min-height: 100vh;
    }

    /* ── Left Panel ── */
    .sx-auth-left {
      width: 42%;
      min-height: 100vh;
      background: linear-gradient(145deg, #08090D 0%, #0F1018 52%, #1a1d3d 100%);
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 56px 48px;
      flex-shrink: 0;
    }
    .sx-auth-orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(90px);
      pointer-events: none;
    }
    .sx-auth-orb-1 {
      width: 340px; height: 340px;
      background: radial-gradient(circle, rgba(var(--brand-2-rgb),0.55) 0%, transparent 70%);
      top: -80px; left: -60px;
      animation: aqAuthOrb1 20s ease-in-out infinite;
    }
    .sx-auth-orb-2 {
      width: 260px; height: 260px;
      background: radial-gradient(circle, rgba(var(--brand-rgb),0.45) 0%, transparent 70%);
      bottom: 40px; right: -50px;
      animation: aqAuthOrb2 24s ease-in-out infinite;
    }
    .sx-auth-orb-3 {
      width: 200px; height: 200px;
      background: radial-gradient(circle, rgba(45,49,99,0.7) 0%, transparent 70%);
      top: 50%; left: 60%;
      transform: translate(-50%,-50%);
      animation: aqAuthOrb3 17s ease-in-out infinite;
    }
    @keyframes aqAuthOrb1 {
      0%,100% { transform: translate(0,0) scale(1); }
      50%      { transform: translate(38px,55px) scale(1.13); }
    }
    @keyframes aqAuthOrb2 {
      0%,100% { transform: translate(0,0) scale(1); }
      50%      { transform: translate(-28px,-42px) scale(1.2); }
    }
    @keyframes aqAuthOrb3 {
      0%,100% { transform: translate(-50%,-50%) scale(1); }
      50%      { transform: translate(-50%,-50%) scale(1.35); }
    }
    @keyframes aqFloat {
      0%,100% { transform: translateY(0); }
      50%      { transform: translateY(-18px); }
    }

    .sx-auth-bearer {
      width: 144px; height: 144px; object-fit: cover;
      border-radius: 50%;
      padding: 4px; background: #fff;
      border: 1px solid rgba(255,255,255,0.55);
      box-shadow: 0 0 0 3px rgba(var(--brand-rgb),0.35), 0 8px 36px rgba(var(--brand-rgb),0.5), 0 4px 16px rgba(0,0,0,0.3);
      animation: aqFloat 7s ease-in-out infinite;
      position: relative; z-index: 2;
      margin-bottom: 28px; flex-shrink: 0;
    }
    .sx-feat-icon i { color: var(--sx-brand); font-size: 14px; }
    .sx-auth-left-title {
      font-size: 23px;
      font-weight: 700;
      color: #fff;
      text-align: center;
      line-height: 1.3;
      position: relative;
      z-index: 2;
      margin-bottom: 6px;
    }
    .sx-auth-left-sub {
      font-size: 13px;
      color: rgba(255,255,255,0.52);
      text-align: center;
      margin-bottom: 36px;
      position: relative;
      z-index: 2;
    }
    .sx-auth-features {
      list-style: none;
      width: 100%;
      max-width: 290px;
      position: relative;
      z-index: 2;
      padding: 0;
      margin: 0;
    }
    .sx-auth-features li {
      display: flex;
      align-items: center;
      gap: 12px;
      color: rgba(255,255,255,0.82);
      font-size: 13.5px;
      font-weight: 500;
      padding: 11px 0;
      border-bottom: 1px solid rgba(255,255,255,0.07);
    }
    .sx-auth-features li:last-child { border-bottom: none; }
    .sx-feat-icon {
      width: 34px; height: 34px;
      border-radius: 9px;
      background: rgba(var(--brand-rgb),0.18);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      flex-shrink: 0;
      border: 1px solid rgba(var(--brand-rgb),0.22);
    }
    .sx-auth-home {
      position: relative;
      z-index: 2;
      margin-top: 44px;
      color: rgba(255,255,255,0.38);
      font-size: 13px;
      text-decoration: none !important;
      transition: color 0.2s;
      display: flex;
      align-items: center;
      gap: 7px;
    }
    .sx-auth-home:hover { color: rgba(255,255,255,0.75); }

    /* ── Right Panel ── */
    .sx-auth-right {
      flex: 1;
      min-height: 100vh;
      background: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 60px 48px;
    }
    .sx-auth-form-inner {
      width: 100%;
      max-width: 400px;
    }
    .sx-auth-logo {
      width: 66px; height: 66px;
      border-radius: 50%;
      object-fit: cover;
      box-shadow: 0 4px 22px rgba(var(--brand-2-rgb),0.18);
      display: block;
      margin: 0 auto 22px;
    }
    .sx-auth-form-title {
      font-size: 26px;
      font-weight: 700;
      color: var(--sx-dark);
      text-align: center;
      margin-bottom: 6px;
    }
    .sx-auth-form-sub {
      font-size: 14px;
      color: var(--sx-silver);
      text-align: center;
      margin-bottom: 32px;
    }
    .sx-timeout {
      display: flex;
      align-items: center;
      gap: 8px;
      background: #fffbeb;
      border: 1px solid #fcd34d;
      border-radius: 10px;
      padding: 10px 14px;
      font-size: 13px;
      color: #92400e;
      margin-bottom: 22px;
    }
    .sx-field { margin-bottom: 18px; }
    .sx-field label {
      display: block;
      font-size: 13px;
      font-weight: 600;
      color: #374151;
      margin-bottom: 7px;
    }
    .sx-field input {
      width: 100%;
      padding: 12px 14px;
      border: 1.5px solid #e5e7eb;
      border-radius: 10px;
      font-size: 15px;
      color: #111827;
      background: #fafbff;
      transition: border-color 0.2s, box-shadow 0.2s;
      outline: none;
      font-family: 'Roboto', sans-serif;
    }
    .sx-field input:focus {
      border-color: var(--sx-indigo);
      box-shadow: 0 0 0 3px rgba(var(--brand-2-rgb),0.1);
      background: #fff;
    }
    .sx-auth-submit {
      width: 100%;
      padding: 13px;
      background: linear-gradient(135deg, var(--sx-indigo) 0%, var(--sx-brand) 100%);
      color: #fff;
      border: none;
      border-radius: 10px;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      font-family: 'Roboto', sans-serif;
      letter-spacing: 0.3px;
      transition: opacity 0.2s, transform 0.15s;
      margin-top: 8px;
    }
    .sx-auth-submit:hover  { opacity: 0.9; transform: translateY(-1px); }
    .sx-auth-submit:active { opacity: 1;   transform: translateY(0); }
    .sx-auth-links {
      text-align: center;
      margin-top: 20px;
    }
    .sx-auth-links a {
      font-size: 13px;
      color: var(--sx-indigo);
      font-weight: 500;
      text-decoration: none;
    }
    .sx-auth-links a:hover { text-decoration: underline; }

    /* ── Mobile ── */
    @media (max-width: 840px) {
      .sx-auth-wrap  { flex-direction: column; }
      .sx-auth-left  {
        width: 100%;
        min-height: auto;
        padding: 44px 28px 40px;
      }
      .sx-auth-bearer       { width: 96px; height: 96px; margin-bottom: 16px; }
      .sx-auth-left-title   { font-size: 20px; }
      .sx-auth-features     { display: none; }
      .sx-auth-home         { margin-top: 28px; }
      .sx-auth-right {
        width: 100%;
        min-height: auto;
        padding: 44px 24px;
      }
    }

/* ── Shared by the forgot / reset pages ── */
.sx-sb-icon i { color: var(--sx-brand); font-size: 16px;}
.sx-auth-secure-badge {
      position: relative; z-index: 2;
      display: flex; align-items: center; gap: 10px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 12px; padding: 14px 20px; margin-bottom: 14px;
      width: 100%; max-width: 290px;}
.sx-auth-secure-badge .sx-sb-icon { font-size: 18px; flex-shrink: 0;}
.sx-auth-secure-badge .sx-sb-text {
      font-size: 13px; color: rgba(255,255,255,0.78);
      font-weight: 500; line-height: 1.35;}
.sx-auth-icon-wrap {
      width: 72px; height: 72px; border-radius: 50%;
      background: linear-gradient(135deg, rgba(var(--brand-2-rgb),0.1) 0%, rgba(var(--brand-rgb),0.15) 100%);
      border: 2px solid rgba(var(--brand-2-rgb),0.15);
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 20px; font-size: 28px;}
.sx-auth-icon-wrap i { color: var(--sx-indigo); font-size: 28px;}
.sx-auth-icon-wrap.sx-icon-error {
      background: linear-gradient(135deg, rgba(239,68,68,0.08) 0%, rgba(239,68,68,0.12) 100%);
      border-color: rgba(239,68,68,0.2);}
.sx-auth-icon-wrap.sx-icon-error i { color: #ef4444;}
.sx-auth-icon-wrap.sx-icon-warn {
      background: linear-gradient(135deg, rgba(245,158,11,0.08) 0%, rgba(245,158,11,0.12) 100%);
      border-color: rgba(245,158,11,0.2);}
.sx-auth-icon-wrap.sx-icon-warn i { color: #f59e0b;}
.sx-auth-note {
      background: var(--sx-light); border-radius: 10px;
      padding: 12px 16px; font-size: 13px; color: #6b7280;
      text-align: center; margin-top: 24px; line-height: 1.5;}
.sx-state-msg {
      background: var(--sx-light); border-radius: 14px;
      padding: 20px 24px; font-size: 14px; color: #374151;
      text-align: center; line-height: 1.6; margin-top: 4px;}
.sx-state-msg a {
      color: var(--sx-indigo); font-weight: 600; text-decoration: none;}
.sx-state-msg a:hover { text-decoration: underline;}
.sx-auth-secure-badge { display: none;}