/**
 * OAT v1.6.3 - CSS de Reforço Visual (revisão completa + responsive fixes)
 * Garante que os estilos do app sejam aplicados corretamente
 * independente do tema WordPress instalado.
 *
 * REGRAS:
 * 1. Evitar seletores [class*="..."] amplos
 * 2. NÃO forçar display:flex em inputs (quebra ícones posicionados absolutamente)
 * 3. NÃO forçar padding em inputs que usam pl-10 (ícone à esquerda)
 * 4. NÃO forçar overflow:hidden em containers
 * 5. Permitir que .relative containers mostrem ícones corretamente
 * 6. Preservar espaçamentos originais do Tailwind (space-y, gap, p, m)
 * 7. NÃO sobrescrever grid-cols no mobile de forma genérica
 */

/* ===== RESET GLOBAL DENTRO DO #root ===== */
#root * {
  box-sizing: border-box !important;
}

#root {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: #1a1a2e !important;
  -webkit-font-smoothing: antialiased !important;
}

/* ===== CSS VARIABLES ===== */
:root {
  --radius: 0.5rem !important;
  --background: oklch(0.975 0.005 260) !important;
  --foreground: oklch(0.15 0.05 260) !important;
  --card: oklch(1 0 0) !important;
  --card-foreground: oklch(0.15 0.05 260) !important;
  --primary: oklch(0.27 0.09 260) !important;
  --primary-foreground: oklch(0.97 0.01 260) !important;
  --border: oklch(0.90 0.02 260) !important;
  --input: oklch(0.90 0.02 260) !important;
  --ring: oklch(0.32 0.10 260) !important;
  --muted: oklch(0.96 0.01 260) !important;
  --muted-foreground: oklch(0.50 0.04 260) !important;
}

/* ===== INPUTS ===== */
#root input[type="text"],
#root input[type="email"],
#root input[type="password"],
#root input[type="number"],
#root input[type="date"],
#root input[type="search"],
#root textarea,
#root select {
  width: 100% !important;
  font-size: 0.9375rem !important;
  font-family: 'DM Sans', sans-serif !important;
  line-height: 1.5 !important;
  color: #1a1a2e !important;
  background-color: #ffffff !important;
  border: 1px solid #d4d8e8 !important;
  border-radius: calc(var(--radius, 0.5rem) - 2px) !important;
  outline: none !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

#root input:focus,
#root textarea:focus,
#root select:focus {
  border-color: #0F366D !important;
  box-shadow: 0 0 0 2px rgba(15, 54, 109, 0.15) !important;
}

#root input::placeholder,
#root textarea::placeholder {
  color: #94a3b8 !important;
  opacity: 1 !important;
}

#root textarea {
  height: auto !important;
  min-height: 5rem !important;
  resize: vertical !important;
}

/* ===== RELATIVE CONTAINERS (para ícones dentro de inputs) ===== */
#root .relative {
  position: relative !important;
  overflow: visible !important;
}

/* Ícones posicionados absolutamente dentro de inputs */
#root .relative > svg {
  position: absolute !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* ===== BUTTONS ===== */
#root button {
  font-family: 'DM Sans', sans-serif !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}

/* ===== CARDS ===== */
#root [class*="rounded-xl"][class*="shadow"],
#root [class*="rounded-lg"][class*="shadow"] {
  background-color: #ffffff !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05) !important;
}

/* ===== SPACING - Reforço dos utilitários Tailwind ===== */
/* Padding-left/right utilities (critical for input icons) */
#root .pl-3 { padding-left: 0.75rem !important; }
#root .pl-4 { padding-left: 1rem !important; }
#root .pl-8 { padding-left: 2rem !important; }
#root .pl-10 { padding-left: 2.5rem !important; }
#root .pr-3 { padding-right: 0.75rem !important; }
#root .pr-4 { padding-right: 1rem !important; }
#root .pr-8 { padding-right: 2rem !important; }
#root .pr-10 { padding-right: 2.5rem !important; }
#root .pt-2 { padding-top: 0.5rem !important; }
#root .pt-3 { padding-top: 0.75rem !important; }
#root .pb-0\.5 { padding-bottom: 0.125rem !important; }
#root .p-3 { padding: 0.75rem !important; }
#root .p-4 { padding: 1rem !important; }
#root .p-5 { padding: 1.25rem !important; }
#root .p-6 { padding: 1.5rem !important; }
#root .p-7 { padding: 1.75rem !important; }
#root .p-8 { padding: 2rem !important; }
#root .px-3 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
#root .px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
#root .px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }

