/* Calls tab — scoped entirely under #view-calls so it never touches Olly's
   shared classes. Uses the olly-ui design tokens (tokens.css). */

#view-calls {
  padding: var(--olly-sp-4, 16px);
  background: var(--olly-bg, #fafafa);
  color: var(--olly-ink, #1a1a1a);
  font-family: var(--olly-font-sans, 'Inter', system-ui, sans-serif);
  min-height: 100%;
}

#view-calls .olly-exec__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--olly-sp-3, 12px); }
#view-calls .olly-exec__title { font-size: var(--olly-fs-xl, 1.5rem); font-weight: 700; margin: 0; }
#view-calls .olly-exec__badge { font-size: var(--olly-fs-xs, .75rem); color: #64748b; }

/* KPI row */
#view-calls .olly-kpi-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--olly-sp-3, 12px); margin-bottom: var(--olly-sp-3, 12px);
}
#view-calls .olly-kpi {
  background: var(--olly-surface, #fff); border: 1px solid #e5e7eb; border-radius: 12px;
  padding: var(--olly-sp-3, 12px) var(--olly-sp-4, 16px); display: flex; flex-direction: column; gap: 4px;
  box-shadow: var(--olly-shadow-1, 0 1px 3px rgba(0,0,0,.06));
}
#view-calls .olly-kpi__label { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: #64748b; }
#view-calls .olly-kpi__value { font-size: 1.6rem; font-weight: 700; }
#view-calls .olly-kpi--good .olly-kpi__value { color: var(--olly-good, #059669); }
#view-calls .olly-kpi--warn .olly-kpi__value { color: var(--olly-warn, #d97706); }
#view-calls .olly-kpi--bad  .olly-kpi__value { color: var(--olly-bad, #e53e3e); }

/* Region rollups */
#view-calls .olly-rollup-row { display: flex; flex-wrap: wrap; gap: var(--olly-sp-2, 8px); margin-bottom: var(--olly-sp-3, 12px); }
#view-calls .olly-rollup {
  background: var(--olly-surface, #fff); border: 1px solid #e5e7eb; border-radius: 10px;
  padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; cursor: pointer; min-width: 150px;
}
#view-calls .olly-rollup:hover { border-color: #94a3b8; }
#view-calls .olly-rollup__name { font-weight: 600; font-size: .85rem; }
#view-calls .olly-rollup__meta { font-size: .7rem; color: #64748b; }
#view-calls .olly-rollup__value { font-size: .95rem; font-weight: 700; }

/* Panel + table */
#view-calls .olly-panel { background: var(--olly-surface, #fff); border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; }
#view-calls .olly-panel__head { display: flex; align-items: baseline; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid #eef2f7; }
#view-calls .olly-panel__title { font-weight: 700; }
#view-calls .olly-panel__hint { font-size: .72rem; color: #94a3b8; }
#view-calls .olly-empty { padding: 24px; text-align: center; color: #94a3b8; font-size: .85rem; }

#view-calls .olly-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
#view-calls .olly-table th { text-align: right; padding: 8px 10px; font-size: .68rem; text-transform: uppercase; letter-spacing: .03em; color: #64748b; cursor: pointer; white-space: nowrap; border-bottom: 1px solid #eef2f7; user-select: none; }
#view-calls .olly-table th.olly-th--left { text-align: left; }
#view-calls .olly-table td { text-align: right; padding: 7px 10px; border-bottom: 1px solid #f5f7fa; white-space: nowrap; }
#view-calls .olly-table td.olly-td--left { text-align: left; font-weight: 600; }
#view-calls .olly-td--good { color: var(--olly-good, #059669); font-weight: 600; }
#view-calls .olly-td--warn { color: var(--olly-warn, #d97706); font-weight: 600; }
#view-calls .olly-td--bad  { color: var(--olly-bad, #e53e3e); font-weight: 600; }
#view-calls .olly-tr--click { cursor: pointer; }
#view-calls .olly-tr--click:hover td { background: #f8fafc; }

/* Buttons / inputs in the toolbar (dropdown host is outside #view-calls, so
   style those explicitly too) */
#tab-dropdown-calls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px; }
#tab-dropdown-calls .olly-input, #tab-dropdown-calls .olly-select,
#view-calls .olly-input, #view-calls .olly-select {
  padding: 6px 10px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: .82rem; background: #fff;
}
#tab-dropdown-calls .olly-btn, #view-calls .olly-btn {
  padding: 6px 12px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; cursor: pointer; font-size: .82rem;
}
#tab-dropdown-calls .olly-btn:hover, #view-calls .olly-btn:hover { border-color: #94a3b8; }
#tab-dropdown-calls .olly-btn--primary, #view-calls .olly-btn--primary { background: #0f172a; color: #fff; border-color: #0f172a; }

