/**
 * DS Sistemas — Modern Theme Layer v3
 * DNA: suporteChat (Figtree / Indigo / Slate).
 * Override sobre AdminLTE 3 — sem quebrar estrutura.
 *
 * FIXES v3:
 *  - Footer sempre visível + estilizado
 *  - Sidebar min-height 100vh garantido
 *  - Inputs: padding/height respeitando cálculo AdminLTE
 *  - Pesos de fonte calibrados (sem 800/900 em contexto errado)
 */

/* =========================================================
   0. FONTE
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600;700;800;900&display=swap');

/* =========================================================
   1. DESIGN TOKENS
   ========================================================= */
:root {
  --ds-indigo-950:  #1e1b4b;
  --ds-indigo-900:  #312e81;
  --ds-indigo-800:  #3730a3;
  --ds-indigo-700:  #4338ca;
  --ds-indigo-600:  #4f46e5;
  --ds-indigo-500:  #6366f1;
  --ds-indigo-400:  #818cf8;
  --ds-indigo-300:  #a5b4fc;
  --ds-indigo-100:  #e0e7ff;
  --ds-indigo-50:   #eef2ff;
  --ds-violet-700:  #6d28d9;
  --ds-violet-600:  #7c3aed;

  --ds-slate-900:   #0f172a;
  --ds-slate-800:   #1e293b;
  --ds-slate-700:   #334155;
  --ds-slate-600:   #475569;
  --ds-slate-500:   #64748b;
  --ds-slate-400:   #94a3b8;
  --ds-slate-300:   #cbd5e1;
  --ds-slate-200:   #e2e8f0;
  --ds-slate-100:   #f1f5f9;
  --ds-slate-50:    #f8fafc;

  --ds-primary:       var(--ds-indigo-600);
  --ds-primary-dark:  var(--ds-indigo-700);
  --ds-primary-light: var(--ds-indigo-50);

  --ds-body-bg:   var(--ds-slate-50);
  --ds-card-bg:   #ffffff;
  --ds-border:    var(--ds-slate-200);

  --ds-font: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --ds-shadow-xs: 0 1px 2px rgba(15,23,42,.04);
  --ds-shadow-sm: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --ds-shadow-md: 0 4px 16px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04);
  --ds-shadow-lg: 0 10px 40px rgba(15,23,42,.08), 0 2px 8px rgba(15,23,42,.04);

  --ds-radius-sm:   6px;
  --ds-radius-md:   10px;
  --ds-radius-lg:   14px;
  --ds-radius-xl:   16px;
  --ds-radius-2xl:  20px;
  --ds-radius-full: 9999px;

  --ds-transition-fast: 0.15s ease;
  --ds-transition:      0.22s ease;
  --ds-transition-slow: 0.3s ease;
}

/* =========================================================
   2. BASE
   ========================================================= */
body,
.wrapper,
.content-wrapper,
.main-header,
.main-sidebar,
.sidebar {
  font-family: var(--ds-font) !important;
  -webkit-font-smoothing: antialiased;
}

body {
  background-color: var(--ds-body-bg) !important;
  color: var(--ds-slate-800) !important;
  font-size: 0.9rem !important;
  font-weight: 400 !important;
}

.content-wrapper {
  background-color: var(--ds-body-bg) !important;
}

/* =========================================================
   3. WRAPPER & SIDEBAR — altura garantida
   ========================================================= */

/* Garante que o wrapper (e por consequência a sidebar) ocupa no mínimo a tela inteira */
.wrapper {
  min-height: 100vh !important;
}

/* Sidebar fixa pelo AdminLTE — mas quando não é fixa, forçamos a altura */
.main-sidebar {
  min-height: 100vh !important;
  bottom: 0 !important;
  position: fixed !important;
  background-color: var(--ds-indigo-950) !important;
  box-shadow: 4px 0 24px rgba(15,23,42,.18) !important;
  border-right: none !important;
}