/* CRITICAL: pl-10/pr-10 MUST come AFTER px-4 and use higher specificity for inputs with icons */
#root input.pl-10,
#root .pl-10 { padding-left: 2.5rem !important; }
#root input.pr-10,
#root .pr-10 { padding-right: 2.5rem !important; }
#root input.pl-8,
#root .pl-8 { padding-left: 2rem !important; }

#root .py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
#root .py-2\.5 { padding-top: 0.625rem !important; padding-bottom: 0.625rem !important; }
#root .py-3 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
#root .py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
#root .gap-2 { gap: 0.5rem !important; }
#root .gap-3 { gap: 0.75rem !important; }
#root .gap-4 { gap: 1rem !important; }
#root .gap-5 { gap: 1.25rem !important; }
#root .gap-6 { gap: 1.5rem !important; }
#root .gap-8 { gap: 2rem !important; }
#root .mb-1 { margin-bottom: 0.25rem !important; }
#root .mb-2 { margin-bottom: 0.5rem !important; }
#root .mb-3 { margin-bottom: 0.75rem !important; }
#root .mb-4 { margin-bottom: 1rem !important; }
#root .mb-6 { margin-bottom: 1.5rem !important; }
#root .mt-1 { margin-top: 0.25rem !important; }
#root .mt-2 { margin-top: 0.5rem !important; }
#root .mt-4 { margin-top: 1rem !important; }
#root .mt-6 { margin-top: 1.5rem !important; }
#root .pt-6 { padding-top: 1.5rem !important; }

/* space-y utilities */
#root .space-y-1 > * + * { margin-top: 0.25rem !important; }
#root .space-y-2 > * + * { margin-top: 0.5rem !important; }
#root .space-y-3 > * + * { margin-top: 0.75rem !important; }
#root .space-y-4 > * + * { margin-top: 1rem !important; }
#root .space-y-5 > * + * { margin-top: 1.25rem !important; }
#root .space-y-6 > * + * { margin-top: 1.5rem !important; }
#root .space-y-7 > * + * { margin-top: 1.75rem !important; }
#root .space-y-8 > * + * { margin-top: 2rem !important; }

/* ===== FLEX & GRID ===== */
#root .flex { display: flex !important; }
#root .grid { display: grid !important; }
#root .inline-flex { display: inline-flex !important; }
#root .items-center { align-items: center !important; }
#root .items-start { align-items: flex-start !important; }
#root .justify-between { justify-content: space-between !important; }
#root .justify-center { justify-content: center !important; }
#root .flex-col { flex-direction: column !important; }
#root .flex-row { flex-direction: row !important; }
#root .flex-1 { flex: 1 1 0% !important; }
#root .flex-wrap { flex-wrap: wrap !important; }
#root .min-w-0 { min-width: 0 !important; }
#root .shrink-0 { flex-shrink: 0 !important; }

/* Grid columns */
#root .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
@media (min-width: 768px) {
  #root .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #root .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* ===== SIDEBAR STEPPER ===== */
/* Ensure sidebar nav items have proper spacing */
#root nav.bg-white,
#root aside.bg-white {
  background-color: #ffffff !important;
  border-radius: 0.75rem !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07) !important;
}

/* Sidebar step buttons - ensure proper height and spacing */
#root nav button[class*="rounded-lg"] {
  min-height: 2.75rem !important;
  padding-top: 0.625rem !important;
  padding-bottom: 0.625rem !important;
}

/* Step icon containers in sidebar */
#root nav button .w-8 {
  width: 2rem !important;
  height: 2rem !important;
  min-width: 2rem !important;
}

