/* =====================================================================================
   RJ DTC Admin · Round 2 kit · families/data-table/family.css
   Prefix: dt-   Tokens only (no hex, no raw radius, no raw shadow). Cloth textures live in
   assets/cloth.css. Desktop (.kit-d) and phone (.kit-m) are separate compositions.
   ===================================================================================== */

/* Archivo voice for this family's own titles, headers, chips and tabs: normal width, never tracked out */
.dt th,.dt-fchip,.dt-view,.dt-emp h3,.dt-bulk b,.dt-pg,.dt-li-t,.dt-oc-no,.dt-sh-h,.dt-k,.dt-sec-h{
  font-family:var(--font-voice);font-stretch:var(--font-stretch-title);font-variation-settings:normal;letter-spacing:0}
.dt-ic{width:16px;height:16px}
.dt-ic.s{width:14px;height:14px}

/* ---------------------------------------------------------------- frame helpers */
.dt-page{padding:22px var(--s-6) var(--s-6);position:relative}
.dt-ph-count{margin-left:var(--s-2);vertical-align:middle;position:relative;top:-3px}
.dt-stack{display:flex;flex-direction:column;gap:var(--s-3)}
.dt-row{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.dt-row .r{margin-left:auto;display:flex;align-items:center;gap:var(--s-2)}
.dt-k{font-weight:var(--w-semibold);font-size:var(--text-card)}
.dt-q{color:hsl(var(--muted-foreground));font-size:var(--text-small)}

/* ---------------------------------------------------------------- saved views */
.dt-views{display:flex;align-items:flex-end;gap:var(--s-5);border-bottom:1px solid hsl(var(--border))}
.dt-view{display:inline-flex;align-items:center;gap:var(--s-2);height:38px;padding:0 2px;margin-bottom:-1px;border-bottom:2px solid transparent;
  font-size:var(--text-card);font-weight:var(--w-semibold);color:hsl(var(--muted-foreground));white-space:nowrap;border-radius:var(--r-control) var(--r-control) 0 0;
  transition:color var(--motion-hover),border-color var(--motion-hover),background-color var(--motion-hover)}
.dt-view em{font:var(--w-regular) var(--text-micro)/1 var(--font-ui);font-variant-numeric:tabular-nums;font-style:normal;color:hsl(var(--muted-foreground))}
.dt-view:hover,.dt-view.is-hover{color:hsl(var(--foreground))}
.dt-view.on{color:hsl(var(--foreground));border-bottom-color:hsl(var(--primary))}
.dt-view.is-focus{outline:2px solid hsl(var(--ring));outline-offset:2px}
.dt-view[disabled]{opacity:.45;pointer-events:none}
.dt-view .dt-mod{width:6px;height:6px;border-radius:50%;background:hsl(var(--info))}
.dt-views .r{margin-left:auto;display:flex;align-items:center;gap:var(--s-1);padding-bottom:var(--s-1)}

/* ---------------------------------------------------------------- filter bar */
.dt-bar{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.dt-bar .r{margin-left:auto;display:flex;align-items:center;gap:var(--s-2)}
.dt-search{width:300px;flex:none}
.dt-search svg{color:hsl(var(--muted-foreground))}
.dt-in{border:0;outline:0;background:transparent;min-width:0;height:100%;font-size:var(--text-body)}
.dt-in::placeholder{color:hsl(var(--muted-foreground))}
.dt-x{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:var(--r-chip);color:hsl(var(--muted-foreground))}
.dt-x:hover{background:hsl(var(--muted));color:hsl(var(--foreground))}
.dt-fchip{display:inline-flex;align-items:center;gap:var(--s-2);height:34px;padding:0 var(--s-3);border:1px solid hsl(var(--secondary-border));border-radius:var(--r-control);
  background:hsl(var(--background));font-size:var(--text-btn-sm);font-weight:var(--w-medium);color:hsl(var(--foreground));white-space:nowrap;
  transition:background-color var(--motion-hover),border-color var(--motion-hover),color var(--motion-hover)}
.dt-fchip em{font:var(--w-regular) var(--text-micro)/1 var(--font-ui);font-style:normal;font-variant-numeric:tabular-nums;color:hsl(var(--muted-foreground))}
.dt-fchip:hover,.dt-fchip.is-hover{background:hsl(var(--muted))}
.dt-fchip.is-focus{outline:2px solid hsl(var(--ring));outline-offset:2px}
.dt-fchip[aria-pressed=true],.dt-fchip.on{background:hsl(var(--accent));border-color:hsl(var(--primary)/.45);color:hsl(var(--accent-foreground))}
.dt-fchip[aria-pressed=true] em,.dt-fchip.on em{color:hsl(var(--accent-foreground)/.75)}
.dt-fchip[disabled]{opacity:.45;pointer-events:none}
.dt-fchip.dash{border-style:dashed;color:hsl(var(--muted-foreground))}
.dt-fchip.applied{background:hsl(var(--accent));border-color:hsl(var(--primary)/.45);color:hsl(var(--accent-foreground));padding-right:var(--s-1)}
.dt-fchip.applied b{font-weight:var(--w-semibold)}
.dt-fchip .dt-n{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-pill);background:hsl(var(--primary));
  color:hsl(var(--primary-foreground));font:var(--w-semibold) var(--text-10-5)/1 var(--font-ui)}
.dt-chips{display:flex;gap:var(--s-2);align-items:center}

/* segmented (view toggle, density) */

/* ---------------------------------------------------------------- popover + menu (kit.js data-k-pop) */
.dt-popw{position:relative;display:inline-flex}
.dt-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:var(--z-pop)}  /* surface = shared .menu / .pop */
.dt-pop.l{left:0;right:auto}
.dt-pop.up{top:auto;bottom:calc(100% + 6px);transform-origin:bottom center}
.dt-pop.static{position:relative;top:auto;right:auto;opacity:1;transform:none;visibility:visible;pointer-events:auto}

