/* ═══════════════════════════════════════════════════════════════════════════
   NRT Operations Centre - Clients Tab Status Widget
   ═══════════════════════════════════════════════════════════════════════════ */

.cs-legend{display:flex;flex-direction:column;gap:5px;flex-shrink:0}
.cs-legend div{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--text2);white-space:nowrap}
.cs-legend b{color:var(--text);margin-left:auto;padding-left:12px}
.cs-sw{width:8px;height:8px;border-radius:2px;flex-shrink:0;display:inline-block}

.cs-donut-block,.cs-bar-block,.cs-list-block,.cs-waffle-block{display:flex;align-items:center;gap:14px}
.cs-donut{width:92px;height:92px;border-radius:50%;position:relative;flex-shrink:0}
.cs-donut::after{content:'';position:absolute;inset:15px;border-radius:50%;background:var(--card-bg)}
.cs-donut-lbl{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.cs-donut-n{font-size:18px;font-weight:800;color:var(--text)}
.cs-donut-l{font-size:7.5px;color:var(--text4);text-transform:uppercase}

.cs-bar-block{flex-direction:column;align-items:stretch;width:100%}
.cs-bar-track{height:14px;border-radius:7px;overflow:hidden;display:flex;margin-bottom:8px}
.cs-bar-seg{height:100%}

.cs-list-block{flex-direction:column;align-items:stretch;gap:6px;width:100%}
.cs-list-row{display:flex;align-items:center;gap:10px}
.cs-list-lbl{flex:1;font-size:12px;color:var(--text2)}
.cs-list-n{font-size:13px;font-weight:800;color:var(--text)}
.cs-list-pct{font-size:10px;color:var(--text4);width:32px;text-align:right}

.cs-waffle{display:grid;grid-template-columns:repeat(10,1fr);gap:3px;width:150px;flex-shrink:0}
.cs-waffle-sq{width:11px;height:11px;border-radius:2px}

.cs-gauge-block,.cs-ring-block,.cs-vbar-block,.cs-grouped-block,.cs-treemap-block{display:flex;align-items:center;gap:14px}
.cs-gauge-wrap,.cs-ring-wrap{text-align:center;flex-shrink:0}
.cs-gauge{width:100px;height:52px;position:relative;overflow:hidden;margin:0 auto}
.cs-gauge-bg,.cs-gauge-fill{position:absolute;top:0;left:0;width:100px;height:100px;border-radius:50%;box-sizing:border-box}
.cs-gauge-bg{background:conic-gradient(from -90deg,var(--border2) 0deg 180deg,transparent 180deg 360deg)}
.cs-gauge-fill{background:conic-gradient(from -90deg,var(--accent) 0deg var(--fill-deg,90deg),transparent var(--fill-deg,90deg) 360deg)}
.cs-gauge-n{font-size:20px;font-weight:800;color:var(--text);margin-top:2px}
.cs-gauge-l{font-size:9px;color:var(--text4);text-transform:uppercase}

.cs-ring{width:90px;height:90px;border-radius:50%;position:relative;margin:0 auto}
.cs-ring::after{content:'';position:absolute;inset:13px;border-radius:50%;background:var(--card-bg)}
.cs-ring-n{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:800;color:var(--text);z-index:1}
.cs-ring-l{font-size:9px;color:var(--text4);text-transform:uppercase;margin-top:4px}

.cs-vbar-wrap{display:flex;align-items:flex-end;gap:4px;height:80px;flex-shrink:0}
.cs-vbar-track{width:28px;height:100%;border-radius:5px;overflow:hidden;display:flex;flex-direction:column-reverse}
.cs-vbar-seg{width:100%}
.cs-vbar-total{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;padding-bottom:2px}
.cs-vbar-n{font-size:18px;font-weight:800;color:var(--text)}
.cs-vbar-l{font-size:8px;color:var(--text4);text-transform:uppercase}

.cs-grouped{display:flex;align-items:flex-end;gap:8px;height:80px;flex-shrink:0}
.cs-gbar-col{display:flex;flex-direction:column;align-items:center;gap:4px;width:26px;height:100%}
.cs-gbar-track{flex:1;width:100%;display:flex;align-items:flex-end}
.cs-gbar{width:100%;border-radius:4px 4px 0 0}
.cs-gbar-n{font-size:10px;color:var(--text3);font-weight:700}

.cs-treemap{width:150px;height:80px;display:grid;grid-template-columns:1.5fr 1fr;grid-template-rows:1fr 1fr;gap:2px;flex-shrink:0}
.cs-tm-cell{border-radius:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:rgba(0,0,0,.6);font-weight:800;overflow:hidden}
.cs-tm-cell span:first-child{font-size:15px}
.cs-tm-cell span:last-child{font-size:8px;text-transform:uppercase}
.cs-tm-big{grid-row:1/3}
.cs-tm-note{color:var(--text4);font-size:9px;font-style:italic}

.cs-metric-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
.cs-metric-col{display:flex;flex-direction:column;gap:9px}
.cs-mrow{display:flex;align-items:center;gap:10px}
.cs-mrow-lbl{flex:0 0 118px;font-size:11px;color:var(--text3)}
.cs-mrow-bar-wrap{flex:1;height:5px;border-radius:3px;background:var(--border2);overflow:hidden}
.cs-mrow-bar{display:block;height:100%;border-radius:3px}
.cs-mrow-val{flex:0 0 34px;text-align:right;font-size:12px;font-weight:700;color:var(--text)}

.cs-rot-controls{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:10px}
.cs-rot-dots{display:flex;gap:5px}
.cs-rot-dot{width:6px;height:6px;border-radius:50%;background:var(--border);cursor:pointer;transition:background .15s,transform .15s}
.cs-rot-dot.active{background:var(--accent);transform:scale(1.3)}
.cs-rot-dot:hover{background:var(--text4)}
.cs-rot-play{background:none;border:none;color:var(--text4);cursor:pointer;font-size:11px;display:flex;align-items:center;padding:2px}
.cs-rot-play:hover{color:var(--text)}
.cs-rot-speed{display:flex;align-items:center;gap:4px}
.cs-rot-speed-btn{background:none;border:1px solid var(--border);color:var(--text4);font-size:11px;width:18px;height:18px;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.cs-rot-speed-btn:hover{border-color:var(--accent);color:var(--accent)}
.cs-rot-speed-val{font-size:10px;color:var(--text4);width:20px;text-align:center}

.cs-picker-pop{position:absolute;z-index:200;background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:10px;box-shadow:0 8px 24px rgba(0,0,0,.4);width:220px}
.cs-picker-title{font-size:9px;color:var(--text4);text-transform:uppercase;letter-spacing:.06em;font-weight:700;margin:6px 0 5px}
.cs-picker-title:first-child{margin-top:0}
.cs-picker-row{display:flex;gap:4px;flex-wrap:wrap}
.cs-picker-btn{background:var(--bg3);border:1px solid var(--border);color:var(--text3);font-size:10px;padding:3px 8px;border-radius:5px;cursor:pointer}
.cs-picker-btn.active{border-color:var(--accent);color:var(--accent)}
.cs-picker-btn:hover:not(.active){border-color:var(--text3);color:var(--text2)}

.cs-wrap{margin:16px 24px}
.cs-row{background:var(--card-bg);border:1px solid var(--border);border-radius:10px;padding:18px 22px;display:flex;gap:24px;align-items:center;position:relative}
.cs-div{width:1px;align-self:stretch;background:var(--border)}
.cs-chart-pos{flex-shrink:0;position:relative}
.cs-chart-title{font-size:10px;color:var(--text4);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.cs-cfg-btn{position:absolute;top:-6px;right:-6px;width:16px;height:16px;border-radius:50%;background:var(--bg3);border:1px solid var(--border);color:var(--text4);font-size:9px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:1}
.cs-cfg-btn:hover{color:var(--text);border-color:var(--accent)}
.cs-metric-center{flex:1}

@media (max-width:768px){
  .cs-row{flex-direction:column;align-items:stretch;gap:16px}
  .cs-div{width:100%;height:1px}
}