/* ===== CATEGORY CARDS (Tipo de Registro) ===== */
/* Ensure category selection cards have proper size */
#root button[class*="rounded-xl"][class*="border-2"] {
  min-height: 3rem !important;
  padding: 0.875rem 1rem !important;
}

/* Category icon containers */
#root button[class*="rounded-xl"] .w-9 {
  width: 2.25rem !important;
  height: 2.25rem !important;
  min-width: 2.25rem !important;
}

/* ===== IMPACT RADIO BUTTONS ===== */
/* Ensure radio items are properly aligned */
#root label[class*="rounded-xl"][class*="border-2"] {
  padding: 1.25rem !important;
  align-items: flex-start !important;
}

/* Radio button circle alignment */
#root label[class*="rounded-xl"] button[role="radio"] {
  margin-top: 0.25rem !important;
}

/* Colored dots in impact section */
#root .w-3.h-3.rounded-full,
#root span[class*="rounded-full"][class*="w-3"] {
  width: 0.75rem !important;
  height: 0.75rem !important;
  min-width: 0.75rem !important;
  display: inline-block !important;
  border-radius: 9999px !important;
  vertical-align: middle !important;
}

/* ===== FILE ATTACHMENTS ===== */
/* Ensure file attachment items have proper spacing */
#root .space-y-2 > .flex.items-center.gap-3 + .flex.items-center.gap-3 {
  margin-top: 0.75rem !important;
}

/* File attachment icon containers */
#root .w-10.h-10 {
  width: 2.5rem !important;
  height: 2.5rem !important;
  min-width: 2.5rem !important;
}

/* ===== NAVIGATION BUTTONS ===== */
/* Ensure nav buttons have proper spacing from content */
#root .mt-6.pt-6.border-t {
  margin-top: 2rem !important;
  padding-top: 1.5rem !important;
}

/* ===== BORDER RADIUS ===== */
#root .rounded-xl { border-radius: calc(var(--radius, 0.5rem) + 4px) !important; }
#root .rounded-lg { border-radius: var(--radius, 0.5rem) !important; }
#root .rounded-md { border-radius: calc(var(--radius, 0.5rem) - 2px) !important; }
#root .rounded-full { border-radius: 9999px !important; }
#root .rounded-sm { border-radius: calc(var(--radius, 0.5rem) - 4px) !important; }

/* ===== SHADOWS ===== */
#root .shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important; }
#root .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1) !important; }
#root .shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1) !important; }
#root .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important; }

/* ===== BACKGROUND COLORS ===== */
#root .bg-white { background-color: #ffffff !important; }
#root .bg-navy-50 { background-color: #eef2f9 !important; }
#root .bg-navy-100 { background-color: #d4ddef !important; }
#root .bg-navy-800 { background-color: #1a4080 !important; }
#root .bg-navy-900 { background-color: #0F366D !important; }
#root .bg-navy-950 { background-color: #091f42 !important; }
#root .bg-gold-50 { background-color: #fef9ed !important; }
#root .bg-gold-100 { background-color: #fdf0d0 !important; }
#root .bg-gold-500 { background-color: #FCBC45 !important; }
#root .bg-red-50 { background-color: #fef2f2 !important; }
#root .bg-red-100 { background-color: #fee2e2 !important; }

/* ===== TYPOGRAPHY ===== */
#root h1, #root h2, #root h3, #root h4, #root h5, #root h6 {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

/* Text color classes */
#root .text-white { color: #ffffff !important; }
#root .text-foreground { color: var(--foreground, #1a1a2e) !important; }
#root .text-navy-950 { color: #091f42 !important; }
#root .text-navy-900 { color: #0F366D !important; }
#root .text-navy-800 { color: #1a4080 !important; }
#root .text-navy-700 { color: #1e4a8f !important; }
#root .text-navy-600 { color: #2a5aa0 !important; }
#root .text-navy-500 { color: #3a6ab0 !important; }
#root .text-navy-300 { color: #8ba5cc !important; }
#root .text-navy-200 { color: #b0c4de !important; }
#root .text-gold-600 { color: #d4a03a !important; }
#root .text-gold-500 { color: #FCBC45 !important; }
#root .text-gold-400 { color: #fcd06a !important; }
#root .text-gold-300 { color: #fad9a2 !important; }
#root .text-muted-foreground { color: #64748b !important; }

