/* ============================================================================
   Online CS Portal — Ventriloc style system
   Editorial data observatory on warm paper: a single orange ember punctuating
   monochrome precision.

   ADAPTED FOR AN OPERATIONAL TOOL. The source system is written for a
   marketing site — 66px display type, 80px section gaps, 40px card padding.
   Applied literally, a ticket queue would show four rows per screen. What is
   kept verbatim is the system's identity:
     · warm paper palette, 95% achromatic, Ember strictly as punctuation
     · display face at weight 400 only, -0.02em tracking, never bold
     · the three-radius rhythm: 0px buttons, 8/20px cards, 200px nav pills
     · the asymmetric 6px 0 0 signature on featured panels
     · no shadows anywhere — depth comes from surface colour alone
   What is adapted is density: card padding 40px -> 14-20px, section gap
   80px -> 20px. Whitespace is spent where it reads, not where it costs rows.

   Light theme only, as the system specifies.
   ========================================================================== */

:root{
  /* ---- colour ---- */
  --graphite:#202020;
  --canvas:#ffffff;
  --ash:#efefef;
  --fog:#f5f5f5;
  --ivory:#ebe6dd;
  --steel:#4d4d4d;
  --slate:#828282;
  --mist:#e8e8e8;
  --ember:#ff682c;
  --brass:#816729;

  /* Semantic states. The system forbids new chromatic hues, so status is
     carried by the two warm accents plus weight and surface — not by the
     usual green/red/blue traffic lights. */
  --ok:#202020;
  --ok-wash:#ebe6dd;
  --warn:#816729;
  --warn-wash:#f3ecdf;
  --alert:#ff682c;
  --alert-wash:#ffeee7;

  /* ---- type ---- */
  --display:'Inter Tight','PolySans',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --body:'Inter',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,"Cascadia Mono",monospace;
  --track:-0.02em;

  /* ---- shape ---- */
  --r-button:200px;     /* owner override: pills, not the system's 0px */
  --r-field:10px;       /* inputs and textareas stay soft-cornered, not pills */
  --r-card:8px;
  --r-data:20px;
  --r-tag:20px;
  --r-pill:200px;
  --r-asym:6px 0 0;

  /* ---- rhythm (operational density) ---- */
  --gap:20px;
  --pad-card:20px;
  --pad-tight:14px;
}

*{box-sizing:border-box;margin:0;padding:0}
/* The hidden attribute must win over any display rule below — several panes
   are toggled with el.hidden and carry display:grid/flex of their own. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--canvas);
  color:var(--graphite);
  font-family:var(--body);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
svg{display:block;flex:none}
a{color:var(--graphite);text-decoration-color:var(--ember);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* display face: weight 400 only, always tracked in — the signature */
h1,h2,h3,.tbtitle,.bname,.navitem .lbl,.btn,.authbtn,.tcHead h3,.cardhead h3,
.emptyinner h2,.modal h2,.threadhead h2,.stat .sv,.aihead .at{
  font-family:var(--display);
  font-weight:400;
  letter-spacing:var(--track);
}

/* ============================================================ app shell === */
.app{display:grid;grid-template-columns:236px minmax(0,1fr);height:100vh;min-height:600px;overflow:hidden}

/* ---- sidebar: the Ash band ---- */
.sidebar{background:var(--ash);border-right:1px solid var(--mist);display:flex;flex-direction:column;overflow:hidden}

.brandbar{padding:20px 16px 12px;position:relative}
.brandbtn{
  width:100%;display:flex;align-items:center;gap:10px;position:relative;
  padding:8px 26px 8px 10px;border-radius:var(--r-pill);
  background:var(--canvas);transition:background .12s;
}
.brandbtn:hover{background:var(--fog)}
.swatch{
  width:24px;height:24px;border-radius:var(--r-pill);flex:none;display:grid;place-items:center;
  font-family:var(--body);font-size:10px;font-weight:600;color:var(--canvas);letter-spacing:0;
}
.brandbtn .bmeta{flex:0 1 auto;min-width:0}
.brandbtn .bname{font-size:15px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brandbtn .bsub{display:none}
.chev{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--slate)}

.brandmenu{
  position:absolute;left:16px;right:16px;top:calc(100% - 4px);z-index:50;display:none;
  background:var(--canvas);border:1px solid var(--mist);border-radius:var(--r-card);padding:6px;
}
.brandmenu.open{display:block}
.brandmenu .mi{width:100%;display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:var(--r-pill);text-align:left}
.brandmenu .mi:hover{background:var(--ash)}
.brandmenu .bname{font-family:var(--display);font-weight:400;letter-spacing:var(--track);font-size:14px}
.brandmenu .bsub{display:none}
.brandmenu .tick{margin-left:auto;color:var(--ember)}
.msep{height:1px;background:var(--mist);margin:6px 8px}

