/* Light, corporate gradient backdrop + glass card */
:root{
  --brand:#0a5ea8;
  --brand-2:#00a2d4;
  --bg-1:#0c1e33;
  --bg-2:#0f2744;
  --glass:#ffffffcc;
  --text:#0f172a;
  --muted:#6b7280;
  --line:#e6ebf2;
  --radius:12px;      /* slightly flatter */
  --radius-sm:8px;
  --ring: rgba(10,94,168,.16);
}

/* Fullscreen canvas */
html, body { height:100%; margin:0; }
body{
  background:
    radial-gradient(1200px 600px at 0% 0%, #163a6d 0%, transparent 60%),
    radial-gradient(800px 500px at 100% 0%, #0aa2d466 0%, transparent 55%),
    linear-gradient(180deg, var(--bg-1), var(--bg-2));
  color:var(--text);
  font:15px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* Shell */
.auth-wrap{
  min-height:100%;
  display:flex; align-items:center; justify-content:center;
  padding:24px 24px 48px; /* bottom space for page footer */
}
.auth-shell{
  --gap:24px;
  width:min(1200px,96vw);
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:var(--gap);
}

/* Left column (full-bleed hero background) */
.auth-left{
  position:relative;
  overflow:hidden;
  padding:20px;                 /* keeps logo/tabs inside rounded edges */
  background:transparent;
  border:1px solid rgba(255,255,255,.12);
  border-radius:22px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}

/* Hero image covers entire column */
.hero-img{
  position:absolute; inset:0;
  background:url('/public/assets/hero-banner.jpg') center/cover no-repeat;
  border-radius:inherit;
  filter:saturate(.9) contrast(.95) brightness(.9);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
  z-index:1;
}
/* Readability overlay */
.hero-img::after{
  content:"";
  position:absolute; inset:0; border-radius:inherit;
  background:
    linear-gradient(180deg, rgba(10,20,40,.55) 0%, rgba(10,20,40,.35) 30%, rgba(10,20,40,.60) 100%),
    radial-gradient(60% 80% at 15% 20%, rgba(0,0,0,.35), transparent 70%);
  z-index:1;
}

/* Foreground content sits above image/overlay */
.brand-strip, .tab-selector, .footnote{ position:relative; z-index:3; }

/* Brand row */
.brand-strip{ display:flex; align-items:center; gap:12px; }
.brand-strip .logo{ width:34px; height:34px; display:block; }
.brand-strip .brand-text{ color:#eef4ff; line-height:1.2; text-shadow:0 2px 6px rgba(0,0,0,.35); }
.brand-strip .brand-text small{ display:block; opacity:.9; font-weight:500; }

/* Role/tab chips on the hero */
.tab-selector{
  position:absolute; left:20px; right:20px; bottom:56px;  /* pushed down below logo */
  display:flex; gap:10px; flex-wrap:wrap;
}
.tab-selector .tab{
  padding:10px 14px;
  border-radius:10px;
  cursor:pointer; font-weight:600;
  color:#f4f7fb;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(6px);
}
.tab-selector .tab.active,
.tab-selector .tab:hover{
  background:rgba(255,255,255,.2);
  box-shadow:0 0 0 3px rgba(255,255,255,.12) inset;
}

/* Tagline at the very bottom of the banner */
.footnote{
  position:absolute; left:20px; right:20px; bottom:16px;
  text-align:center; color:#eaf2ff; font-size:.9rem;
  text-shadow:0 2px 4px rgba(0,0,0,.4);
}

/* Right card */
.auth-card{
  background:var(--glass);
  border:1px solid var(--line);
  border-radius:22px;
  padding:28px 26px 22px;
  backdrop-filter:blur(10px);
  box-shadow:0 10px 30px rgba(10,20,40,.15);
  overflow:hidden;               /* keep fields inside rounded card */
  display:flex; flex-direction:column;
}
.title{ margin:6px 0 12px; font-size:24px; }

/* Role pills */
.role-selector{ display:flex; gap:8px; margin:6px 0 14px; }
.role-selector .pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px; border-radius:10px;
  border:1px solid #dbe6f3; cursor:pointer;
  background:#eef4fb; color:#0b3a66; font-weight:700; font-size:.85rem;
}
.role-selector .pill.active{
  background:linear-gradient(90deg,#f05361,#5563f2);
  color:#fff; border-color:transparent;
}

/* Keep line length tidy (no spill) */
.auth-card .title,
.auth-card .role-selector,
.auth-card form,
.auth-card .tiny,
.auth-card .aux-links{ max-width:540px; }

/* Forms */
.login-form{ display:none; }
.login-form.active-form{ display:block; }
.field{ display:block; margin:12px 0; }
.label{ display:block; font-size:.9rem; color:var(--muted); margin-bottom:6px; }

/* Inputs */
input[type=text], input[type=password], input[type=email]{
  width:100%; max-width:100%; box-sizing:border-box;
  padding:11px 12px; border-radius:12px;
  border:1px solid var(--line); background:#f8fbff;
  font:inherit;
}
input:focus{
  outline:none; border-color:#cfe1f5;
  box-shadow:0 0 0 3px var(--ring);
}

/* CTA */
.cta{
  width:100%; max-width:100%; box-sizing:border-box;
  padding:11px 12px; border:none; cursor:pointer;
  border-radius:10px; font-weight:800; color:#fff;
  background:linear-gradient(90deg,#f05361,#5563f2);
  box-shadow:0 6px 16px rgba(85,99,242,.22);
}
.cta:hover{ filter:brightness(1.02); }
.cta.alt{ background:linear-gradient(90deg,#0a5ea8,#00a2d4); }

.error{ color:#cf3f3f; margin-top:10px; }
.message{ color:#15a36e; margin-top:10px; }

.aux-links{ margin-top:10px; display:flex; justify-content:flex-start; }
.link{ color:#0a5ea8; text-decoration:none; font-weight:600; }
.link:hover{ text-decoration:underline; }

/* Page footer (bottom center) */
.page-footer{
  position:fixed; left:0; right:0; bottom:6px;
  text-align:center; font-size:.85rem; color:#ccd6e4;
  pointer-events:none;           /* keep clicks for content above */
}
.page-footer a{ pointer-events:auto; color:#00a2d4; font-weight:600; text-decoration:none; }
.page-footer a:hover{ text-decoration:underline; }

/* Responsiveness */
@media (max-width:980px){
  .auth-shell{ grid-template-columns:1fr; }
  .auth-left{ min-height:320px; }
  .hero-img{ position:absolute; inset:0; }
  .tab-selector{ bottom:64px; }      /* leave room for tagline */
  .auth-card .title,
  .auth-card .role-selector,
  .auth-card form,
  .auth-card .tiny,
  .auth-card .aux-links{ max-width:100%; }
}