/* ============================================================
   BudgetBuddy AI · auth.css
   Extends style.css with:
     · split-screen layout used by register/login
     · form fields + alerts (matches preview/inputs.html)
     · full-screen app shell used by dashboard.php
   All values reference --bb-* tokens from style.css.
   ============================================================ */

html, body { margin: 0; }
body.bb-auth-body,
body.bb-app-body {
  font-family: var(--bb-font-body);
  color: var(--bb-fg);
  background: var(--bb-bg);
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   1. Split-screen auth layout (register.php, login.php)
   ============================================================ */
.bb-auth {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  min-height: 100vh;
}

/* ---- left brand panel (dark purple, confetti motif) ---- */
.bb-auth__brand {
  position: relative;
  padding: 40px 56px;
  background:
    radial-gradient(ellipse at 80% 20%, rgba(255, 217, 61, 0.18), transparent 55%),
    radial-gradient(ellipse at 10% 95%, rgba(142, 111, 255, 0.45), transparent 60%),
    var(--bb-purple-900);
  color: var(--bb-fg-on-dark);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.bb-auth__brand::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url('../img/confetti-money.svg') repeat;
  background-size: 360px;
  opacity: 0.18;
  pointer-events: none;
}
.bb-auth__brand > * { position: relative; z-index: 1; }

.bb-auth__brand .brand__name b { color: #fff; }
.bb-auth__brand .brand__ai {
  background: rgba(255, 217, 61, 0.16);
  color: var(--bb-yellow-400);
}

.bb-auth__hero { max-width: 460px; margin-top: 48px; }
.bb-auth__hero h1 {
  font-family: var(--bb-font-sans);
  font-weight: 800;
  font-size: clamp(32px, 4vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 18px 0 14px;
  color: #fff;
}
.bb-auth__hero p {
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 32px;
}

.bb-auth__brand .eyebrow {
  background: rgba(255, 217, 61, 0.14);
  color: var(--bb-yellow-400);
}
.bb-auth__brand .eyebrow .dot { background: var(--bb-yellow-400); }

.bb-auth__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
}
.bb-auth__list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.9);
}
.bb-auth__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.bb-auth__dot--green  { background: var(--bb-green-500); box-shadow: 0 0 0 4px rgba(34,197,94,0.20); }
.bb-auth__dot--yellow { background: var(--bb-yellow-400); box-shadow: 0 0 0 4px rgba(255,217,61,0.18); }
.bb-auth__dot--purple { background: var(--bb-purple-300); box-shadow: 0 0 0 4px rgba(177,154,255,0.18); }

.bb-auth__foot {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
  max-width: 420px;
}

/* ---- right form panel ---- */
.bb-auth__form {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 32px;
  background: var(--bb-bg);
}
.bb-auth__card {
  width: 100%;
  max-width: 440px;
  background: var(--bb-surface);
  border-radius: var(--bb-radius-xl);
  padding: 40px;
  box-shadow: var(--bb-shadow-md);
}
.bb-auth__card-head { margin-bottom: 26px; }
.bb-auth__card-head h2 {
  font-family: var(--bb-font-sans);
  font-weight: 800;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--bb-fg);
  margin: 0 0 6px;
}
.bb-auth__card-sub {
  color: var(--bb-fg-muted);
  font-size: 15px;
  margin: 0;
}
.bb-auth__alt {
  text-align: center;
  margin: 22px 0 0;
  font-size: 14px;
  color: var(--bb-fg-muted);
}
.bb-auth__alt a {
  color: var(--bb-purple-600);
  font-weight: 700;
  text-decoration: none;
}
.bb-auth__alt a:hover { color: var(--bb-purple-700); text-decoration: underline; }

/* ============================================================
   2. Form fields (matches preview/inputs.html conventions)
   ============================================================ */
.bb-form .bb-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.bb-field__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.bb-field__row .bb-label { margin: 0; }
.bb-field__link {
  font-size: 13px;
  font-weight: 600;
  color: var(--bb-purple-600);
  text-decoration: none;
}
.bb-field__link:hover { text-decoration: underline; }

