@charset "UTF-8";
/* vouchers.css — Vouchers: the voucher panel, item table, totals, View / print panel,
   email panel, receipts and expenses.
   Loaded in order by templates/partials/styles.html. */

/* ================================ Vouchers =================================
   Quotation (voucher/quote/) and, later, every voucher built like it. */

/* the list: the From / To date boxes beside the customer filter */
.toolbar__date .input--sm {
  min-height: 0;   /* the stock .input is taller than the dropdown beside it */
  height: 32px;
  max-width: 150px;
  font-size: var(--fs-sm);
  text-align: left;
}
/* a table cell's text that opens the record (the quotation no.) */
.link-btn {
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: var(--primary-600);
  cursor: pointer;
}
.link-btn:hover {
  text-decoration: underline;
}
/* "Expired" under a quotation's valid-till date */
.cell-lines__sub--danger {
  color: var(--danger);
  font-weight: 600;
}

/* ---- the voucher panel (quotation_form.html), laid out like Zoho's
   "New Quote": labels on the left, grey bands for the customer and the
   terms, an item table card, the totals box on the right. */
.modal--right.modal--voucher .modal__panel {
  width: min(1400px, 100vw);
}
.modal--voucher .modal__body > .form-grid {
  display: block;   /* this panel lays out its own rows */
}
.modal--voucher .modal__head h2 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

/* a label | box row; two pairs side by side on a wide screen */
.hform-row {
  display: grid;
  grid-template-columns: 170px minmax(0, 400px) 150px minmax(0, 400px);
  gap: var(--s-3) var(--s-6);
  align-items: start;
  padding: 6px 0;
}
.hform__label {
  padding-top: 8px;   /* level with the text in the box */
  font-size: var(--fs-sm);
  color: var(--text);
}
.hform__label.is-required {
  color: var(--danger);
}
.hform__control {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
/* the customer: a longer box, across the rest of the row */
.hform__control--wide {
  grid-column: span 3;
  max-width: 720px;
}
.hform__control--full {
  grid-column: span 3;
}

/* the grey bands: the customer at the top, the terms at the bottom —
   edge to edge of the panel */
.vband {
  margin: calc(var(--s-5) * -1) calc(var(--s-5) * -1) var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--surface-3);
  border-bottom: 1px solid var(--border);
}
.vband--bottom {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--s-4) var(--s-6);
  margin: var(--s-5) calc(var(--s-5) * -1) calc(var(--s-5) * -1);
  border-top: 1px solid var(--border);
  border-bottom: none;
}
/* a group of rows, with a line under it */
.vsection {
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-3);
  border-bottom: 1px solid var(--border);
}

/* the customer's addresses and GSTIN, shown as text */
.vparty {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 300px));
  gap: var(--s-4) var(--s-6);
}
.vparty__block--wide {
  grid-column: 1 / -1;
}
.vparty__head {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-2);
}
.vparty__text {
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--text);
}
.vparty__gst {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
}
.vparty__gst .input {
  max-width: 220px;
}
.vparty__edit {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: var(--r-sm);
  background: none;
  color: var(--primary-600);
  cursor: pointer;
}
.vparty__edit:hover {
  background: var(--primary-50);
}

/* the folded parts: Order & dispatch, Payment */
.form-more {
  padding: var(--s-2) 0;
}
.form-more > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 4px 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--primary-600);
}
.form-more > summary::-webkit-details-marker {
  display: none;
}
.form-more > summary ion-icon {
  transition: transform var(--t-fast);
}
.form-more[open] > summary ion-icon {
  transform: rotate(90deg);
}

/* ---- the item table card */
.vitems {
  margin-top: var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.vitems__head {
  padding: var(--s-3) var(--s-4);
  font-weight: 700;
  background: var(--surface-3);
  border-bottom: 1px solid var(--border);
}
.vitems__alert {
  margin: var(--s-3) var(--s-4) 0;
}
.vitems__wrap {
  overflow-x: auto;
}
.vitems__table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
}
.vitems__table th {
  padding: 10px 12px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  color: var(--text-2);
  border-bottom: 1px solid var(--border);
}
.vitems__table td {
  padding: 10px 12px;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}
