/* Shared theme for the KG Dashboard mockup and its reference-table pages.
   Kept minimal — only tokens + primitives that every mockup page needs.
   Dashboard-specific styles stay inline in index.html. */

:root{
  --bg:#0d1017;--surface:#151a24;--surface-2:#1d2331;--surface-3:#262f42;
  --border:#252d3f;--border-strong:#31394f;
  --ink:#e6ecff;--ink-2:#c5cde0;--muted:#8892a8;--faint:#5b657d;
  --accent:#6ea8ff;--accent-2:#9cc0ff;--brand-soft:#1a2542;
  --ok:#59d99f;--ok-soft:#0f2e22;
  --warn:#ffb84a;--warn-soft:#2f2413;
  --danger:#ff6a6a;--danger-soft:#2c1618;
  --purple:#b39cff;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font:14px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',Inter,sans-serif}
.wrap{max-width:1440px;margin:0 auto;padding:24px 32px}

/* Back-link strip at the top of a reference page. Mirrors the visual weight
   of the dashboard's kicker so pages feel like a continuation, not a jump. */
.back-strip{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 0 18px;margin:0 0 18px;border-bottom:1px solid var(--border);
}
.back-link{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:600;color:var(--accent);
  text-decoration:none;padding:6px 10px;border-radius:6px;
  background:var(--surface);border:1px solid var(--border);
  transition:background .12s,border-color .12s;
}
.back-link:hover{background:var(--brand-soft);border-color:var(--accent)}
.back-link-arr{font-size:14px;line-height:1}
.crumb{font-size:11px;color:var(--faint);font-family:'IBM Plex Mono',monospace}
.crumb b{color:var(--muted);font-weight:600}

/* Page header. Title + count sit on one line; kicker sits above. */
.page-kicker{font-size:10.5px;color:var(--muted);text-transform:uppercase;
  letter-spacing:.08em;font-weight:700;margin-bottom:6px}
.page-title{font-size:24px;margin:0;letter-spacing:-.01em;font-weight:700;
  display:flex;align-items:baseline;gap:12px}
.page-title .count{
  font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:600;
  color:var(--muted);letter-spacing:0;
}
.page-sub{color:var(--muted);font-size:13px;margin:6px 0 22px;max-width:820px;line-height:1.55}

/* Filter row — copy of .modal-filters so pages stay visually aligned with
   the dashboard's modal filters, minus the modal frame. */
.filters{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:0 0 14px;
}
.filters .lab{
  font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:700;
}
.filters select,.filters input[type=search]{
  background:var(--surface-2);border:1px solid var(--border);color:var(--ink);
  padding:6px 10px;border-radius:7px;font-size:12.5px;font-family:inherit;
}
.filters input[type=search]{min-width:260px}
.filters .spacer{flex:1}
.filters .summary{font-size:11px;color:var(--faint);font-family:'IBM Plex Mono',monospace}

/* Data table — identical rules to .rev-table in the dashboard. */
.ref-table{width:100%;border-collapse:collapse;font-size:12.5px;
  background:var(--surface);border:1px solid var(--border);border-radius:10px;
  overflow:hidden;
}
.ref-table th{
  text-align:left;font-size:10.5px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.06em;font-weight:700;
  padding:10px 14px;border-bottom:1px solid var(--border);
  background:var(--surface-2);
}
.ref-table th.num{text-align:right}
.ref-table td{
  padding:12px 14px;border-bottom:1px solid var(--border);color:var(--ink-2);
  vertical-align:top;line-height:1.5;
}
.ref-table td.num{font-family:'IBM Plex Mono',monospace;text-align:right;
  color:var(--ink);font-weight:700;
}
.ref-table tr:last-child td{border-bottom:0}
.ref-table tr:hover td{background:rgba(110,168,255,0.03)}

/* Pagination footer. Prev / page indicator / Next. Right-aligned page-size
   selector so users can bump the per-page count without hunting for it. */
.pager{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:16px 4px 4px;
}
.pager-info{
  font-size:11.5px;color:var(--faint);
  font-family:'IBM Plex Mono',monospace;
}
.pager-nav{display:flex;align-items:center;gap:6px;margin-left:auto}
.pager-btn{
  background:var(--surface);border:1px solid var(--border);color:var(--ink);
  padding:6px 12px;border-radius:6px;font-size:12px;font-weight:600;
  cursor:pointer;font-family:inherit;
  transition:background .12s,border-color .12s,color .12s;
}
.pager-btn:hover:not(:disabled){background:var(--brand-soft);border-color:var(--accent);color:var(--accent)}
.pager-btn:disabled{opacity:.35;cursor:not-allowed}
.pager-page{
  font-size:11.5px;color:var(--muted);
  font-family:'IBM Plex Mono',monospace;padding:0 8px;
}
.pager-page b{color:var(--ink);font-weight:700}
.pager-size{
  display:flex;align-items:center;gap:8px;
  font-size:10.5px;color:var(--muted);text-transform:uppercase;
  letter-spacing:.06em;font-weight:700;
}
.pager-size select{
  background:var(--surface-2);border:1px solid var(--border);color:var(--ink);
  padding:4px 8px;border-radius:6px;font-size:12px;font-family:inherit;
}

/* Empty-state note that sits below the table when a filter zeros out rows. */
.no-rows{
  text-align:center;padding:32px 20px;color:var(--muted);font-size:12.5px;
  background:var(--surface);border:1px dashed var(--border);border-radius:10px;
}