/* ===== ZURU design tokens (from zuru-ai-adoption-logging / zuru_design_system) ===== */
:root {
  --zuru-red:#D6001C; --zuru-red-press:#B80018; --zuru-red-tint:#F8E0E3;
  --zuru-black:#000000; --zuru-white:#FFFFFF;
  --grey-900:#0A0A0A; --grey-800:#1C1C1C; --grey-700:#3A3A3A;
  --grey-500:#8F8F8F; --grey-300:#D9D9D9; --grey-200:#E8E8E8;
  --grey-100:#F4F4F4; --grey-050:#FAFAFA;
  --fg-1:#000000; --fg-2:#3A3A3A; --fg-3:#8F8F8F; --fg-on-red:#FFFFFF;
  --bg-1:#FFFFFF; --bg-2:#FAFAFA; --bg-3:#F4F4F4;
  --border-hairline:rgba(0,0,0,.14); --border-strong:rgba(0,0,0,.55);
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-pill:999px;
  --font:"Haas Grot Disp","Helvetica Neue",Helvetica,Arial,sans-serif;
  --t-h2:24px; --t-h3:18px; --t-body:14px; --t-small:13px; --t-micro:11px;
  --shadow-card:0 2px 6px rgba(0,0,0,.08);
  --shadow-pop:0 12px 40px rgba(0,0,0,.18);
  --ease:cubic-bezier(.22,.61,.36,1);
  --sidebar-w:288px;
}
* { box-sizing:border-box; }
html,body { margin:0; height:100%; }
body {
  font-family:var(--font); font-size:var(--t-body); color:var(--fg-1);
  background:var(--bg-3); -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; }
::-webkit-scrollbar { width:11px; height:11px; }
::-webkit-scrollbar-thumb { background:var(--grey-300); border-radius:99px; border:3px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover { background:var(--grey-500); }

/* ===== App shell ===== */
.app { display:grid; grid-template-columns:var(--sidebar-w) 1fr; height:100vh; overflow:hidden; }

/* ===== Sidebar ===== */
.side { background:var(--bg-1); border-right:1px solid var(--border-hairline); display:flex; flex-direction:column; min-height:0; }
.brand { display:flex; align-items:center; gap:10px; padding:16px 18px; border-bottom:1px solid var(--border-hairline); }
.brand__mark { width:26px; height:26px; border-radius:6px; background:var(--zuru-red); display:grid; place-items:center; color:#fff; font-weight:700; font-size:15px; flex:0 0 auto; }
.brand__txt { display:flex; flex-direction:column; line-height:1.1; }
.brand__txt b { font-size:14px; letter-spacing:.01em; }
.brand__txt span { font-size:var(--t-micro); color:var(--fg-3); text-transform:uppercase; letter-spacing:.14em; }
.side__search { padding:12px 14px; border-bottom:1px solid var(--border-hairline); }
.side__list { overflow-y:auto; flex:1; padding:8px 8px 24px; min-height:0; }
.grp__head { font-size:var(--t-micro); text-transform:uppercase; letter-spacing:.14em; color:var(--fg-3); padding:14px 10px 6px; }
.tlink { display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:var(--r-sm); color:var(--fg-2); position:relative; }
.tlink:hover { background:var(--grey-050); color:var(--fg-1); }
.tlink.active { background:var(--zuru-red-tint); color:var(--zuru-red); font-weight:500; }
.tlink.active::before { content:""; position:absolute; left:0; top:6px; bottom:6px; width:3px; border-radius:99px; background:var(--zuru-red); }
.tlink__name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--t-body); }
.tlink__count { font-size:var(--t-micro); color:var(--fg-3); font-weight:500; }
.tlink.active .tlink__count { color:var(--zuru-red); }

/* ===== Main ===== */
.main { display:flex; flex-direction:column; min-width:0; min-height:0; background:var(--bg-3); }
.chrome { height:56px; flex:0 0 auto; background:var(--bg-1); border-bottom:1px solid var(--border-hairline);
  display:flex; align-items:center; gap:14px; padding:0 20px; }
.crumb { display:flex; align-items:center; gap:8px; font-size:var(--t-small); color:var(--fg-3); }
.crumb a:hover { color:var(--zuru-red); }
.chrome__spacer { flex:1; }
.btn { height:34px; padding:0 14px; border-radius:var(--r-sm); border:1px solid var(--border-hairline);
  background:var(--bg-1); color:var(--fg-1); font-size:var(--t-small); font-weight:500; display:inline-flex; align-items:center; gap:7px; }
