/* Modo escuro. Activo quando <html data-theme="dark"> (definido por theme.js).
   Carregar depois do <style> de cada página: redefine as variáveis e as
   superfícies que as páginas pintam com cores fixas. */

html[data-theme="dark"] {
  --navy: #0E0E0E;
  --ink: #E6E9EF;
  --muted: #9AA3B2;
  --bg: #121212;
  --border: #2F2F2F;
  --surface: #1B1B1B;
  --surface-2: #232323;
  --gold-text: #D9BC85;
}

/* Fundo e texto base */
html[data-theme="dark"] body { background: var(--bg); color: var(--ink); }

/* Superfícies (cartões, tabelas, modais, campos) */
html[data-theme="dark"] .card,
html[data-theme="dark"] .welcome,
html[data-theme="dark"] table,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .sess,
html[data-theme="dark"] .shell,
html[data-theme="dark"] .opcao,
html[data-theme="dark"] .painel {
  background: var(--surface);
  border-color: var(--border);
}
html[data-theme="dark"] .opcao[aria-checked="true"] { border-color: var(--gold); }
html[data-theme="dark"] th,
html[data-theme="dark"] .modal .u-info,
html[data-theme="dark"] .perm-group h3 { background: var(--surface-2); }
html[data-theme="dark"] tbody tr:hover { background: var(--surface-2); }

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] .field input,
html[data-theme="dark"] .field select,
html[data-theme="dark"] .perm-controls select {
  background: var(--bg);
  color: var(--ink);
  border-color: var(--border);
}
html[data-theme="dark"] .field input:disabled,
html[data-theme="dark"] .field select:disabled { background: var(--surface-2); color: var(--muted); }
html[data-theme="dark"] input::placeholder { color: #737373; }

/* Botões */
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .shell .btn {
  background: var(--gold);
  color: #161616;
}
html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] .shell .btn:hover { background: var(--gold-text); }
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] main .btn:not(.btn-primary):not(.btn-danger) {
  background: var(--surface-2);
  color: var(--ink);
  border-color: var(--border);
}
html[data-theme="dark"] main .btn.danger { color: #F87171; border-color: #5B2626; }
html[data-theme="dark"] main .btn.danger:hover { background: rgba(239,68,68,.12); }

/* Links e texto em cor de marca */
html[data-theme="dark"] .btn-link,
html[data-theme="dark"] .user-row-action,
html[data-theme="dark"] .links a { color: var(--gold-text); }
html[data-theme="dark"] .btn-link.danger { color: #F87171; }
html[data-theme="dark"] .shell .brand .logo { color: var(--ink); }
html[data-theme="dark"] .modal .close { color: var(--muted); }

/* Mensagens */
html[data-theme="dark"] .error,
html[data-theme="dark"] .form-erro { background: rgba(239,68,68,.12); color: #FCA5A5; }
html[data-theme="dark"] .shell .info { background: rgba(16,185,129,.12); color: #6EE7B7; }
html[data-theme="dark"] .toast { background: var(--surface-2); border: 1px solid var(--border); }

/* Chips e etiquetas */
html[data-theme="dark"] .role-admin,
html[data-theme="dark"] .chip-concedida { background: rgba(245,158,11,.15); color: #FCD34D; }
html[data-theme="dark"] .role-comercial { background: rgba(59,130,246,.15); color: #93C5FD; }
html[data-theme="dark"] .role-producao,
html[data-theme="dark"] .chip-ok,
html[data-theme="dark"] .chip-default-on { background: rgba(16,185,129,.15); color: #6EE7B7; }
html[data-theme="dark"] .role-assistente,
html[data-theme="dark"] .badge.user { background: rgba(99,102,241,.18); color: #A5B4FC; }
html[data-theme="dark"] .role-logistica { background: rgba(236,72,153,.15); color: #F9A8D4; }
html[data-theme="dark"] .chip-off,
html[data-theme="dark"] .chip-default-off { background: var(--surface-2); color: var(--muted); }
html[data-theme="dark"] .chip-revogada { background: rgba(239,68,68,.15); color: #FCA5A5; }
html[data-theme="dark"] .chip-dono,
html[data-theme="dark"] .badge { background: rgba(196,164,106,.18); color: var(--gold-text); }

/* Barra lateral e barra de topo do mobile ficam navy escuro */
html[data-theme="dark"] aside { border-right: 1px solid var(--border); }
html[data-theme="dark"] .mbar { border-bottom: 1px solid var(--border); }