/* Tema: `--bg`/`--panel`/etc. são os únicos tokens de cor usados no resto do arquivo — trocar
   de claro pra escuro é só redefinir esses valores aqui, nunca uma regra por componente.
   `data-theme` (aplicado por public/js/ui/theme.js, e antes disso pelo <script> bloqueante
   em index.html) manda; sem ele, o padrão segue `prefers-color-scheme` do sistema. */
:root {
  --bg: #f4f6f9; --panel: #ffffff; --border: #dde2e9; --border-soft: #e8ecf1;
  --text: #1a2233; --muted: #667085; --muted-soft: #97a1b3;
  --accent: #2b6ef2; --accent-dark: #1c53c2; --accent-soft: #eaf1ff;
  --error: #d0392b; --error-soft: #fbeceb;
  --warning: #b8720a; --warning-soft: #fdf3e2;
  --success: #1f9d55; --success-soft: #e8f8ee;
  --radius: 10px; --radius-sm: 6px;
  --shadow-sm: 0 1px 2px rgba(20, 30, 50, .06);
  --shadow-md: 0 8px 24px rgba(20, 30, 50, .12);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #10141c; --panel: #1a2030; --border: #2b3346; --border-soft: #242c3d;
    --text: #e7eaf2; --muted: #9aa3b8; --muted-soft: #6d7690;
    --accent: #5b93ff; --accent-dark: #3d76e8; --accent-soft: rgba(91,147,255,.16);
    --error: #ff7a6b; --error-soft: rgba(255,122,107,.14);
    --warning: #ffc266; --warning-soft: rgba(255,194,102,.14);
    --success: #4ad080; --success-soft: rgba(74,208,128,.14);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, .5);
  }
}
:root[data-theme="dark"] {
  --bg: #10141c; --panel: #1a2030; --border: #2b3346; --border-soft: #242c3d;
  --text: #e7eaf2; --muted: #9aa3b8; --muted-soft: #6d7690;
  --accent: #5b93ff; --accent-dark: #3d76e8; --accent-soft: rgba(91,147,255,.16);
  --error: #ff7a6b; --error-soft: rgba(255,122,107,.14);
  --warning: #ffc266; --warning-soft: rgba(255,194,102,.14);
  --success: #4ad080; --success-soft: rgba(74,208,128,.14);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, .5);
}
* { box-sizing: border-box; }
html, body {
  height: 100%; margin: 0; color: var(--text); background: var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ============================== ícones (mask + currentColor) ============================== */
:root {
  --i-edit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E");
  --i-kit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8l-9-5-9 5 9 5 9-5Z'/%3E%3Cpath d='M3 8v8l9 5 9-5V8'/%3E%3Cpath d='M12 13v8'/%3E%3C/svg%3E");
  --i-precision: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3Ccircle cx='12' cy='12' r='1.4' fill='white'/%3E%3Cpath d='M12 1.5v3M12 19.5v3M1.5 12h3M19.5 12h3'/%3E%3C/svg%3E");
  --i-table: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M3 9.5h18M3 15h18M9.5 4v16M15 4v16'/%3E%3C/svg%3E");
  --i-trace: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='19' r='2.1'/%3E%3Ccircle cx='19' cy='5' r='2.1'/%3E%3Ccircle cx='19' cy='19' r='2.1'/%3E%3Cpath d='M7 17.5 17 8M19 7.2v9.6'/%3E%3C/svg%3E");
  --i-quality: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v6c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6l7-3Z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
  --i-assoc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 14.5l5-5'/%3E%3Cpath d='M12.8 5.2l1.3-1.3a3.5 3.5 0 1 1 5 5L17.8 10.2'/%3E%3Cpath d='M11.2 18.8l-1.3 1.3a3.5 3.5 0 1 1-5-5L6.2 13.8'/%3E%3C/svg%3E");
  --i-undo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10a9 9 0 1 1 2.6 6.3'/%3E%3Cpath d='M3 4v6h6'/%3E%3C/svg%3E");
  --i-help: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.2 9.2a3 3 0 1 1 4.8 2.3c-1 .7-1.5 1.3-1.5 2.5'/%3E%3Cpath d='M12 17.2v.15'/%3E%3C/svg%3E");
  --i-move: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M3 12h18'/%3E%3Cpath d='M12 3l-2.3 2.3M12 3l2.3 2.3M12 21l-2.3-2.3M12 21l2.3-2.3M3 12l2.3-2.3M3 12l2.3 2.3M21 12l-2.3-2.3M21 12l-2.3 2.3'/%3E%3C/svg%3E");
  --i-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='12' height='12' rx='2'/%3E%3Cpath d='M5 15V5a2 2 0 0 1 2-2h10'/%3E%3C/svg%3E");
  --i-split: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='2.1'/%3E%3Ccircle cx='6' cy='18' r='2.1'/%3E%3Cpath d='M7.8 7.4 20 19M7.8 16.6 20 5'/%3E%3C/svg%3E");
  --i-reshape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20 8.5 8 16 6.2 20 4'/%3E%3Ccircle cx='8.5' cy='8' r='1.6' fill='white'/%3E%3Ccircle cx='16' cy='6.2' r='1.6' fill='white'/%3E%3C/svg%3E");
  --i-array: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='6' height='6' rx='1'/%3E%3Crect x='15' y='3' width='6' height='6' rx='1'/%3E%3Crect x='9' y='15' width='6' height='6' rx='1'/%3E%3C/svg%3E");
  --i-offset: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h13'/%3E%3Cpath d='M3 16h13'/%3E%3Cpath d='M17 5l4 3-4 3'/%3E%3C/svg%3E");
  --i-place: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-7.8 7-12.5A7 7 0 0 0 5 8.5C5 13.2 12 21 12 21Z'/%3E%3Ccircle cx='12' cy='8.5' r='2.3' fill='white'/%3E%3C/svg%3E");
  --i-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E");
  --i-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
  --i-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 22 20H2L12 3Z'/%3E%3Cpath d='M12 9.5v4.5'/%3E%3Cpath d='M12 16.8v.15'/%3E%3C/svg%3E");
  --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.3l2.8 2.8L16 9.5'/%3E%3C/svg%3E");
  --i-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16'/%3E%3Cpath d='M9 7V4.5A1.5 1.5 0 0 1 10.5 3h3A1.5 1.5 0 0 1 15 4.5V7'/%3E%3Cpath d='M6 7l1 12.2A2 2 0 0 0 9 21h6a2 2 0 0 0 2-1.8L18 7'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3C/svg%3E");
  --i-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  --i-sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8Z'/%3E%3Cpath d='M19 15l.6 1.7 1.7.6-1.7.6-.6 1.7-.6-1.7-1.7-.6 1.7-.6Z'/%3E%3C/svg%3E");
  --i-theme: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 3a9 9 0 0 0 0 18Z' fill='white'/%3E%3C/svg%3E");
  --i-target: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v4M12 18v4M2 12h4M18 12h4'/%3E%3C/svg%3E");
  --i-project: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
  --i-network: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='4' r='2'/%3E%3Cpath d='M12 6v5M5 11h14M5 11v6M12 11v6M19 11v6'/%3E%3Ccircle cx='5' cy='19' r='1.8'/%3E%3Ccircle cx='12' cy='19' r='1.8'/%3E%3Ccircle cx='19' cy='19' r='1.8'/%3E%3C/svg%3E");
  --i-print: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V2h12v7'/%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Crect x='6' y='14' width='12' height='8'/%3E%3C/svg%3E");
  /* Achado do dono (avaliação de responsividade mobile): a aba "Notas" nunca tinha um
     `--icon` próprio — `#tabs button::before` (regra geral, mais abaixo) já criava o
     pseudo-elemento pra ela, mas sem ícone definido a máscara não desenhava nada. */
  --i-notes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V9z'/%3E%3Cpath d='M14 3v6h6'/%3E%3Cpath d='M8.5 13h7M8.5 17h5'/%3E%3C/svg%3E");
  /* "Abrir sessão de edição" mudou de header pra dentro de nav#tabs (pedido do dono) —
     precisava de um ícone próprio pra não ficar com a máscara vazia (mesmo achado do
     --i-notes acima). Lista com check: o lote de edições pendentes que a sessão junta. */
  --i-batch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11'/%3E%3Cpath d='M4 6l1 1 2-2M4 12l1 1 2-2M4 18l1 1 2-2'/%3E%3C/svg%3E");
  /* "Menu"/"Esconder janelas" viraram ícone (pedido do dono) — precisavam de um `--icon`
     próprio, mesmo achado do --i-notes/--i-batch acima (botão sem ícone = máscara vazia). */
  --i-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E");
  --i-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  /* Ajuda embutida (help-panel.js): "Modo offline" ganhou seção própria nesta rodada. */
  --i-offline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 18a4.5 4.5 0 0 1-.7-8.9A6 6 0 0 1 18 8.5 4.5 4.5 0 0 1 20 17'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E");
}

#tabs button::before,
#theme-toggle::before, #menu-toggle-btn::before, #floating-toggle-btn::before,
.type-btn::before, .kit-btn::before,
#edit-selected-btn::before, #delete-selected-btn::before,
#cancel-form::before, #save-form::before,
#run-validate::before, #run-trace::before, #bulk-apply::before,
#pp-move::before, #pp-copy::before, #pp-split::before, #pp-offset::before, #pp-array::before, #pp-place::before,
#pp-reshape-start::before, #pp-reshape-confirm::before, #pp-reshape-cancel::before,
#help-close::before,
.help-icon, [data-icon] {
  content: ""; display: inline-block; flex: none;
  width: 15px; height: 15px; background-color: currentColor;
  -webkit-mask: var(--icon) no-repeat center / contain; mask: var(--icon) no-repeat center / contain;
}
.help-icon { width: 16px; height: 16px; margin-right: 8px; vertical-align: -3px; }

#tabs button[data-tab="editor"] { --icon: var(--i-edit); }
#tabs button[data-tab="kits"] { --icon: var(--i-kit); }
#tabs button[data-tab="precision"] { --icon: var(--i-precision); }
#tabs button[data-tab="table"] { --icon: var(--i-table); }
#tabs button[data-tab="trace"] { --icon: var(--i-trace); }
#tabs button[data-tab="quality"] { --icon: var(--i-quality); }
#tabs button[data-tab="associations"] { --icon: var(--i-assoc); }
#tabs button[data-tab="assistant"] { --icon: var(--i-sparkle); }
#tabs button[data-tab="projects"] { --icon: var(--i-project); }
#tabs button[data-tab="network"] { --icon: var(--i-network); }
#tabs button[data-tab="print"] { --icon: var(--i-print); }
#tabs button[data-tab="notes"] { --icon: var(--i-notes); }
#global-search-btn { --icon: var(--i-search); }
#session-toggle-btn { --icon: var(--i-batch); }
#offline-area-btn { --icon: var(--i-target); }
#offline-area-clear-btn { --icon: var(--i-close); }
#menu-toggle-btn { --icon: var(--i-menu); }
#floating-toggle-btn { --icon: var(--i-eye); }
[data-icon="sparkle"] { --icon: var(--i-sparkle); }
#undo-btn { --icon: var(--i-undo); }
#help-btn { --icon: var(--i-help); }
#theme-toggle { --icon: var(--i-theme); }
.type-btn, .kit-btn { --icon: var(--i-plus); }
.kit-btn { --icon: var(--i-kit); }
#edit-selected-btn { --icon: var(--i-edit); }
#delete-selected-btn { --icon: var(--i-trash); }
#cancel-form, #pp-reshape-cancel, #help-close { --icon: var(--i-close); }
#save-form, #run-validate, #bulk-apply, #pp-reshape-confirm { --icon: var(--i-check); }
#run-trace { --icon: var(--i-trace); }
#pp-move { --icon: var(--i-move); }
#pp-copy { --icon: var(--i-copy); }
#pp-split { --icon: var(--i-split); }
#pp-offset { --icon: var(--i-offset); }
#pp-array { --icon: var(--i-array); }
#pp-place { --icon: var(--i-place); }
#pp-reshape-start { --icon: var(--i-reshape); }
[data-icon="help"] { --icon: var(--i-help); }
[data-icon="edit"] { --icon: var(--i-edit); }
[data-icon="kit"] { --icon: var(--i-kit); }
[data-icon="precision"] { --icon: var(--i-precision); }
[data-icon="table"] { --icon: var(--i-table); }
[data-icon="trace"] { --icon: var(--i-trace); }
[data-icon="quality"] { --icon: var(--i-quality); }
[data-icon="associations"] { --icon: var(--i-assoc); }
[data-icon="undo"] { --icon: var(--i-undo); }
[data-icon="place"] { --icon: var(--i-place); }
[data-icon="split"] { --icon: var(--i-split); }
[data-icon="offset"] { --icon: var(--i-offset); }
[data-icon="array"] { --icon: var(--i-array); }
[data-icon="move"] { --icon: var(--i-move); }
[data-icon="reshape"] { --icon: var(--i-reshape); }
[data-icon="target"] { --icon: var(--i-target); }
[data-icon="close"] { --icon: var(--i-close); }
[data-icon="notes"] { --icon: var(--i-notes); }
[data-icon="offline"] { --icon: var(--i-offline); }

/* ============================================ header ============================================ */
#app-header {
  display: flex; align-items: center; gap: 16px; padding: 10px 18px; height: 56px;
  background: var(--panel); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm); z-index: 2;
}
#brand { display: flex; align-items: center; gap: 10px; }
#brand-logo {
  width: 30px; height: 30px; flex: none; border-radius: 8px; padding: 5px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  /* `color: white` — os elementos do SVG (index.html) já trazem `fill="currentColor"`/
     `stroke="currentColor"` explícitos; é só essa cor que falta pra eles resolverem. */
  color: white;
}
#brand-text { display: flex; flex-direction: column; line-height: 1.15; }
#app-header h1 { font-size: 15px; margin: 0; font-weight: 700; letter-spacing: -.01em; }
#brand-tagline { color: var(--muted); font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; }
#domain-select { width: auto; min-width: 170px; font-weight: 600; }
#network-name { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Ferramenta de PROJETOS: mesmo tratamento de destaque que o toggle de sessão (C8) usa
   pro estado "aberto com pendência" — reaproveita --accent-soft/--accent-dark, sem token novo. */