.btn:hover { border-color:var(--border-strong); }
.btn--red { background:var(--zuru-red); color:#fff; border-color:transparent; }
.btn--red:hover { background:var(--zuru-red-press); }

.toolbar { flex:0 0 auto; padding:18px 24px 12px; display:flex; align-items:flex-end; gap:16px; }
.toolbar__title { display:flex; flex-direction:column; gap:3px; min-width:0; }
.toolbar__title h1 { margin:0; font-size:var(--t-h2); font-weight:500; letter-spacing:-.01em; }
.toolbar__title p { margin:0; font-size:var(--t-small); color:var(--fg-3); max-width:720px; }
.toolbar__controls { margin-left:auto; display:flex; align-items:center; gap:10px; }
.countpill { display:inline-flex; align-items:center; height:24px; padding:0 11px; border-radius:var(--r-pill);
  background:var(--grey-100); color:var(--fg-2); font-size:var(--t-micro); font-weight:600; letter-spacing:.02em; }

.field { position:relative; }
.input {
  height:34px; border:1px solid var(--border-hairline); border-radius:var(--r-sm); background:var(--bg-1);
  padding:0 12px 0 32px; font-size:var(--t-small); color:var(--fg-1); width:240px; outline:none;
}
.input:focus { border-color:var(--zuru-red); box-shadow:0 0 0 3px var(--zuru-red-tint); }
.field svg { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--fg-3); }
.select { height:34px; border:1px solid var(--border-hairline); border-radius:var(--r-sm); background:var(--bg-1);
  padding:0 10px; font-size:var(--t-small); color:var(--fg-1); }

/* ===== Grid ===== */
.gridwrap { flex:1; margin:6px 16px 16px; background:var(--bg-1); border:1px solid var(--border-hairline);
  border-radius:var(--r-md); box-shadow:var(--shadow-card); overflow:auto; min-height:0; }
table.grid { border-collapse:separate; border-spacing:0; width:100%; font-size:var(--t-small); }
.grid thead th { position:sticky; top:0; z-index:3; background:var(--grey-050); color:var(--fg-3);
  font-weight:600; font-size:var(--t-micro); text-transform:uppercase; letter-spacing:.06em; text-align:left;
  padding:10px 12px; white-space:nowrap; border-bottom:1px solid var(--border-hairline); cursor:pointer; user-select:none; }
.grid thead th:hover { color:var(--fg-1); }
.grid thead th .arrow { color:var(--zuru-red); margin-left:4px; }
.grid thead th.idxcol, .grid tbody td.idxcol { width:52px; text-align:right; color:var(--fg-3); font-variant-numeric:tabular-nums;
  position:sticky; left:0; z-index:2; background:var(--bg-1); }
.grid thead th.idxcol { z-index:4; background:var(--grey-050); }
.grid tbody td { padding:9px 12px; border-bottom:1px solid var(--grey-100); white-space:nowrap; max-width:340px;
  overflow:hidden; text-overflow:ellipsis; position:relative; }
.grid tbody tr:hover td { background:var(--grey-050); }
.grid tbody tr:hover td.idxcol { background:var(--grey-100); }
.grid tbody td.num { text-align:right; font-variant-numeric:tabular-nums; }
.grid td .pk { font-weight:600; }
.cell-null { color:var(--grey-300); }

/* row "open full record" button (shown on hover, over the row number) */
.idxcol { position:sticky; }
.rowexpand { position:absolute; inset:0; margin:auto; width:24px; height:24px; border:1px solid var(--border-hairline);
  border-radius:var(--r-sm); background:var(--bg-1); display:none; place-items:center; color:var(--fg-2); padding:0; }
.rowexpand:hover { border-color:var(--zuru-red); color:var(--zuru-red); }
.grid tbody tr:hover .rowexpand { display:grid; }
.grid tbody tr:hover .rownum { visibility:hidden; }
.cell-pk { cursor:pointer; }
.cell-pk:hover .pk { text-decoration:underline; text-decoration-color:var(--zuru-red); text-underline-offset:2px; }

/* editable cells + in-place editor */
.grid tbody td.editable { cursor:text; }
.grid tbody td.editable:hover { box-shadow:inset 0 0 0 1px var(--border-hairline); }
.cell-edit { opacity:0; border:none; background:transparent; color:var(--fg-3); padding:0 2px; margin-left:6px;
  vertical-align:middle; line-height:0; }
