/* vmshub-theme.css — camada de TEMA (claro/escuro) e DENSIDADE do VMSHub. P0a (11/10/2026).
 * Carregar DEPOIS de css/style.css e de vendor/bootstrap (Stroyka sobre Bootstrap 5.1, sem data-bs-theme). Camada de SOBRESCRITA: nao reescreve os 756 hex do template.
 * Ativacao: <html data-theme="light|dark|system"> (D5-P0b: ausente = CLARO; so "system" segue prefers-color-scheme) e <html data-density="dense"> (ausente = confortavel).
 * Quem grava o atributo: vmshub-theme.js (antes da 1a pintura, cache do motor de preferencias; a verdade e o servidor).
 * REGRAS (a sonda p0a_theme_probe morde cada uma):
 *   1. Cor nova SO por var(--...) — nenhum hex fora dos blocos de TOKENS (blocos 1-3).
 *   2. Os dois blocos escuros (media + [data-theme=dark]) tem de ser IDENTICOS.
 *   3. #ffd333 NUNCA e cor de TEXTO no tema claro (1,44:1): texto de destaque usa --accent-text (claro #7a5c00, escuro #ffd333). #ffd333 so como FUNDO (botao primario) com --on-accent.
 *   4. Todo par texto/fundo declarado na sonda >= 4,5:1 nos 2 temas. text-muted no escuro = #9aa5ae.
 *   5. NAO usar `filter:` em img/video/canvas/miniatura (quebraria rostos/placas); o unico filter e o do icone .btn-close no escuro. Video e miniatura de camera ficam pretos nos dois temas (nada aqui os toca).
 * Limites declarados: cores inline (style=) e JS que monta HTML com hex fixo (~260 style=) so sao alcancadas onde a tela usa var(--token, <hex claro>) — R2 (12/10/2026) migrou as do Escuro MEDIDO (18 telas, 1280 e 390 px); o resto segue como estava.
 * R2 (12/10/2026): (a) as variantes `.border-<cor>` sao REDECLARADAS depois do `.border` (A1); (b) `.card-body`, `.sa-meta__list`, `code`, `.btn-outline-danger`, `.badge.bg-secondary`, `.btn:disabled` ganham TOKEN proprio cujo valor no CLARO e o do template (Claro identico) e so o ESCURO muda;
 * R3 (12/10/2026): `.badge.bg-secondary` no CLARO deixa de ser branco sobre #e6e8eb (1,23:1, defeito de producao, decisao do dono) — texto passa a --badge-sec-fg #212529; `.badge.text-bg-light` ganha regra (--badge-light-*).
 *     (c) tokens de componente (--track-bg, --tile-*, --chart-*, ...) = hex antigo no Claro; os componentes escrevem var(--token, <hex claro>).
 */

/* ===== 1. TOKENS — tema claro (igual ao que o template ja mostra, com o contraste corrigido) ===== */
:root {
  color-scheme: light;
  --bg: #f5f7fa; --surface: #ffffff; --surface-2: #f0f2f5; --hover: #ebedf0;
  --border: #2125291a; --input-border: #ced4da; --shadow: 0 1px 3px #00000026;
  --text: #212529; --muted: #5a636b; --link: #0b5be5;
  --accent: #ffd333; --accent-hover: #f5c000; --on-accent: #212529; --accent-text: #7a5c00;
  --ok-text: #00791f; --ok-fill: #00791f; --danger-text: #c52b2b; --danger-fill: #db3737;
  --warn-text: #8f5f00; --warn-fill: #ffab19; --on-warn: #212529; --info-fill: #00a2ad; --on-info: #212529;
  --sidebar: #3d464d; --sidebar-text: #ffffff; --sidebar-muted: #b9c8d0; --sidebar-hover: #48525a;
  --on-fill: #ffffff; --light-bg: #f8f9fa;
  /* R2 (12/10): tokens de COMPONENTE. Valor do CLARO = o hex que o template/componente ja usava (Claro identico); so o ESCURO muda. */
  --meta-text: #6c757d; --code-text: #d63384; --btn-od: #db3737; --track-bg: #eef1f5; --row-hover: #f4f6f9; --cutmark-text: #7c3aed;
  --tile-bg: #f8f9fb; --tile-filled-bg: #eaf1ff; --tile-filled-bd: #2f6fed; --empty-opacity: .4; --btn-dis-op: .65;
  --badge-sec-bg: #e6e8eb; --badge-sec-fg: #212529; --badge-light-bg: #f0f2f5; --badge-light-fg: #212529; --chart-text: #666666; --chart-grid: #0000001a; --chart-bar: #3e7bfa;
  --bc-primary: #ffd333; --bc-secondary: #e6e8eb; --bc-success: #00a629; --bc-info: #00a2ad; --bc-warning: #ffab19; --bc-danger: #db3737; --bc-light: #f8f9fa; --bc-dark: #3d464d; --bc-white: #ffffff;
}