#project-badge { background: var(--accent-soft); color: var(--accent-dark); font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
#project-badge.hidden { display: none; }
#whoami { color: var(--muted); font-size: 12.5px; align-self: center; }
#whoami.hidden, #logout-btn.hidden { display: none; }
#domain-select.hidden { display: none; }
#header-actions { margin-left: auto; display: flex; gap: 8px; flex: none; }
#header-actions button { display: inline-flex; align-items: center; gap: 6px; }
/* C8: mesmo tratamento visual do resto do cabeçalho (nenhuma classe nova) — só o estado
   "aberto com pendência" ganha o token de destaque (--accent) que .badge/tabs já usam. */
#session-toggle-btn:disabled { opacity: 1; background: var(--accent-soft); color: var(--accent-dark); cursor: default; }
#session-apply-btn.hidden, #session-discard-btn.hidden { display: none; }
#session-discard-btn { color: var(--error); }

/* Modo offline: --warning/--warning-soft = "pendência esperando sincronizar" (ainda
   online, ou já reconectando); --error/--error-soft = "offline agora mesmo" — mesmo
   vocabulário de token que --accent-soft já usa pros outros indicadores do cabeçalho.
   É um <button> (achado de um avaliador independente — clicável, abre o painel de
   pendências), então zera o `border`/`cursor:pointer` já vem do `button{}` genérico. */