/* filter popover: facets form */
.dt-fpop{width:360px;padding:var(--s-4)}
.dt-fpop .dt-fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3)}
.dt-fpop .full{grid-column:1/-1}
.dt-fpop .lbl{margin-bottom:5px;font-size:var(--text-small)}
.dt-fpop .field{height:36px;font-size:var(--text-body)}
.dt-fpop .field svg{color:hsl(var(--muted-foreground))}
.dt-fpop .dt-price{display:grid;grid-template-columns:76px minmax(0,1fr) minmax(0,1fr);gap:var(--s-2)}
.dt-fpop footer{display:flex;gap:var(--s-2);justify-content:flex-end;margin-top:var(--s-4);padding-top:var(--s-3);border-top:1px solid hsl(var(--border))}
.dt-fpop footer .btn:first-child{margin-right:auto}

/* ---------------------------------------------------------------- the table */
.dt-wrap{position:relative;background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--r-card)}
.dt-scroll{overflow-x:auto;border-radius:var(--r-card)}
.dt-scroll.y{overflow:auto}
.dt{width:100%;font-size:var(--text-body)}
.dt th{position:sticky;top:0;z-index:3;height:var(--row-th);padding:0 var(--s-3);background:hsl(var(--muted));border-bottom:1px solid hsl(var(--border));
  text-align:left;font-size:var(--text-small);font-weight:var(--w-semibold);color:hsl(var(--muted-foreground));white-space:nowrap;vertical-align:middle}
.dt-wrap>.dt th:first-child,.dt-wrap>.dt-scroll>.dt th:first-child{border-top-left-radius:calc(var(--r-card) - 1px)}
.dt-wrap>.dt th:last-child,.dt-wrap>.dt-scroll>.dt th:last-child{border-top-right-radius:calc(var(--r-card) - 1px)}
.dt td{height:var(--row);padding:var(--s-2) var(--s-3);border-bottom:1px solid hsl(var(--border));vertical-align:middle;background:hsl(var(--card));
  transition:background-color var(--motion-hover),height var(--motion-sheet-in),padding var(--motion-sheet-in)}
.dt tbody tr:last-child td{border-bottom:0}
.dt tbody tr:hover td,.dt tr.is-hover td{background:hsl(var(--muted))}
.dt tr.is-sel td{background:hsl(var(--accent))}
.dt tr.is-sel:hover td{background:hsl(var(--accent))}
.dt tr.is-focus td{box-shadow:var(--e-row-focus)}
.dt tr.is-focus td:first-child{box-shadow:var(--e-row-focus-first)}
.dt tr.is-off td{color:hsl(var(--muted-foreground))}
.dt tr.is-off .dt-ph{opacity:.6}
.dt tr[hidden]{display:none}
.dt .num{text-align:right}
.dt th.num{text-align:right}
.dt th.num .dt-sort{flex-direction:row-reverse;margin-right:-6px;margin-left:0}
.dt .w-cb{width:44px;padding-right:0}
.dt .w-act{width:84px}
.dt .nw{white-space:nowrap}
.dt a{text-decoration:none}
.dt a:hover{text-decoration:underline;text-decoration-color:hsl(var(--foreground)/.3)}

/* density */
[data-density=compact] .dt td{height:var(--row-compact);padding-top:var(--s-1);padding-bottom:var(--s-1)}
[data-density=compact] .dt .dt-ph{width:22px;height:30px}
[data-density=compact] .dt .dt-t2{display:none}
[data-density=compact] .dt .dt-fx{display:none}

/* sortable header */
.dt-sort{display:inline-flex;align-items:center;gap:var(--s-1);height:28px;padding:0 6px;margin-left:-6px;border-radius:var(--r-control);font:inherit;color:inherit;
  transition:background-color var(--motion-hover),color var(--motion-hover)}
