body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: hidden;
}

:root {
  /* Configurable POS theme colors. These defaults are overridden at runtime by
     the module settings, which inject a :root block after this stylesheet. */
  --tbpos-header-bg: #377546;
  --tbpos-header-text: #ffffff;
  --tbpos-logoff-icon: #ffc723;
  --tbpos-accent: #008a00;
  --tbpos-primary-btn: #4caf50;
  --tbpos-primary-btn-text: #ffffff;
  --tbpos-text: #333333;
  --tbpos-bg: #f5f5f5;
  --tbpos-warning: #ba7517;

  --header-bg-color: var(--tbpos-header-bg);
  --header-text-color: var(--tbpos-header-text);
  --header-logoff-icon-color: var(--tbpos-logoff-icon);
  --input-text-color: #707070;
  --icon-color: #707070;
  --sidebar-link-hover-color: var(--tbpos-accent);
  --sidebar-border-color: 3px solid rgba(112, 112, 112, 0.2);
  --order-item-color: rgba(0, 138, 0, 0.16);
  --quantity-control-color: #fff;
  --quantity-control-disabled-color: #ddd;
}

/* LOGIN */

.login-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: var(--tbpos-bg);
  padding: 20px;
}

.login-title {
  font-size: 2rem;
  color: var(--tbpos-text);
  margin-bottom: 20px;
  font-weight: bold;
}

.login-form {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px 30px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 400px;
}

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  margin-bottom: 8px;
  font-size: 1rem;
  color: #555;
}

.form-input,
.form-select {
  width: 100%;
  padding: 10px 12px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  transition: border-color 0.3s ease;
}

.form-input:focus,
.form-select:focus {
  border-color: var(--tbpos-header-bg);
  outline: none;
}

