/* Reports tab: the Chilli Badminton scheduler's Reports styles (CB_SCHEDULER
   frontend/index.html), copied as they are and scoped to #panel-reports so they never
   touch the rest of the tracker. Only the colours change: CB's tokens are mapped onto
   the tracker's CTS tokens below, so day and night mode both work. */

#panel-reports {
  /* CB token        -> CTS token */
  --surface:          var(--card);
  --surface-2:        color-mix(in srgb, var(--card), var(--white) 4%);
  --surface-3:        color-mix(in srgb, var(--card), var(--white) 9%);
  --border:           var(--line-str);
  --border-soft:      var(--line);
  --text:             var(--white);
  --text-dim:         color-mix(in srgb, var(--white) 74%, var(--card));
  --text-faint:       var(--muted);
  --accent:           var(--pink);
  --accent-hover:     color-mix(in srgb, var(--pink) 82%, var(--white));
  --accent-soft:      color-mix(in srgb, var(--pink) 16%, var(--card));
  --status-good:      var(--confirmed);
  --status-good-bg:   var(--confirmed-bg);
  --status-pending:   var(--pending);
  --status-pending-bg:var(--pending-bg);
  --status-bad:       var(--danger);
  --status-bad-bg:    var(--danger-bg);

  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.5rem; --sp-6:2rem; --sp-7:2.5rem; --sp-8:3.5rem;
  --fs-xs:.75rem; --fs-sm:.8125rem; --fs-base:.9375rem; --fs-md:1.0625rem;
  --radius-sm:6px; --radius-md:10px; --radius-lg:16px;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;

  /* Platform identity colours for charts only (CB's validated categorical set). */
  --pl-instagram:#c65fa0; --pl-facebook:#4d8fd1; --pl-youtube:#d6741f; --pl-website:#1fa97a;

  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.5;
}

/* ---------------- CB base pieces the Reports screen uses ---------------- */
#panel-reports h1, #panel-reports h2, #panel-reports h3 { font-family:var(--font-display); font-weight:800; text-transform:uppercase; letter-spacing:.01em; text-wrap:balance; margin:0; }
#panel-reports p { margin:0; }
#panel-reports button { font-family:inherit; }
#panel-reports :focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
#panel-reports [hidden] { display:none !important; }

#panel-reports .card { background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius-lg); padding:var(--sp-5); margin-bottom:var(--sp-5); }
#panel-reports .card > h2 { font-size:1.1rem; margin-bottom:var(--sp-4); display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); }
#panel-reports .card > h2 .count { font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--text-faint); text-transform:none; letter-spacing:0; font-weight:400; }
#panel-reports .hint { font-size:var(--fs-xs); color:var(--text-faint); margin-bottom:var(--sp-4); }

#panel-reports label.field-label { display:block; font-size:var(--fs-xs); font-weight:600; color:var(--text-dim); text-transform:uppercase; letter-spacing:.07em; margin-bottom:var(--sp-2); }
#panel-reports .field { margin-bottom:var(--sp-4); }
#panel-reports select, #panel-reports input[type="text"], #panel-reports input[type="date"] { width:100%; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:var(--sp-2) var(--sp-3); color:var(--text); font-family:var(--font-body); font-size:var(--fs-base); color-scheme:dark; outline:none; }
:root[data-theme="light"] #panel-reports select, :root[data-theme="light"] #panel-reports input[type="date"] { color-scheme:light; }
#panel-reports select:focus, #panel-reports input:focus { border-color:var(--accent); }
#panel-reports select:disabled, #panel-reports input:disabled { opacity:.5; cursor:not-allowed; color:var(--text-faint); }

#panel-reports .chip-row { display:flex; gap:var(--sp-2); flex-wrap:wrap; }
#panel-reports .chip { font-family:var(--font-mono); font-size:var(--fs-sm); font-weight:500; padding:7px 13px; border-radius:999px; border:1px solid var(--border); background:var(--surface-2); color:var(--text-faint); cursor:pointer; transition:all .12s; }
#panel-reports .chip[aria-pressed="true"] { background:var(--accent); border-color:var(--accent); color:#fff; }
#panel-reports .chip:hover { border-color:var(--accent); }