.dt-sort svg{opacity:.45;transition:opacity var(--motion-hover),transform var(--motion-hover)}
.dt-sort:hover,.dt-sort.is-hover{background:hsl(var(--foreground)/.06);color:hsl(var(--foreground))}
.dt-sort:hover svg,.dt-sort.is-hover svg{opacity:.9}
.dt-sort.is-focus{outline:2px solid hsl(var(--ring));outline-offset:0}
.dt-sort[disabled]{pointer-events:none}
th[aria-sort=ascending],th[aria-sort=descending]{color:hsl(var(--foreground))}
th[aria-sort] .dt-sort svg{opacity:1}
.dt-sort .i-up,.dt-sort .i-dn{display:none}
th[aria-sort=ascending] .dt-sort .i-ud,th[aria-sort=descending] .dt-sort .i-ud{display:none}
th[aria-sort=ascending] .dt-sort .i-up{display:block}
th[aria-sort=descending] .dt-sort .i-dn{display:block}
.dt-th-demo{display:flex;align-items:center;height:var(--row-th);padding:0 var(--s-3);background:hsl(var(--muted));border:1px solid hsl(var(--border));border-radius:var(--r-control);
  font:var(--w-semibold) var(--text-small)/1 var(--font-voice);color:hsl(var(--muted-foreground));width:100%}
.dt-th-demo.sorted{color:hsl(var(--foreground))}
.dt-th-demo .dt-sort{margin-left:-6px}

/* checkbox */
.dt-check{position:relative;display:inline-grid;place-items:center;width:28px;height:28px;margin:-6px;cursor:pointer;border-radius:var(--r-control)}
.dt-check:hover .cb:not(:disabled){border-color:hsl(var(--input-hover))}
.dt-check:has(.cb:disabled){cursor:default}

