:root {
  --primary: #0c3d6b;
  --primary-light: #1460a8;
  --primary-dark: #071f38;
  --accent: #00c9a7;
  --accent-dark: #009e84;
  --danger: #e63946;
  --warning: #f4a261;
  --success: #2ec4b6;
  --bg: #eef2f7;
  --card-bg: #ffffff;
  --card-border: rgba(7, 31, 56, 0.08);
  --card-shadow: 0 2px 12px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.04);
  --card-shadow-hover: 0 8px 28px rgba(0,0,0,0.11), 0 2px 6px rgba(0,0,0,0.06);
  --text-primary: #0f1f30;
  --text-secondary: #526070;
  --text-muted: #8898a8;
  --border: #dde4ee;
  --radius-sm: 8px;
  --radius-md: 8px;
  --radius-lg: 8px;
  --radius-xl: 8px;
  --transition: 0.22s cubic-bezier(.4,0,.2,1);
}

/* Visual polish: modern font + Font Awesome driven controls */
body {
  font-family: "Sarabun", "Noto Sans Thai", "Segoe UI", Tahoma, sans-serif;
  letter-spacing: 0;
  background:
    linear-gradient(135deg, rgba(237,243,248,.98), rgba(246,249,252,.96));
}

.page-top {
  background: rgba(255,255,255,.98);
  border-bottom-color: rgba(12,61,107,.10);
}

.page-top h1 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.close-page,
.touch-btn,
.action-btn,
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

.close-page {
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 10px 22px rgba(230,57,70,.26);
}

.close-page::before {
  content: "\f00d";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

.home-tile {
  border-color: rgba(12,61,107,.10);
  box-shadow: 0 12px 30px rgba(7,31,56,.10), 0 2px 8px rgba(7,31,56,.05);
  position: relative;
  overflow: hidden;
}

.home-tile > i {
  width: 46px;
  height: 46px;
  margin-bottom: 4px;
  border-radius: 14px;
  background: rgba(20,96,168,.10);
  color: var(--primary-light);
  display: grid;
  place-items: center;
  font-size: 21px;
}

.home-tile.primary > i {
  background: rgba(255,255,255,.18);
  color: #fff;
}

.home-tile::after {
  content: "";
  position: absolute;
  inset: auto 14px 0;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--accent), transparent);
  opacity: .55;
}

.table-toolbar {
  background:
    linear-gradient(180deg, rgba(255,255,255,1), rgba(250,253,255,1));
}

.touch-btn {
  background: linear-gradient(135deg, rgba(0,201,167,.16), rgba(20,96,168,.10));
  border: 1px solid rgba(0,158,132,.18);
}

.touch-btn:hover,
.icon-btn:hover,
.home-tile:hover {
  filter: brightness(1.01);
}

.data-table thead th {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

/* Product management refresh */
.table-page .table-card {
  border-radius: 10px;
  border-color: #d7e2ec;
}

.table-page .table-toolbar {
  min-height: 104px;
  padding: 18px 20px;
  align-items: stretch;
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(244,249,252,.98));
}

.table-page .table-toolbar > div:first-child {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 12px;
}

.table-page .table-toolbar h2 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.product-main-group {
  margin-left: 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: #edf6ff;
  color: var(--primary);
  font-size: 16px;
  font-weight: 900;
}

.toolbar-actions {
  align-items: center;
}

.product-add-btn {
  min-height: 54px;
  padding: 0 18px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 18px;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(0,201,167,.22);
  cursor: pointer;
}

.product-add-btn:hover,
.product-add-btn:focus-visible {
  filter: brightness(1.04);
  outline: none;
}

.digi-table {
  table-layout: fixed;
}

.digi-table th,
.digi-table td {
  white-space: nowrap;
}

.digi-table th:nth-child(1),
.digi-table td:nth-child(1) {
  width: 132px;
}

.digi-table th:nth-child(2),
.digi-table td:nth-child(2) {
  width: 160px;
}

.digi-table th:nth-child(3),
.digi-table td:nth-child(3) {
  width: 162px;
}

.digi-table th:nth-child(4),
.digi-table td:nth-child(4) {
  width: 72px;
  text-align: center;
}

.digi-table th:nth-child(5),
.digi-table td:nth-child(5) {
  width: 116px;
}

.digi-table th:nth-child(6),
.digi-table td:nth-child(6) {
  width: auto;
}

.digi-table th:nth-child(7),
.digi-table td:nth-child(7) {
  width: 112px;
}

.digi-table td:nth-child(2),
.digi-table td:nth-child(3),
.digi-table td:nth-child(6) {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.digi-table td:nth-child(6) {
  font-size: 16px;
  line-height: 1.25;
}

.product-editor-box {
  width: min(760px, calc(100vw - 28px));
  overflow: hidden;
}

.product-editor-form {
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  background: #f8fbfd;
}

.product-editor-form label {
  display: grid;
  gap: 7px;
  color: #334155;
  font-size: 16px;
  font-weight: 900;
}

.product-editor-form input {
  min-width: 0;
  min-height: 52px;
  padding: 10px 13px;
  border: 1px solid #d7e2ec;
  border-radius: 10px;
  background: #fff;
  color: var(--text-primary);
  font-family: "Sarabun", "Noto Sans Thai", sans-serif;
  font-size: 18px;
  font-weight: 800;
}

.product-editor-form input:focus {
  outline: 0;
  border-color: var(--primary-light);
  box-shadow: 0 0 0 3px rgba(20,96,168,.12);
}

.product-editor-form input:disabled {
  background: #edf2f7;
  color: #65758a;
}

.product-editor-actions {
  grid-column: 1 / -1;
  padding: 4px 0 0;
}

@media (min-width: 901px) and (max-width: 1100px) and (max-height: 820px) {
  .table-page .table-toolbar {
    min-height: 88px;
    padding: 14px 16px;
  }

  .product-add-btn {
    min-height: 46px;
    padding: 0 14px;
    font-size: 16px;
  }

  .digi-table th:nth-child(1),
  .digi-table td:nth-child(1) {
    width: 126px;
  }

  .digi-table th:nth-child(2),
  .digi-table td:nth-child(2) {
    width: 150px;
  }

  .digi-table th:nth-child(3),
  .digi-table td:nth-child(3) {
    width: 154px;
  }

  .digi-table th:nth-child(4),
  .digi-table td:nth-child(4) {
    width: 62px;
  }

  .digi-table th:nth-child(5),
  .digi-table td:nth-child(5) {
    width: 108px;
  }

  .digi-table th:nth-child(7),
  .digi-table td:nth-child(7) {
    width: 96px;
  }
}

@media (max-width: 700px) {
  .product-editor-form {
    grid-template-columns: 1fr;
  }
}

/* Final product management overrides */
.product-main-group {
  margin-left: 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: #edf6ff;
  color: var(--primary);
  font-size: 16px;
  font-weight: 900;
  white-space: nowrap;
}

.product-add-btn {
  min-height: 54px;
  padding: 0 18px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 18px;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(0,201,167,.22);
  cursor: pointer;
}

.digi-table {
  table-layout: fixed;
}

.digi-table th,
.digi-table td {
  white-space: nowrap;
}

.product-thumb-cell {
  text-align: center;
}

.product-thumb {
  width: 64px;
  height: 48px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #d7e2ec;
  border-radius: 8px;
  background: #eef5fb;
  overflow: hidden;
}

.product-thumb img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

.digi-table th:nth-child(1),
.digi-table td:nth-child(1) { width: 132px; }
.digi-table th:nth-child(2),
.digi-table td:nth-child(2) { width: 160px; }
.digi-table th:nth-child(3),
.digi-table td:nth-child(3) { width: 162px; }
.digi-table th:nth-child(4),
.digi-table td:nth-child(4) { width: 72px; text-align: center; }
.digi-table th:nth-child(5),
.digi-table td:nth-child(5) { width: 116px; }
.digi-table th:nth-child(6),
.digi-table td:nth-child(6) { width: auto; }
.digi-table th:nth-child(7),
.digi-table td:nth-child(7) { width: 112px; }

.digi-table td:nth-child(2),
.digi-table td:nth-child(3),
.digi-table td:nth-child(6) {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.digi-table td:nth-child(6) {
  font-size: 16px;
  line-height: 1.25;
}

.product-editor-box {
  width: min(760px, calc(100vw - 28px));
  overflow: hidden;
}

.product-editor-form {
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  background: #f8fbfd;
}

.product-editor-form label {
  display: grid;
  gap: 7px;
  color: #334155;
  font-size: 16px;
  font-weight: 900;
}

.product-editor-form input {
  min-width: 0;
  min-height: 52px;
  padding: 10px 13px;
  border: 1px solid #d7e2ec;
  border-radius: 10px;
  background: #fff;
  color: var(--text-primary);
  font-family: "Sarabun", "Noto Sans Thai", sans-serif;
  font-size: 18px;
  font-weight: 800;
}

.product-editor-form input:focus {
  outline: 0;
  border-color: var(--primary-light);
  box-shadow: 0 0 0 3px rgba(20,96,168,.12);
}

.product-editor-form input:disabled {
  background: #edf2f7;
  color: #65758a;
}

.product-editor-actions {
  grid-column: 1 / -1;
  padding: 4px 0 0;
}

@media (min-width: 901px) and (max-width: 1100px) and (max-height: 820px) {
  .digi-table th:nth-child(1),
  .digi-table td:nth-child(1) { width: 126px; }
  .digi-table th:nth-child(2),
  .digi-table td:nth-child(2) { width: 150px; }
  .digi-table th:nth-child(3),
  .digi-table td:nth-child(3) { width: 154px; }
  .digi-table th:nth-child(4),
  .digi-table td:nth-child(4) { width: 62px; }
  .digi-table th:nth-child(5),
  .digi-table td:nth-child(5) { width: 108px; }
  .digi-table th:nth-child(7),
  .digi-table td:nth-child(7) { width: 96px; }
}

@media (max-width: 700px) {
  .product-editor-form {
    grid-template-columns: 1fr;
  }
}

/* Page shell */
.page-shell {
  height: 100vh;
  min-height: 0;
  display: grid;
  grid-template-rows: 76px 1fr;
  background: var(--bg);
}

.page-top {
  min-width: 0;
  padding: 0 26px;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  box-shadow: 0 1px 0 var(--border), 0 4px 16px rgba(0,0,0,0.04);
}

.page-top h1 {
  margin: 7px 0 0;
  font-size: 30px;
  line-height: 1;
  font-weight: 900;
}

.top-tools {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.connection-pill,
.clock-display {
  min-height: 48px;
  padding: 0 15px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text-secondary);
  font-size: 18px;
  font-weight: 800;
  white-space: nowrap;
}

.status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--warning);
  box-shadow: 0 0 0 4px rgba(244,162,97,.18);
}

.status-dot.connected {
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(0,201,167,.18);
}

.status-dot.error {
  background: var(--danger);
  box-shadow: 0 0 0 4px rgba(230,57,70,.18);
}

.close-page {
  min-height: 54px;
  min-width: 98px;
  padding: 0 22px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--danger), #b92f3b);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 900;
  box-shadow: 0 7px 18px rgba(230,57,70,.22);
}

.page-body {
  min-height: 0;
  padding: 24px 26px;
  overflow: hidden;
}

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

.table-page {
  display: flex;
  flex-direction: column;
}

.table-card {
  min-height: 0;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}

.table-page > .table-card {
  flex: 1 1 auto;
  display: grid;
  grid-template-rows: auto auto 1fr;
}

.table-toolbar {
  min-height: 82px;
  padding: 17px 20px;
  border-bottom: 1px solid var(--border);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.table-toolbar h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: 28px;
  font-weight: 900;
}

.table-toolbar p {
  margin: 5px 0 0;
  color: var(--text-secondary);
  font-size: 17px;
  font-weight: 700;
}

.toolbar-actions {
  display: flex;
  align-items: end;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.filter-chips {
  padding: 12px 18px;
  background: #fff;
  display: flex;
  gap: 10px;
  overflow-x: auto;
}

.filter-chip-btn {
  min-height: 50px;
  padding: 0 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text-primary);
  font-size: 17px;
  font-weight: 900;
  white-space: nowrap;
}

.filter-chip-btn.active {
  border-color: var(--primary);
  background: linear-gradient(135deg, var(--primary-light), var(--primary));
  color: #fff;
}

.table-scroll {
  min-height: 0;
  overflow: auto;
  background: #fff;
}

/* Touch-friendly scrollbar — all table pages */
.table-scroll::-webkit-scrollbar,
.cust-table-body-wrap::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}
.table-scroll::-webkit-scrollbar-track,
.cust-table-body-wrap::-webkit-scrollbar-track {
  background: #edf3f9;
  border-left: 1px solid #d7e6f2;
}
.table-scroll::-webkit-scrollbar-corner {
  background: #edf3f9;
}
.table-scroll::-webkit-scrollbar-thumb,
.cust-table-body-wrap::-webkit-scrollbar-thumb {
  background: #8aafc8;
  border-radius: 999px;
  border: 3px solid #edf3f9;
  min-height: 48px;
  min-width: 48px;
}
.table-scroll::-webkit-scrollbar-thumb:hover,
.cust-table-body-wrap::-webkit-scrollbar-thumb:hover {
  background: #5a8fb0;
}
.table-scroll::-webkit-scrollbar-thumb:active,
.cust-table-body-wrap::-webkit-scrollbar-thumb:active {
  background: #2e6a96;
}

.table-card > .table-scroll:nth-child(2) {
  grid-row: 2 / 4;
}

.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 16px;
  margin: 0;
}

.data-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 12px 14px;
  background: var(--primary);
  color: #fff;
  text-align: left;
  font-size: 15px;
  font-weight: 900;
  white-space: nowrap;
  border: 0;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.16);
}

.data-table tbody td {
  min-height: 56px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: #fff;
  vertical-align: middle;
  font-weight: 750;
}

.data-table tbody tr:nth-child(even) td {
  background: #fbfdff;
}

.data-table tbody tr:hover td {
  background: #f1f8fc;
}

.data-table .num { text-align: right; font-family: "IBM Plex Mono", Consolas, monospace; }
.data-table .center { text-align: center; }

.code-pill {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  background: #edf2f9;
  color: var(--primary);
  font-family: "IBM Plex Mono", Consolas, monospace;
  font-size: 17px;
  font-weight: 900;
}

.badge-status {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 900;
  white-space: nowrap;
}

.badge-success { background: rgba(46,196,182,.14); color: #12897d; }
.badge-warning { background: rgba(244,162,97,.18); color: #a95a12; }

.row-actions {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.icon-btn {
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(20,96,168,.24);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--primary);
  font-size: 16px;
  font-weight: 900;
}

.icon-btn.danger {
  border-color: rgba(230,57,70,.25);
  color: var(--danger);
}

.product-row-actions,
.user-row-actions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}

.user-page .user-row-actions {
  gap: 4px;
}

.data-table .table-action-btn,
.product-row-actions .table-action-btn,
.user-row-actions .table-action-btn,
.report-page .table-action-btn {
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px !important;
  padding: 0 !important;
  border-radius: 8px;
  font-size: 0;
  line-height: 1;
  flex: 0 0 36px;
}

.user-page .user-action-btn {
  overflow: hidden;
}

.data-table .table-action-btn i {
  font-size: 14px;
  line-height: 1;
}

.user-page .user-action-btn,
.user-page .user-action-btn::before,
.user-page .user-action-btn::after {
  font-size: 0;
}

.user-page .user-action-btn i {
  font-size: 14px;
}

.user-page .user-action-btn::before,
.user-page .user-action-btn::after {
  content: none !important;
  display: none !important;
}

.data-table .table-action-btn::before,
.data-table .table-action-btn::after,
.product-row-actions .table-action-btn::before,
.product-row-actions .table-action-btn::after,
.user-row-actions .table-action-btn::before,
.user-row-actions .table-action-btn::after,
.report-page .table-action-btn::before,
.report-page .table-action-btn::after {
  content: none !important;
  display: none !important;
}

.data-table td:last-child,
.data-table th:last-child {
  width: 92px;
  text-align: center;
}

.touch-btn.muted {
  min-height: 54px;
  background: #fff;
  color: var(--primary);
  border: 1px solid var(--border);
}

.permission-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.permission-pills span {
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(20,96,168,.10);
  color: var(--primary);
  font-size: 15px;
  font-weight: 900;
}

.permission-grid {
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 12px;
}

.permission-card {
  min-height: 104px;
  padding: 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  background: #fff;
  text-align: left;
}

.permission-card.active {
  border-color: var(--accent);
  background: rgba(0,201,167,.07);
  box-shadow: inset 0 0 0 1px rgba(0,201,167,.18);
}

.permission-card strong {
  display: block;
  font-size: 21px;
  font-weight: 900;
}

.permission-card span {
  display: block;
  margin-top: 5px;
  color: var(--text-secondary);
  font-size: 16px;
  font-weight: 700;
}

/* Modal / toast */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(7,31,56,.60);
}

.modal-box {
  width: min(590px, 100%);
  max-height: 90vh;
  overflow: auto;
}

.modal-header {
  min-height: 62px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.modal-header h2 {
  margin: 0;
  font-size: 25px;
}

.modal-close {
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.16);
  color: #fff;
  font-weight: 900;
}

/* ── Print-confirm modal label container ── */
.sticker-preview {
  width: min(82vw, 300px);
  aspect-ratio: 10 / 11;
  margin: 14px auto;
  padding: 10px 12px 9px;
  border: 2px solid #111;
  border-radius: 3px;
  color: #111;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: Tahoma,"Sarabun","Noto Sans Thai",sans-serif;
}

