:root{
  --bg:#f5f6fb;--panel:#fff;--muted:#6b7280;--muted-2:#4b5563;--text:#0b1220;
  --primary:#c0161a;--primary-2:#9f0f13;--accent:#f0ad00;--accent-2:#ffcc33;
  --soft:#eef0f5;--ring: rgba(192,22,26,.25);--radius:18px;--shadow:0 10px 24px rgba(15,23,42,.06);
  --ok:#10b981;--warn:#f59e0b;--bad:#ef4444;
}
@media (prefers-color-scheme: dark){
  :root{--bg:#0f1524;--panel:#101a2f;--muted:#9aa5b1;--muted-2:#b6bfca;--text:#e6ebf3;--soft:#1a2440;--ring:rgba(255,204,51,.25);--shadow:0 10px 24px rgba(0,0,0,.35)}
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
.page{padding:16px}
.panel{max-width:980px;margin:0 auto;background:var(--panel);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.panel-head.sticky{position:sticky;top:0;z-index:30;background:var(--panel);padding:6px 0 10px}
.brand{display:flex;align-items:center;gap:10px}
.logo{height:40px;object-fit:contain}
.ver{color:var(--muted);font-size:12px;text-align:right}
#scrollTop{display:none}
@media (max-width:720px){ #scrollTop{display:inline-block} }

.grid{display:grid;grid-template-columns:1fr;gap:10px;margin:6px 0 8px}
.inputs-stick{position:sticky;top:60px;background:var(--panel);z-index:25;padding-top:6px}
.field{display:flex;flex-direction:column;gap:6px}
label{font-size:12px;color:var(--muted)}
input{background:#fff;border:2px solid #e5e7eb;border-radius:14px;padding:13px 14px;outline:none;font-size:16px;transition: box-shadow .2s,border-color .2s}
@media (prefers-color-scheme: dark){ input{background:#0d1428;border-color:#223055;color:#e8ecf6} }
input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--ring)}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.btn{border:0;border-radius:14px;padding:12px 16px;cursor:pointer;font-weight:800;letter-spacing:.3px}
.btn.lg{padding:14px 18px}
.btn.sm{padding:8px 10px}
.btn.primary{background:linear-gradient(180deg,var(--accent),var(--accent-2));color:#4c2b00;text-shadow:0 1px 0 rgba(255,255,255,.2);box-shadow:0 8px 18px rgba(240,173,0,.28)}
.btn.primary:hover{filter:brightness(1.05)}
.btn[disabled]{opacity:.7;cursor:not-allowed}
.btn.ghost{background:var(--soft);color:#111}
@media (prefers-color-scheme: dark){ .btn.ghost{background:#1b2747;color:#e6ebf3} }

.toolbar{display:flex;align-items:center;justify-content:space-between;margin:6px 0 10px;gap:10px;flex-wrap:wrap}
.selects{display:flex;gap:8px;flex:1}
.sel{appearance:none;background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:12px 14px;color:#111;min-width:140px}
@media (prefers-color-scheme: dark){ .sel{background:#0d1428;border-color:#223055;color:#e6ebf3} }
.meta-time{font-size:12px;color:#4b5563}
@media (prefers-color-scheme: dark){ .meta-time{color:#b6bfca} }

.alert{border-radius:14px;padding:10px 12px;margin:8px 0;border:1px solid transparent}
.alert.info{background:#f3f4f6;border-color:#e5e7eb;color:#374151}
.alert.warn{background:#fff7ed;border-color:#fed7aa;color:#92400e}
.alert.error{background:#fef2f2;border-color:#fecaca;color:#991b1b}
@media (prefers-color-scheme: dark){
  .alert.info{background:#16203b;border-color:#1f2c52;color:#b6bfca}
  .alert.warn{background:#3b2a1a;border-color:#6b4b1a;color:#ffd58a}
  .alert.error{background:#3b2a1a;border-color:#6b1a1a;color:#ffb0b0}
}

/* Cards */
.cards{display:grid;grid-template-columns:1fr;gap:10px;margin-top:8px}
@media (min-width:560px){ .cards{grid-template-columns:repeat(2,1fr)} }
@media (min-width:980px){ .cards{grid-template-columns:repeat(2,1fr)} }
.card{background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.96));border:1px solid #e8eaf0;border-radius:16px;box-shadow:0 6px 22px rgba(15,23,42,.07);overflow:hidden}
@media (prefers-color-scheme: dark){ .card{background:linear-gradient(180deg, rgba(17,26,46,.98), rgba(17,26,46,.96));border-color:#243257;box-shadow:0 8px 28px rgba(0,0,0,.35)} }
.card-inner{max-height:72vh;overflow:auto;padding:0 10px 8px}
.card .title-bar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:6px;padding:8px 10px;border-bottom:1px solid #eef0f5;background:linear-gradient(180deg,#fff,rgba(255,255,255,.9))}
@media (prefers-color-scheme: dark){ .card .title-bar{border-bottom-color:#223055;background:linear-gradient(180deg,#111a2e,rgba(17,26,46,.9))}
}
.card .title{font-weight:900;font-size:15px;line-height:1.15}
.badge{border-radius:999px;border:1px solid #e7e7f3;background:#fbfbfe;padding:2px 8px;font-size:11.5px;color:#374151}
@media (prefers-color-scheme: dark){ .badge{border-color:#2b3a6d;background:#0f1730;color:#cfd7ff} }
.chev{border:0;background:transparent;font-size:16px;line-height:1;cursor:pointer;color:var(--accent)}
.meta{display:flex;flex-direction:column;gap:6px}

/* Seções colapsáveis */
.section{border:1px dashed #e7e7f3;border-radius:10px;overflow:hidden}
@media (prefers-color-scheme: dark){ .section{border-color:#2b3a6d} }
.sec-head{display:flex;align-items:center;justify-content:space-between;padding:6px 8px;background:#fff3e1;border-bottom:1px dashed #f0ad00;font-weight:800;cursor:pointer}
@media (prefers-color-scheme: dark){ .sec-head{background:#2b240a;border-bottom-color:#5c4700} }
.sec-body{padding:6px;display:none}
.section.open .sec-body{display:block}
.sec-head .chev{font-size:14px}

/* kv + ultra-compacto desktop */
.kv{background:#fafafa;border:1px solid #eee;border-radius:10px;padding:6px 8px}
.kv .k{font-size:10.5px;color:#6b7280;display:block;margin-bottom:2px;line-height:1.05}
.kv .v{font-size:13.5px;font-weight:800;display:block;line-height:1.1}
@media (min-width:1200px){
  .kv{padding:5px 8px;border-radius:9px}
  .kv .k{font-size:10px}
  .kv .v{font-size:13px}
}
.kv.stock-0{border-color: rgba(239,68,68,.5); background: rgba(239,68,68,.08);}
.kv.stock-low{border-color: rgba(245,158,11,.5); background: rgba(245,158,11,.10);}
.kv.stock-ok{border-color: rgba(16,185,129,.5); background: rgba(16,185,129,.10);}
@media (prefers-color-scheme: dark){ .kv{background:#0f1730;border-color:#243257} }

/* Print-friendly */
@media print{
  body{background:#fff;color:#000}
  .panel{box-shadow:none}
  .panel-head.sticky,.inputs-stick,.toolbar,#scrollTop,.dev,.alert{display:none !important}
  .card{break-inside: avoid; border:1px solid #ccc}
  .section{border-color:#ccc}
}

.dev{margin-top:14px;font-size:12px;color:var(--muted);text-align:right}

@supports(padding:max(env(safe-area-inset-top))){
  .page{padding-left: max(16px, env(safe-area-inset-left)); padding-right:max(16px, env(safe-area-inset-right));}
  .panel-head.sticky{top: env(safe-area-inset-top)}
  .inputs-stick{top: calc(56px + env(safe-area-inset-top))}
}

.chips .chip{display:inline-flex;align-items:center;gap:.35rem;background:#f2f4f7;border:1px solid #e5e7eb;border-radius:999px;padding:.2rem .6rem;font-size:.85rem}
.chips .chip button{border:0;background:transparent;cursor:pointer;font-weight:bold;line-height:1}
.chips .chip .x{font-size:.9rem;}
.mark{background:yellow;padding:0 .1rem}


/* ===== Ajuste responsivo: botões Seção e Marca ===== */
.selects { gap: 8px; }
.sel { min-width: 0; max-width: 100%; box-sizing: border-box; }

/* Garante que a data fique abaixo dos botões, não ao lado */
.meta-time { flex-basis: 100%; order: 3; margin-top: 4px; display: block; }

@media (max-width: 480px) {
  .selects { flex-direction: column; }
  .sel { width: 100%; }
}


/* --- Fix: dark theme contrast for active filter chips and controls --- */
body.dark .chip{ background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.25); }
body.dark .chip .x{ color: #fff; opacity: .85; }
body.dark .chip .x:hover{ opacity: 1; }
body.dark .sel{ background-color: #1e1f24; color: #f5f7fa; border-color: #3a3d47; }
body.dark .btn{ color: #f5f7fa; }
body.dark .btn.ghost{ color: #f5f7fa; border-color: #3a3d47; }
body.dark .toolbar{ background: #121319; }


/* --- Dark mode contrast fixes for filter chips --- */
@media (prefers-color-scheme: dark){
  .chips .chip{ background:#0f162a; border-color:#223055; color:#e6ebf3; }
  .chips .chip .x{ color:#e6ebf3; opacity:.9; }
  .chips .chip .x:hover{ opacity:1; }
  .btn.ghost{ color:#e6ebf3; border-color:#223055; }
}


/* === Dark-mode fixes (contrast for filter buttons, selects, chips) === */
body.dark .toolbar .selects .sel,
body.dark select.sel {
  background-color: #1f2430;
  color: #f7f9fc;
  border: 1px solid #3b4252;
}
body.dark .btn,
body.dark .btn.ghost {
  color: #f7f9fc;
  border-color: #3b4252;
}
/* "Ordenar por..." and "Descendente" buttons (ghost pills) */
body.dark .btn.ghost,
body.dark .btn.ghost.sm {
  background: rgba(255,255,255,0.06);
}
/* Active filter chips */
body.dark .chips { color: #f7f9fc; }
body.dark .chip {
  background: rgba(255,255,255,0.12);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.28);
}
body.dark .chip .x { color:#fff; opacity:.9; }
body.dark .chip .x:hover { opacity:1; }
/* Inputs contrast */
body.dark input[type="text"] {
  background:#141821;
  color:#f7f9fc;
  border-color:#3b4252;
}
/* "Buscar" primary button keeps brand color but readable text */
body.dark .btn.primary { color:#111; }


/* Oculta apenas os campos antigos (sem tocar no tema) */
.legacy-hidden{ display:none !important; }
/* Estado vazio escondido por padrão; app mostra quando necessário */
#emptyState{ display:none; }