/* One size family for every page. Big numbers and status chips keep their own sizes. */

.list-head h2,
.ord > .list-head.is-compact h2,
.pr > .list-head.is-compact h2,
.stk .list-head h2 {
  font-size: var(--type-page);
}

.ord-po-number,
.ord-po-detail .ord-po-number,
.ord-po-fill .ord-po-number,
.cat-product-detail .ord-po-number,
.cat-supplier-detail .ord-po-number,
.cat-recipe-detail .ord-po-number,
#users-panel .users-detail .ord-po-number,
#site-database-panel .site-db-detail .ord-po-number,
#price-lists-panel .ord-po-number,
.stk-count-title,
.stk-placeholder-card strong {
  font-size: var(--type-record);
  line-height: 1.2;
}

.ord-po-detail,
.cat-product-detail,
.cat-supplier-detail,
.stk-count-detail,
.ord-po-row,
.ord-po-row .ord-po-col,
.ord-po-row .ord-po-col strong,
#products-panel .ord-po-row,
#products-panel .ord-po-row .ord-po-col,
#products-panel .ord-po-row .ord-po-col strong,
#users-panel .ord-po-row,
#users-panel .ord-po-row .ord-po-col,
#users-panel .ord-po-row .ord-po-col strong,
#site-database-panel .ord-po-row,
#site-database-panel .ord-po-row .ord-po-col,
#site-database-panel .ord-po-row .ord-po-col strong,
.ord-guide-row,
.ord-po-detail .ord-guide-row,
.ord-po-lines-table .ord-guide-row,
.ord-guide-row .ord-code,
.ord-po-line .ord-code,
.stk-table,
.fin-table {
  font-size: var(--type-row);
}

.ord-po-filters .ord-po-col,
.ord-po-filters .ord-sort-head,
#products-panel .ord-po-filters .ord-po-col,
#products-panel .ord-po-filters .ord-sort-head,
#users-panel .ord-po-filters .ord-sort-head,
#site-database-panel .ord-po-filters .ord-sort-head,
.ord-guide-head,
.ord-po-detail .ord-guide-head,
.ord-po-lines-table .ord-guide-head,
.stk-table th,
.fin-table thead th,
.cat-detail-section-title,
#suppliers-panel .cat-detail-section-title,
.site-db-section-title,
.users-section-title,
.ord-po-detail-sub {
  font-size: var(--type-col);
}

.ord-po-filters input,
.ord-po-filters select,
#products-panel .ord-po-filters input,
#users-panel .ord-po-filters input,
#site-database-panel .ord-po-filters input,
#price-lists-panel .ord-po-filters input,
#price-lists-panel .ord-po-row input,
#price-lists-panel .ord-po-row select,
.cat-product-form .field input,
.cat-product-form .field select,
.cat-supplier-form input,
.cat-supplier-form select,
.cat-supplier-form textarea,
.site-db-fields input,
.site-db-fields select,
.users-fields select,
.users-fields input[type="text"],
.users-fields input[type="email"],
.users-site-add select {
  font-size: var(--type-control);
}

.btn-teal:not(.btn-small),
.btn-ghost:not(.btn-small) {
  font-size: var(--type-button);
  min-height: 36px;
}

/* One writing style. Later page rules cannot make a title, chip, or button a different size or thickness. */
body,
body * {
  font-size: var(--type-row) !important;
  font-weight: var(--type-weight) !important;
}

/* Every real checkbox. Role VIEW/EDIT squares are painted spans and follow the same colours in users.css. */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  max-width: 16px;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
  box-sizing: border-box;
  border: 1.5px solid var(--check-edge);
  border-radius: 3px;
  background-color: var(--check-fill);
  background-image: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
  vertical-align: middle;
  cursor: pointer;
  accent-color: var(--check-edge);
}

input[type="checkbox"]:checked {
  background-color: var(--check-fill);
  border-color: var(--check-edge);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%231a1a1a' stroke-width='2.2' stroke-linecap='square' d='M3.5 8.2 6.6 11.2 12.5 4.8'/%3E%3C/svg%3E");
}

input[type="checkbox"]:disabled {
  cursor: default;
  opacity: 0.72;
}

input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--check-edge);
  outline-offset: 1px;
}

/* List search boxes match the row under them. These ids beat each page’s old 32px lock. */
#ordering-panel .ord-po-filters input,
#ordering-panel .ord-po-filters select,
#products-panel .ord-po-filters input,
#products-panel .ord-po-filters select,
#users-panel .ord-po-filters input,
#users-panel .ord-po-filters select,
#site-database-panel .ord-po-filters input,
#site-database-panel .ord-po-filters select,
#price-lists-panel .ord-po-filters input,
#price-lists-panel .ord-po-filters select,
#suppliers-panel .ord-po-filters input,
#suppliers-panel .ord-po-filters select,
#stock-panel .ord-po-filters input,
#stock-panel .ord-po-filters select,
#purchase-receipts-panel .ord-po-filters input,
#purchase-receipts-panel .ord-po-filters select,
#finance-panel .ord-po-filters input,
#finance-panel .ord-po-filters select {
  height: var(--list-row-height);
  min-height: var(--list-row-height);
  max-height: var(--list-row-height);
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1.35;
  box-sizing: border-box;
}