:root{
  --panel:#eef0f2;--ink:#222;--muted:#6b7280;--border:rgba(0,0,0,.12);--zebra:#f9fafb;
  --icon:20px;--fs-title:24px;--fs-cell:15px;--fs-calc:16px;--sel:#dbebff;--selOutline:#0b6cff
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:#fff}
.wrap{min-height:100vh;display:flex;flex-direction:column}
#errorBanner{display:none;background:#b91c1c;color:#fff;padding:8px 12px;font-size:14px}

tbody tr:nth-child(even){background:var(--zebra)}
tbody tr.sel{background:var(--sel);outline:2px solid var(--selOutline);outline-offset:-2px}

td .fakeSelect{cursor:pointer}

/* =========================
   LANDSCAPE
   ========================= */
@media(orientation:landscape){
  :root{--icon:20px;--fs-title:24px;--fs-cell:15px;--fs-calc:16px}

  .header{background:var(--panel);padding:14px clamp(12px,2vw,24px);border-bottom:1px solid var(--border)}
  .brandRow{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .brandLeft{display:flex;align-items:center;gap:12px;min-width:0}
  .logo{width:56px;height:56px;object-fit:cover;border-radius:50%;cursor:pointer}
  .title{font-size:var(--fs-title);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  .brandRight{text-align:right;white-space:nowrap}
  .today{font-size:20px;margin-bottom:4px}
  .rates{font-size:13px;color:var(--muted);user-select:none;-webkit-user-select:none}

  .controls{display:flex;align-items:center;gap:4px;margin-top:8px}
  .icons{display:flex;gap:0px;flex-wrap:nowrap;justify-content:flex-start;width:100%;overflow:hidden}
  .icon{
    width:var(--icon);
    height:var(--icon);
    display:grid;
    place-items:center;
    border:1px solid transparent;
    border-radius:10px;
    cursor:pointer;
  }
  .icon.disabled{opacity:.35;cursor:not-allowed}
  .icon.active{
    border-color:rgba(55,65,81,.95);
    background:#cdd3dd;
    box-shadow:0 0 0 1px rgba(255,255,255,.9) inset,0 0 0 1px rgba(0,0,0,.18);
  }
  .icon:hover{border-color:var(--border);background:rgba(255,255,255,.5)}

  .calc{
    margin-left:auto;
    display:grid;
    grid-template-columns: 1fr 74px;
    grid-auto-rows:36px;
    gap:8px;
    flex:1 1 auto;
    min-width:0;
    max-width:100%;
  }
  .calcField{
    min-width:0;
    display:flex;
    align-items:center;
    border:1px solid var(--border);
    border-radius:10px;
    padding:2px 8px;
    height:36px;
    background:transparent
  }
  .amount input,.result input{border:0;background:transparent;font:inherit;width:100%}
  .select{border:1px solid var(--border);border-radius:10px;padding:2px 8px;height:36px;background:transparent;width:74px;}

  .tableWrap{flex:1 1 auto}
  .tableScroller{overflow:auto}
  table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:var(--fs-cell)}
  thead th{
    position:sticky;top:0;background:var(--panel);
    font-weight:700;padding:8px 10px;border-bottom:1px solid var(--border);
    text-align:left;user-select:none;cursor:pointer
  }
  tbody td{padding:10px;border-bottom:1px solid var(--border);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

/* =========================
   PORTRAIT
   ========================= */
@media(orientation:portrait){
  :root{--icon:20px;--fs-title:20px;--fs-cell:12.3px;--fs-calc:15px}

  .header{padding:12px 10px;background:var(--panel);border-bottom:1px solid var(--border)}

  .brandRow{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .brandLeft{display:flex;align-items:center;gap:10px;min-width:0}
  .logo{width:48px;height:48px;object-fit:cover;border-radius:50%;cursor:pointer}
  .title{font-size:var(--fs-title);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  .brandRight{text-align:right;white-space:nowrap}
  .today{font-size:17px;margin-bottom:2px}
  .rates{font-size:12px;color:var(--muted);user-select:none;-webkit-user-select:none}

  .controls{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
  .icons{display:flex;gap:2px;width:100%}
  .icon{
    width:var(--icon);
    height:var(--icon);
    display:grid;
    place-items:center;
    border:1px solid transparent;
    border-radius:10px;
    cursor:pointer;
    padding:2px;
    font-size:18px;
    line-height:1;
  }
  .icon.disabled{opacity:.35;cursor:not-allowed}
  .icon.active{
    border-color:rgba(55,65,81,.95);
    background:#cdd3dd;
    box-shadow:0 0 0 1px rgba(255,255,255,.9) inset,0 0 0 1px rgba(0,0,0,.18);

  .icon .icoSvg{width:18px;height:18px;display:block;fill:#111;opacity:.9}
  }

  .calc{
    display:grid;
    gap:6px;
    width:100%;
    grid-template-columns:1fr 78px;
    grid-template-areas:
      "amount from"
      "result to";
    align-items:center;
    justify-content:start;
  }
  .amount{grid-area:amount}
  .result{grid-area:result}
  .select[aria-label="From currency"]{grid-area:from;justify-self:start}
  .select[aria-label="To currency"]{grid-area:to;justify-self:start}

  .calcField{
    min-width:0;
    display:flex;
    align-items:center;
    border:1px solid var(--border);
    border-radius:10px;
    padding:2px 6px;
    height:36px;
    background:transparent
  }
  .select{width:78px;padding:2px 6px;height:36px;border:1px solid var(--border);border-radius:10px;background:transparent}

  .tableWrap{width:100%}
  .tableScroller{overflow:auto}
  table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:var(--fs-cell)}
  thead th{padding:4px 1px;border-bottom:1px solid var(--border);text-align:left;user-select:none;cursor:pointer}
  tbody td{padding:4px 1px;border-bottom:1px solid var(--border);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  col.selector{width:5%}
  col.prio{width:5%}
  col.status{width:8%}
  col.date{width:10%}
  col.prod{width:13%}
  col.type{width:13%}
  col.client{width:13%}
  col.supp{width:13%}
  col.broker{width:13%}
  col.comm{width:10%}
}

/* =========================
   Floating Actions
   ========================= */
#actionPopup{display:none;position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.25);align-items:center;justify-content:center}
#actionCard{position:relative;background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.25);padding:12px;width:min(92vw,340px);max-height:70vh;overflow:auto}
#actionCard h4{margin:0 0 8px 0;font-weight:600}
#actionCard .btn{display:block;width:100%;padding:10px 12px;margin:6px 0;border:1px solid var(--border);border-radius:10px;background:#fff;cursor:pointer;text-align:left}
#actionCard .btn:hover{background:#f6f6f6}
#actionCard .danger{border-color:#b91c1c;color:#b91c1c}
#popupClose{position:absolute;top:6px;right:10px;border:0;background:transparent;font-size:20px;cursor:pointer;color:#666}

/* =========================
   Picker modal
   ========================= */
#optDim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.25);z-index:1200}
#optBox{display:none;position:fixed;top:34%;left:50%;transform:translate(-50%,-50%);z-index:1201;width:min(92vw,420px);max-height:min(60vh,480px);overflow:auto;background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.25)}
#optBox header{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-bottom:1px solid var(--border);font-weight:600}
#optBox header button{border:0;background:transparent;font-size:18px;cursor:pointer}
#optList{list-style:none;margin:0;padding:0}
#optList li{padding:6px 10px;font-size:13px;line-height:1.15;cursor:pointer;border-bottom:1px solid rgba(0,0,0,.06)}
#optList li:last-child{border-bottom:0}
#optList li:hover{background:#f5f5f5}

/* =========================
   Comments modal (draggable + resizable)
   ========================= */
#cDim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1500}
#cWin{display:none;position:fixed;z-index:1501;max-width:min(92vw,760px);min-width:min(92vw,340px);background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:0 14px 40px rgba(0,0,0,.35);overflow:hidden}
#cHead{cursor:move;user-select:none;background:#f8f8f8;border-bottom:1px solid var(--border);padding:10px 14px;display:flex;align-items:center;gap:10px;justify-content:space-between}
#cTitle{font-weight:400}
#cTools{display:flex;gap:10px;padding:8px 12px;border-bottom:1px solid var(--border)}
.cBtn{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--border);border-radius:10px;background:#fff;cursor:pointer}
.cBtn:hover{background:#f3f3f3}
#cBody{padding:12px;max-height:min(70vh,540px);overflow:auto}
#cNew{width:100%;min-height:110px;border:1px solid var(--border);border-radius:10px;padding:10px;font:inherit}
.cActions{display:flex;gap:10px;justify-content:flex-end;margin-top:10px}
.cTag{display:inline-block;padding:8px 12px;border:1px solid var(--border);border-radius:999px;background:#f6f7fb;font-size:14px}
.cCard{border:1px solid var(--border);border-radius:10px;padding:10px;margin-top:10px;background:#fff}
.cCard h6{margin:0 0 6px 0;font-size:13px;color:#555}
.cText{white-space:normal}
#cResize{position:absolute;right:6px;bottom:6px;width:18px;height:18px;border-radius:5px;background:#fff;border:1px solid var(--border);display:grid;place-items:center;cursor:nwse-resize}
#cClose{position:absolute;right:6px;top:6px;width:28px;height:28px;border-radius:8px;background:#fff;border:1px solid var(--border);display:grid;place-items:center;cursor:pointer}
mark{background:#fde68a;padding:0 2px}

/* =========================
   Search modal
   ========================= */
#sDim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1400}
#sWin{display:none;position:fixed;z-index:1401;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:0 14px 40px rgba(0,0,0,.35);overflow:hidden;min-width:320px;max-width:min(92vw,720px)}
#sHead{cursor:move;user-select:none;background:#f8f8f8;border-bottom:1px solid var(--border);padding:10px 14px;display:flex;align-items:center;justify-content:space-between;font-weight:700}
#sClose{border:0;background:transparent;font-size:20px;cursor:pointer;color:#666}
#sBody{padding:12px;display:grid;gap:10px}
#sInput{width:100%;height:44px;border:1px solid var(--border);border-radius:10px;padding:8px 12px;font:inherit}
#sHint{font-size:12px;color:#555}
#sTags{font-size:12px}
#sBtns{display:flex;gap:10px;justify-content:flex-start}
.sBtn{padding:8px 12px;border:1px solid var(--border);border-radius:10px;background:#fff;cursor:pointer}
.sBtn.primary{background:#0b6cff;border-color:#0b6cff;color:#fff}
.sTag{display:inline-block;margin-top:4px;padding:2px 8px;border:1px solid var(--border);border-radius:999px;background:#f6f7fb;font-size:12px}

/* =========================
   Service (exchange) modal
   ========================= */
#srvDim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1470}
#srvWin{display:none;position:fixed;left:50%;top:18vh;transform:translateX(-50%);z-index:1471;width:min(92vw,380px);background:#fff;border-radius:14px;border:1px solid var(--border);box-shadow:0 14px 40px rgba(0,0,0,.35);overflow:hidden}
#srvHead{padding:8px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;font-weight:600}
#srvClose{border:0;background:transparent;font-size:20px;cursor:pointer;color:#666}
#srvBody{padding:10px 12px;display:grid;gap:10px}
.srvRow{display:flex;align-items:center;gap:8px}
.srvRow label{flex:0 0 auto;font-size:14px}
.srvRow input{flex:1 1 auto;height:34px;border-radius:10px;border:1px solid var(--border);padding:4px 8px;font:inherit}
#srvBtns{display:flex;justify-content:flex-end;gap:8px;margin-top:6px}
.srvBtn{padding:6px 12px;border-radius:10px;border:1px solid var(--border);background:#fff;cursor:pointer;font-size:13px}
.srvBtn.primary{background:#0b6cff;border-color:#0b6cff;color:#fff}

/* =========================
   Hover tooltip for cells (desktop)
   ========================= */
.cellTip{
  position:fixed;
  z-index:1900;
  background:rgba(17,24,39,.97);
  color:#fff;
  font-size:12px;
  padding:6px 8px;
  border-radius:6px;
  max-width:70vw;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  pointer-events:none;
  display:none;
  white-space:normal;
  word-break:break-word;
}

/* =========================
   Toast
   ========================= */
#toast{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  background:#111;
  color:#fff;
  padding:8px 12px;
  border-radius:10px;
  font-size:13px;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s;
  z-index:2000
}

/* =========================
   Restore modal
   ========================= */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;z-index:9999;padding:16px}
.modalBox{background:#fff;border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.25);width:100%;overflow:hidden}
.modalHead{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border);background:var(--panel)}
.modalBody{padding:14px}
.xbtn{border:none;background:transparent;font-size:24px;line-height:1;cursor:pointer;color:#333}
.btn{border:1px solid var(--border);background:#fff;border-radius:10px;padding:10px 12px;font-size:14px;cursor:pointer}
.btn:hover{filter:brightness(.98)}
#restoreList, #restoreList option { font-size: 12px; }

/* =========================
   Prices button (from app.js)
   ========================= */
#watPricesBtn{
  user-select:none;
  -webkit-user-select:none;
}

/* =========================
   Print
   ========================= */
@media print{
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  th,td{border:0!important}
  .controls,#actionPopup,#optBox,#optDim,#cDim,#cWin,#sDim,#sWin,#srvDim,#srvWin,#toast,
  #watPricesBtn,#watPricesOverlay,#contactsPicker{display:none!important}
  .header{position:static}
  tbody tr:nth-child(even){background:#f3f4f6!important;}
}

/* v0.3.1.0 tweaks: portrait-first, commodities button, full-width */
#grid, .tableWrap, .tableScroller{width:100%;}
@media(orientation:portrait){
  /* ensure all icons accessible */
  .icons{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .icons::-webkit-scrollbar{display:none}
  /* tighten brand/logo */
  .brandLeft{gap:6px}
  /* controls grid: icons row, then calc + commodities button */
  .controls{display:grid;grid-template-columns:1fr 130px;grid-template-areas:"icons icons" "calc commodities";align-items:start}
  #icons{grid-area:icons}
  .calc{grid-area:calc}
  .commoditiesBtn{
    height:72px;
    min-width:44px;
    max-width:44px;
    padding:0;
    border-radius:14px;
    border:1px solid transparent;
    background:transparent;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .commoditiesBtn .icoSvg{width:26px;height:26px;opacity:.95}
}
/* Prices modal full width */
#watPricesPanel{max-width:none !important;}


/* v0.3.1.1 portrait fit + icons visible */
html,body{width:100%;max-width:100%;overflow-x:hidden;margin:0;padding:0}
.header,.tableWrap,.tableScroller,table{max-width:100%}
.tableScroller{width:100%}
.controls{flex-wrap:wrap}
.icons{flex-wrap:wrap;overflow-x:visible;justify-content:flex-start;max-width:100%}
.icon{font-size:18px}
.brandRow{gap:10px}
.title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:55vw}

/* make calculator + commodities fit */
.calc{flex:1 1 260px;min-width:240px}
.calcField input{width:100%}
.commoditiesBtn{
    height:72px;
    min-width:44px;
    max-width:44px;
    padding:0;
    border-radius:14px;
    border:1px solid var(--border);
    background:transparent;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .commoditiesBtn .icoSvg{width:26px;height:26px;opacity:.95}

/* ensure logo is always visible */
.logo{background:rgba(255,255,255,.25);border:1px solid rgba(255,255,255,.25)}
/* hide eur block if any cached html exists */
#eurBlock{display:none !important}

/* version badge */
.verBadge{position:fixed;right:8px;bottom:6px;z-index:9998;font-size:11px;opacity:.55;color:#111;pointer-events:none}

/* tighter portrait layout */
@media (max-width:520px){
  .header{padding:10px 12px}
  .controls{gap:8px;margin-top:8px}
  .icon{width:34px;height:34px;border-radius:10px}
  .title{font-size:18px;max-width:52vw}
  .rates{font-size:12px}
  .calc{gap:6px}
  #amt,#res{font-size:14px}
  #fromCur,#toCur{min-width:64px}
}


/* ===== v0.3.2 portrait fixes ===== */
@media (max-width: 560px){
  /* keep all action icons visible */
  .icons{display:flex;flex-wrap:nowrap;gap:4px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .icons::-webkit-scrollbar{display:none}
  .icon{width:28px;height:28px;border-radius:9px;font-size:16px;flex:0 0 auto}
}

.controls{display:flex;flex-direction:column;gap:8px}
.calcRow{display:flex;gap:10px;align-items:stretch;width:100%;flex-wrap:nowrap}
.calcRow .calc{flex:1 1 auto;min-width:0}
.calcRow .commoditiesBtn{
    height:72px;
    min-width:44px;
    max-width:44px;
    padding:0;
    border-radius:14px;
    border:1px solid var(--border);
    background:transparent;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .commoditiesBtn .icoSvg{width:26px;height:26px;opacity:.95}

html,body{overflow-x:hidden}
.header,.brandRow,.controls,.tableWrap,.tableScroller,#grid{width:100%;max-width:100%}

/* remove any stray trailing currency label under date */
.usdUpdated{margin-left:2px;opacity:.85}

/* ensure logo box stays tight */
.brandLeft{gap:6px}


/* Portrait: prevent horizontal scroll */
body{overflow-x:hidden}
#grid{overflow-x:hidden}

/* v0.3.8.1 tweaks: market icon */
.marketSvg{width:30px;height:30px}


/* v0.3.8.1 overrides */
.commoditiesBtn{border:1px solid transparent;background:transparent;}
.commoditiesBtn .icoSvg{width:22px;height:22px;}

.icon{font-size:18px;}


/* v0.3.10 tweaks: icon bar fit + no overlap */
.icons{
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.icons::-webkit-scrollbar{ display:none; }
@media (max-width: 420px){
  .icon{ padding:4px 4px; font-size:18px; }
  .top{ padding:6px 8px; }
}

/* v0.7.0: Active tab letter */
.activeLetter{font-weight:600;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;}


/* v0.9.15.2.2 selector + portrait column tuning */
.selectorCell,
.selectorCell *,
.selectorHead{
  user-select:none !important;
  -webkit-user-select:none !important;
  -webkit-touch-callout:none !important;
  touch-action:manipulation;
}
.selectorHead{
  opacity:.65;
  text-align:center !important;
  cursor:default !important;
}

/* v0.9.22 visible priority column */
col.prio{width:24px}
th[data-col="prio"]{text-align:center!important}
tbody td:nth-child(2){text-align:center}

/* v0.9.22 compact selector + priority columns */
col.selector{width:18px!important}
col.prio{width:18px!important}
#hdrRow th:first-child,
#hdrRow th[data-col="prio"]{
  width:18px!important;
  min-width:18px!important;
  max-width:18px!important;
  padding-left:0!important;
  padding-right:0!important;
  text-align:center!important;
}
tbody td:first-child,
tbody td:nth-child(2){
  width:18px!important;
  min-width:18px!important;
  max-width:18px!important;
  padding-left:0!important;
  padding-right:0!important;
  text-align:center!important;
}
tbody td:nth-child(2){
  font-size:14px!important;
}


/* v0.9.30 line breaks */
td, .cell, .detailsContent, .commentText{
  white-space: pre-wrap !important;
  word-break: break-word;
}


/* WAT 0.9.31
   Supp narrower, Broker wider
*/
th:nth-child(8), td:nth-child(8){
  width: 6% !important;
}
th:nth-child(9), td:nth-child(9){
  width: 14% !important;
}


/* WAT 0.9.32 alignment */
th:nth-child(1), td:nth-child(1),
th:nth-child(2), td:nth-child(2){
  text-align:center !important;
  vertical-align:middle !important;
}

th:nth-child(n+3), td:nth-child(n+3){
  text-align:left !important;
  vertical-align:top !important;
}


/* WAT 0.9.35 Comments popup improvements */

/* Common popup selectors */
.commentModal,
.commentsModal,
.comment-popup,
.comments-popup,
#cWin,
#commentWin{
  width:98vw !important;
  max-width:98vw !important;
  left:1vw !important;
  top:4px !important;
  transform:none !important;
}

/* Keep toolbar/buttons visible at top */
.commentModal .toolbar,
.commentsModal .toolbar,
.comment-popup .toolbar,
.comments-popup .toolbar,
#cWin .toolbar,
#commentWin .toolbar{
  position:sticky !important;
  top:0 !important;
  z-index:100 !important;
}


/* WAT 0.9.35 comments window: input above old comments, Add/Cancel in toolbar */
#cWin{
  width:98vw !important;
  max-width:98vw !important;
  left:1vw !important;
  top:4px !important;
  transform:none !important;
  max-height:96vh !important;
}
#cHead, #cTools{
  position:sticky !important;
  top:0 !important;
  z-index:50 !important;
  background:#fff !important;
}
#cBody{
  display:flex !important;
  flex-direction:column !important;
}
#cNew{
  order:1 !important;
  width:100% !important;
  min-height:120px !important;
  margin:8px 0 10px 0 !important;
  white-space:pre-wrap !important;
}
#cList{
  order:2 !important;
}
#cCancel,#cAdd{
  min-width:58px !important;
  padding-left:8px !important;
  padding-right:8px !important;
  font-size:14px !important;
}


/* WAT 0.9.39 hard trade-table readability fix
   Baseline: 0.9.35. No sync/database changes.
   Goal: max 2 lines, no letter-by-letter split, clipped overflow. */
#scroller.tableScroller{
  overflow-x:auto !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch;
}
#grid table{
  table-layout:fixed !important;
  width:100% !important;
  max-width:100% !important;
  border-collapse:collapse !important;
}
#grid col.selector{width:4% !important;}
#grid col.prio{width:5% !important;}
#grid col.status{width:9% !important;}
#grid col.date{width:10% !important;}
#grid col.prod{width:13% !important;}
#grid col.type{width:13% !important;}
#grid col.client{width:14% !important;}
#grid col.supp{width:14% !important;}
#grid col.broker{width:13% !important;}
#grid col.comm{width:5% !important;}
#grid thead th,
#grid tbody td{
  box-sizing:border-box !important;
  padding:4px 2px !important;
  vertical-align:top !important;
  overflow:hidden !important;
  white-space:normal !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
  hyphens:none !important;
  line-height:1.15 !important;
}
#grid tbody tr{
  height:40px !important;
  max-height:40px !important;
}
#grid tbody td{
  height:40px !important;
  max-height:40px !important;
}
#grid .watCellClip,
#grid td .fakeSelect{
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:2 !important;
  line-clamp:2 !important;
  height:2.3em !important;
  max-height:2.3em !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:normal !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
  hyphens:none !important;
  line-height:1.15 !important;
}
#grid .selectorCell,
#grid .selectorCell *,
#grid tbody td:nth-child(2),
#grid tbody td:nth-child(2) *{
  text-align:center !important;
  vertical-align:middle !important;
}
#grid .selectorCell button{
  min-width:0 !important;
  width:100% !important;
  height:32px !important;
  line-height:32px !important;
}
#grid .commentsCell{
  font-size:11px !important;
}


/* WAT 0.9.40 cosmetic dot/priority alignment only
   Baseline: 0.9.39 approved readability. No sync/database/table-width changes. */
#grid thead th:first-child,
#grid tbody td.selectorCell,
#grid tbody td.selectorCell *{
  text-align:center !important;
  vertical-align:middle !important;
}
#grid thead th:first-child{
  font-size:14px !important;
  color:rgba(0,0,0,.38) !important;
  line-height:1 !important;
  padding:0 !important;
}
#grid tbody td.selectorCell{
  padding:0 !important;
  height:40px !important;
  max-height:40px !important;
  line-height:40px !important;
}
#grid tbody td.selectorCell button{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  min-width:0 !important;
  height:40px !important;
  line-height:40px !important;
  font-size:14px !important;
  opacity:.38 !important;
  color:#000 !important;
}
#grid thead th[data-col="prio"],
#grid tbody td:nth-child(2){
  text-align:center !important;
  vertical-align:middle !important;
  padding-left:0 !important;
  padding-right:0 !important;
}
#grid tbody td:nth-child(2) .watCellClip{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:100% !important;
  max-height:100% !important;
  line-height:1 !important;
  text-align:center !important;
}


