/* ============================================================================
   Container Tracking — auth stylesheet (LIGHT theme only).
   New design concept: soft light surfaces with an ocean indigo→cyan accent.
   ============================================================================ */

:root {
  --ct-ink:        #0f172a;   /* primary text  */
  --ct-ink-2:      #475569;   /* secondary     */
  --ct-muted:      #94a3b8;   /* tertiary      */
  --ct-line:       #e2e8f0;   /* borders       */
  --ct-bg:         #eef2fb;   /* page base     */
  --ct-card:       #ffffff;

  --ct-accent:     #4f46e5;   /* indigo        */
  --ct-accent-2:   #06b6d4;   /* cyan          */
  --ct-accent-ink: #4338ca;
  --ct-accent-soft: rgba(79,70,229,0.08);
  --ct-accent-line: rgba(79,70,229,0.22);

  --ct-radius:     14px;
  --ct-radius-sm:  10px;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
::selection { background: var(--ct-accent); color: #fff; }

html, body { height: 100%; }
body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--ct-ink);
  background: var(--ct-bg);
  line-height: 1.5;
  font-size: 14px;
}
body.no-shell { min-height: 100vh; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }

/* ── LAYOUT ──────────────────────────────────────────────────────────── */
/* The whole screen is the dark backdrop; the form is a floating card on
   the right, hovering over it. */
.auth {
  min-height: 100vh;
  display: flex;
  width: 100%;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 130% at 100% 0%, #1e1b4b 0%, #0f172a 42%, #0b1120 100%);
  color: #e2e8f0;
}
.auth__bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }

/* ── LEFT BRAND AREA ─────────────────────────────────────────────────── */
.auth__brand {
  width: 55%;
  position: relative;
  z-index: 1;
  display: flex; flex-direction: column; justify-content: center;
  padding: 3rem 4rem;
}
.auth__grid {
  position: absolute; inset: 0; opacity: 0.6;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse at 32% 42%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse at 32% 42%, #000 30%, transparent 75%);
}
.auth__orb { position: absolute; border-radius: 50%; filter: blur(2px); }
.auth__orb--1 {
  top: -8%; right: -6%; width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(99,102,241,0.30) 0%, transparent 62%);
  animation: ct-orb1 13s ease-in-out infinite;
}
.auth__orb--2 {
  bottom: -14%; left: -8%; width: 440px; height: 440px;
  background: radial-gradient(circle, rgba(6,182,212,0.22) 0%, transparent 62%);
  animation: ct-orb2 16s ease-in-out infinite;
}
.auth__orb--3 {
  top: 48%; left: 52%; width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(129,140,248,0.18) 0%, transparent 62%);
  animation: ct-orb3 11s ease-in-out infinite;
}
@keyframes ct-orb1 { 0%,100%{transform:translate(0,0) scale(1);} 33%{transform:translate(30px,-25px) scale(1.05);} 66%{transform:translate(-20px,15px) scale(.95);} }
@keyframes ct-orb2 { 0%,100%{transform:translate(0,0) scale(1);} 33%{transform:translate(-25px,20px) scale(1.04);} 66%{transform:translate(15px,-30px) scale(.96);} }
@keyframes ct-orb3 { 0%,100%{transform:translate(0,0);} 50%{transform:translate(20px,20px);} }

.auth__brand-inner { position: relative; z-index: 10; max-width: 100%; }