#offline-badge {
  background: var(--warning-soft); color: var(--warning); font-size: 11.5px; font-weight: 600;
  padding: 3px 8px; border-radius: 999px; white-space: nowrap; border: none;
}
#offline-badge.offline-badge--offline { background: var(--error-soft); color: var(--error); }
#offline-badge.hidden, #offline-sync-btn.hidden,
#offline-area-btn.hidden, #offline-area-clear-btn.hidden { display: none; }

/* ============================================ layout ============================================ */
/* Pedido do dono: nenhum painel mais divide espaço fixo com o mapa — o mapa ocupa 100% de
   `#app-main` sempre, e TODO painel (o próprio menu incluso) é uma janela flutuante por
   cima dele, no mesmo espírito de `#legend`/`#cad-toolbar`, que já flutuavam assim. */
#app-main { height: calc(100% - 57px); }
#map-container { position: relative; width: 100%; height: 100%; }

#tabs {
  display: grid; grid-template-columns: 1fr; gap: 2px; width: max-content;
}
#tabs button {
  display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px;
  padding: 7px 10px; border: none; border-radius: var(--radius-sm); background: none; cursor: pointer;
  font-size: 11px; font-weight: 600; color: var(--muted); transition: background .12s, color .12s;
  line-height: 1.2; text-align: left; white-space: normal;
}
#tabs button::before { width: 16px; height: 16px; margin: 0; flex: none; }
#tabs button:hover { background: var(--border-soft); color: var(--text); }
#tabs button.active { color: var(--accent); background: var(--accent-soft); }
.tab-panel { padding: 14px; overflow-y: auto; flex: 1; }
.tab-panel h3 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 0 8px; font-weight: 700; }