nav{flex:1 1 auto;min-height:0;overflow-y:auto;padding:4px 12px 12px}
.navlabel{
  font-family:var(--display);font-weight:400;letter-spacing:.06em;
  font-size:11px;text-transform:uppercase;color:var(--brass);
  padding:18px 10px 7px;
}
.navitem{
  width:100%;display:flex;align-items:center;gap:10px;padding:7px 10px;
  border-radius:var(--r-pill);color:var(--graphite);text-align:left;transition:background .1s;
}
.navitem:hover{background:var(--canvas)}
.navitem.active{background:var(--graphite);color:var(--canvas)}
.navitem.active .nicon{color:var(--canvas)}
.nicon{color:var(--slate);width:17px;height:17px}
.navitem .lbl{flex:1;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.navitem[disabled]{opacity:.45;cursor:default}
.navitem[disabled]:hover{background:none}
.badge{
  font-family:var(--body);font-size:11px;font-weight:500;font-variant-numeric:tabular-nums;
  color:var(--steel);background:var(--canvas);padding:1px 8px;border-radius:var(--r-tag);
}
.badge.hot{background:var(--alert-wash);color:var(--ember)}
.navitem.active .badge{background:rgba(255,255,255,.18);color:var(--canvas)}

.who{border-top:1px solid var(--mist);padding:14px 16px;display:flex;align-items:center;gap:10px}
.avatar{
  width:28px;height:28px;border-radius:var(--r-pill);flex:none;display:grid;place-items:center;
  font-family:var(--body);font-size:11px;font-weight:600;color:var(--canvas);background:var(--graphite);
}
.who .wname{font-size:13px;font-weight:500;line-height:1.3;display:block}
.who .wrole{font-size:11.5px;color:var(--slate);line-height:1.3;display:block}

/* ---- main column ---- */
.main{display:flex;flex-direction:column;min-width:0;overflow:hidden;background:var(--canvas)}
.toolbar{
  height:64px;flex:none;display:flex;align-items:center;gap:16px;padding:0 24px;
  border-bottom:1px solid var(--mist);background:var(--canvas);
}
.tbtitle{font-size:20px;white-space:nowrap}
.tbsub{font-family:var(--body);font-size:13px;color:var(--slate);font-variant-numeric:tabular-nums;white-space:nowrap}
.spacer{flex:1}

.search{
  display:flex;align-items:center;gap:8px;background:var(--ash);border-radius:var(--r-pill);
  padding:0 14px;height:34px;width:230px;color:var(--slate);
}
.search input{background:none;border:0;outline:none;width:100%;font-size:13px;color:var(--graphite)}
.search input::placeholder{color:var(--slate)}

/* buttons: sharp 0px corners, deliberate contrast to the rounded surfaces */
.btn{
  height:34px;padding:0 18px;border-radius:var(--r-button);
  background:transparent;border:1px solid var(--graphite);color:var(--graphite);
  font-size:14px;line-height:1;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  transition:background .12s,color .12s;
}
.btn:hover{background:var(--ash)}
.btn.primary{background:var(--graphite);color:var(--canvas);border-color:var(--graphite)}
.btn.primary:hover{background:#000}
.btn.lg{height:38px;padding:0 24px}
.btn.danger{border-color:var(--mist);color:var(--steel)}
.btn.danger:hover{border-color:var(--ember);color:var(--ember);background:transparent}
.btn[disabled]{opacity:.45;cursor:default}
.iconbtn{width:34px;height:34px;border-radius:var(--r-pill);display:grid;place-items:center;color:var(--steel)}
.iconbtn:hover{background:var(--ash)}

/* segmented control as a nav pill */
.seg{display:inline-flex;background:var(--ash);border-radius:var(--r-pill);padding:3px}
.seg button{
  padding:0 14px;height:26px;border-radius:var(--r-pill);
  font-family:var(--display);font-weight:400;letter-spacing:var(--track);
  font-size:13px;color:var(--steel);font-variant-numeric:tabular-nums;
}
.seg button.on{background:var(--canvas);color:var(--graphite)}

.view{flex:1;min-height:0;min-width:0;display:none;overflow:hidden}
.view.on{display:flex}
.scroll{overflow-y:auto;min-height:0;flex:1 1 auto}

/* ===================================================== tickets: 3 panes === */
/* the ticket list is a single full-width table, not the old three panes */
#v-tickets{display:none;min-height:0;min-width:0;overflow:hidden}
#v-tickets.on{display:flex}

.listcol{border-right:1px solid var(--mist);display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;background:var(--fog)}
.listhead{padding:14px 16px;border-bottom:1px solid var(--mist);display:flex;align-items:center;gap:10px}

.tkrow{
  width:100%;text-align:left;padding:14px 16px;border-bottom:1px solid var(--mist);
  display:grid;grid-template-columns:8px minmax(0,1fr);gap:0 8px;transition:background .1s;
}
.tkrow:hover{background:var(--canvas)}
.tkrow.sel{background:var(--canvas);box-shadow:inset 3px 0 0 var(--ember)}
.tkrow .dot{width:6px;height:6px;border-radius:var(--r-pill);background:var(--ember);margin-top:6px;align-self:start}
.tkrow.read .dot{background:transparent}
.tkr1{display:flex;align-items:baseline;gap:8px;min-width:0}
.tkr1 .from{font-size:13.5px;font-weight:600;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tkr1 .when{font-size:11.5px;color:var(--slate);font-variant-numeric:tabular-nums;white-space:nowrap}
.tksubj{
  font-family:var(--display);font-weight:400;letter-spacing:var(--track);
  font-size:14px;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tkprev{font-size:12.5px;color:var(--steel);margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tkmeta{display:flex;align-items:center;gap:6px;margin-top:9px;flex-wrap:wrap}

/* tags: 20px radius, warm washes only */
.pill{
  font-family:var(--body);font-size:11px;font-weight:500;padding:2px 9px;border-radius:var(--r-tag);
  background:var(--mist);color:var(--steel);white-space:nowrap;
}
.pill.blue{background:var(--ash);color:var(--steel)}
.pill.green{background:var(--ok-wash);color:var(--graphite)}
.pill.orange{background:var(--warn-wash);color:var(--brass)}
.pill.red{background:var(--alert-wash);color:var(--ember)}
.pill.purple{background:var(--ivory);color:var(--brass)}
.btag{
  font-family:var(--body);font-size:11px;font-weight:500;padding:2px 9px;border-radius:var(--r-tag);
  white-space:nowrap;display:inline-flex;align-items:center;gap:5px;background:var(--ash);color:var(--steel);
}
.btag i{width:6px;height:6px;border-radius:var(--r-pill);display:block}

/* ---- thread ---- */
.threadcol{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;background:var(--canvas)}
.threadhead{padding:20px 24px 16px;border-bottom:1px solid var(--mist)}
.threadhead h2{font-size:24px;line-height:1.2;text-wrap:balance}
.threadhead .thmeta{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap}
.threadbody{padding:20px 24px 8px;display:flex;flex-direction:column;gap:16px}

/* the asymmetric signature: soft top-left, sharp elsewhere */
.msg{background:var(--ash);border-radius:var(--r-asym);padding:18px 20px}
.msg.agent{background:var(--fog)}
.msghead{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.msghead .avatar{width:24px;height:24px;font-size:10px}
.msghead .mn{font-size:13px;font-weight:600}
.msghead .mw{font-size:11.5px;color:var(--slate);margin-left:auto;font-variant-numeric:tabular-nums}
.msg p{font-size:14px;color:var(--steel);margin-bottom:11px;max-width:68ch}
.msg p:last-child{margin-bottom:0}
.attach{
  display:inline-flex;align-items:center;gap:7px;margin-top:11px;padding:6px 11px;
  background:var(--canvas);border-radius:var(--r-tag);font-size:12px;color:var(--steel);
}

/* ---- AI: ivory paper wash, brass label — the editorial aside ---- */
.aicard{background:var(--ivory);border-radius:var(--r-asym);overflow:hidden}
.aihead{display:flex;align-items:center;gap:8px;padding:16px 20px 10px}
.aihead .at{font-size:14px;color:var(--graphite)}
.aihead .am{font-family:var(--mono);font-size:11px;color:var(--brass);margin-left:auto}
.aibody{padding:0 20px 14px}
.aibody ul{list-style:none;display:flex;flex-direction:column;gap:7px}
.aibody li{font-size:13.5px;color:var(--steel);padding-left:16px;position:relative;max-width:66ch}
.aibody li::before{content:"";position:absolute;left:2px;top:8px;width:5px;height:1px;background:var(--ember)}
.airow{display:flex;gap:10px;padding:0 20px 16px;flex-wrap:wrap}

/* ---- composer ---- */
.composer{flex:none;border-top:1px solid var(--mist);background:var(--canvas);padding:14px 24px 18px}
.comptop{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.comptop .as{font-size:12px;color:var(--slate)}
.comptop .as b{color:var(--steel);font-weight:500;font-family:var(--mono);font-size:11.5px}
.compbox{
  border:1px solid var(--mist);border-radius:var(--r-field);background:var(--fog);
  padding:14px 16px;font-size:14px;color:var(--steel);min-height:160px;width:100%;
  resize:vertical;font-family:var(--body);outline:none;
}
.compbox:focus{border-color:var(--graphite);background:var(--canvas)}
.compfoot{display:flex;align-items:center;gap:10px;margin-top:12px}
select.btn{padding-right:12px}

/* ---- right rail ---- */
.rail{
  border-left:1px solid var(--mist);background:var(--fog);
  display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;
  position:relative;
}
/* drag to resize — the customer record varies a lot in width between brands */
.railgrip{
  position:absolute;left:-3px;top:0;bottom:0;width:7px;z-index:5;
  cursor:col-resize;background:transparent;
}
.railgrip:hover,.railgrip.dragging{background:var(--ember);opacity:.25}
body.resizing{cursor:col-resize;user-select:none}
.railscroll{flex:1 1 auto;min-height:0;overflow-y:auto;padding:20px 16px 28px;display:flex;flex-direction:column;gap:var(--gap)}
.card{background:var(--canvas);border-radius:var(--r-card);overflow:hidden;border:1px solid var(--mist)}
.cardhead{display:flex;align-items:center;gap:8px;padding:14px var(--pad-tight) 10px}
.cardhead h3{font-size:14px}
.cardhead .hact{margin-left:auto;font-size:12px;color:var(--ember);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.kv{display:flex;flex-direction:column}
.kv .r{display:flex;gap:12px;padding:7px var(--pad-tight);align-items:baseline;border-top:1px solid var(--mist)}
.kv .k{font-size:12px;color:var(--slate);flex:none;width:78px}
.kv .v{font-size:12.5px;font-weight:500;text-align:right;flex:1;overflow:hidden;text-overflow:ellipsis}
.kv .v.m{font-family:var(--mono);font-size:11.5px;font-weight:400}
.kv .v.link{color:var(--ember);text-decoration:underline;text-underline-offset:3px}
.lineitem{display:flex;gap:11px;padding:11px var(--pad-tight);border-top:1px solid var(--mist);align-items:center}
.lineitem .li1{font-family:var(--mono);font-size:11.5px;display:block}
.lineitem .li2{font-size:11.5px;color:var(--slate);margin-top:2px;display:block}
.lineitem .liq{margin-left:auto;font-size:13px;font-variant-numeric:tabular-nums;font-weight:500}
.thumb{width:36px;height:46px;border-radius:4px;flex:none;background:var(--ash);display:grid;place-items:center;color:var(--slate);font-size:9px;font-family:var(--mono);object-fit:cover}

/* ================================================== generic page layout === */
.page{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.pagescroll{overflow-y:auto;padding:24px 28px 48px;display:flex;flex-direction:column;gap:var(--gap)}

/* data cards: 20px radius, the one place the system rounds generously */
.statstrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--gap)}
.stat{background:var(--ash);border-radius:var(--r-data);padding:20px 22px}
.stat .sl{font-size:12px;color:var(--brass);display:flex;align-items:center;gap:6px}
.stat .sv{font-size:32px;line-height:1.19;letter-spacing:-.64px;font-variant-numeric:tabular-nums;margin-top:6px;display:block}
.stat .sv.warn{color:var(--ember)}
.stat .sd{font-size:12px;color:var(--slate);margin-top:3px;display:block}

.tablecard{background:var(--canvas);border:1px solid var(--mist);border-radius:var(--r-card);overflow:hidden}
.tcHead{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--mist)}
.tcHead h3{font-size:16px}
.tcHead .cnt{font-size:12.5px;color:var(--slate);font-variant-numeric:tabular-nums}
.tw{overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:680px}
th,td{text-align:left;padding:11px 18px;border-bottom:1px solid var(--mist);white-space:nowrap}
thead th{
  font-family:var(--display);font-weight:400;letter-spacing:.04em;
  font-size:11px;text-transform:uppercase;color:var(--brass);background:var(--fog);
  position:sticky;top:0;z-index:1;
}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--fog)}
tbody tr.sel{background:var(--ivory)}
td.m{font-family:var(--mono);font-size:12px}
td.n{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--mono);font-size:12px}
td.strong{font-weight:600;font-size:13px}
td.todo{color:var(--brass);font-style:italic}

.agebar{display:flex;align-items:center;gap:10px;justify-content:flex-end}
.agebar .tr{width:56px;height:4px;border-radius:var(--r-pill);background:var(--mist);overflow:hidden;flex:none}
.agebar .fl{display:block;height:100%;background:var(--brass)}
.agebar .fl.old{background:var(--brass)}
.agebar .fl.vold{background:var(--ember)}
.agebar span{font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums;color:var(--steel)}

/* notice: ivory wash, ember rule — no alarm colours */
.notice{
  display:flex;gap:12px;align-items:flex-start;padding:18px 20px;
  background:var(--ivory);border-radius:var(--r-asym);color:var(--graphite);
  border-left:2px solid var(--ember);
}
.notice .nb{font-size:14px;line-height:1.5}
.notice .nb b{font-weight:600}
.notice .nb span{color:var(--steel);display:block;margin-top:4px}

.split{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:var(--gap);align-items:start}
@media (max-width:1180px){.split{grid-template-columns:minmax(0,1fr)}}

.matrix table{min-width:560px}
.matrix td.sku{font-family:var(--mono);font-size:12px}
.matrix td.ats{font-weight:600;font-variant-numeric:tabular-nums;font-family:var(--mono);text-align:right;font-size:13px}
.matrix td.ats.zero{color:var(--ember)}
.matrix td.ats.low{color:var(--brass)}
.matrix .whcol{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--mono);font-size:12px;color:var(--steel)}

.tl{display:flex;flex-direction:column;padding:6px 0}
.tlrow{display:grid;grid-template-columns:18px minmax(0,1fr);gap:0 12px;padding:0 18px}
.tlrow .mk{display:flex;flex-direction:column;align-items:center}
.tlrow .mk i{width:7px;height:7px;border-radius:var(--r-pill);background:var(--graphite);margin-top:10px;flex:none}
.tlrow .mk .ln{width:1px;flex:1;background:var(--mist);min-height:14px}
.tlrow:last-child .mk .ln{display:none}
.tlrow .tc{padding:7px 0 14px}
.tlrow .tt{font-size:13.5px;font-weight:500;display:block}
.tlrow .td{font-size:12px;color:var(--slate);font-variant-numeric:tabular-nums;margin-top:2px;display:block}
.tlrow.done .mk i{background:var(--ember)}
.tlrow.pend .mk i{background:var(--canvas);border:1px solid var(--mist)}

.formrow{display:flex;flex-direction:column;gap:7px;padding:14px var(--pad-tight);border-top:1px solid var(--mist)}
.formrow label{font-size:12px;color:var(--slate)}
.field{
  background:var(--fog);border:1px solid var(--mist);border-radius:var(--r-field);
  padding:9px 12px;font-size:13.5px;min-height:38px;display:flex;align-items:center;color:var(--graphite);
}
.field.ta{min-height:80px;align-items:flex-start;color:var(--steel);line-height:1.5;width:100%;resize:vertical;font-family:var(--body)}
.radiorow{display:flex;gap:8px;flex-wrap:wrap}
.radio{
  padding:8px 16px;border-radius:var(--r-button);border:1px solid var(--mist);background:var(--canvas);
  font-size:13px;display:flex;align-items:center;gap:7px;cursor:pointer;
}
.radio.on{border-color:var(--graphite);background:var(--graphite);color:var(--canvas)}
.radio i{width:6px;height:6px;border-radius:var(--r-pill);background:var(--mist)}
.radio.on i{background:var(--ember)}

.cardfoot{display:flex;align-items:center;gap:10px;padding:14px var(--pad-tight);border-top:1px solid var(--mist);background:var(--fog)}
.cardfoot .fnote{font-size:12px;color:var(--slate);flex:1;line-height:1.45}

/* ================================================================ auth === */
body.auth{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--ash)}
.authcard{width:100%;max-width:380px;background:var(--canvas);border-radius:var(--r-asym);padding:48px 40px 36px}
.authmark{
  width:44px;height:44px;border-radius:var(--r-pill);margin:0 0 28px;
  display:grid;place-items:center;color:var(--canvas);background:var(--graphite);
}
.authcard h1{font-size:32px;line-height:1.19;letter-spacing:-.64px;margin-bottom:8px}
.authcard .sub{font-size:14px;color:var(--steel);margin-bottom:32px}
.authform{display:flex;flex-direction:column;gap:16px}
.fieldgroup{display:flex;flex-direction:column;gap:7px}
.fieldgroup label{font-size:12px;color:var(--slate)}
.input{
  width:100%;height:42px;padding:0 16px;border-radius:var(--r-field);
  background:var(--canvas);border:1px solid var(--mist);
  font-size:15px;color:var(--graphite);outline:none;transition:border-color .12s;
}
.input:focus{border-color:var(--graphite)}
.input::placeholder{color:var(--slate)}
.authbtn{
  width:100%;height:44px;border-radius:var(--r-button);background:var(--graphite);color:var(--canvas);
  font-size:16px;margin-top:8px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
}
.authbtn:hover{background:#000}
.authbtn[disabled]{opacity:.5;cursor:default}
.autherr{
  display:none;gap:10px;align-items:flex-start;background:var(--alert-wash);
  border-left:2px solid var(--ember);border-radius:var(--r-asym);
  padding:12px 14px;font-size:13px;line-height:1.45;color:var(--graphite);
}
.autherr.show{display:flex}
.authfoot{margin-top:28px;padding-top:20px;border-top:1px solid var(--mist);font-size:12px;color:var(--slate);line-height:1.6}
.authfoot b{color:var(--steel);font-weight:500}
.spin{
  width:14px;height:14px;border-radius:var(--r-pill);flex:none;
  border:2px solid rgba(255,255,255,.3);border-top-color:var(--canvas);animation:spin .6s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ====================================================== empty / states === */
.empty{flex:1;display:grid;place-items:center;padding:60px 24px}
.emptyinner{max-width:440px;text-align:center}
.emptyicon{width:48px;height:48px;border-radius:var(--r-pill);margin:0 auto 20px;display:grid;place-items:center;background:var(--ash);color:var(--slate)}
.emptyinner h2{font-size:24px;line-height:1.2;margin-bottom:10px}
.emptyinner p{font-size:14px;color:var(--steel);margin:0 auto 18px;max-width:40em;line-height:1.5}
.phasechip{
  display:inline-flex;align-items:center;gap:7px;font-family:var(--body);
  font-size:12px;font-weight:500;background:var(--ivory);color:var(--brass);
  border-radius:var(--r-tag);padding:5px 12px;
}

/* ---- connections ---- */
.connlist{display:flex;flex-direction:column}
.connrow{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:0 12px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--mist)}
.connrow:last-child{border-bottom:0}
.connrow .cname{font-size:14px;font-weight:500;display:block}
.connrow .cmeta{font-size:11.5px;color:var(--slate);font-family:var(--mono);margin-top:3px;display:block}
.connrow .cright{text-align:right;display:flex;align-items:center;gap:12px}
.connrow .cval{font-size:13px;color:var(--steel);font-variant-numeric:tabular-nums}
.connrow .cms{font-size:11px;color:var(--slate);font-family:var(--mono);min-width:46px;text-align:right}
.dotok,.dotbad,.dotwait{width:7px;height:7px;border-radius:var(--r-pill);flex:none;display:block}
.dotok{background:var(--graphite)}
.dotbad{background:var(--ember)}
.dotwait{background:var(--canvas);border:1px solid var(--mist)}
.connerr{grid-column:1/-1;margin-top:9px;font-size:12px;color:var(--ember);font-family:var(--mono);line-height:1.5;word-break:break-word}

/* ---- modal ---- */
.scrim{position:fixed;inset:0;z-index:80;background:rgba(32,32,32,.32);display:none;place-items:center;padding:24px}
.scrim.open{display:grid}
.modal{width:100%;max-width:400px;background:var(--canvas);border-radius:var(--r-asym);padding:32px 28px 24px}
.modal h2{font-size:24px;line-height:1.2;margin-bottom:6px}
.modal .msub{font-size:13.5px;color:var(--steel);margin-bottom:22px}
.modalfoot{display:flex;gap:10px;margin-top:22px}
.modalfoot .btn{flex:1;justify-content:center}

/* ============================================================ responsive === */
@media (max-width:1240px){
  .rail{display:none}
}
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .sidebar{display:none}
  .listcol{display:none}
  .search{width:160px}
  .pagescroll{padding:20px 18px 40px}
  .threadhead,.threadbody,.composer{padding-left:18px;padding-right:18px}
}

/* thread pane — shown only once a ticket is selected */
.threadpane{display:flex;flex-direction:column;min-height:0;flex:1;overflow:hidden}

/* Ticket status sits with the ticket, not with the composer — it describes the
   ticket's state, not the message being written. */
.threadtop{display:flex;align-items:flex-start;gap:16px}
.threadtop h2{flex:1;min-width:0}
.statussel{
  flex:none;height:32px;padding:0 10px 0 14px;
  font-family:var(--display);font-weight:400;letter-spacing:var(--track);font-size:13px;
  background:var(--canvas);cursor:pointer;
}
.statussel:hover{background:var(--ash)}

/* ---- ticket table (helpdesk layout) ---- */
.tkline td{vertical-align:middle}
.tkline.isnew td:nth-child(3){font-weight:600}
.tkline:hover{background:var(--fog)}
#tkTable{min-width:1040px}
#tkTable th:first-child,#tkTable td:first-child{padding-left:20px}
.backbtn{height:30px;padding:0 14px;font-size:13px}

/* the detail pane is a two-column reading surface */
#v-ticket{display:none;grid-template-columns:minmax(0,1fr) var(--rail-w,400px);min-height:0;overflow:hidden}
#v-ticket.on{display:grid}
#v-ticket .threadhead h2{margin-top:12px}
@media (max-width:1240px){
  #v-ticket.on{grid-template-columns:minmax(0,1fr)}
  #v-ticket .rail{display:none}
}

/* ---- helpdesk-style table header ---- */
th.cbcol,td.cbcol{width:40px;padding-left:18px;padding-right:0}
td.cbcol input,th.cbcol input{width:15px;height:15px;accent-color:var(--graphite);cursor:pointer}
th.sortable{cursor:pointer;user-select:none}
th.sortable::after{content:"▾";margin-left:6px;opacity:.35;font-size:9px}
th.sortable.sorted{color:var(--graphite)}
th.sortable.sorted[data-dir="asc"]::after{content:"▴";opacity:1}
th.sortable.sorted[data-dir="desc"]::after{content:"▾";opacity:1}
td.subjcell{max-width:330px;overflow:hidden;text-overflow:ellipsis}
#tkTable{min-width:1240px}
.bulkbar{display:inline-flex;align-items:center;gap:10px}
.bulkcount{font-size:12.5px;color:var(--ember);font-weight:500}
.bulkbtn{height:28px;padding:0 14px;font-size:12.5px}

/* Children of a scrolling flex column must keep their natural height.
   Flex items shrink by default, so without this the cards compress and clip
   their own content rather than letting the container scroll. */
.railscroll > *,
.threadbody > *,
.pagescroll > *{flex:0 0 auto}

/* SAP card: Order, Invoice, the storefront reference, then date and total.
   ONE grid for the whole block — each row is display:contents so every row
   shares the same column tracks. Per-row grids size independently and can
   never line up. No overflow container here: the rail is resizable, and a
   scroll port on the grid drew a stray vertical rule through the rows. */
.doctable{
  display:grid;
  grid-template-columns:auto auto auto auto 1fr;
  align-items:baseline;
  column-gap:14px;
  padding:0 14px;
}
.docrow{display:contents}
.docrow > span{padding:8px 0;border-top:1px solid var(--mist);min-width:0}
.dochead > span{
  font-family:var(--display);font-weight:400;letter-spacing:.04em;
  font-size:10.5px;text-transform:uppercase;color:var(--brass);
  border-top:0;padding-top:12px;padding-bottom:6px;white-space:nowrap;
}
.docnum{font-family:var(--mono);font-size:12px;color:var(--graphite);white-space:nowrap}
.docshop{color:var(--steel)}

.docval{font-family:var(--mono);font-size:11.5px;color:var(--steel);white-space:nowrap}
/* money right-aligned in its own column so the decimals line up */
.doctotal{text-align:right;color:var(--graphite)}
.dochead > span:last-child{text-align:right}

/* Order numbers link through to the Shopify admin — the one place an agent
   needs to leave the portal, so it gets the ember underline. */
.orderlink{
  color:var(--graphite);text-decoration:underline;
  text-decoration-color:var(--ember);text-underline-offset:3px;
}
.orderlink:hover{color:var(--ember)}
.cardhead h3 .orderlink{font-family:var(--display);font-weight:400;letter-spacing:var(--track)}

/* Unfulfilled stock is the one thing on a line an agent cannot afford to skim
   past — it gets the alert colour and a little weight. */
.unfulfilled{color:var(--ember);font-weight:500}

/* transient confirmation — says plainly whether a write reached Shopify */
.toast{
  position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:120;
  background:var(--graphite);color:var(--canvas);
  padding:12px 20px;border-radius:var(--r-pill);font-size:13.5px;max-width:70vw;
}
.toast.warn{background:var(--ember)}

/* ===================================================== admin panel ======= */
/* The wrapper nests inside .pagescroll, so it has to carry the same rhythm —
   otherwise its cards butt together while the cards outside it are spaced. */
.adminstack{display:flex;flex-direction:column;gap:var(--gap)}

.inlinefield{display:flex;align-items:center;gap:10px}
.inlinefield .input{width:110px;text-align:right;font-variant-numeric:tabular-nums}
.inlinefield .unit{font-size:12.5px;color:var(--slate)}
.formrow .fnote{font-size:12px;color:var(--slate);line-height:1.45}
.formrow select.input{padding:0 12px}

/* editable cells: a field that only looks like one once you reach for it */
.cellin{
  width:100%;min-width:150px;height:30px;padding:0 8px;font-size:13px;
  background:transparent;border:1px solid transparent;border-radius:var(--r-field);
  color:var(--graphite);outline:none;
}
.cellin:hover{border-color:var(--mist);background:var(--fog)}
.cellin:focus{border-color:var(--graphite);background:var(--canvas)}
.cellsel{
  height:30px;padding:0 6px;font-size:12.5px;border-radius:var(--r-field);
  background:var(--fog);border:1px solid var(--mist);color:var(--graphite);outline:none;
}
.cellsel:focus{border-color:var(--graphite)}
.cellsel[disabled]{opacity:.5}

/* one brand toggle per agent row */
th.bcol,td.bcol{text-align:center;padding-left:8px;padding-right:8px}
th.bcol{font-size:10px}
td.bcol input{width:15px;height:15px;accent-color:var(--ember);cursor:pointer;margin:0 auto;display:block}
td.bcol .all{color:var(--slate);font-size:12px}

td.acts{text-align:right;white-space:nowrap}
td.acts .btn{height:28px;padding:0 12px;font-size:12px;margin-left:6px}

.bdot{width:10px;height:10px;border-radius:var(--r-pill);display:inline-block;vertical-align:-1px;margin-right:8px}
td.off{opacity:.5}

/* the password an admin reads out once */
.secret{
  font-family:var(--mono);font-size:16px;letter-spacing:.02em;
  background:var(--ivory);border-left:2px solid var(--ember);border-radius:var(--r-asym);
  padding:14px 16px;margin:14px 0 4px;user-select:all;word-break:break-all;
}

/* the brand sheet carries routing as well as presentation — it needs two
   columns and a scroll of its own on a short screen */
.modal.wide{max-width:620px;max-height:calc(100vh - 48px);overflow-y:auto}
.split2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.modal input[type=color].input{padding:4px 6px;height:42px;cursor:pointer}
@media (max-width:620px){.split2{grid-template-columns:1fr}}

/* The admin grids carry more columns than the rest of the app — six brand
   toggles plus three row actions — so they get a tighter gutter. Without it
   the last action sits just past the right edge on a 13" screen. */
#agTable th,#agTable td,#brTable th,#brTable td{padding-left:12px;padding-right:12px}
#agTable .cellin{min-width:120px}

/* A disabled field has to look disabled — the brand slug is fixed once the
   brand exists, and a plain white box says the opposite. */
.input[disabled]{background:var(--fog);color:var(--slate);cursor:not-allowed}

/* "Amount spent" and "Customer since" do not fit the 78px key column the
   other cards use, and wrapping a label onto two lines breaks the baseline
   rhythm of the rows beside it. */
.kv.wide .k{width:116px}

/* ============================================ ATS report ================ */
/* Structure, spacing and sizes are the wholesale portal's ats-cards.css so the
   two reports read identically; the colours come from this app's tokens so it
   does not look pasted in. */
.ats-toolbar{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  padding:12px 16px;background:var(--fog);border:1px solid var(--mist);border-radius:var(--r-card);
}
.ats-toolbar label{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--slate)}
.ats-toolbar .grow{flex:1 1 220px}
.ats-toolbar .chk{gap:6px;color:var(--steel);font-size:12.5px}
.ats-toolbar .chk input{width:15px;height:15px;accent-color:var(--ember);cursor:pointer}
.atsin{
  padding:8px 10px;border:1px solid var(--mist);border-radius:var(--r-field);
  font-size:13.5px;background:var(--canvas);color:var(--graphite);outline:none;min-width:0;
}
.atsin:focus{border-color:var(--graphite)}

