/* ===== Time-in-Spa UI (dark gold/brown, matches Ejema theme) ===== */
#spa-time-pane { --g:#e8d26b; --bg:#120b05; --surf:#1a1108; --line:#3d2818; --txt:#f5e6cc; --mut:#9a8a6a;
  color:var(--txt); font-family:Inter,sans-serif; max-width:1100px; margin:0 auto; padding:6px 14px 90px; }
#spa-time-pane .st-loading,#spa-time-pane .st-err,#spa-time-pane .st-empty{
  text-align:center; padding:40px 16px; color:var(--mut); }
#spa-time-pane .st-err{ background:#2a1410; border:1px solid #6b3a35; border-radius:12px; color:#ffb4b4; }
#spa-time-pane code{ background:#241608; padding:1px 5px; border-radius:4px; color:#c4a576; }

/* KPIs */
#spa-time-pane .st-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin:6px 0 16px; }
#spa-time-pane .st-kpi{ background:linear-gradient(160deg,#221708,#1a1108); border:1px solid var(--line);
  border-radius:14px; padding:14px 15px; }
#spa-time-pane .st-kpi .v{ font-size:26px; font-weight:800; color:var(--g); line-height:1.05; }
#spa-time-pane .st-kpi.blue .v{ color:#9ec5ff; }
#spa-time-pane .st-kpi .l{ font-size:11px; color:var(--mut); text-transform:uppercase; letter-spacing:.5px; margin-top:5px; }
#spa-time-pane .st-kpi .s{ font-size:11px; color:#b8863b; margin-top:3px; }

/* charts */
#spa-time-pane .st-charts{ display:grid; gap:14px; grid-template-columns:repeat(12,1fr); margin-bottom:18px; }
#spa-time-pane .st-card{ background:var(--surf); border:1px solid var(--line); border-radius:14px; padding:14px 14px 10px; min-width:0; }
#spa-time-pane .st-card.full{ grid-column:span 12; } #spa-time-pane .st-card.half{ grid-column:span 6; }
#spa-time-pane .st-card h3{ margin:0 0 2px; font-size:14px; color:var(--g); }
#spa-time-pane .st-card .note{ margin:0 0 8px; font-size:11px; color:var(--mut); }
#spa-time-pane .st-cw{ position:relative; width:100%; }
#spa-time-pane .st-cw{ height:230px; } #spa-time-pane .st-card.tall .st-cw{ height:280px; }
@media(max-width:760px){ #spa-time-pane .st-card.half{ grid-column:span 12; } }

/* control bar */
#spa-time-pane .st-bar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
#spa-time-pane .st-segs{ display:flex; gap:4px; background:var(--surf); border:1px solid var(--line); border-radius:10px; padding:3px; }
#spa-time-pane .st-seg{ background:transparent; border:0; color:var(--mut); font-size:13px; padding:7px 13px; border-radius:8px; cursor:pointer; }
#spa-time-pane .st-seg.on{ background:#8b5a2b; color:#1a1108; font-weight:700; }
#spa-time-pane .st-sort{ margin-left:auto; background:var(--surf); color:var(--txt); border:1px solid var(--line); border-radius:9px; padding:8px 11px; font-size:13px; }

/* people list */
#spa-time-pane .st-list{ display:flex; flex-direction:column; gap:8px; }
#spa-time-pane .st-pcard{ background:var(--surf); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
#spa-time-pane .st-pcard.open{ border-color:#6b4a25; }
#spa-time-pane .st-prow{ display:flex; align-items:center; gap:12px; padding:10px 12px; cursor:pointer; }
#spa-time-pane .st-prow:hover{ background:#211506; }
#spa-time-pane .st-face{ width:48px; height:48px; border-radius:10px; object-fit:cover; background:#2b1d10; flex:0 0 auto; }
#spa-time-pane .st-noface{ display:flex; align-items:center; justify-content:center; color:#6b5a3a; font-size:20px; }
#spa-time-pane .st-pmain{ flex:1; min-width:0; }
#spa-time-pane .st-pname{ font-size:15px; font-weight:600; color:var(--txt); display:flex; align-items:center; gap:7px; }
#spa-time-pane .st-psub{ font-size:12px; color:var(--mut); margin-top:2px; }
#spa-time-pane .st-pstat{ text-align:right; white-space:nowrap; }
#spa-time-pane .st-big{ font-size:18px; font-weight:800; color:var(--g); }
#spa-time-pane .st-lbl{ font-size:11px; color:var(--mut); }
#spa-time-pane .st-caret{ color:#8b6a3a; font-size:14px; width:14px; text-align:center; }
#spa-time-pane .st-role{ font-size:9px; font-weight:800; letter-spacing:.5px; padding:2px 6px; border-radius:5px; }
#spa-time-pane .st-role.staff{ background:#2b4a6b; color:#9ec5ff; }
#spa-time-pane .st-role.cust{ background:#3d2818; color:#c4a576; }

/* expanded edit + visits */
#spa-time-pane .st-edit{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; padding:0 12px 10px; }
#spa-time-pane .st-namein{ flex:1; min-width:160px; background:#241608; border:1px solid var(--line); color:var(--txt);
  border-radius:9px; padding:9px 11px; font-size:14px; }