arcgis-map { width: 100%; height: 100%; }
#legend-wrap {
  position: absolute; right: 12px; bottom: 24px; background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 8px 12px; font-size: 11.5px; max-width: 210px; z-index: 5; box-shadow: var(--shadow-md);
  /* Serviço real com dezenas de grupos: sem teto, a legenda subia além do topo do mapa. */
  max-height: calc(100% - 48px); overflow-y: auto;
}
#legend-wrap summary {
  cursor: pointer; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); list-style: none; display: flex; align-items: center; gap: 6px;
}
#legend-wrap summary::-webkit-details-marker { display: none; }
#legend-wrap summary::before {
  content: ""; width: 8px; height: 8px; flex: none; border-style: solid; border-width: 5px 4px 0 4px;
  border-color: var(--muted) transparent transparent transparent; transition: transform .12s;
}
#legend-wrap[open] summary::before { transform: rotate(180deg); }
#legend-wrap[open] summary { margin-bottom: 6px; }
#legend .legend-item { display: flex; align-items: center; gap: 7px; margin: 3px 0; }
#legend .swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }

/* Toda aba é sua própria janela flutuante, sempre à direita, um por vez (ver app.js:
   FLOATING_TABS) — dão à tabela/formulário a largura que precisam, sem dividir espaço fixo
   com o mapa. Redimensionamento é feito à mão em floating-window.js (arrastando qualquer
   BORDA, não só o canto — `resize` nativo do CSS só cobre o canto inferior direito, por
   isso fica `resize: none` aqui e o cursor perto da borda é trocado via JS). */
.floating-panel {
  position: absolute; top: 14px; right: 14px; z-index: 10;
  width: min(720px, calc(100% - 28px)); max-height: calc(100% - 28px); min-width: 320px; min-height: 200px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-md); display: flex; flex-direction: column; resize: none; overflow: hidden;
}
.floating-panel.hidden { display: none; }
.floating-panel-header {
  display: flex; align-items: center; justify-content: space-between; padding: 10px 14px;
  border-bottom: 1px solid var(--border); font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--muted); flex: none; cursor: default;
}
.floating-panel-header-actions { display: flex; align-items: center; gap: 2px; flex: none; }
.floating-panel-close, .floating-panel-minimize {
  border: none; background: none; padding: 0; width: 26px; height: 26px; font-size: 17px;
  line-height: 1; color: var(--muted); border-radius: var(--radius-sm); cursor: pointer;
}
.floating-panel-close:hover, .floating-panel-minimize:hover { background: var(--border-soft); color: var(--text); }

/* Pedido do dono: formulário/lista (Cadastro, Kits, Precisão, Trace, Qualidade,
   Associações, Assistente) começa mais fino — largura do antigo painel lateral, que já
   funcionava bem pra esse tipo de conteúdo. Tabela/Projetos continuam largas (são grades de
   dados de verdade). É só o tamanho INICIAL — arrastar a borda muda livremente depois. */
.floating-panel.floating-panel--narrow { width: min(380px, calc(100% - 28px)); }

/* Minimizada: só o cabeçalho fica visível (o conteúdo continua renderizado por baixo — busca
   digitada, seleção em lote etc. não se perdem — só escondido), sem redimensionar enquanto
   recolhida. Clicar em "–" de novo (app.js) restaura. Vale pro menu também (pedido do
   dono) — o seletor genérico (">:not(header)") cobre tanto `.tab-panel` (janelas de
   conteúdo) quanto `#tabs` (o menu), sem precisar de uma regra por tipo de conteúdo. */
.floating-panel.minimized { height: auto !important; min-height: 0; }
.floating-panel.minimized > :not(.floating-panel-header) { display: none; }

/* O menu (pedido do dono): sempre na visão encolhida/vertical, nunca redimensionável, do
   lado esquerdo — as janelas de conteúdo (ver acima) sempre do lado direito. */
.floating-panel--menu {
  top: 14px; left: 14px; right: auto; width: auto; min-width: 0; height: auto; min-height: 0;
  max-height: calc(100% - 28px);
}
.floating-panel--menu .floating-panel-header { padding: 8px 10px; }

/* Responsividade mobile (achado desta rodada: nunca validado num viewport estreito de
   verdade — o cabeçalho tem ~8 botões de texto numa linha só, `flex` sem `wrap` nenhum,
   o que transborda a tela em qualquer celular; e nenhum controle de toque (menu, cabeçalho,
   janela flutuante) respeitava a área mínima de 44px recomendada pra dedo, só pra mouse). */