.ats-summary-card{background:var(--fog);border:1px solid var(--mist);border-radius:var(--r-data);padding:16px}
.ats-summary-card h3{margin:0 0 12px;font-size:14px}
.ats-summary-stats{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:10px}
.ats-summary-stat{background:var(--canvas);border:1px solid var(--mist);border-radius:var(--r-card);padding:12px;text-align:center}
.ats-summary-stat .val{font-family:var(--display);font-weight:400;letter-spacing:var(--track);font-size:22px;color:var(--graphite);font-variant-numeric:tabular-nums}
.ats-summary-stat .lbl{font-size:11px;color:var(--slate);text-transform:uppercase;letter-spacing:.5px;margin-top:2px}

.ats-group{background:var(--canvas);border:1px solid var(--mist);border-radius:var(--r-data);padding:10px 14px;margin-bottom:6px}
.ats-group-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.ats-group-head .headleft{display:flex;gap:12px;align-items:flex-start;flex:1 1 auto;min-width:0}
.ats-group-head .name{font-size:14px;font-weight:600;color:var(--graphite);line-height:1.25}
.style-meta-line{margin-top:1px;line-height:1.5}
.style-meta-line .stylenum{font-size:12px;color:var(--ember);font-weight:600;font-family:var(--mono)}
.style-meta-line .meta{font-size:11px;color:var(--slate)}
.style-meta-line .price{font-size:11px;color:var(--brass);font-weight:600}
.ats-group-head .total{font-size:11px;color:var(--steel);text-align:right;line-height:1.2;flex:none}
.ats-group-head .total b{display:block;font-size:16px;color:var(--graphite);line-height:1.1;font-variant-numeric:tabular-nums}
.ats-style-img{
  width:66px;height:88px;object-fit:contain;border-radius:6px;
  border:1px solid var(--mist);background:var(--canvas);flex:0 0 auto;cursor:zoom-in;
}

