@charset "UTF-8";
/* ============================================================
   Velo ERP — assets/css/velo.css
   Variáveis globais + reset base + componentes partilhados
   Incluído em TODAS as páginas
   ============================================================ */

:root {
  /* Fundos */
  --bg0:      #0f1117;
  --bg1:      #171b26;
  --bg2:      #1e2333;
  --bg3:      #252b3d;
  --bg4:      #2d3450;

  /* Bordas */
  --border:   #2e3550;
  --border2:  #3d4666;

  /* Texto */
  --text1:    #e8ecf4;
  --text2:    #8b95b0;
  --text3:    #545e7a;

  /* Acento principal */
  --accent:        #4f7cff;
  --accent-dim:    #1e2d5a;
  --accent-glow:   #4f7cff30;

  /* Verde */
  --green:         #2dd4a0;
  --green-dim:     #0d3327;
  --green-border:  #2dd4a030;

  /* Âmbar */
  --amber:         #f5a623;
  --amber-dim:     #3a2600;
  --amber-border:  #f5a62330;

  /* Vermelho */
  --red:           #f05252;
  --red-dim:       #3a0d0d;
  --red-border:    #f0525230;

  /* Roxo */
  --purple:        #a78bfa;
  --purple-dim:    #2a1e5a;
  --purple-border: #a78bfa30;

  /* Layout */
  --sidebar-w:           240px;
  --sidebar-w-collapsed: 56px;
  --topbar-h:            72px;
  --radius-sm:           4px;
  --radius:              6px;
  --radius-lg:           8px;

  /* Tipografia — Inter auto-hospedado (assets/css/fonts.css), tema Escuro/Claro/Sistema */
  --font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --mono: 'Cascadia Code', 'Consolas', monospace;

  /* Sombra */
  --shadow: 0 4px 24px #00000060;
}

/* ── Reset ───────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body { height: 100%; overflow-x: hidden; }

body {
  font-family: var(--font);
  background: var(--bg0);
  color: var(--text1);
  font-size: 13.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Utilitários ─────────────────────────────────────────────── */