.auth__lockup { display: flex; align-items: center; gap: 14px; margin-bottom: 2.25rem; }
.auth__mark {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.auth__mark img {
  width: 52px; height: 52px; object-fit: contain; border-radius: 12px;
  box-shadow: 0 8px 22px rgba(220,38,38,0.30);
}
.auth__wordmark { display: flex; flex-direction: column; line-height: 1.05; }
.auth__wordmark strong {
  font-size: 27px; font-weight: 900; letter-spacing: 0.04em;
  text-transform: uppercase; color: #f8fafc;
}
.auth__wordmark strong .accent {
  background: linear-gradient(135deg, #818cf8, #22d3ee);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.auth__wordmark small {
  font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: #64748b; margin-top: 6px;
}

.auth__pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 14px; border-radius: 100px;
  background: rgba(129,140,248,0.10); border: 1px solid rgba(129,140,248,0.22);
  margin-bottom: 1.5rem;
}
.auth__pill-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #818cf8;
  box-shadow: 0 0 8px rgba(129,140,248,0.8);
  animation: ct-pulse 2s ease-in-out infinite;
}
.auth__pill span:not(.auth__pill-dot) {
  font-size: 10.5px; font-weight: 700; color: #a5b4fc;
  letter-spacing: 0.08em; text-transform: uppercase;
}
@keyframes ct-pulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.4;transform:scale(.85);} }

