/* Shared styling for the Call Intelligence dashboards. Sits on top of shell.css
 * and uses its tokens only — no new palette. */

.app { max-width: 1280px; margin: 0 auto; padding: 26px 30px 80px; }

.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.page-head h1 { font-size:22px; margin:0; }
.page-head .sub { color:var(--text-muted); font-size:13.5px; margin-top:4px; max-width:760px; }
.head-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

.ci-card { border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--bg-card); overflow:hidden; }
.ci-card + .ci-card { margin-top:16px; }
.ci-card-h { display:flex; align-items:center; gap:12px; padding:13px 16px; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.ci-card-h h2 { font-size:14.5px; margin:0; }
.ci-card-h .hint { font-size:12.5px; color:var(--text-muted); }
.ci-card-b { padding:16px; }
.ci-spacer { margin-left:auto; }

.ci-grid { display:grid; gap:16px; align-items:start; }
.ci-grid.two { grid-template-columns:1.3fr .85fr; }
.ci-grid.half { grid-template-columns:1fr 1fr; }
@media (max-width:1080px){ .ci-grid.two, .ci-grid.half { grid-template-columns:1fr; } }

/* stats strip */
.ci-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-bottom:16px; }
.ci-stat { border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--bg-card); padding:13px 15px; }
.ci-stat .lab { font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--text-muted); font-weight:600; }
.ci-stat .val { font-size:25px; font-weight:700; margin-top:5px; letter-spacing:-.02em; }
.ci-stat .val small { font-size:13px; color:var(--text-muted); font-weight:600; }
.ci-stat .note { font-size:11.5px; color:var(--text-dim); margin-top:3px; }

/* table */
.ci-table-wrap { overflow-x:auto; }
table.ci { width:100%; border-collapse:collapse; }
table.ci th { text-align:left; font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--text-muted);
  font-weight:600; padding:0 13px 10px; border-bottom:1px solid var(--border); white-space:nowrap; }
table.ci td { padding:11px 13px; border-bottom:1px solid var(--border); font-size:13.5px; vertical-align:middle; }
table.ci tr:last-child td { border-bottom:0; }
table.ci tbody tr.clickable:hover { background:var(--bg-soft); cursor:pointer; }
table.ci tr.junk { opacity:.55; background:var(--bg-soft); }
table.ci tr.junk[hidden] { display:none; }

/* pills + chips */
.ci-pill { display:inline-block; border-radius:999px; padding:2px 10px; font-size:12px; font-weight:700; border:1px solid; }
.ci-pill.green { color:var(--success); background:#DCFCE7; border-color:#A7F3C0; }
.ci-pill.amber { color:var(--warn);    background:#FEF3C7; border-color:#FCD98A; }
.ci-pill.red   { color:var(--danger);  background:#FEE2E2; border-color:#FCA5A5; }
.ci-pill.none  { color:var(--text-dim);background:var(--bg-soft); border-color:var(--border); }

.ci-chip { display:inline-block; border-radius:999px; padding:2px 9px; font-size:11px; font-weight:700; border:1px solid; }
.ci-chip.ok   { color:var(--success); background:#DCFCE7; border-color:#A7F3C0; }
.ci-chip.warn { color:var(--warn);    background:#FEF3C7; border-color:#FCD98A; }
.ci-chip.bad  { color:var(--danger);  background:#FEE2E2; border-color:#FCA5A5; }
.ci-chip.dim  { color:var(--text-muted); background:var(--bg-soft); border-color:var(--border); }

.ci-tag { display:inline-block; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:11px;
  background:var(--bg-soft); border:1px solid var(--border); border-radius:5px; padding:1px 6px; color:var(--text-muted); margin-right:4px; }
.ci-tag.proposed { background:#F3EEFF; border-color:#DDD0FB; color:#6D28D9; }

.ci-ico { width:16px; height:16px; }
.ci-ico.ok { color:var(--success); }
.ci-ico.bad { color:var(--danger); }
.ci-dim { color:var(--text-dim); }

/* timestamp / seek links */
.ci-ts { display:inline-flex; align-items:center; gap:5px; background:var(--accent-soft); border:1px solid #DDE3FF;
  color:var(--accent); border-radius:999px; padding:2px 9px; font-size:11.5px; font-weight:700; white-space:nowrap; text-decoration:none; }
.ci-ts:hover { background:var(--accent); color:#fff; border-color:var(--accent); }
.ci-ts svg { width:9px; height:9px; }
.ci-ts.idx { background:var(--bg-soft); border-color:var(--border); color:var(--text-muted); }
.ci-ts.idx:hover { background:var(--border); color:var(--text); }

/* segmented control */
.ci-seg { display:inline-flex; background:var(--bg-soft); border:1px solid var(--border); border-radius:var(--radius-md); padding:3px; gap:2px; flex-wrap:wrap; }
.ci-seg-btn { background:transparent; border:0; border-radius:6px; padding:6px 11px; font-size:12.5px; font-weight:600;
  color:var(--text-muted); cursor:pointer; font-family:inherit; }
.ci-seg-btn.on { background:var(--bg-card); color:var(--accent); box-shadow:var(--shadow-sm); }

/* toggle */
.ci-toggle { display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-muted);
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md); padding:6px 11px; cursor:pointer; font-family:inherit; }
.ci-sw { width:30px; height:17px; border-radius:999px; background:var(--border); position:relative; transition:.15s; flex:0 0 30px; }
.ci-sw::after { content:""; position:absolute; top:2px; left:2px; width:13px; height:13px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.25); transition:.15s; }
.ci-toggle.on .ci-sw { background:var(--accent); }
.ci-toggle.on .ci-sw::after { left:15px; }

/* empty / error */
.ci-empty { padding:34px 20px; text-align:center; color:var(--text-muted); }
.ci-empty b { display:block; font-size:14.5px; color:var(--text); margin-bottom:6px; }
.ci-empty p { font-size:13px; margin:0; max-width:62ch; margin-inline:auto; }
.ci-empty.err b { color:var(--danger); }
.ci-empty code { background:var(--bg-soft); border:1px solid var(--border); border-radius:4px; padding:1px 5px; font-size:12px; }

/* notice */
.ci-note { border-radius:var(--radius-md); padding:11px 14px; font-size:12.5px; margin-bottom:16px; }
.ci-note.warn { background:#FFFBEB; border:1px solid #FDE68A; color:#92400E; }
.ci-note.bad  { background:#FEF6F6; border:1px solid #FCA5A5; color:#7F1D1D; }
.ci-note.ok   { background:#F0FDF4; border:1px solid #A7F3C0; color:#14532D; }
.ci-note b { font-weight:700; }
.ci-note code { background:rgba(0,0,0,.05); border-radius:4px; padding:1px 5px; }

.ci-skel { color:var(--text-dim); font-size:13px; padding:26px; text-align:center; }

/* Pagination — shared by the Calls table and the Team page's routine runs.
   Markup comes from CI.pagerHtml, so the look must live with it. */
.pager { display:flex; align-items:center; gap:6px; flex-wrap:wrap;
         padding:12px 10px 6px; border-top:1px solid var(--border); margin-top:4px; }
.pager:empty { display:none; }
.pager .range { font-size:12.5px; color:var(--text-muted); }
.pager .range b { color:var(--text); font-weight:650; }
.pager .pg { padding:5px 10px; font-size:12.5px; min-width:34px; }
.pager .pg[disabled] { opacity:.4; cursor:default; }
.pager .pg.num { min-width:30px; padding:5px 8px; }
.pager .pg.num.on { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:700; }
.pager .gap { color:var(--text-muted); padding:0 2px; }