/* ═══════════ BRIEFING DOCUMENT (orchestrator / Director multi-output) ═══════════ */

.briefing-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow);
  animation: fade-in 280ms var(--ease);
  /* No overflow:hidden - the canvas-stream scrolls, not the card. Children with
     their own backgrounds + the card's border-radius keep the rounded look. */
}
/* Round the head + footer corners since the parent no longer clips */
.briefing-card .bf-head { border-top-left-radius: 12px; border-top-right-radius: 12px; }
.briefing-card .bf-trust { border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; }
.briefing-card.fresh {
  border-color: color-mix(in srgb, var(--agent-c, var(--acc)) 70%, var(--line-strong));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--agent-c, var(--acc)) 35%, transparent), var(--shadow-lg);
}

.bf-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px;
  background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.bf-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bf-title {
  font-family: 'Space Grotesk', sans-serif; font-size: var(--fs-16); font-weight: 700;
  letter-spacing: -0.01em; color: var(--t-1);
}
.bf-sub { font-size: var(--fs-11); color: var(--t-3); }
.bf-counter { font-weight: 700; color: var(--agent-c, var(--acc)); }
.bf-actions { display: inline-flex; gap: 6px; }
.bf-actions button {
  font-size: var(--fs-11); font-weight: 600; padding: 5px 11px; border-radius: 6px;
  color: var(--t-2); background: var(--surface); border: 1px solid var(--line); transition: all var(--t-fast);
}
.bf-actions button:hover { color: var(--acc-ink); background: var(--acc-soft); border-color: color-mix(in srgb, var(--acc) 22%, var(--line)); }

/* Table of contents - clickable jump chips */
.bf-toc {
  display: flex; flex-wrap: wrap; gap: 5px;
  padding: 9px 22px;
  background: var(--surface-3); border-bottom: 1px solid var(--line);
}
.bf-toc a {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-11); color: var(--t-2); text-decoration: none;
  padding: 3px 10px 3px 4px; border-radius: 6px;
  background: var(--surface); border: 1px solid var(--line); transition: all var(--t-fast);
}
.bf-toc a:hover { color: var(--acc-ink); background: var(--acc-soft); border-color: color-mix(in srgb, var(--acc) 22%, var(--line)); }
.bf-toc .bft-n {
  display: inline-grid; place-items: center; width: 18px; height: 18px;
  border-radius: 4px; background: var(--agent-c, var(--acc)); color: #fff;
  font-size: 10px; font-weight: 700;
}

/* Each section = one report, rendered as a headed block within the document */
.bf-body { padding: 0; }
.bf-section { padding: 18px 22px; border-bottom: 1px solid var(--line); }
.bf-section:last-child { border-bottom: 0; }
.bfs-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
}
.bfs-num {
  display: inline-grid; place-items: center; width: 24px; height: 24px;
  border-radius: 6px; background: var(--agent-c, var(--acc));
  color: #fff; font-size: 12px; font-weight: 700;
}
.bfs-title {
  margin: 0; flex: 1; min-width: 0;
  font-family: 'Space Grotesk', sans-serif; font-size: var(--fs-14); font-weight: 700;
  color: var(--t-1); letter-spacing: -0.005em;
}
.bfs-meta {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--t-4);
}

/* KPI as inline pairs (NOT heavy bordered tiles) - readable like a printed report */
.bfs-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px 24px;
}
.bfs-kpi { display: flex; flex-direction: column; gap: 1px; }
.bfs-kpi-lbl {
  font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--t-4); font-weight: 700;
}
.bfs-kpi-val {
  font-family: 'Space Grotesk', sans-serif; font-size: var(--fs-16); font-weight: 700;
  color: var(--t-1); letter-spacing: -0.01em; line-height: 1.2;
}
.bfs-kpi-val.acc { color: var(--agent-c, var(--acc)); cursor: pointer; transition: opacity var(--t-fast); }
.bfs-kpi-val.acc:hover { opacity: 0.75; }
.bfs-kpi-delta { font-size: 10px; font-weight: 700; font-family: 'JetBrains Mono', monospace; margin-top: 1px; }
.bfs-kpi-delta.up { color: #16a34a; }
.bfs-kpi-delta.down { color: #dc2626; }

/* Briefing-section tables: let them flow - canvas scrolls. Only x-overflow stays.
   The container border + radius keep the contained look. */
.bfs-table-wrap { overflow-x: auto; border-radius: 8px; border: 1px solid var(--line); }
.bfs-more {
  font-size: var(--fs-11); color: var(--t-4); padding: 6px 4px 0; text-align: right; font-style: italic;
}
.bfs-empty { color: var(--t-4); font-size: var(--fs-12); padding: 8px 0; }

/* Single trust line at the bottom of the WHOLE briefing */
.bf-trust {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 22px;
  background: var(--surface-2); border-top: 1px solid var(--line);
  font-size: var(--fs-11); color: var(--t-4);
}
.bf-trust svg { color: var(--green); }
.bf-trust strong { color: color-mix(in srgb, var(--agent-c, var(--acc)) 65%, var(--t-2)); font-weight: 600; }

/* ═══════════ TENANT CONNECTIONS (admin tab) ═══════════ */

/* Left-nav rows (formerly the inline emoji tab strip) */
.ah-tab {
  position: relative; display: flex; align-items: center; gap: 10px; width: 100%;
  font-size: var(--fs-13); font-weight: 600; padding: 8px 12px 8px 13px; border-radius: 8px;
  color: var(--t-2); background: transparent; text-align: left; transition: all var(--t-fast);
}
.ah-tab svg { width: 17px; height: 17px; flex: 0 0 17px; color: var(--t-3); transition: color var(--t-fast); }
.ah-tab > span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ah-tab .ang-lock { width: 13px; height: 13px; flex: 0 0 13px; color: var(--t-4); }
.ah-tab[hidden] { display: none; }
.ah-tab:hover { color: var(--t-1); background: var(--surface-3); }
.ah-tab:hover svg { color: var(--t-2); }
.ah-tab.on { color: var(--acc-ink); background: var(--acc-soft); }
.ah-tab.on::before { content: ''; position: absolute; left: 0; top: 5px; bottom: 5px; width: 3px; border-radius: 0 3px 3px 0; background: var(--acc); }
.ah-tab.on svg { color: var(--acc); }
.ah-tab.on .ang-lock { color: var(--acc-ink); }

.admin-tenants { flex: 1; overflow-y: auto; padding: 18px 24px; }
.admin-tenants[hidden] { display: none; }
.at-top { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }
.at-list { display: flex; flex-direction: column; gap: 8px; }
.at-loading, .at-empty { padding: 24px; text-align: center; color: var(--t-4); font-size: var(--fs-12); }
.at-add { align-self: flex-start; padding: 9px 16px; border-radius: 8px; font-size: var(--fs-13); font-weight: 700; color: var(--acc-ink); background: var(--acc-soft); border: 1px solid color-mix(in srgb, var(--acc) 25%, var(--line)); }
.at-add:hover { background: color-mix(in srgb, var(--acc) 14%, var(--surface)); }

.at-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.atr-main { flex: 1; min-width: 0; }
.atr-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.atr-head strong { font-family: 'JetBrains Mono', monospace; font-size: var(--fs-13); font-weight: 700; color: var(--t-1); }
.atr-name { color: var(--t-2); font-size: var(--fs-13); }
.atr-on, .atr-off { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; padding: 1px 7px; border-radius: 4px; }
.atr-on { color: #166534; background: #dcfce7; }
.atr-off { color: var(--t-4); background: var(--surface-3); }
.atr-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: var(--fs-11); color: var(--t-3); }
.atr-actions { display: flex; gap: 6px; }
.atr-edit, .atr-del { padding: 5px 12px; border-radius: 6px; font-size: var(--fs-12); font-weight: 600; transition: all var(--t-fast); }
.atr-edit { color: var(--t-2); background: var(--surface-3); border: 1px solid var(--line); }
.atr-edit:hover { color: var(--acc-ink); background: var(--acc-soft); border-color: color-mix(in srgb, var(--acc) 25%, var(--line)); }
.atr-del { color: var(--t-4); width: 30px; }
.atr-del:hover { color: var(--red); background: var(--red-soft); }

.at-form { padding: 18px 22px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); margin-top: 8px; }
.atf-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: var(--fs-15); color: var(--t-1); margin-bottom: 16px; }
.atf-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 18px; margin-bottom: 14px; }
.atf-grid label { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-12); font-weight: 600; color: var(--t-2); }
.atf-grid input, .atf-grid select { padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: 6px; font-size: var(--fs-13); font-weight: 400; background: var(--surface); color: var(--t-1); }
.atf-grid input:focus, .atf-grid select:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 18%, transparent); }
.atf-grid input[disabled] { background: var(--surface-3); color: var(--t-4); }
.atf-hint { font-size: 10px; font-weight: 500; color: var(--t-4); margin-left: 6px; }

