/* ─── Reset & base ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:          #f8f9fa; --surface:    #ffffff; --border:   #dee2e6;
  --text:        #212529; --muted:      #6c757d;
  --primary:     #0d6efd; --primary-dk: #0b5ed7;
  --danger:      #dc3545; --warning:    #ffc107; --success:  #198754;
  --admin-bg:    #f0f4ff; --admin-bd:   #c7d7fc;
  --r-sm: 4px; --r-md: 8px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,.10);
  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Cascadia Code", "Fira Mono", monospace;
  --hh: 48px;
}

html { font-family: var(--sans); font-size: 16px; line-height: 1.5; color: var(--text); background: var(--bg); }
body { min-height: 100dvh; display: flex; flex-direction: column; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ─── Header ─────────────────────────────────────────────────────── */
header[role="banner"] {
  background: var(--surface); border-bottom: 1px solid var(--border);
  padding: 0 1rem; height: var(--hh); position: sticky; top: 0; z-index: 30;
  box-shadow: var(--shadow-sm);
}
.header-inner { height: 100%; display: flex; align-items: center; gap: .6rem; }
.header-spacer { flex: 1; }
.tenant-name  { font-weight: 700; font-size: 1rem; }
.header-badge { font-size: .75rem; background: #fff3cd; color: #7a5900; border: 1px solid var(--warning); border-radius: 999px; padding: .2em .65em; font-weight: 600; }
.role-badge   { font-size: .7rem; border-radius: 999px; padding: .2em .6em; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.role-badge--owner  { background: #fff3cd; color: #7a5900;  border: 1px solid var(--warning); }
.role-badge--member { background: #e7f1ff; color: #0b5ed7;  border: 1px solid var(--primary); }
.access-status { font-size: .72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.btn-sign-out  { font-size: .75rem; padding: .2rem .6rem; color: var(--muted); border-color: var(--border); border-radius: var(--r-sm); flex-shrink: 0; }
.btn-sign-out:hover:not(:disabled) { background: #fff0f0; color: var(--danger); border-color: #f5c2c7; }

/* ─── Layout ─────────────────────────────────────────────────────── */
.app-layout { flex: 1; display: flex; overflow: hidden; height: calc(100dvh - var(--hh) - 40px); }
main[role="main"] { flex: 1; min-width: 0; overflow-y: auto; padding: 1.25rem 1.5rem; }
footer[role="contentinfo"] { background: var(--surface); border-top: 1px solid var(--border); padding: .6rem 1rem; flex-shrink: 0; }
.footer-inner { font-size: .8rem; color: var(--muted); }

/* ─── Token / role-error panels ──────────────────────────────────── */
.token-panel, .role-error-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow-md); padding: 2rem 1.5rem; max-width: 440px; margin: 3rem auto; width: 100%;
}
.token-panel h2, .role-error-panel h2 { font-size: 1.125rem; margin-bottom: .5rem; }
.token-panel p,  .role-error-panel p  { color: var(--muted); font-size: .875rem; margin-bottom: 1.25rem; }
.token-panel label { display: block; font-size: .875rem; font-weight: 500; margin-bottom: .35rem; }
.token-panel input[type="password"] {
  width: 100%; padding: .5rem .75rem; border: 1px solid var(--border); border-radius: var(--r-sm);
  font-size: .9rem; font-family: var(--mono); margin-bottom: 1rem; background: var(--bg); color: var(--text);
}
.token-panel input[type="password"]:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px rgba(13,110,253,.15); }

/* ─── Explorer panel ─────────────────────────────────────────────── */
.explorer-panel { display: flex; flex-direction: column; gap: 1rem; }
.explorer-header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.explorer-title  { font-size: 1.25rem; font-weight: 600; }

/* ─── Filter form ────────────────────────────────────────────────── */
.filter-form {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: .75rem;
}
.filter-row   { display: flex; gap: .75rem; flex-wrap: wrap; align-items: flex-end; }
.filter-field { display: flex; flex-direction: column; gap: .2rem; min-width: 140px; flex: 1; }
.filter-field--grow   { flex: 2; }
.filter-field--narrow { flex: 0 0 90px; min-width: 70px; }
.filter-label { font-size: .75rem; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.filter-input, .filter-select {
  padding: .4rem .6rem; border: 1px solid var(--border); border-radius: var(--r-sm);
  font-size: .875rem; font-family: var(--sans); background: var(--bg); color: var(--text); width: 100%;
}
.filter-input:focus, .filter-select:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 2px rgba(13,110,253,.12); }
.filter-actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

/* ─── Status / error ─────────────────────────────────────────────── */
.status-bar { font-size: .8125rem; min-height: 1.25rem; color: var(--muted); }
.status-bar.error   { color: var(--danger); font-weight: 500; }
.status-bar.loading { color: var(--primary); }
.error-banner { background: #fff5f5; border: 1px solid #f5c2c7; border-radius: var(--r-md); padding: .75rem 1rem; color: var(--danger); font-size: .875rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.error-banner[hidden] { display: none; }
.empty-state  { color: var(--muted); font-size: .9rem; text-align: center; padding: 2.5rem 1rem; }

/* ─── Table ──────────────────────────────────────────────────────── */
.table-wrap   { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.events-table { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.events-table[hidden] { display: none; }
.events-table thead { background: var(--admin-bg); border-bottom: 2px solid var(--admin-bd); }
.events-table th { text-align: left; padding: .55rem .75rem; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); white-space: nowrap; }
.events-table td { padding: .5rem .75rem; vertical-align: top; border-bottom: 1px solid var(--border); }
.events-table tbody tr:last-child td { border-bottom: none; }
.events-table tbody tr:hover { background: #f8faff; }
.col-ts       { white-space: nowrap; min-width: 140px; }
.col-type     { white-space: nowrap; }
.col-session, .col-employee { font-family: var(--mono); font-size: .75rem; white-space: nowrap; }
.col-content  { font-family: var(--mono); font-size: .73rem; color: var(--muted); max-width: 300px; word-break: break-all; cursor: help; }
.col-tags     { font-size: .75rem; color: var(--muted); white-space: nowrap; }

/* ─── Event-type pills ───────────────────────────────────────────── */
.event-type-pill { display: inline-block; padding: .15em .55em; border-radius: 999px; font-size: .7rem; font-weight: 600; white-space: nowrap; background: #e7f1ff; color: var(--primary); border: 1px solid var(--admin-bd); }
.event-type-pill--knowledge-retrieved { background: #e6f4ea; color: #1a7340; border-color: #b7dfc4; }
.event-type-pill--assistant-response  { background: #d1e7dd; color: #0f5132; border-color: #a3cfbb; }
.event-type-pill--action-proposed,
.event-type-pill--approval-requested  { background: #fff3cd; color: #7a5900; border-color: var(--warning); }
.event-type-pill--action-approved     { background: #cfe2ff; color: #084298; border-color: #9ec5fe; }
.event-type-pill--action-executed     { background: #d1e7dd; color: #0f5132; border-color: #a3cfbb; }
.event-type-pill--connector-called    { background: #f0d9ff; color: #6f42c1; border-color: #d0a8ff; }
.event-type-pill--agent-handoff       { background: #f8d7da; color: #842029; border-color: #f1aeb5; }

/* ─── Load more ──────────────────────────────────────────────────── */
.load-more-row { display: flex; justify-content: center; padding: .75rem 0; }
.load-more-row[hidden] { display: none; }

/* ─── Buttons ────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; border: none; border-radius: var(--r-sm); font-family: var(--sans); font-size: .9rem; font-weight: 500; cursor: pointer; padding: .55rem 1.1rem; transition: background .15s; white-space: nowrap; }
.btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--primary-dk); }
.btn-ghost { background: transparent; color: var(--muted); border: 1px solid var(--border); }
.btn-ghost:hover:not(:disabled) { background: var(--bg); color: var(--text); }
.btn-sm { font-size: .8125rem; padding: .3rem .75rem; }

/* ─── Spinner ────────────────────────────────────────────────────── */
.spinner { display: inline-block; width: .9em; height: .9em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .6s linear infinite; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Mobile ≤700px ──────────────────────────────────────────────── */
@media (max-width: 700px) {
  main[role="main"] { padding: 1rem .75rem; }
  .filter-row { flex-direction: column; gap: .5rem; }
  .filter-field, .filter-field--grow, .filter-field--narrow { flex: 1 1 100%; min-width: 0; }
  .col-session, .col-tags { display: none; }
  .col-content { max-width: 180px; }
}