#spa-time-pane .st-roles{ display:flex; gap:5px; }
#spa-time-pane .st-rbtn{ background:#241608; border:1px solid var(--line); color:var(--mut); border-radius:16px; padding:6px 11px; font-size:12px; cursor:pointer; }
#spa-time-pane .st-rbtn.on{ background:#8b5a2b; border-color:#8b5a2b; color:#1a1108; font-weight:700; }
#spa-time-pane .st-visits{ border-top:1px solid var(--line); padding:6px 12px 10px; }
#spa-time-pane .st-visit{ display:flex; align-items:center; gap:10px; padding:6px 0; font-size:13px; border-bottom:1px solid #241608; }
#spa-time-pane .st-visit:last-child{ border-bottom:0; }
#spa-time-pane .st-vday{ width:90px; color:var(--mut); flex:0 0 auto; }
#spa-time-pane .st-vdwell{ flex:1; }
#spa-time-pane .st-vn{ color:var(--mut); font-size:12px; }
#spa-time-pane .st-gold{ color:var(--g); } #spa-time-pane .st-muted{ color:var(--mut); }

/* ===== Day navigator (filter by day + cycle) ===== */
#spa-time-pane .st-daynav{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:4px 0 14px; }
#spa-time-pane .st-daybtn{ background:#241608; border:1px solid var(--line); color:var(--txt);
  border-radius:9px; padding:8px 14px; font-size:14px; font-weight:600; cursor:pointer; }
#spa-time-pane .st-daybtn:hover:not([disabled]){ background:#34230d; }
#spa-time-pane .st-daybtn[disabled]{ opacity:.35; cursor:default; }
#spa-time-pane .st-daysel{ background:#241608; color:var(--txt); border:1px solid var(--line);
  border-radius:9px; padding:8px 12px; font-size:14px; min-width:170px; }
#spa-time-pane .st-dayclear{ background:transparent; border:0; color:#b8863b; font-size:13px; cursor:pointer; }
#spa-time-pane .st-dayclear:hover{ color:var(--g); text-decoration:underline; }