#panel-reports .toggle-row { display:flex; gap:var(--sp-2); }
#panel-reports .toggle-btn { flex:1; padding:var(--sp-2) var(--sp-3); border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--surface-2); color:var(--text-dim); font-size:var(--fs-sm); cursor:pointer; font-weight:600; }
#panel-reports .toggle-btn[aria-pressed="true"] { background:var(--surface-3); border-color:var(--accent); color:var(--text); }

#panel-reports .vc-btn { font-size:var(--fs-xs); font-weight:700; padding:7px 12px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--surface-3); color:var(--text-dim); cursor:pointer; white-space:nowrap; }
#panel-reports .vc-btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
#panel-reports .vc-btn.primary:hover { filter:brightness(1.1); }
#panel-reports .vc-btn:not(.primary):hover { border-color:var(--accent); color:var(--text); }
#panel-reports .vc-btn.small { padding:6px 9px; font-size:.68rem; }
#panel-reports .vc-btn:disabled, #panel-reports .vc-btn[aria-disabled="true"], #panel-reports .vc-btn[aria-busy="true"] { opacity:.5; cursor:default; }
#panel-reports a.vc-btn { text-decoration:none; display:inline-block; }

#panel-reports .link-btn { background:none; border:1px solid var(--border); color:var(--text-dim); border-radius:999px; padding:6px 14px; font-size:var(--fs-xs); cursor:pointer; }
#panel-reports .link-btn:hover { border-color:var(--accent); color:var(--text); }
#panel-reports .link-btn:disabled { opacity:.6; cursor:default; }

#panel-reports .conn-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-3); }
#panel-reports .conn-list li { display:flex; align-items:flex-start; gap:var(--sp-3); }
#panel-reports .dot { width:9px; height:9px; border-radius:50%; flex:none; margin-top:6px; }
#panel-reports .dot.ok { background:var(--status-good); box-shadow:0 0 0 3px var(--status-good-bg); }
#panel-reports .dot.pending { background:var(--status-pending); box-shadow:0 0 0 3px var(--status-pending-bg); }
#panel-reports .dot.off { background:var(--text-faint); box-shadow:0 0 0 3px var(--surface-2); }
#panel-reports .dot.bad { background:var(--status-bad); box-shadow:0 0 0 3px var(--status-bad-bg); }
#panel-reports .conn-name { font-weight:600; font-size:var(--fs-sm); min-width:76px; }
#panel-reports .conn-note { font-size:var(--fs-xs); color:var(--text-faint); font-family:var(--font-mono); overflow-wrap:anywhere; min-width:0; }
#panel-reports .conn-note.warn { color:var(--status-pending); }
#panel-reports .conn-note.bad { color:var(--status-bad); }
#panel-reports .conn-body { min-width:0; flex:1; }
#panel-reports .conn-raw { font-size:.6875rem; color:var(--text-faint); opacity:.8; font-family:var(--font-mono); overflow-wrap:anywhere; margin-top:2px; }
#panel-reports .conn-sub { font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--accent-hover); text-transform:uppercase; letter-spacing:.09em; margin-bottom:var(--sp-2); }
#panel-reports .conn-sec .hint { margin-bottom:var(--sp-3); }
#panel-reports .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

#panel-reports .plat-badge { font-family:var(--font-mono); font-size:.65rem; font-weight:600; letter-spacing:.03em; padding:2px 6px; border-radius:4px; border:1px solid var(--border); color:var(--text-faint); }

/* ---------------- reports tab ---------------- */
#panel-reports .rp-period { display:flex; gap:var(--sp-3); align-items:center; justify-content:space-between; flex-wrap:wrap; margin-bottom:var(--sp-3); }
#panel-reports .rp-period .chip { padding:5px 12px; font-size:var(--fs-xs); }
#panel-reports .rp-custom { display:flex; gap:var(--sp-2); align-items:center; flex-wrap:wrap; margin-bottom:var(--sp-3); }
#panel-reports .rp-custom label { font-size:var(--fs-xs); color:var(--text-dim); }
#panel-reports .rp-custom input[type="date"] { width:auto; padding:5px 8px; font-size:var(--fs-sm); }
#panel-reports .rp-saved select { width:auto; max-width:220px; padding:5px 8px; font-size:var(--fs-sm); font-family:var(--font-body); text-transform:none; letter-spacing:0; font-weight:400; }
#panel-reports .rp-period-head { display:flex; align-items:baseline; gap:var(--sp-2) var(--sp-3); flex-wrap:wrap; margin:var(--sp-4) 0 var(--sp-3); padding-top:var(--sp-4); border-top:1px solid var(--border-soft); }
#panel-reports .rp-period-head h3 { font-size:1rem; }
#panel-reports .rp-period-head .count { font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--text-faint); }
#panel-reports .rp-tr-sub { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap; margin:var(--sp-6) 0 var(--sp-3); padding-top:var(--sp-5); border-top:1px solid var(--border-soft); }
#panel-reports .rp-head-tools { display:flex; gap:var(--sp-2); align-items:center; }
#panel-reports .rp-head-tools .toggle-btn { flex:none; padding:6px 14px; font-family:var(--font-body); text-transform:none; letter-spacing:0; }