.login-button {
  display: block;
  width: 100%;
  padding: 12px;
  font-size: 1rem;
  color: #fff;
  background-color: var(--tbpos-header-bg);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.login-button:hover {
  background-color: var(--tbpos-accent);
}

.error-message {
  margin-top: 15px;
  color: #e74c3c;
  font-size: 0.9rem;
  text-align: center;
}

/* HEADER */

header {
  background-color: var(--header-bg-color);
  color: var(--header-text-color);
  padding: 15px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-title {
  font-size: 20px;
  padding-left: 10px;
  flex: 1;
}

.search-bar {
  flex: 1;
  position: relative;
  text-align: center;
  max-width: 420px;
  margin: 0 auto;
}

.search-bar input {
  width: 100%;
  padding: 10px 0px 10px 55px;
  border-radius: 5px;
  border: none;
  color: var(--input-text-color);
  font-size: 14px;
}

.search-bar input:focus {
  outline: none;
}

.search-bar .search-icon {
  position: absolute;
  left: 10px;
  top: 55%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  pointer-events: none;
  color: #707070;
}

.search-bar .barcode-icon {
  position: absolute;
  right: 15px;
  top: 55%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  pointer-events: none;
  color: #707070;
}

.search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: white;
  color: black;
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.user-info {
  display: flex;
  align-items: center;
  gap: 15px;
  flex: 1;
  justify-content: flex-end;
  margin-right: 120px;
}

.user-image {
  font-size: 30px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #fff;
  color: var(--tbpos-header-bg);
  padding: 15px;
}

.user-signoff {
  display: flex;
  align-items: center;
  gap: 15px;
  justify-content: flex-end;
  padding-right: 30px;
}

.user-signofficon {
  font-size: 34px;
  color: var(--header-logoff-icon-color);
}

.user-info,
.user-signoff {
  cursor: pointer;
}

/* SIDEBAR */

/* The sidebar is fixed at 200px, but its bootstrap column is a percentage, so
   below roughly 1200px the column is narrower than the sidebar and the content
   column starts underneath it. Pinning the two columns to 200px and "the rest"
   keeps them aligned at every width. Applies to every screen that uses the
   layout in Views/Layout.elm, not just the help page. */
.main-content > .row {
  flex-wrap: nowrap;
}

.main-content > .row > .col-2 {
  flex: 0 0 200px;
  width: 200px;
  max-width: 200px;
  /* No column padding: the sidebar is positioned at its static spot, so any
     padding here would push it that many pixels over the content column. It
     brings its own inner padding. */
  padding: 0;
}

.main-content > .row > .col-10 {
  flex: 1 1 auto;
  width: auto;
  max-width: none;
  min-width: 0;
}

.sidebar {
  width: 200px;
  position: fixed;
  height: 100%;
  color: var(--icon-color);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
  box-sizing: border-box;
  border-right: var(--sidebar-border-color);
}

.main-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.main-links li {
  margin-top: 25px;
  margin-bottom: 25px;
  text-align: center;
}

nav a {
  cursor: pointer;
}


.main-links li a {
  color: var(--icon-color);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.main-links li a:hover {
  color: var(--sidebar-link-hover-color);
}

.main-links li a.active {
  color: var(--sidebar-link-hover-color);
}

.main-links li a i {
  font-size: 24px;
}

.help-section {
  position: absolute;
  width: 100%;
  bottom: 0;
  list-style-type: none;
  padding-bottom: 6em;
}

.help-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}

.help-section ul li a {
  color: var(--icon-color);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.help-section ul li a:hover {
  color: var(--sidebar-link-hover-color);
}

.help-section ul li a i {
  font-size: 24px;
}

/* ORDER SUMMARY */

.order-summary {
  display: flex;
  flex-direction: column;
  height: 100vh;
  max-width: 100vw;
  border-top: 1px solid #707070;
  border-left: 1px solid #707070;
  position: relative;
}

.order-summary-loader {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.12);
  cursor: initial;
  z-index: 100000;
}

.order-summary-updating .order-summary-loader {
  display:block;
}

.order-items-list {
  flex-grow: 1;
  overflow-y: auto;
  padding: 0;
  padding-top: 25px;
  box-sizing: border-box;

  /* Custom scrollbar styles */
  scrollbar-width: thin; /* For Firefox */
  scrollbar-color: grey transparent; /* For Firefox */
}

/* WebKit-based browsers (Chrome, Safari, Edge) */
.order-items-list::-webkit-scrollbar {
  width: 2px;
}

.order-items-list::-webkit-scrollbar-thumb {
  background-color: grey;
  border-radius: 10px;
}

.order-items-list::-webkit-scrollbar-track {
  background-color: transparent;
}

/* COMPACT CART LINE
   The card is a single two line row: name and combination on the left, the
   two prices and the quantity controls beside each other on the right. That
   removes a whole stacked row per line, so more of the order fits on screen
   while the buttons keep their 32px touch size and the image stays large. */
.order-item {
  background-color: var(--order-item-color);
  border: 0.5px solid hsl(0, 0%, 44%);
  padding: 6px 8px;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  position: relative;
  /* Lets the pack checklist drop to a full-width row inside the card. */
  flex-wrap: wrap;
}

.availability-store {
  background-color: rgba(0, 138, 0, 0.16);
}

.availability-warehouse {
  background-color: rgba(255, 155, 0, 0.16);
}

.availability-back-order {
  background-color: rgba(255, 127, 127, 0.16);
}


.item-details {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 64px;
}

.scroll-spacer {
  height: 80px;
}

.product-image {
  width: 64px;
  height: 64px;
  margin-right: 8px;
  border-radius: 5px;
}

/* Name and reference in one column, the prices in the next: two text rows
   instead of a stack of four. The four children of .item-header are placed
   by the grid areas below, so their class names and sibling order are a
   contract with viewCartLine in front/src/Page/CashRegister.elm. Wrapping or
   reordering them there collapses this layout without any error. */
.item-header {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "name price"
    "ref price1";
  align-items: center;
  column-gap: 10px;
  margin-bottom: 0;
}

.product-name {
  grid-area: name;
  font-weight: bold;
  font-size: 0.95em;
  line-height: 1.25;
  white-space: normal; /* Allow the text to wrap */
  word-wrap: break-word; /* Ensure long words are broken to wrap to next line */
}

.product-reference {
  grid-area: ref;
  font-size: 0.85em;
  line-height: 1.2;
}

.product-price {
  grid-area: price;
  font-weight: bold;
  white-space: nowrap;
  text-align: right;
}

.product-price1 {
  grid-area: price1;
  font-weight: bold;
  white-space: nowrap;
  text-align: right;
}

/* Quantity controls sit next to the prices instead of below them, with a gap
   before the delete and availability buttons so the plus is not glued to
   them. */
.quantity-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 150px;
  flex-shrink: 0;
  margin-right: 14px;
}

.quantity-button,
.availability-button,
.delete-button {
  background-color: var(--quantity-control-color);
  color: var(--icon-color);
  border: 0.5px solid #707070;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.availability-button,
.delete-button {
  margin-top: 4px;
}

.availability-button:disabled,
.delete-button:disabled {
  background-color: var(--quantity-control-disabled-color);
  cursor: default;
}

.quantity-counter {
  background-color: var(--quantity-control-color);
  border: 0.5px solid #707070;
  padding: 5px;
  width: 32px;
  height: 32px;
  text-align: center;
  font-weight: 300;
}

.quantity-wrapper {
  display: flex;
  align-items: center;
  position: relative;
}.bottom-section {
  background-color: #f2f2f2;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  flex-shrink: 0;
  width: 100%;
  position: sticky;
  bottom: 0;
}

.keyboard,
.summary-of-costs {
  flex: 1;
  min-width: 200px;
  box-sizing: border-box;
}

.keyboard-row {
  display: flex;
  flex-wrap: wrap;
}

.keyboard-row button {
  flex: 1;
  height: 55px;
  margin: 2px;
  background-color: #fff;
  border: none;
}

.keyboard-row button:hover {
  background-color: rgb(0, 138, 0, 0.08);
}

.summary-of-costs {
  display: flex;
  flex-direction: column;
  color: #707070;
}

/* A change is still on its way to the server, so these amounts belong to the
   previous cart. Dimmed so nobody reads the total as final; it sharpens again
   the moment the cart is confirmed. */
.summary-of-costs-pending {
  opacity: 0.45;
  transition: opacity 0.15s ease;
}

.cost-item,
.cost-item-total {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  font-size: 16px;
}.price,
.total-price {
  text-align: right;
  min-width: 100px;
}.discount-input-wrapper.hidden {
  display: none;
}.cost-item-total {
  margin-top: 48px;
}

.total-price {
  color: var(--tbpos-accent);
  font-size: 24px;
}

.customer-button {
  background-color: var(--tbpos-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  height: 40px;
  border: none;
  font-size: 16px;
  cursor: pointer;
}

.customer-button .user-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: #fff;
  color: var(--tbpos-accent);
  margin-right: 10px;
}

.checkout-button {
  background-color: var(--tbpos-header-bg);
  color: #fff;
  border-radius: 7px;
  height: 40px;
  border: none;
}

.checkout-button:disabled {
  color: rgba(255, 255, 255, 0.75);
}

.checkout-button,
.customer-button {
  margin-top: 10px;
  width: 100%;
}

/* Modal Styling */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background-color: #fff;
  width: 90%;
  max-width: 500px;
  max-height: 620px;
  padding: 2rem;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  text-align: center;
  font-family: Arial, sans-serif;
}.modal-content h2 {
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--tbpos-text);
  margin-bottom: 1.5rem;
}.payment-methods {
  margin: 1.5rem 0;
  font-size: 1rem;
}

.payment-methods h3 {
  font-weight: 600;
  color: var(--tbpos-text);
}

.payment-methods label {
  display: inline-block;
  margin: 0.5rem;
  font-weight: 500;
  color: #666;
}

.payment-methods input[type="radio"] {
  margin-right: 0.3rem;
}.confirm-checkout-modal,
.close-modal {
  margin-top: 1rem;
  padding: 0.75rem 1.5rem;
  background-color: var(--tbpos-primary-btn);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.confirm-checkout-modal,
.close-modal:hover {
  background-color: var(--tbpos-primary-btn);
}

.confirm-checkout-modal,
.close-modal:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--tbpos-primary-btn), 0 0 0 4px var(--tbpos-primary-btn);
}

.confirm-checkout-modal + .close-modal {
  margin-left: 0.5rem;
  background-color: #e0e0e0;
  color: var(--tbpos-text);
}