/* ── lbl-* modal scale (~1.6× print, container 300px) ── */
.sticker-preview .lbl-brand {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding-bottom: 4px;
}
.sticker-preview .lbl-shop-name  { display: block; font-size: 20px; font-weight: 900; line-height: 1.1; text-align: center; width: 100%; }
.sticker-preview .lbl-shop-addr,
.sticker-preview .lbl-shop-phone { display: block; font-size: 11px; line-height: 1.3; color: #333; }
.sticker-preview .lbl-hr  { border: 0; border-top: 1px solid #111; margin: 4px 0; opacity: .3; }
.sticker-preview .lbl-hr2 { margin: 3px 0; }
.sticker-preview .lbl-weight-box {
  border: 1.5px solid #111; border-radius: 2px;
  padding: 4px 6px; margin: 4px 0;
  display: flex; flex-direction: column; align-items: center; flex-shrink: 0;
}
.sticker-preview .lbl-wt-label  { font-size: 14px; font-weight: 900; line-height: 1; margin-bottom: 1px; color: #333; }
.sticker-preview .lbl-wt-value  {
  display: block; font-family: "IBM Plex Mono",monospace;
  font-size: 57px; font-weight: 900; line-height: .88; letter-spacing: -.04em;
}
.sticker-preview .lbl-wt-unit   {
  font-family: Tahoma,"Sarabun",sans-serif; font-size: 17px; font-weight: 700; margin-left: 3px;
}
.sticker-preview .lbl-name-rows { display: flex; flex-direction: column; margin: 3px 0 0; }
.sticker-preview .lbl-name-row  {
  display: flex; gap: 4px; font-size: 17px; font-weight: 800; line-height: 1.55;
  border-bottom: 0.3px solid #ddd; align-items: baseline; min-width: 0;
}
.sticker-preview .lbl-name-code { font-weight: 900; white-space: nowrap; flex-shrink: 0; }
.sticker-preview .lbl-name-val  { font-weight: 800; color: #222; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sticker-preview .lbl-info-grid {
  display: grid; grid-template-columns: minmax(0,1fr) 98px;
  gap: 6px; align-items: start; margin: 3px 0;
}
.sticker-preview .lbl-rows  { min-width: 0; }
.sticker-preview .lbl-row   {
  display: flex; justify-content: space-between; gap: 4px;
  font-size: 14px; font-weight: 800; line-height: 1.6;
  border-bottom: 0.3px solid #ddd;
}
.sticker-preview .lbl-row b { font-size: 14px; font-weight: 900; text-align: right; }
.sticker-preview .lbl-row.lbl-row-total { font-weight: 900; }
.sticker-preview .lbl-row.lbl-row-op   { border-bottom: none; }
.sticker-preview .lbl-qr    { width: 98px; height: 98px; image-rendering: pixelated; justify-self: end; }
.sticker-preview .lbl-footer {
  margin-top: auto; text-align: center; font-size: 11px; line-height: 1.35; color: #444;
}

.modal-actions {
  display: grid;
  grid-template-columns: 1fr 1.8fr;
  gap: 11px;
  padding: 0 22px 22px;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 2000;
  min-width: 280px;
  padding: 15px 26px;
  border-radius: var(--radius-md);
  background: var(--primary-dark);
  color: #fff;
  text-align: center;
  font-weight: 900;
  box-shadow: var(--card-shadow-hover);
  transform: translateX(-50%) translateY(90px);
  transition: transform var(--transition);
}

.toast.show {
  transform: translateX(-50%) translateY(0);
}

.toast.success { background: var(--accent-dark); }
.toast.error { background: var(--danger); }

::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

::-webkit-scrollbar-thumb {
  background: #c7d4df;
  border-radius: 999px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

.customer-page .table-card {
  grid-template-rows: auto auto 1fr;
}

.customer-editor-box {
  width: min(780px, calc(100vw - 28px));
}

/* Customer table column widths */
.legacy-customer-widths .digi-table th:nth-child(1),
.legacy-customer-widths .digi-table td:nth-child(1) { width: 110px; }

.legacy-customer-widths .digi-table th:nth-child(2),
.legacy-customer-widths .digi-table td:nth-child(2) { width: 180px; }

.legacy-customer-widths .digi-table th:nth-child(3),
.legacy-customer-widths .digi-table td:nth-child(3) { width: 150px; }

.legacy-customer-widths .digi-table th:nth-child(4),
.legacy-customer-widths .digi-table td:nth-child(4) { 
  width: auto; 
  text-align: left;
}  /* เธ—เธตเนˆเธญเธขเธนเนˆ โ€” เธ‚เธขเธฒเธขเน€เธ•เน‡เธก */

.legacy-customer-widths .digi-table th:nth-child(5),
.legacy-customer-widths .digi-table td:nth-child(5) { width: 120px; }

.legacy-customer-widths .digi-table th:nth-child(6),
.legacy-customer-widths .digi-table td:nth-child(6) { width: 100px; }

.user-page .user-table {
  table-layout: fixed;
}

.user-page .user-table th:nth-child(1),
.user-page .user-table td:nth-child(1) { width: 130px; }

.user-page .user-table th:nth-child(2),
.user-page .user-table td:nth-child(2) { width: 190px; }

.user-page .user-table th:nth-child(3),
.user-page .user-table td:nth-child(3) { width: 130px; }

.user-page .user-table th:nth-child(4),
.user-page .user-table td:nth-child(4) { width: auto; }

.user-page .user-table th:nth-child(5),
.user-page .user-table td:nth-child(5) { width: 116px; }

.user-page .user-table th:nth-child(6),
.user-page .user-table td:nth-child(6) { width: 92px; }

.user-page .user-table td:nth-child(1),
.user-page .user-table td:nth-child(2),
.user-page .user-table td:nth-child(4) {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.user-page .user-meta {
  margin-top: 2px;
  color: var(--text-muted);
  font-family: "IBM Plex Mono", Consolas, monospace;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
}

.user-page .user-role-badge {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  background: #edf5fb;
  color: var(--primary);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.25;
  white-space: nowrap;
}

.user-page .user-permission-pills {
  max-height: 68px;
  overflow: auto;
  gap: 5px;
  padding-right: 4px;
}

.user-page .user-permission-pills span {
  min-height: 26px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.25;
}

.badge-muted {
  background: #eef2f6;
  color: #64748b;
}



.product-editor-form .span-all {
  grid-column: 1 / -1;
}
/* Product and customer table header layout. */
.table-page .table-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 12px;
  min-height: 0;
  padding: 18px;
  border-bottom: 1px solid rgba(20, 96, 168, .13);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .98) 0%, rgba(246, 251, 253, .98) 100%),
    radial-gradient(circle at 82% 4%, rgba(0, 201, 167, .13), transparent 30%);
}

.table-page .product-toolbar-title {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(360px, 475px) auto;
  align-items: end;
  gap: 12px;
  min-width: 0;
}

.table-page .product-toolbar-title > div:first-child {
  min-width: 0;
  align-self: center;
  padding-right: 10px;
}

.table-page .product-toolbar-title h2 {
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  color: #071f38;
  font-size: 26px;
  line-height: 1.15;
  font-weight: 900;
}

.table-page .product-toolbar-title p {
  margin: 5px 0 0;
  color: #52657b;
  font-size: 14px;
  line-height: 1.25;
  font-weight: 800;
}

.table-page .product-main-group {
  margin-left: 0;
  min-height: 28px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid rgba(20, 96, 168, .08);
  background: #edf5fb;
  color: #274966;
  font-size: 14px;
  line-height: 1;
  font-weight: 900;
  white-space: nowrap;
}

.table-page .product-add-btn {
  width: auto;
  min-width: 128px;
  min-height: 48px;
  flex: 0 0 auto;
  padding: 0 17px;
  border-radius: 10px;
  font-size: 16px;
  background: linear-gradient(135deg, #10c7aa, #04917f);
  box-shadow: 0 12px 22px rgba(5, 155, 134, .24);
}

.table-page .product-toolbar-controls {
  display: block;
  min-width: 0;
}

.table-page .product-toolbar-controls .filter-chips {
  min-width: 0;
  display: flex;
  gap: 9px;
  overflow-x: auto;
  padding: 2px 0 2px;
  scrollbar-width: thin;
}

.table-page .product-toolbar-controls .filter-chip {
  min-height: 42px;
  flex: 0 0 auto;
  padding: 0 17px;
  border-radius: 8px;
  font-size: 14px;
  border-color: #d7e2ec;
  background: #fff;
  box-shadow: 0 1px 0 rgba(7, 31, 56, .03);
}

.table-page .product-toolbar-controls .filter-chip.active {
  border-color: #245aa0;
  background: linear-gradient(135deg, #285fa9, #123a68);
  color: #fff;
  box-shadow: 0 8px 16px rgba(18, 58, 104, .16);
}

.table-page .product-header-search {
  width: 100%;
  min-width: 0;
  align-self: end;
}

@media (min-width: 901px) and (max-width: 1100px) and (max-height: 820px) {
  .table-page .table-toolbar {
    gap: 10px;
    padding: 14px 16px 12px;
  }

  .table-page .product-toolbar-title h2 {
    font-size: 22px;
  }

  .table-page .product-toolbar-title p {
    font-size: 13px;
  }

  .table-page .product-add-btn {
    min-height: 46px;
  }

  .table-page .product-toolbar-controls {
    display: block;
  }

  .table-page .product-toolbar-title {
    grid-template-columns: minmax(300px, 1fr) minmax(310px, 360px) auto;
    gap: 10px;
  }

  .table-page .product-toolbar-controls .filter-chip {
    min-height: 40px;
    padding: 0 15px;
  }
}

@media (max-width: 760px) {
  .table-page .product-toolbar-title {
    align-items: stretch;
    grid-template-columns: minmax(0, 1fr);
  }

  .table-page .product-add-btn {
    width: 100%;
  }

  .table-page .product-toolbar-controls {
    display: block;
  }
}

.product-editor-form select {
  min-width: 0;
  min-height: 52px;
  padding: 10px 38px 10px 13px;
  border: 1px solid #d7e2ec;
  border-radius: 10px;
  background:
    linear-gradient(45deg, transparent 50%, #315274 50%) right 18px center / 7px 7px no-repeat,
    linear-gradient(135deg, #fff, #f8fbfd);
  color: var(--text-primary);
  font-family: "Sarabun", "Noto Sans Thai", sans-serif;
  font-size: 18px;
  font-weight: 800;
  appearance: none;
}

.product-editor-form select:focus {
  outline: 0;
  border-color: var(--primary-light);
  box-shadow: 0 0 0 3px rgba(20, 96, 168, .12);
}

.product-editor-box,
.product-editor-form {
  overflow: visible;
}

.custom-select {
  position: relative;
  min-width: 0;
}

.custom-select-trigger {
  width: 100%;
  min-height: 52px;
  padding: 10px 13px;
  border: 1px solid #d7e2ec;
  border-radius: 10px;
  background: linear-gradient(135deg, #fff, #f8fbfd);
  color: var(--text-primary);
  font-family: "Sarabun", "Noto Sans Thai", sans-serif;
  font-size: 18px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
  cursor: pointer;
}

.custom-select-trigger i {
  flex: 0 0 auto;
  color: #315274;
  font-size: 14px;
  transition: transform var(--transition);
}

.custom-select.open .custom-select-trigger {
  border-color: var(--primary-light);
  box-shadow: 0 0 0 3px rgba(20, 96, 168, .12);
}

.custom-select.open .custom-select-trigger i {
  transform: rotate(180deg);
}

.custom-select-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-select-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 40;
  display: none;
  max-height: 408px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid #d7e2ec;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 18px 36px rgba(7, 31, 56, .18);
}

.custom-select.open .custom-select-list {
  display: grid;
  gap: 4px;
}

.custom-select-option {
  min-height: 36px;
  padding: 7px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-primary);
  font-family: "Sarabun", "Noto Sans Thai", sans-serif;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
}

.custom-select-option:hover,
.custom-select-option.active {
  background: #edf5fb;
  color: var(--primary);
}

#productBrandDropdown .custom-select-list {
  top: auto;
  bottom: calc(100% + 6px);
}

.customer-page .table-card {
  grid-template-rows: auto auto 1fr;
}

.customer-page .product-toolbar-title {
  grid-template-columns: minmax(300px, 1fr) minmax(330px, 430px) auto;
}

.customer-editor-box {
  width: min(780px, calc(100vw - 28px));
}

#customerEditorModal .modal-close,
#customerEditorModal .btn-cancel,
#customerEditorModal .btn-confirm-print {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 8px;
  font-weight: 900;
  box-shadow: none;
  filter: none;
  background-image: none;
}

#customerEditorModal .modal-close.btn-outline-light,
#customerEditorModal .btn-cancel.btn-outline-secondary,
#customerEditorModal .btn-confirm-print.btn-primary {
  border-color: var(--bs-btn-border-color);
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
}

#customerEditorModal .modal-close.btn-outline-light:hover,
#customerEditorModal .modal-close.btn-outline-light:focus-visible,
#customerEditorModal .btn-cancel.btn-outline-secondary:hover,
#customerEditorModal .btn-cancel.btn-outline-secondary:focus-visible,
#customerEditorModal .btn-confirm-print.btn-primary:hover,
#customerEditorModal .btn-confirm-print.btn-primary:focus-visible {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

#customerEditorModal .modal-close {
  min-width: 54px;
  min-height: 40px !important;
  padding: 6px 14px !important;
}

#customerEditorModal .product-editor-actions {
  position: sticky;
  bottom: -20px;
  margin: 4px -20px -20px;
  padding: 14px 20px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  border-top: 1px solid #d8e5f0;
  background: rgba(246, 249, 252, .96);
}

#customerEditorModal .product-editor-actions .btn {
  min-width: 118px;
}