.ats-colorway{padding:4px 0 2px;border-top:1px dashed var(--mist);margin-top:4px}
.ats-colorway:first-of-type{border-top:0;margin-top:4px;padding-top:4px}
.ats-colorway-label{font-size:12px;font-weight:600;color:var(--steel);margin-bottom:3px}

/* swatch on the left, the five-row matrix beside it */
.ats-cwbody{display:flex;align-items:flex-start;gap:8px;overflow-x:auto}
.ats-matrix{border-collapse:separate;border-spacing:0;width:auto;min-width:0;font-variant-numeric:tabular-nums}
/* Five rows per colourway and many colourways per style, so the row height is
   deliberately tight — line-height is set explicitly because the body's 1.5
   was what made these rows twice as tall as they needed to be. */
.ats-matrix th,.ats-matrix td{
  border:1px solid var(--mist);padding:0 8px;height:19px;line-height:19px;
  text-align:center;white-space:nowrap;
  font-size:12px;font-family:var(--mono);font-weight:400;color:var(--graphite);
}
.ats-matrix thead th{
  background:var(--fog);font-family:var(--display);font-weight:400;letter-spacing:.04em;
  font-size:10px;height:17px;line-height:17px;text-transform:uppercase;color:var(--brass);position:static;
}
.ats-matrix th.rowlab{
  text-align:left;font-family:var(--body);font-size:11px;color:var(--slate);
  background:var(--canvas);min-width:108px;font-weight:400;
}
/* ATS Stock and Future Available are the two rows an agent answers from */
.ats-matrix tr.r-key td,.ats-matrix tr.r-key th.rowlab{background:var(--ash);font-weight:600;color:var(--graphite)}
.ats-matrix tr.r-future td,.ats-matrix tr.r-future th.rowlab{background:var(--ivory);font-weight:600;color:var(--graphite)}
.ats-matrix td.z{color:var(--mist)}
.ats-matrix .tot{background:var(--fog);font-weight:600}
.ats-matrix tr.r-key .tot,.ats-matrix tr.r-future .tot{background:var(--ivory)}

/* The ATS report replaced its size chips with a matrix, but the stock-document
   picker still lays its editable cells out as chips. */
.ats-sizes{display:flex;flex-wrap:wrap;gap:4px;margin-top:0}
.ats-size{min-width:40px;flex:0 0 auto;text-align:center;border:1px solid var(--mist);border-radius:5px;padding:3px 6px;background:var(--fog)}
.ats-size .sz{font-size:10px;color:var(--slate);text-transform:uppercase;line-height:1.2}
.ats-size .qty{font-size:13px;font-weight:600;color:var(--graphite);line-height:1.1;font-variant-numeric:tabular-nums}

