.pos {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(340px, 1fr);
  gap: 20px;
  padding: 22px;
}
.pos-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.pos-head button,
.pay button,
.qty button {
  border: 1px solid #c8d4d0;
  background: #fff;
  border-radius: 10px;
  padding: 10px 13px;
  cursor: pointer;
}
.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 12px;
}
.product {
  min-height: 125px;
  border: 1px solid #cbd7d3;
  border-radius: 15px;
  padding: 15px;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  color: #17231f;
}
.product small {
  opacity: 0.65;
}
.product strong {
  font-size: 19px;
}
.cart {
  display: flex;
  flex-direction: column;
  min-height: 65vh;
}
.cart h2 {
  margin-top: 0;
}
.cart footer {
  margin-top: auto;
}
.cart-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid #e3e9e7;
}
.cart-row small {
  display: block;
  color: #71807b;
  margin-top: 4px;
}
.qty {
  display: flex;
  align-items: center;
  gap: 8px;
}
.qty button {
  padding: 5px 9px;
}
.empty {
  color: #71807b;
}
.total {
  display: flex;
  justify-content: space-between;
  font-size: 24px;
  padding: 22px 0;
}
.pay {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.pay .primary {
  grid-column: 1/-1;
}
.cart #message {
  color: #187653;
  font-weight: 700;
}
@media (max-width: 850px) {
  .pos {
    grid-template-columns: 1fr;
  }
  .cart {
    min-height: 400px;
  }
}
@media (max-width: 720px) {
  .pos {
    padding: 12px;
  }
  .products {
    grid-template-columns: repeat(2, 1fr);
  }
}
.history {
  margin: 24px;
  overflow: auto;
}
.history table {
  width: 100%;
  border-collapse: collapse;
}
.history th,
.history td {
  text-align: left;
  padding: 13px;
  border-bottom: 1px solid #dfe7e4;
}
.history th {
  color: #60736c;
}
.history button {
  padding: 9px 13px;
  border: 1px solid #bdcbc6;
  border-radius: 9px;
  background: #fff;
  cursor: pointer;
}
.refund-actions {
  display: flex;
  gap: 12px;
  margin-top: 25px;
}
.refund-actions .danger {
  background: #a52e2e;
  color: #fff;
  border-color: #a52e2e;
}
.pay button.primary {
  background: #183c35;
  color: #fff;
  border-color: #183c35;
}
.admin-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
  gap: 20px;
  padding: 24px;
}
.admin-grid table {
  width: 100%;
  border-collapse: collapse;
}
.admin-grid th,
.admin-grid td {
  text-align: left;
  padding: 11px;
  border-bottom: 1px solid #dfe7e4;
}
.admin-grid button {
  padding: 8px 11px;
  border: 1px solid #bdcbc6;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}
.category-admin {
  display: grid;
  grid-template-columns: 52px 1fr auto auto;
  gap: 8px;
  align-items: center;
  margin: 10px 0;
}
.category-admin input {
  height: 42px;
  border: 1px solid #bdcbc6;
  border-radius: 8px;
  padding: 7px;
}
@media (max-width: 950px) {
  .admin-grid {
    grid-template-columns: 1fr;
  }
}
.admin-panel {
  min-width: 0;
  overflow: hidden;
}
.table-scroll {
  width: 100%;
  overflow-x: auto;
}
.row-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.category-list {
  display: grid;
  gap: 10px;
}
.category-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid #d8e2de;
  border-radius: 11px;
}
.color-preview {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--category-color);
  border: 1px solid #b9c7c2;
}
.category-card strong {
  overflow: hidden;
  text-overflow: ellipsis;
}
dialog {
  border: 0;
  border-radius: 18px;
  padding: 0;
  width: min(650px, calc(100vw - 30px));
  box-shadow: 0 25px 80px #102a2444;
}
dialog::backdrop {
  background: #102a2477;
}
.editor {
  padding: 24px;
}
.editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.editor-head h2 {
  margin: 0;
}
.editor-head button {
  border: 0;
  background: transparent;
  font-size: 30px;
  cursor: pointer;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.editor label {
  display: grid;
  gap: 7px;
  font-weight: 700;
}
.editor input,
.editor select {
  width: 100%;
  padding: 12px;
  border: 1px solid #b8c8c2;
  border-radius: 9px;
  background: #fff;
  font: inherit;
}
.editor .wide {
  grid-column: 1/-1;
}
.editor .check {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.editor .check input {
  width: auto;
}
.editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
}
.editor-actions button {
  padding: 11px 18px;
  border: 1px solid #b8c8c2;
  border-radius: 9px;
  background: #fff;
  cursor: pointer;
}
.editor-actions .save {
  background: #183c35;
  color: #fff;
}
.color-field {
  display: grid;
  grid-template-columns: 70px 1fr;
  align-items: center;
  gap: 12px;
}
.color-field input {
  height: 48px;
  padding: 4px;
}
@media (max-width: 650px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
  .editor .wide {
    grid-column: auto;
  }
  .category-card {
    grid-template-columns: 32px 1fr;
  }
  .category-card .row-actions {
    grid-column: 1/-1;
  }
}
.deposit-toggle {
  display: block;
  margin-top: 8px;
  padding: 5px 8px;
  border: 1px solid #c6d3cf;
  border-radius: 7px;
  background: #f3f7f5;
  color: #315d51;
  cursor: pointer;
  font-size: 12px;
}
.deposit-toggle.removed {
  background: #fff0e8;
  color: #93451f;
  border-color: #e3b89f;
}
.shell > header {
  position: sticky;
  top: 0;
  z-index: 30;
}
.shell > nav {
  position: sticky;
  top: 84px;
  z-index: 29;
  box-shadow: 0 5px 12px #102a2415;
}
.deposit-control {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  color: #315d51;
  font-size: 12px;
}
.deposit-control button {
  width: 27px;
  height: 27px;
  padding: 0;
  border: 1px solid #b9cbc5;
  border-radius: 7px;
  background: #eef6f3;
  cursor: pointer;
}
.deposit-control button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.pos-selectors {
  position: sticky;
  top: 142px;
  z-index: 28;
  display: flex;
  gap: 14px;
  padding: 10px 30px;
  background: #e4eeea;
  border-bottom: 1px solid #c8d7d1;
}
.pos-selectors label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}
.pos-selectors select {
  min-width: 180px;
  padding: 9px;
  border: 1px solid #adc2ba;
  border-radius: 9px;
  background: #fff;
}
.admin-switch {
  padding: 14px 24px 0;
}
.admin-switch button {
  padding: 10px 14px;
  border: 1px solid #b8c8c2;
  border-radius: 9px;
  background: #fff;
  cursor: pointer;
}
.feature-toggle {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 14px;
  background: #eef6f3;
  border-radius: 10px;
  margin-bottom: 14px;
}
.manage-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #dfe7e4;
}
.manage-row button,
.register-card button {
  padding: 8px 11px;
  border: 1px solid #bdcbc6;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}
.register-card {
  padding: 15px;
  border: 1px solid #d6e1dd;
  border-radius: 12px;
  margin-bottom: 12px;
}
.assignment-list {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 12px 0;
}
.assignment-list label {
  display: flex;
  gap: 6px;
  align-items: center;
  background: #eef5f2;
  padding: 7px 9px;
  border-radius: 8px;
}
@media (max-width: 650px) {
  .pos-selectors {
    flex-direction: column;
    top: 142px;
  }
  .pos-selectors label {
    justify-content: space-between;
  }
  .pos-selectors select {
    min-width: 0;
    width: 60%;
  }
}
.admin-subnav {
  position: sticky;
  top: 142px;
  z-index: 28;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 11px 24px;
  background: #e4eeea;
  border-bottom: 1px solid #c7d6d0;
}
.admin-subnav button {
  white-space: nowrap;
  padding: 9px 13px;
  border: 1px solid #b7c8c1;
  border-radius: 9px;
  background: #fff;
  color: #274b42;
  cursor: pointer;
}
.admin-subnav button.active {
  background: #183c35;
  color: #fff;
  border-color: #183c35;
}
.admin-subnav button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.operator-required {
  margin-left: auto;
  padding: 7px 10px;
  border-radius: 8px;
  background: #eaf5f0;
  color: #23614f;
}
.selection-missing .operator-required {
  background: #fff0e8;
  color: #963f1d;
}
.product:disabled,
.pos-head button:disabled,
.pay button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  filter: grayscale(0.35);
}
.category-filter {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin: 0 0 22px;
  padding: 12px;
  background: #f1f6f4;
  border: 1px solid #d7e3df;
  border-radius: 12px;
}
.category-filter button {
  padding: 7px 10px;
  border: 1px solid #b9cbc4;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}
.category-filter label {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 9px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #d0ddd8;
  cursor: pointer;
}
.category-filter label span::before {
  content: '';
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 3px;
  background: var(--filter-color);
  margin-right: 6px;
}
.products {
  display: block;
}
.product-category {
  margin-bottom: 25px;
}
.product-category h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid #dce6e2;
  font-size: 21px;
}
.product-category h2 span {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1px solid #b9c8c3;
}
.category-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 12px;
}
@media (max-width: 720px) {
  .category-products {
    grid-template-columns: repeat(2, 1fr);
  }
}
.pos-selectors {
  align-items: center;
}
.pos-selectors .fixed-register {
  display: flex;
  align-items: center;
  min-height: 42px;
  line-height: 1.2;
}
.pos-selectors label {
  min-height: 42px;
}
.pos-selectors select {
  height: 42px;
}
.category-filter {
  padding: 9px 10px;
  margin-bottom: 17px;
  gap: 7px;
  font-size: 14px;
}
.category-filter button,
.category-filter label {
  padding: 6px 8px;
}
.product-category {
  margin-bottom: 18px;
}
.product-category h2 {
  font-size: 18px;
  margin-bottom: 9px;
  padding-bottom: 6px;
}
.product-category h2 span {
  width: 15px;
  height: 15px;
}
.category-products {
  grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
  gap: 9px;
}
.category-products .product {
  min-height: 102px;
  padding: 12px;
  border-radius: 12px;
}
.category-products .product strong {
  font-size: 17px;
}
.category-products .product span {
  font-size: 14px;
}
@media (max-width: 720px) {
  .category-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.tables-page {
  margin: 24px;
}
.table-cards {
  display: grid;
  gap: 11px;
}
.table-cards article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 14px;
  border: 1px solid #d6e1dd;
  border-radius: 11px;
}
.table-cards small {
  display: block;
  color: #6d7d77;
  margin-top: 4px;
}
@media (max-width: 700px) {
  .table-cards article {
    align-items: flex-start;
    flex-direction: column;
  }
}
.pos-selectors input {
  height: 42px;
  min-width: 160px;
  padding: 9px;
  border: 1px solid #adc2ba;
  border-radius: 9px;
  background: #fff;
}
.pos-selectors > button {
  padding: 9px 12px;
  border: 1px solid #adc2ba;
  border-radius: 9px;
  background: #fff;
  cursor: pointer;
}
.cash-table-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.cash-table-grid button {
  display: grid;
  gap: 7px;
  text-align: left;
  padding: 14px;
  border: 1px solid #c5d4ce;
  border-radius: 11px;
  background: #f4f8f6;
  cursor: pointer;
}
.table-receipt table {
  width: 100%;
  border-collapse: collapse;
}
.table-receipt th,
.table-receipt td {
  text-align: left;
  padding: 9px;
  border-bottom: 1px solid #ddd;
}
.receipt-title {
  text-align: center;
}
.receipt-total {
  display: flex;
  justify-content: space-between;
  font-size: 20px;
}
@media print {
  body * {
    visibility: hidden;
  }
  .printable-table,
  .printable-table * {
    visibility: visible;
  }
  .printable-table {
    position: absolute;
    left: 0;
    top: 0;
    width: 80mm;
    padding: 4mm;
    color: #000;
    background: #fff;
  }
  .no-print {
    display: none !important;
  }
}
.stats-page {
  padding: 22px;
}
.stats-controls {
  display: flex;
  align-items: end;
  gap: 14px;
  flex-wrap: wrap;
}
.stats-controls h2 {
  margin-right: auto;
}
.stats-controls label {
  display: grid;
  gap: 5px;
  font-weight: 700;
}
.stats-controls select {
  min-width: 180px;
  padding: 9px;
  border: 1px solid #b9cac3;
  border-radius: 8px;
  background: #fff;
}
.stats-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 16px 0;
}
.stats-summary article {
  display: grid;
  gap: 5px;
  padding: 17px;
  background: #fff;
  border: 1px solid #d6e1dd;
  border-radius: 12px;
}
.stats-summary strong {
  font-size: 23px;
}
.stats-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 16px;
}
.stats-grid table {
  width: 100%;
  border-collapse: collapse;
}
.stats-grid th,
.stats-grid td {
  text-align: left;
  padding: 10px;
  border-bottom: 1px solid #dfe7e4;
}
.chart > div {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) 2fr auto;
  align-items: center;
  gap: 9px;
  margin: 11px 0;
}
.chart i {
  display: block;
  height: 17px;
  border-radius: 5px;
  background: #2b806c;
}
@media (max-width: 850px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
  .stats-summary {
    grid-template-columns: repeat(2, 1fr);
  }
}
.closures-page {
  display: grid;
  gap: 18px;
  padding: 24px;
}
.closure-controls {
  display: grid;
  grid-template-columns: 1fr 1fr minmax(210px, 1fr);
  gap: 12px;
  align-items: end;
}
.closure-controls label {
  display: grid;
  gap: 6px;
  font-weight: 700;
}
.closure-controls select {
  padding: 11px;
  border: 1px solid #b8c8c2;
  border-radius: 9px;
  background: #fff;
}
.closure-create > button {
  margin-top: 14px;
  padding: 11px 15px;
  border: 1px solid #b8c8c2;
  border-radius: 9px;
  background: #fff;
  cursor: pointer;
}
.closure-archive table,
.closure-receipt table {
  width: 100%;
  border-collapse: collapse;
}
.closure-archive th,
.closure-archive td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #dfe7e4;
}
.closure-archive button {
  padding: 7px 10px;
  border: 1px solid #b8c8c2;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}
#print-area {
  display: none;
}
.closure-receipt {
  width: 80mm;
  padding: 2mm 3mm;
  color: #000;
  background: #fff;
  font:
    12px/1.2 ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
}
.closure-receipt header {
  text-align: center;
  margin-bottom: 3mm;
}
.closure-receipt h2 {
  font-size: 18px;
  margin: 2mm 0;
}
.closure-receipt th,
.closure-receipt td {
  text-align: left;
  padding: 1.2mm 0;
  border-bottom: 1px dashed #777;
}
.closure-receipt th:nth-child(n + 2),
.closure-receipt td:nth-child(n + 2) {
  text-align: right;
}
.closure-totals {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1mm;
  margin-top: 3mm;
}
.closure-receipt footer {
  text-align: center;
  border-top: 1px dashed #777;
  margin-top: 3mm;
  padding-top: 2mm;
}
@media (max-width: 760px) {
  .closure-controls {
    grid-template-columns: 1fr;
  }
}
@media print {
  body * {
    visibility: hidden !important;
  }
  #print-area,
  #print-area * {
    visibility: visible !important;
  }
  #print-area {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 80mm;
  }
  .closure-receipt {
    break-after: page;
  }
  @page {
    size: 80mm auto;
    margin: 0;
  }
}
.settings-page {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.7fr);
  gap: 18px;
  padding: 24px;
}
.settings-form {
  display: grid;
  gap: 22px;
}
.settings-form section {
  display: grid;
  gap: 12px;
  padding-bottom: 20px;
  border-bottom: 1px solid #dce5e1;
}
.settings-form h2 {
  margin: 0;
}
.settings-form label {
  display: grid;
  gap: 6px;
  font-weight: 700;
}
.settings-form input[type='text'],
.settings-form input:not([type]),
.settings-form textarea,
.settings-form select {
  width: 100%;
  padding: 11px;
  border: 1px solid #b7c8c1;
  border-radius: 9px;
  background: #fff;
  font: inherit;
}
.toggle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.toggle-grid label,
.settings-form label.toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  background: #eef6f3;
  border-radius: 9px;
}
.settings-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}
.settings-actions .primary {
  width: auto;
}
.settings-preview {
  align-self: start;
  position: sticky;
  top: 205px;
}
.receipt-preview {
  max-width: 280px;
  margin: auto;
  padding: 18px 12px;
  text-align: center;
  border: 1px dashed #70827b;
  background: #fff;
  font-family: monospace;
}
.receipt-preview h1 {
  font-size: 26px;
}
.receipt-preview footer {
  border-top: 1px dashed #777;
  margin-top: 20px;
  padding-top: 10px;
}
@media (max-width: 850px) {
  .settings-page {
    grid-template-columns: 1fr;
  }
  .settings-preview {
    position: static;
  }
  .toggle-grid {
    grid-template-columns: 1fr;
  }
}
.customer-receipt-choice {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 12px;
  padding: 11px 13px;
  border: 1px solid #c9d8d2;
  border-radius: 10px;
  background: #eef6f3;
  font-weight: 750;
}
.customer-receipt-choice input {
  width: 19px;
  height: 19px;
}
.pin-display {
  text-align: center;
  font-size: 32px !important;
  letter-spacing: 10px;
  min-height: 58px;
}
.pin-pad {
  display: grid;
  grid-template-columns: repeat(3, minmax(74px, 1fr));
  gap: 10px;
  margin: 16px 0;
}
.pin-pad button {
  min-height: 62px;
  border: 1px solid #b9cbc5;
  border-radius: 13px;
  background: #f4f8f6;
  color: #17231f;
  font-size: 25px;
  font-weight: 800;
  cursor: pointer;
}
.pin-pad button:active {
  background: #dcebe6;
  transform: scale(0.98);
}
.deposit-return-page {
  padding: 24px;
  display: grid;
  gap: 18px;
}
.deposit-return-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.deposit-return-head h2,
.deposit-option h2 {
  margin: 0;
}
.deposit-return-head p {
  margin: 6px 0 0;
}
.deposit-return-head label {
  display: grid;
  gap: 6px;
  font-weight: 800;
}
.deposit-return-head select {
  min-width: 240px;
  padding: 11px;
  border: 1px solid #b9cbc5;
  border-radius: 10px;
  background: #fff;
}
.deposit-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.deposit-option {
  display: grid;
  gap: 16px;
}
.deposit-option p {
  margin: 5px 0 0;
  color: #65766f;
}
.deposit-quantity {
  display: grid;
  grid-template-columns: 58px 1fr 58px;
  gap: 8px;
}
.deposit-quantity button,
.deposit-quantity input {
  height: 54px;
  border: 1px solid #b9cbc5;
  border-radius: 11px;
  background: #fff;
  text-align: center;
  font-size: 23px;
  font-weight: 800;
}
.deposit-option > [data-deposit-total] {
  font-size: 30px;
  text-align: center;
}
.deposit-option .primary {
  font-size: 18px;
}
.deposit-option .primary:disabled {
  opacity: 0.45;
}
.closure-view-dialog {
  width: min(760px, 94vw);
  max-height: 92vh;
}
.closure-view-dialog .editor {
  max-height: 86vh;
  overflow: auto;
}
.closure-view-dialog .closure-receipt {
  width: min(100%, 520px);
  margin: 0 auto;
  padding: 20px;
  background: #fff;
  border: 1px solid #c9d5d1;
  border-radius: 12px;
}
.closure-view-dialog .closure-receipt header {
  text-align: center;
}
.closure-view-dialog .closure-receipt table {
  width: 100%;
  border-collapse: collapse;
}
.closure-view-dialog .closure-receipt th,
.closure-view-dialog .closure-receipt td {
  padding: 8px;
  border-bottom: 1px solid #dce4e1;
  text-align: right;
}
.closure-view-dialog .closure-receipt th:first-child,
.closure-view-dialog .closure-receipt td:first-child {
  text-align: left;
}
.closure-view-dialog .section-title {
  margin-top: 16px;
  padding: 7px 0;
  border-top: 2px solid #17231f;
  border-bottom: 1px solid #17231f;
  font-weight: 850;
}
.closure-view-dialog .closure-totals,
.closure-view-dialog .grand-total {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 18px;
  margin-top: 9px;
}
.closure-view-dialog .grand-total {
  padding: 10px 0;
  border-top: 2px solid #17231f;
  border-bottom: 2px solid #17231f;
  font-size: 19px;
}

