/* Ozyxon statistics: flat, matches the admin site. 3D is used only inside the charts. */
#stats-root, #stats-root *{box-sizing:border-box}
#stats-root{
  color-scheme:light;
  --bg:#EFE6D3; --surface:#FBF7EE; --ink:#221D16; --ink-soft:#6B6152;
  --green:#2B6E4E; --gold:#C08A2E; --brick:#A6412E; --line:#DCD0B4;
  font-family:'Montserrat','Cairo',Arial,sans-serif;
  color:var(--ink);
}
:root.dark-theme #stats-root{
  color-scheme:dark;
  --bg:#181614; --surface:#24211e; --ink:#F4EFE6; --ink-soft:#A39C93;
  --green:#378c64; --gold:#d69d3a; --brick:#c2523d; --line:#3a3530;
}
#stats-root .stats-toolbar{
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  margin-bottom:18px;
}
#stats-root .stats-title{margin:0 0 4px;font-size:22px;font-weight:800;letter-spacing:-.01em}
#stats-root .stats-sub{margin:0;color:var(--ink-soft);font-size:14px;font-weight:600}
#stats-root .stats-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
#stats-root button, #stats-root select{
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  border-radius:12px; padding:9px 14px; font-family:inherit; font-size:13px; font-weight:700; cursor:pointer;
}
#stats-root button:hover, #stats-root select:hover{border-color:var(--gold)}

#stats-root .cards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:18px}
#stats-root .stat-card{
  min-width:0; display:flex; flex-direction:column; gap:6px; padding:14px 14px;
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  box-shadow:0 1px 3px rgba(34,29,22,.05);
}
#stats-root .stat-card span{
  color:var(--ink-soft); font-size:12px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#stats-root .stat-card strong{
  font-size:clamp(16px,2vw,22px); font-weight:800; color:var(--ink);
  font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

#stats-root .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
#stats-root .panel{
  min-width:0; padding:18px; background:var(--surface); border:1px solid var(--line); border-radius:18px;
  box-shadow:0 1px 3px rgba(34,29,22,.05);
}
#stats-root .panel-head{margin-bottom:12px}
#stats-root h2{margin:0 0 3px;font-size:16px;font-weight:800}
#stats-root .panel-head p{margin:0;font-size:13px;color:var(--ink-soft);font-weight:600}
#stats-root .chart-box{position:relative;height:280px}
#stats-root .chart-box canvas{width:100%!important;height:100%!important}

#stats-root .table-wrap{margin-top:14px;overflow:auto}
#stats-root table{width:100%;border-collapse:collapse;font-size:13px}
#stats-root th{text-align:start;padding:8px;color:var(--ink-soft);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--line)}
#stats-root td{padding:8px;border-bottom:1px solid var(--line);color:var(--ink);font-weight:600}
#stats-root td.cell-name{font-weight:700}
#stats-root td.cell-value{text-align:end;font-weight:800;font-variant-numeric:tabular-nums}
#stats-root .rank{
  display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;
  font-size:12px;font-weight:800;background:var(--bg);color:var(--ink-soft);
}
#stats-root .rank-1{background:var(--gold);color:#fff}
#stats-root .rank-2{background:#9AA3AE;color:#fff}
#stats-root .rank-3{background:#B0703F;color:#fff}
#stats-root .empty{color:var(--ink-soft);font-weight:600}
#stats-root .status{text-align:center;color:var(--ink-soft);padding:18px;font-size:13px;font-weight:600}

@media(max-width:1280px){ #stats-root .cards{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media(max-width:900px){ #stats-root .grid{grid-template-columns:1fr} }
@media(max-width:600px){ #stats-root .cards{grid-template-columns:repeat(2,minmax(0,1fr))} #stats-root .chart-box{height:240px} }

/* Product thumbnails and pie legend swatches */
#stats-root .name-cell{display:flex;align-items:center;gap:10px;min-width:0}
#stats-root .name-cell > span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#stats-root .thumb{
  width:34px;height:34px;flex:none;border-radius:10px;object-fit:cover;
  background:var(--bg);border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;
  color:var(--ink-soft);font-size:13px;font-weight:800;
}
#stats-root .swatch{width:12px;height:12px;flex:none;border-radius:50%;box-shadow:0 0 0 2px var(--surface)}
#stats-root .share{margin-inline-start:6px;color:var(--ink-soft);font-size:12px;font-weight:700}

/* Panel filters, scrollable chart area and table pager */
#stats-root .panel-controls{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
#stats-root .panel-controls select{flex:1 1 160px;min-width:0}
#stats-root .chart-scroll{max-height:520px;overflow-y:auto;overflow-x:hidden;padding-inline-end:4px}
#stats-root .chart-inner{position:relative;width:100%;min-height:180px}
#stats-root .chart-inner canvas{width:100%!important;height:100%!important}
#stats-root .pager{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:10px;font-size:12px;font-weight:700;color:var(--ink-soft);flex-wrap:wrap}
#stats-root .pager:empty{display:none}
#stats-root .pager button:disabled{opacity:.45;cursor:default}
#stats-root .rank-badge{display:none}

/* Cards keep their own height; panel title and filters share one row */
#stats-root .cards{align-items:start}
#stats-root .panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap;margin-bottom:12px}
#stats-root .panel-title{min-width:0;flex:1 1 180px}
#stats-root .panel-controls{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;margin-bottom:0}
#stats-root .panel-controls select{flex:0 1 auto;min-width:96px;max-width:170px;padding:7px 10px;font-size:12px}

/* Independent columns: each panel keeps its own height */
#stats-root .grid{display:flex;gap:16px;align-items:flex-start}
#stats-root .stat-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:16px}
#stats-root .panel{align-self:auto}
@media(max-width:900px){ #stats-root .grid{flex-direction:column} }

/* Toolbar: selects + compact icon refresh */
#stats-root .stats-actions > select {
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  border-radius:12px; padding:9px 14px; font-family:inherit; font-size:13px; font-weight:700;
}
#stats-root .stats-refresh {
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  border-radius:12px; width:40px; height:40px; min-width:40px; padding:0;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; flex:none;
}
#stats-root .stats-refresh:hover { border-color:var(--gold); }
#stats-root .stats-refresh svg { display:block; }