/* RingBack admin console and support mode */
.support-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:#fff7e6;border:1px solid #f0c36d;color:#5c3d00;border-radius:10px;padding:10px 14px;margin-bottom:16px;font-size:14px}
.support-bar .btn{flex:none}
.unit-list{color:var(--ink-2,#334155);line-height:1.7;word-break:break-word}
.show-sm{display:none}
@media (max-width: 820px){ .show-sm{display:block} }
.acts{text-align:right;white-space:nowrap}
@media (max-width: 820px){ .acts{white-space:normal} .acts .linkbtn{display:block;margin:6px 0 0 auto} }

/* Console: revenue, clients, client tabs */
.rev-tiles, .client-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 820px){ .rev-tiles, .client-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tile .v.sm { font-size: 14px; margin-top: 8px; }
.rev-split { grid-template-columns: minmax(0, 1fr) 360px; }
.svc { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; margin: 1px 0;
  white-space: nowrap; }
.svc-maintenance { background: #e6f0f7; color: #0f5c8c; }
.svc-field_service { background: #fff0e0; color: #9a4a00; }
.kind { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 4px; white-space: nowrap; }
.k-pay { background: var(--ok-soft); color: var(--ok); }
.k-trial { background: var(--warn-soft); color: #7a5300; }
.k-free { background: #eef1f5; color: var(--ink-2); }
.k-off { background: var(--emergency-soft); color: var(--emergency); }
.warn-t { color: #9a4a00; font-weight: 600; }
.attention { border-left: 4px solid #e0a020; }
.meter { height: 4px; background: var(--line); border-radius: 2px; margin-top: 4px; max-width: 110px; overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--accent); }
table.clients td { vertical-align: top; }
table.clients .acts { vertical-align: middle; }
.acts .inline-form { margin-left: 4px; }
tfoot td { border-bottom: 0; background: #fafbfc; }

/* Bar chart of money received by month */
.bars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; height: 200px; align-items: end; }
.bar { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; min-width: 0; }
.bar .fill { width: 100%; max-width: 44px; background: var(--accent); border-radius: 4px 4px 0 0; min-height: 0; }
.bar .amt { font-size: 11px; color: var(--ink-2); margin-bottom: 3px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bar .lbl { font-size: 11px; color: var(--ink-3); margin-top: 4px; }
@media (max-width: 620px){ .bar .amt { display: none; } }

/* Client page tabs */
.ptabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line-2); margin: 4px 0 16px; overflow-x: auto; }
.ptabs a { padding: 10px 14px; color: var(--ink-2); font-weight: 600; border-bottom: 3px solid transparent;
  margin-bottom: -1px; white-space: nowrap; }
.ptabs a:hover { text-decoration: none; color: var(--ink); }
.ptabs a.on { color: var(--accent); border-bottom-color: var(--accent); }

/* Setup checklist */
.setup-list { list-style: none; margin: 0; padding: 0; }
.setup-list li { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.setup-list li:last-child { border-bottom: 0; }
.setup-list .box { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line-2); display: grid;
  place-items: center; font-size: 12px; font-weight: 700; color: var(--ink-3); }
.setup-list .what { flex: 1; font-weight: 550; }
.setup-list .how { flex: none; }
.setup-list li.done .box { background: var(--ok); border-color: var(--ok); color: #fff; }
.setup-list li.done .what { color: var(--ink-3); font-weight: 400; }
@media (max-width: 620px){ .setup-list li { flex-wrap: wrap; } .setup-list .how { margin-left: 38px; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Services & price */
.svc-panel.off .panel-b { opacity: .55; }
.svc-panel .panel-h { gap: 12px; }
.price-now { font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; }
.price-now small { font-size: 13px; color: var(--ink-3); font-weight: 500; }
.price-opts .check { margin: 6px 0; font-weight: 500; }
label.inline { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 500; }
.svc-pick { border: 0; padding: 0; margin: 0 0 14px; }
.svc-pick legend { font-weight: 600; margin-bottom: 6px; padding: 0; }
.svc-pick .check { align-items: flex-start; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; }
.svc-pick .check input { margin-top: 3px; flex: none; }
.svc-pick .check .tsub { display: block; font-weight: 400; }
.search-row { flex: 1; min-width: 220px; max-width: 460px; flex-wrap: nowrap; }
.search-row input { min-width: 0; }
.bars { overflow: hidden; }
@media (max-width: 620px){
  .rev-split { grid-template-columns: minmax(0, 1fr); }
  .bars { gap: 3px; height: 160px; }
  .bar .lbl { font-size: 10px; }
}