/* ---------------------------------------------------------------- column types */
.dt-prod{display:flex;align-items:center;gap:var(--s-3);min-width:0}
.dt-prod>span{min-width:0}
.dt-t1{display:block;font-weight:var(--w-medium);color:hsl(var(--foreground));line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dt-t2{display:block;font:var(--w-regular) var(--text-small)/1.35 var(--font-code);color:hsl(var(--muted-foreground));white-space:nowrap}
.dt-ph{width:30px;height:40px;border-radius:var(--r-media);flex:none;background:var(--studio);box-shadow:inset 0 0 0 1px hsl(var(--foreground)/.08)}
.dt-ph.lg{width:42px;height:56px}
.dt-ph.none{display:grid;place-items:end center;padding-bottom:3px}
.dt-ph.none .dt-sw{position:absolute;inset:0;opacity:.9}
.dt-ph.none b{position:relative;font:var(--w-medium) var(--text-8)/1 var(--font-code);color:hsl(var(--primary-foreground));letter-spacing:0}
.dt-cloth{display:flex;align-items:center;gap:var(--s-2);min-width:0}
.dt-sw{width:18px;height:18px;border-radius:var(--r-chip);flex:none;box-shadow:inset 0 0 0 1px hsl(var(--foreground)/.12)}
.dt-cloth .code{white-space:nowrap}
.dt-cloth small{display:block;font-size:var(--text-small);color:hsl(var(--muted-foreground));line-height:1.3}
.dt-money{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.dt-money b{font-weight:var(--w-semibold)}
.dt-fx{display:flex;justify-content:flex-end;gap:var(--s-2);font-size:var(--text-small);color:hsl(var(--muted-foreground));line-height:1.35}
.dt-unv{display:inline-flex;align-items:center;gap:3px;color:hsl(var(--warning));font-weight:var(--w-medium)}
.dt-unv svg{width:12px;height:12px}
.dt-none{color:hsl(var(--muted-foreground));font-style:normal}
.dt-date{white-space:nowrap;font-variant-numeric:tabular-nums}
.dt-date small{display:block;font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.dt-ts{font:var(--text-code)/1.3 var(--font-code);white-space:nowrap}
.dt-ver{font:var(--w-medium) var(--text-code)/1 var(--font-code)}
.dt-upd{display:inline-flex;align-items:center;gap:4px;margin-left:var(--s-2);font:var(--w-medium) var(--text-micro)/1 var(--font-ui);color:hsl(var(--info))}
.dt-upd::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.dt-code{display:inline-flex;align-items:center;gap:var(--s-1);font:var(--text-code)/1.3 var(--font-code);white-space:nowrap}
.dt-copy{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:var(--r-chip);color:hsl(var(--muted-foreground));opacity:.0;transition:opacity var(--motion-hover),background-color var(--motion-hover)}
tr:hover .dt-copy,.dt-copy:focus-visible,.dt-copy.show{opacity:1}
.dt-copy:hover{background:hsl(var(--muted));color:hsl(var(--foreground))}
.dt-off{background:transparent;box-shadow:inset 0 0 0 1.5px hsl(var(--neutral))}
.dt-state{display:inline-flex;align-items:center;gap:var(--s-2);white-space:nowrap}

.dt-state.bad{color:hsl(var(--destructive))}
.dt-state.warn{color:hsl(var(--warning))}
.dt-erp{display:block;font:var(--text-small)/1.3 var(--font-code);color:hsl(var(--muted-foreground))}
.dt-erp.bad{color:hsl(var(--destructive))}
.dt-flag{display:inline-flex;align-items:center;gap:3px;margin-left:var(--s-2);height:18px;padding:0 6px;border-radius:var(--r-chip);background:hsl(var(--warning)/var(--status-soft-alpha));
  color:hsl(var(--warning));font:var(--w-semibold) var(--text-10-5)/1 var(--font-ui);vertical-align:1px}
.dt-flag svg{width:11px;height:11px}
.dt-ord{font:var(--w-medium) var(--text-code)/1.3 var(--font-code);color:hsl(var(--foreground))}

/* column types specimen grid */
.dt-types{display:grid;gap:var(--s-4)}
.kit-d .dt-types{grid-template-columns:repeat(3,minmax(0,1fr))}
.dt-type{border:1px solid hsl(var(--border));border-radius:var(--r-card);overflow:hidden;background:hsl(var(--card))}
.dt-type>header{display:flex;align-items:baseline;gap:var(--s-2);padding:var(--s-3) var(--s-4);border-bottom:1px solid hsl(var(--border))}
.dt-type>header .r{margin-left:auto;font-size:var(--text-micro);color:hsl(var(--muted-foreground))}
.dt-type>header .r code{font-size:var(--text-micro)}
.dt-tl{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;gap:var(--s-3);min-height:var(--row);padding:var(--s-2) var(--s-4);border-bottom:1px solid hsl(var(--border))}
.dt-tl:last-child{border-bottom:0}
.dt-tl>span:first-child{font:var(--w-medium) var(--text-micro)/1.2 var(--font-code);color:hsl(var(--muted-foreground))}
.dt-tl .dt-money,.dt-tl .dt-fx{text-align:left;justify-content:flex-start}

/* row actions */
.dt-ra{display:flex;align-items:center;justify-content:flex-end;gap:2px}
.dt-ra .icon-btn.is-hover{background:hsl(var(--muted));color:hsl(var(--foreground))}
.dt-ra .icon-btn.is-focus{outline:2px solid hsl(var(--ring));outline-offset:1px}

/* row states specimen */
.dt-rs{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:stretch;border-bottom:1px solid hsl(var(--border))}
.dt-rs:last-child{border-bottom:0}
.dt-rs>span{display:flex;align-items:center;padding:0 var(--s-4);font:var(--w-medium) var(--text-micro)/1.2 var(--font-code);color:hsl(var(--muted-foreground));
  border-right:1px solid hsl(var(--border));background:hsl(var(--muted)/.4)}
.dt-rs .dt td{border-bottom:0}

/* expandable row */
.dt-exp{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:var(--r-control);color:hsl(var(--muted-foreground));transition:background-color var(--motion-hover)}
.dt-exp:hover{background:hsl(var(--muted));color:hsl(var(--foreground))}
.dt-exp svg{transition:transform var(--motion-hover)}
.dt-exp[aria-expanded=true] svg{transform:rotate(90deg)}
.dt tr.dt-detail td{background:hsl(var(--muted)/.5);height:auto;padding:var(--s-4) var(--s-4) var(--s-4) 56px}
.dt tr.dt-detail:hover td{background:hsl(var(--muted)/.5)}
.dt-diff{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3)}
.dt-diff h4{font:var(--w-semibold) var(--text-small)/1 var(--font-voice);margin-bottom:var(--s-2);color:hsl(var(--muted-foreground))}
.dt-json{font:var(--text-code)/1.6 var(--font-code);background:hsl(var(--background));border:1px solid hsl(var(--border));border-radius:var(--r-control);
  padding:var(--s-3);white-space:pre;overflow-x:auto;color:hsl(var(--foreground))}
.dt-json .del{background:hsl(var(--destructive)/.1);color:hsl(var(--destructive))}
.dt-json .add{background:hsl(var(--success)/.1);color:hsl(var(--success))}
.dt-json .k{color:hsl(var(--muted-foreground))}

/* audit filter form */
.dt-af{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) auto;gap:var(--s-3);align-items:end}
.dt-af .lbl{font-size:var(--text-small);margin-bottom:5px}
.dt-af .field{height:36px}
.dt-af .btns{display:flex;gap:var(--s-1)}
.dt-af .btns .btn{height:36px}
.dt-sum{display:flex;align-items:center;gap:var(--s-2);font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.dt-sum .applied{display:inline-flex;align-items:center;gap:var(--s-1);height:22px;padding:0 var(--s-2);border-radius:var(--r-chip);background:hsl(var(--accent));color:hsl(var(--accent-foreground));font:var(--text-micro)/1 var(--font-code)}

/* frozen first column(s) on a wide table */
.dt-frozen .fz{position:sticky;left:0;z-index:2}
.dt-frozen th.fz{z-index:4}
.dt-frozen .fz2{left:44px}
.dt-frozen .fz-last::after{content:"";position:absolute;top:0;bottom:-1px;right:-12px;width:12px;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,var(--sticky-edge),hsl(var(--foreground)/0));transition:opacity var(--motion-hover)}
.dt-scroll.is-scrolled .fz-last::after{opacity:1}
.dt-frozen .fz-last{border-right:1px solid hsl(var(--border))}
.dt-wide{min-width:1320px}
.dt-scrollhint{display:flex;align-items:center;gap:var(--s-2);font-size:var(--text-small);color:hsl(var(--muted-foreground))}

/* ---------------------------------------------------------------- bulk bar */
.dt-bulk{position:absolute;left:50%;bottom:var(--s-5);z-index:var(--z-pop);display:flex;align-items:center;gap:var(--s-2);padding:6px 6px 6px var(--s-4);
  background:hsl(var(--primary));color:hsl(var(--primary-foreground));border-radius:var(--r-card);box-shadow:var(--e-toast);white-space:nowrap;
  opacity:0;visibility:hidden;transform:translate(-50%,var(--toast-shift));
  transition:opacity var(--motion-toast-out),transform var(--motion-toast-out),visibility 0s linear var(--motion-handoff)}
.dt-bulk.show{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity var(--motion-toast-in),transform var(--motion-toast-in),visibility 0s}
.dt-bulk.static{position:relative;left:auto;bottom:auto;transform:none;opacity:1;visibility:visible;display:inline-flex}
.dt-bulk b{font-size:var(--text-card);font-weight:var(--w-semibold);font-variant-numeric:tabular-nums;margin-right:var(--s-2)}
.dt-bulk .sep{width:1px;height:20px;background:hsl(var(--primary-foreground)/.2);margin:0 var(--s-1)}
.dt-bulk .btn-secondary{border-color:transparent}
.dt-bulk .btn-ghost{color:hsl(var(--primary-foreground)/.85)}
.dt-bulk .btn-ghost:hover{background:hsl(var(--primary-foreground)/.1);color:hsl(var(--primary-foreground))}
.dt-bulk .chip.locked{background:hsl(var(--primary-foreground)/.12);color:hsl(var(--primary-foreground)/.85)}
.dt-bulk .btn[disabled]{opacity:.5}

/* ---------------------------------------------------------------- pagination */
.dt-pager{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-2) var(--s-3) var(--s-2) var(--s-4);border-top:1px solid hsl(var(--border));
  font-size:var(--text-small);color:hsl(var(--muted-foreground));font-variant-numeric:tabular-nums}
