/* ─────────────────────────────────────────────────────────────
   Workweaver Admin Shell — admin-shell.css
   Shared visual chrome for every page under apps/dashboard/admin/.
   Tokens only — relies on colors_and_type.css for ww-* variables.

   Mirrors .workweaver-design/ui_kits/admin/index.html so the
   production admin surfaces share the same DOM + visual language
   as the canonical kit (admin shell port slices 8c-8h).
   ───────────────────────────────────────────────────────────── */

/* ── Density tokens (mirror canonical admin kit) ── */
:root {
  --ww-row-h-compact: 36px;
  --ww-row-h-comfortable: 48px;
  --ww-cell-pad-x: 12px;
  --ww-cell-pad-y: 10px;
  --ww-table-stripe: rgba(11, 18, 32, 0.02);
  --ww-rail-w: 232px;
  --ww-rail-w-collapsed: 60px;
  --ww-topbar-h: 48px;
}

/* ── Base ── */
.ww-admin, body.ww-admin {
  margin: 0;
  background: var(--ww-bg-ambient);
  color: var(--ww-ink-800);
  font-family: var(--ww-font-sans);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
.ww-admin * { box-sizing: border-box; }
.ww-admin a { color: inherit; text-decoration: none; }

/* ── Shell scaffold (single-page admin surfaces) ── */
.ww-admin-shell {
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--ww-sp-6) var(--ww-sp-7);
}

@media (max-width: 720px) {
  .ww-admin-shell { padding: var(--ww-sp-4) var(--ww-sp-4); }
}

/* ── Page head ── */
.ww-admin-head {
  display: flex;
  align-items: flex-end;
  gap: var(--ww-sp-5);
  padding-bottom: var(--ww-sp-5);
  margin-bottom: var(--ww-sp-5);
  border-bottom: 1px solid var(--ww-line);
  flex-wrap: wrap;
}
.ww-admin-head h1 {
  margin: 0;
  font-family: var(--ww-font-display);
  font-weight: var(--ww-fw-bold);
  font-size: 28px;
  letter-spacing: var(--ww-tracking-tight);
  color: var(--ww-ink-900);
}
.ww-admin-head p {
  margin: 4px 0 0;
  color: var(--ww-ink-500);
  font-size: var(--ww-fs-body);
}
.ww-admin-head .ww-admin-head__spacer { flex: 1; }
.ww-admin-head .ww-admin-head__actions { display: flex; gap: var(--ww-sp-2); flex-wrap: wrap; }
.ww-admin-head .ww-admin-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ww-ink-500);
  font-size: var(--ww-fs-small);
  font-weight: var(--ww-fw-medium);
}
.ww-admin-head .ww-admin-back:hover { color: var(--ww-ink-800); }

/* ── Cards (plain glass) ── */
.ww-admin-card {
  background: var(--ww-glass-strong);
  backdrop-filter: var(--ww-glass-blur);
  -webkit-backdrop-filter: var(--ww-glass-blur);
  border: 1px solid var(--ww-glass-border);
  border-radius: var(--ww-radius-md);
  box-shadow: var(--ww-shadow-glass);
  padding: var(--ww-sp-5);
  margin-bottom: var(--ww-sp-4);
}
.ww-admin-card--flush { padding: 8px 0; }

.ww-admin-card__head {
  display: flex;
  align-items: center;
  gap: var(--ww-sp-3);
  margin-bottom: var(--ww-sp-4);
}
.ww-admin-card__head h2,
.ww-admin-card__head h3 {
  margin: 0;
  font-family: var(--ww-font-display);
  font-size: 17px;
  font-weight: var(--ww-fw-semi);
  color: var(--ww-ink-900);
  letter-spacing: var(--ww-tracking-tight);
}
.ww-admin-card__head .ww-eyebrow,
.ww-admin-card__head .ww-admin-eyebrow {
  font-size: 10px;
  font-weight: var(--ww-fw-heavy);
  letter-spacing: var(--ww-tracking-wider);
  text-transform: uppercase;
  color: var(--ww-accent);
}
.ww-admin-card__head .ww-admin-spacer { flex: 1; min-width: 0; }