/* v9.20: kompakte Kasse und dauerhaft erreichbare Zahlung */
html,
body,
#app {
  height: 100%;
  overflow: hidden;
}
.shell {
  height: 100vh !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
}
.shell > header,
.shell > nav,
.pos-selectors,
.admin-subnav {
  flex: none;
}
.pos {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.pos > article {
  height: 100%;
  overflow: auto;
}
.cart {
  height: 100% !important;
  top: auto !important;
}
.history,
.stats-page,
.closures-page,
.settings-page,
.tables-page,
.users-page,
.admin-grid,
.deposit-return-page {
  flex: 1;
  min-height: 0;
  overflow: auto;
  margin-top: 0;
  margin-bottom: 0;
}
.history {
  display: flex;
  flex-direction: column;
}
.history > .table-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.receipt-account-data {
  display: flex;
  gap: 10px 22px;
  flex-wrap: wrap;
  padding: 10px 0 16px;
}
.table-scroll {
  overflow: auto;
}
body .shell .pos > .cart {
  height: 100% !important;
  top: auto !important;
}
.admin-grid {
  overflow: hidden !important;
  align-items: stretch;
}
.admin-grid > .panel {
  height: 100%;
  min-height: 0;
  overflow: auto;
}
.admin-grid > .admin-panel {
  display: flex;
  flex-direction: column;
}
.admin-grid > .admin-panel > .table-scroll,
.admin-grid > .admin-panel > .category-list {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.settings-page,
.users-page {
  overflow: hidden !important;
  align-items: stretch;
}
.settings-page > *,
.users-page > * {
  height: 100%;
  min-height: 0;
  overflow: auto;
}
.tables-page {
  height: auto !important;
  margin: 0 24px !important;
}
.stats-page {
  display: flex;
  flex-direction: column;
  overflow: hidden !important;
}
.stats-controls,
.stats-summary {
  flex: none;
}
.stats-grid {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.stats-grid > .panel {
  height: 100%;
  min-height: 0;
  overflow: auto;
}
.closures-page {
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden !important;
}
.closure-create {
  overflow: auto;
}
.closure-archive {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.closure-archive > .table-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
@media (max-width: 950px) {
  .admin-grid {
    overflow: auto !important;
  }
  .admin-grid > .panel {
    height: auto;
    overflow: visible;
  }
  .settings-page,
  .users-page,
  .stats-page,
  .closures-page {
    overflow: auto !important;
  }
  .settings-page > *,
  .users-page > * {
    height: auto;
  }
  .stats-grid {
    overflow: visible;
  }
  .stats-grid > .panel {
    height: auto;
  }
  .closure-archive {
    overflow: visible;
  }
}
.screen-keyboard {
  position: fixed;
  z-index: 1000;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  width: min(920px, calc(100vw - 20px));
  padding: 10px;
  border: 1px solid #9eb7ae;
  border-radius: 15px;
  background: #edf4f1;
  box-shadow: 0 12px 45px #102a2455;
}
.screen-keyboard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
}
.screen-keyboard-head button,
.screen-keyboard-actions button,
.screen-keys button {
  border: 1px solid #b3c7c0;
  border-radius: 8px;
  background: #fff;
  color: #17231f;
  cursor: pointer;
  font-weight: 700;
}
.screen-keyboard-head button {
  padding: 7px 14px;
  background: #183c35;
  color: #fff;
}
.screen-keys {
  display: grid;
  grid-template-columns: repeat(10, minmax(42px, 1fr));
  gap: 5px;
}
.screen-keys button {
  min-height: 39px;
  font-size: 15px;
}
.screen-keyboard.numeric {
  width: min(390px, calc(100vw - 20px));
}
.screen-keyboard.numeric .screen-keys {
  grid-template-columns: repeat(3, 1fr);
}
.screen-keyboard.numeric .screen-keys button {
  min-height: 48px;
  font-size: 20px;
}
.screen-keyboard-actions {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 6px;
  margin-top: 6px;
}
.screen-keyboard-actions button {
  min-height: 38px;
}
.screen-keyboard.numeric [data-screen-space] {
  display: none;
}
.screen-keyboard.numeric .screen-keyboard-actions {
  grid-template-columns: 1fr 1fr;
}
body.screen-keyboard-open dialog[open] {
  max-height: calc(100vh - 270px);
  margin-top: 20px;
}
@media (max-width: 650px) {
  .screen-keys {
    grid-template-columns: repeat(7, 1fr);
  }
  .screen-keys button {
    min-height: 36px;
    font-size: 13px;
  }
}

/* v9.26: größere, gut treffbare Artikelfelder bei weiterhin kompakter Kasse */
.category-products {
  grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)) !important;
  gap: 9px !important;
}
.category-products .product {
  min-height: 96px !important;
  padding: 12px !important;
  border-radius: 12px !important;
}
.category-products .product strong {
  font-size: 17px !important;
  line-height: 1.2;
}
.category-products .product span {
  font-size: 14px !important;
}
@media (max-width: 720px) {
  .category-products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* v9.27: drei wählbare Touch-Größen */
body[data-product-size='small'] .category-products {
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
  gap: 6px !important;
}
body[data-product-size='small'] .category-products .product {
  min-height: 72px !important;
  padding: 8px !important;
}
body[data-product-size='small'] .category-products .product strong {
  font-size: 14px !important;
}
body[data-product-size='medium'] .category-products {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
  gap: 9px !important;
}
body[data-product-size='medium'] .category-products .product {
  min-height: 98px !important;
  padding: 12px !important;
}
body[data-product-size='medium'] .category-products .product strong {
  font-size: 17px !important;
}
body[data-product-size='large'] .category-products {
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)) !important;
  gap: 11px !important;
}
body[data-product-size='large'] .category-products .product {
  min-height: 118px !important;
  padding: 15px !important;
}
body[data-product-size='large'] .category-products .product strong {
  font-size: 20px !important;
}
body[data-product-size='large'] .category-products .product span {
  font-size: 16px !important;
}
.cash-payment-dialog {
  display: grid;
  gap: 14px;
}
.cash-due,
.cash-change {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  border-radius: 10px;
  background: #eef6f3;
}
.cash-due strong,
.cash-change strong {
  font-size: 24px;
}
.cash-payment-dialog label {
  display: grid;
  gap: 7px;
  font-weight: 800;
}
.cash-payment-dialog input {
  width: 100%;
  padding: 13px;
  border: 1px solid #adc2ba;
  border-radius: 10px;
  font-size: 24px;
  text-align: center;
}
@media (max-width: 720px) {
  body[data-product-size] .category-products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
.pos-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.product-size-control {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 750;
}
.product-size-control select {
  height: 34px;
  padding: 5px 25px 5px 8px;
  border: 1px solid #b9cbc5;
  border-radius: 8px;
  background: #fff;
  font: inherit;
}
@media (max-width: 650px) {
  .pos-head {
    align-items: flex-start;
  }
  .pos-head-actions {
    align-items: flex-end;
    flex-direction: column;
  }
  .product-size-control {
    align-items: flex-end;
    flex-direction: column;
    gap: 3px;
  }
}
.payment-number-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.payment-number-pad button {
  min-height: 48px;
  border: 1px solid #b9cbc5;
  border-radius: 10px;
  background: #f4f8f6;
  color: #17231f;
  font-size: 20px;
  font-weight: 800;
  cursor: pointer;
}
.payment-number-pad button:active {
  background: #dcebe6;
}
.payment-number-pad [data-payment-clear],
.payment-number-pad [data-payment-exact] {
  font-size: 14px;
}
.card-payment-dialog {
  display: grid;
  gap: 14px;
}
.card-payment-note {
  padding: 18px;
  border: 1px solid #c5d8d1;
  border-radius: 12px;
  background: #eef6f3;
  text-align: center;
}
.card-payment-note strong {
  font-size: 20px;
}
.card-payment-note p {
  margin: 8px 0 0;
  color: #526b62;
  line-height: 1.4;
}

/* v9.29: kompakter Kopfbereich für mehr Platz in der Kasse */
.shell > header {
  padding: 9px 22px !important;
  min-height: 58px;
}
.shell > header .eyebrow {
  margin-bottom: 2px;
  font-size: 9px;
}
.shell > header h1 {
  font-size: 20px !important;
  line-height: 1.1;
}
.shell > header h1 small {
  font-size: 10px;
}
.account {
  gap: 10px;
  font-size: 14px;
}
.account button {
  padding: 7px 11px;
}
.shell > nav {
  top: 58px !important;
  padding: 6px 22px !important;
}
.shell > nav button {
  padding: 7px 11px;
  border-radius: 8px;
  font-size: 14px;
}
.pos-selectors {
  top: 104px !important;
  min-height: 38px;
  padding: 4px 22px !important;
  gap: 10px;
}
.pos-selectors .fixed-register,
.pos-selectors label {
  min-height: 32px !important;
  font-size: 14px;
}
.pos-selectors select,
.pos-selectors input,
.pos-selectors > button {
  height: 34px !important;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}
.table-input-row button {
  height: 34px !important;
}
.admin-subnav {
  top: 104px !important;
  padding: 6px 22px;
}
.admin-subnav button {
  padding: 7px 10px;
  font-size: 13px;
}
@media (max-width: 720px) {
  .shell > header {
    padding: 8px 12px !important;
  }
  .shell > nav {
    padding: 5px 12px !important;
  }
  .pos-selectors {
    padding: 4px 12px !important;
  }
}
.table-pad-display {
  display: block !important;
  min-height: 54px;
  background: #fff;
}
.inactive-row,
.category-card.inactive,
.register-card.inactive {
  opacity: 0.62;
  background: #f1f3f2;
}
.entry-status {
  font-size: 12px;
  font-weight: 800;
  color: #687a73;
}
.status-toggle.activate {
  color: #176b4f !important;
  border-color: #8fc4b2 !important;
  background: #edf8f4 !important;
}
.status-toggle.deactivate {
  color: #8a5313 !important;
  border-color: #dfbd8b !important;
  background: #fff8ed !important;
}
.register-card button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.tile-deposit {
  display: block;
  margin-top: 2px;
  font-size: 10px !important;
  line-height: 1.15;
  color: #465d55;
  font-weight: 700;
}
.screen-keyboard.in-dialog {
  z-index: 2147483647;
}
.screen-keyboard.in-dialog ~ * {
  pointer-events: auto;
}
.screen-keyboard-head {
  gap: 8px;
}
.screen-keyboard-head strong {
  margin-right: auto;
}
.screen-keyboard-head .screen-shift {
  background: #fff;
  color: #183c35;
}
.screen-keyboard-head .screen-shift.active {
  background: #d4e9e2;
  color: #123d32;
}
.deposit-confirm {
  text-align: center;
}
.deposit-confirm-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: #dcefe8;
  color: #174c3f;
  font-size: 30px;
  font-weight: 900;
}
.deposit-confirm h2 {
  margin: 5px 0 17px;
  font-size: 25px;
}
.deposit-confirm-details {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px 20px;
  align-items: center;
  padding: 16px;
  border: 1px solid #c8d9d3;
  border-radius: 12px;
  background: #f1f7f5;
  text-align: left;
}
.deposit-confirm-details strong {
  text-align: right;
}
.deposit-confirm-total {
  font-size: 25px;
  color: #174c3f;
}
.deposit-confirm-note {
  margin: 14px 0 0;
  color: #687a73;
  font-size: 13px;
}