.dt-pager.solo{border:1px solid hsl(var(--border));border-radius:var(--r-card);background:hsl(var(--card))}
.dt-pager .r{margin-left:auto;display:flex;align-items:center;gap:var(--s-3)}
.dt-pager b{color:hsl(var(--foreground));font-weight:var(--w-medium)}
.dt-pages{display:flex;align-items:center;gap:2px}
.dt-pg{display:inline-grid;place-items:center;min-width:32px;height:32px;padding:0 var(--s-2);border-radius:var(--r-control);font-size:var(--text-btn-sm);font-weight:var(--w-medium);
  color:hsl(var(--foreground));font-variant-numeric:tabular-nums;transition:background-color var(--motion-hover)}
.dt-pg:hover,.dt-pg.is-hover{background:hsl(var(--muted))}
.dt-pg.is-focus{outline:2px solid hsl(var(--ring));outline-offset:1px}
.dt-pg[aria-current=page]{background:hsl(var(--accent));color:hsl(var(--accent-foreground));font-weight:var(--w-semibold);box-shadow:inset 0 0 0 1px hsl(var(--primary)/.25)}
.dt-pg[disabled]{opacity:.4;pointer-events:none}
.dt-pg.gap{pointer-events:none;color:hsl(var(--muted-foreground));min-width:20px}
.dt-rpp{height:32px;width:auto;padding:0 var(--s-2) 0 var(--s-3);font-size:var(--text-small);gap:var(--s-1)}
.dt-more{display:flex;flex-direction:column;align-items:center;gap:var(--s-2);padding:var(--s-4);border-top:1px solid hsl(var(--border));font-size:var(--text-small);color:hsl(var(--muted-foreground))}

