/* Quote → Services tab, and its two modals.

   MEASURED off `Rackman - Quote Detail - Services - Edit - Desktop` 18153:30157
   and its view twin 18152:29852 — do not eyeball.

   Every 1px line is a Figma stroke with strokeAlign INSIDE, so it is an inset
   box-shadow here, never a CSS border. The two section rules are filled 1px
   RECTANGLE nodes, so those are real elements.                              */

.sv { display: flex; flex-direction: column; gap: 16px; }

/* both cards share a shell: white on the card behind them, a 15%-black ring
   rather than the 7% the outer tab card uses */
.sv__card {
  padding: 16px; border-radius: 12px; background: var(--white);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
  display: flex; flex-direction: column; gap: 16px;
}

/* Layout/Section Label, Divider=On on both cards here */
.sv__sec { display: flex; flex-direction: column; gap: 10px; }
.sv__seck { font-size: 10px; font-weight: 600; letter-spacing: .05em; color: #656772; }
.sv__secrule { display: block; height: 1px; background: rgba(0, 0, 0, .07); }

/* ---------- the installation row ------------------------------------------ */

/* EDIT bottom-aligns on a 14px gap because the labelled fields are 47 tall and
   the button is 32; VIEW centres on a 40px gap because everything is 34. */
.sv__instrow { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.sv__instrow.is-ro { align-items: center; gap: 40px; }

.sv__field { display: flex; flex-direction: column; gap: 4px; }
.sv__field--date { width: 220px; }
.sv__field--price { width: 140px; }
.sv__k {
  font-size: 9.5px; font-weight: 500; letter-spacing: .05em; color: #656772;
  white-space: nowrap;
}
.sv__in {
  width: 100%; height: 32px; padding: 0 10px; border-radius: 8px;
  background: var(--white); border: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
  font: inherit; font-size: 13px; font-weight: 600; color: #101828;
}
.sv__in::placeholder { font-weight: 600; color: #656772; }
.sv__in:focus { outline: 2px solid var(--wrc-rackman); outline-offset: -1px; }

/* the price box is 36 tall, not 32 — it carries the "$" as a fixed prefix
   glyph rather than inside the input */
.sv__money {
  display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px;
  border-radius: 8px; background: var(--white);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
}
.sv__cur { font-size: 13px; font-weight: 500; color: #656772; }
.sv__in--bare {
  height: auto; padding: 0; box-shadow: none; border-radius: 0;
  font-variant-numeric: tabular-nums;
}
.sv__in--bare:focus { outline: none; }
.sv__money:focus-within { box-shadow: inset 0 0 0 2px var(--wrc-rackman); }

/* VIEW's label-over-value pair, and its orange money */
.sv__kv { display: flex; flex-direction: column; gap: 3px; }
.sv__v { font-size: 14px; font-weight: 600; color: #101828; }
.sv__v.is-money { color: var(--status-orange); }

.sv__info {
  flex: none; width: 36px; height: 36px; border-radius: 999px;
  background: #f8f8f8; color: #364153;
  display: grid; place-items: center;
}
.sv__instrow.is-ro .sv__info { width: 34px; height: 34px; }
.sv__info:hover { background: rgba(0, 0, 0, .07); }

.sv__btn { height: 32px; padding: 0 16px; gap: 6px; font-size: 12.5px; font-weight: 600; }
.sv__extra { align-self: flex-start; }

/* the two static chips VIEW swaps its buttons for */
.sv__chip {
  display: inline-flex; align-items: center; gap: 5px; height: 27px;
  border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap;
}
.sv__chip.is-on  { padding: 0 12px 0 10px; background: rgba(0, 128, 95, .07); color: var(--status-green); }
.sv__chip.is-off { padding: 0 10px; background: #f8f8f8; color: #656772; }

/* ---------- the extra services list --------------------------------------- */

/* the frame rules EVERY row, the last one included */
.sv__row {
  display: flex; align-items: center; gap: 14px;
  min-height: 52px; padding: 10px 0;
  box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, .07);
}
.sv__badge {
  flex: none; width: 32px; height: 32px; border-radius: 8px; background: #f8f8f8;
  display: grid; place-items: center; color: #364153;
}
.sv__info2 { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sv__name { font-size: 13px; font-weight: 600; color: #101828; }
.sv__sub  { font-size: 11.5px; color: #656772; }
.sv__price {
  flex: none; font-size: 13px; font-weight: 600; color: #101828;
  font-variant-numeric: tabular-nums;
}
/* a service the quote does not carry mutes its price — view mode only */
.sv__price.is-muted { color: #656772; }

.sv__add {
  align-self: flex-start; display: flex; align-items: center; gap: 8px;
  padding-top: 12px; font-size: 12.5px; font-weight: 600; color: var(--wrc-rackman);
}
.sv__add:hover { text-decoration: underline; }

/* ---------- Installation Prices — 18153:134420 ---------------------------- */

.ip { display: flex; flex-direction: column; gap: 16px; }
.ip__min {
  align-self: flex-start; display: flex; flex-direction: column; gap: 3px;
  padding: 10px 14px; border-radius: 10px; background: #f8f8f8;
}
.ip__mink { font-size: 9.5px; font-weight: 500; letter-spacing: .05em; color: #656772; }
.ip__minv { font-size: 18px; font-weight: 700; color: #101828; font-variant-numeric: tabular-nums; }

.ip__tbl { border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); overflow: hidden; }
/* ONE grid, not two. The frame's header cells and body cells disagree on where
   PART NUMBER ends — 220/312 in the head, 200/332 in the body — and columns 3-6
   line up either way, so the head's split is the one kept. */
.ip__thead, .ip__tr {
  display: grid; grid-template-columns: 220px minmax(200px, 1fr) 56px 96px 130px 110px;
  gap: 12px; padding: 0 14px; align-items: center;
}
.ip__thead { min-height: 31px; background: #f8f8f8; }
.ip__th {
  font-size: 9.5px; font-weight: 500; letter-spacing: .05em; color: #656772;
  white-space: nowrap;
}
.ip__tr { min-height: 56px; }
.ip__td { font-size: 12.5px; color: #364153; min-width: 0; }
.ip--qty, .ip--item, .ip--order, .ip--total,
.ip__th.ip--qty, .ip__th.ip--item, .ip__th.ip--order, .ip__th.ip--total {
  text-align: right; justify-self: end; font-variant-numeric: tabular-nums;
}
.ip--part { display: flex; align-items: center; gap: 6px; }
.ip__cond {
  padding: 2px 6px; border-radius: 4px; background: #f8f8f8;
  font-size: 9.5px; font-weight: 500; color: #656772;
}
.ip__pn { font-size: 12.5px; color: #101828; overflow: hidden; text-overflow: ellipsis; }
.ip--desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ip__money {
  display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 10px;
  border-radius: 8px; background: var(--white);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
  font-size: 12.5px; color: #101828;
}
.ip__cur { color: #656772; }
.ip__none { margin: 0; padding: 24px 14px; font-size: 12.5px; color: var(--text-light); }

/* ---------- Extra Charges — 18153:133808 ---------------------------------- */

.ec { display: flex; flex-direction: column; gap: 0; }
.ec__filter { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; }
.ec__f {
  height: 31px; padding: 0 12px; border-radius: 8px; background: var(--white);
  border: 0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
  font: inherit; font-size: 12.5px; color: #101828;
}
.ec__f::placeholder { color: #656772; }
.ec__f:focus { outline: 2px solid var(--wrc-rackman); outline-offset: -1px; }
.ec__f--search { flex: 1 1 auto; min-width: 0; }
.ec__f--num { flex: none; width: 120px; }
.ec__clear {
  flex: none; font-size: 12.5px; font-weight: 600; color: var(--wrc-rackman);
}
.ec__clear:hover { text-decoration: underline; }

/* 30 / NAME / 90 / 140 / 80 on 12px gutters — 724 + 48 = 772 */
.ec__thead, .ec__tr {
  display: grid; grid-template-columns: 30px minmax(180px, 1fr) 90px 140px 80px;
  gap: 12px; align-items: center;
}
.ec__thead {
  min-height: 36px; box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, .15);
}
.ec__th {
  display: flex; align-items: center; gap: 3px;
  font-size: 9.5px; font-weight: 500; letter-spacing: .05em; color: #656772;
}
.ec__th svg { color: #656772; }
.ec--qty, .ec--amt, .ec--hid { justify-content: center; justify-items: center; }
.ec__th.ec--qty, .ec__th.ec--amt, .ec__th.ec--hid { justify-content: center; }

.ec__tr {
  min-height: 46px; padding: 8px 0;
  box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, .07);
}
.ec__td { font-size: 12.5px; font-weight: 500; color: #101828; min-width: 0; }
.ec--name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec--pick, .ec--hid { display: flex; justify-content: center; }
.ec--qty, .ec--amt { display: flex; justify-content: center; }

.ec__cb { display: inline-flex; cursor: pointer; }
.ec__cb input { position: absolute; opacity: 0; width: 0; height: 0; }
.ec__box {
  width: 16px; height: 16px; border-radius: 4px; background: var(--white);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35);
  display: grid; place-items: center;
}
.ec__box.is-head { opacity: .5; }
.ec__cb input:checked + .ec__box { background: var(--wrc-rackman); box-shadow: none; }
.ec__cb input:checked + .ec__box::after {
  content: ""; width: 9px; height: 5px; margin-top: -2px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg);
}
.ec__cb input:focus-visible + .ec__box { outline: 2px solid var(--wrc-rackman); outline-offset: 2px; }

/* the 76x28 stepper: two 24px square buttons either side of a 28px read-out,
   square themselves and cropped by the parent's radius */
.ec__step {
  display: flex; align-items: stretch; height: 28px; border-radius: 7px;
  background: var(--white); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
  overflow: hidden;
}
.ec__sb {
  width: 24px; background: #f8f8f8; color: #364153;
  font-size: 13px; line-height: 1; display: grid; place-items: center;
}
.ec__sb:hover { background: rgba(0, 0, 0, .07); }
.ec__sv {
  width: 28px; display: grid; place-items: center;
  font-size: 12.5px; font-weight: 600; color: #101828;
}

.ec__money {
  display: flex; align-items: center; gap: 4px; width: 120px; height: 30px;
  padding: 0 8px 0 10px; border-radius: 7px; background: var(--white);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
}
.ec__cur { flex: none; font-size: 12.5px; color: #656772; }
.ec__in {
  flex: 1 1 auto; min-width: 0; border: 0; background: none; outline: none;
  font: inherit; font-size: 12.5px; color: #101828; font-variant-numeric: tabular-nums;
}
.ec__money:focus-within { box-shadow: inset 0 0 0 2px var(--wrc-rackman); }

.ec__count { font-size: 12.5px; color: #656772; }
.ec__none { margin: 0; padding: 24px 0; font-size: 12.5px; color: var(--text-light); }

/* ---------- mobile --------------------------------------------------------- */

@media (max-width: 900px) {
  .sv__card { padding: 14px; }
  .sv__instrow, .sv__instrow.is-ro {
    flex-direction: column; align-items: stretch; gap: 12px;
  }
  .sv__field--date, .sv__field--price { width: auto; }
  .sv__info { align-self: flex-start; }

  /* a row folds: the badge and name stay on one line, the price and its
     control drop beneath them */
  .sv__row { flex-wrap: wrap; row-gap: 10px; }
  .sv__info2 { flex: 1 1 60%; }
  .sv__price { order: 3; margin-left: 46px; }
  .sv__row .sv__btn, .sv__row .sv__chip { order: 4; margin-left: auto; }

  /* both tables keep their columns and scroll rather than folding into cards:
     a rate sheet and a charge sheet are read across, not down */
  .ip__tbl, .ec__tbl { overflow-x: auto; }
  .ip__thead, .ip__tr { min-width: 820px; }
  .ec__thead, .ec__tr { min-width: 620px; }

  .ec__filter { flex-wrap: wrap; }
  .ec__f--search { flex: 1 1 100%; }
  .ec__f--num { flex: 1 1 calc(50% - 40px); width: auto; }
}