.hidden  { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flex    { display: flex; }
.flex-1  { flex: 1; }
.gap-1   { gap: 4px; }
.gap-2   { gap: 8px; }
.gap-3   { gap: 12px; }
.mt-1    { margin-top: 4px; }
.mt-2    { margin-top: 8px; }
.mt-3    { margin-top: 16px; }
.mb-1    { margin-bottom: 4px; }
.mb-2    { margin-bottom: 8px; }
.mb-3    { margin-bottom: 16px; }
.text-sm { font-size: 12px; }
.text-muted { color: var(--text3); }

/* ── Badges ──────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1;
}
.badge-green  { background: var(--green-dim);   color: var(--green);  border: 1px solid var(--green-border); }
.badge-amber  { background: var(--amber-dim);   color: var(--amber);  border: 1px solid var(--amber-border); }
.badge-red    { background: var(--red-dim);     color: var(--red);    border: 1px solid var(--red-border); }
.badge-blue   { background: var(--accent-dim);  color: var(--accent); border: 1px solid var(--accent-glow); }
.badge-gray   { background: var(--bg3);         color: var(--text3);  border: 1px solid var(--border); }
.badge-purple { background: var(--purple-dim);  color: var(--purple); border: 1px solid var(--purple-border); }

/* ── Botões ──────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  height: 34px;
  box-sizing: border-box;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border2);
  background: var(--bg3);
  color: var(--text1);
  font-family: var(--font);
  font-size: 13px;
  line-height: 1;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
  user-select: none;
  text-decoration: none;
}
.btn:hover         { background: var(--bg4); border-color: var(--border2); text-decoration: none; }
.btn:active        { opacity: .85; }
.btn:disabled      { opacity: .45; cursor: not-allowed; pointer-events: none; }

.btn-primary       { background: var(--accent);    border-color: transparent; color: #fff; }
.btn-primary:hover { opacity: .85; background: var(--accent); }

.btn-ghost         { background: transparent; border-color: var(--text3); color: var(--text2); }
.btn-ghost:hover   { background: var(--bg3); border-color: var(--text2); color: var(--text1); }

.btn-danger        { background: var(--red-dim);   border-color: var(--red-border);   color: var(--red); }
.btn-danger:hover  { opacity: .85; }

.btn-success       { background: var(--green-dim); border-color: var(--green-border); color: var(--green); }
.btn-success:hover { opacity: .85; }

/* Botão Guardar/Gravar com estado — preenchimento sólido (não o .btn-danger/
   .btn-success "dim" acima, pensado para badges sobre fundo claro de card):
   um botão de acção principal numa toolbar escura precisa de mais contraste.
   Uso: Velo.bindSaveState() em velo.js alterna estas duas classes. */
.btn-save-dirty        { background: var(--red);   border-color: var(--red);   color: #fff; }
.btn-save-dirty:hover  { opacity: .85; background: var(--red); }
.btn-save-clean        { background: var(--green); border-color: var(--green); color: #fff; }
.btn-save-clean:hover  { opacity: .85; background: var(--green); }

.btn-icon          { padding: 0; width: 34px; height: 34px; justify-content: center; flex-shrink: 0; }
.btn-sm            { padding: 5px 12px; font-size: 12px; height: 28px; }
.btn-xs            { padding: 3px 8px;  font-size: 11px; height: 22px; }
.btn-lg            { padding: 11px 24px; font-size: 14px; height: 40px; }

/* Alertas inline */
.alert             { padding: 10px 14px; border-radius: var(--radius); font-size: 13px; border: 1px solid transparent; }
.alert-success     { background: var(--green-dim); border-color: var(--green); color: var(--green); }
.alert-warning     { background: var(--amber-dim); border-color: var(--amber); color: var(--amber); }
.alert-error       { background: var(--red-dim);   border-color: var(--red);   color: var(--red); }

/* ── Inputs ──────────────────────────────────────────────────── */
.input, select.input, textarea.input {
  width: 100%;
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  color: var(--text1);
  font-family: var(--font);
  font-size: 13.5px;
  padding: 8px 12px;
  outline: none;
  transition: border-color .15s;
}
.input:focus        { border-color: var(--accent); }
.input::placeholder { color: var(--text3); }
.input:disabled     { opacity: .5; cursor: not-allowed; }
textarea.input      { resize: vertical; min-height: 80px; line-height: 1.5; }
select.input        { cursor: pointer; appearance: none; }

/* Label padrão */
.label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 5px;
}

/* Grupo de input */
.input-group {
  margin-bottom: 14px;
}

/* ── Cards ───────────────────────────────────────────────────── */
.card {
  background: var(--bg1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.card-head {
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
}
.card-body { padding: 16px 18px; }
.card-foot {
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  background: var(--bg2);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

/* ── Autocomplete portal (Velo.combobox) ─────────────────────── */
.ac-wrap { position: relative; }
.ac-drop {
  background: var(--bg1);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
  max-height: 240px;
  overflow-y: auto;
  min-width: 240px;
}
.ac-item {
  padding: 7px 11px;
  cursor: pointer;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.ac-item:last-child { border-bottom: none; }
.ac-item:hover, .ac-item.ac-active { background: var(--bg2); }
.ac-ref  { font-weight: 600; color: var(--accent); }
.ac-desc { color: var(--text3); font-size: 12px; }

/* ── Mensagens inline ────────────────────────────────────────── */
.msg {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.msg-error   { background: var(--red-dim);    border: 1px solid var(--red-border);    color: var(--red); }
.msg-success { background: var(--green-dim);  border: 1px solid var(--green-border);  color: var(--green); }
.msg-info    { background: var(--accent-dim); border: 1px solid var(--accent-glow);   color: var(--accent); }
.msg-warning { background: var(--amber-dim);  border: 1px solid var(--amber-border);  color: var(--amber); }

/* ── Tabelas ─────────────────────────────────────────────────── */
.tbl-wrap { overflow-x: auto; }
/* .tbl-wrap encostado directo a .card (sem passar por .card-body) fica sem
   padding lateral — tabela cola-se à borda. Aplica o mesmo padding do
   .card-body só quando falta o wrapper, para não duplicar quando já existe. */
.card > .tbl-wrap { padding: 0 18px; }
.card > .tbl-wrap:first-child { padding-top: 16px; }
/* .tbl-foot é irmão do .tbl-wrap (fora dele, ver sales_orders/invoices/quotes/returns) — sem esta
   regra fica de fora do fix acima e continua colado à borda (canto inferior do .card). */
.card > .tbl-foot { padding: 10px 18px; }
.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.tbl th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 5px 12px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.tbl td {
  padding: 5px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text2);
  vertical-align: middle;
}
.tbl tr:last-child td { border-bottom: none; }
.tbl tr:hover td { background: var(--bg2); color: var(--text1); }
th.sortable { cursor:pointer; user-select:none; }
th.sortable:hover { color:var(--accent); }

/* Cabeçalho fixo — tabela ganha scroll interno próprio e o thead fica sempre visível */
.tbl-wrap.tbl-sticky { max-height: 65vh; overflow: auto; }
.tbl-wrap.tbl-sticky .tbl th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--bg1);
}

/* Linha realçada ao voltar do detalhe — ver Velo.rememberRow/restoreRow */
.row-flash td { animation: rowFlash 1.5s ease-out; }
@keyframes rowFlash {
  from { background: var(--accent-glow); }
  to   { background: transparent; }
}

/* Alias — páginas mais antigas usam .data-table */
.data-table { width:100%; border-collapse:collapse; font-size:13px; }
.data-table th {
  text-align:left; font-size:11px; font-weight:600; color:var(--text3);
  text-transform:uppercase; letter-spacing:.5px; padding:5px 12px;
  border-bottom:1px solid var(--border); white-space:nowrap;
}
.data-table td {
  padding:5px 12px; border-bottom:1px solid var(--border);
  color:var(--text2); vertical-align:middle;
}
.data-table tr:last-child td { border-bottom:none; }
.data-table tr:hover td { background:var(--bg2); color:var(--text1); }

/* ── Estado badges (workflow state pills) ────────────────────── */
/* Base shape — partilhada por todos os .st-* e .badge-estado    */
.badge-estado,
.st-active, .st-inactive, .st-leave, .st-draft, .st-rascunho, .st-in_review,
.st-confirmed, .st-confirmada, .st-planeada, .st-producao,
.st-concluida, .st-completed, .st-terminada, .st-cancelada, .st-cancelled, .st-discontinued,
.st-arquivada, .st-shipped, .st-expedida, .st-received, .st-recebida,
.st-partial, .st-parcial, .st-in_preparation, .st-blocked,
.st-partially_shipped, .st-sick_leave, .st-licensed,
.st-baixo, .st-medio, .st-alto, .st-tier1, .st-tier2, .st-tier3,
.st-pendente, .st-confirmado, .st-ajustado, .st-recusado,
.st-pending, .st-adjusted, .st-rejected,
.st-ativo, .st-encerrado, .st-aberto, .st-fechado, .st-open, .st-closed,
.st-aguarda_envio, .st-em_transito, .st-entregue, .st-atrasado, .st-excecao,
.st-awaiting_shipment, .st-in_transit, .st-delivered, .st-delayed, .st-exception,
.st-emitida, .st-em_curso, .st-disponivel, .st-em_rota, .st-manutencao,
.st-falhada, .st-aberta, .st-reagendada, .st-resolvida, .st-activo, .st-inactivo,
.st-ok, .st-archived, .st-planned, .st-in_progress {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
/* Verde — activo / concluído */
.st-active, .st-leave, .st-concluida, .st-completed, .st-terminada,
.st-received, .st-recebida,
.st-baixo, .st-confirmado, .st-ativo, .st-entregue, .st-tier1,
.st-disponivel, .st-resolvida, .st-activo, .st-delivered,
.st-ok { background:var(--green-dim);  color:var(--green);  border:1px solid var(--green-border); }
/* Cinza — inactivo / rascunho / arquivado */
.st-inactive, .st-draft, .st-rascunho,
.st-in_review, .st-arquivada,
.st-encerrado, .st-fechado, .st-closed, .st-tier3, .st-inactivo,
.st-archived              { background:var(--bg3);        color:var(--text3);  border:1px solid var(--border); }
/* Azul — planeado / confirmado */
.st-confirmed, .st-confirmada,
.st-planeada,  .st-licensed,
.st-aberto, .st-open, .st-ajustado, .st-tier2, .st-emitida, .st-reagendada, .st-adjusted,
.st-planned { background:var(--accent-dim);  color:var(--accent); border:1px solid var(--accent-glow); }
/* Roxo — em curso / em trânsito */
.st-producao, .st-shipped,
.st-expedida, .st-em_transito, .st-em_curso, .st-em_rota, .st-in_transit,
.st-in_progress { background:var(--purple-dim);  color:var(--purple); border:1px solid var(--purple-border); }
/* Âmbar — parcial / em preparação */
.st-partial, .st-parcial,
.st-in_preparation, .st-partially_shipped,
.st-sick_leave, .st-medio, .st-pendente,
.st-aguarda_envio, .st-atrasado, .st-manutencao,
.st-pending, .st-awaiting_shipment, .st-delayed        { background:var(--amber-dim);   color:var(--amber);  border:1px solid var(--amber-border); }
/* Vermelho — cancelado / descontinuado / bloqueado */
.st-cancelada, .st-cancelled,
.st-discontinued, .st-blocked,
.st-alto, .st-recusado, .st-excecao, .st-falhada, .st-aberta,
.st-rejected, .st-exception { background:var(--red-dim);     color:var(--red);    border:1px solid var(--red-border); }

/* ── Stat cards ──────────────────────────────────────────────── */
.stat-row  { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.stat-card { flex:1; min-width:110px; background:var(--bg1); border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px; }
.stat-val  { font-size:22px; font-weight:700; color:var(--text1); line-height:1.1; }
.stat-lbl  { font-size:11.5px; color:var(--text3); margin-top:2px; }

/* ── Barra de filtros ────────────────────────────────────────── */
.filter-bar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:16px; }
.filter-bar .input { flex:1; min-width:160px; }
.filter-bar select.input { flex:0 0 auto; min-width:150px; max-width:220px; }
.filter-search { position:relative; flex:1; min-width:200px; max-width:340px; }
.filter-search i { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--text3); font-size:14px; pointer-events:none; }
.filter-search .input { padding-left:32px; }

/* ── Modais ──────────────────────────────────────────────────── */
.modal-backdrop, .modal-overlay {
  position: fixed;
  inset: 0;
  background: #00000080;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  backdrop-filter: blur(2px);
}
.modal {
  background: var(--bg1);
  border: 1px solid var(--border2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal-head, .modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
}
.modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}
.modal-foot, .modal-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
  background: var(--bg2);
}

/* ── Campos de formulário ────────────────────────────────────── */
.form-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 14px;
}
.form-row:last-child { margin-bottom: 0; }
.form-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text3);
}

