/**
 * regras/regras_verbas.css
 * Estilos da aba "Regras de Verbas"
 *
 * Observação:
 * - Este CSS reaproveita variáveis do seu tema global (ex.: --space-6, --radius-xl, etc.).
 * - Se alguma variável não existir no seu tema, o browser simplesmente ignora e usa fallback.
 */

/* =========================================================
   BASE (vindo da ajuda.css / estilo compartilhado)
   ========================================================= */

.help-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* Expansores (details/summary) */
.help-expander {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.help-expander summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: var(--font-size-lg);
  color: var(--gray-800);
}

.help-expander summary::-webkit-details-marker {
  display: none;
}

.help-expander[open] {
  border-color: var(--primary-300);
  box-shadow: var(--shadow-lg);
}

.help-expander .expander-content {
  margin-top: var(--space-3);
  color: var(--gray-700);
  font-size: var(--font-size-base);
}

.help-expander .bullets {
  margin: var(--space-3) 0 var(--space-1);
  padding-left: 1.25rem;
  list-style: disc;
}

.help-expander .bullets li {
  margin-bottom: 0.35rem;
}

/* Grid 2 colunas (igual sua ajuda) */
.help-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

@media (max-width: 992px) {
  .help-grid-2col {
    grid-template-columns: 1fr;
  }
}

.help-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Cores utilitárias (ícones) */
.text-primary { color: #2563eb; }
.text-success { color: #16a34a; }
.text-warning { color: #d97706; }
.text-danger  { color: #dc2626; }
.text-info    { color: #0ea5e9; }
.text-purple  { color: #9333ea; }

/* =========================================================
   ÍCONES NO MENU LATERAL (opcional, mas fica bonito)
   ========================================================= */

.sidebar-nav .nav-link .material-icons {
  color: inherit;
  opacity: 0.9;
  transition: color var(--transition-fast);
}

.sidebar-nav .nav-link[data-tab="upload"] .material-icons { color: var(--primary-600, #2563eb); }
.sidebar-nav .nav-link[data-tab="employee"] .material-icons { color: var(--info-600, #0ea5e9); }
.sidebar-nav .nav-link[data-tab="reports"] .material-icons { color: var(--success-600, #16a34a); }
.sidebar-nav .nav-link[data-tab="analysis"] .material-icons { color: var(--purple-600, #9333ea); }
.sidebar-nav .nav-link[data-tab="inconsistencies"] .material-icons { color: var(--warning-600, #d97706); }
.sidebar-nav .nav-link[data-tab="problemas"] .material-icons { color: var(--error-600, #dc2626); }
.sidebar-nav .nav-link[data-tab="ajuda"] .material-icons { color: var(--gray-600, #4b5563); }

/* Regras de Verbas */
.sidebar-nav .nav-link[data-tab="regras"] .material-icons {
  color: var(--primary-800, #1e40af);
}

.sidebar-nav .nav-link.active .material-icons,
.sidebar-nav .nav-link:hover .material-icons {
  opacity: 1;
}

/* =========================================================
   REGRAS DE VERBAS (estilo visual próprio)
   ========================================================= */

.regra-hero {
  background: linear-gradient(135deg, var(--warning-700, #b45309), var(--warning-600, #d97706));
  color: #fff;
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  margin-bottom: var(--space-8);
}

.regra-hero h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--font-size-3xl);
  margin-bottom: 0.25rem;
}

.regra-hero p {
  opacity: 0.95;
}

/* Sub-expander (details dentro de details) */
.help-expander .sub-expander {
  margin-top: var(--space-3);
  margin-bottom: var(--space-3);
  border: 1px solid var(--gray-100);
  box-shadow: none;
  background: #fff;
}

.help-expander .sub-expander summary {
  padding: var(--space-3);
  font-size: var(--font-size-base);
  font-weight: 500;
}

.help-expander .sub-expander .expander-content {
  border-top: none;
  padding-top: var(--space-1);
  padding-bottom: var(--space-3);
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}

/* Bloco de notas/alertas */
.regra-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  margin-top: var(--space-4);
  line-height: 1.4;
  white-space: normal;
}

.regra-note .material-icons {
  font-size: 1.5rem;
  flex-shrink: 0;
  margin-right: var(--space-2);
  padding-top: 2px;
}

/* Variações de notas */
.note-money {
  background: var(--success-50);
  border: 1px solid var(--success-300, #86efac);
  color: var(--success-700, #15803d);
}
.note-money .material-icons { color: var(--success-600, #16a34a); }

.note-scale {
  background: var(--violet-50, #f5f3ff);
  border: 1px solid var(--violet-300, #d8b4fe);
  color: var(--violet-700, #6d28d9);
}
.note-scale .material-icons { color: var(--violet-600, #8b5cf6); }

.note-intra {
  background: var(--primary-50);
  border: 1px solid var(--primary-300);
  color: var(--primary-700);
}
.note-intra .material-icons { color: var(--primary-600); }

.note-no-pay {
  background: var(--gray-100);
  border: 1px solid var(--gray-300);
  color: var(--gray-700);
}
.note-no-pay .material-icons { color: var(--gray-500); }

/* Tabela */
.data-table td,
.data-table th {
  white-space: normal;
  text-align: center;
}

/* Ajuste específico da nota “Nota de Inconsistência” */
.regra-note.note-scale strong {
  white-space: nowrap;
  display: inline-block;
}

/* =========================================================
   WIDE: deixa a aba mais “larga”
   ========================================================= */

#regrasPanel .panel-container {
  max-width: none !important;
}

.main-content {
  padding-left: var(--space-8);
  padding-right: var(--space-8);
}