/* assets/style.css – v6 (Chrome sticky fix) */
:root{
  --bg: #0f131a;
  --panel: #151a23;
  --muted: #9aa5b1;
  --text: #e7edf3;
  --accent: #5ab0ff;
  --accent-2: #7bd389;
  --danger: #ff6b6b;
  --border: #222837;
  --badge: #222b3a;
  --tbl-stripe: #121823;

  /* dynamic sticky offsets (set by JS) */
  --sticky-main: 106px;     /* filters + view-switch total height */
}

*{ box-sizing: border-box; }
html, body{ margin:0; padding:0; background:var(--bg); color:var(--text); font: 14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial; }

.loading{ position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; font-weight:700; z-index:999; }
.loading.hidden{ display:none; }

/* No top header; filters are sticky at top */
.filters{ background:var(--panel); border-bottom:1px solid var(--border); }
.filters.compact{ padding:8px 10px; position: sticky; top:0; z-index:9; }
.filters .filters-row{ display:flex; gap:10px; align-items:end; flex-wrap:wrap; }
.filters .f{ display:flex; flex-direction:column; gap:4px; min-width: 140px; }
.filters .f.grow{ flex:1; min-width:220px; }
.filters .f label{ color:var(--muted); font-size:11px; }
.filters .f input[type="date"], .filters .f select, .filters .f input[type="text"], .filters .f input[type="number"]{
  padding:6px 8px; border:1px solid var(--border); border-radius:8px; background:#0c1118; color:var(--text); height:34px;
}
.chk{ display:flex; align-items:center; gap:6px; color:var(--muted); }
.row-inline{ display:flex; gap:6px; align-items:center; }

.filters .f.actions{ margin-left:auto; display:flex; flex-direction:row; gap:8px; }
button{ padding:8px 12px; border-radius:8px; border:1px solid transparent; background:var(--accent); color:#07131f; font-weight:700; cursor:pointer; height:34px; }
button.secondary{ background:#0c1118; color:var(--text); border-color:var(--border); }
button.ghost{ background:transparent; color:var(--accent); border-color:var(--accent); }

.table-wrap{ padding:12px; }
.view-switch{ display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:8px 10px; margin:10px 0; position: sticky; top:56px; z-index:8; }
.view-switch label{ color:var(--muted); }
.seg{ display:flex; gap:6px; }
.segbtn{ background:#0c1118; color:var(--text); border:1px solid var(--border); border-radius:8px; padding:6px 10px; cursor:pointer; }
.segbtn.active{ background:#1a2232; border-color:#3a4560; }
.quick-sort{ display:flex; align-items:center; gap:6px; }

table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  /* IMPORTANT: DO NOT set overflow:hidden on table; breaks sticky in Chrome */
  border:1px solid var(--border);
  border-radius:10px;
  background:transparent;
}
thead th{
  position: sticky;
  top: var(--sticky-main);
  text-align:left;
  background:#111826;        /* force paint separate layer for sticky header */
  color:var(--muted);
  padding:10px;
  border-bottom:1px solid var(--border);
  z-index:50;                /* ensure above rows in Chrome */
  cursor:pointer;
  /* prevents header text blending with rows behind when overlapping */
  background-clip: padding-box;
}
thead th.sort-asc::after{ content:" ▲"; color:var(--muted); }
thead th.sort-desc::after{ content:" ▼"; color:var(--muted); }
tbody td{ padding:10px; border-top:1px solid var(--border); }
tbody tr:nth-child(odd){ background:var(--tbl-stripe); }
.badge{ display:inline-block; padding:3px 7px; border-radius:6px; background:var(--badge); color:var(--text); border:1px solid var(--border); }

.kpi-up{ color:var(--accent-2); }
.kpi-down{ color:var(--danger); }
.summary{ margin:8px 0; color:var(--muted); }

/* Modal */
.modal{ position:fixed; inset:0; background:rgba(0,0,0,.65); display:none; align-items:flex-start; justify-content:center; overflow:auto; z-index:100; }
.modal .modal-content{ width:min(1100px, 96vw); background:#0e141f; border:1px solid var(--border); border-radius:12px; margin:5vh auto; overflow:hidden; }
.modal .modal-header{ display:flex; justify-content:space-between; align-items:center; padding:10px 12px; background:#101725; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:3; }
.modal .modal-header h3{ margin:0; font-size:16px; }
.modal .modal-header .close{ background:transparent; border:1px solid var(--border); color:var(--text); border-radius:8px; padding:4px 8px; cursor:pointer; }
.modal .modal-body{ padding:12px; max-height:70vh; overflow:auto; position:relative; }
.modal.show{ display:flex; }

.modal .section{ border:1px solid var(--border); border-radius:10px; margin-bottom:12px; background:var(--panel); }
.modal .section .section-title{ padding:8px 10px; border-bottom:1px solid var(--border); color:var(--muted); position:sticky; top:0; background:#101725; z-index:2; }
.modal .section table{ border: none; border-radius:0; }
.modal .section thead th{
  position: sticky;
  top: var(--modal-head, 32px);
  z-index:4;
  background:#111826;
  border-bottom:1px solid var(--border);
}
.modal .section tbody td{ background:transparent; }

#detailTable, #detailTableProducts{ width:100%; }
#detailTable thead th, #detailTableProducts thead th{ cursor:pointer; }
#detailTable tbody td, #detailTableProducts tbody td{ padding:8px; border-top:1px solid var(--border); }