.product-editor-form .span-all {
  grid-column: 1 / -1;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
select,
textarea,
.custom-select-trigger {
  min-height: 56px !important;
  height: auto !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  overflow: visible;
}

.code-pill,
.product-main-group,
.badge-status {
  min-height: 34px !important;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  align-items: center !important;
}

.touch-btn,
.action-btn,
.modal-close,
.btn-cancel,
.btn-confirm-print,
.product-add-btn {
  min-height: 50px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}
/* FINAL product table Thai clipping fix. */
.table-page .product-add-btn,
.product-page .digi-table th,
.product-page .digi-table td,
.product-page .digi-table td strong,
.product-page .digi-table .code-pill,
.customer-page .digi-table th,
.customer-page .digi-table td,
.user-page .user-table th,
.user-page .user-table td {
  line-height: 1.6 !important;
}

.product-page .digi-table th,
.product-page .digi-table td,
.customer-page .digi-table th,
.customer-page .digi-table td,
.user-page .user-table th,
.user-page .user-table td {
  overflow: hidden;
}

/* Final table frame: keep the old in-card scroll behavior. */
.page-body {
  display: flex;
  min-height: 0;
}

.table-page {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
}

.table-page > .table-card {
  height: 100%;
  min-height: 0;
}

.table-scroll {
  min-height: 0;
  max-height: 100%;
  overflow: auto;
  scrollbar-gutter: stable;
}

.data-table {
  table-layout: fixed;
}

.table-colgroup th,
.table-colgroup td {
  width: auto !important;
}

.data-table th,
.data-table td {
  overflow: hidden;
  text-overflow: ellipsis;
}

.data-table thead th {
  position: sticky;
  top: 0;
  z-index: 5;
}

.product-page .digi-table th:nth-child(1),
.product-page .digi-table td:nth-child(1) { width: 90px; }
.product-page .digi-table th:nth-child(2),
.product-page .digi-table td:nth-child(2) { width: 165px; }
.product-page .digi-table th:nth-child(3),
.product-page .digi-table td:nth-child(3) { width: 173px; }
.product-page .digi-table th:nth-child(4),
.product-page .digi-table td:nth-child(4) { width: 170px; text-align: left; }
.product-page .digi-table th:nth-child(5),
.product-page .digi-table td:nth-child(5) { width: 100px; }
.product-page .digi-table th:nth-child(6),
.product-page .digi-table td:nth-child(6) { width: 160px; }
.product-page .digi-table th:nth-child(7),
.product-page .digi-table td:nth-child(7) { width: 112px; }

.user-page .user-table th:nth-child(1),
.user-page .user-table td:nth-child(1) { width: 150px !important; }
.user-page .user-table th:nth-child(2),
.user-page .user-table td:nth-child(2) { width: 144px !important; }
.user-page .user-table th:nth-child(3),
.user-page .user-table td:nth-child(3) { width: 132px !important; }
.user-page .user-table th:nth-child(5),
.user-page .user-table td:nth-child(5) { width: 112px !important; }
.user-page .user-table th:nth-child(6),
.user-page .user-table td:nth-child(6) {
  width: 116px !important;
  min-width: 116px;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

.product-page .digi-table td:nth-child(2),
.product-page .digi-table td:nth-child(3),
.product-page .digi-table td:nth-child(4),
.product-page .digi-table td:nth-child(6),
.customer-page .digi-table td,
.user-page .user-table td,
.report-page .report-table td {
  white-space: normal;
  overflow-wrap: anywhere;
}

.product-page .digi-table td:nth-child(4) {
  overflow-wrap: normal;
}

.table-colgroup .text-nowrap,
.table-colgroup .text-truncate {
  white-space: nowrap !important;
}

.table-colgroup .text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-page .digi-table th,
.product-page .digi-table td {
  padding-left: 12px;
  padding-right: 12px;
}

.product-page .product-thumb {
  width: 56px;
  height: 56px;
}

/* Product editor modal */
.product-page .product-editor-overlay {
  align-items: center;
  padding: 24px;
  background: rgba(15, 34, 55, .64);
  backdrop-filter: blur(3px);
}

.product-page .product-editor-box {
  width: min(860px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border: 1px solid rgba(209, 225, 238, .95);
  border-radius: 12px;
  background: #f6f9fc;
  box-shadow: 0 28px 70px rgba(7, 31, 56, .34);
  overflow: hidden;
}

.product-page .product-editor-box .modal-header {
  min-height: 72px;
  padding: 14px 20px;
  background: linear-gradient(135deg, #0f3b67, #082b4e);
}

.product-page .product-editor-box .modal-header h2 {
  font-size: 27px;
  line-height: 1.25;
}

.product-page .product-editor-box .modal-close {
  min-width: 54px;
  min-height: 42px;
  border-radius: 8px;
}

.product-page .product-editor-form {
  min-height: 0;
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
  overflow-y: auto;
  background: #f6f9fc;
}

.product-page .product-editor-form label {
  min-width: 0;
  gap: 7px;
  color: #24364c;
  font-size: 15px;
  line-height: 1.35;
}

.product-page .product-editor-form label > span:first-child {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
}

.product-page .product-editor-form input,
.product-page .product-editor-form .custom-select-trigger {
  min-height: 56px !important;
  border-color: #d5e2ed;
  border-radius: 9px;
  background: #fff;
  font-size: 17px;
}

.product-page #editProductCode {
  color: #0f3b67;
  background: #eef5fb;
  font-family: "IBM Plex Mono", Consolas, monospace;
  letter-spacing: 0;
}

.product-page .product-image-field {
  padding: 14px;
  border: 1px solid #d8e5f0;
  border-radius: 12px;
  background: #fff;
}

.product-page .product-image-picker {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.product-page .product-image-preview {
  width: 112px;
  height: 90px;
  display: grid;
  place-items: center;
  border: 1px dashed #b9cde0;
  border-radius: 10px;
  background: #f3f8fc;
  overflow: hidden;
}

.product-page .product-image-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-page .product-image-placeholder {
  display: grid;
  place-items: center;
  gap: 5px;
  color: #6b7d90;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.product-page .product-image-placeholder i {
  font-size: 24px;
}

.product-page .product-image-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.product-page .product-image-actions input[type="file"] {
  width: min(380px, 100%);
  min-height: 42px !important;
  padding: 6px !important;
  border: 1px solid #d5e2ed;
  border-radius: 9px;
  background: #fff;
  font-size: 15px;
}

.product-page .product-image-actions input[type="file"]::file-selector-button {
  min-height: 30px;
  margin-right: 10px;
  border: 0;
  border-radius: 7px;
  background: #e9f2fb;
  color: #0f3b67;
  font-weight: 900;
}

.product-page .close-page::before {
  content: none;
}

.product-page .close-page,
.product-page .product-add-btn,
.product-page .modal-close,
.product-page .btn-cancel,
.product-page .btn-confirm-print {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 8px;
  font-weight: 900;
  box-shadow: none;
  filter: none;
}

.product-page .close-page,
.product-page .product-add-btn {
  min-height: 48px;
  padding: 8px 18px;
}

.product-page .close-page.btn-danger,
.product-page .product-add-btn.btn-success,
.product-page .modal-close.btn-outline-light,
.product-page .btn-cancel.btn-outline-secondary,
.product-page .btn-cancel.btn-outline-danger,
.product-page .btn-confirm-print.btn-primary {
  background-image: none;
}

.product-page .product-add-btn {
  border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
}

.product-page .close-page.btn-danger {
  border-color: var(--bs-btn-border-color);
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
}

.product-page .close-page.btn-danger:hover,
.product-page .close-page.btn-danger:focus-visible,
.product-page .product-add-btn:hover,
.product-page .product-add-btn:focus-visible {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.product-page .modal-close {
  min-width: 54px;
  min-height: 40px;
  padding: 6px 14px;
}

.product-page .product-image-actions .btn-cancel {
  min-height: 40px !important;
  padding: 7px 12px !important;
}

.product-page .product-editor-actions {
  position: sticky;
  bottom: -20px;
  margin: 4px -20px -20px;
  padding: 14px 20px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  border-top: 1px solid #d8e5f0;
  background: rgba(246, 249, 252, .96);
}

.product-page .product-editor-actions .btn {
  min-width: 118px;
}

@media (max-width: 760px) {
  .product-page .product-editor-overlay {
    padding: 12px;
  }

  .product-page .product-editor-box {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
  }

  .product-page .product-editor-form,
  .product-page .product-image-picker {
    grid-template-columns: 1fr;
  }

  .product-page .product-image-preview {
    width: 100%;
  }
}

/* User management modal */
.user-page .close-page::before {
  content: none;
}

.user-page .close-page,
.user-page .product-add-btn,
.user-page .modal-close,
.user-page .btn-cancel,
.user-page .btn-confirm-print {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 8px;
  font-weight: 900;
  box-shadow: none;
  filter: none;
}

.user-page .close-page,
.user-page .product-add-btn {
  min-height: 48px;
  padding: 8px 18px;
}

.user-page .close-page.btn-danger,
.user-page .product-add-btn.btn-success,
.user-page .modal-close.btn-outline-light,
.user-page .btn-cancel.btn-outline-secondary,
.user-page .btn-confirm-print.btn-primary {
  background-image: none;
}

.user-page .close-page.btn-danger,
.user-page .product-add-btn.btn-success {
  border-color: var(--bs-btn-border-color);
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
}

.user-page .close-page.btn-danger:hover,
.user-page .close-page.btn-danger:focus-visible,
.user-page .product-add-btn.btn-success:hover,
.user-page .product-add-btn.btn-success:focus-visible {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.user-page .product-editor-overlay {
  align-items: center;
  padding: 24px;
  background: rgba(15, 34, 55, .64);
  backdrop-filter: blur(3px);
}

.user-page .user-editor-box {
  width: calc(100vw - 32px);
  height: calc(100vh - 32px);
  max-height: calc(100vh - 32px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border: 1px solid rgba(209, 225, 238, .95);
  border-radius: 12px;
  background: #f6f9fc;
  box-shadow: 0 28px 70px rgba(7, 31, 56, .34);
  overflow: hidden;
}

.user-page .user-editor-box .modal-header {
  min-height: 72px;
  padding: 14px 20px;
  background: linear-gradient(135deg, #0f3b67, #082b4e);
}

.user-page .user-editor-box .modal-header h2 {
  font-size: 27px;
  line-height: 1.25;
}

.user-page .user-editor-box .modal-close {
  min-width: 54px;
  min-height: 40px;
  padding: 6px 14px;
}

.user-page .user-editor-form {
  min-height: 0;
  padding: 16px 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  overflow: hidden;
  background: #f6f9fc;
}

.user-page .user-editor-form label {
  min-width: 0;
  gap: 7px;
  color: #24364c;
  font-size: 15px;
  line-height: 1.35;
}

.user-page .user-editor-form input,
.user-page .user-editor-form select {
  min-height: 48px !important;
  border-color: #d5e2ed;
  border-radius: 9px;
  background-color: #fff;
  font-size: 17px;
}

.user-page .user-permission-grid {
  max-height: none;
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  border: 1px solid #d8e5f0;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.user-page .permission-card {
  min-height: 88px;
  padding: 10px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  border: 1px solid #d7e4ef;
  border-radius: 10px;
  background: #f8fbff;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}

.user-page .permission-card.active {
  border-color: #20c997;
  background: #ecfbf7;
  box-shadow: inset 0 0 0 1px rgba(32, 201, 151, .25);
}

.user-page .permission-check {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid #cfddea;
  border-radius: 8px;
  background: #fff;
  color: transparent;
  font-size: 18px;
}

.user-page .permission-card.active .permission-check {
  border-color: #0d6efd;
  background: #0d6efd;
  color: #fff;
}

.user-page .permission-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.user-page .permission-copy strong {
  margin: 0;
  color: #24364c;
  font-size: 16px;
  line-height: 1.25;
}

.user-page .permission-copy small {
  color: #6b7d90;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.3;
}

.user-page .user-editor-form .setting-card {
  min-height: 58px;
  padding: 10px 14px;
  border: 1px solid #d8e5f0;
  border-radius: 12px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.user-page .user-editor-form .setting-card strong {
  min-width: 0;
  color: #24364c;
  font-size: 16px;
  line-height: 1.2;
}

.user-page .toggle-switch {
  position: relative;
  width: 56px;
  height: 30px;
  flex: 0 0 56px;
  display: inline-block;
}

.user-page .toggle-switch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.user-page .toggle-slider {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #d7e4ef;
  box-shadow: inset 0 0 0 1px rgba(12, 61, 107, .08);
  transition: background var(--transition), box-shadow var(--transition);
}

.user-page .toggle-slider::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 3px 8px rgba(7, 31, 56, .18);
  transition: transform var(--transition);
}

.user-page .toggle-switch input:checked + .toggle-slider {
  background: linear-gradient(135deg, #0d6efd, #0b5ed7);
}

/* ── Customer page toolbar buttons ──────────────── */

/* ── customer-page button styles (mirrors product-page) ── */
.customer-page .product-add-btn,
.customer-page .btn-import {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 8px;
  font-weight: 900;
  box-shadow: none;
  filter: none;
  min-height: 48px;
  padding: 8px 18px;
}

.customer-page .product-add-btn.btn-success,
.customer-page .product-add-btn.btn-outline-success {
  background-image: none !important;
  background-color: #198754 !important;
  border-color: #198754 !important;
  color: #fff !important;
}

.customer-page .product-add-btn.btn-success:hover,
.customer-page .product-add-btn.btn-outline-success:hover,
.customer-page .product-add-btn.btn-success:focus-visible,
.customer-page .product-add-btn.btn-outline-success:focus-visible {
  background-color: #157347 !important;
  border-color: #146c43 !important;
}


/* ============================================================
   HOME PAGE  (merged from former css/home.css)
   ============================================================ */
/* Home page */
.home-page {
  overflow: auto;
}

.home-shell {
  min-height: 100vh;
  padding: 34px 36px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: 26px;
  color: #0f1f30;
  background:
    linear-gradient(135deg, rgba(248,251,255,.98), rgba(238,246,251,.96)),
    radial-gradient(circle at 78% 22%, rgba(0,201,167,.12), transparent 30%);
  background-size: cover;
  background-position: center;
  position: relative;
}

.home-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(12,61,107,.08) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

.home-hero,
.home-menu {
  position: relative;
  z-index: 1;
}

.home-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
}

.home-hero h1 {
  max-width: 900px;
  margin: 0 0 12px;
  font-size: 60px;
  line-height: 1.08;
  font-weight: 900;
  color: var(--text-primary);
  text-wrap: balance;
}

.home-hero h2 {
  margin: 0;
  color: var(--primary);
  font-size: 24px;
  line-height: 1.35;
  font-weight: 800;
}

.home-hero p {
  max-width: 620px;
  margin: 0;
  color: var(--text-secondary);
  font-size: 23px;
  line-height: 1.55;
  font-weight: 600;
}

.home-menu {
  align-self: center;
  justify-self: center;
  width: min(1100px, 100%);
  display: grid;
  grid-template-columns: repeat(3, minmax(210px, 1fr));
  gap: 16px;
}

.home-tile {
  min-height: 144px;
  padding: 22px 24px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.94);
  color: var(--text-primary);
  box-shadow: var(--card-shadow);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.home-tile:hover,
.home-tile:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--card-shadow-hover);
  border-color: rgba(20,96,168,.22);
  color: var(--text-primary);
  text-decoration: none;
  outline: none;
}

.home-tile.primary:hover,
.home-tile.primary:focus-visible,
.home-tile.danger-tile:hover,
.home-tile.danger-tile:focus-visible {
  color: #fff;
}

.home-tile.primary {
  color: #fff;
  background: linear-gradient(135deg, var(--primary-light), var(--primary));
  border-color: rgba(255,255,255,.18);
}

.home-tile strong {
  font-size: 29px;
  line-height: 1.15;
  font-weight: 900;
}

.home-tile span {
  color: var(--text-secondary);
  font-size: 17px;
  line-height: 1.35;
  font-weight: 600;
}

.home-tile.primary span {
  color: rgba(255,255,255,.78);
}

.home-tile.disabled {
  opacity: .48;
  filter: grayscale(.18);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: auto;
}

.home-tile.disabled:hover,
.home-tile.disabled:focus-visible {
  transform: none;
  box-shadow: none;
  border-color: var(--card-border);
}

.home-tile.disabled > i {
  opacity: .72;
}

.home-tile.disabled strong,
.home-tile.disabled span {
  color: var(--text-secondary);
}

.home-tile.disabled.primary {
  background: linear-gradient(135deg, rgba(66,100,155,.55), rgba(34,84,145,.55));
}

.home-tile.disabled.primary span {
  color: rgba(255,255,255,.62);
}

.home-tile.danger-tile {
  color: #ffffff;
  border-color: rgba(255,255,255,.2);
  background: linear-gradient(135deg, #ef4761, #c9183a);
  box-shadow: 0 18px 38px rgba(201,24,58,.24), 0 8px 18px rgba(18,38,63,.08);
}

.home-tile.danger-tile > i {
  background: rgba(255,255,255,.18);
  color: #ffffff;
}

.home-tile.danger-tile strong,
.home-tile.danger-tile span {
  color: #ffffff;
}

.home-tile.danger-tile:hover,
.home-tile.danger-tile:focus-visible {
  border-color: rgba(255,255,255,.36);
  box-shadow: 0 24px 48px rgba(201,24,58,.30), 0 10px 20px rgba(18,38,63,.10);
}

@media (min-width: 901px) and (max-width: 1100px) and (max-height: 820px) {
  .home-page {
    overflow: hidden;
  }

  .home-shell {
    min-height: 100vh;
    padding: 22px 24px 28px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    gap: 14px;
  }

  .home-hero h1 {
    font-size: 48px;
  }

  .home-hero p {
    font-size: 20px;
    line-height: 1.25;
  }

  .home-menu {
    width: min(930px, 100%);
    align-self: center;
    justify-self: center;
    grid-template-columns: repeat(3, minmax(190px, 1fr));
    gap: 12px;
  }

  .home-tile {
    min-height: 112px;
    padding: 16px 18px;
  }

  .home-tile strong {
    font-size: 24px;
  }

  .home-tile span {
    font-size: 15px;
  }
}

@media (max-width: 760px) {
  .home-shell {
    padding: 20px;
    grid-template-columns: 1fr;
  }

  .home-hero h1 {
    font-size: 42px;
  }

  .home-hero p {
    font-size: 18px;
  }

  .home-menu {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   ABOUT PAGE  (merged from former css/about.css)
   ============================================================ */
html:has(body.about-v2),
body.about-v2 {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background:
    radial-gradient(circle at 14% 14%, rgba(0, 188, 166, .14), transparent 28%),
    radial-gradient(circle at 86% 10%, rgba(20, 58, 102, .12), transparent 30%),
    linear-gradient(135deg, #eef6fb 0%, #f8fbff 52%, #edf4f8 100%);
}

body.about-v2 .page-shell {
  min-height: 100vh;
  height: 100vh;
  padding-bottom: 12px;
  overflow: hidden;
}

body.about-v2 .page-top {
  min-height: 66px;
  padding: 9px 22px 8px;
  border-bottom: 1px solid rgba(15, 45, 72, .1);
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 10px 28px rgba(15, 45, 72, .08);
}

body.about-v2 .page-top h1 {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 0;
  color: #10243a;
  font-size: 29px;
  font-weight: 800;
  line-height: 1.18;
}

body.about-v2 .page-top h1 i {
  color: #143a66;
}

body.about-v2 .page-subtitle {
  margin: 2px 0 0;
  color: #667a8f;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

body.about-v2 .close-page {
  height: 48px;
  min-width: 90px;
}

body.about-v2 .about-v2-body {
  height: calc(100vh - 78px);
  padding: 16px 24px 0;
  display: grid;
  grid-template-rows: 144px minmax(0, 1fr);
  gap: 12px;
  overflow: hidden;
}

.about-hero-card,
.about-panel {
  border: 1px solid rgba(159, 184, 204, .44);
  border-radius: 14px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 14px 34px rgba(15, 45, 72, .10);
}

.about-hero-card {
  position: relative;
  overflow: hidden;
  padding: 18px 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  align-items: center;
  gap: 18px;
}

.about-hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, rgba(0, 188, 166, .12), transparent 45%),
    radial-gradient(circle at 95% 20%, rgba(20, 58, 102, .13), transparent 32%);
  pointer-events: none;
}

.about-brand,
.about-version-card {
  position: relative;
  z-index: 1;
}

.about-brand {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}

.about-logo {
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  color: #ffffff;
  font-size: 38px;
  background: linear-gradient(145deg, #0fb79e, #143a66);
  box-shadow: 0 18px 34px rgba(15, 183, 158, .28);
}

.about-kicker {
  display: inline-flex;
  width: max-content;
  padding: 4px 10px;
  border-radius: 999px;
  color: #075b69;
  background: #dff8f4;
  font-family: "IBM Plex Mono", Consolas, monospace;
  font-size: 13px;
  font-weight: 800;
}

.about-brand h2 {
  margin: 7px 0 4px;
  color: #061b34;
  font-size: 32px;
  font-weight: 800;
  line-height: 1.18;
}

.about-brand p {
  max-width: 660px;
  margin: 0;
  color: #4f6478;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
}

.about-version-card {
  min-height: 92px;
  padding: 16px 18px;
  display: grid;
  align-content: center;
  justify-items: end;
  border-radius: 18px;
  border: 1px solid rgba(0, 188, 166, .35);
  background: linear-gradient(145deg, #effffb, #e9f4ff);
}

.about-version-card span,
.about-version-card small {
  color: #557187;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.about-version-card strong {
  color: #143a66;
  font-family: "IBM Plex Mono", Consolas, monospace;
  font-size: 32px;
  font-weight: 800;
  line-height: 1.1;
}

.about-contact-layout {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 12px;
}

.about-panel {
  min-height: 0;
  padding: 16px;
  overflow: hidden;
}

.distributor-panel {
  display: grid;
  grid-template-rows: auto 116px minmax(0, 1fr);
  gap: 12px;
}

.about-panel-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.about-panel-head.compact {
  gap: 10px;
}

.about-panel-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  font-size: 20px;
}

.about-panel-icon.teal {
  color: #008977;
  background: #ddfaf5;
}

.about-panel-icon.blue {
  color: #184b88;
  background: #e7f0ff;
}

.about-panel-icon.amber {
  color: #a85e00;
  background: #fff0dc;
}

.about-panel-head h3 {
  margin: 0;
  color: #071d36;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.28;
}

.about-panel-head p {
  margin: 1px 0 0;
  color: #60768b;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}

.distributor-card {
  min-height: 0;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  border: 1px solid rgba(0, 188, 166, .32);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(0, 188, 166, .14), transparent 42%),
    linear-gradient(145deg, #f3fffc, #eef7ff);
}

.distributor-logo {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  color: #ffffff;
  font-size: 30px;
  background: linear-gradient(145deg, #143a66, #0fb79e);
  box-shadow: 0 18px 32px rgba(20, 58, 102, .2);
}

.distributor-info {
  min-width: 0;
}

.distributor-label {
  display: inline-flex;
  padding: 5px 11px;
  border-radius: 999px;
  color: #075b69;
  background: #dff8f4;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
}

.distributor-info strong {
  display: block;
  margin-top: 7px;
  color: #061b34;
  font-size: 29px;
  font-weight: 800;
  line-height: 1.28;
}

.distributor-info p {
  margin: 0;
  color: #567086;
  font-family: "IBM Plex Mono", Consolas, monospace;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
}

.contact-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(104px, auto);
  align-content: start;
  gap: 10px;
}

.contact-card {
  min-width: 0;
  padding: 16px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 5px;
  align-content: center;
  border: 1px solid rgba(177, 200, 218, .62);
  border-radius: 15px;
  background: linear-gradient(145deg, #ffffff, #f4f9fc);
}

.contact-card i {
  grid-row: 1 / 3;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #143a66;
  background: #eaf2fb;
  font-size: 18px;
}

.contact-card span {
  color: #60768b;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.contact-card strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #061b34;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.4;
}

.about-side {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  gap: 14px;
}

.system-card {
  display: grid;
  grid-template-rows: auto auto;
  align-content: start;
  gap: 16px;
}

.about-info-list {
  margin: 0;
  display: grid;
  grid-auto-rows: auto;
  align-content: start;
  gap: 10px;
}

.about-info-list div {
  min-height: 64px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 12px;
  background: #f3f8fb;
}

.about-info-list dt {
  color: #60768b;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.about-info-list dd {
  margin: 0;
  color: #0b2f58;
  font-size: 14px;
  font-weight: 800;
  text-align: right;
  line-height: 1.35;
}

@media (max-width: 1100px) {
  body.about-v2 .about-v2-body {
    grid-template-rows: 138px minmax(0, 1fr);
    gap: 10px;
    padding: 14px 23px 0;
  }

  .about-hero-card {
    padding: 16px;
    grid-template-columns: minmax(0, 1fr) 176px;
  }

  .about-logo {
    width: 68px;
    height: 68px;
    font-size: 30px;
  }

  .about-brand {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 13px;
  }

  .about-brand h2 {
    font-size: 29px;
    line-height: 1.2;
  }

  .about-brand p {
    font-size: 13px;
    line-height: 1.5;
  }

  .about-version-card {
    min-height: 90px;
  }

  .about-contact-layout {
    grid-template-columns: minmax(0, 1fr) 296px;
    gap: 10px;
  }

  .about-panel {
    padding: 15px;
  }

  .distributor-panel {
    grid-template-rows: auto 108px minmax(0, 1fr);
    gap: 11px;
  }

  .distributor-card {
    padding: 13px 14px;
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 13px;
  }

  .distributor-logo {
    width: 70px;
    height: 70px;
    font-size: 28px;
  }

  .distributor-info strong {
    font-size: 25px;
    line-height: 1.3;
  }

  .contact-grid {
    gap: 10px;
    grid-auto-rows: minmax(92px, auto);
  }

  .contact-card {
    padding: 13px;
    grid-template-columns: 38px minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 4px;
  }

  .contact-card i {
    width: 38px;
    height: 38px;
    font-size: 16px;
  }

  .contact-card strong {
    font-size: 15px;
    line-height: 1.38;
  }

  .about-panel-head h3 {
    font-size: 22px;
    line-height: 1.28;
  }

  .about-info-list div {
    min-height: 60px;
    padding: 11px 12px;
  }
}



/* ============================================================
   OPERATOR PAGE  (merged from former css/operator.css)
   ============================================================ */
/* ─── Operator v2 — 1024×768 full-screen ─── */
html:has(body.operator-v2) { height: 100%; overflow: hidden; }

body.operator-v2 {
  height: 100vh; overflow: hidden;
  background:
    radial-gradient(circle at 10% 16%, rgba(20,184,166,.13) 0%, transparent 30%),
    radial-gradient(circle at 90% 10%, rgba(245,158,11,.11) 0%, transparent 28%),
    linear-gradient(160deg, #f0f7ff 0%, #e8f5f0 100%);
}
body.operator-v2 .page-shell {
  height: 100vh; min-height: 0;
  display: flex; flex-direction: column; overflow: hidden;
}
body.operator-v2 .page-top {
  flex: 0 0 62px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px;
  background: rgba(255,255,255,.96); backdrop-filter: blur(12px);
  border-bottom: 1.5px solid rgba(14,165,146,.18);
  box-shadow: 0 4px 18px rgba(15,23,42,.09); z-index: 10;
}
body.operator-v2 .page-top h1 {
  margin: 0; font-size: 24px; font-weight: 900; color: #0c2340; letter-spacing: -.02em;
  display: flex; align-items: center; gap: 10px;
}
body.operator-v2 .page-top h1 i { color: #0f766e; }
body.operator-v2 .close-page {
  display: inline-flex; align-items: center; gap: 7px;
  height: 42px; padding: 0 20px; border-radius: 10px;
  font-size: 16px; font-weight: 900; text-decoration: none;
  color: var(--bs-btn-color); background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
  box-shadow: 0 4px 12px rgba(220,53,69,.2);
}
body.operator-v2 .close-page::before { content: none; }
body.operator-v2 .close-page:hover {
  color: var(--bs-btn-hover-color); background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
body.operator-v2 .page-body.operator-v2-body {
  flex: 1 1 0; min-height: 0; padding: 14px 18px;
  display: flex; overflow: hidden;
}
body.operator-v2 .operator-v2-grid {
  flex: 1 1 0; min-width: 0; min-height: 0;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.1fr);
  gap: 14px;
}
body.operator-v2 .operator-panel {
  min-width: 0; min-height: 0;
  display: flex; flex-direction: column; overflow: hidden;
  background: rgba(255,255,255,.97);
  border: 1px solid rgba(148,163,184,.22); border-radius: 18px;
  box-shadow: 0 8px 28px rgba(15,23,42,.10);
}
body.operator-v2 .operator-panel-head {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 12px; padding: 14px 20px;
  border-bottom: 1px solid rgba(148,163,184,.18);
  background: linear-gradient(135deg, rgba(248,250,252,.98), rgba(236,253,245,.8));
}
body.operator-v2 .operator-panel-head h2 {
  margin: 0; font-size: 22px; font-weight: 900; color: #0c2340; letter-spacing: -.02em;
  display: flex; align-items: center;
}
body.operator-v2 .operator-panel-icon {
  flex: 0 0 auto; width: 44px; height: 44px;
  display: grid; place-items: center; border-radius: 13px; font-size: 20px;
}
body.operator-v2 .operator-panel-icon.teal {
  color: #0f766e; background: linear-gradient(135deg, #ccfbf1, #e0fdfa);
  box-shadow: 0 3px 10px rgba(20,184,166,.2);
}
body.operator-v2 .operator-panel-icon.amber {
  color: #b45309; background: linear-gradient(135deg, #ffedd5, #fff7ed);
  box-shadow: 0 3px 10px rgba(245,158,11,.2);
}
body.operator-v2 .label-size-badge {
  display: inline-block; margin-left: 10px; padding: 2px 9px;
  border-radius: 99px; background: rgba(245,158,11,.15); color: #b45309;
  font-size: 13px; font-weight: 800; border: 1px solid rgba(245,158,11,.3);
  vertical-align: middle;
}
body.operator-v2 .operator-form {
  flex: 1 1 0; min-height: 0; padding: 20px 22px;
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px 16px; align-content: start; overflow: hidden;
}
body.operator-v2 .operator-form .span-all { grid-column: 1 / -1; }
body.operator-v2 .operator-form label {
  display: flex; flex-direction: column; gap: 6px;
  color: #1e3a5f; font-size: 15px; font-weight: 900;
}
body.operator-v2 .operator-form input {
  height: 50px; padding: 0 16px;
  border: 1.5px solid #c8d9eb; border-radius: 11px;
  background: #f8fbff; color: #07182f;
  font-family: "Sarabun","Noto Sans Thai",sans-serif;
  font-size: 18px; font-weight: 800;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.04);
  transition: border-color .15s, box-shadow .15s;
}
body.operator-v2 .operator-form input:focus {
  outline: 0; border-color: #14b8a6; background: #fff;
  box-shadow: 0 0 0 4px rgba(20,184,166,.14);
}
body.operator-v2 .operator-form input::placeholder { color: #b0bec8; font-weight: 600; }
body.operator-v2 .operator-save-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  justify-self: end;
  width: auto;
  min-width: 230px;
  max-width: min(100%, 340px);
  height: 52px; margin-top: 4px; padding: 0 22px; border-radius: 13px;
  font-size: 19px; font-weight: 900;
  color: var(--bs-btn-color); background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
  box-shadow: 0 8px 22px rgba(13,110,253,.22);
  transition: transform .12s, box-shadow .12s;
}
body.operator-v2 .operator-save-button:hover {
  color: var(--bs-btn-hover-color); background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  transform: translateY(-1px); box-shadow: 0 12px 28px rgba(13,110,253,.28);
}

/* ─── Preview stage ─── */
body.operator-v2 .operator-preview-stage {
  flex: 1 1 0; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; overflow: hidden;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,251,235,.7), transparent 55%),
    linear-gradient(180deg, #fafcff, #f3f8f4);
}

/* ─── Label container — 5cm × 5.5cm = 10:11 ─── */
body.operator-v2 .operator-preview-label {
  aspect-ratio: 10 / 11;
  max-width:  min(calc(100% - 8px), calc((100vh - 62px - 28px - 73px - 32px) * 10/11));
  max-height: calc(100% - 8px);
  width: auto; height: auto; flex-shrink: 0;

  padding: 14px 15px 12px;
  display: flex; flex-direction: column; overflow: hidden;

  color: #111; background: #fff;
  border: 2.5px solid #111; border-radius: 4px;
  font-family: Tahoma,"Sarabun","Noto Sans Thai",sans-serif;
  box-shadow: 0 12px 36px rgba(15,23,42,.14), 4px 4px 0 rgba(15,23,42,.06);
}

/* ─── lbl-* — operator preview scale (~2.3× print) ─── */
body.operator-v2 .operator-preview-label .lbl-brand {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding-bottom: 6px;
}
body.operator-v2 .operator-preview-label .lbl-shop-name {
  display: block; font-size: 28px; font-weight: 900; line-height: 1.1; text-align: center; width: 100%;
}
body.operator-v2 .operator-preview-label .lbl-shop-addr,
body.operator-v2 .operator-preview-label .lbl-shop-phone {
  display: block; font-size: 16px; line-height: 1.3; color: #222;
}
body.operator-v2 .operator-preview-label .lbl-hr {
  border: 0; border-top: 1px solid #111; margin: 6px 0; opacity: .3;
}
body.operator-v2 .operator-preview-label .lbl-hr2 { margin: 5px 0; }
body.operator-v2 .operator-preview-label .lbl-product-name {
  text-align: center; font-size: 29px; font-weight: 900; line-height: 1.1;
  margin: 4px 0 2px;
}
body.operator-v2 .operator-preview-label .lbl-weight-box {
  border: 2px solid #111; border-radius: 2px;
  padding: 7px 8px; margin: 6px 0;
  display: flex; flex-direction: column; align-items: center; flex-shrink: 0;
}
body.operator-v2 .operator-preview-label .lbl-wt-label {
  font-size: 16px; font-weight: 900; line-height: 1; margin-bottom: 2px; color: #333;
}
body.operator-v2 .operator-preview-label .lbl-wt-value {
  display: block; font-family: "IBM Plex Mono",monospace;
  font-size: 60px; font-weight: 900; line-height: .88; letter-spacing: -.04em;
}
body.operator-v2 .operator-preview-label .lbl-wt-unit {
  font-family: Tahoma,"Sarabun",sans-serif;
  font-size: 22px; font-weight: 700; margin-left: 4px; letter-spacing: 0;
}
body.operator-v2 .operator-preview-label .lbl-info-grid {
  display: grid; grid-template-columns: minmax(0,1fr) 128px;
  gap: 10px; align-items: center; margin: 4px 0;
}
body.operator-v2 .operator-preview-label .lbl-rows { min-width: 0; }
body.operator-v2 .operator-preview-label .lbl-row {
  display: flex; justify-content: space-between; gap: 6px;
  font-size: 18px; font-weight: 800; line-height: 1.5;
}
body.operator-v2 .operator-preview-label .lbl-row b {
  font-size: 18px; font-weight: 900; text-align: right;
}
body.operator-v2 .operator-preview-label .lbl-qr {
  width: 128px; height: 128px; image-rendering: pixelated; justify-self: end;
}
body.operator-v2 .operator-preview-label .lbl-total {
  border: 2px solid #111; border-radius: 2px; text-align: center;
  font-size: 32px; font-weight: 900; padding: 5px 8px; margin: 3px 0; line-height: 1;
}
body.operator-v2 .operator-preview-label .lbl-footer {
  margin-top: auto; text-align: center;
  font-size: 15px; line-height: 1.35; color: #333;
}


/* ============================================================
   REPORTS PAGE  (merged from former css/reports.css)
   ============================================================ */
.report-page .close-page::before {
  content: none;
}

.report-page .close-page,
.report-page .report-export-btn,
.report-page .report-clear-filter,
.report-page .report-print-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 8px;
  font-weight: 900;
  box-shadow: none;
  filter: none;
  background-image: none;
}

.report-page .close-page.btn-danger,
.report-page .report-export-btn.btn-outline-primary,
.report-page .report-clear-filter.btn-outline-info,
.report-page .report-print-btn.btn-outline-primary {
  border-color: var(--bs-btn-border-color);
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
}

.report-page .close-page.btn-danger:hover,
.report-page .close-page.btn-danger:focus-visible,
.report-page .report-export-btn.btn-outline-primary:hover,
.report-page .report-export-btn.btn-outline-primary:focus-visible,
.report-page .report-clear-filter.btn-outline-info:hover,
.report-page .report-clear-filter.btn-outline-info:focus-visible,
.report-page .report-print-btn.btn-outline-primary:hover,
.report-page .report-print-btn.btn-outline-primary:focus-visible {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.report-page .close-page {
  min-height: 48px;
  padding: 8px 18px;
}

.report-page .table-page {
  gap: 0;
}

.report-page .report-card {
  position: relative;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
}

.report-page .report-toolbar {
  display: block;
  min-height: 86px;
  padding: 14px 16px 12px;
}

.report-page .report-toolbar .product-toolbar-title {
  display: block;
  min-width: 0;
  padding-right: 190px;
}

.report-page .report-toolbar h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: 24px;
  font-weight: 900;
  line-height: 1.25;
}

.report-page #reportSummary {
  margin: 2px 0 10px;
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.report-page .toolbar-actions {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.report-page .report-export-btn {
  min-width: 164px;
  min-height: 54px !important;
  padding: 10px 18px !important;
  border-color: #c7e1eb;
  color: #1b4778;
  background-color: #fff;
}

.report-page .report-filter-panel {
  padding: 12px 16px 14px;
  display: grid;
  grid-template-columns: 142px 142px repeat(4, minmax(0, 1fr));
  grid-auto-rows: 76px;
  column-gap: 8px;
  row-gap: 8px;
  align-items: start;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: #f3f8fc;
}

.report-page .report-filter-panel .filter-date {
  grid-column: span 1;
  width: 142px;
  max-width: 142px;
}

.report-page .report-filter-panel .filter-wide {
  grid-column: span 2;
}

.report-page .report-filter-panel label {
  display: grid;
  grid-template-rows: 16px 56px;
  gap: 4px;
  min-width: 0;
  min-height: 76px;
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
  line-height: 16px;
}

.report-page .report-filter-panel label span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-page .report-filter-panel .form-control,
.report-page .report-filter-panel .form-select {
  width: 100%;
  height: 56px !important;
  min-height: 56px !important;
  padding: 10px 14px !important;
  border-color: #cfddea;
  border-radius: 10px;
  color: var(--text-primary);
  background-color: #fff;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
  box-shadow: none;
}

.report-page .report-filter-panel .filter-date .form-control {
  padding-left: 10px !important;
  padding-right: 8px !important;
}

.report-page .report-filter-panel .form-control:focus,
.report-page .report-filter-panel .form-select:focus {
  border-color: #8bbbdc;
  box-shadow: 0 0 0 .2rem rgba(20, 96, 168, .12);
}

.report-page .report-clear-filter {
  grid-column: span 2;
  align-self: end;
  height: 56px;
  min-height: 56px !important;
  padding: 8px 18px !important;
  border-color: #c7e1eb;
  color: #1b4778;
  background-color: #fff;
}

.report-page .table-scroll {
  min-height: 0;
  overflow: auto;
  scrollbar-gutter: stable;
}

.report-page .report-table {
  width: 100%;
  table-layout: fixed;
}

.report-page .report-table th,
.report-page .report-table td {
  vertical-align: middle;
}

.report-page .report-table th:nth-child(7),
.report-page .report-table td:nth-child(7) {
  text-align: center;
  white-space: nowrap;
  overflow: visible !important;
  text-overflow: clip !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
}

.report-page .report-table td:nth-child(1),
.report-page .report-table td:nth-child(2),
.report-page .report-table td:nth-child(5),
.report-page .report-table td:nth-child(6) {
  font-family: "IBM Plex Mono", Consolas, monospace;
  font-weight: 800;
}

.report-page .report-date-cell {
  font-family: "IBM Plex Mono", Consolas, monospace;
  line-height: 1.15 !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.report-page .report-date-main,
.report-page .report-time-main {
  display: block;
  white-space: nowrap;
}

.report-page .report-date-main {
  font-weight: 900;
}

.report-page .report-time-main {
  margin-top: 3px;
  color: #0f1f30;
  font-weight: 800;
}

.report-page .report-table td:nth-child(5),
.report-page .report-table td:nth-child(6) {
  text-align: right;
}

.report-page .report-subtext {
  display: block;
  margin-top: 2px;
  color: #64748b;
  font-family: "IBM Plex Mono", Consolas, monospace;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.15;
}

.report-page .report-operator-sub {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #4b6075;
  font-family: 'Sarabun', sans-serif;
  font-size: 12px;
  font-weight: 700;
}

.report-page .report-operator-sub i {
  flex: 0 0 auto;
  font-size: 11px;
  color: #8aa1b5;
}

.report-page .report-row-actions,
.today-row-actions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  white-space: nowrap;
}

.export-status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
}

.export-status-icon.export-status-ok { color: #1a7a3c; }
.export-status-icon.export-status-fail { color: #c0392b; }
.export-status-icon.export-status-na { color: #b3c2cf; }

.report-page .report-print-btn,
.report-page .report-text-row-btn,
.today-table .report-text-row-btn {
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px !important;
  padding: 0 !important;
  gap: 0;
  border-color: #c7e1eb;
  background-color: #eef8ff;
  color: #0c3d6b;
}

.report-page .report-print-btn i,
.report-page .report-text-row-btn i,
.today-table .report-text-row-btn i {
  font-size: 16px;
}

/* ปุ่มส่งออก Text สำหรับแถวที่ยังไม่ได้ส่ง (เน้นสีส้มให้รู้ว่ายังค้างส่ง) */
.report-page .report-text-row-btn.report-text-pending,
.today-table .report-text-row-btn.report-text-pending {
  border-color: #f0c069;
  background-color: #fff6e6;
  color: #b46a05;
}

.report-page .report-text-row-btn.report-text-pending:hover,
.report-page .report-text-row-btn.report-text-pending:focus-visible,
.today-table .report-text-row-btn.report-text-pending:hover,
.today-table .report-text-row-btn.report-text-pending:focus-visible {
  border-color: #e0a23a !important;
  background-color: #ffeccc !important;
  color: #9a5a04 !important;
}

.report-page .history-empty {
  min-height: 180px;
  padding: 28px 20px;
  display: grid;
  place-items: center;
  color: var(--text-secondary);
  font-size: 20px;
  font-weight: 800;
}

@media (max-width: 1100px) {
  .report-page .report-toolbar {
    min-height: 86px;
  }

  .report-page .report-filter-panel {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
  }
}

@media (max-width: 760px) {
  .report-page .report-toolbar {
    min-height: auto;
  }

  .report-page .report-filter-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .report-page .report-filter-panel .filter-date,
  .report-page .report-filter-panel .filter-wide,
  .report-page .report-clear-filter {
    grid-column: span 2;
  }
}


/* ============================================================
   SCALE PAGE  (merged from former css/scale.css)
   Scoped to body.scale-page so it cannot leak to other pages.
   --scale-* tokens kept global (uniquely named, no collision).
   Class names unchanged so app.js logic is unaffected.
   ============================================================ */
:root {
  --scale-primary: #113866;
  --scale-primary-2: #1e5b9f;
  --scale-teal: #00b99a;
  --scale-teal-dark: #058a75;
  --scale-text: #071f38;
  --scale-muted: #536172;
  --scale-border: #cfe0f2;
  --scale-bg: #eef6fb;
  --scale-font: "Noto Sans Thai", "Leelawadee UI", Tahoma, "Sarabun", sans-serif;
  --scale-mono: "IBM Plex Mono", Consolas, "Courier New", monospace;
}
html:has(body.scale-page) { height: 100%; }
body.scale-page {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--scale-bg);
  color: var(--scale-text);
  font-family: var(--scale-font);
}
@media (max-width: 760px) { body.scale-page { overflow: auto; } }

body.scale-page {
* {
  box-sizing: border-box;
}

button,
input,
select,
textarea {
  font-family: var(--scale-font);
}

.page-shell {
  width: 100vw;
  height: 100vh;
  min-width: 1024px;
  display: grid;
  grid-template-rows: 64px minmax(0, 1fr);
  background: linear-gradient(180deg, #f6fbff 0%, #eaf4fb 100%);
}

.page-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 16px;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid #dce7f2;
  box-shadow: 0 1px 4px rgba(7, 31, 56, .04);
}

.page-top h1 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 30px;
  line-height: 1.35;
  font-weight: 900;
  color: #14253b;
}

.top-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.connection-pill,
.clock-display,
.close-page {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  border: 1px solid #d5e1ef;
  background: #fff;
  color: #536172;
  font-size: 17px;
  line-height: 1.35;
  font-weight: 800;
  white-space: nowrap;
}

.connection-pill {
  gap: 9px;
  padding: 0 14px;
}

.status-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #f59e0b;
  box-shadow: 0 0 0 5px rgba(245, 158, 11, .12);
}

.status-dot.connected {
  background: #14c7ad;
  box-shadow: 0 0 0 5px rgba(20, 199, 173, .14);
}

.status-dot.error {
  background: #e43f5a;
  box-shadow: 0 0 0 5px rgba(228, 63, 90, .14);
}

.clock-display {
  min-width: 190px;
  padding: 0 14px;
}

.close-page {
  min-width: 92px;
  padding: 0 16px;
  border: 0;
  background: linear-gradient(135deg, #ec3d57, #c71e3f);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(199, 30, 63, .22);
}

.close-page::before {
  content: "\f00d";
  margin-right: 8px;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

.page-body.scale-layout {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(380px, 415px) minmax(0, 1fr);
  grid-template-areas:
    "left"
    "today";
  gap: 10px;
  padding: 12px;
  overflow: hidden;
}

.scale-left {
  grid-area: left;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(250px, 3fr);
  grid-template-areas: "entry actions";
  gap: 10px;
  padding: 10px 12px;
  border: 2px solid #74899f;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(243, 249, 252, .96));
  overflow: hidden;
}

.dev-controls {
  display: none;
}

.scale-entry-panel {
  grid-area: entry;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: 86px 86px minmax(138px, 1fr);
  grid-template-areas:
    "lot image"
    "operator image"
    "customer product";
  gap: 8px;
  padding: 8px 10px;
  border: 1.5px solid #3b82c4;
  border-radius: 9px;
  background: rgba(231, 243, 255, .72);
  overflow: hidden;
}

.lot-column { grid-area: lot; }
.operator-column { grid-area: operator; }
.customer-column { grid-area: customer; }
.product-column {
  grid-column: 2;
  grid-row: 1 / 4;
  display: grid;
  grid-template-rows: 180px minmax(138px, 1fr);
  gap: 8px;
  min-width: 0;
  min-height: 0;
  position: relative;
}

.scale-entry-column {
  min-width: 0;
  min-height: 0;
  position: relative;
}

.scale-job-field {
  height: 100%;
  display: grid;
  grid-template-rows: 24px minmax(0, 1fr);
  gap: 4px;
}

.scale-job-field span {
  display: block;
  color: #173b62;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 900;
}

.scale-job-field input {
  width: 100%;
  height: 58px;
  min-height: 58px;
  padding: 7px 12px 11px;
  border: 1.5px solid #2f79cf;
  border-radius: 9px;
  background: #fff;
  color: #071f38;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 900;
  outline: 0;
  box-shadow: 0 2px 8px rgba(59, 130, 196, .12);
}

.scale-job-field input::placeholder {
  color: #7a8086;
}

.selected-card {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  border: 1.5px solid var(--scale-border);
  border-radius: 5px;
  background: linear-gradient(135deg, #fbfdff, #f2f8f6);
  box-shadow: 0 3px 10px rgba(7, 31, 56, .06);
  overflow: hidden;
}

.product-image-card {
  grid-row: 1;
  display: grid;
  place-items: center;
  padding: 10px 14px;
}

#selectedProductCard {
  grid-row: 2;
}

.product-selected-image {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.product-image-frame img,
.product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.product-selected-image img {
  position: absolute;
  inset: 8px;
  width: calc(100% - 16px);
  height: calc(100% - 16px);
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: center;
  display: block;
}

.product-image-card .product-selected-image img {
  width: calc(100% - 16px);
  height: calc(100% - 16px);
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: center;
}

.product-image-empty {
  display: grid;
  place-items: center;
  color: #7392bb;
  background: #eef5fb;
}

.empty-state,
.product-info-selected {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  padding: 8px 14px;
  text-align: left;
  overflow: visible;
}

.empty-state {
  align-content: center;
  justify-items: center;
  padding: 14px 18px;
  text-align: center;
}

#selectedProductCard .empty-state,
#selectedCustomerCard .empty-state {
  place-content: center;
  place-items: center;
  padding: 64px 18px 18px;
}

.product-info-selected {
  align-content: start;
  justify-items: start;
}

.empty-state strong {
  padding-top: 0;
  color: var(--scale-text);
  font-size: 20px;
  line-height: 1.42;
  font-weight: 900;
}

.product-title-line {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
  overflow: visible;
}

.product-selected-content {
  width: 100%;
  max-width: 100%;
}

.product-code {
  justify-self: start;
  width: fit-content;
  max-width: 100%;
  min-height: 36px;
  display: inline-grid;
  place-items: center;
  padding: 4px 10px;
  border-radius: 5px;
  border: 1px solid #c9d9ec;
  background: #edf5ff;
  color: #073c78;
  font-family: var(--scale-mono);
  font-size: 18px;
  line-height: 1.45;
  font-weight: 900;
}

.product-name-sel {
  width: 100%;
  max-width: 100%;
  display: block;
  color: #071f38;
  font-family: var(--scale-font);
  font-size: 27px;
  line-height: 1.32;
  font-weight: 900;
  padding: 4px 0 8px;
  overflow: visible;
}

.product-cat-name,
.selected-price-line {
  width: 100%;
  max-width: 100%;
  display: block;
  color: #4f5d6c;
  font-size: 16px;
  line-height: 1.45;
  font-weight: 800;
  overflow: visible;
}

.selected-price-line strong {
  color: #8a4a08;
  font-family: var(--scale-mono);
  font-size: 16px;
}

.select-product-btn {
  position: absolute;
  z-index: 3;
  top: 8px;
  right: 8px;
  width: 110px;
  height: 38px;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 6px;
  outline: 2px solid rgba(20, 96, 168, .22);
  outline-offset: 2px;
  background: linear-gradient(135deg, #1460a8, #0c3d6b);
  color: #fff;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(20, 96, 168, .28);
}

.select-product-btn:hover {
  filter: brightness(1.06);
}

.customer-column .select-product-btn {
  background: linear-gradient(135deg, #00c9a7, #009e84);
  box-shadow: 0 8px 20px rgba(0, 201, 167, .30);
  outline-color: rgba(15, 159, 133, .28);
}

.product-column .select-product-btn {
  grid-row: 2;
}

.scale-action-panel {
  grid-area: actions;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 118px 44px minmax(78px, 1fr) minmax(78px, 1fr);
  gap: 8px;
  padding: 8px;
  border: 2px solid #0f9f85;
  border-radius: 9px;
  background: rgba(226, 251, 246, .72);
}

.weight-card {
  display: grid;
  grid-template-rows: 26px minmax(0, 1fr);
  gap: 2px;
  padding: 8px 10px;
  border: 3px solid #134e7d;
  border-radius: 13px;
  background: linear-gradient(165deg, #071f38 0%, #0c3560 62%, #0a4a5e 100%);
  color: #dff8ff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 8px 18px rgba(7, 31, 56, .20);
  overflow: hidden;
}

.card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 24px;
  padding: 0 8px;
  background: rgba(255, 255, 255, .04);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  font-size: 17px;
  line-height: 1.35;
  font-weight: 900;
}

.card-title-row strong {
  color: #18d7bc;
  font-family: var(--scale-mono);
  font-size: 14px;
}

.weight-display {
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 16px;
  text-align: right;
  color: #16d2b4;
  font-family: var(--scale-mono);
  line-height: 1;
  text-shadow: 0 0 18px rgba(22, 210, 180, .34);
}

.weight-int,
.weight-dot,
.weight-dec {
  display: inline-block;
  font-size: 54px;
  line-height: 1;
  font-weight: 900;
}

.weigh-save-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.save-mode-toggle,
.preview-toggle {
  min-width: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  border: 1px solid #a4eadc;
  border-radius: 18px;
  background: rgba(255, 255, 255, .72);
  overflow: hidden;
}

.save-mode-toggle {
  padding: 4px;
}

.save-mode-toggle button {
  flex: 1;
  min-width: 0;
  min-height: 34px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: #173b62;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.save-mode-toggle button.active {
  background: #06ad96;
  color: #fff;
}

.preview-toggle {
  justify-content: center;
  gap: 8px;
  padding: 0 10px;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 900;
  color: #374860;
}

.preview-toggle input {
  width: 18px;
  height: 18px;
  accent-color: #417bd6;
}

.total-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  gap: 2px;
  padding: 8px 14px;
  border: 2px solid #f28b18;
  border-radius: 9px;
  background: #fff6e9;
  color: #8a4a08;
}

.total-card span,
.total-card small {
  font-size: 12px;
  line-height: 1.35;
  font-weight: 900;
}

.total-card strong {
  justify-self: center;
  font-family: var(--scale-mono);
  font-size: 28px;
  line-height: 1.2;
  font-weight: 900;
}

.action-row {
  min-height: 0;
}

.action-btn {
  width: 100%;
  height: 100%;
  min-height: 76px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 2px solid #0f9f85;
  border-radius: 8px;
  background: linear-gradient(135deg, #0fbd9f, #078d78);
  color: #fff;
  font-size: 20px;
  line-height: 1.35;
  font-weight: 900;
  cursor: pointer;
}

.action-btn:disabled {
  border-color: #9fb1bd;
  background: #dcebf0;
  color: #9bb1bc;
  cursor: not-allowed;
}

.scale-today {
  grid-area: today;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border: 2px solid #7e55ff;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.today-header {
  min-height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 16px;
  border-bottom: 2px solid #7e55ff;
  background: linear-gradient(135deg, rgba(247, 251, 255, .98), rgba(242, 238, 255, .98));
}

.today-header h2 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #071f38;
  font-size: 25px;
  line-height: 1.35;
  font-weight: 900;
}

.today-header p {
  margin: 0;
  color: #536172;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 700;
}

.today-header-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.today-header-actions .icon-btn {
  min-height: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  line-height: 1;
  padding: 0 14px;
}

.today-header-actions .icon-btn i {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex: 0 0 auto;
  font-size: 15px;
  vertical-align: 0;
  transform: translateY(1px);
}

.today-header-actions .icon-btn i::before {
  display: block;
  line-height: 1;
}

.today-header-actions .icon-btn span {
  display: inline-flex;
  align-items: center;
  height: 16px;
  line-height: 1;
  padding-top: 1px;
}

.today-export-all-btn {
  border-color: rgba(244, 162, 97, .36) !important;
  background: #fffaf2 !important;
  color: #b85f13 !important;
}

.today-export-all-btn:hover,
.today-export-all-btn:focus-visible {
  border-color: rgba(244, 162, 97, .54) !important;
  background: #fff2df !important;
  color: #93460d !important;
}

.icon-btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  border: 1px solid #d5e1ef;
  border-radius: 7px;
  background: #fff;
  color: #0f3c6e;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
}

.today-table-wrap {
  min-height: 0;
  overflow: auto;
}

.today-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: 16px;
  color: #071f38;
}

.today-table.table-colgroup th,
.today-table.table-colgroup td {
  width: auto !important;
}

.today-table .text-nowrap,
.today-table .text-truncate {
  white-space: nowrap !important;
}

.today-table .text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
}

.today-table th {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 12px 14px;
  background: var(--primary);
  color: #fff;
  text-align: left;
  font-size: 15px;
  line-height: 1.55;
  font-weight: 900;
  white-space: nowrap;
  border: 0;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .16);
}

.today-table td {
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: #fff;
  vertical-align: middle;
  font-size: 16px;
  line-height: 1.55;
  font-weight: 750;
}

.today-table tbody tr:nth-child(even) td {
  background: #fbfdff;
}

.today-table tbody tr:hover td {
  background: #f1f8fc;
}

.today-table .center,
.center {
  text-align: center;
}

.today-table .num,
.num {
  text-align: right;
}

.today-empty {
  height: 56px;
  font-size: 18px;
  font-weight: 900;
}

.today-print-btn {
  width: 40px;
  min-width: 40px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border: 1px solid #cfe0f2;
  border-radius: 7px;
  background: #f8fbff;
  color: #0f3c6e;
  cursor: pointer;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(15, 32, 55, .60);
  backdrop-filter: blur(5px);
}

.product-modal {
  width: min(100vw, 1024px);
  height: min(100vh, 768px);
  max-width: 1024px;
  max-height: 768px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 13px;
  background: #f7fbff;
  box-shadow: 0 24px 64px rgba(7, 31, 56, .38);
  overflow: hidden;
}

.customer-modal {
  width: min(100vw, 1024px);
  height: min(100vh, 768px);
  max-width: 1024px;
  max-height: 768px;
  border-radius: 13px;
}

.product-modal-header,
.modal-header {
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 20px;
  border-bottom: 0;
  background: #12345b;
}

.product-modal-header h2,
.modal-header h2 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 26px;
  line-height: 1.35;
  font-weight: 900;
  color: #fff;
}

.product-modal-header h2 i {
  color: #00d4b2;
}

.modal-close {
  min-width: 56px;
  min-height: 36px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 8px;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
}

.product-picker {
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 0;
  padding: 0;
  background: #f6fbff;
  overflow: hidden;
}

.customer-picker {
  grid-template-rows: auto minmax(0, 1fr);
}

.scale-product-tools {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid #d8e5f0;
  background: #f8fbff;
}

.customer-product-tools {
  display: flex;
}

.category-tabs,
.brand-filter-tabs {
  min-width: 0;
  display: flex;
  gap: 8px;
  scrollbar-width: none;
}

.category-tabs::-webkit-scrollbar,
.brand-filter-tabs::-webkit-scrollbar {
  display: none;
}

.category-tabs {
  flex: 1 1 auto;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  padding-bottom: 2px;
}

.brand-filter-tabs {
  flex-wrap: wrap;
  align-content: start;
  gap: 7px;
  padding: 10px 14px 12px;
  border-bottom: 1px solid #dbe7f0;
  background: #f7fffd;
}

.cat-tab {
  min-height: 60px;
  flex: 0 0 auto;
  width: auto;
  min-width: max-content;
  max-width: 220px;
  display: grid;
  grid-template-columns: 34px max-content;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid #d9e4ef;
  border-radius: 8px;
  background: #fff;
  color: #173b62;
  text-align: left;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 900;
  cursor: pointer;
}

.brand-filter-chip {
  min-height: 38px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid #d5e1ef;
  border-radius: 999px;
  background: #fff;
  color: #173b62;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 900;
  cursor: pointer;
}

.cat-tab.active {
  border-color: #2f79cf;
  background: #214f91;
  color: #fff;
  box-shadow: 0 8px 18px rgba(33, 79, 145, .20);
}

.brand-filter-chip.active {
  border-color: #00b99a;
  background: #00b99a;
  color: #fff;
}

.cat-tab-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.cat-tab-text {
  min-width: 0;
  display: grid;
  gap: 3px;
  grid-column: 2;
}

.cat-tab:not(:has(.cat-tab-icon)) .cat-tab-text {
  grid-column: 1 / -1;
}

.cat-tab-text span {
  max-width: 145px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cat-tab-text small,
.brand-filter-chip small {
  color: inherit;
  opacity: .72;
  font-size: 11px;
  font-weight: 900;
}

.brand-filter-chip small {
  min-width: 24px;
  min-height: 20px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(15, 52, 91, .08);
}

.brand-filter-chip.active small {
  background: rgba(255, 255, 255, .24);
  opacity: 1;
}

.scale-search {
  min-width: 300px;
  flex: 0 0 clamp(320px, 34vw, 390px);
}

.customer-search {
  flex: 1 1 auto;
  max-width: none;
}

.keyboard-toggle {
  width: 64px;
  height: 62px;
  border: 1px solid #d5e1ef;
  border-radius: 9px;
  background: #fff;
  color: #0f3c6e;
  font-size: 20px;
  cursor: pointer;
}

.keyboard-toggle[aria-pressed="true"] {
  background: #1e5b9f;
  color: #fff;
}

.search-keyboard-toggle {
  flex: 0 0 62px;
  width: 62px;
  height: auto;
  min-height: 0;
  border-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.global-keyboard-toggle {
  flex: 0 0 46px;
  width: 46px !important;
  min-width: 46px;
  height: 46px !important;
  min-height: 46px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border-color: var(--app-line, #d5e1ef);
  border-radius: var(--app-radius, 8px);
  background: #fff;
  color: var(--app-primary, #0f3c6e);
  box-shadow: 0 8px 18px rgba(20, 96, 168, .12);
}

.global-keyboard-toggle:hover,
.global-keyboard-toggle:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(20, 96, 168, .35);
}

.global-keyboard-toggle[aria-pressed="true"] {
  border-color: transparent;
  background: linear-gradient(135deg, var(--app-primary-2, #1e5b9f), var(--app-primary, #0f3c6e));
  color: #fff;
}

.floating-keyboard-toggle {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1200;
}

.login-page .login-keyboard-btn.keyboard-toggle {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  width: 54px;
  height: 44px;
  min-height: 44px;
  border: 1px solid rgba(17,104,180,.16);
  border-radius: 12px;
  background: #edf6ff;
  color: #0b3f76;
  font-size: 20px;
  display: inline-grid;
  place-items: center;
  box-shadow: 0 8px 18px rgba(12,63,118,.12);
}

.login-page .login-keyboard-btn.keyboard-toggle[aria-pressed="true"] {
  background: #0d5ea8;
  color: #fff;
}

.app-touch-keyboard {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2147483000;
  display: grid;
  gap: 8px;
  padding: 10px 14px 14px;
  border-top: 1px solid rgba(13, 65, 118, .16);
  background: rgba(246, 250, 254, .98);
  box-shadow: 0 -18px 36px rgba(12, 38, 68, .18);
  transform: translate3d(0, 105%, 0);
  transition: transform .22s cubic-bezier(.2, .8, .2, 1);
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  will-change: transform;
}

.app-touch-keyboard.open {
  transform: translate3d(0, 0, 0);
}

.touch-keyboard-open {
  overflow: hidden !important;
}

.app-touch-keyboard__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  max-width: 1040px;
  width: 100%;
  margin: 0 auto;
  color: #173a60;
  font-weight: 900;
}

.app-touch-keyboard__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.app-touch-keyboard__mode {
  min-width: 78px;
  height: 26px;
  padding: 0 10px;
  border-radius: 8px;
  background: #dff5ee;
  color: #087463;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.app-touch-keyboard__keys {
  display: grid;
  gap: 7px;
  max-width: 1040px;
  width: 100%;
  margin: 0 auto;
}

.app-touch-keyboard__row {
  display: flex;
  justify-content: center;
  gap: 7px;
}

.app-touch-key {
  flex: 1 1 0;
  max-width: 72px;
  min-width: 0;
  height: 42px;
  border: 1px solid #cfe0f2;
  border-radius: 8px;
  background: #fff;
  color: #0c3159;
  font-family: "Sarabun", sans-serif;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 12px rgba(15, 63, 110, .10);
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transform: translate3d(0, 0, 0);
  transition:
    transform .08s ease,
    background-color .12s ease,
    border-color .12s ease,
    color .12s ease,
    box-shadow .12s ease;
  will-change: transform;
}

.app-touch-key:hover {
  border-color: #a9c6e6;
  background: #f8fbff;
  box-shadow: 0 8px 18px rgba(15, 63, 110, .14);
}

.app-touch-key:active,
.app-touch-key.active,
.app-touch-key.pressed {
  transform: translate3d(0, 2px, 0) scale(.97);
  background: #0d5ea8;
  border-color: #0d5ea8;
  color: #fff;
  box-shadow: 0 3px 8px rgba(15, 63, 110, .18);
}

.app-touch-key.action {
  max-width: 96px;
  background: #eaf3ff;
  color: #0f4c86;
  font-size: 14px;
}

.app-touch-key.action:hover {
  background: #dfedff;
}

.app-touch-key.wide {
  flex: 3 1 160px;
  max-width: 280px;
  font-size: 14px;
}

@media (max-width: 760px) {
  .app-touch-keyboard {
    padding: 8px 8px 10px;
    gap: 6px;
  }

  .app-touch-keyboard__keys,
  .app-touch-keyboard__row {
    gap: 5px;
  }

  .app-touch-key {
    height: 38px;
    border-radius: 7px;
    font-size: 15px;
  }

  .app-touch-key.action,
  .app-touch-key.wide {
    font-size: 12px;
  }
}

.product-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 8px;
  overflow: auto;
  padding: 8px 22px 14px 14px;
  border-top: 1px solid #dbe7f0;
  background: #f7fbff;
}

.customer-grid {
  grid-template-columns: 1fr;
}

.product-picker-card,
.customer-picker-card {
  min-height: 82px;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) 108px 54px;
  gap: 14px;
  align-items: center;
  padding: 10px 12px 10px 16px;
  border: 1px solid #d7e4ef;
  border-left: 5px solid var(--card-accent, #178d92);
  border-radius: 8px;
  background: #fff;
  color: #071f38;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(7, 31, 56, .06);
}

.customer-picker-card {
  grid-template-columns: 112px minmax(0, 1fr) 54px;
  min-height: 82px;
}

#customerModal .product-picker {
  grid-template-rows: 82px auto minmax(0, 1fr);
  background: #f6fbff;
}

#customerModal .scale-product-tools {
  grid-template-columns: minmax(0, 1fr);
  padding: 10px 14px;
  border-bottom: 1px solid #d8e5f0;
  background: #f8fbff;
}

#customerModal .customer-zone-filter-tabs {
  border-bottom: 1px solid #dbe7f0;
  background: #f7fffd;
  padding: 10px 14px 12px;
}

#customerModal .customer-grid {
  gap: 8px;
  padding: 12px 22px 16px 14px;
  border-top: 0;
  background: #f7fbff;
}

#customerModal .customer-picker-card {
  min-height: 62px;
  grid-template-columns: 88px minmax(0, 1fr) 130px 54px;
  border-left-color: #00a98c;
}

.customer-picker-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 20px;
  font-weight: 800;
  color: #071f38;
  line-height: 1.5;
}

.customer-picker-zone-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: #e6f8f4;
  color: #007a63;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 128px;
}

#customerModal .customer-picker-main {
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
}

#customerModal .customer-picker-main strong {
  min-width: 0;
  color: #071f38;
  font-size: 24px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#customerModal .customer-picker-main small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#customerModal .customer-picker-code {
  min-height: 34px;
  padding: 4px 10px;
  font-size: 16px;
}

#customerModal .customer-picker-arrow {
  background: #edf5ff;
  color: #113866;
}

#customerModal .customer-picker-card.selected {
  border-color: #ffb06a;
  border-left-color: #ff9b52;
  background: #fffaf2;
}

#customerModal .customer-picker-card.selected .customer-picker-arrow {
  background: #fff0d5;
  color: #b56400;
}

.product-picker-card.selected,
.customer-picker-card.selected {
  border-color: #ffb06a;
  border-left-color: #ff9b52;
  background: #fffaf2;
  box-shadow: 0 0 0 2px rgba(255, 176, 106, .24);
}

.product-picker-image,
.product-picker-thumb {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border: 1px solid #dbe6f2;
  border-radius: 8px;
  background: #eef5fb;
  overflow: hidden;
}

.product-picker-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.product-picker-main,
.customer-picker-main {
  min-width: 0;
  display: grid;
  gap: 3px 10px;
}

.product-picker-main {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

.product-picker-code,
.customer-picker-code {
  justify-self: start;
  display: inline-grid;
  place-items: center;
  min-height: 28px;
  padding: 3px 9px;
  border-radius: 5px;
  background: #edf5ff;
  color: #073c78;
  font-family: var(--scale-mono);
  font-size: 14px;
  line-height: 1.35;
  font-weight: 900;
}

.product-picker-code {
  grid-column: 1;
  grid-row: 1;
}

.product-picker-main strong,
.customer-picker-main strong {
  font-size: 20px;
  line-height: 1.5;
  font-weight: 900;
}

.product-picker-main strong {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-picker-main small,
.customer-picker-main small {
  color: #536172;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 700;
}

.product-picker-main small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-picker-main small:first-of-type {
  grid-column: 1;
  grid-row: 2;
}

.product-picker-main small:last-of-type {
  grid-column: 2;
  grid-row: 2;
}

.product-picker-price {
  min-height: 50px;
  display: grid;
  place-items: center;
  padding: 6px 10px;
  border: 1px solid #9bead9;
  border-radius: 8px;
  background: #defaf2;
  color: #113866;
  font-family: var(--scale-mono);
  font-size: 18px;
  line-height: 1.3;
  font-weight: 900;
}

.product-picker-price em {
  color: #536172;
  font-family: var(--scale-font);
  font-size: 11px;
  font-style: normal;
}

.product-picker-arrow,
.customer-picker-arrow {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #edf5ff;
  color: #113866;
  font-size: 20px;
}

.product-picker-card.selected .product-picker-arrow {
  background: #fff0d5;
  color: #b56400;
}

.product-empty {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  min-height: 180px;
  color: #536172;
  font-size: 20px;
  font-weight: 900;
}

.modal-box {
  width: min(520px, calc(100vw - 40px));
  max-height: calc(100vh - 40px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}

/* scale.css overrides app.css .sticker-preview — same lbl-* classes */
.sticker-preview {
  width: min(82vw, 300px);
  aspect-ratio: 10 / 11;
  margin: 14px auto;
  padding: 10px 12px 9px;
  border: 2px solid #111;
  border-radius: 3px;
  color: #111;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: Tahoma,"Sarabun","Noto Sans Thai",sans-serif;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 18px;
  border-top: 1px solid #dbe6f2;
}

.btn-cancel,
.btn-confirm-print {
  min-height: 46px;
  padding: 0 18px;
  border: 0;
  border-radius: 8px;
  font-size: 17px;
  font-weight: 900;
  cursor: pointer;
}

.btn-cancel {
  background: #e9eef5;
  color: #374860;
}

.btn-confirm-print {
  background: #0f9f85;
  color: #fff;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 80;
  transform: translate(-50%, 20px);
  max-width: min(560px, calc(100vw - 32px));
  padding: 12px 18px;
  border-radius: 9px;
  background: #071f38;
  color: #fff;
  font-size: 17px;
  line-height: 1.45;
  font-weight: 800;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s, transform .18s;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.toast.success {
  background: #078d78;
}

.toast.error {
  background: #c71e3f;
}

@media (max-width: 760px) {

  .page-shell {
    min-width: 0;
    height: auto;
    min-height: 100vh;
    grid-template-rows: auto auto;
  }

  .page-top,
  .top-tools {
    flex-wrap: wrap;
  }

  .page-body.scale-layout {
    grid-template-rows: auto auto;
    overflow: visible;
  }

  .scale-left {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "entry"
      "actions";
    overflow: visible;
  }

  .scale-entry-panel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 86px 86px 164px 150px 150px;
    grid-template-areas:
      "lot"
      "operator"
      "image"
      "customer"
      "product";
  }

  .product-column {
    display: contents;
  }

  .product-image-card {
    grid-area: image;
  }

  #selectedProductCard {
    grid-area: product;
  }

  .scale-action-panel {
    grid-template-rows: auto auto auto auto;
  }

  .scale-product-tools {
    flex-wrap: wrap;
  }

  .category-tabs {
    flex: 1 1 100%;
  }
}



/* ── lbl-* modal scale (~1.6× print, container 300px) ── */
.sticker-preview .lbl-brand {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding-bottom: 4px;
}
.sticker-preview .lbl-shop-name  { display: block; font-size: 20px; font-weight: 900; line-height: 1.1; text-align: center; width: 100%; }
.sticker-preview .lbl-shop-addr,
.sticker-preview .lbl-shop-phone { display: block; font-size: 11px; line-height: 1.3; color: #333; }
.sticker-preview .lbl-hr  { border: 0; border-top: 1px solid #111; margin: 4px 0; opacity: .3; }
.sticker-preview .lbl-hr2 { margin: 3px 0; }
.sticker-preview .lbl-weight-box {
  border: 1.5px solid #111; border-radius: 2px;
  padding: 4px 6px; margin: 4px 0;
  display: flex; flex-direction: column; align-items: center; flex-shrink: 0;
}
.sticker-preview .lbl-wt-label  { font-size: 14px; font-weight: 900; line-height: 1; margin-bottom: 1px; color: #333; }
.sticker-preview .lbl-wt-value  {
  display: block; font-family: "IBM Plex Mono",monospace;
  font-size: 57px; font-weight: 900; line-height: .88; letter-spacing: -.04em;
}
.sticker-preview .lbl-wt-unit   {
  font-family: Tahoma,"Sarabun",sans-serif; font-size: 17px; font-weight: 700; margin-left: 3px;
}
.sticker-preview .lbl-name-rows { display: flex; flex-direction: column; margin: 3px 0 0; }
.sticker-preview .lbl-name-row  {
  display: flex; gap: 4px; font-size: 17px; font-weight: 800; line-height: 1.55;
  border-bottom: 0.3px solid #ddd; align-items: baseline; min-width: 0;
}
.sticker-preview .lbl-name-code { font-weight: 900; white-space: nowrap; flex-shrink: 0; }
.sticker-preview .lbl-name-val  { font-weight: 800; color: #222; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sticker-preview .lbl-info-grid {
  display: grid; grid-template-columns: minmax(0,1fr) 98px;
  gap: 6px; align-items: start; margin: 3px 0;
}
.sticker-preview .lbl-rows  { min-width: 0; }
.sticker-preview .lbl-row   {
  display: flex; justify-content: space-between; gap: 4px;
  font-size: 14px; font-weight: 800; line-height: 1.6;
  border-bottom: 0.3px solid #ddd;
}
.sticker-preview .lbl-row b { font-size: 14px; font-weight: 900; text-align: right; }
.sticker-preview .lbl-row.lbl-row-total { font-weight: 900; }
.sticker-preview .lbl-row.lbl-row-op   { border-bottom: none; }
.sticker-preview .lbl-qr    { width: 98px; height: 98px; image-rendering: pixelated; justify-self: end; }
.sticker-preview .lbl-footer {
  margin-top: auto; text-align: center; font-size: 11px; line-height: 1.35; color: #444;
}

}

/* Unified application theme overrides */
:root {
  --app-font: "Sarabun", "Noto Sans Thai", "Segoe UI", Tahoma, sans-serif;
  --app-mono: "IBM Plex Mono", Consolas, monospace;
  --app-primary: #0c3d6b;
  --app-primary-2: #1460a8;
  --app-ink: #0f1f30;
  --app-muted: #526070;
  --app-line: #d9e4ef;
  --app-page: #eef3f8;
  --app-card: #ffffff;
  --app-accent: #00a98c;
  --app-danger: #d9364e;
  --app-radius: 8px;
  --app-shadow: 0 10px 26px rgba(7, 31, 56, .09);
  --app-shadow-soft: 0 4px 16px rgba(7, 31, 56, .07);
}

html,
body {
  font-family: var(--app-font);
}

body,
.page-shell,
.settings-bootstrap,
.login-page {
  color: var(--app-ink);
  background:
    linear-gradient(135deg, rgba(238, 243, 248, .98), rgba(247, 250, 253, .98));
}

.page-top,
.app-header {
  min-height: 72px;
  height: 72px;
  padding: 0 26px;
  border-bottom: 1px solid rgba(12, 61, 107, .12);
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 1px 0 rgba(12, 61, 107, .08), 0 6px 18px rgba(7, 31, 56, .06);
}

.page-top h1,
.app-title {
  margin: 0;
  color: var(--app-ink);
  font-family: var(--app-font);
  font-size: 30px;
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: 0;
}

.page-top h1 i,
.app-title i,
.table-toolbar h2 i,
.today-header h2 i,
.card-head i {
  color: var(--app-accent);
}

.page-body,
.settings-main {
  padding: 20px 24px;
}

.settings-main {
  height: calc(100vh - 72px);
  grid-template-rows: minmax(0, 1fr) 58px;
  gap: 12px;
}

.table-card,
.settings-card,
.about-panel,
.about-hero-card,
.operator-panel,
.scale-entry-panel,
.scale-action-panel,
.scale-today,
.weight-card,
.total-card,
.login-card,
.modal-box,
.product-modal,
.cust-detail,
.cust-editor-box {
  border: 1px solid var(--app-line);
  border-radius: var(--app-radius);
  background: var(--app-card);
  box-shadow: var(--app-shadow);
}

.scale-today {
  border-color: var(--app-line);
}

.table-toolbar,
.card-head,
.today-header,
.operator-panel-head,
.about-panel-head {
  border-bottom: 1px solid var(--app-line);
  background: linear-gradient(180deg, #ffffff, #f7fbff);
}

.table-toolbar h2,
.card-head h2,
.today-header h2,
.operator-panel-head h2,
.about-panel-head h2 {
  color: var(--app-ink);
  font-family: var(--app-font);
  font-weight: 900;
  letter-spacing: 0;
}

.table-toolbar p,
.today-header p,
.page-subtitle,
.brand-title p,
.login-subtitle,
.help-list,
.form-label {
  color: var(--app-muted);
  font-family: var(--app-font);
}

.close-page,
.close-app-btn {
  min-height: 46px;
  min-width: 92px;
  border: 0;
  border-radius: var(--app-radius);
  background: linear-gradient(135deg, var(--app-danger), #b72d41);
  color: #fff;
  font-family: var(--app-font);
  font-size: 17px;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(217, 54, 78, .22);
}

.btn,
.touch-btn,
.action-btn,
.icon-btn,
.product-add-btn,
.login-button,
.modal-close,
.cust-action-btn,
.cust-editor-head button,
.keyboard-toggle,
.filter-chip-btn,
.cat-tab,
.brand-filter-chip {
  border-radius: var(--app-radius);
  font-family: var(--app-font);
  letter-spacing: 0;
}

.btn-primary,
.login-button {
  border: 0;
  background: linear-gradient(135deg, var(--app-primary-2), var(--app-primary));
  box-shadow: 0 8px 18px rgba(20, 96, 168, .22);
}

.btn-success,
.product-add-btn,
.btn-teal,
.action-btn,
.btn-confirm-print {
  border-color: transparent;
  background: linear-gradient(135deg, var(--app-accent), #078d78);
  color: #fff;
  box-shadow: 0 8px 18px rgba(0, 169, 140, .20);
}

.btn-danger,
.btn-danger-soft {
  border-color: transparent;
  background: linear-gradient(135deg, var(--app-danger), #b72d41);
  color: #fff;
}

.form-control,
.form-select,
.product-editor-form input,
.product-editor-form select,
.cust-form-group input,
.cust-form-group select,
.input-shell input,
.custom-select-trigger {
  border: 1px solid var(--app-line);
  border-radius: var(--app-radius);
  background-color: #fff;
  color: var(--app-ink);
  font-family: var(--app-font);
  font-weight: 800;
  box-shadow: none;
}

.form-control:focus,
.form-select:focus,
.product-editor-form input:focus,
.cust-form-group input:focus,
.input-shell input:focus,
.custom-select.open .custom-select-trigger {
  border-color: rgba(20, 96, 168, .62);
  box-shadow: 0 0 0 3px rgba(20, 96, 168, .12);
}

.data-table thead th,
.today-table th,
.product-modal-header,
.modal-header,
.cust-detail-head,
.cust-editor-head {
  background: linear-gradient(135deg, var(--app-primary), #092b4d);
  color: #fff;
}

.data-table .num,
.today-table .num,
.code-pill,
.cust-code,
.clock-display,
.clock-chip,
.raw-box,
.parsed-weight,
.product-picker-code,
.customer-picker-code,
.total-card strong,
.weight-display {
  font-family: var(--app-mono);
}

.cust-count-badge,
.product-main-group,
.cust-zone-pill,
.customer-picker-zone-pill,
.badge-status,
.permission-pills span {
  border-radius: 999px;
}

.customer-page .data-table tbody tr.row-selected td,
.product-picker-card.selected,
.customer-picker-card.selected {
  border-color: rgba(0, 169, 140, .45);
  background: #eefbf8 !important;
  color: var(--app-ink);
}

.login-page {
  overflow: hidden;
  background: #173b75 !important;
}

.login-page::before {
  content: none !important;
}

.login-page .login-card {
  width: min(390px, calc(100vw - 28px));
  border-color: rgba(255, 255, 255, .72);
  border-radius: var(--app-radius);
}

.login-page .brand-mark,
.head-icon,
.operator-panel-icon,
.about-panel-icon,
.home-tile > i {
  border-radius: var(--app-radius);
  background: linear-gradient(135deg, var(--app-accent), #078d78);
  color: #fff;
}

.login-page .clock-chip {
  border-radius: var(--app-radius);
  font-family: var(--app-mono);
}

.settings-save-dock {
  border: 1px solid var(--app-line);
  border-radius: var(--app-radius);
  background: #fff;
  box-shadow: var(--app-shadow-soft);
}

body.scale-page,
.scale-page,
.scale-page *:not(i) {
  font-family: var(--app-font);
}

.table-page .table-card,
.operator-v2 .operator-panel,
.operator-v2 .operator-preview-label,
.operator-v2 .operator-preview-stage,
.operator-v2 .label-size-badge,
.scale-page .scale-entry-panel,
.scale-page .scale-action-panel,
.scale-page .scale-today,
.scale-page .weight-card,
.scale-page .total-card {
  border-radius: var(--app-radius);
}

.table-page .table-card,
.operator-v2 .operator-panel,
.scale-page .scale-entry-panel,
.scale-page .scale-action-panel,
.scale-page .scale-today {
  border-color: var(--app-line);
  box-shadow: var(--app-shadow);
}

.operator-v2 .page-top h1,
.scale-page .page-top h1 {
  font-size: 30px;
}

body.operator-v2 .operator-panel,
body.operator-v2 .operator-preview-label,
body.operator-v2 .operator-preview-stage,
body.scale-page .scale-entry-panel,
body.scale-page .scale-action-panel,
body.scale-page .scale-today,
body.scale-page .weight-card,
body.scale-page .total-card {
  border-radius: var(--app-radius);
}

body.operator-v2 .operator-panel,
body.scale-page .scale-entry-panel,
body.scale-page .scale-action-panel,
body.scale-page .scale-today {
  border-color: var(--app-line);
  box-shadow: var(--app-shadow);
}

body.operator-v2 .page-top h1 {
  font-size: 30px;
}

body.operator-v2 .operator-preview-label .lbl-info-grid {
  grid-template-columns: minmax(0, 1fr) 116px;
}

body.operator-v2 .operator-preview-label .lbl-qr {
  width: 116px;
  height: 116px;
}

/* Unified tables and table action buttons */
.data-table,
.today-table,
.report-page .report-table,
.customer-page .cust-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--app-ink);
  font-family: var(--app-font);
  font-size: 15px;
  background: #fff;
}

.data-table thead th,
.today-table th,
.report-page .report-table th,
.customer-page .cust-table th {
  position: sticky;
  top: 0;
  z-index: 4;
  min-height: 48px;
  padding: 12px 14px;
  border: 0 !important;
  border-right: 2px solid rgba(255, 255, 255, .24) !important;
  border-bottom: 3px solid rgba(0, 201, 167, .55) !important;
  background: linear-gradient(135deg, var(--app-primary), #092b4d);
  color: #fff;
  font-family: var(--app-font);
  font-size: 14px;
  line-height: 1.35;
  font-weight: 900;
  text-align: left;
  white-space: nowrap;
  vertical-align: middle;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .14);
}

.data-table thead th:last-child,
.today-table th:last-child,
.report-page .report-table th:last-child,
.customer-page .cust-table th:last-child {
  border-right: 0 !important;
}

.data-table tbody td,
.today-table td,
.report-page .report-table td,
.customer-page .cust-table td {
  min-height: 54px;
  padding: 10px 14px;
  border: 0 !important;
  border-bottom: 1px solid var(--app-line) !important;
  background: #fff;
  color: var(--app-ink);
  font-family: var(--app-font);
  font-size: 15px;
  line-height: 1.45;
  font-weight: 750;
  vertical-align: middle;
}

.data-table tbody tr:nth-child(even) td,
.today-table tbody tr:nth-child(even) td,
.report-page .report-table tbody tr:nth-child(even) td,
.customer-page .cust-table tbody tr:nth-child(even) td {
  background: #fbfdff;
}

.data-table tbody tr:hover td,
.today-table tbody tr:hover td,
.report-page .report-table tbody tr:hover td,
.customer-page .cust-table tbody tr:hover td {
  background: #f0f8fc;
}

.data-table td:last-child,
.data-table th:last-child,
.today-table td:last-child,
.today-table th:last-child,
.report-page .report-table td:last-child,
.report-page .report-table th:last-child,
.customer-page .cust-table td:last-child,
.customer-page .cust-table th:last-child {
  text-align: center;
}

.row-actions,
.product-row-actions,
.user-row-actions,
.cust-actions,
.report-row-actions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  white-space: nowrap;
}

.data-table .table-action-btn,
.product-row-actions .table-action-btn,
.user-row-actions .table-action-btn,
.report-page .table-action-btn,
.cust-action-btn,
.today-print-btn,
.report-page .report-print-btn,
.report-page .report-text-row-btn,
.today-table .report-text-row-btn {
  width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 38px !important;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
  border: 1px solid rgba(20, 96, 168, .22) !important;
  border-radius: var(--app-radius) !important;
  background: #f8fbff !important;
  color: var(--app-primary) !important;
  font-size: 0 !important;
  line-height: 1;
  box-shadow: none !important;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease, transform .1s ease;
}

.data-table .table-action-btn i,
.product-row-actions .table-action-btn i,
.user-row-actions .table-action-btn i,
.report-page .table-action-btn i,
.cust-action-btn i,
.today-print-btn i,
.report-page .report-print-btn i,
.report-page .report-text-row-btn i,
.today-table .report-text-row-btn i {
  font-size: 15px;
  line-height: 1;
}

.data-table .table-action-btn:hover,
.product-row-actions .table-action-btn:hover,
.user-row-actions .table-action-btn:hover,
.report-page .table-action-btn:hover,
.cust-action-btn:hover,
.today-print-btn:hover,
.report-page .report-print-btn:hover,
.report-page .report-text-row-btn:hover,
.today-table .report-text-row-btn:hover {
  border-color: rgba(20, 96, 168, .42) !important;
  background: #edf6ff !important;
  color: var(--app-primary-2) !important;
  transform: translateY(-1px);
}

.data-table .table-action-btn:active,
.product-row-actions .table-action-btn:active,
.user-row-actions .table-action-btn:active,
.report-page .table-action-btn:active,
.cust-action-btn:active,
.today-print-btn:active,
.report-page .report-print-btn:active,
.report-page .report-text-row-btn:active,
.today-table .report-text-row-btn:active {
  transform: translateY(0);
}

.data-table .table-action-btn:disabled,
.product-row-actions .table-action-btn:disabled,
.user-row-actions .table-action-btn:disabled,
.report-page .table-action-btn:disabled,
.cust-action-btn:disabled,
.today-print-btn:disabled,
.report-page .report-print-btn:disabled,
.report-page .report-text-row-btn:disabled,
.today-table .report-text-row-btn:disabled {
  border-color: #dbe4ee !important;
  background: #eef2f6 !important;
  color: #9aa8b7 !important;
  cursor: not-allowed;
  transform: none;
}

.data-table .table-action-btn.btn-outline-danger,
.data-table .table-action-btn.danger,
.product-row-actions .table-action-btn.btn-outline-danger,
.product-row-actions .table-action-btn.danger,
.user-row-actions .table-action-btn.btn-outline-danger,
.user-row-actions .table-action-btn.danger,
.cust-action-del {
  border-color: rgba(217, 54, 78, .24) !important;
  background: #fff8f9 !important;
  color: var(--app-danger) !important;
}

.data-table .table-action-btn.btn-outline-danger:hover,
.data-table .table-action-btn.danger:hover,
.product-row-actions .table-action-btn.btn-outline-danger:hover,
.product-row-actions .table-action-btn.danger:hover,
.user-row-actions .table-action-btn.btn-outline-danger:hover,
.user-row-actions .table-action-btn.danger:hover,
.cust-action-del:hover {
  border-color: rgba(217, 54, 78, .42) !important;
  background: #fff0f2 !important;
  color: #b72d41 !important;
}

.today-print-btn,
.report-page .report-print-btn {
  border-color: rgba(0, 169, 140, .26) !important;
  background: #f0fffb !important;
  color: #078d78 !important;
}

.today-print-btn:hover,
.report-page .report-print-btn:hover {
  border-color: rgba(0, 169, 140, .46) !important;
  background: #e4fbf6 !important;
  color: #056f60 !important;
}

.report-page .report-text-row-btn,
.today-table .report-text-row-btn {
  border-color: rgba(244, 162, 97, .34) !important;
  background: #fffaf2 !important;
  color: #b85f13 !important;
}

.report-page .report-text-row-btn:hover,
.today-table .report-text-row-btn:hover {
  border-color: rgba(244, 162, 97, .52) !important;
  background: #fff2df !important;
  color: #93460d !important;
}

.data-table .table-action-btn::before,
.data-table .table-action-btn::after,
.product-row-actions .table-action-btn::before,
.product-row-actions .table-action-btn::after,
.user-row-actions .table-action-btn::before,
.user-row-actions .table-action-btn::after,
.report-page .table-action-btn::before,
.report-page .table-action-btn::after,
.cust-action-btn::before,
.cust-action-btn::after,
.today-print-btn::before,
.today-print-btn::after {
  content: none !important;
  display: none !important;
}

body.scale-page .today-table th {
  background: linear-gradient(135deg, var(--app-primary), #092b4d) !important;
  color: #fff !important;
  font-family: var(--app-font) !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  border: 0 !important;
  border-right: 2px solid rgba(255, 255, 255, .24) !important;
  border-bottom: 3px solid rgba(0, 201, 167, .55) !important;
}

body.scale-page .today-table td {
  font-family: var(--app-font) !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--app-line) !important;
}

body.scale-page .today-table tbody tr:nth-child(even) td {
  background: #fbfdff !important;
}

body.scale-page .today-table tbody tr:hover td {
  background: #f0f8fc !important;
}

/* Settings page refresh */
body.settings-bootstrap {
  background:
    linear-gradient(135deg, rgba(238, 243, 248, .98), rgba(247, 250, 253, .98)) !important;
}

body.settings-bootstrap .settings-main {
  height: calc(100vh - 72px) !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) 66px !important;
  gap: 14px !important;
  padding: 18px 22px 16px !important;
  overflow: hidden !important;
}

body.settings-bootstrap .settings-layout {
  min-height: 0;
  display: grid !important;
  grid-template-columns: minmax(0, 1.18fr) minmax(360px, .82fr) !important;
  gap: 16px !important;
}

body.settings-bootstrap .settings-column {
  min-height: 0;
  display: grid !important;
  gap: 14px !important;
}

body.settings-bootstrap .settings-column-left {
  grid-template-rows: minmax(0, 1fr) !important;
}

body.settings-bootstrap .settings-column-right {
  grid-template-rows: auto auto minmax(0, 1fr) !important;
}

body.settings-bootstrap .settings-card {
  min-height: 0;
  border: 1px solid var(--app-line) !important;
  border-radius: var(--app-radius) !important;
  background: #fff !important;
  box-shadow: var(--app-shadow) !important;
  overflow: hidden !important;
}

body.settings-bootstrap .card-head {
  min-height: 60px !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--app-line) !important;
  background: linear-gradient(180deg, #fff, #f7fbff) !important;
}

body.settings-bootstrap .head-icon {
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 42px !important;
  border-radius: var(--app-radius) !important;
  background: linear-gradient(135deg, var(--app-accent), #078d78) !important;
  color: #fff !important;
  font-size: 18px !important;
  box-shadow: 0 8px 18px rgba(0, 169, 140, .18);
}

body.settings-bootstrap .settings-column-left .settings-card .head-icon {
  background: linear-gradient(135deg, var(--app-primary-2), var(--app-primary)) !important;
  box-shadow: 0 8px 18px rgba(20, 96, 168, .20);
}

body.settings-bootstrap .settings-column-right .settings-card:nth-child(1) .head-icon {
  background: linear-gradient(135deg, var(--app-primary-2), var(--app-primary)) !important;
  box-shadow: 0 8px 18px rgba(20, 96, 168, .20);
}

body.settings-bootstrap .settings-column-right .settings-card:nth-child(2) .head-icon {
  background: linear-gradient(135deg, var(--app-primary-2), var(--app-primary)) !important;
  box-shadow: 0 8px 18px rgba(20, 96, 168, .20);
}

body.settings-bootstrap .settings-column-right .settings-card:nth-child(3) .head-icon {
  background: linear-gradient(135deg, var(--app-primary-2), var(--app-primary)) !important;
  box-shadow: 0 8px 18px rgba(20, 96, 168, .20);
}

body.settings-bootstrap .head-icon.orange {
  background: linear-gradient(135deg, var(--app-primary-2), var(--app-primary)) !important;
  box-shadow: 0 8px 18px rgba(20, 96, 168, .20);
}

body.settings-bootstrap .head-icon.teal {
  background: linear-gradient(135deg, var(--app-primary-2), var(--app-primary)) !important;
}

body.settings-bootstrap .card-head h2 {
  margin: 0 !important;
  color: var(--app-ink) !important;
  font-size: 22px !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
}

body.settings-bootstrap .card-body-tight {
  min-height: 0;
  padding: 14px !important;
  overflow: auto !important;
}

body.settings-bootstrap .settings-column-left .card-body-tight {
  display: grid !important;
  gap: 10px !important;
  padding: 12px 14px 8px !important;
  align-content: start;
}

body.settings-bootstrap .section-box {
  padding: 14px !important;
  border: 1px solid #dbe6f2 !important;
  border-radius: var(--app-radius) !important;
  background: linear-gradient(180deg, #fbfdff, #f7fbff) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82);
}

body.settings-bootstrap .section-title {
  margin: 0 0 10px !important;
  color: var(--app-primary) !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
  font-weight: 900 !important;
}

body.settings-bootstrap .section-title i {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--app-radius);
  background: #eaf3ff !important;
  color: var(--app-primary-2) !important;
  font-size: 14px;
}

body.settings-bootstrap .section-box:nth-of-type(2) .section-title i {
  background: #eaf3ff !important;
  color: var(--app-primary-2) !important;
}

body.settings-bootstrap .section-box:nth-of-type(3) .section-title i {
  background: #eaf3ff !important;
  color: var(--app-primary-2) !important;
}

body.settings-bootstrap .form-label {
  margin: 0 0 5px !important;
  color: #334155 !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  font-weight: 900 !important;
}

body.settings-bootstrap .form-control,
body.settings-bootstrap .form-select {
  min-height: 46px !important;
  border: 1px solid var(--app-line) !important;
  border-radius: var(--app-radius) !important;
  background-color: #fff !important;
  color: var(--app-ink) !important;
  font-size: 15px !important;
  font-weight: 850 !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
}

body.settings-bootstrap .form-control:focus,
body.settings-bootstrap .form-select:focus {
  border-color: rgba(20, 96, 168, .62) !important;
  box-shadow: 0 0 0 3px rgba(20, 96, 168, .12) !important;
}

body.settings-bootstrap .scan-row,
body.settings-bootstrap .printer-row {
  grid-template-columns: minmax(0, 1fr) 104px !important;
  gap: 10px !important;
  align-items: end !important;
}

body.settings-bootstrap .scale-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body.settings-bootstrap .scale-command-row {
  grid-template-columns: minmax(0, 1fr) 132px 132px !important;
  gap: 10px !important;
  margin-top: 12px !important;
}

body.settings-bootstrap .btn {
  min-height: 46px !important;
  border-radius: var(--app-radius) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 15px !important;
  font-weight: 900 !important;
}

body.settings-bootstrap .btn-light,
body.settings-bootstrap .btn-outline-primary {
  border: 1px solid rgba(20, 96, 168, .22) !important;
  background: #f8fbff !important;
  color: var(--app-primary) !important;
}

body.settings-bootstrap .btn-light:hover,
body.settings-bootstrap .btn-outline-primary:hover {
  border-color: rgba(20, 96, 168, .42) !important;
  background: #edf6ff !important;
  color: var(--app-primary-2) !important;
}

body.settings-bootstrap .btn-teal {
  border: 0 !important;
  background: linear-gradient(135deg, var(--app-accent), #078d78) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(0, 169, 140, .20);
}

body.settings-bootstrap .btn-danger-soft {
  border: 0 !important;
  background: linear-gradient(135deg, var(--app-danger), #b72d41) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(217, 54, 78, .18);
}

body.settings-bootstrap .switch-box {
  min-height: 46px !important;
  padding: 10px 12px !important;
  border: 1px solid var(--app-line) !important;
  border-radius: var(--app-radius) !important;
  background: #fff !important;
  box-shadow: none !important;
}

body.settings-bootstrap .form-check-input {
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  border-color: #b8c9dc;
  cursor: pointer;
}

body.settings-bootstrap .form-check-input:checked {
  background-color: var(--app-accent);
  border-color: var(--app-accent);
}

body.settings-bootstrap .status-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px !important;
}

body.settings-bootstrap .status-box {
  min-height: 72px !important;
  padding: 11px 12px !important;
  border: 1px solid var(--app-line) !important;
  border-radius: var(--app-radius) !important;
  background: #fff !important;
}

body.settings-bootstrap .scale-test-box .status-box {
  display: grid !important;
  grid-template-columns: 108px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
}

body.settings-bootstrap .status-box strong {
  margin-bottom: 0 !important;
  color: #334155;
  font-size: 13px !important;
  line-height: 1.3 !important;
  font-weight: 900 !important;
}

body.settings-bootstrap .badge-status {
  min-height: 36px !important;
  max-width: 100%;
  padding: 6px 11px !important;
  border-radius: 999px !important;
  background: #fff4e8 !important;
  color: #a55319 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

body.settings-bootstrap .raw-box,
body.settings-bootstrap .parsed-weight {
  width: 100%;
  height: 40px !important;
  border-radius: var(--app-radius) !important;
}

body.settings-bootstrap .scale-test-box {
  padding: 8px 10px !important;
}

body.settings-bootstrap .scale-test-box .section-title {
  margin-bottom: 5px !important;
}

body.settings-bootstrap .scale-test-box .status-grid {
  gap: 4px !important;
}

body.settings-bootstrap .scale-test-box .status-box {
  min-height: 42px !important;
  padding: 5px 8px !important;
}

body.settings-bootstrap .scale-test-box .status-box strong {
  font-size: 11px !important;
  line-height: 1.2 !important;
}

body.settings-bootstrap .scale-test-box .badge-status,
body.settings-bootstrap .scale-test-box .raw-box,
body.settings-bootstrap .scale-test-box .parsed-weight {
  min-height: 28px !important;
  height: 28px !important;
  font-size: 12px !important;
}

body.settings-bootstrap .scale-test-box .parsed-weight {
  font-size: 16px !important;
}

body.settings-bootstrap .raw-box {
  background: #071f38 !important;
  color: #fff !important;
  font-family: var(--app-mono) !important;
}

body.settings-bootstrap .parsed-weight {
  background: #e6f8f4 !important;
  color: #067362 !important;
  font-family: var(--app-mono) !important;
  font-size: 20px !important;
  font-weight: 900 !important;
}

body.settings-bootstrap .export-grid {
  grid-template-columns: 132px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: end !important;
}

body.settings-bootstrap .image-panel {
  min-height: 0;
  height: 100%;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 188px !important;
  gap: 14px !important;
}

body.settings-bootstrap .product-image-preview {
  min-height: 170px !important;
  border: 1px dashed #b8c9dc !important;
  border-radius: var(--app-radius) !important;
  background: #f8fbff !important;
}

body.settings-bootstrap .product-image-placeholder {
  color: var(--app-muted) !important;
  font-weight: 900 !important;
}

body.settings-bootstrap .product-image-placeholder i {
  color: var(--app-primary-2) !important;
  font-size: 30px !important;
}

body.settings-bootstrap .image-actions {
  display: grid !important;
  align-content: end !important;
  gap: 10px !important;
}

body.settings-bootstrap input[type="file"].form-control {
  padding: 9px !important;
  font-size: 13px !important;
}

body.settings-bootstrap .settings-save-dock {
  min-height: 66px !important;
  padding: 10px 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  border: 1px solid var(--app-line) !important;
  border-radius: var(--app-radius) !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: var(--app-shadow-soft) !important;
}

body.settings-bootstrap .settings-save-dock .btn {
  width: 224px !important;
  min-height: 46px !important;
}

body.settings-bootstrap .toast {
  left: auto !important;
  right: 18px !important;
  bottom: 18px !important;
  transform: translateY(10px) !important;
}

body.settings-bootstrap .toast.show {
  transform: translateY(0) !important;
}

/* Compact settings layout for 1024 x 768 control screens */
body.settings-bootstrap .app-header {
  height: 58px !important;
  padding: 6px 16px !important;
}

body.settings-bootstrap .app-title {
  font-size: 28px !important;
  line-height: 1.1 !important;
}

body.settings-bootstrap .close-page {
  min-width: 88px !important;
  min-height: 44px !important;
}

body.settings-bootstrap .settings-main {
  height: calc(100vh - 58px) !important;
  grid-template-rows: minmax(0, 1fr) 50px !important;
  gap: 8px !important;
  padding: 8px 14px 10px !important;
}

body.settings-bootstrap .settings-layout {
  grid-template-columns: minmax(0, 1.16fr) minmax(330px, .84fr) !important;
  gap: 10px !important;
}

body.settings-bootstrap .settings-column {
  gap: 8px !important;
}

body.settings-bootstrap .settings-column-right {
  grid-template-rows: 108px 108px minmax(0, 1fr) !important;
}

body.settings-bootstrap .settings-card {
  border-radius: 8px !important;
}

body.settings-bootstrap .card-head {
  min-height: 48px !important;
  padding: 8px 12px !important;
}

body.settings-bootstrap .head-icon {
  width: 36px !important;
  height: 36px !important;
  flex-basis: 36px !important;
  border-radius: 8px !important;
}

body.settings-bootstrap .card-head h2 {
  font-size: 20px !important;
  line-height: 1.15 !important;
}

body.settings-bootstrap .card-body-tight,
body.settings-bootstrap .settings-column-left .card-body-tight {
  padding: 8px 10px !important;
  gap: 7px !important;
  overflow: hidden !important;
}

body.settings-bootstrap .section-box {
  padding: 8px 10px !important;
  border-radius: 8px !important;
}

body.settings-bootstrap .section-title {
  margin-bottom: 6px !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
}

body.settings-bootstrap .section-title i {
  width: 24px !important;
  height: 24px !important;
  border-radius: 7px !important;
  font-size: 12px !important;
}

body.settings-bootstrap .form-label {
  margin-bottom: 3px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}

body.settings-bootstrap .form-control,
body.settings-bootstrap .form-select,
body.settings-bootstrap .btn,
body.settings-bootstrap .switch-box {
  min-height: 38px !important;
  height: 38px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
}

body.settings-bootstrap .form-control,
body.settings-bootstrap .form-select {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

body.settings-bootstrap .btn {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

body.settings-bootstrap .scan-row,
body.settings-bootstrap .printer-row {
  grid-template-columns: minmax(0, 1fr) 92px !important;
  gap: 8px !important;
}

body.settings-bootstrap .scale-grid {
  gap: 6px 8px !important;
}

body.settings-bootstrap .scale-command-row {
  grid-template-columns: minmax(0, 1fr) 116px 116px !important;
  gap: 8px !important;
  margin-top: 8px !important;
}

body.settings-bootstrap .switch-box {
  padding: 7px 10px !important;
}

body.settings-bootstrap .form-check-input {
  width: 20px !important;
  height: 20px !important;
}

body.settings-bootstrap .status-grid {
  grid-template-columns: 1.15fr minmax(0, 1fr) .85fr !important;
  gap: 6px !important;
}

body.settings-bootstrap .scale-test-box .status-grid {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 5px !important;
}

body.settings-bootstrap .status-box,
body.settings-bootstrap .scale-test-box .status-box {
  min-height: 54px !important;
  display: block !important;
  padding: 6px 8px !important;
}

body.settings-bootstrap .scale-test-box .status-box {
  min-height: 32px !important;
  display: grid !important;
  grid-template-columns: 112px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 4px 8px !important;
}

body.settings-bootstrap .status-box strong,
body.settings-bootstrap .scale-test-box .status-box strong {
  display: block !important;
  margin-bottom: 4px !important;
  font-size: 11px !important;
  line-height: 1.15 !important;
}

body.settings-bootstrap .scale-test-box .status-box strong {
  margin-bottom: 0 !important;
  font-size: 13px !important;
}

body.settings-bootstrap .scale-test-box .badge-status,
body.settings-bootstrap .scale-test-box .raw-box {
  font-size: 14px !important;
}

body.settings-bootstrap .scale-test-box .parsed-weight {
  font-size: 18px !important;
}

/* Final override: slightly larger settings text now that the compact layout has room. */
body.settings-bootstrap .card-head h2 {
  font-size: 21px !important;
}

body.settings-bootstrap .section-title {
  font-size: 15px !important;
}

body.settings-bootstrap .form-label {
  font-size: 13px !important;
}

body.settings-bootstrap input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body.settings-bootstrap select,
body.settings-bootstrap textarea,
body.settings-bootstrap .form-control,
body.settings-bootstrap .form-select,
body.settings-bootstrap .btn,
body.settings-bootstrap .switch-box {
  font-size: 15px !important;
}

body.settings-bootstrap .scale-test-box .status-box strong {
  font-size: 14px !important;
}

body.settings-bootstrap .scale-test-box .badge-status,
body.settings-bootstrap .scale-test-box .raw-box {
  font-size: 15px !important;
}

body.settings-bootstrap .scale-test-box .parsed-weight {
  font-size: 20px !important;
}

/* Final override: stack default product image preview above actions. */
body.settings-bootstrap .image-panel {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) 46px !important;
  gap: 8px !important;
}

body.settings-bootstrap .product-image-preview {
  min-height: 0 !important;
  height: 100% !important;
}

body.settings-bootstrap .image-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 140px !important;
  align-content: stretch !important;
  align-items: stretch !important;
  gap: 8px !important;
}

/* Final override: make the native file input divider fill the control height. */
body.settings-bootstrap #defaultProductImageFile.form-control {
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 10px 0 0 !important;
  line-height: 38px !important;
  overflow: hidden !important;
}

body.settings-bootstrap #defaultProductImageFile.form-control::file-selector-button {
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 10px 0 0 !important;
  padding: 0 12px !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  line-height: 38px !important;
}

/* Final override: enlarge the three scale test rows. */
body.settings-bootstrap .scale-test-box .status-grid {
  gap: 7px !important;
}

body.settings-bootstrap .scale-test-box .status-box {
  min-height: 40px !important;
  grid-template-columns: 120px minmax(0, 1fr) !important;
  padding: 5px 8px !important;
}

body.settings-bootstrap .scale-test-box .status-box strong {
  font-size: 15px !important;
}

body.settings-bootstrap .scale-test-box .badge-status,
body.settings-bootstrap .scale-test-box .raw-box {
  min-height: 30px !important;
  height: 30px !important;
  font-size: 16px !important;
}

body.settings-bootstrap .scale-test-box .parsed-weight {
  min-height: 30px !important;
  height: 30px !important;
  font-size: 23px !important;
}

/* Final header tool alignment: keep every page identical to the scale page. */
.page-top .top-tools,
.app-header .top-tools,
body.about-v2 .page-top .top-tools,
body.operator-v2 .page-top .top-tools,
.product-page .page-top .top-tools,
.customer-page .page-top .top-tools,
.user-page .page-top .top-tools,
.report-page .page-top .top-tools,
body.scale-page .page-top .top-tools {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}

.page-top .top-tools .global-keyboard-toggle,
.app-header .top-tools .global-keyboard-toggle {
  flex: 0 0 46px !important;
  width: 46px !important;
  min-width: 46px !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  border: 1px solid var(--app-line) !important;
  border-radius: var(--app-radius) !important;
  background: #fff !important;
  color: var(--app-primary) !important;
  font-size: 20px !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

.page-top .top-tools .global-keyboard-toggle[aria-pressed="true"],
.app-header .top-tools .global-keyboard-toggle[aria-pressed="true"] {
  border-color: transparent !important;
  background: #1e5b9f !important;
  color: #fff !important;
}

.page-top .top-tools .clock-display,
.app-header .top-tools .clock-display {
  flex: 0 0 auto !important;
  min-width: 178px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--app-line) !important;
  border-radius: var(--app-radius) !important;
  background: #fff !important;
  color: var(--app-muted) !important;
  font-family: var(--app-mono) !important;
  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 850 !important;
  box-shadow: none !important;
  white-space: nowrap !important;
}

.page-top .top-tools .close-page,
.page-top .top-tools .close-page.btn,
.page-top .top-tools .close-page.btn-danger,
.app-header .top-tools .close-page,
.app-header .top-tools .close-page.btn {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 94px !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  border: 0 !important;
  border-radius: var(--app-radius) !important;
  background: linear-gradient(135deg, var(--app-danger), #b72d41) !important;
  color: #fff !important;
  font-family: var(--app-font) !important;
  font-size: 17px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  box-shadow: 0 8px 18px rgba(217, 54, 78, .22) !important;
}

.page-top .top-tools .close-page i,
.app-header .top-tools .close-page i {
  display: none !important;
}

body.settings-bootstrap .badge-status,
body.settings-bootstrap .raw-box,
body.settings-bootstrap .parsed-weight,
body.settings-bootstrap .scale-test-box .badge-status,
body.settings-bootstrap .scale-test-box .raw-box,
body.settings-bootstrap .scale-test-box .parsed-weight {
  min-height: 24px !important;
  height: 24px !important;
  padding: 4px 8px !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

body.settings-bootstrap .parsed-weight,
body.settings-bootstrap .scale-test-box .parsed-weight {
  font-size: 15px !important;
}

body.settings-bootstrap .export-grid {
  grid-template-columns: 112px minmax(0, 1fr) !important;
  gap: 8px !important;
}

body.settings-bootstrap .image-panel {
  grid-template-columns: minmax(0, 1fr) 156px !important;
  gap: 10px !important;
}

body.settings-bootstrap .product-image-preview {
  min-height: 0 !important;
}

body.settings-bootstrap .product-image-placeholder {
  gap: 5px !important;
  font-size: 13px !important;
}

body.settings-bootstrap .product-image-placeholder i {
  font-size: 24px !important;
}

body.settings-bootstrap .image-actions {
  gap: 8px !important;
}

body.settings-bootstrap input[type="file"].form-control {
  padding: 6px !important;
  font-size: 12px !important;
}

body.settings-bootstrap .settings-save-dock {
  min-height: 50px !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
}

body.settings-bootstrap .settings-save-dock .btn {
  width: 210px !important;
  min-height: 38px !important;
  height: 38px !important;
}

/* Final override: settings scale test rows */
body.settings-bootstrap .scale-test-box .status-grid {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 5px !important;
}

body.settings-bootstrap .scale-test-box .status-box {
  min-height: 32px !important;
  display: grid !important;
  grid-template-columns: 112px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 4px 8px !important;
}

body.settings-bootstrap .scale-test-box .status-box strong {
  margin-bottom: 0 !important;
}

/* Final override: larger text in settings scale test rows */
body.settings-bootstrap .scale-test-box .status-box strong {
  font-size: 13px !important;
}

body.settings-bootstrap .scale-test-box .badge-status,
body.settings-bootstrap .scale-test-box .raw-box {
  font-size: 14px !important;
}

body.settings-bootstrap .scale-test-box .parsed-weight {
  font-size: 18px !important;
}

body.settings-bootstrap .scale-test-box .status-box strong {
  font-size: 13px !important;
}

body.settings-bootstrap .scale-test-box .badge-status,
body.settings-bootstrap .scale-test-box .raw-box {
  font-size: 14px !important;
}

body.settings-bootstrap .scale-test-box .parsed-weight {
  font-size: 18px !important;
}

/* Settings scale test: show status, raw data and parsed weight as 3 rows. */
body.settings-bootstrap .scale-test-box .status-grid {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 5px !important;
}

body.settings-bootstrap .scale-test-box .status-box {
  min-height: 32px !important;
  display: grid !important;
  grid-template-columns: 112px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 4px 8px !important;
}

body.settings-bootstrap .scale-test-box .status-box strong {
  margin-bottom: 0 !important;
}

/* Keep label previews from clipping the bottom border */
.sticker-preview {
  box-sizing: border-box;
  padding: 10px 12px 14px !important;
  border-radius: 7px !important;
}

.sticker-preview .lbl-weight-box {
  margin: 3px 0 !important;
}

.sticker-preview .lbl-wt-value {
  font-size: 53px !important;
}

.sticker-preview .lbl-name-rows {
  margin-top: 2px !important;
}

.sticker-preview .lbl-name-row {
  font-size: 16px !important;
  line-height: 1.42 !important;
}

.sticker-preview .lbl-info-grid {
  grid-template-columns: minmax(0, 1fr) 92px !important;
  gap: 5px !important;
  align-items: center !important;
  margin: 2px 0 !important;
}

.sticker-preview .lbl-row {
  font-size: 13.5px !important;
  line-height: 1.42 !important;
}

.sticker-preview .lbl-row b {
  font-size: 13.5px !important;
}

.sticker-preview .lbl-qr {
  width: 92px !important;
  height: 92px !important;
}

.sticker-preview .lbl-hr2 {
  margin: 3px 0 2px !important;
}

.sticker-preview .lbl-footer {
  margin-top: 2px !important;
  padding-bottom: 1px !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  flex: 0 0 auto;
}

body.operator-v2 .operator-preview-label {
  box-sizing: border-box;
  padding-bottom: 18px !important;
  border-radius: 7px !important;
}

body.operator-v2 .operator-preview-label .lbl-weight-box {
  margin: 5px 0 !important;
}

body.operator-v2 .operator-preview-label .lbl-wt-value {
  font-size: 56px !important;
}

body.operator-v2 .operator-preview-label .lbl-info-grid {
  grid-template-columns: minmax(0, 1fr) 108px !important;
  gap: 8px !important;
  margin: 3px 0 !important;
}

body.operator-v2 .operator-preview-label .lbl-row {
  line-height: 1.38 !important;
}

body.operator-v2 .operator-preview-label .lbl-qr {
  width: 108px !important;
  height: 108px !important;
}

body.operator-v2 .operator-preview-label .lbl-footer {
  margin-top: 2px !important;
  padding-bottom: 1px !important;
  flex: 0 0 auto;
}

body.operator-v2 .operator-preview-label .lbl-brand {
  padding-bottom: 4px !important;
}

body.operator-v2 .operator-preview-label .lbl-shop-name {
  font-size: 26px !important;
}

body.operator-v2 .operator-preview-label .lbl-hr {
  margin: 4px 0 !important;
}

body.operator-v2 .operator-preview-label .lbl-weight-box {
  padding: 5px 7px !important;
  margin: 4px 0 !important;
}

body.operator-v2 .operator-preview-label .lbl-wt-label {
  font-size: 15px !important;
}

body.operator-v2 .operator-preview-label .lbl-wt-value {
  font-size: 52px !important;
}

body.operator-v2 .operator-preview-label .lbl-wt-unit {
  font-size: 19px !important;
}

body.operator-v2 .operator-preview-label .lbl-name-rows {
  margin-top: 2px !important;
}

body.operator-v2 .operator-preview-label .lbl-name-row {
  font-size: 16px !important;
  line-height: 1.34 !important;
}

body.operator-v2 .operator-preview-label .lbl-info-grid {
  grid-template-columns: minmax(0, 1fr) 100px !important;
  gap: 7px !important;
  margin: 2px 0 !important;
}

body.operator-v2 .operator-preview-label .lbl-row,
body.operator-v2 .operator-preview-label .lbl-row b {
  font-size: 16px !important;
  line-height: 1.34 !important;
}

body.operator-v2 .operator-preview-label .lbl-qr {
  width: 100px !important;
  height: 100px !important;
}

body.operator-v2 .operator-preview-label .lbl-hr2 {
  margin: 3px 0 2px !important;
}

body.operator-v2 .operator-preview-label .lbl-footer {
  font-size: 13px !important;
  line-height: 1.2 !important;
}

/* Unified page header and close button */
.page-top,
.app-header,
body.about-v2 .page-top,
body.operator-v2 .page-top,
.product-page .page-top,
.user-page .page-top,
.report-page .page-top,
body.scale-page .page-top {
  height: 72px !important;
  min-height: 72px !important;
  padding: 0 26px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  border-bottom: 1px solid rgba(12, 61, 107, .14) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 251, 255, .98)) !important;
  box-shadow: 0 1px 0 rgba(12, 61, 107, .08), 0 8px 22px rgba(7, 31, 56, .07) !important;
}

.page-top > div:first-child,
.app-header > .app-title {
  min-width: 0;
}

.page-top h1,
.app-title,
body.about-v2 .page-top h1,
body.operator-v2 .page-top h1,
.product-page .page-top h1,
.user-page .page-top h1,
.report-page .page-top h1,
body.scale-page .page-top h1 {
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: var(--app-ink) !important;
  font-family: var(--app-font) !important;
  font-size: 30px !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  white-space: nowrap;
}

.page-top h1 i,
.app-title i,
body.about-v2 .page-top h1 i,
body.operator-v2 .page-top h1 i,
.product-page .page-top h1 i,
.user-page .page-top h1 i,
.report-page .page-top h1 i,
body.scale-page .page-top h1 i {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--app-radius);
  background: linear-gradient(135deg, var(--app-accent), #078d78);
  color: #fff !important;
  font-size: 19px;
  box-shadow: 0 8px 18px rgba(0, 169, 140, .18);
}

.top-tools {
  min-width: 0;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}

.connection-pill,
.clock-display {
  min-height: 44px !important;
  height: 44px !important;
  padding: 0 14px !important;
  border: 1px solid var(--app-line) !important;
  border-radius: var(--app-radius) !important;
  background: #fff !important;
  color: var(--app-muted) !important;
  font-family: var(--app-font) !important;
  font-size: 15px !important;
  font-weight: 850 !important;
  box-shadow: none !important;
}

.clock-display {
  font-family: var(--app-mono) !important;
}

.close-page,
.product-page .close-page,
.product-page .close-page.btn-danger,
.user-page .close-page,
.user-page .close-page.btn-danger,
.report-page .close-page,
.report-page .close-page.btn-danger,
body.about-v2 .close-page,
body.operator-v2 .close-page,
body.scale-page .close-page,
.app-header .close-page {
  width: auto !important;
  min-width: 94px !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  border: 0 !important;
  border-radius: var(--app-radius) !important;
  background: linear-gradient(135deg, var(--app-danger), #b72d41) !important;
  color: #fff !important;
  font-family: var(--app-font) !important;
  font-size: 17px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  box-shadow: 0 8px 18px rgba(217, 54, 78, .22) !important;
}

.close-page i {
  display: none !important;
}

.close-page::before,
.product-page .close-page::before,
.user-page .close-page::before,
.report-page .close-page::before,
body.about-v2 .close-page::before,
body.operator-v2 .close-page::before,
body.scale-page .close-page::before,
.app-header .close-page::before {
  content: "\f00d" !important;
  display: inline-block !important;
  font-family: "Font Awesome 6 Free" !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.close-page:hover,
.close-page:focus-visible,
.product-page .close-page.btn-danger:hover,
.product-page .close-page.btn-danger:focus-visible,
.user-page .close-page.btn-danger:hover,
.user-page .close-page.btn-danger:focus-visible,
.report-page .close-page.btn-danger:hover,
.report-page .close-page.btn-danger:focus-visible,
body.operator-v2 .close-page:hover {
  filter: brightness(1.03) !important;
  transform: translateY(-1px);
}

/* Unified add/edit modals for products, customers, and users */
#productEditorModal,
#customerEditorModal,
#userEditorModal {
  position: fixed !important;
  inset: 0 !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  background: rgba(7, 31, 56, .58) !important;
  backdrop-filter: blur(4px) !important;
  z-index: 2000 !important;
}

#productEditorModal[style*="display: flex"],
#customerEditorModal[style*="display: flex"],
#userEditorModal[style*="display: flex"],
#productEditorModal.show,
#customerEditorModal.show,
#userEditorModal.show {
  display: flex !important;
}

#productEditorModal .product-editor-box,
#customerEditorModal .cust-editor-box,
#userEditorModal .user-editor-box {
  width: min(860px, calc(100vw - 48px)) !important;
  height: auto !important;
  max-height: calc(100vh - 48px) !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  overflow: hidden !important;
  border: 1px solid rgba(209, 225, 238, .95) !important;
  border-radius: var(--app-radius) !important;
  background: #f6f9fc !important;
  box-shadow: 0 28px 70px rgba(7, 31, 56, .34) !important;
}

#userEditorModal .user-editor-box {
  width: min(920px, calc(100vw - 48px)) !important;
}

#productEditorModal .modal-header,
#customerEditorModal .cust-editor-head,
#userEditorModal .modal-header {
  min-height: 72px !important;
  padding: 14px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  border: 0 !important;
  background: linear-gradient(135deg, var(--app-primary), #092b4d) !important;
  color: #fff !important;
}

#productEditorModal .modal-header h2,
#customerEditorModal .cust-editor-head h2,
#userEditorModal .modal-header h2 {
  margin: 0 !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: #fff !important;
  font-family: var(--app-font) !important;
  font-size: 27px !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

#productEditorModal .modal-header h2 i,
#customerEditorModal .cust-editor-head h2 i,
#userEditorModal .modal-header h2 i {
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: var(--app-radius) !important;
  background: rgba(255, 255, 255, .14) !important;
  color: #fff !important;
  font-size: 17px !important;
}

#productEditorModal .modal-close,
#customerEditorModal #closeCustomerEditor,
#userEditorModal .modal-close {
  width: auto !important;
  min-width: 78px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border: 1px solid rgba(255, 255, 255, .30) !important;
  border-radius: var(--app-radius) !important;
  background: rgba(255, 255, 255, .13) !important;
  color: #fff !important;
  font-family: var(--app-font) !important;
  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  box-shadow: none !important;
}

#productEditorModal .modal-close::before,
#customerEditorModal #closeCustomerEditor::before,
#userEditorModal .modal-close::before {
  content: "\f00d" !important;
  display: inline-block !important;
  font-family: "Font Awesome 6 Free" !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.modal-header-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 0 0 auto;
}

#productEditorModal .modal-keyboard-toggle,
#customerEditorModal .modal-keyboard-toggle,
#userEditorModal .modal-keyboard-toggle {
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  border: 1px solid rgba(255, 255, 255, .30) !important;
  border-radius: var(--app-radius) !important;
  background: rgba(255, 255, 255, .13) !important;
  color: #fff !important;
  font-size: 17px !important;
  box-shadow: none !important;
}

#productEditorModal .modal-keyboard-toggle::before,
#customerEditorModal .modal-keyboard-toggle::before,
#userEditorModal .modal-keyboard-toggle::before {
  content: none !important;
}

#productEditorModal .modal-keyboard-toggle[aria-pressed="true"],
#customerEditorModal .modal-keyboard-toggle[aria-pressed="true"],
#userEditorModal .modal-keyboard-toggle[aria-pressed="true"] {
  background: rgba(255, 255, 255, .28) !important;
  color: #fff !important;
}

#productEditorModal .product-editor-form,
#customerEditorModal .cust-editor-body,
#userEditorModal .user-editor-form {
  min-height: 0 !important;
  padding: 20px !important;
  overflow-y: auto !important;
  background: #f6f9fc !important;
}

