/* ============================================================================
   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)}

/* ── Report filter bars (.rpt-bar on every report page; TOD's boxed .tod-bar) → one Konnectz line ──
   (user, 2026-11-07: "all pages in Konnectz v2 style"). Labels stay, small and inline, so a bar reads
   "MONTH [November ▾]  YEAR [2026 ▾]  [View]". Data-entry forms (est-card in Create Estimate, New Customer…)
   keep their stacked labels: they are not report bars. */
.rpt-bar,.tod-bar .est-grid{display:flex !important;flex-wrap:wrap;align-items:center;gap:6px 12px;grid-template-columns:none}
.rpt-bar{margin:0;padding:12px 18px 10px;background:transparent;border:0;box-shadow:none}
.tod-bar{background:transparent;border:0;box-shadow:none;border-radius:0;padding:12px 18px 6px;margin:0}
.rpt-bar .est-field,.tod-bar .est-field{display:inline-flex;flex-direction:row;align-items:center;gap:6px;flex:0 0 auto !important;margin:0;min-width:0}
.rpt-bar .est-field label,.tod-bar .est-field label{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;
  color:var(--ui-label);white-space:nowrap;margin:0}
.rpt-bar .est-field select,.rpt-bar .est-field input,.rpt-bar .date-inp,.tod-bar .est-field select,.tod-bar .est-field input{
  height:30px;padding:4px 8px;font-size:12px;border:1px solid var(--ui-line);border-radius:6px;background-color:var(--ui-card);
  color:var(--ui-ink);width:auto;min-width:120px;box-shadow:none}
.rpt-bar .est-field select:focus,.rpt-bar .est-field input:focus,.rpt-bar .date-inp:focus,.tod-bar .est-field select:focus,.tod-bar .est-field input:focus{
  outline:2px solid color-mix(in srgb, var(--ui-accent) 25%, transparent);border-color:var(--ui-accent);box-shadow:none}
.rpt-bar .ss,.tod-bar .ss{display:inline-block;width:auto;min-width:150px;max-width:260px}
.rpt-bar .ss-btn,.tod-bar .ss-btn{height:30px;padding:0 9px;font-size:12px;border-radius:6px;border-color:var(--ui-line);box-shadow:none}
.rpt-bar .btn-primary,.rpt-bar .est-btn,.tod-bar .btn-primary,.tod-bar .est-btn{width:auto;height:30px;padding:0 12px;font-size:12.5px;font-weight:600;
  border-radius:7px;background:var(--ui-fill);box-shadow:0 1px 2px rgb(0 0 0 / .15);align-self:center !important;display:inline-flex;align-items:center;gap:6px}
.rpt-bar .btn-sm,.rpt-bar .btn-ghost,.tod-bar .btn-ghost{height:30px;padding:0 11px;font-size:12.5px;font-weight:500;border:1px solid var(--ui-line);
  border-radius:7px;background:var(--ui-card);color:var(--ui-ink-2);display:inline-flex;align-items:center;gap:6px;align-self:center}
.rpt-bar .btn-sm:hover,.rpt-bar .btn-ghost:hover,.tod-bar .btn-ghost:hover{background:var(--ui-row-hover);color:var(--ui-ink-2)}
.rpt-bar [data-icon] svg,.tod-bar [data-icon] svg{width:14px;height:14px}
.tod-bar .tod-actions{flex-direction:row;align-items:center;margin-left:auto}
.tod-bar .tod-hint{display:none}   /* long help text: kept in the markup, not taking work area */

/* ── Section tabs (.cd-tabs / .cd-tab: Sales Summary | New Product, Customer Detail…) → Konnectz segmented switch ── */
.cd-tabs{display:inline-flex;gap:0;margin:0 18px 10px;border:1px solid var(--ui-line);border-radius:7px;overflow:hidden;background:var(--ui-card);
  border-bottom:1px solid var(--ui-line);max-width:calc(100% - 36px);flex-wrap:wrap}