/* v9.31: Smartphone- und Tablet-Ansicht */
@media (max-width: 720px) {
  html,
  body,
  #app,
  .shell {
    height: 100dvh !important;
    min-height: 100dvh !important;
  }
  .shell > header {
    min-height: 50px !important;
    padding: 6px 10px !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px;
    padding-top: max(6px, env(safe-area-inset-top)) !important;
  }
  .shell > header .eyebrow {
    display: none;
  }
  .shell > header h1 {
    font-size: 17px !important;
    white-space: nowrap;
  }
  .shell > header h1 small {
    font-size: 9px;
  }
  .account {
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0;
    font-size: 11px;
  }
  .account span {
    max-width: 105px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .account button {
    min-height: 38px;
    padding: 6px 9px !important;
    font-size: 12px;
  }
  .shell > nav {
    top: 50px !important;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    padding: 5px 7px !important;
    overflow: visible;
  }
  .shell > nav button {
    min-width: 0;
    min-height: 40px;
    padding: 6px 3px !important;
    font-size: 11px !important;
    white-space: nowrap;
  }
  .pos-selectors {
    top: 95px !important;
    min-height: 40px;
    flex-direction: row !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 4px 8px !important;
    overflow-x: auto;
    white-space: nowrap;
  }
  .pos-selectors > * {
    flex: none;
  }
  .pos-selectors .fixed-register,
  .pos-selectors label {
    min-height: 32px !important;
    font-size: 12px !important;
  }
  .pos-selectors select,
  .pos-selectors input {
    min-width: 130px !important;
    width: auto !important;
    max-width: 180px;
  }
  .operator-required {
    margin-left: 0;
    font-size: 11px;
    padding: 5px 7px;
  }
  .pos {
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    padding: 7px !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  .pos .panel {
    padding: 10px !important;
    border-radius: 11px !important;
  }
  .pos > article {
    flex: 1 1 55%;
    height: auto !important;
    min-height: 150px !important;
    overflow: auto !important;
  }
  .pos-head {
    margin-bottom: 7px !important;
  }
  .pos-head-actions {
    flex-direction: row !important;
    align-items: center !important;
  }
  .product-size-control {
    display: none;
  }
  .pos-head button {
    min-height: 38px;
  }
  .category-filter {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    margin-bottom: 7px !important;
  }
  .category-filter > strong {
    display: none;
  }
  .category-filter button,
  .category-filter label {
    flex: none;
    min-height: 35px;
  }
  .product-category {
    margin-bottom: 8px !important;
  }
  .product-category h2 {
    position: sticky;
    top: -10px;
    z-index: 2;
    padding: 5px 2px !important;
    background: #fff;
    font-size: 14px !important;
  }
  body[data-product-size] .category-products,
  .category-products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  body[data-product-size] .category-products .product,
  .category-products .product {
    min-height: 78px !important;
    padding: 9px !important;
  }
  body[data-product-size] .category-products .product strong {
    font-size: 15px !important;
  }
  .tile-deposit {
    font-size: 9px !important;
  }
  body .shell .pos > .cart,
  .cart {
    position: static !important;
    flex: 0 0 40%;
    height: 40% !important;
    min-height: 255px !important;
    max-height: 360px !important;
    overflow: hidden !important;
    padding: 10px !important;
  }
  .cart h2 {
    font-size: 16px !important;
  }
  .cart > #cart {
    flex: 1;
    min-height: 0;
    overflow: auto !important;
  }
  .cart-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 5px !important;
    padding: 6px 0 !important;
  }
  .cart-row strong {
    font-size: 12px !important;
  }
  .qty button {
    min-width: 32px;
    min-height: 32px;
  }
  .cart > footer {
    padding-top: 5px !important;
  }
  .cart .total {
    padding: 6px 0 !important;
    font-size: 19px;
  }
  .customer-receipt-choice {
    min-height: 36px;
    margin-bottom: 5px !important;
    padding: 5px 7px !important;
  }
  .pay {
    gap: 5px;
  }
  .pay button {
    min-height: 42px;
    padding: 6px !important;
  }
  .cart #message {
    max-height: 30px;
    overflow: auto;
  }
  .admin-subnav {
    top: 95px !important;
    padding: 5px 7px !important;
  }
  .admin-subnav button {
    min-height: 39px;
  }
  .admin-grid,
  .settings-page,
  .users-page,
  .stats-page,
  .closures-page,
  .deposit-return-page {
    padding: 8px !important;
    gap: 8px !important;
    overflow: auto !important;
  }
  .admin-grid {
    display: block !important;
  }
  .admin-grid > .panel {
    height: auto !important;
    min-height: 260px;
    margin-bottom: 8px;
    overflow: auto !important;
  }
  .settings-page,
  .users-page {
    display: block !important;
  }
  .settings-page > *,
  .users-page > * {
    height: auto !important;
    margin-bottom: 8px;
  }
  .panel {
    border-radius: 12px;
    padding: 14px;
  }
  .table-scroll {
    overflow: auto !important;
  }
  .manage-row {
    grid-template-columns: minmax(100px, 1fr) auto;
    align-items: start;
  }
  .manage-row button {
    min-height: 40px;
  }
  .register-card .row-actions,
  .category-card .row-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .register-card button,
  .category-card button {
    min-height: 40px;
  }
  .stats-summary {
    grid-template-columns: 1fr 1fr !important;
  }
  .stats-grid {
    display: block !important;
  }
  .stats-grid > .panel {
    height: auto !important;
    margin-bottom: 8px;
  }
  .closure-controls {
    grid-template-columns: 1fr !important;
  }
  .deposit-options {
    grid-template-columns: 1fr;
  }
  .deposit-return-head {
    align-items: flex-start;
  }
  .deposit-return-head select {
    min-width: 0;
    width: 100%;
  }
  .tables-page {
    margin: 0 !important;
    padding: 8px !important;
  }
  dialog {
    width: calc(100vw - 12px) !important;
    max-width: none;
    max-height: 96dvh;
    margin: auto;
    border-radius: 14px;
  }
  .editor {
    padding: 14px;
  }
  .editor-head {
    margin-bottom: 10px;
  }
  .editor-head h2 {
    font-size: 20px;
  }
  .form-grid {
    gap: 10px;
  }
  .editor-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin-top: 14px;
    padding-top: 8px;
    background: #fff;
  }
  .editor-actions button {
    flex: 1;
    min-height: 44px;
    padding: 8px;
  }
  .screen-keyboard {
    bottom: max(5px, env(safe-area-inset-bottom));
    width: calc(100vw - 10px) !important;
    padding: 6px;
  }
  .screen-keys {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 3px;
  }
  .screen-keys button {
    min-height: 34px !important;
    padding: 2px;
    font-size: 13px !important;
  }
  .screen-keyboard-head {
    margin-bottom: 4px;
  }
  .screen-keyboard-actions {
    margin-top: 4px;
  }
  .screen-keyboard-actions button {
    min-height: 34px;
  }
}