/* Drawer (drill-in) */
#calls-drawer { position: fixed; inset: 0; z-index: 60; pointer-events: none; visibility: hidden; }
#calls-drawer.is-open { pointer-events: auto; visibility: visible; }
#calls-drawer .olly-drawer__scrim { position: absolute; inset: 0; background: rgba(15,23,42,.35); opacity: 0; transition: opacity .18s ease; }
#calls-drawer.is-open .olly-drawer__scrim { opacity: 1; }
#calls-drawer .olly-drawer__panel {
  position: absolute; top: 0; right: 0; height: 100%; width: min(480px, 92vw); background: #fff;
  box-shadow: var(--olly-shadow-3, -12px 0 40px rgba(0,0,0,.16)); transform: translateX(100%); transition: transform .2s ease;
  overflow-y: auto; padding: 16px; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px;
}
#calls-drawer.is-open .olly-drawer__panel { transform: translateX(0); }
#calls-drawer .olly-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#calls-drawer .olly-drawer__title { font-size: 1.05rem; font-weight: 700; margin: 0; }
#calls-drawer .olly-drawer__close { border: none; background: #f1f5f9; border-radius: 8px; padding: 4px 10px; cursor: pointer; font-size: .8rem; }
#calls-drawer .olly-drawer__sub { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: #64748b; margin-top: 4px; }
#calls-drawer .olly-drawer__ask { margin-top: auto; }

/* call rows in drawer */
#calls-drawer .olly-callrow { border: 1px solid #eef2f7; border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; }
#calls-drawer .olly-callrow.olly-tr--click { cursor: pointer; }
#calls-drawer .olly-callrow.olly-tr--click:hover { border-color: #94a3b8; background: #f8fafc; }
#calls-drawer .olly-callrow__meta { display: flex; gap: 8px; align-items: center; font-size: .78rem; }
#calls-drawer .olly-callrow__dir { font-weight: 600; }
#calls-drawer .olly-callrow__time { margin-left: auto; color: #94a3b8; font-size: .72rem; }
#calls-drawer .olly-callrow__line2 { display: flex; gap: 8px; align-items: center; font-size: .76rem; color: #475569; }

/* pills */
#view-calls .olly-pill, #calls-drawer .olly-pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .7rem; background: #f1f5f9; color: #475569; }
#view-calls .olly-pill--good, #calls-drawer .olly-pill--good { background: #dcfce7; color: #15803d; }
#view-calls .olly-pill--warn, #calls-drawer .olly-pill--warn { background: #fef3c7; color: #b45309; }
#view-calls .olly-pill--bad,  #calls-drawer .olly-pill--bad  { background: #fee2e2; color: #b91c1c; }

/* call detail */
#calls-drawer .olly-callmeta { display: flex; flex-wrap: wrap; gap: 6px; }
#calls-drawer .olly-kv { background: #f8fafc; border: 1px solid #eef2f7; border-radius: 8px; padding: 4px 8px; display: flex; flex-direction: column; }
#calls-drawer .olly-kv__k { font-size: .62rem; text-transform: uppercase; color: #94a3b8; }
#calls-drawer .olly-kv__v { font-size: .8rem; font-weight: 600; }
#calls-drawer .olly-scorebox { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 10px; background: #f8fafc; border: 1px solid #eef2f7; }
#calls-drawer .olly-scorebox.olly-kpi--good { background: #f0fdf4; border-color: #bbf7d0; }
#calls-drawer .olly-scorebox.olly-kpi--warn { background: #fffbeb; border-color: #fde68a; }
#calls-drawer .olly-scorebox.olly-kpi--bad  { background: #fef2f2; border-color: #fecaca; }
#calls-drawer .olly-scorebox .olly-kpi__value { font-size: 1.8rem; font-weight: 700; }
#calls-drawer .olly-summary { font-size: .85rem; line-height: 1.5; margin: 0; }
#calls-drawer .olly-kwrow { display: flex; flex-wrap: wrap; gap: 4px; }
#calls-drawer .olly-transcript { display: flex; flex-direction: column; gap: 6px; max-height: 40vh; overflow-y: auto; border: 1px solid #eef2f7; border-radius: 10px; padding: 10px; background: #fafcff; }
#calls-drawer .olly-transcript__line { display: flex; gap: 8px; font-size: .8rem; line-height: 1.4; }
#calls-drawer .olly-transcript__spk { flex: 0 0 auto; font-weight: 700; color: #6366f1; }
#calls-drawer .olly-transcript__txt { flex: 1; }

/* reports drawer rows */
#calls-drawer .olly-alert-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid #eef2f7; border-radius: 10px; padding: 8px 10px; font-size: .8rem; }
#calls-drawer .olly-alert-row__actions { display: flex; gap: 6px; }