/*
 * ================================================================
 * FENIX METAL — Visual Completo v2
 * Transforma o ERP antigo para o design exato do fenix-erp-v2
 * Carregado APÓS todos os outros CSS — máxima prioridade
 * ================================================================
 */

/* ── 1. RESET + FONTES ──────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

html, body {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
  font-size: 14px !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* ── 0. HIDDEN CLASS — máxima especificidade (corrige conflito ID vs class) ── */
/* Problema: #loginView { display:flex !important } vencia .hidden { display:none !important }
   porque ID selector (100) > class selector (10). Solução: usar #id.hidden (110 pts) */
#loginView.hidden,
#appView.hidden,
#globalSkeleton.hidden,
#aiDashboardPanel.hidden,
#orderForm.hidden,
#clientForm.hidden,
#employeeForm.hidden,
#userForm.hidden,
#profileForm.hidden,
#aiPrintLink.hidden,
#aiTabButton.hidden,
#accessTabButton.hidden,
#globalContextButton.hidden,
#installButton.hidden,
#logoutButton.hidden,
.hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ── 2. OCULTAR ELEMENTOS ANTIGOS (máxima prioridade) ───────── */
/* Topbar antiga — substituída pelo #modernTopbar */
body section.topbar,
main.shell > section.topbar,
.shell > section.topbar,
section.topbar { display: none !important; visibility: hidden !important; height: 0 !important; overflow: hidden !important; }

/* Tabs horizontais antigas — substituídas pelo sidebar */
body nav.tabs,
#appView > nav.tabs,
.shell nav.tabs,
nav.tabs { display: none !important; visibility: hidden !important; height: 0 !important; overflow: hidden !important; }

/* Global action bar (ocupa espaço desnecessário no topo) — reposicionado */
.global-action-bar {
  position: sticky !important;
  top: 8px !important;
  z-index: 30 !important;
  margin: 0 0 0 0 !important;
}