#customerEditorModal .cust-editor-body form {
  min-height: 0 !important;
}

#productEditorModal .product-editor-form,
#customerEditorModal .cust-form-grid,
#userEditorModal .user-editor-form {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px 16px !important;
}

#productEditorModal .product-editor-form label,
#customerEditorModal .cust-form-group,
#userEditorModal .user-editor-form label {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  color: #24364c !important;
  font-family: var(--app-font) !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  font-weight: 850 !important;
}

#productEditorModal .product-editor-form label > span:first-child,
#customerEditorModal .cust-form-group > label:first-child,
#userEditorModal .user-editor-form label > span:first-child {
  min-height: 20px !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  color: #334155 !important;
  font-family: var(--app-font) !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

#productEditorModal .product-editor-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
#productEditorModal .product-editor-form select,
#productEditorModal .custom-select-trigger,
#customerEditorModal .cust-form-group input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
#userEditorModal .user-editor-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
#userEditorModal .user-editor-form select {
  width: 100% !important;
  min-height: 50px !important;
  height: 50px !important;
  padding: 9px 13px !important;
  border: 1px solid var(--app-line) !important;
  border-radius: var(--app-radius) !important;
  background: #fff !important;
  color: var(--app-ink) !important;
  font-family: var(--app-font) !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
  font-weight: 850 !important;
  box-shadow: none !important;
}

