/* ============================================================================
   Just Konnectz list look for every desktop table (user, 2026-11-07: "all tables in this format",
   from Just Konnectz v2 resources/css/app.css — .ui-table / .ui-filters / .ui-pill / .ui-pager).
   Restyles the shared grid (public/js/grid.js), so every page that uses createGrid() — TOD and the
   Order Worksheet included — follows it. Loaded after impal.css. Also provides .ui-btn / .ui-pill /
   .ui-pagebar / .ui-seg for page bars.
   ========================================================================== */
:root{
  --ui-bg:#f3f5f8; --ui-card:#ffffff; --ui-side:#e7ebf1;
  --ui-row-alt:#fafbfc; --ui-row-hover:color-mix(in srgb, var(--blue, #2563eb) 6%, white);
  --ui-line:#e2e7ee; --ui-line-soft:#edf0f4;
  --ui-ink:#0f172a; --ui-ink-2:#334155; --ui-muted:#566275; --ui-label:#5f6b7e;
  --ui-accent:var(--blue, #2563eb); --ui-fill:var(--blue-600, #1d4ed8); --ui-on-accent:#fff;
  --ui-link:color-mix(in srgb, var(--ui-accent) 85%, black);
  --ui-ok:#166534; --ui-warn:#92400e; --ui-bad:#b91c1c; --ui-info:#1d4ed8;
  --ui-accent-pale:color-mix(in srgb, var(--ui-accent) 10%, var(--ui-card));
  --ui-ok-bg:color-mix(in srgb, var(--ui-ok) 13%, var(--ui-card));
  --ui-warn-bg:color-mix(in srgb, var(--ui-warn) 14%, var(--ui-card));
  --ui-bad-bg:color-mix(in srgb, var(--ui-bad) 12%, var(--ui-card));
  --ui-info-bg:color-mix(in srgb, var(--ui-info) 12%, var(--ui-card));
}

/* ── The grid sits on the page: no box around the list ── */
.grid-card{background:transparent;border:0;border-radius:0;box-shadow:none}
.grid-toolbar{background:transparent;border:0;padding:12px 18px 10px;gap:6px;flex-wrap:wrap;min-height:30px}
/* Full-width list pages: the first / last column line up with the toolbar's 18px edge. */
table.grid thead th:first-child,table.grid tbody td:first-child{padding-left:18px}
table.grid thead th:last-child,table.grid tbody td:last-child{padding-right:18px}
.grid-search{flex:0 1 300px;min-width:240px;max-width:340px}
.grid-search input{height:30px;padding:4px 8px 4px 28px;font-size:12px;border:1px solid var(--ui-line);border-radius:6px;
  background:var(--ui-card);color:var(--ui-ink);box-shadow:none}
.grid-search input:focus{outline:2px solid color-mix(in srgb, var(--ui-accent) 25%, transparent);border-color:var(--ui-accent);box-shadow:none}
.grid-search.on input{border-color:var(--ui-accent);background:var(--ui-accent-pale)}
.grid-search .gs-ic{left:8px;top:7px;color:var(--ui-muted)}
.grid-search .gs-ic svg{width:13px;height:13px}

/* filter buttons read like the Konnectz selects: "Every branch ▾", tinted once a value is picked */
.dd-btn{height:30px;padding:0 9px;gap:6px;font-size:12px;font-weight:500;border:1px solid var(--ui-line);border-radius:6px;
  background:var(--ui-card);color:var(--ui-ink)}
.dd-btn:hover{border-color:color-mix(in srgb, var(--ui-accent) 40%, var(--ui-line))}
.dd-btn.on{border-color:var(--ui-accent);background:var(--ui-accent-pale);font-weight:600}
.dd-btn .dd-lbl{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-btn .caret{font-size:8px;color:var(--ui-ink-2)}
.dd-btn .cnt{background:var(--ui-fill);font-size:10px;padding:0 6px}
.dd-menu{border-color:var(--ui-line);border-radius:8px;box-shadow:0 10px 30px rgb(0 0 0 / .13);font-size:12.5px}

/* ── Table ── */
table.grid{font-size:12.5px;font-variant-numeric:tabular-nums;line-height:1.3}
table.grid thead th{background:var(--ui-bg);color:var(--ui-label);font-size:10.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:.4px;padding:9px 10px;border-bottom:1px solid var(--ui-line);white-space:nowrap}
table.grid thead th.sortable:hover{color:var(--ui-link)}
table.grid tbody td{padding:9px 10px;border-bottom:1px solid var(--ui-line-soft);color:var(--ui-ink);vertical-align:middle;font-size:12.5px}
table.grid tbody tr:nth-child(even){background:var(--ui-row-alt)}
table.grid tbody tr:hover{background:var(--ui-row-hover)}
table.grid tbody td.key{font-weight:600;color:var(--ui-link)}
table.grid tbody td.key b{font-weight:600}
table.grid tbody td .link{color:var(--ui-link);font-weight:600}
table.grid tbody td .sub,table.grid tbody td .tod-sub{display:block;color:var(--ui-ink-2);font-size:11.5px;font-weight:400;margin-top:2px}
.grid-empty{color:var(--ui-muted);padding:26px}

/* ── Pager: footer strip, pages left, "Showing 1–22 of 1,458 · 22 rows/screen" right ── */
.grid-foot{background:var(--ui-side);border-top:1px solid var(--ui-line);padding:0 18px;min-height:46px;gap:6px;font-size:12px}
.grid-foot .pager{margin-left:0;gap:6px}
.grid-foot .rec{margin-left:auto;color:var(--ui-muted);white-space:nowrap}
.grid-foot .rec b{color:var(--ui-ink-2);font-weight:600}
.pager button{min-width:0;height:auto;padding:3px 9px;line-height:1.6;border-radius:6px;border:1px solid var(--ui-line);
  background:var(--ui-card);color:var(--ui-ink-2);font-size:12px;font-weight:500}
.pager button:hover:not(:disabled){background:var(--ui-row-hover);border-color:var(--ui-line);color:var(--ui-ink-2)}
.pager button.active{background:var(--ui-fill);border-color:var(--ui-fill);color:var(--ui-on-accent);font-weight:600}
.pager button:disabled{color:var(--ui-muted);opacity:.6}

/* ── Pills (Konnectz: dot + tint). The TOD / Worksheet status pills take the same look. ── */
.ui-pill,.tod-pill{display:inline-flex;align-items:center;gap:5px;border-radius:20px;padding:2px 9px;font-size:11px;font-weight:600;white-space:nowrap}
.ui-pill::before,.tod-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.ui-pill.ok,.tod-pill.ok{background:var(--ui-ok-bg);color:var(--ui-ok)}
.ui-pill.bad,.tod-pill.bad{background:var(--ui-bad-bg);color:var(--ui-bad)}
.ui-pill.warn,.tod-pill.warn{background:var(--ui-warn-bg);color:var(--ui-warn)}
.ui-pill.info{background:var(--ui-info-bg);color:var(--ui-info)}
.ui-pill.plain,.tod-pill.muted{background:var(--ui-line-soft);color:var(--ui-ink-2)}

/* ── Page bar & controls ── */
.ui-pagebar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:10px;min-height:30px}
.ui-grow{flex:1;min-width:0}
.ui-pagebar select,.ui-pagebar input:not([type=file]):not([type=checkbox]){height:30px;padding:4px 8px;font:inherit;font-size:12px;
  border:1px solid var(--ui-line);border-radius:6px;background-color:var(--ui-card);color:var(--ui-ink);max-width:240px}
.ui-pagebar input[type=file]{font-size:12px;max-width:260px}
.ui-pagebar select:focus,.ui-pagebar input:focus{outline:2px solid color-mix(in srgb, var(--ui-accent) 25%, transparent);border-color:var(--ui-accent)}
.ui-pagebar .ss-wrap,.ui-pagebar .ss{min-width:180px;max-width:240px}
.ui-btn{display:inline-flex;align-items:center;gap:6px;height:30px;border:1px solid var(--ui-line);background:var(--ui-card);color:var(--ui-ink-2);
  border-radius:7px;padding:0 11px;font:inherit;font-size:12.5px;cursor:pointer;white-space:nowrap;text-decoration:none;
  transition:background-color .12s,border-color .12s,color .12s}
.ui-btn:hover{background:var(--ui-row-hover)}
.ui-btn.primary{background:var(--ui-fill);border-color:var(--ui-fill);color:var(--ui-on-accent);font-weight:600;box-shadow:0 1px 2px rgb(0 0 0 / .15)}
.ui-btn.primary:hover{background:color-mix(in srgb, var(--ui-fill) 85%, black)}
.ui-btn.danger{color:var(--ui-bad);border-color:color-mix(in srgb, var(--ui-bad) 45%, var(--ui-line))}
.ui-btn.danger:hover{background:var(--ui-bad-bg);border-color:var(--ui-bad)}
.ui-btn:disabled{opacity:.5;cursor:not-allowed}
.ui-btn:focus-visible,.dd-btn:focus-visible,.pager button:focus-visible{outline:2px solid var(--ui-accent);outline-offset:2px}
.ui-seg{display:inline-flex;border:1px solid var(--ui-line);border-radius:7px;overflow:hidden;background:var(--ui-card)}
.ui-seg button{padding:0 11px;height:28px;display:inline-flex;align-items:center;gap:4px;font:inherit;font-size:12.5px;color:var(--ui-ink-2);
  border:0;border-right:1px solid var(--ui-line);background:none;cursor:pointer;white-space:nowrap}
.ui-seg button:last-child{border-right:0}
.ui-seg button:hover{background:var(--ui-row-hover)}
.ui-seg button.active{background:var(--ui-fill);color:var(--ui-on-accent);font-weight:600}
.ui-seg .n{color:var(--ui-muted)}
.ui-seg button.active .n{color:inherit;opacity:.8}
.ui-hint{color:var(--ui-muted);font-size:12px;line-height:1.5;margin:-4px 0 10px;max-width:120ch}

/* A padded page (Konnectz: page → list, 14px 18px around): its grids drop their own edge spacing. */
.ui-page.active{display:block;overflow-y:auto;overflow-x:hidden;padding:14px 18px}
/* A list page: the list takes the rest of the screen and the pager sits at the bottom (Konnectz list frame).
   Each wrapper down to the grid is a flex column that cannot grow past the screen; only the rows scroll. */
.ui-page.ui-list.active{display:flex;flex-direction:column;overflow:hidden}
.ui-list .fit-col{display:flex;flex-direction:column;flex:1;min-height:0}
.ui-list .fit-col > .ui-pagebar{flex:0 0 auto}
.ui-page .grid-toolbar{padding:0 0 10px}
.ui-page table.grid thead th:first-child,.ui-page table.grid tbody td:first-child{padding-left:10px}
.ui-page table.grid thead th:last-child,.ui-page table.grid tbody td:last-child{padding-right:10px}
.ui-page .grid-foot{padding:0 12px}

/* "What is this page" — an ⓘ that opens a short note, so help never takes work area. */
.ui-info{position:relative;display:inline-block}
.ui-info summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
  border-radius:50%;color:var(--ui-muted);border:1px solid transparent;font-size:13px;font-weight:700;font-family:Georgia,serif}
.ui-info summary::-webkit-details-marker{display:none}
.ui-info summary:hover,.ui-info[open] summary{color:var(--ui-accent);border-color:var(--ui-line);background:var(--ui-card)}
.ui-info summary:focus-visible{outline:2px solid var(--ui-accent);outline-offset:2px}
.ui-info .pop{position:absolute;z-index:300;top:calc(100% + 6px);left:0;width:min(430px,80vw);background:var(--ui-card);
  border:1px solid var(--ui-line);border-radius:8px;padding:11px 13px;box-shadow:0 10px 30px rgb(0 0 0 / .13);
  font-size:12.5px;line-height:1.55;color:var(--ui-muted);font-weight:400;font-family:inherit}
.ui-info .pop b{color:var(--ui-ink)}