.vitems__table th + th,
.vitems__table td + td {
  border-left: 1px solid var(--border);
}
.vitems__table .num {
  text-align: right;
}
.vline[hidden] {
  display: none;
}
.vline__no {
  width: 36px;
  padding-top: 16px !important;
  color: var(--text-3);
  font-size: var(--fs-sm);
}
.vline__item {
  min-width: 340px;
}
/* the item's picture on the left, its details beside it (as on Zoho) */
.vline__item > .vline__thumb {
  float: left;
}
.vline__item-body {
  margin-left: 58px;
}
.vline__thumb {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  overflow: hidden;
  font-size: 1.4rem;
  color: var(--text-3);
  background: #fff;   /* white like paper, so dark-on-clear pictures stay visible */
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.vline__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.vline__thumb [hidden] {
  display: none;
}
.vline__qty,
.vline__rate {
  width: 130px;
}
.vline__disc {
  width: 120px;
}
.vline__tax {
  width: 130px;
  padding-top: 16px !important;
  font-size: var(--fs-sm);
  white-space: nowrap;
}
.vline__amount {
  width: 130px;
  padding-top: 16px !important;
  font-weight: 700;
  white-space: nowrap;
}

/* the boxes in a row: plain until pointed at, like the sample */
.vline__input {
  width: 100%;
  height: 34px;
  padding: 0 8px;
  font: inherit;
  font-size: var(--fs-md);
  text-align: right;
  color: var(--text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
}
.vline__input:hover {
  border-color: var(--border);
}
.vline__input:focus {
  outline: none;
  border-color: var(--primary-500);
  background: var(--surface);
}
.vline__input--item {
  text-align: left;
  font-weight: 500;
  background: var(--surface);
  border-color: var(--border-strong);
}
.vline__input--item::placeholder {
  color: var(--primary-600);
  font-weight: 500;
}
.vline__item-head {
  display: flex;
  align-items: center;
  gap: 4px;
}
/* the ⊗ beside the item box and its gap: the description below stops where
   the item box does, so the two are the same width */
.vline__item-body {
  --vline-remove-space: calc(26px + 4px);
}
.vline__remove {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  padding: 0;
  border: none;
  background: none;
  font-size: 1.1rem;
  color: var(--text-3);
  cursor: pointer;
}
.vline__remove:hover {
  color: var(--danger);
}
.vline__description {
  display: block;
  width: calc(100% - var(--vline-remove-space, 0px));   /* as wide as the item box above */
  overflow-y: hidden;   /* it grows to fit its text instead (voucher-form.js) */
  margin-top: 6px;
  padding: 8px 10px;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--text);
  background: var(--surface-3);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  resize: vertical;
}
.vline__description:focus {
  outline: none;
  border-color: var(--primary-500);
  background: var(--surface);
}
/* the item's type and HSN: a line of its own under the description, small */
.vline__meta {
  margin-top: 4px;
  font-size: 0.7rem;
  color: var(--text-3);
}
.vline__meta[hidden] {
  display: none;
}
.vline__tag {
  display: inline-block;
  padding: 0 4px;
  margin-right: 2px;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--primary-500);
  border-radius: 3px;
}
.vline__unit {
  display: block;
  padding: 4px 8px 0;
  font-size: var(--fs-sm);
  color: var(--text-2);
}
/* the discount box with its % on the right */
.vline__suffix {
  display: flex;
  align-items: center;
  gap: 4px;
}
.vline__suffix span {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  font-size: var(--fs-sm);
  color: var(--text-2);
  background: var(--surface-3);
  border-radius: var(--r-sm);
}

/* ---- under the table: Add New Row + customer notes | the totals */
.vfoot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: var(--s-6);
  align-items: start;
  margin-top: var(--s-4);
}
.vfoot__left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-5);
}
.vfoot__left .field {
  align-self: stretch;
}
.vfoot__add {
  color: var(--primary-600);
  background: var(--primary-50);
  border: none;
}
.vfoot__add:hover {
  background: var(--primary-100);
}
.vtotals {
  padding: var(--s-4) var(--s-5);
  background: var(--surface-3);
  border-radius: var(--r-md);
}
.vtotals__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-3);
  padding: 8px 0;
  font-size: var(--fs-md);
}
.vtotals__row > :last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* label | box | amount (packing charges) */
.vtotals__row--input {
  grid-template-columns: minmax(0, 1fr) 130px 100px;
}
.vtotals__input {
  min-height: 0;
  height: 34px;
  text-align: right;
}
.vtotals__row--strong {
  font-weight: 700;
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--border);
}
.vtotals__taxes {
  padding: 4px 0 4px var(--s-3);
  margin: 4px 0;
  border-left: 2px solid var(--border);
}
.vtotals__taxes:empty {
  display: none;
}
.vtotals__taxes .vtotals__row {
  padding: 6px 0;
}
.vtotals__row--grand {
  margin-top: var(--s-2);
  padding-top: var(--s-3);
  border-top: 1px solid var(--border);
  font-size: var(--fs-lg);
  font-weight: 700;
}