/* Font sizes */
#root .text-xs { font-size: 0.75rem !important; line-height: 1rem !important; }
#root .text-sm { font-size: 0.875rem !important; line-height: 1.25rem !important; }
#root .text-base { font-size: 1rem !important; line-height: 1.5rem !important; }
#root .text-lg { font-size: 1.125rem !important; line-height: 1.75rem !important; }
#root .text-xl { font-size: 1.25rem !important; line-height: 1.75rem !important; }
#root .text-2xl { font-size: 1.5rem !important; line-height: 2rem !important; }
#root .text-3xl { font-size: 1.875rem !important; line-height: 2.25rem !important; }
#root .text-4xl { font-size: 2.25rem !important; line-height: 2.5rem !important; }

#root .font-bold { font-weight: 700 !important; }
#root .font-semibold { font-weight: 600 !important; }
#root .font-medium { font-weight: 500 !important; }
#root .leading-tight { line-height: 1.25 !important; }
#root .leading-relaxed { line-height: 1.625 !important; }

/* ===== BORDERS ===== */
#root .border { border: 1px solid var(--border, #d4d8e8) !important; }
#root .border-2 { border-width: 2px !important; }
#root .border-b { border-bottom: 1px solid var(--border, #d4d8e8) !important; }
#root .border-t { border-top: 1px solid var(--border, #d4d8e8) !important; }
#root .border-dashed { border-style: dashed !important; }
#root .border-navy-200 { border-color: #bfcfe6 !important; }
#root .border-navy-100 { border-color: #d4ddef !important; }
#root .border-navy-300 { border-color: #8ba5cc !important; }
#root .border-navy-600 { border-color: #2a5aa0 !important; }
#root .border-gold-300 { border-color: #fad9a2 !important; }
#root .border-red-200 { border-color: #fecaca !important; }
#root .border-red-300 { border-color: #fca5a5 !important; }
#root .border-border { border-color: var(--border, #d4d8e8) !important; }

/* ===== OPACITY & VISIBILITY ===== */
#root .opacity-50 { opacity: 0.5 !important; }
#root .opacity-70 { opacity: 0.7 !important; }

/* ===== WIDTHS & HEIGHTS ===== */
#root .w-full { width: 100% !important; }
#root .w-8 { width: 2rem !important; }
#root .w-9 { width: 2.25rem !important; }
#root .w-10 { width: 2.5rem !important; }
#root .h-8 { height: 2rem !important; }
#root .h-9 { height: 2.25rem !important; }
#root .h-10 { height: 2.5rem !important; }
#root .h-12 { height: 3rem !important; }
#root .max-w-md { max-width: 28rem !important; }
#root .max-w-lg { max-width: 32rem !important; }
#root .max-w-xl { max-width: 36rem !important; }
#root .max-w-7xl { max-width: 80rem !important; }
#root .min-h-screen { min-height: 100vh !important; }

/* ===== HEADER ===== */
#root > div > header {
  background: linear-gradient(135deg, #091f42 0%, #0F366D 50%, #1a4080 100%) !important;
}

/* ===== LABELS ===== */
#root label {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 500 !important;
}

#root label.block {
  display: block !important;
  margin-bottom: 0.25rem !important;
}

/* ===== SELECT DROPDOWN ===== */
#root select {
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
  background-position: right 0.5rem center !important;
  background-repeat: no-repeat !important;
  background-size: 1.5em 1.5em !important;
  padding-right: 2.5rem !important;
}

/* ===== RADIO & CHECKBOX ===== */
#root input[type="radio"],
#root input[type="checkbox"] {
  width: 1.125rem !important;
  min-height: auto !important;
  height: 1.125rem !important;
  accent-color: #0F366D !important;
  cursor: pointer !important;
}

/* ===== SVG ICONS ===== */
#root svg {
  overflow: visible !important;
  flex-shrink: 0 !important;
}