.ats-size.ats-swatch{width:64px;flex:0 0 64px;max-width:64px;padding:0;overflow:hidden;display:flex;flex-direction:column}
.ats-size.ats-swatch .ats-sw-code{font-size:9px;color:var(--steel);text-align:center;padding:2px;background:var(--canvas);border-bottom:1px solid var(--mist);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ats-size.ats-swatch .ats-sw-fill{flex:none;width:64px;height:64px;background-size:cover;background-position:center}
.ats-size.ats-swatch .ats-sw-fill img{width:100%;height:100%;object-fit:cover;display:block}

.ats-loader{text-align:center;padding:24px;color:var(--slate)}
.ats-empty{text-align:center;padding:24px;color:var(--slate);background:var(--fog);border-radius:var(--r-card)}
.ats-note{padding:14px 18px;background:var(--warn-wash);border:1px solid var(--ivory);border-left:2px solid var(--brass);border-radius:var(--r-asym);color:var(--brass);font-size:12.5px}

.atsimgov{position:fixed;inset:0;background:rgba(32,32,32,.78);display:none;align-items:center;justify-content:center;z-index:99999;cursor:zoom-out;padding:24px}
.atsimgov.open{display:flex}
.atsimgov img{max-width:92vw;max-height:92vh;border-radius:8px;background:var(--canvas)}

/* Print / PDF: the report only, without the app chrome around it. */
@media print{
  .sidebar,.toolbar,.ats-toolbar{display:none!important}
  .app{display:block;height:auto;overflow:visible}
  .main,.view,.page,.scroll{display:block!important;overflow:visible!important;height:auto!important}
  .ats-group{break-inside:avoid;page-break-inside:avoid}
  .ats-summary-card{break-inside:avoid}
}

/* =============================================== stock documents ======== */
.sdgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;padding:16px 18px;border-bottom:1px solid var(--mist)}
.fieldstack{display:flex;flex-direction:column;gap:6px;min-width:0}
.fieldstack > span{font-size:12px;color:var(--slate)}
.fieldstack > span i{font-style:normal;color:var(--mist)}
.fieldstack.wide{grid-column:1/-1}
.tcHead.sub{border-top:1px solid var(--mist)}

/* item picker results sit under the search box, not in a popup — the form is
   already a dialog-like surface and a popup over it reads as a second modal */
.sdpick{display:flex;flex-direction:column;border-bottom:1px solid var(--mist);max-height:230px;overflow-y:auto}
.pickrow{display:flex;align-items:baseline;gap:12px;padding:9px 18px;text-align:left;border-bottom:1px solid var(--mist)}
.pickrow:last-child{border-bottom:0}
.pickrow:hover{background:var(--fog)}
.pickrow .pk{font-family:var(--mono);font-size:12px;flex:none;width:180px}
.pickrow .pn{flex:1;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pickrow .ps{font-size:11.5px;color:var(--slate);font-variant-numeric:tabular-nums;flex:none}

.qtyin{
  width:84px;height:30px;padding:0 8px;text-align:right;
  font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums;
  background:var(--fog);border:1px solid var(--mist);border-radius:var(--r-field);
  color:var(--graphite);outline:none;
}
.qtyin:focus{border-color:var(--graphite);background:var(--canvas)}
/* asking to move more than exists is the one mistake worth shouting about */
.qtyin.over{border-color:var(--ember);color:var(--ember)}
#sdTable th,#sdTable td{padding-left:12px;padding-right:12px}

/* ======================================== stock document picker ========= */
/* Quantities are typed straight onto the size grid, as in the wholesale
   portal — the cell carries the size, the on-hand figure and a stepper. */
.pickhead .pickdesc{padding:0 18px 12px;margin:0;font-size:12.5px;color:var(--slate);line-height:1.5;max-width:88ch}
.pickrow1{display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding:0 18px 12px}
.pickrow1 .arrow{color:var(--slate)}
.pickrow1 .cellsel{height:34px}
.pickrow1 input.cellsel{width:150px}
.pickchips{display:flex;flex-wrap:wrap;gap:6px;padding:0 18px}
.pickchips:empty{padding:0}
.invt-chip{
  display:inline-flex;align-items:center;gap:6px;background:var(--ivory);
  border:1px solid var(--mist);color:var(--brass);border-radius:var(--r-pill);
  padding:3px 10px;font-size:12px;font-weight:600;
}
.invt-chip button{border:0;background:none;color:var(--ember);font-size:14px;cursor:pointer;padding:0;line-height:1}

.ats-size.pick{min-width:62px;padding:4px 6px 5px}
.ats-size.pick .qty{font-size:13px;font-weight:600;color:var(--graphite);line-height:1.2;font-variant-numeric:tabular-nums}
.ats-size.pick.picked{background:var(--ivory);border-color:var(--brass)}
.invt-step{display:flex;align-items:center;justify-content:center;gap:2px;margin-top:4px}
.invt-step button{
  width:18px;height:20px;border:1px solid var(--mist);background:var(--canvas);
  color:var(--steel);border-radius:4px;font-size:12px;font-weight:700;cursor:pointer;padding:0;line-height:1;
}
.invt-step button:hover{border-color:var(--graphite);color:var(--graphite)}
.invt-step input{
  width:34px;height:20px;padding:0 2px;border:1px solid var(--mist);border-radius:4px;
  font-size:12px;text-align:center;font-variant-numeric:tabular-nums;
  background:var(--canvas);color:var(--graphite);outline:none;-moz-appearance:textfield;
}
.invt-step input:focus{border-color:var(--graphite)}
.invt-step input::-webkit-outer-spin-button,
.invt-step input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* A warehouse select with only one option is deliberate, not broken. */
.cellsel.locked{background:var(--ash);color:var(--steel);cursor:default}

/* invitations + resets */
.checkrow{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--steel);margin-top:4px}
.checkrow input{width:15px;height:15px;accent-color:var(--ember);cursor:pointer}
td.m.pendinginvite{color:var(--brass)}
.authfoot a{color:var(--ember);text-decoration:underline;text-underline-offset:3px}

/* returns queue: a credit memo present vs still awaited */
td.m.hascredit{color:var(--graphite);font-weight:600}
td.m.nocredit{color:var(--mist)}
#rtTable th,#rtTable td{padding-left:12px;padding-right:12px}

/* ============================ return request detail sheet =============== */
/* Wider and taller than the app's other dialogs: it carries a header block,
   a summary and a card per style, the way the portal's Order Details does. */
.modal.sheet{
  max-width:960px;width:100%;max-height:calc(100vh - 48px);
  display:flex;flex-direction:column;padding:0;overflow:hidden;
}
.sheethead{display:flex;align-items:center;gap:12px;padding:20px 24px 16px;border-bottom:1px solid var(--mist);flex:none}
.sheethead h2{font-size:22px;flex:1;margin:0}
.sheetbody{padding:20px 24px;overflow-y:auto;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:14px}
.sheetbody > *{flex:0 0 auto}
.sheetfoot{display:flex;align-items:center;gap:12px;padding:14px 24px;border-top:1px solid var(--mist);background:var(--fog);flex:none}
.sheetfoot .fnote{flex:1}

.rdname{font-family:var(--display);font-weight:400;letter-spacing:var(--track);font-size:19px;margin:0}
.rdgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px 20px}
.rdf{min-width:0}
.rdlabel{font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--slate);margin-bottom:2px}
.rdvalue{font-size:13.5px;color:var(--graphite);overflow-wrap:anywhere}
.rdvalue.m{font-family:var(--mono);font-size:12.5px}
.rdvalue .await{color:var(--ember)}
/* Address blocks run to four lines; the grid rows are auto-height, so they
   only need the tighter leading that makes them read as one block. */
.rdvalue.addr{line-height:1.45}
.rdvalue.addr b{font-weight:600}
.rdcomments{font-size:13px;color:var(--steel);background:var(--fog);border-left:2px solid var(--mist);padding:10px 14px;margin:0}
.rdprice{font-size:11.5px;color:var(--steel);line-height:1.6;text-align:right}
.rdprice b{color:var(--graphite);font-weight:600}

/* a table cell that acts as a button */
.linkbtn{
  font:inherit;font-family:var(--mono);font-size:12px;font-weight:600;color:var(--graphite);
  text-decoration:underline;text-decoration-color:var(--ember);text-underline-offset:3px;
  padding:0;background:none;border:0;cursor:pointer;
}
.linkbtn:hover{color:var(--ember)}
@media (max-width:640px){.modal.sheet{max-width:100%}}

/* In the return sheet the size chips are short (no stepper, no five-row
   matrix), so the 64px swatch towered over them. Scaled to sit level with
   them, still square. */
/* The swatch takes its height from the size and total cells beside it rather
   than setting its own. .ats-sizes stretches its children, so the cell will
   match its neighbours as long as nothing inside it demands height — which is
   why the fill starts from a zero flex basis and the JOOR image is positioned
   out of the flow. Left in the flow, the image resolves height:100% against an
   indefinite parent, falls back to its own square aspect ratio, and pushes the
   swatch back to twice the height of the cells beside it. */
/* Applies to every document sheet AND the credit memo builder — the ATS report
   itself keeps its deliberate 64px square. */
#rdBody .ats-size.ats-swatch,
#cbBody .ats-size.ats-swatch{width:44px;flex:0 0 44px;max-width:44px;align-self:stretch}
#rdBody .ats-size.ats-swatch .ats-sw-fill,
#cbBody .ats-size.ats-swatch .ats-sw-fill{
  width:auto;height:0;flex:1 1 0;min-height:0;position:relative;overflow:hidden;
}
#rdBody .ats-size.ats-swatch .ats-sw-fill img,
#cbBody .ats-size.ats-swatch .ats-sw-fill img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
#rdBody .ats-size.ats-swatch .ats-sw-code,
#cbBody .ats-size.ats-swatch .ats-sw-code{font-size:8.5px;padding:1px;flex:none}

/* a 20-digit tracking number needs its own room and should not wrap */
#rtTable td.m a.orderlink{font-family:var(--mono);font-size:11.5px;white-space:nowrap}
.rdvalue .carrier{font-family:var(--body);font-size:11px;color:var(--slate);margin-left:6px}

/* A size that never shipped on an order — the one cell worth spotting. */
.ats-size.unshipped{border-color:var(--ember)}
.ats-size.unshipped .qty{color:var(--ember)}

/* document totals: subtotal, discount, charges, grand total */
.rdtotals{
  margin-left:auto;width:100%;max-width:340px;
  background:var(--fog);border:1px solid var(--mist);border-radius:var(--r-card);padding:6px 16px;
}
.rdtotals .tr{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:6px 0;border-top:1px solid var(--mist);font-size:13px;color:var(--steel);
}
.rdtotals .tr:first-child{border-top:0}
.rdtotals .tr span i{font-style:normal;color:var(--slate);font-size:11.5px}
.rdtotals .tr b{font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--graphite);font-variant-numeric:tabular-nums}
.rdtotals .tr b.minus{color:var(--ember)}
.rdtotals .tr.grand{border-top:1px solid var(--graphite);margin-top:2px;padding-top:9px;padding-bottom:9px}
.rdtotals .tr.grand span{font-weight:600;color:var(--graphite)}
.rdtotals .tr.grand b{font-size:15px}

