/* ODEM VENDAS — TA-01 — Tema Absoluto (visual apenas)
   Branco #FFFFFF e preto #000000 no fundo principal.
   Nao modifica status, logica fiscal, importacoes, permissoes ou impressao.
   Integracao: stylesheet versionado e carregado apos o CSS existente.
*/

/* Tema global: paleta semantica compartilhada; nao substitui cores de status. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #FFFFFF;
  --surface: #F7F7F8;
  --surface-1: #FFFFFF;
  --surface-2: #F1F1F3;
  --surface-3: #E9E9EC;
  --control-bg: #FFFFFF;
  --hover: #EDEDF0;
  --border: #E3E3E7;
  --border-strong: #CACAD1;
  --text: #18181B;
  --text-2: #575761;
  --text-3: #696974;
  --placeholder: #666672;
  --disabled-text: #74747D;
  --disabled-bg: #ECECF0;
  --sidebar-bg: #FFFFFF;
  --sidebar-surface: #F7F7F8;
  --sidebar-border: #E8E8EC;
  --sidebar-hover: #F1F1F3;
  --sidebar-text: var(--text);
  --sidebar-text-2: var(--text-2);
  --topbar-bg: #FFFFFF;
  --surface-raised: #FFFFFF;
  --surface-glass: rgba(255,255,255,.96);
  --hairline: rgba(24,24,27,.15);
  --press: rgba(24,24,27,.06);
  --metric-accent: #187451;
  --text-positive: #187451;
  --text-muted: #696974;
  --shadow-sm: 0 1px 3px rgba(15,15,25,.04);
  --shadow-md: 0 8px 26px rgba(15,15,25,.07);
  --shadow-lg: 0 20px 50px rgba(15,15,25,.12);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000;
  --surface: #101012;
  --surface-1: #101012;
  --surface-2: #19191C;
  --surface-3: #252529;
  --control-bg: #151518;
  --hover: #212125;
  --border: #29292F;
  --border-strong: #3D3D45;
  --text: #F9F9FB;
  --text-2: #C3C3CC;
  --text-3: #A7A7B1;
  --placeholder: #B0B0B8;
  --disabled-text: #A0A0A9;
  --disabled-bg: #1B1B1F;
  --sidebar-bg: #080809;
  --sidebar-surface: #131315;
  --sidebar-border: #29292F;
  --sidebar-hover: #1B1B1E;
  --sidebar-text: var(--text);
  --sidebar-text-2: var(--text-2);
  --topbar-bg: #000000;
  --surface-raised: #121214;
  --surface-glass: rgba(16,16,18,.97);
  --hairline: rgba(225,225,232,.18);
  --press: rgba(255,255,255,.07);
  --metric-accent: #7BCFA4;
  --text-positive: #7BCFA4;
  --text-muted: #A7A7B1;
  --shadow-sm: none;
  --shadow-md: 0 12px 35px rgba(0,0,0,.24);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.42);
}

/* ios.css escreve tokens diretamente em body:has(.ios-shell). A camada TA-01
   os redefine com seletor equivalente + tema, preservando tokens funcionais. */