/* v10.6: einheitliche Einzelseiten und ruhiger Aufbau der Verwaltung */
.admin-subnav:not(.admin-subnav-v10) {
  display: none !important;
}
.admin-grid.single-admin-page {
  grid-template-columns: minmax(0, 1fr) !important;
}
.admin-grid.single-admin-page > section {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}
.category-card .category-print-target {
  grid-column: 1/3;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 13px;
}
.category-card .category-print-target select {
  min-width: 130px;
  max-width: 220px;
  padding: 7px;
  border: 1px solid #bdcbc6;
  border-radius: 8px;
  background: #fff;
}
.category-card > .row-actions {
  grid-column: 3;
  grid-row: 2;
  justify-content: flex-end;
}
@media (max-width: 720px) {
  .admin-grid.single-admin-page {
    display: block !important;
    width: 100% !important;
  }
  .admin-grid.single-admin-page > section {
    width: 100% !important;
    max-width: 100% !important;
  }
  .mobile-categories-admin .category-card {
    grid-template-columns: 32px minmax(0, 1fr) auto !important;
    width: 100% !important;
    padding: 11px !important;
  }
  .mobile-categories-admin .category-print-target {
    grid-column: 1/-1 !important;
    display: grid !important;
    grid-template-columns: 76px minmax(0, 1fr) !important;
    width: 100% !important;
    margin-top: 4px;
  }
  .mobile-categories-admin .category-print-target select {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }
  .mobile-categories-admin .category-card > .row-actions {
    grid-column: 1/-1 !important;
    grid-row: auto !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
  }
  .mobile-categories-admin .category-card > .row-actions button {
    width: 100% !important;
    min-width: 0 !important;
    padding: 7px 3px !important;
    font-size: 12px !important;
  }
}
@media (max-width: 950px) and (orientation: landscape) and (max-height: 600px) {
  .shell > header {
    min-height: 44px !important;
  }
  .shell > nav {
    top: 44px !important;
  }
  .pos-selectors {
    top: 89px !important;
  }
  .pos {
    display: grid !important;
    grid-template-columns: minmax(0, 1.45fr) minmax(285px, 0.8fr) !important;
  }
  .pos > article {
    height: 100% !important;
  }
  .pos > .cart,
  body .shell .pos > .cart {
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
  }
  .product-size-control {
    display: flex;
  }
  .category-products {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .admin-subnav {
    top: 89px !important;
  }
}

/* v9.31.1: auf Handys eine normale, durchgehend scrollbare Seite */
@media (max-width: 720px) {
  html,
  body,
  #app {
    height: auto !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  .shell {
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }
  .pos {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  .pos > article {
    flex: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
  body .shell .pos > .cart,
  .pos > .cart,
  .cart {
    position: static !important;
    flex: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: 260px !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .cart > #cart {
    max-height: none !important;
    overflow: visible !important;
  }
  .cart > footer {
    position: static !important;
  }
  .category-products {
    width: 100%;
    min-width: 0;
  }
  .category-products .product {
    min-width: 0 !important;
    width: 100% !important;
    overflow: hidden;
  }
  .category-products .product strong {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .product-category {
    min-width: 0;
    overflow: hidden;
  }
  .pos-selectors .fixed-register {
    gap: 4px;
  }
  .category-filter {
    max-width: 100%;
  }
  .history,
  .stats-page,
  .closures-page,
  .settings-page,
  .tables-page,
  .users-page,
  .admin-grid,
  .deposit-return-page {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  .admin-subnav [data-admin-area='closures'] {
    display: block !important;
  }
}
.register-navigation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid #cbd9d4;
  border-radius: 10px;
  background: #f4f8f6;
}
.register-navigation legend {
  padding: 0 5px;
  font-weight: 800;
}
.register-navigation label {
  display: flex;
  align-items: center;
  gap: 5px;
}
.register-navigation button {
  margin-left: auto;
  background: #183c35 !important;
  color: #fff !important;
}
@media (max-width: 720px) {
  .register-navigation {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .register-navigation button {
    grid-column: 1/-1;
    margin: 0;
    min-height: 42px;
  }
}
.edit-register-navigation {
  color: #184f41 !important;
  border-color: #93b9ad !important;
  background: #eef7f4 !important;
}
.register-navigation-dialog {
  display: grid;
  gap: 9px;
}
.register-navigation-dialog label {
  display: grid !important;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 11px !important;
  padding: 13px;
  border: 1px solid #cfddd8;
  border-radius: 11px;
  background: #f4f8f6;
  cursor: pointer;
}
.register-navigation-dialog input {
  width: 21px !important;
  height: 21px;
}
.register-navigation-dialog span {
  display: grid;
  gap: 3px;
}
.register-navigation-dialog small {
  color: #687a73;
  font-weight: 400;
}
.receipt-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.receipt-list-head h2 {
  margin: 0;
}
.receipt-list-head label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
}
.receipt-list-head select {
  padding: 9px 30px 9px 10px;
  border: 1px solid #b8c9c2;
  border-radius: 9px;
  background: #fff;
}
.own-receipts-note {
  padding: 8px 11px;
  border-radius: 9px;
  background: #eef6f3;
  color: #315d51;
  font-weight: 750;
}
@media (max-width: 720px) {
  .receipt-list-head {
    align-items: stretch;
    flex-direction: column;
  }
  .receipt-list-head label {
    justify-content: space-between;
  }
  .receipt-list-head select {
    flex: 1;
  }
}
.pos {
  gap: 12px !important;
  padding: 14px !important;
}
.pos .panel {
  padding: 16px;
  border-radius: 13px;
}
.pos-head {
  margin-bottom: 11px;
}
.pos-head strong {
  font-size: 14px;
}
.pos-head button {
  padding: 7px 10px;
  font-size: 13px;
}
.category-filter {
  margin-bottom: 10px !important;
  padding: 6px 8px !important;
  font-size: 12px !important;
}
.category-filter button,
.category-filter label {
  padding: 4px 6px !important;
}
.product-category {
  margin-bottom: 10px !important;
}
.product-category h2 {
  font-size: 15px !important;
  margin-bottom: 5px !important;
  padding-bottom: 4px !important;
}
.product-category h2 span {
  width: 12px !important;
  height: 12px !important;
}
.category-products {
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)) !important;
  gap: 6px !important;
}
.category-products .product {
  min-height: 68px !important;
  padding: 8px !important;
  border-radius: 9px !important;
}
.category-products .product strong {
  font-size: 14px !important;
}
.category-products .product span {
  font-size: 12px !important;
}
.cart h2 {
  font-size: 18px;
  margin-bottom: 7px;
}
.cart-row {
  gap: 8px;
  padding: 8px 0;
}
.cart-row strong {
  font-size: 14px;
}
.cart-row small {
  font-size: 11px;
  margin-top: 2px;
}
.qty {
  gap: 5px;
}
.qty button {
  padding: 3px 7px;
}
.deposit-control {
  margin-top: 4px !important;
}
.customer-receipt-choice {
  padding: 7px 9px;
  margin-bottom: 7px;
  font-size: 13px;
}
.pay button {
  padding: 8px 10px;
}
.cart #message {
  font-size: 12px;
  margin: 6px 0;
}
.user-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  flex-wrap: wrap;
}
.user-actions .activate {
  color: #176b4f;
  border-color: #8fc4b2;
}
.user-actions .danger {
  color: #9b2828;
  border-color: #e1aaaa;
}
.cart {
  top: 204px !important;
  height: calc(100vh - 226px) !important;
}
@media (max-width: 850px) {
  .cart {
    top: auto !important;
    height: auto !important;
  }
}
.category-products {
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 8px;
}
.category-products .product {
  min-height: 82px;
  padding: 10px;
  border-radius: 10px;
}
.category-products .product strong {
  font-size: 15px;
  line-height: 1.15;
}
.category-products .product span {
  font-size: 13px;
}
.product-category {
  margin-bottom: 14px;
}
.product-category h2 {
  margin-bottom: 7px;
}
.pos {
  align-items: start;
}
.cart {
  position: sticky;
  top: 154px;
  height: calc(100vh - 176px);
  min-height: 430px;
  overflow: hidden;
}
.cart > #cart {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding-right: 3px;
}
.cart > footer {
  flex: none;
  margin-top: 0;
  padding-top: 8px;
  background: #fff;
  border-top: 1px solid #dfe7e4;
}
.cart .total {
  padding: 10px 0;
}
.table-entry {
  gap: 7px !important;
}
.table-input-row {
  display: flex;
  align-items: center;
}
.table-input-row input {
  min-width: 130px !important;
  border-radius: 9px 0 0 9px !important;
}
.table-input-row button {
  height: 42px;
  padding: 0 12px;
  border: 1px solid #adc2ba;
  border-left: 0;
  border-radius: 0 9px 9px 0;
  background: #fff;
  font-size: 19px;
  cursor: pointer;
}
.table-pad-display {
  width: 100%;
  padding: 12px;
  border: 1px solid #adc2ba;
  border-radius: 10px;
  text-align: center;
  font-size: 24px;
}
.table-number-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin: 14px 0;
}
.table-number-pad button {
  min-height: 54px;
  border: 1px solid #b9cbc5;
  border-radius: 10px;
  background: #f4f8f6;
  font-size: 22px;
  font-weight: 800;
  cursor: pointer;
}
.table-number-pad .clear {
  grid-column: span 2;
  font-size: 16px;
}
.users-page {
  display: grid;
  grid-template-columns: minmax(300px, 0.8fr) minmax(420px, 1.2fr);
  gap: 18px;
  padding: 24px;
}
.user-create form {
  display: grid;
  gap: 12px;
}
.user-create label {
  display: grid;
  gap: 6px;
  font-weight: 700;
}
.user-create input,
.user-create select {
  width: 100%;
  padding: 11px;
  border: 1px solid #b7c8c1;
  border-radius: 9px;
  background: #fff;
  font: inherit;
}
.user-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 13px 0;
  border-bottom: 1px solid #dfe7e4;
}
.user-row small {
  display: block;
  margin-top: 4px;
  color: #687a73;
}
.user-row button {
  padding: 8px 11px;
  border: 1px solid #bdcbc6;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}
.current-user {
  color: #527068;
  font-size: 14px;
}
@media (max-width: 850px) {
  .cart {
    position: static;
    height: auto;
    min-height: 400px;
    overflow: visible;
  }
  .cart > #cart {
    overflow: visible;
  }
  .users-page {
    grid-template-columns: 1fr;
    padding: 12px;
  }
  .category-products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  .category-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* v10.1: letzte Schutzschicht gegen horizontales Scrollen auf Mobilgeräten */
@media (max-width: 900px) {
  html,
  body,
  #app,
  .shell {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }
  .shell > *,
  .pos > *,
  .panel,
  .admin-panel,
  .product-category,
  .category-products,
  .cart,
  .settings-page > *,
  .users-page > * {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }
  .shell > header,
  .shell > nav,
  .pos-selectors,
  .admin-subnav,
  .pos,
  .history,
  .admin-grid,
  .settings-page,
  .users-page,
  .stats-page,
  .stats-grid,
  .closures-page,
  .deposit-return-page,
  .deposit-options,
  .tables-page {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }
  .pos {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .products,
  .category-products {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .product {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  .product strong,
  .product span,
  .product small,
  .manage-row > *,
  .user-row > *,
  .register-card > *,
  .category-card > * {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .pos-selectors {
    flex-wrap: wrap !important;
    overflow-x: hidden !important;
    white-space: normal !important;
  }
  .pos-selectors > * {
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 150px !important;
  }
  .pos-selectors select,
  .pos-selectors input,
  .table-input-row input,
  .deposit-return-head select {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .category-filter,
  .admin-subnav {
    display: flex !important;
    flex-wrap: wrap !important;
    overflow-x: hidden !important;
    white-space: normal !important;
  }
  .category-filter > *,
  .admin-subnav button {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
  }
  .admin-grid,
  .settings-page,
  .users-page,
  .stats-grid,
  .closure-controls,
  .deposit-options {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .table-scroll {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .table-scroll table,
  .history table,
  .admin-panel table,
  .stats-page table,
  .closure-archive table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed;
  }
  th,
  td {
    max-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  dialog,
  .closure-view-dialog {
    width: calc(100dvw - 16px) !important;
    max-width: calc(100dvw - 16px) !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }
  dialog .editor,
  .closure-view-dialog .editor,
  .closure-view-dialog .closure-receipt {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }
  .form-grid,
  .toggle-grid,
  .manage-row,
  .category-card,
  .register-navigation {
    max-width: 100% !important;
    min-width: 0 !important;
  }
  input:not([type='checkbox']):not([type='radio']):not([type='color']),
  select,
  textarea {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }
  .screen-keyboard {
    max-width: calc(100dvw - 10px) !important;
    box-sizing: border-box;
  }
  pre,
  code {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}
@media (max-width: 420px) {
  .shell > nav {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .account span {
    max-width: 82px !important;
  }
  .row-actions,
  .register-card .row-actions,
  .category-card .row-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* v10.3: Verwaltung auf kleinen Bildschirmen über die volle Breite */
@media (max-width: 720px) {
  .admin-subnav.admin-subnav-v10 {
    position: relative !important;
    top: auto !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 5px !important;
    padding: 6px 7px !important;
    overflow: visible !important;
  }
  .admin-subnav.admin-subnav-v10 button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    padding: 6px 3px !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  .admin-subnav.admin-subnav-v10 [data-v10-admin='closures'] {
    display: block !important;
  }
  .admin-grid {
    display: block !important;
    width: 100% !important;
    padding: 8px !important;
    margin: 0 !important;
  }
  .admin-grid > section,
  .admin-grid > .panel,
  .mobile-products-admin,
  .mobile-categories-admin,
  .mobile-operators-admin,
  .mobile-registers-admin {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box;
  }
  .admin-grid .pos-head {
    display: flex !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }
  .admin-grid .pos-head h2 {
    min-width: 0;
    margin: 0;
    font-size: 18px;
  }
  .admin-grid .pos-head button {
    flex: 0 0 auto;
    max-width: 55% !important;
    white-space: normal;
  }
  .mobile-products-admin table,
  .mobile-products-admin thead,
  .mobile-products-admin tbody,
  .mobile-products-admin tr,
  .mobile-products-admin td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }
  .mobile-products-admin thead {
    display: none !important;
  }
  .mobile-products-admin tr {
    margin: 10px 0;
    padding: 10px;
    border: 1px solid #d4e0dc;
    border-radius: 11px;
    background: #fff;
  }
  .mobile-products-admin td {
    display: grid !important;
    grid-template-columns: 86px minmax(0, 1fr) !important;
    gap: 8px;
    padding: 5px 0 !important;
    border: 0 !important;
    max-width: none !important;
    overflow-wrap: anywhere;
  }
  .mobile-products-admin td::before {
    font-size: 11px;
    font-weight: 800;
    color: #687a73;
  }
  .mobile-products-admin td:nth-child(1)::before {
    content: 'Artikel';
  }
  .mobile-products-admin td:nth-child(2)::before {
    content: 'Kategorie';
  }
  .mobile-products-admin td:nth-child(3)::before {
    content: 'Preis';
  }
  .mobile-products-admin td:nth-child(4)::before {
    content: 'Steuer';
  }
  .mobile-products-admin td:nth-child(5)::before {
    content: 'Pfand';
  }
  .mobile-products-admin td:nth-child(6)::before {
    content: 'Status';
  }
  .mobile-products-admin td:nth-child(7)::before {
    content: 'Aktionen';
  }
  .mobile-products-admin td:last-child button {
    width: 100%;
    margin: 3px 0;
    min-height: 40px;
  }
  .mobile-categories-admin .category-list,
  .mobile-categories-admin .category-card,
  .mobile-operators-admin .manage-row,
  .mobile-registers-admin .register-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }
}
@media (max-width: 380px) {
  .admin-subnav.admin-subnav-v10 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* v10.4: klappbares Verwaltungsmenü auf Mobilgeräten */
.admin-subnav-toggle {
  display: none;
}
.admin-subnav-items {
  display: flex;
  gap: 8px;
  min-width: 0;
}
@media (max-width: 720px) {
  .admin-subnav.admin-subnav-v10 {
    display: block !important;
    padding: 6px 8px !important;
    background: #e4eeea !important;
  }
  .admin-subnav-toggle {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    align-items: center;
    gap: 8px;
    width: 100% !important;
    min-height: 44px !important;
    padding: 8px 11px !important;
    text-align: left !important;
    background: #fff !important;
    color: #183c35 !important;
    border: 1px solid #aebfb9 !important;
    border-radius: 10px !important;
  }
  .admin-subnav-toggle span {
    font-weight: 800;
  }
  .admin-subnav-toggle strong {
    font-size: 12px;
    color: #61736c;
    overflow-wrap: anywhere;
  }
  .admin-subnav-toggle i {
    font-style: normal;
    font-size: 18px;
  }
  .admin-subnav-items {
    display: none !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
    width: 100% !important;
    padding-top: 6px;
  }
  .admin-subnav.menu-open .admin-subnav-items {
    display: grid !important;
  }
  .admin-subnav-items button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    padding: 7px 4px !important;
    font-size: 12px !important;
    white-space: normal !important;
  }
  .admin-subnav-items [data-v10-admin='closures'] {
    display: block !important;
  }
}

/* v10.6: Bons und Statistik als mobile Karten statt gequetschter Tabellen */
@media (max-width: 720px) {
  .history {
    display: block !important;
    width: calc(100% - 16px) !important;
    margin: 8px !important;
    padding: 12px !important;
    overflow: visible !important;
  }
  .history > .table-scroll,
  .stats-grid .table-scroll,
  .stats-grid > .panel {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }
  .history table,
  .history thead,
  .history tbody,
  .history tr,
  .history td,
  .stats-grid table,
  .stats-grid thead,
  .stats-grid tbody,
  .stats-grid tr,
  .stats-grid td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }
  .history thead,
  .stats-grid thead {
    display: none !important;
  }
  .history tbody tr,
  .stats-grid tbody tr {
    margin: 9px 0;
    padding: 9px 10px;
    border: 1px solid #d4e0dc;
    border-radius: 10px;
    background: #fff;
  }
  .history tbody td,
  .stats-grid tbody td {
    display: grid !important;
    grid-template-columns: 92px minmax(0, 1fr) !important;
    gap: 8px;
    padding: 4px 0 !important;
    border: 0 !important;
    max-width: none !important;
    text-align: left !important;
    overflow-wrap: anywhere;
  }
  .history tbody td::before,
  .stats-grid tbody td::before {
    font-size: 11px;
    font-weight: 800;
    color: #687a73;
  }
  .receipt-list-head + .table-scroll td:nth-child(1)::before {
    content: 'Bonnummer';
  }
  .receipt-list-head + .table-scroll td:nth-child(2)::before {
    content: 'Zeit';
  }
  .receipt-list-head + .table-scroll td:nth-child(3)::before {
    content: 'Benutzer';
  }
  .receipt-list-head + .table-scroll td:nth-child(4)::before {
    content: 'Bedienung';
  }
  .receipt-list-head + .table-scroll td:nth-child(5)::before {
    content: 'Kasse';
  }
  .receipt-list-head + .table-scroll td:nth-child(6)::before {
    content: 'Zahlung';
  }
  .receipt-list-head + .table-scroll td:nth-child(7)::before {
    content: 'Status';
  }
  .receipt-list-head + .table-scroll td:nth-child(8)::before {
    content: 'Summe';
  }
  .receipt-list-head + .table-scroll td:nth-child(9)::before {
    content: 'Aktion';
  }
  .receipt-account-data + .table-scroll td:nth-child(1)::before {
    content: 'Artikel';
  }
  .receipt-account-data + .table-scroll td:nth-child(2)::before {
    content: 'Menge';
  }
  .receipt-account-data + .table-scroll td:nth-child(3)::before {
    content: 'Einzelpreis';
  }
  .receipt-account-data + .table-scroll td:nth-child(4)::before {
    content: 'Steuer';
  }
  .receipt-account-data + .table-scroll td:nth-child(5)::before {
    content: 'Summe';
  }
  .history tbody td button {
    width: 100% !important;
    min-height: 40px;
  }
  .receipt-account-data {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 5px !important;
    padding: 5px 0 10px !important;
  }
  .refund-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    margin-top: 12px !important;
  }
  .refund-actions button {
    width: 100%;
    min-height: 42px;
  }
  .stats-page {
    display: block !important;
    width: 100% !important;
    padding: 8px !important;
    overflow: visible !important;
  }
  .stats-controls {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .stats-controls h2 {
    margin: 0 !important;
  }
  .stats-controls label,
  .stats-controls select {
    width: 100% !important;
    min-width: 0 !important;
  }
  .stats-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin: 8px 0 !important;
  }
  .stats-summary article {
    padding: 10px !important;
    min-width: 0;
  }
  .stats-summary strong {
    font-size: 18px !important;
    overflow-wrap: anywhere;
  }
  .stats-grid {
    display: block !important;
    width: 100% !important;
  }
  .stats-grid > .panel {
    margin-bottom: 8px !important;
    padding: 11px !important;
  }
  .stats-grid tbody td:nth-child(1)::before {
    content: 'Artikel';
  }
  .stats-grid tbody td:nth-child(2)::before {
    content: 'Verkauft';
  }
  .stats-grid tbody td:nth-child(3)::before {
    content: 'Einzelpreis';
  }
  .stats-grid tbody td:nth-child(4)::before {
    content: 'Summe';
  }
  .chart > div {
    grid-template-columns: minmax(72px, 1fr) minmax(0, 2fr) auto !important;
    gap: 5px !important;
    font-size: 11px;
  }
  .chart > div > * {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

/* v10.8: ruhiger Seitenwechsel ohne weißen Lichtblitz */
body {
  background: #e8f0ed;
}
#app.route-loading {
  visibility: visible !important;
  position: relative;
  background: #e8f0ed;
}
#app.route-loading > * {
  visibility: hidden !important;
}
#app.route-loading::before {
  content: '';
  position: fixed;
  z-index: 2000;
  left: 50%;
  top: 50%;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border: 3px solid #b7cbc4;
  border-top-color: #245c4d;
  border-radius: 50%;
  animation: mvm-loading-spin 0.7s linear infinite;
}
#app:not(.route-loading) > .shell {
  animation: mvm-view-in 0.16s ease-out;
}
@keyframes mvm-loading-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes mvm-view-in {
  from {
    opacity: 0.35;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  #app.route-loading::before,
  #app:not(.route-loading) > .shell {
    animation: none;
  }
}

/* v10.9: übersichtliche Einstellungen und realistische Bonvorschau */
.settings-tabs {
  position: sticky;
  top: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  padding: 8px;
  margin: -8px -8px 4px;
  background: #fff;
  border-bottom: 1px solid #dce5e1;
}
.settings-tabs button {
  min-height: 42px;
  padding: 7px 9px;
  border: 1px solid #b9cbc5;
  border-radius: 9px;
  background: #eef5f2;
  color: #284d43;
  font-weight: 800;
  cursor: pointer;
}
.settings-tabs button.active {
  background: #183c35;
  color: #fff;
  border-color: #183c35;
}
.settings-form .settings-card {
  gap: 14px;
  padding: 16px;
  border: 1px solid #d8e3df;
  border-radius: 12px;
  background: #fbfdfc;
}
.settings-form .settings-card[hidden] {
  display: none !important;
}
.settings-card h2 {
  padding-bottom: 8px;
  border-bottom: 1px solid #dce5e1;
  font-size: 19px;
}
.settings-preview {
  display: grid;
  gap: 12px;
}
.settings-preview-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
}
.settings-preview-head span {
  color: #64766f;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.settings-preview-head h2 {
  margin: 2px 0 0;
}
.settings-preview-head small {
  padding: 5px 8px;
  border-radius: 8px;
  background: #e8f1ee;
  color: #315d51;
  font-weight: 800;
}
.receipt-preview.realistic-receipt {
  width: 100%;
  max-width: 330px;
  padding: 13px 14px;
  text-align: left;
  border: 1px solid #aab9b4;
  border-radius: 3px;
  box-shadow: 0 8px 24px #183c3517;
  background: #fff;
  color: #111;
  font:
    12px/1.28 ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
}
.receipt-preview.realistic-receipt[data-paper-width='58'] {
  max-width: 245px;
}
.realistic-receipt header {
  text-align: center;
}
.realistic-receipt header strong {
  display: block;
  font-size: 14px;
}
.realistic-receipt header p,
.realistic-receipt header h3 {
  margin: 3px 0;
}
.realistic-receipt .preview-rule {
  margin: 10px 0;
  border-top: 1px dashed #555;
}
.realistic-receipt h1 {
  text-align: center;
  font-size: 20px;
  margin: 7px 0;
}
.realistic-receipt .preview-meta {
  text-align: center;
  margin: 0 0 9px;
}
.realistic-receipt .preview-info,
.realistic-receipt .preview-items p,
.realistic-receipt .preview-total {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 4px 0;
}
.realistic-receipt .preview-items {
  margin: 10px 0;
  padding: 7px 0;
  border-top: 1px dashed #555;
  border-bottom: 1px dashed #555;
}
.realistic-receipt .preview-total {
  font-size: 15px;
  font-weight: 900;
}
.realistic-receipt footer {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px dashed #555;
  text-align: center;
}
.preview-note {
  text-align: center;
  margin: 0;
}
@media (max-width: 900px) {
  .settings-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    position: static;
  }
  .settings-form .settings-card {
    padding: 12px;
  }
  .settings-preview {
    margin-top: 8px;
  }
  .receipt-preview.realistic-receipt {
    max-width: min(330px, 100%);
  }
}

/* v10.10: Einstellungsregister überlagern keine Felder mehr */
.admin-subnav.admin-subnav-v10 {
  position: relative !important;
  top: auto !important;
  z-index: 30 !important;
  flex: none !important;
  overflow: hidden !important;
  background: #e4eeea !important;
  box-shadow: 0 2px 7px #173b3312;
}
.admin-subnav.admin-subnav-v10 .admin-subnav-items {
  flex-wrap: wrap;
}
.print-mode-settings {
  margin: 0 0 18px;
  padding: 16px;
  border: 1px solid #bfd1ca;
  border-radius: 12px;
  background: #f3f8f6;
}
.print-mode-settings h3 {
  margin: 0 0 12px;
}
.print-mode-settings .form-grid {
  margin: 0;
}
.print-mode-help {
  margin: 12px 0 0 !important;
}
.print-mode-settings select {
  width: 100%;
}
.deposit-schnapps {
  border: 1px solid #8a6720 !important;
  background: #fff4d8 !important;
  color: #5d420d !important;
  font-weight: 800 !important;
}
.app-confirm {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 14px;
  border: 1px solid #c8d9d3;
  border-radius: 14px;
  background: #f2f8f6;
}
.app-confirm-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #dceee8;
  color: #174b3d;
  font-size: 20px;
  font-weight: 900;
}
.app-confirm-message {
  margin: 0;
  color: #14251f;
  font-size: 20px;
  font-weight: 850;
  line-height: 1.3;
}
.app-confirm-details {
  margin: 8px 0 0;
  color: #61746d;
  line-height: 1.45;
}
.app-confirm.danger {
  border-color: #e7c7c3;
  background: #fff5f3;
}
.app-confirm.danger .app-confirm-icon {
  background: #f6d9d5;
  color: #8a2419;
}
.editor-actions .danger {
  background: #9d2d22 !important;
  color: #fff !important;
  border-color: #9d2d22 !important;
}
@media (max-width: 600px) {
  .app-confirm {
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 11px;
    padding: 11px;
  }
  .app-confirm-icon {
    width: 50px;
    height: 50px;
    font-size: 17px;
  }
  .app-confirm-message {
    font-size: 17px;
  }
}
@media (max-width: 760px) {
  .print-mode-settings {
    padding: 12px;
  }
  .print-mode-settings .form-grid {
    grid-template-columns: 1fr !important;
  }
}
.settings-form {
  align-content: start;
  padding: 18px !important;
  scroll-padding-top: 16px;
}
.settings-tabs {
  position: static !important;
  top: auto !important;
  order: -1;
  margin: 0 0 6px !important;
  padding: 0 0 12px !important;
  background: #fff;
}
.settings-form .settings-card {
  width: 100%;
  margin: 0;
  overflow: visible;
}
.settings-form .settings-card + .settings-card {
  margin-top: 2px;
}
.settings-actions {
  position: sticky;
  bottom: -18px;
  z-index: 5;
  margin-top: 4px;
  padding: 12px 0 2px;
  background: linear-gradient(to bottom, #fff0, #fff 22%);
}
.settings-preview {
  top: 166px !important;
}
@media (max-width: 900px) {
  .settings-form {
    padding: 12px !important;
  }
  .settings-actions {
    position: static;
    padding-top: 10px;
    background: none;
  }
  .settings-preview {
    top: auto !important;
  }
}
.preview-type-select {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: 9px;
  background: #eef5f2;
  font-weight: 800;
}
.preview-type-select span {
  font-size: 12px;
  color: #5d716a;
}
.preview-type-select select {
  width: 100%;
  min-width: 0;
  padding: 8px;
  border: 1px solid #b8c9c2;
  border-radius: 8px;
  background: #fff;
  font: inherit;
}
.preview-pickup-name {
  margin: 15px 0;
  text-align: center;
  font-size: 21px;
  font-weight: 900;
  overflow-wrap: anywhere;
}
.preview-section-title {
  margin-top: 9px;
  padding: 5px 0;
  border-top: 2px solid #222;
  border-bottom: 1px solid #555;
  font-weight: 900;
  font-size: 11px;
}
.receipt-type-designer {
  border-color: #a9c1b9 !important;
  background: #f5faf8 !important;
}
.designer-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 14px;
}
.designer-heading h2,
.designer-heading p {
  margin: 0;
}
.designer-heading label {
  display: grid;
  gap: 5px;
  font-weight: 800;
}
.designer-heading select {
  min-width: 180px;
  padding: 9px;
  border: 1px solid #b8c9c2;
  border-radius: 8px;
  background: #fff;
}
.receipt-preview[data-design-size='small'] {
  font-size: 10px !important;
}
.receipt-preview[data-design-size='normal'] {
  font-size: 12px !important;
}
.receipt-preview[data-design-size='large'] {
  font-size: 14px !important;
}
.receipt-preview[data-design-align='center'] {
  text-align: center !important;
}
.receipt-preview[data-design-align='center'] .preview-info,
.receipt-preview[data-design-align='center'] .preview-items p,
.receipt-preview[data-design-align='center'] .preview-total {
  text-align: left;
}
.receipt-preview[data-design-spacing='compact'] {
  line-height: 1.05 !important;
}
.receipt-preview[data-design-spacing='compact'] p {
  margin-top: 2px !important;
  margin-bottom: 2px !important;
}
@media (max-width: 650px) {
  .designer-heading {
    align-items: stretch;
    flex-direction: column;
  }
  .designer-heading select {
    width: 100%;
    min-width: 0;
  }
}
.receipt-save-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid #d5e2de;
}
.receipt-save-actions .primary {
  width: auto;
}
@media (max-width: 650px) {
  .receipt-save-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .receipt-save-actions .primary {
    width: 100%;
  }
}
.customer-design-extra {
  display: grid;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid #d5e2de;
}
.customer-design-extra[hidden] {
  display: none;
}
.customer-design-extra h3 {
  margin: 0;
  font-size: 17px;
}
.customer-design-extra > .toggle {
  display: flex !important;
}
.customer-design-extra > .toggle-grid {
  display: grid;
}
.preview-pickup-details {
  margin: 9px 0;
  padding: 7px 0;
  border-top: 1px dashed #777;
  border-bottom: 1px dashed #777;
}
.receipt-search {
  display: grid;
  gap: 5px;
  min-width: min(390px, 100%);
  font-weight: 800;
}
.receipt-search input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #b7c8c1;
  border-radius: 9px;
  background: #fff;
  font: inherit;
}
.receipt-search-empty td {
  text-align: center;
  padding: 24px;
  color: #6c7d77;
}
@media (max-width: 700px) {
  .receipt-list-head {
    align-items: stretch !important;
    flex-direction: column;
  }
  .receipt-search {
    min-width: 0;
    width: 100%;
  }
}
.receipt-history-count {
  display: inline-block;
  margin-left: 10px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #e8f2ef;
  color: #356055;
  font-size: 12px;
  vertical-align: middle;
}
@media (max-width: 600px) {
  .receipt-history-count {
    display: block;
    width: max-content;
    margin: 7px 0 0;
  }
}
.button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 11px;
  border: 1px solid #b7c8c1;
  border-radius: 8px;
  background: #fff;
  color: #173f35;
  text-decoration: none;
  font: inherit;
  font-weight: 700;
}
.closure-pdf-button {
  margin-left: 5px;
}
.test-mode-settings {
  border-color: #e5b65b !important;
  background: #fffaf0 !important;
}
.test-warning {
  padding: 11px;
  border-radius: 9px;
  background: #fff0ca;
  color: #694900;
}
.test-mode-badge {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-left: auto;
  padding: 7px 11px;
  border: 1px solid #efb449;
  border-radius: 9px;
  background: #fff1c9;
  color: #5c4000;
}
.test-mode-badge span {
  font-size: 12px;
}
@media (max-width: 700px) {
  .test-mode-badge {
    order: 3;
    width: 100%;
    margin: 7px 0 0;
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }
  .closure-pdf-button {
    margin: 5px 0 0;
  }
}
/* Die vorhandene Ansicht bleibt sichtbar, während die nächste Serverantwort kommt. */
#app.route-loading > * {
  visibility: visible !important;
}
#app.route-loading::before {
  display: none !important;
}
#app.route-loading {
  background: #e8f0ed !important;
}
.split-quantity {
  display: grid;
  grid-template-columns: 32px minmax(22px, auto) 32px;
  align-items: center;
  justify-content: start;
  gap: 5px;
}
.split-quantity button {
  min-height: 32px;
  padding: 3px 8px;
}
.split-quantity small {
  grid-column: 1/-1;
  color: #71817b;
  text-align: center;
}
.split-unselected {
  opacity: 0.5;
}
.split-payment-summary {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 10px 0;
  padding: 10px;
  border-radius: 10px;
  background: #edf6f3;
}
.split-payment-summary strong {
  margin-right: auto;
  font-size: 18px;
}
.split-payment-summary button {
  padding: 7px 10px;
}
@media (max-width: 650px) {
  .split-payment-summary {
    align-items: stretch;
    flex-wrap: wrap;
  }
  .split-payment-summary span {
    width: 100%;
  }
  .split-payment-summary strong {
    flex: 1;
  }
  .split-quantity {
    grid-template-columns: 30px 20px 30px;
  }
}