/* credit-memo selection */
#rtTable th.cbcol,#rtTable td.cbcol{width:34px;padding-left:14px;padding-right:0;text-align:left}
#rtTable td.cbcol input,#rtTable th.cbcol input{width:15px;height:15px;accent-color:var(--ember);cursor:pointer}
#rtRows tr.picked{background:var(--ivory)}
#rtRows tr.picked td{border-color:var(--ivory)}
.bulkbar{display:flex;align-items:center;gap:10px}
.bulkcount{font-size:12.5px;color:var(--slate);font-variant-numeric:tabular-nums}

/* ---- credit memo dialog ----------------------------------------------- */
/* Wider than the standard modal: every row has to carry a request number, a
   customer, an outcome and an amount without any of them wrapping. */
#cmScrim .modal{max-width:520px}
.cmlist{
  display:flex;flex-direction:column;gap:1px;
  background:var(--mist);border:1px solid var(--mist);border-radius:var(--r-card);
  margin:16px 0 0;max-height:300px;overflow-y:auto;
}
.cmlist:empty{display:none}
.cmrow{
  display:flex;align-items:baseline;gap:10px;
  background:var(--canvas);padding:10px 14px;font-size:13px;
}
.cmrow .rr{font-variant-numeric:tabular-nums;font-weight:500;min-width:54px}
.cmrow .who{color:var(--steel);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmrow .note{color:var(--slate);font-size:12px;white-space:nowrap}
.cmrow .amt{font-variant-numeric:tabular-nums;min-width:66px;text-align:right}
/* A posted memo number is the one thing an agent will come back looking for. */
.cmrow.posted{background:var(--ok-wash)}
.cmrow.posted .note{color:var(--graphite);font-weight:500}
/* Blocked rows stay in the list on purpose — silently dropping them would
   leave the agent thinking they had credited something they had not. */
.cmrow.blocked{background:var(--alert-wash)}
.cmrow.blocked .rr,.cmrow.blocked .who{color:var(--slate)}
.cmrow.blocked .note{color:var(--ember);white-space:normal}
.cmwarn{margin:14px 0 0;font-size:12.5px;line-height:1.5;color:var(--brass)}
#cmScrim .modalfoot{margin-top:18px}

/* ---- sortable / filterable column headers ------------------------------ */
/* The header is the filter bar for anything the top-of-page controls do not
   already cover, so each cell carries two controls: sort on the label, and a
   funnel that opens the one shared panel below. */
th.sortable{padding:0;position:relative}
th.sortable .thsort{
  appearance:none;background:none;border:0;cursor:pointer;
  font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;
  display:flex;align-items:center;gap:5px;
  padding:11px 6px 11px 18px;width:100%;text-align:left;
}
th.numc.sortable .thsort{justify-content:flex-end;padding-left:8px}
th.sortable .thsort:hover{color:var(--graphite)}
th.sortable .sc{flex:none;opacity:.32}
th.sortable .sc path{fill:currentColor}
th.sortable:hover .sc{opacity:.6}
/* The caret shows the direction by dropping the half that does not apply. */
th.sorted-asc .sc,th.sorted-desc .sc{opacity:1;color:var(--ember)}
th.sorted-asc .sc .dn,th.sorted-desc .sc .up{display:none}
th.sortable .thfilt{
  appearance:none;background:none;border:0;cursor:pointer;color:var(--brass);
  position:absolute;right:5px;top:50%;transform:translateY(-50%);
  padding:4px;line-height:0;border-radius:4px;opacity:0;
}
th.sortable .thfilt path{fill:currentColor}
th.sortable:hover .thfilt,th.sortable .thfilt:focus-visible{opacity:.55}
th.sortable .thfilt:hover{opacity:1;background:var(--ash)}
/* An active filter has to be visible without hovering — otherwise a short
   list reads as an empty queue. */
th.filtered .thfilt{opacity:1;color:var(--ember)}
th.filtered{background:var(--alert-wash)}
.tcHead .cnt.filtered{color:var(--ember)}
#rtRows tr.emptyrow td,#odRows tr.emptyrow td,#cuRows tr.emptyrow td,
#cdBody tr.emptyrow td{text-align:center;color:var(--slate);padding:26px 18px}

.thpop{
  position:fixed;z-index:90;width:250px;background:var(--canvas);
  border:1px solid var(--mist);border-radius:var(--r-card);
  box-shadow:0 8px 28px rgba(32,32,32,.13);
}
.thpophead{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 12px;border-bottom:1px solid var(--mist);
  font-family:var(--display);font-weight:400;font-size:11px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--brass);
}
.thpopbody{padding:12px;display:flex;flex-direction:column;gap:8px;max-height:280px;overflow-y:auto}
.thpopbody .atsin{width:100%}
.thrange{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px}
.thlbl{font-size:11.5px;color:var(--slate)}
.thcheck{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;padding:2px 0}
.thcheck input{width:14px;height:14px;accent-color:var(--ember);flex:none}
.thcheck span:first-of-type{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thcheck .thn{color:var(--slate);font-size:11.5px;font-variant-numeric:tabular-nums}
.thnone{color:var(--slate);font-size:12.5px;margin:0}
.btn.xs{padding:3px 10px;font-size:11.5px;min-height:0}

/* ---- returns: data sits under its own header --------------------------- */
/* The header label was centred in its cell while the values below stayed
   left, so each column read as two separate lines.

   Everything now starts at the same left edge — header and value alike —
   across all three data tables, so the eye has one vertical line to follow
   down a column instead of a different one per row width. */
#rtTable th.sortable .thsort,#rtTable th.numc.sortable .thsort,
#odTable th.sortable .thsort,#odTable th.numc.sortable .thsort,
#cuTable th.sortable .thsort,#cuTable th.numc.sortable .thsort{
  justify-content:flex-start;padding:11px 18px 11px 10px;
}
#rtTable td,#rtTable td.numc,#odTable td,#odTable td.numc,
#cuTable td,#cuTable td.numc{text-align:left}
/* Digits still line up with each other within the column. */
#rtTable td.numc,#odTable td.numc,#cuTable td.numc{font-variant-numeric:tabular-nums}
/* The select box is a control, not a value — it stays with the row edge. */
#rtTable th.cbcol,#rtTable td.cbcol{text-align:left}

/* ---- credit memo builder ----------------------------------------------- */
/* The same style cards as the return sheet, with the read-only numbers turned
   into fields. Everything here is scoped to #cbBody so the return, order and
   memo sheets keep the plain matrix they already have. */
#cbScrim .modal.sheet{max-width:960px}
#cbBody .cbgroup{position:relative}
#cbBody .cbhead-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
#cbBody .cbprice{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--slate)}
#cbBody .cbprice input{
  width:82px;padding:4px 8px;font-size:13px;text-align:right;
  font-variant-numeric:tabular-nums;
  border:1px solid var(--mist);border-radius:var(--r-field);background:var(--canvas);color:var(--graphite);
}
#cbBody .cbline{font-size:11.5px;color:var(--steel);font-variant-numeric:tabular-nums}

/* The size cell keeps its shape; only the number becomes typeable. */
#cbBody .ats-size.cbcell{padding:3px 4px 4px}
#cbBody .cbqty{
  width:100%;min-width:34px;padding:2px;border:0;background:transparent;
  font:inherit;font-size:13px;font-weight:600;color:var(--graphite);
  text-align:center;font-variant-numeric:tabular-nums;
  -moz-appearance:textfield;
}
#cbBody .cbqty::-webkit-outer-spin-button,
#cbBody .cbqty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
#cbBody .cbqty:focus{outline:2px solid var(--ember);outline-offset:1px;border-radius:3px}
/* A zeroed cell is still on screen — an agent needs to see what they dropped. */
#cbBody .ats-size.zero{opacity:.4}
#cbBody .cbgroup.removed{opacity:.42}
#cbBody .cbgroup.removed .ats-sizes{text-decoration:line-through}

#cbBody .cbcharges{margin-top:var(--gap);border-top:1px solid var(--mist);padding-top:16px}
#cbBody .cbcharges h4{
  font-family:var(--display);font-weight:400;font-size:11px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--brass);margin:0 0 12px;
}
#cbBody .cbfields{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
#cbBody .cbfield{display:flex;flex-direction:column;gap:4px}
#cbBody .cbfield span{font-size:11px;color:var(--slate)}
#cbBody .cbfield input{
  padding:7px 10px;font:inherit;font-size:13px;text-align:right;
  font-variant-numeric:tabular-nums;
  border:1px solid var(--mist);border-radius:var(--r-field);background:var(--canvas);color:var(--graphite);
}
#cbBody .cbfield input:focus,#cbBody .cbprice input:focus{outline:none;border-color:var(--brass)}

/* ---- a service document's lines on the sheet --------------------------- */
/* No image, no swatch, no size grid — a service line has no item behind it,
   so it is a description, the account it credits, and an amount. */
#rdBody .svclines{margin-top:var(--gap);border-top:1px solid var(--mist)}
#rdBody .svcline{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:12px 2px;border-bottom:1px solid var(--mist);
}
#rdBody .svcdesc{font-size:14px;font-weight:500;color:var(--graphite);min-width:0}
#rdBody .svcacct{
  display:block;margin-top:2px;
  font-family:var(--mono);font-size:11px;font-weight:400;color:var(--slate);
}
#rdBody .svcamt{
  font-size:14px;font-weight:600;color:var(--graphite);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}

/* ---- Item / Service: two different documents --------------------------- */
/* SAP's own choice on the credit memo, so it sits above the lines rather than
   among them — picking it changes what the whole document is. */
#cbBody .cbtype{display:flex;align-items:center;gap:10px;margin:14px 0 4px}
#cbBody .cbtypebtn{
  font:inherit;font-size:13px;padding:6px 16px;cursor:pointer;
  border:1px solid var(--mist);background:var(--canvas);color:var(--slate);
}
#cbBody .cbtypebtn:first-of-type{border-radius:var(--r-pill) 0 0 var(--r-pill)}
#cbBody .cbtypebtn:last-of-type{border-radius:0 var(--r-pill) var(--r-pill) 0;margin-left:-1px}
#cbBody .cbtypebtn.on{
  background:var(--graphite);border-color:var(--graphite);color:var(--canvas);font-weight:500;
}
#cbBody .cbtypebtn:focus-visible{outline:2px solid var(--brass);outline-offset:2px;z-index:1}
#cbBody .cbtype .fnote{font-size:12px;color:var(--slate)}

