/* ==========================================================================
   Responsividade Global v5 - Portal de Chamados
   - Desabilita position:sticky em colunas de tabela no mobile (corrige DRE)
   - Neutraliza min-widths das colunas/tabelas
   - Strategic Map: container fixo de 1350px vira flex-column no mobile
   - Barras de ação com flex-wrap; botões compactos
   - Modais limitados a 95vw no mobile
   ========================================================================== */

html, body, #root {
  max-width: 100vw;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

@media (max-width: 768px) {
  /* Anti-zoom iOS */
  input, select, textarea {
    font-size: 16px;
  }

  /* Layout raiz vira coluna no mobile */
  .flex.h-screen {
    flex-direction: column !important;
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
  }

  /* Compensa header mobile fixo (56px) */
  main {
    padding-top: 4.25rem !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  .flex-1.flex.flex-col.min-w-0 {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* ================================================================
     TABELAS (layout nativo + desabilita sticky/min-w no mobile)
     ================================================================ */
  table {
    font-size: 11px !important;
    border-collapse: collapse !important;
  }
  table th,
  table td {
    padding: 6px 8px !important;
    white-space: nowrap;
  }

  /* Desabilita position:sticky em CÉLULAS laterais (corrige DRE com colunas "flutuando") */
  table .sticky,
  table [class*="sticky"] {
    position: static !important;
  }
  thead th[class*="left-"],
  thead th[class*="right-"],
  tbody td[class*="left-"],
  tbody td[class*="right-"] {
    position: static !important;
    left: auto !important;
    right: auto !important;
  }

  /* Neutraliza min-widths hardcoded em colunas */
  table th[class*="min-w-"],
  table td[class*="min-w-"] {
    min-width: 0 !important;
  }

  /* Wrapper de scroll horizontal */
  .overflow-x-auto,
  .overflow-x-scroll {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* ================================================================
     STRATEGIC MAP (preserva dimensões originais, permite arrastar)
     Usuário prefere manter o mapa em 1350px e rolar horizontalmente
     ================================================================ */
  .strategic-map-container {
    /* Mantém 1350px original — nada de width:100% */
    /* Pai (w-full h-full overflow-auto) já fornece scroll */
  }
  /* StrategicMap.tsx usa flex-col items-center no wrapper externo; no mobile
     items-center corta o lado esquerdo do conteudo maior que a viewport.
     Forca alinhamento a esquerda para que todo o mapa fique acessivel via scroll */
  main .w-full.h-full.overflow-auto.flex.flex-col.items-center {
    align-items: flex-start !important;
  }
  /* Garante que o wrapper pai permita scroll horizontal no mobile */
  main .w-full.h-full.overflow-auto,
  main .overflow-auto:has(> .strategic-map-container) {
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* ================================================================
     KANBANS (StrategicKanban, ImplementationKanban, InterSectorKanban)
     Colunas 260px com scroll horizontal — funciona com gap-3 e gap-4
     ================================================================ */
  main .flex.gap-4:not(.flex-col):not(.items-center):not(.justify-between),
  main .flex.gap-3:not(.flex-col):not(.items-center):not(.justify-between),
  main .flex.gap-3.overflow-x-auto,
  main .flex.gap-4.overflow-x-auto {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
  }
  /* So aplica em flex-row (Kanbans). Em flex-col, esse `flex: 0 0 260px` viraria altura,
     criando espaco vazio enorme em cards de filtro com SearchableSelect (ex: ImplementationDashboard). */
  main .flex.gap-4:not(.flex-col) > div.flex-1,
  main .flex.gap-4:not(.flex-col) > div[class*="min-w-"],
  main .flex.gap-3:not(.flex-col) > div.flex-1,
  main .flex.gap-3:not(.flex-col) > div[class*="min-w-"] {
    flex: 0 0 260px !important;
    min-width: 260px !important;
    max-width: 260px !important;
  }

  /* ================================================================
     AGENDA / CALENDÁRIO (grid-cols-7 com cells muito estreitas)
     Largura mínima de 70px por dia + scroll horizontal
     ================================================================ */
  .grid.grid-cols-7 {
    grid-template-columns: repeat(7, minmax(70px, 1fr)) !important;
    min-width: 560px !important;
  }
  /* Wrapper da agenda rola horizontalmente */
  main .flex-1.overflow-auto,
  main .bg-white.rounded-xl.border.overflow-hidden {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .grid.grid-cols-7 > div {
    font-size: 10px !important;
  }

  /* ================================================================
     IMPORTAÇÃO (flex 2 colunas: sidebar gráficos + tabela)
     No mobile vira coluna: gráficos no topo, tabela embaixo
     ================================================================ */
  main > div > .flex:not(.flex-col):not(.items-center):not(.justify-between):not(.justify-end):not(.flex-wrap) {
    flex-direction: column !important;
  }
  main > div > .flex > *:first-child {
    width: 100% !important;
    max-width: 100% !important;
  }
  main > div > .flex > .flex-1 {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* ================================================================
     CRONOGRAMA VISUAL (StrategicTimeline / ImplementationTimeline)
     Filtros compactos e padronizados no mobile
     ================================================================ */
  /* Linha de filtros: quebra natural, gaps pequenos, nao rola horizontal */
  main .flex.gap-4.mb-4.shrink-0 {
    flex-wrap: wrap !important;
    gap: 6px !important;
    overflow: visible !important;
  }
  /* Selects de filtro: altura padrao 34px, padding compacto */
  main .flex.gap-4.mb-4 > select {
    height: 34px !important;
    padding: 0 28px 0 10px !important;
    font-size: 13px !important;
    flex: 1 1 auto !important;
    min-width: 120px !important;
    max-width: 100% !important;
  }
  /* Macro theme filter (botoes PAC/PIP/CLI/FIN/LIMPAR): pills pequenas */
  main .flex.gap-4.mb-4 > .flex.items-center {
    flex-wrap: wrap !important;
    gap: 4px !important;
    padding: 4px !important;
  }
  main .flex.gap-4.mb-4 > .flex.items-center > button {
    min-width: 0 !important;
    height: 26px !important;
    padding: 0 8px !important;
    font-size: 10px !important;
  }

  /* ================================================================
     BARRAS DE BOTÕES DE AÇÃO (ActionPlan / Matriz etc.) — PADRONIZADOS
     Todos os botões da barra de ações ganham mesmo tamanho/altura
     ================================================================ */
  main .flex.items-center.gap-2,
  main .flex.items-center.gap-3,
  main .flex.items-center.gap-4,
  main .flex.justify-end,
  main .flex.justify-between:not(.flex-col) {
    flex-wrap: wrap !important;
    gap: 0.375rem !important;
  }
  main .flex.flex-wrap > button,
  main .flex.items-center > button,
  main .flex.justify-end > button,
  main .flex.justify-between > button {
    min-width: 84px !important;
    height: 36px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
  }

  /* ================================================================
     MODAIS (max-w 95vw + tabelas internas com largura natural + scroll-x)
     Corrige detalhamento DRE escondendo colunas Valor/Percentual
     ================================================================ */
  .fixed.inset-0 > [class*="max-w-"]:not([class*="max-w-full"]) {
    max-width: 95vw !important;
    max-height: 90vh !important;
    -webkit-overflow-scrolling: touch;
  }
  /* Wrapper rolável dentro do modal */
  .fixed.inset-0 [class*="max-w-"] .flex-1.overflow-auto,
  .fixed.inset-0 [class*="max-w-"] .overflow-auto,
  .fixed.inset-0 [class*="max-w-"] .overflow-x-auto {
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  /* Cards dentro do modal: NÃO clipar (scroll acontece no wrapper pai) */
  .fixed.inset-0 [class*="max-w-"] .overflow-hidden {
    overflow: visible !important;
  }

  /* Container pai do scroll (.flex-1.overflow-auto -> .p-5.space-y-4):
     largura cresce ao conteúdo (tabela mais larga) mas >= 100% do modal
     Assim TODOS os cards filhos ficam da mesma largura e nao deixa espaço branco */
  .fixed.inset-0 [class*="max-w-"] .flex-1.overflow-auto > div,
  .fixed.inset-0 [class*="max-w-"] .overflow-auto > div {
    width: max-content !important;
    min-width: 100% !important;
  }

  /* Tabelas dentro de modais: preenchem toda a largura (já estendida pelos pais) */
  .fixed.inset-0 table.w-full,
  .fixed.inset-0 table {
    width: 100% !important;
    min-width: 100% !important;
  }

  /* ================================================================
     KANBANS
     ================================================================ */
  [class*="kanban"],
  [class*="Kanban"] {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  img, svg, video, canvas {
    max-width: 100%;
    height: auto;
  }

  /* ================================================================
     COMPACTAÇÃO - títulos, cards, paddings
     ================================================================ */
  .text-5xl { font-size: 1.5rem !important; line-height: 1.75rem !important; }
  .text-4xl { font-size: 1.35rem !important; line-height: 1.6rem !important; }
  .text-3xl { font-size: 1.2rem !important; line-height: 1.45rem !important; }
  .text-2xl { font-size: 1.05rem !important; line-height: 1.3rem !important; }
  .text-xl  { font-size: 0.95rem !important; line-height: 1.25rem !important; }
  .text-lg  { font-size: 0.875rem !important; line-height: 1.2rem !important; }
  .text-base { font-size: 0.8125rem !important; line-height: 1.15rem !important; }
  .text-sm  { font-size: 0.75rem !important; line-height: 1.05rem !important; }

  .p-8 { padding: 0.75rem !important; }
  .p-6 { padding: 0.625rem !important; }
  .p-5 { padding: 0.5rem !important; }
  .p-4 { padding: 0.5rem !important; }
  .px-8, .px-6 { padding-left: 0.625rem !important; padding-right: 0.625rem !important; }
  .py-8, .py-6 { padding-top: 0.625rem !important; padding-bottom: 0.625rem !important; }
  .px-4 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
  .py-4 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }

  .mb-8 { margin-bottom: 0.75rem !important; }
  .mb-6 { margin-bottom: 0.625rem !important; }
  .mb-4 { margin-bottom: 0.5rem !important; }
  .mt-8 { margin-top: 0.75rem !important; }
  .mt-6 { margin-top: 0.625rem !important; }

  .space-y-8 > * + * { margin-top: 0.75rem !important; }
  .space-y-6 > * + * { margin-top: 0.625rem !important; }
  .space-y-4 > * + * { margin-top: 0.5rem !important; }

  .gap-8 { gap: 0.625rem !important; }
  .gap-6 { gap: 0.5rem !important; }
  .gap-4 { gap: 0.375rem !important; }

  button {
    font-size: 13px;
  }

  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    padding-top: 0.4rem !important;
    padding-bottom: 0.4rem !important;
  }

  /* ================================================================
     DRAWER ABERTO — trava scroll completo (html, body, main, root)
     Antes: só body.overflow-hidden não bastava e main continuava rolando
     ================================================================ */
  body.drawer-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    top: 0;
    left: 0;
    right: 0;
  }
  body.drawer-open #root,
  body.drawer-open main,
  body.drawer-open .flex-1 {
    overflow: hidden !important;
    touch-action: none !important;
  }

  /* ================================================================
     IMPORTAÇÃO — sidebar de gráficos com toggle no mobile
     Fica escondida por padrão; usuário clica em "Expandir painel"
     ================================================================ */
  .importation-root {
    flex-direction: column !important;
    position: relative;
  }
  .importation-mobile-toggle {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    background: #0f172a;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    margin: 0 0 8px 0;
    align-self: flex-start;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  }
  .importation-sidebar.mobile-closed {
    display: none !important;
  }
  .importation-sidebar.mobile-open {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 70vh !important;
    border-right: none !important;
    border-bottom: 1px solid #e2e8f0 !important;
    margin-bottom: 8px;
  }
}

/* Desktop: esconde o botão mobile de toggle */
@media (min-width: 769px) {
  .importation-mobile-toggle {
    display: none !important;
  }
}

@media (hover: none) and (pointer: coarse) {
  button, a, [role="button"] {
    touch-action: manipulation;
  }
}

/* ==========================================================================
   Dark Mode Overrides — carregado por último para garantir prioridade
   ========================================================================== */
html.dark .bg-white { background-color: #1e293b !important; }
html.dark .bg-gray-50 { background-color: #0f172a !important; }
html.dark .bg-gray-100 { background-color: #1e293b !important; }
html.dark .bg-slate-50 { background-color: #0f172a !important; }
html.dark .bg-slate-100 { background-color: #1e293b !important; }

html.dark .text-gray-900 { color: #f1f5f9 !important; }
html.dark .text-gray-800 { color: #e2e8f0 !important; }
html.dark .text-gray-700 { color: #cbd5e1 !important; }
html.dark .text-gray-600 { color: #94a3b8 !important; }
html.dark .text-gray-500 { color: #94a3b8 !important; }
html.dark .text-gray-400 { color: #64748b !important; }
html.dark .text-slate-900 { color: #f1f5f9 !important; }
html.dark .text-slate-800 { color: #e2e8f0 !important; }
html.dark .text-slate-700 { color: #cbd5e1 !important; }
html.dark .text-slate-600 { color: #94a3b8 !important; }
html.dark .text-slate-500 { color: #94a3b8 !important; }

html.dark .border-gray-100, html.dark .border-gray-200 { border-color: #334155 !important; }
html.dark .border-slate-100, html.dark .border-slate-200 { border-color: #334155 !important; }
html.dark .divide-gray-100 > * + *, html.dark .divide-gray-200 > * + * { border-color: #334155 !important; }

html.dark table tbody { background-color: #1e293b !important; }
html.dark table thead tr { background-color: #0f172a !important; }
html.dark table thead th { color: #94a3b8 !important; }
html.dark table td { color: #e2e8f0 !important; }
html.dark tbody tr { background-color: #1e293b !important; }
html.dark .bg-slate-100\/50 { background-color: #334155 !important; }
html.dark .bg-gray-50\/50 { background-color: #1e293b !important; }

html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html.dark textarea, html.dark select {
  background-color: #0f172a !important;
  color: #f1f5f9 !important;
  border-color: #334155 !important;
}

/* Dark mode — cores pastel (50/100) que ficam claras */
html.dark .bg-blue-50 { background-color: #1e3a5f !important; }
html.dark .bg-blue-100 { background-color: #1e40af33 !important; }
html.dark .bg-red-50 { background-color: #4c1d2566 !important; }
html.dark .bg-red-100 { background-color: #7f1d1d44 !important; }
html.dark .bg-green-50 { background-color: #14532d55 !important; }
html.dark .bg-green-100 { background-color: #166534aa !important; }
html.dark .bg-emerald-50 { background-color: #064e3b55 !important; }
html.dark .bg-amber-50 { background-color: #78350f55 !important; }
html.dark .bg-amber-100 { background-color: #92400e66 !important; }
html.dark .bg-yellow-50 { background-color: #713f1255 !important; }
html.dark .bg-orange-50 { background-color: #7c2d1255 !important; }
html.dark .bg-pink-50 { background-color: #831843aa !important; }
html.dark .bg-pink-100 { background-color: #9d174d66 !important; }
html.dark .bg-purple-50 { background-color: #4c1d9555 !important; }
html.dark .bg-purple-100 { background-color: #6b21a866 !important; }
html.dark .bg-indigo-50 { background-color: #312e81aa !important; }
html.dark .bg-indigo-100 { background-color: #3730a366 !important; }
html.dark .bg-violet-50 { background-color: #4c1d9555 !important; }
html.dark .bg-rose-50 { background-color: #881337aa !important; }
html.dark .bg-cyan-50 { background-color: #164e6355 !important; }
html.dark .bg-teal-50 { background-color: #134e4a55 !important; }

/* Backgrounds com opacidade (10-30%) — Tailwind usa /10 /20 etc */
html.dark .bg-white\/10 { background-color: rgba(30,41,59,0.6) !important; }
html.dark .bg-white\/20 { background-color: rgba(30,41,59,0.7) !important; }
html.dark .bg-white\/50 { background-color: rgba(30,41,59,0.85) !important; }

/* Backgrounds neutros muito claros */
html.dark .bg-stone-50 { background-color: #1c1917 !important; }
html.dark .bg-zinc-50 { background-color: #18181b !important; }
html.dark .bg-neutral-50 { background-color: #171717 !important; }

/* Textos coloridos escuros (700/800/900) ficam legiveis em dark bg */
html.dark .text-blue-700, html.dark .text-blue-800, html.dark .text-blue-900 { color: #93c5fd !important; }
html.dark .text-red-700, html.dark .text-red-800, html.dark .text-red-900 { color: #fca5a5 !important; }
html.dark .text-green-700, html.dark .text-green-800, html.dark .text-green-900 { color: #86efac !important; }
html.dark .text-emerald-700, html.dark .text-emerald-800 { color: #6ee7b7 !important; }
html.dark .text-amber-700, html.dark .text-amber-800 { color: #fcd34d !important; }
html.dark .text-yellow-700, html.dark .text-yellow-800 { color: #fde047 !important; }
html.dark .text-orange-700, html.dark .text-orange-800 { color: #fdba74 !important; }
html.dark .text-pink-700, html.dark .text-pink-800 { color: #f9a8d4 !important; }
html.dark .text-purple-700, html.dark .text-purple-800 { color: #c4b5fd !important; }
html.dark .text-indigo-700, html.dark .text-indigo-800 { color: #a5b4fc !important; }
html.dark .text-violet-700, html.dark .text-violet-800 { color: #c4b5fd !important; }
html.dark .text-rose-700, html.dark .text-rose-800 { color: #fda4af !important; }
html.dark .text-teal-700, html.dark .text-teal-800 { color: #5eead4 !important; }
html.dark .text-cyan-700, html.dark .text-cyan-800 { color: #67e8f9 !important; }

/* Skeleton/placeholder cards (bg-gray-200/300) em dark */
html.dark .bg-gray-200 { background-color: #334155 !important; }
html.dark .bg-gray-300 { background-color: #475569 !important; }
html.dark .bg-slate-200 { background-color: #334155 !important; }
html.dark .bg-slate-300 { background-color: #475569 !important; }

/* Dark mode — mais coberturas globais */
/* Sidebar pills (TODOS OS SETORES, T.I etc) e similares */
html.dark .bg-slate-200 { background-color: #334155 !important; color: #e2e8f0 !important; }
html.dark .bg-slate-200\/50 { background-color: #33415588 !important; }

/* Backgrounds com /80 /90 /95 (semi-opacos brancos) */
html.dark .bg-white\/80,
html.dark .bg-white\/90,
html.dark .bg-white\/95,
html.dark .bg-white\/98 { background-color: rgba(15,23,42,0.95) !important; }

/* Bg-opacity em geral usando rgb com alpha */
html.dark [class*="bg-white/"] { background-color: rgba(30,41,59,0.85) !important; }

/* Cards com bg-white em qualquer combinação de rounded */
html.dark .bg-white { background-color: #1e293b !important; }
html.dark .rounded-xl.bg-white,
html.dark .rounded-2xl.bg-white,
html.dark .rounded-lg.bg-white,
html.dark .rounded-md.bg-white { background-color: #1e293b !important; }

/* Headers de cards */
html.dark thead { background-color: #0f172a !important; }
html.dark thead th, html.dark thead td { background-color: transparent !important; color: #94a3b8 !important; }

/* Tabela completa em dark */
html.dark table,
html.dark table tbody,
html.dark table tr,
html.dark table td { background-color: transparent !important; }
html.dark table.bg-white tbody tr { background-color: #1e293b !important; }

/* Linhas zebradas */
html.dark tr.bg-white { background-color: #1e293b !important; }
html.dark tr.bg-gray-50 { background-color: #0f172a !important; }
html.dark tr.bg-slate-50 { background-color: #0f172a !important; }

/* Backgrounds de gantt/calendario com bg-gray-100 explicito */
html.dark .bg-gray-100\/50 { background-color: #1e293b88 !important; }

/* Backgrounds com cores fixas hex via style inline (dificil de cobrir) */
/* Garante que qualquer elemento com background-color rgb(255,255,255) ou similar seja escurecido */
html.dark [style*="background-color: rgb(255"],
html.dark [style*="background-color:#fff"],
html.dark [style*="background-color: #fff"],
html.dark [style*="background:rgb(255"],
html.dark [style*="background: #fff"] { background-color: #1e293b !important; }

/* Texto fixo cinza escuro ainda visível em dark */
html.dark [style*="color: rgb(0"],
html.dark [style*="color:#000"],
html.dark [style*="color: #000"] { color: #f1f5f9 !important; }

/* Bordas com cores escuras */
html.dark .border-gray-300, html.dark .border-slate-300 { border-color: #475569 !important; }

/* Box-shadow em cards em dark — sombra clara fica feia */
html.dark .shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,0.3) !important; }
html.dark .shadow { box-shadow: 0 1px 4px rgba(0,0,0,0.35) !important; }
html.dark .shadow-md { box-shadow: 0 4px 8px rgba(0,0,0,0.4) !important; }
html.dark .shadow-lg { box-shadow: 0 8px 16px rgba(0,0,0,0.45) !important; }
html.dark .shadow-xl { box-shadow: 0 12px 24px rgba(0,0,0,0.5) !important; }

/* Dark mode — arbitrary values (Tailwind bg-[#...]) usados no codigo */
html.dark .bg-\[\#f8fafc\] { background-color: #0f172a !important; }
html.dark .bg-\[\#fafafa\] { background-color: #0f172a !important; }
html.dark .bg-\[\#f9fafb\] { background-color: #0f172a !important; }
html.dark .bg-\[\#ffffff\],
html.dark .bg-\[\#fff\] { background-color: #1e293b !important; }
html.dark .bg-\[\#e2e8f0\] { background-color: #334155 !important; }
html.dark .bg-\[\#f1f5f9\] { background-color: #1e293b !important; }
html.dark .bg-\[\#f3f4f6\] { background-color: #1e293b !important; }
html.dark .bg-\[\#e5e7eb\] { background-color: #334155 !important; }

/* Captura QUALQUER arbitrary hex que comece com #f (cores claras) */
html.dark [class*="bg-[#f"]:not([class*="bg-[#0"]):not([class*="bg-[#1"]):not([class*="bg-[#2"]):not([class*="bg-[#3"]):not([class*="bg-[#4"]) {
  background-color: #1e293b !important;
}
html.dark [class*="bg-[#e"] { background-color: #334155 !important; }

/* Sticky thead em tabelas com bg-gray-50 forcado pelo sticky */
html.dark thead.bg-gray-50,
html.dark .sticky.bg-gray-50,
html.dark .bg-gray-50.sticky { background-color: #0f172a !important; }
html.dark th.bg-gray-50 { background-color: #0f172a !important; }

/* Sidebar — pilulas de setor (T.I, TODOS OS SETORES, etc) */
.sidebar-sector-pill {
  font-size: 11px;
  font-weight: 800;
  color: #1e293b;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
  flex-shrink: 0;
  background: #c8d0db;
  padding: 3px 10px;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  gap: 4px;
}
.sidebar-sector-pill--open { background: #dde3ea; }

html.dark .sidebar-sector-pill {
  color: #f1f5f9;
  background: #334155;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
html.dark .sidebar-sector-pill--open { background: #475569; }

/* ── Dark mode — gradients e gradient text ── */
/* "Acoes em Atraso" banner: bg-gradient-to-br from-red-50 to-white */
html.dark [class*="from-red-50"] {
  --tw-gradient-from: rgba(127, 29, 29, 0.4) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent) !important;
}
html.dark [class*="to-white"] {
  --tw-gradient-to: #1e293b !important;
}
/* Outros gradientes "to-white" */
html.dark [class*="from-slate-50"],
html.dark [class*="from-gray-50"] {
  --tw-gradient-from: #0f172a !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent) !important;
}

/* Texto com gradient clip (Nossos Servicos) — torna gradient claro em dark */
html.dark .bg-clip-text.text-transparent[class*="from-slate-900"],
html.dark .bg-clip-text.text-transparent[class*="from-gray-900"],
html.dark .bg-clip-text.text-transparent[class*="from-slate-800"] {
  --tw-gradient-from: #f1f5f9 !important;
  --tw-gradient-to: #cbd5e1 !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

/* Cards "DETALHAMENTO POR SETOR" — bg branco com texto cinza */
html.dark .bg-white\/80 { background-color: rgba(30,41,59,0.8) !important; }
html.dark .bg-white\/60 { background-color: rgba(30,41,59,0.7) !important; }
html.dark .bg-white\/40 { background-color: rgba(30,41,59,0.6) !important; }

/* Cards setoriais com fundo claro especifico */
html.dark [class*="from-slate-100"],
html.dark [class*="from-gray-100"] {
  --tw-gradient-from: #1e293b !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent) !important;
}
html.dark [class*="to-slate-50"],
html.dark [class*="to-gray-50"] {
  --tw-gradient-to: #0f172a !important;
}

/* Dark mode — todos os textos cinza ficam mais claros (quase brancos) */
html.dark .text-gray-900,
html.dark .text-gray-800,
html.dark .text-gray-700,
html.dark .text-slate-900,
html.dark .text-slate-800,
html.dark .text-slate-700 { color: #f1f5f9 !important; }

html.dark .text-gray-600,
html.dark .text-gray-500,
html.dark .text-gray-400,
html.dark .text-gray-300,
html.dark .text-slate-600,
html.dark .text-slate-500,
html.dark .text-slate-400,
html.dark .text-slate-300 { color: #e2e8f0 !important; }

html.dark .text-gray-200,
html.dark .text-slate-200 { color: #f1f5f9 !important; }

/* Tabelas: headers e celulas */
html.dark thead th { color: #e2e8f0 !important; }
html.dark tbody td { color: #f1f5f9 !important; }

/* Dark mode — opacity variants /50 /60 /70 que ainda ficavam claros */
html.dark .bg-slate-50\/50 { background-color: #0f172a !important; }
html.dark .bg-slate-50\/60 { background-color: #0f172a !important; }
html.dark .bg-slate-50\/70 { background-color: #0f172a !important; }
html.dark .bg-slate-100\/50 { background-color: #1e293b !important; }
html.dark .bg-gray-50\/50 { background-color: #0f172a !important; }
html.dark .bg-gray-50\/60 { background-color: #0f172a !important; }
html.dark .bg-gray-100\/50 { background-color: #1e293b !important; }
html.dark .bg-gray-100\/40 { background-color: #1e293b !important; }
html.dark .bg-gray-200\/50 { background-color: #334155 !important; }

/* Backgrounds que ficam medio-claros em dark — forcar mais escuro */
html.dark .bg-slate-300 { background-color: #475569 !important; }
html.dark .bg-slate-400 { background-color: #64748b !important; }

/* min-h-full bg-slate-50/50 (pagina Nossos Servicos wrapper) */
html.dark [class*="bg-slate-50"] { background-color: #0f172a !important; }
html.dark [class*="bg-slate-100"] { background-color: #1e293b !important; }

/* Texto subtitulo (text-slate-500 em dark deve ser BEM claro pra contraste) */
html.dark .text-slate-500 { color: #f1f5f9 !important; }
html.dark .text-slate-400 { color: #e2e8f0 !important; }

/* Detalhamento Setor "ADMINISTRATIVO" - card collapsed bg */
html.dark [class*="from-slate-100"][class*="to-slate-50"] {
  background: #1e293b !important;
}

/* Dark mode — opacity variants /50 /80 das cores pasteis (tabs, chips) */
html.dark .bg-red-50\/50 { background-color: rgba(127,29,29,0.35) !important; }
html.dark .bg-red-50\/80 { background-color: rgba(127,29,29,0.5) !important; }
html.dark .bg-red-100\/50 { background-color: rgba(127,29,29,0.4) !important; }
html.dark .bg-emerald-50\/50 { background-color: rgba(6,78,59,0.35) !important; }
html.dark .bg-emerald-50\/80 { background-color: rgba(6,78,59,0.5) !important; }
html.dark .bg-emerald-100\/50 { background-color: rgba(6,95,70,0.4) !important; }
html.dark .bg-blue-50\/50 { background-color: rgba(30,58,95,0.4) !important; }
html.dark .bg-green-50\/50 { background-color: rgba(20,83,45,0.35) !important; }
html.dark .bg-yellow-50\/50 { background-color: rgba(113,63,18,0.4) !important; }
html.dark .bg-amber-50\/50 { background-color: rgba(120,53,15,0.4) !important; }
html.dark .bg-purple-50\/50 { background-color: rgba(76,29,149,0.35) !important; }
html.dark .bg-indigo-50\/50 { background-color: rgba(49,46,129,0.5) !important; }
html.dark .bg-pink-50\/50 { background-color: rgba(131,24,67,0.4) !important; }

/* Wildcard catch-all para qualquer bg-{cor}-50/{opacidade} */
html.dark [class*="bg-red-50/"] { background-color: rgba(127,29,29,0.4) !important; }
html.dark [class*="bg-emerald-50/"] { background-color: rgba(6,78,59,0.4) !important; }
html.dark [class*="bg-green-50/"] { background-color: rgba(20,83,45,0.4) !important; }
html.dark [class*="bg-blue-50/"] { background-color: rgba(30,58,95,0.4) !important; }
html.dark [class*="bg-amber-50/"] { background-color: rgba(120,53,15,0.4) !important; }
html.dark [class*="bg-yellow-50/"] { background-color: rgba(113,63,18,0.4) !important; }
html.dark [class*="bg-purple-50/"] { background-color: rgba(76,29,149,0.4) !important; }
html.dark [class*="bg-indigo-50/"] { background-color: rgba(49,46,129,0.5) !important; }
html.dark [class*="bg-pink-50/"] { background-color: rgba(131,24,67,0.4) !important; }
html.dark [class*="bg-orange-50/"] { background-color: rgba(124,45,18,0.4) !important; }
html.dark [class*="bg-rose-50/"] { background-color: rgba(136,19,55,0.4) !important; }
html.dark [class*="bg-teal-50/"] { background-color: rgba(19,78,74,0.4) !important; }
html.dark [class*="bg-cyan-50/"] { background-color: rgba(22,78,99,0.4) !important; }

/* Chip esmeralda especifico (30 setores permitidos) — bg solido + texto bem claro */
html.dark .bg-emerald-100.text-emerald-700,
html.dark .bg-emerald-100 .text-emerald-700,
html.dark span.bg-emerald-100,
html.dark .bg-emerald-100 {
  background-color: #064e3b !important;
}
html.dark .bg-emerald-100.text-emerald-700,
html.dark .bg-emerald-100 .text-emerald-700 {
  color: #a7f3d0 !important;
}