/* ── Buttons ── */
.ww-admin-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--ww-radius-sm);
  font-size: var(--ww-fs-small);
  font-weight: var(--ww-fw-medium);
  border: 1px solid var(--ww-line);
  background: var(--ww-on-glass);
  color: var(--ww-ink-800);
  cursor: pointer;
  font-family: inherit;
  transition: background var(--ww-dur-fast) var(--ww-ease-out);
  text-decoration: none;
}
.ww-admin-btn:hover { background: var(--ww-on-glass-hover); }
.ww-admin-btn--primary {
  background: var(--ww-accent);
  color: var(--ww-text-on-accent);
  border-color: transparent;
  box-shadow: var(--ww-shadow-accent-glow);
}
.ww-admin-btn--primary:hover { background: var(--ww-accent-hover); }
.ww-admin-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ww-ink-700);
}
.ww-admin-btn--ghost:hover { background: var(--ww-bg-tint); }
.ww-admin-btn--danger {
  background: var(--ww-danger);
  color: var(--ww-on-glass);
  border-color: transparent;
}
.ww-admin-btn--danger:hover { background: var(--ww-danger-ink); }
.ww-admin-btn--sm { height: 26px; padding: 0 9px; font-size: var(--ww-fs-caption); }

/* ── KPI tiles ── */
.ww-admin-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ww-sp-3);
  margin-bottom: var(--ww-sp-5);
}
@media (max-width: 1024px) {
  .ww-admin-kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .ww-admin-kpis { grid-template-columns: 1fr; }
}
.ww-admin-kpi {
  background: var(--ww-glass-strong);
  border: 1px solid var(--ww-glass-border);
  border-radius: var(--ww-radius-md);
  padding: var(--ww-sp-4);
}
.ww-admin-kpi__label {
  font-size: 11px;
  font-weight: var(--ww-fw-semi);
  letter-spacing: var(--ww-tracking-wide);
  text-transform: uppercase;
  color: var(--ww-ink-500);
}
.ww-admin-kpi__value {
  font-family: var(--ww-font-display);
  font-size: 28px;
  font-weight: var(--ww-fw-bold);
  color: var(--ww-ink-900);
  letter-spacing: var(--ww-tracking-tight);
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.ww-admin-kpi__delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--ww-fs-caption);
  font-weight: var(--ww-fw-medium);
  color: var(--ww-ink-500);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.ww-admin-kpi__delta--up { color: var(--ww-success-ink); }
.ww-admin-kpi__delta--down { color: var(--ww-danger-ink); }

/* ── Tables ── */
.ww-admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ww-fs-small);
}
.ww-admin-table th {
  text-align: left;
  font-weight: var(--ww-fw-semi);
  font-size: 11px;
  letter-spacing: var(--ww-tracking-wide);
  text-transform: uppercase;
  color: var(--ww-ink-500);
  padding: 8px var(--ww-cell-pad-x);
  border-bottom: 1px solid var(--ww-line);
}
.ww-admin-table td {
  padding: var(--ww-cell-pad-y) var(--ww-cell-pad-x);
  border-bottom: 1px solid var(--ww-line);
  color: var(--ww-ink-800);
  vertical-align: middle;
}
.ww-admin-table tbody tr:hover { background: var(--ww-bg-tint); }
.ww-admin-table tbody tr.is-expanded { background: var(--ww-accent-soft); }
.ww-admin-table td.is-num,
.ww-admin-table td.num { font-variant-numeric: tabular-nums; }
.ww-admin-table .mono,
.ww-admin-table td.mono {
  font-family: var(--ww-font-mono);
  font-size: 12px;
  color: var(--ww-ink-700);
}

/* ── Chips / badges ── */
.ww-admin-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: var(--ww-radius-pill);
  font-size: 11px;
  font-weight: var(--ww-fw-semi);
  letter-spacing: 0.02em;
  line-height: 1.5;
  border: 1px solid transparent;
}
.ww-admin-chip__dot { width: 5px; height: 5px; border-radius: 50%; }
.ww-admin-chip--ok { background: var(--ww-success-soft); color: var(--ww-success-ink); }
.ww-admin-chip--ok .ww-admin-chip__dot { background: var(--ww-success); }
.ww-admin-chip--warn { background: var(--ww-warning-soft); color: var(--ww-warning-ink); }
.ww-admin-chip--warn .ww-admin-chip__dot { background: var(--ww-warning); }
.ww-admin-chip--danger { background: var(--ww-danger-soft); color: var(--ww-danger-ink); }
.ww-admin-chip--danger .ww-admin-chip__dot { background: var(--ww-danger); }
.ww-admin-chip--idle { background: var(--ww-bg-tint); color: var(--ww-ink-500); }
.ww-admin-chip--idle .ww-admin-chip__dot { background: var(--ww-ink-300); }
.ww-admin-chip--live { background: var(--ww-danger-soft); color: var(--ww-danger-ink); }
.ww-admin-chip--live .ww-admin-chip__dot {
  background: var(--ww-danger);
  animation: ww-admin-pulse 1.4s ease-out infinite;
}
.ww-admin-chip--zara { background: var(--ww-thinking-soft); color: var(--ww-thinking-ink); }
.ww-admin-chip--zara .ww-admin-chip__dot { background: var(--ww-thinking); }