/* ── Animações ───────────────────────────────────────────────── */
@keyframes fadeIn  { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes spin    { to   { transform: rotate(360deg); } }
@keyframes pulse   { 0%,100% { opacity: 1; } 50% { opacity: .5; } }

.animate-fade  { animation: fadeIn .2s ease; }
.animate-spin  { animation: spin 1s linear infinite; }
.animate-pulse { animation: pulse 1.5s ease infinite; }

/* ── Tema Claro Industrial ───────────────────────────────────── */
[data-theme="light"] {
  --bg0:      #e4e4e4;
  --bg1:      #ffffff;
  --bg2:      #f4f4f4;
  --bg3:      #e8e8e8;
  --bg4:      #d0d0d0;

  --border:   #cccccc;
  --border2:  #aaaaaa;

  --text1:    #1a1a1a;
  --text2:    #444444;
  --text3:    #777777;

  --accent:        #4f7cff;
  --accent-dim:    #e8e8e8;
  --accent-glow:   #4f7cff22;

  --green:         #16a34a;
  --green-dim:     #dcfce7;
  --green-border:  #16a34a30;

  --amber:         #d97706;
  --amber-dim:     #fef3c7;
  --amber-border:  #d9770630;

  --red:           #dc2626;
  --red-dim:       #fee2e2;
  --red-border:    #dc262630;

  --purple:        #7c3aed;
  --purple-dim:    #f3e8ff;
  --purple-border: #7c3aed30;

  --shadow: 0 2px 8px #00000012;
}

[data-theme="light"] body          { background: var(--bg0); color: var(--text1); }
[data-theme="light"] .sidebar      { background: #ececec; border-color: var(--border); }
[data-theme="light"] .topbar       { background: var(--bg1); border-color: var(--border); }
[data-theme="light"] .nav-item:hover { background: var(--bg3); }
[data-theme="light"] .nav-item.active { background: var(--accent-dim); }
[data-theme="light"] .dd-menu      { background: var(--bg1); border-color: var(--border2); }
[data-theme="light"] .dd-item:hover { background: var(--bg3); }
[data-theme="light"] .input,
[data-theme="light"] select.input,
[data-theme="light"] textarea.input { background: var(--bg1); border-color: var(--border2); color: var(--text1); }
[data-theme="light"] .card          { background: var(--bg1); border-color: var(--border); }
[data-theme="light"] .card-head,
[data-theme="light"] .card-foot,
[data-theme="light"] .modal-foot,
[data-theme="light"] .modal-footer  { background: var(--bg2); }
[data-theme="light"] .modal         { background: var(--bg1); border-color: var(--border2); }
/* :not() das variantes com cor própria — sem isto, esta regra (2 selectors,
   mais específica que ".btn-primary" etc. de 1 selector) ganhava sempre o
   cascade e apagava a cor de QUALQUER botão colorido em tema claro (tema por
   omissão sem preferência guardada — includes/header.php). Achado ao mandar
   cor ao botão Guardar da Ficha Técnica: o azul original também nunca se via. */
[data-theme="light"] .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-save-dirty):not(.btn-save-clean) { background: var(--bg2); border-color: var(--border2); color: var(--text1); }
[data-theme="light"] .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-save-dirty):not(.btn-save-clean):hover { background: var(--bg3); }
[data-theme="light"] .btn-ghost     { background: transparent; }
[data-theme="light"] .btn-ghost:hover { background: var(--bg3); }
[data-theme="light"] .user-pill     { background: var(--bg2); border-color: var(--border); }
[data-theme="light"] .user-pill:hover { background: var(--bg3); }
[data-theme="light"] .tbl tr:hover td,
[data-theme="light"] .data-table tr:hover td { background: var(--bg3); }
[data-theme="light"] .stat-card { background: var(--bg1); border-color: var(--border2); }

