/* eabassets - kit/grid.css
   Styles for kit/grid.js: the full-width data grid behind every list, shaped
   like Asset Panda's (toolbar, pinned filters, sticky light header, blue link
   text, status pills, per-row action links, totals). Every colour is a token. */

.dg{--dg-maxh:none;--dg-py:var(--cell-y);--dg-px:var(--cell-x);--dg-headh:38px;display:flex;flex-direction:column;min-width:0;width:100%;font:13px/1.5 var(--font);color:var(--txt);gap:10px}

/* toolbar: search, pinned filters, Filter, View, Columns */
.dg-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:32px}
.dg-tool-actions{display:contents}
.dg-tools .dg-search{position:relative;display:flex;align-items:center;flex:0 1 280px;min-width:170px}
.dg-tools .dg-search .sic{position:absolute;left:10px;display:flex;color:var(--faint);pointer-events:none}
.dg-tools .dg-search input.dg-search-i{height:32px;width:100%;padding:0 10px 0 30px;border-radius:var(--radius-ctl)}
.dg-tools .grow{flex:1 1 auto}
.dg-tools .tb{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 11px;border:1px solid var(--line);border-radius:var(--radius-ctl);background:var(--panel);color:var(--muted);font-family:var(--font-head);font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap}
.dg-tools .tb:hover{color:var(--accent);border-color:var(--accent)}
.dg-tools .tb.on{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
.dg-tools .tb .ic{display:flex;opacity:.85}
.dg-tools .tb .n{font-size:10.5px;background:var(--accent);color:var(--accent-txt);border-radius:var(--pill);padding:0 6px;line-height:16px}

/* pinned filters (saved views) live in the toolbar, Asset Panda style */
.dg-views{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-height:28px}
.dg-views .lab{font-family:var(--font-head);font-size:10.5px;font-weight:700;color:var(--faint);letter-spacing:.05em;text-transform:uppercase;margin-right:2px}

/* active filter chips */
.dg-filters{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.dg-filters:empty{display:none}

/* totals strip above the grid */
.dg-summary{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dg-summary .s{display:inline-flex;align-items:baseline;gap:8px;padding:8px 14px;border:1px solid var(--line);border-radius:var(--radius-card);background:var(--panel);box-shadow:var(--shadow)}
.dg-summary .s .k{font-family:var(--font-head);font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.dg-summary .s .v{font-family:var(--font-head);font-size:16px;font-weight:600;color:var(--heading);font-variant-numeric:tabular-nums}

/* bulk bar (replaces the toolbar while rows are selected) */
.dg-bulk{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 12px;border-radius:var(--radius-card);background:var(--brand);color:#fff;font-size:12.5px}
.dg-bulk b{font-family:var(--font-head);font-weight:600}
.dg-bulk .btn{background:rgba(255,255,255,.16);border-color:transparent;color:#fff;height:30px;box-shadow:none}
.dg-bulk .btn:hover{background:rgba(255,255,255,.28);color:#fff;border-color:transparent}
.dg-bulk .btn.danger{color:#fff}
.dg-bulk .sp{flex:1}

/* the table */
.dg-scroll{position:relative;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);box-shadow:var(--shadow);max-height:var(--dg-maxh,none);outline:none;scrollbar-gutter:stable}
.dg-scroll:focus-visible{box-shadow:0 0 0 3px var(--accent-soft)}
.dg-t{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;min-width:100%}
.dg-t thead th{
  position:sticky;top:0;z-index:6;height:var(--dg-headh);box-sizing:border-box;
  padding:0 var(--dg-px);text-align:left;white-space:normal;overflow:visible;text-overflow:clip;
  background:var(--panel2);color:var(--muted);
  font:700 11px/1 var(--font-head);letter-spacing:.05em;
  border-bottom:1px solid var(--line);user-select:none;
}
.dg-t thead th.dg-sortable{cursor:pointer}
.dg-t thead th.dg-sortable:hover{color:var(--accent);background:var(--bg2)}
.dg-t thead th.dg-sorted{color:var(--accent)}
.dg-hlab{display:inline-block;vertical-align:middle;overflow:visible;text-overflow:clip;white-space:normal;line-height:1.2;max-width:calc(100% - 18px)}
.dg-sortic{display:inline-flex;vertical-align:middle;margin-left:3px;color:var(--accent)}
.dg-rz{position:absolute;top:0;right:-3px;width:7px;height:100%;cursor:col-resize;z-index:2}
.dg-rz:hover{background:var(--accent-soft)}
.dg-t td{padding:var(--dg-py) var(--dg-px);border-bottom:1px solid var(--line2);background:var(--panel);vertical-align:middle;overflow:hidden}
.dg-t tbody tr:last-child td{border-bottom:0}
.dg-cv{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dg-t td.a-right,.dg-t th.a-right{text-align:right}
.dg-t td.a-center,.dg-t th.a-center{text-align:center}
.dg-numc{font-variant-numeric:tabular-nums}
.dg-t tbody tr.dg-r:hover td{background:var(--bg2)}
.dg-t tbody tr.dg-selected td{background:var(--accent-soft)}
.dg-t tbody tr.dg-selected td:first-child{box-shadow:inset 2px 0 0 var(--accent)}
.dg-t tbody tr.dg-r{cursor:pointer}
.dg-t tbody tr.dg-archived td{opacity:.6}
.dg tbody td.dg-act{box-shadow:inset 0 0 0 2px var(--accent-soft)}
.dg-t tfoot td{position:sticky;bottom:0;z-index:6;background:var(--panel2);border-top:1px solid var(--line);border-bottom:0;font-weight:700;font-variant-numeric:tabular-nums;font-family:var(--font-head);font-size:12px;color:var(--heading)}
.dg-t th.dg-frz,.dg-t td.dg-frz{position:sticky;left:0}
.dg-t td.dg-frz{z-index:5}
.dg-t thead th.dg-frz{z-index:7}
.dg-t th.dg-sel,.dg-t td.dg-sel{width:38px;padding-left:12px;padding-right:0;text-align:center}
.dg-cb{width:15px;height:15px;accent-color:var(--accent);cursor:pointer;vertical-align:middle;margin:0}

/* group bands */
.dg-t tr.dg-band td{position:sticky;top:var(--dg-headh);z-index:4;background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:7px var(--dg-px);cursor:pointer;user-select:none}
.dg-t tr.dg-band td .bn{display:inline-flex;align-items:center;gap:8px;font:600 12px var(--font-head);color:var(--heading)}
.dg-t tr.dg-band td .bn .ic{display:flex;color:var(--faint);transition:transform var(--t) var(--ease)}
.dg-t tr.dg-band.closed td .bn .ic{transform:rotate(-90deg)}
.dg-t tr.dg-band td .cnt{display:inline-flex;align-items:center;height:18px;padding:0 8px;margin-left:6px;border-radius:var(--pill);background:var(--panel);border:1px solid var(--line);color:var(--muted);font:700 10.5px var(--font-head);font-variant-numeric:tabular-nums}

/* cell types */
.dg-link{color:var(--accent);text-decoration:none;cursor:pointer;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.dg-link:hover{text-decoration:underline}
.dg-check{display:inline-flex;color:var(--green)}
.dg-thumb{width:36px;height:36px;object-fit:cover;border-radius:var(--radius-ctl);display:block;background:var(--panel2);border:1px solid var(--line)}
.dg-thumb.none{display:flex;align-items:center;justify-content:center;color:var(--faint);background:var(--bg2);border-style:dashed}
.dg-thumb.none.round{border-radius:50%}
.dg.dg-altlayout .dg-cards{display:none}
.dg-t td:has(> .dg-thumb){padding-top:3px;padding-bottom:3px}
.dg-actlink{color:var(--accent);font-weight:600;font-size:12px;cursor:pointer;background:none;border:0;padding:0;font-family:var(--font);text-align:left}
.dg-actlink:hover{text-decoration:underline}
.dg-acts{display:inline-flex;gap:8px;align-items:center}
.dg-colordot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:middle}

/* skeleton rows while the first page loads */
.dg-sk{padding:0}
.dg-sk .r{display:flex;align-items:center;gap:14px;padding:11px var(--dg-px);border-bottom:1px solid var(--line2)}
.dg-sk .r:last-child{border-bottom:0}
.dg-sk .c{height:11px;border-radius:4px;background:var(--bg2);position:relative;overflow:hidden}
.dg-sk .c::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,var(--panel2),transparent);animation:dgshine 1.2s infinite}
@keyframes dgshine{100%{transform:translateX(100%)}}

/* empty */
.dg-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:44px 20px;color:var(--muted);text-align:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card)}

/* pager */
.dg-pager{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px;flex-wrap:wrap}
.dg-pg-m,.dg-pg-r{display:flex;align-items:center;gap:4px}
.dg-pg-count{color:var(--muted);font-variant-numeric:tabular-nums}
.dg-pg-lab{color:var(--faint);font:700 10.5px var(--font-head);letter-spacing:.05em;text-transform:uppercase;margin-right:2px}
.dg-pg-gap{color:var(--faint);padding:0 2px}
.dg-pill{min-width:28px;height:26px;padding:0 9px;border-radius:var(--radius-ctl);border:1px solid var(--line);background:var(--panel);color:var(--muted);font:12.5px var(--font);cursor:pointer;transition:all var(--t) var(--ease)}
.dg-pill:hover:not(.dis){color:var(--accent);background:var(--bg2)}
.dg-pill.on{background:var(--accent);border-color:var(--accent);color:var(--accent-txt)}
.dg-pill.dis,.dg-pill:disabled{opacity:.4;cursor:default}

/* loading */
.dg-loading .dg-scroll{opacity:.6;pointer-events:none}

/* column chooser */
.dg-colsetup{margin-top:8px;border:1px solid var(--line);border-radius:var(--radius-ctl);overflow:hidden;max-height:50vh;overflow-y:auto}
.dg-cs-row{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--panel);border-bottom:1px solid var(--line2);cursor:grab}
.dg-cs-row:last-child{border-bottom:0}
.dg-cs-row:hover{background:var(--bg2)}
.dg-cs-row.dragging{opacity:.45}
.dg-cs-row.over{box-shadow:inset 0 2px 0 var(--accent)}
.dg-cs-drag{display:flex;color:var(--faint)}
.dg-cs-lab{display:flex;align-items:center;gap:8px;color:var(--txt);cursor:pointer;flex:1}

/* filter builder rows, the match all / any switch, and one level of groups */
.dg-fb{display:flex;flex-direction:column;gap:8px}
.dg-fb .r{display:grid;grid-template-columns:1fr 130px 1.4fr 32px;gap:6px;align-items:center}
.dg-fb .r select,.dg-fb .r input{height:32px}
.dg-fb .gh{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dg-fb .gh .rowend{margin-left:auto}
.dg-fb .g{display:flex;flex-direction:column;gap:8px;padding:8px 10px;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--radius-ctl);background:var(--bg2)}
.dg-fb .g .dg-fb{gap:6px}

/* phone: cards instead of a wide table (the table is still one tap away
   from the View menu, and scrolls sideways inside its own card) */
.dg-cards{display:none;flex-direction:column;gap:10px}
.dg-cardband{display:flex;align-items:center;gap:8px;padding:8px 4px 2px;font-size:13px;color:var(--txt);cursor:pointer;user-select:none}
.dg-cardband .ic{display:inline-flex;transition:transform .15s}
.dg-cardband.closed .ic{transform:rotate(-90deg)}
.dg-cardband .cnt{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--muted)}
.dg-card{display:flex;flex-direction:column;gap:8px;padding:14px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);box-shadow:var(--shadow)}
.dg-card.dg-selected{border-color:var(--accent);background:var(--accent-soft)}
.dg-card .top{display:flex;align-items:center;gap:10px}
.dg-card .top .cb{flex:0 0 auto}
.dg-card .top .dg-thumb{width:44px;height:44px}
.dg-card .top .t{flex:1;min-width:0}
.dg-card .top .t .d{font-family:var(--font-head);font-weight:600;font-size:14.5px;color:var(--accent);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dg-card .top .t .d2{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dg-card .kv{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;font-size:12.5px}
.dg-card .kv .k{color:var(--faint);font-size:10.5px;font-family:var(--font-head);font-weight:700;letter-spacing:.04em}
.dg-card .acts{display:flex;gap:6px;flex-wrap:wrap;padding-top:2px}
.dg-card .acts .btn{height:36px;flex:1 1 auto;min-width:96px}
@media (max-width:760px){
  .dg.dg-mobile .dg-scroll{display:none}
  .dg.dg-mobile .dg-cards{display:flex}
  .dg-tools .dg-search{flex-basis:100%}
  .dg-fb .r{grid-template-columns:1fr 1fr;grid-auto-rows:auto}
  .dg-summary .s{flex:1 1 auto}
}

/* the search scope select beside the search box (search a chosen field) */
.dg-tools .dg-search{gap:6px}
.dg-tools .dg-search input.dg-search-i{flex:1 1 auto;min-width:0;width:auto}
.dg-tools .dg-search select.dg-qf{height:32px;flex:0 0 auto;max-width:140px;font-size:12px}
/* the per column menu in the header, and the wrap choice it sets */
/* always in the layout (so it can be tabbed to and tapped), faint until the header is hovered */
.dg-h .dg-hm{position:absolute;right:12px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:18px;height:18px;padding:0;border:0;border-radius:var(--radius-ctl);background:var(--panel2);color:var(--muted);cursor:pointer;opacity:0}
.dg-h:hover .dg-hm,.dg-h .dg-hm:focus-visible{opacity:1}
.dg-h .dg-hm:hover{color:var(--accent)}
@media (hover:none){.dg-h .dg-hm{opacity:1}}
.dg-c.dg-wrapc,.dg-c.dg-wrapc .dg-cv{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
/* ---- the phone ----
   The toolbar used to put the search box and the scope select side by side and then wrap the rest
   of the row; at 360 px neither had room. The box now takes the whole line and the scope select
   sits under it, lined up past the search icon. Everything else on the bar is a 44 px target. */
@media (max-width:760px){
  .dg-tools{row-gap:8px}
  .dg-tools .dg-search{flex-basis:100%;flex-wrap:wrap;gap:6px;row-gap:6px}
  .dg-tools .dg-search input.dg-search-i{flex:1 1 100%;min-width:0;height:44px;font-size:16px}
  /* the magnifier sits in the 44 px box, not centred over box + select (it landed on the box's bottom edge at 360) */
  .dg-tools .dg-search .sic{top:15px}
  .dg-tools .dg-search select.dg-qf{flex:1 1 100%;max-width:100%;height:44px;font-size:16px;margin-left:0}
  .dg-tools .tb{min-height:44px}
  .dg-pill{min-width:44px;height:44px}
  .dg-actlink{min-height:44px;display:inline-flex;align-items:center}
  .dg-h .dg-hm{width:32px;height:32px;opacity:1}
  .dg{--dg-headh:44px}
  .dg-cb{width:20px;height:20px}
  .dg-fb .r select,.dg-fb .r input{height:44px;font-size:16px}
  .dg-card .acts .btn{height:44px}
  .dg-cs-row{min-height:44px}
}

.dg-pg-numbers{display:inline-flex;align-items:center;gap:4px}
.dg-pg-position,.dg-pg-mobile-size{display:none}
@media(max-width:760px){
  .dg-pager{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 12px;padding:10px 0}
  .dg-pg-count{font-size:12px}
  .dg-pg-r,.dg-pg-numbers{display:none}
  .dg-pg-mobile-size{display:flex;align-items:center;gap:6px;font-size:12px;grid-column:2;grid-row:1}
  .dg-pg-mobile-size select{width:76px;min-height:44px;font-size:16px}
  .dg-pg-m{grid-column:1/-1;grid-row:2;justify-content:space-between;gap:8px}
  .dg-pg-m:empty{display:none}
  .dg-pg-position{display:block;color:var(--muted);font-size:12px}
  .dg-pg-m .dg-pill{min-width:76px;min-height:44px}
}

/* the list's own search box lives in the blue bar (the slot below is hidden), so the wrapper folds away and the pinned filters start at the left */
.dg-search:has(> [data-page-search]){display:none}

/* A single native swipe row for actions, with search outside the scrollport. */
@media(max-width:760px){
  .dg-tool-actions,.dg-bulk,.dg-card .acts{
    display:flex;flex-wrap:nowrap;gap:8px;min-width:0;max-width:100%;
    overflow-x:auto;overscroll-behavior-x:contain;touch-action:pan-x pan-y pinch-zoom;
    scrollbar-width:thin;scroll-padding-inline:4px;padding-block:4px;
  }
  .dg-tool-actions{width:100%;align-items:center}
  .dg-tool-actions>*,.dg-bulk>*,.dg-card .acts .btn{flex:0 0 auto}
  .dg-tool-actions .dg-views{flex-wrap:nowrap}
  .dg-tool-actions .dg-views>*{flex:0 0 auto;white-space:nowrap}
  .dg-tool-actions .grow,.dg-bulk .sp{flex:1 0 0}
  .dg-bulk .btn{min-height:44px}
}