@keyframes ww-admin-pulse {
  0% { box-shadow: 0 0 0 0 var(--ww-danger-soft); }
  70% { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ── Inputs / forms ── */
.ww-admin-field { margin-bottom: 12px; }
.ww-admin-field > label,
.ww-admin-field > .label {
  display: block;
  font-size: 11px;
  font-weight: var(--ww-fw-semi);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ww-ink-500);
  margin-bottom: 5px;
}
.ww-admin-input,
.ww-admin-field input,
.ww-admin-field select,
.ww-admin-field textarea {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  font-size: var(--ww-fs-small);
  font-family: inherit;
  border: 1px solid var(--ww-line-strong);
  border-radius: var(--ww-radius-sm);
  background: var(--ww-on-glass);
  color: var(--ww-ink-900);
}
.ww-admin-field textarea {
  height: auto;
  min-height: 90px;
  padding: 10px;
  resize: vertical;
}
.ww-admin-input:focus,
.ww-admin-field input:focus,
.ww-admin-field select:focus,
.ww-admin-field textarea:focus {
  outline: none;
  border-color: var(--ww-accent);
  box-shadow: 0 0 0 3px var(--ww-accent-soft);
}

/* ── Status banner ── */
.ww-admin-status {
  padding: 10px 14px;
  border-radius: var(--ww-radius-sm);
  font-size: var(--ww-fs-small);
  font-weight: var(--ww-fw-medium);
  margin-bottom: var(--ww-sp-4);
  display: none;
}
.ww-admin-status.is-loading,
.ww-admin-status--loading {
  display: block;
  background: var(--ww-warning-soft);
  color: var(--ww-warning-ink);
}
.ww-admin-status.is-error,
.ww-admin-status--error {
  display: block;
  background: var(--ww-danger-soft);
  color: var(--ww-danger-ink);
}
.ww-admin-status.is-success,
.ww-admin-status--success {
  display: block;
  background: var(--ww-success-soft);
  color: var(--ww-success-ink);
}

/* ── Notes / meta paragraphs ── */
.ww-admin-notes {
  background: var(--ww-bg-tint);
  border-left: 3px solid var(--ww-accent);
  padding: 12px 16px;
  border-radius: var(--ww-radius-sm);
  font-size: var(--ww-fs-small);
  color: var(--ww-ink-700);
}
.ww-admin-notes ul { margin: 0; padding-left: 20px; }
.ww-admin-notes li { margin-bottom: 6px; }

/* ── Two-column split ── */
.ww-admin-split { display: grid; grid-template-columns: 2fr 1fr; gap: var(--ww-sp-4); }
.ww-admin-split--equal { grid-template-columns: 1fr 1fr; }
@media (max-width: 880px) {
  .ww-admin-split,
  .ww-admin-split--equal { grid-template-columns: 1fr; }
}

/* ── Identity tiles (progressive disclosure) ── */
.ww-id-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ww-sp-3);
}
@media (max-width: 720px) { .ww-id-grid { grid-template-columns: 1fr; } }
.ww-id-tile {
  background: var(--ww-glass-strong);
  border: 1px solid var(--ww-glass-border);
  border-radius: var(--ww-radius-md);
  padding: var(--ww-sp-4) var(--ww-sp-5);
  cursor: pointer;
  transition: border-color var(--ww-dur-fast), box-shadow var(--ww-dur-fast);
}
.ww-id-tile:hover {
  border-color: var(--ww-glass-border-strong);
  box-shadow: var(--ww-shadow-md);
}
.ww-id-tile.is-open {
  grid-column: 1 / -1;
  cursor: default;
  box-shadow: var(--ww-shadow-lg);
  border-color: var(--ww-accent-soft);
}
.ww-id-tile__summary {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: var(--ww-sp-3);
  align-items: center;
}
.ww-id-tile__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--ww-radius-sm);
  background: var(--ww-accent-soft);
  color: var(--ww-accent-ink);
  display: grid;
  place-items: center;
}
.ww-id-tile__icon svg { width: 20px; height: 20px; }
.ww-id-tile__name {
  font-family: var(--ww-font-display);
  font-weight: var(--ww-fw-semi);
  font-size: 16px;
  color: var(--ww-ink-900);
  letter-spacing: var(--ww-tracking-tight);
}
.ww-id-tile__name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ww-id-tile__sub {
  font-size: 12.5px;
  color: var(--ww-ink-500);
  margin-top: 2px;
  font-family: var(--ww-font-mono);
}
.ww-id-tile__body {
  display: none;
  margin-top: var(--ww-sp-4);
  padding-top: var(--ww-sp-4);
  border-top: 1px solid var(--ww-line);
}
.ww-id-tile.is-open .ww-id-tile__body { display: block; }
.ww-id-tile__chev {
  width: 18px;
  height: 18px;
  color: var(--ww-ink-400);
  transition: transform var(--ww-dur-fast);
}
.ww-id-tile.is-open .ww-id-tile__chev { transform: rotate(180deg); }