/* A div interna .sidebar também precisa esticar */
.main-sidebar > .sidebar {
  min-height: calc(100vh - 64px) !important;
  display: flex !important;
  flex-direction: column !important;
}

/* =========================================================
   4. NAVBAR SUPERIOR
   ========================================================= */
.main-header.navbar {
  background: #ffffff !important;
  border-bottom: 1px solid var(--ds-slate-200) !important;
  box-shadow: var(--ds-shadow-xs) !important;
  min-height: 60px !important;
}

.main-header .navbar-nav .nav-link {
  color: var(--ds-slate-600) !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  padding: 0.45rem 0.75rem !important;
  border-radius: var(--ds-radius-md) !important;
  transition: color var(--ds-transition-fast), background var(--ds-transition-fast) !important;
}

.main-header .navbar-nav .nav-link:hover {
  color: var(--ds-indigo-600) !important;
  background: var(--ds-indigo-50) !important;
}

.main-header .navbar-brand {
  font-weight: 800 !important;
  font-size: 1.05rem !important;
  letter-spacing: -0.02em !important;
  color: var(--ds-slate-900) !important;
}

/* Dropdown navbar */
.navbar-nav .dropdown-menu {
  border: 1px solid var(--ds-slate-100) !important;
  border-radius: var(--ds-radius-xl) !important;
  box-shadow: 0 20px 60px rgba(15,23,42,.12), 0 4px 16px rgba(15,23,42,.06) !important;
  padding: 0.45rem !important;
}

.navbar-nav .dropdown-item {
  border-radius: var(--ds-radius-md) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  padding: 0.48rem 0.85rem !important;
  color: var(--ds-slate-700) !important;
  transition: background var(--ds-transition-fast), color var(--ds-transition-fast) !important;
}

.navbar-nav .dropdown-item:hover {
  background: var(--ds-indigo-50) !important;
  color: var(--ds-indigo-600) !important;
}

/* =========================================================
   5. SIDEBAR INTERNA
   ========================================================= */

/* Brand */
.brand-link {
  background: var(--ds-indigo-950) !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  padding: 0 16px !important;
  min-height: 60px !important;
  display: flex !important;
  align-items: center !important;
}

.brand-link .brand-text {
  font-weight: 800 !important;
  font-size: 0.975rem !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
}

.brand-link img.brand-image {
  border-radius: var(--ds-radius-md) !important;
}

/* Nav items */
.sidebar .nav-sidebar > .nav-item {
  margin: 1px 8px !important;
}

.sidebar .nav-sidebar > .nav-item > .nav-link {
  border-radius: 10px !important;
  padding: 0.55rem 0.875rem !important;
  color: var(--ds-indigo-300) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  transition: background var(--ds-transition-fast), color var(--ds-transition-fast) !important;
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
}

.sidebar .nav-sidebar > .nav-item > .nav-link:hover {
  background: rgba(255,255,255,.05) !important;
  color: #ffffff !important;
}

.sidebar .nav-sidebar > .nav-item > .nav-link.active,
.sidebar .nav-sidebar > .nav-item.menu-open > .nav-link {
  background: var(--ds-indigo-600) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(79,70,229,.3) !important;
}

/* Ícones */
.nav-sidebar .nav-link .nav-icon {
  font-size: 0.95rem !important;
  width: 1.1rem !important;
  text-align: center !important;
  color: inherit !important;
  margin-right: 0 !important;
}

/* Submenu treeview */
.sidebar .nav-treeview {
  padding: 2px 0 4px !important;
}

.sidebar .nav-treeview > .nav-item > .nav-link {
  border-radius: 8px !important;
  padding: 0.4rem 0.875rem 0.4rem 2.5rem !important;
  font-size: 0.83rem !important;
  font-weight: 500 !important;
  color: rgba(165,180,252,.65) !important;
  transition: background var(--ds-transition-fast), color var(--ds-transition-fast) !important;
}