#productEditorModal .product-editor-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
#productEditorModal .product-editor-form select:focus,
#productEditorModal .custom-select.open .custom-select-trigger,
#customerEditorModal .cust-form-group input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
#userEditorModal .user-editor-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
#userEditorModal .user-editor-form select:focus {
  outline: 0 !important;
  border-color: rgba(20, 96, 168, .62) !important;
  box-shadow: 0 0 0 3px rgba(20, 96, 168, .12) !important;
}

#productEditorModal .span-all,
#customerEditorModal .span-2,
#userEditorModal .span-all {
  grid-column: 1 / -1 !important;
}

#productEditorModal .product-image-field,
#userEditorModal .setting-card,
#customerEditorModal .cust-active-toggle {
  border: 1px solid var(--app-line) !important;
  border-radius: var(--app-radius) !important;
  background: #fff !important;
}

#customerEditorModal .cust-form-actions,
#productEditorModal .product-editor-actions,
#userEditorModal .product-editor-actions {
  grid-column: 1 / -1 !important;
  position: sticky !important;
  bottom: -20px !important;
  margin: 4px -20px -20px !important;
  padding: 14px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  border-top: 1px solid #d8e5f0 !important;
  background: rgba(246, 249, 252, .96) !important;
}

#customerEditorModal .cust-form-actions .btn-cancel,
#customerEditorModal .cust-form-actions .btn-save,
#productEditorModal .product-editor-actions .btn,
#userEditorModal .product-editor-actions .btn {
  min-width: 118px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border-radius: var(--app-radius) !important;
  font-family: var(--app-font) !important;
  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