/* ===== 2. TOKENS — escuro por preferencia do sistema (D5-P0b: SO quando o usuario escolheu EXPLICITAMENTE "Sistema" = data-theme="system"; sem atributo, "light" ou "dark" o @media nao atua) ===== */
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    color-scheme: dark;
    --bg: #14181c; --surface: #1c2227; --surface-2: #232a31; --hover: #2b333b;
    --border: #ffffff1f; --input-border: #3a444d; --shadow: none;
    --text: #e6e9ec; --muted: #9aa5ae; --link: #6ea8fe;
    --accent: #ffd333; --accent-hover: #ffe066; --on-accent: #212529; --accent-text: #ffd333;
    --ok-text: #4ade80; --ok-fill: #198754; --danger-text: #ff6b6b; --danger-fill: #dc3545;
    --warn-text: #ffab19; --warn-fill: #ffab19; --on-warn: #212529; --info-fill: #00a2ad; --on-info: #212529;
    --sidebar: #0f1316; --sidebar-text: #e6e9ec; --sidebar-muted: #b9c8d0; --sidebar-hover: #1a2026;
  --on-fill: #ffffff; --light-bg: #232a31;
  /* R2 (12/10): tokens de COMPONENTE no escuro (os dois blocos escuros ficam IDENTICOS). */
  --meta-text: #9aa5ae; --code-text: #f783ac; --btn-od: #ff6b6b; --track-bg: #232a31; --row-hover: #2b333b; --cutmark-text: #c4b5fd;
  --tile-bg: #232a31; --tile-filled-bg: #1e2a44; --tile-filled-bd: #6ea8fe; --empty-opacity: .75; --btn-dis-op: .8;
  --badge-sec-bg: #3a444d; --badge-sec-fg: #e6e9ec; --badge-light-bg: #ffffff00; --badge-light-fg: #ffffff; --chart-text: #9aa5ae; --chart-grid: #ffffff1f; --chart-bar: #3e7bfa;
  --bc-primary: #ffd333; --bc-secondary: #3a444d; --bc-success: #198754; --bc-info: #00a2ad; --bc-warning: #ffab19; --bc-danger: #dc3545; --bc-light: #232a31; --bc-dark: #3a444d; --bc-white: #ffffff1f;
  }
}

/* ===== 3. TOKENS — escuro escolhido ===== */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #14181c; --surface: #1c2227; --surface-2: #232a31; --hover: #2b333b;
  --border: #ffffff1f; --input-border: #3a444d; --shadow: none;
  --text: #e6e9ec; --muted: #9aa5ae; --link: #6ea8fe;
  --accent: #ffd333; --accent-hover: #ffe066; --on-accent: #212529; --accent-text: #ffd333;
  --ok-text: #4ade80; --ok-fill: #198754; --danger-text: #ff6b6b; --danger-fill: #dc3545;
  --warn-text: #ffab19; --warn-fill: #ffab19; --on-warn: #212529; --info-fill: #00a2ad; --on-info: #212529;
  --sidebar: #0f1316; --sidebar-text: #e6e9ec; --sidebar-muted: #b9c8d0; --sidebar-hover: #1a2026;
  --on-fill: #ffffff; --light-bg: #232a31;
  /* R2 (12/10): tokens de COMPONENTE no escuro (os dois blocos escuros ficam IDENTICOS). */
  --meta-text: #9aa5ae; --code-text: #f783ac; --btn-od: #ff6b6b; --track-bg: #232a31; --row-hover: #2b333b; --cutmark-text: #c4b5fd;
  --tile-bg: #232a31; --tile-filled-bg: #1e2a44; --tile-filled-bd: #6ea8fe; --empty-opacity: .75; --btn-dis-op: .8;
  --badge-sec-bg: #3a444d; --badge-sec-fg: #e6e9ec; --badge-light-bg: #ffffff00; --badge-light-fg: #ffffff; --chart-text: #9aa5ae; --chart-grid: #ffffff1f; --chart-bar: #3e7bfa;
  --bc-primary: #ffd333; --bc-secondary: #3a444d; --bc-success: #198754; --bc-info: #00a2ad; --bc-warning: #ffab19; --bc-danger: #dc3545; --bc-light: #232a31; --bc-dark: #3a444d; --bc-white: #ffffff1f;
}