/* v10.42: schnelle mobile Bedienungskasse */
.mobile-category-chooser,
.mobile-cart-dock,
.mobile-cart-overlay,
.mobile-cart-head {
  display: none;
}
@media (max-width: 720px) {
  body.mobile-service-mode,
  body.mobile-service-mode #app {
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
    background: #e8f0ed;
  }
  body.mobile-service-mode .shell {
    display: flex !important;
    flex-direction: column !important;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  body.mobile-service-mode .shell > header {
    flex: none !important;
    min-height: 48px !important;
    padding: 7px 10px !important;
    gap: 8px !important;
  }
  body.mobile-service-mode .shell > header .eyebrow {
    display: none !important;
  }
  body.mobile-service-mode .shell > header h1 {
    font-size: 20px !important;
    line-height: 1.05 !important;
    white-space: nowrap;
  }
  body.mobile-service-mode .shell > header h1 small {
    font-size: 11px !important;
  }
  body.mobile-service-mode .shell > header .account {
    gap: 6px !important;
    min-width: 0;
  }
  body.mobile-service-mode .shell > header .account span {
    max-width: 112px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px !important;
  }
  body.mobile-service-mode .shell > header .account button {
    min-height: 34px !important;
    padding: 6px 9px !important;
    font-size: 12px !important;
  }
  body.mobile-service-mode .shell > nav {
    display: flex !important;
    flex: none !important;
    gap: 4px !important;
    min-height: 48px !important;
    padding: 5px 7px !important;
    overflow: hidden !important;
  }
  body.mobile-service-mode .shell > nav::-webkit-scrollbar {
    display: none;
  }
  body.mobile-service-mode .shell > nav button {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: 38px !important;
    padding: 6px 3px !important;
    font-size: 11px !important;
    letter-spacing: -0.02em;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis;
  }
  body.mobile-service-mode .pos-selectors {
    position: static !important;
    display: flex !important;
    flex: none !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: 44px !important;
    padding: 5px 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
  }
  body.mobile-service-mode .pos-selectors::-webkit-scrollbar {
    display: none;
  }
  body.mobile-service-mode .pos-selectors > * {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  body.mobile-service-mode .pos-selectors label {
    font-size: 12px !important;
    white-space: nowrap !important;
  }
  body.mobile-service-mode .pos-selectors select,
  body.mobile-service-mode .pos-selectors input,
  body.mobile-service-mode .pos-selectors button {
    min-height: 34px !important;
    padding: 5px 8px !important;
    font-size: 12px !important;
  }
  body.mobile-service-mode .pos {
    display: block !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 5px 5px calc(73px + env(safe-area-inset-bottom)) !important;
    overflow: hidden !important;
  }
  body.mobile-service-mode .pos > article.panel {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 8px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  body.mobile-service-mode .pos-head {
    position: static !important;
    min-height: 38px !important;
    margin: -8px -8px 0 !important;
    padding: 8px !important;
    background: #fff !important;
  }
  body.mobile-service-mode .pos-head > div:first-child {
    font-size: 13px !important;
  }
  body.mobile-service-mode .category-filter {
    display: none !important;
  }
  body.mobile-service-mode .mobile-category-chooser {
    position: sticky;
    top: -8px;
    z-index: 20;
    display: block;
    margin: 0 -8px 8px;
    padding: 7px 8px;
    background: #fff;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #d7e3df;
    box-shadow: 0 5px 7px #183c3517;
    isolation: isolate;
  }
  body.mobile-service-mode .mobile-category-tabs {
    display: flex;
    gap: 5px;
    padding: 1px 0 5px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  body.mobile-service-mode .mobile-category-tabs::-webkit-scrollbar {
    display: none;
  }
  body.mobile-service-mode .mobile-category-tabs button {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    min-height: 37px;
    padding: 7px 10px;
    border: 1px solid #bed0ca;
    border-radius: 18px;
    background: #fff;
    color: #24473e;
    font-size: 13px;
    font-weight: 750;
    white-space: nowrap;
    scroll-snap-align: start;
  }
  body.mobile-service-mode .mobile-category-tabs button.active {
    border-color: #17483c;
    background: #17483c;
    color: #fff;
  }
  body.mobile-service-mode .mobile-category-tabs i {
    width: 10px;
    height: 10px;
    border: 1px solid #a9bbb5;
    border-radius: 3px;
  }
  body.mobile-service-mode .product-category {
    margin: 0 0 10px !important;
  }
  body.mobile-service-mode .product-category > h2 {
    position: static !important;
    margin: 3px 0 5px !important;
    padding: 4px 2px !important;
    font-size: 15px !important;
  }
  body.mobile-service-mode .products {
    display: block !important;
    padding: 0 !important;
  }
  body.mobile-service-mode .category-products {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 0 !important;
  }
  body.mobile-service-mode .product {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 104px !important;
    padding: 10px !important;
    border-radius: 12px !important;
    text-align: left !important;
    touch-action: manipulation;
    transition:
      transform 0.08s ease,
      filter 0.08s ease;
  }
  body.mobile-service-mode .product:active {
    transform: scale(0.97);
    filter: brightness(0.94);
  }
  body.mobile-service-mode .product small {
    font-size: 10px !important;
    line-height: 1.1 !important;
  }
  body.mobile-service-mode .product strong {
    font-size: 16px !important;
    line-height: 1.12 !important;
    overflow-wrap: anywhere;
  }
  body.mobile-service-mode .product > span {
    font-size: 15px !important;
  }
  body.mobile-service-mode .product .mobile-tile-deposit {
    display: block;
    margin-top: 3px;
    color: #526b63;
    font-size: 10px !important;
    font-weight: 750;
    line-height: 1.1;
  }
  body.mobile-service-mode .mobile-product-quantity {
    position: absolute;
    top: 5px;
    right: 5px;
    display: grid;
    place-items: center;
    min-width: 25px;
    height: 25px;
    padding: 0 6px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #173f35;
    color: #fff;
    font-size: 13px;
    box-shadow: 0 2px 5px #0002;
  }
  body.mobile-service-mode .mobile-service-context {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 14px;
    margin: 12px 0 2px;
    padding: 10px 8px;
    border-top: 1px solid #d5e1dd;
    color: #687a73;
    font-size: 11px;
  }
  body.mobile-service-mode .pos-selectors .mobile-table-compact {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    min-height: 34px !important;
  }
  body.mobile-service-mode .pos-selectors .mobile-table-compact > span:first-child {
    display: none;
  }
  body.mobile-service-mode .pos-selectors .mobile-table-compact .table-input-row input {
    width: 82px !important;
    min-width: 82px !important;
    height: 34px !important;
    padding: 5px 7px !important;
  }
  body.mobile-service-mode .pos-selectors .mobile-table-compact .table-input-row button {
    display: none !important;
  }
  body.mobile-service-mode .pos-selectors #table-overview {
    order: -1;
  }
  body.mobile-service-mode .mobile-cart-overlay {
    position: fixed;
    z-index: 81;
    inset: 0;
    display: block;
    border: 0;
    border-radius: 0;
    background: #0d201b88;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
  }
  body.mobile-service-mode .pos > .cart {
    position: fixed !important;
    z-index: 82 !important;
    left: 5px !important;
    right: 5px !important;
    bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    width: auto !important;
    height: min(78dvh, 680px) !important;
    max-height: calc(100dvh - 55px) !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 12px !important;
    overflow: hidden !important;
    border-radius: 18px 18px 0 0 !important;
    box-shadow: 0 -10px 35px #102b2440 !important;
    transform: translateY(calc(100% + 12px));
    transition: transform 0.2s ease;
  }
  body.mobile-service-mode.mobile-cart-open .pos > .cart {
    transform: translateY(0);
  }
  body.mobile-service-mode.mobile-cart-open .mobile-cart-overlay {
    opacity: 1;
    pointer-events: auto;
  }
  body.mobile-service-mode .mobile-cart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex: none;
    padding: 0 0 8px;
    border-bottom: 1px solid #d9e3e0;
  }
  body.mobile-service-mode .mobile-cart-head h2 {
    margin: 0 !important;
    font-size: 20px !important;
  }
  body.mobile-service-mode .mobile-cart-head button {
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 50%;
    font-size: 25px;
    line-height: 1;
  }
  body.mobile-service-mode .mobile-test-notice {
    display: grid;
    gap: 2px;
    margin: 7px 0;
    padding: 8px 10px;
    border: 1px solid #e9b448;
    border-radius: 9px;
    background: #fff1c9;
    color: #5c4000;
    font-size: 11px;
  }
  body.mobile-service-mode .mobile-test-mode {
    flex: none;
    padding: 4px 6px;
    border-radius: 6px;
    background: #ffd269;
    color: #543900;
    font-size: 10px;
    font-style: normal;
    font-weight: 900;
    letter-spacing: 0.04em;
  }
  body.mobile-service-mode .cart > #cart {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  body.mobile-service-mode .cart > footer {
    position: static !important;
    flex: none !important;
    padding-top: 9px !important;
    background: #fff !important;
  }
  body.mobile-service-mode .cart .total {
    margin: 0 0 7px !important;
    font-size: 18px !important;
  }
  body.mobile-service-mode .cart .total strong {
    font-size: 24px !important;
  }
  body.mobile-service-mode .cart .pay {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }
  body.mobile-service-mode .cart .pay button {
    min-height: 48px !important;
    padding: 8px !important;
    font-size: 15px !important;
  }
  body.mobile-service-mode .cart .pay .primary,
  body.mobile-service-mode .cart .pay #pay-later {
    grid-column: 1/-1;
  }
  body.mobile-service-mode .mobile-cart-dock {
    position: fixed;
    z-index: 80;
    left: 7px;
    right: 7px;
    bottom: calc(6px + env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    gap: 10px;
    width: auto;
    min-height: 58px;
    padding: 8px 13px;
    border: 0;
    border-radius: 14px;
    background: #173f35;
    color: #fff;
    box-shadow: 0 7px 22px #102b2447;
    text-align: left;
    transition:
      opacity 0.15s ease,
      transform 0.15s ease;
  }
  body.mobile-service-mode .mobile-cart-dock span {
    display: grid;
    gap: 1px;
    margin-right: auto;
  }
  body.mobile-service-mode .mobile-cart-dock b {
    font-size: 15px;
  }
  body.mobile-service-mode .mobile-cart-dock small {
    color: #d4e9e2;
    font-size: 11px;
  }
  body.mobile-service-mode .mobile-cart-dock strong {
    font-size: 20px;
    white-space: nowrap;
  }
  body.mobile-service-mode .mobile-cart-dock i {
    font-size: 17px;
    font-style: normal;
  }
  body.mobile-service-mode.mobile-cart-open .mobile-cart-dock {
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
  }
  .mobile-service-toast {
    position: fixed;
    z-index: 120;
    left: 12px;
    right: 12px;
    top: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #173f35;
    color: #fff;
    box-shadow: 0 8px 24px #0004;
    font-weight: 750;
    text-align: center;
    opacity: 0;
    transform: translateY(-15px);
    pointer-events: none;
    transition: 0.18s ease;
  }
  .mobile-service-toast.visible {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 370px) {
  body.mobile-service-mode .category-products {
    grid-template-columns: 1fr !important;
  }
  body.mobile-service-mode .product {
    min-height: 88px !important;
  }
}

/* v10.44: verpflichtende große Tischauswahl auf Mobilgeräten */
.mobile-table-gate {
  display: none;
}
@media (max-width: 720px) {
  body.mobile-service-mode .mobile-table-gate {
    position: fixed;
    z-index: 160;
    inset: 0;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 18px;
    background: #102b24d9;
  }
  body.mobile-service-mode .mobile-table-gate[hidden] {
    display: none !important;
  }
  body.mobile-service-mode .mobile-table-gate section {
    display: grid;
    gap: 15px;
    width: min(100%, 430px);
    padding: 22px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 18px 55px #0006;
    text-align: center;
  }
  body.mobile-service-mode .mobile-table-gate p {
    margin: 0;
    color: #527068;
    font-size: 13px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  body.mobile-service-mode .mobile-table-gate h2 {
    margin: 0;
    font-size: 23px;
    line-height: 1.2;
  }
  body.mobile-service-mode .mobile-table-gate input {
    width: 100%;
    height: 66px;
    padding: 10px 14px;
    border: 2px solid #7fa99c;
    border-radius: 13px;
    background: #fff;
    font-size: 30px;
    font-weight: 850;
    text-align: center;
  }
  body.mobile-service-mode .mobile-table-gate button {
    min-height: 54px;
    font-size: 17px;
  }
  body.mobile-service-mode .mobile-table-gate-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* v10.46: mobile Tischpositionen als Karten statt gequetschter Tabellenspalten */
@media (max-width: 720px) {
  #editor-dialog.mobile-table-receipt-dialog {
    padding: 8px !important;
    overflow: hidden !important;
  }
  #editor-dialog.mobile-table-receipt-dialog .editor {
    width: 100% !important;
    max-height: calc(100dvh - 16px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0 2px max(12px, env(safe-area-inset-bottom)) !important;
  }
  #editor-dialog.mobile-table-receipt-dialog .editor-head {
    position: sticky;
    z-index: 5;
    top: 0;
    margin: 0;
    padding: 10px 4px;
    background: #fff;
    border-bottom: 1px solid #dce5e1;
  }
  #editor-dialog.mobile-table-receipt-dialog .receipt-title {
    padding: 14px 4px 4px;
  }
  #editor-dialog.mobile-table-receipt-dialog .table-list-section {
    width: 100% !important;
    max-width: 100% !important;
    margin: 12px 0 0 !important;
    padding: 12px !important;
    overflow: hidden !important;
  }
  #editor-dialog.mobile-table-receipt-dialog .table-list-section table,
  #editor-dialog.mobile-table-receipt-dialog .table-list-section tbody {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: auto !important;
  }
  #editor-dialog.mobile-table-receipt-dialog .table-list-section thead {
    display: none !important;
  }
  #editor-dialog.mobile-table-receipt-dialog .table-list-section tr.mobile-table-item-row {
    display: grid !important;
    grid-template-columns: minmax(110px, 1fr) auto auto !important;
    column-gap: 10px !important;
    row-gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 12px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #d5dfdb !important;
  }
  #editor-dialog.mobile-table-receipt-dialog .table-list-section tr.mobile-table-item-row td {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    text-align: left !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: auto;
  }
  #editor-dialog.mobile-table-receipt-dialog .table-list-section tr.mobile-table-item-row td::before {
    display: block !important;
    margin: 0 0 3px;
    color: #71817b;
    font-size: 10px;
    font-weight: 750;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    content: attr(data-mobile-label) !important;
  }
  #editor-dialog.mobile-table-receipt-dialog .table-list-section tr.mobile-table-item-row td:nth-child(1) {
    grid-column: 1/-1 !important;
    grid-row: 1 !important;
    font-size: 17px !important;
    font-weight: 850 !important;
    line-height: 1.25 !important;
  }
  #editor-dialog.mobile-table-receipt-dialog .table-list-section tr.mobile-table-item-row td:nth-child(2) {
    grid-column: 1 !important;
    grid-row: 2 !important;
    align-self: end !important;
  }
  #editor-dialog.mobile-table-receipt-dialog .table-list-section tr.mobile-table-item-row td:nth-child(3) {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: end !important;
    white-space: nowrap !important;
  }
  #editor-dialog.mobile-table-receipt-dialog .table-list-section tr.mobile-table-item-row td:nth-child(4) {
    grid-column: 3 !important;
    grid-row: 2 !important;
    align-self: end !important;
    white-space: nowrap !important;
    font-weight: 850 !important;
  }
  #editor-dialog.mobile-table-receipt-dialog .split-quantity {
    display: grid !important;
    grid-template-columns: 36px 24px 36px !important;
    gap: 5px !important;
    width: max-content !important;
    max-width: 100% !important;
  }
  #editor-dialog.mobile-table-receipt-dialog .split-quantity button {
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 2px !important;
  }
  #editor-dialog.mobile-table-receipt-dialog .split-quantity small {
    font-size: 10px !important;
  }
  #editor-dialog.mobile-table-receipt-dialog .split-payment-summary {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 12px 0 !important;
  }
  #editor-dialog.mobile-table-receipt-dialog .split-payment-summary span,
  #editor-dialog.mobile-table-receipt-dialog .split-payment-summary strong {
    grid-column: 1/-1 !important;
    width: auto !important;
    margin: 0 !important;
  }
}