#customerEditorModal .cust-form-actions .btn-cancel,
#productEditorModal .btn-cancel,
#userEditorModal .btn-cancel {
  border: 1px solid var(--app-line) !important;
  background: #fff !important;
  color: var(--app-primary) !important;
}

#customerEditorModal .cust-form-actions .btn-save,
#productEditorModal .btn-confirm-print,
#userEditorModal .btn-confirm-print {
  border: 0 !important;
  background: linear-gradient(135deg, var(--app-accent), #078d78) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(0, 169, 140, .20) !important;
}

#customerEditorModal .cust-form-actions .btn-cancel:hover,
#productEditorModal .btn-cancel:hover,
#userEditorModal .btn-cancel:hover {
  background: #f2f7fc !important;
  color: var(--app-primary-2) !important;
}

#customerEditorModal .cust-form-actions .btn-save:hover,
#productEditorModal .btn-confirm-print:hover,
#userEditorModal .btn-confirm-print:hover {
  filter: brightness(1.03) !important;
}

/* Thai-safe text controls: prevent lower vowels from being clipped. */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select,
textarea,
.form-control,
.form-select,
.custom-select-trigger,
.input-shell input {
  min-height: 52px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  line-height: 1.55 !important;
  overflow: visible !important;
}

#productEditorModal .product-editor-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
#productEditorModal .product-editor-form select,
#productEditorModal .custom-select-trigger,
#customerEditorModal .cust-form-group input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
#userEditorModal .user-editor-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
#userEditorModal .user-editor-form select {
  min-height: 54px !important;
  height: 54px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  line-height: 1.55 !important;
}

