/* ================================================================
   FENIX METAL ERP — Modern Theme
   Injetado sobre o styles.css original.
   TODAS as classes antigas continuam funcionando.
   ================================================================ */

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

/* ── 1. TOKENS DE DESIGN ──────────────────────────────────────── */
:root {
  /* Marca */
  --copper:  #c2541a;
  --copper2: #e8602a;
  --gold:    #d4922e;
  --graphite:#0d1117;

  /* Superfícies (Light) */
  --bg:      #f0f4f8;
  --s1:      #ffffff;
  --s2:      #f6f8fa;
  --s3:      #edf1f5;

  /* Texto */
  --t1: #111827;
  --t2: #374151;
  --t3: #6b7280;
  --t4: #9ca3af;

  /* Bordas */
  --bd:  #e5e7eb;
  --bd2: #d1d5db;

  /* Semânticos */
  --green:  #059669;
  --yellow: #d97706;
  --red:    #dc2626;
  --blue:   #2563eb;

  /* Sidebar */
  --sb-bg:  #0d1117;
  --sb-bd:  rgba(255,255,255,0.07);
  --sb-txt: #c9d3dc;
  --sb-w:   240px;
  --sb-wc:  60px;

  /* Sombras */
  --sh-sm: 0 1px 4px rgba(0,0,0,0.08);
  --sh-md: 0 4px 16px rgba(0,0,0,0.08);
  --sh-lg: 0 12px 32px rgba(0,0,0,0.10);

  /* Raio */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-full: 9999px;

  /* Transição */
  --ease: cubic-bezier(0.4,0,0.2,1);
  --dur:  180ms;

  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Dark mode */
[data-theme="dark"] {
  --bg:  #0d1117;
  --s1:  #161b22;
  --s2:  #1c2128;
  --s3:  #21262d;
  --t1:  #e6edf3;
  --t2:  #b0bec8;
  --t3:  #8b949e;
  --t4:  #6e7681;
  --bd:  #30363d;
  --bd2: #3d444d;
}

/* ── 2. RESET MODERNO ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg) !important;
  color: var(--t1) !important;
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bd2); border-radius: var(--r-full); }

/* ── 3. LAYOUT PRINCIPAL (sidebar + conteúdo) ─────────────────── */
body.modern-layout {
  display: flex;
  min-height: 100vh;
}

/* Sidebar */
#modernSidebar {
  width: var(--sb-w);
  flex-shrink: 0;
  background: var(--sb-bg);
  border-right: 1px solid var(--sb-bd);
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: sticky;
  top: 0;
  overflow: hidden;
  transition: width var(--dur) var(--ease);
  z-index: 50;
}
#modernSidebar.collapsed { width: var(--sb-wc); }

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

/* Topbar interna */
.modern-topbar {
  height: 56px;
  background: var(--s1);
  border-bottom: 1px solid var(--bd);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  position: sticky;
  top: 0;
  z-index: 30;
}
.modern-topbar-left  { display: flex; align-items: center; gap: 10px; }
.modern-topbar-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* Botão dark mode */
#darkModeToggle {
  background: var(--s2);
  border: 1px solid var(--bd);
  border-radius: var(--r-md);
  color: var(--t3);
  cursor: pointer;
  font-size: 18px;
  height: 36px;
  width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur) var(--ease);
  min-height: unset;
  padding: 0;
  line-height: 1;
}
#darkModeToggle:hover { background: var(--s3); color: var(--t1); }

/* ── 4. SIDEBAR INTERNA ───────────────────────────────────────── */
.sb-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 60px;
  padding: 0 12px;
  border-bottom: 1px solid var(--sb-bd);
  overflow: hidden;
}
.sb-logo {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  object-fit: contain;
  background: #151a1f;
  border: 1px solid rgba(208,138,47,.4);
  padding: 3px;
}
.sb-brand-text { overflow: hidden; flex: 1; min-width: 0; }
.sb-brand-text strong {
  display: block;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.sb-brand-text span {
  display: block;
  color: rgba(255,255,255,0.35);
  font-size: 10px;
  white-space: nowrap;
}

/* Botão colapsar */
#sbCollapseBtn {
  margin-left: auto;
  flex-shrink: 0;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--r-sm);
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  height: 28px;
  width: 28px;
  min-height: unset;
  padding: 0;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--dur) var(--ease);
  line-height: 1;
}
#sbCollapseBtn:hover { background: rgba(255,255,255,0.12); color: #fff; }
#modernSidebar.collapsed #sbCollapseBtn { transform: rotate(180deg); }

/* Navegação */
.sb-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px;
}
.sb-nav::-webkit-scrollbar { width: 3px; }
.sb-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); }

.sb-group { margin-bottom: 4px; }
.sb-group-label {
  color: rgba(255,255,255,0.28);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 10px 10px 3px;
  text-transform: uppercase;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  transition: opacity var(--dur) var(--ease);
}
#modernSidebar.collapsed .sb-group-label { opacity: 0; height: 0; padding: 0; }
#modernSidebar.collapsed .sb-group-divider { height: 1px; background: rgba(255,255,255,0.07); margin: 6px 8px; }

.sb-item {
  align-items: center;
  background: transparent;
  border: none;
  border-radius: var(--r-md);
  color: rgba(255,255,255,0.55);
  cursor: pointer;
  display: flex;
  font-size: 13px;
  font-weight: 500;
  gap: 10px;
  height: 36px;
  padding: 0 10px;
  position: relative;
  text-align: left;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  width: 100%;
  min-height: unset;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
}
.sb-item:hover { background: rgba(255,255,255,0.07); color: #fff; }
.sb-item.active { background: rgba(194,84,26,0.18); color: #fff; font-weight: 700; }
.sb-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: #c2541a;
  border-radius: 0 3px 3px 0;
}
.sb-item-icon { flex-shrink: 0; font-size: 16px; width: 18px; text-align: center; }
.sb-item-label { flex: 1; transition: opacity var(--dur) var(--ease); }
#modernSidebar.collapsed .sb-item { justify-content: center; padding: 0; width: 44px; margin: 0 auto; }
#modernSidebar.collapsed .sb-item-label { opacity: 0; width: 0; overflow: hidden; }

/* Footer do sidebar */
.sb-footer {
  border-top: 1px solid var(--sb-bd);
  padding: 10px 8px;
}
.sb-user {
  align-items: center;
  display: flex;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--r-md);
  overflow: hidden;
}
.sb-avatar {
  align-items: center;
  background: linear-gradient(135deg, #c2541a, #9a3412);
  border-radius: var(--r-full);
  color: #fff;
  display: flex;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 800;
  height: 30px;
  justify-content: center;
  width: 30px;
}
.sb-user-info { overflow: hidden; }
.sb-user-name  { color: rgba(255,255,255,0.8); font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user-role  { color: rgba(255,255,255,0.35); font-size: 10px; white-space: nowrap; }
#modernSidebar.collapsed .sb-user-info { display: none; }

/* ── 5. TOPBAR ANTIGA — ocultar, substituída pelo modern-topbar ─ */
section.topbar { display: none !important; }

/* ── 6. CONTEÚDO INTERNO ─────────────────────────────────────── */
#appView, #loginView {
  padding: 20px 24px;
}

/* ── 7. PAINEL / CARD modernos ────────────────────────────────── */
.panel {
  background: var(--s1) !important;
  border: 1px solid var(--bd) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--sh-sm) !important;
  padding: 18px !important;
  transition: box-shadow var(--dur) var(--ease);
}
.panel:hover { box-shadow: var(--sh-md) !important; }

/* ── 8. KPI CARDS MODERNOS ────────────────────────────────────── */
.metrics { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

.metric {
  background: var(--s1);
  border: 1px solid var(--bd);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.metric:hover { box-shadow: var(--sh-md); transform: translateY(-2px); }
.metric::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--copper), var(--gold));
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.metric span {
  color: var(--t3) !important;
  display: block;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em;
  margin-bottom: 8px !important;
  text-transform: uppercase;
}
.metric strong {
  color: var(--t1) !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  line-height: 1;
  display: block;
}
.metric .metric-icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 28px;
  opacity: 0.12;
}

/* ── 9. GRÁFICOS CHART.JS ─────────────────────────────────────── */
.chart-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 1fr;
  margin-top: 16px;
}
.chart-card {
  background: var(--s1);
  border: 1px solid var(--bd);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  padding: 18px;
}
.chart-card h3 {
  color: var(--t1);
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 4px 0;
}
.chart-card p {
  color: var(--t3);
  font-size: 12px;
  margin: 0 0 14px 0;
}
.chart-wrap { position: relative; height: 220px; }
.chart-wrap canvas { max-height: 220px; }