.sidebar .nav-treeview > .nav-item > .nav-link:hover {
  background: rgba(255,255,255,.04) !important;
  color: var(--ds-indigo-300) !important;
}

.sidebar .nav-treeview > .nav-item > .nav-link.active {
  background: rgba(79,70,229,.15) !important;
  color: var(--ds-indigo-300) !important;
}

/* Cabeçalhos de seção */
.sidebar .nav-header {
  color: var(--ds-indigo-500) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  padding: 1.1rem 1rem 0.35rem !important;
}

/* =========================================================
   6. CARDS
   ========================================================= */
.card {
  background: var(--ds-card-bg) !important;
  border: 1px solid var(--ds-slate-200) !important;
  border-radius: var(--ds-radius-xl) !important;
  box-shadow: var(--ds-shadow-sm) !important;
  margin-bottom: 1.25rem !important;
  transition: box-shadow var(--ds-transition-slow), transform var(--ds-transition-slow) !important;
  animation: ds-fade-up 0.2s ease-out both;
}

.card:hover {
  box-shadow: var(--ds-shadow-md) !important;
}

.card-header {
  background: #ffffff !important;
  border-bottom: 1px solid var(--ds-slate-200) !important;
  border-radius: var(--ds-radius-xl) var(--ds-radius-xl) 0 0 !important;
  padding: 0.9rem 1.25rem !important;
}

.card-header .card-title {
  font-size: 0.925rem !important;
  font-weight: 700 !important;
  color: var(--ds-slate-900) !important;
  letter-spacing: -0.015em !important;
  margin-bottom: 0 !important;
}

.card-header .card-tools {
  margin-top: 0 !important;
}

.card-body {
  padding: 1.25rem !important;
}

.card-footer {
  background: var(--ds-slate-50) !important;
  border-top: 1px solid var(--ds-slate-200) !important;
  border-radius: 0 0 var(--ds-radius-xl) var(--ds-radius-xl) !important;
  padding: 0.875rem 1.25rem !important;
}

