/* Login — flat black base, opacity overlays, chart accents */

body:has(.login-page),
html:has(.login-page) {
  margin: 0;
  min-height: 100%;
  background-color: hsl(0 0% 3%);
}

/* Hero charts — subtle live motion */
@keyframes login-chart-stroke-draw {
  0% {
    stroke-dashoffset: 1;
    opacity: 0.55;
  }
  35% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  70% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 1;
    opacity: 0.55;
  }
}

@keyframes login-chart-area-breathe {
  0%,
  100% {
    opacity: 0.72;
  }
  50% {
    opacity: 1;
  }
}

@keyframes login-hero-metric-in {
  0% {
    opacity: 0;
    transform: translateY(3px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes login-chart-frame-in {
  0% {
    opacity: 0.35;
  }
  100% {
    opacity: 1;
  }
}

.login-chart-line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: login-chart-stroke-draw 8s ease-in-out infinite;
}

.login-chart-line--teal {
  animation-delay: 0s;
}

.login-chart-line--red {
  animation-delay: 0.4s;
}

.login-chart-area {
  animation: login-chart-area-breathe 6s ease-in-out infinite;
}

.login-chart-area--red {
  animation-delay: 0.3s;
}

.login-chart-bar {
  transition:
    y 0.9s cubic-bezier(0.4, 0, 0.2, 1),
    height 0.9s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.9s ease;
}

.login-chart-frame {
  animation: login-chart-frame-in 0.85s ease-out;
}

.login-hero-metric {
  animation: login-hero-metric-in 0.55s ease-out;
}

.login-page {
  --radius: 0.625rem;
  --background: 0 0% 2%;
  --foreground: 0 0% 96%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 9%;
  --muted-foreground: 0 0% 58%;
  --primary: 0 0% 98%;
  --primary-foreground: 0 0% 6%;
  --border: 0 0% 18%;
  --input: 0 0% 98%;
  --ring: 0 0% 85%;

  position: relative;
  min-height: 100vh;
  overflow: hidden;
  color: hsl(var(--foreground));
  background-color: hsl(0 0% 3%);
}

/* Sign-in card — dark panel aligned with black login page */
.login-card-panel {
  color: hsl(0 0% 98%);
}

.login-surface {
  position: relative;
  border-radius: calc(var(--radius) + 4px);
}

/* 3D chart cards — solid white (not glass) */
.login-hero-scene .login-surface {
  border: 1px solid hsl(0 0% 0% / 0.07);
  background: linear-gradient(
    155deg,
    hsl(0 0% 100%),
    hsl(0 0% 97%)
  );
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow:
    0 0 0 1px hsl(0 0% 100% / 0.8) inset,
    0 20px 48px -22px hsl(0 0% 0% / 0.18);
}

/* Sign-in card — lifted black surface (hero cards stay white) */
.login-card-panel.login-surface,
.login-card-panel.login-surface.login-surface--lift {
  border: 1px solid hsl(0 0% 100% / 0.1);
  background: linear-gradient(
    155deg,
    hsl(0 0% 9%),
    hsl(0 0% 4%)
  );
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow:
    0 0 0 1px hsl(0 0% 100% / 0.05) inset,
    0 1px 0 hsl(0 0% 100% / 0.08) inset,
    0 24px 56px -28px hsl(0 0% 0% / 0.75);
}

/* 3D hero cards — sales chart red / teal glow (sign-in card stays monochrome) */
.login-surface--soft {
  border-color: hsl(0 0% 0% / 0.05);
  box-shadow:
    0 0 0 1px hsl(0 0% 100% / 0.55) inset,
    0 18px 40px -18px hsl(0 0% 0% / 0.08);
}

.login-hero-scene .login-surface--teal {
  border-color: rgb(0 77 77 / 0.22);
  box-shadow:
    0 0 0 1px hsl(0 0% 100% / 0.55) inset,
    0 20px 44px -18px rgb(0 77 77 / 0.14),
    0 0 32px rgb(0 77 77 / 0.07);
}

.login-surface--lift {
  border-color: hsl(0 0% 0% / 0.07);
  box-shadow:
    0 0 0 1px hsl(0 0% 100% / 0.65) inset,
    0 26px 52px -22px hsl(0 0% 0% / 0.12),
    0 0 40px hsl(0 0% 0% / 0.04);
}

.login-hero-scene .login-surface--red {
  border-color: rgb(255 59 48 / 0.2);
  box-shadow:
    0 0 0 1px hsl(0 0% 100% / 0.65) inset,
    0 26px 52px -20px rgb(255 59 48 / 0.14),
    0 0 36px rgb(255 59 48 / 0.07);
}

.login-card-panel.login-surface__shine::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: linear-gradient(
    125deg,
    hsl(0 0% 100% / 0.06) 0%,
    hsl(0 0% 100% / 0.02) 38%,
    transparent 55%
  );
  pointer-events: none;
}

.login-card-panel.login-surface__edge::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 8%,
    hsl(0 0% 100% / 0.2) 50%,
    transparent 92%
  );
  pointer-events: none;
}

