/* ==========================================================================
   Ritoo — WHM console (whm.html) · X Byte platform administration
   WHM-specific styles. Loaded with bootstrap.css + dashboard.css (app shell).
   ========================================================================== */

/* X Byte console identity tweaks on the shared shell */
.whm .app-brand .ctx { color: #8fb3d6; }
.whm .app-sidebar { background: #0a1320; }
.whm-tag { font-size:.6rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#0a1320; background: var(--rit-gold-bright); border-radius:50rem; padding:.1rem .5rem; }

/* Platform tenant table */
.tenant-cell { display:flex; align-items:center; gap:.7rem; }
.tenant-cell .av { width:36px;height:36px;border-radius:9px; background:var(--rit-navy); color:var(--rit-gold-bright); display:flex;align-items:center;justify-content:center; font-family:var(--rit-font-serif); font-weight:700; font-size:.85rem; }
.tenant-cell .nm { font-weight:700; color:var(--rit-navy); line-height:1.1; }
.tenant-cell .dm { font-size:.74rem; color:var(--rit-muted); }

.plan-badge { font-size:.72rem; font-weight:700; padding:.2rem .6rem; border-radius:50rem; border:1px solid var(--rit-line); color:var(--rit-ink-soft); background:var(--rit-bg-2); }
.plan-badge.essential { background: rgba(15,34,51,.06); color:var(--rit-navy); }
.plan-badge.commercial { background: var(--rit-gold-soft); color:var(--rit-gold-ink); border-color: rgba(191,162,105,.4); }
.plan-badge.advanced { background: rgba(31,68,56,.1); color: var(--rit-green); border-color: rgba(31,68,56,.25); }

.mod-dots { display:flex; gap:4px; }
.mod-dots .d { width:9px;height:9px;border-radius:3px; background:var(--rit-line-strong); }
.mod-dots .d.on { background: var(--rit-gold); }

.health { display:inline-flex; align-items:center; gap:.4rem; font-size:.8rem; font-weight:600; }
.health .ring { width:9px;height:9px;border-radius:50%; }
.health.good .ring { background:#1f8f4e; box-shadow:0 0 0 3px rgba(31,143,78,.14); }
.health.warn .ring { background:var(--rit-gold); box-shadow:0 0 0 3px rgba(191,162,105,.18); }
.health.idle .ring { background:var(--rit-muted); }

/* Adoption bars */
.adopt-row { display:grid; grid-template-columns: 200px 1fr 56px; align-items:center; gap:1rem; padding:.7rem 0; border-bottom:1px solid var(--rit-line); }
.adopt-row:last-child { border-bottom:0; }
.adopt-name { display:flex; align-items:center; gap:.6rem; font-weight:600; color:var(--rit-navy); font-size:.9rem; }
.adopt-name .bi { color:var(--rit-gold-ink); }
.adopt-track { height:10px; background:var(--rit-bg-2); border-radius:50rem; overflow:hidden; }
.adopt-fill { height:100%; background:linear-gradient(90deg, var(--rit-navy), var(--rit-navy-700)); border-radius:50rem; transition:width .6s var(--rit-ease); }
.adopt-pct { text-align:right; font-weight:700; color:var(--rit-ink-soft); font-size:.85rem; }

/* MRR area chart (pure CSS bars) */
.mrr-chart { display:flex; align-items:flex-end; gap:.5rem; height:200px; }
.mrr-chart .col { flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:.4rem; }
.mrr-chart .stack { width:100%; border-radius:6px 6px 0 0; overflow:hidden; display:flex; flex-direction:column-reverse; }
.mrr-chart .seg { width:100%; }
.mrr-chart .seg.s1 { background: var(--rit-navy); }
.mrr-chart .seg.s2 { background: var(--rit-gold); }
.mrr-chart .seg.s3 { background: var(--rit-green); }
.mrr-chart .lab { font-size:.68rem; color:var(--rit-muted); }
.legend { display:flex; gap:1.2rem; flex-wrap:wrap; }
.legend span { display:flex; align-items:center; gap:.4rem; font-size:.8rem; color:var(--rit-ink-soft); }
.legend i { width:11px;height:11px;border-radius:3px; display:inline-block; }

/* Provisioning wizard */
.wizard-steps { display:flex; gap:1rem; margin-bottom:1.8rem; flex-wrap:wrap; }
.wizard-steps .ws { display:flex; align-items:center; gap:.6rem; font-size:.85rem; font-weight:600; color:var(--rit-muted); }
.wizard-steps .ws .n { width:28px;height:28px;border-radius:50%; border:1.5px solid var(--rit-line-strong); display:flex;align-items:center;justify-content:center; font-size:.8rem; }
.wizard-steps .ws.active { color:var(--rit-navy); }
.wizard-steps .ws.active .n { border-color:var(--rit-gold); background:var(--rit-gold); color:var(--rit-navy-deep); }

.module-pick { display:flex; align-items:center; gap:.8rem; border:1px solid var(--rit-line); border-radius:10px; padding:.8rem 1rem; cursor:pointer; transition:border-color .2s, background-color .2s; }
.module-pick:hover { border-color:var(--rit-line-strong); }
.module-pick.sel { border-color:var(--rit-gold); background:var(--rit-gold-soft); }
.module-pick .pc { width:20px;height:20px;border-radius:5px;border:1.5px solid var(--rit-line-strong); display:flex;align-items:center;justify-content:center;color:#fff;font-size:.7rem; }
.module-pick.sel .pc { background:var(--rit-gold); border-color:var(--rit-gold); color:var(--rit-navy-deep); }
.module-pick .bi.modico { color:var(--rit-navy); font-size:1.05rem; }
.module-pick .nm { font-weight:600; color:var(--rit-navy); font-size:.9rem; }
.module-pick .pr { margin-left:auto; font-size:.8rem; font-weight:700; color:var(--rit-ink-soft); }