/* ---------------------------------------------------------------- empty, loading, error */
.dt-empty td{height:auto;padding:var(--s-12) var(--s-6);text-align:center}
.dt-empty:hover td{background:hsl(var(--card))}
.dt-emp{display:flex;flex-direction:column;align-items:center;gap:var(--s-2);max-width:380px;margin:0 auto}
.dt-emp .ico{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:hsl(var(--muted));color:hsl(var(--muted-foreground));margin-bottom:var(--s-1)}
.dt-emp h3{font-size:var(--text-section);font-weight:var(--w-semibold);color:hsl(var(--foreground))}
.dt-emp p{font-size:var(--text-body);color:hsl(var(--muted-foreground))}
.dt-emp .dt-row{justify-content:center;margin-top:var(--s-2)}
.dt-emp.bad .ico{background:hsl(var(--destructive)/.1);color:hsl(var(--destructive))}
.dt-emp.warn .ico{background:hsl(var(--warning)/.12);color:hsl(var(--warning))}

.dt-sk.w40{width:40%}.dt-sk.w55{width:55%}.dt-sk.w70{width:70%}.dt-sk.w85{width:85%}.dt-sk.w30{width:30%}
.dt-sk.t2{height:8px;margin-top:6px}
.dt-sk.box{width:30px;height:40px;border-radius:var(--r-media)}
.dt-sk.chipk{width:64px;height:22px}
.dt-sk.r{margin-left:auto}
tr:nth-child(2) .dt-sk{animation-delay:var(--skeleton-stagger)}tr:nth-child(3) .dt-sk{animation-delay:calc(var(--skeleton-stagger) * 2)}tr:nth-child(4) .dt-sk{animation-delay:calc(var(--skeleton-stagger) * 3)}tr:nth-child(5) .dt-sk{animation-delay:calc(var(--skeleton-stagger) * 4)}
.dt-note{display:flex;align-items:flex-start;gap:var(--s-3);padding:var(--s-3) var(--s-4);border-bottom:1px solid hsl(var(--border));font-size:var(--text-body)}
.dt-note svg{margin-top:1px;flex:none}
.dt-note b{font-weight:var(--w-semibold)}
.dt-note p{color:hsl(var(--muted-foreground));margin-top:2px}
.dt-note .btn{margin-left:auto;flex:none}
.dt-note.bad{background:hsl(var(--destructive)/.06)}
.dt-note.bad svg{color:hsl(var(--destructive))}
.dt-note.warn{background:hsl(var(--warning)/.08)}
.dt-note.warn svg{color:hsl(var(--warning))}
.dt-note.info{background:hsl(var(--info)/.07)}
.dt-note.info svg{color:hsl(var(--info))}
.dt-note:first-child{border-radius:calc(var(--r-card) - 1px) calc(var(--r-card) - 1px) 0 0}

/* ======================================================================== PHONE (.kit-m) */
.dt-m-tools{display:flex;flex-direction:column;gap:var(--s-3);padding:0 var(--s-4) var(--s-3)}
.dt-m-tools .dt-row{flex-wrap:nowrap}
.dt-m-tools .field{flex:1;min-width:0}
.dt-hs{display:flex;gap:var(--s-2);overflow-x:auto;scrollbar-width:none;padding:0 var(--s-4);margin:0 calc(var(--s-4) * -1)}
.dt-hs::-webkit-scrollbar{display:none}
.dt-hs>*{flex:none}
.kit-m .dt-fchip{height:40px;padding:0 var(--s-4);font-size:var(--text-btn-sm)}
.kit-m .dt-views{gap:var(--s-5);overflow-x:auto;scrollbar-width:none;padding:0 var(--s-4)}
.kit-m .dt-views::-webkit-scrollbar{display:none}
.kit-m .dt-view{height:44px;flex:none}
.dt-m-count{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-2) var(--s-4);font-size:var(--text-small);color:hsl(var(--muted-foreground));
  border-top:1px solid hsl(var(--border));border-bottom:1px solid hsl(var(--border));background:hsl(var(--muted)/.5)}
.dt-m-count .r{margin-left:auto}
.dt-m-count .btn{height:36px}

.dt-list{list-style:none;background:hsl(var(--card))}
.dt-li{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s-3);align-items:start;padding:var(--s-3) var(--s-2) var(--s-3) var(--s-4);
  border-bottom:1px solid hsl(var(--border));transition:background-color var(--motion-hover)}