/* v10.47: kompakte, gleich breite Tischzeile in der mobilen Bedienungskasse */
@media (max-width: 720px) {
  body.mobile-service-mode .pos-selectors {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    overflow: visible !important;
    background: #eaf3f0 !important;
    border-bottom: 1px solid #c8d8d3 !important;
  }
  body.mobile-service-mode .pos-selectors > * {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 46px !important;
    margin: 0 !important;
  }
  body.mobile-service-mode .pos-selectors #table-overview {
    order: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 10px !important;
    border: 1px solid #aac0b8 !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #17483c !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
  }
  body.mobile-service-mode .pos-selectors .mobile-table-compact {
    display: block !important;
    min-height: 46px !important;
  }
  body.mobile-service-mode .pos-selectors .mobile-table-compact .table-input-row {
    display: block !important;
    width: 100% !important;
    height: 46px !important;
  }
  body.mobile-service-mode .pos-selectors .mobile-table-compact .table-input-row input {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    border: 1px solid #aac0b8 !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #17231f !important;
    font-size: 17px !important;
    font-weight: 850 !important;
    text-align: center !important;
  }
}

/* v10.48: Satzzeichen bleiben trotz numerischer Handytastatur erreichbar */
@media (max-width: 720px) {
  body.mobile-service-mode .mobile-table-symbols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }
  body.mobile-service-mode .mobile-table-symbols button {
    min-width: 0 !important;
    min-height: 43px !important;
    padding: 7px 5px !important;
    border: 1px solid #b7cac3 !important;
    border-radius: 10px !important;
    background: #eef6f3 !important;
    color: #183c35 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
  }
  body.mobile-service-mode .mobile-table-gate section {
    position: relative;
  }
  body.mobile-service-mode .mobile-table-gate .mobile-table-gate-close {
    position: absolute;
    z-index: 2;
    top: 10px;
    right: 10px;
    display: grid;
    place-items: center;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    border: 1px solid #bfd0ca !important;
    border-radius: 999px !important;
    background: #f2f7f5 !important;
    color: #183c35 !important;
    font-size: 29px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
  }
  body.mobile-service-mode .mobile-table-gate section > p {
    padding-right: 42px;
    padding-left: 42px;
  }
}