/* ===== 4. Ponte para as variaveis do Bootstrap (o template redefiniu --bs-body-bg/-color no :root) ===== */
:root { --bs-body-bg: var(--bg); --bs-body-color: var(--text); }
body { background-color: var(--bg); color: var(--text); }
a { color: var(--link); }

/* ===== 5. Superficies ===== */
.card, .card-group, .list-group-item, .modal-content, .dropdown-menu, .popover, .toast, .offcanvas { background-color: var(--surface); color: var(--text); }
.card, .card-group { box-shadow: var(--shadow); }
.card-header, .card-footer { border-color: var(--border); }
/* R2 Escuro (12/10): classes do template que fixam COR em hex e ganham do tema. Valor do Claro = o do template (Claro identico). */
.card-body { color: var(--text); }   /* bootstrap.ltr.css:4534 `.card-body{color:#212529}`: 61 dos 70 ilegiveis do Escuro */
.sa-meta__list { color: var(--meta-text); }   /* style.css: `.sa-meta__list{color:#6c757d}` (migalhas das telas de cliente) */
code { color: var(--code-text); }   /* bootstrap `code{color:#d63384}` (`a > code` e `pre code` do Bootstrap seguem mais especificos) */
.btn-outline-danger { --sa-button--normal-border-color: var(--btn-od); --sa-button--normal-font-color: var(--btn-od); }
.badge.bg-secondary { background-color: var(--badge-sec-bg) !important; color: var(--badge-sec-fg); }
.badge.text-bg-light { background-color: var(--badge-light-bg); color: var(--badge-light-fg); }   /* r3: `text-bg-*` NAO existe no Bootstrap 5.1 (CameraConfig.html "padrao"): sem a regra = branco sobre branco no Claro (1,00:1); Escuro mantem o aspecto de antes */
.btn:disabled, .btn.disabled { opacity: var(--btn-dis-op); }   /* bootstrap: .65 (Claro identico); no Escuro .8 para o texto do botao primario desabilitado (#212529 sobre #ffd333) chegar a 4,5:1 */
.list-group-item { border-color: var(--border); }
.modal-content { border-color: var(--border); }
.dropdown-item { color: var(--text); }
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--hover); color: var(--text); }
.sa-toolbar__body { background-color: var(--surface); color: var(--text); }
.sa-toolbar__button:hover, .sa-toolbar-user:hover, .sa-toolbar-user:focus { background-color: var(--hover); }
.sa-toolbar__button.show, .sa-toolbar__button:active, .sa-toolbar-user.show, .sa-toolbar-user:active { background-color: var(--hover); }
.sa-layout__sidebar { background-color: var(--surface); }
.sa-sidebar { background-color: var(--sidebar); color: var(--sidebar-text); }
.sa-nav--sidebar .sa-nav__link:hover { background-color: var(--sidebar-hover); }
.sa-nav--sidebar .sa-nav__section-title { color: var(--sidebar-muted); }
.sa-app__footer { color: var(--muted); border-top-color: var(--border); }
.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus { background: var(--surface-2); }
.page-link { background-color: var(--surface); color: var(--link); border-color: var(--border); }
.page-link:hover { background-color: var(--hover); color: var(--link); }
hr { border-color: var(--border); }
.border { border-color: var(--border) !important; }
/* R2 A1 (12/10): o `.border` acima zera a COR de todo `.border-<variante>` (mesma especificidade + !important, e esta folha vem DEPOIS do Bootstrap): a opcao escolhida
 * na Loja (`border border-primary`) perdia o amarelo para TODO usuario. As variantes sao REDECLARADAS aqui, DEPOIS do `.border`, com o valor que o Bootstrap ja dava (tokens --bc-*; Claro identico). */
