/* Extracted from Vision Tower styles/rebrand.css (login) and vision-erp.css.
   Source component: components/auth/login-screen.tsx. No Tower auth/storage copied. */
.vt-login {
  /* SEM override de tokens de marca (o "login azul" de 2026-07-05 nasceu disso).
   * Os dois pretos abaixo sao locais do login — o canvas escuro do sistema
   * so existe sob :root.dark e o login e sempre claro. */
  --login-dark: #0a0c10;
  --login-dark-2: #171b22;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 100vh;
  overflow: hidden;
  background: #ffffff;
  color: var(--text-primary);
  color-scheme: light;
}

.vt-login__panel {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 22px;
  padding: clamp(24px, 5vw, 72px);
  background:
    radial-gradient(
      720px 520px at 50% 42%,
      rgba(255, 74, 28, 0.16),
      transparent 64%
    ),
    linear-gradient(180deg, var(--login-dark-2), var(--login-dark) 60%);
}

.vt-login__logo-sm {
  display: none;
  width: 140px;
  height: auto;
}

.vt-login__card {
  width: min(420px, 100%);
  display: grid;
  gap: 16px;
  padding: 32px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-2xl, 20px);
  background: var(--surface);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.04);
  animation: vt-page-in var(--motion-slow, 240ms) ease;
}

.vt-login__card-head h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--text-heading);
}

.vt-login__card-head p {
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: var(--text-xs);
}

.vt-login__card label {
  display: grid;
  gap: 6px;
}

.vt-login__card label span {
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: 600;
}

.vt-login__card input {
  padding: 11px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text-primary);
  font-size: var(--text-md);
  transition:
    border-color var(--motion-fast, 150ms) ease,
    box-shadow var(--motion-fast, 150ms) ease;
}

.vt-login__card input:focus-visible {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: var(--shadow-focus);
}

.vt-login__error {
  color: var(--danger-text);
  font-size: var(--text-xs);
}

.vt-login__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  border: 0;
  border-radius: var(--radius-pill, 50px);
  background: var(--brand-primary);
  color: var(--text-on-brand);
  font-size: var(--text-md);
  font-weight: 700;
  cursor: pointer;
  transition:
    transform var(--motion-fast, 150ms) ease,
    background var(--motion-fast, 150ms) ease,
    box-shadow var(--motion-fast, 150ms) ease;
}

.vt-login__submit:hover:not(:disabled) {
  background: var(--brand-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 10px 26px var(--brand-primary-ring);
}

.vt-login__submit:disabled {
  opacity: 0.7;
  cursor: wait;
}

.vt-login__links {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: var(--text-xs);
}

.vt-login__links a {
  color: var(--brand-primary);
  text-decoration: none;
}
.vt-login__links a:hover {
  text-decoration: underline;
}

.vt-login__demo {
  padding: 10px 12px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  color: var(--text-secondary);
  font-size: var(--text-2xs);
}

.vt-login__demo code {
  color: var(--brand-primary);
}

.vt-login__foot {
  color: rgba(255, 255, 255, 0.45);
  font-size: var(--text-2xs);
  letter-spacing: 0.04em;
}

.vt-login__brand {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(24px, 6vw, 96px);
  background: #ffffff;
}

.vt-login__logo {
  width: min(520px, 78%);
  height: auto;
  filter: drop-shadow(0 24px 48px rgba(255, 74, 28, 0.16));
}

@media (max-width: 960px) {
  .vt-login {
    grid-template-columns: 1fr;
  }
  .vt-login__brand {
    display: none;
  }
  .vt-login__logo-sm {
    display: block;
  }
}

.vision-public-shell .vt-login__card {
  background:
    radial-gradient(
      ellipse 100% 130% at 0% 0%,
      var(--vision-glass-tint),
      transparent 65%
    ),
    var(--surface);
  border: 1px solid var(--vision-glass-border);
  box-shadow:
    var(--shadow-float),
    inset 0 1px 0 var(--vision-glass-inner);
}
.vision-public-shell :is(label, input) {
  font-size: var(--type-control);
  line-height: 1.5;
}
.vision-public-shell :is(input, select, textarea) {
  font-size: var(--type-body);
}

.vision-public-shell .vt-login__submit {
  border-radius: 8px;
  min-height: 44px;
}
.vt-login__card h1 {
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: normal;
}
.vt-login__card select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  background: var(--surface);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
}
.vt-login__card input {
  width: 100%;
  min-width: 0;
}
.vt-login__card .vt-login__kicker {
  color: var(--brand-primary);
  font-weight: 600;
  font-size: var(--type-support);
  margin-bottom: 8px;
}
.vt-login__foot {
  margin: 0;
}
.vt-login__links {
  flex-wrap: wrap;
}
.vt-login__brand {
  align-content: center;
  gap: 24px;
}
.vt-login__brand p {
  color: var(--text-secondary);
  text-align: center;
}
.vt-login__card[aria-busy="true"] {
  cursor: wait;
}
.vt-login__submit {
  width: 100%;
}
.vt-login form fieldset {
  display: grid;
  gap: 16px;
}
.vt-login__loading {
  color: var(--text-secondary);
}
.vt-login__return {
  display: block;
  text-align: center;
}

.vt-login fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}