/* WAT v0.10.0 Contacts foundation */
#watContactsModal, #watToolsModal{
  position:fixed; inset:0; z-index:2600; background:rgba(0,0,0,.35);
  display:none; align-items:flex-start; justify-content:center; padding:18px 8px;
  font-family:'Calibri Light', Calibri, Arial, sans-serif; box-sizing:border-box;
}
.watContactsPanel,.watToolsPanel{
  width:min(96vw,720px); max-height:92vh; overflow:hidden; background:#fff;
  border-radius:16px; border:1px solid rgba(0,0,0,.14); box-shadow:0 18px 50px rgba(0,0,0,.35);
  display:flex; flex-direction:column;
}
.watContactsHead,.watToolsHead{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 12px; border-bottom:1px solid rgba(0,0,0,.12); font-size:18px; font-weight:600;
}
.watContactsBody{padding:10px; overflow:auto;}
.watContactsTop{display:flex; gap:8px; align-items:center; margin-bottom:10px;}
.watContactsTop input{flex:1; height:38px; border:1px solid rgba(0,0,0,.18); border-radius:10px; padding:0 10px; font:inherit;}
.watCBtn{border:1px solid rgba(0,0,0,.18); background:#f5f5f5; border-radius:10px; min-height:36px; padding:0 12px; font:inherit;}
.watCBtn.primary{background:#eaf2ff; border-color:#9bbcff;}
.watCBtn.danger{background:#fff0f0; border-color:#ffb3b3;}
.watContactCard{border:1px solid rgba(0,0,0,.10); border-radius:12px; padding:8px 10px; margin:7px 0; background:#fff;}
.watContactName{font-size:16px; font-weight:600;}
.watContactMeta{font-size:13px; color:#444; margin-top:2px; line-height:1.25;}
.watContactActions{display:flex; gap:6px; margin-top:8px; flex-wrap:wrap;}
.watContactForm{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:10px; padding:8px; border:1px solid rgba(0,0,0,.10); border-radius:12px; background:#fafafa;}
.watContactForm label{display:flex; flex-direction:column; gap:3px; font-size:12px; color:#555;}
.watContactForm input,.watContactForm textarea,.watContactForm select{border:1px solid rgba(0,0,0,.18); border-radius:8px; padding:7px; font:inherit; font-size:14px; background:#fff;}
.watContactForm textarea{min-height:54px; resize:vertical;}
.watContactForm .full{grid-column:1/-1;}
.watToolsBody{padding:12px; display:grid; gap:8px;}
.watToolsBody .watCBtn{text-align:left; height:42px;}
@media(max-width:520px){.watContactForm{grid-template-columns:1fr}.watContactsPanel{max-height:94vh}.watContactsHead{font-size:17px}}

/* WAT v0.16.3 Date toggle: Created date normal, Last action date highlighted */
body.watDateLastMode td.watDateCell,
#hdrRow th.watDateLastHead{
  background:#ffdede !important;
}
#hdrRow th[data-col="date"]{
  cursor:pointer;
}


/* WAT v0.16.3 Fixed status/header row
   Only the trade rows scroll; column header stays visible. */
#scroller.tableScroller{
  position:relative !important;
}
#grid thead th{
  position:sticky !important;
  top:0 !important;
  z-index:30 !important;
  background:var(--head,#e8eef4) !important;
  box-shadow:0 1px 0 var(--border), 0 2px 4px rgba(0,0,0,.08) !important;
}
body.watDateLastMode #hdrRow th.watDateLastHead{
  background:#ffdede !important;
}

/* WAT v0.17.15 comment attachments */
#cPending{order:1!important;display:flex;flex-wrap:wrap;gap:6px;margin:-4px 0 10px 0}
.cPendingFile{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:5px 8px;border:1px solid var(--border);border-radius:8px;background:#f6f7fb;font-size:12px}
.cPendingFile span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:260px}
.cPendingRemove{border:0;background:transparent;cursor:pointer;font-size:16px;line-height:1;color:#666;padding:0 2px}
.cAttachments{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.cAttachment{display:flex;align-items:center;gap:7px;width:fit-content;max-width:100%;padding:6px 9px;border:1px solid var(--border);border-radius:8px;background:#f8f9fb;text-decoration:none;color:inherit;font-size:13px}
.cAttachmentName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:min(65vw,520px)}
.cAttachmentMeta{font-size:11px;color:#777;white-space:nowrap}
#cAttachBtn{font-size:18px}


/* WAT v0.17.15 Comments attachment fixes */
#cTools{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:7px !important;
  padding:8px 10px !important;
  align-items:center !important;
}
#cAdd,#cCancel{
  width:auto !important;
  min-width:58px !important;
}
#cAdd{font-weight:700 !important;}
.cPendingFile{cursor:pointer !important;}
.cAttachment{cursor:pointer !important;}
@media (max-width:480px){
  #cTools{gap:6px !important;}
  .cBtn{width:34px;height:34px;}
  #cAdd,#cCancel{min-width:56px !important;}
}


/* WAT v0.17.34 — read-only Word viewer; canonical server file remains the only WAT copy */
.watWordViewer{position:fixed;inset:0;z-index:1000005;background:#fff;display:none;flex-direction:column}
.watWordViewerHead{height:52px;min-height:52px;display:flex;align-items:center;gap:10px;padding:0 10px 0 14px;border-bottom:1px solid var(--border);background:#fff}
.watWordViewerTitle{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.watWordViewerX{width:40px;height:40px;border:0;border-radius:9px;background:#eef0f2;font-size:30px;line-height:36px;cursor:pointer}
.watWordViewerBody{position:relative;flex:1;min-height:0;background:#f2f3f5}
.watWordViewerFrame{display:block;width:100%;height:100%;border:0;background:#fff}
.watWordViewerMsg{padding:18px;font-size:14px}
.watWordViewerFoot{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:8px 10px;border-top:1px solid var(--border);background:#fff;font-size:12px;color:#666}
.watWordOriginalBtn{border:1px solid var(--border);border-radius:8px;background:#f5f6f8;padding:8px 10px;font-weight:700;white-space:nowrap}
@media(max-width:600px){.watWordViewerFoot{align-items:stretch;flex-direction:column}.watWordOriginalBtn{width:100%}}
/* v0.17.34: attachments are pinned above the written comment history */
.cSectionTitle{position:sticky;top:0;z-index:2;margin:10px 0 7px;padding:7px 4px;background:#fff;font-weight:800;font-size:14px;border-bottom:1px solid var(--border)}
.cFileCard{padding-top:10px;padding-bottom:10px}


/* v0.17.34 Comments readability + edit/delete controls */
.cCommentCard{margin-top:18px !important;} /* visible line-feed/space before each new comment */
.cCommentTop{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px}
.cCommentTop h6,.cFileCard h6{margin:0 !important;color:#aaa !important;font-weight:400 !important;font-size:12px !important}
.cCommentActions{display:flex;gap:5px;flex:0 0 auto}
.cCommentAction,.cDeleteAttachment,.cMiniBtn{border:1px solid var(--border);background:#fff;border-radius:7px;cursor:pointer;color:#666}
.cCommentAction{width:30px;height:28px;padding:0;font-size:15px;line-height:26px}
.cCommentDelete{color:#8b3a3a}
.cAttachments{display:grid !important;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px !important}
.cAttachment{min-width:0}
.cDeleteAttachment{width:34px;height:32px;padding:0;font-size:15px}
.cEditArea{width:100%;min-height:110px;box-sizing:border-box;border:1px solid var(--border);border-radius:8px;padding:9px;font:inherit;resize:vertical;background:#fff}
.cEditBtns{display:flex;gap:8px;justify-content:flex-end;margin-top:7px}
.cMiniBtn{padding:6px 10px;font-size:12px}


/* v0.17.36 — one continuous Comments window */
#cBody{max-height:none !important;height:calc(96vh - 112px) !important;overflow-y:auto !important;min-height:0 !important;}
#cList{order:1 !important;flex:1 1 auto !important;min-height:0 !important;}
#cPending{order:2 !important;}
#cNew{order:3 !important;flex:0 0 auto !important;min-height:92px !important;max-height:42vh !important;resize:none !important;overflow-y:auto !important;margin:12px 0 4px !important;box-sizing:border-box !important;}
.cCommentCard{border:0 !important;border-radius:0 !important;border-top:1px solid #ececec !important;padding:14px 2px 4px !important;margin-top:12px !important;background:transparent !important;}
.cCommentTop{margin-bottom:4px !important;}
.cCommentTop h6{color:#aaa !important;font-weight:400 !important;font-size:12px !important;}
.cText{font-size:15px !important;line-height:1.35 !important;white-space:normal;}

/* v0.17.36 — Comments layout correction after phone test
   Composer stays directly under the toolbar, never overlays history.
   History gets the remaining screen and scrolls independently. */
#cBody{
  height:calc(96vh - 112px) !important;
  max-height:none !important;
  overflow:hidden !important;
  display:flex !important;
  flex-direction:column !important;
  padding-bottom:4px !important;
}
#cNew{
  order:1 !important;
  flex:0 0 auto !important;
  width:100% !important;
  min-height:96px !important;
  max-height:34vh !important;
  margin:10px 0 8px !important;
  resize:none !important;
  overflow-y:auto !important;
  box-sizing:border-box !important;
}
#cPending{order:2 !important;flex:0 0 auto !important;}
#cList{
  order:3 !important;
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch;
  padding-bottom:12px !important;
}
.cCommentTop h6,.cFileCard h6,.cLegacyMeta{
  color:#aaa !important;
  font-weight:400 !important;
  font-size:13px !important;
  line-height:1.25 !important;
}
.cCommentTop{display:flex !important;align-items:flex-start !important;margin-bottom:5px !important;}
.cText,.cLegacyText{
  display:block !important;
  color:#222 !important;
  font-size:15px !important;
  line-height:1.38 !important;
  white-space:pre-wrap !important;
  overflow-wrap:anywhere;
}
.cLegacyGap{margin-top:14px !important;}
.cLegacyMeta{display:block !important;margin-bottom:3px !important;}
.cCommentCard{margin-top:14px !important;padding-top:13px !important;}
/* Keep comment edit/delete controls attached to the comment header, not floating. */
.cCommentActions{margin-left:auto !important;position:static !important;}
/* Underlying grid comment cell should no longer advertise '(Open)' / 'Tap to view'. */
td.commentsCell{ text-decoration:none !important; }


/* v0.17.37 — Comments visual polish after phone test */
/* Use nearly the full popup width for writing and history. */
#cBody{padding:4px !important;}
#cNew{
  width:100% !important;
  margin:4px 0 6px !important;
  padding:10px 9px !important;
  border-radius:9px !important;
}
#cList{padding-left:0 !important;padding-right:0 !important;}
.cSectionTitle{margin-left:2px !important;margin-right:2px !important;}
.cFileCard,.cCommentCard{margin-left:2px !important;margin-right:2px !important;}

/* Timestamp + name: normal dark text on a light-grey strip. */
.cCommentTop,
.cFileCard > h6,
.cLegacyMeta{
  background:#eeeeee !important;
  color:#333 !important;
  font-weight:400 !important;
  font-size:13px !important;
  line-height:1.3 !important;
  padding:4px 7px !important;
  border-radius:5px !important;
  box-sizing:border-box !important;
}
.cCommentTop{margin-bottom:5px !important;min-height:30px !important;}
.cCommentTop h6{
  background:transparent !important;
  color:#333 !important;
  padding:0 !important;
  border-radius:0 !important;
  font-size:13px !important;
}
.cFileCard > h6{display:block !important;margin:0 0 6px 0 !important;}
.cLegacyMeta{display:block !important;margin:0 0 4px 0 !important;}

/* While Comments is open, the trade grid underneath cannot receive taps/long-presses.
   This removes the stray timestamp tooltip/pop-up from the underlying Comments cell. */
body.watCommentsOpen #grid,
body.watCommentsOpen #scroller{pointer-events:none !important;}

/* v0.17.38 — final v0.17 Comments spacing + tooltip cleanup */
#cBody{padding:2px !important;}
#cNew{margin:1px 0 1px !important;width:100% !important;}
.cSectionTitle{margin-top:1px !important;margin-bottom:2px !important;padding-top:4px !important;padding-bottom:4px !important;}
body.watCommentsOpen .cellTip{display:none !important;visibility:hidden !important;opacity:0 !important;pointer-events:none !important;}


/* WAT v0.19.0 — Duplicate Contact Manager + comments context */
#cHeadText{min-width:0;padding-right:30px;line-height:1.15}
#cJob{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#cContext{margin-top:2px;font-size:13px;font-weight:400;color:#555;white-space:normal;overflow-wrap:anywhere}
.watDupHead{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin:2px 0 8px}
.watDupTitle{font-size:18px;font-weight:600}
.watDupSummary{font-size:12px;color:#555;margin-top:3px}
.watDupHelp{padding:9px 10px;border:1px solid rgba(0,0,0,.10);border-radius:10px;background:#f7f8fa;font-size:13px;line-height:1.3;margin-bottom:8px}
.watDupTools{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.watDupSection{position:sticky;top:0;z-index:3;background:#fff;border-bottom:1px solid rgba(0,0,0,.12);padding:8px 2px 5px;margin-top:8px;font-size:15px;font-weight:600}
.watDupGroup{border:1px solid rgba(0,0,0,.12);border-radius:12px;padding:9px;margin:8px 0;background:#fff}
.watDupReason{font-size:12px;color:#555;margin-bottom:7px;font-weight:600}
.watDupChoice{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;border-top:1px solid rgba(0,0,0,.07);padding:7px 0}
.watDupChoice:first-of-type{border-top:0}
.watDupPerson{min-width:0}
.watDupName{font-size:15px;font-weight:600;overflow-wrap:anywhere}
.watDupMeta{font-size:12px;color:#444;line-height:1.25;margin-top:2px;overflow-wrap:anywhere}
.watDupNote{font-size:12px;color:#555;margin-top:4px;white-space:pre-wrap;max-height:4.8em;overflow:hidden}
.watDupNone,.watDupProgress{padding:20px 10px;text-align:center;color:#555;line-height:1.45}
@media(max-width:520px){.watDupChoice{grid-template-columns:1fr}.watDupChoice>.watCBtn{justify-self:start}.watDupHead{align-items:center}.watDupHelp{font-size:12px}}

/* Account for the second context line in the v0.19 Comments header. */
#cBody{height:calc(96vh - 126px) !important;}

/* WAT v0.19.2 — safe duplicate copy review */
.watDupDetailHelp{margin:10px 0;padding:10px 12px;border-radius:12px;background:rgba(0,110,255,.06);line-height:1.35}
.watDupGoogleCopy{margin:10px 0;padding:12px;border:1px solid #d5dbe3;border-radius:14px;background:#fff}
.watDupGoogleCopy .watDupName{font-size:1.05em;margin:2px 0 5px}
.watDupPhones{font-weight:600}
.watDupGoogleCopy .watCBtn{margin-top:10px}

/* WAT v0.19.9 — compact Comments attachment gallery
   Files are icons with a maximum two-line filename so comments stay visible. */
.cAttachmentGrid{
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
  gap:8px !important;
  margin:4px 2px 8px !important;
  align-items:start;
}
.cAttachmentTileWrap{position:relative;min-width:0;}
.cAttachmentTile{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:4px !important;
  width:100% !important;
  min-width:0 !important;
  min-height:88px !important;
  box-sizing:border-box !important;
  padding:9px 6px 7px !important;
  border:1px solid var(--border) !important;
  border-radius:9px !important;
  background:#f8f9fb !important;
  text-decoration:none !important;
  color:inherit !important;
  text-align:center !important;
  cursor:pointer !important;
}
.cAttachmentIcon{font-size:31px !important;line-height:1.05 !important;display:block !important;}
.cAttachmentTile .cAttachmentName{
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:2 !important;
  line-clamp:2 !important;
  overflow:hidden !important;
  white-space:normal !important;
  text-overflow:ellipsis !important;
  overflow-wrap:anywhere !important;
  max-width:100% !important;
  font-size:12px !important;
  line-height:1.18 !important;
  min-height:2.36em !important;
}
.cAttachmentTileDelete{
  position:absolute !important;
  top:3px !important;
  right:3px !important;
  width:25px !important;
  height:25px !important;
  padding:0 !important;
  border:1px solid var(--border) !important;
  border-radius:7px !important;
  background:rgba(255,255,255,.94) !important;
  font-size:13px !important;
  line-height:23px !important;
  cursor:pointer !important;
}
@media(max-width:480px){
  .cAttachmentGrid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:7px !important;}
  .cAttachmentTile{min-height:84px !important;padding-left:4px !important;padding-right:4px !important;}
}

/* WAT v0.19.12 — Product + Type dropdown maintenance */
#optList li.watProductFree,#optList li.watTypeFree{font-style:normal}
#optList li.watProductRow,#optList li.watTypeRow{display:flex;align-items:center;padding:0;border-bottom:1px solid rgba(0,0,0,.06)}
#optList li.watProductRow.current,#optList li.watTypeRow.current{background:#f5f5f5}
#optList .watProductName,#optList .watTypeName{display:block;flex:1;min-width:0;padding:7px 10px;cursor:pointer}
#optList .watProductRemove,#optList .watTypeRemove{flex:0 0 42px;align-self:stretch;border:0;border-left:1px solid rgba(0,0,0,.07);background:transparent;font-size:22px;line-height:1;cursor:pointer;color:#666}
#optList .watProductRemove:hover,#optList .watTypeRemove:hover{background:#f3f3f3}
#optList .watProductRemove:disabled,#optList .watTypeRemove:disabled{opacity:.45;cursor:default}
#optList li.watProductManage,#optList li.watTypeManage{position:sticky;bottom:0;display:flex;gap:7px;align-items:center;padding:8px 9px;background:#fff;border-top:1px solid var(--border);box-shadow:0 -3px 8px rgba(0,0,0,.06);cursor:default}
#optList .watProductManage input,#optList .watTypeManage input{flex:1;min-width:0;box-sizing:border-box;border:1px solid #bbb;border-radius:6px;padding:7px 8px;font:inherit;background:#fff}
#optList .watProductManage button,#optList .watTypeManage button{flex:0 0 auto;border:1px solid #999;border-radius:6px;padding:7px 10px;background:#f5f5f5;font:inherit;font-weight:600;cursor:pointer}
#optList .watProductManage button:disabled,#optList .watTypeManage button:disabled{opacity:.5;cursor:default}

/* WAT trade commission in Comments — one agreed value per trade. */
#cCommissionRow{
  order:2 !important;
  display:grid;
  grid-template-columns:auto minmax(72px,110px) minmax(72px,92px) minmax(0,1fr);
  align-items:center;
  gap:7px;
  margin:4px 2px 7px;
  padding:7px 8px;
  border:1px solid var(--border);
  border-radius:9px;
  background:#f7f7f7;
  box-sizing:border-box;
}
#cCommissionRow label{font-weight:700;font-size:14px;white-space:nowrap;}
#cCommissionValue,#cCommissionUnit{
  height:36px;
  box-sizing:border-box;
  border:1px solid #bbb;
  border-radius:7px;
  background:#fff;
  font:16px Arial,sans-serif;
  padding:4px 7px;
  min-width:0;
}
#cCommissionValue{text-align:right;}
#cCommissionStatus{font-size:11px;color:#666;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#cCommissionStatus.cCommissionError{color:#a32626;}
#cPending{order:3 !important;}
#cList{order:4 !important;}
@media(max-width:480px){
  #cCommissionRow{grid-template-columns:auto minmax(62px,1fr) 78px;gap:5px;padding:6px;}
  #cCommissionStatus{grid-column:1/-1;padding-left:2px;}
}

/* WAT v0.20.19 Beta Demo — compact trade commission beside Save/Cancel + one-row attachment scroller. */
#cTools #cCommissionRow{
  order:initial !important;
  display:inline-flex !important;
  flex:0 0 auto !important;
  align-items:center !important;
  gap:4px !important;
  margin:0 0 0 1px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  min-width:0 !important;
}
#cTools #cCommissionRow label{
  font-weight:700 !important;
  font-size:12px !important;
  line-height:1 !important;
  white-space:nowrap !important;
}
#cTools #cCommissionValue,
#cTools #cCommissionUnit{
  height:34px !important;
  box-sizing:border-box !important;
  border:1px solid #bbb !important;
  border-radius:7px !important;
  background:#fff !important;
  font:14px Arial,sans-serif !important;
  min-width:0 !important;
}
#cTools #cCommissionValue{
  width:68px !important;
  flex:0 0 68px !important;
  padding:3px 5px !important;
  text-align:right !important;
}
#cTools #cCommissionUnit{
  width:76px !important;
  flex:0 0 76px !important;
  padding:3px 2px !important;
}
#cTools #cCommissionStatus{display:none !important;}
#cTools #cCommissionStatus.cCommissionError{
  display:inline !important;
  max-width:82px !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  font-size:10px !important;
  color:#a32626 !important;
}

/* Attachments stay on one compact row and scroll left/right instead of growing downward. */
.cAttachmentGrid{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:stretch !important;
  gap:7px !important;
  width:100% !important;
  max-width:100% !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior-x:contain !important;
  scroll-snap-type:x proximity !important;
  padding:2px 2px 7px !important;
  margin:2px 0 7px !important;
  box-sizing:border-box !important;
  scrollbar-width:thin !important;
}
.cAttachmentTileWrap{
  flex:0 0 108px !important;
  width:108px !important;
  min-width:108px !important;
  scroll-snap-align:start !important;
}
.cAttachmentTile{
  width:108px !important;
  min-width:108px !important;
  min-height:84px !important;
  height:84px !important;
  padding:7px 4px 5px !important;
  box-sizing:border-box !important;
}
.cAttachmentIcon{font-size:29px !important;}
.cAttachmentTile .cAttachmentName{
  font-size:11.5px !important;
  line-height:1.16 !important;
  min-height:2.32em !important;
}
@media(max-width:480px){
  #cTools{column-gap:5px !important;row-gap:6px !important;}
  #cTools #cCommissionRow{gap:3px !important;margin-left:0 !important;}
  #cTools #cCommissionRow label{font-size:11px !important;}
  #cTools #cCommissionValue{width:50px !important;flex-basis:50px !important;}
  #cTools #cCommissionUnit{width:66px !important;flex-basis:66px !important;}
  .cAttachmentGrid{grid-template-columns:none !important;gap:6px !important;}
  .cAttachmentTileWrap{flex-basis:104px !important;width:104px !important;min-width:104px !important;}
  .cAttachmentTile{width:104px !important;min-width:104px !important;}
}

/* WAT v0.20.21 Beta Demo — mobile trade grid: move width from Supplier to Comments.
   Total grid width remains 100%; no behavior/data changes. */
#grid col.supp{width:11% !important;}
#grid col.broker{width:13% !important;}
#grid col.comm{width:8% !important;}
#grid thead th:nth-child(8),#grid tbody td:nth-child(8){width:11% !important;}
#grid thead th:nth-child(9),#grid tbody td:nth-child(9){width:13% !important;}
#grid thead th:nth-child(10),#grid tbody td:nth-child(10){width:8% !important;}