.atf-test { margin: 12px 0 14px; padding: 12px 14px; border-radius: 9px; font-size: var(--fs-12); }
.atft-spin { color: var(--t-4); }
.atft-ok { background: #dcfce7; border: 1px solid #86efac; color: #14532d; padding: 10px 12px; border-radius: 8px; }
.atft-ok strong { color: #166534; }
.atft-bad { background: var(--red-soft); border: 1px solid color-mix(in srgb, var(--red) 30%, var(--line)); color: #991b1b; padding: 10px 12px; border-radius: 8px; }
.atft-ver { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--t-3); margin: 4px 0 8px; }
.atft-row { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-top: 6px; }
.atft-l { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t-4); font-weight: 700; margin-right: 4px; }
.atft-pill { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 5px; background: var(--surface); border: 1px solid var(--line); color: var(--t-2); }

.atf-actions { display: flex; justify-content: flex-end; gap: 8px; }
.atf-cancel { padding: 8px 14px; border-radius: 7px; font-size: var(--fs-12); font-weight: 600; color: var(--t-2); border: 1px solid var(--line-strong); background: var(--surface); }
.atf-cancel:hover { background: var(--surface-3); }
.atf-test-btn { padding: 8px 16px; border-radius: 7px; font-size: var(--fs-13); font-weight: 700; color: var(--acc-ink); background: var(--acc-soft); border: 1px solid color-mix(in srgb, var(--acc) 25%, var(--line)); }
.atf-test-btn:hover { background: color-mix(in srgb, var(--acc) 14%, var(--surface)); }
.atf-save { padding: 8px 18px; border-radius: 7px; font-size: var(--fs-13); font-weight: 700; color: #fff; background: var(--acc); }
.atf-save:disabled { opacity: 0.4; cursor: not-allowed; background: var(--t-4); }
.atf-save:hover:not(:disabled) { background: var(--acc-hover); }

/* ═══════════ AGENT MANAGEMENT (admin) ═══════════ */

/* Locked persona on the rail */
.persona-btn.locked { opacity: 0.45; filter: grayscale(0.5); }
.persona-btn.locked:hover { opacity: 0.7; }
.persona-btn .pb-lock {
  position: absolute; top: 2px; right: 2px;
  font-size: 9px; line-height: 1; padding: 1px 3px;
  background: var(--surface); border-radius: 4px;
  box-shadow: 0 1px 2px rgba(15,23,42,0.18);
}
.persona-btn .pb-icon { position: relative; }

/* Locked pop-up */
.lock-pop { position: fixed; inset: 0; z-index: 2300; background: rgba(15, 23, 42, 0.35); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; }
.lock-pop[hidden] { display: none; }
.lock-pop .lp-card { width: 360px; max-width: 92vw; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 18px 20px; display: flex; align-items: flex-start; gap: 14px; }
.lp-icon { font-size: 28px; line-height: 1; }
.lp-text { flex: 1; }
.lp-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: var(--fs-15); color: var(--t-1); margin-bottom: 4px; }
.lp-body { font-size: var(--fs-12); color: var(--t-2); line-height: 1.55; }
.lp-close { padding: 6px 14px; border-radius: 7px; font-weight: 700; color: #fff; background: var(--acc); font-size: var(--fs-12); align-self: center; }

/* Admin sheet - full window overlay */
.admin-backdrop { position: fixed; inset: 0; z-index: 2100; background: rgba(15,23,42,0.45); backdrop-filter: blur(2px); display: flex; }
.admin-backdrop[hidden] { display: none; }
.admin-sheet { margin: 32px; flex: 1; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden; }
.admin-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--line); flex: 0 0 auto; }
.ah-title { display: inline-flex; align-items: center; gap: 8px; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: var(--fs-15); color: var(--t-1); }
.ah-title svg { color: var(--acc); }
.ah-close { width: 30px; height: 30px; border-radius: 8px; color: var(--t-3); font-size: 14px; }
.ah-close:hover { background: var(--surface-3); color: var(--t-1); }

/* ── Grouped left-nav layout ───────────────────────────────────────────── */
.admin-main { flex: 1; display: flex; min-height: 0; overflow: hidden; }
.admin-nav { flex: 0 0 190px; width: 190px; background: var(--surface-2); border-right: 1px solid var(--line); overflow-y: auto; padding: 10px 10px 16px; display: flex; flex-direction: column; gap: 4px; }
.admin-nav-group { display: flex; flex-direction: column; gap: 2px; }
.admin-nav-group + .admin-nav-group { margin-top: 12px; }
.ang-label { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--t-4); padding: 4px 13px 5px; }
.admin-content { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; }

/* Users content header + relocated filter toolbar */
.admin-users { flex: 0 0 auto; padding: 16px 20px 0; }
.admin-users[hidden] { display: none; }
.admin-users-head { margin-bottom: 12px; }
.auh-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: var(--fs-15); color: var(--t-1); }
.auh-sub { font-size: var(--fs-12); color: var(--t-3); margin-top: 2px; }
.admin-users-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.admin-users-toolbar select, .admin-users-toolbar input { padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: 7px; font-size: var(--fs-12); background: var(--surface); color: var(--t-1); }
.admin-users-toolbar input { min-width: 220px; flex: 1; max-width: 320px; }

/* Panes fill the content column and own their own vertical scroll. */
.admin-content > .admin-tenants,
.admin-content > .admin-desk-pane,
.admin-content > .access-pane { flex: 1 1 auto; min-height: 0; height: auto; }
.admin-content > .agent-dash { flex: 1 1 auto; min-height: 0; }

.admin-body { flex: 1 1 auto; display: grid; grid-template-columns: 320px 1fr; overflow: hidden; min-height: 320px; }