.auth__heading {
  font-size: 2.1rem; font-weight: 800; line-height: 1.14;
  letter-spacing: -0.025em; color: #f8fafc;
}
.auth__heading em {
  font-style: normal;
  background: linear-gradient(135deg, #818cf8, #22d3ee);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.auth__desc {
  margin-top: 1.1rem; max-width: 90%;
  font-size: 14.5px; line-height: 1.75; color: #94a3b8; font-weight: 400;
}

.auth__features {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 12px; margin-top: 2rem; max-width: 92%;
}
.auth-feature {
  padding: 14px 16px; border-radius: 13px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: flex-start; gap: 12px;
  transition: transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s, border-color .35s, background .35s;
  cursor: default; backdrop-filter: blur(6px);
}
.auth-feature:hover {
  background: rgba(255,255,255,0.07); border-color: rgba(129,140,248,0.35);
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(0,0,0,0.35);
}
.auth-feature__icon {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(135deg, rgba(129,140,248,0.18), rgba(34,211,238,0.12));
  display: flex; align-items: center; justify-content: center; transition: background .35s;
}
.auth-feature:hover .auth-feature__icon { background: linear-gradient(135deg, #6366f1, #06b6d4); }
.auth-feature__icon svg { width: 17px; height: 17px; color: #a5b4fc; transition: color .35s; }
.auth-feature:hover .auth-feature__icon svg { color: #fff; }
.auth-feature__text strong { display: block; font-size: 13px; font-weight: 700; color: #f1f5f9; letter-spacing: -0.01em; }
.auth-feature__text small { display: block; font-size: 11.5px; color: #748099; margin-top: 2px; line-height: 1.4; }

.auth__footer { position: absolute; bottom: 1.75rem; left: 4rem; z-index: 10; }
.auth__footer p { font-size: 10.5px; color: #64748b; }
.auth__footer-credit { margin-top: 3px; font-size: 9.5px; letter-spacing: 0.04em; opacity: 0.9; }
.auth__footer-credit strong { color: #a5b4fc; font-weight: 700; }

/* ── RIGHT — floating form card ──────────────────────────────────────── */
.auth__panel {
  width: 45%;
  position: relative;
  z-index: 1;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 3rem 2rem;
}
.auth-form {
  width: 100%; max-width: 400px; position: relative; z-index: 10;
  background: var(--ct-card);
  border: 1px solid rgba(255,255,255,0.65);
  border-radius: 20px;
  padding: 2.5rem 2.25rem;
  box-shadow: 0 30px 70px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.30);
  transition: transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s;
}
.auth-form:hover {
  transform: translateY(-4px);
  box-shadow: 0 42px 90px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.35);
}
.auth-form__icon { margin-bottom: 1.25rem; }
.auth-form__icon img {
  height: 46px; width: 46px; border-radius: 12px;
  box-shadow: 0 8px 20px rgba(220,38,38,0.25);
}
.auth-form__header { margin-bottom: 1.75rem; }
.auth-form__header h2 { font-size: 1.45rem; font-weight: 800; color: var(--ct-ink); letter-spacing: -0.02em; }
.auth-form__header p { margin-top: 6px; font-size: 14px; color: var(--ct-muted); }

.auth-form__error {
  padding: 9px 13px; border-radius: 10px;
  font-size: 13px; margin-bottom: 1.25rem;
  display: flex; align-items: center; gap: 9px;
  background: rgba(220,38,38,0.06); border: 1px solid rgba(220,38,38,0.22); color: #b91c1c;
}
.auth-form__error svg { width: 17px; height: 17px; flex-shrink: 0; color: #dc2626; }

.auth-field { margin-bottom: 1.05rem; }
.auth-field__label { display: block; font-size: 11.5px; font-weight: 600; color: var(--ct-ink-2); margin-bottom: 7px; }
.auth-field__wrap { position: relative; }
.auth-field__icon { position: absolute; top: 50%; left: 13px; transform: translateY(-50%); pointer-events: none; }
.auth-field__icon svg { width: 17px; height: 17px; color: var(--ct-muted); transition: color .3s; }
.auth-field__input {
  width: 100%;
  background: #f8fafc;
  border: 1px solid var(--ct-line); border-radius: var(--ct-radius-sm);
  padding: 12px 12px 12px 40px; font-size: 13.5px; font-family: inherit;
  color: var(--ct-ink); outline: none; transition: border-color .25s, box-shadow .25s, background .25s;
}
.auth-field__input::placeholder { color: var(--ct-muted); }
.auth-field__input:focus {
  border-color: var(--ct-accent);
  background: #fff;
  box-shadow: 0 0 0 4px var(--ct-accent-soft);
}
.auth-field__wrap:focus-within .auth-field__icon svg { color: var(--ct-accent); }
.auth-field__input--pw { padding-right: 44px; }
.auth-pw-toggle {
  position: absolute; top: 50%; right: 11px; transform: translateY(-50%);
  background: none; border: none; padding: 4px; display: flex;
}
.auth-pw-toggle svg { width: 17px; height: 17px; color: var(--ct-muted); transition: color .2s; }
.auth-pw-toggle:hover svg { color: var(--ct-accent); }
.auth-field__error { display: block; margin-top: 6px; font-size: 11.5px; color: #dc2626; }

.auth-btn {
  width: 100%; padding: 12px 18px; margin-top: 6px;
  border: none; border-radius: var(--ct-radius-sm);
  font-size: 14px; font-weight: 700; color: #fff;
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(135deg, var(--ct-accent), var(--ct-accent-2));
  box-shadow: 0 8px 22px rgba(79,70,229,0.28);
  transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s, filter .25s;
}
.auth-btn::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%);
  transform: translateX(-100%); transition: transform .6s;
}
.auth-btn:hover::before { transform: translateX(100%); }
.auth-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(79,70,229,0.34); filter: saturate(1.05); }
.auth-btn:active { transform: translateY(0); }
.auth-btn:disabled { opacity: 0.85; cursor: progress; transform: none !important; }
.auth-btn:disabled::before { display: none; }
.auth-btn svg { width: 15px; height: 15px; }
.auth-btn__spin { animation: ct-spin .85s linear infinite; transform-origin: center; }
@keyframes ct-spin { to { transform: rotate(360deg); } }

.auth-form__note { margin-top: 1.5rem; text-align: center; font-size: 12px; color: var(--ct-muted); }

/* ── ENTRANCE ANIMATION ──────────────────────────────────────────────── */
@keyframes ct-fade { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.auth-anim { animation: ct-fade .55s ease-out both; }
.auth-anim-d1 { animation-delay: .08s; }
.auth-anim-d2 { animation-delay: .16s; }
.auth-anim-d3 { animation-delay: .24s; }
.auth-anim-d4 { animation-delay: .32s; }
.auth-anim-d5 { animation-delay: .40s; }
.auth-anim-d6 { animation-delay: .48s; }
.auth-anim-d7 { animation-delay: .56s; }

/* ── RESPONSIVE ──────────────────────────────────────────────────────── */

@media (min-width: 1025px) and (max-width: 1440px) {
  .auth__brand { width: 56%; padding: 2.25rem 2.5rem; }
  .auth__panel { width: 44%; }
  .auth__footer { left: 2.5rem; bottom: 1.25rem; }
  .auth__lockup { margin-bottom: 1.5rem; }
  .auth__heading { font-size: 1.7rem; }
  .auth__desc { margin-top: .9rem; max-width: 98%; font-size: 13px; line-height: 1.65; }
  .auth__features { gap: 9px; margin-top: 1.25rem; max-width: 100%; }
  .auth-feature { padding: 11px 13px; gap: 10px; }
}
@media (max-height: 780px) {
  .auth__brand { padding: 1.75rem 2.5rem; }
  .auth__heading { font-size: 1.7rem; }
  .auth__footer { left: 2.5rem; bottom: 1rem; }
  .auth__features { gap: 8px; margin-top: 1rem; }
}

/* ── SHORT VIEWPORT (zoomed) — scroll instead of clip, keep 1920 design ── */
/* When the viewport is short (browser zoom shrinks it vertically), stop
   forcing everything into 100vh with hidden overflow. Let the page grow to
   its natural height and scroll so the whole form card stays reachable. */
@media (max-height: 820px) {
  .auth {
    min-height: 100vh;
    height: auto;
    overflow-y: auto;
    /* "safe center" keeps it vertically centered when it fits, and falls back
       to top-aligned (fully scrollable, never clipped) when content is taller. */
    align-items: safe center;
  }
  .auth__brand,
  .auth__panel {
    justify-content: safe center;
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
  }
  /* Footer flows after the content (no longer absolute) so it can never
     overlap the feature cards on short/zoomed viewports. */
  .auth__footer {
    position: static;
    left: auto;
    bottom: auto;
    margin-top: 1.75rem;
  }
}
/* ── GENTLE DENSITY STEPS — only padding/margin/gap/font/radius/icon shrink;
   split layout structure untouched (the 1024px rule collapses it). Largest
   max-width first. ───────────────────────────────────────────────────────── */
@media (max-width: 1550px) {
  .auth__brand { padding: 2.75rem 3.5rem; }
  .auth__lockup { margin-bottom: 2rem; gap: 13px; }
  .auth__mark img { width: 50px; height: 50px; }
  .auth__wordmark strong { font-size: 26px; }
  .auth__heading { font-size: 2rem; }
  .auth__desc { margin-top: 1rem; font-size: 14px; }
  .auth__features { gap: 11px; margin-top: 1.75rem; }
  .auth-feature { padding: 13px 15px; gap: 11px; }
  .auth-feature__icon { width: 35px; height: 35px; }
  .auth-form { padding: 2.25rem 2rem; }
  .auth-form__header { margin-bottom: 1.5rem; }
  .auth-form__header h2 { font-size: 1.4rem; }
  .auth-field { margin-bottom: 1rem; }
  .auth-field__input { padding: 11px 12px 11px 40px; font-size: 13px; }
}
@media (max-width: 1300px) {
  .auth__brand { padding: 2.5rem 3rem; }
  .auth__lockup { margin-bottom: 1.75rem; gap: 12px; }
  .auth__mark img { width: 48px; height: 48px; }
  .auth__wordmark strong { font-size: 25px; }
  .auth__heading { font-size: 1.9rem; }
  .auth__desc { margin-top: .95rem; font-size: 13.5px; line-height: 1.7; }
  .auth__features { gap: 10px; margin-top: 1.5rem; }
  .auth-feature { padding: 12px 14px; gap: 10px; border-radius: 12px; }
  .auth-feature__icon { width: 34px; height: 34px; }
  .auth-feature__text strong { font-size: 12.5px; }
  .auth-feature__text small { font-size: 11px; }
  .auth-form { padding: 2.1rem 1.9rem; border-radius: 18px; }
  .auth-form__header { margin-bottom: 1.4rem; }
  .auth-form__header h2 { font-size: 1.35rem; }
  .auth-field { margin-bottom: .95rem; }
  .auth-field__label { margin-bottom: 6px; }
  .auth-field__input { padding: 11px 12px 11px 38px; font-size: 13px; }
}
@media (max-width: 1150px) {
  .auth__brand { padding: 2.25rem 2.5rem; }
  .auth__lockup { margin-bottom: 1.5rem; gap: 11px; }
  .auth__mark img { width: 46px; height: 46px; }
  .auth__wordmark strong { font-size: 24px; }
  .auth__heading { font-size: 1.8rem; }
  .auth__desc { margin-top: .9rem; font-size: 13px; line-height: 1.65; }
  .auth__features { gap: 9px; margin-top: 1.35rem; }
  .auth-feature { padding: 11px 13px; gap: 9px; border-radius: 12px; }
  .auth-feature__icon { width: 33px; height: 33px; border-radius: 9px; }
  .auth-feature__text strong { font-size: 12.5px; }
  .auth-feature__text small { font-size: 10.5px; }
  .auth-form { padding: 1.95rem 1.75rem; border-radius: 17px; }
  .auth-form__header { margin-bottom: 1.3rem; }
  .auth-form__header h2 { font-size: 1.3rem; }
  .auth-field { margin-bottom: .9rem; }
  .auth-field__label { margin-bottom: 6px; }
  .auth-field__input { padding: 10px 12px 10px 38px; font-size: 12.5px; }
}

@media (max-width: 1024px) {
  .auth { flex-direction: column; }
  .auth__brand { width: 100%; padding: 2.5rem 2rem 1rem; }
  .auth__panel { width: 100%; padding: 1rem 1.5rem 3rem; }
  .auth__heading { font-size: 1.9rem; }
  .auth__features { max-width: 100%; }
  .auth__footer { position: relative; left: 0; bottom: 0; margin-top: 2rem; }
}
@media (max-width: 640px) {
  .auth__brand { padding: 1.75rem 1.5rem 1.5rem; }
  .auth__heading { font-size: 1.5rem; }
  .auth__features { grid-template-columns: 1fr; }
  .auth-form { max-width: 100%; }
}

/* ============================================================================
   Temporary post-login landing (dashboard stub)
   ============================================================================ */
.stub {
  min-height: 100vh;
  display: grid; place-items: center;
  padding: 2rem;
  background: radial-gradient(120% 120% at 50% 0%, #f6f9ff, var(--ct-bg));
}
.stub__card {
  width: 100%; max-width: 480px;
  background: var(--ct-card); border: 1px solid var(--ct-line);
  border-radius: var(--ct-radius);
  box-shadow: 0 24px 60px rgba(15,23,42,0.08);
  padding: 2.25rem; text-align: center;
}
.stub__mark {
  width: 56px; height: 56px; border-radius: 14px; margin: 0 auto 1.25rem;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--ct-accent), var(--ct-accent-2));
  box-shadow: 0 10px 24px rgba(79,70,229,0.28);
}
.stub__mark img { width: 30px; height: 30px; filter: brightness(0) invert(1); }
.stub h1 { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em; }
.stub p { margin-top: .5rem; color: var(--ct-ink-2); font-size: 14px; }
.stub__row { margin-top: 1.5rem; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.stub__chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: 100px; font-size: 12.5px; font-weight: 600;
  background: var(--ct-accent-soft); color: var(--ct-accent-ink); border: 1px solid var(--ct-accent-line);
}
.stub__chip--role { background: #ecfdf5; color: #047857; border-color: rgba(4,120,87,0.2); }
.stub__chip--role.is-admin { background: #eef2ff; color: var(--ct-accent-ink); border-color: var(--ct-accent-line); }
.stub__logout {
  margin-top: 1.75rem; display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: var(--ct-radius-sm);
  background: linear-gradient(135deg, var(--ct-accent), var(--ct-accent-2)); color: #fff;
  font-size: 13.5px; font-weight: 700; border: none;
  box-shadow: 0 8px 22px rgba(79,70,229,0.28); transition: transform .25s, box-shadow .25s;
}
.stub__logout:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(79,70,229,0.34); }
.stub__logout svg { width: 15px; height: 15px; }