.confirm-checkout-modal + .close-modal:hover {
  background-color: #d5d5d5;
}

.confirm-checkout-modal + .close-modal:focus {
  box-shadow: 0 0 0 2px #e0e0e0, 0 0 0 4px #d5d5d5;
}.table {
  margin-top: 20px;
  border: 1px solid #ddd;
}.input-group {
  position: relative;
  width: 100%;
}

.input-group .form-control {
  padding-right: 40px;
}

.input-group input {
  font-size: 14px;
}

.input-group .input-group-text {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background-color: transparent;
  border: none;
  z-index: 10;
}

.fas.fa-search {
  color: #6c757d;
}

.input-group .form-control:focus {
  padding-right: 40px;
  border: 1px solid #ced4da;
  box-shadow: none;
}

.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
  background-color: rgba(0, 138, 0, 0.16);
}

.pagination {
  margin-top: 20px;
}
.page-item.disabled .page-link {
  pointer-events: none;
  opacity: 0.6;
  color: var(--tbpos-header-bg);
}
.page-item.active .page-link {
  background-color: var(--tbpos-header-bg);
  border-color: var(--tbpos-header-bg);
  color: white;
}

.page-item,
.page-link {
  color: var(--tbpos-header-bg);
}
.page-item:hover,
.page-link:hover {
  color: var(--tbpos-header-bg);
}.order-details-content .d-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}/* CLIENTOVERVIEW */

.client-overview {
  max-height: 85vh;
  overflow-y: auto;
  padding: 20px;
  /* Custom scrollbar styles */
  scrollbar-width: thin; /* For Firefox */
  scrollbar-color: grey transparent; /* For Firefox */
}

.client-title {
  margin-bottom: 20px;
}

.client-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.client-item {
  padding: 10px 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  margin-bottom: 15px;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  background-color: #fff;
}

.client-item:hover {
  background-color: rgba(0, 138, 0, 0.16);
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.expanded {
  background-color: rgba(0, 138, 0, 0.16);
}

.client-name {
  color: var(--tbpos-accent);
  font-size: 20px;
  font-weight: 500;
  margin: 0 0 10px 0;
}

.client-email {
  margin: 0 0 10px 0;
  font-size: 16px;
  color: #555;
}.snackbar {
  box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12),
  0 8px 10px -5px rgba(0, 0, 0, 0.3);

  position: fixed;
  bottom: 23px;
  left: 23px;
  background-color: rgba(0, 0, 0, 0.87);
  display: flex;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 2s;
  max-width: 80%;
  min-height: 48px;
  padding: 0 8px 0 16px;
}


.sb_message, .sb_with_action {
  opacity: 1;
}

.sb_hidden {
  display: none;
}

.snackbar span, .snackbar a {
  color: #fff;
  margin: auto 0;
  padding: 8px 0;
}

.snackbar.sb_with_action span {
  width: 344px;
}

.snackbar.sb_with_action .sb_action {
  color: #64b5f6;
  cursor: pointer;
  width: 64px;
  text-align: center;
  text-decoration: none;
}

.search-results-container {
  padding-top: 25px;
  padding-left: 10px;
  padding-right: 10px;
}.product-search-results-container {
  width: 100%;
  padding-top: 20px;
  height: 100vh;
  overflow: scroll;
  padding-bottom: 80px;
}

.product-search-results-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.product-search-result {
  padding: 10px;
  flex:0 1 calc(50% - 20px);
  margin: 10px;
  border: 1px solid #ddd;
  cursor: pointer;
  /* Anchor for the info button in the corner of the card. */
  position: relative;
}

.product-search-result-img {
  width: 100%;
}

.product-search-result-title {
  color: #222;
  font-size: 1em;
}

.product-search-result-info {
  color: #2f613e;
  font-weight: bold;
}

