/* =================== v2: menus, agent stats, wallboard, dialer =================== */
.sidebar { overflow-y: auto; }
.nav-group { display: flex; flex-direction: column; }
.nav-toggle { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 10px; color: #33415c; font-weight: 500; background: none; border: 0; cursor: pointer; width: 100%; text-align: left; }
.nav-toggle:hover { background: #f2f5fa; }
.nav-toggle svg { width: 19px; height: 19px; flex: none; }
.nav-toggle svg:last-child { margin-left: auto; width: 15px; height: 15px; transition: transform .2s; color: #94a3b8; }
.nav-group.open .nav-toggle svg:last-child { transform: rotate(180deg); }
.nav-group.has-active > .nav-toggle { color: var(--primary); }
.nav-sub { display: none; flex-direction: column; gap: 1px; margin: 2px 0 6px 21px; padding-left: 10px; border-left: 1px solid var(--border); }
.nav-group.open .nav-sub { display: flex; }
.nav a.sub { padding: 8px 10px; font-size: 13.5px; }
.sub-dot { width: 6px; height: 6px; border-radius: 50%; background: #cbd5e1; flex: none; }
.nav a.sub.active .sub-dot { background: var(--primary); }
.sidebar-backdrop { display: none; }
.row-between { display: flex; justify-content: space-between; }
.plan-link { display: block; margin-top: 10px; font-weight: 600; font-size: 12.5px; }
.scope { display: flex; align-items: center; gap: 8px; }
.scope[hidden] { display: none; }
.scope select { padding: 7px 10px; font-weight: 600; background: var(--primary-50); border-color: #c9d8fb; color: var(--primary); }
.loading { padding: 40px; text-align: center; color: var(--muted); }
.min0 { min-width: 0; }
.nowrap { white-space: nowrap; }
.clip { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.muted-row td { opacity: .55; }
.notice { border-color: #fcd34d; background: #fffbeb; }
.head-date { display: flex; gap: 10px; align-items: center; background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 8px 14px; }
.head-date svg { width: 20px; color: var(--muted); }
.link-more { display: inline-block; margin-top: 8px; font-weight: 600; font-size: 13px; }
.bg-gray { background: #94a3b8; }
.dot.break { background: var(--amber); }
.dot.away { background: var(--purple); }

.status-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; background: #f1f5f9; color: #475569; white-space: nowrap; }
.status-chip.available { background: var(--green-50); color: #15803d; }
.status-chip.on-call { background: var(--red-50); color: #b91c1c; }
.status-chip.break { background: var(--amber-50); color: #b45309; }
.status-chip.away { background: var(--purple-50); color: #6d28d9; }

.mini-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.mini-stat { display: flex; gap: 12px; align-items: center; padding: 6px 4px; }
.mini-stat .ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #fff; flex: none; }
.mini-stat .ic svg { width: 18px; }
.mini-stat .val { font-size: 22px; font-weight: 700; line-height: 1; }
.mini-stat .label { font-size: 12px; color: var(--muted); margin-top: 3px; }
.card.mini { display: flex; flex-direction: column; gap: 2px; }
.card.mini b { font-size: 24px; }
.card.mini span { color: var(--muted); font-size: 12.5px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chips span { display: inline-flex; align-items: center; gap: 6px; background: #f6f8fc; border-radius: 8px; padding: 6px 10px; font-size: 12.5px; color: #475569; }
.chips svg { width: 14px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; font-size: 12.5px; }
.donut-list.small { font-size: 12px; }

.qa { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qa-btn { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: #fff; cursor: pointer; font-weight: 600; font-size: 13px; color: var(--text); }
.qa-btn:hover { border-color: #c9d8fb; background: #f8faff; }
.qa-btn .ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: #fff; flex: none; }
.qa-btn .ic svg { width: 16px; }

.my-card { background: linear-gradient(160deg, #fff, #f4f8ff); }
.my-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.my-grid div { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; }
.my-grid b { font-size: 20px; }
.my-grid span { color: var(--muted); font-size: 12px; }

.range { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.range button { border: 1px solid var(--border); background: #fff; border-radius: 8px; padding: 7px 12px; font-weight: 600; font-size: 12.5px; cursor: pointer; }
.range button.on { background: var(--primary); color: #fff; border-color: var(--primary); }
.range input { padding: 6px 10px; font-size: 13px; }

.status-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; }
.status-tabs button { border: 0; background: none; padding: 8px 12px; border-radius: 9px; font-weight: 600; font-size: 13px; color: #475569; cursor: pointer; }
.status-tabs button span { background: #eef2f7; border-radius: 10px; padding: 1px 8px; font-size: 11.5px; margin-left: 4px; }
.status-tabs button.on { background: var(--primary-50); color: var(--primary); }
.status-tabs button.on span { background: var(--primary); color: #fff; }
.bulk { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: var(--primary-50); border-radius: 10px; padding: 8px 12px; margin-bottom: 12px; }
.bulk select { padding: 6px 10px; }
select.lstatus, select.lassign, select.nclient { padding: 5px 8px; font-size: 13px; }
select.lstatus { font-weight: 600; border-radius: 20px; }
.st-New { background: var(--green-50); color: #15803d; }
.st-Contacted { background: var(--amber-50); color: #b45309; }
.st-Interested, .st-Converted { background: #dcfce7; color: #166534; }
.st-Qualified { background: var(--primary-50); color: var(--primary); }
.st-Callback { background: var(--purple-50); color: #6d28d9; }
.st-Not-Interested, .st-DNC { background: var(--red-50); color: #b91c1c; }

.empty-state { text-align: center; padding: 40px 20px; }
.empty-state svg { width: 42px; height: 42px; color: #94a3b8; }
.empty-state h3 { margin: 10px 0 6px; }
.empty-state .btn { margin-top: 12px; }

/* wallboard */
.wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.wall-card { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 16px; box-shadow: var(--shadow); border-top: 4px solid #cbd5e1; display: flex; flex-direction: column; gap: 12px; }
.wall-card.available { border-top-color: var(--green); }
.wall-card.on-call { border-top-color: var(--red); }
.wall-card.break { border-top-color: var(--amber); }
.wall-card.away { border-top-color: var(--purple); }
.wall-status { display: flex; justify-content: space-between; align-items: center; }
.wall-timer { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 18px; }
.wall-call { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13.5px; }
.wall-call svg { width: 16px; color: var(--primary); }
.wall-call.muted { color: #cbd5e1; }
.wall-stats, .client-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; border-top: 1px solid var(--border); padding-top: 12px; }
.client-stats { grid-template-columns: repeat(4, 1fr); border: 0; padding: 4px 0 10px; }
.wall-stats div, .client-stats div { display: flex; flex-direction: column; }
.wall-stats b, .client-stats b { font-size: 17px; }
.wall-stats span, .client-stats span { font-size: 11.5px; color: var(--muted); }
.client-card.disabled { opacity: .6; }
.client-card h3 { font-size: 16px; }

/* dialer */
.dialer-grid { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
.avatar.lg { width: 64px; height: 64px; font-size: 22px; }
.lead-card h2 { font-size: 22px; }
.lead-phone { font-size: 17px; color: var(--muted); font-weight: 600; margin-top: 4px; }
.lead-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 20px 0; }
.lead-meta div { background: #f8fafd; border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lead-meta span { font-size: 11.5px; color: var(--muted); }
.lead-notes { background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: 12px; font-size: 13px; line-height: 1.5; margin-bottom: 18px; max-height: 180px; overflow: auto; }
.dial-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.btn-lg { padding: 12px 20px; font-size: 15px; border-radius: 11px; }
.chips-select { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.chip-check { flex-direction: row; align-items: center; gap: 5px; background: #f6f8fc; border-radius: 20px; padding: 5px 10px; font-weight: 500; cursor: pointer; }
.chip-check input { margin: 0; }
.queue { display: flex; flex-direction: column; gap: 4px; max-height: 520px; overflow: auto; }
.queue-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid transparent; background: none; cursor: pointer; text-align: left; width: 100%; }
.queue-item:hover { background: #f6f8fc; }
.queue-item.on { border-color: #c9d8fb; background: var(--primary-50); }
.qi-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.qi-main small { color: var(--muted); }

/* numbers / users forms */
.num-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.num-pick { border: 1px solid var(--border); border-radius: 10px; padding: 10px; align-items: flex-start; }
.num-pick:has(input:checked) { border-color: var(--primary); background: var(--primary-50); }
.num-pick span { display: flex; flex-direction: column; gap: 2px; }
.num-pick small { color: var(--muted); font-weight: 400; }
.row-input { display: flex; gap: 8px; }
.row-input select { flex: 1; }

.flow-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.flow-step { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 4px; position: relative; }
.flow-step .ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #fff; margin-bottom: 6px; }
.flow-step .ic svg { width: 18px; }
.flow-step small { color: var(--muted); }
.flow-step:not(:last-child)::after { content: "\2192"; position: absolute; right: -11px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-weight: 700; }
.setup-steps { display: flex; gap: 10px; flex-wrap: wrap; }
.setup-steps div { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--border); border-radius: 30px; padding: 6px 14px 6px 6px; font-weight: 600; font-size: 13px; }
.setup-steps b { width: 24px; height: 24px; border-radius: 50%; background: #e2e8f0; display: grid; place-items: center; font-size: 12px; }
.setup-steps .done b { background: var(--green); color: #fff; }
.tips { padding-left: 18px; line-height: 1.8; margin: 0; }

@media (max-width: 1100px) {
  .mini-stats { grid-template-columns: repeat(3, 1fr); }
  .dialer-grid { grid-template-columns: 1fr; }
  .lead-meta { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .sidebar-backdrop.show { display: block; position: fixed; inset: 0; background: rgba(15, 27, 45, .35); z-index: 70; }
  .mini-stats { grid-template-columns: repeat(2, 1fr); }
  .flow-steps { grid-template-columns: 1fr 1fr; }
  .flow-step::after { display: none; }
  .scope .hint { display: none; }
  .scope select { max-width: 140px; }
  .qa { grid-template-columns: 1fr; }
}

/* billing */
.banner-red { border-color: #fca5a5; background: #fef2f2; color: #991b1b; }
.banner-red.small { padding: 8px 10px; border-radius: 8px; font-size: 12.5px; margin-top: 8px; border: 1px solid #fca5a5; }
.pill.overdue, .pill.blocked { background: var(--red-50); color: #b91c1c; }
.pill.paid, .pill.topup, .pill.sent { background: var(--green-50); color: #15803d; }
.pill.unpaid { background: var(--amber-50); color: #b45309; }
.pill.call, .pill.transfer, .pill.invoice { background: #eef2f7; color: #475569; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 9px 18px; font-size: 13.5px; }
.kv span { color: var(--muted); }
.kv b { text-align: right; }
.err-detail { font-size: 11.5px; color: #b91c1c; background: #fef2f2; border-radius: 6px; padding: 3px 6px; margin-top: 4px; max-width: 280px; white-space: normal; word-break: break-word; }
.evt { font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.evt td { padding: 6px 8px; }
.inv-line { display: grid; grid-template-columns: 1fr 80px 110px auto; gap: 8px; margin-bottom: 8px; }