/* ── Tema Industrial (chão de fábrica — alto contraste) ───────── */
[data-theme="industrial"] {
  --bg0:      #121212;
  --bg1:      #1c1c1c;
  --bg2:      #242424;
  --bg3:      #2e2e2e;
  --bg4:      #383838;

  --border:   #3a3a3a;
  --border2:  #525252;

  --text1:    #f5f5f0;
  --text2:    #b0b0a8;
  --text3:    #767068;

  --accent:        #ff7a00;
  --accent-dim:    #3d2200;
  --accent-glow:   #ff7a0030;

  --green:         #4caf50;
  --green-dim:     #12300f;
  --green-border:  #4caf5030;

  --amber:         #ffc107;
  --amber-dim:     #3d2f00;
  --amber-border:  #ffc10730;

  --red:           #e53935;
  --red-dim:       #3a0d0d;
  --red-border:    #e5393530;

  --purple:        #5c9ead;
  --purple-dim:    #0f2b30;
  --purple-border: #5c9ead30;

  --radius-sm: 2px;
  --radius:    2px;
  --radius-lg: 4px;

  --shadow: 0 2px 6px #00000060;

  --font: 'Barlow Condensed', 'Segoe UI', system-ui, sans-serif;
}

[data-theme="industrial"] body          { background: var(--bg0); color: var(--text1); }
[data-theme="industrial"] .sidebar      { background: var(--bg1); border-color: var(--border); }
[data-theme="industrial"] .topbar       { background: var(--bg1); border-color: var(--border); }
[data-theme="industrial"] .nav-item:hover { background: var(--bg3); }
[data-theme="industrial"] .nav-item.active { background: var(--accent-dim); }
[data-theme="industrial"] .dd-menu      { background: var(--bg1); border-color: var(--border2); }
[data-theme="industrial"] .dd-item:hover { background: var(--bg3); }
[data-theme="industrial"] .input,
[data-theme="industrial"] select.input,
[data-theme="industrial"] textarea.input { background: var(--bg2); border-color: var(--border2); color: var(--text1); }
[data-theme="industrial"] .card          { background: var(--bg1); border-color: var(--border); }
[data-theme="industrial"] .card-head,
[data-theme="industrial"] .card-foot,
[data-theme="industrial"] .modal-foot,
[data-theme="industrial"] .modal-footer  { background: var(--bg2); }
[data-theme="industrial"] .modal         { background: var(--bg1); border-color: var(--border2); }
/* :not() das variantes com cor própria — mesmo problema do tema claro (ver
   comentário acima, junto a [data-theme="light"] .btn): sem isto, esta regra
   apagava a cor de qualquer botão colorido também no tema industrial. */
