/* Event Admin Workbench — tenant-neutral baseline theme.
   Every color/spacing knob is a custom property so a tenant token bridge
   (packages/ui/scripts/generate-token-bridge.mjs) can restyle without code edits. */

:root {
  --color-bg: #f6f7f8;
  --color-surface: #ffffff;
  --color-surface-alt: #eef1f3;
  --color-border: #d7dce1;
  --color-text: #1b2430;
  --color-text-muted: #5a6675;
  --color-accent: #0f766e;
  --color-accent-contrast: #ffffff;
  --color-danger: #b42318;
  --color-warn: #92400e;
  --color-ok: #14532d;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --radius-card: 12px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 3px rgba(15, 23, 42, 0.12);
  --tap-target: 44px;
  --queue-max-width: 60rem;
  --motion-fast: 120ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #10151b;
    --color-surface: #1a212a;
    --color-surface-alt: #232c37;
    --color-border: #33404d;
    --color-text: #e7ecf1;
    --color-text-muted: #9aa7b4;
    --color-accent: #2dd4bf;
    --color-accent-contrast: #06302c;
    --color-danger: #f87171;
    --color-warn: #fbbf24;
    --color-ok: #4ade80;
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.5);
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap;
}

.app { max-width: var(--queue-max-width); margin: 0 auto; padding: 0 var(--space-4) var(--space-6); }

.app-header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4) 0 var(--space-3);
  flex-wrap: wrap;
}
.app-header-title h1 { margin: 0; font-size: 1.15rem; }
.app-tagline { margin: 0; color: var(--color-text-muted); font-size: 0.8rem; }
.app-header-status { display: flex; align-items: center; gap: var(--space-2); }

.status-pill {
  display: inline-flex; align-items: center; gap: var(--space-1);
  border-radius: var(--radius-pill);
  padding: 0.3rem 0.7rem; font-size: 0.75rem; font-weight: 600;
  background: var(--color-surface-alt); color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}
.status-pill[data-state="online"] { color: var(--color-ok); }
.status-pill[data-state="offline"], .status-pill[data-state="error"] { color: var(--color-danger); }
.status-pill[data-state="limited"] { color: var(--color-warn); }

.btn {
  font: inherit; cursor: pointer; border-radius: var(--radius-card);
  border: 1px solid var(--color-border);
  min-height: var(--tap-target); min-width: var(--tap-target);
  padding: 0.5rem 0.9rem;
  background: var(--color-surface); color: var(--color-text);
  transition: background var(--motion-fast) ease;
}
.btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.btn-primary { background: var(--color-accent); color: var(--color-accent-contrast); border-color: transparent; }
.btn-ghost { background: transparent; }
.btn-danger { color: var(--color-danger); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.notice-area { display: grid; gap: var(--space-2); }
.notice {
  border: 1px solid var(--color-border); border-left: 4px solid var(--color-warn);
  background: var(--color-surface); border-radius: var(--radius-card);
  padding: var(--space-2) var(--space-3); font-size: 0.85rem;
}
.notice[data-kind="error"] { border-left-color: var(--color-danger); }
.notice[data-kind="ok"] { border-left-color: var(--color-ok); }

.view-tabs { display: flex; gap: var(--space-2); margin: var(--space-3) 0; }
.view-tab {
  font: inherit; cursor: pointer;
  min-height: var(--tap-target);
  padding: 0.4rem 0.9rem; border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--color-surface); color: var(--color-text-muted);
}
.view-tab[aria-selected="true"] {
  background: var(--color-accent); color: var(--color-accent-contrast); border-color: transparent;
}
.tab-count {
  display: inline-block; min-width: 1.4em; text-align: center;
  border-radius: var(--radius-pill); padding: 0 0.35em; margin-left: var(--space-1);
  background: rgba(0, 0, 0, 0.15); font-size: 0.75rem;
}

.state-panel {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  padding: var(--space-6) var(--space-4); text-align: center;
}
.state-panel h2 { margin: 0 0 var(--space-2); font-size: 1rem; }
.state-panel p { margin: 0 0 var(--space-3); color: var(--color-text-muted); font-size: 0.9rem; }
.state-hint { color: var(--color-text-muted); font-size: 0.85rem; }
.skeleton-row {
  height: 3.5rem; border-radius: var(--radius-card);
  background: linear-gradient(90deg, var(--color-surface-alt), var(--color-bg), var(--color-surface-alt));
  background-size: 200% 100%; animation: shimmer 1.2s linear infinite;
  margin-bottom: var(--space-2);
}
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton-row { animation: none; } }

