/* Design system shared with the AI Firewall customer portal
   (ai-firewall/ui-portal/src/index.css + lib/ui.tsx) — same token names
   and values, same component vocabulary, hand-written here since this
   app has no Tailwind/build step. Deliberately NOT the ai-firewall
   *operator* console's dark/dense tokens (ui/) — this is the paying
   customer's own portal, light-first and spacious, same as ui-portal. */

:root {
  --color-surface: #ffffff;
  --color-surface-alt: #f8fafc;
  --color-panel: #ffffff;
  --color-edge: #e2e8f0;
  --color-ink: #0f172a;
  --color-ink-dim: #64748b;
  --color-accent: #2563eb;
  --color-accent-ink: #ffffff;
  --color-ok: #059669;
  --color-warn: #d97706;
  --color-bad: #dc2626;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --text-sm: 0.8125rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-surface: #0b1220;
    --color-surface-alt: #0f172a;
    --color-panel: #111a2c;
    --color-edge: #1e2a40;
    --color-ink: #e2e8f0;
    --color-ink-dim: #8fa0b8;
    --color-accent: #60a5fa;
    --color-accent-ink: #0b1220;
    --color-ok: #34d399;
    --color-warn: #fbbf24;
    --color-bad: #f87171;
  }
}

* {
  box-sizing: border-box;
}

body {
  color-scheme: light dark;
  background-color: var(--color-surface-alt);
  color: var(--color-ink);
  font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  margin: 0;
}

.mono {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

a {
  color: var(--color-accent);
}

/* ----- page shell (mirrors ui-portal/src/App.tsx's PortalShell) ----- */

.topbar {
  border-bottom: 1px solid var(--color-edge);
  background-color: var(--color-panel);
}

.topbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 1.5rem;
}

.brand {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-ink);
}

.brand .accent {
  color: var(--color-accent);
}

.content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

.content h1 {
  font-size: 1.5rem;
  margin: 0 0 1.5rem;
}

.content > * + * {
  margin-top: 1.5rem;
}

/* ----- row (generic inline flex group — e.g. several per-row action
   buttons in a table cell) ----- */

.row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ----- subnav (per-page "signed in as / sign out" rows) ----- */

.subnav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--color-ink-dim);
  margin-bottom: 1.5rem;
}

.subnav .sep {
  color: var(--color-edge);
}

.subnav a,
.subnav .btn-ghost {
  font-size: 0.85rem;
}

/* ----- panel (mirrors lib/ui.tsx's Panel) ----- */

.panel {
  border: 1px solid var(--color-edge);
  background-color: var(--color-panel);
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-edge);
  padding: 1rem 1.25rem;
}

.panel-header h2 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-ink);
}

.panel-body {
  padding: 1.25rem;
}

.panel-body > * + * {
  margin-top: 1rem;
}

.panel h3 {
  font-size: 0.9rem;
  margin: 0 0 0.25rem;
}

/* ----- badge (mirrors lib/ui.tsx's Badge) ----- */

.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.125rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
}

.badge-ok {
  background-color: color-mix(in srgb, var(--color-ok) 10%, transparent);
  color: var(--color-ok);
}

.badge-warn {
  background-color: color-mix(in srgb, var(--color-warn) 10%, transparent);
  color: var(--color-warn);
}

.badge-bad {
  background-color: color-mix(in srgb, var(--color-bad) 10%, transparent);
  color: var(--color-bad);
}

.badge-dim {
  background-color: var(--color-edge);
  color: var(--color-ink-dim);
}

.badge-accent {
  background-color: color-mix(in srgb, var(--color-accent) 10%, transparent);
  color: var(--color-accent);
}

/* ----- buttons (mirrors lib/ui.tsx's Button) ----- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  transition: opacity 0.15s, background-color 0.15s, color 0.15s;
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.btn-primary {
  background-color: var(--color-accent);
  color: var(--color-accent-ink);
}

.btn-primary:hover:not(:disabled) {
  opacity: 0.9;
}

.btn-secondary {
  background-color: transparent;
  border-color: var(--color-edge);
  color: var(--color-ink);
}

.btn-secondary:hover:not(:disabled) {
  background-color: var(--color-surface-alt);
}

.btn-ghost {
  background: none;
  border: none;
  padding: 0.25rem 0.5rem;
  color: var(--color-ink-dim);
  text-decoration: underline;
}

.btn-ghost:hover:not(:disabled) {
  color: var(--color-ink);
}

.btn-danger {
  background-color: var(--color-bad);
  color: #ffffff;
}

.btn-danger:hover:not(:disabled) {
  opacity: 0.9;
}

/* ----- forms (mirrors lib/ui.tsx's Input) ----- */

form {
  margin: 0;
}

.field {
  margin-bottom: 0.75rem;
}

.field:last-of-type {
  margin-bottom: 0;
}

label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-ink);
}

input[type='text'],
input[type='email'],
input[type='number'],
select {
  width: 100%;
  max-width: 360px;
  border: 1px solid var(--color-edge);
  border-radius: 0.5rem;
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  color: var(--color-ink);
  background-color: var(--color-surface);
}