[data-theme="industrial"] .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-save-dirty):not(.btn-save-clean) { background: var(--bg2); border-color: var(--border2); color: var(--text1); }
[data-theme="industrial"] .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-save-dirty):not(.btn-save-clean):hover { background: var(--bg3); }
[data-theme="industrial"] .btn-ghost     { background: transparent; }
[data-theme="industrial"] .btn-ghost:hover { background: var(--bg3); }
[data-theme="industrial"] .user-pill     { background: var(--bg2); border-color: var(--border); }
[data-theme="industrial"] .user-pill:hover { background: var(--bg3); }
[data-theme="industrial"] .tbl tr:hover td,
[data-theme="industrial"] .data-table tr:hover td { background: var(--bg3); }
[data-theme="industrial"] .stat-card { background: var(--bg1); border-color: var(--border2); }
[data-theme="industrial"] th,
[data-theme="industrial"] .stat-lbl { letter-spacing: .06em; }

/* ── Tema Papel (sépia — leitura longa: relatórios, fichas técnicas) ─ */
[data-theme="papel"] {
  --bg0:      #f5efe1;
  --bg1:      #fffdf7;
  --bg2:      #efe4cd;
  --bg3:      #e7d9ba;
  --bg4:      #dbc79a;

  --border:   #d9c6a0;
  --border2:  #bfa877;

  --text1:    #3a2f21;
  --text2:    #6b5a42;
  --text3:    #96805d;

  --accent:        #a4531f;
  --accent-dim:    #f0e0c4;
  --accent-glow:   #a4531f28;

  --green:         #4d7c3f;
  --green-dim:     #e3ecd6;
  --green-border:  #4d7c3f30;

  --amber:         #a3790b;
  --amber-dim:     #f7ecc4;
  --amber-border:  #a3790b30;

  --red:           #a13a2f;
  --red-dim:       #f6ddd7;
  --red-border:    #a13a2f30;

  --purple:        #6b4f8a;
  --purple-dim:    #ece2f5;
  --purple-border: #6b4f8a30;

  --shadow: 0 2px 8px #3a2f2118;

  --font: 'Lora', 'Segoe UI', system-ui, serif;
}

[data-theme="papel"] body          { background: var(--bg0); color: var(--text1); }
[data-theme="papel"] .sidebar      { background: var(--bg2); border-color: var(--border); }
[data-theme="papel"] .topbar       { background: var(--bg1); border-color: var(--border); }
[data-theme="papel"] .nav-item:hover { background: var(--bg3); }
[data-theme="papel"] .nav-item.active { background: var(--accent-dim); }
[data-theme="papel"] .dd-menu      { background: var(--bg1); border-color: var(--border2); }
[data-theme="papel"] .dd-item:hover { background: var(--bg3); }
[data-theme="papel"] .input,
[data-theme="papel"] select.input,
[data-theme="papel"] textarea.input { background: var(--bg1); border-color: var(--border2); color: var(--text1); }
[data-theme="papel"] .card          { background: var(--bg1); border-color: var(--border); }
[data-theme="papel"] .card-head,
[data-theme="papel"] .card-foot,
[data-theme="papel"] .modal-foot,
[data-theme="papel"] .modal-footer  { background: var(--bg2); }
[data-theme="papel"] .modal         { background: var(--bg1); border-color: var(--border2); }
/* :not() das variantes com cor própria — mesmo problema do tema claro/industrial */
[data-theme="papel"] .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-save-dirty):not(.btn-save-clean) { background: var(--bg2); border-color: var(--border2); color: var(--text1); }
[data-theme="papel"] .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-save-dirty):not(.btn-save-clean):hover { background: var(--bg3); }
[data-theme="papel"] .btn-ghost     { background: transparent; }
[data-theme="papel"] .btn-ghost:hover { background: var(--bg3); }
[data-theme="papel"] .user-pill     { background: var(--bg2); border-color: var(--border); }
[data-theme="papel"] .user-pill:hover { background: var(--bg3); }
[data-theme="papel"] .tbl tr:hover td,
[data-theme="papel"] .data-table tr:hover td { background: var(--bg3); }
[data-theme="papel"] .stat-card { background: var(--bg1); border-color: var(--border2); }

/* ── Tema Alto Contraste (acessibilidade WCAG AAA) ────────────── */
[data-theme="contraste"] {
  --bg0:      #000000;
  --bg1:      #0a0a0a;
  --bg2:      #151515;
  --bg3:      #202020;
  --bg4:      #2c2c2c;

  --border:   #5a5a5a;
  --border2:  #8a8a8a;

  --text1:    #ffffff;
  --text2:    #e0e0e0;
  --text3:    #b0b0b0;

  --accent:        #3ea6ff;
  --accent-dim:    #082638;
  --accent-glow:   #3ea6ff40;

  --green:         #00e676;
  --green-dim:     #063018;
  --green-border:  #00e67640;

  --amber:         #ffcc00;
  --amber-dim:     #332b00;
  --amber-border:  #ffcc0040;

  --red:           #ff5252;
  --red-dim:       #3a0d0d;
  --red-border:    #ff525240;

  --purple:        #c792ff;
  --purple-dim:    #2a1240;
  --purple-border: #c792ff40;

  --radius-sm: 2px;
  --radius:    2px;
  --radius-lg: 3px;

  --shadow: 0 0 0 1px #ffffff25;

  --font: 'Atkinson Hyperlegible', 'Segoe UI', system-ui, sans-serif;
}