/* ---- service lines: typed, not drawn ----------------------------------- */
#cbBody .cbservice[hidden]{display:none}
#cbBody .cbservice{margin-top:var(--gap)}
#cbBody .cbsvchead,#cbBody .cbsvcrow{
  display:grid;grid-template-columns:1fr 220px 130px auto;gap:10px;align-items:center;
}
#cbBody .cbsvchead{
  padding:0 2px 6px;font-size:11px;color:var(--slate);
  text-transform:uppercase;letter-spacing:.04em;
}
#cbBody .cbsvchead .amt{text-align:right}
#cbBody .cbsvcrow{margin-bottom:8px}
#cbBody .cbsvcrow input,#cbBody .cbsvcrow select{
  font:inherit;font-size:13px;padding:7px 10px;
  border:1px solid var(--mist);border-radius:var(--r-field);
  background:var(--canvas);color:var(--graphite);min-width:0;
}
#cbBody .cbsvcrow .cbsvcamt{text-align:right;font-variant-numeric:tabular-nums}
#cbBody .cbsvcrow input:focus,#cbBody .cbsvcrow select:focus{outline:none;border-color:var(--brass)}
#cbBody #cbSvcAdd{margin-top:2px}
@media (max-width:720px){
  #cbBody .cbsvchead{display:none}
  #cbBody .cbsvcrow{
    grid-template-columns:1fr auto;gap:8px;
    padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--mist);
  }
  #cbBody .cbsvcrow .cbsvcdesc{grid-column:1 / -1}
}

/* ---- remarks: the memo's own words ------------------------------------- */
/* This is ORIN.Comments, so it gets the width of the document rather than a
   column in the charges grid — it is prose, not a figure. */
#cbBody .cbremarks{margin-top:var(--gap);border-top:1px solid var(--mist);padding-top:16px}
#cbBody .cbremarks .cbfield span{display:flex;align-items:baseline;gap:8px}
#cbBody .cbremarks textarea{
  width:100%;padding:8px 10px;font:inherit;font-size:13px;line-height:1.5;
  border:1px solid var(--mist);border-radius:var(--r-field);
  background:var(--canvas);color:var(--graphite);resize:vertical;min-height:52px;
}
#cbBody .cbremarks textarea:focus{outline:none;border-color:var(--brass)}
#cbBody .cbremarks textarea:disabled{background:var(--fog)}
#cbBody .cbrnote{margin:5px 0 0;font-size:11.5px;color:var(--slate)}
/* Out of room is worth noticing — SAP truncates at 254 without complaint. */
#cbBody .cbrnote .bad{color:var(--ember)}

#cbBody .cbtotals{
  margin-top:var(--gap);margin-left:auto;width:min(320px,100%);
  background:var(--fog);border-radius:var(--r-card);padding:14px 16px;
}
#cbBody .cbtrow{
  display:flex;justify-content:space-between;gap:16px;
  font-size:13px;padding:5px 0;font-variant-numeric:tabular-nums;
}
#cbBody .cbtrow.grand{
  border-top:1px solid var(--mist);margin-top:6px;padding-top:10px;
  font-size:15px;font-weight:600;color:var(--graphite);
}

/* The in-row credit action. Narrow, and quiet until the row is worth acting
   on — an always-loud button in every row would compete with the data. */
#rtTable th.cmcol,#rtTable td.cmcol,
#odTable th.cmcol,#odTable td.cmcol{width:96px}
/* Same box as a sortable header — the caret is kept for its metrics only, so
   the label lands on the identical baseline instead of floating a few pixels
   low next to its neighbours. */
#rtTable th.cmcol,#odTable th.cmcol{padding:0}
#rtTable th.cmcol .thlabel,#odTable th.cmcol .thlabel{
  display:flex;align-items:center;justify-content:center;gap:5px;padding:11px 20px;
}
#rtTable th.cmcol .thlabel .sc,#odTable th.cmcol .thlabel .sc{visibility:hidden}
#rtTable td.cmcol,#odTable td.cmcol{padding-left:8px;padding-right:8px}
#rtTable td.cmcol .btn,#odTable td.cmcol .btn{white-space:nowrap;opacity:.75}
#rtTable tr:hover td.cmcol .btn,#rtTable td.cmcol .btn:focus-visible,
#odTable tr:hover td.cmcol .btn,#odTable td.cmcol .btn:focus-visible{opacity:1}

/* ---- the app's confirm dialog ------------------------------------------ */
/* Replaces window.confirm everywhere a write needs a yes. The facts go in a
   label/value list rather than a run-on sentence, so what is about to happen
   can be checked at a glance instead of read. */
#okScrim .modal{max-width:460px}
#okScrim .msub[hidden]{display:none}
.oklist{
  display:flex;flex-direction:column;gap:1px;margin:16px 0 0;
  background:var(--mist);border:1px solid var(--mist);border-radius:var(--r-card);
}
.oklist:empty{display:none}
.okrow{
  display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  background:var(--canvas);padding:9px 14px;font-size:13px;
}
.okrow .k{color:var(--slate);min-width:0;display:flex;flex-direction:column;gap:1px}
.okrow .kt{color:var(--steel)}
/* The SKU code under its size — there when you need to check it, never
   competing with the name above it. */
.okrow .kn{font-family:var(--mono);font-size:11px;color:var(--slate)}
.okrow .v{color:var(--graphite);font-weight:500;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
/* A lone string row is a sentence, not a pair — let it run the full width. */
.okrow .k:only-child .kt{color:var(--graphite)}
/* The tally closes the list, so it reads as a sum rather than another item. */
.okrow.total{background:var(--fog)}
.okrow.total .kt,.okrow.total .v{color:var(--graphite);font-weight:600}
/* A long pick list scrolls rather than pushing the buttons off screen. */
.oklist{max-height:46vh;overflow-y:auto}
#okWarn[hidden]{display:none}
.btn.primary.danger{background:var(--ember);border-color:var(--ember);color:#fff}
.btn.primary.danger:hover{filter:brightness(.94)}

/* The confirm dialog while it is working, and when it reports back. */
#okGo.busy{opacity:.75;cursor:progress}
#okCancel[hidden]{display:none}
#okWarn.bad{color:var(--ember)}

/* An expected date, not a delivered one — it reads as the estimate it is. */
#rtRows td .due,#odRows td .due,#cdBody .due{color:var(--slate);font-family:var(--body);font-size:12px}

/* ---- returns table: columns at their content width --------------------- */
/* A full-width table spreads its slack evenly, which left every column
   swimming in space. Handing the whole surplus to Customer squeezes the rest
   down to what they actually hold, with no ragged right edge. */
#rtTable th.grow,#rtTable td.grow,#odTable th.grow,#odTable td.grow,
#cuTable th.grow,#cuTable td.grow{width:100%}
#rtTable th,#rtTable td,#odTable th,#odTable td,
#cuTable th,#cuTable td{padding-left:10px;padding-right:10px}
#rtTable th.sortable .thsort,#odTable th.sortable .thsort,
#cuTable th.sortable .thsort{padding-left:12px;padding-right:12px;gap:4px}
#rtTable th.cmcol .thlabel,#odTable th.cmcol .thlabel{padding-left:10px;padding-right:10px}
/* The funnel sat over the right padding; at this width it needs its own room
   so it never lands on the label. */
#rtTable th.sortable .thsort,#odTable th.sortable .thsort,
#cuTable th.sortable .thsort{padding-right:18px}
#rtTable th.sortable .thfilt,#odTable th.sortable .thfilt,
#cuTable th.sortable .thfilt{right:2px}
#rtTable th.cbcol,#rtTable td.cbcol{padding-left:12px}
#rtTable th.cmcol,#rtTable td.cmcol,
#odTable th.cmcol,#odTable td.cmcol{width:1%}

/* The header text was the floor under every column width: "SHOPIFY ORDER" is
   far wider than "M13964", so the data sat in a cell sized for its label.
   Letting the label wrap drops that floor to its longest single word, which
   is roughly the width of the values underneath. */
#rtTable thead th,#odTable thead th,#cuTable thead th{white-space:normal}
#rtTable th.sortable .thsort > span,#rtTable th.cmcol .thlabel > span,
#odTable th.sortable .thsort > span,#odTable th.cmcol .thlabel > span{white-space:normal;text-wrap:balance}
#rtTable th.sortable .thsort,#rtTable th.cmcol .thlabel,
#odTable th.cmcol .thlabel{align-items:center}
/* Two-line labels need the rows to keep a consistent height. */
#rtTable thead th,#odTable thead th,#cuTable thead th{vertical-align:middle}

/* ---- credit memo builder: the pager --------------------------------- */
.cbpager{display:flex;align-items:center;gap:8px}
.cbpage{
  font-size:12.5px;color:var(--slate);font-variant-numeric:tabular-nums;
  min-width:58px;text-align:center;
}
#cbBody .cbhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:4px}
#cbBody .cbhead .rdname{margin:0}
#cbBody .cbrr{
  font-family:var(--mono);font-size:12px;color:var(--slate);
  background:var(--fog);border-radius:var(--r-pill);padding:3px 10px;
}
#cbBody .cbskip{
  margin-left:auto;display:flex;align-items:center;gap:7px;
  font-size:12.5px;color:var(--steel);cursor:pointer;
}
#cbBody .cbskip input{width:14px;height:14px;accent-color:var(--ember)}
/* A skipped document stays legible — an agent has to be able to see what they
   chose to leave out, not just that something is missing from the count. */
#cbBody.skipped .ats-group,#cbBody.skipped .cbcharges,#cbBody.skipped .cbtotals{opacity:.4}

/* ---- credit memo raised from an order ---------------------------------- */
/* The one decision that separates a refund from a goods receipt, so it sits
   on its own line above the styles rather than among the price fields. */