/* Accent top */
.card.card-primary   { border-top: 3px solid var(--ds-indigo-600) !important; }
.card.card-success   { border-top: 3px solid #10b981 !important; }
.card.card-warning   { border-top: 3px solid #f59e0b !important; }
.card.card-danger    { border-top: 3px solid #ef4444 !important; }
.card.card-info      { border-top: 3px solid #06b6d4 !important; }
.card.card-secondary { border-top: 3px solid var(--ds-slate-400) !important; }

/* =========================================================
   7. BUTTONS
   ========================================================= */
.btn {
  font-family: var(--ds-font) !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  letter-spacing: -0.005em !important;
  border-radius: var(--ds-radius-md) !important;
  transition: all var(--ds-transition) !important;
}

.btn:hover:not(:disabled) {
  transform: translateY(-1px) !important;
  box-shadow: var(--ds-shadow-md) !important;
}

.btn:active:not(:disabled) {
  transform: translateY(0) !important;
}

/* Primary */
.btn-primary {
  background: linear-gradient(135deg, var(--ds-indigo-600) 0%, var(--ds-violet-600) 100%) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 2px 12px rgba(79,70,229,.3) !important;
}

.btn-primary:hover:not(:disabled),
.btn-primary:focus {
  background: linear-gradient(135deg, var(--ds-indigo-700) 0%, var(--ds-violet-700) 100%) !important;
  box-shadow: 0 6px 20px rgba(79,70,229,.4) !important;
  color: #fff !important;
}

/* Success */
.btn-success {
  background: #10b981 !important;
  border-color: #10b981 !important;
}
.btn-success:hover:not(:disabled) {
  background: #059669 !important;
  border-color: #059669 !important;
}

/* Danger */
.btn-danger {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
}
.btn-danger:hover:not(:disabled) {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
}

/* Warning */
.btn-warning {
  background: #f59e0b !important;
  border-color: #f59e0b !important;
  color: #fff !important;
}
.btn-warning:hover:not(:disabled) {
  background: #d97706 !important;
  border-color: #d97706 !important;
  color: #fff !important;
}

/* Secondary / Light */
.btn-secondary {
  background: var(--ds-slate-100) !important;
  border: 1px solid var(--ds-slate-200) !important;
  color: var(--ds-slate-700) !important;
}
.btn-secondary:hover:not(:disabled) {
  background: var(--ds-slate-200) !important;
  color: var(--ds-slate-900) !important;
}

.btn-light {
  background: #fff !important;
  border: 1px solid var(--ds-slate-200) !important;
  color: var(--ds-slate-700) !important;
}

/* Tamanhos */
.btn-sm  { border-radius: var(--ds-radius-sm) !important; font-size: 0.8rem !important; }
.btn-lg  { border-radius: var(--ds-radius-lg) !important; font-size: 0.95rem !important; }

/* =========================================================
   8. FORMS — FIX: padding respeitando altura original AdminLTE
   ========================================================= */

/*
 * IMPORTANTE: AdminLTE calcula height como calc(1.6em + 0.75rem + 2px).
 * Não mudamos o padding padrão para não quebrar a altura.
 * Apenas estilo visual: border, radius, focus ring.
 */
.form-control {
  font-family: var(--ds-font) !important;
  font-size: 0.9rem !important;
  font-weight: 400 !important;         /* peso normal — sem deixar pesado */
  color: var(--ds-slate-800) !important;
  background: #ffffff !important;
  border: 1.5px solid var(--ds-slate-300) !important;
  border-radius: var(--ds-radius-md) !important;
  /* padding e height: NÃO sobrescrevemos — deixamos o AdminLTE calcular */
  transition: border-color var(--ds-transition-fast), box-shadow var(--ds-transition-fast) !important;
  box-shadow: none !important;
}

.form-control:focus {
  border-color: var(--ds-indigo-500) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.15) !important;
  color: var(--ds-slate-900) !important;
  outline: none !important;
}

.form-control::placeholder {
  color: var(--ds-slate-400) !important;
  font-weight: 400 !important;
}

.form-control:disabled,
.form-control[readonly] {
  background: var(--ds-slate-50) !important;
  color: var(--ds-slate-500) !important;
  border-color: var(--ds-slate-200) !important;
  opacity: 1 !important;
}

/* Inputs compactos — restaura tamanho padrão Bootstrap sem arredondamento excessivo */
.form-control-sm {
  font-size: 0.8rem !important;
  border-radius: var(--ds-radius-sm) !important; /* 6px em vez de 10px */
  padding: 0.25rem 0.4rem !important;
  height: auto !important;
}

.form-select-sm {
  font-size: 0.8rem !important;
  border-radius: var(--ds-radius-sm) !important;
  padding: 0.2rem 0.4rem !important;
  height: auto !important;
}

/* Input groups */
.input-group-text {
  background: var(--ds-slate-50) !important;
  border: 1.5px solid var(--ds-slate-300) !important;
  border-radius: var(--ds-radius-md) !important;
  color: var(--ds-slate-500) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
}

/* Textarea */
textarea.form-control {
  resize: vertical !important;
  min-height: 80px !important;
}

/* ─── FIX: inputs de data/hora ────────────────────────────
 * Navegadores (Chrome/Edge/Safari) renderizam as partes internas
 * de input[type="time|date|datetime-local"] com pseudo-elementos
 * próprios que NÃO herdam color normalmente.
 * color-scheme: light  → força o browser a usar paleta clara.
 * -webkit-datetime-edit-* → garante cor visível em cada campo.
 * ─────────────────────────────────────────────────────── */
input[type="time"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="week"] {
  color-scheme: light !important;
  color: var(--ds-slate-800) !important;
}

/* Partes internas (webkit) */
input[type="time"]::-webkit-datetime-edit,
input[type="date"]::-webkit-datetime-edit,
input[type="datetime-local"]::-webkit-datetime-edit {
  color: var(--ds-slate-800) !important;
  padding: 0 !important;
}

input[type="time"]::-webkit-datetime-edit-fields-wrapper,
input[type="date"]::-webkit-datetime-edit-fields-wrapper,
input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper {
  color: var(--ds-slate-800) !important;
}

input[type="time"]::-webkit-datetime-edit-hour-field,
input[type="time"]::-webkit-datetime-edit-minute-field,
input[type="time"]::-webkit-datetime-edit-second-field,
input[type="time"]::-webkit-datetime-edit-ampm-field,
input[type="time"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-year-field,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-text,
input[type="datetime-local"]::-webkit-datetime-edit-year-field,
input[type="datetime-local"]::-webkit-datetime-edit-month-field,
input[type="datetime-local"]::-webkit-datetime-edit-day-field,
input[type="datetime-local"]::-webkit-datetime-edit-hour-field,
input[type="datetime-local"]::-webkit-datetime-edit-minute-field,
input[type="datetime-local"]::-webkit-datetime-edit-second-field,
input[type="datetime-local"]::-webkit-datetime-edit-text {
  color: var(--ds-slate-800) !important;
  background: transparent !important;
}

/* Placeholder (quando ainda não tem valor) */
input[type="time"]::-webkit-datetime-edit-hour-field:focus,
input[type="time"]::-webkit-datetime-edit-minute-field:focus,
input[type="time"]::-webkit-datetime-edit-second-field:focus,
input[type="date"]::-webkit-datetime-edit-year-field:focus,
input[type="date"]::-webkit-datetime-edit-month-field:focus,
input[type="date"]::-webkit-datetime-edit-day-field:focus {
  background: var(--ds-indigo-100) !important;
  color: var(--ds-indigo-700) !important;
  border-radius: 3px !important;
  outline: none !important;
}

/* Ícone do calendário/relógio */
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  opacity: 0.5 !important;
  cursor: pointer !important;
  filter: none !important;
}

/* Labels — somente em contexto de form, não global */
.form-group > label,
.form-group label,
.card-body .form-group label,
.modal-body .form-group label {
  font-size: 0.825rem !important;
  font-weight: 600 !important;
  color: var(--ds-slate-700) !important;
  margin-bottom: 0.3rem !important;
}

/* Select nativo */
select.form-control {
  cursor: pointer !important;
}

/* ─── Select2 ─────────────────────────────────────── */
/* Não forçamos height — deixamos o Select2 calcular pelo próprio CSS */
.select2-container--default .select2-selection--single {
  border: 1.5px solid var(--ds-slate-300) !important;
  border-radius: var(--ds-radius-md) !important;
  /* height: auto — herdado do AdminLTE/Bootstrap */
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  font-family: var(--ds-font) !important;
  font-size: 0.9rem !important;
  font-weight: 400 !important;
  color: var(--ds-slate-800) !important;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--ds-indigo-500) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.15) !important;
  outline: none !important;
}

.select2-container--default .select2-selection--multiple {
  border: 1.5px solid var(--ds-slate-300) !important;
  border-radius: var(--ds-radius-md) !important;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: var(--ds-indigo-500) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.15) !important;
}