.cd-tab{height:28px;padding:0 11px;font-size:12.5px;font-weight:500;color:var(--ui-ink-2);border:0;border-right:1px solid var(--ui-line);
  border-bottom:0 !important;margin:0;border-radius:0;display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.cd-tab:last-child{border-right:0}
.cd-tab:hover{background:var(--ui-row-hover);color:var(--ui-ink-2)}
.cd-tab.active{background:var(--ui-fill);color:var(--ui-on-accent);font-weight:600}
.cd-tab.active .rs-count{background:rgb(255 255 255 / .25);color:#fff}
.cd-tab.rs-mine.active{color:var(--ui-on-accent);background:#b45309}
.cd-tabs{width:max-content;align-self:flex-start;flex:0 0 auto}
#view-requests:not(.ui-compacted) #rsTabs{margin-top:12px !important}

/* Tighter stack: filter bar → tabs → search row (user, 2026-11-07: "big gap for search"). */
.rpt-bar{padding:10px 18px 4px}
.tod-bar{padding:10px 18px 4px}
.cd-tabs{margin-top:4px;margin-bottom:4px}
.grid-toolbar{padding-top:6px;padding-bottom:6px}
.ui-page .grid-toolbar{padding:0 0 6px}
#view-mgrdaystock .rpt-bar{margin-bottom:0 !important}

/* Report pages (a filter bar or section tabs on top): reasonable, not generous, spacing (user, 2026-11-07).
   Page 8px 14px; bar, tabs and the grid's search row sit 6px apart and share one left edge. */
.view.active:has(> .rpt-bar),.view.active:has(> .tod-bar),.view.active:has(> .cd-tabs){padding:8px 14px 0}
.view.active:has(> .rpt-bar) > .rpt-bar,.view.active:has(> .tod-bar) > .tod-bar{padding:0 0 6px;margin:0 !important}
.view.active:has(> .rpt-bar) .cd-tabs,.view.active:has(> .tod-bar) .cd-tabs,.view.active:has(> .cd-tabs) > .cd-tabs{margin:0 0 6px !important}
.view.active:has(> .rpt-bar) .grid-toolbar,.view.active:has(> .tod-bar) .grid-toolbar,.view.active:has(> .cd-tabs) .grid-toolbar{padding:0 0 6px}
.view.active:has(> .rpt-bar) table.grid th:first-child,.view.active:has(> .rpt-bar) table.grid td:first-child,
.view.active:has(> .cd-tabs) table.grid th:first-child,.view.active:has(> .cd-tabs) table.grid td:first-child{padding-left:10px}
.view.active:has(> .rpt-bar) table.grid th:last-child,.view.active:has(> .rpt-bar) table.grid td:last-child,
.view.active:has(> .cd-tabs) table.grid th:last-child,.view.active:has(> .cd-tabs) table.grid td:last-child{padding-right:10px}
.view.active:has(> .rpt-bar) .grid-foot,.view.active:has(> .cd-tabs) .grid-foot{padding:0 12px}

/* One tool row (public/js/ui-compact.js): filter bar + tabs + the grid's search/filters/columns on a single
   wrapping line, Konnectz-style. The page loses its per-page 20px 28px padding for a compact 8px 14px. */
.view.active.ui-compacted{padding:8px 14px 0 !important}
.ui-toolrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 6px;flex:0 0 auto}
.ui-toolrow > .rpt-bar{padding:0 !important;margin:0 !important;flex:0 0 auto;gap:6px 10px}
.ui-toolrow > .cd-tabs{margin:0 !important;flex:0 0 auto}
.ui-toolrow > .grid-toolbar{padding:0 !important;flex:1 1 320px;min-width:0;min-height:30px}
.ui-toolrow > [hidden]{display:none !important}
.ui-toolrow .grid-search{flex:0 1 260px;min-width:200px}
.ui-compacted table.grid th:first-child,.ui-compacted table.grid td:first-child{padding-left:10px}
.ui-compacted table.grid th:last-child,.ui-compacted table.grid td:last-child{padding-right:10px}
.ui-compacted .grid-foot{padding:0 12px}

/* SOA: opening / closing balance above the statement (JK_Statement) */
.soa-bal{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;color:var(--ui-ink-2);padding:6px 10px;margin-bottom:6px;
  background:var(--ui-info-bg);border-radius:6px}
.soa-bal b{color:var(--ui-ink)}
/* PDF pages at full width (public/js/pdf-view.js) */
.pdf-pages{display:flex;flex-direction:column;gap:10px;width:100%}
.pdf-pages canvas{width:100%;height:auto;display:block;background:#fff;box-shadow:0 1px 3px rgb(0 0 0 / .18);border-radius:2px}
/* SOA: the statement fills the page width and scrolls with the page (no framed viewer box) */
#view-soa .soa-viewer{display:block;margin:0;border:0;border-radius:0;background:transparent;overflow:auto;flex:1;min-height:0}
#view-soa .soa-viewer .pdf-pages{max-width:none;margin:0;padding-bottom:16px}
/* SOA: a round loader while the statement is made (user, 2026-11-08) */
.soa-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:70px 0;color:var(--ui-muted);font-size:13px}
.soa-spin{width:38px;height:38px;border-radius:50%;border:4px solid var(--ui-line);border-top-color:var(--ui-fill);animation:soa-spin .8s linear infinite}
@keyframes soa-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.soa-spin{animation-duration:2.4s}}
/* Back Order Status (public/js/backorders.js) */
.bo-exp{font-size:11.5px;color:var(--ui-ink-2)}
.bo-exp.soon{color:var(--ui-warn);font-weight:600}
.bo-exp.now,.bo-exp.gone{color:var(--ui-bad);font-weight:700}
.bo-new{color:var(--ui-ok) !important;font-weight:600}
.bo-yes{color:var(--ui-ok)}
.bo-no{color:var(--ui-muted);font-weight:400}
.cd-tab.bo-hot:not(.active){background:var(--ui-ok-bg);color:var(--ui-ok);font-weight:600}
.bo-end{display:flex;gap:6px;align-items:center}
.bo-lost{height:30px;padding:4px 8px;font:inherit;font-size:12px;border:1px solid var(--ui-line);border-radius:6px;background:var(--ui-card);color:var(--ui-ink)}

/* Stock Reports + dashboard Stock row (public/js/stock-reports.js) */
.kpi-grid.nine{grid-template-columns:repeat(9,minmax(0,1fr));gap:10px}
@media (max-width:1500px){.kpi-grid.nine{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (max-width:900px){.kpi-grid.nine{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sr-total{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:12.5px;color:var(--ui-ink-2);margin:0 0 6px;padding:6px 10px;background:var(--ui-info-bg);border-radius:6px}
.sr-total:empty{display:none}
.sr-total b{color:var(--ui-ink)}
.sr-note{color:var(--ui-muted);font-size:11.5px}
.sr-nil{color:var(--ui-bad)}
.sr-low{color:var(--ui-bad)}
.sr-dash-err{grid-column:1/-1;color:var(--ui-muted);font-size:12.5px;padding:10px}
#view-stockreports .sr-pane:not([hidden]){display:flex;flex-direction:column;flex:1;min-height:0}
#view-stockreports .sr-pane > div{display:flex;flex-direction:column;flex:1;min-height:0}
#view-stockreports table.grid thead th{white-space:nowrap;line-height:1.25;vertical-align:bottom}
.dl-big.g{color:var(--ui-ok)} .dl-big.w{color:var(--ui-warn)} .dl-big.r{color:var(--ui-bad)}
.bo-pend{color:#6d28d9 !important;font-weight:600}