/* ── 3. LAYOUT PRINCIPAL ────────────────────────────────────── */
body { background: var(--bg, #f0f4f8) !important; margin: 0 !important; }
body.modern-layout { display: flex !important; min-height: 100vh !important; overflow: hidden !important; }

/* Área do conteúdo */
.shell {
  background: var(--bg, #f0f4f8) !important;
  flex: 1 !important;
  margin: 0 !important;
  max-width: none !important;
  min-width: 0 !important;
  overflow-y: auto !important;
  padding: 0 !important;
}

/* AppView — padding geral (só quando NÃO tem .hidden) */
#appView:not(.hidden) {
  padding: 20px 24px !important;
  display: block !important;
  gap: 16px !important;
}

/* LoginView — só quando visível (não tem .hidden) */
#loginView:not(.hidden) {
  align-items: center !important;
  background: var(--bg, #f0f4f8) !important;
  display: flex !important;
  justify-content: center !important;
  min-height: 100vh !important;
  padding: 24px !important;
}
.form-panel {
  background: #fff !important;
  border: 1px solid var(--bd, #e5e7eb) !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.14) !important;
  padding: 40px !important;
}

/* ── 3. OCULTAÇÃO DE ELEMENTOS ANTIGOS ──────────────────────── */
section.topbar        { display: none !important; }
nav.tabs              { display: none !important; }
.brand-lockup         { display: none !important; }
.global-skeleton.hidden { display: none !important; }

/* ── 4. TAB (módulos) — animação de entrada ─────────────────── */
.tab { display: none !important; }
.tab.active {
  animation: v2FadeIn 0.22s ease both !important;
  display: grid !important;
  gap: 18px !important;
}
@keyframes v2FadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 5. PAINEL / CARDS ──────────────────────────────────────── */
.panel {
  background: #fff !important;
  border: 1px solid var(--bd, #e5e7eb) !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08) !important;
  padding: 20px !important;
  transition: box-shadow 0.18s ease !important;
}
[data-theme="dark"] .panel {
  background: var(--s1, #161b22) !important;
  border-color: var(--bd, #30363d) !important;
}
.panel:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important; }

.card {
  background: #fff !important;
  border: 1px solid var(--bd, #e5e7eb) !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
  padding: 16px !important;
  transition: box-shadow 0.18s ease, transform 0.18s ease !important;
}
[data-theme="dark"] .card {
  background: var(--s1, #161b22) !important;
  border-color: var(--bd, #30363d) !important;
}
.card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.10) !important; transform: translateY(-2px) !important; }

/* ── 6. TIPOGRAFIA ──────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 { color: var(--t1, #111827) !important; font-family: 'Inter', sans-serif !important; margin: 0 !important; }
h1 { font-size: 20px !important; font-weight: 800 !important; }
h2 { font-size: 16px !important; font-weight: 700 !important; }
h3 { font-size: 14px !important; font-weight: 700 !important; }
p  { color: var(--t2, #374151) !important; }
small, span { font-family: 'Inter', sans-serif !important; }
label { color: var(--t2, #374151) !important; font-size: 12px !important; font-weight: 600 !important; }

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3 { color: var(--t1, #e6edf3) !important; }
[data-theme="dark"] p  { color: var(--t2, #b0bec8) !important; }

/* ── 7. KPI METRICS ─────────────────────────────────────────── */
.metrics {
  display: grid !important;
  gap: 14px !important;
  grid-template-columns: repeat(4, minmax(160px, 1fr)) !important;
}
.metric {
  background: #fff !important;
  border: 1px solid var(--bd, #e5e7eb) !important;
  border-radius: 14px !important;
  border-top: 4px solid var(--copper, #c2541a) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
  cursor: pointer;
  padding: 18px 20px !important;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.18s ease, transform 0.18s ease !important;
}
[data-theme="dark"] .metric {
  background: var(--s1, #161b22) !important;
  border-color: var(--bd, #30363d) !important;
}
.metric:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.10) !important; transform: translateY(-2px) !important; }
.metric span  { color: var(--t3, #6b7280) !important; display: block !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: .06em !important; margin-bottom: 6px !important; text-transform: uppercase !important; }
.metric strong { color: var(--t1, #111827) !important; display: block !important; font-size: 28px !important; font-weight: 900 !important; line-height: 1 !important; }
[data-theme="dark"] .metric strong { color: var(--t1, #e6edf3) !important; }

/* ── 8. GLOBAL ACTION BAR ──────────────────────────────────── */
.global-action-bar {
  background: #0d1117 !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18), 0 0 0 1px rgba(194,84,26,0.15) !important;
  color: #f8fafc !important;
  display: flex !important;
  gap: 14px !important;
  justify-content: space-between !important;
  padding: 12px 16px !important;
  position: sticky !important;
  top: 8px !important;
  z-index: 30 !important;
}
.global-action-bar > div:first-child { display: grid !important; gap: 2px !important; min-width: 180px !important; }
#globalActionKicker { color: #f97316 !important; font-size: 10px !important; font-weight: 800 !important; letter-spacing: .1em !important; text-transform: uppercase !important; }
#globalActionTitle  { color: #fff !important; font-size: 16px !important; font-weight: 700 !important; }
#globalActionHint   { color: rgba(255,255,255,0.4) !important; font-size: 11px !important; }
.global-action-buttons { align-items: center !important; display: flex !important; flex-wrap: wrap !important; gap: 6px !important; justify-content: flex-end !important; }
.global-action-buttons button { height: 34px !important; font-size: 12.5px !important; padding: 0 12px !important; min-height: unset !important; }
.global-action-buttons .ghost {
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 10px !important;
  color: rgba(255,255,255,0.85) !important;
}
.global-action-buttons .ghost:hover { background: rgba(255,255,255,0.14) !important; color: #fff !important; box-shadow: none !important; transform: none !important; }

/* ── 9. BOTÕES ──────────────────────────────────────────────── */
button, .download {
  border-radius: 10px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease !important;
}
button:not(.ghost):not(.danger):not(.sb-item):not(#sbCollapseBtn):not(#darkModeToggle):not(.fab-main):not(.fab-action):not(.stage-chip):not(.unit-toggle button):not([class*="nf-"]):not([class*="calc-"]):not([class*="etiqueta-"]):not(.btn-whatsapp):not(.btn-print-etiqueta) {
  background: var(--copper, #c2541a) !important;
  border: none !important;
  color: #fff !important;
}
button:not(.ghost):not(.danger):not(.sb-item):not(#sbCollapseBtn):not(#darkModeToggle):not(.fab-main):not(.fab-action):not(.stage-chip):not(.unit-toggle button):not([class*="nf-"]):not([class*="calc-"]):not([class*="etiqueta-"]):not(.btn-whatsapp):not(.btn-print-etiqueta):hover {
  background: #e8602a !important;
  box-shadow: 0 4px 12px rgba(194,84,26,0.30) !important;
  transform: translateY(-1px) !important;
}
button.ghost {
  background: var(--s2, #f6f8fa) !important;
  border: 1px solid var(--bd, #e5e7eb) !important;
  color: var(--t2, #374151) !important;
}
button.ghost:hover { background: var(--s3, #edf1f5) !important; box-shadow: 0 1px 4px rgba(0,0,0,0.08) !important; transform: translateY(-1px) !important; }
[data-theme="dark"] button.ghost { background: var(--s2, #1c2128) !important; border-color: var(--bd, #30363d) !important; color: var(--t2, #b0bec8) !important; }
[data-theme="dark"] button.ghost:hover { background: var(--s3, #21262d) !important; }

/* ── 10. INPUTS / SELECTS / TEXTAREA ───────────────────────── */
input, select, textarea {
  background: #fff !important;
  border: 1px solid var(--bd2, #d1d5db) !important;
  border-radius: 10px !important;
  color: var(--t1, #111827) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  min-height: 40px !important;
  padding: 0 12px !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
  width: 100% !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--copper, #c2541a) !important;
  box-shadow: 0 0 0 3px rgba(194,84,26,0.12) !important;
  outline: none !important;
}
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea {
  background: var(--s1, #161b22) !important;
  border-color: var(--bd2, #3d444d) !important;
  color: var(--t1, #e6edf3) !important;
}

/* ── 11. FORMULÁRIO GRID ────────────────────────────────────── */
.form-grid { display: grid !important; gap: 12px !important; grid-template-columns: repeat(4, minmax(150px, 1fr)) !important; }
.form-grid .span-2 { grid-column: span 2 !important; }
.form-panel { display: grid !important; gap: 14px !important; max-width: 420px !important; width: 100% !important; }

/* ── 12. SECTION HEAD ───────────────────────────────────────── */
.section-head {
  align-items: center !important;
  display: flex !important;
  gap: 12px !important;
  justify-content: space-between !important;
}
.section-head h2 { color: var(--t1, #111827) !important; font-size: 17px !important; font-weight: 700 !important; }

/* ── 13. TABELAS ────────────────────────────────────────────── */
.table-wrap { border: 1px solid var(--bd, #e5e7eb) !important; border-radius: 14px !important; overflow: hidden !important; }
.module-table { background: #fff !important; border-collapse: collapse !important; width: 100% !important; }
[data-theme="dark"] .module-table { background: var(--s1, #161b22) !important; }
.module-table th {
  background: var(--s2, #f6f8fa) !important;
  border-bottom: 1px solid var(--bd, #e5e7eb) !important;
  color: var(--t3, #6b7280) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .05em !important;
  padding: 10px 14px !important;
  text-align: left !important;
  text-transform: uppercase !important;
}
.module-table td { border-bottom: 1px solid var(--bd, #e5e7eb) !important; color: var(--t1, #111827) !important; font-size: 13px !important; padding: 10px 14px !important; }
.module-table td small { color: var(--t3, #6b7280) !important; display: block !important; margin-top: 2px !important; }
.module-table tbody tr:hover { background: var(--s2, #f6f8fa) !important; }
[data-theme="dark"] .module-table th { background: var(--s2, #1c2128) !important; border-color: var(--bd, #30363d) !important; color: var(--t3, #8b949e) !important; }
[data-theme="dark"] .module-table td { border-color: var(--bd, #30363d) !important; color: var(--t1, #e6edf3) !important; }
[data-theme="dark"] .module-table tbody tr:hover { background: var(--s2, #1c2128) !important; }

/* ── 14. BADGES E STATUS ────────────────────────────────────── */
.badge        { border-radius: 9999px !important; display: inline-flex !important; font-size: 11px !important; font-weight: 700 !important; padding: 3px 9px !important; }
.status-pill  { border-radius: 9999px !important; display: inline-flex !important; font-size: 11px !important; font-weight: 700 !important; padding: 3px 9px !important; }

/* OS status colors */
.status-pill.OPEN,.badge.OPEN     { background: #dbeafe !important; color: #1d4ed8 !important; }
.status-pill.IN_PROGRESS          { background: #fef3c7 !important; color: #b45309 !important; }
.status-pill.SCHEDULED            { background: #ede9fe !important; color: #7c3aed !important; }
.status-pill.WAITING_CLIENT       { background: #fce7f3 !important; color: #9d174d !important; }
.status-pill.DELIVERED,.badge.DELIVERED { background: #dcfae6 !important; color: #059669 !important; }
.status-pill.CANCELED             { background: #f3f4f6 !important; color: #6b7280 !important; }
.badge.HIGH,.status-pill.HIGH     { background: #fef3c7 !important; color: #b45309 !important; }
.badge.CRITICAL,.status-pill.CRITICAL,.OVERDUE,.CRITICAL { background: #fee2e2 !important; color: #dc2626 !important; }
.badge.NORMAL,.status-pill.NORMAL { background: #dbeafe !important; color: #1d4ed8 !important; }
.badge.LOW,.status-pill.LOW       { background: #f3f4f6 !important; color: #6b7280 !important; }
.DUE_TODAY,.HIGH { background: #fef3c7 !important; color: #b45309 !important; }
.DUE_SOON       { background: #dbeafe !important; color: #1d4ed8 !important; }
.ON_TRACK       { background: #dcfae6 !important; color: #059669 !important; }

/* ── 15. ORDENS DE SERVIÇO ──────────────────────────────────── */
.orders-workspace {
  align-items: start !important;
  display: grid !important;
  gap: 16px !important;
  grid-template-columns: minmax(0,1fr) 380px !important;
}
.orders-industrial-list { grid-template-columns: 1fr !important; }
.industrial-order {
  background: #fff !important;
  border: 1px solid var(--bd, #e5e7eb) !important;
  border-left: 4px solid var(--copper, #c2541a) !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
  cursor: pointer;
  padding: 16px !important;
  transition: box-shadow 0.18s ease, transform 0.18s ease !important;
}
[data-theme="dark"] .industrial-order { background: var(--s1, #161b22) !important; border-color: var(--bd, #30363d) !important; }
.industrial-order:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.10) !important; transform: translateY(-2px) !important; }
.industrial-order.active { border-color: #e8602a !important; box-shadow: 0 0 0 2px rgba(194,84,26,0.18), 0 4px 16px rgba(0,0,0,0.10) !important; }
.order-card-top h2 { color: var(--t1, #111827) !important; font-size: 14.5px !important; font-weight: 700 !important; }
.order-card-top small { color: var(--t3, #6b7280) !important; font-size: 12px !important; }
.stage-chip {
  background: var(--s2, #f6f8fa) !important;
  border: 1px solid var(--bd, #e5e7eb) !important;
  border-radius: 6px !important;
  color: var(--t3, #6b7280) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  height: 24px !important;
  min-height: unset !important;
  padding: 0 8px !important;
}
.stage-chip.active { background: #0d1117 !important; border-color: #0d1117 !important; color: #fff !important; }
.order-spec-grid { display: grid !important; gap: 8px !important; grid-template-columns: repeat(3, minmax(0,1fr)) !important; margin-top: 10px !important; }
.order-spec-grid span {
  background: var(--s2, #f6f8fa) !important;
  border: 1px solid var(--bd, #e5e7eb) !important;
  border-radius: 10px !important;
  color: var(--t2, #374151) !important;
  display: grid !important;
  font-size: 12px !important;
  gap: 3px !important;
  padding: 9px !important;
}
.order-spec-grid strong { color: var(--t3, #6b7280) !important; font-size: 10px !important; font-weight: 700 !important; text-transform: uppercase !important; }
.order-timeline-panel { align-content: start !important; display: grid !important; gap: 12px !important; position: sticky !important; top: calc(58px + 60px) !important; }

/* ── 16. CLIENTES CRM ───────────────────────────────────────── */
.crm-grid { display: grid !important; gap: 14px !important; grid-template-columns: repeat(auto-fill, minmax(340px,1fr)) !important; }
.crm-card {
  background: #fff !important;
  border: 1px solid var(--bd, #e5e7eb) !important;
  border-left: 4px solid var(--copper, #c2541a) !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
  cursor: pointer;
  padding: 16px !important;
  transition: box-shadow 0.18s ease, transform 0.18s ease !important;
}
[data-theme="dark"] .crm-card { background: var(--s1, #161b22) !important; border-color: var(--bd, #30363d) !important; }
.crm-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.10) !important; transform: translateY(-2px) !important; }
.crm-card.inactive { border-left-color: var(--bd2, #d1d5db) !important; opacity: 0.72 !important; }
.crm-card-head small { color: var(--t3, #6b7280) !important; font-size: 10px !important; font-weight: 700 !important; text-transform: uppercase !important; }
.crm-card-head h2    { color: var(--t1, #111827) !important; font-size: 14.5px !important; font-weight: 700 !important; }

/* ── 17. ESTOQUE CARDS ──────────────────────────────────────── */
.stock-material-card {
  background: #fff !important;
  border: 1px solid var(--bd, #e5e7eb) !important;
  border-left: 4px solid #687782 !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
  padding: 14px !important;
  transition: box-shadow 0.18s ease, transform 0.18s ease !important;
}
[data-theme="dark"] .stock-material-card { background: var(--s1, #161b22) !important; border-color: var(--bd, #30363d) !important; }
.stock-material-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.10) !important; transform: translateY(-2px) !important; }
.stock-material-card.low { background: rgba(220,38,38,.04) !important; border-left-color: #dc2626 !important; }
.stock-material-head strong { color: var(--t1, #111827) !important; font-size: 16px !important; font-weight: 800 !important; }
.stock-material-head small  { color: var(--t3, #6b7280) !important; font-weight: 700 !important; text-transform: uppercase !important; }
.stock-material-head span   { color: var(--t2, #374151) !important; font-size: 13px !important; }
.stock-card-kpis { display: grid !important; gap: 8px !important; grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
.stock-card-kpis span {
  background: var(--s2, #f6f8fa) !important;
  border: 1px solid var(--bd, #e5e7eb) !important;
  border-radius: 10px !important;
  color: var(--t2, #374151) !important;
  display: grid !important;
  font-size: 12px !important;
  gap: 2px !important;
  padding: 8px !important;
}
.stock-card-kpis strong { color: var(--t1, #111827) !important; font-size: 15px !important; font-weight: 700 !important; }

/* ── 18. MÁQUINAS PRODUÇÃO ──────────────────────────────────── */
.machine-grid { display: grid !important; gap: 10px !important; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)) !important; }
.machine-card {
  background: var(--s2, #f6f8fa) !important;
  border: 1px solid var(--bd, #e5e7eb) !important;
  border-left: 4px solid #687782 !important;
  border-radius: 14px !important;
  display: grid !important;
  gap: 8px !important;
  padding: 12px !important;
  transition: box-shadow 0.18s ease, transform 0.18s ease !important;
}
.machine-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.10) !important; transform: translateY(-1px) !important; }
.machine-card.IN_USE      { border-left-color: #d97706 !important; background: rgba(217,119,6,.07) !important; }
.machine-card.AVAILABLE   { border-left-color: #059669 !important; }
.machine-card.MAINTENANCE,
.machine-card.INACTIVE    { border-left-color: #dc2626 !important; background: rgba(220,38,38,.07) !important; }

/* ── 19. COMPRAS ────────────────────────────────────────────── */
.purchase-step {
  background: var(--s2, #f6f8fa) !important;
  border: 1px solid var(--bd, #e5e7eb) !important;
  border-radius: 14px !important;
  padding: 10px !important;
  transition: box-shadow 0.18s ease, transform 0.18s ease !important;
}
.purchase-step:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important; transform: translateY(-1px) !important; }
.purchase-flow { display: grid !important; gap: 10px !important; grid-template-columns: repeat(5, minmax(120px,1fr)) !important; margin-bottom: 14px !important; }

/* ── 20. QUALIDADE ──────────────────────────────────────────── */
.quality-check-item {
  background: var(--s2, #f6f8fa) !important;
  border: 1px solid var(--bd, #e5e7eb) !important;
  border-radius: 10px !important;
  display: grid !important;
  gap: 8px !important;
  padding: 10px !important;
}
.quality-check-item strong { color: var(--t1, #111827) !important; font-size: 13px !important; }
.quality-check-item small  { color: var(--t3, #6b7280) !important; }

/* ── 21. DRE / FINANCEIRO CARDS ─────────────────────────────── */
.dre-grid { display: grid !important; gap: 10px !important; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)) !important; }
.dre-grid article {
  background: var(--s2, #f6f8fa) !important;
  border: 1px solid var(--bd, #e5e7eb) !important;
  border-radius: 14px !important;
  display: grid !important;
  gap: 5px !important;
  padding: 14px !important;
}
.dre-grid strong { color: var(--t1, #111827) !important; }
.dre-grid span   { color: var(--t3, #6b7280) !important; font-size: 13px !important; }
.dre-grid b      { color: var(--t2, #374151) !important; font-size: 16px !important; }
.finance-action-header {
  background: #0d1117 !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-left: 4px solid var(--copper, #c2541a) !important;
  border-radius: 14px !important;
  color: #f8fafc !important;
  display: flex !important;
  gap: 14px !important;
  justify-content: space-between !important;
  padding: 16px !important;
}

/* ── 22. TIMELINE ───────────────────────────────────────────── */
.timeline-feed { display: grid !important; gap: 10px !important; max-height: 620px !important; overflow: auto !important; }
.timeline-item {
  background: var(--s2, #f6f8fa) !important;
  border: 1px solid var(--bd, #e5e7eb) !important;
  border-left: 4px solid var(--copper, #c2541a) !important;
  border-radius: 14px !important;
  display: grid !important;
  gap: 6px !important;
  padding: 12px !important;
}
.timeline-item.system { border-left-color: #d97706 !important; }

/* ── 23. SETOR / RESULTADOS ─────────────────────────────────── */
.sector-result-grid { display: grid !important; gap: 12px !important; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)) !important; }
.sector-result {
  background: var(--s2, #f6f8fa) !important;
  border: 1px solid var(--bd, #e5e7eb) !important;
  border-radius: 14px !important;
  display: grid !important;
  gap: 6px !important;
  padding: 14px !important;
}
.sector-result strong { color: var(--t1, #111827) !important; font-size: 15px !important; font-weight: 700 !important; }
.sector-result span   { color: var(--t3, #6b7280) !important; font-size: 13px !important; }

/* ── 24. STATUS LINE / EMPTY ────────────────────────────────── */
.status-line         { color: var(--t3, #6b7280) !important; font-size: 13px !important; }
.status-line.success { color: #059669 !important; font-weight: 700 !important; }
.status-line.error   { color: #dc2626 !important; }
.status-line.info    { color: #2563eb !important; }
.error { color: #dc2626 !important; }
.empty {
  background: #fff !important;
  border: 2px dashed var(--bd2, #d1d5db) !important;
  border-radius: 14px !important;
  color: var(--t3, #6b7280) !important;
  padding: 24px !important;
  text-align: center !important;
}
[data-theme="dark"] .empty { background: var(--s1, #161b22) !important; }

/* ── 25. MAPA (deadline board) ──────────────────────────────── */
.map-board {
  background: linear-gradient(135deg, rgba(59,130,246,.06), rgba(34,197,94,.05)) !important;
  border: 1px solid var(--bd, #e5e7eb) !important;
  border-radius: 14px !important;
  min-height: 420px !important;
  padding: 16px !important;
  position: relative !important;
}
.map-point {
  background: #fff !important;
  border: 1px solid var(--bd, #e5e7eb) !important;
  border-left: 5px solid var(--copper, #c2541a) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
  padding: 12px !important;
}

/* ── 26. FOTOS ──────────────────────────────────────────────── */
.photo-grid { display: grid !important; gap: 12px !important; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)) !important; }
.photo { aspect-ratio: 4/3 !important; background: var(--s3, #edf1f5) !important; border-radius: 14px !important; object-fit: cover !important; width: 100% !important; }

/* ── 27. CHIPS ──────────────────────────────────────────────── */
.chips { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin-top: 8px !important; }
.chip-button {
  background: var(--s2, #f6f8fa) !important;
  border: 1px solid var(--bd, #e5e7eb) !important;
  border-radius: 9999px !important;
  color: var(--t2, #374151) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  height: 32px !important;
  min-height: unset !important;
  padding: 0 14px !important;
}
.chip-button:hover { background: var(--s3, #edf1f5) !important; border-color: var(--bd2, #d1d5db) !important; box-shadow: none !important; transform: none !important; }
.chip-button.active { background: var(--copper, #c2541a) !important; border-color: transparent !important; color: #fff !important; }

/* ── 28. DROPDOWN MODALS / ACCESS ───────────────────────────── */
.access-row {
  background: var(--s2, #f6f8fa) !important;
  border: 1px solid var(--bd, #e5e7eb) !important;
  border-radius: 10px !important;
  color: var(--t1, #111827) !important;
  cursor: pointer !important;
  display: grid !important;
  gap: 6px !important;
  min-height: 56px !important;
  padding: 10px 12px !important;
  transition: background 0.15s ease !important;
}
.access-row:hover { background: var(--s3, #edf1f5) !important; box-shadow: var(--sh-sm) !important; }
.access-row.active { background: #0d1117 !important; border-color: transparent !important; color: #fff !important; }
.permission-group { background: var(--s2, #f6f8fa) !important; border: 1px solid var(--bd, #e5e7eb) !important; border-radius: 14px !important; display: grid !important; gap: 8px !important; padding: 14px !important; }
.permission-toggle { background: #fff !important; border: 1px solid var(--bd, #e5e7eb) !important; border-radius: 10px !important; display: grid !important; gap: 10px !important; grid-template-columns: 18px 1fr !important; padding: 10px !important; }
[data-theme="dark"] .permission-group { background: var(--s2, #1c2128) !important; border-color: var(--bd, #30363d) !important; }
[data-theme="dark"] .permission-toggle { background: var(--s1, #161b22) !important; border-color: var(--bd, #30363d) !important; }

/* ── 29. AI MODULES ─────────────────────────────────────────── */
.ai-kpi { background: #fff !important; border: 1px solid var(--bd, #e5e7eb) !important; border-radius: 14px !important; border-top: 3px solid var(--bd2, #d1d5db) !important; min-height: 110px !important; padding: 14px !important; box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important; }
.ai-kpi.green { border-top-color: #059669 !important; }
.ai-kpi.amber { border-top-color: #d97706 !important; }
.ai-kpi.red   { border-top-color: #dc2626 !important; }
.ai-kpi.blue  { border-top-color: #2563eb !important; }
.ai-kpi strong { color: var(--t1, #111827) !important; font-size: 24px !important; font-weight: 800 !important; }
.ai-kpi span   { color: var(--t3, #6b7280) !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; }
[data-theme="dark"] .ai-kpi { background: var(--s1, #161b22) !important; border-color: var(--bd, #30363d) !important; }
.ai-report-text { background: var(--s2, #f6f8fa) !important; border: 1px solid var(--bd, #e5e7eb) !important; border-radius: 14px !important; color: var(--t1, #111827) !important; font-family: 'Inter', sans-serif !important; line-height: 1.6 !important; min-height: 320px !important; overflow: auto !important; padding: 18px !important; white-space: pre-wrap !important; }
.ai-preset-button { background: #fff !important; border: 1px solid var(--bd, #e5e7eb) !important; border-radius: 10px !important; color: var(--t1, #111827) !important; display: grid !important; gap: 3px !important; justify-content: start !important; min-height: 64px !important; padding: 10px 12px !important; text-align: left !important; }
.ai-preset-button small { color: var(--t3, #6b7280) !important; }
.ai-preset-button:hover { background: var(--s2, #f6f8fa) !important; border-color: var(--bd2, #d1d5db) !important; transform: translateY(-1px) !important; }

/* ── 30. RESPONSIVIDADE FINAL ───────────────────────────────── */
@media (max-width: 900px) {
  .metrics { grid-template-columns: repeat(2, 1fr) !important; }
  .form-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .orders-workspace { grid-template-columns: 1fr !important; }
  .order-timeline-panel { position: static !important; }
  .crm-grid { grid-template-columns: 1fr !important; }
  .purchase-flow { grid-template-columns: repeat(3,1fr) !important; }
  #appView { padding: 14px 16px !important; }
}
@media (max-width: 600px) {
  .metrics { grid-template-columns: 1fr !important; }
  .form-grid { grid-template-columns: 1fr !important; }
  .order-spec-grid { grid-template-columns: repeat(2,1fr) !important; }
  .stock-card-kpis { grid-template-columns: 1fr 1fr !important; }
  .purchase-flow { grid-template-columns: 1fr !important; overflow-x: auto !important; }
  #appView { padding: 10px 12px !important; }
  .table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
}