@media (max-width: 1100px) {
  /* the two pairs of a row go one under the other */
  .hform-row {
    grid-template-columns: 150px minmax(0, 1fr);
  }
  .hform__control--wide,
  .hform__control--full {
    grid-column: span 1;
  }
  .vfoot {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 560px) {
  /* phone: the label over its box */
  .hform-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
  .hform__label {
    padding-top: 6px;
  }
  .hform__label:empty {
    display: none;
  }
  .vparty,
  .vband--bottom {
    grid-template-columns: minmax(0, 1fr);
  }
  .vtotals__row--input {
    grid-template-columns: minmax(0, 1fr) 110px 80px;
  }
}

/* the item picker: the list under a row's item box (voucher-form.js,
   initVoucherForm) — on the page itself, above the panel, so the item
   table's scrolling never cuts it off */
.item-picker {
  position: fixed;
  z-index: 1400;
  max-height: 280px;
  overflow-y: auto;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: 0 12px 28px rgb(0 0 0 / 0.16);
}
.item-picker[hidden] {
  display: none;
}
.item-picker__option {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 8px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.item-picker__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
/* the item's picture in the list: white like paper, as in the Items table */
.item-picker__thumb {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  overflow: hidden;
  font-size: 1.1rem;
  color: var(--text-3);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.item-picker__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.item-picker__option strong {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text);
}
.item-picker__option span {
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.item-picker__option:hover {
  background: var(--surface-3);
}
.item-picker__option.is-active {
  background: var(--primary-500);
}
.item-picker__option.is-active strong,
.item-picker__option.is-active span {
  color: #fff;
}
.item-picker__note {
  padding: 8px 10px;
  font-size: var(--fs-sm);
  color: var(--text-3);
}


/* ---- select picker: a <select data-select-picker> as a searchable list
   (select-picker.js, initSelectPicker) — the customer on a quotation */
.select-picker {
  position: relative;
}
.select-picker__box {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  min-height: 36px;
  padding: 6px var(--s-3);
  font: inherit;
  font-size: var(--fs-md);
  text-align: left;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.select-picker__box:focus-visible,
.select-picker.is-open .select-picker__box {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px var(--primary-100);
}
.select-picker__value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.select-picker__value.is-placeholder {
  color: var(--text-3);
}
.select-picker__box ion-icon {
  flex: 0 0 auto;
  color: var(--text-2);
  transition: transform var(--t-fast);
}
.select-picker.is-open .select-picker__box ion-icon {
  transform: rotate(180deg);
  color: var(--primary-600);
}
.select-picker__panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  padding: var(--s-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: 0 14px 32px rgb(0 0 0 / 0.16);
}
.select-picker__panel[hidden] {
  display: none;
}
.select-picker__search {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0 var(--s-3);
  border: 1px solid var(--primary-500);
  border-radius: var(--r-sm);
}
.select-picker__search ion-icon {
  color: var(--text-3);
}
.select-picker__search input {
  flex: 1 1 auto;
  min-width: 0;
  height: 36px;
  font: inherit;
  font-size: var(--fs-md);
  color: var(--text);
  background: none;
  border: none;
  outline: none;
}
.select-picker__search input:focus {
  border: none;
  box-shadow: none;   /* the search box around it already shows the focus */
}
.select-picker__list {
  max-height: 300px;
  margin-top: var(--s-2);
  overflow-y: auto;
}
.select-picker__option {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 8px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.select-picker__option:hover {
  background: var(--surface-3);
}
.select-picker__avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 50%;
  font-weight: 600;
  color: var(--text-2);
  background: var(--surface-3);
  border: 1px solid var(--border);
}
.select-picker__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}
.select-picker__text strong {
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.select-picker__text span {
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.select-picker__text span:empty {
  display: none;
}
.select-picker__check {
  flex: 0 0 auto;
  visibility: hidden;
  font-size: 1.1rem;
}
.select-picker__option[aria-selected="true"] .select-picker__check {
  visibility: visible;
}
/* the one ↑ ↓ point at: blue, as on the sample */
.select-picker__option.is-active {
  background: var(--primary-500);
}
.select-picker__option.is-active strong,
.select-picker__option.is-active .select-picker__text span,
.select-picker__option.is-active .select-picker__check {
  color: #fff;
}
.select-picker__option.is-active .select-picker__avatar {
  color: var(--primary-600);
  background: #fff;
  border-color: transparent;
}
.select-picker__note {
  padding: 8px 10px;
  font-size: var(--fs-sm);
  color: var(--text-3);
}

/* ---- voucher panel: Sales and the buttons ------------------------------ */
/* 13: the place of supply — the customer's state, shown in small type */
.vparty__pos {
  margin-top: 6px;
  font-size: var(--fs-sm);
  color: var(--text-2);
}
/* 16: a narrower panel for a voucher with fewer fields (kind.compact: Sales) */
.modal--right.modal--voucher-compact .modal__panel {
  width: min(1280px, 100vw);
}
/* 11: Payment details, last, across the bottom band */
.vband__wide {
  grid-column: 1 / -1;
}
/* 10: Save · Save as Draft · Cancel on the left, Mark as Cancel on the right */
.modal__foot--voucher {
  justify-content: flex-start;
  gap: var(--s-2);
  flex-wrap: wrap;                     /* a very narrow screen: a second row, never off the edge */
}
.modal__foot--voucher .btn {
  white-space: nowrap;
}
/* Print ▾ in the footer: the menu opens upwards, from the button's left */
.vprint-menu .export-menu__panel {
  top: auto;
  bottom: calc(100% + var(--s-2));
  left: 0;
  right: auto;
  min-width: 210px;
}
.vprint-menu[open] > summary ion-icon:last-child {
  transform: rotate(180deg);
}
.vfoot__cancel {
  margin-left: auto;
  color: var(--danger);
}
.vfoot__cancel:hover {
  color: var(--danger);
  border-color: var(--danger);
}

/* Bill to / Ship to · GST on a voucher: folded away by default
   (voucher_party.html, a <details>); the eye button and its help line
   open it, the crossed eye closes it again */
.vparty__summary {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px var(--s-3);
  cursor: pointer;
  list-style: none;
}
.vparty__summary::-webkit-details-marker {
  display: none;
}
.vparty__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--primary-600);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.vparty__summary:hover .vparty__toggle {
  background: var(--primary-50);
}
.vparty__toggle ion-icon {
  font-size: 1rem;
}
.vparty__help {
  font-size: var(--fs-sm);
  color: var(--text-3);
}
/* the eye and "Click to show …" when closed; the crossed eye and "Click to
   hide them" when open */
.vparty__fold[open] .vparty__when-closed,
.vparty__fold:not([open]) .vparty__when-open {
  display: none;
}
.vparty__fold > .vparty {
  margin-top: var(--s-3);
}

/* ⓘ beside the customer name: the customer's outstanding in a small card
   (voucher_form.html, party_outstanding.html) */
.party-line {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.party-line__select {
  flex: 1 1 auto;
  min-width: 0;
}
.party-info {
  position: relative;
  flex: 0 0 auto;
}
.party-info__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  font-size: 1.25rem;
  color: var(--primary-600);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  cursor: pointer;
  list-style: none;
}
.party-info__icon::-webkit-details-marker {
  display: none;
}
.party-info__icon:hover,
.party-info[open] .party-info__icon {
  background: var(--primary-50);
  border-color: var(--primary-500);
}
.party-info__panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  right: 0;
  width: min(400px, 90vw);
  max-height: 420px;
  overflow-y: auto;
  padding: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: 0 14px 32px rgb(0 0 0 / 0.16);
}
.party-info__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--s-3);
  font-size: var(--fs-sm);
}
.party-info__head strong {
  font-size: var(--fs-md);
}
.party-info__sums {
  margin: 0;
}
.party-info__sums > div {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 4px 0;
  font-size: var(--fs-sm);
}
.party-info__sums dt {
  color: var(--text-2);
}
.party-info__sums dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.party-info__total {
  margin-top: 4px;
  padding-top: 8px !important;
  border-top: 1px solid var(--border);
  font-size: var(--fs-md) !important;
  font-weight: 700;
}
.party-info__total dt {
  color: var(--text) !important;
}
.party-info__overdue dt,
.party-info__overdue dd,
.party-info__late {
  color: var(--danger) !important;
  font-weight: 600;
}
.party-info__bills {
  width: 100%;
  margin-top: var(--s-3);
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.party-info__bills th {
  padding: 6px 4px;
  font-size: var(--fs-xs);
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
  border-bottom: 1px solid var(--border);
}
.party-info__bills td {
  padding: 6px 4px;
  border-bottom: 1px solid var(--border);
}
.party-info__bills .num {
  text-align: right;
}
.party-info__late {
  display: block;
  font-size: var(--fs-xs);
}
.party-info__empty {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-3);
}

/* + Add new item: the last row of the item picker */
.item-picker__new {
  flex-direction: row;
  align-items: center;
  gap: var(--s-2);
  margin-top: 4px;
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
}
.item-picker__new strong {
  color: var(--primary-600) !important;
}
.item-picker__new ion-icon {
  font-size: 1.2rem;
  color: var(--primary-600);
}
.item-picker__new.is-active strong,
.item-picker__new.is-active ion-icon {
  color: #fff !important;
}
/* the Add Item / Customer panel over the voucher panel (#subModal), and
   one layer higher its + New group (#subModal2) */
#subModal .modal {
  z-index: 1300;
}
#subModal2 .modal {
  z-index: 1400;
}
#subModal .modal__panel,
#subModal2 .modal__panel {
  animation: panel-from-right var(--t) var(--ease);
}

