/* MCP Local UI — app.css
   Frontend/UX §5.1 (system font), §5.2 (14/12/18), §5.3 (6-token spacing),
   §5.7 [LOCKED] (tables), §6.2 (dense rows). Palette deviates from §5.4
   to match Carlos's funnel pages for visual continuity. Dark only. */

:root {
  --ff-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
  --ff-mono: ui-monospace, "SF Mono", Menlo, Consolas,
             "Liberation Mono", monospace;

  --fs-body:  14px;
  --fs-small: 12px;
  --fs-h:     18px;
  --lh-body:  1.45;
  --lh-table: 1.3;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px;
  --sp-4: 16px; --sp-6: 24px; --sp-8: 32px;

  --r-1: 4px;
  --r-2: 6px;
  /* Carlos's funnel palette — dark only */
  --c-bg:         #0d0b16;
  --c-bg-elev:    #15121f;
  --c-bg-row:     #1f1a2e;
  --c-text:       #e8e6f0;
  --c-text-muted: #8b7c8c;
  --c-border:     #2a2536;

  --c-magenta:    #c84b9e;  /* primary accent: links, header underline */
  --c-purple:     #8b7fc8;  /* secondary accent: focus rings, breadcrumbs */
  --c-gold:       #d4a843;  /* highlight: count badge, notable values */

  --header-h: 56px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text);
  background: var(--c-bg);
  min-height: 100%;
}

a {
  color: var(--c-magenta);
  text-decoration: none;
}
a:hover { text-decoration: underline; }
a:focus-visible {
  outline: 2px solid var(--c-purple);
  outline-offset: 2px;
}

code {
  font-family: var(--ff-mono);
  font-size: var(--fs-small);
  background: var(--c-bg-elev);
  padding: 1px 6px;
  border-radius: var(--r-1);
  border: 1px solid var(--c-border);
}

.muted {
  color: var(--c-text-muted);
  font-size: var(--fs-small);
}

/* ── Header ──────────────────────────────────────────────── */
.app-header {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0 var(--sp-4);
  background: var(--c-bg-elev);
  border-bottom: 2px solid var(--c-magenta);
}
.app-header strong {
  font-size: var(--fs-h);
  letter-spacing: 0.02em;
}
.app-header .spacer { flex: 1; }
.app-header .count-badge {
  font-size: var(--fs-small);
  color: var(--c-gold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.app-header .muted a { color: var(--c-purple); }
.app-header .navform { margin: 0; display: inline; }
.app-header .navform button {
  background: transparent; color: var(--c-purple); border: 1px solid var(--c-border);
  padding: 3px 10px; font-size: var(--fs-small);
}
.app-header .navform button:hover { background: var(--c-bg-row); filter: none; }

/* ── Action buttons (links styled as buttons) ────────────── */
.toolbar { margin: 0 0 var(--sp-3); }
.btn-primary, .btn-secondary {
  display: inline-block; text-decoration: none; border-radius: 4px;
  font-size: var(--fs-body); font-weight: 600;
}
.btn-primary { background: var(--c-magenta); color: #fff; padding: 6px 14px; }
.btn-primary:hover { filter: brightness(1.1); }
.btn-secondary {
  background: transparent; color: var(--c-purple); border: 1px solid var(--c-border);
  padding: 3px 10px; font-size: var(--fs-small); margin-left: var(--sp-2);
}
.btn-secondary:hover { background: var(--c-bg-row); }

/* ── Main ────────────────────────────────────────────────── */
main {
  padding: var(--sp-6) var(--sp-4);
  max-width: 1100px;
  margin: 0 auto;
}
h1 {
  font-size: var(--fs-h);
  margin: 0 0 var(--sp-4);
  font-weight: 600;
}

/* ── Tables (Frontend/UX §5.7) ───────────────────────────── */
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body);
  background: var(--c-bg-elev);
  border: 1px solid var(--c-border);
  border-radius: var(--r-2);
  overflow: hidden;
}
table.data th {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--c-border);
  line-height: var(--lh-table);
  text-align: left;
  font-weight: 600;
  color: var(--c-text-muted);
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
table.data th.num,
table.data td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Cells get zero padding so the inner <a> can fill the whole
   cell — this is how the row stays clickable without JS. */
table.data tbody td {
  padding: 0;
  border-bottom: 1px solid var(--c-border);
  line-height: var(--lh-table);
  vertical-align: top;
}
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr { transition: background 0.1s ease; }
table.data tbody tr:hover { background: var(--c-bg-row); }

table.data tbody td > a {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  color: inherit;
  text-decoration: none;
}
table.data tbody td > a:hover { text-decoration: none; }
table.data tbody tr:hover td > a .name { color: var(--c-magenta); }

table.data .name {
  display: block;
  font-weight: 500;
  color: var(--c-text);
}
table.data .slug {
  display: block;
  font-family: var(--ff-mono);
  font-size: var(--fs-small);
  color: var(--c-text-muted);
  margin-top: 2px;
}
table.data time {
  display: block;
  font-variant-numeric: tabular-nums;
  color: var(--c-text);
}
table.data .empty {
  padding: var(--sp-8);
  text-align: center;
  color: var(--c-text-muted);
}

/* ── Client detail layout ────────────────────────────────── */
section { margin-top: var(--sp-6); }
main h2 {
  font-size: var(--fs-body);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-text-muted);
  font-weight: 600;
  margin: 0 0 var(--sp-3);
}
main h2 .muted { text-transform: none; letter-spacing: 0; }