[data-theme="contraste"] body          { background: var(--bg0); color: var(--text1); }
[data-theme="contraste"] .sidebar      { background: var(--bg1); border-color: var(--border); }
[data-theme="contraste"] .topbar       { background: var(--bg1); border-color: var(--border); }
[data-theme="contraste"] .nav-item:hover { background: var(--bg3); }
[data-theme="contraste"] .nav-item.active { background: var(--accent-dim); outline: 1px solid var(--accent); }
[data-theme="contraste"] .dd-menu      { background: var(--bg1); border-color: var(--border2); }
[data-theme="contraste"] .dd-item:hover { background: var(--bg3); }
[data-theme="contraste"] .input,
[data-theme="contraste"] select.input,
[data-theme="contraste"] textarea.input { background: var(--bg2); border-color: var(--border2); color: var(--text1); }
[data-theme="contraste"] .card          { background: var(--bg1); border-color: var(--border); }
[data-theme="contraste"] .card-head,
[data-theme="contraste"] .card-foot,
[data-theme="contraste"] .modal-foot,
[data-theme="contraste"] .modal-footer  { background: var(--bg2); }
[data-theme="contraste"] .modal         { background: var(--bg1); border-color: var(--border2); }
/* :not() das variantes com cor própria — mesmo problema do tema claro/industrial */
[data-theme="contraste"] .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-save-dirty):not(.btn-save-clean) { background: var(--bg2); border-color: var(--border2); color: var(--text1); }
[data-theme="contraste"] .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-save-dirty):not(.btn-save-clean):hover { background: var(--bg3); }
[data-theme="contraste"] .btn-ghost     { background: transparent; }
[data-theme="contraste"] .btn-ghost:hover { background: var(--bg3); }
[data-theme="contraste"] .user-pill     { background: var(--bg2); border-color: var(--border); }
[data-theme="contraste"] .user-pill:hover { background: var(--bg3); }
[data-theme="contraste"] .tbl tr:hover td,
[data-theme="contraste"] .data-table tr:hover td { background: var(--bg3); }
[data-theme="contraste"] .stat-card { background: var(--bg1); border-color: var(--border2); }
[data-theme="contraste"] a          { text-decoration: underline; }

/* ── Tema Terminal (verde-fósforo, monoespaçado — vibe dev/CLI) ── */
[data-theme="terminal"] {
  --bg0:      #0a0f0a;
  --bg1:      #0f150f;
  --bg2:      #151d15;
  --bg3:      #1c261c;
  --bg4:      #243024;

  --border:   #2a3a2a;
  --border2:  #3d523d;

  --text1:    #c9f5c9;
  --text2:    #86bf86;
  --text3:    #4f754f;

  --accent:        #00ff41;
  --accent-dim:    #0a2e12;
  --accent-glow:   #00ff4130;

  --green:         #00ff41;
  --green-dim:     #0a2e12;
  --green-border:  #00ff4130;

  --amber:         #ffb000;
  --amber-dim:     #3d2900;
  --amber-border:  #ffb00030;

  --red:           #ff3b3b;
  --red-dim:       #3a0d0d;
  --red-border:    #ff3b3b30;

  --purple:        #bf5fff;
  --purple-dim:    #2a0f3a;
  --purple-border: #bf5fff30;

  --radius-sm: 2px;
  --radius:    2px;
  --radius-lg: 3px;

  --shadow: 0 0 16px #00ff4118;

  --font: 'JetBrains Mono', 'Cascadia Code', 'Consolas', monospace;
  --mono: 'JetBrains Mono', 'Cascadia Code', 'Consolas', monospace;
}

[data-theme="terminal"] body          { background: var(--bg0); color: var(--text1); }
[data-theme="terminal"] .sidebar      { background: var(--bg1); border-color: var(--border); }
[data-theme="terminal"] .topbar       { background: var(--bg1); border-color: var(--border); }
[data-theme="terminal"] .nav-item:hover { background: var(--bg3); }
[data-theme="terminal"] .nav-item.active { background: var(--accent-dim); }
[data-theme="terminal"] .dd-menu      { background: var(--bg1); border-color: var(--border2); }
[data-theme="terminal"] .dd-item:hover { background: var(--bg3); }
[data-theme="terminal"] .input,
[data-theme="terminal"] select.input,
[data-theme="terminal"] textarea.input { background: var(--bg2); border-color: var(--border2); color: var(--text1); }
[data-theme="terminal"] .card          { background: var(--bg1); border-color: var(--border); }
[data-theme="terminal"] .card-head,
[data-theme="terminal"] .card-foot,
[data-theme="terminal"] .modal-foot,
[data-theme="terminal"] .modal-footer  { background: var(--bg2); }
[data-theme="terminal"] .modal         { background: var(--bg1); border-color: var(--border2); }
/* :not() das variantes com cor própria — mesmo problema do tema claro/industrial */
[data-theme="terminal"] .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-save-dirty):not(.btn-save-clean) { background: var(--bg2); border-color: var(--border2); color: var(--text1); }
[data-theme="terminal"] .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-save-dirty):not(.btn-save-clean):hover { background: var(--bg3); }
[data-theme="terminal"] .btn-ghost     { background: transparent; }
[data-theme="terminal"] .btn-ghost:hover { background: var(--bg3); }
[data-theme="terminal"] .user-pill     { background: var(--bg2); border-color: var(--border); }
[data-theme="terminal"] .user-pill:hover { background: var(--bg3); }
[data-theme="terminal"] .tbl tr:hover td,
[data-theme="terminal"] .data-table tr:hover td { background: var(--bg3); }
[data-theme="terminal"] .stat-card { background: var(--bg1); border-color: var(--border2); }