/* Gráfico de prazos */
.deadline-chips-modern {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.deadline-chip {
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 700;
  padding: 5px 14px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.deadline-chip.ON_TRACK   { background: #dcfae6; color: #067647; }
.deadline-chip.DUE_SOON   { background: #dbeafe; color: #1d4ed8; }
.deadline-chip.DUE_TODAY  { background: #fef3c7; color: #b45309; }
.deadline-chip.OVERDUE    { background: #fee2e2; color: #dc2626; }
.deadline-chip.DELIVERED  { background: #f3f4f6; color: #374151; }

/* Grid por setor */
.sector-result-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin-top: 10px; }
.sector-result {
  background: var(--s2);
  border: 1px solid var(--bd);
  border-radius: var(--r-md);
  padding: 12px;
  transition: box-shadow var(--dur) var(--ease);
}
.sector-result:hover { box-shadow: var(--sh-sm); }
.sector-result strong { color: var(--t1); display: block; font-size: 14px; margin-bottom: 6px; }
.sector-result span { color: var(--t3); display: block; font-size: 12px; line-height: 1.6; }

/* ── 10. TABS → ocultar visualmente (JS ainda as usa) ─────────── */
nav.tabs {
  display: none !important;
}

/* ── 11. SEÇÃO ATIVA ──────────────────────────────────────────── */
.tab { display: none; }
.tab.active { display: block; animation: fadeUp 0.22s var(--ease) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ── 12. INPUTS MODERNOS ──────────────────────────────────────── */
input, select, textarea {
  background: var(--s1) !important;
  border: 1px solid var(--bd2) !important;
  border-radius: var(--r-md) !important;
  color: var(--t1) !important;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--copper) !important;
  box-shadow: 0 0 0 3px rgba(194,84,26,0.12) !important;
  outline: none;
}

/* ── 13. BOTÕES MODERNOS ──────────────────────────────────────── */
button, .download {
  border-radius: var(--r-md) !important;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease) !important;
}
button:not(.ghost):not(.danger):not(.sb-item):not(#sbCollapseBtn):not(#darkModeToggle):not(.tabs button):hover {
  box-shadow: 0 4px 12px rgba(194,84,26,0.28) !important;
  transform: translateY(-1px) !important;
}
button.ghost { background: var(--s2) !important; border: 1px solid var(--bd) !important; color: var(--t2) !important; }
button.ghost:hover { background: var(--s3) !important; color: var(--t1) !important; box-shadow: var(--sh-sm) !important; }

/* ── 14. LOGIN MODERNO ────────────────────────────────────────── */
.login-view {
  background: radial-gradient(ellipse at 60% 40%, rgba(194,84,26,0.07) 0%, transparent 60%), var(--bg) !important;
  min-height: 100vh !important;
}
.form-panel {
  background: var(--s1);
  border: 1px solid var(--bd);
  border-radius: 20px !important;
  box-shadow: var(--sh-lg) !important;
  padding: 36px !important;
}

/* ── 15. GLOBAL ACTION BAR ────────────────────────────────────── */
.global-action-bar {
  border-radius: var(--r-lg) !important;
  margin: 0 0 16px !important;
  top: 8px;
}

/* ── 16. SECTION HEAD ─────────────────────────────────────────── */
.section-head h2 { color: var(--t1); font-size: 16px; font-weight: 700; }

/* ── 17. BADGES MODERNOS ──────────────────────────────────────── */
.badge { border-radius: var(--r-full) !important; font-weight: 700 !important; }
.ON_TRACK, .DELIVERED { background: #dcfae6 !important; color: #067647 !important; }
.DUE_TODAY, .HIGH     { background: #fef3c7 !important; color: #b45309 !important; }
.DUE_SOON             { background: #dbeafe !important; color: #1d4ed8 !important; }
.OVERDUE, .CRITICAL   { background: #fee2e2 !important; color: #dc2626 !important; }

/* ── 18. TOAST MODERNO (notificações) ────────────────────────── */
#modernToastContainer {
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  position: fixed;
  right: 20px;
  z-index: 200;
}
.modern-toast {
  align-items: flex-start;
  animation: toastIn 0.26s var(--ease) both;
  background: #0d1117;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  color: #fff;
  display: flex;
  gap: 10px;
  max-width: 320px;
  padding: 12px 16px;
  pointer-events: all;
}
.modern-toast.removing { animation: toastOut 0.22s var(--ease) both; }
.modern-toast.success  { border-left: 3px solid #22c55e; }
.modern-toast.error    { border-left: 3px solid #ef4444; }
.modern-toast.info     { border-left: 3px solid #3b82f6; }
.modern-toast.warning  { border-left: 3px solid #f59e0b; }
.toast-title { font-size: 13px; font-weight: 700; }
.toast-body  { font-size: 12px; color: rgba(255,255,255,0.6); margin-top: 2px; }
@keyframes toastIn  { from { opacity:0; transform:translateX(16px); } to { opacity:1; transform:translateX(0); } }
@keyframes toastOut { from { opacity:1; transform:translateX(0); } to { opacity:0; transform:translateX(16px); } }

/* ── 19. COMMAND BAR (Ctrl+K) ─────────────────────────────────── */
#cmdOverlay {
  backdrop-filter: blur(6px);
  background: rgba(0,0,0,0.5);
  bottom: 0; left: 0; right: 0; top: 0;
  position: fixed;
  z-index: 150;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
}
#cmdOverlay.open { display: flex; animation: fadeUp 0.2s var(--ease) both; }
#cmdPalette {
  background: var(--s1);
  border: 1px solid var(--bd2);
  border-radius: 16px;
  box-shadow: var(--sh-lg);
  display: flex;
  flex-direction: column;
  max-height: 460px;
  overflow: hidden;
  width: min(520px, calc(100vw - 32px));
}
.cmd-search {
  align-items: center;
  border-bottom: 1px solid var(--bd);
  display: flex;
  gap: 10px;
  padding: 14px 16px;
}
.cmd-search-icon { color: var(--t3); font-size: 16px; }
#cmdInput {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--t1) !important;
  flex: 1;
  font-size: 15px;
  min-height: unset !important;
  padding: 0 !important;
}
.cmd-results { flex: 1; overflow-y: auto; padding: 6px; }
.cmd-group   { color: var(--t3); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; padding: 8px 10px 3px; text-transform: uppercase; }
.cmd-item {
  align-items: center;
  background: transparent;
  border: none;
  border-radius: var(--r-md);
  color: var(--t1);
  cursor: pointer;
  display: flex;
  font-size: 13px;
  gap: 10px;
  height: 40px;
  min-height: unset;
  padding: 0 10px;
  text-align: left;
  width: 100%;
  transition: background var(--dur) var(--ease);
}
.cmd-item:hover, .cmd-item.focused { background: var(--s2); }
.cmd-item-icon { color: var(--t3); width: 18px; text-align: center; }
.cmd-footer {
  border-top: 1px solid var(--bd);
  color: var(--t3);
  display: flex;
  font-size: 11px;
  gap: 14px;
  padding: 8px 16px;
}
.cmd-footer kbd {
  background: var(--s2);
  border: 1px solid var(--bd);
  border-radius: 4px;
  font-size: 10px;
  padding: 1px 5px;
}

/* ── 20. RESPONSIVO ───────────────────────────────────────────── */
@media (max-width: 768px) {
  #modernSidebar { position: fixed; height: 100%; transform: translateX(-100%); transition: transform var(--dur) var(--ease), width var(--dur) var(--ease); }
  #modernSidebar.mobile-open { transform: translateX(0); width: var(--sb-w) !important; }
  .shell { margin-left: 0 !important; }
  .chart-grid { grid-template-columns: 1fr; }
  .modern-topbar .sb-toggle { display: flex !important; }
}

/* ================================================================
   PASSO 2 — O.S. E CLIENTES MODERNOS
   ================================================================ */

/* ── ORDENS DE SERVIÇO ─────────────────────────────────────────── */

/* Grid de lista */
.orders-industrial-list {
  display: grid !important;
  gap: 12px !important;
  grid-template-columns: 1fr !important;
}

/* Card individual da O.S. */
.industrial-order {
  background: var(--s1) !important;
  border: 1px solid var(--bd) !important;
  border-left: 4px solid var(--copper) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--sh-sm) !important;
  cursor: pointer;
  padding: 16px !important;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease) !important;
}
.industrial-order:hover {
  box-shadow: var(--sh-md) !important;
  transform: translateY(-2px) !important;
}
.industrial-order.active {
  border-color: var(--copper2) !important;
  box-shadow: 0 0 0 2px rgba(194,84,26,.18), var(--sh-md) !important;
}
/* Cores por prioridade */
.industrial-order:has(.badge.CRITICAL) { border-left-color: var(--red)    !important; }
.industrial-order:has(.badge.HIGH)     { border-left-color: var(--yellow)  !important; }
.industrial-order:has(.badge.NORMAL)   { border-left-color: var(--blue)    !important; }

/* Card title */
.order-card-top h2 {
  color: var(--t1) !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  margin: 0 0 3px !important;
}
.order-card-top small { color: var(--t3) !important; font-size: 12px !important; }

/* Etapas de produção */
.order-stage-line { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0; }
.stage-chip {
  background: var(--s2) !important;
  border: 1px solid var(--bd) !important;
  border-radius: var(--r-sm) !important;
  color: var(--t3) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  height: 24px !important;
  min-height: unset !important;
  padding: 0 8px !important;
  cursor: pointer;
  transition: all var(--dur) var(--ease) !important;
}
.stage-chip.active {
  background: var(--graphite) !important;
  border-color: var(--graphite) !important;
  color: #fff !important;
}

/* Grade de specs */
.order-spec-grid {
  display: grid !important;
  gap: 8px !important;
  grid-template-columns: repeat(3, 1fr) !important;
  margin-top: 10px !important;
}
.order-spec-grid span {
  background: var(--s2) !important;
  border: 1px solid var(--bd) !important;
  border-radius: var(--r-md) !important;
  color: var(--t2) !important;
  display: grid !important;
  font-size: 12px !important;
  gap: 3px !important;
  padding: 8px !important;
}
.order-spec-grid strong {
  color: var(--t3) !important;
  display: block !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
}

/* Barra de progresso da etapa */
.os-progress-bar {
  height: 4px;
  background: var(--s3);
  border-radius: var(--r-full);
  margin-top: 10px;
  overflow: hidden;
}
.os-progress-fill {
  height: 100%;
  border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--copper), var(--gold));
  transition: width 0.5s var(--ease);
}

/* ── CLIENTES / CRM ────────────────────────────────────────────── */

.crm-grid {
  display: grid !important;
  gap: 14px !important;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)) !important;
}

.crm-card {
  background: var(--s1) !important;
  border: 1px solid var(--bd) !important;
  border-left: 4px solid var(--copper) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--sh-sm) !important;
  cursor: pointer;
  padding: 16px !important;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease) !important;
}
.crm-card:hover { box-shadow: var(--sh-md) !important; transform: translateY(-2px) !important; }
.crm-card.active {
  border-color: var(--copper2) !important;
  box-shadow: 0 0 0 2px rgba(194,84,26,.16), var(--sh-md) !important;
}
.crm-card.inactive { border-left-color: var(--bd2) !important; opacity: 0.72; }

.crm-card-head small { color: var(--t3) !important; font-size: 10px !important; font-weight: 700 !important; text-transform: uppercase; }
.crm-card-head h2 { color: var(--t1) !important; font-size: 14.5px !important; font-weight: 700 !important; }
.crm-card-head span { color: var(--t3) !important; font-size: 12px !important; }

.crm-badges { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }

.crm-kpis {
  display: grid !important;
  gap: 8px !important;
  grid-template-columns: repeat(4, 1fr) !important;
  margin-top: 12px !important;
}
.crm-kpis span {
  background: var(--s2) !important;
  border: 1px solid var(--bd) !important;
  border-radius: var(--r-md) !important;
  color: var(--t2) !important;
  display: grid !important;
  font-size: 11px !important;
  gap: 2px !important;
  padding: 8px !important;
}
.crm-kpis strong { color: var(--t1) !important; font-size: 15px !important; font-weight: 700 !important; }

.crm-details { color: var(--t3) !important; font-size: 12px !important; line-height: 1.6; margin-top: 8px; }

/* ── MODAL MODERNO ────────────────────────────────────────────── */
.modern-modal-overlay {
  align-items: flex-start;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  bottom: 0; left: 0; right: 0; top: 0;
  display: flex;
  justify-content: center;
  padding: 5vh 16px;
  position: fixed;
  z-index: 100;
  animation: fadeUp 0.2s var(--ease) both;
}
.modern-modal {
  background: var(--s1);
  border: 1px solid var(--bd);
  border-radius: 18px;
  box-shadow: var(--sh-lg);
  display: flex;
  flex-direction: column;
  max-height: 88vh;
  overflow: hidden;
  width: 100%;
}
.modern-modal.sm { max-width: 520px; }
.modern-modal.md { max-width: 720px; }
.modern-modal.lg { max-width: 960px; }

.modal-header {
  align-items: flex-start;
  border-bottom: 1px solid var(--bd);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 20px 24px;
}
.modal-header h2 { color: var(--t1); font-size: 17px; font-weight: 800; margin: 0; }
.modal-header p  { color: var(--t3); font-size: 12px; margin: 4px 0 0; }
.modal-close {
  align-items: center;
  background: var(--s2);
  border: 1px solid var(--bd);
  border-radius: var(--r-sm);
  color: var(--t3);
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  font-size: 18px;
  height: 32px;
  justify-content: center;
  line-height: 1;
  min-height: unset;
  padding: 0;
  transition: all var(--dur) var(--ease);
  width: 32px;
}
.modal-close:hover { background: var(--s3); color: var(--t1); }

.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}
.modal-footer {
  border-top: 1px solid var(--bd);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 16px 24px;
}