.bb-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--bb-fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.bb-input,
.bb-select {
  font-family: inherit;
  font-size: 15px;
  padding: 13px 14px;
  border-radius: var(--bb-radius-md);
  border: 1.5px solid var(--bb-border-strong);
  background: var(--bb-ink-50);
  color: var(--bb-fg);
  outline: none;
  transition: border-color var(--bb-dur-fast) var(--bb-ease),
              box-shadow  var(--bb-dur-fast) var(--bb-ease),
              background  var(--bb-dur-fast) var(--bb-ease);
  width: 100%;
}
.bb-input::placeholder { color: var(--bb-fg-soft); }
.bb-input:hover,
.bb-select:hover {
  border-color: var(--bb-purple-300);
}
.bb-input:focus,
.bb-select:focus {
  background: #fff;
  border-color: var(--bb-purple-500);
  box-shadow: 0 0 0 4px rgba(110, 75, 255, 0.18);
}
.bb-select {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--bb-fg-muted) 50%),
    linear-gradient(135deg, var(--bb-fg-muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: 36px;
}
.bb-hint {
  font-size: 12px;
  color: var(--bb-fg-soft);
  margin: 4px 0 0;
}

.bb-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 22px;
  font-size: 14px;
  color: var(--bb-fg-muted);
  cursor: pointer;
  user-select: none;
  line-height: 1.45;
}
.bb-check input {
  margin-top: 3px;
  accent-color: var(--bb-purple-500);
  width: 16px; height: 16px;
}
.bb-check a { color: var(--bb-purple-600); font-weight: 600; }

/* ============================================================
   3. Alerts
   ============================================================ */
.bb-alert {
  padding: 12px 14px;
  border-radius: var(--bb-radius-md);
  font-size: 14px;
  line-height: 1.45;
  margin-bottom: 18px;
  border: 1px solid transparent;
}
.bb-alert--error   { background: var(--bb-red-100);    color: #B91C1C; border-color: #FECACA; }
.bb-alert--success { background: var(--bb-green-100);  color: var(--bb-green-700); border-color: #BBF7D0; }
.bb-alert--info    { background: var(--bb-purple-50);  color: var(--bb-purple-700); border-color: var(--bb-purple-100); }
.bb-alert--inline  { margin: 0 0 18px; }
.bb-alert strong { font-weight: 700; }

/* ============================================================
   4. Full-screen app shell (dashboard.php)
   Reuses the marketing mockup components without the 3D chrome.
   ============================================================ */
.bb-app {
  min-height: 100vh;
  background: var(--bb-bg);
  padding: 20px;
}
.bb-app .dashboard__app {
  max-width: 1280px;
  margin: 0 auto;
  align-items: flex-start;
}
.bb-app .dash-side { position: sticky; top: 20px; }
.bb-app .dash-side__avatar { cursor: default; }

/* a slimmed logout chip that fits the dashboard header row */
.bb-app .dash-header__logout {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--bb-fg-muted);
  background: var(--bb-surface);
  padding: 7px 12px;
  border-radius: var(--bb-radius-pill);
  border: 1px solid var(--bb-border);
  text-decoration: none;
  transition: color var(--bb-dur-fast) var(--bb-ease),
              border-color var(--bb-dur-fast) var(--bb-ease),
              background var(--bb-dur-fast) var(--bb-ease);
}
.bb-app .dash-header__logout:hover {
  color: var(--bb-red-500);
  border-color: #FECACA;
  background: var(--bb-red-100);
}

/* ============================================================
   5. Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .bb-auth { grid-template-columns: 1fr; }
  .bb-auth__brand { padding: 32px 32px 40px; min-height: 260px; }
  .bb-auth__hero { margin-top: 24px; }
  .bb-auth__foot { display: none; }
}

@media (max-width: 720px) {
  .bb-auth__form { padding: 32px 18px; }
  .bb-auth__card { padding: 28px 22px; border-radius: var(--bb-radius-lg); }
  .bb-app { padding: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
}