@media (max-width: 760px) {
  #productEditorModal,
  #customerEditorModal,
  #userEditorModal {
    padding: 12px !important;
  }

  #productEditorModal .product-editor-box,
  #customerEditorModal .cust-editor-box,
  #userEditorModal .user-editor-box {
    width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 24px) !important;
  }

  #productEditorModal .product-editor-form,
  #customerEditorModal .cust-form-grid,
  #userEditorModal .user-editor-form,
  #productEditorModal .product-image-picker {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #customerEditorModal .cust-form-actions,
  #productEditorModal .product-editor-actions,
  #userEditorModal .product-editor-actions {
    justify-content: stretch !important;
  }

  #customerEditorModal .cust-form-actions .btn-cancel,
  #customerEditorModal .cust-form-actions .btn-save,
  #productEditorModal .product-editor-actions .btn,
  #userEditorModal .product-editor-actions .btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
}

@media (max-width: 760px) {
  .page-top,
  .app-header {
    height: auto;
    min-height: 68px;
    padding: 12px 16px;
  }

  .page-top h1,
  .app-title {
    font-size: 24px;
  }

  .page-body,
  .settings-main {
    padding: 14px;
  }
}

/* สถานะการส่งข้อมูล (เขียนไฟล์ TXT) ในตารางประวัติการชั่ง */
.export-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  line-height: 1.6;
}