/* Toolbar especialista: acesso de um clique às ferramentas de precisão sem precisar abrir
   a aba Precisão primeiro — cada botão troca pra ela e já rola/foca o grupo certo. Nunca
   duplica a lógica das ferramentas (edits.js/precision-panel.js continuam sendo a única
   fonte de verdade); é só um atalho de navegação.
   Achado do dono: com o menu aberto, esta toolbar ficava totalmente invisível — as duas
   ocupavam a MESMA região, e o menu (z-index:10) sempre pinta por cima da toolbar
   (z-index:5). `left` AQUI é só o valor de partida pra antes do JS rodar (sem flash visível
   — o script roda logo depois do parser) — quem decide de verdade é `repositionCadToolbar()`
   (app.js), que lê a LARGURA REAL do menu (`ResizeObserver`) a cada abrir/fechar/minimizar/
   crescer de rótulo e empurra a toolbar pra depois dele, ou pro início da tela (8px) com o
   menu fechado. Um número fixo "medido pro pior rótulo hoje" (a versão anterior desta
   regra) sempre volta a quebrar assim que um rótulo cresce ou o menu é fechado. */
#cad-toolbar {
  position: absolute; left: 148px; top: 92px; z-index: 5; display: flex; flex-direction: column; gap: 2px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 4px; box-shadow: var(--shadow-md);
}
#cad-toolbar button {
  border: none; background: none; padding: 9px; border-radius: var(--radius-sm); color: var(--text);
  display: flex; align-items: center; justify-content: center;
}
#cad-toolbar button [data-icon] { width: 17px; height: 17px; }
#cad-toolbar button:hover { background: var(--accent-soft); color: var(--accent-dark); }

/* Alvo de toque mínimo (~44px) pra controles que hoje só foram pensados pra mouse — só
   em telas de toque de verdade (`pointer: coarse`), nunca em desktop com janela estreita
   (ali o problema seria outro, e aumentar o alvo só deixaria tudo mais espremido à toa).
   Vem ANTES do `@media (max-width: 640px)` abaixo de propósito: um celular real bate as
   DUAS consultas ao mesmo tempo, e a barra de abas do rodapé (mobile) já dimensiona
   `#tabs button` do jeito certo pra ela — precisa vencer esta regra genérica na cascata
   (mesma especificidade, últma declaração ganha), não o contrário. Num touch-desktop/
   tablet grande (coarse, mas não estreito), só esta regra se aplica mesmo, sem conflito. */
@media (pointer: coarse) {
  #tabs button { padding: 12px 10px; min-height: 44px; }
  .floating-panel-close, .floating-panel-minimize { width: 40px; height: 40px; font-size: 20px; }
  #cad-toolbar button { padding: 12px; }
  #header-actions button, .type-btn, .kit-btn, #context-menu button, .correction-btn,
  #edit-selected-btn, #delete-selected-btn, #match-properties-btn, #cancel-match-properties-btn { min-height: 40px; }
  .row-check-label { min-width: 44px; min-height: 44px; }
  .data-table td.checkbox-cell { width: 44px; }
}

/* Achado do dono (avaliação de responsividade mobile): o menu como janela flutuante no
   canto superior esquerdo, a caixa de ferramentas grudada nele por um deslocamento fixo
   em pixels, e a legenda solta no canto oposto — os três pensados pra mouse/tela larga,
   nunca redesenhados pra um celular. Redesenho, não só reposicionamento — e precisa vir
   DEPOIS das regras base de `.floating-panel--menu`/`#cad-toolbar`/`#legend-wrap` acima
   no arquivo (mesma especificidade; CSS resolve empate pela ORDEM de declaração, não
   pela posição do `@media`) pra realmente vencer a cascata, não só parecer que vence:
   - MENU: vira uma barra de abas fixa no RODAPÉ (padrão nativo de app mobile), com
     ícone+rótulo empilhados por aba, rolando na horizontal se não couber tudo — a MESMA
     marcação (`#tabs button[data-tab=...]`) e os MESMOS handlers de clique de sempre, só o
     LAYOUT muda; nenhuma lógica de app.js precisou saber disso.
   - FERRAMENTAS (cad-toolbar): o deslocamento fixo (`left:148px`) existia só pra desviar
     do menu no canto superior esquerdo — com o menu agora no rodapé, esse canto está
     livre; a toolbar volta pra lá.
   - LEGENDA: sobe o suficiente pra nunca ficar atrás da barra de abas nova, e fica mais
     compacta (a moldura dela agora é um `<details>` nativo — ver index.html/`#legend-wrap`
     acima — recolhível com um toque em "Legenda", sem precisar de JS novo). */
@media (max-width: 640px) {
  :root { --mobile-nav-h: 64px; }

  /* O cabeçalho não cabe nunca (marca + seletor de domínio + ~8 botões de texto) numa
     largura de celular — em vez de transbordar a página inteira (rolagem horizontal do
     BODY, o pior resultado possível), a faixa de ações vira uma tira que rola por conta
     própria, contida dentro do cabeçalho; marca/tagline/nome da rede somem pra sobrar
     espaço, já visíveis de outro jeito (aba ativa, crachá do projeto). */
  #brand-tagline, #network-name { display: none; }
  #domain-select { min-width: 0; flex: 1; }
  #header-actions {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    max-width: 45vw; padding-bottom: 2px; /* espaço pra não cortar a sombra de foco do último botão */
  }
  #header-actions button { flex: none; }

  .floating-panel--menu {
    top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-width: 100%;
    max-height: var(--mobile-nav-h); border-radius: 0; border-left: none; border-right: none; border-bottom: none;
    box-shadow: 0 -4px 16px rgba(20, 30, 50, .1);
  }
  .floating-panel--menu.minimized { max-height: var(--mobile-nav-h); }
  /* Sem cabeçalho "Menu"/minimizar/fechar no rodapé — a barra de abas fica sempre visível,
     sempre na mesma altura; "Esconder janelas" (cabeçalho) continua escondendo/mostrando
     ela junto de tudo o mais, então a função de esconder não se perde. */
  .floating-panel--menu .floating-panel-header { display: none; }
  #tabs {
    display: flex; flex-direction: row; grid-template-columns: none; overflow-x: auto;
    -webkit-overflow-scrolling: touch; height: var(--mobile-nav-h); width: 100%;
  }
  #tabs button {
    flex: none; width: 64px; height: 100%; flex-direction: column; justify-content: center;
    gap: 3px; padding: 6px 2px; font-size: 9.5px; text-align: center; border-radius: 0;
  }
  #tabs button::before { width: 20px; height: 20px; }
  #tabs button.active { background: var(--accent-soft); box-shadow: inset 0 2px 0 var(--accent); }

  /* Janelas de conteúdo (Cadastro, Tabela, Projetos...) precisam parar antes do fim da
     tela agora, senão a barra de abas nova as cobre por cima. */
  .floating-panel:not(.floating-panel--menu) {
    left: 14px; right: 14px; width: auto; max-height: none;
    top: 14px; bottom: calc(var(--mobile-nav-h) + 10px);
    /* `min-width:320px` (base) some com o `right:14px` num celular mais estreito que
       348px (320+14+14) — a janela flutuante ultrapassava a borda direita da tela. */
    min-width: 0;
  }

  #cad-toolbar { left: 8px; top: 8px; }

  #legend-wrap { bottom: calc(var(--mobile-nav-h) + 12px); max-width: 160px; font-size: 10.5px; }
  #legend-wrap[open] { max-height: 40vh; overflow-y: auto; }
}