#panel-reports .rp-state { text-align:center; padding:var(--sp-6) var(--sp-4); color:var(--text-faint); font-size:var(--fs-sm); display:flex; flex-direction:column; align-items:center; gap:var(--sp-3); }
#panel-reports .rp-state.bad { color:var(--status-bad); }
#panel-reports .rp-note { font-size:var(--fs-xs); color:var(--text-dim); background:var(--surface-2); border:1px solid var(--border-soft); border-radius:var(--radius-sm); padding:var(--sp-2) var(--sp-3); margin-bottom:var(--sp-4); }
#panel-reports .rp-note.warn { color:var(--status-pending); background:var(--status-pending-bg); border-color:color-mix(in srgb, var(--status-pending) 40%, transparent); }

#panel-reports .rp-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:var(--sp-3); margin-bottom:var(--sp-5); }
#panel-reports .rp-kpi { background:var(--surface-2); border:1px solid var(--border-soft); border-radius:var(--radius-md); padding:var(--sp-4); min-width:0; }
#panel-reports .rp-kpi-head { display:flex; align-items:center; gap:var(--sp-2); font-size:var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--text-dim); }
#panel-reports .rp-sw { width:9px; height:9px; border-radius:2px; flex:none; display:inline-block; }
#panel-reports .rp-kpi-n { font-family:var(--font-mono); font-size:1.6rem; color:var(--text); font-variant-numeric:tabular-nums; margin-top:var(--sp-2); line-height:1.1; }
#panel-reports .rp-kpi-l { font-size:var(--fs-xs); color:var(--text-faint); }
#panel-reports .rp-chg { display:inline-block; font-family:var(--font-mono); font-size:.7rem; font-weight:500; padding:1px 6px; border-radius:999px; margin-left:6px; vertical-align:middle; background:var(--surface-3); color:var(--text-dim); }
#panel-reports .rp-chg.up { color:var(--status-good); background:var(--status-good-bg); }
#panel-reports .rp-chg.down { color:var(--status-bad); background:var(--status-bad-bg); }
#panel-reports .rp-kpi-rows { margin-top:var(--sp-3); border-top:1px solid var(--border-soft); padding-top:var(--sp-2); }
#panel-reports .rp-kpi-rows div { display:flex; justify-content:space-between; gap:var(--sp-2); font-size:var(--fs-xs); color:var(--text-faint); padding:2px 0; }
#panel-reports .rp-kpi-rows b { font-family:var(--font-mono); font-weight:500; color:var(--text-dim); font-variant-numeric:tabular-nums; }

#panel-reports .rp-sub { font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--accent-hover); text-transform:uppercase; letter-spacing:.09em; margin:var(--sp-5) 0 var(--sp-3); }
#panel-reports .rp-grid2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--sp-5); }

#panel-reports .rp-legend { display:flex; gap:var(--sp-4); flex-wrap:wrap; font-size:var(--fs-xs); color:var(--text-dim); margin-bottom:var(--sp-2); }
#panel-reports .rp-legend span { display:inline-flex; align-items:center; gap:6px; }
#panel-reports .rp-chart { position:relative; }
#panel-reports .rp-chart svg { display:block; width:100%; height:auto; overflow:visible; }
#panel-reports .rp-chart .ax { font-family:var(--font-mono); font-size:10px; fill:var(--text-faint); }
#panel-reports .rp-chart .grid { stroke:var(--border-soft); stroke-width:1; }
#panel-reports .rp-chart .hit { fill:transparent; cursor:default; }
#panel-reports .rp-chart .hit:hover { fill:var(--hover-tint); }
#panel-reports .rp-tip { position:absolute; pointer-events:none; background:var(--surface-3); border:1px solid var(--border); border-radius:var(--radius-sm); padding:6px 10px; font-size:var(--fs-xs); color:var(--text); box-shadow:0 8px 24px -8px rgba(0,0,0,.6); white-space:nowrap; z-index:5; transform:translateX(-50%); }
#panel-reports .rp-tip div { display:flex; gap:var(--sp-3); justify-content:space-between; font-family:var(--font-mono); color:var(--text-dim); }
#panel-reports .rp-tip strong { display:block; margin-bottom:2px; }
#panel-reports details.rp-raw { margin-top:var(--sp-2); font-size:var(--fs-xs); color:var(--text-faint); }
#panel-reports details.rp-raw summary { cursor:pointer; }