.select2-dropdown {
  border: 1px solid var(--ds-slate-200) !important;
  border-radius: var(--ds-radius-lg) !important;
  box-shadow: 0 20px 60px rgba(15,23,42,.12), 0 4px 16px rgba(15,23,42,.06) !important;
  overflow: hidden !important;
  font-family: var(--ds-font) !important;
}

.select2-container--default .select2-results__option {
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  padding: 0.45rem 0.875rem !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--ds-indigo-600) !important;
  color: #fff !important;
}

.select2-container--default .select2-results__option[aria-selected=true] {
  background: var(--ds-indigo-50) !important;
  color: var(--ds-indigo-700) !important;
}

/* =========================================================
   9. TABELAS
   ========================================================= */
.table {
  font-size: 0.875rem !important;
  color: var(--ds-slate-700) !important;
  font-weight: 400 !important;
}

.table thead th {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--ds-slate-500) !important;
  border-bottom: 2px solid var(--ds-slate-200) !important;
  padding: 0.65rem 0.875rem !important;
  background: var(--ds-slate-50) !important;
}

.table tbody td {
  border-top: 1px solid var(--ds-slate-100) !important;
  padding: 0.65rem 0.875rem !important;
  vertical-align: middle !important;
  font-weight: 400 !important;
  color: var(--ds-slate-700) !important;
}

