/* ==========================================================================
   quote-detail.css
   MEASURED off `Rackman - Quote Detail - Contents Table - Desktop` 18152:29046
   ========================================================================== */

/* ---------- top bar ------------------------------------------------------ */
/* Figma: topbar > one row, gap 32, BackLink then the pager — LEFT aligned,
   not pushed to the right edge. Back link is a literal arrow in the text. */
.qd__top { display: flex; align-items: center; gap: 6px; height: 21px; }
.qd__top .crumb { font-size: 13px; font-weight: 600; color: var(--wrc-rackman); }
.qd__crumbnow { font-size: 13px; font-weight: 400; color: var(--text-light); }
.qd__pgs { display: flex; align-items: center; gap: 4px; margin-left: 26px; }
.qd__pg {
  width: 22px; height: 21px; border-radius: var(--radius-xs);
  display: grid; place-items: center; color: var(--text-light);
  background: var(--white); border: 1px solid var(--black-7);
}
.qd__pg:hover:not(:disabled) { background: var(--grey-medium); color: var(--text-dark); }
.qd__pg:disabled { opacity: .3; cursor: default; }

/* ---------- title row ---------------------------------------------------- */
.qd__title { display: flex; align-items: center; gap: 12px; min-height: 32px; }
.qd__titleL { display: flex; align-items: center; gap: 32px; min-width: 0; }
.qd__num { font-size: 26px; font-weight: 600; color: var(--text-dark); letter-spacing: -.01em; }
.qd__cells { display: flex; align-items: center; gap: 12px; }
.qd__cell { display: flex; align-items: center; gap: 7px; }
.qd__cellk {
  font-size: 10px; font-weight: 500; letter-spacing: .02em;
  color: var(--text-light); white-space: nowrap;
}
/* Figma: fill is the tone at 12%, text is the tone at full strength. */
.schip {
  display: inline-flex; align-items: center; height: 24px; padding: 0 11px;
  border-radius: var(--radius-full); font-size: 11px; font-weight: 600;
  white-space: nowrap;
}
.schip--blue   { background: var(--status-blue-tint);   color: var(--status-blue); }
.schip--green  { background: var(--status-green-tint);  color: var(--status-green); }
.schip--orange { background: var(--status-orange-tint); color: var(--status-orange); }
.schip--red    { background: var(--status-red-tint);    color: var(--status-red); }
.schip--stale  { background: var(--status-stale-tint);  color: var(--status-stale); }

.qd__acts { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.ibtn {
  height: 32px; padding: 0 8px; display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--black-15); border-radius: var(--radius-md);
  background: var(--white); color: var(--text-light);
  font-size: 10px; font-weight: 500; letter-spacing: .02em; white-space: nowrap;
}
.ibtn svg { color: var(--text-medium); flex: none; }
.ibtn:hover { border-color: var(--wrc-rackman); color: var(--wrc-rackman); }
.ibtn:hover svg { color: var(--wrc-rackman); }
.ibtn--caret, .ibtn--caret:hover { border-color: transparent; background: transparent; }
.ibtn--ink { color: var(--text-medium); }
.ibtn__car { color: var(--text-light) !important; }
.qd__edit { height: 32px; padding: 0 16px; font-size: 11.5px; font-weight: 600; gap: 6px; }
.qd__editing {
  display: inline-flex; align-items: center; gap: 7px; margin-right: 4px;
  font-size: 11px; font-weight: 500; color: var(--status-orange);
}
.qd__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--status-orange); }