/* Grid de detalhe dentro do modal */
.modal-detail-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, 1fr);
}
.modal-detail-grid.cols3 { grid-template-columns: repeat(3, 1fr); }
.modal-detail-cell {
  background: var(--s2);
  border: 1px solid var(--bd);
  border-radius: var(--r-md);
  padding: 10px;
}
.modal-detail-cell label {
  color: var(--t3);
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 3px;
  text-transform: uppercase;
}
.modal-detail-cell span, .modal-detail-cell input, .modal-detail-cell select {
  color: var(--t1);
  display: block;
  font-size: 13px;
  font-weight: 600;
  min-height: unset !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  width: 100%;
}
.modal-detail-cell input:focus, .modal-detail-cell select:focus {
  background: var(--s1) !important;
  border: 1px solid var(--copper) !important;
  border-radius: var(--r-sm) !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 2px 6px !important;
}

/* Etapas do modal de O.S. */
.os-stage-progress {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 14px 0;
  overflow-x: auto;
  padding-bottom: 4px;
}
.os-stage-pip {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex-shrink: 0;
}
.os-stage-dot {
  border-radius: var(--r-full);
  height: 10px;
  width: 10px;
  background: var(--bd2);
  transition: background var(--dur) var(--ease);
}
.os-stage-dot.done    { background: var(--green); }
.os-stage-dot.current { background: var(--copper); box-shadow: 0 0 0 3px rgba(194,84,26,.25); }
.os-stage-pip span { color: var(--t4); font-size: 9px; text-align: center; white-space: nowrap; max-width: 48px; overflow: hidden; text-overflow: ellipsis; }
.os-stage-line { flex: 1; height: 2px; background: var(--bd); margin-bottom: 14px; border-radius: var(--r-full); }
.os-stage-line.done { background: var(--green); }

/* Timeline no modal */
.modal-timeline { display: grid; gap: 10px; max-height: 260px; overflow-y: auto; }
.modal-timeline-item {
  background: var(--s2);
  border: 1px solid var(--bd);
  border-left: 3px solid var(--copper);
  border-radius: var(--r-md);
  padding: 10px 12px;
}
.modal-timeline-item.system { border-left-color: var(--yellow); }
.modal-timeline-meta { color: var(--t3); font-size: 11px; margin-bottom: 3px; }
.modal-timeline-msg  { color: var(--t1); font-size: 13px; }