/* Menu de contexto (botão direito no mapa) — posição livre (`left`/`top` em px, setados
   via JS a partir de clientX/clientY), nunca dentro do fluxo normal do layout. */
#context-menu {
  position: fixed; z-index: 60; min-width: 230px; max-width: calc(100vw - 16px); max-height: 70vh; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md); padding: 4px;
}
#context-menu.hidden { display: none; }
#context-menu button {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: none;
  background: none; padding: 8px 10px; border-radius: var(--radius-sm); font-size: 12.5px; font-weight: 500;
}
#context-menu button:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent-dark); }
#context-menu button:disabled { color: var(--muted-soft); cursor: default; }

/* ============================================ controles ============================================ */
button {
  cursor: pointer; padding: 7px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--panel); font-size: 12.5px; font-weight: 600; color: var(--text);
  transition: background .12s, border-color .12s, box-shadow .12s, opacity .12s;
}
button:hover:not(:disabled) { background: var(--border-soft); border-color: var(--muted-soft); }
button:active:not(:disabled) { transform: translateY(.5px); }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
button:disabled { opacity: .45; cursor: not-allowed; }
select, input, textarea {
  padding: 7px 9px; border-radius: var(--radius-sm); border: 1px solid var(--border); font-size: 13px; width: 100%;
  background: var(--panel); color: var(--text);
}
select:focus, input:focus, textarea:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }

.group-block { margin-bottom: 16px; }
.group-block h3 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 0 6px; font-weight: 700; }
.type-btn {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; margin-bottom: 5px;
  font-weight: 500; color: var(--text); background: var(--panel);
}
.type-btn::before { background-color: var(--accent); }
.type-btn:hover { border-color: var(--accent); background: var(--accent-soft); }
.kit-btn { display: flex; align-items: center; gap: 8px; width: 100%; }

.finding-group { margin-bottom: 14px; }
.finding-group h4 {
  font-size: 11.5px; margin: 0 0 6px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
}
/* Botão do "Correction Assistant" (achado #8): sozinho no cabeçalho do grupo, precisa
   escapar do text-transform/letter-spacing do <h4> (senão o rótulo saía maiúsculo e
   espaçado como o título) — `flex-wrap: wrap` acima já evita transbordo horizontal em
   ~390px, deixando o botão cair pra linha de baixo em vez de cortar. */
.finding-group h4 .correction-btn { text-transform: none; letter-spacing: normal; font-weight: 600; }
.finding {
  position: relative; border: 1px solid var(--border-soft); padding: 9px 10px 9px 32px; margin-bottom: 7px;
  background: var(--warning-soft); font-size: 12.5px; cursor: pointer; border-radius: var(--radius-sm); transition: box-shadow .12s;
}
.finding::before {
  content: ""; position: absolute; left: 9px; top: 11px; width: 14px; height: 14px;
  background-color: var(--warning); -webkit-mask: var(--i-warning) no-repeat center / contain; mask: var(--i-warning) no-repeat center / contain;
}
.finding:hover { box-shadow: var(--shadow-sm); }
.finding.error { background: var(--error-soft); }
.finding.error::before { background-color: var(--error); }
.finding-meta { color: var(--muted); font-size: 10.5px; margin-top: 3px; }

.assoc-group { margin-bottom: 12px; }
.assoc-group h4 { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 5px; color: var(--muted); font-weight: 700; }
.assoc-item {
  font-size: 12.5px; padding: 6px 8px; border-radius: var(--radius-sm); cursor: pointer; transition: background .12s;
}
.assoc-item:hover { background: var(--accent-soft); }

.field { margin-bottom: 11px; }
.field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; font-weight: 500; }
.field .required { color: var(--error); }

.overlay { position: fixed; inset: 0; background: rgba(18, 24, 38, .45); display: flex; align-items: center; justify-content: center; z-index: 50; backdrop-filter: blur(1px); }
.overlay.hidden { display: none; }
/* Login (pedido do dono): ao contrário dos outros overlays (que mostram o fundo por trás
   de propósito — confirmar uma ação no contexto onde ela foi pedida), aqui o app por trás
   precisa ficar totalmente escondido até logar — nunca um vislumbre do cabeçalho/menu/mapa
   antes da sessão ser confirmada. Mesmo componente (.overlay/.overlay-card), só o fundo
   muda de translúcido pra opaco. */