.table tbody tr {
  transition: background var(--ds-transition-fast) !important;
}

.table-hover tbody tr:hover {
  background-color: var(--ds-indigo-50) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(248,250,252,.8) !important;
}

/* DataTables */
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_info {
  font-size: 0.825rem !important;
  font-weight: 500 !important;
  color: var(--ds-slate-500) !important;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border: 1.5px solid var(--ds-slate-300) !important;
  border-radius: var(--ds-radius-md) !important;
  font-size: 0.85rem !important;
  font-weight: 400 !important;
  transition: border-color var(--ds-transition-fast), box-shadow var(--ds-transition-fast) !important;
}

.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--ds-indigo-500) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.15) !important;
  outline: none !important;
}

/* =========================================================
   10. BADGES
   ========================================================= */
.badge {
  font-family: var(--ds-font) !important;
  font-weight: 700 !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.02em !important;
  border-radius: var(--ds-radius-full) !important;
  padding: 0.3em 0.65em !important;
}

/* =========================================================
   11. BREADCRUMB & CONTENT HEADER
   ========================================================= */
.content-header {
  padding: 14px 20px !important;
  border-bottom: 1px solid var(--ds-slate-100) !important;
  background: #fff !important;
}

.content-header h1 {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: var(--ds-slate-900) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.3 !important;
}

.content-wrapper > .content {
  padding: 1.25rem !important;
}

.breadcrumb {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0.78rem !important;
}

.breadcrumb-item a {
  color: var(--ds-indigo-600) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

.breadcrumb-item a:hover {
  color: var(--ds-indigo-700) !important;
  text-decoration: underline !important;
}

.breadcrumb-item.active {
  color: var(--ds-slate-400) !important;
  font-weight: 500 !important;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--ds-slate-300) !important;
}

/* =========================================================
   12. SMALL BOXES / INFO BOXES
   ========================================================= */
.small-box {
  border-radius: var(--ds-radius-xl) !important;
  box-shadow: var(--ds-shadow-md) !important;
  border: none !important;
  overflow: hidden !important;
  transition: transform var(--ds-transition-slow), box-shadow var(--ds-transition-slow) !important;
}

.small-box:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--ds-shadow-lg) !important;
}

.small-box .inner h3 {
  font-family: var(--ds-font) !important;
  font-weight: 800 !important;
  font-size: 1.9rem !important;
  letter-spacing: -0.025em !important;
}

.small-box .inner p {
  font-family: var(--ds-font) !important;
  font-weight: 500 !important;
  font-size: 0.9rem !important;
}

.small-box > .small-box-footer {
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  padding: 7px 12px !important;
}

.info-box {
  border-radius: var(--ds-radius-xl) !important;
  box-shadow: var(--ds-shadow-sm) !important;
  border: 1px solid var(--ds-slate-200) !important;
  min-height: 74px !important;
  transition: transform var(--ds-transition-slow), box-shadow var(--ds-transition-slow) !important;
}

.info-box:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--ds-shadow-md) !important;
}

.info-box-icon {
  border-radius: var(--ds-radius-xl) 0 0 var(--ds-radius-xl) !important;
  width: 68px !important;
  font-size: 1.5rem !important;
  line-height: 74px !important;
}

.info-box-text {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--ds-slate-500) !important;
}

.info-box-number {
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: var(--ds-slate-900) !important;
}