.ww-kv-grid {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 8px 16px;
  font-size: var(--ww-fs-small);
}
.ww-kv-grid dt { color: var(--ww-ink-500); font-weight: var(--ww-fw-medium); margin: 0; }
.ww-kv-grid dd { margin: 0; color: var(--ww-ink-800); font-variant-numeric: tabular-nums; }
.ww-kv-grid .mono { font-family: var(--ww-font-mono); font-size: 12.5px; }

.ww-admin-inline {
  display: flex;
  gap: var(--ww-sp-2);
  margin-top: var(--ww-sp-3);
  flex-wrap: wrap;
}

/* ── Call player + transcript ── */
.ww-call-detail {
  padding: 16px 0 8px;
  background: var(--ww-bg-tint);
  border-radius: var(--ww-radius-sm);
  margin: 0 -12px;
}
.ww-call-detail__inner { padding: 0 16px; }
.ww-call-player {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--ww-on-glass);
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius-pill);
  margin-bottom: 12px;
}
.ww-call-player__play {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ww-accent);
  color: var(--ww-text-on-accent);
  border: none;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.ww-call-player__scrub {
  flex: 1;
  height: 4px;
  background: var(--ww-line-strong);
  border-radius: 2px;
  position: relative;
}
.ww-call-player__scrub::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 32%;
  background: var(--ww-accent);
  border-radius: 2px;
}
.ww-call-player__time {
  font-family: var(--ww-font-mono);
  font-size: var(--ww-fs-caption);
  color: var(--ww-ink-500);
}
.ww-transcript {
  font-family: var(--ww-font-sans);
  font-size: var(--ww-fs-small);
  line-height: 1.6;
  max-height: 240px;
  overflow: auto;
  background: var(--ww-on-glass);
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius-sm);
  padding: 12px;
}
.ww-transcript .speaker { font-weight: var(--ww-fw-semi); color: var(--ww-ink-900); margin-right: 6px; }
.ww-transcript .speaker--zara { color: var(--ww-thinking-ink); }
.ww-transcript .speaker--caller { color: var(--ww-accent-ink); }
.ww-transcript .line { margin-bottom: 6px; }

/* ── Wallet specifics ── */
.ww-cap-meter {
  height: 6px;
  background: var(--ww-line);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 6px;
}
.ww-cap-meter > span {
  display: block;
  height: 100%;
  background: var(--ww-accent);
}
.ww-cap-meter--warn > span { background: var(--ww-warning); }
.ww-cap-meter--danger > span { background: var(--ww-danger); }

.ww-allowlist-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--ww-sp-3);
  padding: 8px 0;
  border-bottom: 1px dashed var(--ww-line);
  align-items: center;
  font-size: var(--ww-fs-small);
}

.ww-preflight-verdict {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--ww-sp-3);
  align-items: start;
  padding: 10px 12px;
  border-radius: var(--ww-radius-sm);
  border: 1px solid var(--ww-warning-soft);
  background: var(--ww-warning-soft);
  margin-top: 8px;
}
.ww-preflight-verdict__icon {
  width: 18px;
  height: 18px;
  color: var(--ww-warning-ink);
  margin-top: 2px;
}
.ww-preflight-verdict__title {
  font-size: var(--ww-fs-small);
  font-weight: var(--ww-fw-semi);
  color: var(--ww-warning-ink);
  margin-bottom: 2px;
}
.ww-preflight-verdict ul {
  margin: 4px 0 0;
  padding-left: 18px;
  font-size: 12.5px;
  color: var(--ww-ink-700);
}