.queue-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
/* author display rules above would otherwise beat the UA [hidden] rule */
[hidden] { display: none !important; }
.queue-item {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
}
.queue-item-button {
  display: block; width: 100%; text-align: left; font: inherit; color: inherit;
  background: none; border: 0; cursor: pointer;
  padding: var(--space-3) var(--space-4); min-height: var(--tap-target);
  border-radius: var(--radius-card);
}
.queue-item-button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.queue-item-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.queue-item-title { margin: 0; font-size: 0.95rem; font-weight: 600; }
.queue-item-meta { margin: var(--space-1) 0 0; color: var(--color-text-muted); font-size: 0.8rem; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
.queue-item-flags { margin: var(--space-1) 0 0; font-size: 0.75rem; color: var(--color-warn); }

.pill {
  display: inline-block; border-radius: var(--radius-pill); padding: 0.15rem 0.6rem;
  font-size: 0.72rem; font-weight: 600; text-transform: capitalize;
  background: var(--color-surface-alt); border: 1px solid var(--color-border); color: var(--color-text-muted);
  white-space: nowrap;
}
.pill[data-status="approved"], .pill[data-status="published"] { color: var(--color-ok); }
.pill[data-status="rejected"], .pill[data-status="duplicate"] { color: var(--color-danger); }
.pill[data-status="needs_review"], .pill[data-status="missing_fields"], .pill[data-status="changes_requested"], .pill[data-status="posting_pending"] { color: var(--color-warn); }

.app-footer { padding-top: var(--space-4); }
.footer-note { color: var(--color-text-muted); font-size: 0.75rem; margin: 0; }

.detail-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 30;
  width: min(28rem, 100vw);
  background: var(--color-surface); border-left: 1px solid var(--color-border);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.25);
  overflow-y: auto; padding: var(--space-4);
}
.drawer-scrim { position: fixed; inset: 0; z-index: 20; background: rgba(0, 0, 0, 0.35); border: 0; }
.detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); }
.detail-head h2 { margin: 0; font-size: 1.05rem; }
.detail-sub { margin: var(--space-1) 0 0; color: var(--color-text-muted); font-size: 0.8rem; }
.detail-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0; }
.detail-feedback { min-height: 1.2rem; font-size: 0.85rem; margin-bottom: var(--space-2); }
.detail-feedback[data-kind="ok"] { color: var(--color-ok); }
.detail-feedback[data-kind="error"] { color: var(--color-danger); }

.detail-fields { display: grid; gap: var(--space-3); }
.field-group { border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: var(--space-3); }
.field-group h3 { margin: 0 0 var(--space-2); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); }
.field-row { display: grid; grid-template-columns: minmax(7rem, 40%) 1fr; gap: var(--space-2); padding: var(--space-1) 0; font-size: 0.85rem; }
.field-row dt { color: var(--color-text-muted); margin: 0; }
.field-row dd { margin: 0; overflow-wrap: anywhere; }
.field-row dd a { color: var(--color-accent); }

.detail-activity { margin-top: var(--space-4); }
.detail-activity h3 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); margin: 0 0 var(--space-2); }
.detail-activity ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.detail-activity li { font-size: 0.8rem; color: var(--color-text-muted); }

.auth-dialog, .note-dialog {
  border: 1px solid var(--color-border); border-radius: var(--radius-card);
  background: var(--color-surface); color: var(--color-text);
  width: min(24rem, calc(100vw - 2rem)); padding: var(--space-4);
}
.auth-dialog::backdrop, .note-dialog::backdrop { background: rgba(0, 0, 0, 0.4); }
.auth-dialog h2, .note-dialog h2 { margin-top: 0; font-size: 1rem; }
.auth-dialog p { font-size: 0.85rem; color: var(--color-text-muted); }
.auth-dialog input, .note-dialog textarea {
  width: 100%; font: inherit; margin: var(--space-2) 0;
  border: 1px solid var(--color-border); border-radius: 8px;
  background: var(--color-bg); color: var(--color-text);
  padding: 0.6rem; min-height: var(--tap-target);
}
.auth-dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); }

@media (max-width: 640px) {
  .app { padding: 0 var(--space-3) var(--space-4); }
  .detail-drawer { width: 100vw; border-left: 0; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
}

/* ---- sources + support panels (P-1; features.sources / features.support) ---- */
.row-actions {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  padding: 0 var(--space-4) var(--space-3);
}
.filter-row {
  display: flex; align-items: center; gap: var(--space-2);
  margin-bottom: var(--space-3); font-size: 0.9rem;
}
.filter-row select {
  min-height: var(--tap-target); border: 1px solid var(--color-border);
  border-radius: 8px; background: var(--color-surface); color: inherit;
  padding: 0 var(--space-3); font: inherit;
}
.filter-row select:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.pill[data-status="active"], .pill[data-status="resolved"] { color: var(--color-ok); }
.pill[data-status="disabled"], .pill[data-status="broken"], .pill[data-status="blocked_by_platform"], .pill[data-status="spam_or_abuse"] { color: var(--color-danger); }
.pill[data-status="manual_only"], .pill[data-status="new"], .pill[data-status="needs_operator"], .pill[data-status="reopened"], .pill[data-status="waiting_user"] { color: var(--color-warn); }
.msg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.msg { border: 1px solid var(--color-border); border-radius: 8px; padding: var(--space-2) var(--space-3); }
.msg[data-role="operator"] { border-inline-start: 3px solid var(--color-accent); }
.msg[data-role="internal"] { border-inline-start: 3px solid var(--color-warn); background: var(--color-surface); }
.msg-who { font-size: 0.75rem; color: var(--color-text-muted); margin: 0 0 0.2rem; }
.msg p { margin: 0; overflow-wrap: anywhere; }