/* ── Tema Pastel (suave, arredondado — CRM/RH voltado ao utilizador) ─ */
[data-theme="pastel"] {
  --bg0:      #faf5fa;
  --bg1:      #ffffff;
  --bg2:      #f3ecf6;
  --bg3:      #ebe0f0;
  --bg4:      #ddc9e8;

  --border:   #e3d3ec;
  --border2:  #c9aedb;

  --text1:    #3a2e42;
  --text2:    #7a6a85;
  --text3:    #a999b3;

  --accent:        #d1699e;
  --accent-dim:    #fbe6f0;
  --accent-glow:   #d1699e28;

  --green:         #52b788;
  --green-dim:     #e3f5ea;
  --green-border:  #52b78830;

  --amber:         #e0a020;
  --amber-dim:     #fdf1dc;
  --amber-border:  #e0a02030;

  --red:           #e2726f;
  --red-dim:       #fde6e6;
  --red-border:    #e2726f30;

  --purple:        #9b7fe0;
  --purple-dim:    #ede7fb;
  --purple-border: #9b7fe030;

  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 16px;

  --shadow: 0 4px 16px #3a2e4212;

  --font: 'Nunito', 'Segoe UI', system-ui, sans-serif;
}

[data-theme="pastel"] body          { background: var(--bg0); color: var(--text1); }
[data-theme="pastel"] .sidebar      { background: var(--bg2); border-color: var(--border); }
[data-theme="pastel"] .topbar       { background: var(--bg1); border-color: var(--border); }
[data-theme="pastel"] .nav-item:hover { background: var(--bg3); }
[data-theme="pastel"] .nav-item.active { background: var(--accent-dim); }
[data-theme="pastel"] .dd-menu      { background: var(--bg1); border-color: var(--border2); }
[data-theme="pastel"] .dd-item:hover { background: var(--bg3); }
[data-theme="pastel"] .input,
[data-theme="pastel"] select.input,
[data-theme="pastel"] textarea.input { background: var(--bg1); border-color: var(--border2); color: var(--text1); }
[data-theme="pastel"] .card          { background: var(--bg1); border-color: var(--border); }
[data-theme="pastel"] .card-head,
[data-theme="pastel"] .card-foot,
[data-theme="pastel"] .modal-foot,
[data-theme="pastel"] .modal-footer  { background: var(--bg2); }
[data-theme="pastel"] .modal         { background: var(--bg1); border-color: var(--border2); }
/* :not() das variantes com cor própria — mesmo problema do tema claro/industrial */
[data-theme="pastel"] .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-save-dirty):not(.btn-save-clean) { background: var(--bg2); border-color: var(--border2); color: var(--text1); }
[data-theme="pastel"] .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-save-dirty):not(.btn-save-clean):hover { background: var(--bg3); }
[data-theme="pastel"] .btn-ghost     { background: transparent; }
[data-theme="pastel"] .btn-ghost:hover { background: var(--bg3); }
[data-theme="pastel"] .user-pill     { background: var(--bg2); border-color: var(--border); }
[data-theme="pastel"] .user-pill:hover { background: var(--bg3); }
[data-theme="pastel"] .tbl tr:hover td,
[data-theme="pastel"] .data-table tr:hover td { background: var(--bg3); }
[data-theme="pastel"] .stat-card { background: var(--bg1); border-color: var(--border2); }

/* ── Tema Corporate Navy (executivo — dashboards/financeiro) ──── */
[data-theme="navy"] {
  --bg0:      #0b1220;
  --bg1:      #101a2e;
  --bg2:      #16223b;
  --bg3:      #1c2c48;
  --bg4:      #24365a;

  --border:   #22314f;
  --border2:  #34486e;

  --text1:    #eef2fa;
  --text2:    #9aa8c4;
  --text3:    #5f6f92;

  --accent:        #c9a54c;
  --accent-dim:    #3a2f10;
  --accent-glow:   #c9a54c30;

  --green:         #3ecf8e;
  --green-dim:     #0d3327;
  --green-border:  #3ecf8e30;

  --amber:         #e0a63d;
  --amber-dim:     #3a2600;
  --amber-border:  #e0a63d30;

  --red:           #e3564f;
  --red-dim:       #3a0d0d;
  --red-border:    #e3564f30;

  --purple:        #8f8ff0;
  --purple-dim:    #201f4d;
  --purple-border: #8f8ff030;

  --radius-sm: 3px;
  --radius:    5px;
  --radius-lg: 7px;

  --shadow: 0 6px 24px #00000050;

  --font: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
}