#login-overlay { background: var(--bg); backdrop-filter: none; }
.overlay-card { background: var(--panel); border-radius: 14px; padding: 22px; width: 440px; max-height: 82vh; overflow-y: auto; box-shadow: var(--shadow-md); }
.overlay-card h2 { margin: 0 0 14px; font-size: 16px; display: flex; align-items: center; }
.form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.form-actions button { display: inline-flex; align-items: center; gap: 6px; }
.form-actions button.primary, button.primary { background: var(--accent); color: white; border-color: var(--accent-dark); }
button.primary:hover:not(:disabled) { background: var(--accent-dark); }

/* A19: faixa de notificação inline — substitui alert()/confirm() nativos, tokens já
   usados em .finding/.badge (nunca cor nova). */
.notify-banner {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 70;
  max-width: 480px; padding: 10px 16px; border-radius: var(--radius-sm); font-size: 12.5px;
  font-weight: 600; box-shadow: var(--shadow-md); border: 1px solid transparent;
}
.notify-banner.hidden { display: none; }
.notify-banner.notify-error { background: var(--error-soft); color: var(--error); border-color: var(--error); }
.notify-banner.notify-success { background: var(--success-soft); color: var(--success); border-color: var(--success); }

.empty-hint { color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.link-btn { background: none; border: none; color: var(--accent); cursor: pointer; padding: 2px 0; font-size: 12.5px; text-decoration: underline; }

/* Modelos favoritos (Targets) — equivalente ao "Send to Targets" do Editor XI. */
.target-row { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-bottom: 4px; }
.target-row .target-use-btn { flex: 1; text-align: left; }
.target-row .target-remove-btn { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 4px; }

/* Guide Points — coordenadas de campo (GPS) importadas de CSV/TSV. */
.guide-point-row { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-bottom: 4px; flex-wrap: wrap; }
.guide-point-name { font-size: 13px; }
.guide-point-remove-btn { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 4px; }

/* Notas de mapa — equivalente ao "Map Notes" do Designer XI. */
.map-note-row { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; padding-bottom: 6px; border-bottom: 1px solid var(--border-soft); }
.map-note-text { font-size: 13px; flex: 1; min-width: 120px; }
.map-note-remove-btn { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 4px; }

/* Balanço por fase — equivalente ao "Load Balance" do Designer XI. */
.phase-balance { margin-top: 6px; }
.phase-balance-row { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-bottom: 3px; }
.phase-balance-label { width: 42px; font-weight: 600; flex: none; }
.phase-balance-bar-track { flex: 1; background: var(--border-soft); border-radius: 3px; height: 10px; overflow: hidden; }
.phase-balance-bar { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.phase-balance-value { width: 80px; text-align: right; color: var(--muted); flex: none; }

/* Query Builder (Select By Attributes) — filtro avançado inline da Tabela. */
#query-builder { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px; margin: 6px 0; background: var(--bg); }
#query-builder.hidden { display: none; }
.qb-row { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.qb-row select, .qb-row input { padding: 4px 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel); color: var(--text); font-size: 12.5px; }
.qb-remove { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 4px; }
.qb-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 12.5px; }

/* Busca global (Ctrl+F, equivalente ao "ArcFM Search") — reaproveita .overlay/.overlay-card/
   .form-actions já existentes, só acrescenta a lista de resultados. */
.global-search-card { width: 480px; }
#global-search-input { width: 100%; padding: 8px 10px; margin-bottom: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); font-size: 14px; }
.global-search-results { max-height: 340px; overflow-y: auto; }
.global-search-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 6px; border-radius: var(--radius-sm); cursor: pointer; }
.global-search-row:hover { background: var(--bg); }
.global-search-label { font-size: 13.5px; }
.global-search-preview { color: var(--muted); font-size: 12px; }
.badge { display: inline-block; font-size: 10.5px; padding: 2px 7px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-dark); margin-left: 6px; font-weight: 600; }

/* Painel de pendências offline — reaproveita .overlay/.overlay-card/.form-actions/
   .empty-hint já existentes, mesmo espírito de .global-search-*. */
.offline-queue-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 6px; border-radius: var(--radius-sm); border-bottom: 1px solid var(--border-soft); }
.offline-queue-row:last-child { border-bottom: none; }
.offline-queue-label { font-size: 13.5px; font-weight: 600; }
.offline-queue-error { color: var(--error); font-size: 12px; margin-top: 2px; }

/* ======================================= tabelas de dados =======================================
   Componente único pra toda tabela do produto (aba Tabela, lista de Projetos, conflitos de
   reconciliação — antes cada uma tinha seu próprio `style="..."` inline, sem borda entre
   linhas, sem cabeçalho fixo e sem estado de hover). `.table-scroll` é o contêiner com
   rolagem horizontal (nunca deixa a tabela estourar a largura do painel em telas estreitas);
   `.data-table` estiliza a tabela em si; cabeçalho fica fixo (`sticky`) pra listas longas. */
.table-scroll {
  overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--panel);
}
table.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th, .data-table td { padding: 8px 10px; text-align: left; }
.data-table thead th {
  position: sticky; top: 0; background: var(--bg); color: var(--muted); font-weight: 700;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid var(--border); z-index: 1; white-space: nowrap;
}
.data-table tbody tr { border-bottom: 1px solid var(--border-soft); }
.data-table tbody tr:last-child { border-bottom: none; }
.data-table tbody tr:hover { background: var(--border-soft); }
.data-table tbody tr.is-selected { background: var(--accent-soft); }
/* Só ID/data/geometria (valores curtos, de tamanho fixo) ficam numa linha só — o padrão
   pra célula de texto livre (Grupo, Tipo, resumo de conflito, item do orçamento) virou
   `normal`: um `Registro de manobra (isolamento)` ou um resumo de atributos cortava no
   limite do painel e só aparecia rolando a tabela pro lado, mesmo cabendo perfeitamente
   numa segunda linha. */