.dt-li:last-child{border-bottom:0}
.dt-li.is-sel{background:hsl(var(--accent))}
.dt-li.is-focus{box-shadow:inset 0 0 0 2px hsl(var(--ring))}
.dt-li.is-off{color:hsl(var(--muted-foreground))}
.dt-li.is-off .dt-ph{opacity:.6}
.dt-li[hidden]{display:none}
.dt-li-main{min-width:0;display:flex;flex-direction:column;gap:3px}
.dt-li-t{font-size:var(--text-14);font-weight:var(--w-semibold);line-height:1.3;color:hsl(var(--foreground));text-decoration:none}
.dt-li-t::after{content:"";position:absolute;inset:0}
.dt-li-m{font:var(--text-small)/1.35 var(--font-code);color:hsl(var(--muted-foreground));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dt-li-s{display:flex;align-items:center;gap:var(--s-2);margin-top:3px}
.dt-li-r{display:flex;flex-direction:column;align-items:flex-end;gap:2px;position:relative;z-index:1}
.dt-li-r .dt-money b{font-size:var(--text-14)}
.dt-li-r .dt-fx{flex-direction:column;align-items:flex-end;gap:0}
.dt-li-r .icon-btn{margin-top:var(--s-1)}
.dt-li .dt-check{display:none;width:44px;height:44px;margin:-2px -8px 0 -12px;position:relative;z-index:1}
.is-selecting .dt-li .dt-check,.dt-li.show-cb .dt-check{display:inline-grid}

.dt-mbulk{position:sticky;bottom:0;z-index:6;display:flex;align-items:center;gap:var(--s-2);padding:var(--s-2) var(--s-3) var(--s-3);
  background:hsl(var(--primary));color:hsl(var(--primary-foreground));box-shadow:var(--e-phone-sheet);
  transform:translateY(100%);opacity:0;visibility:hidden;margin-top:-64px;
  transition:transform var(--motion-sheet-out),opacity var(--motion-sheet-out),visibility 0s linear var(--motion-handoff)}
.dt-mbulk.show{transform:none;opacity:1;visibility:visible;transition:transform var(--motion-sheet-in),opacity var(--motion-sheet-in),visibility 0s}
.dt-mbulk.static{position:relative;transform:none;opacity:1;visibility:visible;margin-top:0;border-radius:var(--r-card)}
.dt-mbulk b{font:var(--w-semibold) var(--text-14)/1 var(--font-voice);font-variant-numeric:tabular-nums;flex:1}
.dt-mbulk .btn{height:var(--control-h-m)}
.dt-mbulk .btn-secondary{border-color:transparent}
.dt-mbulk .btn-ghost{color:hsl(var(--primary-foreground)/.85)}

/* bottom sheet (phone) built on kit.js data-k-stage */

.dt-sh-h{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-3) var(--s-2) var(--s-2) var(--s-4);font-size:var(--text-section);font-weight:var(--w-semibold)}
.dt-sh-h .icon-btn{margin-left:auto}
.dt-sh-b{padding:var(--s-2) var(--s-4) var(--s-4);overflow:auto;display:flex;flex-direction:column;gap:var(--s-4)}
.dt-sh-b .lbl{font-size:var(--text-small);margin-bottom:var(--s-2)}
.dt-sh-b .dt-chips{flex-wrap:wrap}
.dt-sh-f{display:flex;gap:var(--s-2);padding:var(--s-3) var(--s-4) var(--s-4);border-top:1px solid hsl(var(--border))}
.dt-sh-f .btn{flex:1;height:var(--control-h-m-lg)}
.dt-opts{display:flex;flex-direction:column;border:1px solid hsl(var(--border));border-radius:var(--r-card);overflow:hidden}
.dt-opts .mi{height:var(--control-h-m);border-radius:0;border-bottom:1px solid hsl(var(--border));font-size:var(--text-14)}
.dt-opts .mi:last-child{border-bottom:0}
.dt-opts .mi.on{background:hsl(var(--accent))}
.dt-sh-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3)}