/* v10.49: eigenständige mobile Zahlungsansicht für Tischrechnungen */
@media (max-width: 720px) {
  #editor-dialog:not(.mobile-table-receipt-dialog) .cash-payment-dialog,
  #editor-dialog:not(.mobile-table-receipt-dialog) .card-payment-dialog {
    width: 100% !important;
    margin: 0 !important;
    padding: 4px !important;
  }
  #editor-dialog:not(.mobile-table-receipt-dialog) .cash-due,
  #editor-dialog:not(.mobile-table-receipt-dialog) .cash-change {
    width: 100% !important;
    min-height: 62px !important;
    padding: 13px 15px !important;
    border-radius: 13px !important;
  }
  #editor-dialog:not(.mobile-table-receipt-dialog) .cash-due strong,
  #editor-dialog:not(.mobile-table-receipt-dialog) .cash-change strong {
    font-size: 25px !important;
  }
  #editor-dialog:not(.mobile-table-receipt-dialog) .payment-number-pad {
    width: 100% !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  #editor-dialog:not(.mobile-table-receipt-dialog) .payment-number-pad button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 54px !important;
  }
  #editor-dialog:not(.mobile-table-receipt-dialog) .editor-actions {
    width: 100% !important;
    margin-top: 12px !important;
  }
}

