/* ===========================================================
   Contador Ázera — tema compacto e mais vistoso
   Sobrescreve os padrões "caixotudo" do Bootstrap 5.
   NÃO é carregado na página ImprimeCalculo (impressão em papel).
   =========================================================== */

:root {
  --caz-primary: #4f46e5;
  --caz-primary-dark: #4338ca;
  --caz-success: #16a34a;
  --caz-danger: #dc2626;
  --caz-warning: #f59e0b;
  --caz-info: #0ea5e9;
  --caz-secondary: #64748b;
  --caz-dark: #1e293b;
}

/* -------- base mobile-first -------- */
html { font-size: 14px; }
body { font-size: 0.9rem; }

/* -------- botões: mais vivos, mais compactos -------- */
.btn {
  font-size: 0.8125rem;
  padding: 0.35rem 0.85rem;
  border-radius: 0.45rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: filter 0.15s ease, transform 0.05s ease;
}
.btn:active { transform: translateY(1px); }
.btn-sm { font-size: 0.75rem; padding: 0.28rem 0.6rem; border-radius: 0.4rem; }
.btn:hover { filter: brightness(1.08); }

.btn-primary   { background-color: var(--caz-primary); border-color: var(--caz-primary); }
.btn-primary:hover, .btn-primary:focus { background-color: var(--caz-primary-dark); border-color: var(--caz-primary-dark); }
.btn-success   { background-color: var(--caz-success); border-color: var(--caz-success); }
.btn-danger    { background-color: var(--caz-danger); border-color: var(--caz-danger); }
.btn-warning   { background-color: var(--caz-warning); border-color: var(--caz-warning); color: #1e293b; }
.btn-info      { background-color: var(--caz-info); border-color: var(--caz-info); color: #fff; }
.btn-secondary { background-color: var(--caz-secondary); border-color: var(--caz-secondary); }
.btn-dark      { background-color: var(--caz-dark); border-color: var(--caz-dark); }
.btn-outline-primary { color: var(--caz-primary); border-color: var(--caz-primary); }
.btn-outline-primary:hover { background-color: var(--caz-primary); }

/* -------- badges: cores mais saturadas -------- */
.badge { font-size: 0.7rem; padding: 0.32em 0.6em; border-radius: 0.4rem; font-weight: 600; letter-spacing: 0.02em; }
.badge.bg-primary   { background-color: var(--caz-primary) !important; }
.badge.bg-success   { background-color: var(--caz-success) !important; }
.badge.bg-danger    { background-color: var(--caz-danger) !important; }
.badge.bg-warning   { background-color: var(--caz-warning) !important; }
.badge.bg-info      { background-color: var(--caz-info) !important; }
.badge.bg-secondary { background-color: var(--caz-secondary) !important; }

.text-success { color: var(--caz-success) !important; }
.text-danger  { color: var(--caz-danger) !important; }
.text-primary { color: var(--caz-primary) !important; }

/* -------- tabelas: compactas, com destaque de hover mais vivo -------- */
.table {
  font-size: 0.82rem;
  margin-bottom: 0.75rem;
  border-collapse: separate;
  border-spacing: 0;
}
.table th, .table td {
  padding: 0.5rem 0.7rem;
  vertical-align: middle;
}
.table thead th {
  background-color: #f8fafc;
  color: #475569;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 2px solid #e2e8f0;
  white-space: nowrap;
}
.table-hover tbody tr:hover {
  background-color: #eef2ff;
}
.table-warning, .table.table tr.table-warning {
  --bs-table-bg: #fef3c7 !important;
}

/* botões de ação dentro de tabela, mais compactos e agrupados */
.table td .btn + .btn { margin-left: 0.2rem; }
.table td .btn-sm i { margin-right: 0.2rem; }

/* -------- formulários: compactos -------- */
.form-control, .form-select {
  font-size: 0.85rem;
  padding: 0.4rem 0.65rem;
  border-radius: 0.4rem;
}
.form-group, .mb-3 { margin-bottom: 0.85rem !important; }
label, .form-label { font-size: 0.82rem; font-weight: 600; color: #374151; }

/* -------- navbar pública (site.css já define outras coisas) -------- */
.navbar {
  min-height: 48px;
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}
.navbar-brand {
  font-size: 1rem;
  font-weight: 700;
}
.navbar .nav-link {
  font-size: 0.82rem;
  padding: 0.35rem 0.65rem !important;
}

/* -------- sidebar do admin (Tailwind utilitário w-64/h-16) mais enxuta -------- */
aside.w-64 { width: 13.5rem !important; }
header.h-16 { height: 3.25rem !important; }
aside .h-16 { height: 3.25rem !important; }
nav.space-y-1 > a, #sidebarMobile nav > a {
  padding-top: 0.45rem !important;
  padding-bottom: 0.45rem !important;
  font-size: 0.82rem !important;
}

/* -------- tabelas responsivas mobile-first (sem precisar de wrapper no HTML) -------- */
.dataTables_wrapper { overflow-x: auto; }

@media (max-width: 767.98px) {
  table.table:not(.dataTable) {
    display: block;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
  }
  table.table:not(.dataTable) thead,
  table.table:not(.dataTable) tbody,
  table.table:not(.dataTable) tr {
    display: table;
    width: 100%;
  }
  .table td .btn { display: inline-flex; margin-bottom: 0.2rem; }
}

/* tabelas em Tailwind (Admin: Empresas/Faturas/Cobrancas) já usam overflow-x-auto no wrapper */