/* ===== Anomalies Audit pane ===== */
#spa-audit-pane{ --g:#e8d26b; color:#f5e6cc; font-family:Inter,sans-serif; max-width:1100px; margin:0 auto; padding:6px 14px 90px; }
#spa-audit-pane .sa-load,#spa-audit-pane .sa-err{ text-align:center; padding:40px 16px; color:#9a8a6a; }
#spa-audit-pane .sa-err{ background:#2a1410; border:1px solid #6b3a35; border-radius:12px; color:#ffb4b4; }
#spa-audit-pane .sa-head{ font-size:18px; font-weight:800; color:var(--g); margin:2px 0 6px; }
#spa-audit-pane .sa-note{ font-size:12px; color:#9a8a6a; line-height:1.5; margin-bottom:16px; }
#spa-audit-pane .sa-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:18px; }
#spa-audit-pane .sa-kpi{ background:linear-gradient(160deg,#221708,#1a1108); border:1px solid #3d2818; border-radius:14px; padding:14px 15px; }
#spa-audit-pane .sa-kpi .v{ font-size:24px; font-weight:800; color:var(--g); line-height:1.05; }
#spa-audit-pane .sa-kpi.red .v{ color:#ff8a7a; }
#spa-audit-pane .sa-kpi .l{ font-size:11px; color:#9a8a6a; text-transform:uppercase; letter-spacing:.4px; margin-top:5px; }
#spa-audit-pane .sa-kpi .s{ font-size:11px; color:#b8863b; margin-top:3px; }
#spa-audit-pane .sa-card{ background:#1a1108; border:1px solid #3d2818; border-radius:14px; padding:14px 14px 12px; margin-bottom:16px; }
#spa-audit-pane .sa-card h3{ margin:0 0 2px; font-size:15px; color:var(--g); }
#spa-audit-pane .sa-sub{ margin:0 0 10px; font-size:11.5px; color:#9a8a6a; line-height:1.5; }
#spa-audit-pane .sa-ok{ color:#7fc99a; padding:8px 0; font-size:14px; }
#spa-audit-pane .sa-tbl{ width:100%; border-collapse:collapse; font-size:12.5px; }
#spa-audit-pane .sa-tbl th,#spa-audit-pane .sa-tbl td{ text-align:left; padding:7px 8px; border-bottom:1px solid #2a1c0e; }
#spa-audit-pane .sa-tbl th{ color:#9a8a6a; font-weight:600; font-size:10.5px; text-transform:uppercase; }
#spa-audit-pane .sa-tbl td.n,#spa-audit-pane .sa-tbl th.n{ text-align:right; }
#spa-audit-pane .sa-mut{ color:#7a6a4a; }
#spa-audit-pane .sa-gap-big{ color:#ffb74d; font-weight:700; }
#spa-audit-pane .sa-nocam td{ opacity:.5; }
#spa-audit-pane .sa-tag{ font-size:9px; background:#3d2818; color:#9a8a6a; padding:1px 5px; border-radius:4px; }