.info-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  margin: var(--sp-4) 0 var(--sp-2);
  padding: var(--sp-4);
  background: var(--c-bg-elev);
  border: 1px solid var(--c-border);
  border-radius: var(--r-2);
}
.info-cell .info-label {
  font-size: var(--fs-small);
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--sp-1);
}
.info-cell .info-value { font-size: var(--fs-body); color: var(--c-text); white-space: pre-wrap; }
.folder-line { margin: var(--sp-2) 0 var(--sp-6); font-size: var(--fs-small); }
.folder-line code { font-size: var(--fs-small); }

.doc-section { margin-top: var(--sp-4); }
.doc-section h3 {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--c-text);
  margin: 0 0 var(--sp-2);
}
.doc-section table.data { font-size: var(--fs-small); }
.doc-section table.data tbody td > a { padding: var(--sp-2) var(--sp-3); }
.doc-section table.data th { padding: var(--sp-2) var(--sp-3); }

.badge {
  display: inline-block;
  font-size: var(--fs-small);
  padding: 1px var(--sp-2);
  border-radius: var(--r-1);
  border: 1px solid var(--c-magenta);
  color: var(--c-magenta);
  white-space: nowrap;
  background: transparent;
}
.badge--gold { border-color: var(--c-gold); color: var(--c-gold); }

.placeholder-section {
  border: 1px dashed var(--c-border);
  border-radius: var(--r-2);
  padding: var(--sp-4);
  color: var(--c-text-muted);
}
.placeholder-section h2 { color: var(--c-text-muted); margin-bottom: var(--sp-2); }
.placeholder-section p { margin: 0; }

.event-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--r-2);
  background: var(--c-bg-elev);
}
.event-list li {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--c-border);
  align-items: baseline;
}
.event-list li:last-child { border-bottom: 0; }
.event-list time {
  font-variant-numeric: tabular-nums;
  color: var(--c-text-muted);
  font-size: var(--fs-small);
  white-space: nowrap;
  flex-shrink: 0;
}
.event-list .event-desc { color: var(--c-text); font-size: var(--fs-small); }
.back-link { margin-top: var(--sp-6); }

/* ── Footer ──────────────────────────────────────────────── */
.app-footer {
  margin-top: var(--sp-8);
  padding: var(--sp-4);
  text-align: center;
  font-size: var(--fs-small);
  color: var(--c-text-muted);
  border-top: 1px solid var(--c-border);
}
.app-footer code {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--c-text-muted);
}

/* ── Mobile (Tailscale-via-phone fallback) ───────────────── */
@media (max-width: 600px) {
  main { padding: var(--sp-3); }
  .app-header { padding: 0 var(--sp-3); }
  table.data th { padding: var(--sp-2) var(--sp-3); }
  table.data tbody td > a { padding: var(--sp-2) var(--sp-3); }
}

/* ── Phase B cockpit: account detail trees + forms ───────── */
.tree-card {
  border: 1px solid var(--c-border);
  background: var(--c-bg-elev);
  border-radius: 8px;
  padding: var(--sp-3);
  margin: var(--sp-3) 0;
}
.tree-card.archived { opacity: 0.6; }
.tree-head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.tree-head h3 { margin: 0; margin-right: auto; }
.tree-forms { margin-top: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); }
.tree-form {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2); border: 1px dashed var(--c-border); border-radius: 6px;
}
.tree-form strong { min-width: 8rem; }
.tree-form.inline-form { border-style: solid; }
.tree-timeline { margin-top: var(--sp-2); }
.tree-timeline summary { cursor: pointer; color: var(--c-text-muted); }
.stack { display: flex; flex-direction: column; gap: var(--sp-2); max-width: 32rem; }
.add-form summary { cursor: pointer; color: var(--c-magenta); margin: var(--sp-2) 0; }
.bureau-picks { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
label.inline { display: inline-flex; align-items: center; gap: 4px; color: var(--c-text); }
input, select, textarea {
  background: var(--c-bg-row); color: var(--c-text);
  border: 1px solid var(--c-border); border-radius: 4px; padding: 4px 6px;
  font-family: inherit; font-size: var(--fs-body);
}
button {
  background: var(--c-magenta); color: #fff; border: 0; border-radius: 4px;
  padding: 6px 12px; cursor: pointer; font-size: var(--fs-body);
}
button:hover { filter: brightness(1.1); }
.badge.round { background: var(--c-purple); color: #fff; }
.badge.lc { background: var(--c-gold); color: #1a1320; }
.badge.overdue { background: #b3361f; color: #fff; }
.badge.due-soon { background: var(--c-gold); color: #1a1320; }
.draft-link { color: var(--c-gold); font-size: var(--fs-small); white-space: nowrap; }
.caveat { border-left: 3px solid var(--c-gold); background: rgba(212,168,67,0.08); padding: var(--sp-2) var(--sp-3); margin: var(--sp-2) 0; font-size: var(--fs-small); }
.exhibits { border: 1px solid var(--c-border); border-radius: 6px; padding: var(--sp-2); }
.exhibit-row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin: 2px 0; }
.exhibit-row .pages { width: 12rem; }
.plans { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin: var(--sp-3) 0; }
.plan-card { border: 1px solid var(--c-border); background: var(--c-bg-elev); border-radius: 8px; padding: var(--sp-3); min-width: 10rem; text-align: center; }
.plan-card h3 { margin: 0 0 var(--sp-2); }
.stack label { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-small); color: var(--c-text-muted); }
.stack label input, .stack label select, .stack label textarea { color: var(--c-text); font-size: var(--fs-body); }