/**
 * Custom Maximun CSS v0.3.0
 * Melhorias visuais sutis - Paleta Azul/Ciano
 * Criado: 12/12/2025
 */

/* ==========================================
   1. TELA DE LOGIN
   ========================================== */

/* Animação de entrada */
.login100-form {
  animation: fadeInUp 0.5s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Botão LOGIN com efeito glow */
.login100-form-btn {
  transition: all 0.3s ease;
}

.login100-form-btn:hover {
  box-shadow: 0 0 25px rgba(0, 198, 251, 0.6);
  transform: translateY(-1px);
}

/* Inputs com transição suave */
.input100 {
  transition: all 0.3s ease;
}

.wrap-input100.focus-input100 {
  box-shadow: 0 0 10px rgba(0, 198, 251, 0.3);
}

/* Versão badge estilizado */
.version-badge {
  background: linear-gradient(135deg, #00c6fb 0%, #005bea 100%);
  color: white;
  padding: 4px 12px;
  border-radius: 15px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  display: inline-block;
  box-shadow: 0 2px 8px rgba(0, 198, 251, 0.3);
}

/* ==========================================
   2. DASHBOARD - Cards/Info-boxes
   ========================================== */

.info-box {
  transition: all 0.3s ease;
  border-radius: 8px;
  overflow: hidden;
}

.info-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.info-box-number {
  font-size: 1.8rem;
  font-weight: 700;
}

.info-box-icon {
  transition: all 0.3s ease;
}

.info-box:hover .info-box-icon {
  transform: scale(1.05);
}

/* Small boxes também */
.small-box {
  transition: all 0.3s ease;
  border-radius: 8px;
}

.small-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* ==========================================
   3. SIDEBAR/MENU
   ========================================== */

.nav-sidebar .nav-link {
  transition: all 0.2s ease;
  border-left: 3px solid transparent;
  margin: 2px 8px;
  border-radius: 4px;
}

.nav-sidebar .nav-link:hover {
  background: rgba(255, 255, 255, 0.08);
  border-left-color: #00c6fb;
  padding-left: calc(1rem + 3px);
}

.nav-sidebar .nav-link.active {
  border-left-color: #00c6fb;
  background: rgba(0, 198, 251, 0.15);
}

/* Ícones do menu */
.nav-sidebar .nav-icon {
  transition: all 0.2s ease;
}

.nav-sidebar .nav-link:hover .nav-icon {
  color: #00c6fb;
}

/* Separadores de seção */
.nav-header {
  padding: 1rem 1rem 0.5rem;
  font-size: 0.7rem;
  letter-spacing: 1px;
  opacity: 0.6;
}

/* ==========================================
   4. BOTÕES GERAIS
   ========================================== */

.btn {
  transition: all 0.2s ease;
}

.btn:hover {
  transform: translateY(-0.5px);
}

.btn:active {
  transform: translateY(0);
}

/* Botões de ação (ícones) */
.btn-icon {
  transition: all 0.2s ease;
}

.btn-icon:hover {
  transform: scale(1.05);
}

/* Botão primário com gradiente sutil */
.btn-primary {
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
  border: none;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #0056b3 0%, #004094 100%);
  box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
}

/* Botão info (usado frequentemente) */
.btn-info {
  background: linear-gradient(135deg, #00c6fb 0%, #005bea 100%);
  border: none;
}

.btn-info:hover {
  background: linear-gradient(135deg, #005bea 0%, #003d99 100%);
  box-shadow: 0 2px 8px rgba(0, 198, 251, 0.3);
}

/* ==========================================
   5. TABELAS (DataTables)
   ========================================== */

.table tbody tr {
  transition: background 0.2s ease;
}

.table tbody tr:hover {
  background: rgba(0, 198, 251, 0.05) !important;
}

/* Cabeçalho da tabela */
.table thead th {
  border-bottom: 2px solid rgba(0, 198, 251, 0.3);
  font-weight: 600;
}

/* Paginação */
.page-item.active .page-link {
  background: linear-gradient(135deg, #00c6fb 0%, #005bea 100%);
  border-color: transparent;
}

/* ==========================================
   6. CARDS GERAIS
   ========================================== */

.card {
  transition: all 0.3s ease;
  border-radius: 8px;
  border: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.card:hover {
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.12);
}

.card-header {
  border-radius: 8px 8px 0 0 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* ==========================================
   7. FORMULÁRIOS
   ========================================== */

.form-control {
  transition: all 0.2s ease;
  border-radius: 6px;
}

.form-control:focus {
  border-color: #00c6fb;
  box-shadow: 0 0 0 3px rgba(0, 198, 251, 0.15);
}

/* Select estilizado */
select.form-control {
  cursor: pointer;
}

/* ==========================================
   8. MODAIS
   ========================================== */

.modal-content {
  border-radius: 12px;
  border: none;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.modal-header {
  border-radius: 12px 12px 0 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* ==========================================
   9. TOASTS/NOTIFICAÇÕES
   ========================================== */

.toast {
  border-radius: 8px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}

/* ==========================================
   10. SCROLLBAR CUSTOMIZADA
   ========================================== */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 198, 251, 0.3);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 198, 251, 0.5);
}

/* ==========================================
   11. LOADING/SPINNER
   ========================================== */

.spinner-border {
  color: #00c6fb;
}

/* ==========================================
   12. BADGES
   ========================================== */

.badge {
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 4px;
}

.badge-info {
  background: linear-gradient(135deg, #00c6fb 0%, #005bea 100%);
}