/* v10.50: Nummerntastatur mit Satzzeichen und Eingabetaste im Tischfenster */
@media (max-width: 720px) {
  body.mobile-service-mode .mobile-table-gate section {
    gap: 11px !important;
    padding: 18px !important;
  }
  body.mobile-service-mode .mobile-table-keypad {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    width: 100%;
  }
  body.mobile-service-mode .mobile-table-keypad button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    padding: 5px !important;
    border: 1px solid #b7cac3 !important;
    border-radius: 10px !important;
    background: #f2f7f5 !important;
    color: #183c35 !important;
    font-size: 20px !important;
    font-weight: 850 !important;
  }
  body.mobile-service-mode .mobile-table-keypad button.clear {
    font-size: 13px !important;
  }
  body.mobile-service-mode .mobile-table-keypad button.enter {
    border-color: #183c35 !important;
    background: #183c35 !important;
    color: #fff !important;
    font-size: 13px !important;
  }
  body.mobile-service-mode .mobile-table-gate input[readonly] {
    caret-color: transparent;
  }
  body.mobile-service-mode .mobile-table-gate-actions {
    gap: 7px !important;
  }
  body.mobile-service-mode .mobile-table-gate-actions .primary {
    display: none !important;
  }
}

/* v10.51: kompakter Zustand nach vollständiger Tischzahlung */
.table-list-open.is-settled {
  padding: 14px !important;
}
.table-settled-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 72px;
  padding: 14px;
  border: 1px solid #bcd7cd;
  border-radius: 12px;
  background: #edf7f3;
  color: #17483c;
  text-align: center;
}
.table-settled-banner span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #1b8b68;
  color: #fff;
  font-size: 21px;
  font-weight: 900;
}
.table-settled-banner strong {
  font-size: 18px;
}

/* v10.53: letzter Dialogknopf bleibt vollständig innerhalb des Fensters */
@media (max-width: 720px) {
  #editor-dialog.mobile-table-receipt-dialog {
    max-height: calc(100dvh - 24px) !important;
    margin: auto !important;
  }
  #editor-dialog.mobile-table-receipt-dialog .editor {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    width: 100% !important;
    height: calc(100dvh - 40px) !important;
    max-height: calc(100dvh - 40px) !important;
    padding: 0 2px !important;
    overflow: hidden !important;
  }
  #editor-dialog.mobile-table-receipt-dialog .table-receipt {
    min-height: 0 !important;
    padding: 0 2px 12px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  #editor-dialog.mobile-table-receipt-dialog .table-payment-actions {
    position: relative !important;
    z-index: 6 !important;
    bottom: auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 10px 2px max(14px, calc(env(safe-area-inset-bottom) + 8px)) !important;
    border-top: 1px solid #d5e1dd !important;
    background: #fff !important;
    box-shadow: 0 -8px 18px #173c3514 !important;
  }
  #editor-dialog.mobile-table-receipt-dialog .table-payment-actions button:last-child {
    margin-bottom: 0 !important;
  }
}

/* v10.54: sichtbarer Rückweg vom einzelnen Tisch zur Übersicht */
.editor-head .table-overview-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 7px 11px;
  border: 1px solid #b8c8c2;
  border-radius: 10px;
  background: #f2f7f5;
  color: #183c35;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}
.editor-head .table-overview-back span:first-child {
  font-size: 21px;
  line-height: 1;
}
.editor-head .table-overview-back:disabled {
  opacity: 0.55;
  cursor: wait;
}
@media (max-width: 720px) {
  #editor-dialog.mobile-table-receipt-dialog .editor-head {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 7px !important;
  }
  #editor-dialog.mobile-table-receipt-dialog .editor-head h2 {
    min-width: 0;
    margin: 0 !important;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #editor-dialog.mobile-table-receipt-dialog .editor-head .table-overview-back {
    min-width: 42px;
    min-height: 42px;
    padding: 7px 9px;
    font-size: 12px !important;
  }
  #editor-dialog.mobile-table-receipt-dialog .editor-head > [data-dialog-close] {
    width: 42px;
    min-width: 42px;
    height: 42px;
    padding: 0;
    font-size: 30px;
  }
}
@media (max-width: 390px) {
  #editor-dialog.mobile-table-receipt-dialog .editor-head .table-overview-back span:last-child {
    display: none;
  }
}

/* v10.56: Zeitraumauswertung, getrennt vom eigentlichen Abschluss */
.closure-period-controls {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  padding: 16px;
  border: 1px solid #b9d0c8;
  border-radius: 14px;
  background: #f2f8f5;
}
.closure-period-heading h3 {
  margin: 0 0 4px;
  font-size: 20px;
}
.closure-period-heading p,
.closure-period-hint {
  margin: 0;
  color: #60736c;
  font-size: 13px;
}
.closure-period-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.closure-period-fields label {
  display: grid;
  gap: 6px;
  min-width: 0;
  font-weight: 700;
}
.closure-period-fields input,
.closure-period-fields select {
  width: 100%;
  min-width: 0;
  padding: 11px;
  border: 1px solid #b8c8c2;
  border-radius: 9px;
  background: #fff;
  font: inherit;
}
.closure-period-controls > .error {
  margin: 0;
}
.closure-period-controls > .primary {
  justify-self: start;
  width: auto;
  padding: 11px 16px;
}
@media (max-width: 900px) {
  .closure-period-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .closure-period-fields {
    grid-template-columns: 1fr;
  }
  .closure-period-controls > .primary {
    width: 100%;
  }
}

/* v10.57: die komplette Abschlussseite bleibt unabhängig von ihrer Höhe scrollbar */
.closures-page {
  display: block !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  padding-bottom: max(24px, env(safe-area-inset-bottom)) !important;
}
.closures-page > .panel {
  width: 100%;
  margin-bottom: 18px;
}
.closures-page > .panel:last-child {
  margin-bottom: 0;
}
.closures-page .closure-create,
.closures-page .closure-archive {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}
.closures-page .closure-archive > .table-scroll {
  max-width: 100%;
  overflow: auto !important;
}

/* v10.58: steuerliche Aufteilung des Abschlusses nach Zahlungsart */
.closure-payment-taxes {
  margin-bottom: 3mm;
  padding: 1.5mm 0;
  border-bottom: 1px dashed #999;
}
.closure-payment-taxes span:nth-of-type(3n + 1),
.closure-payment-taxes b:nth-of-type(3n + 1) {
  font-weight: 800;
}