.grid tbody td:hover .cell-edit { opacity:.55; }
.cell-edit:hover { opacity:1; color:var(--zuru-red); }
/* the editor floats over the cell's hidden "ghost" content, so nothing reflows on edit */
.cell-ed { position:absolute; left:0; top:50%; transform:translateY(-50%); width:100%; box-sizing:border-box; margin:0;
  border:1px solid var(--zuru-red); border-radius:var(--r-sm); background:var(--bg-1);
  padding:5px 8px; font:inherit; font-size:var(--t-small); color:var(--fg-1); outline:none;
  box-shadow:0 0 0 2px var(--zuru-red-tint); z-index:6; }
select.cell-ed { padding:4px 6px; }
.cell-ghost { visibility:hidden; pointer-events:none; }
td.editing { overflow:visible; z-index:5; }
td.saving { opacity:.55; }
@keyframes cellflash { from { background:var(--zuru-red-tint); } to { background:transparent; } }
td.flash { animation:cellflash .7s var(--ease); }
.stub-dot { display:inline-block; width:6px; height:6px; border-radius:99px; background:var(--grey-300); margin-right:6px; vertical-align:middle; }
tr.is-stub td.idxcol { color:var(--grey-300); }
.expand { opacity:0; color:var(--fg-3); }
.grid tbody tr:hover .expand { opacity:1; }
.grid tbody tr.clickable { cursor:pointer; }

/* FK link chips */
.fk { display:inline-flex; align-items:center; gap:5px; max-width:100%; color:var(--zuru-red); font-weight:500;
  background:var(--zuru-red-tint); padding:2px 9px; border-radius:var(--r-pill); }