#panel-reports .rp-top { list-style:none; margin:0; padding:0; counter-reset:rp; }
#panel-reports .rp-top li { display:grid; grid-template-columns:22px 1fr auto; gap:var(--sp-2) var(--sp-3); padding:var(--sp-2) 0; border-bottom:1px solid var(--border-soft); align-items:baseline; }
#panel-reports .rp-top li:last-child { border-bottom:none; }
#panel-reports .rp-top li::before { counter-increment:rp; content:counter(rp); font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--accent-hover); }
#panel-reports .rp-top .t { font-weight:600; font-size:var(--fs-sm); min-width:0; overflow-wrap:anywhere; }
#panel-reports .rp-top .n { font-family:var(--font-mono); font-size:var(--fs-sm); font-variant-numeric:tabular-nums; }
#panel-reports .rp-top .by { grid-column:2 / 4; display:flex; gap:5px; flex-wrap:wrap; }
#panel-reports a.plat-badge { text-decoration:none; }
#panel-reports a.plat-badge:hover { border-color:var(--accent); color:var(--text); }

#panel-reports .rp-bars { display:flex; flex-direction:column; gap:var(--sp-2); }
#panel-reports .rp-bar { display:grid; grid-template-columns:minmax(80px,140px) 1fr 52px; gap:var(--sp-2); align-items:center; font-size:var(--fs-xs); }
#panel-reports .rp-bar .l { color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#panel-reports .rp-bar .track { height:8px; background:var(--surface-3); border-radius:999px; overflow:hidden; }
#panel-reports .rp-bar .fill { height:100%; background:var(--pl-website); border-radius:999px; }
#panel-reports .rp-bar .v { font-family:var(--font-mono); color:var(--text); text-align:right; font-variant-numeric:tabular-nums; }

#panel-reports .rp-filters { display:flex; gap:var(--sp-3); align-items:flex-end; flex-wrap:wrap; margin-bottom:var(--sp-4); }
#panel-reports .rp-filters .field { margin-bottom:0; min-width:140px; flex:1 1 140px; max-width:220px; }
#panel-reports .rp-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--border-soft); border-radius:var(--radius-md); }
#panel-reports table.rp-table { width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
#panel-reports .rp-table th, #panel-reports .rp-table td { padding:var(--sp-2) var(--sp-3); border-bottom:1px solid var(--border-soft); text-align:left; white-space:nowrap; }
#panel-reports .rp-table tbody tr:last-child td { border-bottom:none; }
#panel-reports .rp-table tbody tr:hover { background:var(--surface-2); }
#panel-reports .rp-table th { background:var(--surface-2); font-size:var(--fs-xs); font-weight:600; color:var(--text-dim); text-transform:uppercase; letter-spacing:.06em; position:sticky; top:0; }
#panel-reports .rp-table th button { background:none; border:none; color:inherit; font:inherit; text-transform:inherit; letter-spacing:inherit; cursor:pointer; padding:0; }
#panel-reports .rp-table th button:hover { color:var(--text); }
#panel-reports .rp-table th[aria-sort] button { color:var(--accent-hover); }
#panel-reports .rp-table .num { text-align:right; font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
#panel-reports .rp-table th.num button { text-align:right; }
#panel-reports .rp-table td.title { white-space:normal; min-width:200px; max-width:340px; }
#panel-reports .rp-table a { color:var(--accent-hover); }

#panel-reports .card > h2.rp-wrap-head { flex-wrap:wrap; }
#panel-reports .rp-table td.plats { white-space:nowrap; }
#panel-reports .rp-table td.plats .plat-badge + .plat-badge, #panel-reports .rp-table td.links a + a { margin-left:4px; }
#panel-reports .rp-table .partial { color:var(--text-dim); }