/* the notes left of the totals, one under the other, each the full width:
   customer notes (Quotation), terms & conditions, narration */
.vnotes {
  align-self: stretch;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-3);
}
/* Add New Row · Add New Item, side by side */
.vfoot__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
/* a box that grows with its text (data-autogrow: narration, item
   description) — no inner scrollbar */
textarea[data-autogrow] {
  overflow-y: hidden;
  resize: none;
}
.vnotes__wide {
  grid-column: 1 / -1;
}
/* the last section: no line under it */
.vsection--last {
  margin: var(--s-4) 0 0;
  padding: var(--s-2) 0 0;
  border-top: 1px solid var(--border);
  border-bottom: none;
}
@media (max-width: 560px) {
  .vnotes {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* "No sales man": the first row of an optional picker list, empties it */
.select-picker__option--clear strong {
  font-style: italic;
  color: var(--text-2);
}

/* ---- Receipt panel (voucher/pay_receipt/) -------------------------------- */
/* the amount received: a bigger box, it is what the receipt is about */
.input--amount {
  font-size: var(--fs-lg);
  font-weight: 700;
}
/* the customer's unpaid invoices, with a "Receive now" box each */
.rbills {
  margin-top: 0;
}
.rbills__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}
.rbills__actions {
  display: flex;
  gap: var(--s-2);
}
.rbills__note {
  margin: 0;
  padding: var(--s-4);
  font-size: var(--fs-sm);
  color: var(--text-3);
}
.rbills__table {
  min-width: 640px;
}
.rbills__table td {
  vertical-align: middle;
}
.rbills__box {
  width: 160px;
}
.rbills__input {
  border-color: var(--border-strong);
  background: var(--surface);
}
/* more set against invoices than received */
.vtotals.is-over [data-receipt-sum="adjusted"] {
  color: var(--danger);
  font-weight: 700;
}
.vtotals__warn {
  margin: var(--s-2) 0 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--danger);
}
/* the receipt list: the invoices a receipt paid may be many — they wrap */
.table--wide [data-col="adjusted"] .cell-lines__sub {
  white-space: normal;
  max-width: 220px;
  margin-left: auto;
}
/* a label | box pair that can be hidden as one (Deposited to, for Cash) */
.hform__pair {
  display: contents;
}
.hform__pair[hidden] {
  display: none;
}
/* the tick column and the Find box of the pending invoices */
.rbills__pick {
  width: 36px;
  text-align: center;
}
.rbills__pick input {
  width: 17px;
  height: 17px;
  accent-color: var(--primary-500);
  cursor: pointer;
}
.rbills__find {
  max-width: 190px;
}
.rbills__find input {
  height: 32px;
}
.rbills__table tr[hidden] {
  display: none;
}
/* Payment received (Sales): the tick, and the box it opens */
.vpaid__check {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) 0;
  cursor: pointer;
}
.vpaid__check input {
  width: 18px;
  height: 18px;
  accent-color: var(--primary-500);
}
.vpaid__check .muted {
  font-size: var(--fs-sm);
}
.vpaid__box {
  margin-top: var(--s-2);
  padding: var(--s-3) var(--s-4);
  background: var(--surface-3);
  border-radius: var(--r-md);
}
.vpaid__box[hidden] {
  display: none;
}
/* the Find box sits on the grey head of the invoices: white, so it shows */
.rbills__find {
  background: var(--surface);
  border: 1px solid var(--border-strong);
}