.login-card-panel.login-surface__shine > .relative {
  position: relative;
  z-index: 2;
}

.login-card-eyebrow {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: hsl(0 0% 100% / 0.45);
}

.login-card-heading {
  color: hsl(0 0% 100% / 0.92);
}

.login-card-panel .login-card-heading {
  color: hsl(0 0% 100% / 0.95) !important;
}

.login-card-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(0 0% 100% / 0.72);
}

.login-card-footer {
  color: hsl(0 0% 100% / 0.45);
}

.login-support-text {
  margin: 1.5rem 0 0;
  text-align: center;
  font-size: 0.78rem;
  line-height: 1.5;
  color: hsl(0 0% 100% / 0.45);
}

.login-support-text a {
  color: hsl(0 0% 100% / 0.72);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s ease;
}

.login-support-text a:hover {
  color: hsl(0 0% 100% / 0.92);
  text-decoration: underline;
}

.login-hero-brand .hb-headbrands-mark {
  color: hsl(0 0% 98%);
}

.login-brand-wordmark {
  font-family: Brockmann, 'Inter', system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: hsl(0 0% 98%);
}

.login-brand-subtitle {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: hsl(0 0% 100%);
}

.login-brand-divider {
  height: 1px;
  width: 100%;
  max-width: 7.5rem;
  background: linear-gradient(
    90deg,
    hsl(0 0% 100% / 0.35),
    hsl(0 0% 100% / 0.12) 55%,
    transparent
  );
}

.login-hero-brand .login-brand-divider {
  max-width: none;
}

.login-hero-brand.flex-col .login-brand-divider {
  margin-left: auto;
  margin-right: auto;
}

.login-eyebrow {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: hsl(0 0% 62%);
}


.login-hero-brand {
  align-items: center;
}

.login-hero-bullet {
  width: 0.375rem;
  height: 0.375rem;
  flex-shrink: 0;
  border-radius: 50%;
}

.login-hero-bullet--sky {
  background: hsl(205 55% 68%);
  box-shadow: 0 0 10px hsl(205 55% 68% / 0.35);
}

.login-hero-bullet--green {
  background: hsl(160 42% 52%);
  box-shadow: 0 0 10px hsl(160 42% 52% / 0.35);
}

.login-hero-bullet--teal {
  background: #004d4d;
  box-shadow: 0 0 10px rgb(0 77 77 / 0.35);
}

.login-hero-highlights {
  list-style: none;
  margin: 0;
  padding: 0;
}

.login-hero-scene {
  position: relative;
  height: 15rem;
  perspective: 980px;
  perspective-origin: 50% 42%;
  user-select: none;
  overflow: visible;
}

.login-hero-scene__float {
  width: 100%;
  height: 100%;
}

.login-hero-scene__stage {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.35s ease-out;
  overflow: visible;
}

/* 3D room — charts sit inside an open-front box */
.login-hero-room {
  --room-w: 19rem;
  --room-h: 11.5rem;
  --room-d: 4.75rem;

  position: absolute;
  left: 50%;
  top: 52%;
  width: var(--room-w);
  height: var(--room-h);
  max-width: 100%;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
}

.login-hero-room__shell {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  pointer-events: none;
}