.data-table td { white-space: normal; word-break: break-word; }
.data-table td.id-cell, .data-table td.checkbox-cell, .data-table td.muted-cell { white-space: nowrap; }
.data-table td.id-cell { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.data-table td.id-cell.is-clickable { color: var(--accent); cursor: pointer; }
.data-table td.id-cell.is-clickable:hover { text-decoration: underline; }
.data-table td.muted-cell { color: var(--muted); }
.data-table td.checkbox-cell { width: 36px; padding: 4px 8px; text-align: center; }
/* Coluna de número (contagem, custo) — alinhada à direita e com algarismos de largura
   fixa, senão "8" e "128" não comparam visualmente numa coluna de baixo pra cima. */
.data-table td.num-cell, .data-table th.num-cell { text-align: right; font-variant-numeric: tabular-nums; }
.row-check-label {
  display: flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px;
  cursor: pointer; margin: 0 auto;
}
.row-check-label input { width: 16px; height: 16px; margin: 0; cursor: pointer; }

/* Pill de situação/status — sempre TEXTO além da cor (nunca só cor pra distinguir estado). */
.status-pill {
  display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px;
  white-space: nowrap;
}
.status-pill--neutral { background: var(--border-soft); color: var(--muted); }
.status-pill--accent { background: var(--accent-soft); color: var(--accent-dark); }
.status-pill--success { background: var(--success-soft); color: var(--success); }
.status-pill--warning { background: var(--warning-soft); color: var(--warning); }
.status-pill--error { background: var(--error-soft); color: var(--error); }

/* ============================================ ajuda ============================================ */
.help-card { width: 620px; max-width: 92vw; }
.help-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.help-header h2 { margin: 0; }
#help-close { border: none; background: none; padding: 6px; width: 30px; height: 30px; }
#help-search { margin-bottom: 14px; }
.help-topic { border-top: 1px solid var(--border-soft); padding: 12px 0; }
.help-topic:first-child { border-top: none; padding-top: 0; }
.help-topic h3 { font-size: 13.5px; margin: 0 0 6px; display: flex; align-items: center; }
.help-topic .help-icon { background-color: var(--accent); }
.help-body { font-size: 12.5px; line-height: 1.6; color: var(--text); }
.help-body ul { margin: 4px 0 0; padding-left: 18px; }

/* Exportar mapa em PDF (rodada de evolução): #print-layout é filho direto de <body>,
   escondido em tela normal — só aparece (e só ele) quando a impressão nativa do navegador
   dispara, via `@media print` abaixo. Nunca reimplementa geração de PDF: o próprio diálogo
   "Salvar como PDF" do navegador faz esse trabalho a partir deste HTML. */
#print-layout { display: none; }
.print-header h1 { margin: 0 0 4px; font-size: 22px; }
.print-notes { margin: 0 0 10px; color: #444; font-size: 13px; white-space: pre-wrap; }
.print-map { width: 100%; display: block; border: 1px solid #ccc; }
.print-legend { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 10px; font-size: 12px; }
.print-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.print-swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.print-footer { margin-top: 10px; font-size: 11px; color: #666; text-align: right; }

/* Segundo quadro de mapa (visão geral) e tabela de ativos — equivalentes ao "Vicinity Map"
   e "Table Frame" do Designer XI. */
.print-map-frames { position: relative; }
.print-overview-frame { position: absolute; bottom: 8px; right: 8px; width: 28%; min-width: 120px; border: 2px solid #333; background: #fff; }
.print-overview-map { width: 100%; display: block; }
.print-overview-label { display: block; font-size: 9px; text-align: center; padding: 1px 0; background: #333; color: #fff; }
.print-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 11px; }
.print-table th, .print-table td { border: 1px solid #ccc; padding: 3px 6px; text-align: left; }
.print-table thead { background: #eee; }

@media print {
  body > *:not(#print-layout) { display: none !important; }
  #print-layout { display: block !important; }
}
.help-body li { margin-bottom: 6px; }

/* ─────────── cadastro visual de kit construtivo ───────────
   Um kit sempre foi configuração; até agora só existia escrito à mão no arquivo do
   domínio, o que na prática deixava o padrão construtivo da companhia fora do alcance de
   quem opera. Este formulário é a mesma configuração, montada na tela. */
.kit-builder label { display: block; margin: 8px 0 2px; font-size: 12px; }
.kit-builder input[type="text"], .kit-builder input:not([type]), .kit-builder input[type="number"],
.kit-builder select, .kit-builder textarea { width: 100%; }
.kit-builder .kit-network { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.kit-builder .kit-network input { width: auto; }
.kit-member {
  border: 1px solid var(--border, #d4d9e2);
  border-left: 3px solid var(--accent, #2b7de0);
  border-radius: 6px; padding: 8px 10px; margin: 10px 0;
}
.kit-member-head { display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
.kit-member-head label { display: flex; align-items: center; gap: 4px; margin: 0; }
.kit-member-head input { width: auto; }
.kit-member-del { border: none; background: none; cursor: pointer; font-size: 16px; line-height: 1; padding: 0 4px; }
.kit-offset { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kit-origem { font-size: 11px; opacity: .75; }
.kit-del-btn { margin-left: 6px; }