.border-primary { border-color: var(--bc-primary) !important; }
.border-secondary { border-color: var(--bc-secondary) !important; }
.border-success { border-color: var(--bc-success) !important; }
.border-info { border-color: var(--bc-info) !important; }
.border-warning { border-color: var(--bc-warning) !important; }
.border-danger { border-color: var(--bc-danger) !important; }
.border-light { border-color: var(--bc-light) !important; }
.border-dark { border-color: var(--bc-dark) !important; }
.border-white { border-color: var(--bc-white) !important; }
.bg-white { background-color: var(--surface) !important; }
.bg-light { background-color: var(--light-bg) !important; color: var(--text); }
.btn-light { --sa-button--normal-bg-color: var(--surface); --sa-button--normal-font-color: var(--text); --sa-button--hover-bg-color: var(--hover); }
.btn-secondary { --sa-button--normal-bg-color: var(--surface-2); --sa-button--normal-font-color: var(--text); --sa-button--hover-bg-color: var(--hover); }
.btn-primary { --sa-button--normal-bg-color: var(--accent); --sa-button--normal-font-color: var(--on-accent); --sa-button--hover-bg-color: var(--accent-hover); }
.btn-close { filter: var(--btn-close-filter, none); }

/* ===== 6. Formularios e tabelas ===== */
.form-control, .form-select, .input-group-text {
  background-color: var(--surface); color: var(--text); border-color: var(--input-border);
}
.form-control:focus, .form-select:focus { background-color: var(--surface); color: var(--text); }
.form-control::placeholder { color: var(--muted); opacity: 1; }
.form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: var(--surface-2); color: var(--muted); }
.input-group-text { background-color: var(--surface-2); }
.table { color: var(--text); border-color: var(--border); --bs-table-hover-color: var(--text); --bs-table-striped-color: var(--text); --bs-table-active-color: var(--text); }
.table > :not(caption) > * > * { background-color: transparent; color: inherit; border-bottom-color: var(--border); }
.table-hover > tbody > tr:hover > * { background-color: var(--surface-2); color: var(--text); }

/* ===== 7. Cor de TEXTO com contraste (WCAG AA) ===== */
.text-muted, .sa-toolbar-user__subtitle { color: var(--muted) !important; }
.text-success { color: var(--ok-text) !important; }
.text-danger { color: var(--danger-text) !important; }
.text-warning { color: var(--warn-text) !important; }
.text-primary { color: var(--accent-text) !important; }
.text-dark { color: var(--text) !important; }
.text-secondary { color: var(--muted) !important; }
/* preenchimentos com texto branco/escuro conhecido */
.badge.bg-success, .btn-success { background-color: var(--ok-fill) !important; --sa-button--normal-bg-color: var(--ok-fill); color: var(--on-fill); }
.badge.bg-danger { background-color: var(--danger-fill) !important; color: var(--on-fill); }
.badge.bg-info { background-color: var(--info-fill) !important; color: var(--on-info) !important; }
.bg-warning.text-dark, .badge.bg-warning, .badge.bg-warning.text-dark { background-color: var(--warn-fill) !important; color: var(--on-warn) !important; }

/* ===== 8. Escuro: ajustes que so fazem sentido nele ===== */
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] { --btn-close-filter: invert(1) grayscale(100%) brightness(200%); }
}
:root[data-theme="dark"] { --btn-close-filter: invert(1) grayscale(100%) brightness(200%); }

/* ===== 9. DENSIDADE compacta (html[data-density="dense"]); confortavel = ausencia do atributo. Manter este bloco POR ULTIMO (a sonda T14 varre do primeiro `html[data-density` ate o fim) ===== */
html[data-density="dense"] body { font-size: .875rem; }
html[data-density="dense"] .card-body { padding: .75rem; }
html[data-density="dense"] .card-header, html[data-density="dense"] .card-footer { padding: .5rem .75rem; }
html[data-density="dense"] .modal-body { padding: .75rem; }
html[data-density="dense"] .list-group-item { padding: .375rem .75rem; }
html[data-density="dense"] .dropdown-item { padding-top: .25rem; padding-bottom: .25rem; }
html[data-density="dense"] .table > :not(caption) > * > * { padding: .3125rem .5rem; }
html[data-density="dense"] .form-control { --sa-input-padding-y: .1875rem; }
html[data-density="dense"] .btn:not(.btn-sm):not(.btn-xs):not(.btn-lg) { --sa-button-padding-y: .3125rem; }
html[data-density="dense"] .sa-nav--sidebar .sa-nav__link { padding-top: .25rem; padding-bottom: .25rem; }