/* Fundo institucional da Inovative IoT Dashboard.
   Mantido separado do styles.css para facilitar futuras trocas de arte.
   O arquivo respeita o data-theme definido pelo ThemeProvider. */

.auth-shell {
  transition: background .25s ease, color .25s ease;
}

html[data-theme="dark"] .auth-shell {
  background:
    linear-gradient(115deg, rgba(1, 13, 30, .88), rgba(3, 48, 77, .58) 50%, rgba(2, 18, 34, .66)),
    url("/iot-industrial-background.svg") center / cover no-repeat fixed !important;
}

html[data-theme="light"] .auth-shell {
  background:
    linear-gradient(115deg, rgba(228, 244, 250, .60), rgba(140, 211, 228, .26) 48%, rgba(222, 240, 247, .44)),
    url("/iot-industrial-background.svg") center / cover no-repeat fixed !important;
}

html[data-theme="dark"] .auth-shell::before {
  background:
    radial-gradient(circle at 74% 26%, rgba(35, 199, 236, .17), transparent 30%),
    radial-gradient(circle at 22% 82%, rgba(51, 232, 179, .10), transparent 28%),
    linear-gradient(145deg, rgba(0, 28, 64, .14), transparent 48%) !important;
}

html[data-theme="light"] .auth-shell::before {
  background:
    radial-gradient(circle at 74% 26%, rgba(38, 177, 213, .15), transparent 31%),
    radial-gradient(circle at 22% 82%, rgba(25, 167, 125, .10), transparent 29%),
    linear-gradient(145deg, rgba(230, 248, 252, .22), rgba(255, 255, 255, .06) 46%, transparent 72%) !important;
}

.auth-shell::after {
  opacity: .08 !important;
}

html[data-theme="dark"] .auth-card {
  color: #fff !important;
  background: linear-gradient(145deg, rgba(4, 18, 36, .82), rgba(8, 37, 57, .72)) !important;
  border-color: rgba(143, 226, 248, .20) !important;
  box-shadow: 0 28px 85px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255, 255, 255, .10) !important;
}

html[data-theme="light"] .auth-card {
  color: #143247 !important;
  background: linear-gradient(145deg, rgba(248, 253, 255, .91), rgba(230, 244, 249, .84)) !important;
  border-color: rgba(255, 255, 255, .72) !important;
  box-shadow: 0 28px 75px rgba(9, 52, 75, .25), inset 0 1px 0 rgba(255, 255, 255, .90) !important;
}

html[data-theme="light"] .auth-card h1 {
  color: #102f43 !important;
}

html[data-theme="light"] .auth-eyebrow {
  color: #087fa9 !important;
}

html[data-theme="light"] .auth-description,
html[data-theme="light"] .auth-link-prompt,
html[data-theme="light"] .auth-support {
  color: rgba(20, 50, 71, .70) !important;
}

html[data-theme="light"] .auth-field,
html[data-theme="light"] .password-row {
  color: #183b50 !important;
}

html[data-theme="light"] .auth-input,
html[data-theme="light"] .auth-field input,
html[data-theme="light"] .auth-field textarea {
  color: #143247 !important;
  background: rgba(255, 255, 255, .74) !important;
  border-color: rgba(54, 111, 139, .22) !important;
}

html[data-theme="light"] .auth-input::placeholder,
html[data-theme="light"] .auth-field input::placeholder,
html[data-theme="light"] .auth-field textarea::placeholder {
  color: rgba(20, 50, 71, .44) !important;
}

html[data-theme="light"] .auth-input:focus,
html[data-theme="light"] .auth-field input:focus,
html[data-theme="light"] .auth-field textarea:focus {
  border-color: #159ec5 !important;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: 0 0 0 4px rgba(21, 158, 197, .14) !important;
}

html[data-theme="light"] .auth-card .theme-toggle {
  color: #244a61 !important;
  background: rgba(255, 255, 255, .62) !important;
  border-color: rgba(50, 105, 132, .20) !important;
}

html[data-theme="dark"] .auth-card .theme-toggle {
  color: rgba(255, 255, 255, .85) !important;
  background: rgba(2, 16, 34, .36) !important;
  border-color: rgba(255, 255, 255, .22) !important;
}

html[data-theme="light"] .password-row button,
html[data-theme="light"] .text-button,
html[data-theme="light"] .auth-link-prompt button,
html[data-theme="light"] .auth-support a {
  color: #087fa9 !important;
}

html[data-theme="light"] .password-row button:hover,
html[data-theme="light"] .text-button:hover,
html[data-theme="light"] .auth-link-prompt button:hover,
html[data-theme="light"] .auth-support a:hover {
  color: #075d7a !important;
}

@media (max-width: 900px) {
  .auth-shell {
    background-position: 58% center !important;
  }
}

@media (max-width: 760px) {
  .auth-shell {
    background-attachment: scroll !important;
    background-position: 62% center !important;
  }
}