@media screen {
  html[data-theme="light"] body:has(.ios-shell):not(.odem-tv-mode) {
    --bg: #FFFFFF;
    --surface: #F7F7F8;
    --surface-1: #FFFFFF;
    --surface-2: #F1F1F3;
    --surface-3: #E9E9EC;
    --control-bg: #FFFFFF;
    --hover: #EDEDF0;
    --border: #E3E3E7;
    --border-strong: #CACAD1;
    --text: #18181B;
    --text-2: #575761;
    --text-3: #696974;
    --placeholder: #666672;
    --sidebar-bg: #FFFFFF;
    --sidebar-border: #E8E8EC;
    --sidebar-hover: #F1F1F3;
    --topbar-bg: #FFFFFF;
    --surface-raised: #FFFFFF;
    --surface-glass: rgba(255,255,255,.96);
    --metric-accent: #187451;
    --text-positive: #187451;
    --shadow-sm: 0 1px 3px rgba(15,15,25,.04);
    --shadow-md: 0 8px 26px rgba(15,15,25,.07);
  }
  html[data-theme="dark"] body:has(.ios-shell):not(.odem-tv-mode) {
    --bg: #000000;
    --surface: #101012;
    --surface-1: #101012;
    --surface-2: #19191C;
    --surface-3: #252529;
    --control-bg: #151518;
    --hover: #212125;
    --border: #29292F;
    --border-strong: #3D3D45;
    --text: #F9F9FB;
    --text-2: #C3C3CC;
    --text-3: #A7A7B1;
    --placeholder: #B0B0B8;
    --sidebar-bg: #080809;
    --sidebar-border: #29292F;
    --sidebar-hover: #1B1B1E;
    --topbar-bg: #000000;
    --surface-raised: #121214;
    --surface-glass: rgba(16,16,18,.97);
    --metric-accent: #7BCFA4;
    --text-positive: #7BCFA4;
    --shadow-sm: none;
    --shadow-md: 0 12px 35px rgba(0,0,0,.24);
  }

  /* Fundo do documento e do shell: preto/branco REAL, inclusive espacos vazios.
     Nao atinge tela de TV, impressao e dialogos de confirmacao. */
  html[data-theme="light"], html[data-theme="light"] body { background-color: #FFFFFF; }
  html[data-theme="dark"], html[data-theme="dark"] body { background-color: #000000; }
  html[data-theme="light"] body:has(.ios-shell):not(.odem-tv-mode) :is(.app-shell.ios-shell,.content,.topbar) {
    background-color: #FFFFFF;
  }
  html[data-theme="dark"] body:has(.ios-shell):not(.odem-tv-mode) :is(.app-shell.ios-shell,.content,.topbar) {
    background-color: #000000;
  }
  /* Preserva leitura dos componentes elevados; sem impor background sobre
     badges, alertas, status ou botoes semanticos. */
  html[data-theme="light"] body:has(.ios-shell):not(.odem-tv-mode) .sidebar {
    background-color: #FFFFFF;
    box-shadow: inset -1px 0 0 var(--sidebar-border);
  }
  html[data-theme="dark"] body:has(.ios-shell):not(.odem-tv-mode) .sidebar {
    background-color: #080809;
    box-shadow: inset -1px 0 0 var(--sidebar-border);
  }
  html[data-theme="dark"] body:has(.ios-shell):not(.odem-tv-mode) :is(.kpi-value,.vr-kpi-value,.ind-kpi-value,.rel-kpi-value) {
    color: var(--metric-accent);
    font-variant-numeric: tabular-nums;
  }
  /* Mesma experiencia para campos e tabelas, sem trocar estrutura ou dimensoes. */
  html[data-theme="dark"] body:has(.ios-shell):not(.odem-tv-mode) :is(input,select,textarea) {
    color-scheme: dark;
  }
  html[data-theme="light"] body:has(.ios-shell):not(.odem-tv-mode) :is(input,select,textarea) {
    color-scheme: light;
  }
  /* Realce do foco no teclado; nao interfere com estados desabilitados. */
  html[data-theme] body:has(.ios-shell):not(.odem-tv-mode) :is(a,button,input,select,textarea,[tabindex]):focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
  }
}
/* A impressao mantem fundo e contraste originais do documento. */


/* TA-01R2 | Fallback do painel Maino, nao depende de index.html
   Apenas #ped-raiz .ped-maino-*; preserva tema e regras de negocios. */
#ped-raiz .ped-maino-overview{
  min-width:0;margin:12px 0 16px;padding:16px;
  border:1px solid var(--border);border-radius:18px;background:var(--surface);
}
#ped-raiz .ped-maino-overview .ped-maino-heading{
  display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;
  gap:10px 16px;margin-bottom:14px;
}
#ped-raiz .ped-maino-overview #ped-maino-sync{
  margin:0 0 4px;padding:0;line-height:1.3;font-size:16px;
  font-weight:720;letter-spacing:-.015em;color:var(--text);
}
#ped-raiz .ped-maino-overview #ped-auto-sync-status{
  display:block;margin:0;padding:0;font-size:12px;line-height:1.5;
  color:var(--text-2);overflow-wrap:anywhere;
}
#ped-raiz .ped-maino-overview #ped-auto-sync-status.is-warning{color:var(--danger)}
#ped-raiz .ped-maino-overview #ped-auto-sync-status.is-warning::before{content:'! ';font-weight:800}
#ped-raiz .ped-maino-overview .ped-maino-detail{
  font-size:12px;max-width:100%;color:var(--text-2);
}
#ped-raiz .ped-maino-overview .ped-maino-detail>summary{
  min-height:34px;display:flex;align-items:center;cursor:pointer;
  padding:7px 10px;user-select:none;list-style:none;border-radius:9px;
  border:1px solid var(--border);background:var(--surface-2);
}
#ped-raiz .ped-maino-overview .ped-maino-detail>summary::-webkit-details-marker{display:none}
#ped-raiz .ped-maino-overview .ped-maino-detail>summary:after{content:'⌄';margin-left:9px}
#ped-raiz .ped-maino-overview .ped-maino-detail[open]>summary:after{transform:rotate(180deg)}
#ped-raiz .ped-maino-overview .ped-maino-detail-body{
  padding:10px 12px;margin-top:7px;background:var(--surface-2);
  border-radius:10px;line-height:1.5;
}
#ped-raiz .ped-maino-overview .ped-list-toolbar{display:block!important;margin:0!important;}
#ped-raiz .ped-maino-overview .ped-type-switch{margin:0 0 14px!important;width:fit-content;max-width:100%}
#ped-raiz .ped-maino-overview #ped-resumo-info{
  display:block;min-width:0;margin:0;padding:0;background:none;border:0;
  font-size:inherit;line-height:normal;
}
#ped-raiz .ped-maino-overview .ped-maino-kpis{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;
}
#ped-raiz .ped-maino-overview .ped-maino-kpi{
  min-width:0;padding:13px 14px;background:var(--surface-2);
  border-radius:12px;display:flex;flex-direction:column;gap:7px;
}
#ped-raiz .ped-maino-overview .ped-maino-kpi-label{
  font-size:12px;line-height:1.35;font-weight:580;color:var(--text-2);
}
#ped-raiz .ped-maino-overview .ped-maino-kpi-value{
  display:block;max-width:100%;font-size:clamp(17px,1.7vw,24px);
  line-height:1.2;font-weight:740;letter-spacing:-.025em;
  overflow-wrap:anywhere;font-variant-numeric:tabular-nums;
}
#ped-raiz .ped-maino-overview .ped-maino-kpi small{
  color:var(--text-2);font-size:11px;font-weight:500;line-height:1.4;
}
#ped-raiz .ped-maino-overview .ped-maino-foot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:6px 16px;padding-top:12px;font-size:12px;color:var(--text-2);
}
html[data-theme="dark"] #ped-raiz .ped-maino-kpi-value{
  color:#7BCFA4!important;
}
html[data-theme="light"] #ped-raiz .ped-maino-kpi-value{
  color:#25282D!important;
}

@media(max-width:780px){
 #ped-raiz .ped-maino-overview .ped-maino-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
 #ped-raiz .ped-maino-overview .ped-maino-kpi:first-child{grid-column:span 2}
 #ped-raiz .ped-maino-overview .ped-maino-kpi-value{font-size:19px}
}
@media(max-width:440px){
 #ped-raiz .ped-maino-overview{padding:12px;border-radius:15px}
 #ped-raiz .ped-maino-overview .ped-maino-kpis{grid-template-columns:1fr}
 #ped-raiz .ped-maino-overview .ped-maino-kpi:first-child{grid-column:auto}
 #ped-raiz .ped-maino-overview .ped-maino-kpi{padding:11px 12px}
 #ped-raiz .ped-maino-overview .ped-type-switch{width:100%}
 #ped-raiz .ped-maino-overview .ped-type-switch .btn{flex:1}
}