/* =========================================================================
   HiCalendar — Authentication (Sign in / Create account)
   -------------------------------------------------------------------------
   Full-screen split: a black brand panel (left) and the form panel (right).
   Used only under _AuthLayout (no app topbar). Built on the Hitech tokens;
   bespoke class names, no !important. Adapted to the ASP.NET markup — the
   Sign in / Create account switch is a Bootstrap "tab" (the JS toggles
   .active on the .seg-btn and .show.active on the .tab-pane).
   ========================================================================= */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--font-sans); color: var(--fg); background: var(--black);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
::selection { background: var(--brand-red); color: var(--fg-inverse); }

/* ---------- Layout: split screen ---------- */
.auth { display: grid; grid-template-columns: 1.05fr 1fr; height: 100vh; overflow: hidden; }

/* ---------- LEFT — brand panel ---------- */
.brand {
  position: relative; background: var(--black); color: var(--fg-inverse);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 48px 56px; overflow: hidden;
}
.brand .car { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; z-index: 0; }
.brand .wash {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.12) 30%, rgba(0,0,0,.20) 50%, rgba(0,0,0,.92) 100%);
}
.brand .brand-top, .brand .brand-mid { position: relative; z-index: 2; }

.brand-top { display: flex; align-items: center; gap: 16px; }
.brand-top .brand-wordmark { height: 24px; width: auto; display: block; }
.brand-top .pipe { width: 1px; height: 22px; background: var(--gray-900); }
.brand-top .sub { font-size: 11px; font-weight: 700; letter-spacing: .22em; color: var(--fg-inverse); }

.brand-mid { max-width: 30ch; }
.brand-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gray-500);
  margin-bottom: 26px;
}
.brand-eyebrow .stripe { width: 38px; height: 3px; background: var(--brand-red); flex: none; }
.brand h1 {
  margin: 0; font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: 56px; line-height: .9; letter-spacing: -.025em; color: var(--fg-inverse);
}
.brand h1 .red { color: var(--brand-red); }

/* ---------- RIGHT — form panel ---------- */
.panel { background: var(--bg); display: flex; flex-direction: column; overflow-y: auto; }
.panel-top { flex: none; display: flex; align-items: center; justify-content: flex-end; padding: 22px 40px 0; }
.panel-top .mini-brand { display: none; align-items: center; gap: 12px; margin-right: auto; }
.panel-top .mini-brand .brand-wordmark { height: 18px; width: auto; display: block; }
.panel-top .mini-brand .sub { font-size: 10px; font-weight: 700; letter-spacing: .2em; }

.form-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 32px 40px 56px; }
.form { width: 100%; max-width: 396px; margin-block: auto; }

/* ---------- form head ---------- */
.form-head { margin-bottom: 22px; }
.form-head .eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--brand-red);
  display: block; margin-bottom: 10px;
}
.form-head h2 {
  margin: 0; font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: 36px; line-height: .96; letter-spacing: -.02em; color: var(--fg);
}
.form-head p { margin: 12px 0 0; font-size: 13px; line-height: 1.55; color: var(--fg-muted); }

/* ---------- segmented Sign in / Create account (Bootstrap tab toggles) ---------- */
.seg { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--black); margin-bottom: 28px; }
.seg .seg-btn {
  background: var(--bg); color: var(--fg-muted); border: 0; cursor: pointer;
  padding: 12px 10px; font-family: var(--font-sans); font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; transition: background var(--dur-fast), color var(--dur-fast);
}
.seg .seg-btn + .seg-btn { border-left: 1px solid var(--black); }
.seg .seg-btn.active { background: var(--black); color: var(--fg-inverse); }
.seg .seg-btn:not(.active):hover { background: var(--hover-bg); }

/* ---------- fields ---------- */
.field { margin-bottom: 16px; }
.field > label {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-muted);
  margin-bottom: 7px;
}
.input {
  display: flex; align-items: center; gap: 10px; background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--radius-1); padding: 0 12px;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.input .lead-ic { color: var(--fg-subtle); flex: none; width: 16px; height: 16px; }