/* Icon sizes - ensure they render correctly */
#root .w-3 { width: 0.75rem !important; }
#root .h-3 { height: 0.75rem !important; }
#root .w-4 { width: 1rem !important; }
#root .h-4 { height: 1rem !important; }
#root .w-5 { width: 1.25rem !important; }
#root .h-5 { height: 1.25rem !important; }

/* ===== CONTAINER ===== */
#root .container {
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

@media (min-width: 640px) {
  #root .container {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}

@media (min-width: 1024px) {
  #root .container {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    max-width: 1280px !important;
  }
}

/* ===== WHITESPACE / TEXT WRAPPING ===== */
#root .whitespace-nowrap { white-space: nowrap !important; }
#root .truncate { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }

/* ===== OVERFLOW SCROLLING ===== */
#root .overflow-x-auto {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

#root .overflow-x-auto::-webkit-scrollbar {
  display: none !important;
}

#root .overflow-y-auto {
  overflow-y: auto !important;
}

/* ===== TRANSITIONS ===== */
#root .transition-all { transition: all 0.2s !important; }
#root .transition-colors { transition: color 0.2s, background-color 0.2s, border-color 0.2s !important; }

/* ===== DISPLAY UTILITIES ===== */
#root .hidden { display: none !important; }
#root .block { display: block !important; }
#root .inline-block { display: inline-block !important; }

/* ===== POSITION ===== */
#root .sticky { position: sticky !important; }
#root .absolute { position: absolute !important; }

/* ===== TEXT ALIGNMENT ===== */
#root .text-left { text-align: left !important; }
#root .text-center { text-align: center !important; }

/* ===== CURSOR ===== */
#root .cursor-pointer { cursor: pointer !important; }

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 767px) {
  /* Stack form grids on mobile */
  #root .grid.grid-cols-1.md\:grid-cols-2 {
    grid-template-columns: 1fr !important;
  }
  
  /* Reduce padding on mobile */
  #root .p-8 { padding: 1.25rem !important; }
  #root .p-7 { padding: 1.25rem !important; }
  
  /* Smaller text on mobile */
  #root .text-4xl { font-size: 1.75rem !important; }
  #root .text-3xl { font-size: 1.5rem !important; }
}

/* Responsive display utilities */
@media (min-width: 768px) {
  #root .md\:flex { display: flex !important; }
  #root .md\:hidden { display: none !important; }
  #root .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (min-width: 1024px) {
  /* Layout - Login hero panel + form sidebar */
  #root .lg\:flex { display: flex !important; }
  #root .lg\:hidden { display: none !important; }
  #root .lg\:w-1\/2 { width: 50% !important; }
  #root .lg\:w-72 { width: 18rem !important; }
  #root .lg\:flex-row { flex-direction: row !important; }
  #root .lg\:sticky { position: sticky !important; }
  #root .lg\:top-8 { top: 2rem !important; }
  #root .lg\:left-1\/2 { left: 50% !important; }
  #root .lg\:col-span-2 { grid-column: span 2 / span 2 !important; }
  #root .lg\:table-cell { display: table-cell !important; }
  #root .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #root .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  #root .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
}

/* Small breakpoint responsive */
@media (min-width: 640px) {
  #root .sm\:flex { display: flex !important; }
  #root .sm\:hidden { display: none !important; }
  #root .sm\:block { display: block !important; }
  #root .sm\:inline { display: inline !important; }
  #root .sm\:flex-row { flex-direction: row !important; }
  #root .sm\:justify-end { justify-content: flex-end !important; }
  #root .sm\:max-w-lg { max-width: 32rem !important; }
  #root .sm\:max-w-md { max-width: 28rem !important; }
  #root .sm\:max-w-sm { max-width: 24rem !important; }
}

/* ===== TABLE STYLES (Admin panel) ===== */
#root table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-family: 'DM Sans', sans-serif !important;
}

#root th {
  font-weight: 600 !important;
  text-align: left !important;
  padding: 0.75rem 1rem !important;
}

#root td {
  padding: 0.75rem 1rem !important;
  vertical-align: middle !important;
}