.export-status i {
  font-size: 12px;
}

.export-status-ok {
  background: #e6f7ec;
  color: #1a7a3c;
  border: 1px solid #b6e3c5;
}

.export-status-fail {
  background: #fdecec;
  color: #c0392b;
  border: 1px solid #f3c2bd;
}

.export-status-na {
  color: #9bb0c2;
  font-weight: 600;
}

/* Final settings-page compaction: keep controls aligned and fit 1024 x 768. */
body.settings-bootstrap .app-header {
  height: 58px !important;
  min-height: 58px !important;
  padding: 0 16px !important;
}

body.settings-bootstrap .app-title {
  font-size: 28px !important;
}

body.settings-bootstrap .app-title i {
  width: 40px !important;
  height: 40px !important;
  flex-basis: 40px !important;
}

body.settings-bootstrap .app-header .close-page {
  min-width: 88px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 16px !important;
}

body.settings-bootstrap .settings-main {
  height: calc(100vh - 58px) !important;
  grid-template-rows: minmax(0, 1fr) 50px !important;
  gap: 8px !important;
  padding: 8px 14px 10px !important;
  overflow: hidden !important;
}

body.settings-bootstrap .settings-layout {
  grid-template-columns: minmax(0, 1.16fr) minmax(330px, .84fr) !important;
  gap: 10px !important;
}

body.settings-bootstrap .settings-column {
  gap: 8px !important;
}

body.settings-bootstrap .settings-column-right {
  grid-template-rows: 108px 108px minmax(0, 1fr) !important;
}

body.settings-bootstrap .card-head {
  min-height: 48px !important;
  padding: 8px 12px !important;
}

body.settings-bootstrap .head-icon {
  width: 36px !important;
  height: 36px !important;
  flex-basis: 36px !important;
}

body.settings-bootstrap .card-head h2 {
  font-size: 20px !important;
  line-height: 1.15 !important;
}

body.settings-bootstrap .card-body-tight,
body.settings-bootstrap .settings-column-left .card-body-tight {
  padding: 8px 10px !important;
  gap: 7px !important;
  overflow: hidden !important;
}

body.settings-bootstrap .section-box {
  padding: 8px 10px !important;
}

body.settings-bootstrap .section-title {
  margin-bottom: 6px !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
}

body.settings-bootstrap .section-title i {
  width: 24px !important;
  height: 24px !important;
}

body.settings-bootstrap .form-label {
  margin-bottom: 3px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}

body.settings-bootstrap input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body.settings-bootstrap select,
body.settings-bootstrap textarea,
body.settings-bootstrap .form-control,
body.settings-bootstrap .form-select,
body.settings-bootstrap .btn,
body.settings-bootstrap .switch-box {
  min-height: 38px !important;
  height: 38px !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
}

body.settings-bootstrap input[type="file"].form-control {
  padding: 6px !important;
  font-size: 12px !important;
}

body.settings-bootstrap .scan-row,
body.settings-bootstrap .printer-row {
  grid-template-columns: minmax(0, 1fr) 92px !important;
  gap: 8px !important;
}

body.settings-bootstrap .scale-grid {
  gap: 6px 8px !important;
}

body.settings-bootstrap .scale-command-row {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-top: 8px !important;
}

body.settings-bootstrap .scale-command-row .switch-box {
  grid-column: span 2;
}

body.settings-bootstrap .switch-box {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

body.settings-bootstrap .scale-command-row .btn {
  min-width: 0 !important;
  width: 100% !important;
}

body.settings-bootstrap .form-check-input {
  width: 20px !important;
  height: 20px !important;
}

body.settings-bootstrap .status-grid,
body.settings-bootstrap .scale-test-box .status-grid {
  grid-template-columns: 1.15fr minmax(0, 1fr) .85fr !important;
  gap: 6px !important;
}

body.settings-bootstrap .status-box,
body.settings-bootstrap .scale-test-box .status-box {
  min-height: 54px !important;
  display: block !important;
  padding: 6px 8px !important;
}

body.settings-bootstrap .status-box strong,
body.settings-bootstrap .scale-test-box .status-box strong {
  display: block !important;
  margin-bottom: 4px !important;
  font-size: 11px !important;
  line-height: 1.15 !important;
}

body.settings-bootstrap .badge-status,
body.settings-bootstrap .raw-box,
body.settings-bootstrap .parsed-weight,
body.settings-bootstrap .scale-test-box .badge-status,
body.settings-bootstrap .scale-test-box .raw-box,
body.settings-bootstrap .scale-test-box .parsed-weight {
  min-height: 24px !important;
  height: 24px !important;
  padding: 4px 8px !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

body.settings-bootstrap .parsed-weight,
body.settings-bootstrap .scale-test-box .parsed-weight {
  font-size: 15px !important;
}

body.settings-bootstrap .export-grid {
  grid-template-columns: 112px minmax(0, 1fr) !important;
  gap: 8px !important;
}

body.settings-bootstrap .image-panel {
  grid-template-columns: minmax(0, 1fr) 156px !important;
  gap: 10px !important;
}

body.settings-bootstrap .image-actions {
  gap: 8px !important;
}

body.settings-bootstrap .product-image-placeholder {
  gap: 5px !important;
  font-size: 13px !important;
}

body.settings-bootstrap .settings-save-dock {
  min-height: 50px !important;
  padding: 6px 10px !important;
}

body.settings-bootstrap .settings-save-dock .btn {
  width: 210px !important;
  min-height: 38px !important;
  height: 38px !important;
}

/* Final override: settings scale test rows */
body.settings-bootstrap .scale-test-box .status-grid {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 5px !important;
}

body.settings-bootstrap .scale-test-box .status-box {
  min-height: 32px !important;
  display: grid !important;
  grid-template-columns: 112px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 4px 8px !important;
}

body.settings-bootstrap .scale-test-box .status-box strong {
  margin-bottom: 0 !important;
}
/* Final override: larger text in settings scale test rows */
body.settings-bootstrap .scale-test-box .status-box strong {
  font-size: 13px !important;
}

body.settings-bootstrap .scale-test-box .badge-status,
body.settings-bootstrap .scale-test-box .raw-box {
  font-size: 14px !important;
}

body.settings-bootstrap .scale-test-box .parsed-weight {
  font-size: 18px !important;
}

/* Final override: fill available settings space with slightly larger text. */
body.settings-bootstrap .card-head h2 {
  font-size: 21px !important;
}

body.settings-bootstrap .section-title {
  font-size: 15px !important;
}

body.settings-bootstrap .form-label {
  font-size: 13px !important;
}

body.settings-bootstrap input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body.settings-bootstrap select,
body.settings-bootstrap textarea,
body.settings-bootstrap .form-control,
body.settings-bootstrap .form-select,
body.settings-bootstrap .btn,
body.settings-bootstrap .switch-box {
  font-size: 15px !important;
}

body.settings-bootstrap .scale-test-box .status-box strong {
  font-size: 14px !important;
}

body.settings-bootstrap .scale-test-box .badge-status,
body.settings-bootstrap .scale-test-box .raw-box {
  font-size: 15px !important;
}

body.settings-bootstrap .scale-test-box .parsed-weight {
  font-size: 20px !important;
}

/* Final override: stack default product image preview above actions. */
body.settings-bootstrap .image-panel {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) 46px !important;
  gap: 8px !important;
}

body.settings-bootstrap .product-image-preview {
  min-height: 0 !important;
  height: 100% !important;
}

body.settings-bootstrap .image-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 140px !important;
  align-content: stretch !important;
  align-items: stretch !important;
  gap: 8px !important;
}

/* Final override: enlarge the three scale test rows. */
body.settings-bootstrap .scale-test-box .status-grid {
  gap: 7px !important;
}

body.settings-bootstrap .scale-test-box .status-box {
  min-height: 40px !important;
  grid-template-columns: 120px minmax(0, 1fr) !important;
  padding: 5px 8px !important;
}

body.settings-bootstrap .scale-test-box .status-box strong {
  font-size: 15px !important;
}

body.settings-bootstrap .scale-test-box .badge-status,
body.settings-bootstrap .scale-test-box .raw-box {
  min-height: 30px !important;
  height: 30px !important;
  font-size: 16px !important;
}

body.settings-bootstrap .scale-test-box .parsed-weight {
  min-height: 30px !important;
  height: 30px !important;
  font-size: 23px !important;
}