.fk:hover { background:#f6cdd2; }
.fk svg { flex:0 0 auto; opacity:.7; }
.fk__txt { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* badges for select-ish values */
.tag { display:inline-block; padding:2px 9px; border-radius:var(--r-pill); background:var(--grey-100); color:var(--fg-2); font-size:var(--t-micro); font-weight:500; }
.tag--active { background:#E7F6EC; color:#067647; }
.tag--assigned { background:var(--zuru-red-tint); color:var(--zuru-red); }
.tag--toys { background:#EAF1FF; color:#2457c5; }

/* ===== Pagination ===== */
.pager { flex:0 0 auto; display:flex; align-items:center; gap:14px; padding:10px 24px 16px; color:var(--fg-3); font-size:var(--t-small); }
.pager .btn { height:30px; padding:0 11px; }
.pager__spacer { flex:1; }

/* ===== Record drawer ===== */
.scrim { position:fixed; inset:0; background:rgba(0,0,0,.32); opacity:0; pointer-events:none; transition:opacity .18s var(--ease); z-index:40; }
.scrim.open { opacity:1; pointer-events:auto; }
.drawer { position:fixed; top:0; right:0; bottom:0; width:560px; max-width:94vw; background:var(--bg-1);
  box-shadow:var(--shadow-pop); transform:translateX(100%); transition:transform .22s var(--ease); z-index:50;
  display:flex; flex-direction:column; }
.drawer.open { transform:none; }
.drawer__head { padding:18px 22px; border-bottom:1px solid var(--border-hairline); display:flex; align-items:flex-start; gap:12px; }
.drawer__eyebrow { font-size:var(--t-micro); text-transform:uppercase; letter-spacing:.14em; color:var(--fg-3); }
.drawer__title { font-size:var(--t-h3); font-weight:600; margin-top:3px; word-break:break-all; }
.drawer__close { margin-left:auto; width:32px; height:32px; border-radius:var(--r-sm); border:1px solid var(--border-hairline);
  background:var(--bg-1); display:grid; place-items:center; color:var(--fg-2); flex:0 0 auto; }
.drawer__close:hover { border-color:var(--border-strong); }
.drawer__body { overflow-y:auto; padding:8px 22px 32px; }
.sect__head { font-size:var(--t-micro); text-transform:uppercase; letter-spacing:.12em; color:var(--fg-3);
  margin:22px 0 8px; display:flex; align-items:center; gap:8px; }
.sect__head .line { flex:1; height:1px; background:var(--border-hairline); }
.frow { display:grid; grid-template-columns:200px 1fr; gap:12px; padding:8px 0; border-bottom:1px solid var(--grey-100); align-items:start; }
.frow:last-child { border-bottom:0; }
.frow__k { color:var(--fg-3); font-size:var(--t-small); }
.frow__k small { display:block; color:var(--grey-300); font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.frow__v { font-size:var(--t-small); word-break:break-word; }
.frow__v.num { font-variant-numeric:tabular-nums; }
.child { display:flex; align-items:center; gap:12px; padding:11px 12px; border:1px solid var(--border-hairline);
  border-radius:var(--r-sm); margin-bottom:8px; }
.child:hover { border-color:var(--zuru-red); background:var(--zuru-red-tint); }
.child__label { font-weight:500; }
.child__via { color:var(--fg-3); font-size:var(--t-micro); }
.child__count { margin-left:auto; display:inline-flex; align-items:center; height:22px; padding:0 10px; border-radius:var(--r-pill);
  background:var(--zuru-red); color:#fff; font-size:var(--t-micro); font-weight:600; }
.child__chev { color:var(--fg-3); }

/* ===== Relationships overlay ===== */
.erd { position:fixed; inset:0; background:rgba(255,255,255,.98); z-index:60; display:none; flex-direction:column; }
.erd.open { display:flex; }
.erd__head { height:56px; flex:0 0 auto; display:flex; align-items:center; gap:14px; padding:0 22px; border-bottom:1px solid var(--border-hairline); }
.erd__head h2 { font-size:var(--t-h3); font-weight:600; margin:0; }
.erd__body { flex:1; overflow:auto; padding:24px; }
.erd__body .mermaid { display:flex; justify-content:center; }

.empty { padding:60px; text-align:center; color:var(--fg-3); }
.loading { padding:40px; text-align:center; color:var(--fg-3); }

/* ===== Editing ===== */
.ed { width:100%; border:1px solid var(--border-hairline); border-radius:var(--r-sm); background:var(--bg-1);
  padding:7px 9px; font:inherit; font-size:var(--t-small); color:var(--fg-1); outline:none; }
.ed:focus { border-color:var(--zuru-red); box-shadow:0 0 0 3px var(--zuru-red-tint); }
textarea.ed { min-height:60px; resize:vertical; line-height:1.45; }
.frow__v.num .ed { text-align:left; }
.frow__v .locked { color:var(--fg-2); display:inline-flex; align-items:baseline; gap:8px; }
.frow__v .locked small { color:var(--grey-300); font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.drawer__foot { position:sticky; bottom:0; background:var(--bg-1); border-top:1px solid var(--border-hairline);
  padding:12px 22px; display:flex; align-items:center; gap:10px; }
.drawer__foot .spacer { flex:1; }
.drawer__foot .msg { font-size:var(--t-small); text-align:right; }
.drawer__foot .msg.err { color:var(--zuru-red); }
.drawer__foot .msg.ok { color:#067647; }
.btn--ghostred { background:var(--bg-1); color:var(--zuru-red); border-color:var(--zuru-red-tint); }
.btn--ghostred:hover { background:var(--zuru-red-tint); border-color:var(--zuru-red); }

/* toasts */
.toasts { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:80;
  display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; }
.toast { background:var(--grey-900); color:#fff; padding:10px 18px; border-radius:var(--r-pill);
  font-size:var(--t-small); font-weight:500; box-shadow:var(--shadow-pop);
  opacity:0; transform:translateY(10px); transition:opacity .2s var(--ease), transform .2s var(--ease); }
.toast.show { opacity:1; transform:none; }
.toast.ok { background:#067647; }
.toast.err { background:var(--zuru-red); }

/* ===== Sign-in screen (hosted SSO) ===== */
.signin { position:fixed; inset:0; z-index:100; background:var(--bg-2); display:grid; place-items:center; }
.signin__card { background:var(--bg-1); border:1px solid var(--border-hairline); border-radius:var(--r-lg);
  padding:40px 44px; max-width:380px; text-align:center; box-shadow:var(--shadow-card); }
.signin__card .brand__mark { width:42px; height:42px; font-size:21px; border-radius:11px; margin:0 auto 14px; }
.signin__card h1 { font-size:var(--t-h3); font-weight:600; margin:0 0 6px; }
.signin__card p { color:var(--fg-3); margin:0 0 22px; font-size:var(--t-small); }
.signin__card .btn { width:100%; justify-content:center; height:40px; }
.signin__note { display:block; margin-top:14px; color:var(--grey-500); font-size:var(--t-micro); }

/* signed-in user chip in the top chrome */
.userchip { display:flex; align-items:center; gap:8px; font-size:var(--t-small); color:var(--fg-3); }
.userchip b { color:var(--fg-2); font-weight:500; }
.userchip a { color:var(--zuru-red); }
.userchip a:hover { text-decoration:underline; }