.login-hero-room__face {
  position: absolute;
  backface-visibility: hidden;
  box-shadow: inset 0 0 0 1px hsl(0 0% 100% / 0.06);
}

.login-hero-room__face--back {
  inset: 0;
  transform: translateZ(calc(var(--room-d) * -1));
  border-radius: 10px 10px 0 0;
  background:
    radial-gradient(ellipse 80% 55% at 50% 0%, hsl(0 0% 100% / 0.07), transparent 62%),
    linear-gradient(180deg, hsl(0 0% 16%) 0%, hsl(0 0% 7%) 100%);
}

.login-hero-room__face--floor {
  left: 0;
  bottom: 0;
  width: 100%;
  height: var(--room-d);
  transform-origin: bottom center;
  transform: rotateX(-90deg);
  background:
    linear-gradient(hsl(0 0% 100% / 0.05) 1px, transparent 1px),
    linear-gradient(90deg, hsl(0 0% 100% / 0.05) 1px, transparent 1px),
    linear-gradient(180deg, hsl(0 0% 12%) 0%, hsl(0 0% 4%) 100%);
  background-size: 22px 22px, 22px 22px, auto;
}

.login-hero-room__face--left {
  top: 0;
  left: 0;
  width: var(--room-d);
  height: 100%;
  transform-origin: left center;
  transform: rotateY(90deg);
  background: linear-gradient(90deg, hsl(0 0% 5%) 0%, hsl(0 0% 11%) 100%);
}

.login-hero-room__face--right {
  top: 0;
  right: 0;
  width: var(--room-d);
  height: 100%;
  transform-origin: right center;
  transform: rotateY(-90deg);
  background: linear-gradient(270deg, hsl(0 0% 5%) 0%, hsl(0 0% 11%) 100%);
}

.login-hero-room__face--ceiling {
  top: 0;
  left: 0;
  width: 100%;
  height: var(--room-d);
  transform-origin: top center;
  transform: rotateX(90deg);
  background: linear-gradient(180deg, hsl(0 0% 18%) 0%, hsl(0 0% 10%) 100%);
  opacity: 0.55;
}