/* Left: user list */
.admin-left { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.al-head { padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: var(--fs-12); color: var(--t-3); display: flex; align-items: center; justify-content: space-between; }
.al-bulk { font-size: var(--fs-11); font-weight: 600; padding: 3px 9px; border-radius: 6px; color: var(--acc-ink); background: var(--acc-soft); border: 1px solid color-mix(in srgb, var(--acc) 22%, var(--line)); }
.al-list { flex: 1; overflow-y: auto; padding: 6px 8px; }
.al-empty { padding: 30px 14px; text-align: center; color: var(--t-4); font-size: var(--fs-12); }
.al-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background: transparent; text-align: left; }
.al-item:hover { background: var(--surface-3); }
.al-item[data-on="1"] { background: var(--acc-soft); }
.ali-main { flex: 1; min-width: 0; }
.ali-name { display: block; font-size: var(--fs-13); font-weight: 600; color: var(--t-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ali-meta { display: block; font-size: 10px; color: var(--t-4); }
.ali-grants { font-size: 10px; padding: 2px 7px; border-radius: 5px; }
.ali-grants.has { color: var(--acc-ink); background: var(--acc-soft); font-weight: 600; }
.ali-grants.none { color: var(--t-4); background: var(--surface-3); }

/* Right: matrix + actions */
.admin-right { display: flex; flex-direction: column; min-height: 0; }
.ar-head { padding: 14px 20px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.aruh-empty { color: var(--t-4); font-size: var(--fs-13); }
.aruh-user strong { font-family: 'Space Grotesk', sans-serif; font-size: var(--fs-15); color: var(--t-1); }
.aruh-meta { color: var(--t-3); font-size: var(--fs-12); margin-left: 8px; }
.ar-templates { display: flex; gap: 6px; align-items: center; padding: 9px 20px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.art-label { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--t-4); margin-right: 4px; }
.ar-templates button { font-size: var(--fs-12); font-weight: 600; padding: 5px 11px; border-radius: 6px; background: var(--surface-3); border: 1px solid var(--line); color: var(--t-2); }
.ar-templates button:hover { color: var(--acc-ink); background: var(--acc-soft); border-color: color-mix(in srgb, var(--acc) 25%, var(--line)); }
.ar-grid { flex: 1; overflow-y: auto; padding: 8px 20px; font-size: var(--fs-13); }
.amx-header { display: grid; grid-template-columns: 24px 1fr 70px 70px; gap: 8px; padding: 6px 0; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--t-4); border-bottom: 1px solid var(--line); }
.amx-group { padding: 12px 0 4px; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--acc); }
.amx-row { display: grid; grid-template-columns: 24px 1fr 70px 70px; gap: 8px; align-items: center; padding: 7px 0; border-bottom: 1px dashed var(--line); }
.amx-dot { width: 12px; height: 12px; border-radius: 4px; }
.amx-name { color: var(--t-2); }
.amx-name[data-flag="1"] { color: var(--t-1); font-weight: 600; }
.amx-cap { color: var(--t-4); font-size: 10px; margin-left: 6px; }
.amx-tog { position: relative; display: inline-block; width: 36px; height: 20px; }
.amx-tog input { opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.amx-tog span { position: absolute; inset: 0; background: var(--surface-3); border: 1px solid var(--line); border-radius: 999px; transition: all var(--t-fast); }
.amx-tog span::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: #fff; border-radius: 50%; transition: all var(--t-fast); box-shadow: var(--shadow-sm); }
.amx-tog input:checked + span { background: var(--acc); border-color: var(--acc); }
.amx-tog input:checked + span::after { left: 18px; }
.amx-tog input:disabled + span { opacity: 0.45; cursor: not-allowed; }
.ar-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--line); background: var(--surface-2); }
.af-preview { padding: 7px 14px; border-radius: 7px; font-size: var(--fs-12); font-weight: 600; color: var(--t-2); background: var(--surface); border: 1px solid var(--line-strong); }
.af-save { padding: 8px 18px; border-radius: 7px; font-size: var(--fs-13); font-weight: 700; color: #fff; background: var(--acc); }
.af-save:hover { background: var(--acc-hover); }

/* Audit log footer */
.admin-audit { border-top: 1px solid var(--line); padding: 8px 18px; }
.admin-audit summary { font-size: var(--fs-12); color: var(--t-3); cursor: pointer; }
.admin-audit .aa-count { color: var(--t-4); margin-left: 6px; }
.aa-list { max-height: 200px; overflow-y: auto; margin-top: 8px; }
.aa-row { display: grid; grid-template-columns: 70px 130px 1fr 80px; gap: 12px; align-items: center; padding: 4px 0; font-size: var(--fs-11); color: var(--t-3); border-bottom: 1px dashed var(--line); }
.aa-act { font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 1px 7px; border-radius: 4px; text-align: center; }
.act-grant { color: #166534; background: #dcfce7; }
.act-revoke { color: #991b1b; background: #fee2e2; }
.act-update { color: var(--acc-ink); background: var(--acc-soft); }
.act-template { color: #7c2d12; background: #fed7aa; }
.aa-when { text-align: right; color: var(--t-4); }
.aa-empty { color: var(--t-4); text-align: center; font-size: var(--fs-12); padding: 14px; }

/* Preview-as overlay */
.preview-pop { position: fixed; inset: 0; z-index: 2350; background: rgba(15,23,42,0.42); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 20px; }
.preview-pop[hidden] { display: none; }
.pp-card { width: 620px; max-width: 96vw; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: var(--shadow-lg); }
.pp-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.pp-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: var(--fs-14); color: var(--t-1); }
.pp-role { color: var(--acc-ink); font-weight: 600; }
.pp-close { width: 28px; height: 28px; border-radius: 7px; color: var(--t-3); font-size: 14px; }
.pp-body { padding: 16px 18px 22px; }
.pp-section { margin-bottom: 16px; }
.pp-h { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--t-4); display: block; margin-bottom: 8px; }
.pp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-chip { font-size: var(--fs-12); font-weight: 600; padding: 4px 10px; border-radius: 7px; background: color-mix(in srgb, var(--c, var(--acc)) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--c, var(--acc)) 30%, var(--line)); color: var(--t-1); }
.pp-chips.locked .pp-chip { background: var(--surface-3); border-color: var(--line); color: var(--t-4); }
.pp-empty { color: var(--t-4); font-size: var(--fs-12); }

/* ═══════════ VISIBLE FEATURES BATCH - KPI delta + copy + actions + filters + tour + crumb + shortcuts ═══════════ */

/* KPI: clickable values (copy on click) + delta below */
.kpi { position: relative; cursor: default; }
.kpi[data-kpi-num] .kpi-value { cursor: pointer; transition: color var(--t-fast); }
.kpi[data-kpi-num] .kpi-value:hover { color: var(--acc); }
.kpi-delta { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; margin-top: 4px; }
.kpi-delta.up { color: #16a34a; }
.kpi-delta.down { color: #dc2626; }

/* Empty-state alternates inside a report card */
.empty-alt { padding: 22px 24px; }
.empty-alt .ea-head { display: flex; align-items: center; gap: 10px; font-size: var(--fs-13); color: var(--t-2); margin-bottom: 6px; }
.empty-alt .ea-head svg { color: var(--t-4); }
.empty-alt .ea-sub { font-size: var(--fs-12); color: var(--t-4); margin: 14px 0 9px; letter-spacing: 0.04em; }
.empty-alt .ea-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.empty-alt .ea-chip {
  font-size: var(--fs-12); padding: 7px 12px; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--line); color: var(--t-2);
  text-align: left; transition: all var(--t-fast);
}
.empty-alt .ea-chip:hover { border-color: var(--acc); color: var(--acc-ink); background: var(--acc-soft); }

/* Smart Action Bar */
.smart-actions {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 7px 16px; border-top: 1px solid var(--line); background: var(--surface-2);
}
.sa-label { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--t-4); margin-right: 4px; }
.sa-btn {
  font-size: var(--fs-12); font-weight: 600; padding: 5px 11px; border-radius: 7px;
  color: var(--t-2); background: var(--surface); border: 1px solid var(--line); transition: all var(--t-fast); white-space: nowrap;
}
.sa-btn:hover { color: var(--acc-ink); background: var(--acc-soft); border-color: color-mix(in srgb, var(--acc) 25%, var(--line)); }

/* Quick-filter chips above tables */
.quick-filters {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2);
}
.qf-label, .qf-label-mini { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--t-4); }
.qf-divider { width: 1px; height: 14px; background: var(--line); margin: 0 2px; }
.qf-seg { display: inline-flex; gap: 1px; padding: 2px; border-radius: 7px; background: var(--surface-3); border: 1px solid var(--line); }
.qf-seg button {
  padding: 4px 9px; border-radius: 5px; font-size: var(--fs-11); font-weight: 600;
  color: var(--t-3); transition: all var(--t-fast);
}
.qf-seg button.on { color: var(--acc-ink); background: var(--surface); box-shadow: var(--shadow-sm); border: 1px solid color-mix(in srgb, var(--acc) 22%, var(--line)); }

/* Drill-down breadcrumb */
.drill-crumb {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 6px 12px; margin: 0 12px 6px; border-radius: 8px;
  background: color-mix(in srgb, var(--acc) 7%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--acc) 18%, var(--line));
  font-size: var(--fs-11);
}
.dc-label { font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--acc-ink); margin-right: 4px; }
.dc-step { color: var(--t-2); font-weight: 500; }
.dc-step.now { color: var(--acc-ink); font-weight: 700; }
.dc-sep { color: var(--t-4); padding: 0 2px; }
.dc-reset { width: 18px; height: 18px; border-radius: 4px; color: var(--t-4); font-size: 11px; margin-left: auto; }
.dc-reset:hover { color: var(--red); background: var(--red-soft); }

/* Keyboard shortcuts overlay */
.shortcuts-backdrop {
  position: fixed; inset: 0; z-index: 2200;
  background: rgba(15, 23, 42, 0.42); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; animation: fade-in 160ms var(--ease);
}
.shortcuts { width: 480px; max-width: 92vw; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 0; }
.sc-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.sc-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: var(--fs-14); color: var(--t-1); }
.sc-close { width: 28px; height: 28px; border-radius: 7px; color: var(--t-3); font-size: 14px; }
.sc-close:hover { background: var(--surface-3); color: var(--t-1); }
.sc-list { list-style: none; padding: 12px 18px; margin: 0; }
.sc-list li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.sc-list li:last-child { border-bottom: 0; }
.sc-keys { display: inline-flex; align-items: center; gap: 4px; flex: none; min-width: 120px; }
.sc-keys kbd {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700;
  padding: 2px 7px; border-radius: 5px;
  background: var(--surface-3); border: 1px solid var(--line); color: var(--t-2);
  box-shadow: inset 0 -1px 0 var(--line);
}
.sc-plus { color: var(--t-4); font-size: 10px; }
.sc-desc { font-size: var(--fs-13); color: var(--t-2); }
.sc-foot { padding: 10px 18px; border-top: 1px solid var(--line); font-size: var(--fs-11); color: var(--t-4); }
.sc-foot kbd { font-size: 10px; padding: 1px 5px; background: var(--surface-3); border: 1px solid var(--line); border-radius: 4px; color: var(--t-3); }