/* phone order card */
.dt-oc{padding:var(--s-3) var(--s-4);border-bottom:1px solid hsl(var(--border));display:flex;flex-direction:column;gap:var(--s-2);background:hsl(var(--card));position:relative}
.dt-oc:last-child{border-bottom:0}
.dt-oc-h{display:flex;align-items:center;gap:var(--s-2)}
.dt-oc-no{font:var(--w-medium) 13px/1 var(--font-code);color:hsl(var(--foreground));text-decoration:none}
.dt-oc-no::after{content:"";position:absolute;inset:0}
.dt-oc-h .r{margin-left:auto;font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.dt-oc-b{display:flex;align-items:flex-start;gap:var(--s-3)}
.dt-oc-b>div{flex:1;min-width:0}
.dt-oc-b .dt-money b{font-size:15px}
.dt-oc-who{font-weight:var(--w-medium)}
.dt-oc-it{font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.dt-oc-st{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-2);padding-top:var(--s-2);border-top:1px dashed hsl(var(--border))}
.dt-oc-st>div{display:flex;flex-direction:column;gap:3px;min-width:0;font-size:var(--text-small)}
.dt-oc-st>div>span:first-child{font-size:var(--text-micro);color:hsl(var(--muted-foreground))}
.dt-oc-st .dt-state{white-space:normal}
.dt-oc-st .dt-erp{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* phone audit rows */
.dt-ad{border-bottom:1px solid hsl(var(--border));background:hsl(var(--card))}
.dt-ad:last-child{border-bottom:0}
.dt-ad summary{list-style:none;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-1) var(--s-3);padding:var(--s-3) var(--s-4);cursor:pointer;min-height:var(--control-h-m)}
.dt-ad summary::-webkit-details-marker{display:none}
.dt-ad summary .a{display:flex;align-items:center;gap:var(--s-2);min-width:0}
.dt-ad summary .a .dt-code{overflow:hidden;text-overflow:ellipsis}
.dt-ad summary .t{font:var(--text-small)/1.3 var(--font-code);color:hsl(var(--muted-foreground));text-align:right}
.dt-ad summary .w{grid-column:1/-1;font-size:var(--text-small);color:hsl(var(--muted-foreground));display:flex;align-items:center;gap:var(--s-2)}
.dt-ad summary .w svg{margin-left:auto;transition:transform var(--motion-hover)}
.dt-ad[open] summary .w svg{transform:rotate(90deg)}
.dt-ad .body{padding:0 var(--s-4) var(--s-4);display:flex;flex-direction:column;gap:var(--s-2)}
.dt-ad .body h4{font:var(--w-semibold) var(--text-small)/1 var(--font-voice);color:hsl(var(--muted-foreground));font-stretch:var(--font-stretch-title)}
.dt-act{display:inline-flex;align-items:center;height:22px;padding:0 var(--s-2);border-radius:var(--r-chip);background:hsl(var(--muted));font:var(--w-medium) var(--text-micro)/1 var(--font-code);color:hsl(var(--foreground))}
.dt-act.pub{background:hsl(var(--success)/var(--status-soft-alpha));color:hsl(var(--success))}
.dt-act.rev{background:hsl(var(--destructive)/var(--status-soft-alpha));color:hsl(var(--destructive))}

/* phone column-type rows */
.dt-mt{display:flex;flex-direction:column}
.dt-mt>div{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);min-height:var(--control-h-m);padding:var(--s-2) 0;border-bottom:1px solid hsl(var(--border))}
.dt-mt>div:last-child{border-bottom:0}
.dt-mt>div>span:first-child{font:var(--w-medium) var(--text-micro)/1.2 var(--font-code);color:hsl(var(--muted-foreground));flex:none;width:92px}
.dt-mt .dt-money,.dt-mt .dt-fx{text-align:right}
.kit-m .spec-body.flush .dt-pager{flex-wrap:wrap}
.dt-mmore{display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-4);border-top:1px solid hsl(var(--border));text-align:center;font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.dt-mmore .btn{width:100%}

/* phone hero frame: a real phone viewport with its own scroll, so sheets and the bulk bar land in view */
.dt-mphone{height:780px;display:flex;flex-direction:column}
.dt-mscroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden}
.dt-mphone .tabbar{position:relative}
.dt-mphone .dt-mbulk{position:absolute;left:0;right:0;bottom:calc(var(--s-16) - 1px);margin-top:0}
.dt-warnchip{color:hsl(var(--warning))}
[data-density=compact] .dt .dt-cloth small{display:none}
.dt-fpop .dt-popw{display:flex;width:100%}
.dt-fpop .dt-popw>.field{width:100%}
.dt-af .dt-popw{display:flex;width:100%}
.dt-af .dt-popw>.field{width:100%}
.dt-rs .dt{table-layout:fixed}
.dt-ph.none b{color:hsl(var(--foreground));background:hsl(var(--background)/.85);padding:2px 3px;border-radius:var(--r-chip);font-size:var(--text-8-5)}
.dt-ph.lg.none b{font-size:var(--text-9)}
.dt-ph.none .dt-sw{width:auto;height:auto;border-radius:0}
.dt-ph.none b{white-space:nowrap}
.dt-li-r .dt-fx{flex-direction:row;gap:var(--s-2)}
.dt-li-r .icon-btn{margin:0 calc(var(--s-1) * -1) calc(var(--s-3) * -1) 0}
.dt-mscroll{scrollbar-width:none}
.dt-mscroll::-webkit-scrollbar{display:none}
.is-selecting .dt-li,.dt-li.show-cb{grid-template-columns:auto auto minmax(0,1fr) auto;padding-left:var(--s-2)}
.is-selecting .dt-li .dt-check,.dt-li.show-cb .dt-check{margin:-2px -4px 0 0}
/* phone list row v2: thumb | main | money | more */
.dt-li{grid-template-columns:auto minmax(0,1fr) auto auto;gap:var(--s-3);padding-right:var(--s-1)}
.dt-li-r .dt-fx{flex-direction:column;gap:0;align-items:flex-end}
.dt-li-more{width:var(--control-h-m);margin:calc(var(--s-2) * -1) 0 0 calc(var(--s-2) * -1);position:relative;z-index:1}
.dt-li-more.icon-btn{height:var(--control-h-m)}
.is-selecting .dt-li,.dt-li.show-cb{grid-template-columns:auto auto minmax(0,1fr) auto;padding-right:var(--s-4)}
.is-selecting .dt-li .dt-li-more,.dt-li.show-cb .dt-li-more{display:none}
.dt-li .dt-li-main .dt-li-t{overflow-wrap:anywhere}
.kit-m .dt-json{white-space:pre-wrap;overflow-wrap:anywhere;font-size:11.5px}