.login-hero-room__content {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

/* White glow on black stage — one per hero card, behind the white surfaces */
.login-hero-card-glow {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(40px);
  transform-style: preserve-3d;
}

.login-hero-card-glow--forecast {
  left: -0.25rem;
  top: 0.85rem;
  width: 10.5rem;
  height: 7rem;
  transform: rotateY(-10deg) rotateX(2deg) translateZ(2px) scale(0.88);
  background: radial-gradient(
    ellipse 88% 82% at 50% 50%,
    hsl(0 0% 100% / 0.16),
    hsl(0 0% 100% / 0.05) 48%,
    transparent 72%
  );
}

.login-hero-card-glow--pace {
  right: -0.35rem;
  bottom: 0.15rem;
  width: 12.5rem;
  height: 8rem;
  transform: rotateY(8deg) rotateX(-2deg) translateZ(22px);
  background: radial-gradient(
    ellipse 90% 84% at 52% 48%,
    hsl(0 0% 100% / 0.18),
    hsl(0 0% 100% / 0.06) 45%,
    transparent 70%
  );
}

.login-hero-room__content .login-hero-scene__card {
  position: absolute;
  padding: 0.85rem 1rem;
  overflow: visible;
}

.login-hero-room__content .login-hero-scene__card--back {
  left: -0.15rem;
  top: 0.45rem;
  width: 10rem;
  transform: rotateY(-10deg) rotateX(2deg) translateZ(6px) scale(0.88);
}

.login-hero-room__content .login-hero-scene__card--front {
  right: -0.25rem;
  bottom: 0.15rem;
  width: 12.25rem;
  transform: rotateY(8deg) rotateX(-2deg) translateZ(34px);
}

/* Gap pill — inside card (no 3D float = crisp pixels) */
.login-hero-gap {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.5rem;
  border-radius: calc(var(--radius) - 2px);
  background: hsl(0 0% 12%);
  box-shadow: 0 0 0 1px hsl(0 0% 0% / 0.2);
  -webkit-font-smoothing: antialiased;
}

.login-hero-gap__swatch {
  width: 0.5rem;
  height: 0.5rem;
}

.login-hero-gap__label {
  font-size: 0.625rem;
  line-height: 1;
  color: hsl(0 0% 100% / 0.55);
}

.login-hero-gap__value {
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: hsl(0 0% 100%);
  letter-spacing: 0.01em;
}

.login-hero-gap--positive {
  border-color: rgb(0 77 77 / 0.35);
  box-shadow:
    0 0 0 1px hsl(0 0% 0% / 0.2),
    0 0 20px rgb(0 77 77 / 0.12);
}

.login-hero-gap--positive .login-hero-gap__value {
  color: hsl(160 45% 78%);
}

/* Single seamless layer — smooth falloff, no hard horizontal bands */
.login-bg {
  background-image: radial-gradient(
    ellipse 70% 120% at 100% 50%,
    hsl(0 0% 100% / 0.07) 0%,
    hsl(0 0% 100% / 0.025) 42%,
    transparent 72%
  );
}

.login-card-panel {
  position: relative;
  overflow: hidden;
}

.login-card-panel .login-field {
  border: 1px solid hsl(0 0% 100% / 0.12) !important;
  background: hsl(0 0% 0% / 0.45) !important;
  color: hsl(0 0% 100% / 0.95) !important;
  box-shadow: 0 0 0 1px hsl(0 0% 100% / 0.03) inset;
}

.login-card-panel .login-field::placeholder {
  color: hsl(0 0% 100% / 0.32) !important;
}

/* Browser autofill — keep dark fields (Chrome/Edge light-blue override) */
.login-card-panel .login-field:-webkit-autofill,
.login-card-panel .login-field:-webkit-autofill:hover,
.login-card-panel .login-field:-webkit-autofill:focus,
.login-card-panel .login-field:-webkit-autofill:active,
.login-card-panel .login-field:autofill {
  -webkit-text-fill-color: hsl(0 0% 100% / 0.95) !important;
  caret-color: hsl(0 0% 100% / 0.95);
  border: 1px solid hsl(0 0% 100% / 0.12) !important;
  box-shadow: 0 0 0 1000px hsl(0 0% 0% / 0.45) inset !important;
  transition: background-color 99999s ease-out 0s;
}

.login-card-panel .login-field:-webkit-autofill:focus-visible,
.login-card-panel .login-field:autofill:focus-visible {
  border-color: hsl(0 0% 100% / 0.28) !important;
  box-shadow:
    0 0 0 1000px hsl(0 0% 0% / 0.65) inset,
    0 0 0 1px hsl(0 0% 100% / 0.06) inset,
    0 0 0 2px hsl(0 0% 100% / 0.1) !important;
}

.login-card-panel .login-field:focus-visible {
  border-color: hsl(0 0% 100% / 0.28) !important;
  background: hsl(0 0% 0% / 0.65) !important;
  box-shadow:
    0 0 0 1px hsl(0 0% 100% / 0.06) inset,
    0 0 0 2px hsl(0 0% 100% / 0.1);
}

.login-card-panel .login-input-glow:focus-visible {
  box-shadow:
    0 0 0 1px hsl(0 0% 100% / 0.06) inset,
    0 0 0 2px hsl(0 0% 100% / 0.12),
    0 0 16px hsl(0 0% 100% / 0.04);
}

.login-card-panel .login-submit-btn {
  border: 1px solid hsl(0 0% 100% / 0.2) !important;
  background: hsl(0 0% 98%) !important;
  color: hsl(0 0% 4%) !important;
  box-shadow: 0 10px 28px -10px hsl(0 0% 0% / 0.5) !important;
}

.login-card-panel .login-submit-btn:hover:not(:disabled) {
  background: hsl(0 0% 100%) !important;
}

.login-submit-btn {
  cursor: pointer;
  border: 1px solid hsl(0 0% 0% / 0.15) !important;
  background: hsl(0 0% 9%) !important;
  color: hsl(0 0% 98%) !important;
  box-shadow: 0 10px 28px -10px hsl(0 0% 0% / 0.25) !important;
}

.login-submit-btn:hover:not(:disabled) {
  background: hsl(0 0% 16%) !important;
}

.login-page .login-submit-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

@media (prefers-reduced-motion: reduce) {
  .login-chart-line,
  .login-chart-area,
  .login-chart-bar,
  .login-chart-frame,
  .login-hero-metric {
    animation: none;
    transition: none;
  }

  .login-chart-line {
    stroke-dashoffset: 0;
    opacity: 1;
  }

  .login-chart-bar {
    transition: none;
  }

  .login-hero-scene__stage {
    transition: none;
  }
}

/* Layout utilities — Tailwind equivalents used in login markup */
.login-page.flex { display: flex; }
.login-page.min-h-screen { min-height: 100vh; }
.login-page .flex { display: flex; }
.login-page .flex-col { flex-direction: column; }
.login-page .flex-1 { flex: 1 1 0%; }
.login-page .grid { display: grid; }
.login-page .hidden { display: none; }
.login-page .relative { position: relative; }
.login-page .absolute { position: absolute; }
.login-page .inset-0 { inset: 0; }
.login-page .-inset-4 { inset: -1rem; }
.login-page .pointer-events-none { pointer-events: none; }
.login-page .mx-auto { margin-left: auto; margin-right: auto; }
.login-page .mb-6 { margin-bottom: 1.5rem; }
.login-page .mb-8 { margin-bottom: 2rem; }
.login-page .mb-10 { margin-bottom: 2.5rem; }
.login-page .mt-0\.5 { margin-top: 0.125rem; }
.login-page .mt-1\.5 { margin-top: 0.375rem; }
.login-page .mt-2 { margin-top: 0.5rem; }
.login-page .mt-2\.5 { margin-top: 0.625rem; }
.login-page .mt-3 { margin-top: 0.75rem; }
.login-page .mt-6 { margin-top: 1.5rem; }
.login-page .mt-8 { margin-top: 2rem; }
.login-page .w-full { width: 100%; }
.login-page .max-w-md { max-width: 28rem; }
.login-page .max-w-5xl { max-width: 64rem; }
.login-page .max-w-\[26rem\] { max-width: 26rem; }
.login-page .h-9 { height: 2.25rem; }
.login-page .h-11 { height: 2.75rem; }
.login-page .h-12 { height: 3rem; }
.login-page .min-w-0 { min-width: 0; }
.login-page .shrink-0 { flex-shrink: 0; }
.login-page .items-center { align-items: center; }
.login-page .items-start { align-items: flex-start; }
.login-page .justify-center { justify-content: center; }
.login-page .justify-between { justify-content: space-between; }
.login-page .gap-2 { gap: 0.5rem; }
.login-page .gap-3 { gap: 0.75rem; }
.login-page .gap-3\.5 { gap: 0.875rem; }
.login-page .gap-4 { gap: 1rem; }
.login-page .gap-10 { gap: 2.5rem; }
.login-page .space-y-1 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.25rem; }
.login-page .space-y-1\.5 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.375rem; }
.login-page .space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.5rem; }
.login-page .space-y-5 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.25rem; }
.login-page .overflow-hidden { overflow: hidden; }
.login-page .overflow-visible { overflow: visible; }
.login-page .rounded-sm { border-radius: 0.125rem; }
.login-page .rounded-md { border-radius: 0.375rem; }
.login-page .rounded-\[2px\] { border-radius: 2px; }
.login-page .rounded-full { border-radius: 9999px; }
.login-page .border-0 { border: 0; }
.login-page .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.login-page .px-4 { padding-left: 1rem; padding-right: 1rem; }
.login-page .py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
.login-page .p-8 { padding: 2rem; }
.login-page .pb-12 { padding-bottom: 3rem; }
.login-page .pt-8 { padding-top: 2rem; }
.login-page .text-center { text-align: center; }
.login-page .text-xs { font-size: 0.75rem; line-height: 1rem; }
.login-page .text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.login-page .text-base { font-size: 0.9rem; line-height: 1.5rem; }
.login-page .text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.login-page .text-\[10px\] { font-size: 10px; }
.login-page .text-\[1\.75rem\] { font-size: 1.75rem; }
.login-page .font-medium { font-weight: 500; }
.login-page .font-semibold { font-weight: 600; }
.login-page .uppercase { text-transform: uppercase; }
.login-page .leading-none { line-height: 1; }
.login-page .leading-snug { line-height: 1.375; }
.login-page .tracking-wider { letter-spacing: 0.05em; }
.login-page .tabular-nums { font-variant-numeric: tabular-nums; }
.login-page .inline-block { display: inline-block; }
.login-page .block { display: block; }
.login-page .text-white { color: hsl(0 0% 100%); }
.login-page .text-white\/50 { color: hsl(0 0% 100% / 0.5); }
.login-page .text-white\/80 { color: hsl(0 0% 100% / 0.8); }
.login-page .text-neutral-500 { color: hsl(0 0% 45%); }
.login-page .text-neutral-900 { color: hsl(0 0% 9%); }
.login-page .bg-white\/8 { background-color: hsl(0 0% 100% / 0.08); }
.login-page .blur-2xl { filter: blur(40px); }
.login-page .z-\[1\] { z-index: 1; }