/* Welcome tour */
.tour-overlay { position: fixed; inset: 0; z-index: 2400; pointer-events: none; }
.tour-overlay::before { content: ''; position: absolute; inset: 0; background: rgba(15, 23, 42, 0.55); pointer-events: auto; }
.tour-spot {
  position: absolute; border-radius: 10px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.55);
  border: 2px solid var(--acc); animation: tour-pulse 1.6s var(--ease) infinite;
}
@keyframes tour-pulse { 0%, 100% { box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.55), 0 0 0 0 color-mix(in srgb, var(--acc) 50%, transparent); } 50% { box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.55), 0 0 0 10px transparent; } }
.tour-pop {
  position: absolute; width: 320px; pointer-events: auto;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px;
  box-shadow: var(--shadow-lg); padding: 16px 18px; animation: fade-up 200ms var(--ease);
}
.tp-step { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--t-4); font-weight: 700; margin-bottom: 6px; }
.tp-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: var(--fs-15); color: var(--t-1); margin-bottom: 6px; }
.tp-body { font-size: var(--fs-13); color: var(--t-2); line-height: 1.5; margin-bottom: 14px; }
.tp-actions { display: flex; justify-content: space-between; }
.tp-skip { font-size: var(--fs-12); font-weight: 600; color: var(--t-3); padding: 6px 10px; border-radius: 6px; }
.tp-skip:hover { color: var(--t-1); background: var(--surface-3); }
.tp-next { font-size: var(--fs-13); font-weight: 700; color: #fff; background: var(--acc); padding: 7px 16px; border-radius: 7px; }
.tp-next:hover { background: var(--acc-hover); }

/* ═══════════ TIER 3/4 - branding, switcher, settings, command palette, footer ═══════════ */

/* CLAB engine indicator (replaces raw model names) */
.engine-rail { display: inline-flex; gap: 4px; align-items: center; }
.engine-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: 'Space Grotesk', sans-serif; font-size: 10px; font-weight: 600;
  padding: 2px 7px; border-radius: 5px;
  color: var(--t-4); background: var(--surface-3); border: 1px solid var(--line);
}
.engine-chip.on { color: var(--acc-ink); background: var(--acc-soft); border-color: color-mix(in srgb, var(--acc) 30%, var(--line)); }
.engine-blink { width: 6px; height: 6px; border-radius: 50%; background: var(--acc); animation: blink 1.1s ease-in-out infinite; }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
.agent-pill .ap-model .engine-active { font-family: 'Space Grotesk', sans-serif; font-weight: 700; color: var(--acc-ink); font-size: 11px; }
.agent-pill .ap-model .engine-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); display: inline-block; margin-left: 5px; animation: blink 1.1s ease-in-out infinite; }

/* Friendly source footer */
.report-sources strong { color: color-mix(in srgb, var(--active-agent-c, var(--acc)) 65%, var(--t-2)); font-weight: 600; }

/* Top-bar switcher + settings */
.top-switcher {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px; border-radius: 8px;
  background: var(--surface-3); border: 1px solid var(--line);
  font-size: var(--fs-12); color: var(--t-2); transition: all var(--t-fast);
}
.top-switcher:hover { border-color: var(--line-focus); background: var(--surface); }
.top-switcher .sw-tenant { font-weight: 700; color: var(--t-1); font-family: 'Space Grotesk', sans-serif; }
.top-switcher .sw-user { color: var(--t-3); font-family: 'JetBrains Mono', monospace; font-size: 11px; }
.icon-only-btn { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; color: var(--t-3); background: var(--surface-3); border: 1px solid var(--line); transition: all var(--t-fast); }
.icon-only-btn:hover { color: var(--acc); border-color: var(--line-focus); }

/* ── Per-button subtle colour cues ──────────────────────────────────────────
   Each top-right action gets a relevant muted idle icon tint and a faint,
   light hover background keyed by id. Idle stays calm (muted hue on
   --surface-3); hover lifts a soft tinted wash. Light theme, no gradient.
   Each rule keys a CSS var (--ib-c) so idle/hover stay in sync per button. */
#btnDeskBell,      #btnDeskLink      { --ib-c: #0d9488; } /* teal */
#btnInbox          { --ib-c: #b45309; } /* amber */
#btnLangToggle     { --ib-c: #2563eb; } /* blue */
#btnHistory        { --ib-c: #7c3aed; } /* violet */
#btnDashboards     { --ib-c: #15803d; } /* green */
#btnSchedules      { --ib-c: #4f46e5; } /* indigo */
#btnIntelligence   { --ib-c: #9333ea; } /* purple */
#btnAdmin          { --ib-c: #2563eb; } /* blue */
#btnSettings       { --ib-c: #475569; } /* slate */
#btnSignOut        { --ib-c: #dc2626; } /* soft red */

#btnDeskBell, #btnDeskLink, #btnInbox, #btnHistory, #btnDashboards,
#btnSchedules, #btnIntelligence, #btnAdmin, #btnSettings, #btnSignOut {
  /* muted idle icon: blend the hue toward grey so it stays subtle, not saturated */
  color: color-mix(in srgb, var(--ib-c) 55%, var(--t-3));
}
#btnDeskBell:hover, #btnDeskLink:hover, #btnInbox:hover, #btnHistory:hover,
#btnDashboards:hover, #btnSchedules:hover, #btnIntelligence:hover,
#btnAdmin:hover, #btnSettings:hover, #btnSignOut:hover {
  color: color-mix(in srgb, var(--ib-c) 80%, var(--t-1));
  background: color-mix(in srgb, var(--ib-c) 9%, var(--surface));
  border-color: color-mix(in srgb, var(--ib-c) 32%, var(--line));
}

.switcher-pop {
  position: fixed; top: 56px; right: 16px; z-index: 1500;
  width: 280px; background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: 12px;
  box-shadow: var(--shadow-lg); padding: 12px; animation: fade-up 160ms var(--ease);
}
.switcher-pop[hidden] { display: none; }
.sw-section { margin-bottom: 12px; }
.sw-section:last-child { margin-bottom: 0; }
.sw-head { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-4); font-weight: 700; margin-bottom: 7px; }
.sw-tenant-opt {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; border-radius: 8px; cursor: pointer;
  font-size: var(--fs-13); transition: background var(--t-fast); border: 1px solid transparent;
}
.sw-tenant-opt:hover { background: var(--surface-3); }
.sw-tenant-opt.active { background: var(--acc-soft); border-color: color-mix(in srgb, var(--acc) 25%, var(--line)); color: var(--acc-ink); font-weight: 600; }
.sw-tenant-opt .t-db { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--t-4); }
.sw-user-input { display: flex; gap: 6px; }
.sw-user-input input { flex: 1; padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: 7px; font-size: var(--fs-13); }
.sw-user-input input:focus { outline: none; border-color: var(--acc); }
.sw-hint { font-size: var(--fs-11); color: var(--t-4); margin-top: 7px; line-height: 1.4; }

/* Settings */
.setting-row {
  display: flex; align-items: center; flex-wrap: wrap;
  padding: 14px 0; border-bottom: 1px solid var(--line);
  gap: 10px 16px;
}
.setting-row:last-child { border-bottom: 0; }
.setting-row > :first-child { flex: 1 1 200px; min-width: 200px; }
/* Right-hand control: pushes to the right edge; wraps onto its own line when wide */
.setting-row > .seg,
.setting-row > .setting-select { margin-left: auto; }
.setting-name { font-size: var(--fs-14); font-weight: 600; }
.setting-desc { font-size: var(--fs-12); color: var(--t-3); margin-top: 1px; }
.seg { display: inline-flex; background: var(--surface-3); border-radius: 8px; padding: 2px; gap: 2px; }
.seg button {
  padding: 6px 12px; border-radius: 6px; font-size: var(--fs-12); font-weight: 600;
  color: var(--t-3); transition: all var(--t-fast); white-space: nowrap;
  line-height: 1.2; min-height: 28px; display: inline-flex; align-items: center; justify-content: center;
}
.seg button.on { background: var(--surface); color: var(--acc-ink); box-shadow: var(--shadow-sm); }
/* Language picker: 4 options incl. non-Latin scripts - even pills, one tidy row that wraps cleanly */
.seg-lang { flex-wrap: wrap; justify-content: flex-end; gap: 3px; }
.seg-lang button { flex: 0 0 auto; min-width: 64px; text-align: center; }

/* Narrow viewport: keep everything readable, no overlap */
@media (max-width: 480px) {
  .setting-row > :first-child { flex-basis: 100%; min-width: 0; }
  .setting-row > .seg,
  .setting-row > .setting-select { margin-left: 0; width: 100%; max-width: none; }
  .seg-lang { justify-content: flex-start; }
}