/* ===== Visit Log pane ===== */
#spa-visitlog-pane{ color:#f5e6cc; font-family:Inter,sans-serif; max-width:1100px; margin:0 auto; padding:6px 14px 90px; }
#spa-visitlog-pane .vl-load,#spa-visitlog-pane .vl-err{ text-align:center; padding:40px; color:#9a8a6a; }
#spa-visitlog-pane .vl-head{ font-size:18px; font-weight:800; color:#e8d26b; margin:2px 0 12px; }
#spa-visitlog-pane .vl-nav{ display:flex; align-items:center; gap:8px; margin-bottom:14px; }
#spa-visitlog-pane .vl-cbtn{ background:#241608; border:1px solid #3d2818; color:#f5e6cc; border-radius:9px; padding:8px 14px; font-size:13px; font-weight:600; cursor:pointer; }
#spa-visitlog-pane .vl-cbtn:disabled{ opacity:.35; cursor:default; }
#spa-visitlog-pane .vl-sel{ background:#1a1108; border:1px solid #3d2818; color:#f5e6cc; border-radius:9px; padding:8px 12px; font-size:14px; font-weight:700; }
#spa-visitlog-pane .vl-kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:18px; }
#spa-visitlog-pane .vl-kpi{ background:linear-gradient(160deg,#221708,#1a1108); border:1px solid #3d2818; border-radius:14px; padding:12px 14px; }
#spa-visitlog-pane .vl-kpi .v{ font-size:24px; font-weight:800; color:#f5e6cc; }
#spa-visitlog-pane .vl-kpi.gold .v{ color:#e8d26b; }
#spa-visitlog-pane .vl-kpi.red .v{ color:#ff8a7a; }
#spa-visitlog-pane .vl-kpi .l{ font-size:10.5px; color:#9a8a6a; text-transform:uppercase; letter-spacing:.4px; margin-top:4px; }
#spa-visitlog-pane .vl-kpi .s{ font-size:11px; color:#b8863b; margin-top:2px; }
#spa-visitlog-pane .vl-cols{ display:grid; grid-template-columns:0.9fr 1.3fr; gap:14px; align-items:start; }
@media(max-width:760px){ #spa-visitlog-pane .vl-cols{ grid-template-columns:1fr; } #spa-visitlog-pane .vl-kpis{ grid-template-columns:1fr; } }
#spa-visitlog-pane .vl-col{ background:#1a1108; border:1px solid #3d2818; border-radius:14px; padding:12px 12px 14px; }
#spa-visitlog-pane .vl-col h3{ margin:0 0 10px; font-size:14px; color:#e8d26b; }
#spa-visitlog-pane .vl-empty{ color:#7a6a4a; font-size:13px; padding:10px 2px; }
#spa-visitlog-pane .vl-mrow{ display:grid; grid-template-columns:46px 38px 1fr 1fr 42px; gap:6px; align-items:center; padding:7px 4px; border-bottom:1px solid #2a1c0e; font-size:12.5px; }
#spa-visitlog-pane .vl-mtime{ color:#e8d26b; font-weight:700; }
#spa-visitlog-pane .vl-mdur{ color:#9a8a6a; }
#spa-visitlog-pane .vl-mther{ color:#9ec5ff; }
#spa-visitlog-pane .vl-mcli{ color:#f5e6cc; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#spa-visitlog-pane .vl-mprice{ color:#b8863b; text-align:right; font-size:11px; }
#spa-visitlog-pane .vl-vrow{ display:flex; gap:10px; padding:9px 4px; border-bottom:1px solid #2a1c0e; align-items:center; }
#spa-visitlog-pane .vl-photos{ display:flex; gap:5px; flex-shrink:0; }
#spa-visitlog-pane .vl-ph{ position:relative; width:104px; height:104px; cursor:pointer; }
#spa-visitlog-pane .vl-ph img{ width:104px; height:104px; object-fit:cover; border-radius:10px; border:1px solid #3d2818; background:#2b1d10; transition:transform .1s; }
#spa-visitlog-pane .vl-ph:active img{ transform:scale(.96); }
#spa-visitlog-pane .vl-ph span{ position:absolute; left:0; bottom:0; right:0; font-size:10px; background:rgba(0,0,0,.65); color:#e8d26b; text-align:center; padding:1px 0; border-radius:0 0 9px 9px; }
#spa-visitlog-pane .vl-noimg{ display:flex; align-items:center; justify-content:center; font-size:8.5px; color:#7a6a4a; border:1px dashed #3d2818; border-radius:9px; text-align:center; }
#spa-visitlog-pane .vl-vmeta{ flex:1; min-width:0; }
#spa-visitlog-pane .vl-vwho{ font-size:13px; font-weight:700; color:#f5e6cc; }
#spa-visitlog-pane .vl-vdwell{ font-size:14px; color:#e8d26b; font-weight:700; margin-top:2px; }
#spa-visitlog-pane .vl-vspan{ font-size:11px; color:#9a8a6a; margin-top:1px; }
#spa-visitlog-pane .vl-staff{ font-size:8.5px; background:#1d3a5f; color:#9ec5ff; padding:1px 5px; border-radius:4px; vertical-align:middle; }


/* Visit Log: play badge + zoom modal */
#spa-visitlog-pane .vl-play{ position:absolute; top:4px; right:4px; width:20px; height:20px; line-height:20px; text-align:center; font-size:10px; font-style:normal; color:#fff; background:rgba(0,0,0,.6); border-radius:50%; }
#spa-visitlog-pane .vl-vhint{ font-size:10px; color:#7a6a4a; margin-top:4px; }
.vl-modal{ position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.88); display:flex; align-items:center; justify-content:center; padding:20px; }
.vl-modal .vl-mbox{ position:relative; max-width:92vw; max-height:88vh; }
.vl-modal video,.vl-modal img{ max-width:92vw; max-height:80vh; border-radius:12px; background:#000; display:block; }
.vl-modal .vl-mcap{ text-align:center; color:#e8d26b; font-size:12px; margin-top:8px; font-family:Inter,sans-serif; }
.vl-modal .vl-mclose{ position:absolute; top:-10px; right:-10px; width:34px; height:34px; border-radius:50%; border:0; background:#8b5a2b; color:#1a1108; font-size:16px; font-weight:800; cursor:pointer; }

/* Visit Log: direction badges + explainer */
#spa-visitlog-pane .vl-explain{ font-size:11px; color:#9a8a6a; background:#1a1108; border:1px solid #2a1c0e; border-radius:9px; padding:7px 10px; margin-bottom:12px; line-height:1.5; }
#spa-visitlog-pane .vl-explain b{ color:#e8d26b; }
#spa-visitlog-pane .vl-dir{ position:absolute; left:3px; top:3px; font-style:normal; font-size:9px; font-weight:800; padding:1px 5px; border-radius:5px; background:rgba(0,0,0,.7); }
#spa-visitlog-pane .vl-dir.vl-in{ color:#7dff9b; }
#spa-visitlog-pane .vl-dir.vl-out{ color:#ffb37d; }
#spa-visitlog-pane .vl-dir.vl-x{ color:#9ec5ff; }

/* Visit Log: walk-by toggle */
#spa-visitlog-pane .vl-toggle{ display:block; font-size:12px; color:#cbb890; margin:0 0 14px; cursor:pointer; }
#spa-visitlog-pane .vl-toggle input{ vertical-align:middle; margin-right:6px; accent-color:#b8863b; }
#spa-visitlog-pane .vl-toggle span{ color:#7a6a4a; font-size:11px; }

/* Calibrate pane */
#spa-calibrate-pane{ color:#f5e6cc; font-family:Inter,sans-serif; max-width:900px; margin:0 auto; padding:6px 14px 90px; }
#spa-calibrate-pane .cal-load,#spa-calibrate-pane .cal-err{ text-align:center; padding:40px; color:#9a8a6a; }
#spa-calibrate-pane .cal-head{ font-size:18px; font-weight:800; color:#e8d26b; margin:2px 0 8px; }
#spa-calibrate-pane .cal-intro{ font-size:13px; color:#cbb890; line-height:1.6; background:#1a1108; border:1px solid #2a1c0e; border-radius:10px; padding:11px 13px; margin-bottom:12px; }
#spa-calibrate-pane .cal-intro b{ color:#e8d26b; }
#spa-calibrate-pane .cal-current{ font-size:13px; color:#f5e6cc; margin-bottom:10px; }
#spa-calibrate-pane .cal-current .cal-unset{ color:#9a8a6a; }
#spa-calibrate-pane .cal-choices{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:20px; }
#spa-calibrate-pane .cal-btn{ background:#241608 !important; border:1px solid #3d2818 !important; color:#f5e6cc !important; border-radius:11px; padding:12px 16px; font-size:13px; cursor:pointer; }
#spa-calibrate-pane .cal-btn b{ color:#e8d26b; }
#spa-calibrate-pane .cal-btn.on{ background:#3a5f3a !important; border-color:#7dff9b !important; }
#spa-calibrate-pane .cal-btn.on b{ color:#cffadb; }
#spa-calibrate-pane .cal-btn.clear{ background:#2a1c0e !important; color:#9a8a6a !important; }
#spa-calibrate-pane .cal-block{ margin-bottom:18px; }
#spa-calibrate-pane .cal-block h3{ font-size:14px; color:#e8d26b; margin:0 0 8px; }
#spa-calibrate-pane .cal-empty{ font-size:12px; color:#7a6a4a; }
#spa-calibrate-pane .cal-clips{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; }
#spa-calibrate-pane .cal-clip video{ width:100%; border-radius:10px; border:1px solid #3d2818; background:#000; }
#spa-calibrate-pane .cal-cap{ font-size:11px; color:#9a8a6a; margin-top:3px; }

/* Clip labeler (replaces old calibrate UI) */
#spa-calibrate-pane .cal-prog{ font-size:13px; color:#cbb890; margin-bottom:10px; }
#spa-calibrate-pane .cal-prog b{ color:#e8d26b; }
#spa-calibrate-pane .cal-day{ color:#9a8a6a; font-size:11px; }
#spa-calibrate-pane .cal-stage{ margin-bottom:12px; }
#spa-calibrate-pane #cal-video{ width:100%; max-width:520px; display:block; margin:0 auto; border-radius:12px; border:1px solid #3d2818; background:#000; }
#spa-calibrate-pane .cal-meta{ text-align:center; font-size:12px; color:#9a8a6a; margin-top:6px; }
#spa-calibrate-pane .cal-tag{ font-weight:800; }
#spa-calibrate-pane .cal-opts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:9px; max-width:560px; margin:0 auto 14px; }
#spa-calibrate-pane .cal-opt{ background:#241608 !important; border:1px solid #3d2818 !important; color:#f5e6cc !important; border-radius:11px; padding:13px 12px; font-size:13px; font-weight:700; cursor:pointer; text-align:left; }
#spa-calibrate-pane .cal-opt:hover{ border-color:var(--oc) !important; }
#spa-calibrate-pane .cal-opt.on{ background:var(--oc) !important; color:#1a1108 !important; border-color:var(--oc) !important; }
#spa-calibrate-pane .cal-nav{ display:flex; gap:10px; justify-content:center; max-width:560px; margin:0 auto; }
#spa-calibrate-pane .cal-navbtn{ background:#2a1c0e !important; border:1px solid #3d2818 !important; color:#cbb890 !important; border-radius:10px; padding:10px 18px; font-size:13px; cursor:pointer; }
#spa-calibrate-pane .cal-navbtn:disabled{ opacity:.35; cursor:default; }
#spa-calibrate-pane .cal-navbtn.skip{ margin-left:auto; }
#spa-calibrate-pane .cal-empty{ font-size:13px; color:#9a8a6a; padding:24px 0; }

/* faded auto-guess direction badge */
#spa-visitlog-pane .vl-dir.vl-guess{ color:#9a8a6a !important; opacity:.7; font-style:italic; }

/* Multi-person clip labeler: tally rows */
#spa-calibrate-pane .cal-mm{ color:#ff7d7d !important; }
#spa-calibrate-pane .cal-tallies{ max-width:480px; margin:0 auto 14px; display:flex; flex-direction:column; gap:7px; }
#spa-calibrate-pane .cal-row{ display:flex; align-items:center; justify-content:space-between; background:#241608; border:1px solid #3d2818; border-left:4px solid var(--oc); border-radius:10px; padding:9px 12px; }
#spa-calibrate-pane .cal-lbl{ font-size:14px; font-weight:700; color:#f5e6cc; }
#spa-calibrate-pane .cal-ctr{ display:flex; align-items:center; gap:12px; }
#spa-calibrate-pane .cal-pm{ width:34px; height:34px; border-radius:9px; border:1px solid #3d2818 !important; background:#2a1c0e !important; color:#e8d26b !important; font-size:20px; font-weight:800; line-height:1; cursor:pointer; }
#spa-calibrate-pane .cal-pm:active{ background:var(--oc) !important; color:#1a1108 !important; }
#spa-calibrate-pane .cal-n{ min-width:22px; text-align:center; font-size:17px; font-weight:800; color:#7a6a4a; }
#spa-calibrate-pane .cal-n.has{ color:#e8d26b; }
#spa-calibrate-pane .cal-nav .next{ margin-left:auto; }