/* ===== SIDEBAR STEPPER ACTIVE STATE FIX ===== */
/* Root cause (confirmed via computed styles): the generic CARDS rule above
   — #root [class*="rounded-lg"][class*="shadow"] { background-color:#fff }
   — has specificity (1 id, 2 attributes). The active stepper button also
   carries "rounded-lg" + "shadow-md", so it matches that card rule too.
   Chaining ancestor elements (html body #root ...) only adds specificity
   in the "element" bucket, which loses ties on the "class/attribute"
   bucket — that's why the previous attempt didn't win. Chaining actual
   classes instead (3 classes here vs. 2 attributes on the card rule) wins
   the tie-break correctly regardless of element/id nesting. */
#root button.bg-navy-800.shadow-md,
#root div.bg-navy-800.shadow-md,
#root .bg-navy-800.text-white.shadow-md,
#root .bg-navy-800 {
  background-color: #0F366D !important;
  background-image: none !important;
  border-color: #0F366D !important;
}
html body #root .bg-navy-800 *,
html body #root button.bg-navy-800 * {
  color: #ffffff;
}
html body #root .bg-navy-800 .text-white,
html body #root .bg-navy-800 p.text-white,
html body #root button.bg-navy-800 p.text-white {
  color: #ffffff !important;
}
html body #root .bg-navy-800 .text-navy-200,
html body #root .bg-navy-800 p.text-navy-200,
html body #root button.bg-navy-800 p.text-navy-200 {
  color: #bfdbfe !important;
}

/* ===== MODERN CHART STYLING (soft gradients, shadows, smooth hover) ===== */
.recharts-wrapper {
  transition: filter 0.25s ease;
}

/* Bars: rounded look via slight radius illusion, soft shadow, hover brighten */
.recharts-rectangle {
  transition: opacity 0.25s ease, filter 0.25s ease;
}
.recharts-bar-rectangle:hover .recharts-rectangle,
.recharts-rectangle:hover {
  filter: brightness(1.08) drop-shadow(0 2px 6px rgba(15, 54, 109, 0.25));
  opacity: 0.95;
}

/* Donut/pie segments: soft shadow + gentle hover pop */
.recharts-sector {
  transition: transform 0.25s ease, filter 0.25s ease, opacity 0.25s ease;
  transform-origin: center;
  filter: drop-shadow(0 1px 3px rgba(15, 54, 109, 0.18));
}
.recharts-sector:hover {
  filter: brightness(1.06) drop-shadow(0 3px 8px rgba(15, 54, 109, 0.3));
  opacity: 0.95;
}

/* Line charts: smoother, glowing stroke + bigger dots on hover */
.recharts-curve.recharts-line-curve {
  transition: filter 0.25s ease;
  filter: drop-shadow(0 2px 4px rgba(15, 54, 109, 0.2));
}
.recharts-dot {
  transition: r 0.2s ease, filter 0.2s ease;
}
.recharts-dot:hover {
  filter: drop-shadow(0 2px 5px rgba(15, 54, 109, 0.35));
}

/* Cartesian grid: lighter, airier */
.recharts-cartesian-grid-horizontal line,
.recharts-cartesian-grid-vertical line {
  stroke: #e5e9f0;
  stroke-dasharray: 3 3;
}

/* Tooltip cursor highlight */
.recharts-tooltip-cursor {
  fill: rgba(15, 54, 109, 0.06);
  transition: opacity 0.2s ease;
}

/* Any card wrapping a chart: soft shadow lift on hover */
#root div:has(> .recharts-responsive-container),
#root div:has(.recharts-wrapper) {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
#root div:has(> .recharts-responsive-container):hover,
#root div:has(.recharts-wrapper):hover {
  box-shadow: 0 8px 24px rgba(15, 54, 109, 0.12);
  transform: translateY(-2px);
}

/* ===== MOBILE: TABLES THAT WERE CLIPPING INSTEAD OF SCROLLING ===== */
/* Card containers use "overflow-hidden" (for rounded corners on desktop),
   but that also clips any table wider than the screen on mobile, hiding
   Status/Ações columns entirely instead of letting you scroll to them. */
@media (max-width: 768px) {
  #root .overflow-hidden:has(table) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  #root .overflow-hidden:has(table) table {
    min-width: 640px;
  }
}