.product-pack-badge {
  display: inline-block;
  margin-left: 0.5em;
  padding: 0.1em 0.5em;
  border-radius: 0.6em;
  background-color: var(--tbpos-accent, #008a00);
  color: #fff;
  font-size: 0.7em;
  font-weight: bold;
  vertical-align: middle;
  text-transform: uppercase;
}

.product-search-result-pack-contents {
  color: #555;
  font-size: 0.9em;
  line-height: 1.5;
  margin: 4px 0;
}

.product-search-result-pack-qty {
  font-weight: bold;
  color: var(--tbpos-accent, #008a00);
}

.product-search-result-pack-more {
  color: #888;
  font-style: italic;
}

/* Packs with many components get a full width card so the list stays
   readable. */
.product-search-result-wide {
  flex-basis: 100%;
  max-width: 100%;
}

/* PACK COMPONENT CHECKLIST (bonregel + controlestap) */
.pack-checklist {
  /* Full-width row inside the .order-item card. Colors follow the
     configurable POS theme. */
  width: 100%;
  background: rgba(255, 255, 255, 0.75);
  border-radius: 8px;
  margin-top: 6px;
  padding: 4px 8px;
}

.pack-check-chip {
  border: 1px solid var(--tbpos-header-bg, #377546);
  background: #fff;
  color: var(--tbpos-header-bg, #377546);
  font-size: 0.85em;
  padding: 3px 12px;
  border-radius: 11px;
  cursor: pointer;
}

.pack-check-chip i {
  margin-left: 6px;
  font-size: 0.8em;
}

/* Red while pieces are missing, the same red as the counters underneath. The
   chip is often all that is on screen, because the list starts collapsed, so
   it has to carry the warning of the rows it hides. */
.pack-check-chip-todo {
  border-color: #a32d2d;
  color: #a32d2d;
}

.pack-check-chip-done {
  border-color: var(--tbpos-accent, #008a00);
  background: var(--tbpos-accent, #008a00);
  color: var(--tbpos-primary-btn-text, #ffffff);
}

.pack-checklist-items {
  background: #fff;
  border-radius: 6px;
  margin-top: 6px;
  padding: 4px 10px;
}

.pack-checklist-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9em;
  color: var(--tbpos-text, #444);
  padding: 5px 0;
  border-bottom: 1px solid #eee;
  margin: 0;
}

.pack-checklist-item:last-child {
  border-bottom: none;
}

.pack-checklist-item-done .pack-checklist-name {
  color: var(--tbpos-accent, #008a00);
}

.pack-count-btn {
  width: 28px;
  height: 28px;
  border: 1px solid var(--tbpos-header-bg, #377546);
  background: #fff;
  color: var(--tbpos-header-bg, #377546);
  border-radius: 6px;
  font-weight: bold;
  font-size: 1em;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}

.pack-count-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.pack-count-value {
  min-width: 42px;
  text-align: center;
  font-weight: bold;
  /* Red while pieces are missing; flips to the green accent when complete
     (see the -done rule below). */
  color: #a32d2d;
  flex-shrink: 0;
}

.pack-checklist-item-done .pack-count-value {
  color: var(--tbpos-accent, #008a00);
}

.pack-checklist-name {
  cursor: pointer;
}

.pack-check-done-icon {
  color: var(--tbpos-accent, #008a00);
  margin-left: auto;
}

.product-search-result-variants {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 10px;
  border: 1px solid var(--tbpos-header-bg, #377546);
  border-radius: 10px;
  color: var(--tbpos-header-bg, #377546);
  font-size: 0.85em;
}

.variant-picker-dialog {
  max-width: 460px;
  /* The dialog must never grow past the screen: with several attribute rows
     the confirm buttons ended up below the fold and could not be reached.
     The header and buttons stay put, the variant list takes the rest. */
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.variant-picker-title {
  margin: 0 0 2px 0;
}

.variant-picker-subtitle {
  color: #666;
  margin: 0 0 10px 0;
}

.variant-picker-list {
  flex: 1;
  min-height: 60px;
  overflow-y: auto;
  border: 1px solid #ddd;
  border-radius: 8px;
}


.variant-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}

.variant-row:last-child {
  border-bottom: none;
}

.variant-row-selected {
  background: var(--tbpos-header-bg, #377546);
  color: var(--tbpos-header-text, #ffffff);
}

.variant-row-selected .variant-stock,
.variant-row-selected .variant-stock-out {
  color: var(--tbpos-header-text, #ffffff);
}

.variant-name {
  flex: 1;
}

.variant-stock {
  font-size: 0.85em;
  color: var(--tbpos-accent, #008a00);
  flex-shrink: 0;
}

.variant-stock-out {
  color: #a32d2d;
}

.variant-price {
  font-weight: bold;
  flex-shrink: 0;
}

.pos-error-dialog {
  max-width: 420px;
  border-top: 6px solid #a32d2d;
}

.pos-error-title {
  color: #a32d2d;
  margin: 0 0 8px 0;
}

.pos-error-message {
  font-size: 1.05em;
}

.pack-gate-dialog {
  max-width: 480px;
  width: 92%;
  text-align: left;
}

.pack-gate-title {
  font-size: 1.1em;
  margin: 0 0 8px 0;
  color: var(--tbpos-text, #333333);
}

/* The checkout gate speaks the same palette as the rest of the register: the
   warning tinted with the configurable warning color, the all-clear with the
   accent color. Each rule keeps a flat color on the line above the color-mix
   one, which browsers without color-mix use instead. */
.pack-gate-warning {
  background: #faeeda;
  background: color-mix(in srgb, var(--tbpos-warning, #ba7517) 14%, #ffffff);
  color: #854f0b;
  color: color-mix(in srgb, var(--tbpos-warning, #ba7517) 75%, #000000);
  font-size: 0.9em;
  padding: 8px 12px;
  border-radius: 6px;
  margin-bottom: 8px;
}

.pack-gate-ok {
  background: #eaf3de;
  background: color-mix(in srgb, var(--tbpos-accent, #008a00) 12%, #ffffff);
  color: #3b6d11;
  color: color-mix(in srgb, var(--tbpos-accent, #008a00) 80%, #000000);
  font-size: 0.9em;
  padding: 8px 12px;
  border-radius: 6px;
  margin-bottom: 8px;
}

.pack-gate-list {
  max-height: 45vh;
  overflow-y: auto;
  margin-bottom: 10px;
}

.pack-gate-pack-name {
  font-weight: bold;
  font-size: 0.9em;
  color: var(--tbpos-text, #222222);
  margin: 8px 0 2px 0;
}

.pack-gate-anyway {
  background: var(--tbpos-warning, #ba7517);
  color: var(--tbpos-primary-btn-text, #ffffff);
  border: none;
}

/* PRODUCT INFO PANEL

   Opened with the "i" on a search result. Built for the cashier: where does it
   lie, how much is there, what is in it. */

/* Sits in the flow at the bottom of the result card, next to the variant hint.
   Pinned in a corner it drifted, because the card is a bootstrap row whose
   columns move with the screen width. A button on its own line also gives a
   finger something to hit. */
.product-search-result-info-btn {
  display: inline-block;
  margin-top: 6px;
  background: none;
  border: 1px solid var(--tbpos-header-bg, #377546);
  border-radius: 4px;
  padding: 3px 10px;
  font-size: 0.85em;
  line-height: 1.4;
  cursor: pointer;
  color: var(--tbpos-header-bg, #377546);
}

.product-search-result-info-btn:hover,
.product-search-result-info-btn:focus {
  background: var(--tbpos-header-bg, #377546);
  color: var(--tbpos-primary-btn-text, #ffffff);
}

/* On a receipt line the button sits behind the product name, icon only. In the
   button column it added a row of its own and made every line taller, and a
   receipt is the one place where vertical space is worth the most. */
.cart-line-info-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 4px;
  margin-left: 4px;
  font-size: 0.95em;
  line-height: 1;
  vertical-align: baseline;
  color: var(--tbpos-header-bg, #377546);
  opacity: 0.55;
}

.cart-line-info-btn:hover,
.cart-line-info-btn:focus {
  opacity: 1;
}

/* Roomier than the other dialogs and it grows with the screen: this one is
   read rather than glanced at, and a wide counter monitor should not show a
   column of text 500 pixels wide. The body scrolls, so a long description
   cannot push the buttons off the bottom. */
.sku-info-dialog {
  max-width: min(880px, 94vw);
  width: min(880px, 94vw);
  text-align: left;
  font-size: 1.05em;
}

.sku-info-body {
  max-height: 70vh;
  overflow-y: auto;
  padding-right: 4px;
}

.sku-info-title {
  margin: 0 0 12px 0;
  font-size: 1.15em;
  color: var(--tbpos-text, #333333);
}

.sku-info-pending {
  opacity: 0.7;
}

.sku-info-top {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 12px;
}

/* Grows with the dialog, capped so it never crowds out the facts beside it. */
.sku-info-image {
  width: clamp(120px, 22vw, 220px);
  height: clamp(120px, 22vw, 220px);
  object-fit: contain;
  flex: 0 0 auto;
  border: 1px solid rgba(112, 112, 112, 0.2);
  border-radius: 4px;
  background: #fff;
}

.sku-info-description {
  font-size: 0.95em;
  line-height: 1.55;
  margin: 0 0 16px 0;
}

.sku-info-variants {
  margin-bottom: 16px;
}

.sku-info-variant {
  display: flex;
  gap: 10px;
  padding: 5px 8px;
  border-bottom: 1px solid rgba(112, 112, 112, 0.15);
}

.sku-info-variant-name {
  flex: 1 1 auto;
}

.sku-info-variant-stock {
  font-variant-numeric: tabular-nums;
}

.sku-info-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin-bottom: 0;
}

.sku-info-fact {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sku-info-fact-label {
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.6;
}

.sku-info-fact-value {
  font-size: 1.05em;
  font-variant-numeric: tabular-nums;
}

.sku-info-heading {
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.6;
  font-weight: normal;
  margin: 0 0 6px 0;
}

.sku-info-locations {
  margin-bottom: 16px;
}

.sku-info-location {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(112, 112, 112, 0.15);
}

/* A shelf in this shop is the one the cashier can actually walk to, so it
   carries the accent colour and the rest stays plain. */
.sku-info-location-shop {
  background: color-mix(in srgb, var(--tbpos-accent, #008a00) 8%, transparent);
  border-radius: 4px;
}

.sku-info-location-name {
  font-weight: bold;
  font-variant-numeric: tabular-nums;
}

.sku-info-location-qty {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.sku-info-location-badge {
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tbpos-accent, #008a00);
}

/* Each pack part with its own shelves underneath: the part is what the cashier
   walks to, so its location belongs with it and not in a list further down. */
.sku-info-part {
  padding: 6px 0;
  border-bottom: 1px solid rgba(112, 112, 112, 0.15);
}

.sku-info-part-head {
  margin-bottom: 4px;
}

.sku-info-part-qty {
  font-weight: bold;
}

.sku-info-part .sku-info-locations {
  margin-bottom: 0;
  padding-left: 14px;
}

.sku-info-part .sku-info-location {
  border-bottom: none;
  padding: 3px 8px;
}

.sku-info-part .sku-info-pending {
  padding-left: 14px;
  margin: 0;
  font-size: 0.9em;
}

/* Article number behind a pack component name. Muted, because the name leads
   and the number only settles which of the near-identical parts it is. */
.pack-item-ref {
  opacity: 0.65;
  font-size: 0.9em;
}

/* The component row a scan just counted. A scanner sounds the same whatever it
   hit, so the row itself has to say where the piece landed. It stays marked
   until the next scan rather than fading out, because a mark on a timer is
   gone exactly when the cashier looks up. */
.pack-checklist-item-scanned {
  background: color-mix(in srgb, var(--tbpos-accent, #008a00) 10%, transparent);
  border-radius: 4px;
}

.pack-checklist-note {
  font-size: 0.85em;
  opacity: 0.75;
  padding: 4px 2px 0 2px;
}

.product-search-result-blocked {
  opacity: 0.55;
  cursor: not-allowed;
}

.product-search-result-not-sold {
  color: #a33;
  font-weight: bold;
  font-size: 0.9em;
}

.payment-methods {
  display: flex;
}

.payment-method-button {
  padding: 2em;
  margin: 1em;
  flex-grow: 1;
}

.ml-1 {
  margin-left: 1em;
}

/* Scrolls up and down only. A pane that scrolls one way scrolls the other way
   too unless told not to, and the Bootstrap rows inside it hang 15px over
   each edge by design, which was drawn as a horizontal scrollbar under the
   payment buttons. Those 15px are column padding, so clipping them shows
   nothing less. */
.scrollable {
  max-height: 85vh;
  overflow-y: auto;
  overflow-x: hidden;
}

.pickup-sort {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  /* Breathing room between the green top bar and the sort row. */
  margin: 24px 0 16px 0;
}

/* Last in the sort row, and the auto margin pushes it to the far right of the
   pickup screen. Icon only, so it keeps the square proportions of the other
   icon buttons in the register. */
.pickup-print-list {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Matches the height of the sort buttons beside it. Without this the button
     would be only as tall as the icon glyph, because a flex button ignores the
     line height that gives the other buttons their size. */
  align-self: stretch;
  min-width: 42px;
  font-size: 1.1em;
}
.pickup-list-scroll {
  max-height: calc(100vh - 260px);
  overflow-y: auto;
  padding-right: 4px;
}

.pickup-detail-scroll {
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  padding-right: 4px;
}

.pickup-order-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border: 1px solid var(--quantity-control-disabled-color);
  border-radius: 6px;
  margin-bottom: 8px;
  cursor: pointer;
}

.pickup-order-item:hover {
  background: var(--order-item-color);
}

.pickup-order-main {
  min-width: 0;
}

.pickup-order-side {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
  text-align: right;
}

.pickup-order-date {
  margin: 0;
  color: var(--input-text-color);
  white-space: nowrap;
}

/* The status in the color it has in the back office. Text on a light tint of
   its own color, because a good part of the core status colors are pale and
   white text on those cannot be read. The colors come in as inline styles; what
   is here is the shape and the fallback for a status without a color. */
.pickup-status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 10px;
  border: 1px solid #777777;
  background: #f2f2f2;
  color: #555555;
  font-size: 0.85em;
  font-weight: bold;
  white-space: nowrap;
}

.pickup-row-print {
  white-space: nowrap;
}

.pickup-order-number {
  font-weight: bold;
  margin: 0;
}

.pickup-order-name {
  margin: 2px 0;
}

.pickup-order-ref {
  margin: 0;
  color: var(--input-text-color);
}

/* Tells a guest record apart from a real account. Deliberately plain rather
   than alarming: neither is an error, the label only says which of two
   look-alike accounts to pick. */
.client-account-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 0.7em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: middle;
  border: 1px solid rgba(112, 112, 112, 0.4);
  color: #707070;
}

/* The real account is the one you normally want, so it wears the accent
   colour; the guest record stays grey. */
.client-account-badge-regular {
  border-color: var(--tbpos-accent, #008a00);
  color: var(--tbpos-accent, #008a00);
}


/* REPORTING

   A handful of tiles, not a dashboard. Every number is big enough to read from
   a step back, because this screen gets glanced at rather than studied. */

.report-page {
  padding: 20px 10px;
  max-height: 100vh;
  overflow-y: auto;
  /* Capped, because tiles stretched across a wide counter monitor put the
     label and its number so far apart that they stop reading as one thing. */
  max-width: 1100px;
}

.report-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.report-title {
  margin: 0;
  font-size: 1.4em;
  color: var(--tbpos-text, #333333);
}

.report-block {
  display: block;
  margin-bottom: 24px;
}

.report-block-title {
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.6;
  font-weight: normal;
  margin: 0 0 8px 0;
}

.report-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.report-tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 140px;
  flex: 1 1 140px;
  padding: 12px 14px;
  border: 1px solid rgba(112, 112, 112, 0.25);
  border-radius: 6px;
  background: #fff;
}

/* Only used for pickups nobody collected. The rest of the screen reports, this
   one asks for something to be done. */
.report-tile-warning {
  border-color: var(--tbpos-warning, #ba7517);
  background: #faeeda;
  background: color-mix(in srgb, var(--tbpos-warning, #ba7517) 12%, #ffffff);
}

/* Today is what the counter looks at first, so its tiles carry a thin accent
   line. The other blocks stay plain, otherwise nothing stands out. */
.report-block-today .report-tile {
  border-top: 3px solid var(--tbpos-accent, #008a00);
}

.report-tile-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
}

.report-tile-label {
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.6;
}

/* The question mark that opens the explanation. Clickable rather than a hover
   tooltip: this screen is read on a touch monitor, where hover does not
   exist. Muted until it is used, so a wall of question marks does not compete
   with the figures. */
.report-help-btn {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(112, 112, 112, 0.45);
  background: none;
  color: #707070;
  font-size: 0.75em;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
}

.report-help-btn:hover,
.report-help-btn-open {
  border-color: var(--tbpos-header-bg, #377546);
  background: var(--tbpos-header-bg, #377546);
  color: var(--tbpos-header-text, #ffffff);
}

.report-tile-help {
  margin: 8px 0 0 0;
  padding-top: 8px;
  border-top: 1px solid rgba(112, 112, 112, 0.2);
  font-size: 0.8em;
  line-height: 1.45;
  opacity: 0.85;
}

.report-tile-value {
  font-size: 1.7em;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
  color: var(--tbpos-text, #333333);
}

.report-tile-delta {
  font-size: 0.8em;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}

.report-tile-delta-up {
  color: var(--tbpos-accent, #008a00);
  opacity: 1;
}

.report-tile-delta-down {
  color: var(--tbpos-warning, #ba7517);
  opacity: 1;
}

/* Pickup appointment and internal remark, on a list row and in the detail. */

.pickup-order-appointment {
  margin: 2px 0 0 0;
  font-size: 0.85em;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}

.pickup-order-appointment-date {
  color: var(--tbpos-header-bg, #377546);
  font-weight: bold;
}

/* Only a marker on the row: a remark can run to several lines and would push
   the rest of the row off the screen. It is read in the detail view. */
.pickup-order-note-icon {
  color: var(--tbpos-warning, #ba7517);
}

.pickup-note {
  border: 1px solid rgba(112, 112, 112, 0.25);
  border-radius: 6px;
  padding: 12px 14px;
  margin: 0 0 18px 0;
  background: #fff;
}

.pickup-note-title {
  margin: 0 0 10px 0;
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.6;
  font-weight: normal;
}

.pickup-note-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.pickup-note-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pickup-note-field-wide {
  flex: 1 1 260px;
}

.pickup-note-label {
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.6;
}

.pickup-note-date,
.pickup-note-text {
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1em;
  font-family: inherit;
  box-sizing: border-box;
}

.pickup-note-text {
  width: 100%;
  resize: vertical;
}

.pickup-note-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}

/* Says out loud that this text stays inside: a field on an order screen looks
   like something the customer could end up reading. */
.pickup-note-hint {
  font-size: 0.8em;
  opacity: 0.6;
  margin-right: auto;
}

.pickup-note-saved {
  font-size: 0.85em;
  color: var(--tbpos-accent, #008a00);
}

.pickup-note-by {
  margin: 8px 0 0 0;
  font-size: 0.8em;
  opacity: 0.6;
}


/* CUSTOM FULFILMENT

   A warehouse instruction of its own belongs to the order. The badge on the row
   says the box is not packed from the order lines, the pending variant borrows
   the warning color so it reads as a stop rather than a label. */

.pickup-custom-badges {
  display: inline-flex;
  gap: 6px;
  margin-right: 6px;
}

/* Deliberately loud, and in its own configurable color: this says the box is
   not packed from the order lines, which is the one thing you must not miss
   while scanning the list. */
.pickup-custom-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 10px;
  border: 1px solid var(--tbpos-custom-label, #7b1fa2);
  background: var(--tbpos-custom-label, #7b1fa2);
  color: #ffffff;
  font-size: 0.85em;
  font-weight: bold;
  white-space: nowrap;
}

.pickup-custom-badge-pending {
  border-color: var(--tbpos-warning, #ba7517);
  background: var(--tbpos-warning, #ba7517);
  color: #ffffff;
}

.pickup-custom {
  border: 1px solid rgba(112, 112, 112, 0.25);
  border-radius: 6px;
  padding: 12px 14px;
  margin: 0 0 18px 0;
  background: #fff;
}

.pickup-custom-title {
  margin: 0 0 10px 0;
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.6;
  font-weight: normal;
}

.pickup-custom-block + .pickup-custom-block {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(112, 112, 112, 0.2);
}

.pickup-custom-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.pickup-custom-ref {
  font-weight: bold;
}

.pickup-custom-status {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.8em;
  border: 1px solid var(--tbpos-warning, #ba7517);
  color: color-mix(in srgb, var(--tbpos-warning, #ba7517) 75%, #000000);
}

.pickup-custom-status-done {
  border-color: var(--tbpos-accent, #008a00);
  color: var(--tbpos-accent, #008a00);
}

.pickup-custom-lines {
  margin-top: 8px;
}

.pickup-custom-line {
  padding: 3px 0;
}

.pickup-custom-qty {
  display: inline-block;
  min-width: 32px;
  font-weight: bold;
}

.pickup-custom-line-ref {
  opacity: 0.6;
  font-size: 0.9em;
}


/* SPLIT ORDER

   The other orders of the same reference. Detail only: the list stays short. */

.pickup-split {
  border: 1px solid rgba(112, 112, 112, 0.25);
  border-radius: 6px;
  padding: 12px 14px;
  margin: 0 0 18px 0;
  background: #fff;
}

.pickup-split-title {
  margin: 0 0 10px 0;
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.6;
  font-weight: normal;
}

.pickup-split-block + .pickup-split-block {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(112, 112, 112, 0.2);
}

.pickup-split-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.pickup-split-number {
  font-weight: bold;
}

.pickup-split-lines {
  margin-top: 8px;
}

.pickup-split-line {
  padding: 3px 0;
}

.pickup-split-qty {
  display: inline-block;
  min-width: 32px;
  font-weight: bold;
}

.pickup-split-line-ref {
  opacity: 0.6;
  font-size: 0.9em;
}

/* A warehouse status has no color of its own in WMS, so it is colored by what
   it means: done, still being worked on, or off the table. */
.pickup-part-status-done {
  border-color: var(--tbpos-accent, #008a00);
  background: #ffffff;
  color: var(--tbpos-accent, #008a00);
}

.pickup-part-status-busy {
  border-color: var(--tbpos-warning, #ba7517);
  background: #ffffff;
  color: var(--tbpos-warning, #ba7517);
}

.pickup-part-status-canceled {
  border-color: #999999;
  background: #ffffff;
  color: #777777;
}

/* Handing over one part. The button sits at the end of the part's own line, so
   it can never be mistaken for the button that closes the whole order. */
.pickup-part-button {
  margin-left: auto;
  padding: 2px 10px;
  font-size: 0.85em;
}

.pickup-part-picked {
  margin-left: auto;
  font-size: 0.85em;
  color: var(--tbpos-accent, #008a00);
}

/* Hands over everything that is ready in one click, above the blocks it acts
   on rather than inside one of them: it covers both. */
.pickup-split-actions {
  margin: 0 0 12px 0;
}

/* Says that confirming does two things at once, so the button is not read as
   closing the order alone. */
.pickup-confirm-bulk {
  margin: 8px 0 0 0;
  font-size: 0.9em;
  opacity: 0.75;
}

/* What is being closed, inside the confirmation. A row per part, name left and
   moment right, so a list of four reads as a column of moments rather than as
   four sentences. */
.pickup-confirm-parts {
  margin: 14px 0;
  padding: 8px 12px;
  border-radius: 6px;
  background: rgba(112, 112, 112, 0.08);
  text-align: left;
  font-size: 0.9em;
}

.pickup-confirm-part {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 14px;
  padding: 5px 0;
}

.pickup-confirm-part + .pickup-confirm-part {
  border-top: 1px solid rgba(112, 112, 112, 0.2);
}

.pickup-confirm-part-label {
  font-weight: bold;
}

.pickup-confirm-part-when {
  white-space: nowrap;
}

/* Under the moment it belongs to, in the right hand column. */
.pickup-confirm-part-by {
  grid-column: 2;
  text-align: right;
  opacity: 0.7;
}

/* Louder than the waiting line below it, and deliberately not the same color:
   this one says something is still in the shop that nobody handed over, which
   is a mistake rather than a wait. */
.pickup-confirm-unhandled {
  margin: 10px 0 0 0;
  text-align: left;
  font-weight: bold;
  color: #b3261e;
}

.pickup-confirm-waiting {
  margin: 10px 0 0 0;
  text-align: left;
  color: var(--tbpos-warning, #ba7517);
}

.pickup-part-undo {
  margin-left: 8px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 0.9em;
  text-decoration: underline;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
}


/* PICKUP ORDER DETAIL

   Read top to bottom: who and what state, when, what to fetch, what to do. The
   blocks are separated by whitespace and one hairline rather than by boxes, so
   the screen stays calm with a customer standing at the counter. */

.pickup-detail-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(112, 112, 112, 0.25);
}

.pickup-detail-title {
  margin: 0;
  font-size: 1.4em;
  color: var(--tbpos-text, #333333);
}

/* The order number is what the customer quotes on the phone, so it stays
   readable, but it does not compete with the reference in the title. */
.pickup-detail-id {
  font-size: 1.05em;
  opacity: 0.6;
}

.pickup-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 32px;
  margin: 14px 0 18px 0;
}

.pickup-meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pickup-meta-label {
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.6;
}

.pickup-meta-value {
  font-size: 1.05em;
  color: var(--tbpos-text, #333333);
}

/* A long product name must not push the price column off the screen. */
.order-lines-wrap {
  overflow-x: auto;
}

.order-lines {
  width: 100%;
  border-collapse: collapse;
}

.order-lines th {
  text-align: left;
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.6;
  font-weight: normal;
  padding: 6px 10px;
  border-bottom: 2px solid rgba(112, 112, 112, 0.25);
  white-space: nowrap;
}

.order-lines td {
  padding: 9px 10px;
  border-bottom: 1px solid rgba(112, 112, 112, 0.15);
  vertical-align: top;
}

.order-lines tbody tr:hover td {
  background: rgba(112, 112, 112, 0.06);
}

/* Numbers right aligned so quantities and amounts line up under each other,
   which is what makes a column of figures readable at a glance. */
.order-lines-num {
  text-align: right;
  white-space: nowrap;
}

.order-lines th.order-lines-num {
  text-align: right;
}

.order-lines-ref {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.order-total {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 12px;
  margin: 14px 0 0 0;
  padding-top: 10px;
  border-top: 2px solid rgba(112, 112, 112, 0.25);
}

.order-total-label {
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.6;
}

.order-total-value {
  font-size: 1.3em;
  font-weight: bold;
  color: var(--tbpos-text, #333333);
}

.pickup-detail-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
}

.pickup-detail-actions-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Set apart from the print buttons: this is the step that cannot be undone. */
.pickup-detail-handover {
  margin-left: auto;
}

.pickup-confirm-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1050;
}

.pickup-confirm-dialog {
  background: #fff;
  padding: 24px;
  border-radius: 6px;
  max-width: 420px;
}

/* The customer question in front of the payment. Wider than a plain confirm,
   because the sentence explains why it is being asked. Written as both classes
   so it beats the width above on specificity rather than on being further down
   the file. */
.pickup-confirm-dialog.customer-gate-dialog {
  max-width: 520px;
}

.pickup-confirm-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 16px;
}

/* POS theme: make Bootstrap primary buttons follow the configured theme color,
   so buttons like "Mark as picked up" match the rest of the POS. */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled) {
  background-color: var(--tbpos-primary-btn);
  border-color: var(--tbpos-primary-btn);
  color: var(--tbpos-primary-btn-text);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--tbpos-primary-btn);
  border-color: var(--tbpos-primary-btn);
  color: var(--tbpos-primary-btn-text);
  filter: brightness(0.93);
}

/* FREE LINE

   A receipt line typed at the till. The button sits under the gift card field:
   near the payment, out of the way of scanning. */
.free-line-button {
  width: 100%;
  margin-top: 8px;
}

.pickup-confirm-dialog.free-line-dialog {
  max-width: 460px;
  width: 100%;
  text-align: left;
}

.free-line-title {
  margin: 0 0 12px 0;
}

.free-line-rate {
  margin: 0 0 10px 0;
  opacity: 0.75;
}

.free-line-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 10px 0;
  font-weight: normal;
}

.free-line-field > span {
  font-size: 0.85em;
  opacity: 0.7;
}

.free-line-field input,
.free-line-field select {
  padding: 8px 10px;
  border: 1px solid #cccccc;
  border-radius: 4px;
  font-size: 1em;
  font-family: inherit;
  box-sizing: border-box;
  width: 100%;
}

.free-line-row {
  display: flex;
  gap: 10px;
}

.free-line-row > .free-line-field {
  flex: 1 1 auto;
}

.free-line-row > .free-line-quantity {
  flex: 0 0 90px;
}

.free-line-error {
  margin: 0 0 10px 0;
  color: #b3261e;
  font-weight: bold;
}

/* GIFT CARD (kadokaart) */
.gift-card-input {
  display: flex;
  gap: 8px;
  margin: 8px 0;
}

.gift-card-input input {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 7px;
}

/* Redeem button follows the configurable primary button theme color, so it
   matches the rest of the POS and can be changed on the settings page. */
.gift-card-redeem {
  background-color: var(--tbpos-primary-btn);
  color: var(--tbpos-primary-btn-text);
  border: none;
  border-radius: 7px;
  padding: 8px 18px;
  font-weight: bold;
}

.gift-card-redeem:hover {
  filter: brightness(0.93);
}

.gift-card-remove {
  margin-left: 8px;
}

/* HELP PAGE (in app manual) */
.help-page {
  /* Fills the content column, so the scrollbar sits against the right edge of
     the screen instead of somewhere in the middle. */
  width: 100%;
  padding: 4px 24px 24px 8px;
  box-sizing: border-box;
  /* The app itself does not scroll (body overflow is hidden), so the help
     content needs its own scroll area or the last topics are unreachable. */
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

/* Long lines are hard to read, so on a wide screen the topics flow into
   columns rather than stretching one line across the whole till.
   tbpos-html is a custom element, which has no default display, so it has to
   be made a block before any of this applies. */
.help-content {
  display: block;
  column-gap: 48px;
}

@media (min-width: 1200px) {
  .help-content {
    column-count: 2;
  }
}

@media (min-width: 1900px) {
  .help-content {
    column-count: 3;
  }
}

/* Keep a topic and its list together in one column. */
.help-content h1,
.help-content h2,
.help-content h3,
.help-content h4 {
  break-after: avoid;
  break-inside: avoid;
}

.help-content ul,
.help-content ol,
.help-content p,
.help-content li {
  break-inside: avoid;
}

/* VARIANT PICKER STEPS (one row of buttons per attribute group) */
.variant-picker-steps {
  margin-bottom: 10px;
  max-height: 40vh;
  overflow-y: auto;
  flex-shrink: 0;
}

.variant-step {
  margin-bottom: 8px;
}

.variant-step-label {
  font-size: 0.85em;
  color: #666;
  margin-bottom: 3px;
}

.variant-step-values {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.variant-step-btn {
  border: 1px solid var(--tbpos-header-bg, #377546);
  background: #fff;
  color: var(--tbpos-header-bg, #377546);
  border-radius: 6px;
  padding: 5px 12px;
  cursor: pointer;
  font-size: 0.9em;
}

.variant-step-btn-chosen {
  background: var(--tbpos-header-bg, #377546);
  color: var(--tbpos-primary-btn-text, #fff);
}

/* Values that do not occur in the remaining variants stay clickable, so the
   cashier can always switch, but are dimmed. */
.variant-step-btn-unreachable {
  opacity: 0.4;
}

/* Merchant written help content (HTML from the module settings). */
.help-content h3 {
  color: var(--tbpos-header-bg, #377546);
  font-size: 1.05em;
  margin: 16px 0 6px 0;
}

.help-content h3:first-child {
  margin-top: 0;
}

.help-content ul,
.help-content ol {
  margin: 0 0 10px 0;
  padding-left: 20px;
  color: var(--tbpos-text, #333);
}

.help-content li {
  margin-bottom: 5px;
  line-height: 1.45;
}

.help-content p {
  color: var(--tbpos-text, #333);
  line-height: 1.5;
  margin: 0 0 10px 0;
}