/* =========================================================
   Bakers CRM • Split Login (no header/footer)
   Balanced two-card layout
   Laptop/Desktop: 2 equal wide cards, 5px gap
   Mobile: stacked
   ========================================================= */

:root { color-scheme: light; }

/* -------- Base (mobile-first) -------- */
.auth-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns: 1fr;       /* stacked by default */
  place-items:center;
  padding:32px 20px;
  background:
    radial-gradient(1400px 700px at -10% -20%, var(--brand-50), transparent 60%),
    radial-gradient(1200px 900px at 110% 120%, var(--pink-50, #fdf2f8), transparent 55%),
    var(--color-bg);
  color:var(--color-text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* -------- LEFT CARD (hero) -------- */
.auth-hero{ width:100%; display:grid; place-items:center; }
.hero-inner{
  width:100%;
  background: var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:24px;
  padding:32px 26px;
  box-shadow:0 18px 60px rgba(2,8,23,.10), 0 8px 24px rgba(2,8,23,.06);
  text-align:center;
}
.hero-logo{
  width:220px; max-width:60vw; height:auto; margin:0 auto 16px;
  filter: drop-shadow(0 6px 20px rgba(0,0,0,.10));
}

/* Feature pills */
.hero-points{
  margin:8px auto 0; padding:0; list-style:none;
  display:grid; gap:12px; max-width:560px; text-align:left;
}
.hero-points li{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px; font-weight:800;
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:14px;
  box-shadow:0 10px 28px rgba(0,0,0,.06);
}
.hero-points li::before{
  content:"";
  width:14px; height:14px; border-radius:999px; flex:0 0 auto;
  background: radial-gradient(circle at 30% 30%, var(--brand-600), var(--brand-300));
  box-shadow:0 0 0 4px var(--brand-100);
}

/* -------- RIGHT CARD (form) -------- */
.auth-panel{ width:100%; display:grid; place-items:center; }
.panel-card{
  width:100%;
  background: var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:24px;
  padding:28px 26px 24px;
  box-shadow:0 18px 60px rgba(2,8,23,.10), 0 8px 24px rgba(2,8,23,.06);
}
.panel-title{ margin:0 0 6px; font-size:28px; font-weight:900; letter-spacing:.2px; }
.panel-muted{ margin:0 0 18px; color:var(--color-muted); font-weight:600; }
.text-center{ text-align:center; }

/* Form */
.auth-form{ display:flex; flex-direction:column; gap:14px; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field > span{ font-size:13px; font-weight:800; color:var(--color-text); }
.input{
  display:flex; align-items:center; gap:10px;
  border:1px solid var(--color-border);
  border-radius:12px; padding:0 12px; background:var(--color-surface);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.input:focus-within{ border-color:var(--brand-300); box-shadow:0 0 0 4px var(--brand-100); }
.input svg{
  width:18px; height:18px; color:var(--color-muted);
  flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}
.input input{
  height:46px; flex:1 1 auto; border:0; outline:0; background:transparent; color:var(--color-text);
  font-size:15px;
}
.peek{ border:0; background:transparent; cursor:pointer; font-size:16px; opacity:.6; }
.peek:hover{ opacity:.9; }
.row{ display:flex; align-items:center; justify-content:space-between; margin-top:-2px; }
.remember{ display:flex; align-items:center; gap:8px; color:var(--color-muted); font-size:13px; }
.link{ color:var(--brand-600); text-decoration:none; font-weight:800; }
.link:hover{ text-decoration:underline; }
.btn-primary{
  margin-top:8px; height:50px; width:100%;
  border:0; border-radius:12px;
  background: linear-gradient(180deg, var(--brand-600), var(--brand-700));
  color:#fff; font-weight:900; letter-spacing:.2px; cursor:pointer;
  box-shadow: 0 12px 28px rgba(37,99,235,.25);
}
.btn-primary:hover{ filter:brightness(.98); }
.btn-primary:active{ transform:translateY(1px); }

/* =========================
   Laptop / Desktop ONLY
   Two equal columns with EXACT 5px gap
   (each card shrinks slightly inside its cell to avoid touching)
   ========================= */
@media (min-width:1200px){
  .auth-shell{
    grid-template-columns: calc(50% - 2.5px) calc(50% - 2.5px);
    column-gap: 5px;
    justify-content: center;
    align-items: stretch;
    row-gap: 0;
    padding: 32px;
    max-width: 100vw;
    margin: 0 auto;
  }

  /* shrink the card width a little so shadows don't meet */
  .hero-inner, .panel-card{
    width: 90.0%;                    /* <-- only change that matters */
    margin: 0 auto;
    min-height: 620px;
    display:flex; flex-direction:column; justify-content:center;
  }
}

/* Tiny phones */
@media (max-width:360px){
  .hero-logo{ width:150px; }
}

/* --- fix card width mismatch --- */
.hero-inner,
.panel-card{
  box-sizing: border-box;      /* width now includes padding */
  padding: 32px 26px;          /* same padding on both cards */
}

@media (min-width:1200px){
  .auth-form .btn-primary{
    width: 360px;              /* tweak: 320–420px as you like */
    height: 46px;              /* a touch shorter */
    align-self: center;        /* center the button under the form */
  }
}