@media (min-width: 640px) {
  .login-page .sm\:px-8 { padding-left: 2rem; padding-right: 2rem; }
  .login-page .sm\:p-9 { padding: 2.25rem; }
  .login-page .sm\:text-sm { font-size: 1.2rem; line-height: 1.25rem; }
  .login-page .sm\:text-\[1\.85rem\] { font-size: 1.85rem; }
}

@media (min-width: 1024px) {
  .login-page .lg\:hidden { display: none; }
  .login-page .lg\:block { display: block; }
  .login-page .lg\:flex { display: flex; }
  .login-page .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .login-page .lg\:flex-col { flex-direction: column; }
  .login-page .lg\:items-center { align-items: center; }
  .login-page .lg\:justify-center { justify-content: center; }
  .login-page .lg\:gap-20 { gap: 5rem; }
}

/* Override global app shell styles when login is active */
body:has(.login-page),
html.login-shell,
html.login-shell body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background-color: hsl(0 0% 3%);
}

html.login-shell {
  background-color: hsl(0 0% 3%);
}

.login-loading-screen {
  position: fixed;
  inset: 0;
  /* Above navbar-home (1000), sidebar (6000), and filter/ticker bars */
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 1rem;
  background-color: hsl(0 0% 3%);
}

/* Keep app chrome hidden until the loading overlay is fully gone */
body:has(.login-loading-screen) .navbar-home,
body:has(.login-loading-screen) .sidebar,
body:has(.login-loading-screen) .weekly-sales-shell,
body:has(.login-loading-screen) .weekly-sales-shell__offset {
  visibility: hidden !important;
}