/* =========================================================
   13. ALERTS
   ========================================================= */
.alert {
  font-family: var(--ds-font) !important;
  border-radius: var(--ds-radius-lg) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  padding: 0.875rem 1.1rem !important;
  border: 1px solid transparent !important;
}

.alert-primary {
  background: var(--ds-indigo-50) !important;
  border-color: var(--ds-indigo-100) !important;
  color: var(--ds-indigo-700) !important;
}

.alert-success {
  background: rgba(16,185,129,.07) !important;
  border-color: rgba(16,185,129,.2) !important;
  color: #065f46 !important;
}

.alert-danger {
  background: rgba(239,68,68,.07) !important;
  border-color: rgba(239,68,68,.18) !important;
  color: #991b1b !important;
}

.alert-warning {
  background: rgba(245,158,11,.07) !important;
  border-color: rgba(245,158,11,.2) !important;
  color: #92400e !important;
}

/* =========================================================
   14. MODAIS
   ========================================================= */
.modal-content {
  border: none !important;
  border-radius: var(--ds-radius-2xl) !important;
  box-shadow: 0 24px 80px rgba(15,23,42,.16), 0 8px 32px rgba(15,23,42,.08) !important;
  overflow: hidden !important;
}

.modal-header {
  border-bottom: 1px solid var(--ds-slate-100) !important;
  padding: 1.1rem 1.35rem !important;
  background: #fff !important;
}

.modal-title {
  font-weight: 700 !important;
  font-size: 1rem !important;
  color: var(--ds-slate-900) !important;
  letter-spacing: -0.015em !important;
}

.modal-body {
  padding: 1.25rem 1.35rem !important;
}

.modal-footer {
  border-top: 1px solid var(--ds-slate-100) !important;
  padding: 0.875rem 1.35rem !important;
  background: var(--ds-slate-50) !important;
}

/* =========================================================
   15. PAGINAÇÃO
   ========================================================= */
.pagination {
  gap: 3px !important;
}

.pagination .page-link {
  border-radius: var(--ds-radius-md) !important;
  border: 1.5px solid var(--ds-slate-200) !important;
  color: var(--ds-slate-600) !important;
  font-size: 0.83rem !important;
  font-weight: 600 !important;
  padding: 0.38rem 0.72rem !important;
  transition: all var(--ds-transition-fast) !important;
  background: #fff !important;
}

.pagination .page-link:hover {
  background: var(--ds-indigo-50) !important;
  color: var(--ds-indigo-600) !important;
  border-color: var(--ds-indigo-300) !important;
}

.pagination .page-item.active .page-link {
  background: linear-gradient(135deg, var(--ds-indigo-600), var(--ds-violet-600)) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(79,70,229,.3) !important;
}

.pagination .page-item.disabled .page-link {
  background: var(--ds-slate-50) !important;
  color: var(--ds-slate-300) !important;
  border-color: var(--ds-slate-200) !important;
}

/* =========================================================
   16. FOOTER — sempre visível, estilizado
   ========================================================= */
.main-footer {
  display: none !important;
  background: #ffffff !important;
  border-top: 1px solid var(--ds-slate-200) !important;
  color: var(--ds-slate-500) !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  padding: 0.75rem 1.25rem !important;
  font-family: var(--ds-font) !important;
}

.main-footer strong {
  color: var(--ds-slate-700) !important;
  font-weight: 700 !important;
}

.main-footer .float-right {
  color: var(--ds-slate-400) !important;
}

/* =========================================================
   17. DROPDOWNS GENÉRICOS
   ========================================================= */
.dropdown-menu {
  border: 1px solid var(--ds-slate-100) !important;
  border-radius: var(--ds-radius-xl) !important;
  box-shadow: 0 20px 60px rgba(15,23,42,.12), 0 4px 16px rgba(15,23,42,.06) !important;
  padding: 0.4rem !important;
  font-family: var(--ds-font) !important;
}