/* Command palette */
.cmdk-backdrop { position: fixed; inset: 0; z-index: 2000; background: rgba(15,23,42,0.4); backdrop-filter: blur(4px); display: flex; align-items: flex-start; justify-content: center; padding-top: 14vh; animation: fade-in 140ms var(--ease); }
.cmdk-backdrop[hidden] { display: none; }
.cmdk { width: 560px; max-width: 92vw; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: var(--shadow-lg); overflow: hidden; }
.cmdk input { width: 100%; padding: 16px 18px; border: 0; border-bottom: 1px solid var(--line); font-size: var(--fs-16); outline: none; box-sizing: border-box; }
.cmdk-list { max-height: 340px; overflow-y: auto; padding: 6px; }
.cmdk-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; cursor: pointer; font-size: var(--fs-14); }
.cmdk-item.sel, .cmdk-item:hover { background: var(--acc-soft); }
.cmdk-item .ci-badge { font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; background: var(--surface-3); color: var(--t-3); }
.cmdk-item .ci-sub { color: var(--t-4); font-size: var(--fs-12); margin-left: auto; }
.cmdk-foot { padding: 9px 14px; border-top: 1px solid var(--line); font-size: var(--fs-11); color: var(--t-4); display: flex; gap: 6px; align-items: center; }

/* Status footer */
.status-footer {
  position: fixed; bottom: 0; left: 0; right: 0; height: 28px; z-index: 40;
  display: flex; align-items: center; gap: 8px; padding: 0 16px;
  background: var(--surface); border-top: 1px solid var(--line);
  font-size: var(--fs-11); color: var(--t-3);
}
.shell { padding-bottom: 28px; }
.sf-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--t-4); }
.sf-dot.ok { background: var(--green); animation: blink 2.4s ease-in-out infinite; }
.sf-dot.bad { background: var(--red); }
.sf-sep { color: var(--line-strong); }
.sf-spacer { flex: 1; }
.sf-cmdk { font-size: var(--fs-11); color: var(--t-3); display: inline-flex; align-items: center; gap: 4px; }
.sf-cmdk:hover { color: var(--acc); }
.sf-cache { color: var(--acc-ink); background: var(--acc-soft); border: 1px solid color-mix(in srgb, var(--acc) 22%, var(--line)); padding: 1px 8px; border-radius: 999px; font-weight: 600; font-size: var(--fs-11); cursor: default; }
.sf-cache.muted { color: var(--t-3); background: var(--surface-3); border-color: var(--line); font-weight: 500; }

/* Splash */
.splash { position: fixed; inset: 0; z-index: 5000; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; transition: opacity 400ms var(--ease); }
.splash.hide { opacity: 0; pointer-events: none; }
.splash-mark { animation: fade-up 400ms var(--ease); }
.splash-name { font-family: 'Space Grotesk', sans-serif; font-size: 30px; font-weight: 700; letter-spacing: -0.02em; color: var(--t-1); margin-top: 10px; }
.splash-sub { font-size: var(--fs-13); color: var(--t-3); }
.splash-bar { width: 160px; height: 3px; background: var(--surface-3); border-radius: 2px; overflow: hidden; margin-top: 16px; }
.splash-bar span { display: block; height: 100%; width: 40%; background: var(--acc); border-radius: 2px; animation: splash-load 1.1s ease-in-out infinite; }
@keyframes splash-load { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }

/* Density compact */
body.density-compact .report-head { padding: 8px 14px; }
body.density-compact .r-table tbody td { padding: 7px 14px; }
body.density-compact .r-table thead th { padding: 7px 14px; }
body.density-compact .kpi { padding: 10px 14px; }
body.density-compact .canvas-stream { gap: 10px; padding: 12px 16px; }

/* Friendly error card */
.error-card {
  background: var(--red-soft); border: 1px solid color-mix(in srgb, var(--red) 25%, var(--line));
  border-left: 3px solid var(--red); border-radius: 10px; padding: 12px 14px;
}
.error-card .ec-title { font-weight: 600; color: #991b1b; font-size: var(--fs-14); display: flex; align-items: center; gap: 7px; }
.error-card .ec-msg { font-size: var(--fs-13); color: var(--t-2); margin-top: 5px; line-height: 1.45; }
.error-card .ec-retry { margin-top: 9px; padding: 6px 12px; border-radius: 7px; background: var(--surface); border: 1px solid var(--line-strong); font-size: var(--fs-12); font-weight: 600; color: var(--t-1); }
.error-card .ec-retry:hover { border-color: var(--acc); color: var(--acc); }

/* B1 - confirm-gated mutation card (pending_mutation SSE event).
   Light/blue #2563eb, no gradients, amber left-border while pending signals
   "review before this happens" without alarming red. */
.confirm-card {
  background: var(--amber-soft);
  border: 1px solid color-mix(in srgb, var(--amber) 30%, var(--line));
  border-left: 3px solid var(--amber);
  border-radius: 10px;
  padding: 13px 15px;
  box-shadow: var(--shadow-sm);
}
.confirm-card .cc-header {
  display: flex; align-items: center; gap: 7px;
  font-weight: 600; color: var(--amber); font-size: var(--fs-14);
}
.confirm-card .cc-title { color: var(--t-1); }
.confirm-card .cc-readback {
  margin-top: 6px;
  font-size: var(--fs-13); color: var(--t-2); line-height: 1.5;
}
.confirm-card .cc-preview-label {
  margin-top: 10px;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 700; color: var(--t-3);
}
.confirm-card .cc-preview-wrap {
  margin-top: 6px; max-height: 220px; overflow: auto;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
}
.confirm-card .cc-preview-table { width: 100%; border-collapse: collapse; font-size: var(--fs-12); }
.confirm-card .cc-preview-table th {
  position: sticky; top: 0;
  text-align: left; padding: 6px 10px; background: var(--surface-2);
  color: var(--t-3); font-weight: 600; border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.confirm-card .cc-preview-table td {
  padding: 6px 10px; color: var(--t-1); border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.confirm-card .cc-preview-table tr:last-child td { border-bottom: none; }
.confirm-card .cc-preview-more { margin-top: 5px; font-size: var(--fs-11); color: var(--t-4); }
.confirm-card .cc-footer {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-top: 12px;
}
.confirm-card .cc-btn {
  padding: 7px 15px; border-radius: 8px; font-size: var(--fs-13); font-weight: 600;
  cursor: pointer; border: 1px solid var(--line-strong); background: var(--surface); color: var(--t-1);
}
.confirm-card .cc-btn:hover:not(:disabled) { border-color: var(--t-4); }
.confirm-card .cc-btn:disabled { opacity: 0.6; cursor: default; }
.confirm-card .cc-btn.cc-approve {
  background: var(--acc); border-color: var(--acc); color: #fff;
}
.confirm-card .cc-btn.cc-approve:hover:not(:disabled) { background: var(--acc-hover); border-color: var(--acc-hover); }
.confirm-card .cc-btn.cc-approve .cc-ttl { font-weight: 500; opacity: 0.85; }
.confirm-card.cc-resolved { background: var(--surface-2); border-left-color: var(--line-strong); }
.confirm-card.cc-resolved .cc-header { color: var(--t-3); }
.confirm-card .cc-outcome {
  margin-top: 10px; font-size: var(--fs-13); color: var(--t-2);
  padding-top: 10px; border-top: 1px solid var(--line);
}
.confirm-card.cc-executed .cc-outcome { color: var(--green); }
.confirm-card.cc-error .cc-outcome { color: var(--red); }

/* Inline data preview (in chat) */
.data-preview {
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  overflow: hidden;
}
.data-preview.empty {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 12px; font-size: var(--fs-12); color: var(--t-3);
  background: var(--surface-2);
}
.dp-head {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 7px 11px; background: var(--surface-2); border-bottom: 1px solid var(--line);
}
/* When collapsed there is no body below - soften the head's bottom border */
.data-preview.collapsed .dp-head { border-bottom: 0; }
.dp-title { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; color: var(--t-3); }
.dp-title svg { color: color-mix(in srgb, var(--active-agent-c, var(--acc)) 70%, var(--t-3)); }
.dp-canvas {
  font-size: var(--fs-11); font-weight: 600;
  color: color-mix(in srgb, var(--active-agent-c, var(--acc)) 70%, var(--t-1));
  padding: 3px 8px; border-radius: 6px; transition: background var(--t-fast);
}
.dp-canvas:hover { background: color-mix(in srgb, var(--active-agent-c, var(--acc)) 10%, var(--surface)); }
.dp-table-wrap { overflow-x: auto; }
.dp-table { width: 100%; border-collapse: collapse; font-size: var(--fs-12); }
.dp-table thead th {
  text-align: left; padding: 6px 11px; font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.03em; color: var(--t-4); font-weight: 600; border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.dp-table tbody td { padding: 6px 11px; border-bottom: 1px solid var(--line); color: var(--t-2); white-space: nowrap; }
.dp-table tbody tr:last-child td { border-bottom: 0; }
.dp-more { padding: 6px 11px; font-size: var(--fs-11); color: var(--t-4); background: var(--surface-2); border-top: 1px solid var(--line); }

/* Collapsed-by-default: raw rows stay hidden until the user peeks */
.dp-head .dp-title { margin-right: auto; }
.dp-actions { display: inline-flex; align-items: center; gap: 6px; }
.data-preview.collapsed .dp-table-wrap,
.data-preview.collapsed .dp-more { display: none; }
.dp-peek {
  font-size: var(--fs-11); font-weight: 600; color: var(--t-3);
  padding: 3px 9px; border-radius: 6px; border: 1px solid var(--line);
  background: var(--surface); transition: all var(--t-fast); white-space: nowrap;
}
.dp-peek:hover { color: var(--acc); border-color: var(--line-focus); }
.dp-peek[aria-expanded="true"] { color: var(--acc-ink); background: var(--acc-soft); border-color: color-mix(in srgb, var(--acc) 25%, var(--line)); }

/* ── Slide-over sheets (History, Dashboards) ── */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 1800;
  background: rgba(15, 23, 42, 0.32); backdrop-filter: blur(2px);
  display: flex; justify-content: flex-end;
  opacity: 0; transition: opacity 200ms var(--ease);
}
.sheet-backdrop.open { opacity: 1; }
.sheet-backdrop[hidden] { display: none; }
.sheet {
  width: 400px; max-width: 92vw; height: 100%;
  background: var(--surface); border-left: 1px solid var(--line-strong);
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 220ms var(--ease);
}
.sheet-backdrop.open .sheet { transform: translateX(0); }
.sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--line);
}
.sheet-title { display: inline-flex; align-items: center; gap: 9px; font-family: 'Space Grotesk', sans-serif; font-size: var(--fs-15); font-weight: 700; color: var(--t-1); }
.sheet-title svg { color: var(--acc); }
.sheet-close { width: 28px; height: 28px; border-radius: 7px; color: var(--t-3); font-size: 14px; transition: all var(--t-fast); }
.sheet-close:hover { background: var(--surface-3); color: var(--t-1); }
.sheet-actions { padding: 12px 18px 0; }
.sheet-save-btn {
  display: inline-flex; align-items: center; gap: 8px; width: 100%; justify-content: center;
  padding: 10px 14px; border-radius: 9px; font-size: var(--fs-13); font-weight: 600;
  color: var(--acc-ink); background: var(--acc-soft);
  border: 1px solid color-mix(in srgb, var(--acc) 25%, var(--line)); transition: all var(--t-fast);
}
.sheet-save-btn:hover { background: color-mix(in srgb, var(--acc) 14%, var(--surface)); border-color: var(--acc); }
.sheet-body { flex: 1; overflow-y: auto; padding: 12px 14px 24px; display: flex; flex-direction: column; gap: 8px; }
.sheet-empty { text-align: center; color: var(--t-4); font-size: var(--fs-12); padding: 40px 16px; line-height: 1.6; }

/* History items */
.hist-item, .dash-item { display: flex; align-items: stretch; gap: 4px; }
.hist-open, .dash-open {
  flex: 1; text-align: left; display: flex; flex-direction: column; gap: 3px;
  padding: 11px 13px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.hist-open:hover, .dash-open:hover { border-color: var(--line-focus); box-shadow: var(--shadow-sm); }
.hist-title, .dash-name { font-size: var(--fs-13); font-weight: 600; color: var(--t-1); }
.hist-meta, .dash-meta { font-size: var(--fs-11); color: var(--t-4); }
.hist-del, .dash-del { width: 30px; border-radius: 8px; color: var(--t-4); font-size: 12px; transition: all var(--t-fast); }
.hist-del:hover, .dash-del:hover { background: var(--red-soft); color: var(--red); }
.dash-tiles { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.dash-pill { font-size: 10px; color: var(--t-3); padding: 2px 7px; border-radius: 5px; background: var(--surface-3); border: 1px solid var(--line); }

/* Replay-report chip in restored conversations */
.replay-report {
  display: inline-flex; align-items: center; gap: 6px; margin: 6px 0 0;
  padding: 6px 11px; border-radius: 8px; font-size: var(--fs-12); font-weight: 600;
  color: var(--t-2); background: var(--surface); border: 1px solid var(--line); transition: all var(--t-fast);
}
.replay-report:hover { border-color: var(--acc); color: var(--acc-ink); }
.replay-report svg { color: var(--acc); }
.replay-report .rr-go { color: var(--t-4); font-weight: 500; }

/* Scheduled reports */
.sched-section-label { font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--t-4); font-weight: 700; margin: 4px 2px 8px; }
.sched-item { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); margin-bottom: 8px; }
.sched-main { flex: 1; min-width: 0; }
.sched-name { font-size: var(--fs-13); font-weight: 600; color: var(--t-1); }
.sched-meta { font-size: var(--fs-11); color: var(--t-4); margin-top: 2px; }
.sched-run, .sched-del { width: 30px; height: 28px; border-radius: 7px; font-size: 12px; transition: all var(--t-fast); flex: none; }
.sched-run { color: var(--acc); background: var(--acc-soft); }
.sched-run:hover { background: color-mix(in srgb, var(--acc) 16%, var(--surface)); }
.sched-del { color: var(--t-4); }
.sched-del:hover { background: var(--red-soft); color: var(--red); }
.inbox-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); margin-bottom: 7px; transition: all var(--t-fast); }
.inbox-item:hover { border-color: var(--line-focus); box-shadow: var(--shadow-sm); }
.inbox-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.inbox-dot.ok { background: var(--green); } .inbox-dot.bad { background: var(--red); }
.inbox-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.inbox-name { font-size: var(--fs-13); font-weight: 600; color: var(--t-1); }
.inbox-meta { font-size: var(--fs-11); color: var(--t-4); }
.inbox-open { font-size: var(--fs-11); font-weight: 600; color: var(--t-4); flex: none; }
.inbox-item:hover .inbox-open { color: var(--acc); }