#cbBody .cbstock{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  margin:12px 0 4px;padding:10px 14px;
  background:var(--fog);border-radius:var(--r-card);
}
#cbBody .cbstock .cbskip{margin-left:0}
#cbBody .cbstock .fnote{flex:1;min-width:220px;font-size:12px;color:var(--slate)}
/* With nothing coming back the warehouse only files the line, so it reads a
   shade quieter than the price beside it — but it is still a live choice. */
#cbBody.nostock .cbwhs > span{color:var(--slate)}
/* What the order carried, next to the box asking what to credit. */
#cbBody .cbhint{
  font-family:var(--mono);font-size:10.5px;color:var(--slate);
  font-weight:400;margin-left:6px;
}
#cbBody .cbtrow.warnrow{color:var(--ember);font-size:12px}
#cbBody .cbtrow.warnrow span:first-child{flex:1}
.sheetfoot .fnote.bad{color:var(--ember)}

/* ---- style card price block -------------------------------------------- */
/* .ats-group-head .total forces its <b> to display:block at 16px, which broke
   "Price: $65.00" across two lines at two different sizes. Here the label and
   the figure sit on one line at one size, and the three rows read as a set. */
.ats-group-head .total.rdprice{font-size:12px;line-height:1.5;min-width:132px}
.ats-group-head .total.rdprice .prow{display:flex;justify-content:flex-end;gap:12px;white-space:nowrap}
.ats-group-head .total.rdprice .prow span{color:var(--slate)}
.ats-group-head .total.rdprice .prow b{
  display:inline;font-size:12px;font-weight:600;color:var(--graphite);
  font-variant-numeric:tabular-nums;min-width:62px;text-align:right;line-height:inherit;
}
/* The total closes the stack, so it gets a rule rather than extra weight. */
.ats-group-head .total.rdprice .prow.grand{
  margin-top:3px;padding-top:4px;border-top:1px solid var(--mist);
}
/* A surcharge adds to the document, so it reads in the ordinary text colour
   with a plus — not in the alert colour a deduction uses. */
.rdtotals .tr b.plus{color:var(--graphite)}

/* ---- Shopify: returnable order lines ----------------------------------- */
.soexisting{padding:14px 18px;border-bottom:1px solid var(--mist);background:var(--fog)}
.soexisting h4{
  font-family:var(--display);font-weight:400;font-size:11px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--brass);margin:0 0 6px;
}
.sorow-note{font-size:12.5px;color:var(--steel);line-height:1.6}

.sorow{
  display:flex;align-items:flex-start;gap:14px;
  padding:14px 18px;border-bottom:1px solid var(--mist);
}
.sorow:last-child{border-bottom:0}
.sorow.picked{background:var(--ivory)}
/* Spent and service lines stay visible: an order line that cannot be returned
   is still part of what shipped, and hiding it would misrepresent the order. */
.sorow.spent{opacity:.5}
.sorow.service .soname{color:var(--steel)}
.sothumb{
  width:52px;height:68px;flex:none;object-fit:contain;border-radius:6px;
  border:1px solid var(--mist);background:var(--canvas);
}
.sothumb.noimg{visibility:hidden}
.somid{flex:1 1 auto;min-width:0}
.soname{font-size:13.5px;font-weight:600;color:var(--graphite);line-height:1.3}
.someta{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px;font-size:11.5px;color:var(--slate)}
.someta .sku{font-family:var(--mono);color:var(--ember)}
.someta .servicetag{
  background:var(--fog);border-radius:var(--r-pill);padding:1px 8px;color:var(--brass);
}
.soright{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;flex:none}
.sofield{display:flex;flex-direction:column;gap:3px}
.sofield span{font-size:10.5px;color:var(--slate);text-transform:uppercase;letter-spacing:.04em}
.soqty{width:74px;text-align:center;font-variant-numeric:tabular-nums}
.soreason{width:150px}
.sonote{width:190px}
.sospent{font-size:12px;color:var(--slate);padding-bottom:6px}

/* The orders list re-uses the returns table wholesale; only its own return
   column needs anything of its own. */
#odTable td .btn.xs{white-space:nowrap;opacity:.75}
#odTable tr:hover td .btn.xs,#odTable td .btn.xs:focus-visible{opacity:1}
#odRows .hascredit{color:var(--graphite);font-weight:500}
#odRows .nocredit{color:var(--ember)}

/* .view.on is a row-direction flex, so its .pagescroll child sized itself to
   its content and stopped short of the window — visible as soon as a table's
   columns were narrow enough not to fill the space on their own. */
.view.on > .pagescroll{flex:1 1 auto;min-width:0;width:100%}

/* A storefront order with no SAP document behind it — the warehouse cannot
   see this order at all, so the row says so rather than showing a blank. */
#odRows tr.missing{background:var(--alert-wash)}
#odRows .nosap{color:var(--ember);font-family:var(--body);font-weight:500;font-size:12px}

/* ---- customers ---------------------------------------------------------- */
/* A repeat buyer is the one thing worth spotting down a list of names. */
.repeatchip{
  margin-left:8px;font-size:11px;color:var(--brass);background:var(--fog);
  border-radius:var(--r-pill);padding:1px 8px;white-space:nowrap;
}
#cdScrim .modal.sheet{max-width:900px}
/* The nested tables inside the customer sheet are plain readouts, so they do
   not inherit the sortable-header machinery of the screens behind them. */
#cdBody .cdblock{margin-top:var(--gap)}
#cdBody .cdblock table{min-width:0}
#cdBody .cdblock th{font-size:10.5px}
#cdBody .nosap{color:var(--ember);font-size:12px}
#cdBody .await{color:var(--ember)}
#cdBody .hascredit{color:var(--graphite);font-weight:500}

/* ---- customers: columns at their content width -------------------------- */
/* Customer carried .grow, so it absorbed every spare pixel in the table and a
   short name sat in a column three times its width. The slack now collects in
   a filler at the right edge, leaving each real column at its own size. */
#cuTable th.filler,#cuTable td.filler{width:100%;padding:0;border-bottom:1px solid var(--mist)}
#cuTable thead th.filler{background:var(--fog)}
#cuTable td,#cuTable th{white-space:nowrap}

/* The app's confirm always sits above whatever opened it.
   Every .scrim shares z-index 80, so stacking fell to DOM order — and the
   credit memo builder is declared after the confirm, which meant clicking
   "Create credit memo" opened the confirmation invisibly behind the sheet and
   looked like nothing had happened at all. */
#okScrim{z-index:140}
/* A store-credit return being credited in SAP is worth a second look. */
#cbBody .cbwarn{border-left-color:var(--ember);color:var(--graphite);margin-top:12px}
/* Put-away warehouse, above the price on each style card. */
#cbBody .cbwhs{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--slate)}
#cbBody .cbwhsel{
  max-width:210px;padding:4px 8px;font:inherit;font-size:12.5px;
  border:1px solid var(--mist);border-radius:var(--r-field);
  background:var(--canvas);color:var(--graphite);
}
#cbBody .cbwhsel:focus{outline:none;border-color:var(--brass)}
#cbBody .cbnowhs{font-family:var(--mono);font-size:12.5px;color:var(--steel)}
/* Warehouse and Price on one row — they are the pair that decides what the
   line credits, so they read together rather than as a stack of settings. */
#cbBody .cbcontrols{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end}

/* Options the confirm dialog asks for itself — the app posing the question,
   never a browser prompt. */
.okchoices{display:flex;flex-direction:column;gap:2px;margin:14px 0 0}
.okchoices[hidden]{display:none}
.okchoice{
  display:flex;align-items:flex-start;gap:10px;padding:9px 12px;cursor:pointer;
  border:1px solid var(--mist);border-radius:var(--r-card);background:var(--canvas);
}
.okchoice:hover{background:var(--fog)}
.okchoice input{margin-top:2px;width:15px;height:15px;accent-color:var(--ember);flex:none}
.okchoicetext{display:flex;flex-direction:column;gap:1px;min-width:0}
.okchoicetext .k{font-size:13px;color:var(--graphite)}
.okchoicetext .n{font-size:11.5px;color:var(--slate);overflow-wrap:anywhere}
.okchoice:has(input:checked){border-color:var(--brass);background:var(--fog)}

/* ---- spam folder -------------------------------------------------------- */
#spHeldRows tr.picked,#spBlockRows tr.picked{background:var(--ivory)}
#spHeldTable td.cbcol input,#spBlockTable td.cbcol input,
#spHeldTable th.cbcol input,#spBlockTable th.cbcol input{
  width:15px;height:15px;accent-color:var(--ember);cursor:pointer;
}
.spfrom{font-size:13px;color:var(--graphite);font-weight:500}
.spmail{font-family:var(--mono);font-size:11.5px;color:var(--slate)}
.spsubj{font-size:13px;color:var(--graphite)}
/* The first line of the message, so a wrongly held customer is recognisable
   without having to release it to find out. */
.spsnip{font-size:11.5px;color:var(--slate);max-width:52ch;overflow:hidden;
        text-overflow:ellipsis;white-space:nowrap}
#spHeldRows tr.emptyrow td,#spBlockRows tr.emptyrow td{
  text-align:center;color:var(--slate);padding:26px 18px;
}
.btn.danger{border-color:var(--ember);color:var(--ember)}
.btn.danger:hover{background:var(--alert-wash)}

/* Quantity stepper on each size cell in the credit memo builder. */
#cbBody .cbstep{display:flex;gap:1px;margin-top:3px}
#cbBody .cbstep button{
  flex:1;appearance:none;border:1px solid var(--mist);background:var(--canvas);
  color:var(--steel);font:inherit;font-size:13px;line-height:1;padding:2px 0;
  cursor:pointer;border-radius:4px;
}
#cbBody .cbstep button:hover:not(:disabled){background:var(--fog);color:var(--graphite)}
#cbBody .cbstep button:active:not(:disabled){background:var(--ivory)}
#cbBody .cbstep button:disabled{opacity:.35;cursor:default}
#cbBody .ats-size.cbcell{padding-bottom:5px}

/* A pale colour fill needs an edge of its own.
   "VINTAGE WHITE" resolves to #ffffff, which on a white card looked like a
   missing swatch rather than a white one — the same failure a genuinely
   absent image shows, so the two were indistinguishable. */
.ats-sw-fill{box-shadow:inset 0 0 0 1px rgba(32,32,32,.14)}