[data-theme="navy"] body          { background: var(--bg0); color: var(--text1); }
[data-theme="navy"] .sidebar      { background: var(--bg1); border-color: var(--border); }
[data-theme="navy"] .topbar       { background: var(--bg1); border-color: var(--border); }
[data-theme="navy"] .nav-item:hover { background: var(--bg3); }
[data-theme="navy"] .nav-item.active { background: var(--accent-dim); }
[data-theme="navy"] .dd-menu      { background: var(--bg1); border-color: var(--border2); }
[data-theme="navy"] .dd-item:hover { background: var(--bg3); }
[data-theme="navy"] .input,
[data-theme="navy"] select.input,
[data-theme="navy"] textarea.input { background: var(--bg2); border-color: var(--border2); color: var(--text1); }
[data-theme="navy"] .card          { background: var(--bg1); border-color: var(--border); }
[data-theme="navy"] .card-head,
[data-theme="navy"] .card-foot,
[data-theme="navy"] .modal-foot,
[data-theme="navy"] .modal-footer  { background: var(--bg2); }
[data-theme="navy"] .modal         { background: var(--bg1); border-color: var(--border2); }
/* :not() das variantes com cor própria — mesmo problema do tema claro/industrial */
[data-theme="navy"] .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-save-dirty):not(.btn-save-clean) { background: var(--bg2); border-color: var(--border2); color: var(--text1); }
[data-theme="navy"] .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-save-dirty):not(.btn-save-clean):hover { background: var(--bg3); }
[data-theme="navy"] .btn-ghost     { background: transparent; }
[data-theme="navy"] .btn-ghost:hover { background: var(--bg3); }
[data-theme="navy"] .user-pill     { background: var(--bg2); border-color: var(--border); }
[data-theme="navy"] .user-pill:hover { background: var(--bg3); }
[data-theme="navy"] .tbl tr:hover td,
[data-theme="navy"] .data-table tr:hover td { background: var(--bg3); }
[data-theme="navy"] .stat-card { background: var(--bg1); border-color: var(--border2); }

/* ── Tooltip de ajuda contextual (.help-tip[data-help="..."]) ── */
.help-tip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--bg3); border: 1px solid var(--border2);
  color: var(--text3); font-size: 10px; font-weight: 700;
  cursor: help; position: relative; vertical-align: middle;
  margin-left: 4px; flex-shrink: 0; line-height: 1;
  text-decoration: none; user-select: none;
}
.help-tip::after {
  content: attr(data-help);
  position: absolute; bottom: calc(100% + 7px); left: 50%;
  transform: translateX(-50%);
  background: var(--bg4); border: 1px solid var(--border2);
  color: var(--text1); font-size: 12px; font-weight: 400;
  white-space: normal; width: 210px;
  padding: 7px 10px; border-radius: var(--radius);
  pointer-events: none; opacity: 0; transition: opacity .15s;
  z-index: 9999; line-height: 1.4; text-transform: none;
  letter-spacing: normal; box-shadow: 0 4px 12px rgba(0,0,0,.35);
}
.help-tip:hover::after { opacity: 1; }

/* ── Favoritos da sidebar ─────────────────────────────────────── */
.nav-fav-btn {
  background: none; border: none; padding: 2px 4px; cursor: pointer;
  flex-shrink: 0; line-height: 1; margin-left: auto; opacity: 0;
  transition: opacity .15s; font-size: 13px; color: var(--text3);
  display: flex; align-items: center;
}
.nav-item:hover .nav-fav-btn { opacity: 1; }
.nav-fav-btn.is-fav { opacity: 1; color: var(--amber); }
#sidebar-favs-section .nav-sep { margin: 4px 0; }
#sidebar-favs-label {
  padding: 3px 10px 3px; font-size: 10px; font-weight: 700;
  color: var(--text3); text-transform: uppercase; letter-spacing: .06em;
}

/* ── Resize handle da sidebar ────────────────────────────────── */
#sidebarResizeHandle {
  position: absolute; right: -4px; top: 0; bottom: 0; width: 8px;
  cursor: col-resize; z-index: 10;
  display: flex; align-items: center; justify-content: center;
}
#sidebarResizeHandle::after {
  content: '';
  display: block;
  width: 3px; height: 32px; border-radius: 99px;
  background: var(--border);
  transition: background .15s, height .15s;
}
#sidebarResizeHandle.hov::after,
#sidebarResizeHandle.dragging::after {
  background: var(--accent);
  height: 48px;
}

/* ── Responsivo — Tablet (≤ 900px) ───────────────────────────── */
@media (max-width: 900px) {
  .stat-val   { font-size: 18px; }
  .stat-card  { padding: 10px 12px; }
  .page-head-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .page-head-row > div:last-child { flex-wrap: wrap; }
  .main       { padding: 16px 14px; }
  .filter-bar { flex-wrap: wrap; }
  .filter-search { min-width: 140px; }
}

/* ── Responsivo — Mobile/Tablet estreito (≤ 640px) ───────────── */
@media (max-width: 640px) {
  .stat-row   { flex-direction: column; }
  .stat-card  { min-width: unset; }
  .tbl-wrap   { overflow-x: auto; }
  .tbl, .data-table { min-width: 520px; }
  .main       { padding: 12px 10px; }
  .page-head h1 { font-size: 16px; }
  .modal      { max-width: calc(100vw - 24px) !important; }
  .filter-bar .input, .filter-bar select.input { min-width: 100%; }
}