/* Mini modal (create schedule) */
.mini-modal { width: 380px; max-width: 92vw; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 20px; }
.mini-modal-title { font-family: 'Space Grotesk', sans-serif; font-size: var(--fs-15); font-weight: 700; color: var(--t-1); margin-bottom: 16px; }
.mini-field { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 13px; }
.mini-field > label { font-size: var(--fs-12); font-weight: 600; color: var(--t-2); flex: none; }
.mini-field input[type=time], .mini-field select { padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: 7px; font-size: var(--fs-13); background: var(--surface); }
.mini-field input[type=time]:focus, .mini-field select:focus { outline: none; border-color: var(--acc); }
.mini-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.mini-cancel { padding: 8px 14px; border-radius: 8px; font-size: var(--fs-13); font-weight: 600; color: var(--t-2); border: 1px solid var(--line-strong); }
.mini-cancel:hover { background: var(--surface-3); }
.mini-save { padding: 8px 16px; border-radius: 8px; font-size: var(--fs-13); font-weight: 700; color: #fff; background: var(--acc); }
.mini-save:hover { background: var(--acc-hover); }

/* Proactive insights on the role-home */
.rh-insights { margin: 4px 0 18px; }
.rh-ins-head { display: inline-flex; align-items: center; gap: 7px; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--t-3); margin-bottom: 9px; }
.rh-ins-head svg { color: #d97706; }
.rh-ins-list { display: grid; gap: 8px; }
.rh-ins {
  display: flex; align-items: center; gap: 12px; text-align: left; width: 100%;
  padding: 10px 13px; border-radius: 11px; background: var(--surface);
  border: 1px solid var(--line); border-left-width: 3px; transition: all var(--t-fast);
}
.rh-ins.att { border-left-color: #f59e0b; }
.rh-ins.info { border-left-color: var(--acc); }
.rh-ins:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.rh-ins-v { font-family: 'JetBrains Mono', monospace; font-size: var(--fs-16); font-weight: 700; color: var(--t-1); min-width: 58px; }
.rh-ins.att .rh-ins-v { color: #b45309; }
.rh-ins-b { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rh-ins-t { font-size: var(--fs-13); font-weight: 600; color: var(--t-1); }
.rh-ins-d { font-size: var(--fs-11); color: var(--t-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Role-aware home - greeting + tailored starter cards */
.empty-state.role-home { max-width: 520px; text-align: left; padding: 8px 8px 24px; }
.rh-greet { font-size: var(--fs-14); color: var(--t-2); margin-bottom: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rh-greet strong { color: var(--t-1); font-weight: 700; }
.rh-role {
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 2px 9px; border-radius: 999px;
  color: var(--acc-ink); background: var(--acc-soft);
  border: 1px solid color-mix(in srgb, var(--acc) 22%, var(--line));
}
.role-home .rh-h { font-family: 'Space Grotesk', sans-serif; font-size: var(--fs-18); font-weight: 700; letter-spacing: -0.01em; margin: 0 0 4px; color: var(--t-1); }
.role-home .rh-p { font-size: var(--fs-12); color: var(--t-3); margin: 0 0 16px; line-height: 1.5; }
.rh-cards { display: grid; gap: 9px; }
.rh-card {
  display: flex; align-items: center; gap: 12px; text-align: left; width: 100%;
  padding: 12px 14px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.rh-card:hover {
  border-color: color-mix(in srgb, var(--agent-c, var(--acc)) 45%, var(--line));
  box-shadow: var(--shadow-sm); transform: translateY(-1px);
}
.rh-card-icon {
  flex: none; width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center;
  color: var(--agent-c, var(--acc));
  background: color-mix(in srgb, var(--agent-c, var(--acc)) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--agent-c, var(--acc)) 22%, var(--line));
}
.rh-card-icon svg { width: 19px; height: 19px; }
.rh-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.rh-card-title { font-size: var(--fs-13); font-weight: 700; color: var(--t-1); display: inline-flex; align-items: center; gap: 6px; }
.rh-flag { color: #f59e0b; font-size: 11px; }
.rh-card-sub { font-size: var(--fs-12); color: var(--t-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rh-card-go { flex: none; color: var(--t-4); transition: color var(--t-fast), transform var(--t-fast); }
.rh-card:hover .rh-card-go { color: var(--agent-c, var(--acc)); transform: translateX(2px); }

/* Trust layer - provenance + disclosure + feedback */
.trust-bar { border-top: 1px solid var(--line); background: var(--surface-2); }
.trust-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 18px; font-size: var(--fs-11); color: var(--t-4); flex-wrap: wrap;
}
.trust-verified { display: inline-flex; align-items: center; gap: 6px; }
.trust-verified svg { color: var(--green); }
.report-sources strong, .trust-verified strong { color: color-mix(in srgb, var(--active-agent-c, var(--acc)) 65%, var(--t-2)); font-weight: 600; }
.trust-actions { display: inline-flex; align-items: center; gap: 8px; }
.trust-how {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-11); font-weight: 600; color: var(--t-3);
  padding: 3px 9px; border-radius: 6px; border: 1px solid var(--line);
  background: var(--surface); transition: all var(--t-fast);
}
.trust-how:hover { color: var(--acc); border-color: var(--line-focus); }
.trust-how[aria-expanded="true"] { color: var(--acc-ink); background: var(--acc-soft); border-color: color-mix(in srgb, var(--acc) 25%, var(--line)); }
.trust-fb { display: inline-flex; gap: 2px; padding: 2px; border-radius: 7px; background: var(--surface-3); border: 1px solid var(--line); }
.fb-btn {
  display: grid; place-items: center; width: 26px; height: 24px; border-radius: 5px;
  color: var(--t-4); transition: all var(--t-fast);
}
.fb-btn:hover { color: var(--t-1); background: var(--surface); }
.fb-btn[data-fb="up"][aria-pressed="true"] { color: #fff; background: var(--green); }
.fb-btn[data-fb="down"][aria-pressed="true"] { color: #fff; background: var(--red); }
.trust-detail { padding: 10px 18px 14px; border-top: 1px dashed var(--line); }
.td-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 22px; }
.td-item { display: flex; flex-direction: column; gap: 2px; }
.td-item.full { grid-column: 1 / -1; }
.td-k { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--t-4); font-weight: 700; }
.td-v { font-size: var(--fs-12); color: var(--t-2); }
.td-filters { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 1px; }
.td-chip {
  font-size: var(--fs-11); color: var(--t-2);
  padding: 2px 8px; border-radius: 6px; background: var(--surface-3); border: 1px solid var(--line);
}
.td-chip b { color: var(--t-3); font-weight: 700; }
.td-chip.muted { color: var(--t-4); }
.td-note { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: var(--fs-11); color: var(--t-4); }
.td-note svg { color: var(--green); }

/* Report Canvas - Output / Raw Data view toggle */
.report-viewbar { display: flex; justify-content: flex-end; padding: 9px 14px 0; }
.rv-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--surface-3); border: 1px solid var(--line); }
.rv-opt {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-12); font-weight: 600; color: var(--t-3);
  padding: 5px 11px; border-radius: 6px; transition: all var(--t-fast); white-space: nowrap;
}
.rv-opt svg { opacity: 0.8; }
.rv-opt:hover { color: var(--t-1); }
.rv-opt.on {
  color: var(--acc-ink); background: var(--surface);
  box-shadow: var(--shadow-sm);
  border: 1px solid color-mix(in srgb, var(--acc) 22%, var(--line));
}
.rv-opt.on svg { opacity: 1; color: var(--acc); }
.rv-count {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700;
  padding: 0 5px; border-radius: 9px; background: var(--surface-3); color: var(--t-3);
}
.rv-opt.on .rv-count { background: var(--acc-soft); color: var(--acc-ink); }

/* Flash a canvas card when jumped to from a preview */
.report-card.flash { animation: card-flash 1.2s var(--ease); }
@keyframes card-flash {
  0%, 100% { box-shadow: var(--shadow); }
  30% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--active-agent-c, var(--acc)) 45%, transparent), var(--shadow-lg); }
}

/* ── Track 1 - Inbox bell + badge ─────────────────────────────────── */
.inbox-bell-btn { position: relative; }
.inbox-badge {
  position: absolute; top: 2px; right: 2px;
  min-width: 16px; height: 16px;
  background: #ef4444; color: #fff;
  font-size: 10px; font-weight: 700;
  border-radius: 8px; padding: 0 3px;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; line-height: 1;
  border: 1.5px solid #fff;
}

/* ── Inbox slide-over panel ────────────────────────────────────────── */
.sheet-head-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.inbox-panel-count  { font-size: 12px; color: #2563eb; font-weight: 600; }

.inbox-item {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.12s;
}
.inbox-item:hover { background: #f8fafc; }
.inbox-item.inbox-read { opacity: 0.65; }

.inbox-item-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px;
}
.inbox-sev-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.sev-info     { background: #2563eb; }
.sev-warn     { background: #f59e0b; }
.sev-critical { background: #ef4444; }

.inbox-kind-badge {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  background: #eff6ff; color: #2563eb; border-radius: 3px;
  padding: 1px 5px; flex-shrink: 0;
}
.inbox-title { flex: 1; font-weight: 500; color: var(--text-main); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-age   { font-size: 11px; color: var(--text-dim); flex-shrink: 0; }

.inbox-body {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--border);
}
.inbox-section { margin-bottom: 12px; }
.inbox-section-title {
  font-size: 12px; font-weight: 600; color: var(--text-main);
  margin-bottom: 6px; display: flex; align-items: center; gap: 6px;
}
.inbox-row-count {
  font-size: 11px; font-weight: 400;
  background: #f1f5f9; color: #64748b;
  border-radius: 3px; padding: 1px 5px;
}
.inbox-no-rows { font-size: 12px; color: var(--text-dim); }

.inbox-table-wrap { overflow-x: auto; }
.inbox-table {
  width: 100%; border-collapse: collapse;
  font-size: 11.5px;
}
.inbox-table th {
  background: #f8fafc; text-align: left;
  padding: 4px 8px; font-weight: 600;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.inbox-table td {
  padding: 4px 8px;
  border-bottom: 1px solid #f1f5f9;
  max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.inbox-table tr:hover td { background: #f0f7ff; }
.inbox-empty-body { font-size: 12px; color: var(--text-dim); }
.inbox-raw { font-size: 10.5px; overflow-x: auto; white-space: pre-wrap; color: var(--text-dim); }

/* Make the sheet-head flex-wrap gracefully */
.sheet-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.sheet-head .sheet-title { flex: 1; display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--text-main); }
.sheet-head .sheet-close  { flex-shrink: 0; }

/* ============================================================================
   ULTRA-ENTERPRISE ADMIN REFINEMENT  (2026-06-23)  CSS-first flagship polish
   Keys off existing class names only. No new ids, no markup renames.
   Strict light, blue accent, hairline borders, no gradients on real surfaces,
   subtle tints only. Respects prefers-reduced-motion. No em or en dashes.
   ---------------------------------------------------------------------------
   Local constants for the admin sheet, layered on the global tokens so the
   whole suite reads with one calm rhythm.
   ============================================================================ */
.admin-sheet{
  --ar-radius:10px;
  --ar-radius-sm:7px;
  --ar-radius-lg:13px;
  --ar-pad-x:24px;
  --ar-shadow-card:0 1px 2px rgba(15,23,42,.04),0 1px 1px rgba(15,23,42,.03);
  --ar-row-h:140ms;
}

/* 1 . Frosted shell + premium chrome */
.admin-sheet{ border-color:var(--line); box-shadow:0 18px 50px rgba(15,23,42,.13),0 4px 14px rgba(15,23,42,.06); }
.admin-head{ padding:13px 18px; }
.ah-title{ letter-spacing:-0.01em; }
.ah-close{ transition:background var(--ar-row-h),color var(--ar-row-h); }

/* 2 . Left nav: refined active chip + spine, calm hover */
.admin-nav{ padding:12px 11px 18px; gap:5px; }
.ang-label{ padding:6px 13px 6px; color:var(--t-4); }
.ah-tab{ padding:8px 12px 8px 14px; border-radius:var(--ar-radius);
  transition:background var(--ar-row-h) var(--ease),color var(--ar-row-h) var(--ease); }
.ah-tab:hover{ background:var(--surface-3); }
.ah-tab:hover svg{ color:var(--t-2); }
.ah-tab.on{ background:var(--acc-soft); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc) 16%,transparent); }
.ah-tab.on::before{ left:0; top:6px; bottom:6px; width:3px; border-radius:0 3px 3px 0; background:var(--acc); }
.ah-tab:active{ transform:translateY(.5px); }

/* 3 . Unified pane header pattern (title + subtitle + right actions) */
.adp-head,
.access-pane .adp-head{
  display:grid; grid-template-columns:1fr auto; align-items:start;
  column-gap:16px; row-gap:6px;
  padding:20px var(--ar-pad-x) 15px;
  border-bottom:1px solid var(--line);
}
.adp-title{ grid-column:1; font-size:var(--fs-16); font-weight:700; margin:0; letter-spacing:-0.01em; }
.adp-sub{ grid-column:1; font-size:var(--fs-13); color:var(--t-3); line-height:1.5; margin:0; max-width:760px; }
.adp-head > .adp-add-btn,
.adp-head > .gov-refresh,
.adp-head > .adp-workload-row{ grid-column:2; grid-row:1 / span 2; align-self:start; margin:0; }
.adp-head > .ac-scoperow{ grid-column:1 / -1; margin-top:4px; }
/* The review-gate notice is a full-width banner, not a compact action: it sits
   below the title row, spanning both columns, as a calm rounded amber strip. */
.adp-head > .adp-review-gate-notice{
  grid-column:1 / -1; margin:4px 0 0; border-bottom:none;
  border:1px solid color-mix(in srgb,var(--amber) 22%,var(--line));
  border-radius:var(--ar-radius); padding:9px 12px;
}

/* Knowledge + Users heads share the same rhythm */
.kp-head{ padding:20px var(--ar-pad-x) 15px; border-bottom:1px solid var(--line); align-items:start; }
.kp-title{ letter-spacing:-0.01em; }
.kp-sub{ max-width:760px; }
.admin-users{ padding:20px var(--ar-pad-x) 0; }
.admin-users-head{ margin-bottom:14px; }
.auh-title{ letter-spacing:-0.01em; }
.agd-titlerow{ padding-top:2px; }
.agd-title{ letter-spacing:-0.01em; }

/* 4 . Cards: hairline borders, unified radius, calm resting shadow */
.ac-card,
.kp-card,
.agd-card{
  border:1px solid var(--line);
  border-radius:var(--ar-radius-lg);
  background:var(--surface);
  box-shadow:var(--ar-shadow-card);
}
.ac-card{ padding:16px 18px; }
.ac-card-title{ color:var(--t-1); font-size:var(--fs-14); font-weight:700; }
.ac-card-cap{ color:var(--t-3); }

/* 5 . List rows: gentle rhythm + micro-motion on hover */
.adp-row,
.adp-fb-row,
.at-row{ transition:background var(--ar-row-h) var(--ease); }
.adp-row{ padding:11px var(--ar-pad-x); }
.adp-row:hover,
.adp-fb-row:hover{ background:var(--surface-2); }
.at-row{ border-radius:var(--ar-radius); border-color:var(--line); box-shadow:var(--ar-shadow-card); }
.at-row:hover{ border-color:var(--line-strong); background:var(--surface-2); }

/* 6 . Buttons: one calm family across panes */
.adp-add-btn,
.atf-save,
.kp-btn.primary,
.gov-btn.primary,
.gov-btn,
.gov-refresh{ border-radius:var(--ar-radius-sm); }
.adp-add-btn,
.gov-btn,
.gov-refresh,
.kp-btn,
.atf-cancel,
.atf-test-btn,
.atf-save,
.ac-save{ transition:background var(--ar-row-h),border-color var(--ar-row-h),color var(--ar-row-h),box-shadow var(--ar-row-h); }
.adp-add-btn:active,
.gov-btn:active,
.kp-btn:active,
.atf-save:active,
.ac-save:active{ transform:translateY(.5px); }
.gov-btn,.gov-refresh{ font-weight:650; }

/* 7 . Chips + badges: tighter, uniform */
.adpr-badge,
.adpr-role,
.atr-on,.atr-off,
.ac-rule-type{ border-radius:5px; }

/* 8 . Form controls: one focus signature everywhere */
.adp-form-grid input,
.adp-form-grid select,
.atf-grid input,
.atf-grid select,
.ac-field input,
.ac-field select,
.kp-fl input,
.kp-fl textarea,
.kp-faqform select,
.gov-filters input,
.gov-filters select,
.admin-users-toolbar input,
.admin-users-toolbar select{
  border:1px solid var(--line-strong);
  border-radius:var(--ar-radius-sm);
  transition:border-color var(--ar-row-h),box-shadow var(--ar-row-h);
}
.adp-form-grid input:focus,
.adp-form-grid select:focus,
.atf-grid input:focus,
.atf-grid select:focus,
.ac-field input:focus,
.ac-field select:focus,
.kp-fl input:focus,
.kp-fl textarea:focus,
.kp-faqform select:focus,
.gov-filters input:focus,
.gov-filters select:focus,
.admin-users-toolbar input:focus,
.admin-users-toolbar select:focus{
  outline:none; border-color:var(--acc);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 16%,transparent);
}

/* 9 . Toggle switches: unify access-pane sliders + day chips to the blue token */
.ac-slider{ background:color-mix(in srgb,var(--t-4) 60%,var(--line)); }
.ac-switch input:checked + .ac-slider{ background:var(--acc); }
.ac-switch input:focus-visible + .ac-slider{ box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 25%,transparent); }
.ac-day input:checked + span{ background:var(--acc-soft); border-color:var(--acc); color:var(--acc-ink); }

/* 10 . Tables: calm header, hairline rows, hover */
.gov-table-wrap{ border-color:var(--line); border-radius:var(--ar-radius-lg); }
.gov-table thead th{ background:var(--surface-2); color:var(--t-3); }
.gov-table tbody tr{ transition:background var(--ar-row-h); }
.gov-table tbody tr:hover td{ background:var(--surface-2); }

/* 11 . Smooth, quick pane-switch entrance (active pane fades up) */
.admin-content > .admin-tenants:not([hidden]),
.admin-content > .admin-desk-pane:not([hidden]),
.admin-content > .access-pane:not([hidden]),
.admin-content > .knowledge-pane:not([hidden]),
.admin-content > .agent-dash:not([hidden]){
  animation:adp-pane-in 200ms var(--ease) both;
}
@keyframes adp-pane-in{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }

/* 12 . Polished loading state: two-tone pulse, no gradient. JS still writes
   the bare "Loading" label; we keep it as a muted caption and add a calm
   pulsing placeholder strip beneath it. */
.adp-loading{
  text-align:left; padding:18px var(--ar-pad-x); color:var(--t-4);
  font-size:var(--fs-12);
}
.adp-loading::after{
  content:""; display:block; margin-top:12px;
  height:54px; border-radius:var(--ar-radius);
  background:var(--surface-3);
  animation:adp-pulse 1.25s ease-in-out infinite;
}
.gov-table .adp-loading{ padding:16px 12px; }
.gov-table .adp-loading::after{ height:20px; margin-top:8px; }
@keyframes adp-pulse{
  0%,100%{ background:var(--surface-3); }
  50%{ background:color-mix(in srgb,var(--surface-3) 55%,var(--surface)); }
}

/* 13 . Clear empty + error states (one calm line) */
.adp-empty,
.at-empty,
.kp-empty,
.ac-rules-empty{
  text-align:center; color:var(--t-3); font-size:var(--fs-13);
  padding:30px 24px; line-height:1.55;
}

/* 14 . Reduced-motion: kill all admin micro-motion */
@media (prefers-reduced-motion: reduce){
  .admin-content > .admin-tenants:not([hidden]),
  .admin-content > .admin-desk-pane:not([hidden]),
  .admin-content > .access-pane:not([hidden]),
  .admin-content > .knowledge-pane:not([hidden]),
  .admin-content > .agent-dash:not([hidden]){ animation:none; }
  .adp-loading::after{ animation:none; }
  .ah-tab,.adp-row,.adp-fb-row,.at-row,.gov-table tbody tr,
  .adp-add-btn,.gov-btn,.kp-btn,.atf-save,.ac-save{ transition:none; }
  .ah-tab:active,.adp-add-btn:active,.gov-btn:active,
  .kp-btn:active,.atf-save:active,.ac-save:active{ transform:none; }
}