.login-loading-screen__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 24rem;
  text-align: center;
}

.login-page__content {
  opacity: 1;
}

body:has(.login-page) #app {
  display: block !important;
  width: 100% !important;
  min-height: 100vh !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  background: hsl(0 0% 3%) !important;
  color: hsl(0 0% 96%) !important;
}

@keyframes login-boot-mark-pulse {
  0%,
  100% {
    opacity: 0.72;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.03);
  }
}

.login-loading-screen .hb-headbrands-mark,
.login-boot-mark {
  animation: login-boot-mark-pulse 1.6s ease-in-out infinite;
}

.login-loading-message {
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .login-boot-mark,
  .login-loading-screen .hb-headbrands-mark {
    animation: none;
  }

}

.login-page .login-form {
  margin: 0;
  width: 100%;
}

.login-page .login-field-group {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
}

.login-page .login-card-panel label.login-card-label {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
}

.login-page .login-card-panel input.login-field {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  float: none !important;
  box-sizing: border-box !important;
  padding: 0 0.875rem !important;
  border-radius: calc(var(--radius) - 2px) !important;
  outline: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
}

.login-page .login-card-panel button.login-submit-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 1rem !important;
  text-align: center !important;
  border-radius: calc(var(--radius) - 2px) !important;
  box-sizing: border-box !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  float: none !important;
}

.login-page .login-submit-wrap {
  margin-top: 1.75rem !important;
}

.login-page .login-card-panel .validation-message,
.login-page .login-card-panel .field-validation-error,
.login-page .login-card-panel .validation-summary-errors {
  display: none !important;
}