.dropdown-item {
  border-radius: var(--ds-radius-md) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  padding: 0.45rem 0.875rem !important;
  color: var(--ds-slate-700) !important;
  transition: background var(--ds-transition-fast), color var(--ds-transition-fast) !important;
}

.dropdown-item:hover {
  background: var(--ds-indigo-50) !important;
  color: var(--ds-indigo-600) !important;
}

.dropdown-item:active {
  background: var(--ds-indigo-100) !important;
  color: var(--ds-indigo-700) !important;
}

.dropdown-divider {
  border-top: 1px solid var(--ds-slate-100) !important;
  margin: 0.3rem 0 !important;
}

.dropdown-header {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--ds-slate-400) !important;
  padding: 0.5rem 0.875rem 0.3rem !important;
}

/* =========================================================
   18. SWEETALERT2
   ========================================================= */
.swal2-popup {
  border-radius: var(--ds-radius-2xl) !important;
  font-family: var(--ds-font) !important;
  box-shadow: 0 24px 80px rgba(15,23,42,.18) !important;
}

.swal2-title {
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--ds-slate-900) !important;
  font-size: 1.1rem !important;
}

.swal2-html-container {
  color: var(--ds-slate-600) !important;
  font-weight: 400 !important;
}

.swal2-confirm {
  background: linear-gradient(135deg, var(--ds-indigo-600), var(--ds-violet-600)) !important;
  border: none !important;
  border-radius: var(--ds-radius-md) !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 14px rgba(79,70,229,.3) !important;
}

.swal2-cancel {
  border-radius: var(--ds-radius-md) !important;
  font-weight: 600 !important;
  background: var(--ds-slate-100) !important;
  color: var(--ds-slate-700) !important;
}

/* =========================================================
   19. SCROLLBAR
   ========================================================= */
::-webkit-scrollbar        { width: 5px; height: 5px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: var(--ds-slate-300); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--ds-slate-400); }

/* =========================================================
   20. UTILITÁRIOS FINAIS
   ========================================================= */
.elevation-1, .elevation-2 { box-shadow: var(--ds-shadow-xs) !important; }
.elevation-3, .elevation-4 { box-shadow: var(--ds-shadow-md) !important; }

a {
  color: var(--ds-indigo-600);
  transition: color var(--ds-transition-fast);
}
a:hover {
  color: var(--ds-indigo-700);
}

.text-muted    { color: var(--ds-slate-400) !important; }
.text-primary  { color: var(--ds-indigo-600) !important; }
.text-success  { color: #059669 !important; }
.text-danger   { color: #dc2626 !important; }
.text-warning  { color: #b45309 !important; }
.text-info     { color: #0891b2 !important; }

hr {
  border-color: var(--ds-slate-200) !important;
  opacity: 1 !important;
}

.progress {
  border-radius: var(--ds-radius-full) !important;
  background: var(--ds-slate-100) !important;
  height: 6px !important;
}

.progress-bar {
  border-radius: var(--ds-radius-full) !important;
  background: linear-gradient(90deg, var(--ds-indigo-500), var(--ds-indigo-600)) !important;
}

/* Checkboxes / radio */
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--ds-indigo-600) !important;
  border-color: var(--ds-indigo-600) !important;
}

.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 3px rgba(99,102,241,.2) !important;
}

/* =========================================================
   21. ANIMAÇÃO DE ENTRADA
   ========================================================= */
@keyframes ds-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   22. RESPONSIVIDADE
   ========================================================= */
@media (max-width: 767.98px) {
  .content-wrapper > .content { padding: 1rem !important; }
  .content-header              { padding: 10px 14px !important; }
  .card-body                   { padding: 1rem !important; }
  .card-header                 { padding: 0.75rem 1rem !important; }
}

/* =========================================================
   23. REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .card             { animation: none !important; }
  .btn:hover,
  .small-box:hover,
  .info-box:hover   { transform: none !important; }
}