/* ==========================================================================
   Time For Clubbing · Live & stats · Map & places / Patterns / Network & health
   Uses the admin theme variables from style.css (light + dark).
   ========================================================================== */

/* sub-navigation inside Live & stats */
.tfcsub{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px}
.tfcsub button{border:1px solid var(--border);background:var(--surface);color:var(--muted);font:inherit;font-weight:600;font-size:13px;
  padding:7px 14px;border-radius:20px;cursor:pointer}
.tfcsub button:hover{color:var(--text);border-color:var(--border-strong)}
.tfcsub button.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

/* range pills + person filter */
.tfcwbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.tfcrange{display:inline-flex;border:1px solid var(--border);border-radius:20px;overflow:hidden;background:var(--surface)}
.tfcrange button{border:none;background:none;color:var(--muted);font:inherit;font-size:13px;font-weight:600;padding:6px 13px;cursor:pointer}
.tfcrange button+button{border-left:1px solid var(--border)}
.tfcrange button.on{background:var(--surface-3);color:var(--text)}
.tfcwbar select{font:inherit;font-size:13px;padding:6px 10px;border:1px solid var(--border);border-radius:20px;background:var(--surface);color:var(--text)}
.tfcwbar .spacer{flex:1}

/* the map */
.tfcmap{height:480px;border-radius:var(--radius-sm);border:1px solid var(--border);overflow:hidden;background:var(--surface-3);position:relative;z-index:0}
.tfcmapsm{height:300px}
.tfcwlayers{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--text);margin:0 0 10px}
.tfcwlayers label{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.tfcwlayers input{accent-color:var(--accent)}
.tfcwdot{display:inline-block;width:10px;height:10px;border-radius:50%}
.tfcwdot.start{background:#D7153A}
.tfcwdot.finish{background:#2F6FDE}
.tfcwdot.live{background:#1FA971}
.tfcwdot.route{width:16px;height:0;border-top:2px dashed #D7153A;border-radius:0;background:none}
.tfcwhint{margin-top:8px}
:root[data-theme="dark"] .tfcmap .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.95) contrast(.9)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tfcmap .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.95) contrast(.9)}}
.tfcmap .leaflet-popup-content{font:13px/1.45 var(--sans);margin:10px 12px}
.tfcmap .leaflet-container{font-family:var(--sans)}
.tfclivepin{position:relative;width:18px;height:18px}
.tfclivepin i{position:absolute;inset:3px;border-radius:50%;background:#1FA971;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.tfclivepin b{position:absolute;inset:0;border-radius:50%;background:rgba(31,169,113,.45);animation:tfcpulse 1.8s ease-out infinite}
@keyframes tfcpulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.4);opacity:0}}
.tfcmapfallback{width:100%;height:100%;display:block;background:var(--surface-3)}
.tfcmapfallback text{fill:var(--faint);font-size:11px;font-family:var(--sans)}

/* responsive two-column grid that never pushes a column off-screen (wide heatmaps scroll inside their panel) */
.tfcwgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:14px}
.tfcwgrid>*{min-width:0}
.tfcwgrid .anheat,.tfcwgrid .anchartwrap{overflow-x:auto}

/* clickable rows (places, moves, live) */
.tfcwrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 8px;border-bottom:1px dashed var(--border);border-radius:6px;cursor:pointer}
.tfcwrow:last-child{border-bottom:none}
.tfcwrow:hover{background:var(--surface-2)}
.tfcwrow.static{cursor:default}.tfcwrow.static:hover{background:none}
.tfcwmain{display:flex;flex-direction:column;min-width:0}
.tfcwmain b{font-size:13.5px;color:var(--text);overflow:hidden;text-overflow:ellipsis}
.tfcwmain .ans{font-size:12px;color:var(--faint)}
.tfcwcount{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.tfcwarrow{color:var(--faint);padding:0 4px}

/* horizontal bars (histograms / splits) */
.tfcwhbar{display:grid;grid-template-columns:130px 1fr 44px;align-items:center;gap:10px;padding:4px 0;font-size:13px}
.tfcwhbar .lbl{color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tfcwtrack{height:10px;background:var(--surface-3);border-radius:6px;overflow:hidden}
.tfcwtrack i{display:block;height:100%;background:var(--accent);border-radius:6px}
.tfcwtrack i.good{background:var(--good)}.tfcwtrack i.warn{background:var(--warn)}.tfcwtrack i.blue{background:#2F6FDE}
.tfcwhbar b{text-align:right;font-variant-numeric:tabular-nums}

/* tables */
.tfcwtbl{width:100%;border-collapse:collapse;font-size:13px}
.tfcwtbl th{text-align:left;color:var(--faint);font-weight:600;font-size:12px;padding:6px 8px;border-bottom:1px solid var(--border);white-space:nowrap}
.tfcwtbl td{padding:7px 8px;border-bottom:1px dashed var(--border);color:var(--text)}
.tfcwtbl tr:last-child td{border-bottom:none}
.tfcwtbl .num{text-align:right;font-variant-numeric:tabular-nums}
.tfcwtbl th.num{text-align:right}
.tfcwscroll{overflow-x:auto}

/* callouts */
.tfcwnote{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:11px 14px;font-size:13px;color:var(--muted);line-height:1.5;margin-bottom:14px}
.tfcwnote b{color:var(--text)}
.tfcwwarn{background:var(--warn-soft);border-color:transparent;color:var(--warn-ink)}
.tfcwwarn b{color:var(--warn-ink)}
.tfcwattn{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;padding:7px 0;border-bottom:1px dashed var(--border);font-size:13px}
.tfcwattn:last-child{border-bottom:none}
.tfcwattn b{min-width:90px}
.tfcwempty{color:var(--faint);font-size:13px;padding:6px 0}
.tfcwpill{display:inline-block;font-size:11px;font-weight:600;padding:1px 8px;border-radius:20px;background:var(--surface-3);color:var(--muted);margin-left:4px}
.tfcwpill.good{background:var(--good-soft);color:var(--good-ink)}
.tfcwpill.bad{background:var(--accent-soft);color:var(--accent-strong)}
.tfcwpill.warn{background:var(--warn-soft);color:var(--warn-ink)}

@media (max-width:760px){
  .tfcmap{height:360px}
  .tfcwhbar{grid-template-columns:96px 1fr 38px}
}