/* ---------- quote info row ----------------------------------------------- */
.qd__inforow {
  display: flex; align-items: center; gap: 12px;
  height: 64px; padding: 16px; background: var(--white);
  border: 1px solid var(--black-7); border-radius: var(--radius-lg);
}
.qd__sec { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 16px; }
.qd__rule { width: 1px; align-self: stretch; background: var(--black-15); }
.qd__badge {
  width: 30px; height: 30px; flex: none; border-radius: var(--radius-md);
  background: var(--grey-light); display: grid; place-items: center; color: var(--text-medium);
}
.qd__f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.qd__f--name { gap: 0; }
.qd__fk {
  font-size: 9.5px; font-weight: 500; letter-spacing: .05em;
  color: var(--text-light); white-space: nowrap;
}
.qd__fv { font-size: 13px; font-weight: 600; color: var(--text-medium);
          white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qd__fv.is-strong { font-weight: 600; color: var(--text-dark); }
.qd__f--name .qd__fv.is-strong { font-size: 14px; }
.qd__fid { font-size: 12px; font-weight: 500; color: var(--text-light); white-space: nowrap; }
.qd__frole { font-size: 10px; font-weight: 400; color: var(--text-light); white-space: nowrap; }
.qd__contact { display: flex; align-items: center; gap: 4px; min-width: 0; }
.qd__iav {
  width: 28px; height: 28px; flex: none; border-radius: 50%;
  background: var(--grey-light); color: var(--text-medium);
  display: grid; place-items: center; font-size: 11px; font-weight: 600;
}

/* ---------- card + tabs -------------------------------------------------- */
.qd__card {
  background: var(--white); border: 1px solid var(--black-7);
  border-radius: var(--radius-xl); padding: 16px; min-width: 0;
}
.qd__tabs { display: flex; align-items: flex-end; gap: 16px; height: 27px; }
.qd__tab {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  font-size: 12px; font-weight: 500; color: var(--text-light); background: none;
}
.qd__tabrow { display: flex; align-items: center; gap: 6px; height: 16px; }
.qd__tab svg { color: var(--text-light); }
.qd__tab .qd__ul { display: block; width: 100%; height: 2px; border-radius: 2px; background: transparent; }
.qd__tab:hover { color: var(--text-dark); }
.qd__tab.is-active { color: var(--wrc-rackman); font-weight: 600; }
.qd__tab.is-active svg { color: var(--wrc-rackman); }
.qd__tab.is-active .qd__ul { background: var(--wrc-rackman); }
.qd__tabdiv { height: 1px; background: var(--black-7); }

/* ---------- contents ----------------------------------------------------- */
.qd__contents { padding-top: 12px; }
.qd__summary { display: flex; align-items: center; gap: 12px; height: 36px; padding: 6px 12px 6px 0; }
.qd__lines { font-size: 12px; font-weight: 500; color: var(--text-light); }
.qd__views { display: flex; gap: 4px; }
.qd__view {
  width: 24px; height: 24px; border-radius: var(--radius-xs);
  display: grid; place-items: center; color: var(--text-light); background: var(--white);
}
.qd__view.is-on { background: var(--wrc-rackman); color: #fff; }
.qd__sumdiv { height: 1px; background: var(--black-7); }

/* ---------- the line-item table (viewport 1639 · inner 2265) ------------- */
/* Figma's `line-items-table-scrollable` is a 1639x902 viewport with a 4px
   r999 thumb — the LINE ITEMS scroll inside the card, the page does not grow. */
.li-scroll { overflow: auto; max-height: 902px; }
.li-scroll::-webkit-scrollbar { width: 4px; height: 8px; }
.li-scroll::-webkit-scrollbar-thumb { background: var(--black-35); border-radius: var(--radius-full); }
.li-scroll::-webkit-scrollbar-track { background: transparent; }
.li-scroll { scrollbar-width: thin; scrollbar-color: var(--black-35) transparent; }
.li thead th { position: sticky; top: 0; z-index: 1; background: var(--white); }
.li th.t-price, .li th.t-disc, .li th.t-after, .li th.t-total { background: var(--grey-light); }
.li-inner { width: 2265px; padding: 0 6px; }

.li { width: 2253px; table-layout: fixed; border-collapse: collapse; }
.li thead th {
  height: 44px; vertical-align: middle; text-align: left;
  font-size: 10px; font-weight: 500; letter-spacing: .02em;
  color: var(--text-light); padding: 10px 0; line-height: 1.2;
}
.li th.t-item     { padding-right: 12px; }
.li th.t-bin,
.li th.t-info,
.li th.t-after,
.li th.t-total,
.li th.t-taxliable,
.li th.t-taxcode,
.li th.t-svcbase,
.li th.t-svctotal,
.li th.t-procdoc  { padding-left: 12px; padding-right: 12px; }
.li th.t-notes    { padding-left: 6px; }
.li th.t-price    { padding: 10px 8px; }
.li th.t-disc     { padding: 10px 3px; }
.li th.t-price, .li th.t-disc, .li th.t-after, .li th.t-total { background: var(--grey-light); text-align: right; }
.li th.t-num  { text-align: center; }
.li th.th-rule, .li td.td-rule { background: var(--black-7); padding: 0; width: 1px; }

.li__row { height: 74px; background: var(--white); }
.li__row:nth-child(even) { background: #fbfbfb; }
.li__row:hover { background: var(--wrc-rackman-7); }
.li__row td { vertical-align: middle; padding: 10px 0; }
.li td.t-num { text-align: center; font-size: 12px; color: var(--text-light); }
.li td.t-item { padding-right: 12px; }
.li td.t-bin, .li td.t-info, .li td.t-after, .li td.t-total,
.li td.t-taxliable, .li td.t-taxcode, .li td.t-svcbase,
.li td.t-svctotal, .li td.t-procdoc { padding-left: 12px; padding-right: 12px; }
.li td.t-notes { padding-left: 6px; }
.li td.t-price { padding: 10px 8px; }
.li td.t-disc  { padding: 10px 3px; }
.li td.is-money { background: var(--grey-light); text-align: right;
                  font-size: 12.5px; font-weight: 600; color: var(--text-dark);
                  font-variant-numeric: tabular-nums; }
.li__row:hover td.is-money { background: #eef2fb; }

.li__v { font-size: 12.5px; font-weight: 600; color: var(--text-dark); }
.li__dash { font-size: 12.5px; font-weight: 500; color: var(--text-light); }
.li td.t-bin, .li td.t-whse, .li td.t-qtyall { white-space: nowrap; }
.li td.t-bin > *, .li td.t-whse > *, .li td.t-qtyall > * { margin-right: 6px; }

.li__st { display: inline-flex; align-items: center; gap: 6px;
          font-size: 12.5px; font-weight: 600; color: var(--wrc-green); }
.li__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.li__st.is-short { color: var(--status-red); }

/* item cell */
.li td.t-item { display: flex; align-items: center; gap: 10px; height: 74px; }
.li__thumb {
  width: 72px; height: 54px; flex: none; border-radius: var(--radius-sm);
  overflow: hidden; background: var(--grey-light); padding: 0; border: 0;
}
.li__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.li__thumb:hover { outline: 2px solid var(--wrc-rackman); outline-offset: 1px; }
.li__stack { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.li__meta { display: flex; align-items: center; gap: 6px; min-width: 0; }
.li__pn { font-size: 11px; color: var(--text-light); white-space: nowrap; }
.li__title {
  font-size: 12.5px; font-weight: 600; color: var(--text-dark); line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* chips */
.dchip {
  display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 8px;
  border-radius: var(--radius-full); background: var(--grey-light);
  font-size: 10px; font-weight: 600; letter-spacing: .02em; color: var(--text-light);
  white-space: nowrap;
}
.dchip svg { color: var(--text-light); }
.li__chips { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }

.li__i {
  width: 28px; height: 28px; border-radius: 50%; background: var(--grey-light);
  display: grid; place-items: center; color: var(--text-medium);
}
.li__i:hover { background: var(--wrc-rackman-light); color: var(--wrc-rackman); }

.li__in {
  height: 30px; width: 72px; padding: 0 8px; text-align: right;
  border: 1px solid var(--black-15); border-radius: var(--radius-sm);
  background: var(--white); font-size: 12.5px; font-weight: 600; color: var(--text-dark);
  font-variant-numeric: tabular-nums;
}
.li__in:focus { outline: 2px solid var(--wrc-rackman-20); border-color: var(--wrc-rackman); }
.li td.t-qty .li__in { text-align: left; }

.qd__subtotal { display: flex; align-items: center; gap: 8px; padding: 12px 0 0;
                font-size: 12px; font-weight: 500; color: var(--text-light); }
.qd__stdot { color: var(--black-25); }

/* ---------- bottom row --------------------------------------------------- */
.qd__bottom { display: flex; align-items: stretch; gap: 16px; padding-top: 24px; }
.qd__people {
  flex: 0 0 172px; display: flex; flex-direction: column; gap: 12px;
  padding: 16px; background: var(--white);
  border: 1px solid var(--black-7); border-radius: var(--radius-lg);
}
.qd__person { display: flex; align-items: center; gap: 6px; }
.qd__av {
  width: 28px; height: 28px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 600;
}
.qd__av--blue  { background: var(--wrc-rackman-light); color: var(--wrc-rackman); }
.qd__av--green { background: var(--wrc-green-light);  color: var(--wrc-green); }
.qd__pname { font-size: 12px; font-weight: 600; color: var(--text-dark); }
.qd__prole { font-size: 10px; color: var(--text-light); }

.qd__notes { flex: 1 1 auto; display: flex; gap: 16px; min-width: 0; }
.qd__note { flex: 1 1 0; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.qd__notek {
  display: flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 500; letter-spacing: .05em; color: var(--text-light);
}
.qd__notek svg { color: var(--text-light); }
.qd__notebody {
  position: relative; flex: 1 1 auto; padding: 12px 12px 0;
  background: var(--white); border: 1px solid var(--black-7); border-radius: var(--radius-md);
  overflow: hidden;
}
.qd__notebody p { font-size: 13px; line-height: 1.55; color: var(--text-medium);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.qd__notex {
  position: absolute; top: 6px; right: 6px; width: 26px; height: 26px;
  border-radius: var(--radius-sm); background: var(--white);
  display: grid; place-items: center; color: var(--text-light); border: 1px solid var(--black-15);}
.qd__notex:hover { background: var(--grey-light); color: var(--text-dark); }
/* Figma pins a 391x28 white gradient over the foot of the note preview. */
.qd__notebody::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28px;
  background: linear-gradient(rgba(255, 255, 255, 0), var(--white));
  pointer-events: none;
}
/* Form/Input Type=Select Density=Micro, State=Disabled. */
.qd__field .select {
  height: 32px; padding: 0 10px; border-radius: var(--radius-md);
  font-size: 13px; font-weight: 600;
}
.qd__field .select:disabled {
  background: var(--grey-light); border-color: var(--black-7);
  color: var(--grey-strong); -webkit-text-fill-color: var(--grey-strong); opacity: 1;
}
.qd__notein {
  flex: 1 1 auto; min-height: 94px; resize: none; padding: 9px 12px; border: 1px solid var(--black-15); border-radius: var(--radius-md);
  font: inherit; font-size: 12.5px; line-height: 1.5; color: var(--text-medium);
}
.qd__notein:focus { outline: 2px solid var(--wrc-rackman-20); border-color: var(--wrc-rackman); }

.qd__taxcard {
  flex: 0 0 310px; display: flex; flex-direction: column; gap: 12px; padding: 16px;
  background: var(--white); border: 1px solid var(--black-7); border-radius: var(--radius-lg);
}
.qd__toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.qd__toggle input { position: absolute; opacity: 0; pointer-events: none; }
.tgl {
  width: 32px; height: 18px; flex: none; border-radius: var(--radius-full);
  background: var(--grey-strong); position: relative; transition: background .14s;
}
.tgl::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
  border-radius: 50%; background: #fff; transition: transform .14s;
}
.qd__toggle input:checked + .tgl { background: var(--wrc-rackman); }
.qd__toggle input:checked + .tgl::after { transform: translateX(14px); }
.qd__tglk { font-size: 12px; font-weight: 500; color: var(--text-dark); }
.qd__field { display: flex; flex-direction: column; gap: 6px; }
.qd__fieldk { font-size: 9.5px; font-weight: 500; letter-spacing: .05em; color: var(--text-light); }

.qd__totals {
  flex: 0 0 345px; display: flex; flex-direction: column; gap: 9px; padding: 12px;
  background: var(--white); border: 1px solid var(--black-7); border-radius: var(--radius-lg);
}
.qd__trow { display: flex; align-items: center; gap: 10px; }
.qd__tk { flex: 1 1 auto; font-size: 12px; font-weight: 500; color: var(--text-medium); }
.qd__tv { font-size: 13px; font-weight: 600; color: var(--text-dark); font-variant-numeric: tabular-nums; }
.qd__tdiv { height: 1px; background: var(--black-15); }
.qd__gk { flex: 1 1 auto; font-size: 14px; font-weight: 600; color: var(--text-dark); }
.qd__gv { font-size: 16px; font-weight: 700; color: var(--text-dark); font-variant-numeric: tabular-nums; }

/* ---------- other tabs --------------------------------------------------- */
.qd__pane { padding-top: 20px; display: flex; flex-direction: column; gap: 16px; }
.qd__panes { display: flex; gap: 16px; align-items: stretch; }
.qd__pcard {
  flex: 1 1 0; padding: 16px; background: var(--white);
  border: 1px solid var(--black-7); border-radius: var(--radius-lg);
}
.qd__ph { font-size: 12.5px; font-weight: 600; color: var(--text-dark); margin-bottom: 12px; }
.qd__lrow { display: flex; align-items: center; gap: 12px; min-height: 34px;
            border-top: 1px solid var(--black-7); padding: 4px 0; }
.qd__lrow:first-of-type { border-top: 0; }
.qd__lk { flex: 0 0 150px; font-size: 11.5px; color: var(--text-light); }
.qd__lv { font-size: 12.5px; font-weight: 600; color: var(--text-dark); }
.qd__lrow .input, .qd__lrow .select { flex: 1 1 auto; max-width: 280px; }
.qd__addr { font-size: 12.5px; line-height: 1.55; color: var(--text-medium); }
.qd__addr p:first-of-type { font-weight: 600; color: var(--text-dark); }
.qd__akind {
  display: inline-block; margin-bottom: 6px; padding: 2px 8px;
  border-radius: var(--radius-full); background: var(--grey-light);
  font-size: 10px; font-weight: 600; color: var(--text-light);
}
.qd__empty {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 48px 24px; text-align: center; color: var(--text-light);
  background: var(--grey-light); border-radius: var(--radius-lg);
}
.qd__empty svg { color: var(--black-25); }
.qd__empty p { font-size: 12.5px; }

.stbl { width: 100%; border-collapse: collapse; }
.stbl th {
  text-align: left; font-size: 10px; font-weight: 500; letter-spacing: .02em;
  color: var(--text-light); padding: 10px 12px; border-bottom: 1px solid var(--black-7);
}
.stbl td { padding: 12px; font-size: 12.5px; color: var(--text-medium);
           border-bottom: 1px solid var(--black-7); }
.stbl tfoot td { border-bottom: 0; font-size: 13px; }
.stbl .tr { text-align: right; }

/* ---------- add-line picker ---------------------------------------------- */
.qd__picklist { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow: auto; }
.qd__pick {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 8px; border: 1px solid var(--black-7); border-radius: var(--radius-md);
  background: var(--white);
}
.qd__pick img { width: 48px; height: 36px; border-radius: var(--radius-xs); object-fit: cover; flex: none; }
.qd__pick:hover { border-color: var(--wrc-rackman); background: var(--wrc-rackman-7); }
.qd__pick.is-on { border-color: var(--wrc-rackman); background: var(--wrc-rackman-7); box-shadow: inset 0 0 0 1px var(--wrc-rackman); }
.qd__grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.qd__ta { min-height: 132px; resize: vertical; padding: 10px 12px; line-height: 1.5; }

/* Part number is a button that opens the item record — must not look like one. */
.li__pn {
  background: none; border: 0; padding: 0; font: inherit;
  font-size: 11px; color: var(--text-light); white-space: nowrap; cursor: pointer;
}
.li__pn:hover { color: var(--wrc-rackman); text-decoration: underline; }