/* ---- the company's bank accounts (company_form.html, bank_card.html) ---- */
.bank-cards {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.bank-card {
  padding: var(--s-3) var(--s-4) var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.bank-card[hidden] {
  display: none;
}
.bank-card__head {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-bottom: var(--s-2);
}
.bank-card__head .icon-btn {
  margin-left: auto;
}
.bank-card__default {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}
.bank-card__default input {
  width: 16px;
  height: 16px;
  accent-color: var(--primary-500);
}
/* one bank on the Company page: its details on one wrapping line */
.bank-line {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--s-4);
}
/* + Add new customer: the last row of the customer list */
.select-picker__new {
  margin-top: 4px;
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
}
.select-picker__new strong {
  font-weight: 600;
  color: var(--primary-600) !important;
}
.select-picker__new ion-icon {
  font-size: 1.25rem;
  color: var(--primary-600);
}
.select-picker__new.is-active strong,
.select-picker__new.is-active ion-icon {
  color: #fff !important;
}
/* + a new customer, beside ⓘ: the same square button */
.party-line__add {
  flex: 0 0 auto;
  padding: 0;
  font: inherit;
  font-size: 1.15rem;
}
/* a column heading that sorts the table (sort_th.html): the heading's own
   look, an arrow after it — faint until it is the column sorted on */
.th-sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  white-space: nowrap;
  background: none;
  border: 0;
  cursor: pointer;
}
.th-sort ion-icon {
  font-size: 0.95rem;
  opacity: 0.35;
}
.th-sort:hover,
.th-sort.is-sorted {
  color: var(--primary-600);
}
.th-sort:hover ion-icon,
.th-sort.is-sorted ion-icon {
  opacity: 1;
}
.th-sort:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- ⋮ → Voucher settings (voucher_settings_form.html) ------------------ */
.vset {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--border);
}
.vset:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.vset__head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  font-size: var(--fs-base);
  font-weight: 700;
}
.vset__head ion-icon {
  color: var(--primary-600);
  font-size: 1.15rem;
}
.vset__lead {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.vset__next {
  padding: 1px 8px;
  color: var(--primary-600);
  background: var(--primary-50);
  border-radius: var(--r-sm);
  white-space: nowrap;
}
/* one numbering rule: its boxes side by side, the example at the end */
.vrules {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.vrule {
  display: grid;
  grid-template-columns: 150px minmax(110px, 1.3fr) 70px minmax(80px, 1fr) 90px 190px minmax(130px, 1.2fr) 32px;
  align-items: start;
  gap: var(--s-2);
  padding: var(--s-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.vrule[hidden] {
  display: none;
}
.vrule__cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.vrule__cell .input,
.vrule__cell .select {
  width: 100%;
}
.vrule__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-3);
  white-space: nowrap;
}
.vrule__sample {
  display: block;
  padding: 8px 0;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: var(--fs-md);
  color: var(--primary-600);
  overflow-wrap: anywhere;
}
.vrule__remove {
  margin-top: 22px;
}
.vrule__error {
  grid-column: 1 / -1;
}
.vset__help {
  padding: var(--s-3) var(--s-4);
  font-size: var(--fs-sm);
  color: var(--text-2);
  background: var(--surface-3);
  border-radius: var(--r-md);
}
.vset__help p {
  margin: 0 0 6px;
}
.vset__help p:last-child {
  margin-bottom: 0;
}
.vset__tokens {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}
.vset__tokens code {
  padding: 1px 6px;
  font-weight: 700;
  color: var(--primary-600);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.vset__check {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  cursor: pointer;
}
.vset__check input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--primary-500);
}
.vset__check > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
@media (max-width: 900px) {
  .vrule {
    grid-template-columns: 1fr 1fr;
  }
  .vrule__cell--sample {
    grid-column: 1 / -1;
  }
  .vrule__remove {
    margin-top: 0;
    justify-self: end;
    grid-column: 1 / -1;
    grid-row: 1;
  }
}
/* ---- the voucher's Dispatch / Order / Export details (Tally's groups):
   a bold title each, two label · box pairs to a row, a label never wraps */
.vdetails {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-top: var(--s-2);
}
.vdetails__group {
  padding: var(--s-3) var(--s-4) var(--s-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.vdetails__group[hidden] {
  display: none;
}
.vdetails__title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 var(--s-2);
  padding-bottom: 6px;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.vdetails__title ion-icon {
  font-size: 1.05rem;
  color: var(--primary-600);
}
.vdetails__grid {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr);
  gap: 6px var(--s-4);
  align-items: start;
}
/* one label width in every group, so the three line up */
.vdetails__grid .hform__label {
  white-space: nowrap;
  min-width: 172px;
}
@media (max-width: 900px) {
  .vdetails__grid {
    grid-template-columns: max-content minmax(0, 1fr);
  }
}
@media (max-width: 560px) {
  .vdetails__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
  .vdetails__grid .hform__label {
    min-width: 0;
  }
}

/* an item row's description count: "86 / 150" (the limit is in Voucher
   settings, so every row fits the printed invoice) — amber near, red over */
.vline__count {
  display: block;
  margin-top: 2px;
  margin-right: var(--vline-remove-space, 0px);   /* under the description's right edge */
  text-align: right;
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
}
.vline__count.is-near {
  color: var(--warning);
  font-weight: 600;
}
.vline__count.is-over {
  color: var(--danger);
  font-weight: 700;
}
/* Voucher settings → Item rows: the limit box */
.vset__limit {
  display: grid;
  grid-template-columns: max-content 120px;
  align-items: center;
  gap: 6px var(--s-3);
}
.vset__limit .hint,
.vset__limit .field-error {
  grid-column: 1 / -1;
}

/* Voucher settings → Print colour: a small printed-page swatch each */
.vcolors {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: var(--s-2);
}
.vcolor {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--s-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  cursor: pointer;
}
.vcolor input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.vcolor:hover {
  border-color: var(--border-strong);
}
.vcolor:has(input:checked) {
  border-color: var(--primary-600);
  box-shadow: 0 0 0 2px var(--primary-100);
}
.vcolor:has(input:focus-visible) {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}
/* the swatch is always a white page, in dark mode too, like the print */
.vcolor__swatch {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 6px 8px 8px;
  background: #fff;
  border: 1px solid #e3e5ec;
  border-radius: 6px;
}
.vcolor__title {
  align-self: flex-end;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--accent);
}
.vcolor__bar {
  height: 10px;
  border-radius: 2px;
  background: var(--tint);
  border-top: 2px solid var(--accent);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.vcolor__name {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-2);
  line-height: 1.3;
}
.vcolor:has(input:checked) .vcolor__name {
  color: var(--text);
}

/* the customer's advance on a sales invoice (advance_box.html) */
.vadvance {
  margin-bottom: var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: var(--success-bg, #ecfdf3);
  border: 1px solid var(--border);
  border-left: 3px solid var(--success, #15803d);
  border-radius: var(--r-md);
}
.vadvance__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.vadvance__head ion-icon {
  font-size: 1.15rem;
  color: var(--success, #15803d);
}
.vadvance__list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 6px 0 2px;
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.vadvance__amount {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.vadvance__amount .input {
  max-width: 200px;
}

/* ⋮ in the sales invoice panel's head (History, Extra fields): to the
   right, just before ✕ */
.vhead-menu {
  position: relative;
  margin-left: auto;
  margin-right: 4px;
}
.vhead-menu > summary {
  list-style: none;
  cursor: pointer;
}
.vhead-menu > summary::-webkit-details-marker {
  display: none;
}
.vhead-menu .more-menu__panel {
  right: 0;
  left: auto;
  width: max-content;
  min-width: 240px;
}
.vhead-menu .menu__item {
  white-space: nowrap;
}

/* View (the PDF) beside Edit in a voucher row */
.icon-btn--view {
  color: var(--text-2);
  background: var(--surface-3);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  text-decoration: none;
}
.icon-btn--view:hover {
  color: var(--primary-600);
  border-color: var(--primary-500);
}
/* the View panel (pdf_view.html): as wide as the voucher's own panel
   (.modal--voucher / -compact); the PDF fills it below the head */
.modal--right.modal--pdf .modal__panel {
  width: min(1400px, 100vw);
}
.modal--right.modal--pdf-compact .modal__panel {
  width: min(1280px, 100vw);
}
.vpdf__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
}
.vpdf__head h2 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
}
.vpdf__head h2 ion-icon {
  color: var(--primary-600);
}
.vpdf__who {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-2);
}
.vpdf__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-left: auto;
}
.vpdf__body {
  flex: 1 1 auto;
  min-height: 0;
  background: var(--surface-3);
}
.vpdf__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* under the voucher's terms: keep them as the default (admin) */
.vterms-default {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: var(--fs-sm);
  color: var(--text-2);
  cursor: pointer;
}
.vterms-default input {
  width: 15px;
  height: 15px;
  accent-color: var(--primary-500);
}

/* ---- Credit Note (a sales return) --------------------------------------- */
/* the item table's head: "Return all" on the right */
.vitems__head:has(.vitems__all) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding-block: 6px;
}
/* no invoice picked yet / nothing left to return */
.vitems__empty {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  padding: var(--s-5, 20px) var(--s-4);
  color: var(--text-2);
}
.vitems__empty ion-icon {
  font-size: 1.25rem;
  color: var(--text-3);
}
/* a credit note's row: sold on the invoice · what can still come back */
.vline__sold {
  display: block;
  padding: 2px 8px 0;
  font-size: 0.7rem;
  color: var(--text-3);
  white-space: nowrap;
}
/* a sales invoice with goods returned on it */
.vreturns {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
  padding: var(--s-2) var(--s-3);
  font-size: var(--fs-sm);
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--warning, #b45309);
  border-radius: var(--r-sm);
}
.vreturns ion-icon {
  flex: none;
  margin-top: 2px;
  color: var(--warning, #b45309);
}
/* a number cell with a line under it (the balance, "Returned 2,500.00") */
.cell-lines--end {
  align-items: flex-end;
  text-align: right;
}
/* an item not on the invoice: returned at its own rate and GST */
.vline__sold.is-other {
  color: var(--warning, #b45309);
}
.vline__sold[hidden] {
  display: none;
}
/* "from INV/26-27/0014" beside the Item Table title */
.vitems__against {
  margin-right: auto;
  margin-left: var(--s-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-2);
}

/* ---- Convert to Sales Invoice (Quotation, Proforma) -------------------- */
/* the list's convert icon, beside View */
.icon-btn--convert {
  color: var(--success, #15803d);
  background: var(--surface-3);
  border: 1px solid transparent;
  border-radius: var(--r-md);
}
.icon-btn--convert:hover {
  border-color: var(--success, #15803d);
}
.table .actions .icon-btn--convert {
  opacity: 1;
}
/* under the voucher's number, in small type: "Made from Quotation QT/26-27/0001
   (09-10-2026)", or "Converted to sales invoice INV/…" */
.vnum__note {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.vnum__note strong {
  color: var(--text-2);
  font-weight: 600;
}
.vfoot__convert {
  color: var(--success, #15803d);
}

/* the View panel's Copies box (a sales invoice): Original, Duplicate … */
.vpdf__copies {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: var(--s-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-2);
}
.vpdf__copies .select {
  width: auto;
  min-width: 15rem;
  padding-block: 4px;
}
/* "Item images" (Sales, Quotation, Proforma): a tick, off to start */
.vpdf__images {
  cursor: pointer;
  white-space: nowrap;
}
.vpdf__images input {
  width: 16px;
  height: 16px;
  accent-color: var(--primary-600);
  cursor: pointer;
}

/* ---- Send Email (voucher/partials/email_form.html) -------------------- */
.modal--right.modal--email .modal__panel {
  width: min(900px, 100vw);
}
.vmail {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
}
/* From / Send to / Cc / Bcc / Subject: label on the left, a line under each */
.vmail__row {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  align-items: center;
  gap: var(--s-3);
  padding: 8px var(--s-4);
  border-bottom: 1px solid var(--border);
}
.vmail__row[hidden] {
  display: none;
}
.vmail__label {
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.vmail__from {
  font-size: var(--fs-md);
}
.vmail__box {
  display: flex;
  flex-direction: column;
  gap: 4px;
  grid-column: 2 / -1;
}
.vmail__row:has(.vmail__more) .vmail__box {
  grid-column: 2;
}
.vmail__box .input {
  border-color: transparent;
  background: transparent;
  padding-inline: 0;
}
.vmail__box .input:focus {
  border-color: var(--primary-500);
  background: var(--surface);
  padding-inline: 8px;
}
.vmail__more {
  display: flex;
  gap: var(--s-2);
  font-size: var(--fs-sm);
}
/* the formatting toolbar */
.vmail__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding: 6px var(--s-3);
  background: var(--surface-3);
  border-bottom: 1px solid var(--border);
}
.vmail__tools button {
  display: grid;
  place-items: center;
  min-width: 32px;
  height: 30px;
  padding: 0 6px;
  font-size: var(--fs-md);
  color: var(--text);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.vmail__tools button:hover {
  background: var(--surface);
  border-color: var(--border);
}
.vmail__sep {
  width: 1px;
  height: 20px;
  margin: 0 6px;
  background: var(--border-strong);
}
.vmail__tools-hint {
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--text-3);
}
/* the email itself, as the customer gets it — always on its light page */
.vmail__preview {
  max-height: 60vh;
  overflow-y: auto;
  background: #f4f5f7;
}
.vmail__editor {
  min-height: 120px;
  padding: 6px 8px;
  margin: -6px -8px;
  border: 1px dashed #c7cfff;
  border-radius: 6px;
  outline: none;
  background: #ffffff;
}
.vmail__editor:focus {
  border: 1px solid #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.vmail__editor p {
  margin: 0 0 12px;
}
.vmail__attach {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 10px var(--s-4);
  font-size: var(--fs-sm);
  border-top: 1px solid var(--border);
}
.vmail__alert {
  grid-column: 1 / -1;
}

/* ---- Expenses (voucher/expense/partials/expense_form.html) ------------- */
.vexp__table {
  min-width: 720px;
}
.vexp__what .vline__description {
  display: block;
  width: 100%;
  margin-top: 6px;
}
.vexp__gst .select {
  width: 84px;
  margin-left: auto;
}
.vexp__remove {
  width: 40px;
}
/* "On credit": owed to the supplier */
.vexp__credit {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: var(--s-2) 0 0;
  padding: var(--s-2) var(--s-3);
  font-size: var(--fs-sm);
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--warning, #b45309);
  border-radius: var(--r-sm);
}
.vexp__credit[hidden] {
  display: none;
}
/* the CGST + SGST or IGST rows: only the ones that apply (voucher-form.js) */
.vtotals__row[hidden] {
  display: none;
}
/* the Expense details bar: "+ Expense Head" on the right */
.vexp__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding-block: 6px;
}
/* Expense Heads panel */
.xheads td {
  vertical-align: middle;
}
.xheads__use {
  width: 80px;
  text-align: center;
}
/* the expense rows: a head's list opens over the rows below — not cut off
   by the table's box (on a phone the table scrolls sideways instead) */
.vitems.vexp,
.vexp .vitems__wrap {
  overflow: visible;
}
.vexp .vitems__head {
  border-radius: var(--r-md) var(--r-md) 0 0;
}
.vexp__what .select-picker {
  min-width: 240px;
}
.vexp__what .select-picker__panel {
  min-width: 320px;
}
@media (max-width: 760px) {
  .vexp .vitems__wrap {
    overflow-x: auto;
  }
}