#panel-reports .rp-grp { list-style:none; margin:0; padding:0; }
#panel-reports .rp-grp > li { padding:var(--sp-3) 0; border-bottom:1px solid var(--border-soft); }
#panel-reports .rp-grp > li:last-child { border-bottom:none; }
#panel-reports button.rp-grp-head { width:100%; background:none; border:none; padding:0; color:inherit; font:inherit; text-align:left; cursor:pointer; }
#panel-reports button.rp-grp-head:hover .t { color:var(--accent-hover); }
#panel-reports .rp-grp-caret { color:var(--text-faint); margin-left:4px; }
#panel-reports .rp-grp-head { display:flex; justify-content:space-between; align-items:baseline; gap:var(--sp-2) var(--sp-3); flex-wrap:wrap; }
#panel-reports .rp-grp .t { font-size:var(--fs-sm); font-weight:600; overflow-wrap:anywhere; min-width:0; }
#panel-reports .rp-grp .m { font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--text-faint); margin-top:2px; display:flex; gap:var(--sp-1) var(--sp-3); flex-wrap:wrap; align-items:center; }
#panel-reports .rp-grp .m a { color:var(--accent-hover); }
#panel-reports .rp-grp-n { font-family:var(--font-mono); font-size:var(--fs-sm); font-variant-numeric:tabular-nums; white-space:nowrap; }
#panel-reports .rp-grp-posts { list-style:none; margin:var(--sp-2) 0 0; padding:0 0 0 var(--sp-4); border-left:2px solid var(--border-soft); }
#panel-reports .rp-grp-posts li { padding:6px 0; }
#panel-reports .rp-grp-posts .t { font-weight:500; color:var(--text-dim); }
#panel-reports .rp-grp-more { display:flex; justify-content:center; margin-top:var(--sp-3); }

/* trends */
#panel-reports .rp-tr-controls { display:flex; gap:var(--sp-3) var(--sp-5); flex-wrap:wrap; align-items:center; justify-content:space-between; margin-bottom:var(--sp-4); }
#panel-reports .rp-tr-controls .chip { display:inline-flex; align-items:center; gap:6px; padding:5px 11px; font-size:var(--fs-xs); }
#panel-reports .rp-tr-controls .chip .rp-sw { width:8px; height:8px; }
#panel-reports .rp-tr-controls .chip[aria-pressed="false"] .rp-sw { opacity:.45; }
#panel-reports .rp-tr-controls .rp-tr-chip[aria-pressed="true"] { background:var(--surface-3); border-color:var(--text-faint); color:var(--text); }
#panel-reports .rp-tr-kpis { grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr); }
#panel-reports .rp-tr-head { background:linear-gradient(180deg,var(--accent-soft),var(--surface-2)); border-color:color-mix(in srgb, var(--accent) 35%, var(--card)); }
#panel-reports .rp-target { height:8px; background:var(--surface-3); border-radius:999px; overflow:hidden; margin:var(--sp-3) 0 var(--sp-1); }
#panel-reports .rp-target span { display:block; height:100%; background:var(--accent); border-radius:999px; }
#panel-reports .rp-target-pct { font-family:var(--font-mono); font-weight:500; color:var(--text); }
#panel-reports .rp-chart .rp-cross { stroke:var(--text-faint); stroke-width:1; stroke-dasharray:2 3; pointer-events:none; }
#panel-reports .rp-tip .rp-sw { width:7px; height:7px; vertical-align:middle; }
#panel-reports .rp-tr-foot { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap; margin-top:var(--sp-4); }
#panel-reports .rp-tr-foot .hint { margin:0; flex:1 1 260px; }

/* phone layout (CB: ≤820px) */
@media (max-width:820px) {
  #panel-reports .card { padding:var(--sp-4); }
  #panel-reports .card > h2 { flex-wrap:wrap; }
  #panel-reports .rp-filters .field { max-width:none; }
  #panel-reports .rp-table td.title { min-width:150px; }
  #panel-reports .rp-grid2 { grid-template-columns:minmax(0,1fr); }
  #panel-reports .rp-tr-kpis { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  #panel-reports .rp-tr-kpis .rp-tr-head { grid-column:1 / -1; }
}
@media (max-width:420px) {
  #panel-reports .rp-kpis { grid-template-columns:1fr 1fr; }
  #panel-reports .rp-kpi { padding:var(--sp-3); }
  #panel-reports .rp-kpi-n { font-size:1.3rem; }
}