:root{--red:#cc0d0b;--yellow:#f4b200;--deep:#a50a09;--text:#0f172a;--muted:#5b6b85;--chip:#fff3d6}
*{box-sizing:border-box}body{margin:0;font:13px/1.35 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;color:var(--text);background:var(--bg)}
.logo{height:28px;width:auto;margin-right:8px}
.app-header{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:flex-start;padding:8px 12px;border-bottom:4px solid var(--yellow);background:#fff}
.title h1{font-size:16px;margin:0}.top-meta{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.top-meta small{color:#666}.top-meta .btns{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.btn{border:2px solid var(--deep);background:var(--red);color:#fff;padding:6px 8px;border-radius:8px;cursor:pointer;font-weight:700;font-size:12px}
.btn.ghost{background:#fff;color:var(--deep)}
.tabs{display:flex;gap:8px;padding:8px 12px;border-bottom:1px dashed #ddd}
.tab{background:var(--chip);border:1px solid var(--yellow);color:#7a3c00;font-weight:800;padding:6px 10px;border-radius:999px;cursor:pointer;font-size:12px}
.tab.active{background:var(--yellow)}
.filters{display:grid;grid-template-columns:1.2fr repeat(8,1fr);gap:10px;padding:10px 12px}
.filter-group{display:none;grid-column:1/-1;grid-template-columns:inherit;gap:inherit}
.filter-group.active{display:grid}
.field{display:flex;flex-direction:column;gap:4px}.field.wide{grid-column:1/span 2}label{font-size:11px;color:var(--muted)}
input[type=search],select{border:2px solid #f7c33a;padding:8px;border-radius:10px;background:#fff;font-size:13px}
.panel{display:none}.panel.active{display:block}
.table-wrap{border:2px solid #f7c33a;border-radius:12px;overflow:auto;background:#fff}
.table-wrap.tall{max-height:68vh}
table{width:100%;border-collapse:collapse;table-layout:auto;font-size:12px}
thead th{position:sticky;top:0;background:var(--yellow);color:#632c00;border-bottom:2px solid #a24a00;padding:6px 8px;text-align:left;font-size:11px;white-space:nowrap}
tbody td{padding:5px 6px;border-bottom:1px solid #f6e4b3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
tfoot td{padding:6px;font-weight:800;background:#fff4cc;position:sticky;bottom:0}
.empty{margin:12px;color:#555;background:#fff8e0;border:1px dashed #f0ad00;padding:10px;border-radius:10px}
.loader{position:fixed;inset:0;background:rgba(255,255,255,.85);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.loader.hidden{display:none}.spinner{width:56px;height:56px;border-radius:50%;border:6px solid #ffd57a;border-top-color:#d41111;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.print-area{display:none}
@media print{
  main,.tabs,#filters,.app-header,.loader{display:none!important}
  .print-area{display:block}
  @page{size:A4 landscape;margin:8mm}
  .print-area table{font-size:10px;border-collapse:collapse;width:100%}
  .print-area th,.print-area td{padding:3px 4px;border:1px solid #ddd;white-space:nowrap}
}

/* === Ajustes para colunas redimensionáveis === */
table {
  table-layout: auto !important;
}

th {
  position: relative;
  white-space: nowrap;
  padding-right: 10px;
}

.resize-handle {
  cursor: col-resize;
  font-size: 11px;
  color: #999;
  margin-left: 4px;
  user-select: none;
}
th {
  resize: horizontal;
  overflow: auto;
}


/* === Destaque apenas para botão Aplicar === */
button.apply-btn {
  background-color: var(--red);
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  padding: 12px 28px;
  border: none;
  border-radius: 6px;
  display: inline-block;
  margin: 12px;
  cursor: pointer;
  box-shadow: 0 3px 6px rgba(0,0,0,0.25);
  transition: background 0.3s;
}
button.apply-btn:hover {
  background-color: var(--deep);
}





/* === Destaque exclusivo para botão Aplicar === */
button.apply-btn {
  background-color: var(--red);
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  padding: 14px 36px;
  border: none;
  border-radius: 8px;
  display: inline-block;
  margin: 16px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
  transition: background 0.3s;
}
button.apply-btn:hover {
  background-color: var(--deep);
}


/* === Estilo isolado do botão Aplicar === */
.aplicar-container {
  text-align: center;
  margin: 0;
}
.aplicar-container button {
  background-color: var(--red);
  color: #fff;
  font-size: 22px;
  font-weight: bold;
  padding: 16px 40px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  transition: background 0.3s;
}
.aplicar-container button:hover {
  background-color: var(--deep);
}








/* === Botão Aplicar em destaque === */
button.apply-btn {
  background-color: var(--red);
  color: #fff;
  font-size: 22px;
  font-weight: bold;
  padding: 16px 48px;
  border: none;
  border-radius: 10px;
  margin: 8px auto;
  display: block;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
  transition: background 0.3s, transform 0.2s;
}
button.apply-btn:hover {
  background-color: var(--deep);
  transform: scale(1.07);
}


/* Ajuste responsivo para a versão no rodapé */
footer, #footer, .footer {
  word-wrap: break-word;
  white-space: normal;
  max-width: 100%;
  overflow-wrap: break-word;
}


/* ===== Responsive improvements (v22.08.25.17.19) ===== */

/* Buttons group wraps nicely */
@media (max-width: 1024px) {
  .top-meta .btns { flex-wrap: wrap; justify-content: center; gap: 10px; }
  .top-meta .btns .btn { flex: 1 1 45%; max-width: 45%; }
  .top-meta { align-items: center; }
}

@media (max-width: 768px) {
  .top-meta .btns .apply-btn { flex: 1 1 100%; max-width: 100%; }
  .top-meta .btns .btn { flex: 1 1 48%; max-width: 48%; }
  .title h1 { font-size: 15px; }
}

/* On very small screens put each button on its own row */
@media (max-width: 520px) {
  .top-meta .btns .btn { flex: 1 1 100%; max-width: 100%; }
  .top-meta small { text-align: center; }
}

/* Filters grid becomes fluid: 3 cols -> 2 -> 1 */
@media (max-width: 1200px) {
  .filters { grid-template-columns: repeat(3, 1fr); }
  .filter-group { grid-template-columns: repeat(3, 1fr); }
  .field.wide { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .filters { grid-template-columns: repeat(2, 1fr); }
  .filter-group { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .filters { grid-template-columns: 1fr; }
  .filter-group { grid-template-columns: 1fr; }
  .field, .field.wide { grid-column: 1 / -1; }
  input[type=search], select { font-size: 14px; }
}

/* Footer & version: never overflow */
.app-footer, footer, #footer, .footer, .top-meta small {
  word-break: break-word;
  overflow-wrap: anywhere;
  max-width: 100%;
}

/* Smooth momentum scroll on mobile */
.table-wrap{ -webkit-overflow-scrolling: touch; }


/* === All-10 Improvements Pack === */
/* Zebra rows */
table tbody tr:nth-child(odd){ background:#ffffff; }
table tbody tr:nth-child(even){ background:#f9fafb; }
/* Sticky header desktop */
@media (min-width: 781px){
  table thead th{ position: sticky; top: 0; background: #fff; z-index: 2; }
  table tfoot td{ position: sticky; bottom: 0; background: #fff; z-index: 1; }
}
/* Modal */
.modal{ position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 9998; }
.modal.hidden{ display: none; }
.modal-body{margin:0;font:13px/1.35 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;color:var(--text);background:var(--bg)}
.modal-title{ font-weight:700; font-size: 18px; margin-bottom: 12px; }
.cols-checks{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:8px; max-height: 50vh; overflow:auto; }
.modal-actions{ display:flex; gap:8px; justify-content:flex-end; margin-top: 12px; }
.btn.sm{ padding:4px 8px; font-size:12px; }
.btn.ghost{ background: #f3f4f6; border:1px solid #e5e7eb; }
.btn.danger{ background:#fee2e2; border:1px solid #fecaca; }
/* UX tools block */
.ux-tools{ display:flex; gap:8px; flex-wrap: wrap; align-items: center; margin: 6px 0; }
.ux-tools .sep{ width:1px; height:18px; background:#e5e7eb; display:inline-block; }
/* Column resizer */
th{ position: relative; }
th .resizer{ position:absolute; top:0; right:0; width:8px; height:100%; cursor: col-resize; user-select:none; }
th .resizer::after{ content: '<|>'; font-size: 10px; color:#9ca3af; position:absolute; top:50%; right:2px; transform: translateY(-50%); }
/* High contrast */
.contrast body, body.contrast{ background:#0b0f14; color:#e5e7eb; }
body.contrast table{ color:#e5e7eb; }
body.contrast table tbody tr:nth-child(even){ background:#111827; }
body.contrast table tbody tr:nth-child(odd){ background:#0f172a; }
body.contrast th, body.contrast td{ border-color:#253043; }
/* Mobile: top menu scrolls with page */
@media (max-width: 780px){
  .top-meta, header, .app-header, .topbar{ position: static !important; }
}
/* Toast (if not present) */
.toast{ position:fixed; left:50%; bottom:16px; transform:translateX(-50%) translateY(8px);
  background:rgba(0,0,0,.88); color:#fff; padding:10px 14px; border-radius:10px; box-shadow:0 6px 18px rgba(0,0,0,.25);
  font-size:14px; z-index:9999; opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); } .toast.hidden{ opacity:0; }

#tablePivotValor tbody tr:nth-child(odd),
#tablePivotEV tbody tr:nth-child(odd){ background:#fafafa; }
#tablePivotValor tbody tr:hover,
#tablePivotEV tbody tr:hover{ background:#fff6d6; transition:background 120ms ease; }

/* === Print Header (Data, Hora, Filtros) === */
#printHeader { 
  display: none; 
  margin: 8px 0 12px 0; 
  padding: 8px 10px; 
  border: 1px solid #ddd; 
  border-radius: 8px; 
  font-size: 12px; 
  background: #fff; 
}
#printHeader .ph-row { display: flex; gap: 24px; align-items: center; margin: 4px 0;}
#printHeader b { font-weight: 700; }
@media print{
  #printHeader{ display:block !important; }
}

/* ChatGPT: ensure multi-select clear button is active */
.ms332-actions .btn.clear{opacity:1!important;pointer-events:auto!important;filter:none!important}

/* Campo Quantidade: rótulo inline */
.filter-group .field label{white-space:nowrap}


/* === Zebra for PRINT ONLY (auto-injected) === */
@media print {
  :root {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    color-adjust: exact;
  }
  table tbody tr:nth-child(odd) td {
    background: #ffffff !important;
  }
  table tbody tr:nth-child(even) td {
    background: #d9d9d9 !important;
  }
  table, th, td {
    border-color: #666 !important;
  }
}