.input input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  padding: 12px 0; font-size: 14px; color: var(--fg); letter-spacing: .01em;
}
.input input::placeholder { color: var(--fg-subtle); }
.input:focus-within { border-color: var(--black); box-shadow: inset 0 -2px 0 var(--brand-red); }
/* invalid (ASP.NET adds input-validation-error to the input on failure) */
.input:has(.input-validation-error) { border-color: var(--brand-red); box-shadow: inset 0 -2px 0 var(--brand-red); }

/* two-up row (first / last name) */
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* a flash notice above the form (TempData) — components.css isn't loaded here */
.form-notice {
  padding: 11px 14px; margin-bottom: 18px; font-size: 13px; color: var(--fg);
  background: var(--gray-100); border: 1px solid var(--line); border-left: 3px solid var(--brand-red);
}

/* validation text — per-field span styles only when it actually has error text
   (ASP.NET leaves the span empty when valid), plus the ModelOnly summary. */
.field .text-danger:not(:empty) {
  display: block; margin-top: 7px; font-size: 11px; font-weight: 600; color: var(--brand-red-dark);
}
.form .validation-summary-errors {
  margin: 0 0 16px; font-size: 11px; font-weight: 600; color: var(--brand-red-dark);
}
.form .validation-summary-errors ul { margin: 0; padding-left: 16px; }

/* password strength meter (Create-account; driven by account.js — it sets s1..s4
   on .pw-meter and toggles the wrapper's [hidden]) */
.pw-meter { display: flex; gap: 4px; margin-top: 9px; }
.pw-meter .seg-bar { height: 3px; flex: 1; background: var(--gray-300); transition: background var(--dur-fast); }
.pw-meter.s1 .seg-bar:nth-child(1) { background: var(--brand-red); }
.pw-meter.s2 .seg-bar:nth-child(-n+2) { background: var(--brand-red); }
.pw-meter.s3 .seg-bar:nth-child(-n+3) { background: var(--brand-red); }
.pw-meter.s4 .seg-bar { background: var(--black); }
.pw-label { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-subtle); margin-top: 6px; }
.form-text { font-size: 11px; color: var(--fg-muted); margin-top: 6px; }
.form-hint { font-size: 11px; color: var(--fg-muted); margin: 2px 0 18px; }

/* ---------- submit ---------- */
.submit {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 12px;
  background: var(--black); color: var(--fg-inverse); border: 0; cursor: pointer;
  padding: 15px 18px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  transition: opacity var(--dur-fast), background var(--dur-fast);
}
.submit:hover { opacity: .86; }
.submit:active { background: var(--brand-red); opacity: 1; }
.submit .hc-icon { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease-out); }
.submit:hover .hc-icon { transform: translateX(4px); }

/* ---------- foot switch prompt ---------- */
.form-foot { margin-top: 24px; text-align: center; font-size: 12px; color: var(--fg-muted); }
.form-foot .seg-link { background: 0; border: 0; padding: 0; cursor: pointer; color: var(--brand-red); font-weight: 700; font-size: 12px; }
.form-foot .seg-link:hover { text-decoration: underline; }

/* entrance — transform only, so content is never left invisible */
@keyframes hc-auth-in { from { transform: translateY(8px); } to { transform: none; } }
.tab-pane.show.active { animation: hc-auth-in var(--dur-med) var(--ease-out); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; }
  .brand { display: none; }
  .panel-top .mini-brand { display: flex; }
}

/* small phones — tighten the single-column form (see breakpoint convention in
   tokens.css; this page predates the convention with its own 900px split point) */
@media (max-width: 480px) {
  .panel-top { padding: 18px 20px 0; }
  .form-wrap { padding: 24px 20px 40px; }
  .form { max-width: 340px; }
  .form-head h2 { font-size: 30px; }
  /* first / last name stop sharing a row */
  .row2 { grid-template-columns: 1fr; gap: 0; }
}