input[type='text']:focus,
input[type='email']:focus,
input[type='number']:focus,
select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 40%, transparent);
}

/* ----- table (mirrors lib/ui.tsx's Table) ----- */

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.table th {
  text-align: left;
  border-bottom: 1px solid var(--color-edge);
  padding: 0.5rem 1rem 0.5rem 0;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-ink-dim);
}

.table td {
  padding: 0.5rem 1rem 0.5rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-edge) 60%, transparent);
}

.table tr:last-child td {
  border-bottom: none;
}

/* ----- notices / errors (mirror lib/ui.tsx's Warnings / ErrorNote) ----- */

.notice {
  border: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent);
  background-color: color-mix(in srgb, var(--color-accent) 10%, transparent);
  color: var(--color-ink);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
}

.error-box {
  border: 1px solid color-mix(in srgb, var(--color-bad) 40%, transparent);
  background-color: color-mix(in srgb, var(--color-bad) 10%, transparent);
  color: var(--color-bad);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
}

/* ----- code block (mirrors lib/ui.tsx's CodeBlock) ----- */

.code-block {
  overflow-x: auto;
  border: 1px solid var(--color-edge);
  background-color: var(--color-surface-alt);
  border-radius: 0.5rem;
  padding: 1rem;
  font-size: 0.875rem;
  word-break: break-all;
  white-space: pre-wrap;
}

/* ----- identity-provider setup (dashboard "Custom identity provider") ----- */
.copy-row { display: flex; gap: 8px; align-items: center; }
.copy-row input { flex: 1; }
.idp-pane { margin: 0 0 16px; }
.idp-pane ol { margin: 8px 0 16px; padding-left: 20px; }
.idp-pane li { margin-bottom: 6px; }
[hidden] { display: none !important; }

/* ----- Drive picker (Connectors "Add a source") ----- */
.picker-results { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.picker-results .btn { width: 100%; text-align: left; }

.site-list { max-height: 24rem; overflow-y: auto; }
.site-list label { margin: 0; font-weight: 500; }


/* ----- dense layout: stats, tabs, compact tables, inline forms ----- */
.content > * + * { margin-top: 1rem; }
.content h1 { margin-bottom: 1rem; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); }
.stat {
  display: flex; flex-direction: column; gap: var(--space-1);
  border: 1px solid var(--color-edge); background-color: var(--color-panel);
  border-radius: 0.75rem; padding: var(--space-3) var(--space-4);
}
.stat-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-ink-dim); }
.stat-value { font-size: 1.125rem; font-weight: 600; }

.tabs { display: flex; flex-wrap: wrap; gap: var(--space-1); border-bottom: 1px solid var(--color-edge); }
.tabs a {
  padding: var(--space-2) var(--space-4); font-size: 0.875rem; font-weight: 500; text-decoration: none;
  color: var(--color-ink-dim); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs a:hover { color: var(--color-ink); }
.tabs a.active { color: var(--color-accent); border-bottom-color: var(--color-accent); }

.table-compact th, .table-compact td { padding: 0.375rem 0.75rem 0.375rem 0; font-size: var(--text-sm); }
.table-compact th { position: sticky; top: 0; background-color: var(--color-panel); }
.table-compact .num { text-align: right; font-variant-numeric: tabular-nums; }
.kv th { width: 12rem; text-transform: none; letter-spacing: 0; font-size: var(--text-sm); }
.cell-actions { text-align: right; white-space: nowrap; }
.cell-actions form, .cell-actions .row { display: inline-flex; }
.cell-actions .row { gap: var(--space-2); }
.btn-sm { padding: 0.25rem 0.625rem; font-size: 0.8125rem; }

.hint { font-size: var(--text-sm); color: var(--color-ink-dim); }
.toolbar { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4); }
.toolbar h3 { margin: 0; }

.form-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
.form-row .field { margin-bottom: 0; }
.add-form > summary { list-style: none; cursor: pointer; display: inline-flex; }
.add-form > summary::-webkit-details-marker { display: none; }
.add-form[open] > summary { margin-bottom: var(--space-3); }
.context-block { padding-top: var(--space-3); border-top: 1px solid var(--color-edge); }
.context-block:first-child { padding-top: 0; border-top: none; }
.context-block > * + * { margin-top: var(--space-3); }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--space-4); align-items: start; }
.sources td { vertical-align: top; }
.sources .detail-row td { padding-top: 0; }
.sources .detail-row:not(:last-child) td { border-bottom: 1px solid var(--color-edge); }
.sources > tbody > tr:not(.detail-row) > td { border-bottom: none; }
.reasons { margin: 0 0 var(--space-2); padding-left: 1.1rem; font-size: var(--text-sm); color: var(--color-ink-dim); }
.detail-row details { margin-top: var(--space-1); font-size: var(--text-sm); }
.detail-row summary { cursor: pointer; color: var(--color-ink-dim); }