/* Form dentro do modal */
.modal-form { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
.modal-form .span2 { grid-column: span 2; }
.modal-form label { color: var(--t2); display: grid; font-size: 12px; font-weight: 600; gap: 5px; }
.modal-form input, .modal-form select, .modal-form textarea {
  background: var(--s1) !important;
  border: 1px solid var(--bd2) !important;
  border-radius: var(--r-md) !important;
  color: var(--t1) !important;
  font-size: 13px;
  min-height: 38px !important;
  padding: 0 10px !important;
  width: 100%;
}
.modal-form textarea { min-height: 72px !important; padding-top: 8px !important; resize: vertical; }
.modal-form input:focus, .modal-form select:focus, .modal-form textarea:focus {
  border-color: var(--copper) !important;
  box-shadow: 0 0 0 3px rgba(194,84,26,0.12) !important;
  outline: none !important;
}

/* Botão CNPJ lookup */
.cnpj-row { display: flex; gap: 8px; }
.cnpj-row input { flex: 1; }
.btn-cnpj-lookup {
  background: var(--copper) !important;
  border-radius: var(--r-md) !important;
  color: #fff !important;
  flex-shrink: 0;
  font-size: 12px !important;
  height: 38px !important;
  min-height: unset !important;
  padding: 0 14px !important;
  white-space: nowrap;
}
.btn-cnpj-lookup:disabled { opacity: 0.6; cursor: wait; }

/* Status banner do CNPJ lookup */
.cnpj-status {
  align-items: center;
  border-radius: var(--r-md);
  display: flex;
  font-size: 12px;
  font-weight: 600;
  gap: 8px;
  padding: 8px 12px;
}
.cnpj-status.loading { background: #fef3c7; color: #b45309; }
.cnpj-status.success { background: #dcfae6; color: #067647; }
.cnpj-status.error   { background: #fee2e2; color: #dc2626; }

/* ── MAPA DE PRAZOS KANBAN ─────────────────────────────────────── */
.deadline-kanban {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  margin-top: 14px;
}
.deadline-col { background: var(--s2); border: 1px solid var(--bd); border-radius: var(--r-lg); overflow: hidden; }
.deadline-col-header {
  font-size: 11px;
  font-weight: 800;
  padding: 10px 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.deadline-col-header.OVERDUE  { background: #fee2e2; color: #dc2626; }
.deadline-col-header.DUE_TODAY{ background: #fef3c7; color: #b45309; }
.deadline-col-header.DUE_SOON { background: #dbeafe; color: #1d4ed8; }
.deadline-col-header.ON_TRACK { background: #dcfae6; color: #067647; }
.deadline-col-header.DELIVERED{ background: #f3f4f6; color: #374151; }
.deadline-col-body { display: grid; gap: 6px; padding: 8px; }
.deadline-mini-card {
  background: var(--s1);
  border: 1px solid var(--bd);
  border-radius: var(--r-md);
  font-size: 12px;
  padding: 8px 10px;
  cursor: pointer;
  transition: box-shadow var(--dur) var(--ease);
}
.deadline-mini-card:hover { box-shadow: var(--sh-sm); }
.deadline-mini-card strong { color: var(--t1); display: block; font-size: 11px; font-weight: 700; }
.deadline-mini-card span   { color: var(--t3); display: block; font-size: 10px; margin-top: 2px; }

/* ================================================================
   PASSO 3 — CALCULADORA DIMENSIONAL + ETIQUETAS + WHATSAPP
   ================================================================ */

/* ── Botão flutuante de ações (FAB) ──────────────────────────── */
#modernFAB {
  bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: fixed;
  right: 24px;
  z-index: 90;
  align-items: flex-end;
}
.fab-main {
  align-items: center;
  background: var(--copper) !important;
  border: none !important;
  border-radius: var(--r-full) !important;
  box-shadow: 0 6px 20px rgba(194,84,26,.40) !important;
  color: #fff !important;
  cursor: pointer;
  display: flex;
  font-size: 22px;
  height: 52px !important;
  justify-content: center;
  min-height: unset !important;
  padding: 0 !important;
  transition: all 0.2s var(--ease) !important;
  width: 52px;
}
.fab-main:hover { box-shadow: 0 8px 28px rgba(194,84,26,.55) !important; transform: scale(1.08) !important; }
.fab-main.open  { transform: rotate(45deg) !important; }
.fab-actions    { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.fab-action {
  align-items: center;
  background: var(--s1) !important;
  border: 1px solid var(--bd) !important;
  border-radius: var(--r-full) !important;
  box-shadow: var(--sh-md) !important;
  color: var(--t1) !important;
  cursor: pointer;
  display: flex;
  font-size: 13px !important;
  font-weight: 700 !important;
  gap: 8px;
  height: 40px !important;
  min-height: unset !important;
  padding: 0 16px 0 12px !important;
  transition: all 0.18s var(--ease) !important;
  white-space: nowrap;
  animation: fadeUp 0.18s var(--ease) both;
}
.fab-action:hover { background: var(--s2) !important; transform: translateX(-4px) !important; }
.fab-action-icon { font-size: 18px; }

/* ── Calculadora Dimensional ─────────────────────────────────── */
.calc-layout {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr 1fr;
}
.calc-produto-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 14px;
}
.calc-produto-btn {
  align-items: flex-start;
  background: var(--s2) !important;
  border: 2px solid var(--bd) !important;
  border-radius: var(--r-md) !important;
  color: var(--t1) !important;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: unset !important;
  padding: 10px 12px !important;
  text-align: left;
  transition: all 0.16s var(--ease) !important;
}
.calc-produto-btn:hover  { border-color: var(--copper) !important; background: var(--s3) !important; }
.calc-produto-btn.active { border-color: var(--copper) !important; background: rgba(194,84,26,.08) !important; }
.calc-produto-btn strong { color: var(--t1); font-size: 12px; font-weight: 700; }
.calc-produto-btn span   { color: var(--t3); font-size: 10px; }

.calc-dim-grid { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; margin: 12px 0; }
.calc-dim-grid label { color: var(--t2); font-size: 11px; font-weight: 700; display: grid; gap: 4px; }
.calc-dim-grid input {
  background: var(--s1) !important;
  border: 1px solid var(--bd2) !important;
  border-radius: var(--r-md) !important;
  color: var(--t1) !important;
  font-family: 'Courier New', monospace;
  font-size: 18px !important;
  font-weight: 800 !important;
  min-height: 44px !important;
  padding: 0 10px !important;
  text-align: center;
}
.calc-dim-grid input:focus {
  border-color: var(--copper) !important;
  box-shadow: 0 0 0 3px rgba(194,84,26,.12) !important;
  outline: none !important;
}

/* Unidade toggle mm/cm */
.unit-toggle { display: flex; background: var(--s2); border: 1px solid var(--bd); border-radius: var(--r-md); overflow: hidden; width: fit-content; }
.unit-toggle button {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--t3) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  min-height: unset !important;
  padding: 5px 14px !important;
  transform: none !important;
  transition: background 0.15s !important;
}
.unit-toggle button.active { background: var(--copper) !important; color: #fff !important; }

/* Preview do produto */
.calc-preview-box {
  align-items: center;
  background: var(--s2);
  border: 1px dashed var(--bd2);
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 80px;
  padding: 12px;
  text-align: center;
}
.calc-preview-frame {
  border: 4px solid var(--copper);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s var(--ease);
}
.calc-preview-label { color: var(--t3); font-size: 11px; margin-top: 6px; }

/* Slider de margem */
.margin-row { align-items: center; display: flex; gap: 10px; margin-top: 6px; }
.margin-row input[type=range] {
  accent-color: var(--copper);
  border: none !important;
  box-shadow: none !important;
  cursor: pointer;
  flex: 1;
  height: 4px !important;
  min-height: unset !important;
  padding: 0 !important;
}
.margin-badge { background: var(--copper); border-radius: var(--r-full); color: #fff; font-size: 13px; font-weight: 800; padding: 3px 10px; flex-shrink: 0; }

/* Resultados da calculadora */
.calc-result-grid { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.calc-result-card {
  background: var(--s2);
  border: 1px solid var(--bd);
  border-radius: var(--r-md);
  padding: 12px;
  text-align: center;
}
.calc-result-card.destaque {
  background: rgba(194,84,26,.08);
  border-color: var(--copper);
}
.calc-result-card label { color: var(--t3); display: block; font-size: 9px; font-weight: 700; letter-spacing: .06em; margin-bottom: 5px; text-transform: uppercase; }
.calc-result-card strong { color: var(--t1); display: block; font-size: 20px; font-weight: 900; }
.calc-result-card.destaque strong { color: var(--copper); font-size: 24px; }
.calc-result-card span { color: var(--t3); font-size: 11px; }

/* Barra custo vs lucro */
.calc-profit-bar { border-radius: var(--r-full); display: flex; height: 10px; margin-top: 14px; overflow: hidden; }
.calc-profit-bar .cost-fill  { background: var(--red);   border-radius: var(--r-full) 0 0 var(--r-full); height: 100%; transition: width 0.4s var(--ease); }
.calc-profit-bar .profit-fill{ background: var(--green); border-radius: 0 var(--r-full) var(--r-full) 0; flex: 1;        height: 100%; }

/* ── Etiqueta Industrial Code 39 ─────────────────────────────── */
.etiqueta-preview {
  background: #fff;
  border: 2px solid var(--bd);
  border-radius: var(--r-md);
  color: #000;
  font-family: 'Courier New', monospace;
  overflow: hidden;
  width: 360px;
  max-width: 100%;
}
[data-theme="dark"] .etiqueta-preview { border-color: var(--bd2); }
.etiqueta-header {
  align-items: center;
  background: #0d1117;
  color: #fff;
  display: flex;
  gap: 8px;
  padding: 8px 12px;
}
.etiqueta-header .brand { font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.etiqueta-header .tipo  { background: rgba(194,84,26,.8); border-radius: 3px; font-size: 9px; font-weight: 700; margin-left: auto; padding: 2px 6px; text-transform: uppercase; }
.etiqueta-body          { padding: 10px 12px; }
.etiqueta-material      { font-size: 15px; font-weight: 900; color: #111; text-transform: uppercase; }
.etiqueta-medida        { color: #555; font-size: 13px; font-weight: 700; margin-top: 2px; }
.etiqueta-details       { display: grid; gap: 6px; grid-template-columns: 1fr 1fr; margin-top: 8px; }
.etiqueta-detail        { background: #f6f8fa; border: 1px solid #e5e7eb; border-radius: 4px; padding: 5px 7px; }
.etiqueta-detail label  { color: #888; display: block; font-size: 8px; font-weight: 700; text-transform: uppercase; }
.etiqueta-detail span   { color: #111; font-size: 11px; font-weight: 700; }
.etiqueta-barcode       { border-top: 1px solid #e5e7eb; display: flex; justify-content: center; padding: 8px 12px 10px; }
.etiqueta-barcode svg   { max-width: 100%; }

/* Botão imprimir etiqueta */
.btn-print-etiqueta {
  align-items: center;
  background: var(--s2) !important;
  border: 1px solid var(--bd) !important;
  border-radius: var(--r-md) !important;
  color: var(--t2) !important;
  cursor: pointer;
  display: flex;
  font-size: 12px !important;
  font-weight: 700 !important;
  gap: 6px;
  height: 36px !important;
  min-height: unset !important;
  padding: 0 14px !important;
  transition: all 0.16s var(--ease) !important;
}
.btn-print-etiqueta:hover { background: var(--graphite) !important; color: #fff !important; border-color: var(--graphite) !important; }

/* Botão WhatsApp */
.btn-whatsapp {
  align-items: center;
  background: #25D366 !important;
  border: none !important;
  border-radius: var(--r-md) !important;
  color: #fff !important;
  cursor: pointer;
  display: flex;
  font-size: 13px !important;
  font-weight: 700 !important;
  gap: 6px;
  height: 36px !important;
  min-height: unset !important;
  padding: 0 16px !important;
  transition: all 0.16s var(--ease) !important;
}
.btn-whatsapp:hover { background: #1ebe5d !important; transform: translateY(-1px) !important; box-shadow: 0 4px 12px rgba(37,211,102,.30) !important; }

/* CSS @media print para etiqueta */
@media print {
  #modernFAB, #modernSidebar, .modern-topbar, .global-action-bar { display: none !important; }
  body { background: #fff !important; }
  .etiqueta-print-only { display: block !important; }
  .etiqueta-print-only * { color: #000 !important; }
}
.etiqueta-print-only { display: none; }

/* ================================================================
   PASSO 4 — IMPORTAÇÃO DE NOTA FISCAL / DANFE
   ================================================================ */

/* ── Drop Zone ────────────────────────────────────────────────── */
.nf-drop-zone {
  align-items: center;
  background: var(--s2);
  border: 2px dashed var(--bd2);
  border-radius: var(--r-lg);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
  min-height: 160px;
  padding: 24px;
  text-align: center;
  transition: all 0.2s var(--ease);
  position: relative;
}
.nf-drop-zone:hover, .nf-drop-zone.drag-over {
  background: rgba(194,84,26,.06);
  border-color: var(--copper);
  border-style: solid;
}
.nf-drop-zone input[type=file] {
  inset: 0;
  cursor: pointer;
  min-height: unset !important;
  opacity: 0;
  padding: 0 !important;
  position: absolute;
}
.nf-drop-icon  { font-size: 40px; line-height: 1; }
.nf-drop-title { color: var(--t1); font-size: 15px; font-weight: 700; }
.nf-drop-sub   { color: var(--t3); font-size: 12px; }

/* ── Status banner ────────────────────────────────────────────── */
.nf-status {
  align-items: flex-start;
  border-radius: var(--r-md);
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
}
.nf-status.loading  { background: #fef3c7; color: #b45309; border: 1px solid #fde68a; }
.nf-status.success  { background: #dcfae6; color: #067647; border: 1px solid #bbf7d0; }
.nf-status.error    { background: #fee2e2; color: #dc2626; border: 1px solid #fecaca; }
.nf-status.warning  { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }
.nf-status-icon     { flex-shrink: 0; font-size: 18px; }

/* ── Wizard de etapas ─────────────────────────────────────────── */
.nf-steps {
  display: flex;
  gap: 0;
  margin-bottom: 20px;
}
.nf-step {
  align-items: center;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 5px;
  position: relative;
}
.nf-step::after {
  background: var(--bd);
  content: '';
  height: 2px;
  position: absolute;
  right: 0;
  top: 14px;
  width: 50%;
}
.nf-step:first-child::before { display: none; }
.nf-step::before {
  background: var(--bd);
  content: '';
  height: 2px;
  left: 0;
  position: absolute;
  top: 14px;
  width: 50%;
}
.nf-step:last-child::after { display: none; }
.nf-step-dot {
  align-items: center;
  border: 2px solid var(--bd);
  border-radius: var(--r-full);
  display: flex;
  font-size: 11px;
  font-weight: 800;
  height: 28px;
  justify-content: center;
  position: relative;
  width: 28px;
  z-index: 1;
  background: var(--s1);
  color: var(--t3);
  transition: all 0.2s var(--ease);
}
.nf-step.done   .nf-step-dot { background: var(--green);  border-color: var(--green);  color: #fff; }
.nf-step.done   ::before, .nf-step.done   ::after { background: var(--green); }
.nf-step.active .nf-step-dot { background: var(--copper); border-color: var(--copper); color: #fff; }
.nf-step-label  { color: var(--t3); font-size: 10px; font-weight: 700; text-align: center; text-transform: uppercase; letter-spacing: .04em; }
.nf-step.active .nf-step-label { color: var(--copper); }
.nf-step.done   .nf-step-label { color: var(--green); }

/* ── Cabeçalho da NF extraído ─────────────────────────────────── */
.nf-header-grid {
  background: var(--s2);
  border: 1px solid var(--bd);
  border-radius: var(--r-lg);
  display: grid;
  gap: 0;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 16px;
  overflow: hidden;
}
.nf-header-cell {
  border-right: 1px solid var(--bd);
  padding: 10px 14px;
}
.nf-header-cell:last-child { border-right: none; }
.nf-header-cell label { color: var(--t3); display: block; font-size: 9px; font-weight: 700; letter-spacing: .06em; margin-bottom: 3px; text-transform: uppercase; }
.nf-header-cell span  { color: var(--t1); font-size: 13px; font-weight: 700; }

/* ── Validação CNPJ ──────────────────────────────────────────── */
.nf-cnpj-check {
  border-radius: var(--r-md);
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
  padding: 12px 16px;
}
.nf-cnpj-check.match    { background: rgba(5,150,105,.08); border: 1px solid rgba(5,150,105,.3); }
.nf-cnpj-check.mismatch { background: rgba(217,119,6,.08); border: 1px solid rgba(217,119,6,.3); }
.nf-cnpj-icon  { font-size: 20px; flex-shrink: 0; }
.nf-cnpj-texts { flex: 1; min-width: 0; }
.nf-cnpj-texts strong { color: var(--t1); display: block; font-size: 13px; font-weight: 700; }
.nf-cnpj-texts span   { color: var(--t3); font-size: 12px; display: block; margin-top: 3px; }

/* ── Tabela de itens ─────────────────────────────────────────── */
.nf-items-table { border-collapse: collapse; width: 100%; }
.nf-items-table th {
  background: var(--s2);
  border-bottom: 1px solid var(--bd);
  color: var(--t3);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  padding: 8px 10px;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
.nf-items-table td {
  border-bottom: 1px solid var(--bd);
  color: var(--t1);
  font-size: 12px;
  padding: 8px 10px;
  vertical-align: top;
}
.nf-items-table tr:last-child td { border-bottom: none; }
.nf-items-table tr:hover td { background: var(--s2); }
.nf-items-table input,
.nf-items-table select {
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: var(--r-sm) !important;
  font-size: 12px !important;
  min-height: 28px !important;
  padding: 2px 6px !important;
  width: 100%;
}
.nf-items-table input:focus,
.nf-items-table select:focus {
  background: var(--s1) !important;
  border-color: var(--copper) !important;
  box-shadow: 0 0 0 2px rgba(194,84,26,.12) !important;
  outline: none !important;
}
.nf-cat-badge {
  border-radius: var(--r-sm);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  white-space: nowrap;
}
.nf-cat-MP    { background: #dbeafe; color: #1d4ed8; }
.nf-cat-CONS  { background: #fef3c7; color: #b45309; }
.nf-cat-TOOL  { background: #f3e8ff; color: #7c3aed; }
.nf-cat-OTHER { background: var(--s3); color: var(--t3); }
.nf-ignore-row td { opacity: 0.4; text-decoration: line-through; }

/* ── Formulário financeiro ───────────────────────────────────── */
.nf-finance-toggle {
  align-items: center;
  background: var(--s2);
  border: 1px solid var(--bd);
  border-radius: var(--r-md);
  cursor: pointer;
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  margin-bottom: 12px;
  user-select: none;
}
.nf-finance-toggle input[type=checkbox] {
  border: none !important;
  box-shadow: none !important;
  height: 18px !important;
  min-height: unset !important;
  padding: 0 !important;
  width: 18px;
}
.nf-finance-toggle strong { color: var(--t1); font-size: 13px; font-weight: 700; }
.nf-finance-toggle span   { color: var(--t3); font-size: 12px; }
.nf-finance-form { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.nf-finance-form label { color: var(--t2); display: grid; font-size: 12px; font-weight: 600; gap: 4px; }
.nf-finance-form input,
.nf-finance-form select {
  background: var(--s1) !important;
  border: 1px solid var(--bd2) !important;
  border-radius: var(--r-md) !important;
  color: var(--t1) !important;
  font-size: 13px !important;
  min-height: 36px !important;
  padding: 0 10px !important;
}
.nf-finance-form input:focus,
.nf-finance-form select:focus {
  border-color: var(--copper) !important;
  box-shadow: 0 0 0 3px rgba(194,84,26,.12) !important;
  outline: none !important;
}
.nf-finance-form .span2 { grid-column: span 2; }

/* ── Resumo de confirmação ───────────────────────────────────── */
.nf-confirm-card {
  background: var(--s2);
  border: 1px solid var(--bd);
  border-radius: var(--r-md);
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  align-items: flex-start;
}
.nf-confirm-icon { flex-shrink: 0; font-size: 20px; }
.nf-confirm-title { color: var(--t1); font-size: 13px; font-weight: 700; }
.nf-confirm-desc  { color: var(--t3); font-size: 12px; margin-top: 2px; }

/* ── Tela de sucesso ─────────────────────────────────────────── */
.nf-success-screen {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  text-align: center;
}
.nf-success-icon { font-size: 64px; line-height: 1; }
.nf-success-title { color: var(--t1); font-size: 20px; font-weight: 800; }
.nf-success-sub   { color: var(--t3); font-size: 13px; }

/* ================================================================
   PASSO 5 — DARK MODE COMPLETO + RESPONSIVIDADE MOBILE
   Cobre os 73 classes de módulos com cores hardcoded
   ================================================================ */

/* ── 1. MÓDULO TABLE (Financeiro, Compras, Qualidade, Auditoria) ─ */
.table-wrap { border-radius: var(--r-md); border: 1px solid var(--bd) !important; }
.module-table { background: var(--s1); }
.module-table th {
  background: var(--s2) !important;
  color: var(--t3) !important;
  border-bottom: 1px solid var(--bd) !important;
  font-size: 11px !important;
  letter-spacing: .04em;
}
.module-table td {
  border-bottom: 1px solid var(--bd) !important;
  color: var(--t1) !important;
  font-size: 13px !important;
}
.module-table td small { color: var(--t3) !important; }
.module-table tbody tr:hover { background: var(--s2) !important; }
.table-alert { background: #fffbeb !important; }
[data-theme="dark"] .table-alert { background: rgba(245,158,11,.08) !important; }
.module-table tr.selected-row { box-shadow: inset 4px 0 0 var(--copper) !important; }

/* ── 2. ESTOQUE ──────────────────────────────────────────────────── */
.stock-material-card {
  background: var(--s1) !important;
  border: 1px solid var(--bd) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--sh-sm) !important;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease) !important;
}
.stock-material-card:hover { box-shadow: var(--sh-md) !important; transform: translateY(-2px) !important; }
.stock-material-card.low  { background: rgba(220,38,38,.06) !important; border-left-color: var(--red) !important; }
.stock-material-head small { color: var(--t3) !important; }
.stock-material-head strong { color: var(--t1) !important; }
.stock-material-head span   { color: var(--t2) !important; }
.stock-card-kpis span {
  background: var(--s2) !important;
  border: 1px solid var(--bd) !important;
  border-radius: var(--r-md) !important;
  color: var(--t2) !important;
}
.stock-card-kpis strong { color: var(--t1) !important; }
.stock-view-tabs {
  background: var(--s2) !important;
  border: 1px solid var(--bd) !important;
  border-radius: var(--r-lg) !important;
  gap: 6px;
  padding: 6px;
}
.stock-view-tabs button { background: transparent !important; border-color: transparent !important; color: var(--t2) !important; height: 32px; font-size: 13px; }
.stock-view-tabs button:hover { background: var(--s3) !important; box-shadow: none !important; transform: none !important; }
.stock-view-tabs button.active { background: var(--graphite) !important; border-color: transparent !important; color: #fff !important; }
.stock-report-grid article, .standard-report-grid article {
  background: var(--s1) !important;
  border: 1px solid var(--bd) !important;
  border-radius: var(--r-lg) !important;
}
.stock-report-grid span, .standard-report-grid span { color: var(--t3) !important; }
.stock-report-grid strong, .standard-report-grid strong { color: var(--t1) !important; font-weight: 800 !important; }
.stock-report-grid small, .standard-report-grid small { color: var(--t3) !important; }
.stock-alerts, .purchase-alerts, .quality-alerts, .finance-alerts { display: grid !important; gap: 8px !important; }
.stock-alert, .purchase-alert, .quality-alert, .finance-alert { border-radius: var(--r-md) !important; padding: 12px !important; }
.stock-alert.danger,.purchase-alert.danger,.quality-alert.danger,.finance-alert.danger {
  background: rgba(220,38,38,.08) !important;
  border: 1px solid rgba(220,38,38,.25) !important;
  color: var(--red) !important;
}
.stock-alert.warning,.purchase-alert.warning,.quality-alert.warning,.finance-alert.warning {
  background: rgba(217,119,6,.08) !important;
  border: 1px solid rgba(217,119,6,.25) !important;
  color: var(--yellow) !important;
}

/* ── 3. FINANCEIRO ───────────────────────────────────────────────── */
.finance-action-header {
  background: var(--graphite) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-left: 4px solid var(--copper) !important;
  border-radius: var(--r-lg) !important;
  color: var(--text-inv, #f8fafc);
  padding: 16px;
}
.finance-action-header span  { color: var(--copper2) !important; font-size: 10px !important; font-weight: 800 !important; text-transform: uppercase; display: block; margin-bottom: 4px; }
.finance-action-header strong{ color: #f8fafc !important; display: block; font-size: 20px !important; }
.finance-action-header small { color: rgba(255,255,255,.45) !important; display: block; line-height: 1.45; margin-top: 4px; }
.finance-action-header button { height: 34px !important; }
.finance-chart { align-items: end; display: grid; gap: 12px; grid-auto-flow: column; min-height: 190px; overflow-x: auto; }
.finance-chart article strong { color: var(--t2) !important; font-size: 13px !important; }
.finance-chart article small  { color: var(--t3) !important; }
.dual-bars { background: var(--s3) !important; border-radius: var(--r-md) !important; }
.dual-bars span { background: var(--green) !important; border-radius: 4px 4px 2px 2px; display: block; min-height: 4px; }
.dual-bars i    { background: var(--red)   !important; border-radius: 4px 4px 2px 2px; display: block; min-height: 4px; }
.dre-grid article { background: var(--s2) !important; border: 1px solid var(--bd) !important; border-radius: var(--r-lg) !important; padding: 14px; }
.dre-grid strong  { color: var(--t1) !important; }
.dre-grid span    { color: var(--t3) !important; }
.dre-grid b       { color: var(--t2) !important; font-size: 16px; }

/* ── 4. PRODUÇÃO ─────────────────────────────────────────────────── */
.machine-card {
  background: var(--s2) !important;
  border: 1px solid var(--bd) !important;
  border-left: 4px solid var(--brand-steel, #687782) !important;
  border-radius: var(--r-lg) !important;
  padding: 12px;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease) !important;
}
.machine-card:hover { box-shadow: var(--sh-md) !important; transform: translateY(-1px) !important; }
.machine-card.IN_USE      { border-left-color: var(--yellow) !important; background: rgba(217,119,6,.07) !important; }
.machine-card.AVAILABLE   { border-left-color: var(--green)  !important; }
.machine-card.MAINTENANCE,
.machine-card.INACTIVE    { border-left-color: var(--red)    !important; background: rgba(220,38,38,.07) !important; }
.machine-card small { color: var(--t3) !important; display: block; margin-top: 2px; }
.production-step-input {
  background: var(--s2) !important;
  border: 1px solid var(--bd) !important;
  border-radius: var(--r-md) !important;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(160px,1fr) 90px 120px 80px;
  padding: 8px;
}
.inline-shopfloor-form input,
.inline-shopfloor-form select { min-height: 34px !important; padding: 0 9px !important; }
.inline-shopfloor-form button { min-height: 34px !important; }
.inline-shopfloor-form small  { color: var(--t3) !important; }
.progress { background: var(--s3) !important; border-radius: var(--r-full) !important; height: 8px; overflow: hidden; }
.progress span { background: linear-gradient(90deg, var(--green), var(--gold)) !important; display: block; height: 100%; }
.layout-standard-actionbar {
  background: var(--graphite) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-left: 4px solid var(--copper) !important;
  border-radius: var(--r-lg) !important;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
}
.layout-standard-actionbar .ghost,
.layout-standard-actionbar a.download {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.85) !important;
}
.layout-standard-actionbar .ghost:hover { background: rgba(255,255,255,.14) !important; color: #fff !important; box-shadow: none !important; transform: none !important; }
.module-notice { border-radius: var(--r-md) !important; font-weight: 700 !important; padding: 12px 16px !important; }
.module-notice.success { background: rgba(5,150,105,.1)  !important; border: 1px solid rgba(5,150,105,.25)   !important; color: var(--green) !important; }
.module-notice.error   { background: rgba(220,38,38,.1)  !important; border: 1px solid rgba(220,38,38,.25)   !important; color: var(--red)   !important; }

/* ── 5. QUALIDADE ────────────────────────────────────────────────── */
.quality-check-item {
  background: var(--s2) !important;
  border: 1px solid var(--bd) !important;
  border-radius: var(--r-md) !important;
  padding: 10px;
}
.quality-check-item strong { color: var(--t1) !important; }
.quality-check-item small  { color: var(--t3) !important; }
.quality-form .form-section-title {
  background: var(--s2) !important;
  border: 1px solid var(--bd) !important;
  border-radius: var(--r-md) !important;
  color: var(--t2) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  padding: 9px 12px !important;
  text-transform: uppercase;
}
.quality-evidence-grid article { background: var(--s2) !important; border: 1px solid var(--bd) !important; border-radius: var(--r-lg) !important; }
.quality-evidence-grid img    { background: var(--s3) !important; border-radius: var(--r-md) !important; }
.quality-evidence-grid a      { color: var(--copper) !important; font-weight: 700 !important; text-decoration: none; }

/* ── 6. COMPRAS ──────────────────────────────────────────────────── */
.purchase-step {
  background: var(--s2) !important;
  border: 1px solid var(--bd) !important;
  border-radius: var(--r-lg) !important;
  gap: 5px;
  padding: 10px;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease) !important;
}
.purchase-step:hover { box-shadow: var(--sh-md) !important; transform: translateY(-1px) !important; }
.purchase-step span  { align-items: center; background: var(--graphite) !important; border-radius: var(--r-full) !important; color: #fff !important; display: inline-flex; font-size: 12px; font-weight: 800; height: 26px; justify-content: center; width: 26px; }
.purchase-step strong{ color: var(--t2) !important; font-size: 13px; }
.purchase-step b     { color: var(--t1) !important; font-size: 20px; }
.purchase-item-grid  { background: var(--s2) !important; border: 1px solid var(--bd) !important; border-radius: var(--r-md) !important; display: grid; gap: 8px; padding: 8px; }
.purchase-item-grid input,
.purchase-item-grid select { min-height: 34px !important; padding: 0 9px !important; }
.item-list span { background: var(--s2) !important; border: 1px solid var(--bd) !important; border-radius: var(--r-md) !important; color: var(--t2) !important; display: grid; gap: 2px; padding: 7px; }
.item-list strong { color: var(--t1) !important; font-size: 12px; }

/* ── 7. TIMELINE / UPLOADS ───────────────────────────────────────── */
.timeline-feed { display: grid !important; gap: 10px !important; max-height: 620px; overflow: auto; }
.timeline-item {
  background: var(--s2) !important;
  border: 1px solid var(--bd) !important;
  border-left: 4px solid var(--copper) !important;
  border-radius: var(--r-lg) !important;
  display: grid;
  gap: 6px;
  padding: 12px;
}
.timeline-item.system  { border-left-color: var(--yellow) !important; }
.origin-badge { background: var(--s3) !important; border-radius: var(--r-full) !important; color: var(--t2) !important; display: inline-flex; font-size: 11px; font-weight: 700; margin-left: 6px; padding: 2px 8px; }
.origin-badge.whatsapp{ background: var(--c-success-bg, #dcfae6) !important; color: var(--green) !important; }
.origin-badge.portal  { background: var(--c-info-bg,   #dbeafe) !important; color: var(--blue)  !important; }
.origin-badge.system  { background: rgba(217,119,6,.12) !important;          color: var(--yellow)!important; }
.upload-thumb      { background: var(--s3) !important; border-radius: var(--r-lg) !important; object-fit: cover; width: 100%; }
.upload-file-thumb { border: 2px dashed var(--bd2) !important; border-radius: var(--r-lg) !important; color: var(--t2) !important; display: grid; justify-items: center; padding: 14px; text-align: center; }
.upload-file-thumb strong { color: var(--red) !important; font-size: 28px; }
.upload-file-thumb small  { color: var(--t3) !important; overflow-wrap: anywhere; }

/* ── 8. STATUS PILLS E BADGES ───────────────────────────────────── */
.status-line          { color: var(--t3)    !important; font-size: 13px; min-height: 18px; }
.status-line.info,
.status-line.processing{ color: var(--blue)  !important; }
.status-line.success  { color: var(--green)  !important; font-weight: 700 !important; }
.status-line.error    { color: var(--red)    !important; }
.empty { background: var(--s1) !important; border: 2px dashed var(--bd2) !important; border-radius: var(--r-lg) !important; color: var(--t3) !important; padding: 16px; text-align: center; }

/* ── 9. LAYOUT MASTER-DETAIL ────────────────────────────────────── */
.layout-master-detail { align-items: start; display: grid; gap: 14px; grid-template-columns: minmax(0,1fr); }
.layout-master-detail:has(.detail-pane) { grid-template-columns: minmax(0,1fr) minmax(320px,380px); }
.detail-pane {
  background: var(--s1) !important;
  border: 1px solid var(--bd) !important;
  border-left: 4px solid var(--copper) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--sh-lg) !important;
  display: grid; gap: 14px; max-height: min(68vh,720px); overflow: auto; padding: 14px;
  position: sticky; top: calc(58px + 70px);
}
.detail-pane > header { align-items: flex-start; border-bottom: 1px solid var(--bd) !important; display: flex; gap: 10px; justify-content: space-between; padding-bottom: 12px; }
.detail-pane > header span   { color: var(--copper) !important; display: block; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.detail-pane > header strong { color: var(--t1) !important; display: block; overflow-wrap: anywhere; }

/* Drawer */
.ux-drawer-backdrop { background: rgba(0,0,0,.45) !important; backdrop-filter: blur(4px); }
.ux-drawer { background: var(--s1) !important; box-shadow: var(--sh-lg) !important; }
.ux-drawer-header { border-bottom: 1px solid var(--bd) !important; }
.ux-drawer-header h2 { color: var(--t1) !important; }
.ux-drawer-header p  { color: var(--t3) !important; }
.drawer-detail-grid article { background: var(--s2) !important; border: 1px solid var(--bd) !important; border-radius: var(--r-md) !important; }
.drawer-detail-grid span { color: var(--t3) !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase; }
.drawer-detail-grid strong { color: var(--t1) !important; overflow-wrap: anywhere; }

/* ── 10. MINI-CHART & BAR-ROW ────────────────────────────────────── */
.mini-chart { display: grid; gap: 10px; }
.bar-row { align-items: center; display: grid; gap: 10px; grid-template-columns: minmax(130px,.4fr) minmax(150px,1fr) minmax(64px,auto); }
.bar-row span   { color: var(--t2) !important; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-row div    { background: var(--s3) !important; border-radius: var(--r-full) !important; height: 10px; overflow: hidden; }
.bar-row i      { background: linear-gradient(90deg, var(--copper), var(--gold)) !important; border-radius: inherit; display: block; height: 100%; }
.bar-row strong { color: var(--t3) !important; font-size: 12px; text-align: right; white-space: nowrap; }

/* ── 11. FILTER BAR E FORM SECTION TITLE ────────────────────────── */
.filter-bar {
  background: var(--s2) !important;
  border: 1px solid var(--bd) !important;
  border-radius: var(--r-lg) !important;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit,minmax(140px,1fr));
  margin: 12px 0;
  padding: 12px;
}
.form-section-title {
  align-self: end;
  color: var(--t3) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .06em;
  padding-bottom: 4px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--bd) !important;
  grid-column: 1 / -1;
}
.section-head h2 { color: var(--t1) !important; font-size: 17px; font-weight: 700; }

/* ── 12. CONTEXTUAL SIDEBAR (flotante) ──────────────────────────── */
.contextual-sidebar {
  background: var(--graphite) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-left: 4px solid var(--copper) !important;
  border-radius: var(--r-lg) !important;
  bottom: 16px;
  box-shadow: var(--sh-lg) !important;
  color: #e2e8f0;
  display: grid;
  gap: 10px;
  max-height: min(72vh,620px);
  overflow: auto;
  padding: 14px;
  position: fixed;
  right: 16px;
  width: min(360px,calc(100vw - 32px));
  z-index: 60;
}
.context-sidebar-close { background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.12) !important; border-radius: var(--r-sm) !important; color: rgba(255,255,255,.8) !important; cursor: pointer; font-size: 11px; font-weight: 800; height: 28px; padding: 0 10px; min-height: unset !important; }
.context-sidebar-close:hover { background: rgba(255,255,255,.14) !important; }
.contextual-sidebar h3 { color: #fff !important; font-size: 15px; }
.contextual-sidebar p  { color: rgba(255,255,255,.55) !important; font-size: 13px; line-height: 1.4; }
.contextual-sidebar li { background: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: var(--r-md) !important; display: grid; gap: 2px; padding: 10px; }
.contextual-sidebar li span   { color: rgba(255,255,255,.5) !important; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.contextual-sidebar li strong { color: #fff !important; font-size: 14px; overflow-wrap: anywhere; }

/* ── 13. DARK MODE — OVERRIDES ESPECÍFICOS ──────────────────────── */
[data-theme="dark"] .panel        { background: var(--s1)  !important; border-color: var(--bd)  !important; }
[data-theme="dark"] .metric       { background: var(--s1)  !important; border-color: var(--bd)  !important; }
[data-theme="dark"] .card         { background: var(--s1)  !important; border-color: var(--bd)  !important; }
[data-theme="dark"] .crm-card     { background: var(--s1)  !important; border-color: var(--bd)  !important; }
[data-theme="dark"] .sector-result{ background: var(--s2)  !important; border-color: var(--bd)  !important; }
[data-theme="dark"] .sector-card  { background: var(--s1)  !important; border-color: var(--bd)  !important; }
[data-theme="dark"] .module-form input,
[data-theme="dark"] .module-form select,
[data-theme="dark"] .module-form textarea { background: var(--s1) !important; border-color: var(--bd2) !important; color: var(--t1) !important; }
[data-theme="dark"] .order-spec-grid span { background: var(--s2) !important; border-color: var(--bd) !important; color: var(--t2) !important; }
[data-theme="dark"] .crm-kpis span        { background: var(--s2) !important; border-color: var(--bd) !important; }
[data-theme="dark"] .client-fiscal-grid article { background: var(--s2) !important; border-color: var(--bd) !important; }
[data-theme="dark"] .crm-history { background: var(--s2) !important; border-color: var(--bd) !important; }
[data-theme="dark"] .crm-history span { background: var(--s1) !important; border-color: var(--bd) !important; }
[data-theme="dark"] .finance-fullscreen .module-table { min-width: 1080px; }
[data-theme="dark"] .triage-cnpj-card, [data-theme="dark"] .triage-invoice-card { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.1) !important; }
[data-theme="dark"] .access-row   { background: var(--s2) !important; border-color: var(--bd) !important; }
[data-theme="dark"] .access-row.active { background: var(--graphite) !important; }
[data-theme="dark"] .permission-group  { background: var(--s2) !important; border-color: var(--bd) !important; }
[data-theme="dark"] .permission-toggle { background: var(--s1) !important; border-color: var(--bd) !important; }
[data-theme="dark"] .user-access-card  { background: var(--s2) !important; border-color: var(--bd) !important; }
[data-theme="dark"] .ai-report-text    { background: var(--s2) !important; border-color: var(--bd) !important; color: var(--t1) !important; }
[data-theme="dark"] .ai-report-form    { background: var(--s2) !important; border-color: var(--bd) !important; }
[data-theme="dark"] .ai-preset-button  { background: var(--s1) !important; border-color: var(--bd) !important; color: var(--t1) !important; }
[data-theme="dark"] .ai-history-row    { background: var(--s2) !important; border-color: var(--bd) !important; color: var(--t1) !important; }
[data-theme="dark"] .ai-history-row.active { background: var(--graphite) !important; color: #fff !important; }
[data-theme="dark"] .ai-governance-grid article { background: var(--s2) !important; border-color: var(--bd) !important; }
[data-theme="dark"] .ai-usage-columns > div { background: var(--s2) !important; border-color: var(--bd) !important; }
[data-theme="dark"] .ai-usage-row     { background: var(--s1) !important; border-color: var(--bd) !important; }
[data-theme="dark"] .ai-error-row     { background: var(--s1) !important; border-color: var(--bd) !important; }
[data-theme="dark"] .ai-error-row.error { background: rgba(220,38,38,.08) !important; }
[data-theme="dark"] .ai-automation-card { background: var(--s2) !important; border-color: var(--bd) !important; }
[data-theme="dark"] .ai-healing-kpis article { background: var(--s2) !important; border-color: var(--bd) !important; }
[data-theme="dark"] .ai-summary-grid article { background: var(--s2) !important; border-color: var(--bd) !important; }
[data-theme="dark"] .ai-action-approval { background: rgba(245,158,11,.08) !important; border-color: rgba(245,158,11,.25) !important; }
[data-theme="dark"] .map-board { background: linear-gradient(135deg,rgba(59,130,246,.08),rgba(34,197,94,.06)) !important; border-color: var(--bd) !important; }
[data-theme="dark"] .map-point { background: var(--s1) !important; border-color: var(--bd) !important; }
[data-theme="dark"] .security-charts .panel { background: var(--s1) !important; }
[data-theme="dark"] .access-denied-panel { background: rgba(245,158,11,.08) !important; border-color: rgba(245,158,11,.25) !important; color: #fed7aa !important; }

/* ── 14. RESPONSIVIDADE MOBILE ──────────────────────────────────── */
@media (max-width: 900px) {
  /* Módulos em 1 coluna */
  .module-layout, .module-layout.wide { grid-template-columns: 1fr !important; }
  .layout-master-detail, .layout-master-detail:has(.detail-pane) { grid-template-columns: 1fr !important; }
  .detail-pane { max-height: none !important; position: static !important; }
  .stock-main-list { max-height: none !important; overflow: visible !important; }
  .stock-card-kpis { grid-template-columns: 1fr 1fr !important; }
  .drawer-detail-grid { grid-template-columns: 1fr !important; }

  /* Financeiro */
  .finance-action-header { flex-direction: column !important; align-items: flex-start !important; }
  .finance-fullscreen .module-table { min-width: 900px; }

  /* Métricas e grids */
  .metrics { grid-template-columns: repeat(2, 1fr) !important; }
  .form-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Production */
  .production-step-input { grid-template-columns: 1fr !important; }
  .machine-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .purchase-flow { grid-template-columns: repeat(2, 1fr) !important; }
  .purchase-item-grid { grid-template-columns: 1fr !important; }

  /* Layout bars e grids internos */
  .layout-standard-actionbar { flex-wrap: wrap !important; }
  .order-spec-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .orders-workspace { grid-template-columns: 1fr !important; }
  .order-timeline-panel { position: static !important; }
}

@media (max-width: 600px) {
  /* Conteúdo do app */
  #appView { padding: 10px 12px !important; }
  #loginView { padding: 12px !important; }

  /* Métricas single column */
  .metrics { grid-template-columns: 1fr !important; }
  .form-grid, .form-grid .span-2 { grid-template-columns: 1fr !important; }

  /* Grades */
  .crm-grid { grid-template-columns: 1fr !important; }
  .machine-grid { grid-template-columns: 1fr !important; }
  .purchase-flow { grid-template-columns: 1fr !important; overflow-x: auto !important; }
  .order-spec-grid { grid-template-columns: 1fr 1fr !important; }
  .stock-card-grid { grid-template-columns: 1fr !important; }
  .ai-executive-grid { grid-template-columns: repeat(2,1fr) !important; }
  .ai-layout, .ai-layout-wide { grid-template-columns: 1fr !important; }

  /* Tabela wrap */
  .table-wrap, .finance-fullscreen .table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

  /* FAB */
  #modernFAB { bottom: 14px; right: 14px; }
  .fab-action { font-size: 12px !important; height: 36px !important; padding: 0 12px 0 10px !important; }
  .fab-main   { height: 46px !important; width: 46px !important; font-size: 20px !important; }

  /* Topbar */
  .modern-topbar { padding: 0 12px; }
  .search-trigger { display: none !important; }
}

/* ── 15. SCROLLBAR PERSONALIZADA NOS MÓDULOS ─────────────────────── */
.stock-main-list::-webkit-scrollbar,
.timeline-feed::-webkit-scrollbar,
.permissions-matrix::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar { width: 4px; height: 4px; }
.stock-main-list::-webkit-scrollbar-thumb,
.timeline-feed::-webkit-scrollbar-thumb,
.permissions-matrix::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb { background: var(--bd2); border-radius: var(--r-full); }

/* ── 16. ANIMAÇÕES SUAVES DE ENTRADA NOS MÓDULOS ─────────────────── */
.stock-material-card, .machine-card, .purchase-step, .timeline-item,
.quality-check-item, .crm-card, .industrial-order {
  animation: fadeUp 0.22s var(--ease) both;
}

/* ── 17. MOBILE — TOPBAR BOTÃO MENU ─────────────────────────────── */
@media (max-width: 768px) {
  #sbMobileToggle { display: flex !important; }
  .modern-topbar  { padding: 0 12px !important; gap: 8px !important; }
}