/* ./templates/static/authentication/css/style.css */

/* --- Effects --- */

.a-platform {
  color: var(--white);
  font-weight: 700;
  text-decoration: none;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  transition: color 0.3s ease;
}
.a-platform:hover {
  color: var(--white);
}

/*  --- Layout principal --- */

.login-wrapper {
  min-height: 100vh;
  overflow-x: hidden;
}

.login-sidebar {
  background: linear-gradient(to bottom, var(--main-color), var(--dark-bg-color));
  color: white;
  min-height: 100%;
  padding: 3rem 1rem;
}

.login-sidebar .brand {
  font-size: 2.5rem;
  font-weight: 700;
}

.login-sidebar .description {
  font-size: 1.1rem;
  max-width: 300px;
}

.login-form {
  background-color: #111622;
  color: var(--light-text-color);
  min-height: 100%;
  padding: 3rem 1rem;
}

.login-form h2 {
  font-weight: 600;
}

input.form-control {
  padding: 0.75rem 1rem;
  border-radius: var(--border-radius);
  border: 1px solid #333;
  background-color: #1E2330;
  color: var(--light-text-color);
}

input.form-control:focus {
  border-color: var(--main-color);
  box-shadow: 0 0 5px var(--main-color);
  background-color: #1E2330;
  color: var(--light-text-color);
}

.form_password_reset input {
  padding: 0.75rem 1rem;
  border-radius: var(--border-radius);
  border: 1px solid #333;
  background-color: #1E2330;
  color: var(--light-text-color);
}

.form_password_reset label {
  color: var(--light-text-color);
  font-weight: 600;
}

.btn-primary {
  background-color: var(--main-color);
  border: none;
  padding: 0.75rem;
  border-radius: var(--border-radius);
  font-weight: 600;
}

.btn-primary:hover {
  background-color: #2492aa;
}

/* Splash */
.splash-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--main-color);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.5s ease;
}

.splash-screen.fade-out {
  opacity: 0;
}

.splash-logo {
  font-size: 3rem;
  color: var(--light-text-color);
  font-weight: 700;
  animation: pulse 1.2s ease-in-out infinite;
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}

/* Rodapé */
.footer {
  background-color: #0a0d14;
  color: var(--muted-text-color);
  font-size: 0.9rem;
}

/* Links auxiliares */
.text-link {
  color: var(--muted-text-color);
  font-size: 0.95rem;
  transition: color 0.2s ease;
  text-decoration: none;
}

.text-link:hover {
  color: var(--light-text-color);
}

/* Splash com logo */
.splash-logo-img {
  width: 140px;
  animation: splashZoom 1.2s ease-in-out infinite;
}

@keyframes splashZoom {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}

/* Tooltip style fix */
input:invalid ~ .invalid-feedback {
  display: block !important;
}

/* Spinner customizado */
.spinner-border {
  width: 1rem;
  height: 1rem;
  border-width: 0.15em;
}

/* --

RESPOSIVE DESIGN - MEDIA QUERIES

Media Types
-----------
1 - screen
2 - portrait
3 - landscape
4 - print
5 - pdf

Typical Device Breakpoints
--------------------------
Pequenas telas: até 600px
Celular: de 600px até 768px
Tablet: de 768px até 992px
Desktop: de 992px até 1200px
Grandes telas: acima de 1200px

Bootstrap Device Breakpoints
----------------------------
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px

-- */

@media (max-width: 768px) {
  .login-sidebar {
    min-height: auto;
    padding: 2rem 1rem;
  }

  .login-form {
    padding: 2rem 1rem;
  }

  .login-form form {
    width: 100%;
  }
}