/* ── Drift banner (pricing) ── */
.ww-drift-banner {
  display: flex;
  gap: var(--ww-sp-3);
  align-items: center;
  padding: 12px 16px;
  border-radius: var(--ww-radius-md);
  background: var(--ww-warning-soft);
  border: 1px solid var(--ww-warning);
  color: var(--ww-warning-ink);
  margin-bottom: var(--ww-sp-4);
}
.ww-drift-banner__icon {
  width: 22px;
  height: 22px;
  color: var(--ww-warning-ink);
  flex-shrink: 0;
}
.ww-drift-banner__body { flex: 1; }
.ww-drift-banner__title { font-weight: var(--ww-fw-semi); margin: 0 0 2px; font-size: var(--ww-fs-body); }
.ww-drift-banner__detail { margin: 0; font-size: var(--ww-fs-small); color: var(--ww-ink-700); }
.ww-drift-banner--ok {
  background: var(--ww-success-soft);
  border-color: var(--ww-success);
  color: var(--ww-success-ink);
}
.ww-drift-banner--ok .ww-drift-banner__icon { color: var(--ww-success-ink); }

/* ── Approval/feed rows (overview) ── */
.ww-feed { display: flex; flex-direction: column; }
.ww-feed-item {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: var(--ww-sp-3);
  padding: 10px 0;
  border-bottom: 1px dashed var(--ww-line);
  align-items: start;
}
.ww-feed-item:last-child { border-bottom: none; }
.ww-feed-item__actor {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ww-bg-tint);
  color: var(--ww-ink-700);
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: var(--ww-fw-heavy);
  margin-top: 2px;
}
.ww-feed-item__actor--zara { background: var(--ww-thinking-soft); color: var(--ww-thinking-ink); }
.ww-feed-item__actor--sys { background: var(--ww-accent-soft); color: var(--ww-accent-ink); }
.ww-feed-item__body { font-size: 13.5px; color: var(--ww-ink-800); line-height: 1.5; }
.ww-feed-item__body strong { font-weight: var(--ww-fw-semi); color: var(--ww-ink-900); }
.ww-feed-item__when {
  font-size: var(--ww-fs-caption);
  color: var(--ww-ink-400);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Sparkline svg ── */
.ww-spark { height: 28px; width: 100%; margin-top: 8px; }
.ww-spark path { fill: none; stroke: var(--ww-accent); stroke-width: 1.5; }
.ww-spark .area { fill: var(--ww-accent-soft); stroke: none; }

/* ── Section accordion (control-surfaces shim) ── */
.ww-admin-section {
  background: var(--ww-glass-strong);
  border: 1px solid var(--ww-glass-border);
  border-radius: var(--ww-radius-md);
  margin-bottom: var(--ww-sp-3);
  overflow: hidden;
  backdrop-filter: var(--ww-glass-blur);
  -webkit-backdrop-filter: var(--ww-glass-blur);
}
.ww-admin-section__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  cursor: pointer;
  font-size: var(--ww-fs-body-lg);
  font-weight: var(--ww-fw-semi);
  color: var(--ww-ink-900);
  background: transparent;
  transition: background var(--ww-dur-fast) var(--ww-ease-out);
  user-select: none;
}
.ww-admin-section__label:hover { background: var(--ww-bg-tint); }
.ww-admin-section__label .chev {
  font-size: var(--ww-fs-caption);
  color: var(--ww-ink-400);
  transition: transform var(--ww-dur-fast);
}
.ww-admin-section.is-open .ww-admin-section__label .chev { transform: rotate(180deg); }
.ww-admin-section__body { display: none; padding: 16px 20px; border-top: 1px solid var(--ww-line); }
.ww-admin-section.is-open .ww-admin-section__body { display: block; }

/* ── SPA shell layout tokens (admin SPA entry point #5963) ── */
/*
  SPA-specific classes for the admin shell at apps/dashboard/admin/index.html.
  Flexbox scaffold: collapsible rail + topbar + content area.
  Inline <style> in index.html holds the full implementation; these tokens
  provide CSS-variable overrides and a hook for external consumers.
*/
.ww-admin-shell--spa {
  --ww-rail-w: 232px;
  --ww-rail-w-collapsed: 60px;
  --ww-topbar-h: 48px;
}

.ww-admin-rail { /* collapsible left navigation rail */ }
.ww-admin-rail.is-collapsed { /* collapsed state: icon-only */ }
.ww-admin-topbar { /* top bar: breadcrumb + tenant switcher + cmdk */ }
.ww-admin-content { /* main content area: landing scorecard or iframe */ }
.ww-admin-tenant-switcher { /* tenant dropdown in topbar */ }
.ww-admin-tenant-switcher.is-open { /* open dropdown state */ }
.ww-admin-scorecard__table { /* health scorecard table */ }