:root {
  --bg: #071428;
  --sidebar-bg: linear-gradient(180deg, #0f172a 0%, #0b1220 100%);
  --sidebar-text: #ffffff;
  --accent: #60a5fa;
}

.order-delivery-status {
  margin-top: 10px;
  padding: 9px 11px;
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.72);
  max-width: 520px;
}
.order-delivery-status-head {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #f6d875;
}
.delivery-vehicle {
  display: inline-block;
  font-size: 20px;
  animation: deliveryVehiclePulse 1.8s ease-in-out infinite;
}
.delivery-thumbs-up {
  display: inline-block;
  font-size: 20px;
  animation: deliveryThumbsUp 1.2s ease-in-out infinite;
}
.order-delivery-meta {
  margin-top: 4px;
  color: #cbd5e1;
  font-size: 12px;
}
@keyframes deliveryVehiclePulse {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(5px); }
}
@keyframes deliveryThumbsUp {
  0%, 100% { transform: scale(1) rotate(0deg); }
  45% { transform: scale(1.2) rotate(-8deg); }
  70% { transform: scale(1.08) rotate(6deg); }
}

.shift-card {
  margin: 16px 0;
  padding: 16px 18px;
  border: 1px solid rgba(212, 175, 55, 0.45);
  border-radius: 14px;
  background: #152033;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.shift-card[hidden] {
  display: none !important;
}
.shift-card h3 {
  margin: 4px 0 0;
}
.shift-card button,
.shift-card select {
  margin: 4px;
}

.task-modal-card {
  max-width: 760px;
  width: min(96vw, 760px);
  max-height: min(92vh, 860px);
  overflow: auto;
  box-sizing: border-box;
  border: 1px solid rgba(212, 175, 55, 0.35);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
}

/* Unlock 7 professional black-and-gold Create Task workflow */
#taskModal {
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(8px);
}
#taskModal .task-modal-card {
  max-width: 860px;
  width: min(96vw, 860px);
  padding: 20px;
  border: 1px solid rgba(250, 204, 21, 0.6);
  border-radius: 18px;
  background:
    radial-gradient(circle at 85% 0%, rgba(250, 204, 21, 0.12), transparent 34%),
    linear-gradient(145deg, #13170f, #070905);
  color: #f8fafc;
  box-shadow:
    0 26px 80px rgba(0, 0, 0, 0.65),
    0 0 28px rgba(250, 204, 21, 0.1);
}
#taskModal .task-modal-head {
  border-color: rgba(250, 204, 21, 0.3);
}
#taskModal .task-modal-kicker,
#taskModal .task-location-title {
  color: #facc15;
}
#taskModal .task-icon-close {
  background: #15180f;
  color: #fde68a;
  border-color: #a97808;
}
#taskModal .task-step h4 {
  margin: 0 0 14px;
  color: #fde68a;
  font-size: 17px;
}
#taskModal .task-type-card {
  min-height: 92px;
  border-color: rgba(250, 204, 21, 0.28);
  background: linear-gradient(145deg, #171b12, #0c0e09);
  color: #f8fafc;
  transition: 160ms ease;
}
#taskModal .task-type-card:hover {
  transform: translateY(-2px);
  border-color: #facc15;
}
#taskModal .task-type-card:has(input:checked) {
  background: linear-gradient(145deg, #4d3905, #161408);
  border-color: #facc15;
  box-shadow: 0 0 16px rgba(250, 204, 21, 0.2);
}
#taskModal .task-type-card span,
#taskModal .task-price-hint {
  color: #aeb5a7;
}
#taskModal .task-location-panel,
#taskModal .task-product-list-panel {
  border: 1px solid rgba(250, 204, 21, 0.28);
  border-radius: 12px;
  background: rgba(8, 10, 6, 0.72);
  padding: 13px;
}
#taskModal label {
  color: #fde68a;
  font-size: 12px;
  font-weight: 700;
}
#taskModal #taskSteps input:not([type='radio']):not([type='checkbox']),
#taskModal #taskSteps select {
  min-height: 43px;
  border: 1px solid rgba(250, 204, 21, 0.38);
  border-radius: 9px;
  background: #0c0f09;
  color: #f8fafc;
  outline: none;
}
#taskModal #taskSteps input:focus,
#taskModal #taskSteps select:focus {
  border-color: #facc15;
  box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.15);
}
#taskModal #taskSteps option {
  background: #11140d;
  color: #fff;
}
#taskModal .task-product-list {
  background: #0b0e08;
  border-color: rgba(250, 204, 21, 0.28);
}
#taskModal .task-item-row.card {
  background: #151910 !important;
  border: 1px solid rgba(250, 204, 21, 0.24);
}
#taskModal .task-item-row.card div {
  color: #eef2e8 !important;
}
#taskModal .primary-btn,
#taskModal .success-btn {
  border: 1px solid #facc15;
  background: linear-gradient(180deg, #ffe45b, #b47700);
  color: #201800;
  font-weight: 900;
  box-shadow: 0 7px 18px rgba(250, 204, 21, 0.2);
}
#taskModal .secondary-btn,
#taskModal .danger-btn {
  background: #15180f;
  color: #f8fafc;
  border: 1px solid rgba(250, 204, 21, 0.34);
}
#taskModal .task-field-invalid {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18) !important;
}
#taskModal select option:disabled {
  color: #6b7280;
}

.task-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.24);
}

.task-modal-head h3 {
  margin: 2px 0 0;
}

.task-modal-kicker {
  color: #a16207;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.task-icon-close {
  border: 1px solid rgba(212, 175, 55, 0.45);
  background: #fffaf0;
  color: #713f12;
  border-radius: 8px;
  padding: 7px 10px;
  font-weight: 700;
  cursor: pointer;
}

.task-type-grid,
.task-field-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.task-field-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 10px;
}

.task-location-panel {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(212, 175, 55, 0.36);
  border-radius: 8px;
  background: #fffdf7;
}

.task-location-title {
  color: #92400e;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.task-type-card {
  border: 1px solid rgba(212, 175, 55, 0.35);
  background: #fff;
  border-radius: 8px;
  padding: 10px;
  cursor: pointer;
}

.task-type-card:has(input:checked) {
  background: #fff7df;
  border-color: #d4af37;
  box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.2);
}

.task-type-card strong,
.task-type-card span {
  display: block;
}

.task-type-card span,
.task-price-hint {
  color: #64748b;
  font-size: 12px;
}

.task-price-hint {
  margin-top: 5px;
}

.task-product-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 230px);
  gap: 12px;
  align-items: start;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.task-product-fields {
  min-width: 0;
}

.task-product-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.task-product-list-panel {
  min-width: 0;
  width: 100%;
  max-width: 230px;
  box-sizing: border-box;
}

.task-product-list {
  background: #fff;
  border: 1px solid #e6eef6;
  border-radius: 8px;
  padding: 8px;
  min-height: 120px;
  max-height: 260px;
  overflow: auto;
  width: 100%;
  box-sizing: border-box;
  overflow-wrap: anywhere;
}

.orders-filter-panel {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(180px, 240px);
  gap: 10px;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid rgba(250, 204, 21, 0.42);
  border-radius: 14px;
  background: linear-gradient(135deg, #172033, #0f172a);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.18);
}

.orders-filter-panel span {
  display: block;
  margin-bottom: 5px;
  color: #fde68a;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.orders-filter-panel select {
  width: 100%;
  padding: 8px;
  border: 1px solid rgba(250, 204, 21, 0.55);
  border-radius: 8px;
  background: #111827;
  color: #f8fafc;
}
.orders-filter-panel select:focus {
  outline: 2px solid rgba(250, 204, 21, 0.35);
  border-color: #facc15;
}

.orders-filter-panel input[type='date'] {
  width: 100%;
  min-height: 40px;
  padding: 8px;
  border: 1px solid rgba(250, 204, 21, 0.55);
  border-radius: 8px;
  background: #111827;
  color: #f8fafc;
}

.orders-load-wrap {
  display: flex;
  align-items: end;
}
.orders-load-btn {
  width: 100%;
  min-height: 42px;
  padding: 9px 18px;
  border: 1px solid #facc15;
  border-radius: 9px;
  background: linear-gradient(180deg, #ffe45b, #b47700);
  color: #211900;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 7px 18px rgba(250, 204, 21, 0.22);
}
.orders-load-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 9px 24px rgba(250, 204, 21, 0.34);
}
.orders-load-btn:disabled {
  cursor: wait;
  opacity: 0.7;
}

#taskSteps input,
#taskSteps select {
  width: 100%;
  padding: 8px;
  border-radius: 6px;
  border: 1px solid #e6eef6;
}

@media (max-width: 720px) {
  .task-type-grid,
  .task-field-grid,
  .task-product-layout,
  .orders-filter-panel {
    grid-template-columns: 1fr;
  }

  .task-product-list-panel {
    max-width: 230px;
  }
}

/* debug rule removed after verification */

/* Force dark background if some rules are being overridden elsewhere */
html,
body,
#app {
  background: linear-gradient(180deg, #071428 0%, #0b1220 100%) !important;
  color: #e9f0f6 !important;
}

/* Make cards darker to avoid large white blocks */
.card {
  background: linear-gradient(180deg, #0b1220, #071428) !important;
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 14px 36px rgba(2, 6, 23, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.03) !important;
  color: inherit !important;
}

/* ---------------- Professional Outbound UI & Theme ---------------- */
/* Buttons: clear, elevated, with subtle shadows and hover lift */
.primary-btn {
  background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
  color: #fff;
  border: none;
  padding: 12px 18px;
  border-radius: 10px;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.14);
  transition:
    transform 140ms ease,
    box-shadow 140ms ease;
}

/* Stylize the barcode print button specifically */
#barcodePrintBtn {
  background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
  color: #fff;
  border: none;
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.14);
  cursor: pointer;
  transition:
    transform 140ms ease,
    box-shadow 140ms ease,
    opacity 120ms ease;
}
#barcodePrintBtn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(37, 99, 235, 0.18);
}
#barcodePrintBtn:active {
  transform: translateY(-1px);
}

/* smaller variant when placed inside compact panels */
.barcode-panel #barcodePrintBtn {
  padding: 8px 12px;
  font-size: 14px;
}
.primary-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(37, 99, 235, 0.18);
}

.success-btn {
  background: linear-gradient(90deg, #10b981 0%, #059669 100%);
  color: #fff;
  border: none;
  padding: 12px 18px;
  border-radius: 10px;
  font-weight: 800;
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.12);
  transition:
    transform 140ms ease,
    box-shadow 140ms ease;
}
.success-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(16, 185, 129, 0.16);
}

/* Ensure the barcode Print button is visible and high-contrast */
#barcodePrintBtn,
.barcode-panel #barcodePrintBtn.secondary-btn {
  background: linear-gradient(90deg, #2563eb 0%, #3b82f6 100%) !important;
  color: #ffffff !important;
  border: none !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.14) !important;
  cursor: pointer !important;
  transition:
    transform 140ms ease,
    box-shadow 140ms ease,
    opacity 120ms ease !important;
}
#barcodePrintBtn:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 36px rgba(37, 99, 235, 0.18) !important;
}

.full-input,
input.full-input,
select.full-input,
textarea.full-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #e6eef6;
  background: #fff;
  font-size: 15px;
  color: #071428;
  box-shadow: inset 0 1px 0 rgba(2, 6, 23, 0.03);
}

/* Outbound-specific session panel polish */
.session-panel {
  width: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff, #fbfdff);
  box-shadow: 0 16px 40px rgba(2, 6, 23, 0.06);
  border: 1px solid rgba(15, 23, 42, 0.04);
  max-height: 520px;
  overflow: hidden;
  border-left: 4px solid rgba(255, 107, 0, 0.12);
}
.session-panel .session-panel-body small {
  color: #6b7280;
  font-weight: 700;
}
.session-panel .session-panel-body {
  padding: 8px 6px;
}

/* Outbound progress circle with warm accent */
#outProgressCircle {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ff9a2e 0%, #ff6b00 100%);
  color: #fff;
  font-size: 48px;
  font-weight: 900;
  box-shadow:
    0 12px 36px rgba(255, 107, 0, 0.18),
    inset 0 -6px 12px rgba(255, 255, 255, 0.06);
  border: 6px solid rgba(0, 0, 0, 0.08);
  transition:
    transform 160ms ease,
    box-shadow 160ms ease;
}

#outSessionList .session-item {
  background: linear-gradient(180deg, #fff, #fcfcfd);
  border-radius: 8px;
  padding: 8px;
  margin-bottom: 8px;
  box-shadow: 0 6px 18px rgba(2, 6, 23, 0.04);
}

.session-item.session-error {
  background: linear-gradient(180deg, #fff5f5, #fff1f2);
  border-left: 4px solid #ef4444;
  color: #7f1d1d;
}

/* Info card refinement */
.info-card {
  border-radius: 10px;
  padding: 12px;
  background: linear-gradient(180deg, #ffffff, #fbfdff);
  border: 1px solid #e6eef6;
  box-shadow: 0 8px 20px rgba(2, 6, 23, 0.04);
}
.info-card .info-row {
  font-size: 14px;
  color: #0b1220;
  padding: 6px 0;
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Shop page: responsive POS + shelf transfer workspace */
.shop-page {
  width: 100%;
  max-width: 100%;
  padding: 16px;
  border-radius: 12px;
  background:
    radial-gradient(circle at top right, rgba(212, 175, 55, 0.14), transparent 30%),
    linear-gradient(180deg, #0a0f1e 0%, #111827 100%);
  color: #e2e8f0;
}

.shop-page h2 {
  margin: 0;
  color: #d4af37;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.shop-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.shop-page-header p {
  margin: 6px 0 0;
  color: #cbd5e1;
  max-width: 640px;
}

.shop-page .shop-back-home-btn {
  width: auto !important;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #d4af37;
  border-radius: 8px;
  background: transparent;
  color: #d4af37;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition:
    background 150ms ease,
    transform 150ms ease;
}

.shop-page .shop-back-home-btn:hover,
.shop-page .shop-back-home-btn:active {
  background: rgba(212, 175, 55, 0.12);
  transform: translateY(-1px);
}

.shop-header-spacer {
  width: 76px;
}

@media (max-width: 640px) {
  .shop-page-header {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .shop-page-header > div {
    order: 3;
    width: 100%;
  }
  .shop-header-spacer {
    display: none;
  }
}

.setup-required-card {
  background: #111827;
  color: #f8fafc;
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-left: 4px solid #d4af37;
  border-radius: 12px;
  padding: 16px;
  margin: 0 0 16px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
}

.setup-required-card h3 {
  margin: 0 0 6px;
  color: #d4af37;
}

.setup-required-card p {
  margin: 0 0 12px;
  color: #cbd5e1;
}

.shop-top-grid,
.shop-work-grid {
  display: grid;
  gap: 16px;
  align-items: start;
}

.shop-top-grid {
  grid-template-columns: minmax(280px, 0.82fr) minmax(300px, 1.18fr);
}

.shop-work-grid {
  grid-template-columns: minmax(280px, 0.85fr) minmax(320px, 1.15fr);
  margin-top: 16px;
}

.shop-card {
  background:
    linear-gradient(180deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.98)),
    radial-gradient(circle at top right, rgba(212, 175, 55, 0.14), transparent 16rem);
  color: #f1f5f9;
  padding: 16px;
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(212, 175, 55, 0.24);
  min-width: 0;
}

.shop-card h3 {
  margin-top: 0;
  margin-bottom: 8px;
  color: #d4af37;
  font-weight: 850;
}

.shop-card label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 700;
  color: #cbd5e1;
}

.shop-card .muted,
.shop-card p,
#shopTransferMsg {
  color: #94a3b8;
}

.shop-select-control,
.shop-transfer-fields input,
.shop-transfer-fields textarea,
.shop-transfer-fields select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(212, 175, 55, 0.3);
  background: #111827;
  color: #f1f5f9;
  font-size: 15px;
  box-sizing: border-box;
}

.shop-select-control:focus,
.shop-transfer-fields input:focus,
.shop-transfer-fields textarea:focus,
.shop-transfer-fields select:focus {
  outline: none;
  border-color: #d4af37;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.14);
}

.shop-select-control::placeholder,
.shop-transfer-fields input::placeholder,
.shop-transfer-fields textarea::placeholder {
  color: #64748b;
}

.shop-transfer-fields textarea {
  min-height: 92px;
  resize: vertical;
  line-height: 1.35;
}

.shop-select-control {
  margin: 6px 0 10px;
}

.shop-select-card {
  min-height: 100%;
}

.shop-select-card label {
  display: block;
  color: #fde68a;
  font-weight: 900;
  margin-top: 12px;
}

.shop-select-heading {
  display: grid;
  gap: 6px;
  padding: 14px;
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(212, 175, 55, 0.18), rgba(212, 175, 55, 0.04)),
    rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(212, 175, 55, 0.28);
}

.shop-select-heading span,
.shop-overview-label {
  color: #facc15;
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.shop-select-heading strong {
  color: #f8fafc;
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  overflow-wrap: anywhere;
}

.shop-action-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.shop-action-row button,
#shopTransferBtn {
  min-height: 44px;
}

.shop-page .primary-btn,
.shop-page button.primary-btn,
#shopTransferBtn {
  background: #d4af37;
  border: 1px solid #d4af37;
  color: #0a0f1e;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(212, 175, 55, 0.18);
}

.shop-page .primary-btn:hover,
.shop-page button.primary-btn:hover,
#shopTransferBtn:hover {
  background: #f0c94a;
  border-color: #f0c94a;
}

.shop-page .secondary-btn,
.shop-page button.secondary-btn {
  background: transparent;
  border: 1px solid rgba(212, 175, 55, 0.42);
  color: #d4af37;
}

.shop-page .secondary-btn:hover,
.shop-page button.secondary-btn:hover {
  background: rgba(212, 175, 55, 0.12);
}

.shop-transfer-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

#shopTransferBtn {
  margin-top: 12px;
}

#shopTransferMsg {
  margin-top: 8px;
  min-height: 20px;
}

.shop-transfer-hints {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  max-height: 132px;
  overflow: auto;
}

.shop-transfer-session {
  border: 1px solid rgba(212, 175, 55, 0.22);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.62);
  margin-top: 12px;
  padding: 10px;
}

.shop-transfer-session-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  color: #f8fafc;
  margin-bottom: 8px;
}

.shop-transfer-session-head span {
  color: #d4af37;
  font-weight: 800;
}

.shop-transfer-scan-list {
  display: grid;
  gap: 6px;
  max-height: 170px;
  overflow: auto;
  margin-bottom: 10px;
}

.shop-transfer-scan-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  background: #111827;
  padding: 8px 10px;
  color: #f1f5f9;
}

.shop-transfer-scan-row span {
  color: #94a3b8;
  font-size: 12px;
  word-break: break-word;
}

.shop-transfer-scan-row strong:last-child {
  color: #d4af37;
  white-space: nowrap;
}

.shop-source-chip {
  border: 1px solid rgba(212, 175, 55, 0.32);
  background: #111827;
  color: #f1f5f9;
  border-radius: 8px;
  padding: 8px 10px;
  min-height: 38px;
  cursor: pointer;
  text-align: left;
}

.shop-source-chip:hover,
.shop-source-chip:focus {
  background: rgba(212, 175, 55, 0.12);
  border-color: #d4af37;
  outline: none;
}

.shop-source-chip strong {
  display: block;
  font-size: 13px;
}

.shop-source-chip span {
  display: block;
  color: #94a3b8;
  font-size: 12px;
}

#shopShelfList {
  max-height: none;
  overflow-y: visible;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

#shopShelfList.shop-shelf-list-boxed {
  max-height: min(var(--shop-shelf-box-height, 760px), 72vh);
  overflow-y: auto;
  scrollbar-gutter: stable;
  padding: 10px 7px 2px 10px;
  border: 1px solid rgba(212, 175, 55, 0.34);
  border-radius: 13px;
  background: rgba(2, 6, 23, 0.32);
  box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.18);
}

#shopShelfList::-webkit-scrollbar {
  width: 8px;
}
#shopShelfList::-webkit-scrollbar-thumb {
  background: rgba(212, 175, 55, 0.5);
  border-radius: 999px;
}
#shopShelfList::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.45);
  border-radius: 999px;
}

.shop-shelf-card {
  min-height: 54px;
  margin: 0 0 9px;
  padding: 11px;
  white-space: normal;
  word-break: break-word;
  border: 1px solid rgba(212, 175, 55, 0.38);
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(212, 175, 55, 0.1), rgba(15, 23, 42, 0.92));
}

.shop-shelf-select {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.shop-shelf-show {
  width: 100%;
  margin-top: 9px;
  padding: 7px 10px !important;
  font-size: 12px !important;
}
.shop-shelf-details.hidden {
  display: none;
}
.shop-shelf-barcodes {
  list-style: none;
  margin: 8px 0 0;
  padding: 8px 0 0;
  border-top: 1px solid rgba(212, 175, 55, 0.24);
}
.shop-shelf-barcodes li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}
.shop-shelf-barcodes li span,
.shop-shelf-barcodes li small {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}
.shop-shelf-barcodes li strong {
  color: #f4d675;
}
.shop-shelf-barcodes li small {
  margin-top: 2px;
  color: #94a3b8;
  font-size: 10px;
}
.shop-shelf-barcodes li b {
  flex: 0 0 auto;
  color: #fde68a;
  font-size: 11px;
}

@media (max-width: 640px) {
  #shopShelfList.shop-shelf-list-boxed {
    max-height: 68vh;
    padding: 7px 5px 1px 7px;
  }
}

.shop-shelf-card strong {
  color: #f1f5f9;
}

.shop-shelf-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 5px;
  color: #94a3b8;
  font-size: 12px;
}

.shop-shelf-quantity {
  flex: 0 0 auto;
  color: #fde68a;
  font-weight: 900;
}

#shopDashboardArea {
  min-width: 0;
}

.shop-transferred-products-card {
  margin-top: 16px;
}

.shop-transferred-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.shop-transferred-head h3 {
  margin: 0;
}

.shop-transferred-head span,
.shop-transferred-empty span {
  color: #94a3b8;
}

.shop-transferred-empty {
  display: grid;
  gap: 6px;
}

.shop-transferred-empty strong {
  color: #d4af37;
}

.shop-transferred-count {
  color: #facc15;
  font-weight: 850;
  white-space: nowrap;
  margin-top: 6px;
  text-align: right;
}

.shop-activity-range-label {
  display: block;
  color: #94a3b8;
  font-size: 12px;
  margin-bottom: 4px;
  text-align: right;
}

.shop-activity-range {
  min-width: 150px;
  border: 1px solid rgba(212, 175, 55, 0.55);
  border-radius: 8px;
  background: #0f172a;
  color: #f8fafc;
  padding: 8px 10px;
}

.shop-stock-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.shop-stock-summary-grid > div {
  border: 1px solid rgba(212, 175, 55, 0.16);
  background: rgba(15, 23, 42, 0.62);
  border-radius: 8px;
  padding: 10px;
  min-width: 0;
}

.shop-stock-summary-grid strong {
  display: block;
  color: #f8fafc;
  font-size: 18px;
  line-height: 1.2;
}

.shop-stock-summary-grid span {
  display: block;
  color: #94a3b8;
  font-size: 12px;
  margin-top: 4px;
}

.shop-transferred-table-wrap {
  max-height: 320px;
  overflow: auto;
  border: 1px solid rgba(212, 175, 55, 0.18);
  border-radius: 12px;
}

.shop-transferred-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
}

.shop-transferred-table th,
.shop-transferred-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  text-align: left;
}

.shop-transferred-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #111827;
  color: #facc15;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.shop-transferred-table td {
  color: #f8fafc;
}

.shop-transferred-table td small {
  display: block;
  color: #94a3b8;
  margin-top: 3px;
}

.shop-transferred-table .numeric {
  text-align: right;
  font-weight: 850;
}

.shop-transferred-table tr:last-child td {
  border-bottom: 0;
}

.shop-dashboard-header {
  min-width: 0;
}

.shop-overview-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 100%;
  padding: 18px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 90% 10%, rgba(250, 204, 21, 0.2), transparent 15rem),
    linear-gradient(135deg, rgba(146, 64, 14, 0.92), rgba(30, 41, 59, 0.96));
  color: #f8fafc;
  border: 1px solid rgba(250, 204, 21, 0.32);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
  box-sizing: border-box;
}

.shop-overview-main {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.shop-overview-main strong {
  font-size: clamp(1.45rem, 3vw, 2.25rem);
  font-weight: 950;
  overflow-wrap: anywhere;
}

.shop-overview-main small {
  color: #fde68a;
  overflow-wrap: anywhere;
}

.shop-overview-empty {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 160px;
}

.shop-overview-empty span {
  color: #fde68a;
}

.shop-dashboard-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.shop-dashboard-actions .primary-btn,
.shop-dashboard-actions .secondary-btn {
  min-height: 42px;
}

@media (max-width: 900px) {
  .shop-top-grid,
  .shop-work-grid {
    grid-template-columns: 1fr;
  }

  .shop-transfer-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shop-overview-card {
    min-height: 170px;
  }
}

@media (max-width: 560px) {
  .shop-page {
    padding-bottom: 24px;
  }

  .shop-card {
    padding: 12px;
  }

  .shop-transferred-head {
    display: grid;
  }

  .shop-activity-range-label,
  .shop-transferred-count {
    text-align: left;
  }

  .shop-stock-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shop-transferred-table {
    min-width: 560px;
  }

  .shop-transfer-fields {
    grid-template-columns: 1fr;
  }

  .shop-action-row,
  .shop-action-row button,
  #shopTransferBtn,
  .shop-dashboard-actions,
  .shop-dashboard-actions .primary-btn,
  .shop-dashboard-actions .secondary-btn {
    width: 100%;
  }

  .shop-overview-card {
    flex-direction: column;
    align-items: stretch;
  }

  #shopShelfList {
    max-height: 320px;
  }
}

/* Keep operational screens visually stable. Scanner feedback may animate once,
   but persistent warning controls must never pulse or blink. */
.blink {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* small responsive tweak for outbound */
@media (max-width: 900px) {
  #outProgressCircle {
    width: 160px;
    height: 160px;
    font-size: 56px;
  }
  .session-panel {
    width: 100%;
    max-width: 100%;
  }
}

/* Step 3 scan area polish */
#out-step-3 input[type='text'],
#out-step-3 input[type='tel'] {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #e6eef6;
  background: #fff;
  font-size: 15px;
  color: #071428;
  box-shadow: inset 0 1px 0 rgba(2, 6, 23, 0.03);
}
#out-step-3 label {
  font-weight: 700;
  color: #0b1220;
}
#out-step-3 .primary-btn {
  padding: 10px 14px;
}

/* subtle layout balance for session list */
#outSessionList {
  max-height: 320px;
  overflow: auto;
  padding: 6px;
}

/* Outbound Step 3 footer/button layout */

/* Expiry date input styling for a nicer calendar look */
input.date-input {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(180deg, #fff, #f8fafc);
  color: #071428;
  box-shadow: 0 6px 18px rgba(2, 6, 23, 0.04);
  font-size: 15px;
}
input.date-input:focus {
  outline: none;
  box-shadow: 0 8px 30px rgba(37, 99, 235, 0.12);
  transform: translateY(-1px);
}
.step-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 920px;
  margin: 12px auto 0 auto;
  gap: 12px;
  padding: 6px 8px;
}
.step-footer .left {
  display: flex;
  gap: 8px;
  align-items: center;
}
.out-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}
.out-actions button {
  min-width: 140px;
}

@media (max-width: 720px) {
  .step-footer {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .out-actions {
    display: flex;
    gap: 10px;
    flex-direction: column;
  }
  .out-actions button {
    width: 100%;
    min-width: unset;
  }
  .step-footer .left {
    margin-top: 6px;
  }
}

/* End Outbound UI polish */
/* Reports styles */
.report-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}
.report-summary {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.report-card {
  background: #fff;
  color: #0b1220;
  padding: 12px;
  border-radius: 10px;
  min-width: 160px;
  box-shadow: 0 8px 20px rgba(2, 6, 23, 0.04);
}
.report-table {
  width: 100%;
  background: #fff;
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 8px 20px rgba(2, 6, 23, 0.04);
  color: #0b1220;
}
/* ════════════════════════════════════════════════════════════
   WAREHOUSE PAGE — mobile-first layout
   Base styles target phones (≥ 360 px).
   @media (min-width: 640px)  = tablet
   @media (min-width: 1024px) = desktop
   ════════════════════════════════════════════════════════════ */

/* ── Summary tiles ─────────────────────────────────────────── */
#warehouseArea {
  padding: 16px;
  border-radius: 14px;
  background:
    radial-gradient(circle at top right, rgba(212, 175, 55, 0.14), transparent 30%),
    linear-gradient(180deg, #080b08, #11150d);
  color: #f8fafc;
}
.warehouse-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 0 15px;
  margin-bottom: 14px;
  border-bottom: 2px solid #d4af37;
}
.warehouse-page-header > div {
  text-align: center;
}
.warehouse-page-header span {
  color: #d4af37;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.warehouse-page-header h2 {
  margin: 3px 0;
  color: #facc15;
  font-size: 24px;
}
.warehouse-page-header p {
  margin: 0;
  color: #aeb5a7;
  font-size: 12px;
}
#warehouseArea .warehouse-back-home-btn {
  width: auto !important;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #d4af37;
  border-radius: 8px;
  background: transparent;
  color: #d4af37;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
#warehouseArea .warehouse-back-home-btn:hover {
  background: rgba(212, 175, 55, 0.12);
  transform: translateY(-1px);
}
.warehouse-header-spacer {
  width: 76px;
}
#warehouseArea .warehouse-filter-card {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 12px;
  padding: 12px;
  background: #11170e;
  border: 1px solid rgba(250, 204, 21, 0.35);
  color: #fde68a;
  box-shadow: 0 7px 20px rgba(0, 0, 0, 0.28);
}
#warehouseArea .warehouse-filter-field {
  display: grid;
  gap: 5px;
  flex: 1 1 190px;
}
#warehouseArea .warehouse-filter-field label {
  font-size: 12px;
  font-weight: 800;
}
#warehouseArea #warehouseLocationFilter,
#warehouseArea #warehouseActivityRange {
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid rgba(250, 204, 21, 0.5);
  border-radius: 8px;
  background: #090c07;
  color: #fff;
  outline: none;
}
#warehouseArea #warehouseLocationFilter:focus,
#warehouseArea #warehouseActivityRange:focus {
  border-color: #facc15;
  box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.15);
}
#warehouseArea #loadWarehouseActivityBtn {
  min-height: 42px;
  min-width: 110px;
}
#warehouseArea #warehouseActivityStatus {
  align-self: center;
  min-width: 60px;
  color: #d6c985;
  font-size: 12px;
}
.wh-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}

/* Current-stock tile spans both columns on mobile */
#warehouseStock {
  grid-column: 1 / -1;
}

.warehouse-tile {
  background: linear-gradient(160deg, #181b12 0%, #0b0e08 100%);
  border: 1px solid rgba(250, 204, 21, 0.28);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 4px 16px rgba(2, 6, 23, 0.18);
  min-height: 88px;
}

.warehouse-tile .tile-icon {
  font-size: 20px;
  line-height: 1;
  margin-bottom: 2px;
}

.warehouse-tile .tile-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #d6c985;
}

.warehouse-tile .tile-value {
  font-size: 32px;
  font-weight: 900;
  color: #f1f5f9;
  line-height: 1;
}

.warehouse-tile.highlight {
  background: linear-gradient(160deg, #433306 0%, #161408 100%);
  border-color: rgba(250, 204, 21, 0.55);
  border-left: 4px solid #facc15;
}

.warehouse-tile.highlight .tile-value {
  color: #facc15;
}

/* Tablet: 3 equal columns, stock no longer full-width */
@media (min-width: 640px) {
  .wh-summary {
    grid-template-columns: repeat(3, 1fr);
  }
  #warehouseStock {
    grid-column: auto;
  }
  .warehouse-tile .tile-value {
    font-size: 36px;
  }
}

/* ── Quick-action buttons ───────────────────────────────────── */
.wh-quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}

.wh-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px 8px;
  border-radius: 14px;
  border: none;
  font-weight: 700;
  font-size: 13px;
  min-height: 72px;
  cursor: pointer;
  transition:
    transform 120ms ease,
    box-shadow 120ms ease;
  -webkit-tap-highlight-color: transparent;
}

.wh-action-btn:active {
  transform: scale(0.96);
}

.wh-action-icon {
  font-size: 22px;
  line-height: 1;
}

.wh-action-label {
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.02em;
}

.wh-action-in {
  background: linear-gradient(135deg, #ffe45b 0%, #b47700 100%);
  color: #211900;
  box-shadow: 0 6px 18px rgba(250, 204, 21, 0.23);
}

.wh-action-out {
  background: linear-gradient(135deg, #2a2e1d 0%, #11150d 100%);
  color: #fde68a;
  border: 1px solid #a97808;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

.wh-action-inv {
  background: linear-gradient(135deg, #8b6505 0%, #d4af37 100%);
  color: #160f00;
  box-shadow: 0 6px 18px rgba(212, 175, 55, 0.25);
}

@media (min-width: 640px) {
  .wh-quick-actions {
    grid-template-columns: repeat(3, minmax(0, 200px));
    justify-content: start;
  }
  .wh-action-btn {
    flex-direction: row;
    gap: 10px;
    padding: 14px 20px;
    min-height: 52px;
    border-radius: 12px;
  }
  .wh-action-icon {
    font-size: 20px;
  }
  .wh-action-label {
    font-size: 14px;
  }
}

/* ── 3D viewer section ──────────────────────────────────────── */
.wh-viewer-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Controls panel — collapsible on mobile */
.wh-controls-panel {
  background: rgba(12, 15, 9, 0.86);
  border: 1px solid rgba(250, 204, 21, 0.26);
  border-radius: 12px;
  overflow: hidden;
}

.wh-controls-toggle {
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 700;
  color: #fde68a;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}

.wh-controls-toggle::before {
  content: '▸';
  font-size: 11px;
  transition: transform 160ms ease;
}

details[open] .wh-controls-toggle::before {
  transform: rotate(90deg);
}

.wh-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 14px 14px;
}

.wh-ctrl-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #cbd5e1;
  font-weight: 600;
}

.wh-ctrl-item input[type='checkbox'] {
  width: 18px;
  height: 18px;
  accent-color: #facc15;
}

.wh-slider {
  flex: 1;
  accent-color: #facc15;
}

.wh-select {
  flex: 1;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(250, 204, 21, 0.35);
  background: #0b0e08;
  color: #f1f5f9;
  font-size: 14px;
}

.wh-ctrl-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.wh-ctrl-btns .primary-btn,
.wh-ctrl-btns .secondary-btn {
  flex: 1;
  min-height: 44px;
}

/* On tablet+ keep controls in a single horizontal row */
@media (min-width: 640px) {
  .wh-controls {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px 14px 14px;
  }
  .wh-ctrl-btns {
    margin-left: auto;
  }
  .wh-ctrl-btns .primary-btn,
  .wh-ctrl-btns .secondary-btn {
    flex: none;
    min-width: 120px;
  }
  .wh-slider {
    width: 100px;
    flex: none;
  }
}

/* ── 3D canvas container ────────────────────────────────────── */
.wh-3d-container {
  position: relative;
  width: 100%;
  height: 280px;
  background: #080a07;
  border: 1px solid rgba(250, 204, 21, 0.32);
  border-radius: 12px;
  overflow: hidden;
}

#warehouseArea .wh-action-in {
  background: linear-gradient(135deg, #ffe45b, #b47700);
  color: #211900;
  border: 1px solid #facc15;
}
#warehouseArea .wh-action-out {
  background: linear-gradient(135deg, #2a2e1d, #11150d);
  color: #fde68a;
  border: 1px solid #a97808;
}
#warehouseArea .wh-action-inv {
  background: linear-gradient(135deg, #8b6505, #d4af37);
  color: #160f00;
  border: 1px solid #facc15;
}
#warehouseArea #warehouseLoadSample {
  background: linear-gradient(180deg, #ffe96b 0%, #e2ad16 52%, #a66d00 100%);
  color: #211900;
  border: 1px solid #facc15;
  font-weight: 900;
  box-shadow: 0 7px 18px rgba(250, 204, 21, 0.28);
}
#warehouseArea #warehouseLoadSample:hover {
  transform: translateY(-1px);
  box-shadow: 0 9px 24px rgba(250, 204, 21, 0.4);
}
#warehouseArea .wh-ctrl-btns .secondary-btn {
  background: #15180f;
  color: #fde68a;
  border: 1px solid #a97808;
}

@media (max-width: 639px) {
  .warehouse-page-header {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .warehouse-page-header > div {
    order: 3;
    width: 100%;
    text-align: left;
  }
  .warehouse-header-spacer {
    display: none;
  }
  #warehouseArea #warehouseLocationFilter {
    display: block;
    width: 100%;
    margin: 8px 0 0 !important;
    min-width: 0 !important;
  }
}

@media (min-width: 640px) {
  .wh-3d-container {
    height: 380px;
  }
}

@media (min-width: 1024px) {
  .wh-3d-container {
    height: 520px;
  }
}

/* ── Overlay panels ─────────────────────────────────────────── */
.wh-overlay {
  position: absolute;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(2, 6, 23, 0.12);
  padding: 10px 12px;
  overflow: auto;
  color: #111;
}

/* On mobile all overlays sit at the bottom, full width */
.wh-overlay--tl,
.wh-overlay--tr,
.wh-overlay--br {
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 40%;
  border-radius: 10px 10px 0 0;
}

.wh-overlay-title {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
}

.wh-suggestions-list {
  font-size: 13px;
  color: #111;
}

.wh-overlay-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 8px;
}

.wh-bin-content {
  font-size: 13px;
  color: #111;
}

/* On desktop restore classic absolute positioning */
@media (min-width: 1024px) {
  .wh-overlay--tl {
    top: 12px;
    left: 12px;
    bottom: auto;
    right: auto;
    width: 360px;
    max-height: 200px;
    border-radius: 10px;
  }
  .wh-overlay--tr {
    top: 12px;
    right: 12px;
    bottom: auto;
    left: auto;
    width: 240px;
    height: 180px;
    border-radius: 10px;
  }
  .wh-overlay--br {
    bottom: 12px;
    right: 12px;
    top: auto;
    left: auto;
    width: 260px;
    min-height: 120px;
    border-radius: 10px;
  }
}

/* ── warehouseInventorySmall (legacy kept for JS compat) ───── */
#warehouseInventorySmall {
  display: none;
}

#inventorySmallBtn {
  background: linear-gradient(135deg, #b45309 0%, #d97706 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.report-actions {
  display: flex;
  gap: 8px;
}
/* Ensure profit/report view text is visible regardless of global theme overrides */
#view-profit,
#view-profit * {
  color: #0b1220 !important;
  font-family:
    Inter,
    system-ui,
    -apple-system,
    sans-serif !important;
}
#profitContent {
  color: #0b1220 !important;
  background: transparent !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}
#profitContent .report-card,
#profitContent .report-table,
#profitContent .info-card {
  background: #ffffff !important;
  color: #0b1220 !important;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family:
    Inter,
    system-ui,
    -apple-system,
    sans-serif;
  background: linear-gradient(180deg, #08263c 0%, #0b3750 100%);
  color: #e9f0f6;
}
#app {
  display: flex;
}
.sidebar {
  width: 240px;
  background: var(--sidebar-bg);
  padding: 12px;
}
.nav-btn {
  display: block;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 8px 6px;
  border: 0;
  background: transparent;
  text-align: center;
  cursor: pointer;
}

/* Center common list-like text areas */
.lowstock-list,
.lowstock-item,
.tools-grid,
.tools-grid button,
.sidebar .brand-text {
  text-align: center;
}
.main {
  flex: 1;
  padding: 18px;
}
.view {
  display: none;
}
.view.active {
  display: block;
}
.big-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
}
.big-btn {
  padding: 12px;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  color: #071428;
  font-weight: 800;
  min-height: 56px; /* touch-friendly (smaller for mobile) */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition:
    transform 150ms ease,
    box-shadow 150ms ease;

  /* Dashboard button color variants */
  .big-btn.blue {
    background: #0b5cff;
    color: #fff;
  }

  /* New descriptive palette for dashboard buttons */
  /* Color palette: green, blue, red, gray */
  .big-btn.btn-shop {
    background: #facc15; /* yellow */
    color: #2a1400; /* dark text for contrast */
  }
  .big-btn.btn-warehouse {
    background: #e5e7eb; /* gray */
    color: #071428;
  }
  .big-btn.btn-orders {
    background: #0b5cff; /* blue */
    color: #ffffff;
  }
  .big-btn.btn-report {
    background: #e5e7eb; /* gray */
    color: #071428;
  }
  .big-btn.btn-inbound {
    background: #ef4444; /* red */
    color: #ffffff;
  }
  .big-btn.btn-outbound {
    background: #ef4444; /* red */
    color: #ffffff;
  }
  .big-btn.btn-history {
    background: #e5e7eb; /* gray */
    color: #071428;
  }
  .big-btn.btn-users {
    background: #10b981; /* green */
    color: #ffffff;
  }
  /* Profit button (prominent large green) */
  .tool-profit {
    background: linear-gradient(90deg, #059669, #10b981); /* green: Profit */
    color: #ffffff !important;
    min-width: 220px;
    padding: 18px 22px;
    font-size: 18px;
    font-weight: 900;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.18);
  }

  .tool-lowstock {
    background: linear-gradient(90deg, #ef4444, #dc2626); /* red: alerts/outbound */
    color: #ffffff !important;
    min-width: 220px;
    padding: 18px 22px;
    font-size: 17px;
    font-weight: 900;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(239, 68, 68, 0.16);
  }

  .tool-printers {
    background: linear-gradient(90deg, #0b5cff, #2563eb); /* blue: tools/shop */
    color: #ffffff !important;
    min-width: 220px;
    padding: 18px 22px;
    font-size: 17px;
    font-weight: 900;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(37, 99, 235, 0.16);
  }
  .big-btn.btn-warehouse {
    background: #4f46e5;
    color: #fff;
  } /* indigo */
  .big-btn.btn-orders {
    background: #0b5cff; /* blue */
    color: #fff;
  } /* blue */
  .tool-scanners {
    background: linear-gradient(90deg, #fb923c, #f97316);
    color: #ffffff !important;
    min-width: 220px;
    padding: 14px 20px;
    font-size: 16px;
    font-weight: 800;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(249, 115, 22, 0.14);
  }

  /* Hand Scanner view styling */
  .scanner-panel {
    display: block;
    gap: 12px;
  }
  .scanner-panel .card {
    background: linear-gradient(180deg, #0b1220, #071428);
    color: #e9f0f6;
  }
  #scannerStatus {
    min-height: 44px;
    font-weight: 600;
  }
  #scannerLastCode {
    background: linear-gradient(90deg, #071428, #0b1220);
    color: #60a5fa;
    border-radius: 8px;
    padding: 12px;
    font-size: 20px;
    text-align: center;
  }
  #scannerResult .card {
    background: linear-gradient(180deg, #071428, #0b1220);
    color: #e9f0f6;
  }
  /* Credit tool button - oval orange */
  .tool-credit {
    background: linear-gradient(90deg, #ff9a2e 0%, #ff6b00 100%);
    color: #ffffff;
    border-radius: 999px; /* fully rounded */
    padding: 10px 18px;
    font-weight: 700;
    box-shadow: 0 10px 30px rgba(255, 107, 0, 0.18);
    border: 2px solid rgba(255, 255, 255, 0.06);
  }
  .tool-createtask {
    background: linear-gradient(90deg, #0b5cff 0%, #2563eb 100%);
    color: #ffffff !important;
    min-width: 220px;
    padding: 14px 20px;
    font-size: 16px;
    font-weight: 800;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.14);
  }
  /* Tools grid and base tool button sizing */
  .tools-grid {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
  }

  .tool-btn {
    border: 0;
    cursor: pointer;
    color: #ffffff;
    font-weight: 800;
    border-radius: 14px;
    min-height: 60px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 20px;
    text-align: center;
    transition:
      transform 160ms ease,
      box-shadow 160ms ease,
      background 160ms ease;
    will-change: transform, box-shadow;
    user-select: none;
  }

  /* Hover / focus styles for tool buttons (accessible and prominent) */
  .tool-btn:hover,
  .tool-btn:focus,
  .tool-medium:hover,
  .tool-medium:focus {
    transform: translateY(-4px);
    box-shadow: 0 14px 36px rgba(2, 6, 23, 0.18);
    outline: none;
  }
  .tool-btn:focus-visible,
  .big-btn:focus-visible {
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14);
  }

  /* Ensure big dashboard buttons are visually centered and slightly larger */
  .big-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 20px;
    font-size: 17px;
    min-height: 64px;
    border-radius: 14px;
    cursor: pointer;
    transition:
      transform 140ms ease,
      box-shadow 140ms ease,
      filter 140ms ease;
    text-align: center;
  }
  .big-btn:hover,
  .big-btn:focus {
    transform: translateY(-3px);
    box-shadow: 0 12px 36px rgba(2, 6, 23, 0.14);
  }
  /* Slight scale on active to show press feedback */
  .big-btn:active,
  .tool-btn:active {
    transform: translateY(-1px) scale(0.997);
  }

  /* Stronger, button-specific selectors to override inline or other rules */
  button.tool-btn,
  button.tool-medium {
    padding: 16px 20px !important;
    font-size: 17px !important;
    min-height: 60px !important;
    border-radius: 14px !important;
  }

  button.big-btn {
    padding: 14px 22px !important;
    font-size: 17px !important;
    min-height: 68px !important;
    border-radius: 14px !important;
  }

  /* Slightly increase other tool buttons, but keep them smaller than Create Task */
  button.tool-btn:not(#toolCreateTask) {
    padding: 14px 18px !important;
    font-size: 16px !important;
    min-height: 62px !important;
  }

  .tool-medium {
    min-width: 280px;
    padding: 20px 26px;
    font-size: 18px;
  }
  /* Additional colored variants for Tools panel */
  .tool-lowstock {
    background: linear-gradient(90deg, #2563eb 0%, #3b82f6 100%);
    color: #ffffff;
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.12);
  }
  .tool-printers {
    background: linear-gradient(90deg, #f97316 0%, #f59e0b 100%);
    color: #071428;
    box-shadow: 0 8px 24px rgba(249, 115, 22, 0.12);
  }
  .tool-scanners {
    background: linear-gradient(90deg, #06b6d4 0%, #0891b2 100%);
    color: #071428;
    box-shadow: 0 8px 24px rgba(6, 182, 212, 0.12);
  }
  .tool-createtask {
    min-width: 280px;
  }
  /* Ensure the specific Create Task button id is blue and wins over other rules */
  #toolCreateTask,
  button#toolCreateTask {
    background: linear-gradient(90deg, #0b5cff 0%, #2563eb 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 30px rgba(37, 99, 235, 0.16) !important;
  }
  /* Make Low Stock match Create Task (color and size) */
  #toolLowStock,
  button#toolLowStock {
    background: linear-gradient(90deg, #0b5cff 0%, #2563eb 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 30px rgba(37, 99, 235, 0.16) !important;
    padding: 16px 22px !important;
    font-size: 17px !important;
    min-height: 68px !important;
    border-radius: 14px !important;
  }
  .tool-credit {
    min-width: 260px;
  }
  .big-btn.btn-report {
    background: #e5e7eb; /* gray */
    color: #071428;
  } /* gray */
  .big-btn.btn-inbound {
    background: #ef4444; /* red */
    color: #ffffff;
  } /* red */
  .big-btn.btn-outbound {
    background: #ef4444;
    color: #fff;
  } /* red */
  .big-btn.btn-history {
    background: #e5e7eb; /* gray */
    color: #071428;
  } /* purple */
  .big-btn.btn-users {
    background: #10b981; /* green */
    color: #ffffff;
  } /* green */

  /* Mobile-friendly adjustments for dashboard big buttons */
  @media (max-width: 900px) {
    .big-buttons {
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
    }
    .big-btn {
      font-size: 18px;
      padding: 14px 18px;
      min-height: 64px;
      border-radius: 12px;
    }
    /* allow prominent buttons to flow naturally on small screens */
    .tool-profit,
    .tool-lowstock,
    .tool-printers,
    .tool-createtask {
      min-width: unset;
      padding: 14px 16px;
    }
  }

  @media (max-width: 420px) {
    .big-buttons {
      grid-template-columns: 1fr;
      gap: 10px;
    }
    .big-btn {
      font-size: 20px;
      padding: 18px 20px;
      min-height: 70px;
      border-radius: 10px;
    }
    /* make tools full-width on very small screens */
    .tools-grid {
      flex-direction: column;
    }
    .tool-btn,
    .tool-medium {
      width: 100%;
      min-width: unset;
    }
    /* collapse sidebar visually (keep markup intact) */
    .sidebar {
      width: 64px;
      padding: 8px;
    }
    /* keep tenant name visible when sidebar collapses on small screens */
    #tenantDisplay {
      margin-top: 6px;
      margin-bottom: 8px;
      align-items: center;
    }
    .tenant-name {
      font-size: 12px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 56px;
      display: block;
    }
    .tenant-username {
      font-size: 11px;
      max-width: 56px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: block;
    }
    .nav-btn {
      padding: 8px 4px;
      font-size: 12px;
    }
  }

  /* Collapsible sidebar for mobile: hidden by default, shown when body.sidebar-open */
  @media (max-width: 900px) {
    .sidebar {
      position: fixed;
      left: 0;
      top: 0;
      height: 100vh;
      width: 240px;
      transform: translateX(-100%);
      transition: transform 220ms ease;
      z-index: 1002;
      padding-top: 60px; /* allow space for topbar */
      background: var(--sidebar-bg);
    }
    body.sidebar-open .sidebar {
      transform: translateX(0);
    }
    .sidebar-overlay {
      position: fixed;
      inset: 0;
      background: rgba(2, 6, 23, 0.5);
      z-index: 1000;
      display: none;
    }
    body.sidebar-open .sidebar-overlay {
      display: block;
    }
    .hamburger-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      border-radius: 8px;
      border: none;
      background: rgba(255, 255, 255, 0.06);
      color: #fff;
      font-size: 22px;
      cursor: pointer;
      margin-left: 8px;
    }
  }

  .big-btn.green {
    background: #10b981;
    color: #fff;
  }
  /* make key dashboard buttons more prominent: profit (green), shop (blue), outbound (red) */
  .big-btn.btn-shop {
    background: #facc15; /* yellow */
    color: #2a1400; /* dark text for contrast */
  }
  .big-btn.btn-profit,
  .big-btn.tool-profit {
    background: linear-gradient(90deg, #059669, #10b981); /* green gradient */
    color: #fff;
  }
  .big-btn.btn-outbound,
  .big-btn.tool-lowstock {
    background: linear-gradient(90deg, #ef4444, #dc2626);
    color: #fff;
  }
  .big-btn.orange {
    background: #f97316;
    color: #fff;
  }
  .big-btn.purple {
    background: #8b5cf6;
    color: #fff;
  }

  /* ---------------- Users Page Styles ---------------- */
  .users-page {
    display: flex;
    gap: 18px;
    align-items: flex-start;
  }
  .user-edit-area {
    background: #fff;
    padding: 8px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(2, 6, 23, 0.04);
  }
  .user-edit-area.hidden {
    display: none;
  }

  /* Toast notifications */
  .toast-container {
    position: fixed;
    right: 16px;
    bottom: 18px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
  }
  .toast {
    min-width: 180px;
    max-width: 360px;
    padding: 10px 14px;
    border-radius: 8px;
    color: #fff;
    box-shadow: 0 6px 18px rgba(2, 6, 23, 0.12);
    transform: translateY(12px);
    opacity: 0;
    transition: all 0.28s cubic-bezier(0.2, 0.9, 0.2, 1);
    font-weight: 600;
  }
  .toast.visible {
    transform: translateY(0);
    opacity: 1;
  }
  .toast.info {
    background: #3b82f6;
  }
  .toast.success {
    background: #10b981;
  }
  .toast.warning {
    background: #f59e0b;
  }
  .toast.error {
    background: #ef4444;
  }
  .users-list {
    flex: 1 1 680px;
    background: linear-gradient(180deg, #ffffff, #fbfdff);
    border-radius: 12px;
    padding: 18px;
    box-shadow: 0 18px 40px rgba(2, 6, 23, 0.06);
    border: 1px solid rgba(15, 23, 42, 0.04);
  }
  .users-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
  }
  .users-header h3 {
    margin: 0;
    font-size: 18px;
    color: #0b1220;
  }
  .users-controls {
    display: flex;
    gap: 8px;
    align-items: center;
  }
  .users-search {
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #e6eef6;
    width: 280px;
  }
  .user-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 10px;
    background: linear-gradient(180deg, #fff, #fcfcfd);
    margin-bottom: 10px;
    box-shadow: 0 8px 20px rgba(2, 6, 23, 0.04);
  }
  .user-avatar {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    background: #eef2ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: #0b1220;
  }
  .user-meta {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .user-meta .name {
    font-weight: 800;
    color: #0b1220;
  }
  .user-meta .email {
    font-size: 13px;
    color: #6b7280;
  }
  .user-actions {
    display: flex;
    gap: 8px;
    align-items: center;
  }

  /* Toggle (checkbox) styled as switch for 'Show on Dashboard' */
  .toggle-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 28px;
  }
  .toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  .switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #e6eef6;
    border-radius: 34px;
    transition: 0.2s;
  }
  .switch-slider:before {
    position: absolute;
    content: '';
    height: 22px;
    width: 22px;
    left: 4px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(2, 6, 23, 0.12);
    transition: 0.2s;
  }
  .toggle-switch input:checked + .switch-slider {
    background: linear-gradient(90deg, #10b981, #059669);
  }
  .toggle-switch input:checked + .switch-slider:before {
    transform: translateX(20px);
  }
  .toggle-label {
    font-size: 13px;
    color: #0b1220;
    font-weight: 700;
  }

  /* Compact user card used in side panel */
  .users-panel {
    width: 320px;
    background: linear-gradient(180deg, #ffffff, #fbfdff);
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 18px 40px rgba(2, 6, 23, 0.06);
    border: 1px solid rgba(15, 23, 42, 0.04);
  }
  .users-panel h4 {
    margin: 0 0 8px 0;
    color: #0b1220;
  }
  .users-panel .small {
    font-size: 13px;
    color: #6b7280;
  }
  .users-panel .user-compact {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 8px;
    border-radius: 8px;
    background: #fff;
    margin-bottom: 8px;
  }

  @media (max-width: 920px) {
    .users-page {
      flex-direction: column;
    }
    .users-panel {
      width: 100%;
    }
  }

  /* Mobile-first tweaks: single column big buttons and larger touch targets */
  @media (max-width: 700px) {
    .big-buttons {
      grid-template-columns: 1fr;
      gap: 12px;
    }
    .big-btn {
      min-height: 72px;
      font-size: 18px;
      padding: 18px 20px;
      border-radius: 12px;
    }
    .topbar-right input {
      min-width: 140px;
    }
  }

  /* Ethiopian-targeted accessibility: larger fonts and high-contrast colors for small screens */
  @media (max-width: 420px) {
    .big-btn {
      font-size: 20px;
      padding: 20px;
      min-height: 76px;
    }
    body {
      font-size: 16px;
    }
  }

  /* Amharic label styling */
  .amh-label {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: #0b1220;
    opacity: 0.9;
    font-family:
      'Noto Sans Ethiopic',
      system-ui,
      -apple-system,
      'Segoe UI',
      Roboto,
      'Helvetica Neue',
      Arial;
  }

  .big-btn.teal {
    background: #14b8a6;
    color: #fff;
  }
  .big-btn.red {
    background: #ef4444;
    color: #fff;
  }
  .big-btn.gray {
    background: #6b7280;
    color: #fff;
  }
  .big-btn.yellow {
    background: #f59e0b;
    color: #071428;
  }
  .big-btn.indigo {
    background: #6366f1;
    color: #fff;
  }

  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Mobile: make dashboard buttons smaller for compact screens */
@media (max-width: 600px) {
  .big-buttons {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }
  .big-btn {
    padding: 10px;
    min-height: 48px;
    font-size: 14px;
    border-radius: 12px;
  }
  .tool-profit {
    padding: 12px 14px;
    font-size: 16px;
    min-width: 160px;
  }
}

/* Barcode generator view */
.barcode-container {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 16px;
  align-items: start;
}
.barcode-panel {
  background: #fff;
  padding: 16px;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(2, 6, 23, 0.06);
}
.barcode-panel h3 {
  margin: 0 0 12px 0;
}
.field-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}
.field-row label {
  min-width: 110px;
  color: #334155;
  font-weight: 700;
}
.barcode-preview {
  background: #f8fafc;
  padding: 12px;
  border-radius: 8px;
  border: 1px dashed #e6eef6;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.barcode-preview #barcodePreviewList {
  width: 100%;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  overflow: auto;
  max-height: 320px;
  padding: 6px 4px;
  box-sizing: border-box;
}
.barcode-preview #barcodePreviewList > div {
  flex: 0 0 160px;
  box-sizing: border-box;
}
.barcode-preview svg {
  width: 100%;
  height: auto;
  max-width: 320px;
}
.printer-status {
  display: flex;
  gap: 8px;
  align-items: center;
}
.printer-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.printer-dot.connected {
  background: #10b981;
}
.printer-dot.disconnected {
  background: #ef4444;
}
.printer-actions {
  display: flex;
  gap: 8px;
}
.small-muted {
  font-size: 12px;
  color: #64748b;
}
.import-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.import-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hidden {
  display: none !important;
}

/* Explicit dashboard big-button color fixes (valid CSS selectors) */
.big-btn.btn-shop {
  background: #facc15; /* yellow */
  color: #2a1400;
}
.big-btn.btn-warehouse {
  background: #facc15; /* yellow */
  color: #2a1400; /* dark text for contrast */
}
.big-btn.btn-orders {
  background: #0b5cff;
  color: #fff;
}
.big-btn.btn-report {
  background: #e5e7eb;
  color: #071428;
}
.big-btn.btn-profit {
  background: linear-gradient(90deg, #059669, #10b981); /* green gradient */
  color: #ffffff;
}
.big-btn.btn-inbound {
  background: #ef4444;
  color: #ffffff;
}
.big-btn.btn-outbound {
  background: #ef4444;
  color: #fff;
}
.big-btn.btn-history {
  background: #e5e7eb; /* gray */
  color: #071428;
}
.big-btn.btn-users {
  background: #10b981;
  color: #ffffff;
}

.centered-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Inbound step: larger, professional card styling for Step 1 and Step 2 */
/* Compact, professional inbound step cards */
#in-step-1,
#in-step-2 {
  width: 100%;
  max-width: 560px;
  margin: 14px auto 0 auto;
  padding: 18px 18px;
  background: linear-gradient(180deg, #ffffff, #f7fbff);
  color: #0b1220;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.08);
  border: 1px solid rgba(15, 23, 42, 0.06);
  align-items: stretch;
}

#in-step-1 h3,
#in-step-2 h3 {
  margin-top: 0;
  margin-bottom: 10px;
  color: #0b1220;
  font-size: 18px;
  font-weight: 700;
}

/* Tighter form controls inside inbound steps */
#in-step-1 label,
#in-step-2 label {
  display: block;
  text-align: left;
  font-size: 13px;
  color: #374151;
  margin-bottom: 8px;
}

#in-step-1 input,
#in-step-1 select,
#in-step-2 input,
#in-step-2 select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #e6eef9;
  background: #fff;
  color: #071428;
  box-shadow: inset 0 1px 0 rgba(2, 6, 23, 0.03);
  margin-top: 6px;
}

#in-step-1 .success-btn,
#in-step-2 .success-btn {
  padding: 8px 12px;
  border-radius: 8px;
}

#in-step-1 hr {
  opacity: 0.6;
}

#in-step-1 label,
#in-step-2 label {
  display: block;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 8px;
}

#in-step-1 input,
#in-step-2 input,
#in-step-2 select {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #e6eef6;
  background: #ffffff;
  font-size: 16px;
  color: #071428;
  box-shadow: inset 0 1px 0 rgba(2, 6, 23, 0.03);
  margin-bottom: 12px;
}

/* Supplier selector: professional appearance */
#inboundSupplierSelect {
  width: 100%;
  padding: 12px 40px 12px 14px; /* extra space for caret */
  border-radius: 10px;
  border: 1px solid #dbeafe; /* soft blue */
  background: linear-gradient(180deg, #ffffff, #fbfdff);
  font-size: 16px;
  color: #0b1220;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23626f86' d='M6 8L0 0h12z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
  box-shadow: 0 2px 6px rgba(2, 6, 23, 0.03) inset;
  margin-bottom: 14px;
}

/* Decode indicator shown after camera-roll decode attempts */
.decode-indicator {
  position: fixed;
  display: inline-block;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(2, 6, 23, 0.14);
  opacity: 0.98;
  transition:
    transform 160ms ease,
    opacity 220ms ease;
  transform-origin: center bottom;
  transform: translateY(0) scale(1);
  animation: decode-pop 260ms ease-out;
}

.decode-indicator.fail {
  background: rgba(239, 68, 68, 0.95);
}
.decode-indicator.ok {
  background: rgba(34, 197, 94, 0.95);
}

@keyframes decode-pop {
  0% {
    transform: translateY(-10px) scale(0.92);
    opacity: 0;
  }
  60% {
    transform: translateY(2px) scale(1.03);
    opacity: 1;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* Improve label + select spacing when label wraps select */
#in-step-1 label select,
#in-step-2 label select {
  margin-top: 6px;
}

/* Step 2 selects: measurement & payment use professional caret and spacing */
#in-step-2 select {
  padding: 12px 40px 12px 14px; /* room for caret */
  border-radius: 10px;
  border: 1px solid #dbeafe;
  background: linear-gradient(180deg, #ffffff, #fbfdff);
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23626f86' d='M6 8L0 0h12z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
  font-size: 16px;
  color: #0b1220;
  box-shadow: inset 0 1px 0 rgba(2, 6, 23, 0.03);
}

/* Small currency select next to price input */
#inCurrencySelect {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #dbeafe;
  background: #fff;
  font-size: 14px;
  color: #0b1220;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 12 8'><path fill='%23626f86' d='M6 8L0 0h12z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 10px 6px;
}

.row {
  display: flex;
  gap: 12px;
  align-items: center;
}

.primary-btn,
.success-btn,
.danger-btn {
  padding: 12px 18px;
  font-size: 15px;
  border-radius: 10px;
}

/* Improve the session circle area on step 3 spacing when returning from step 2 */
#in-step-3 {
  max-width: 920px;
  margin: 14px auto 0 auto;
}

/* Professional styling for Step 3 (Scan - Inbound) */
#in-step-3 {
  width: 100%;
  max-width: 920px;
  margin: 18px auto;
  padding: 22px 24px;
  background: linear-gradient(180deg, #ffffff, #fbfdff);
  color: #0b1220;
  border-radius: 14px;
  box-shadow: 0 20px 40px rgba(2, 6, 23, 0.08);
  border: 1px solid rgba(15, 23, 42, 0.06);
}

#in-step-3 h3 {
  margin-top: 0;
  margin-bottom: 12px;
  color: #071428;
  font-size: 20px;
  font-weight: 800;
}

/* Info card shown in Step 3 summarizing selection from Step 1/2 */
.info-card {
  border-radius: 10px;
  padding: 10px 12px;
  background: linear-gradient(180deg, #ffffff, #fbfdff);
  border: 1px solid #e6eef6;
  box-shadow: 0 8px 20px rgba(2, 6, 23, 0.04);
}
.info-card .info-row {
  font-size: 14px;
  color: #0b1220;
  padding: 6px 0;
  display: flex;
  gap: 8px;
  align-items: center;
}
.info-card .info-row strong {
  width: 110px;
  color: #374151;
  font-weight: 700;
}

#in-step-3 input,
#in-step-3 select {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #e6eef6;
  background: #fff;
  font-size: 15px;
  color: #071428;
  box-shadow: inset 0 1px 0 rgba(2, 6, 23, 0.03);
  margin-bottom: 10px;
}

/* Layout columns inside step 3 */
#in-step-3 > div[style] {
  /* the immediate wrapper with flex */
  gap: 18px;
}

/* Progress circle */
/* Progress circle */
#inProgressCircle {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* black/charcoal background with subtle sheen */
  background: linear-gradient(135deg, #0b0b0b 0%, #141414 100%);
  color: #ffffff;
  font-size: 64px;
  font-weight: 900;
  letter-spacing: -1px;
  box-shadow:
    0 10px 30px rgba(2, 6, 23, 0.6),
    inset 0 -6px 18px rgba(255, 255, 255, 0.03);
  border: 6px solid #222428; /* stylish dark border */
  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}

/* Outbound progress circle uses same polished appearance */
#outProgressCircle {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0b0b0b 0%, #141414 100%);
  color: #ffffff;
  font-size: 64px;
  font-weight: 900;
  letter-spacing: -1px;
  box-shadow:
    0 10px 30px rgba(2, 6, 23, 0.6),
    inset 0 -6px 18px rgba(255, 255, 255, 0.03);
  border: 6px solid #222428;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}

/* Session list panel */
#inSessionList {
  /* let the panel body control sizing; list fills available space and scrolls */
  flex: 1 1 auto;
  overflow-y: auto;
  margin-top: 8px;
  border-radius: 10px;
  background: linear-gradient(180deg, #f8fafc, #ffffff);
  border: 1px solid #e6eef6;
  padding: 10px;
}

/* Fixed-size right-hand session panel so the page doesn't grow with list */
.session-panel {
  width: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff, #fbfdff);
  box-shadow: 0 12px 30px rgba(2, 6, 23, 0.06);
  border: 1px solid rgba(15, 23, 42, 0.04);
  max-height: 520px; /* fixed box height */
  overflow: hidden;
}

.session-panel-body {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  overflow: hidden; /* keep list internal */
}

/* Credit modal styles */
.credit-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 880px;
  max-width: calc(100% - 40px);
  max-height: 80vh;
  overflow: hidden;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(2, 6, 23, 0.28);
  border: 1px solid rgba(15, 23, 42, 0.06);
  z-index: 10050;
  display: flex;
  flex-direction: column;
}
.credit-modal .modal-header {
  padding: 18px 20px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.04);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.credit-modal .modal-body {
  padding: 12px 20px;
  overflow: auto;
  flex: 1 1 auto;
}
.credit-modal .credit-list {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 12px 20px;
}
.credit-item {
  padding: 12px;
  border-radius: 8px;
  background: linear-gradient(180deg, #fbfdff, #ffffff);
  border: 1px solid rgba(15, 23, 42, 0.04);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.credit-item .meta {
  font-size: 13px;
  color: #0f172a;
}
.credit-item .money {
  font-weight: 800;
  color: #b45309;
}
.credit-modal .modal-footer {
  padding: 12px 20px;
  border-top: 1px solid rgba(15, 23, 42, 0.04);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.credit-total {
  font-size: 18px;
  font-weight: 900;
  color: #111827;
}
.credit-close {
  background: transparent;
  border: 0;
  font-size: 16px;
  cursor: pointer;
}

#inSessionList .session-item {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 6px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.02);
  font-size: 14px;
  color: #0b1220;
}

/* Session total display under the progress circle */
#inSessionTotal {
  margin-top: 8px;
  color: #0b1220;
  font-weight: 800;
  font-size: 18px;
}

/* Controls row */
#in-step-3 .primary-btn,
#in-step-3 .success-btn,
#in-step-3 .danger-btn {
  min-width: 120px;
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 700;
}

#in-step-3 .danger-btn {
  background: linear-gradient(90deg, #ef4444, #e11d48);
  color: #fff;
  border: none;
}

#in-step-3 .success-btn {
  background: linear-gradient(90deg, #10b981, #059669);
  color: #fff;
  border: none;
}

/* small responsive tweak */
@media (max-width: 900px) {
  #inProgressCircle {
    width: 180px;
    height: 180px;
    font-size: 56px;
  }
  .tool-medium {
    min-width: 100%;
  }
}
:root {
  /* Modern 2026 palette: calm neutrals + energetic accent */
  --bg: #0f1724; /* deep slate background to make panels pop */
  --panel: #0b1220; /* slightly lighter panel surface */
  --surface-2: #0d1a2b; /* secondary panel */
  --sidebar-bg: #fff8d6; /* restored pale yellow sidebar background */
  --accent: #6ee7b7; /* mint accent */
  --accent-2: #60a5fa; /* soft blue accent */
  --muted: #9aa6b2;
  --success: #34d399;
  --danger: #fb7185;
  --shadow: 0 8px 30px rgba(2, 6, 23, 0.6);
  --radius: 12px;
  font-family:
    'Inter',
    system-ui,
    -apple-system,
    sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  /* slightly lighter modern canvas with gentle radial accents */
  display: block;
  width: 100%;
  min-height: 100vh;
  margin: 0;
  background-image:
    radial-gradient(circle at 8% 12%, rgba(96, 165, 250, 0.08), rgba(96, 165, 250, 0) 20%),
    radial-gradient(circle at 88% 78%, rgba(110, 231, 183, 0.06), rgba(110, 231, 183, 0) 24%),
    linear-gradient(180deg, #08263c 0%, #0b3750 100%);
  background-color: #08263c;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: #e9f0f6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; /* prevent horizontal scroll */
}

#app {
  display: flex;
  width: 100%;
  max-width: none; /* allow full-bleed layout */
  min-height: 100vh;
  margin: 0;
  gap: 20px;
  padding: 20px; /* comfortable outer gutter */
}

/* SIDEBAR — professional theme (Editable, safe to revert using style.css.bak) */
.sidebar {
  width: 200px; /* slightly narrower */
  min-width: 200px;
  height: auto;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  padding: 6px 8px;
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* make sidebar visually shorter and avoid full-viewport stretching */
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  position: sticky;
  top: 14px;
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  transition:
    transform 160ms ease,
    box-shadow 160ms ease;
}

/* Avatar in sidebar */
.sidebar .avatar {
  margin-top: 8px;
}
.sidebar .avatar img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.sidebar .avatar-fallback {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(90deg, #ffd27a, #ffd166);
  color: #071428;
  font-weight: 800;
  border: 2px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 6px 20px rgba(2, 6, 23, 0.35);
}

/* Tenant display under avatar (tenant name and username) */
#tenantDisplay {
  width: 100%;
  margin-top: 8px;
  margin-bottom: 10px; /* small gap before nav buttons */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.tenant-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--sidebar-text);
  line-height: 1.1;
}
.tenant-username {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

/* Keep the business profile in the sidebar and the active account in the taskbar distinct. */
.company-profile-identity {
  min-height: 28px;
}
.signed-in-user {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 6px 11px 6px 7px;
  border: 1px solid rgba(212, 175, 55, 0.48);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.16), rgba(17, 24, 39, 0.92));
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.24);
}
.signed-in-user[hidden] {
  display: none;
}
.signed-in-user-initials {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f4d675, #b78b27);
  color: #171108;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.03em;
}
.signed-in-user-name {
  max-width: 150px;
  overflow: hidden;
  color: #fff7d1;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.company-settings-modal.company-setup-required #companySettingsClose,
.company-settings-modal.company-setup-required #companySettingsCancel {
  display: none;
}

.company-profile-reminder {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  padding: 14px 16px;
  overflow: hidden;
  border: 1px solid rgba(250, 204, 21, 0.5);
  border-radius: 16px;
  background: linear-gradient(110deg, rgba(30, 41, 59, 0.98), rgba(55, 48, 20, 0.95));
  box-shadow: 0 12px 30px rgba(2, 6, 23, 0.28);
  animation: company-profile-reminder-enter 480ms ease-out both;
}
.company-profile-reminder.hidden { display: none; }
.company-profile-reminder__spark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 14px;
  color: #1e293b;
  background: #facc15;
  box-shadow: 0 0 0 0 rgba(250, 204, 21, 0.6);
  animation: company-profile-reminder-pulse 2.4s ease-in-out infinite;
}
.company-profile-reminder__copy { min-width: 0; flex: 1; }
.company-profile-reminder__copy strong { color: #fef3c7; }
.company-profile-reminder__copy p { margin: 4px 0 0; color: #cbd5e1; font-size: 0.9rem; }
.company-profile-reminder__actions { display: flex; align-items: center; gap: 8px; }
.company-profile-reminder__dismiss {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  color: #cbd5e1;
  background: transparent;
  font-size: 1.4rem;
  cursor: pointer;
}
.company-profile-reminder__dismiss:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }
@keyframes company-profile-reminder-enter {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes company-profile-reminder-pulse {
  50% { box-shadow: 0 0 0 9px rgba(250, 204, 21, 0); transform: translateY(-1px); }
}
@media (max-width: 620px) {
  .company-profile-reminder { align-items: flex-start; flex-wrap: wrap; }
  .company-profile-reminder__actions { width: 100%; justify-content: flex-end; }
}

@media (max-width: 900px) {
  .signed-in-user {
    padding: 4px;
  }
  .signed-in-user-name {
    max-width: 92px;
  }
  .signed-in-user-initials {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
  }
}

/* avatar menu */
.avatar-menu {
  position: relative;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.avatar-menu.hidden {
  display: none !important;
}
.avatar-menu button {
  padding: 8px 10px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.06);
  color: #071428;
}
.avatar-menu button:hover {
  background: rgba(255, 255, 255, 0.09);
}

.brand {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.4px;
}

/* Navigation (stacked buttons keep same DOM) */
.nav-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  text-align: left;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition:
    background 160ms ease,
    transform 120ms ease,
    color 120ms;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.nav-btn:hover,
.nav-btn:focus {
  background: linear-gradient(90deg, rgba(96, 165, 250, 0.08), rgba(16, 185, 129, 0.04));
  transform: translateY(-2px);
  outline: none;
  color: #fff;
}

.nav-btn.active {
  background: linear-gradient(90deg, #0ea5a4 0%, #2563eb 100%);
  color: #fff;
  box-shadow:
    0 8px 20px rgba(6, 78, 59, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.02);
  border-left: 4px solid var(--accent-2);
  padding-left: 8px;
}

/* Small icon support (optional markup: <span class="icon">🏠</span> inside button) */
.nav-btn .icon {
  width: 18px;
  height: 18px;
}

.avatar-controls {
  display: none;
  gap: 8px;
  margin-top: 8px;
}
.avatar-controls.show {
  display: flex;
}

/* Avatar popup (positioned menu) */
#sidebarAvatarWrapper {
  position: relative;
}
.avatar-popup {
  position: absolute;
  left: 50%;
  top: calc(100% + 10px);
  transform: translateX(-50%);
  min-width: 160px;
  display: none;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: #0b1220;
  color: #fff;
  border-radius: 10px;
  box-shadow: 0 12px 36px rgba(2, 6, 23, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.04);
  z-index: 9999;
}
.avatar-popup.show {
  display: flex;
}
.avatar-popup .secondary-btn,
.avatar-popup .danger-btn {
  width: 100%;
}

/* small avatar menu button (three dots) */
/* avatar-menu-btn removed */
.secondary-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--sidebar-text);
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.danger-btn {
  background: linear-gradient(90deg, #ef4444, #dc2626);
  color: #fff;
  border: none;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
}

/* Ensure the barcode Print button is visible and high-contrast */
#barcodePrintBtn,
.barcode-panel #barcodePrintBtn.secondary-btn {
  background: linear-gradient(90deg, #2563eb 0%, #3b82f6 100%) !important;
  color: #ffffff !important;
  border: none !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.14) !important;
  cursor: pointer !important;
  transition:
    transform 140ms ease,
    box-shadow 140ms ease,
    opacity 120ms ease !important;
}
#barcodePrintBtn:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 36px rgba(37, 99, 235, 0.18) !important;
}

.user-area {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.02);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.current-user {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
}
.user-controls button {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  border: none;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.user-controls button:hover {
  background: rgba(255, 255, 255, 0.09);
}

/* MAIN CONTENT AREA */
.main {
  flex-grow: 1;
  padding: 24px 28px; /* slightly larger padding for spacious panels */
  overflow: visible; /* avoid inner scrolling; let page scroll naturally */
}

.view {
  display: none;
  width: 100%;
}

.view.active {
  display: block;
}

/* DASHBOARD GRID */
.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-bottom: 28px;
}

/* BIG BUTTONS */
.big-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}

/* Topbar for modern dashboard */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 0 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.02);
  margin-bottom: 12px;
}
.topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.topbar-right input {
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  min-width: 240px;
  background: rgba(255, 255, 255, 0.02);
  color: #e6eef6;
}
.topbar-right button {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
}

.sidebar .logo {
  display: flex;
  align-items: center;
  justify-content: center;
}
.sidebar .logo img {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 3px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 8px 28px rgba(2, 6, 23, 0.4);
}
.sidebar .avatar {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.03);
}
.sidebar .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sidebar .avatar-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e6eef6;
  font-weight: 800;
  font-size: 24px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
  border: 2px solid rgba(255, 255, 255, 0.04);
  box-shadow: 0 6px 20px rgba(2, 6, 23, 0.28);
}
.sidebar .brand-text {
  color: #fff;
  font-weight: 700;
}

/* Low stock card */
.low-stock-card {
  background: var(--panel);
  padding: 14px;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(2, 6, 23, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.02);
}
.low-stock-card .small-btn {
  background: #eef6ff;
  border: 1px solid #dbeafe;
  color: #0369a1;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.low-stock-card .small-btn:hover {
  background: #e0f2ff;
}

/* Urgent badge for low-stock card */
.urgent-badge {
  background: #ef4444;
  color: #fff;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 13px;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.12);
}
.urgent-badge.hidden {
  display: none;
}

.low-stock-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 8px;
  background: #fbfdff;
  border: 1px solid #eef6ff;
}
.low-stock-item .meta {
  color: #666;
  font-size: 13px;
}
.low-stock-item .count {
  font-weight: 700;
}

@media (max-width: 720px) {
  .secondary-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .low-stock-card {
    max-width: 100%;
  }
  .topbar-right input {
    min-width: 140px;
  }
}

.big-btn {
  height: 120px;
  font-size: 20px;
  font-weight: 700;
  border-radius: 14px;
  border: 0;
  color: #071428;
  cursor: pointer;
  transition:
    transform 0.22s,
    box-shadow 0.22s;
  box-shadow: 0 8px 20px rgba(2, 6, 23, 0.45);
}

.big-btn:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 40px rgba(2, 6, 23, 0.55);
}

/* Side CTA styling: same size as big buttons but distinct color and stacked */
.right-column .big-btn {
  height: 72px;
  font-size: 16px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(2, 6, 23, 0.45);
}
.right-column .side-cta.variant-7 {
  background: linear-gradient(90deg, rgba(110, 231, 183, 1), rgba(96, 165, 250, 0.9));
  color: #071428;
}
.right-column .side-cta.variant-9 {
  background: linear-gradient(90deg, rgba(251, 113, 133, 1), rgba(249, 115, 22, 0.9));
  color: #071428;
}

@media (max-width: 900px) {
  .home-two-col {
    display: block;
  }
  .right-column {
    width: 100%;
  }
  .right-column .big-btn {
    height: 100px;
  }
}

/* COLOR VARIANTS */
.variant-1 {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
}
.variant-2 {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}
.variant-3 {
  background: linear-gradient(135deg, rgba(110, 231, 183, 1), rgba(99, 102, 241, 0.95));
  color: #071428;
}
.variant-4 {
  background: linear-gradient(135deg, #ec4899, #db2777);
}
.variant-5 {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}
.variant-6 {
  background: linear-gradient(135deg, #ef4444, #dc2626);
}

/* WAREHOUSE MACHINE ELEMENTS */
.scanning-layout {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}

.scan-controls {
  flex: 1;
  background: #fff;
  padding: 25px;
  border-radius: 15px;
  border: 1px solid #e2e8f0;
}

.big-counter {
  text-align: center;
  padding: 30px;
  background: #1e293b;
  color: #38bdf8;
  border-radius: 15px;
  margin: 20px 0;
}

#bigCountDisplay {
  font-size: 80px;
  font-weight: 800;
  line-height: 1;
}

/* PRINT AREA */
.big-print {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  background: #475569;
  color: #fff;
  border: 0;
  font-weight: 600;
  cursor: pointer;
}

.print-dropdown {
  position: absolute;
  background: #fff;
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  z-index: 100;
}

/* TABLES */
.table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}

.table th {
  background: #f8fafc;
  color: #0b1220;
  font-weight: 600;
  padding: 12px;
  border-bottom: 2px solid #eef2ff;
  text-align: left;
}

.table td {
  padding: 12px;
  border-bottom: 1px solid #eef2ff;
  color: #0b1220;
}

/* Barcode cell small box */
.barcode-cell {
  cursor: pointer;
}
.show-barcode-box {
  display: inline-block;
  padding: 6px 10px;
  background: #fff;
  border: 1px solid #e6eef6;
  border-radius: 8px;
  color: #0b1220;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(2, 6, 23, 0.04);
}
.barcode-cell .show-barcode-box:hover {
  transform: translateY(-2px);
}

.hidden {
  display: none;
}

/* LOGOUT BUTTON */
.logout-link {
  background-color: #fef2f2;
  color: #ef4444;
  border: 1px solid #fee2e2;
  padding: 8px 12px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 15px;
  width: 100%;
}

/* Modern Login Page (2026-style) */
.login-page {
  background:
    radial-gradient(circle at 50% 12%, rgba(246, 201, 21, 0.16), transparent 30%),
    radial-gradient(circle at 15% 90%, rgba(180, 119, 0, 0.1), transparent 28%), #050604;
  min-height: 100vh;
  color-scheme: dark;
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;
}
.login-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 28px 16px;
}
.login-card {
  width: 100%;
  max-width: 378px;
  background: linear-gradient(155deg, rgba(28, 29, 20, 0.98), rgba(8, 9, 6, 0.99));
  border-radius: 20px;
  padding: 26px 28px;
  box-shadow:
    0 22px 65px rgba(0, 0, 0, 0.65),
    0 0 32px rgba(246, 201, 21, 0.1),
    inset 0 1px rgba(255, 229, 111, 0.13);
  text-align: center;
  border: 1px solid rgba(246, 201, 21, 0.48);
  position: relative;
}
.login-card::before {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(246, 201, 21, 0.1);
  border-radius: 10px;
  pointer-events: none;
}
.login-avatar {
  margin: 0 auto 10px;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #201d0b, #080906);
  border: 1px solid rgba(246, 201, 21, 0.55);
  box-shadow: 0 0 24px rgba(246, 201, 21, 0.18);
}
.login-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.login-avatar .avatar-fallback {
  font-size: 34px;
  font-weight: 800;
  color: #f6c915;
}
.login-welcome {
  margin: 6px 0 6px;
  font-size: clamp(24px, 4vw, 30px);
  line-height: 1.08;
  letter-spacing: -0.8px;
  color: #fff5c2;
  font-weight: 850;
}
.login-kicker {
  margin-top: 14px;
  color: #d9a928;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2.1px;
  text-transform: uppercase;
}
.login-sub {
  margin: 0 0 18px;
  font-size: 13px;
  color: #aead9e;
  line-height: 1.55;
}
.login-form {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.login-form label {
  text-align: left;
  font-size: 13px;
  color: #ddd8bd;
  font-weight: 600;
}
.login-form input {
  padding: 12px 13px;
  border-radius: 10px;
  border: 1px solid rgba(246, 201, 21, 0.24);
  background: #090a07;
  color: #f7f4df;
  outline: none;
}
.login-form input:focus {
  border-color: #f6c915;
  box-shadow: 0 0 0 3px rgba(246, 201, 21, 0.12);
}
.login-form input::placeholder {
  color: #737568;
}
.login-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  justify-content: center;
}
.login-actions .primary-btn {
  min-width: 160px;
}
.ghost-btn {
  background: transparent;
  border: 1px solid #e6eef9;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
}
.link-btn {
  background: none;
  border: 0;
  color: #0b5cff;
  cursor: pointer;
  text-decoration: underline;
}
.login-message {
  color: #ef4444;
  min-height: 20px;
  margin-top: 6px;
}

/* Login-specific CTA color (scoped to login card to avoid global changes) */
.login-card .primary-btn {
  background: linear-gradient(180deg, #ffe45b 0%, #d29a08 58%, #9c6500 100%);
  border: 1px solid #ffe775;
  color: #211900;
  font-weight: 800;
  box-shadow: 0 8px 22px rgba(246, 201, 21, 0.2);
  min-height: 44px;
  border-radius: 10px;
}
.login-card .primary-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

/* Make secondary buttons visible on the light login/signup card */
.login-card .secondary-btn {
  background: #11130d;
  border: 1px solid rgba(246, 201, 21, 0.38);
  color: #f4d75b;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.login-card .success-btn {
  background: #17180f;
  border: 1px solid rgba(246, 201, 21, 0.38);
  color: #f4d75b;
  border-radius: 8px;
  padding: 8px 10px;
}
#signupCard {
  max-width: 378px !important;
}
#regRequirements {
  border-color: rgba(246, 201, 21, 0.32) !important;
  border-radius: 9px;
  background: rgba(20, 21, 14, 0.96) !important;
  color: #d8d5c3;
}
#regRequirements h3,
#registerArea h3 {
  color: #f6c915;
}

/* Classic gold authentication */
.login-page {
  background:
    radial-gradient(circle at 50% 0%, rgba(201, 168, 92, 0.16), transparent 42%),
    linear-gradient(160deg, #0f172a 0%, #071428 56%, #050b16 100%);
}
.login-page::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(201, 168, 92, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 168, 92, 0.022) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: linear-gradient(to bottom, black, transparent 75%);
}
.login-card {
  max-width: 360px;
  padding: 25px 27px 24px;
  border-radius: 14px;
  border: 1px solid rgba(201, 168, 92, 0.42);
  background: linear-gradient(145deg, rgba(20, 32, 51, 0.99), rgba(9, 18, 33, 0.99));
  box-shadow:
    0 28px 75px rgba(0, 0, 0, 0.72),
    0 0 0 1px rgba(221, 199, 134, 0.04) inset,
    0 14px 40px rgba(3, 8, 18, 0.28);
}
.login-card::before {
  inset: 6px;
  border-radius: 9px;
  border-color: rgba(201, 168, 92, 0.1);
}
.login-avatar {
  width: 72px;
  height: 72px;
  margin-bottom: 14px;
  border: 1px solid #c9a85c;
  box-shadow:
    0 0 0 4px rgba(201, 168, 92, 0.07),
    0 10px 30px rgba(0, 0, 0, 0.45);
}
.login-kicker {
  color: #c9a85c;
  letter-spacing: 2.4px;
}
.login-welcome {
  color: #f8f4e8;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 600;
  letter-spacing: -0.4px;
}
.login-form {
  gap: 8px;
}
.login-form label {
  color: #d8d6cf;
  font-size: 12px;
  letter-spacing: 0.25px;
}
.login-form input:not([type='radio']) {
  min-height: 44px;
  border-radius: 7px;
  border-color: rgba(201, 168, 92, 0.27);
  background: rgba(5, 12, 24, 0.82);
}
.login-form input:not([type='radio']):focus {
  border-color: #c9a85c;
  box-shadow: 0 0 0 3px rgba(201, 168, 92, 0.12);
}
.login-role-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 7px;
}
.login-role-option {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 39px;
  border: 1px solid rgba(201, 168, 92, 0.22);
  border-radius: 7px;
  background: rgba(201, 168, 92, 0.04);
  cursor: pointer;
}
.login-role-option:has(input:checked) {
  color: #ddc786;
  border-color: rgba(201, 168, 92, 0.68);
  background: rgba(201, 168, 92, 0.1);
}
.login-role-option input {
  accent-color: #c9a85c;
}
.login-card .primary-btn {
  background: linear-gradient(180deg, #ddc786 0%, #c9a85c 50%, #806126 100%);
  border-color: #ddc786;
  color: #211a08;
  border-radius: 7px;
  box-shadow: 0 9px 22px rgba(128, 97, 38, 0.2);
}
.login-card .primary-btn:focus-visible,
.login-card .secondary-btn:focus-visible,
.login-card .success-btn:focus-visible,
.auth-link-btn:focus-visible {
  outline: 2px solid #ddc786;
  outline-offset: 3px;
}
.login-signup-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 5px;
  color: #918f83;
  font-size: 12px;
}
.auth-link-btn {
  appearance: none;
  border: 0;
  padding: 3px;
  color: #c9a85c;
  background: transparent;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.auth-link-btn:hover {
  color: #ddc786;
  text-decoration: underline;
}
#signupCard {
  max-width: 360px !important;
}

/* Black-and-gold Low Stock experience */
#toolLowStock,
button#toolLowStock {
  background: linear-gradient(180deg, #ffe45b 0%, #d29a08 58%, #956000 100%) !important;
  color: #211900 !important;
  border: 1px solid #ffe775 !important;
  box-shadow: 0 10px 28px rgba(246, 201, 21, 0.24) !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 60px !important;
  padding: 12px 16px !important;
  border-radius: 12px !important;
  font-size: 15px !important;
}
#toolLowStock:hover,
button#toolLowStock:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
}
#lowstockModal .modal-content {
  background: linear-gradient(155deg, #1c1d14, #080906) !important;
  color: #f4f0d9 !important;
  border: 1px solid rgba(246, 201, 21, 0.5) !important;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.7),
    0 0 30px rgba(246, 201, 21, 0.1) !important;
  width: min(92vw, 820px) !important;
  max-width: 820px !important;
  max-height: 88vh;
  overflow-y: auto;
  padding: 16px !important;
}
#lowstockModal h3,
#lowstockModal #outSummary,
#lowstockModal #lowSummary {
  color: #f6c915 !important;
}
#lowstockModal .low-stock-card {
  background: linear-gradient(145deg, #17180f, #0b0c08) !important;
  border: 1px solid rgba(246, 201, 21, 0.3) !important;
  box-shadow:
    inset 0 1px rgba(255, 231, 117, 0.08),
    0 10px 28px rgba(0, 0, 0, 0.38) !important;
}
#lowstockModal .low-stock-item {
  background: #10120c !important;
  border-color: rgba(246, 201, 21, 0.2) !important;
  color: #efecd8 !important;
}
#lowstockModal .meta,
#lowstockModal [style*='color: #6b7280'] {
  color: #aaa994 !important;
}
#lowstockModal input {
  background: #090a07 !important;
  color: #f7f4df !important;
  border-color: rgba(246, 201, 21, 0.35) !important;
}
#lowstockModal input:focus {
  border-color: #f6c915 !important;
  box-shadow: 0 0 0 3px rgba(246, 201, 21, 0.12) !important;
}
#lowstockModal .primary-btn {
  background: linear-gradient(180deg, #ffe45b, #b47700) !important;
  color: #211900 !important;
  border: 1px solid #ffe775 !important;
}
#lowstockModal .secondary-btn,
#lowstockClose {
  background: #15170f !important;
  color: #f4d75b !important;
  border: 1px solid rgba(246, 201, 21, 0.38) !important;
}

@media (max-width: 760px) {
  #lowstockModal .modal-content {
    width: 94vw !important;
    padding: 12px !important;
  }
  #lowstockModal .modal-content > div:first-child,
  #lowstockModal .modal-content > div:nth-child(2) {
    flex-wrap: wrap;
  }
  #lowstockModal .modal-content > div:first-child > div:last-child {
    width: 100%;
    flex-wrap: wrap;
  }
  #lowstockModal .modal-content > div:nth-child(2) > div {
    width: 100% !important;
    flex: 1 1 100% !important;
  }
  #lowStockSearch {
    min-width: 0 !important;
    width: 100%;
  }
}

/* Responsive black-and-gold Credit Note */
#creditModal .credit-note-card {
  width: min(92vw, 720px) !important;
  max-width: 720px !important;
  max-height: 88vh;
  overflow-y: auto;
  padding: 18px !important;
  background: linear-gradient(155deg, #1c1d14, #080906) !important;
  color: #f2eed8 !important;
  border: 1px solid rgba(246, 201, 21, 0.5) !important;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.7),
    0 0 30px rgba(246, 201, 21, 0.1) !important;
}
#creditModal h3,
#creditModal h4,
#creditModal label {
  color: #f6d95d;
}
#creditModal .credit-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 9px 16px;
  border-radius: 10px;
  border: 1px solid #ffe775;
  background: linear-gradient(180deg, #ffe45b, #b47700);
  color: #211900;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(246, 201, 21, 0.2);
}
#creditModal .credit-back-btn:hover {
  filter: brightness(1.08);
  transform: translateX(-2px);
}
#creditModal select,
#creditModal input {
  background: #090a07 !important;
  color: #f7f4df !important;
  border: 1px solid rgba(246, 201, 21, 0.34) !important;
  border-radius: 8px;
}
#creditModal #creditDetails {
  background: #10120c !important;
  color: #efecd8 !important;
  border: 1px solid rgba(246, 201, 21, 0.24);
}
#creditModal .primary-btn,
#creditModal .success-btn {
  background: linear-gradient(180deg, #ffe45b, #b47700) !important;
  color: #211900 !important;
  border: 1px solid #ffe775 !important;
}
#creditModal .secondary-btn {
  background: #15170f !important;
  color: #f4d75b !important;
  border: 1px solid rgba(246, 201, 21, 0.38) !important;
}

@media (max-width: 640px) {
  #creditModal .credit-note-card {
    width: 94vw !important;
    padding: 13px !important;
  }
  #creditModal .credit-note-header {
    align-items: flex-start !important;
    gap: 12px;
  }
  #creditModal .credit-note-layout {
    flex-direction: column;
  }
  #creditModal .credit-note-main,
  #creditModal .credit-note-share {
    width: 100% !important;
  }
  #creditModal .credit-note-share > div {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
  }
  #creditModal .credit-note-share button {
    min-height: 44px;
  }
}

@media (max-width: 390px) {
  #creditModal .credit-note-share > div {
    grid-template-columns: 1fr;
  }
  #creditModal .credit-back-btn {
    padding: 8px 12px;
  }
}

/* History: one complete swipeable data box on every screen size. */
#view-history,
#view-history .history-page-shell,
#view-history .history-table-card {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

#view-history .history-table-card {
  overflow: hidden;
}

#view-history .history-table-scroll {
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: 70vh;
  overflow: auto !important;
  overscroll-behavior: contain;
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable both-edges;
  border: 1px solid #ead59a;
  border-radius: 11px;
  background: #fff;
}

#view-history .history-table {
  display: table !important;
  width: max-content !important;
  min-width: 1180px !important;
  table-layout: auto;
}

#view-history .history-table thead {
  display: table-header-group !important;
}

#view-history .history-table tbody {
  display: table-row-group !important;
}

#view-history .history-table tr {
  display: table-row !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#view-history .history-table th,
#view-history .history-table td {
  display: table-cell !important;
  width: auto !important;
  min-width: 105px;
  max-width: 230px;
  padding: 10px 9px !important;
  text-align: left;
  vertical-align: top;
  white-space: normal;
}

#view-history .history-table th {
  position: sticky;
  top: 0;
  z-index: 3;
}

#view-history .history-table td::before {
  content: none !important;
}

#view-history .history-table .history-cell-value {
  width: auto !important;
  max-width: 100% !important;
  min-width: 0;
  text-align: inherit;
}

#view-history .history-table .numeric,
#view-history .history-table .numeric .history-cell-value {
  text-align: right;
}

@media (max-width: 560px) {
  #view-history .history-page-shell {
    padding: 8px;
  }

  #view-history .history-table-card {
    padding: 8px !important;
  }

  #view-history .history-table-scroll {
    max-height: 66vh;
  }

  #view-history .history-table {
    min-width: 1080px !important;
    font-size: 12px;
  }

  #view-history .history-table th,
  #view-history .history-table td {
    min-width: 96px;
    max-width: 200px;
    padding: 8px 7px !important;
  }
}

/* Task processing: keep the worker's remaining count large, centered and visible. */
#taskProcessModal .task-process-card {
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
}

#taskProcessModal .task-process-progress {
  position: relative;
  width: 100%;
  min-height: 190px;
  margin: 22px auto 18px;
  padding: 10px 0 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

#taskProcessModal .task-process-progress-circle {
  flex: 0 0 150px;
  width: 150px;
  height: 150px;
  margin: 0 auto;
  display: flex;
  visibility: visible;
  opacity: 1;
  border-width: 7px;
  z-index: 2;
}

#taskProcessModal .task-process-progress-circle strong {
  font-size: 38px;
}

#taskProcessModal .task-process-progress-circle span {
  margin-top: 5px;
  font-size: 10px;
}

#taskProcessModal .task-process-progress-circle small {
  margin-top: 6px;
  color: #f4d675;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

@media (max-width: 640px) {
  #taskProcessModal .task-process-card {
    max-height: calc(100dvh - 12px);
    margin: 6px auto;
  }

  #taskProcessModal .task-process-progress {
    min-height: 174px;
    margin: 18px auto 14px;
    padding-top: 8px;
  }

  #taskProcessModal .task-process-progress-circle {
    flex-basis: 138px;
    width: 138px;
    height: 138px;
    border-width: 6px;
  }

  #taskProcessModal .task-process-progress-circle strong {
    font-size: 34px;
  }
}

/* Three distinct, direct-action bells: expiry, subscription and Telegram. */
.topbar-alert-bells {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
}

.alert-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0 !important;
  border-radius: 13px !important;
  cursor: pointer;
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.3);
}

.alert-bell-icon {
  font-size: 21px;
  line-height: 1;
}

.alert-bell-tag {
  position: absolute;
  right: 2px;
  bottom: 2px;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #090d13;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
}

.alert-bell-expiry {
  border: 1px solid #f8df8a !important;
  background: linear-gradient(145deg, #8a6515, #d4af37) !important;
}

.alert-bell-subscription {
  border: 1px solid #f8df8a !important;
  background: linear-gradient(145deg, #a67c1d, #e5c558) !important;
}

.alert-bell-telegram {
  border: 1px solid #f8df8a !important;
  background: linear-gradient(145deg, #75520d, #c99f32) !important;
}

.alert-bell:hover,
.alert-bell:focus-visible {
  filter: brightness(1.12);
  transform: translateY(-1px);
}

.alert-bell-expiry .topbar-alert-count {
  position: absolute;
  top: -7px;
  right: -7px;
  z-index: 2;
  border: 2px solid #101720;
}

@media (max-width: 900px) {
  .topbar-alert-bells {
    gap: 4px;
  }

  .alert-bell {
    width: 38px;
    min-width: 38px;
    height: 38px;
    border-radius: 10px !important;
  }

  .alert-bell-icon {
    font-size: 19px;
  }
}

@media (max-width: 390px) {
  #langSelect {
    width: 38px;
    min-width: 38px !important;
  }

  #topSearchBtn,
  #offlineStatusBtn {
    width: 30px;
    min-width: 30px !important;
  }

  .alert-bell {
    width: 36px;
    min-width: 36px;
    height: 36px;
  }
}

@media (max-width: 350px) {
  .topbar {
    gap: 3px;
    padding-inline: 5px;
  }

  .topbar-left,
  .topbar-right,
  .topbar-alert-bells {
    gap: 3px;
  }

  #sidebarToggleBtn.hamburger-btn,
  .alert-bell {
    width: 32px;
    min-width: 32px;
    height: 32px;
  }

  #langSelect {
    width: 34px;
    min-width: 34px !important;
  }

  #topSearchBtn,
  #offlineStatusBtn {
    width: 27px;
    min-width: 27px !important;
  }

  .alert-bell-icon {
    font-size: 17px;
  }

  .alert-bell-tag {
    width: 14px;
    height: 14px;
    font-size: 8px;
  }
}

/* Aligned custom gold language menu (consistent across iOS and Android). */
.topbar-language {
  position: relative;
  align-self: center;
  height: 40px;
  overflow: visible;
}

.language-native-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  opacity: 0;
  pointer-events: none;
}

.language-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 43px;
  height: 36px;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #fff3c4 !important;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  box-shadow: none !important;
}

.language-chevron {
  color: #d4af37;
  font-size: 11px;
}

.language-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 1400;
  display: grid;
  width: 180px;
  padding: 7px;
  border: 1px solid rgba(244, 214, 117, 0.72);
  border-radius: 12px;
  background: linear-gradient(145deg, #17140b, #0d1118);
  box-shadow:
    0 20px 48px rgba(0, 0, 0, 0.52),
    0 0 0 1px rgba(212, 175, 55, 0.1);
}

.language-menu.hidden {
  display: none;
}

.language-menu button {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 38px;
  padding: 7px 9px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #f8edcb !important;
  text-align: left;
  box-shadow: none !important;
}

.language-menu button:hover,
.language-menu button:focus-visible {
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.28), rgba(212, 175, 55, 0.08)) !important;
  outline: 1px solid rgba(244, 214, 117, 0.45);
}

.language-menu strong {
  color: #f4d675;
  font-size: 11px;
  letter-spacing: 0.06em;
}

.language-menu span {
  color: #f8edcb;
  font-size: 12px;
  font-weight: 650;
}

@media (max-width: 900px) {
  .topbar-language {
    height: 36px;
  }

  .language-trigger {
    width: 37px;
    height: 34px;
    font-size: 10px;
  }

  .language-menu {
    position: fixed;
    top: 54px;
    left: 52px;
    width: min(180px, calc(100vw - 64px));
  }
}

/* Mobile toolbar: menu stays left, every utility control stays right. */
@media (max-width: 900px) {
  .topbar {
    justify-content: space-between;
    width: 100%;
  }

  .topbar-left {
    flex: 0 0 auto;
  }

  .topbar-right {
    flex: 0 0 auto;
    margin-left: auto;
    justify-content: flex-end;
  }
}

/* Small-device Create Task final controls. */
@media (max-width: 560px) {
  #taskModal .task-modal-card {
    width: calc(100vw - 12px);
    max-width: calc(100vw - 12px);
    padding: 12px;
  }

  #taskModal .task-final-actions {
    align-items: center;
    gap: 7px !important;
    width: 100%;
    min-width: 0;
  }

  #taskModal #taskBack3 {
    flex: 0 0 auto;
    width: auto !important;
    min-width: 0 !important;
    min-height: 34px;
    padding: 5px 9px !important;
    font-size: 12px;
  }

  #taskModal .task-final-primary-actions {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    flex: 1 1 auto;
    min-width: 0;
    gap: 6px !important;
  }

  #taskModal #taskPrint,
  #taskModal #taskCreate {
    width: 100%;
    min-width: 0;
    padding-inline: 9px;
    white-space: normal;
  }
}

/* Process Task: lower, larger progress circle with compact supporting content. */
#taskProcessModal .task-process-current {
  font-size: 13px;
  line-height: 1.35;
}

#taskProcessModal .task-process-progress {
  margin-top: 24px;
}

#taskProcessModal .task-process-progress-circle {
  flex-basis: 132px;
  width: 132px;
  height: 132px;
}

#taskProcessModal .task-process-progress-circle strong {
  font-size: 28px;
}

#taskProcessModal .task-process-list,
#taskProcessModal .task-process-item,
#taskProcessModal .task-process-position,
#taskProcessModal .task-process-progress-context {
  font-size: 12px;
}

/* Center and enlarge the camera's accepted-scan meter. */
.camera-barcode-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
}

.camera-barcode-head > button {
  justify-self: end;
}

.camera-scan-meter {
  justify-self: center;
  flex-basis: 84px;
  width: 84px;
  height: 84px;
}

.camera-scan-meter strong {
  font-size: 24px;
}

@media (max-width: 640px) {
  #taskProcessModal .task-process-card {
    padding-top: 16px;
  }

  #taskProcessModal .task-process-progress {
    margin-top: 30px;
  }

  #taskProcessModal .task-process-progress-circle {
    flex-basis: 116px;
    width: 116px;
    height: 116px;
  }

  #taskProcessModal .task-process-progress-circle strong {
    font-size: 25px;
  }

  .camera-scan-meter {
    flex-basis: 72px;
    width: 72px;
    height: 72px;
  }

  .camera-scan-meter strong {
    font-size: 21px;
  }
}

/* Profit summaries wrap cleanly when historical and current margins are both shown. */
#profitContent > div:first-child {
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  #profitContent > div:first-child > div {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0;
  }
}

/* Authoritative warehouse inventory: location-first gold cards. */
#inventoryModalBg {
  padding: 14px;
  background: rgba(2, 6, 12, 0.82) !important;
  backdrop-filter: blur(7px);
}

#inventoryModal.inventory-modal-panel {
  width: min(94vw, 920px) !important;
  max-width: 920px !important;
  max-height: 90dvh;
  padding: 16px !important;
  border: 1px solid rgba(212, 175, 55, 0.65);
  border-radius: 18px !important;
  background: linear-gradient(145deg, #151a20, #090d12) !important;
  color: #f8fafc;
  transform: none !important;
  overflow: hidden;
  box-shadow:
    0 26px 74px rgba(0, 0, 0, 0.62),
    0 0 28px rgba(212, 175, 55, 0.12) !important;
}

.inventory-modal-kicker {
  color: #d4af37;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#inventoryModal .inventory-modal-content {
  max-height: calc(90dvh - 86px) !important;
  padding: 12px 2px 2px !important;
  border-top: 1px solid rgba(212, 175, 55, 0.28) !important;
  overflow-y: auto !important;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

.inventory-empty {
  padding: 26px 14px;
  border: 1px dashed rgba(212, 175, 55, 0.45);
  border-radius: 12px;
  color: #ddc786;
  text-align: center;
}

.inventory-live-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 12px;
}

.inventory-live-summary > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(212, 175, 55, 0.34);
  border-radius: 11px;
  background: rgba(212, 175, 55, 0.08);
  color: #ddc786;
}

.inventory-live-summary span {
  min-width: 0;
  font-size: 11px;
}

.inventory-live-summary strong {
  color: #fff4c5;
  font-size: 19px;
}

.inventory-location-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.inventory-location-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(212, 175, 55, 0.52);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(69, 53, 16, 0.48), rgba(14, 18, 23, 0.96));
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

.inventory-location-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 12px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.3);
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.22), rgba(212, 175, 55, 0.04));
}

.inventory-location-card header span {
  color: #c9ad61;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.inventory-location-card h4 {
  margin: 2px 0 0;
  color: #fff4c5;
  font-size: 17px;
  overflow-wrap: anywhere;
}

.inventory-location-total {
  flex: 0 0 auto;
  text-align: right;
}

.inventory-location-total strong,
.inventory-location-total span {
  display: block;
}

.inventory-location-total strong {
  color: #f4d675;
  font-size: 22px;
}

.inventory-product-list {
  display: grid;
}

.inventory-product-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.13);
}

.inventory-product-row:last-child {
  border-bottom: 0;
}

.inventory-product-main {
  min-width: 0;
}

.inventory-product-main strong,
.inventory-product-main span,
.inventory-product-price span,
.inventory-product-price strong,
.inventory-product-qty strong,
.inventory-product-qty span {
  display: block;
}

.inventory-product-main strong {
  color: #f8fafc;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.inventory-barcode-trigger {
  display: inline-flex;
  width: auto;
  max-width: 100%;
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.inventory-barcode-trigger .show-barcode-box {
  padding: 4px 8px;
  border: 1px solid rgba(244, 214, 117, 0.62);
  border-radius: 7px;
  background: rgba(212, 175, 55, 0.13);
  color: #f4d675;
  font-size: 9px;
  font-weight: 850;
  box-shadow: none;
}

.inventory-barcode-trigger:hover .show-barcode-box,
.inventory-barcode-trigger:focus-visible .show-barcode-box {
  border-color: #f4d675;
  background: rgba(212, 175, 55, 0.25);
}

/* Shared History/Inventory barcode list in the Unlock7 gold theme. */
#barcodeModal {
  padding: 12px;
  background: rgba(2, 6, 12, 0.84);
  backdrop-filter: blur(7px);
}

#barcodeModal > .modal-content {
  width: min(94vw, 520px) !important;
  max-width: 520px !important;
  max-height: 88dvh;
  padding: 16px;
  border: 1px solid rgba(244, 214, 117, 0.68);
  border-radius: 17px;
  background: linear-gradient(145deg, #181b17, #090d12);
  color: #fff4c5;
  box-shadow:
    0 26px 70px rgba(0, 0, 0, 0.62),
    0 0 26px rgba(212, 175, 55, 0.14);
}

#barcodeModal h3 {
  color: #f4d675;
  font-size: 18px;
}

#barcodeModalClose {
  min-height: 36px;
  padding: 6px 11px;
  border: 1px solid rgba(244, 214, 117, 0.62);
  border-radius: 8px;
  background: rgba(212, 175, 55, 0.12);
  color: #f4d675;
}

#barcodeModalList {
  max-height: min(360px, calc(88dvh - 92px)) !important;
  padding: 6px !important;
  border: 1px solid rgba(212, 175, 55, 0.28);
  border-radius: 11px;
  background: rgba(5, 8, 12, 0.72);
  overscroll-behavior: contain;
}

#barcodeModalList > div {
  margin-bottom: 6px;
  padding: 10px !important;
  border: 1px solid rgba(212, 175, 55, 0.3) !important;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.16), rgba(212, 175, 55, 0.04));
  color: #fff4c5 !important;
  overflow-wrap: anywhere;
}

#barcodeModalList > div:last-child {
  margin-bottom: 0;
}

#barcodeModalList > div > div {
  color: #fff4c5 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px !important;
}

@media (max-width: 480px) {
  #barcodeModal {
    padding: 7px;
  }

  #barcodeModal > .modal-content {
    width: calc(100vw - 14px) !important;
    max-width: calc(100vw - 14px) !important;
    padding: 11px;
    border-radius: 13px;
  }
}

.inventory-product-main span,
.inventory-product-price span,
.inventory-product-qty span {
  margin-top: 2px;
  color: #9ca3af;
  font-size: 9px;
  overflow-wrap: anywhere;
}

.inventory-product-price,
.inventory-product-qty {
  min-width: 54px;
  text-align: right;
}

.inventory-product-price strong {
  color: #e5e7eb;
  font-size: 12px;
}

.inventory-product-qty strong {
  color: #f4d675;
  font-size: 20px;
}

@media (max-width: 700px) {
  #inventoryModalBg {
    padding: 7px;
  }

  #inventoryModal.inventory-modal-panel {
    width: calc(100vw - 14px) !important;
    max-width: calc(100vw - 14px) !important;
    max-height: 94dvh;
    padding: 11px !important;
    border-radius: 14px !important;
  }

  #inventoryModal .inventory-modal-content {
    max-height: calc(94dvh - 74px) !important;
  }

  .inventory-location-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
  }

  .inventory-live-summary {
    gap: 5px;
  }

  .inventory-live-summary > div {
    display: grid;
    justify-items: center;
    padding: 7px 4px;
    text-align: center;
  }

  .inventory-live-summary span {
    font-size: 8px;
  }

  .inventory-live-summary strong {
    font-size: 17px;
  }
}

@media (max-width: 380px) {
  .inventory-product-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 9px;
  }

  .inventory-product-price {
    display: none;
  }
}

/* Clear separation and an immediately recognizable language control. */
.topbar-right {
  gap: 10px;
}

.topbar-alert-bells {
  gap: 9px;
}

.topbar-language {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding-left: 9px;
  border: 1px solid rgba(201, 168, 92, 0.55);
  border-radius: 10px;
  background: #151a21;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.24);
  color: #f4d675;
  overflow: hidden;
}

.topbar-language-icon {
  flex: 0 0 auto;
  font-size: 17px;
  line-height: 1;
}

.topbar-language #langSelect {
  min-width: 112px;
  min-height: 38px;
  padding-left: 2px;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

@media (max-width: 900px) {
  .topbar {
    gap: 8px;
  }

  .topbar-right {
    gap: 6px;
  }

  .topbar-alert-bells {
    gap: 6px;
  }

  .topbar-language {
    gap: 3px;
    min-height: 36px;
    padding-left: 5px;
    border-radius: 8px;
  }

  .topbar-language-icon {
    font-size: 14px;
  }

  .topbar-language #langSelect {
    width: 48px;
    min-width: 48px !important;
    height: 34px;
    padding: 0 2px !important;
    font-size: 10px;
  }
}

@media (max-width: 390px) {
  .topbar {
    gap: 5px;
  }

  .topbar-right,
  .topbar-alert-bells {
    gap: 5px;
  }

  .topbar-language {
    padding-left: 4px;
  }

  .topbar-language #langSelect {
    width: 40px;
    min-width: 40px !important;
  }
}

@media (max-width: 350px) {
  .topbar-right,
  .topbar-alert-bells {
    gap: 4px;
  }

  .topbar-language-icon {
    font-size: 13px;
  }

  .topbar-language #langSelect {
    width: 34px;
    min-width: 34px !important;
  }
}

/* Compact professional language selector. */
.topbar-language {
  gap: 2px;
  width: 72px;
  min-width: 72px;
  min-height: 36px;
  padding: 0 4px 0 7px;
  border-radius: 9px;
}

.topbar-language-icon {
  font-size: 13px;
  filter: saturate(0.65);
}

.topbar-language #langSelect {
  width: 46px;
  min-width: 46px;
  height: 34px;
  min-height: 34px;
  padding: 0 12px 0 2px !important;
  color: #f4ead0;
  font-family: Inter, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  text-overflow: clip;
  cursor: pointer;
}

.topbar-language #langSelect option {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: normal;
}

@media (max-width: 900px) {
  .topbar-language {
    width: 58px;
    min-width: 58px;
    min-height: 34px;
    padding-inline: 5px 2px;
  }

  .topbar-language #langSelect {
    width: 37px;
    min-width: 37px !important;
    height: 32px;
    padding-right: 8px !important;
    font-size: 10px;
  }
}

@media (max-width: 350px) {
  .topbar-language {
    width: 54px;
    min-width: 54px;
    padding-left: 4px;
  }

  .topbar-language #langSelect {
    width: 35px;
    min-width: 35px !important;
  }
}

/* Consistent breathing room between every mobile toolbar control. */
@media (max-width: 900px) {
  .topbar {
    gap: 9px;
  }

  .topbar-left,
  .topbar-right,
  .topbar-alert-bells {
    gap: 7px;
  }

  #sidebarToggleBtn,
  .topbar-language,
  #topSearchBtn,
  #offlineStatusBtn,
  .alert-bell {
    flex: 0 0 auto;
  }
}

@media (max-width: 390px) {
  .topbar {
    gap: 7px;
  }

  .topbar-left,
  .topbar-right,
  .topbar-alert-bells {
    gap: 6px;
  }
}

@media (max-width: 350px) {
  .topbar {
    gap: 5px;
  }

  .topbar-left,
  .topbar-right,
  .topbar-alert-bells {
    gap: 5px;
  }
}

/* Responsive black-and-gold Printer / Barcode workspace */
.tools-grid .tool-printers,
button.tool-printers {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 60px !important;
  padding: 12px 16px !important;
  border-radius: 12px !important;
  border: 1px solid #ffe775 !important;
  background: linear-gradient(180deg, #ffe45b 0%, #d29a08 58%, #956000 100%) !important;
  color: #211900 !important;
  font-size: 15px !important;
  box-shadow: 0 10px 28px rgba(246, 201, 21, 0.24) !important;
}
.tools-grid .tool-printers:hover,
button.tool-printers:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
}
#view-barcode .printer-page-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
#view-barcode .printer-page-header h2 {
  margin: 2px 0 0;
  color: #f6c915;
}
.printer-page-kicker {
  color: #a9a690;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
#view-barcode .printer-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 9px 16px;
  border-radius: 10px;
  border: 1px solid #ffe775;
  background: linear-gradient(180deg, #ffe45b, #b47700);
  color: #211900;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(246, 201, 21, 0.2);
}
#view-barcode .printer-back-btn:hover {
  filter: brightness(1.08);
  transform: translateX(-2px);
}
#view-barcode .barcode-container {
  grid-template-columns: minmax(0, 1fr);
}
#view-barcode .barcode-panel {
  background: linear-gradient(155deg, #1c1d14, #080906) !important;
  color: #f2eed8;
  border: 1px solid rgba(246, 201, 21, 0.36);
  box-shadow:
    0 18px 55px rgba(0, 0, 0, 0.48),
    0 0 24px rgba(246, 201, 21, 0.08);
}
#view-barcode .barcode-panel h3,
#view-barcode .field-row label {
  color: #f6d95d;
}
#view-barcode input,
#view-barcode select {
  background: #090a07 !important;
  color: #f7f4df !important;
  border-color: rgba(246, 201, 21, 0.35) !important;
}
#view-barcode .barcode-preview {
  background: #f7f2dc;
  border-color: #d29a08;
}
#view-barcode .primary-btn,
#barcodePrintBtn {
  background: linear-gradient(180deg, #ffe45b, #b47700) !important;
  color: #211900 !important;
  border: 1px solid #ffe775 !important;
}
#view-barcode .secondary-btn {
  background: #15170f !important;
  color: #f4d75b !important;
  border: 1px solid rgba(246, 201, 21, 0.38) !important;
}
#view-barcode .small-muted {
  color: #aaa994;
}

@media (max-width: 900px) {
  #view-barcode .barcode-container {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  #view-barcode .printer-page-header {
    align-items: flex-start;
  }
  #view-barcode .barcode-panel {
    padding: 12px;
  }
  #view-barcode .field-row {
    align-items: stretch;
    flex-direction: column;
  }
  #view-barcode .field-row label {
    min-width: 0;
  }
  #view-barcode .field-row input,
  #view-barcode .field-row select {
    width: 100% !important;
  }
  #view-barcode .printer-actions,
  #view-barcode .import-actions {
    flex-wrap: wrap;
  }
}

/* Compact black-and-gold Hand Scanner tool and workspace */
.tools-grid .tool-scanners,
button.tool-scanners {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 60px !important;
  padding: 12px 16px !important;
  border-radius: 12px !important;
  border: 1px solid #ffe775 !important;
  background: linear-gradient(180deg, #ffe45b 0%, #d29a08 58%, #956000 100%) !important;
  color: #211900 !important;
  font-size: 15px !important;
  box-shadow: 0 10px 28px rgba(246, 201, 21, 0.24) !important;
}
.tools-grid .tool-scanners:hover,
button.tool-scanners:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
}
#view-handScanners {
  color: #f2eed8;
}
#view-handScanners > h2 {
  color: #f6c915;
}
#view-handScanners .scanner-panel {
  max-width: 920px;
  margin: 0 auto;
  padding: 16px;
  border: 1px solid rgba(246, 201, 21, 0.36);
  background: linear-gradient(155deg, #1c1d14, #080906) !important;
  box-shadow:
    0 18px 55px rgba(0, 0, 0, 0.48),
    0 0 24px rgba(246, 201, 21, 0.08);
}
#view-handScanners .scanner-panel .card,
#scannerLastCode,
#scannerStatus,
#scannerResult .card {
  background: #10120c !important;
  color: #f1edda !important;
  border: 1px solid rgba(246, 201, 21, 0.24) !important;
}
#view-handScanners .primary-btn {
  background: linear-gradient(180deg, #ffe45b, #b47700) !important;
  color: #211900 !important;
  border: 1px solid #ffe775 !important;
}
#view-handScanners .secondary-btn {
  background: #15170f !important;
  color: #f4d75b !important;
  border: 1px solid rgba(246, 201, 21, 0.38) !important;
}
#view-handScanners input {
  background: #090a07 !important;
  color: #f7f4df !important;
  border-color: rgba(246, 201, 21, 0.35) !important;
}

@media (max-width: 760px) {
  #view-handScanners .scanner-panel > div {
    flex-wrap: wrap;
  }
  #view-handScanners .scanner-panel > div > div {
    width: 100% !important;
    min-width: 0 !important;
  }
  #view-handScanners .scanner-panel button {
    flex: 1 1 145px;
  }
}

/* Responsive login adjustments */
@media (max-width: 720px) {
  .login-wrap {
    padding: 28px 12px;
  }
  .login-card {
    padding: 24px;
    max-width: 420px;
  }
  .login-avatar {
    width: 120px;
    height: 120px;
  }
  .login-welcome {
    font-size: 18px;
  }
  .login-sub {
    font-size: 13px;
  }
  .login-form input {
    font-size: 15px;
    padding: 12px;
  }
  .login-actions {
    gap: 8px;
  }
}

@media (max-width: 420px) {
  .login-wrap {
    padding: 18px 10px;
  }
  .login-card {
    padding: 18px;
    border-radius: 12px;
  }
  .login-avatar {
    width: 96px;
    height: 96px;
  }
  .login-welcome {
    font-size: 16px;
  }
  .login-form label {
    font-size: 14px;
  }
  .login-form input {
    font-size: 16px;
    padding: 12px 14px;
  }
  .login-actions {
    flex-direction: column;
  }
  .login-actions .primary-btn {
    width: 100%;
    padding: 14px 16px;
    font-size: 17px;
  }
  .link-btn {
    font-size: 15px;
  }
}

/* Extra-small devices fix: shrink avatar and allow card scrolling */
@media (max-width: 360px) {
  .login-avatar {
    width: 72px;
    height: 72px;
  }
  .login-card {
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 14px;
  }
  .login-wrap {
    align-items: flex-start;
    padding-top: 18px;
    padding-bottom: 18px;
  }
  .login-avatar img {
    max-width: 100%;
    max-height: 100%;
  }
}

/* Slight avatar polish in sidebar/app */
.sidebar .avatar {
  box-shadow: 0 8px 20px rgba(2, 6, 23, 0.18);
  border: 2px solid rgba(255, 255, 255, 0.04);
}

/* Avatar menu (Upload / Remove) */
.avatar {
  position: relative;
  cursor: pointer;
}
.avatar-menu {
  position: absolute;
  right: -6px;
  top: 100%;
  margin-top: 8px;
  background: #fff;
  color: #0f172a;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(2, 6, 23, 0.12);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 160px;
  z-index: 50;
}
.avatar-menu button {
  background: transparent;
  border: 0;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  font-weight: 600;
}
.avatar-menu button:hover {
  background: #f1f5f9;
}
.avatar-menu.hidden {
  display: none;
}

@media (max-width: 480px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden !important;
  }
  body * {
    min-width: 0;
    box-sizing: border-box;
  }
  .app-shell,
  .app,
  main,
  .main,
  .main-content,
  .content {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
  .login-avatar {
    width: 112px;
    height: 112px;
  }
  .login-card {
    padding: 20px;
    border-radius: 12px;
  }
  .sidebar {
    width: 220px;
    min-width: 220px;
  }
}

.logout-link:hover {
  background-color: #ef4444;
  color: white;
}
.big-digit-circle {
  width: 200px;
  height: 200px;
  background: #1e293b;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 30px auto;
  border: 8px solid #3b82f6;
  color: #fff;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.big-digit-circle span {
  font-size: 80px;
  font-weight: 800;
}

.big-digit-circle.out-mode {
  border-color: #ef4444; /* Red for Outbound */
}

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

/* Brand menu next to fixed logo */
.brand-menu-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  margin-left: 6px;
  cursor: pointer;
  font-size: 14px;
  padding: 6px 8px;
  border-radius: 6px;
}
.brand-menu-btn:hover {
  background: rgba(255, 255, 255, 0.02);
}
.brand-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: var(--panel);
  color: #071428;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(2, 6, 23, 0.5);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 160px;
  z-index: 1200;
}
.brand-menu-item {
  background: transparent;
  border: none;
  padding: 8px 10px;
  text-align: left;
  width: 100%;
  cursor: pointer;
  border-radius: 8px;
}
.brand-menu-item:hover {
  background: rgba(255, 255, 255, 0.03);
}

/* Topbar */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.02);
  position: sticky;
  top: 0;
  z-index: 1100;
  backdrop-filter: blur(6px);
}
.topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.topbar-right input {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  min-width: 320px;
}
.topbar-right button {
  padding: 8px 12px;
  border-radius: 8px;
  border: none;
  background: #0b5cff;
  color: white;
  cursor: pointer;
}

.topbar-right select {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: transparent;
  color: inherit;
}

/* Sidebar logout button styling: light red background */
.sidebar-logout {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: none;
  background: #8b4513; /* brown */
  color: #ffffff; /* white text */
  font-weight: 700;
  cursor: pointer;
}
.sidebar-logout:hover {
  background: #7a3d10;
}

/* Modal box */
.modal-content {
  background: white;
  padding: 30px;
  border-radius: 15px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  max-width: 400px;
  width: 90%;
}

.modal-content h3 {
  color: #1e293b;
  margin-bottom: 20px;
}

.modal-content button {
  display: block;
  width: 100%;
  padding: 12px;
  margin: 10px 0;
  border-radius: 8px;
  border: none;
  font-weight: bold;
  cursor: pointer;
}

.modal-content .primary-btn {
  background: var(--accent);
  color: white;
}

/* Expiry bell: use the same dark navy and gold system as the dashboard. */
.expiry-alert-modal {
  background: rgba(3, 8, 18, 0.78);
  backdrop-filter: blur(6px);
}

.expiry-alert-card {
  max-height: min(760px, 88vh);
  padding: 22px !important;
  overflow: hidden;
  border: 1px solid rgba(246, 201, 21, 0.42);
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(246, 201, 21, 0.15), transparent 38%),
    linear-gradient(145deg, #172033, #0b1322) !important;
  color: #e5edf9;
  text-align: left;
  box-shadow: 0 24px 68px rgba(0, 0, 0, 0.58);
}

.expiry-alert-card h3 {
  margin: 0 0 14px;
  color: #f8df8a;
  font-size: 20px;
}

.expiry-alert-list {
  display: grid;
  max-height: min(520px, 62vh);
  gap: 10px;
  overflow: auto;
  padding-right: 4px;
}

.expiry-alert-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px;
  border: 1px solid rgba(246, 201, 21, 0.2);
  border-radius: 12px;
  background: rgba(5, 12, 24, 0.68);
}

.expiry-alert-row.is-expired {
  border-color: rgba(248, 113, 113, 0.56);
  background: linear-gradient(90deg, rgba(127, 29, 29, 0.3), rgba(5, 12, 24, 0.76));
}

.expiry-alert-details strong,
.expiry-alert-details small,
.expiry-alert-details span {
  display: block;
}

.expiry-alert-details strong {
  color: #f8fafc;
  font-size: 15px;
}

.expiry-alert-details small,
.expiry-alert-details span {
  margin-top: 3px;
  color: #9fb0c8;
  font-size: 12px;
}

.expiry-alert-actions {
  min-width: 250px;
  text-align: right;
}

.expiry-alert-status {
  color: #f8df8a;
  font-size: 14px;
  font-weight: 800;
}

.is-expired .expiry-alert-status {
  color: #fca5a5;
}

.expiry-alert-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  margin-top: 9px;
}

.expiry-alert-card .expiry-alert-buttons button,
.expiry-alert-card .expiry-alert-footer button {
  width: auto;
  margin: 0;
  padding: 8px 10px;
  font-size: 12px;
}

.expiry-alert-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

.expiry-alert-empty {
  padding: 28px 16px;
  border: 1px dashed rgba(246, 201, 21, 0.3);
  border-radius: 12px;
  color: #b9c6d8;
  text-align: center;
}

@media (max-width: 640px) {
  .expiry-alert-card {
    width: calc(100% - 20px) !important;
    padding: 16px !important;
  }

  .expiry-alert-row {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .expiry-alert-actions {
    min-width: 0;
    text-align: left;
  }

  .expiry-alert-buttons {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

/* Subscription bell: companion card for the dashboard's dark navy and gold alerts. */
.subscription-modal {
  background: rgba(3, 8, 18, 0.78);
  backdrop-filter: blur(6px);
}

.subscription-card {
  overflow: hidden;
  padding: 22px !important;
  border: 1px solid rgba(246, 201, 21, 0.42);
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(246, 201, 21, 0.16), transparent 40%),
    linear-gradient(145deg, #172033, #0b1322) !important;
  color: #e5edf9;
  text-align: left;
  box-shadow: 0 24px 68px rgba(0, 0, 0, 0.58);
}

.subscription-card h3 {
  margin: 0 0 14px;
  color: #f8df8a;
  font-size: 20px;
}

.subscription-loading,
.subscription-message {
  padding: 24px 16px;
  border: 1px dashed rgba(246, 201, 21, 0.32);
  border-radius: 12px;
  color: #b9c6d8;
  text-align: center;
}

.subscription-status-card {
  padding: 15px;
  border: 1px solid rgba(246, 201, 21, 0.22);
  border-radius: 12px;
  background: rgba(5, 12, 24, 0.68);
}

.subscription-notice {
  margin-bottom: 14px;
  padding: 11px 12px;
  border: 1px solid rgba(246, 201, 21, 0.25);
  border-radius: 10px;
  background: rgba(246, 201, 21, 0.12);
  color: #f8df8a;
  font-size: 13px;
  font-weight: 700;
}

.subscription-status-heading,
.subscription-expiry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.subscription-status-heading > span,
.subscription-expiry > span,
.subscription-meta span {
  color: #9fb0c8;
  font-size: 12px;
  font-weight: 700;
}

.subscription-status-heading > span {
  color: #f8fafc;
  font-size: 17px;
}

.subscription-status {
  padding: 5px 9px;
  border: 1px solid rgba(246, 201, 21, 0.35);
  border-radius: 999px;
  color: #f8df8a;
  background: rgba(246, 201, 21, 0.11);
  font-size: 11px;
  letter-spacing: 0.04em;
}

.subscription-status-active {
  border-color: rgba(74, 222, 128, 0.42);
  color: #86efac;
  background: rgba(34, 197, 94, 0.12);
}

.subscription-status-expired,
.subscription-status-cancelled {
  border-color: rgba(248, 113, 113, 0.46);
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.12);
}

.subscription-expiry {
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid rgba(159, 176, 200, 0.18);
}

.subscription-expiry strong {
  color: #f8fafc;
  font-size: 13px;
}

.subscription-expiry small {
  flex-basis: 100%;
  color: #f8df8a;
  font-size: 12px;
  font-weight: 700;
}

.subscription-expiry small.is-expired {
  color: #fca5a5;
}

.subscription-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.subscription-meta > div {
  min-width: 0;
  padding: 10px;
  border-radius: 9px;
  background: rgba(23, 32, 51, 0.8);
}

.subscription-meta span,
.subscription-meta strong {
  display: block;
}

.subscription-meta strong {
  margin-top: 4px;
  overflow-wrap: anywhere;
  color: #f8fafc;
  font-size: 13px;
}

.subscription-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.subscription-card .subscription-actions button {
  width: auto;
  margin: 0;
}

.subscription-card #subUpgrade {
  border: 1px solid #f8df8a;
  background: linear-gradient(145deg, #a67c1d, #e5c558);
  color: #172033;
}

.subscription-card #subUpgrade:hover,
.subscription-card #subUpgrade:focus-visible {
  filter: brightness(1.1);
}

.subscription-card .secondary-btn {
  border: 1px solid rgba(246, 201, 21, 0.42);
  background: transparent;
  color: #f8df8a;
}

@media (max-width: 640px) {
  .subscription-card {
    width: calc(100% - 20px) !important;
    padding: 16px !important;
  }

  .subscription-meta {
    grid-template-columns: 1fr;
  }
}

/* Telegram bell: consistent alert configuration card in the dashboard palette. */
.telegram-alert-modal {
  background: rgba(3, 8, 18, 0.78);
  backdrop-filter: blur(6px);
}

.telegram-alert-card {
  padding: 22px !important;
  border: 1px solid rgba(246, 201, 21, 0.42);
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(246, 201, 21, 0.16), transparent 40%),
    linear-gradient(145deg, #172033, #0b1322) !important;
  color: #e5edf9;
  text-align: left;
  box-shadow: 0 24px 68px rgba(0, 0, 0, 0.58);
}

.telegram-alert-card h3 {
  margin: 0;
  color: #f8df8a;
  font-size: 20px;
}

.telegram-alert-intro {
  margin: 7px 0 16px;
  color: #9fb0c8;
  font-size: 13px;
}

.telegram-alert-form {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(246, 201, 21, 0.22);
  border-radius: 12px;
  background: rgba(5, 12, 24, 0.68);
}

.telegram-alert-form label {
  margin-top: 4px;
  color: #f8df8a;
  font-size: 12px;
  font-weight: 800;
}

.telegram-alert-form input {
  width: 100%;
  min-height: 42px;
  box-sizing: border-box;
  padding: 9px 11px;
  border: 1px solid rgba(159, 176, 200, 0.38);
  border-radius: 8px;
  outline: none;
  background: rgba(23, 32, 51, 0.82);
  color: #f8fafc;
}

.telegram-alert-form input::placeholder {
  color: #7f91aa;
}

.telegram-alert-form input:focus {
  border-color: #f6c915;
  box-shadow: 0 0 0 3px rgba(246, 201, 21, 0.14);
}

.telegram-alert-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

.telegram-alert-card .telegram-alert-actions button {
  width: auto;
  margin: 0;
}

.telegram-alert-card #telegramSaveBtn,
.telegram-alert-card #telegramSendBtn {
  border: 1px solid #f8df8a;
  background: linear-gradient(145deg, #a67c1d, #e5c558);
  color: #172033;
}

.telegram-alert-card #telegramSaveBtn:hover,
.telegram-alert-card #telegramSaveBtn:focus-visible,
.telegram-alert-card #telegramSendBtn:hover,
.telegram-alert-card #telegramSendBtn:focus-visible {
  filter: brightness(1.1);
}

.telegram-alert-card #telegramCloseBtn {
  border: 1px solid rgba(246, 201, 21, 0.42);
  background: transparent;
  color: #f8df8a;
}

@media (max-width: 640px) {
  .telegram-alert-card {
    width: calc(100% - 20px) !important;
    padding: 16px !important;
  }

  .telegram-alert-actions {
    justify-content: stretch;
  }

  .telegram-alert-card .telegram-alert-actions button {
    flex: 1 1 100%;
  }
}

/* Offline queue: keep recovery tools in the same navy-and-gold dashboard system. */
.offline-queue-modal {
  background: rgba(3, 8, 18, 0.78);
  backdrop-filter: blur(6px);
}

.offline-queue-card {
  max-height: min(720px, 88vh);
  padding: 22px !important;
  border: 1px solid rgba(246, 201, 21, 0.42);
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(246, 201, 21, 0.16), transparent 40%),
    linear-gradient(145deg, #172033, #0b1322) !important;
  color: #e5edf9;
  text-align: left;
  box-shadow: 0 24px 68px rgba(0, 0, 0, 0.58);
}

.offline-queue-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.offline-queue-card h3 {
  margin: 0;
  color: #f8df8a;
  font-size: 20px;
}

.offline-queue-header p {
  margin: 6px 0 0;
  color: #9fb0c8;
  font-size: 12px;
}

.offline-queue-actions,
.offline-queue-item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.offline-queue-card .offline-queue-actions button,
.offline-queue-card .offline-queue-item-actions button {
  width: auto;
  margin: 0;
}

.offline-queue-card #offlineFlushBtn {
  border: 1px solid #f8df8a;
  background: linear-gradient(145deg, #a67c1d, #e5c558);
  color: #172033;
}

.offline-queue-card #offlineCloseBtn,
.offline-queue-card .offline-queue-item-actions .secondary-btn {
  border: 1px solid rgba(246, 201, 21, 0.42);
  background: transparent;
  color: #f8df8a;
}

.offline-queue-list {
  display: grid;
  max-height: min(510px, 62vh);
  gap: 9px;
  overflow: auto;
  padding: 2px 4px 2px 0;
}

.offline-queue-last-sync,
.offline-queue-empty {
  padding: 12px;
  border: 1px dashed rgba(246, 201, 21, 0.28);
  border-radius: 10px;
  color: #b9c6d8;
  font-size: 13px;
}

.offline-queue-empty {
  text-align: center;
}

.offline-queue-empty.is-error,
.offline-queue-error,
.offline-queue-state.is-blocked {
  color: #fca5a5;
}

.offline-queue-item {
  padding: 13px;
  border: 1px solid rgba(246, 201, 21, 0.2);
  border-radius: 12px;
  background: rgba(5, 12, 24, 0.68);
}

.offline-queue-meta,
.offline-queue-state,
.offline-queue-error {
  margin-top: 6px;
  color: #9fb0c8;
  font-size: 12px;
}

.offline-queue-request {
  margin-top: 7px;
  color: #f8fafc;
  font-weight: 800;
}

.offline-queue-body {
  max-height: 130px;
  margin: 10px 0 0;
  overflow: auto;
  padding: 9px;
  border-radius: 8px;
  background: rgba(23, 32, 51, 0.82);
  color: #cbd5e1;
  font:
    12px/1.45 ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  white-space: pre-wrap;
}

.offline-queue-item-actions {
  margin-top: 10px;
}

@media (max-width: 640px) {
  .offline-queue-card {
    width: calc(100% - 20px) !important;
    padding: 16px !important;
  }

  .offline-queue-header {
    flex-direction: column;
  }

  .offline-queue-actions {
    width: 100%;
  }

  .offline-queue-card .offline-queue-actions button {
    flex: 1 1 100%;
  }
}

/* መደበቂያ ክላስ */
.hidden {
  display: none !important;
}
/* Unknown barcode ሲሆን የሚመጣ ቀይ ማስጠንቀቂያ */
.unknown-alert {
  border: 3px solid var(--danger) !important;
  animation: shake 0.5s;
}

@keyframes shake {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-10px);
  }
  50% {
    transform: translateX(10px);
  }
  75% {
    transform: translateX(-10px);
  }
  100% {
    transform: translateX(0);
  }
}

/* Modal button contrast overrides: make Close visible in Low Stock and Reorder modals */
#lowstockModal .secondary-btn,
#reorderModal .secondary-btn {
  background: #f8fafc;
  color: #0f172a;
  border: 1px solid #e6edf8;
  padding: 8px 10px;
  border-radius: 8px;
}

#lowstockModal .secondary-btn:hover,
#reorderModal .secondary-btn:hover {
  background: #eef2ff;
}

/* Ensure the close buttons are visible even if global theme is dark */
#lowstockClose,
#reorderClose {
  background: transparent;
  color: #0f172a !important;
  border: 1px solid rgba(15, 23, 42, 0.08);
}

/* Legacy rules moved to the warehouse mobile-first block above. */

/* Modern dashboard shell: desktop sidebar, mobile hamburger/cards */
body {
  background:
    radial-gradient(circle at 12% 4%, rgba(59, 130, 246, 0.12), transparent 24rem),
    radial-gradient(circle at 90% 18%, rgba(16, 185, 129, 0.1), transparent 22rem),
    linear-gradient(180deg, #06111f 0%, #0a1422 100%) !important;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 900;
  padding: 12px 18px;
  margin: 0;
  background: rgba(6, 17, 31, 0.92);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.hamburger-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(15, 23, 42, 0.82);
  color: #f8fafc;
  font-size: 26px;
  cursor: pointer;
}

#app {
  align-items: flex-start;
  gap: 18px;
  min-height: calc(100vh - 74px);
  padding: 18px;
}

.main {
  min-width: 0;
  width: 100%;
  padding: 0;
}

.sidebar {
  width: 220px;
  min-width: 220px;
  max-height: calc(100vh - 110px);
  padding: 14px 12px;
  border-radius: 18px;
  background: rgba(10, 20, 34, 0.95) !important;
  color: #e2e8f0;
  border: 1px solid rgba(148, 163, 184, 0.16);
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.34);
}

.sidebar .nav-btn {
  color: #cbd5e1;
  justify-content: flex-start;
  text-align: left;
  min-height: 42px;
  border-radius: 12px;
}

.sidebar .nav-btn:hover,
.sidebar .nav-btn.active {
  color: #fff;
  background: rgba(59, 130, 246, 0.22);
  border-left: 0;
  padding-left: 12px;
}

#view-dashboard {
  max-width: 1180px;
  margin: 0 auto;
}

.dashboard-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 8px 0 22px;
}
.dashboard-hero > div:first-child {
  flex: 1 1 300px;
}

.dashboard-hero h2 {
  margin: 4px 0 0;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1;
  color: #f8fafc;
  letter-spacing: 0;
}

.dashboard-kicker,
.tools-panel .panel-header {
  color: #94a3b8;
  font-size: 1.05rem;
  font-weight: 800;
}

.dashboard-user-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.76);
  border: 1px solid rgba(148, 163, 184, 0.14);
  color: #e2e8f0;
  font-weight: 800;
}

.dashboard-location-clock {
  display: block;
  flex: 0 0 auto;
  width: min(390px, 100%);
  min-width: 330px;
  max-width: 100%;
  height: auto;
  min-height: 0;
  margin-left: auto;
  padding: 15px 22px;
  border: 1px solid rgba(96, 165, 250, 0.38);
  border-radius: 16px;
  background:
    radial-gradient(circle at 100% 0, rgba(37, 99, 235, 0.28), transparent 48%),
    linear-gradient(145deg, #13233b, #091321 72%);
  box-shadow:
    0 15px 34px rgba(0, 0, 0, 0.32),
    0 0 28px rgba(37, 99, 235, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.025);
  text-align: right;
}
.dashboard-clock-time {
  color: #f8d758;
  font:
    900 clamp(2.25rem, 4vw, 3.2rem)/1 ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  letter-spacing: 0.04em;
  text-shadow: 0 0 22px rgba(246, 201, 21, 0.22);
}
.dashboard-clock-meta {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid rgba(96, 165, 250, 0.22);
  text-align: left;
}
.dashboard-clock-meta span,
.dashboard-clock-meta strong {
  display: block;
  min-width: 0;
}
.dashboard-clock-meta span {
  overflow: hidden;
  color: #9fb4cf;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.dashboard-clock-meta strong {
  flex: none;
  color: #bfdbfe;
  font-size: 0.68rem;
}
@media (max-width: 720px) {
  .dashboard-hero {
    align-items: stretch;
    flex-direction: column;
  }
  .dashboard-hero > div:first-child {
    flex: none;
  }
  .dashboard-location-clock {
    flex: none;
    align-self: stretch;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: auto;
    min-height: 0;
    margin-left: 0;
  }
}
@media (max-width: 430px) {
  .dashboard-location-clock {
    text-align: left;
  }
  .dashboard-clock-meta {
    align-items: flex-start;
    flex-direction: column;
  }
  .dashboard-clock-meta span {
    white-space: normal;
  }
}

.dashboard-bell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(239, 68, 68, 0.14);
}

#dashboardArea {
  display: grid;
  gap: 28px;
}

#dashboardArea .big-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 18px;
}

#dashboardArea .big-btn {
  position: relative;
  display: grid;
  grid-template-columns: 74px 1fr auto;
  align-items: center;
  gap: 18px;
  min-height: 148px;
  height: auto;
  padding: 24px 26px;
  border: 0;
  border-radius: 22px;
  color: #fff;
  text-align: left;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
}

#dashboardArea .big-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.11), transparent 12rem),
    linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(15, 23, 42, 0.08));
  pointer-events: none;
}

#dashboardArea .big-btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 58px rgba(0, 0, 0, 0.36);
}

.dash-card-icon,
.dash-card-arrow {
  position: relative;
  z-index: 1;
}

.dash-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.14);
  font-size: 34px;
  line-height: 1;
}

.dash-card-title {
  position: relative;
  z-index: 1;
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  font-weight: 900;
  color: inherit;
}

.dash-card-arrow {
  font-size: 48px;
  font-weight: 300;
  opacity: 0.82;
}

#dashboardArea .btn-profit {
  background: linear-gradient(135deg, #047857, #059669) !important;
}
#dashboardArea .btn-shop {
  background: linear-gradient(135deg, #92400e, #d97706) !important;
  color: #fff !important;
}
#dashboardArea .btn-warehouse {
  background: linear-gradient(135deg, #9a3412, #ea580c) !important;
  color: #fff !important;
}
#dashboardArea .btn-orders {
  background: linear-gradient(135deg, #1e3a8a, #2563eb) !important;
}
#dashboardArea .btn-report,
#dashboardArea .btn-history {
  background: linear-gradient(135deg, #475569, #64748b) !important;
  color: #fff !important;
}
#dashboardArea .btn-inbound,
#dashboardArea .btn-outbound {
  background: linear-gradient(135deg, #991b1b, #dc2626) !important;
}
#dashboardArea .btn-users {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, #0f766e, #0d9488) !important;
}

.tools-panel {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.tools-panel .panel-header {
  margin: 0 0 14px;
  text-align: left;
}

.tools-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 14px;
}

.tools-grid .tool-btn {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 76px;
  padding: 16px 18px;
  border: 1px solid rgba(148, 163, 184, 0.1);
  border-radius: 18px;
  background: rgba(30, 41, 59, 0.72) !important;
  color: #e2e8f0 !important;
  text-align: left;
  font-size: 1.1rem;
  font-weight: 850;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18);
}

.tool-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 22px;
}

.tool-arrow {
  font-size: 34px;
  color: #94a3b8;
}

@media (min-width: 901px) {
  .sidebar {
    transform: none !important;
  }
}

@media (max-width: 900px) {
  .topbar {
    padding: 12px 14px;
  }

  .topbar-left img {
    height: 42px !important;
  }

  #sidebarToggleBtn.hamburger-btn {
    display: inline-flex !important;
  }

  .topbar-right {
    display: none;
  }

  #app {
    display: block;
    padding: 16px;
    min-height: calc(100vh - 68px);
  }

  .main {
    width: 100%;
  }

  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(84vw, 300px);
    min-width: 0;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0 22px 22px 0;
    padding: 72px 16px 18px;
    transform: translateX(-105%);
    z-index: 1002;
  }

  body.sidebar-open .sidebar {
    transform: translateX(0);
  }

  .sidebar-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(2, 6, 23, 0.62);
    backdrop-filter: blur(2px);
    display: none;
  }

  body.sidebar-open .sidebar-overlay {
    display: block;
  }

  .dashboard-hero {
    margin-top: 10px;
    align-items: flex-start;
  }

  .dashboard-user-pill {
    padding: 6px;
  }

  .dashboard-user-pill #dashboardUserName {
    display: none;
  }

  #dashboardArea .big-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  #dashboardArea .big-btn {
    grid-template-columns: 52px 1fr auto;
    gap: 12px;
    min-height: 116px;
    padding: 18px 14px;
    border-radius: 20px;
  }

  .dash-card-icon {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    font-size: 26px;
  }

  .dash-card-title {
    font-size: 1.15rem;
  }

  .dash-card-arrow {
    font-size: 34px;
  }

  .tools-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tools-grid .tool-btn {
    grid-template-columns: 34px 1fr auto;
    min-height: 66px;
    padding: 12px;
    border-radius: 16px;
    font-size: 0.98rem;
  }

  .tool-icon {
    width: 34px;
    height: 34px;
  }
}

@media (max-width: 520px) {
  #dashboardArea .big-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  #dashboardArea .big-btn {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 7px;
    min-width: 0;
    min-height: 94px;
    padding: 12px 10px;
    border-radius: 16px;
  }

  #dashboardArea .btn-users {
    grid-column: 1 / -1;
  }

  .dash-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 13px;
    font-size: 21px;
  }

  .dash-card-title {
    min-width: 0;
    font-size: clamp(0.78rem, 3.8vw, 0.98rem);
    overflow-wrap: anywhere;
  }

  .dash-card-arrow {
    font-size: 25px;
  }

  .tools-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .tools-grid .tool-btn {
    grid-template-columns: 30px minmax(0, 1fr) auto;
    gap: 7px;
    min-width: 0;
    min-height: 58px;
    padding: 9px 8px;
    font-size: 0.78rem;
  }

  .tool-icon {
    width: 30px;
    height: 30px;
    font-size: 17px;
  }
}

/* Admin dashboard card: an understated animated warehouse rack scene. */
#dashboardArea .btn-users {
  overflow: hidden;
}

#dashboardArea .btn-users .dash-card-title {
  position: absolute;
  left: 36%;
  z-index: 1;
  color: #fff;
  font-size: clamp(1.7rem, 3.5vw, 2.5rem);
  letter-spacing: 0.02em;
  text-align: center;
  transform: translateX(-50%);
}

.admin-rack-art {
  position: absolute;
  top: 50%;
  right: 8%;
  z-index: 0;
  width: min(36%, 320px);
  height: 78px;
  opacity: 0.42;
  pointer-events: none;
  transform: translateY(-50%);
  background:
    linear-gradient(rgba(226, 232, 240, 0.78), rgba(226, 232, 240, 0.78)) 0 16px / 100% 3px
      no-repeat,
    linear-gradient(rgba(226, 232, 240, 0.78), rgba(226, 232, 240, 0.78)) 0 44px / 100% 3px
      no-repeat,
    linear-gradient(rgba(226, 232, 240, 0.78), rgba(226, 232, 240, 0.78)) 4% 0 / 3px 100% no-repeat,
    linear-gradient(rgba(226, 232, 240, 0.78), rgba(226, 232, 240, 0.78)) 96% 0 / 3px 100% no-repeat,
    linear-gradient(#f8df8a, #d4af37) 15% 3px / 31px 13px no-repeat,
    linear-gradient(#f4d675, #b8891d) 54% 3px / 38px 13px no-repeat,
    linear-gradient(#ffe775, #c79522) 30% 31px / 40px 13px no-repeat,
    linear-gradient(#f4d675, #b8891d) 74% 31px / 26px 13px no-repeat;
}

.admin-rack-art::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 8%;
  width: 28px;
  height: 18px;
  border: 2px solid rgba(255, 244, 178, 0.9);
  border-radius: 3px;
  background: linear-gradient(135deg, #f8df8a, #c79522);
  box-shadow: 0 5px 10px rgba(2, 6, 23, 0.2);
  animation: admin-carton-move 4.2s ease-in-out infinite;
}

.admin-rack-art::before {
  content: '';
  position: absolute;
  top: -9px;
  left: -38px;
  width: 20px;
  height: 38px;
  border: 3px solid rgba(255, 244, 178, 0.92);
  border-radius: 7px 7px 11px 11px;
  background:
    linear-gradient(#172033, #172033) 50% 8px / 11px 7px no-repeat,
    linear-gradient(135deg, #f8df8a, #c79522);
  box-shadow: 0 8px 16px rgba(2, 6, 23, 0.24);
  transform: rotate(-18deg);
  animation: admin-scanner-scan 2.7s ease-in-out infinite;
}

@keyframes admin-scanner-scan {
  0%,
  100% {
    transform: translateY(0) rotate(-18deg);
  }
  50% {
    transform: translateY(7px) rotate(-10deg);
  }
}

@keyframes admin-carton-move {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(calc(min(25vw, 195px)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .admin-rack-art::before,
  .admin-rack-art::after {
    animation: none;
  }
}

@media (max-width: 520px) {
  #dashboardArea .btn-users .dash-card-title {
    font-size: 1.45rem;
  }

  .admin-rack-art {
    right: 7%;
    width: 42%;
    height: 58px;
    opacity: 0.3;
  }

  .admin-rack-art::before {
    left: -28px;
    transform: scale(0.78) rotate(-18deg);
  }
}

/* Warehouse dashboard card: a gentle live-stock chart animation. */
#dashboardArea .btn-warehouse {
  overflow: hidden;
}

.warehouse-chart-art {
  position: absolute;
  right: 16%;
  bottom: 16px;
  z-index: 0;
  width: 128px;
  height: 62px;
  overflow: hidden;
  opacity: 0.48;
  pointer-events: none;
  border-left: 1px solid rgba(255, 255, 255, 0.38);
  border-bottom: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 0 0 0 5px;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.13) 1px, transparent 1px);
  background-size:
    100% 20px,
    26px 100%;
}

.warehouse-chart-line {
  position: absolute;
  inset: 0;
  background: #f8df8a;
  clip-path: polygon(
    0 81%,
    5% 78%,
    27% 58%,
    43% 66%,
    68% 30%,
    100% 8%,
    100% 15%,
    70% 37%,
    45% 73%,
    26% 65%,
    7% 85%,
    0 88%
  );
  filter: drop-shadow(0 0 5px rgba(255, 231, 117, 0.72));
  transform-origin: left center;
  animation: warehouse-chart-draw 3.8s ease-in-out infinite;
}

.warehouse-chart-dot {
  position: absolute;
  left: 0;
  bottom: 8px;
  width: 8px;
  height: 8px;
  border: 2px solid #fff4b2;
  border-radius: 50%;
  background: #d4af37;
  box-shadow: 0 0 10px rgba(255, 231, 117, 0.9);
  animation: warehouse-chart-point 3.8s ease-in-out infinite;
}

@keyframes warehouse-chart-draw {
  0%,
  18% {
    transform: scaleX(0);
  }
  58%,
  100% {
    transform: scaleX(1);
  }
}

@keyframes warehouse-chart-point {
  0%,
  18% {
    transform: translate(0, 0);
    opacity: 0;
  }
  28% {
    transform: translate(30px, -16px);
    opacity: 1;
  }
  42% {
    transform: translate(52px, -9px);
  }
  58%,
  100% {
    transform: translate(112px, -51px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .warehouse-chart-line,
  .warehouse-chart-dot {
    animation: none;
  }
}

@media (max-width: 520px) {
  .warehouse-chart-art {
    right: 13%;
    bottom: 11px;
    width: 88px;
    height: 46px;
    opacity: 0.32;
  }
}

/* Orders dashboard card: worker scanning an outgoing order. */
#dashboardArea .btn-orders {
  overflow: hidden;
}

.orders-worker-art {
  position: absolute;
  right: 11%;
  bottom: 10px;
  z-index: 0;
  width: 96px;
  height: 96px;
  opacity: 0.48;
  pointer-events: none;
  animation: orders-worker-shift 2.8s ease-in-out infinite;
}

.orders-worker-head {
  position: absolute;
  top: 8px;
  left: 29px;
  width: 25px;
  height: 25px;
  border: 2px solid rgba(255, 244, 178, 0.9);
  border-radius: 50%;
  background: #f8df8a;
}

.orders-worker-body {
  position: absolute;
  top: 33px;
  left: 23px;
  width: 37px;
  height: 46px;
  border: 2px solid rgba(255, 244, 178, 0.86);
  border-radius: 12px 12px 7px 7px;
  background: linear-gradient(135deg, #1e3a8a, #2563eb);
}

.orders-worker-body::before,
.orders-worker-body::after {
  content: '';
  position: absolute;
  bottom: -17px;
  width: 9px;
  height: 20px;
  border-radius: 0 0 6px 6px;
  background: rgba(255, 244, 178, 0.92);
}

.orders-worker-body::before {
  left: 6px;
}

.orders-worker-body::after {
  right: 6px;
}

.orders-worker-scanner {
  position: absolute;
  top: 45px;
  right: 4px;
  width: 22px;
  height: 13px;
  border: 2px solid rgba(255, 244, 178, 0.95);
  border-radius: 4px;
  background: #172033;
  box-shadow: 0 0 12px rgba(255, 231, 117, 0.35);
  transform: rotate(-20deg);
  transform-origin: left center;
  animation: orders-scanner-pulse 1.4s ease-in-out infinite;
}

.orders-worker-scanner::after {
  content: '';
  position: absolute;
  top: 3px;
  right: -7px;
  width: 6px;
  height: 4px;
  border-radius: 50%;
  background: #f8df8a;
}

.orders-worker-beam {
  position: absolute;
  top: 44px;
  right: -18px;
  width: 42px;
  height: 24px;
  border-top: 2px solid rgba(248, 223, 138, 0.75);
  border-radius: 50%;
  transform: rotate(-16deg);
  transform-origin: left center;
  animation: orders-scan-beam 1.4s ease-in-out infinite;
}

@keyframes orders-worker-shift {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

@keyframes orders-scanner-pulse {
  0%,
  100% {
    transform: rotate(-20deg) translateY(0);
  }
  50% {
    transform: rotate(-12deg) translateY(-3px);
  }
}

@keyframes orders-scan-beam {
  0%,
  100% {
    opacity: 0.18;
    transform: rotate(-16deg) scaleX(0.62);
  }
  50% {
    opacity: 0.9;
    transform: rotate(-16deg) scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .orders-worker-art,
  .orders-worker-scanner,
  .orders-worker-beam {
    animation: none;
  }
}

@media (max-width: 520px) {
  .orders-worker-art {
    right: 7%;
    bottom: 3px;
    opacity: 0.32;
    transform: scale(0.75);
    transform-origin: bottom right;
  }
}

/* Reports dashboard card: live report sheet with growing bars and trend line. */
#dashboardArea .btn-report {
  overflow: hidden;
}

.report-chart-art {
  position: absolute;
  right: 10%;
  bottom: 14px;
  z-index: 0;
  width: 118px;
  height: 90px;
  opacity: 0.5;
  pointer-events: none;
}

.report-sheet {
  position: absolute;
  inset: 2px 7px 2px 5px;
  border: 2px solid rgba(255, 244, 178, 0.78);
  border-radius: 9px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.13) 1px, transparent 1px), rgba(15, 23, 42, 0.26);
  background-size: 100% 18px;
  box-shadow: 0 0 18px rgba(248, 223, 138, 0.18);
}

.report-sheet::after {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 22px;
  height: 22px;
  border-left: 2px solid rgba(255, 244, 178, 0.7);
  border-bottom: 2px solid rgba(255, 244, 178, 0.7);
  background: rgba(255, 255, 255, 0.12);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.report-bar {
  position: absolute;
  bottom: 15px;
  width: 13px;
  border-radius: 4px 4px 1px 1px;
  background: linear-gradient(180deg, #fff4b2, #d4af37);
  box-shadow: 0 0 9px rgba(248, 223, 138, 0.45);
  transform-origin: bottom;
  animation: report-bar-grow 2.8s ease-in-out infinite;
}

.report-bar-one {
  left: 23px;
  height: 27px;
}

.report-bar-two {
  left: 45px;
  height: 47px;
  animation-delay: 0.18s;
}

.report-bar-three {
  left: 67px;
  height: 36px;
  animation-delay: 0.36s;
}

.report-trend-line {
  position: absolute;
  left: 18px;
  bottom: 24px;
  width: 73px;
  height: 38px;
  background: #f8df8a;
  clip-path: polygon(0 83%, 30% 60%, 55% 70%, 100% 8%, 100% 16%, 57% 80%, 31% 70%, 0 94%);
  filter: drop-shadow(0 0 4px rgba(248, 223, 138, 0.72));
  transform-origin: left center;
  animation: report-line-draw 3.2s ease-in-out infinite;
}

.report-live-dot {
  position: absolute;
  right: 19px;
  top: 24px;
  width: 8px;
  height: 8px;
  border: 2px solid #fff4b2;
  border-radius: 50%;
  background: #d4af37;
  box-shadow: 0 0 12px rgba(248, 223, 138, 0.95);
  animation: report-dot-pulse 1.25s ease-in-out infinite;
}

@keyframes report-bar-grow {
  0%,
  15% {
    transform: scaleY(0.16);
    opacity: 0.45;
  }
  55%,
  100% {
    transform: scaleY(1);
    opacity: 1;
  }
}

@keyframes report-line-draw {
  0%,
  22% {
    transform: scaleX(0);
    opacity: 0;
  }
  65%,
  100% {
    transform: scaleX(1);
    opacity: 1;
  }
}

@keyframes report-dot-pulse {
  0%,
  100% {
    transform: scale(0.72);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.18);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .report-bar,
  .report-trend-line,
  .report-live-dot {
    animation: none;
  }
}

@media (max-width: 520px) {
  .report-chart-art {
    right: 6%;
    bottom: 5px;
    opacity: 0.32;
    transform: scale(0.76);
    transform-origin: bottom right;
  }
}

/* Inbound dashboard card: package entering the receiving dock and being scanned. */
#dashboardArea .btn-inbound {
  overflow: hidden;
}

.inbound-dock-art {
  position: absolute;
  right: 9%;
  bottom: 10px;
  z-index: 0;
  width: 118px;
  height: 94px;
  opacity: 0.5;
  pointer-events: none;
}

.inbound-dock {
  position: absolute;
  right: 4px;
  bottom: 5px;
  width: 65px;
  height: 72px;
  border: 3px solid rgba(255, 244, 178, 0.82);
  border-bottom-width: 8px;
  border-radius: 8px 8px 3px 3px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.11) 0 8px,
      rgba(15, 23, 42, 0.12) 8px 16px
    ),
    rgba(15, 23, 42, 0.22);
  box-shadow: 0 0 18px rgba(248, 223, 138, 0.18);
}

.inbound-dock::before {
  content: '';
  position: absolute;
  left: -13px;
  bottom: -8px;
  width: 88px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 244, 178, 0.8);
  box-shadow: 0 0 10px rgba(248, 223, 138, 0.34);
}

.inbound-package {
  position: absolute;
  left: 3px;
  bottom: 16px;
  width: 31px;
  height: 27px;
  border: 2px solid rgba(255, 244, 178, 0.94);
  border-radius: 4px;
  background: linear-gradient(135deg, #d4af37, #f8df8a);
  box-shadow: 0 0 12px rgba(248, 223, 138, 0.42);
  animation: inbound-package-arrive 3s ease-in-out infinite;
}

.inbound-package::before,
.inbound-package::after {
  content: '';
  position: absolute;
  background: rgba(120, 53, 15, 0.48);
}

.inbound-package::before {
  top: 0;
  bottom: 0;
  left: 13px;
  width: 3px;
}

.inbound-package::after {
  top: 8px;
  left: 4px;
  width: 20px;
  height: 2px;
}

.inbound-scan-beam {
  position: absolute;
  right: 34px;
  top: 8px;
  width: 3px;
  height: 58px;
  border-radius: 999px;
  background: #fff4b2;
  box-shadow: 0 0 9px rgba(248, 223, 138, 0.92);
  animation: inbound-scan-sweep 1.6s ease-in-out infinite;
}

.inbound-check {
  position: absolute;
  top: 2px;
  right: 1px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 2px solid rgba(255, 244, 178, 0.9);
  border-radius: 50%;
  background: rgba(22, 163, 74, 0.86);
  color: #fff4b2;
  font-size: 17px;
  font-weight: 900;
  animation: inbound-check-pop 3s ease-in-out infinite;
}

@keyframes inbound-package-arrive {
  0%,
  12% {
    transform: translateX(-12px) rotate(-3deg);
    opacity: 0.25;
  }
  48%,
  78% {
    transform: translateX(53px) rotate(0);
    opacity: 1;
  }
  100% {
    transform: translateX(53px) scale(0.92);
    opacity: 0;
  }
}

@keyframes inbound-scan-sweep {
  0%,
  100% {
    transform: translateX(-24px);
    opacity: 0.22;
  }
  50% {
    transform: translateX(20px);
    opacity: 0.95;
  }
}

@keyframes inbound-check-pop {
  0%,
  48% {
    transform: scale(0.45);
    opacity: 0;
  }
  62%,
  84% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.7);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .inbound-package,
  .inbound-scan-beam,
  .inbound-check {
    animation: none;
  }
}

@media (max-width: 520px) {
  .inbound-dock-art {
    right: 5%;
    bottom: 4px;
    opacity: 0.32;
    transform: scale(0.76);
    transform-origin: bottom right;
  }
}

/* Shop dashboard card: cashier, POS counter, and moving payment. */
#dashboardArea .btn-shop {
  overflow: hidden;
}

.shop-pos-art {
  position: absolute;
  right: 12%;
  bottom: 12px;
  z-index: 0;
  width: 112px;
  height: 88px;
  opacity: 0.48;
  pointer-events: none;
}

.shop-pos-worker {
  position: absolute;
  bottom: 15px;
  left: 11px;
  width: 32px;
  height: 45px;
  border: 2px solid rgba(255, 244, 178, 0.9);
  border-radius: 13px 13px 6px 6px;
  background: linear-gradient(135deg, #92400e, #d97706);
  animation: shop-cashier-work 2.5s ease-in-out infinite;
}

.shop-pos-worker::before {
  content: '';
  position: absolute;
  top: -26px;
  left: 4px;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 244, 178, 0.9);
  border-radius: 50%;
  background: #f8df8a;
}

.shop-pos-counter {
  position: absolute;
  right: 2px;
  bottom: 4px;
  width: 70px;
  height: 37px;
  border: 2px solid rgba(255, 244, 178, 0.86);
  border-radius: 7px 7px 4px 4px;
  background:
    linear-gradient(#172033, #172033) 66% 8px / 24px 13px no-repeat,
    linear-gradient(145deg, #f8df8a, #c79522);
  box-shadow: 0 8px 15px rgba(2, 6, 23, 0.18);
}

.shop-pos-payment {
  position: absolute;
  top: 10px;
  right: 17px;
  width: 29px;
  height: 18px;
  border: 2px solid rgba(255, 244, 178, 0.9);
  border-radius: 4px;
  background: linear-gradient(135deg, #86efac, #059669);
  box-shadow: 0 0 12px rgba(134, 239, 172, 0.48);
  animation: shop-payment-move 2.5s ease-in-out infinite;
}

.shop-pos-payment::after {
  content: '$';
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  color: #07301e;
  font-size: 12px;
  font-weight: 900;
}

@keyframes shop-cashier-work {
  0%,
  100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-4deg) translateY(-2px);
  }
}

@keyframes shop-payment-move {
  0%,
  100% {
    opacity: 0.15;
    transform: translate(-22px, 22px) rotate(-10deg);
  }
  45%,
  70% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .shop-pos-worker,
  .shop-pos-payment {
    animation: none;
  }
}

@media (max-width: 520px) {
  .shop-pos-art {
    right: 6%;
    bottom: 2px;
    opacity: 0.31;
    transform: scale(0.75);
    transform-origin: bottom right;
  }
}

/* History dashboard card: a large book with continuously turning pages. */
#dashboardArea .btn-history {
  overflow: hidden;
}

.history-book-art {
  position: absolute;
  right: 10%;
  bottom: 10px;
  z-index: 0;
  width: 108px;
  height: 92px;
  opacity: 0.47;
  pointer-events: none;
  perspective: 280px;
}

.history-book-cover {
  position: absolute;
  right: 4px;
  bottom: 5px;
  width: 91px;
  height: 66px;
  border: 2px solid rgba(248, 223, 138, 0.86);
  border-radius: 4px 10px 10px 4px;
  background:
    linear-gradient(rgba(248, 223, 138, 0.5), rgba(248, 223, 138, 0.5)) 11px 9px / 2px 48px
      no-repeat,
    linear-gradient(135deg, #334155, #0f172a);
  box-shadow: 0 10px 20px rgba(2, 6, 23, 0.26);
  transform: rotateX(7deg) rotateY(-16deg);
}

.history-book-page {
  position: absolute;
  right: 7px;
  bottom: 8px;
  width: 83px;
  height: 60px;
  border: 1px solid rgba(255, 244, 178, 0.85);
  border-radius: 3px 8px 8px 3px;
  background:
    repeating-linear-gradient(180deg, transparent 0 9px, rgba(100, 116, 139, 0.45) 9px 10px),
    #fff4c2;
  box-shadow: inset 9px 0 8px rgba(15, 23, 42, 0.12);
  transform-origin: left center;
  backface-visibility: hidden;
}

.history-book-page-one {
  animation: history-page-turn 3.2s ease-in-out infinite;
}

.history-book-page-two {
  animation: history-page-turn 3.2s 1.6s ease-in-out infinite;
}

@keyframes history-page-turn {
  0%,
  18% {
    opacity: 0;
    transform: rotateY(0deg);
  }
  30% {
    opacity: 1;
  }
  65% {
    opacity: 1;
    transform: rotateY(-145deg);
  }
  82%,
  100% {
    opacity: 0;
    transform: rotateY(-178deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .history-book-page-one,
  .history-book-page-two {
    animation: none;
  }
}

@media (max-width: 520px) {
  .history-book-art {
    right: 5%;
    bottom: 2px;
    opacity: 0.3;
    transform: scale(0.72);
    transform-origin: bottom right;
  }
}

/* Profit dashboard card: coins, flexing strength, and an energy spark. */
#dashboardArea .btn-profit {
  overflow: hidden;
}

.profit-energy-art {
  position: absolute;
  right: 9%;
  bottom: 7px;
  z-index: 0;
  width: 118px;
  height: 98px;
  opacity: 0.5;
  pointer-events: none;
}

.profit-coin {
  position: absolute;
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border: 2px solid rgba(255, 244, 178, 0.92);
  border-radius: 50%;
  background: linear-gradient(135deg, #fff09a, #d4af37);
  box-shadow: 0 5px 10px rgba(2, 6, 23, 0.2);
  color: #4f3300;
  font-size: 15px;
  font-weight: 900;
  animation: profit-coin-rise 2.8s ease-in-out infinite;
}

.profit-coin-one {
  top: 11px;
  left: 3px;
}

.profit-coin-two {
  top: 0;
  left: 30px;
  animation-delay: 0.45s;
}

.profit-coin-three {
  top: 14px;
  left: 57px;
  animation-delay: 0.9s;
}

.profit-flex-arm {
  position: absolute;
  right: 4px;
  bottom: 11px;
  width: 54px;
  height: 29px;
  border: 4px solid rgba(255, 244, 178, 0.9);
  border-top: 0;
  border-radius: 8px 22px 20px 18px;
  background: linear-gradient(135deg, #86efac, #059669);
  box-shadow: 0 7px 14px rgba(2, 6, 23, 0.2);
  transform: rotate(-20deg);
  transform-origin: left center;
  animation: profit-flex 2.4s ease-in-out infinite;
}

.profit-flex-arm::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 20px;
  width: 24px;
  height: 22px;
  border: 4px solid rgba(255, 244, 178, 0.9);
  border-radius: 60% 60% 45% 45%;
  background: #34d399;
}

.profit-energy-bolt {
  position: absolute;
  right: 0;
  top: 18px;
  color: #fff4b2;
  font-size: 30px;
  line-height: 1;
  filter: drop-shadow(0 0 7px rgba(255, 231, 117, 0.85));
  animation: profit-bolt-pulse 1.25s ease-in-out infinite;
}

@keyframes profit-coin-rise {
  0%,
  100% {
    opacity: 0.35;
    transform: translateY(6px) rotate(-8deg);
  }
  50% {
    opacity: 1;
    transform: translateY(-5px) rotate(8deg);
  }
}

@keyframes profit-flex {
  0%,
  100% {
    transform: rotate(-20deg) scale(0.94);
  }
  50% {
    transform: rotate(-10deg) scale(1.06);
  }
}

@keyframes profit-bolt-pulse {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.82);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .profit-coin,
  .profit-flex-arm,
  .profit-energy-bolt {
    animation: none;
  }
}

@media (max-width: 520px) {
  .profit-energy-art {
    right: 5%;
    bottom: 0;
    opacity: 0.3;
    transform: scale(0.72);
    transform-origin: bottom right;
  }
}

/* Outbound dashboard card: a product moving toward transfer or direct sale. */
#dashboardArea .btn-outbound {
  overflow: hidden;
}

.outbound-flow-art {
  position: absolute;
  right: 10%;
  bottom: 17px;
  z-index: 0;
  width: 132px;
  height: 62px;
  opacity: 0.5;
  pointer-events: none;
}

.outbound-source-box {
  position: absolute;
  left: 1px;
  bottom: 7px;
  width: 34px;
  height: 32px;
  border: 2px solid rgba(255, 244, 178, 0.92);
  border-radius: 5px;
  background:
    linear-gradient(rgba(255, 244, 178, 0.85), rgba(255, 244, 178, 0.85)) 50% 0 / 3px 100% no-repeat,
    linear-gradient(135deg, #f8df8a, #c79522);
  box-shadow: 0 7px 14px rgba(2, 6, 23, 0.2);
  animation: outbound-box-move 3.2s ease-in-out infinite;
}

.outbound-flow-arrow {
  position: absolute;
  top: 8px;
  left: 43px;
  color: #fff4b2;
  font-size: 44px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 0 10px rgba(255, 231, 117, 0.7);
  animation: outbound-arrow-pulse 1.6s ease-in-out infinite;
}

.outbound-sale-point {
  position: absolute;
  right: 0;
  bottom: 8px;
  display: grid;
  width: 37px;
  height: 37px;
  place-items: center;
  border: 2px solid rgba(255, 244, 178, 0.92);
  border-radius: 50%;
  background: linear-gradient(135deg, #86efac, #059669);
  box-shadow: 0 0 15px rgba(134, 239, 172, 0.38);
  color: #07301e;
  font-size: 21px;
  font-weight: 900;
  animation: outbound-sale-pop 3.2s ease-in-out infinite;
}

@keyframes outbound-box-move {
  0%,
  20% {
    opacity: 1;
    transform: translateX(0) rotate(0deg);
  }
  65% {
    opacity: 1;
    transform: translateX(78px) rotate(7deg);
  }
  82%,
  100% {
    opacity: 0;
    transform: translateX(91px) rotate(9deg);
  }
}

@keyframes outbound-arrow-pulse {
  0%,
  100% {
    opacity: 0.35;
    transform: translateX(-3px);
  }
  50% {
    opacity: 1;
    transform: translateX(4px);
  }
}

@keyframes outbound-sale-pop {
  0%,
  55% {
    transform: scale(0.78);
  }
  65%,
  82% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(0.78);
  }
}

@media (prefers-reduced-motion: reduce) {
  .outbound-source-box,
  .outbound-flow-arrow,
  .outbound-sale-point {
    animation: none;
  }
}

@media (max-width: 520px) {
  .outbound-flow-art {
    right: 5%;
    bottom: 3px;
    opacity: 0.31;
    transform: scale(0.74);
    transform-origin: bottom right;
  }
}

@media (max-width: 380px) {
  #dashboardArea .big-btn {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 6px;
    padding-inline: 8px;
  }

  .dash-card-icon {
    width: 36px;
    height: 36px;
  }

  #dashboardArea .dash-card-arrow {
    display: none;
  }
}

/* Responsive Orders page */
.orders-page-shell {
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 18px;
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(250, 204, 21, 0.15), transparent 22rem),
    linear-gradient(180deg, rgba(17, 21, 13, 0.96), rgba(5, 7, 4, 0.96));
  border: 1px solid rgba(250, 204, 21, 0.3);
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.28);
}

.orders-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.orders-page-shell .orders-back-home-btn {
  width: auto !important;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #d4af37;
  border-radius: 8px;
  background: transparent;
  color: #d4af37;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  flex: 0 0 auto;
}
.orders-page-shell .orders-back-home-btn:hover {
  background: rgba(212, 175, 55, 0.12);
  transform: translateY(-1px);
}

.orders-kicker {
  color: #d4af37;
  font-size: 0.88rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.orders-header h2 {
  margin: 4px 0 6px;
  color: #facc15;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
}

.orders-header p {
  max-width: 620px;
  margin: 0;
  color: #94a3b8;
  font-size: 0.98rem;
}

.orders-paid-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  min-height: 44px;
  margin: 0;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(250, 204, 21, 0.08);
  color: #fde68a;
  border: 1px solid rgba(250, 204, 21, 0.32);
  font-weight: 800;
}

.orders-paid-toggle input {
  width: 18px;
  height: 18px;
  accent-color: #facc15;
}

.orders-page-shell .orders-filter-panel {
  background: linear-gradient(135deg, #171b12, #0b0e08);
  border-color: rgba(250, 204, 21, 0.38);
}
.orders-page-shell .orders-filter-panel select,
.orders-page-shell .orders-filter-panel input[type='date'] {
  background: #090c07;
  border-color: rgba(250, 204, 21, 0.45);
  color: #fff;
}
.orders-list > .card {
  margin-bottom: 0 !important;
  padding: 16px !important;
  border: 1px solid rgba(250, 204, 21, 0.3) !important;
  border-radius: 16px !important;
  background: linear-gradient(145deg, #171b12, #0a0c08) !important;
  color: #f8fafc !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.32) !important;
}
.orders-list > .card > div:first-child > div:first-child {
  color: #facc15 !important;
}
.orders-list > .card > div:first-child > div:nth-child(2),
.orders-list > .card > div:first-child > div:nth-child(4),
.orders-list > .card > div:first-child > div:nth-child(5),
.orders-list > .card > div:last-child > div:first-child {
  color: #aeb5a7 !important;
}
.orders-list > .card > div:first-child > div:nth-child(3) {
  background: rgba(250, 204, 21, 0.14) !important;
  color: #fde68a !important;
  border: 1px solid rgba(250, 204, 21, 0.26);
}
.orders-list > .card .secondary-btn {
  background: linear-gradient(180deg, #ffe45b, #b47700);
  color: #211900;
  border: 1px solid #facc15;
  font-weight: 900;
}

.orders-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 14px;
}

.order-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  padding: 16px;
  border-radius: 18px;
  background: rgba(248, 250, 252, 0.96);
  color: #0f172a;
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
}

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

.order-product {
  color: #0f172a;
  font-size: 1.08rem;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.order-meta,
.order-submeta,
.order-date {
  color: #64748b;
  overflow-wrap: anywhere;
}

.order-meta {
  margin-top: 6px;
  font-size: 0.92rem;
}

.order-submeta {
  margin-top: 4px;
  font-size: 0.86rem;
  font-weight: 750;
}

.order-card-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  flex: 0 0 auto;
  text-align: right;
}

.order-date {
  max-width: 170px;
  font-size: 0.78rem;
}

.order-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #e0f2fe;
  color: #075985;
  font-size: 0.82rem;
  font-weight: 900;
  text-transform: capitalize;
}

.orders-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 28px;
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.62);
  color: #cbd5e1;
  text-align: center;
  border: 1px dashed rgba(148, 163, 184, 0.24);
}

@media (max-width: 900px) {
  .orders-page-shell {
    padding: 14px;
    border-radius: 18px;
  }

  .orders-header {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .orders-header > div {
    order: 3;
    width: 100%;
  }

  .orders-paid-toggle {
    justify-content: center;
    width: 100%;
  }

  .orders-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .orders-page-shell {
    padding: 12px;
    margin: 0;
  }

  .order-card {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 14px;
  }

  .order-card-side {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left;
  }

  .order-date {
    max-width: 58%;
  }
}

/* Responsive Report page */
.report-page-shell {
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 18px;
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(245, 158, 11, 0.17), transparent 22rem),
    linear-gradient(180deg, rgba(17, 21, 13, 0.96), rgba(5, 7, 4, 0.96));
  border: 1px solid rgba(251, 191, 36, 0.32);
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.28);
}

.report-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  margin-bottom: 18px;
  position: relative;
}

.report-page-header > div {
  width: min(680px, 100%);
  text-align: center;
}

.report-page-shell .report-back-home-btn {
  width: auto !important;
  max-width: max-content !important;
  min-width: 0;
  min-height: 36px;
  height: 36px;
  padding: 5px 10px !important;
  border: 1px solid #d4af37;
  border-radius: 8px;
  background: transparent;
  color: #d4af37;
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  flex: 0 0 auto !important;
  align-self: flex-start;
  position: absolute;
  inset-inline-start: 0;
  top: 0;
}
.report-page-shell .report-back-home-btn:hover {
  background: rgba(212, 175, 55, 0.12);
  transform: translateY(-1px);
}

.report-kicker {
  color: #facc15;
  font-size: 0.88rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.report-page-header h2 {
  margin: 4px 0 6px;
  color: #facc15;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
}

.report-page-header p {
  max-width: 620px;
  margin: 0;
  color: #cbd5e1;
  font-size: 0.98rem;
}

.report-controls.card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border-radius: 18px;
  background: linear-gradient(145deg, #171b12, #0a0d08);
  color: #f8fafc;
  border: 1px solid rgba(250, 204, 21, 0.3);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
}

.report-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr)) auto;
  gap: 12px;
  align-items: end;
}

.report-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  color: #fde68a;
  font-size: 0.86rem;
  font-weight: 900;
}

.report-field select,
.report-field input {
  width: 100%;
  min-height: 42px;
  padding: 9px 10px;
  border: 1px solid rgba(250, 204, 21, 0.42);
  border-radius: 10px;
  background: #090c07;
  color: #f8fafc;
  font: inherit;
}

.report-field select:focus,
.report-field input:focus {
  outline: 2px solid rgba(245, 158, 11, 0.35);
  border-color: #f59e0b;
}

.report-search-btn {
  min-height: 42px;
  padding-inline: 18px;
  white-space: nowrap;
  border: 1px solid #facc15;
  background: linear-gradient(180deg, #ffe45b, #b47700);
  color: #211900;
  font-weight: 900;
  box-shadow: 0 7px 18px rgba(250, 204, 21, 0.24);
}

.report-export-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.report-export-actions button {
  min-height: 40px;
  border: 1px solid #f6c915;
  background: linear-gradient(180deg, #ffe35a 0%, #d89a08 56%, #a66d00 100%);
  color: #211900;
  font-weight: 800;
  box-shadow: 0 5px 16px rgba(246, 201, 21, 0.24);
}

.report-export-actions button:hover:not(:disabled) {
  border-color: #ffe96f;
  box-shadow: 0 7px 22px rgba(246, 201, 21, 0.38);
  transform: translateY(-1px);
}

#reportContent {
  margin-top: 14px;
}

.report-summary-line {
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(25, 29, 17, 0.86);
  color: #fde68a;
  border: 1px solid rgba(250, 204, 21, 0.28);
}

.report-operational-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.report-metric-card {
  padding: 14px;
  border: 1px solid rgba(250, 204, 21, 0.3);
  border-radius: 14px;
  background: linear-gradient(145deg, #1b2014, #0b0e08);
  box-shadow: 0 9px 22px rgba(0, 0, 0, 0.25);
}
.report-metric-card span {
  display: block;
  color: #c9bc78;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.report-metric-card strong {
  display: block;
  margin-top: 6px;
  color: #facc15;
  font-size: 25px;
  line-height: 1;
}
.report-operational-table {
  min-width: 1180px;
}
.report-status-badge {
  display: inline-flex;
  padding: 4px 8px;
  border: 1px solid rgba(250, 204, 21, 0.35);
  border-radius: 999px;
  background: rgba(250, 204, 21, 0.12);
  color: #fde68a;
  font-size: 11px;
  font-weight: 800;
  text-transform: capitalize;
}
@media (max-width: 700px) {
  .report-operational-summary {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Refined Unlock 7 gold palette: muted champagne and bronze */
#warehouseArea,
.orders-page-shell,
.report-page-shell {
  --u7-gold: #c9a85c;
  --u7-gold-light: #ddc786;
  --u7-bronze: #806126;
  --u7-gold-border: rgba(201, 168, 92, 0.34);
  --u7-gold-soft: rgba(201, 168, 92, 0.1);
}

#warehouseArea .warehouse-page-header,
.orders-page-shell,
.report-page-shell {
  border-color: var(--u7-gold-border);
}

#warehouseArea .warehouse-page-header h2,
.orders-page-shell .orders-header h2,
.report-page-shell .report-page-header h2,
.report-page-shell .report-table-head h4,
.report-page-shell .report-data-table th,
.report-page-shell .report-metric-card strong {
  color: var(--u7-gold);
}

#warehouseArea .warehouse-page-header span,
.orders-page-shell .orders-kicker,
.report-page-shell .report-kicker,
#warehouseArea .warehouse-back-home-btn,
.orders-page-shell .orders-back-home-btn,
.report-page-shell .report-back-home-btn {
  color: var(--u7-gold);
  border-color: var(--u7-bronze);
}

#warehouseArea .warehouse-back-home-btn:hover,
.orders-page-shell .orders-back-home-btn:hover,
.report-page-shell .report-back-home-btn:hover {
  background: var(--u7-gold-soft);
}

#warehouseArea .warehouse-filter-card,
#warehouseArea .warehouse-tile,
#warehouseArea .wh-controls-panel,
.orders-page-shell .orders-filter-panel,
.orders-list > .card,
.report-page-shell .report-controls.card,
.report-page-shell .report-table,
.report-page-shell .report-metric-card {
  border-color: var(--u7-gold-border) !important;
}

#warehouseArea #warehouseLoadSample,
#warehouseArea .wh-action-in,
.orders-page-shell .orders-load-btn,
.orders-list > .card .secondary-btn,
.report-page-shell .report-search-btn,
.report-page-shell .report-export-actions button {
  border-color: var(--u7-gold) !important;
  background: linear-gradient(180deg, #d9c17e 0%, #b59145 55%, #806126 100%) !important;
  color: #1d170c !important;
  box-shadow: 0 6px 16px rgba(128, 97, 38, 0.22) !important;
}

#warehouseArea #warehouseLoadSample:hover,
.orders-page-shell .orders-load-btn:hover,
.report-page-shell .report-search-btn:hover,
.report-page-shell .report-export-actions button:hover:not(:disabled) {
  box-shadow: 0 8px 21px rgba(128, 97, 38, 0.3) !important;
}

#warehouseArea .warehouse-tile.highlight {
  background: linear-gradient(160deg, #332b18, #15130d);
  border-color: var(--u7-gold-border);
  border-left-color: var(--u7-gold);
}
#warehouseArea .warehouse-tile.highlight .tile-value {
  color: var(--u7-gold-light);
}

.orders-list > .card > div:first-child > div:first-child,
.report-page-shell .report-status-badge,
.report-page-shell .report-summary-line {
  color: var(--u7-gold-light) !important;
}

.report-page-shell .report-status-badge,
.orders-list > .card > div:first-child > div:nth-child(3) {
  background: var(--u7-gold-soft) !important;
  border-color: var(--u7-gold-border) !important;
}

/* Neutral charcoal backgrounds; preserve muted-gold controls and typography */
#warehouseArea,
.orders-page-shell,
.report-page-shell {
  background:
    radial-gradient(circle at top right, rgba(201, 168, 92, 0.07), transparent 28rem),
    linear-gradient(180deg, #151a21 0%, #0c1016 100%) !important;
}

#warehouseArea .warehouse-filter-card,
#warehouseArea .warehouse-tile,
#warehouseArea .wh-controls-panel,
.orders-page-shell .orders-filter-panel,
.orders-list > .card,
.report-page-shell .report-controls.card,
.report-page-shell .report-table,
.report-page-shell .report-metric-card,
.report-page-shell .report-summary-line,
.report-page-shell .report-empty {
  background: linear-gradient(145deg, #1b212a 0%, #11161d 100%) !important;
}

#warehouseArea #warehouseLocationFilter,
#warehouseArea .wh-select,
.orders-page-shell .orders-filter-panel select,
.orders-page-shell .orders-filter-panel input[type='date'],
.report-page-shell .report-field select,
.report-page-shell .report-field input {
  background: #0e1319 !important;
}

#warehouseArea .warehouse-tile.highlight {
  background: linear-gradient(145deg, #28251d 0%, #15171a 100%) !important;
}

.report-page-shell .report-data-table th {
  background: #171d25 !important;
}
.report-page-shell .report-data-table td {
  background: #11171e !important;
}
.report-page-shell .report-data-table tbody tr:nth-child(even) td {
  background: #171d24 !important;
}
.report-page-shell .report-data-table tbody tr:hover td {
  background: #24231d !important;
}

/* Professional charcoal and muted-gold Inbound workflow */
#inbound-flow {
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 18px;
  box-sizing: border-box;
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(201, 168, 92, 0.07), transparent 28rem),
    linear-gradient(180deg, #151a21, #0c1016);
  border: 1px solid rgba(201, 168, 92, 0.28);
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.28);
  color: #f8fafc;
}
.inbound-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 15px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(201, 168, 92, 0.3);
}
.inbound-page-header > div {
  text-align: center;
}
.inbound-page-header span {
  color: #c9a85c;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.inbound-page-header h2 {
  margin: 3px 0;
  color: #c9a85c;
  font-size: 24px;
}
.inbound-page-header p {
  margin: 0;
  color: #aeb5bf;
  font-size: 12px;
}
#inbound-flow .inbound-back-home-btn {
  width: auto !important;
  max-width: max-content !important;
  min-width: 0;
  height: 36px;
  min-height: 36px;
  padding: 5px 10px !important;
  border: 1px solid #806126;
  border-radius: 8px;
  background: transparent;
  color: #c9a85c;
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  flex: 0 0 auto !important;
}
#inbound-flow .inbound-back-home-btn:hover {
  background: rgba(201, 168, 92, 0.1);
  transform: translateY(-1px);
}
.inbound-header-spacer {
  width: 72px;
}
#inbound-flow #in-step-1,
#inbound-flow #in-step-2,
#inbound-flow #in-step-3 {
  background: linear-gradient(145deg, #1b212a, #11161d);
  color: #f8fafc;
  border: 1px solid rgba(201, 168, 92, 0.3);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3);
}
#inbound-flow #in-step-1 h3,
#inbound-flow #in-step-2 h3,
#inbound-flow #in-step-3 h3 {
  color: #ddc786;
}
#inbound-flow #in-step-1 label,
#inbound-flow #in-step-2 label,
#inbound-flow #in-step-3 label {
  color: #d9c98f;
}
#inbound-flow #in-step-1 input,
#inbound-flow #in-step-1 select,
#inbound-flow #in-step-2 input,
#inbound-flow #in-step-2 select,
#inbound-flow #in-step-3 input,
#inbound-flow #in-step-3 select {
  background: #0e1319;
  color: #f8fafc;
  border-color: rgba(201, 168, 92, 0.4);
  box-shadow: none;
}
#inbound-flow input:focus,
#inbound-flow select:focus {
  outline: 2px solid rgba(201, 168, 92, 0.2);
  border-color: #c9a85c !important;
}
#inbound-flow .primary-btn,
#inbound-flow .success-btn:not(#inSessionFinish),
#inbound-flow #inSessionFinish {
  background: linear-gradient(180deg, #d9c17e, #b59145 55%, #806126) !important;
  border: 1px solid #c9a85c !important;
  color: #1d170c !important;
  font-weight: 900;
  box-shadow: 0 6px 16px rgba(128, 97, 38, 0.22);
}
#inbound-flow .info-card,
#inbound-flow .session-panel {
  background: linear-gradient(145deg, #171d25, #10151b);
  border: 1px solid rgba(201, 168, 92, 0.28);
  color: #f8fafc;
}
#inbound-flow .info-card .info-row,
#inbound-flow .info-card .info-row strong,
#inbound-flow #inSessionList .session-item,
#inbound-flow #inSessionTotal {
  color: #e8e9e5;
}
#inbound-flow #inProgressCircle {
  border: 6px solid #806126;
  color: #ddc786;
  box-shadow: 0 0 18px rgba(201, 168, 92, 0.15);
}
#inbound-flow .camera-btn {
  background: #24231d;
  color: #ddc786;
  border: 1px solid #806126;
}
@media (max-width: 640px) {
  #inbound-flow {
    padding: 12px;
    border-radius: 16px;
    overflow-x: hidden;
  }
  .inbound-page-header {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .inbound-page-header > div {
    order: 2;
    width: 100%;
    text-align: left;
  }
  .inbound-header-spacer {
    display: none;
  }
  #in-step-3 {
    padding: 14px 12px;
    margin: 10px auto;
  }
  #in-step-3 > div[style*='align-items: flex-start'] {
    flex-direction: column;
    width: 100%;
  }
  #in-step-3 .session-panel {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 10px;
  }
  #inbound-flow #inProgressCircle {
    width: 112px;
    height: 112px;
    min-width: 112px;
    flex: 0 0 112px;
    border-width: 4px;
    font-size: 42px;
  }
  #in-step-3 .session-panel-body {
    max-width: 100%;
  }
}

@media (max-width: 380px) {
  #inbound-flow #inProgressCircle {
    width: 92px;
    height: 92px;
    min-width: 92px;
    flex-basis: 92px;
    font-size: 34px;
  }
}

/* Professional charcoal and muted-gold Outbound workflow */
#outbound-flow .outbound-source-mirror {
  display: none;
}

#outbound-flow {
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 18px;
  box-sizing: border-box;
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(201, 168, 92, 0.07), transparent 28rem),
    linear-gradient(180deg, #151a21, #0c1016);
  border: 1px solid rgba(201, 168, 92, 0.28);
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.28);
  color: #f8fafc;
}
.outbound-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 15px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(201, 168, 92, 0.3);
}
.outbound-page-header > div {
  text-align: center;
}
.outbound-page-header span {
  color: #c9a85c;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.outbound-page-header h2 {
  margin: 3px 0;
  color: #c9a85c;
  font-size: 24px;
}
.outbound-page-header p {
  margin: 0;
  color: #aeb5bf;
  font-size: 12px;
}
#outbound-flow .outbound-back-home-btn {
  width: auto !important;
  max-width: max-content !important;
  min-width: 0;
  height: 36px;
  min-height: 36px;
  padding: 5px 10px !important;
  border: 1px solid #806126;
  border-radius: 8px;
  background: transparent;
  color: #c9a85c;
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  flex: 0 0 auto !important;
}
#outbound-flow .outbound-back-home-btn:hover {
  background: rgba(201, 168, 92, 0.1);
  transform: translateY(-1px);
}
.outbound-header-spacer {
  width: 72px;
}
#outbound-flow #out-step-1 > .card,
#outbound-flow #out-step-2 > .card,
#outbound-flow #out-step-3 {
  background: linear-gradient(145deg, #1b212a, #11161d) !important;
  color: #f8fafc !important;
  border: 1px solid rgba(201, 168, 92, 0.3) !important;
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3) !important;
}
#outbound-flow #out-step-3 {
  width: 100%;
  max-width: 920px;
  margin: 18px auto;
  padding: 22px 24px;
  box-sizing: border-box;
}
#outbound-flow #out-step-1 h3,
#outbound-flow #out-step-2 h3,
#outbound-flow #out-step-3 h3 {
  color: #ddc786;
}
#outbound-flow label {
  color: #d9c98f !important;
  font-weight: 700;
}
#outbound-flow input,
#outbound-flow select,
#outbound-flow #destinationList {
  background: #0e1319 !important;
  color: #f8fafc !important;
  border: 1px solid rgba(201, 168, 92, 0.4) !important;
  box-shadow: none !important;
}
#outbound-flow #destinationList .outbound-customer-row {
  border-bottom-color: rgba(201, 168, 92, 0.18) !important;
}
#outbound-flow #destinationList .outbound-customer-name {
  color: #f8fafc !important;
}
#outbound-flow #destinationList .outbound-customer-meta {
  color: #aeb5bf !important;
}
#outbound-flow #destinationList .empty {
  color: #aeb5bf !important;
}
#outbound-flow input,
#outbound-flow select {
  min-height: 42px;
  border-radius: 9px;
  padding: 9px 11px;
  box-sizing: border-box;
}
#outbound-flow input:focus,
#outbound-flow select:focus {
  outline: 2px solid rgba(201, 168, 92, 0.2);
  border-color: #c9a85c !important;
}
#outbound-flow .primary-btn,
#outbound-flow .success-btn {
  background: linear-gradient(180deg, #d9c17e, #b59145 55%, #806126) !important;
  border: 1px solid #c9a85c !important;
  color: #1d170c !important;
  font-weight: 900;
  box-shadow: 0 6px 16px rgba(128, 97, 38, 0.22);
}
#outbound-flow .info-card,
#outbound-flow .session-panel {
  background: linear-gradient(145deg, #171d25, #10151b) !important;
  border: 1px solid rgba(201, 168, 92, 0.28) !important;
  color: #f8fafc !important;
}
#outbound-flow .info-card .info-row,
#outbound-flow .info-card .info-row strong,
#outbound-flow #outSessionList,
#outbound-flow #outSessionTotal {
  color: #e8e9e5 !important;
}
#outbound-flow #outProgressCircle {
  border: 6px solid #806126;
  color: #ddc786;
  box-shadow: 0 0 18px rgba(201, 168, 92, 0.15);
  background: linear-gradient(145deg, #171d25, #090c10);
}
#outbound-flow .camera-btn {
  background: #24231d;
  color: #ddc786;
  border: 1px solid #806126;
}
@media (max-width: 640px) {
  #outbound-flow {
    padding: 12px;
    border-radius: 16px;
    overflow-x: hidden;
  }
  .outbound-page-header {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .outbound-page-header > div {
    order: 2;
    width: 100%;
    text-align: left;
  }
  .outbound-header-spacer {
    display: none;
  }
  #outbound-flow #out-step-1 > .card > div,
  #outbound-flow #out-step-2 > .card {
    flex-direction: column;
  }
  #outbound-flow #out-step-1 > .card > div > div,
  #outbound-flow #out-step-2 > .card > div {
    width: 100% !important;
  }
  #outbound-flow #out-step-3 {
    padding: 16px 14px;
  }
}

/* Professional language selector */
#langSelect {
  width: 104px;
  max-width: 20vw;
  min-height: 40px;
  padding: 8px 36px 8px 12px;
  border: 1px solid rgba(201, 168, 92, 0.55) !important;
  border-radius: 10px !important;
  background-color: #151a21 !important;
  color: #f4ead0 !important;
  font-family: Inter, 'Segoe UI', Tahoma, Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  outline: none;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.24);
  text-overflow: ellipsis;
}

#langSelect:hover,
#langSelect:focus {
  border-color: #c9a85c !important;
  box-shadow:
    0 0 0 3px rgba(201, 168, 92, 0.14),
    0 6px 18px rgba(0, 0, 0, 0.26);
}

#langSelect option {
  background: #151a21;
  color: #f8fafc;
  font-size: 14px;
  font-weight: 600;
  padding: 10px;
}

/* Match topbar utility controls to the language selector */
#subscriptionBtn,
#topSearchBtn,
#offlineStatusBtn,
#globalSearch {
  min-height: 40px;
  border: 1px solid rgba(201, 168, 92, 0.55) !important;
  border-radius: 10px !important;
  background: #151a21 !important;
  color: #f4ead0 !important;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.24);
  box-sizing: border-box;
}

#subscriptionBtn,
#topSearchBtn,
#offlineStatusBtn {
  padding: 8px 12px !important;
}

#globalSearch {
  width: 230px;
  min-width: 150px !important;
  padding: 8px 11px !important;
  outline: none;
}

#globalSearch::placeholder {
  color: #9da3aa;
  opacity: 1;
}

#subscriptionBtn:hover,
#subscriptionBtn:focus,
#topSearchBtn:hover,
#topSearchBtn:focus,
#offlineStatusBtn:hover,
#offlineStatusBtn:focus,
#globalSearch:hover,
#globalSearch:focus {
  border-color: #c9a85c !important;
  background: #1b212a !important;
  box-shadow:
    0 0 0 3px rgba(201, 168, 92, 0.14),
    0 6px 18px rgba(0, 0, 0, 0.26);
}

@media (max-width: 900px) {
  #globalSearch {
    width: 170px;
  }
}

html[dir='rtl'] #langSelect {
  padding: 8px 12px 8px 36px;
  text-align: right;
}

@media (max-width: 640px) {
  #langSelect {
    width: 92px;
    max-width: 30vw;
    min-height: 38px;
    padding-inline: 10px 30px;
    font-size: 13px;
  }
}

.report-table {
  padding: 16px;
  border-radius: 18px;
  background: linear-gradient(145deg, #171b12, #0a0d08);
  color: #f8fafc;
  border: 1px solid rgba(250, 204, 21, 0.3);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
}

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

.report-table-head h4 {
  margin: 0;
  color: #facc15;
  font-size: 1.05rem;
}

.report-empty {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #10140c;
  border: 1px dashed rgba(250, 204, 21, 0.4);
  color: #fde68a;
}

.report-empty span {
  color: #aeb5a7;
  font-size: 0.9rem;
}

.report-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.report-data-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
}

.report-data-table th,
.report-data-table td {
  padding: 10px 9px;
  border-bottom: 1px solid rgba(250, 204, 21, 0.16);
  text-align: left;
  vertical-align: top;
}

.report-data-table th {
  color: #facc15;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #11150d;
}

.report-data-table td {
  color: #f1f5f9;
  background: #0b0e08;
  overflow-wrap: anywhere;
}

.report-data-table tbody tr:nth-child(even) td {
  background: #12160e;
}
.report-data-table tbody tr:hover td {
  background: rgba(250, 204, 21, 0.09);
}

#reportContent .loading,
#reportContent .error {
  padding: 18px;
  border: 1px solid rgba(250, 204, 21, 0.32);
  border-radius: 14px;
  background: #0d110a;
  color: #fde68a;
}

.report-data-table .numeric {
  text-align: right;
}

@media (max-width: 900px) {
  .report-page-shell {
    padding: 14px;
    border-radius: 18px;
  }

  .report-page-header {
    min-height: 88px;
    align-items: flex-start;
  }

  .report-page-header > div {
    padding-top: 42px;
  }

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

  .report-search-btn {
    width: 100%;
  }

  .report-export-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .report-page-shell {
    width: 100%;
    max-width: 100%;
    padding: 12px;
    margin: 0;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .report-controls.card,
  .report-table {
    padding: 14px;
    border-radius: 16px;
  }

  .report-filter-grid,
  .report-export-actions {
    width: 100%;
    min-width: 0;
    grid-template-columns: 1fr;
  }

  .report-filter-grid > *,
  .report-export-actions > * {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  .report-page-shell .report-search-btn,
  .report-page-shell .report-export-actions button,
  .report-page-shell #reportWhatsapp {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding-inline: 10px !important;
    box-sizing: border-box;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .report-table-scroll {
    overflow: visible;
  }

  .report-data-table {
    min-width: 0;
  }

  .report-data-table thead {
    display: none;
  }

  .report-data-table,
  .report-data-table tbody,
  .report-data-table tr,
  .report-data-table td {
    display: block;
    width: 100%;
  }

  .report-data-table tr {
    margin-bottom: 12px;
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  }

  .report-data-table td {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid #f1f5f9;
    text-align: right;
  }

  .report-data-table td:last-child {
    border-bottom: 0;
  }

  .report-data-table td::before {
    content: attr(data-label);
    flex: 0 0 42%;
    color: #64748b;
    font-weight: 900;
    text-align: left;
  }

  .report-data-table .numeric {
    text-align: right;
  }
}

/* Responsive golden History page */
.history-page-shell {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 18px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 14% 0%, rgba(250, 204, 21, 0.16), transparent 24rem),
    radial-gradient(circle at 88% 16%, rgba(180, 83, 9, 0.18), transparent 20rem),
    linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.92));
  border: 1px solid rgba(250, 204, 21, 0.18);
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.3);
}

.history-page-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
}

.history-page-shell .history-back-home-btn {
  width: auto !important;
  max-width: max-content !important;
  min-width: 0;
  height: 36px;
  min-height: 36px;
  padding: 5px 10px !important;
  border: 1px solid #c9a85c;
  border-radius: 8px;
  background: transparent;
  color: #c9a85c;
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  flex: 0 0 auto !important;
}
.history-page-shell .history-back-home-btn:hover {
  background: rgba(201, 168, 92, 0.1);
  transform: translateY(-1px);
}

.history-kicker {
  color: #facc15;
  font-size: 0.88rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.history-page-header h2 {
  margin: 4px 0 6px;
  color: #f8fafc;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
}

.history-page-header p {
  max-width: 620px;
  margin: 0;
  color: #cbd5e1;
  font-size: 0.98rem;
}

.history-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
  gap: 10px;
  width: 100%;
  min-width: 0;
}

.history-load-btn {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 9px 18px;
  border: 1px solid #c9a85c;
  border-radius: 9px;
  background: linear-gradient(180deg, #d9c17e, #b59145 55%, #806126);
  color: #1d170c;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(128, 97, 38, 0.22);
  white-space: nowrap;
}
.history-load-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 8px 21px rgba(128, 97, 38, 0.3);
}
.history-load-btn:disabled {
  opacity: 0.7;
  cursor: wait;
}

.history-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  color: #fde68a;
  font-size: 0.84rem;
  font-weight: 900;
}

.history-field select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 42px;
  padding: 9px 10px;
  border: 1px solid rgba(250, 204, 21, 0.42);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.9);
  color: #f8fafc;
  font: inherit;
}

.history-field select:focus {
  outline: 2px solid rgba(250, 204, 21, 0.35);
  border-color: #facc15;
}

.history-actions .danger-btn {
  min-height: 42px;
  white-space: nowrap;
}

.history-table-card {
  padding: 16px;
  border-radius: 18px;
  background: rgba(248, 250, 252, 0.97);
  color: #0f172a;
  border: 1px solid rgba(250, 204, 21, 0.22);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.2);
}

.history-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.history-result-summary {
  margin: 0 0 10px;
  color: #78350f;
  font-size: 12px;
  font-weight: 900;
  text-align: right;
}

.history-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  margin: 0;
}

.history-table th,
.history-table td {
  padding: 10px 9px;
  border-bottom: 1px solid #e2e8f0;
  text-align: left;
  vertical-align: top;
}

.history-table th {
  color: #78350f;
  font-size: 0.76rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #fffbeb;
}

.history-table td {
  color: #0f172a;
  overflow-wrap: anywhere;
}

.history-table .numeric {
  text-align: right;
}

.history-table mark {
  display: inline-flex;
  max-width: 180px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #fef3c7;
  color: #78350f;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.history-type-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 950;
}

.history-type-in {
  background: #dcfce7;
  color: #166534;
}

.history-type-sale {
  background: #dcfce7;
  color: #166534;
}

.history-type-purchase {
  background: #dbeafe;
  color: #1e40af;
}

.history-type-out {
  background: #fee2e2;
  color: #991b1b;
}

.history-type-return {
  background: #fee2e2;
  color: #991b1b;
}

.history-type-transfer {
  background: #fef3c7;
  color: #92400e;
}

.history-type {
  background: #e2e8f0;
  color: #334155;
}

.history-table .history-location-badge.history-type-purchase {
  background: #dbeafe;
  color: #1e40af;
}
.history-table .history-location-badge.history-type-sale {
  background: #dcfce7;
  color: #166534;
}
.history-table .history-location-badge.history-type-transfer {
  background: #fef3c7;
  color: #92400e;
}
.history-table .history-location-badge.history-type-return {
  background: #fee2e2;
  color: #991b1b;
}
.history-balance-list {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.history-balance-item {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  white-space: nowrap;
}
.history-balance-item small {
  color: #64748b;
}
.history-balance-item strong {
  min-width: 2ch;
  color: #0f172a;
}

.history-table .show-barcode-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #111827;
  color: #facc15;
  font-weight: 900;
  cursor: pointer;
}

.history-products-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 6px 11px;
  border: 1px solid #d6a900;
  border-radius: 999px;
  background: #fff8d6;
  color: #713f12;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.history-products-button span {
  display: inline-grid;
  min-width: 22px;
  min-height: 22px;
  place-items: center;
  border-radius: 999px;
  background: #111827;
  color: #facc15;
  font-size: 12px;
}

.history-products-button:hover,
.history-products-button:focus-visible {
  background: #fef3c7;
  outline: 2px solid #d6a900;
  outline-offset: 2px;
}

.history-empty-row td {
  border-bottom: 0;
  width: 100%;
  max-width: 100%;
  padding: 0;
  white-space: normal;
  overflow: hidden;
}

.history-empty {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: clamp(14px, 4vw, 26px);
  border-radius: 16px;
  background: #fffbeb;
  color: #78350f;
  text-align: center;
  border: 1px dashed #f59e0b;
  overflow-wrap: anywhere;
  word-break: normal;
  box-sizing: border-box;
}

.history-empty strong {
  display: block;
  max-width: 100%;
  font-size: clamp(1rem, 4vw, 1.2rem);
  line-height: 1.25;
}

.history-empty span {
  display: block;
  max-width: 100%;
  color: #92400e;
  font-size: clamp(0.78rem, 3.2vw, 0.92rem);
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
}

.history-table:has(.history-empty-row) {
  min-width: 0;
  table-layout: fixed;
}

@media (max-width: 900px) {
  .history-page-shell {
    padding: 14px;
    border-radius: 18px;
  }

  .history-page-header {
    align-items: flex-start;
  }

  .history-page-header > div:first-of-type {
    order: 2;
    width: 100%;
  }

  .history-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
    width: 100%;
  }

  .history-field {
    min-width: 0;
  }
}

@media (max-width: 560px) {
  #view-history {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: visible;
  }

  .history-page-shell {
    width: 100%;
    max-width: 100%;
    padding: 12px;
    margin: 0;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .history-page-header,
  .history-actions,
  .history-field,
  .history-table-card,
  .history-table-scroll {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .history-actions {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .history-field select,
  .history-field input {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 46px;
    box-sizing: border-box;
    font-size: 16px;
  }

  .history-load-btn {
    width: 100%;
    min-width: 0;
    white-space: normal;
  }

  .history-actions .danger-btn {
    width: 100%;
  }

  .history-table-card {
    padding: 14px;
    border-radius: 16px;
  }

  .history-table-scroll {
    overflow: visible;
  }

  .history-table {
    min-width: 0;
  }

  .history-table thead {
    display: none;
  }

  .history-table,
  .history-table tbody,
  .history-table tr,
  .history-table td {
    display: block;
    width: 100%;
  }

  .history-table tr {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-bottom: 12px;
    padding: 12px;
    border: 1px solid #f1e3b0;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  }

  .history-table tr.history-empty-row {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .history-table td {
    display: grid;
    grid-template-columns: minmax(88px, 34%) minmax(0, 1fr);
    align-items: flex-start;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid #f8ecd0;
    text-align: right;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .history-table .history-cell-value {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    text-align: right;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .history-table td:last-child {
    border-bottom: 0;
  }

  .history-table td::before {
    content: attr(data-label);
    width: 100%;
    color: #92400e;
    font-weight: 950;
    text-align: left;
  }

  .history-type-badge,
  .history-table .show-barcode-box {
    max-width: 100%;
    white-space: normal;
    text-align: right;
    overflow-wrap: anywhere;
  }

  .history-table .show-barcode-box {
    min-height: 40px;
    padding: 8px 12px;
  }

  .history-empty-row td {
    display: block;
    padding: 0;
  }

  .history-empty {
    padding: 14px 10px;
    border-radius: 12px;
  }

  .history-empty-row td::before {
    content: none;
  }

  .history-table .numeric {
    text-align: right;
  }

  .history-table mark {
    justify-content: flex-end;
    max-width: 100%;
    text-align: right;
  }

  .history-result-summary {
    padding-inline: 2px;
    text-align: left;
  }
}
.camera-barcode-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.82);
  display: grid;
  place-items: center;
  padding: 10px;
}
.camera-barcode-card {
  position: relative;
  width: min(92vw, 360px);
  max-height: calc(100dvh - 20px);
  overflow: hidden;
  padding: 9px;
  border-radius: 14px;
  background: #111;
  color: #fff;
  border: 1px solid #d4af37;
}
.camera-barcode-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  margin-bottom: 6px;
  font-size: 13px;
}
.camera-barcode-head button {
  border: 1px solid #d4af37;
  border-radius: 8px;
  background: #d4af37;
  color: #17120a;
  padding: 6px 9px;
  font-weight: 700;
}
.camera-barcode-card video {
  display: block;
  width: 100%;
  height: min(42dvh, 270px);
  object-fit: cover;
  border-radius: 9px;
}
.camera-barcode-card p {
  text-align: center;
  margin: 6px 0 0;
  color: #f5df91;
  font-size: 11px;
  line-height: 1.25;
}
.camera-barcode-guide {
  position: absolute;
  left: 13%;
  right: 13%;
  top: 52%;
  height: 58px;
  transform: translateY(-50%);
  border: 2px solid #d4af37;
  border-radius: 9px;
  pointer-events: none;
}
.camera-scan-meter {
  --scan-progress: 0deg;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  background:
    radial-gradient(circle, #111 59%, transparent 61%),
    conic-gradient(#f6c915 var(--scan-progress), rgba(246, 201, 21, 0.16) 0);
  box-shadow: 0 0 14px rgba(246, 201, 21, 0.22);
}
.camera-scan-meter strong {
  color: #ffe36a;
  font-size: 15px;
  line-height: 1;
}
.camera-scan-meter span {
  color: #d8d5c3;
  font-size: 7px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 2px;
}
.camera-live-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 5px;
  margin: 0 0 6px;
  padding: 5px;
  border: 1px solid #5c4b18;
  border-radius: 9px;
  background: #191919;
}
.camera-control-group {
  display: grid;
  grid-template-columns: auto 28px minmax(42px, auto) 28px;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}
.camera-control-group > span {
  font-size: 8px;
  color: #d8d5c3;
  text-transform: uppercase;
}
.camera-live-controls button {
  min-width: 28px;
  min-height: 28px;
  padding: 0 5px;
  border: 1px solid #d4af37;
  border-radius: 6px;
  background: #2a2413;
  color: #ffe36a;
  font-weight: 800;
}
.camera-live-controls output {
  min-width: 42px;
  text-align: center;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
}
.camera-control-toggle {
  white-space: nowrap;
}
@media (max-width: 380px) {
  .camera-live-controls { gap: 3px; padding: 4px; }
  .camera-control-group { grid-template-columns: auto 28px minmax(38px, auto) 28px; }
  .camera-live-controls button { min-width: 27px; padding-inline: 4px; }
}
.camera-video-stage {
  position: relative;
}
.camera-video-stage .camera-barcode-guide {
  top: 43%;
}
.camera-capture-button {
  position: absolute;
  left: 50%;
  bottom: 14px;
  z-index: 2;
  width: 76px;
  height: 76px;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  padding: 8px;
  border: 2px solid #ffe36a;
  border-radius: 50%;
  background: rgba(17, 17, 17, 0.88);
  color: #ffe36a;
  box-shadow:
    0 0 0 5px rgba(246, 201, 21, 0.2),
    0 5px 18px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  touch-action: manipulation;
}
.camera-capture-button svg {
  width: 42px;
  height: 42px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.camera-capture-button span {
  position: absolute;
  bottom: 5px;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}
.camera-capture-button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  box-shadow: 0 0 0 4px rgba(246, 201, 21, 0.08);
}
.camera-capture-button:not(:disabled):active {
  transform: translateX(-50%) scale(0.94);
}

/* Compact, zoom-safe experience for all small touch phones. */
@media (max-width: 480px) {
  .main-content,
  .content,
  .view,
  [id^='view-'] {
    max-width: 100%;
    min-width: 0;
  }
  .card,
  .dashboard-card,
  .warehouse-tile,
  .shop-card,
  .report-controls.card,
  .report-table,
  .history-table-card,
  .scanner-panel {
    max-width: 100%;
    min-width: 0;
    padding: 10px !important;
    border-radius: 12px !important;
    box-sizing: border-box;
  }
  .card:focus-within,
  .dashboard-card:focus-within,
  .warehouse-tile:focus-within,
  .shop-card:focus-within {
    width: auto;
    max-width: 100%;
    transform: none !important;
  }
  input,
  select,
  textarea {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    font-size: 16px !important;
    transform: none !important;
    zoom: 1;
  }
  input:focus,
  select:focus,
  textarea:focus {
    font-size: 16px !important;
    max-width: 100% !important;
  }
  input[type='checkbox'],
  input[type='radio'],
  input[type='file'],
  input[type='range'],
  input[type='color'] {
    width: auto !important;
    max-width: none !important;
  }
  .camera-barcode-modal {
    align-items: center;
    padding: 8px;
  }
  .camera-barcode-card {
    width: min(94vw, 340px);
    padding: 9px;
    border-radius: 12px;
  }
  .camera-barcode-head {
    gap: 7px;
    margin-bottom: 7px;
    font-size: 13px;
  }
  .camera-barcode-head button {
    min-height: 36px;
    padding: 6px 10px;
  }
  .camera-barcode-card video {
    width: 100%;
    height: min(46vh, 310px);
    max-height: 310px;
    object-fit: cover;
  }
  .camera-barcode-guide {
    left: 12%;
    right: 12%;
    top: 52%;
    height: 58px;
    border-width: 2px;
    box-shadow:
      0 0 0 999px rgba(0, 0, 0, 0.12),
      0 0 16px rgba(212, 175, 55, 0.42);
  }
  .camera-scan-meter {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
  }
  .camera-scan-meter strong {
    font-size: 15px;
  }
  .camera-barcode-card p {
    margin-top: 7px;
    font-size: 11px;
  }
  #taskProcessModal .task-process-card {
    width: 100%;
    margin: 4px auto;
    padding: 10px;
    border-radius: 12px;
  }
  #taskProcessModal .task-process-progress-circle {
    flex-basis: 62px;
    width: 62px;
    height: 62px;
    border-width: 4px;
    font-size: 14px;
  }
  #taskProcessModal .task-process-item {
    padding: 8px;
  }
}
.shop-shelf-products {
  list-style: none;
  margin: 9px 0 0;
  padding: 8px 0 0;
  border-top: 1px solid rgba(246, 201, 21, 0.2);
}
.shop-shelf-products li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  font-size: 12px;
}
.shop-shelf-products li span {
  color: #d8d5c3;
}
.shop-shelf-products li strong {
  color: #ffe36a;
}
.shop-shelf-empty {
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid rgba(246, 201, 21, 0.14);
  font-size: 11px;
  color: #8e9184;
}
.inbound-admin-price-note {
  padding: 12px 14px;
  border: 1px solid rgba(201, 168, 92, 0.35);
  border-radius: 10px;
  background: rgba(201, 168, 92, 0.08);
  color: #ddc786;
  font-size: 14px;
  line-height: 1.45;
}
.shop-work-grid.shop-work-grid-single {
  grid-template-columns: minmax(0, 1fr);
}
.company-settings-btn {
  width: 100%;
  margin-bottom: 10px;
  border-color: #806126 !important;
  color: #ddc786 !important;
}
.company-settings-modal {
  position: fixed;
  inset: 0;
  z-index: 12000;
  background: rgba(0, 0, 0, 0.78);
  display: grid;
  place-items: center;
  padding: 16px;
}
.company-settings-modal.hidden {
  display: none;
}
.company-settings-card {
  width: min(94vw, 520px);
  max-height: 92vh;
  overflow: auto;
  padding: 22px;
  border: 1px solid #806126;
  border-radius: 18px;
  background: linear-gradient(145deg, #171d25, #0e1319);
  color: #f8fafc;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.55);
}
.company-settings-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.company-settings-head span {
  color: #c9a85c;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.company-settings-head h2 {
  margin: 4px 0 14px;
}
.company-settings-head > button {
  border: 0;
  background: transparent;
  color: #ddc786;
  font-size: 30px;
}
.company-settings-card > label {
  display: block;
  margin-top: 12px;
  color: #ddc786;
  font-weight: 700;
}
.company-settings-card input,
.company-settings-card textarea {
  width: 100%;
  margin-top: 6px;
  padding: 11px;
  border: 1px solid rgba(201, 168, 92, 0.4);
  border-radius: 9px;
  background: #0e1319;
  color: #fff;
}
.company-logo-preview {
  width: 110px;
  height: 110px;
  margin: 4px auto 12px;
  border: 2px solid #806126;
  border-radius: 50%;
  overflow: hidden;
  background: #111;
  display: grid;
  place-items: center;
}
.company-logo-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.company-logo-preview span {
  font-size: 30px;
  color: #ddc786;
}
.company-settings-card #companyLogoChoose {
  display: block;
  margin: 0 auto;
}
.company-settings-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}
.company-report-brand {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  margin-bottom: 14px;
  border: 1px solid rgba(201, 168, 92, 0.3);
  border-radius: 12px;
  background: #11171e;
}
.company-report-brand img {
  width: 72px;
  height: 72px;
  object-fit: contain;
}
.company-report-brand h1 {
  margin: 0 0 4px;
  color: #ddc786;
  font-size: 24px;
}
.company-report-brand p {
  margin: 2px 0;
  color: #e8e9e5;
}
@media (max-width: 520px) {
  .company-report-brand img {
    width: 54px;
    height: 54px;
  }
  .company-report-brand h1 {
    font-size: 19px;
  }
}

/* Keep the report workspace inside the available main-column width (sidebar included). */
.company-brand-tools {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 18px;
  align-items: start;
}
.company-shop-qr {
  text-align: center;
  padding: 10px;
  border: 1px solid rgba(201, 168, 92, 0.35);
  border-radius: 12px;
  background: #fff;
  color: #17202b;
}
.company-shop-qr > img {
  display: block;
  width: 132px;
  height: 132px;
  margin: auto;
}
.company-shop-qr strong,
.company-shop-qr small {
  display: block;
}
.company-shop-qr small {
  margin: 3px 0 8px;
  color: #64748b;
}
.company-shop-qr > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
}
.company-shop-qr button {
  min-height: 30px;
  padding: 5px 7px;
  border: 1px solid #806126;
  border-radius: 6px;
  background: #171d25;
  color: #f4d675;
  font-size: 11px;
}
@media (max-width: 480px) {
  .company-brand-tools {
    grid-template-columns: 1fr;
  }
  .company-shop-qr {
    max-width: 270px;
    margin: auto;
  }
}

#view-report,
.report-page-shell,
#reportArea,
.report-controls,
.report-filter-grid,
.report-export-actions,
.company-report-brand {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.report-page-shell {
  overflow: hidden;
}
.report-filter-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
}
.report-filter-grid .report-search-btn {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.report-export-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  width: 100%;
}
.report-export-actions button {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding-inline: 10px !important;
  box-sizing: border-box;
  white-space: normal;
}
.report-table-scroll {
  max-width: 100%;
  overflow-x: auto;
}
@media (max-width: 560px) {
  #view-report {
    padding-inline: 0;
  }
  .report-page-header {
    padding-top: 38px;
  }
  .report-page-header > div {
    padding-top: 0;
  }
  .report-controls.card {
    padding: 10px;
  }
  .company-report-brand {
    align-items: flex-start;
    padding: 10px;
    overflow-wrap: anywhere;
  }
}
/* Process Task: scoped dark-gold workflow styling */
#taskProcessModal {
  background: rgba(2, 6, 23, 0.82);
  padding: 16px;
  overflow-y: auto;
}
#taskProcessModal .task-process-card {
  width: min(680px, 100%);
  max-width: 680px;
  margin: 24px auto;
  padding: 18px;
  color: #f8fafc;
  background: linear-gradient(145deg, #111827, #090d16);
  border: 1px solid rgba(212, 175, 55, 0.58);
  border-radius: 18px;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(212, 175, 55, 0.08);
}
#taskProcessModal .task-process-scan-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}
#taskProcessModal .task-process-scan-field {
  display: block;
  min-width: 0;
  font-size: 13px;
}
#taskProcessModal .task-process-scan-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 44px;
  gap: 6px;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  margin-top: 5px;
}
#taskProcessModal .task-process-scan-control input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 8px;
  box-sizing: border-box;
}
#taskProcessModal .task-process-scan-control .task-scan-submit {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid #d4af37;
  border-radius: 8px;
  background: #d4af37;
  color: #17120a;
  font-weight: 700;
}
#taskProcessModal .task-process-scan-control .camera-btn {
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
}
#taskProcessModal label,
#taskProcessModal #taskProcessMessage,
#taskProcessModal .task-process-position,
#taskProcessModal .task-process-item-meta,
#taskProcessModal .task-process-item-detail {
  color: #cbd5e1 !important;
}
#taskProcessModal input {
  min-width: 0;
  color: #f8fafc;
  background: #070b13;
  border: 1px solid rgba(212, 175, 55, 0.52) !important;
  border-radius: 9px !important;
  outline: none;
}
#taskProcessModal input:focus {
  border-color: #f4d675 !important;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18);
}
#taskProcessModal .task-process-expiry,
#taskProcessModal .task-process-current {
  margin-top: 10px;
  padding: 11px;
  color: #f8fafc;
  background: rgba(212, 175, 55, 0.09);
  border: 1px solid rgba(212, 175, 55, 0.48);
  border-radius: 10px;
}
#taskProcessModal #taskProcessMessage {
  margin-top: 10px;
  font-size: 13px;
  padding: 10px 12px;
  border: 1px solid rgba(212, 175, 55, 0.32);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.72);
}
#taskProcessModal #taskProcessMessage[data-tone='success'] {
  color: #6ee7a8 !important;
  font-weight: 700;
}
#taskProcessModal #taskProcessMessage[data-tone='error'] {
  color: #fca5a5 !important;
  font-weight: 700;
  border-color: rgba(248, 113, 113, 0.72);
  border-left: 4px solid #ef4444;
  background: linear-gradient(135deg, rgba(127, 29, 29, 0.3), rgba(15, 23, 42, 0.92));
  box-shadow:
    0 0 0 1px rgba(248, 113, 113, 0.12),
    0 8px 22px rgba(0, 0, 0, 0.24);
}
#taskProcessModal #taskPackageMessage[data-tone='error'] {
  margin-top: 10px;
  padding: 10px 12px;
  color: #fca5a5 !important;
  font-weight: 700;
  border: 1px solid rgba(248, 113, 113, 0.72);
  border-left: 4px solid #ef4444;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(127, 29, 29, 0.3), rgba(15, 23, 42, 0.92));
  box-shadow:
    0 0 0 1px rgba(248, 113, 113, 0.12),
    0 8px 22px rgba(0, 0, 0, 0.24);
}
#taskProcessModal .task-process-progress {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin: 2px auto 18px;
  text-align: center;
}
#taskProcessModal .task-process-progress-circle {
  flex: 0 0 112px;
  width: 112px;
  height: 112px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff7d1;
  background: radial-gradient(circle, #2c2410 0%, #111827 68%);
  border: 7px solid #d4af37;
  border-radius: 50%;
  box-shadow:
    0 0 0 5px rgba(212, 175, 55, 0.16),
    0 0 30px rgba(212, 175, 55, 0.34);
  font-weight: 900;
  line-height: 1;
}
#taskProcessModal .task-process-progress-circle strong {
  color: #fff7d1;
  font-size: 24px;
  line-height: 1;
}
#taskProcessModal .task-process-progress-circle span {
  margin-top: 7px;
  color: #ddc786;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
#taskProcessModal .task-process-progress-context {
  max-width: 100%;
  color: #e5e7eb;
  line-height: 1.45;
  text-align: center;
}
#taskProcessModal .task-process-current {
  margin: 0 0 10px;
}
#taskProcessModal .task-process-list {
  max-height: 30vh;
  overflow: auto;
  padding-right: 2px;
}
#taskProcessModal .task-process-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 7px;
  padding: 10px;
  background: #0d1420;
  border: 1px solid #263244;
  border-radius: 9px;
}
#taskProcessModal .task-process-item.active {
  background: rgba(212, 175, 55, 0.12);
  border-color: #d4af37;
}
#taskProcessModal .task-process-item-name {
  color: #f8fafc;
  font-weight: 700;
}
#taskProcessModal .task-process-item-meta {
  font-size: 13px;
}
#taskProcessModal .task-process-item-detail,
#taskProcessModal .task-process-item-status,
#taskProcessModal .task-process-scan-log {
  font-size: 12px;
}
#taskProcessModal .task-process-item-status {
  color: #d4af37;
  text-align: right;
  white-space: nowrap;
}
#taskProcessModal .task-process-confirmed {
  color: #f4d675;
  font-weight: 800;
}
#taskProcessModal .task-process-scanned {
  margin-top: 10px;
}
#taskProcessModal .task-process-scanned {
  max-height: 180px;
  overflow: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
}
#taskProcessModal .task-process-scan-log {
  padding: 5px 0;
  color: #cbd5e1;
  border-bottom: 1px solid #263244;
}
#taskProcessModal .task-process-position {
  margin-top: 9px;
}
#taskProcessModal .task-process-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 12px;
}
#taskProcessModal button {
  min-height: 40px;
  color: #171108 !important;
  background: linear-gradient(135deg, #f4d675, #d4af37) !important;
  border: 1px solid #f8df8a !important;
  border-radius: 9px !important;
  font-weight: 800;
  box-shadow: 0 5px 14px rgba(212, 175, 55, 0.18);
}
#taskProcessModal button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
@media (max-width: 640px) {
  #taskProcessModal {
    padding: 8px;
  }
  #taskProcessModal .task-process-card {
    margin: 8px auto;
    padding: 13px;
    border-radius: 14px;
  }
  #taskProcessModal .task-process-scan-grid {
    grid-template-columns: 1fr;
  }
  #taskProcessModal .task-process-progress {
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
  }
  #taskProcessModal .task-process-progress-circle {
    flex-basis: 88px;
    width: 88px;
    height: 88px;
    border-width: 5px;
  }
  #taskProcessModal .task-process-progress-circle strong {
    font-size: 20px;
  }
  #taskProcessModal .task-process-actions button {
    flex: 1 1 calc(50% - 8px);
  }
}

/* Compact mobile navigation: keep the page stationary and logout reachable. */
@media (max-width: 900px) {
  body.sidebar-open {
    overflow: hidden;
  }

  .sidebar {
    inset: 0 auto 0 0;
    width: min(72vw, 240px);
    min-width: 0;
    height: 100dvh;
    max-height: 100dvh;
    padding: 58px 10px max(10px, env(safe-area-inset-bottom));
    gap: 3px;
    border-radius: 0 16px 16px 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .sidebar .avatar {
    flex: 0 0 auto;
    margin-top: 0;
  }

  .sidebar .avatar img,
  .sidebar .avatar-fallback {
    width: 48px;
    height: 48px;
  }

  .sidebar #tenantDisplay {
    flex: 0 0 auto;
    min-width: 0;
    margin: 4px 0 6px;
    padding: 6px;
  }

  .sidebar .nav-btn {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 6px 9px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.15;
  }

  .sidebar .nav-btn:hover,
  .sidebar .nav-btn.active {
    padding-left: 9px;
  }

  .sidebar .sidebar-actions {
    position: sticky;
    bottom: 0;
    flex: 0 0 auto;
    margin-top: auto !important;
    padding: 7px 0 0 !important;
    background: linear-gradient(180deg, transparent, rgba(10, 20, 34, 0.98) 18%);
  }

  .sidebar .sidebar-actions .company-settings-btn,
  .sidebar .sidebar-logout {
    min-height: 36px;
    font-size: 13px;
  }
}

@media (max-width: 380px) {
  .sidebar {
    width: min(76vw, 220px);
  }
}

/* Topbar alert hub */
.topbar-alert-hub {
  position: relative;
  flex: 0 0 auto;
}

.topbar-alert-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  padding: 0 !important;
  border: 1px solid rgba(201, 168, 92, 0.55) !important;
  background: #151a21 !important;
  font-size: 18px;
}

.topbar-alert-menu {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  z-index: 1300;
  display: grid;
  width: min(220px, calc(100vw - 20px));
  padding: 7px;
  border: 1px solid rgba(201, 168, 92, 0.55);
  border-radius: 12px;
  background: #101720;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.48);
}

.topbar-alert-menu.hidden {
  display: none;
}

.topbar-alert-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #f4ead0 !important;
  text-align: left;
}

.topbar-alert-option:hover {
  background: rgba(201, 168, 92, 0.14) !important;
}

.topbar-alert-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  min-height: 20px;
  padding: 2px 6px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  line-height: 1;
}

.topbar-alert-count:empty {
  display: none;
}

@media (max-width: 900px) {
  .topbar {
    justify-content: flex-start;
    gap: 6px;
    padding: 8px 10px;
    overflow: visible;
  }

  .topbar-left {
    flex: 0 0 auto;
    gap: 5px;
  }

  .topbar-left img {
    width: 34px;
    height: 34px !important;
    margin-right: 0 !important;
    object-fit: contain;
  }

  #sidebarToggleBtn.hamburger-btn {
    width: 36px;
    height: 36px;
    margin-left: 0;
    border-radius: 9px;
    font-size: 20px;
  }

  .topbar-right {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    gap: 4px;
  }

  #globalSearch {
    display: none;
  }

  #langSelect,
  #subscriptionBtn,
  #topSearchBtn,
  #offlineStatusBtn,
  .topbar-alert-bell {
    width: 34px;
    min-width: 34px !important;
    height: 34px;
    min-height: 34px;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 8px !important;
    font-size: 0;
    text-align: center;
  }

  #langSelect {
    width: 42px;
    min-width: 42px !important;
    padding: 0 3px !important;
    font-size: 10px;
  }

  #subscriptionBtn::before {
    content: '★';
    font-size: 16px;
  }
  #topSearchBtn::before {
    content: '⌕';
    font-size: 21px;
  }
  #offlineStatusBtn::before {
    content: '●';
    color: #6ee7b7;
    font-size: 13px;
  }
  .topbar-alert-bell span {
    font-size: 17px;
  }

  .topbar-alert-menu {
    position: fixed;
    top: 54px;
    right: 8px;
  }
}

@media (max-width: 390px) {
  .topbar-left img {
    display: none;
  }

  .topbar {
    padding-inline: 7px;
  }

  .topbar-right {
    justify-content: flex-start;
  }
}

/* Final History override: keep all fetched data in one swipeable box. */
#view-history,
#view-history .history-page-shell,
#view-history .history-table-card {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
#view-history .history-table-card {
  overflow: hidden;
}
#view-history .history-table-scroll {
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: 70vh;
  overflow: auto !important;
  overscroll-behavior: contain;
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable both-edges;
  border: 1px solid #ead59a;
  border-radius: 11px;
  background: #fff;
}
#view-history .history-table {
  display: table !important;
  width: max-content !important;
  min-width: 1180px !important;
  table-layout: auto;
}
#view-history .history-table thead {
  display: table-header-group !important;
}
#view-history .history-table tbody {
  display: table-row-group !important;
}
#view-history .history-table tr {
  display: table-row !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
#view-history .history-table th,
#view-history .history-table td {
  display: table-cell !important;
  width: auto !important;
  min-width: 105px;
  max-width: 230px;
  padding: 10px 9px !important;
  text-align: left;
  vertical-align: top;
  white-space: normal;
}
#view-history .history-table th {
  position: sticky;
  top: 0;
  z-index: 3;
}
#view-history .history-table td::before {
  content: none !important;
}
#view-history .history-table .history-cell-value {
  width: auto !important;
  max-width: 100% !important;
  min-width: 0;
  text-align: inherit;
}
#view-history .history-table .numeric,
#view-history .history-table .numeric .history-cell-value {
  text-align: right;
}
@media (max-width: 560px) {
  #view-history .history-page-shell {
    padding: 8px;
  }
  #view-history .history-table-card {
    padding: 8px !important;
  }
  #view-history .history-table-scroll {
    max-height: 66vh;
  }
  #view-history .history-table {
    min-width: 1080px !important;
    font-size: 12px;
  }
  #view-history .history-table th,
  #view-history .history-table td {
    min-width: 96px;
    max-width: 200px;
    padding: 8px 7px !important;
  }
}
.history-barcode-detail {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px;
  border-bottom: 1px solid #ead59a;
  background: #fff;
}
.history-barcode-detail div {
  min-width: 0;
}
.history-barcode-detail strong,
.history-barcode-detail span {
  display: block;
  overflow-wrap: anywhere;
}
.history-barcode-detail strong {
  color: #17120a;
  font-size: 14px;
}
.history-barcode-detail span {
  margin-top: 3px;
  color: #64748b;
  font-size: 11px;
}
.history-barcode-detail mark {
  flex: 0 1 48%;
  padding: 5px 7px;
  border-radius: 7px;
  background: #fef3c7;
  color: #78350f;
  font-size: 11px;
  font-weight: 800;
  overflow-wrap: anywhere;
}
@media (max-width: 480px) {
  .history-barcode-detail {
    display: grid;
    grid-template-columns: 1fr;
  }
  .history-barcode-detail mark {
    max-width: 100%;
  }
}

/* Compact History barcode viewer. */
#barcodeModal > .modal-content {
  width: min(90vw, 400px) !important;
  max-width: 400px !important;
  max-height: 72dvh;
  padding: 12px;
}
#barcodeModal h3 {
  font-size: 15px;
}
#barcodeModalList {
  max-height: min(280px, 54dvh) !important;
  padding: 4px !important;
}
#barcodeModalList > .history-barcode-detail {
  margin-bottom: 4px;
  padding: 7px !important;
  gap: 7px;
  border-radius: 7px;
}
#barcodeModalList > .history-barcode-detail strong {
  color: #fff !important;
  font-size: 12px !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
#barcodeModalList > .history-barcode-detail span {
  font-size: 10px;
}
#barcodeModalList > .history-barcode-detail mark {
  padding: 4px 6px;
  font-size: 10px;
}
@media (max-width: 480px) {
  #barcodeModal > .modal-content {
    width: min(88vw, 360px) !important;
    max-width: 360px !important;
    padding: 9px;
  }
  #barcodeModalList > .history-barcode-detail {
    grid-template-columns: minmax(0, 1fr);
    padding: 6px !important;
  }
}
/* Inbound warehouse-location guidance and mobile-safe Step 3 actions. */
.inbound-location-requirement {
  margin: -2px 0 10px;
  padding: 9px 11px;
  border: 1px solid rgba(201, 168, 92, 0.38);
  border-radius: 9px;
  background: rgba(201, 168, 92, 0.1);
  color: #ead99c;
  font-size: 12px;
  line-height: 1.45;
}

.inbound-location-card-row span {
  color: #f4d675;
  font-weight: 800;
}

/* Three-step inbound workflow */
#inbound-flow .inbound-workflow-card {
  max-width: 760px;
  background: linear-gradient(145deg, #111a29, #091221);
  border: 1px solid rgba(226, 184, 50, 0.42);
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.3);
}
#inbound-flow .inbound-step-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-bottom: 14px;
}
#inbound-flow .inbound-step-heading h3 {
  margin: 0;
  color: #f5d65d;
}
#inbound-flow .inbound-step-heading p {
  margin: 3px 0 0;
  color: #aebbd0;
  font-size: 13px;
}
#inbound-flow .inbound-step-number {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 50%;
  color: #07101e;
  background: linear-gradient(135deg, #ffe17a, #d9aa22);
  font-size: 18px;
  font-weight: 900;
}
#inbound-flow .inbound-workflow-summary,
#inbound-flow .inbound-admin-price-note {
  padding: 11px 13px;
  border: 1px solid rgba(226, 184, 50, 0.35);
  border-radius: 10px;
  background: rgba(226, 184, 50, 0.08);
  color: #e9d995;
  font-size: 13px;
  margin-bottom: 12px;
}
#inbound-flow .inbound-party-fields,
#inbound-flow .inbound-product-editor,
#inbound-flow .inbound-planned-cart {
  width: 100%;
  box-sizing: border-box;
  padding: 14px;
  margin: 0 0 14px;
  border: 1px solid rgba(226, 184, 50, 0.25);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
}
#inbound-flow .inbound-party-fields legend {
  color: #f5d65d;
  font-weight: 800;
  padding: 0 7px;
}
#inbound-flow .inbound-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
#inbound-flow .inbound-product-measures {
  grid-template-columns: minmax(120px, 0.45fr) 1fr;
}
#inbound-flow .inbound-cart-header,
#inbound-flow .inbound-cart-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
#inbound-flow .inbound-cart-header {
  margin-bottom: 10px;
}
#inbound-flow .inbound-cart-header h4 {
  margin: 0;
  color: #f5d65d;
}
#inbound-flow .inbound-cart-header small {
  color: #aebbd0;
}
#inbound-flow .inbound-cart-list {
  display: grid;
  gap: 8px;
}
#inbound-flow .inbound-cart-item {
  padding: 11px 12px;
  border: 1px solid #293851;
  border-radius: 10px;
  background: #0a1423;
  color: #f7f9fc;
}
#inbound-flow .inbound-cart-item div {
  display: grid;
  gap: 3px;
}
#inbound-flow .inbound-cart-item small,
#inbound-flow .inbound-empty-cart {
  color: #aebbd0;
  margin: 0;
}
#inbound-flow .inbound-cart-remove {
  border: 1px solid #7f3341;
  border-radius: 8px;
  background: rgba(190, 48, 68, 0.14);
  color: #ffadb7;
  padding: 8px 10px;
  cursor: pointer;
}
#inbound-flow #inUndoCartBtn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
#inbound-flow #in-step-2 > .row {
  width: 100%;
  justify-content: space-between;
}
#inbound-flow .inbound-active-product {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  margin-bottom: 14px;
  border: 1px solid rgba(226, 184, 50, 0.45);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(226, 184, 50, 0.14), rgba(226, 184, 50, 0.05));
  color: #f5f7fb;
}
#inbound-flow .inbound-process-overview {
  display: grid;
  justify-items: center;
  gap: 12px;
  margin: 8px 0 18px;
}
#inbound-flow #inProgressCircle.inbound-remaining-circle {
  width: 172px;
  height: 172px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 9px solid #dfb52e;
  border-radius: 50%;
  background: #0b1525;
  color: #fff4c2;
  box-shadow:
    0 0 25px rgba(223, 181, 46, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
#inbound-flow #inProgressCircle.inbound-remaining-circle strong {
  font-size: 40px;
  line-height: 1;
}
#inbound-flow #inProgressCircle.inbound-remaining-circle small {
  color: #dfc570;
  letter-spacing: 0.16em;
  font-weight: 900;
}
#inbound-flow #inProgressCircle.inbound-remaining-circle span {
  color: #f5d65d;
  font-weight: 800;
}
#inbound-flow .inbound-process-route {
  display: grid;
  justify-items: center;
  gap: 3px;
  color: #c7d0df;
}
#inbound-flow .inbound-process-route strong {
  color: #f5d65d;
  font-size: 17px;
}
#inbound-flow .inbound-process-plan {
  display: grid;
  gap: 9px;
  margin-bottom: 16px;
}
#inbound-flow .inbound-process-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  border: 1px solid #2b3a51;
  border-radius: 12px;
  background: #0c1625;
  color: #f4f6fa;
}
#inbound-flow .inbound-process-item > div {
  display: grid;
  gap: 3px;
}
#inbound-flow .inbound-process-item small {
  color: #aebbd0;
}
#inbound-flow .inbound-process-item.is-active {
  border-color: #e1b62e;
  background: rgba(225, 182, 46, 0.1);
}
#inbound-flow .inbound-process-item.is-complete {
  opacity: 0.72;
}
#inbound-flow .inbound-process-item-progress {
  color: #f5d65d;
  white-space: nowrap;
}
#inbound-flow .inbound-scan-message {
  margin-top: 12px;
  padding: 11px 13px;
  border-radius: 10px;
  background: rgba(96, 165, 250, 0.1);
  color: #bcd8ff;
  font-weight: 750;
}
#inbound-flow .inbound-scan-message[data-tone='success'] {
  background: rgba(52, 211, 153, 0.1);
  color: #6ee7b7;
}
#inbound-flow .inbound-scan-message[data-tone='error'] {
  background: rgba(248, 113, 113, 0.12);
  color: #fca5a5;
}

/* Inbound Step 3 deliberately reuses the task/order processing presentation. */
#in-step-3 .inbound-task-process-card {
  width: min(680px, 100%);
  max-width: 680px;
  margin: 0 auto;
  padding: 18px;
  box-sizing: border-box;
  color: #f8fafc;
  background: linear-gradient(145deg, #111827, #090d16);
  border: 1px solid rgba(212, 175, 55, 0.58);
  border-radius: 18px;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(212, 175, 55, 0.08);
}
#in-step-3 .task-process-current,
#in-step-3 .task-process-expiry {
  margin: 0 0 12px;
  padding: 13px;
  color: #f8fafc;
  background: rgba(212, 175, 55, 0.09);
  border: 1px solid rgba(212, 175, 55, 0.48);
  border-radius: 10px;
}
#in-step-3 .task-process-progress {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin: 2px auto 18px;
  text-align: center;
}
#in-step-3 #inProgressCircle.task-process-progress-circle {
  width: 112px;
  height: 112px;
  box-sizing: content-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff7d1;
  background: radial-gradient(circle, #2c2410 0%, #111827 68%);
  border: 7px solid #d4af37;
  border-radius: 50%;
  box-shadow:
    0 0 0 5px rgba(212, 175, 55, 0.16),
    0 0 30px rgba(212, 175, 55, 0.34);
  font-weight: 900;
  line-height: 1;
}
#in-step-3 #inProgressCircle.task-process-progress-circle strong {
  color: #fff7d1;
  font-size: 24px;
  line-height: 1;
}
#in-step-3 #inProgressCircle.task-process-progress-circle span {
  margin-top: 7px;
  color: #ddc786;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
#in-step-3 #inProgressCircle.task-process-progress-circle small {
  margin-top: 5px;
  color: #f4d675;
  font-size: 11px;
  font-weight: 800;
}
#in-step-3 .task-process-progress-context {
  color: #e5e7eb;
  line-height: 1.45;
  text-align: center;
}
#in-step-3 .task-process-list {
  max-height: 30vh;
  overflow: auto;
  padding-right: 2px;
}
#in-step-3 .task-process-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 7px;
  padding: 10px;
  background: #0d1420;
  border: 1px solid #263244;
  border-radius: 9px;
}
#in-step-3 .task-process-item.active {
  background: rgba(212, 175, 55, 0.12);
  border-color: #d4af37;
}
#in-step-3 .task-process-item-name {
  color: #f8fafc;
  font-weight: 700;
}
#in-step-3 .task-process-item-meta {
  display: block;
  color: #cbd5e1;
  font-size: 13px;
}
#in-step-3 .task-process-item-status {
  color: #d4af37;
  text-align: right;
  white-space: nowrap;
}
#in-step-3 .task-process-confirmed {
  color: #f4d675;
  font-weight: 800;
}
#in-step-3 .task-process-scanned {
  max-height: 150px;
  overflow: auto;
  margin-top: 10px;
  padding-right: 4px;
}
#in-step-3 #inSessionList {
  background: #0d1420;
  border: 1px solid #263244;
  color: #cbd5e1;
  box-shadow: none;
}
#in-step-3 #inSessionList .session-item {
  color: #cbd5e1;
  background: transparent;
  border-bottom: 1px solid #263244;
}
#in-step-3 .task-process-scan-log {
  padding: 5px 0;
  color: #cbd5e1;
  border-bottom: 1px solid #263244;
}
#in-step-3 .task-process-position {
  margin-top: 9px;
  color: #cbd5e1;
}
#in-step-3 .task-process-scan-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}
#in-step-3 .task-process-scan-field {
  display: block;
  min-width: 0;
  color: #cbd5e1;
  font-size: 13px;
}
#in-step-3 .task-process-scan-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 44px;
  gap: 6px;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  margin-top: 5px;
}
#in-step-3 .task-process-scan-control input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 8px;
  box-sizing: border-box;
  color: #f8fafc;
  background: #070b13;
  border: 1px solid rgba(212, 175, 55, 0.52);
  border-radius: 9px;
  outline: none;
}
#in-step-3 .task-process-scan-control input:focus {
  border-color: #f4d675;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18);
}
#in-step-3 .task-process-scan-control button {
  min-height: 44px;
  padding: 0 12px;
}
#in-step-3 .task-process-scan-control .camera-btn {
  width: 44px;
  min-width: 44px;
  padding: 0;
}
#in-step-3 #inScanMessage {
  margin-top: 10px;
  color: #cbd5e1;
  font-size: 13px;
}
#in-step-3 #inScanMessage[data-tone='success'] {
  color: #6ee7a8;
  font-weight: 700;
}
#in-step-3 #inScanMessage[data-tone='error'] {
  color: #fca5a5;
  font-weight: 700;
}
#in-step-3 .task-process-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 12px;
}
#in-step-3 .task-process-actions button,
#in-step-3 .task-process-scan-control button {
  min-height: 40px;
  color: #171108;
  background: linear-gradient(135deg, #f4d675, #d4af37);
  border: 1px solid #f8df8a;
  border-radius: 9px;
  font-weight: 800;
  box-shadow: 0 5px 14px rgba(212, 175, 55, 0.18);
}
#in-step-3 .task-process-actions button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  #inbound-flow .inbound-field-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  #inbound-flow .inbound-cart-header {
    align-items: flex-start;
  }
  #inbound-flow #in-step-2 > .row {
    display: grid;
    grid-template-columns: 1fr;
  }
  #inbound-flow #in-step-2 > .row button {
    width: 100%;
  }
  #in-step-3 .inbound-task-process-card {
    padding: 13px;
    border-radius: 14px;
  }
  #in-step-3 .task-process-scan-grid {
    grid-template-columns: 1fr;
  }
  #in-step-3 #inProgressCircle.task-process-progress-circle {
    width: 88px;
    height: 88px;
    border-width: 5px;
  }
  #in-step-3 .task-process-actions button {
    flex: 1 1 calc(50% - 8px);
  }
}

@media (max-width: 640px) {
  #inbound-flow {
    padding-bottom: calc(28px + env(safe-area-inset-bottom));
  }

  #in-step-3 .inbound-step-actions,
  #in-step-3 .inbound-step-action-buttons {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 10px !important;
    align-items: stretch !important;
    width: 100%;
  }

  #in-step-3 .inbound-step-actions button {
    width: 100%;
    min-width: 0;
    min-height: 46px;
  }
}
.outbound-product-hint {
  display: block;
  margin: 4px 0 8px;
  color: #bda75e;
  font-size: 12px;
}
.out-pick-v2 {
  width: min(980px, 100%);
  margin: 0 auto;
  padding: clamp(14px, 2vw, 22px);
  box-sizing: border-box;
  border: 1px solid rgba(220, 178, 53, 0.52);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 0%, rgba(221, 177, 41, 0.09), transparent 29%),
    linear-gradient(155deg, #071122 0%, #0b1424 55%, #09101d 100%);
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.5);
  color: #eef3fb;
}
.out-pick-v2__header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
}
.out-pick-v2__header-copy { text-align: left; }
.out-pick-v2__header h3 {
  margin: 0 0 3px;
  color: #f8fafc;
  font-size: clamp(18px, 2vw, 23px);
}
.out-pick-v2__header p {
  margin: 0;
  color: #aeb9ca;
  font-size: 14px;
}
#outbound-flow .out-pick-v2__progress {
  width: 96px;
  height: 96px;
  flex: 0 0 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 5px solid #e6bd35;
  border-radius: 50%;
  background: #07101f;
  box-shadow: 0 0 0 3px rgba(231, 188, 52, 0.13), 0 0 20px rgba(231, 188, 52, 0.27);
  font-size: 12px;
  line-height: 1;
}
#outbound-flow .out-pick-v2__progress strong { color: #fff6c8; font-size: 28px; }
#outbound-flow .out-pick-v2__progress span {
  margin-top: 3px;
  color: #e9cc70;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
#outbound-flow .out-pick-v2__progress small {
  margin-top: 5px;
  color: #f5d766;
  font-size: 11px;
  font-weight: 900;
}
.out-pick-v2__instruction {
  margin: 14px 0;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(230, 189, 53, 0.45);
  border-radius: 15px;
  background: rgba(230, 189, 53, 0.07);
}
.out-pick-v2__instruction > span {
  color: #e8c95f;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.out-pick-v2__instruction p { margin: 0; color: #dce5f1; font-size: 15px; }
.out-pick-v2__instruction strong { color: #fff0a5; }
.out-pick-v2__scan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.out-pick-v2__field { min-width: 0; }
.out-pick-v2__field > span {
  display: block;
  margin-bottom: 5px;
  color: #c8d1de;
  font-size: 13px;
  font-weight: 800;
}
.out-pick-v2__control { display: flex; gap: 7px; align-items: stretch; }
.out-pick-v2__control input {
  min-width: 0;
  flex: 1;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid #9a7924;
  border-radius: 10px;
  background: #050b14;
  color: #f8fafc;
  font-size: 15px;
}
.out-pick-v2__control button {
  min-height: 44px;
  min-width: 44px;
  padding: 0 13px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 900;
}
.out-pick-v2__packages {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(230, 189, 53, 0.62);
  border-radius: 14px;
  background: rgba(12, 25, 43, 0.88);
}
.out-pick-v2__packages-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}
.out-pick-v2__packages-heading h4 { margin: 0; color: #f6f8fb; font-size: 18px; }
.out-pick-v2__packages-heading p { margin: 4px 0 0; color: #b9c4d4; font-size: 13px; }
.out-pick-v2__basket-progress {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(229, 187, 53, 0.12);
  color: #f2d46b;
  font-size: 13px;
  font-weight: 900;
}
.out-pick-v2__lpn { display: block; margin-top: 14px; }
.out-pick-v2__active-package {
  margin-top: 11px;
  padding: 10px 13px;
  display: grid;
  gap: 4px;
  border: 1px solid rgba(230, 189, 53, 0.48);
  border-radius: 10px;
  background: rgba(230, 189, 53, 0.08);
}
.out-pick-v2__active-package span,
.out-pick-v2__active-package small { color: #9fabbb; }
.out-pick-v2__active-package strong { color: #f3d86f; font-size: 15px; }
.out-pick-v2__session-list {
  max-height: 220px;
  margin-top: 11px;
  display: grid;
  gap: 6px;
  overflow-y: auto;
}
.outbound-cart-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border: 1px solid rgba(230, 189, 53, 0.35);
  border-radius: 12px;
  background: #08111f;
  color: #f8fafc;
}
.outbound-cart-item-details { min-width: 0; }
.outbound-cart-item-details strong,
.outbound-cart-item-details small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.outbound-cart-item-details small { margin-top: 5px; color: #aeb9c9; }
.outbound-cart-item > span { color: #f3d76d; font-weight: 900; }
.outbound-cart-remove {
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid #8d6e24;
  border-radius: 9px;
  background: #251c0a;
  color: #f3d76d;
  font-weight: 800;
  cursor: pointer;
}
.outbound-cart-empty { padding: 25px; text-align: center; color: #95a1b2; }
.out-pick-v2__total { margin-top: 10px; color: #e8edf5; font-size: 15px; font-weight: 800; }
.out-pick-v2__notice {
  margin-top: 12px;
  padding: 9px 13px;
  border: 1px solid rgba(69, 214, 145, 0.34);
  border-radius: 10px;
  background: rgba(40, 176, 111, 0.07);
  color: #63dda3;
  font-size: 13px;
  font-weight: 800;
}
.out-pick-v2__actions {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: nowrap;
}
.out-pick-v2__actions button {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}
.out-pick-v2__secondary { border: 1px solid #64748b; background: #172235; color: #eef3fb; }
.out-pick-v2__danger { border: 1px solid #ef4444; background: #dc2626; color: #fff; }
.out-pick-v2__finish { border: 1px solid #f3d36a; background: linear-gradient(#f5d974, #bf8e27); color: #171307; }
@media (max-width: 760px) {
  .out-pick-v2 { padding: 12px; border-radius: 14px; }
  .out-pick-v2__header { gap: 12px; }
  #outbound-flow .out-pick-v2__progress { width: 82px; height: 82px; flex-basis: 82px; border-width: 4px; }
  #outbound-flow .out-pick-v2__progress strong { font-size: 24px; }
  #outbound-flow .out-pick-v2__progress span { font-size: 7px; }
  #outbound-flow .out-pick-v2__progress small { font-size: 10px; }
  .out-pick-v2__instruction { align-items: flex-start; gap: 8px; }
  .out-pick-v2__scan-grid { grid-template-columns: 1fr; }
  .out-pick-v2__packages-heading { display: grid; }
  .out-pick-v2__basket-progress { justify-self: start; }
  .out-pick-v2__control { flex-wrap: wrap; }
  .out-pick-v2__control input { flex-basis: 100%; }
  .out-pick-v2__actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .out-pick-v2__actions button { min-width: 0; padding: 0 7px; }
  .outbound-cart-item { grid-template-columns: minmax(0, 1fr) auto; }
  .outbound-cart-remove { grid-column: 2; }
}
.outbound-plan-controls {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto;
  gap: 7px;
  align-items: end;
  margin: 9px 0;
}
.outbound-plan-controls label {
  grid-column: 1/-1;
}
.outbound-plan-controls input {
  min-height: 40px;
}
.outbound-plan-basket {
  display: grid;
  gap: 6px;
  max-height: 210px;
  overflow: auto;
  padding: 7px;
  border: 1px solid rgba(212, 175, 55, 0.38);
  border-radius: 10px;
  background: #11130e;
}
.outbound-plan-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 7px;
  align-items: center;
  padding: 7px 8px;
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 8px;
  background: rgba(212, 175, 55, 0.07);
  color: #f8fafc;
}
.outbound-plan-item strong,
.outbound-plan-item small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.outbound-plan-item small {
  color: #aaa68f;
  font-size: 10px;
}
.outbound-plan-item > span {
  color: #f3d66f;
  font-size: 11px;
  font-weight: 800;
}
.outbound-plan-item button {
  padding: 5px 7px;
  border: 1px solid #806126;
  border-radius: 6px;
  background: #261e0e;
  color: #f3d66f;
  font-size: 10px;
  font-weight: 800;
}
.outbound-plan-item.is-complete {
  border-color: #2f9e65;
  background: rgba(47, 158, 101, 0.12);
}
.outbound-plan-empty {
  padding: 10px;
  text-align: center;
  color: #aaa68f;
  font-size: 11px;
}
#outPlanProgress {
  margin: 4px 0;
  color: #f3d66f;
  font-size: 11px;
  font-weight: 800;
}
.outbound-plan-basket {
  align-content: start;
  height: 220px;
  max-height: 220px;
  overflow-y: auto;
  overflow-x: hidden;
}
/* Permission-protected controls stay closed until the cookie session is restored.
   The important flag also prevents component display rules from overriding hidden. */
.permission-hidden,
.permissions-loading [data-permission],
.permissions-loading [data-view]:not([data-view='dashboard']) {
  display: none !important;
}

/* Tenant-aware barcode and package-list workspace */
#view-barcode .printer-data-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 18px 0 12px;
  padding: 14px 16px;
  border: 1px solid rgba(246, 201, 21, 0.3);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(246, 201, 21, 0.12), rgba(10, 11, 7, 0.95));
}
#view-barcode .printer-data-header > div {
  display: grid;
  gap: 3px;
}
#view-barcode .printer-data-header strong {
  color: #fff8d1;
  font-size: 17px;
}
#view-barcode .printer-workspace-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
#view-barcode .printer-orders-card {
  grid-column: 1/-1;
}
#view-barcode .printer-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
#view-barcode .printer-card-heading h3 {
  margin: 3px 0 0;
}
#view-barcode .printer-count-badge {
  flex: none;
  padding: 6px 9px;
  border: 1px solid rgba(246, 201, 21, 0.35);
  border-radius: 999px;
  background: rgba(246, 201, 21, 0.1);
  color: #f6d95d;
  font-size: 11px;
  font-weight: 800;
}
#view-barcode .printer-control-label {
  display: block;
  margin: 13px 0 6px;
  color: #f6d95d;
  font-size: 12px;
  font-weight: 800;
}
#view-barcode .printer-location-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid rgba(246, 201, 21, 0.22);
  border-radius: 9px;
  background: rgba(246, 201, 21, 0.05);
}
#view-barcode .printer-location-filters label {
  display: grid;
  gap: 6px;
  color: #f6d95d;
  font-size: 12px;
  font-weight: 800;
}
#view-barcode .printer-wide-control {
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  border-radius: 8px;
}
#view-barcode .printer-scroll-select {
  height: 176px;
  overflow-y: auto;
  padding: 4px;
}
#view-barcode .printer-scroll-select option {
  padding: 9px 10px;
  border-bottom: 1px solid rgba(246, 201, 21, 0.12);
  white-space: normal;
}
#view-barcode .printer-scroll-select option:checked {
  background: linear-gradient(90deg, #d29a08, #ffe45b);
  color: #211900;
}
#view-barcode .printer-inline-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 9px;
}
#view-barcode .printer-inline-actions input[type='number'] {
  width: 76px;
  min-height: 40px;
  padding: 7px;
  border-radius: 8px;
}
#view-barcode .printer-range-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
#view-barcode .printer-range-fields label {
  display: grid;
  gap: 6px;
  color: #f6d95d;
  font-size: 12px;
  font-weight: 800;
}
#view-barcode .printer-range-fields input {
  width: 100%;
  min-height: 42px;
  box-sizing: border-box;
  padding: 8px 10px;
  border-radius: 8px;
}
#view-barcode .printer-order-summary {
  display: grid;
  gap: 5px;
  min-height: 56px;
  margin-top: 10px;
  padding: 12px;
  border-left: 3px solid #f6c915;
  border-radius: 7px;
  background: rgba(246, 201, 21, 0.07);
  color: #c8c5b0;
}
#view-barcode .printer-order-summary strong {
  color: #fff8d1;
}
#view-barcode .printer-order-summary span {
  font-size: 12px;
}
#view-barcode .printer-exact-label {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 4px;
  border: 1px solid #cbd5e1;
  border-radius: 3px;
  background: #fff;
  color: #111827;
  text-align: center;
}
#view-barcode .printer-exact-label svg {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}
#view-barcode .printer-exact-label strong {
  display: block;
  margin-top: 6px;
  font-size: 12px;
}
#view-barcode .printer-clean-label {
  padding: 3px;
}
#view-barcode .printer-shelf-label {
  justify-content: flex-start;
  height: auto;
  min-height: 0;
}
#view-barcode .printer-shelf-products {
  width: 100%;
  margin-top: 4px;
  border-top: 1px solid #1f2937;
}
#view-barcode .printer-shelf-product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
  padding: 4px 1px;
  border-bottom: 1px dashed #94a3b8;
  text-align: left;
}
#view-barcode .printer-shelf-product b {
  display: block;
  overflow-wrap: anywhere;
  color: #111827;
  font-size: 12px;
  line-height: 1.1;
}
#view-barcode .printer-shelf-product small {
  display: block;
  margin-top: 3px;
  color: #64748b;
  font-size: 9px;
}
#view-barcode .printer-shelf-price {
  color: #111827;
  font-size: 19px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}
#view-barcode .printer-shelf-unpriced {
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
}
#view-barcode .printer-dense-label {
  height: auto;
  min-height: 0;
  overflow: visible;
}
#view-barcode .printer-dense-label .printer-shelf-products {
  margin-top: 3px;
}
#view-barcode .printer-dense-label .printer-shelf-product {
  gap: 3px;
  padding: 3px 1px;
}
#view-barcode .printer-dense-label .printer-shelf-product b {
  font-size: 10px;
  line-height: 1.05;
}
#view-barcode .printer-dense-label .printer-shelf-price {
  font-size: 16px;
}
#view-barcode .printer-barcode-fallback {
  padding: 10px 4px;
  border-block: 8px double #111;
  font-family: monospace;
  font-weight: 800;
}
#view-barcode .printer-code39-bars {
  display: flex;
  justify-content: center;
  height: 64px;
  overflow: hidden;
}
#view-barcode .printer-code39-bars i {
  display: block;
  flex: none;
  height: 100%;
}
#view-barcode .printer-code39 span {
  display: block;
  margin-top: 6px;
  font-family: monospace;
  font-size: 12px;
  font-weight: 800;
}
#view-barcode #barcodePreviewList.barcode-roll-preview {
  flex-flow: column nowrap;
  align-items: center;
  justify-content: flex-start;
}
#view-barcode #barcodePreviewList.barcode-roll-preview .printer-exact-label {
  flex: 0 0 auto !important;
  height: max-content;
  min-height: 0;
  max-width: 100%;
}
#view-barcode
  #barcodePreviewList.barcode-roll-preview
  .printer-exact-label[data-label-size='very-small']
  .printer-shelf-product,
#view-barcode
  #barcodePreviewList.barcode-roll-preview
  .printer-exact-label[data-label-size='small']
  .printer-shelf-product {
  grid-template-columns: 1fr;
  gap: 2px;
}
#view-barcode
  #barcodePreviewList.barcode-roll-preview
  .printer-exact-label[data-label-size='very-small']
  .printer-shelf-product
  b,
#view-barcode
  #barcodePreviewList.barcode-roll-preview
  .printer-exact-label[data-label-size='small']
  .printer-shelf-product
  b {
  overflow-wrap: normal;
  word-break: normal;
  font-size: 10px;
}
#view-barcode
  #barcodePreviewList.barcode-roll-preview
  .printer-exact-label[data-label-size='very-small']
  .printer-shelf-price,
#view-barcode
  #barcodePreviewList.barcode-roll-preview
  .printer-exact-label[data-label-size='small']
  .printer-shelf-price {
  font-size: 15px;
  text-align: right;
}
#view-barcode .package-preview-area {
  margin-top: 18px;
}
#printPreviewArea .package-sheet {
  max-width: 980px;
  margin: 0 auto 24px;
  padding: 24px;
  border: 1px solid #d9dee8;
  border-radius: 12px;
  background: #fff;
  color: #172033;
}
#printPreviewArea .package-sheet.package-a5 {
  max-width: 620px;
}
#printPreviewArea .package-sheet.package-receipt-80 {
  max-width: 360px;
  padding: 12px;
  font-size: 11px;
}
#printPreviewArea .package-receipt-80 .package-header,
#printPreviewArea .package-receipt-80 .package-footer {
  display: block;
}
#printPreviewArea .package-receipt-80 .package-meta {
  grid-template-columns: 1fr;
}
#printPreviewArea .package-header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 16px;
  border-bottom: 3px solid #172033;
}
#printPreviewArea .package-header h1,
#printPreviewArea .package-header h2 {
  margin: 0 0 5px;
}
#printPreviewArea .package-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 18px 0;
}
#printPreviewArea .package-meta div {
  padding: 10px;
  border-radius: 7px;
  background: #f1f5f9;
}
#printPreviewArea .package-meta span {
  display: block;
  color: #64748b;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
#printPreviewArea table {
  width: 100%;
  border-collapse: collapse;
}
#printPreviewArea th {
  padding: 10px;
  background: #172033;
  color: #fff;
  text-align: left;
}
#printPreviewArea td {
  padding: 11px 10px;
  border-bottom: 1px solid #cbd5e1;
}
#printPreviewArea td.qty {
  text-align: right;
  font-weight: 800;
}
#printPreviewArea .package-footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  margin-top: 60px;
}
#printPreviewArea .signature {
  padding-top: 8px;
  border-top: 1px solid #64748b;
  color: #64748b;
}
@media (max-width: 900px) {
  #view-barcode .printer-workspace-grid {
    grid-template-columns: 1fr;
  }
  #view-barcode .printer-orders-card {
    grid-column: auto;
  }
}
@media (max-width: 560px) {
  #view-barcode .printer-inline-actions,
  #view-barcode .printer-data-header {
    flex-wrap: wrap;
  }
  #view-barcode .printer-data-header {
    align-items: stretch;
    flex-direction: column;
  }
  #view-barcode .printer-range-fields,
  #printPreviewArea .package-meta {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  #view-barcode .printer-location-filters {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  #view-barcode {
    min-width: 0;
    overflow-x: hidden;
  }
  #view-barcode .barcode-container,
  #view-barcode .barcode-panel,
  #view-barcode .printer-workspace-grid {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  #view-barcode .printer-page-header > div {
    min-width: 0;
  }
  #view-barcode .printer-page-header h2 {
    overflow-wrap: anywhere;
  }
  #view-barcode .printer-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }
  #view-barcode .printer-actions button,
  #view-barcode .printer-inline-actions button,
  #view-barcode .printer-data-header button {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
  }
  #view-barcode .printer-inline-actions input[type='number'] {
    width: 100%;
  }
  #view-barcode .barcode-preview #barcodePreviewList {
    overflow-x: hidden;
  }
  #printPreviewArea .package-sheet {
    padding: 14px;
    overflow-x: auto;
  }
}

/* Phone-first finishing pass: operations remain usable without horizontal page scrolling. */
@media (max-width: 640px) {
  .main-content,
  .content,
  .view,
  [id^='view-'] {
    min-width: 0;
    overflow-x: clip;
  }
  .btn-row,
  .form-actions,
  .toolbar-actions,
  .report-export-actions,
  .inbound-step-actions,
  .outbound-step-actions {
    display: grid !important;
    grid-template-columns: 1fr;
    width: 100%;
    gap: 9px;
  }
  .btn-row button,
  .form-actions button,
  .toolbar-actions button,
  .inbound-step-actions button,
  .outbound-step-actions button,
  #view-handScanners .scanner-panel button {
    width: 100%;
    min-width: 0;
    min-height: 44px;
  }
  #view-handScanners .scanner-panel > div {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 9px !important;
  }
  #view-handScanners .scanner-panel > div > div,
  #view-handScanners .scanner-panel [style*='min-width'] {
    width: 100% !important;
    min-width: 0 !important;
  }
  .inventory-live-summary,
  .inventory-location-grid {
    grid-template-columns: 1fr;
  }
  .inventory-product-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px;
  }
  .inventory-product-row > :last-child {
    grid-column: 2;
  }
  .modal,
  .company-settings-modal {
    padding: 8px;
    align-items: start;
    overflow-y: auto;
  }
  .modal-content,
  .company-settings-card {
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - 16px);
    margin: 0 auto;
  }
  .company-settings-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .table-wrapper,
  .report-table-scroll,
  .history-table-scroll {
    border-radius: 10px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
  }
}
@media (max-width: 380px) {
  .task-modal-head,
  .company-settings-head,
  .report-page-header {
    flex-wrap: wrap;
  }
}

/* Professional print-service workspace */
#view-barcode {
  --print-gold: #f6c915;
  --print-ink: #070806;
  --print-panel: #12130f;
  --print-line: rgba(246, 201, 21, 0.24);
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 4px 44px;
}
#view-barcode .printer-service-hero {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 22px;
  overflow: hidden;
  margin-bottom: 20px;
  padding: 28px;
  border: 1px solid rgba(246, 201, 21, 0.38);
  border-radius: 20px;
  background:
    radial-gradient(circle at 92% 0, rgba(246, 201, 21, 0.2), transparent 33%),
    linear-gradient(135deg, #191a13 0, #0b0c09 72%);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28);
}
#view-barcode .printer-service-hero::after {
  position: absolute;
  right: -45px;
  bottom: -80px;
  width: 230px;
  height: 230px;
  border: 1px solid rgba(246, 201, 21, 0.18);
  border-radius: 50%;
  content: '';
}
#view-barcode .printer-service-hero .printer-back-btn {
  position: relative;
  z-index: 1;
  min-height: 42px;
  border-color: #f6c915;
  background: linear-gradient(135deg, #ffe36a, #f6c915);
  color: #211900;
  box-shadow: 0 8px 22px rgba(246, 201, 21, 0.25);
}
#view-barcode .printer-service-hero .printer-back-btn:hover {
  border-color: #ffe982;
  background: linear-gradient(135deg, #fff09a, #ffd92f);
  color: #151100;
  box-shadow: 0 10px 26px rgba(246, 201, 21, 0.38);
}
#view-barcode .printer-service-hero-copy {
  position: relative;
  z-index: 1;
  max-width: 900px;
}
#view-barcode .printer-service-hero h2 {
  margin: 3px 0 8px;
  color: #fff9dc;
  font-size: clamp(32px, 4.2vw, 58px);
  line-height: 1;
  letter-spacing: -0.04em;
}
#view-barcode .printer-service-hero p {
  max-width: 780px;
  margin: 0;
  color: #c9c6b8;
  font-size: 15px;
  line-height: 1.65;
}
#view-barcode .printer-service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 17px;
}
#view-barcode .printer-service-tags span {
  padding: 7px 11px;
  border: 1px solid rgba(246, 201, 21, 0.25);
  border-radius: 999px;
  background: rgba(246, 201, 21, 0.08);
  color: #f7df73;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
}
#view-barcode .printer-service-console {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(420px, 1.28fr);
  gap: 16px;
  margin-bottom: 18px;
}
#view-barcode .printer-service-console > .barcode-panel {
  min-width: 0;
  margin: 0;
  border: 1px solid var(--print-line);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(25, 26, 19, 0.98), rgba(10, 11, 8, 0.98));
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.2);
}
#view-barcode .printer-device-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 22px;
}
#view-barcode .printer-device-card .field-row {
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
#view-barcode .printer-device-card .printer-actions {
  justify-content: flex-start;
  border-bottom: 0;
}
#view-barcode .printer-device-help {
  margin-top: 10px;
  padding: 12px;
  border-left: 3px solid var(--print-gold);
  border-radius: 6px;
  background: rgba(246, 201, 21, 0.055);
  line-height: 1.5;
}
#view-barcode .printer-step-number {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(246, 201, 21, 0.4);
  border-radius: 11px;
  background: rgba(246, 201, 21, 0.1);
  color: #f7dc68;
  font-size: 12px;
  font-weight: 900;
}
#view-barcode .printer-preview-state {
  padding: 6px 10px;
  border: 1px solid rgba(75, 211, 138, 0.3);
  border-radius: 999px;
  background: rgba(75, 211, 138, 0.09);
  color: #76e3a8;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}
#view-barcode .printer-preview-card {
  padding: 20px;
}
#view-barcode .printer-preview-card .barcode-preview {
  min-height: 190px;
  justify-content: center;
  border: 1px dashed rgba(246, 201, 21, 0.3);
  background: radial-gradient(circle at center, rgba(246, 201, 21, 0.07), transparent 70%);
}
#view-barcode .printer-data-header {
  margin: 0 0 12px;
  padding: 16px 18px;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
}
#view-barcode .printer-workflow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 16px;
}
#view-barcode .printer-workflow span {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid rgba(246, 201, 21, 0.17);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
  color: #aaa895;
  font-size: 11px;
  font-weight: 700;
}
#view-barcode .printer-workflow b {
  display: grid;
  flex: none;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 8px;
  background: #f6c915;
  color: #191600;
  font-size: 10px;
}
#view-barcode .printer-workspace-grid {
  align-items: start;
  gap: 18px;
}
#view-barcode .printer-feature-card {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 22px;
  border: 1px solid var(--print-line);
  border-radius: 16px;
  background: linear-gradient(150deg, rgba(23, 24, 18, 0.98), rgba(10, 11, 8, 0.98));
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
}
#view-barcode .printer-feature-card::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #f6c915, rgba(246, 201, 21, 0.08));
  content: '';
}
#view-barcode .printer-feature-card .printer-card-heading {
  min-height: 54px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
#view-barcode .printer-feature-card .printer-card-heading h3 {
  color: #fff9df;
  font-size: 19px;
}
#view-barcode .printer-feature-card .small-muted {
  line-height: 1.55;
}
#view-barcode .printer-wide-control {
  border: 1px solid rgba(246, 201, 21, 0.2);
  background: #090a07;
  color: #f8f4df;
  transition:
    border-color 0.16s,
    box-shadow 0.16s;
}
#view-barcode .printer-wide-control:focus {
  outline: 0;
  border-color: #f6c915;
  box-shadow: 0 0 0 3px rgba(246, 201, 21, 0.12);
}
#view-barcode .printer-inline-actions {
  padding-top: 11px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
#view-barcode .printer-inline-actions button {
  min-height: 42px;
}
#view-barcode .printer-orders-card {
  padding-bottom: 24px;
}
@media (max-width: 1050px) {
  #view-barcode .printer-service-console {
    grid-template-columns: 1fr;
  }
  #view-barcode .printer-workflow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  #view-barcode .printer-service-hero {
    grid-template-columns: 1fr;
    padding: 20px;
  }
  #view-barcode .printer-service-hero .printer-back-btn {
    justify-self: start;
  }
  #view-barcode .printer-service-tags {
    gap: 6px;
  }
  #view-barcode .printer-service-console {
    display: block;
  }
  #view-barcode .printer-service-console > .barcode-panel + .barcode-panel {
    margin-top: 12px;
  }
  #view-barcode .printer-workflow {
    grid-template-columns: 1fr;
  }
  #view-barcode .printer-feature-card {
    padding: 17px;
  }
  #view-barcode .printer-card-heading {
    align-items: flex-start;
    flex-direction: column;
  }
  #view-barcode .printer-count-badge {
    align-self: flex-start;
  }
}

/* Scan & Verify Hub */
#view-handScanners {
  --scan-gold: #f6c915;
  --scan-ink: #0c0d0a;
  --scan-panel: #151710;
  --scan-line: rgba(246, 201, 21, 0.2);
  color: #f8f5e7;
}
#view-handScanners .scanner-hub-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  overflow: hidden;
  margin-bottom: 16px;
  padding: 26px;
  border: 1px solid rgba(246, 201, 21, 0.38);
  border-radius: 20px;
  background:
    radial-gradient(circle at 85% -10%, rgba(246, 201, 21, 0.22), transparent 36%),
    linear-gradient(135deg, #1c1e15, #090a07 72%);
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.3);
}
#view-handScanners .scanner-hub-back {
  align-self: start;
  padding: 11px 16px;
  border: 1px solid #f6c915;
  border-radius: 10px;
  background: linear-gradient(135deg, #ffe579, #f6c915);
  color: #211900;
  font-weight: 900;
  box-shadow: 0 8px 24px rgba(246, 201, 21, 0.25);
  cursor: pointer;
}
#view-handScanners .scanner-hub-kicker,
#view-handScanners .scanner-card-eyebrow,
#view-handScanners .scanner-workspace-head span,
#view-handScanners .scanner-recent-head span {
  display: block;
  margin-bottom: 6px;
  color: #e6c64d;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
#view-handScanners .scanner-hub-title h2 {
  margin: 0;
  color: #fff7d6;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.04em;
}
#view-handScanners .scanner-hub-title p {
  max-width: 740px;
  margin: 10px 0 0;
  color: #aaa997;
  line-height: 1.55;
}
#view-handScanners .scanner-hub-health {
  display: flex;
  gap: 11px;
  align-items: center;
  min-width: 160px;
  padding: 13px 15px;
  border: 1px solid var(--scan-line);
  border-radius: 13px;
  background: rgba(0, 0, 0, 0.3);
}
#view-handScanners .scanner-hub-health strong,
#view-handScanners .scanner-hub-health small {
  display: block;
}
#view-handScanners .scanner-hub-health small {
  margin-top: 2px;
  color: #aaa997;
  font-size: 11px;
}
#view-handScanners .scanner-health-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #4bd38a;
  box-shadow:
    0 0 0 5px rgba(75, 211, 138, 0.12),
    0 0 18px rgba(75, 211, 138, 0.65);
}
#view-handScanners .scanner-health-dot[data-tone='busy'] {
  background: #f6c915;
  box-shadow: 0 0 0 5px rgba(246, 201, 21, 0.12);
}
#view-handScanners .scanner-health-dot[data-tone='warning'] {
  background: #ff785f;
  box-shadow: 0 0 0 5px rgba(255, 120, 95, 0.12);
}
#view-handScanners .scanner-hub-command {
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid var(--scan-line);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(23, 25, 17, 0.98), rgba(9, 10, 7, 0.98));
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
}
#view-handScanners .scanner-operation-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
#view-handScanners .scanner-operation-tab {
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
  color: #aaa997;
  font-weight: 800;
  cursor: pointer;
  transition: 0.16s;
}
#view-handScanners .scanner-operation-tab span {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 7px;
  background: rgba(246, 201, 21, 0.09);
  color: #e9cb55;
  font-size: 10px;
}
#view-handScanners .scanner-operation-tab:hover,
#view-handScanners .scanner-operation-tab.active {
  border-color: rgba(246, 201, 21, 0.55);
  background: rgba(246, 201, 21, 0.1);
  color: #fff4bd;
  transform: translateY(-1px);
}
#view-handScanners .scanner-input-shell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  gap: 0 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(246, 201, 21, 0.38);
  border-radius: 13px;
  background: #070805;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5);
}
#view-handScanners .scanner-input-icon {
  grid-row: 1/3;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #ffe16a, #e8ac08);
  color: #211900;
  font-size: 23px;
}
#view-handScanners .scanner-input-shell label {
  color: #8f8f80;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
#view-handScanners .scanner-input-shell input {
  min-width: 0;
  padding: 2px 0;
  border: 0 !important;
  outline: 0;
  background: transparent !important;
  color: #fff !important;
  font:
    800 19px/1.4 ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  box-shadow: none !important;
}
#view-handScanners .scanner-scan-btn {
  grid-column: 3;
  grid-row: 1/3;
  align-self: stretch;
  min-width: 115px;
  border: 0;
  border-radius: 9px;
  background: #f6c915;
  color: #211900;
  font-weight: 900;
  cursor: pointer;
}
#view-handScanners .scanner-device-bar {
  display: flex;
  gap: 9px;
  align-items: center;
  margin-top: 12px;
}
#view-handScanners .scanner-device-bar > div {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 9px;
  flex: 1;
  align-items: center;
}
#view-handScanners .scanner-device-bar strong,
#view-handScanners .scanner-device-bar small {
  display: block;
}
#view-handScanners .scanner-device-bar small {
  grid-column: 2;
  color: #828274;
  font-size: 11px;
}
.scanner-pulse {
  grid-row: 1/3;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #4bd38a;
  box-shadow: 0 0 0 5px rgba(75, 211, 138, 0.1);
}
#view-handScanners .scanner-device-bar button {
  white-space: nowrap;
}
#view-handScanners .scanner-text-btn {
  padding: 9px;
  border: 0;
  background: transparent;
  color: #a5a495;
  cursor: pointer;
}
#view-handScanners .scanner-hub-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.75fr);
  gap: 16px;
}
#view-handScanners .scanner-workspace,
#view-handScanners .scanner-action-card,
#view-handScanners .scanner-recent-card {
  border: 1px solid var(--scan-line);
  border-radius: 17px;
  background: linear-gradient(150deg, rgba(23, 25, 17, 0.98), rgba(9, 10, 7, 0.98));
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22);
}
#view-handScanners .scanner-workspace {
  min-height: 530px;
  padding: 20px;
}
#view-handScanners .scanner-workspace-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
#view-handScanners .scanner-workspace-head strong {
  font:
    800 17px ui-monospace,
    SFMono-Regular,
    monospace;
}
#view-handScanners .scanner-type-badge {
  padding: 7px 11px;
  border: 1px solid rgba(246, 201, 21, 0.25);
  border-radius: 999px;
  background: rgba(246, 201, 21, 0.08);
  color: #e9cb55;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}
#view-handScanners .scanner-type-badge[data-kind='product'] {
  border-color: rgba(75, 211, 138, 0.3);
  background: rgba(75, 211, 138, 0.09);
  color: #74e3a7;
}
#view-handScanners .scanner-type-badge[data-kind='unknown'] {
  border-color: rgba(255, 120, 95, 0.3);
  background: rgba(255, 120, 95, 0.09);
  color: #ff927f;
}
#view-handScanners .scanner-result-stage {
  padding-top: 18px;
}
.scanner-empty-state {
  display: grid;
  place-items: center;
  min-height: 400px;
  text-align: center;
}
.scanner-empty-state > span {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border: 1px solid rgba(246, 201, 21, 0.35);
  border-radius: 22px;
  background: rgba(246, 201, 21, 0.08);
  color: #f6c915;
  font-size: 34px;
}
.scanner-empty-state h3 {
  margin: 18px 0 6px;
  color: #fff3b4;
}
.scanner-empty-state p {
  max-width: 440px;
  margin: 0;
  color: #8e8e80;
  line-height: 1.5;
}
.scanner-unknown > span {
  border-color: rgba(255, 120, 95, 0.4);
  background: rgba(255, 120, 95, 0.08);
  color: #ff826c;
}
#view-handScanners .scanner-identity-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 5px 0 19px;
}
.scanner-product-mark,
.scanner-location-mark {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 15px;
  background: linear-gradient(135deg, #ffe16a, #dda206);
  color: #211900;
  font-size: 25px;
  font-weight: 950;
}
.scanner-identity-top span {
  color: #8b8b7d;
  font-size: 11px;
  text-transform: uppercase;
}
.scanner-identity-top h3 {
  margin: 3px 0;
  color: #fff5c4;
  font-size: 24px;
}
.scanner-identity-top code {
  color: #c7c5b2;
}
.scanner-stock-total {
  color: #fff3b4;
  font-size: 28px;
  text-align: right;
}
.scanner-stock-total small {
  display: block;
  color: #8b8b7d;
  font-size: 10px;
  text-transform: uppercase;
}
#view-handScanners .scanner-fact-grid,
#view-handScanners .scanner-location-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 18px;
}
.scanner-location-summary {
  grid-template-columns: repeat(3, 1fr) !important;
}
.scanner-fact-grid > div,
.scanner-location-summary > div {
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
}
.scanner-fact-grid span,
.scanner-location-summary span {
  display: block;
  margin-bottom: 5px;
  color: #818174;
  font-size: 10px;
  text-transform: uppercase;
}
.scanner-fact-grid strong,
.scanner-location-summary strong {
  font-size: 13px;
}
.scanner-tone-success {
  color: #68dc9e;
}
.scanner-tone-warning {
  color: #ffd55b;
}
.scanner-tone-danger {
  color: #ff806c;
}
.scanner-tone-neutral {
  color: #cac8b5;
}
#view-handScanners .scanner-location-table {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 11px;
}
.scanner-table-head,
.scanner-table-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 11px 13px;
}
.scanner-table-head {
  background: rgba(246, 201, 21, 0.08);
  color: #d7bd50;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}
.scanner-table-row + .scanner-table-row {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.scanner-table-row strong,
.scanner-table-row small {
  display: block;
}
.scanner-table-row small {
  margin-top: 3px;
  color: #77776d;
}
.scanner-table-row b {
  color: #fff2ad;
}
.scanner-table-empty {
  padding: 24px;
  color: #88887c;
  text-align: center;
}
#view-handScanners .scanner-side-panel {
  display: grid;
  align-content: start;
  gap: 16px;
}
.scanner-action-card,
.scanner-recent-card {
  padding: 19px;
}
.scanner-action-card h3,
.scanner-recent-card h3 {
  margin: 0;
  color: #fff2b1;
}
.scanner-action-card > p {
  margin: 7px 0 16px;
  color: #8c8c7e;
  font-size: 12px;
  line-height: 1.5;
}
.scanner-action-fields {
  display: grid;
  gap: 11px;
}
.scanner-action-fields label span {
  display: block;
  margin-bottom: 6px;
  color: #aaa997;
  font-size: 11px;
  font-weight: 800;
}
.scanner-action-fields input,
.scanner-action-fields select,
.scanner-action-fields textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 11px;
  border: 1px solid rgba(246, 201, 21, 0.22);
  border-radius: 9px;
  background: #090a07;
  color: #f8f4df;
}
.scanner-action-fields textarea {
  min-height: 80px;
  resize: vertical;
}
.scanner-action-fields input:focus,
.scanner-action-fields select:focus,
.scanner-action-fields textarea:focus {
  outline: none;
  border-color: #f6c915;
  box-shadow: 0 0 0 3px rgba(246, 201, 21, 0.1);
}
.scanner-primary-action {
  padding: 13px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, #ffe36d, #f6c915);
  color: #211900;
  font-weight: 950;
  cursor: pointer;
}
.scanner-primary-action:disabled {
  opacity: 0.5;
  cursor: wait;
}
.scanner-safety-note,
.scanner-muted {
  margin: 0;
  color: #77776c;
  font-size: 11px;
  line-height: 1.5;
}
.scanner-guide-list {
  display: grid;
  gap: 8px;
}
.scanner-guide-list span {
  display: flex;
  gap: 9px;
  align-items: center;
  color: #aaa997;
  font-size: 12px;
}
.scanner-guide-list b {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: rgba(246, 201, 21, 0.1);
  color: #e7c94f;
  font-size: 10px;
}
#view-handScanners .scanner-recent-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}
.scanner-icon-btn {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(246, 201, 21, 0.22);
  border-radius: 9px;
  background: rgba(246, 201, 21, 0.07);
  color: #e6c64d;
  cursor: pointer;
}
.scanner-recent-list {
  display: grid;
  max-height: 290px;
  overflow: auto;
}
.scanner-activity-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.scanner-activity-icon {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border-radius: 8px;
  background: rgba(246, 201, 21, 0.08);
  color: #e7c94f;
}
.scanner-activity-row strong,
.scanner-activity-row small {
  display: block;
}
.scanner-activity-row strong {
  overflow: hidden;
  color: #d7d4c2;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scanner-activity-row small {
  margin-top: 3px;
  color: #717168;
  font-size: 9px;
}
@media (max-width: 1000px) {
  #view-handScanners .scanner-hub-grid {
    grid-template-columns: 1fr;
  }
  #view-handScanners .scanner-side-panel {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 720px) {
  #view-handScanners .scanner-hub-hero {
    grid-template-columns: 1fr;
    padding: 20px;
  }
  #view-handScanners .scanner-hub-health {
    justify-self: stretch;
  }
  #view-handScanners .scanner-operation-tabs {
    grid-template-columns: 1fr 1fr;
  }
  #view-handScanners .scanner-device-bar {
    align-items: stretch;
    flex-direction: column;
  }
  #view-handScanners .scanner-device-bar > div {
    margin-bottom: 5px;
  }
  #view-handScanners .scanner-side-panel {
    grid-template-columns: 1fr;
  }
  #view-handScanners .scanner-fact-grid,
  #view-handScanners .scanner-location-summary {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 480px) {
  #view-handScanners .scanner-operation-tabs {
    grid-template-columns: 1fr;
  }
  #view-handScanners .scanner-input-shell {
    grid-template-columns: auto minmax(0, 1fr);
  }
  #view-handScanners .scanner-scan-btn {
    grid-column: 1/3;
    grid-row: 3;
    margin-top: 10px;
    min-height: 42px;
  }
  #view-handScanners .scanner-identity-top {
    grid-template-columns: auto 1fr;
  }
  .scanner-stock-total {
    grid-column: 1/3;
    text-align: left;
  }
  #view-handScanners .scanner-fact-grid,
  #view-handScanners .scanner-location-summary {
    grid-template-columns: 1fr !important;
  }
}

/* Barcode-directed warehouse layout */
#view-warehouse .wh-3d-container {
  position: relative;
  min-height: 680px;
  height: auto;
  overflow: visible;
  border-radius: 18px;
  background: #090b08;
}
#view-warehouse #warehouse3d {
  position: relative !important;
  inset: auto !important;
  min-height: 680px;
}
.warehouse-layout {
  --wl-gold: #f6c915;
  --wl-line: rgba(246, 201, 21, 0.22);
  padding: 22px;
  color: #f7f3df;
}
.warehouse-layout-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.72fr);
  gap: 22px;
  align-items: end;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--wl-line);
}
.warehouse-layout-toolbar span,
.warehouse-section-heading span,
.warehouse-shelf-header > div > span {
  color: #d8bb4d;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.warehouse-layout-toolbar h3,
.warehouse-shelf-header h3 {
  margin: 4px 0 6px;
  color: #fff5c7;
  font-size: clamp(22px, 3vw, 34px);
}
.warehouse-layout-toolbar p,
.warehouse-shelf-header p {
  margin: 0;
  color: #8f8f80;
  line-height: 1.5;
}
.warehouse-location-search label {
  display: block;
  margin-bottom: 7px;
  color: #ccc7ad;
  font-size: 11px;
  font-weight: 800;
}
.warehouse-location-search > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
}
.warehouse-location-search input {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--wl-line);
  border-radius: 10px;
  background: #050604;
  color: #fff5c7;
  font:
    800 15px ui-monospace,
    SFMono-Regular,
    monospace;
  text-transform: uppercase;
}
.warehouse-location-search button,
.warehouse-rack-pager button {
  border: 0;
  border-radius: 9px;
  background: var(--wl-gold);
  color: #231d00;
  font-weight: 900;
  cursor: pointer;
}
.warehouse-location-search button {
  padding: 0 18px;
}
.warehouse-location-search small {
  display: block;
  min-height: 17px;
  margin-top: 5px;
  color: #ff917e;
}
.warehouse-zone-tabs,
.warehouse-shelf-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 16px 0 10px;
  scrollbar-width: thin;
}
.warehouse-zone-tabs button,
.warehouse-shelf-tabs button {
  flex: none;
  min-width: 110px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 11px;
  background: #14160f;
  color: #aaa795;
  text-align: left;
  cursor: pointer;
}
.warehouse-zone-tabs button[aria-selected='true'],
.warehouse-shelf-tabs button[aria-selected='true'] {
  border-color: var(--wl-gold);
  background: rgba(246, 201, 21, 0.12);
  color: #fff2ae;
  box-shadow: 0 0 0 2px rgba(246, 201, 21, 0.08);
}
.warehouse-zone-tabs small,
.warehouse-shelf-tabs small {
  display: block;
  margin-top: 4px;
  color: #777568;
  font-size: 9px;
}
.warehouse-rack-section,
.warehouse-shelf-workspace {
  margin-top: 10px;
  padding: 17px;
  border: 1px solid var(--wl-line);
  border-radius: 15px;
  background: linear-gradient(145deg, #15170f, #0b0c08);
}
.warehouse-section-heading,
.warehouse-shelf-header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  margin-bottom: 13px;
}
.warehouse-section-heading strong {
  display: block;
  margin-top: 3px;
  color: #f4efd7;
}
.warehouse-rack-pager {
  display: flex;
  gap: 9px;
  align-items: center;
}
.warehouse-rack-pager button {
  width: 38px;
  height: 38px;
}
.warehouse-rack-pager button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.warehouse-rack-pager span {
  min-width: 48px;
  color: #a6a391;
  text-align: center;
}
.warehouse-rack-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.warehouse-rack-grid button {
  min-height: 82px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: #0a0b08;
  color: #f3ecd0;
  text-align: left;
  cursor: pointer;
  transition: 0.15s;
}
.warehouse-rack-grid button:hover,
.warehouse-rack-grid button.active {
  border-color: var(--wl-gold);
  background: rgba(246, 201, 21, 0.09);
  transform: translateY(-1px);
}
.warehouse-rack-grid button span {
  display: block;
  color: #ffe36c;
  font-size: 18px;
  font-weight: 950;
}
.warehouse-rack-grid button small {
  display: block;
  margin-top: 7px;
  color: #8d8b7c;
}
.warehouse-shelf-summary {
  display: grid;
  grid-template-columns: auto auto;
  gap: 2px 10px;
  padding: 10px 13px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 11px;
  background: #080906;
}
.warehouse-shelf-summary strong {
  color: #ffe36c;
  font-size: 18px;
}
.warehouse-shelf-summary span {
  color: #817f72;
  font-size: 9px;
  text-transform: uppercase;
}
.warehouse-bin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
  gap: 12px;
  padding-top: 12px;
}
.warehouse-focused-3d {
  overflow: hidden;
  margin-top: 14px;
  border: 1px solid rgba(246, 201, 21, 0.3);
  border-radius: 15px;
  background: radial-gradient(circle at 50% 0, rgba(246, 201, 21, 0.1), transparent 46%), #080a07;
}
.warehouse-focused-3d > header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 13px 15px;
  border-bottom: 1px solid rgba(246, 201, 21, 0.18);
  background: rgba(0, 0, 0, 0.24);
}
.warehouse-focused-3d > header span,
.warehouse-focused-3d > header strong,
.warehouse-focused-3d > header small {
  display: block;
}
.warehouse-focused-3d > header span {
  color: #d9bd4d;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.warehouse-focused-3d > header strong {
  margin-top: 3px;
  color: #fff2b1;
  font-size: 16px;
}
.warehouse-focused-3d > header small {
  margin-top: 4px;
  color: #777568;
}
.warehouse-focused-3d > header button {
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid rgba(246, 201, 21, 0.38);
  border-radius: 9px;
  background: rgba(246, 201, 21, 0.1);
  color: #f1d45d;
  font-weight: 850;
  cursor: pointer;
}
#warehouseFocused3d {
  position: relative;
  width: 100%;
  height: 430px;
  min-height: 340px;
}
#warehouseFocused3d canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
}
#warehouseFocused3d canvas:active {
  cursor: grabbing;
}
.warehouse-3d-fallback {
  display: grid;
  min-height: 340px;
  place-content: center;
  padding: 24px;
  color: #aaa795;
  text-align: center;
}
.warehouse-bin-card {
  position: relative;
  display: flex;
  min-height: 150px;
  flex-direction: column;
  align-items: flex-start;
  padding: 17px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: #080906;
  color: #f2ecd2;
  text-align: left;
  cursor: pointer;
  transition: 0.16s;
}
.warehouse-bin-card:hover,
.warehouse-bin-card:focus,
.warehouse-bin-card.selected {
  outline: 0;
  border-color: var(--wl-gold);
  box-shadow: 0 0 0 3px rgba(246, 201, 21, 0.12);
  transform: translateY(-2px);
}
.warehouse-bin-card.occupied {
  background: linear-gradient(145deg, rgba(37, 71, 48, 0.9), #0b140d);
}
.warehouse-bin-card.empty {
  background: linear-gradient(145deg, #151710, #090a07);
}
.warehouse-bin-position {
  display: grid;
  place-items: center;
  min-width: 48px;
  height: 34px;
  padding: 0 8px;
  border-radius: 9px;
  background: #f6c915;
  color: #211b00;
  font-weight: 950;
}
.warehouse-bin-card > strong {
  margin-top: 15px;
  font:
    850 14px ui-monospace,
    SFMono-Regular,
    monospace;
}
.warehouse-bin-stock {
  margin-top: 7px;
  color: #aaa795;
  font-size: 12px;
}
.warehouse-bin-action {
  margin-top: auto;
  padding-top: 14px;
  color: #e5c64e;
  font-size: 11px;
  font-weight: 850;
}
.warehouse-layout-empty {
  display: grid;
  min-height: 520px;
  place-content: center;
  padding: 30px;
  color: #a7a493;
  text-align: center;
}
.warehouse-layout-empty strong {
  color: #fff1ac;
  font-size: 24px;
}
.warehouse-layout-empty p {
  max-width: 560px;
  line-height: 1.6;
}
#view-warehouse #warehouseBinDetails {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 70;
  width: min(420px, calc(100vw - 36px));
  max-height: 70vh;
  overflow: auto;
  padding: 18px;
  border: 1px solid #f6c915;
  border-radius: 14px;
  background: #12140e;
  color: #f4efd9;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.55);
}
.warehouse-detail-code {
  margin-bottom: 12px;
  color: #ffe36c;
  font:
    900 17px ui-monospace,
    SFMono-Regular,
    monospace;
}
.warehouse-detail-products {
  display: grid;
  gap: 8px;
}
.warehouse-detail-products article {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9px;
  background: #080906;
}
.warehouse-detail-products strong,
.warehouse-detail-products small {
  display: block;
}
.warehouse-detail-products small {
  margin-top: 4px;
  color: #777568;
}
.warehouse-detail-products article > span {
  color: #ffe36c;
  font-weight: 900;
  white-space: nowrap;
}
.warehouse-detail-empty {
  padding: 18px;
  border-radius: 9px;
  background: #080906;
  color: #999687;
  text-align: center;
}
@media (max-width: 900px) {
  .warehouse-layout-toolbar {
    grid-template-columns: 1fr;
  }
  .warehouse-rack-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .warehouse-layout {
    padding: 12px;
  }
  .warehouse-rack-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .warehouse-section-heading,
  .warehouse-shelf-header,
  .warehouse-focused-3d > header {
    align-items: flex-start;
    flex-direction: column;
  }
  .warehouse-bin-grid {
    grid-template-columns: 1fr;
  }
  .warehouse-bin-card {
    min-height: 132px;
  }
  .warehouse-location-search > div {
    grid-template-columns: 1fr;
  }
  .warehouse-location-search button {
    min-height: 44px;
  }
  #warehouseFocused3d {
    height: 360px;
  }
  .warehouse-focused-3d > header button {
    width: 100%;
  }
}

/* Keep desktop toolbar controls usable at wide viewport sizes. */
#globalShiftMount,
#globalShiftMount .global-shift-widget {
  flex: 0 0 auto;
}

.topbar-language {
  z-index: 2;
  overflow: visible;
}

.topbar-language .language-trigger {
  position: relative;
  z-index: 2;
  cursor: pointer;
  pointer-events: auto;
}

.topbar-language .language-menu {
  pointer-events: auto;
}

/* Compact language control shared by the main dashboard toolbar. */
.topbar-language {
  display: inline-flex;
  align-items: center;
  width: 58px;
  height: 36px;
  padding: 3px 5px;
  border: 1px solid rgba(212, 175, 55, 0.38);
  border-radius: 999px;
  background: linear-gradient(145deg, rgba(23, 32, 51, 0.96), rgba(15, 23, 42, 0.96));
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.24);
  box-sizing: border-box;
}

.topbar-language-icon {
  flex: 0 0 auto;
  font-size: 12px;
  line-height: 1;
}

.topbar-language .language-trigger {
  width: 30px;
  height: 28px;
  gap: 2px;
}

.topbar-language .language-menu {
  left: auto;
  right: 0;
  width: 154px;
  max-height: min(264px, 55vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 5px;
}

.topbar-language .language-menu button {
  grid-template-columns: 28px 1fr;
  min-height: 32px;
  padding: 5px 7px !important;
}

@media (max-width: 900px) {
  .topbar-language {
    width: 54px;
    height: 34px;
    padding: 2px 4px;
  }
  .topbar-language .language-menu {
    top: 48px;
    left: auto;
    right: 8px;
    width: 150px;
  }
}

.topbar-language {
  min-width: 58px;
  max-width: 58px;
  flex: 0 0 58px;
}
@media (max-width: 900px) {
  .topbar-language {
    min-width: 54px;
    max-width: 54px;
    flex-basis: 54px;
  }
}

/* Phone toolbar: keep every primary action visible instead of clipping the right edge. */
@media (max-width: 600px) {
  .topbar {
    flex-wrap: wrap;
    align-content: center;
    row-gap: 6px;
    height: auto;
    min-height: 96px;
    overflow: visible;
  }

  .topbar-left {
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
  }

  .topbar-right {
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    margin-left: 0;
    justify-content: center;
    overflow: visible;
  }

  #globalShiftMount,
  #globalShiftMount .global-shift-widget {
    width: 42px;
    min-width: 42px;
  }

  #globalShiftMount .shift-widget-trigger {
    width: 42px;
    min-width: 42px;
    min-height: 34px;
    height: 34px;
    justify-content: center;
    padding: 0;
  }

  #globalShiftMount .shift-widget-trigger-copy {
    display: none;
  }

  .signed-in-user {
    width: 34px;
    min-width: 34px;
    height: 34px;
    padding: 0;
    justify-content: center;
  }

  .signed-in-user-name {
    display: none;
  }

  .topbar-alert-bells {
    flex: 0 0 auto;
    gap: 4px;
  }
}

@media (max-width: 360px) {
  .topbar-right {
    gap: 3px;
  }

  .signed-in-user,
  #offlineStatusBtn {
    display: none !important;
  }
}

@media (max-width: 600px) {
  .topbar-language .language-menu,
  .topbar-alert-menu {
    top: 102px;
    max-height: calc(100dvh - 112px);
  }
}

/* Keep the active outbound destination legible on desktop and small screens. */
#taskProcessModal .task-process-go-to {
  font-size: clamp(1.4rem, 3vw, 2.25rem);
  font-weight: 800;
  line-height: 1.3;
  color: #ffe082;
  overflow-wrap: anywhere;
}
#taskProcessModal .task-process-pick-total {
  margin-top: 10px;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
}
#taskProcessModal .task-process-pick-remaining {
  margin-top: 6px;
  color: #cbd5e1;
  font-size: 1rem;
}

.task-packages {
  margin: 14px 0;
  padding: 14px;
  border: 1px solid #b89a43;
  border-radius: 14px;
  background: #111c2c;
  color: #f8fafc;
}
.task-packages input {
  max-width: 100%;
  padding: 10px;
}
.task-packages button {
  margin: 5px;
  padding: 10px;
}
.task-packages #taskPackageList {
  max-height: 180px;
  overflow: auto;
  overflow-wrap: anywhere;
}
.task-packages #taskPackageMessage {
  color: #f4d675;
}
#taskProcessModal .package-scan-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 7px;
  max-height: 220px;
  overflow: auto;
  padding: 3px;
  scrollbar-gutter: stable;
}
#taskProcessModal .package-scan-card {
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(246, 201, 21, 0.28);
  border-radius: 9px;
  background: #0b1422;
  color: #f8fafc;
}
#taskProcessModal .package-scan-card.is-active {
  border-color: #f6c915;
  box-shadow: 0 0 0 2px rgba(246, 201, 21, 0.1);
}
#taskProcessModal .package-scan-card strong,
#taskProcessModal .package-scan-card span,
#taskProcessModal .package-scan-card small,
#taskProcessModal .package-scan-product strong,
#taskProcessModal .package-scan-product span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#taskProcessModal .package-scan-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
#taskProcessModal .package-scan-card-header > strong {
  color: #f4d675;
  font-size: 12px;
}
.package-scan-status {
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.2);
  color: #cbd5e1;
  font-size: 10px;
  font-weight: 800;
}
.package-scan-status.is-active {
  background: rgba(246, 201, 21, 0.18);
  color: #f8df8a;
}
.package-scan-products {
  display: grid;
  gap: 5px;
  margin-top: 8px;
}
.package-scan-product {
  padding-top: 5px;
  border-top: 1px solid rgba(148, 163, 184, 0.16);
}
.package-scan-product strong {
  color: #f8fafc;
  font-size: 11px;
}
.package-scan-product span {
  margin-top: 3px;
  color: #b9c6d8;
  font-size: 11px;
}
.package-active-lpn {
  display: grid;
  gap: 2px;
  margin: 8px 3px;
  padding: 9px 10px;
  border: 1px solid rgba(246, 201, 21, 0.34);
  border-radius: 9px;
  background: rgba(246, 201, 21, 0.1);
}
.package-active-lpn span,
.package-active-lpn small {
  color: #b9c6d8;
  font-size: 11px;
}
.package-active-lpn strong {
  color: #f8df8a;
  font-size: 13px;
}
.package-active-lpn.is-waiting {
  border-style: dashed;
  background: rgba(15, 23, 42, 0.65);
}
#taskProcessModal .package-scan-empty {
  margin: 6px 0;
  color: #94a3b8;
  font-size: 12px;
}

/* Package printing follows the printer console theme. */
#view-barcode > .task-packages {
  padding: 22px;
  border-color: var(--print-line);
  background: linear-gradient(145deg, #191a13, #0b0c09);
  color: #f8f5e7;
}
#view-barcode > .task-packages h3 {
  margin-top: 0;
  color: #f7df73;
}
#view-barcode > .task-packages label {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  max-width: 100%;
}
#view-barcode > .task-packages input {
  box-sizing: border-box;
  min-width: 0;
  min-height: 44px;
  border: 1px solid rgba(246, 201, 21, 0.4);
  border-radius: 10px;
  background: #0b0c09;
  color: #fff9dc;
}
#view-barcode > .task-packages input::placeholder {
  color: #bdb9a7;
}
#view-barcode > .task-packages button {
  min-height: 44px;
  padding: 11px 20px;
  border: 1px solid #f6c915;
  border-radius: 10px;
  background: linear-gradient(135deg, #ffe36a, #f6c915);
  color: #211900;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(246, 201, 21, 0.18);
}
#view-barcode > .task-packages button:hover {
  background: linear-gradient(135deg, #fff09a, #ffd92f);
}
#view-barcode > .task-packages :is(button, input):focus-visible {
  outline: 3px solid #fff09a;
  outline-offset: 3px;
}
#view-barcode > .task-packages [role='status'] {
  color: #f7df73;
  overflow-wrap: anywhere;
}
@media (max-width: 480px) {
  #view-barcode > .task-packages label {
    display: flex;
  }
  #view-barcode > .task-packages input {
    width: 100%;
  }
  #view-barcode > .task-packages button {
    width: 100%;
    margin: 12px 0 0;
  }
}

#view-barcode .lpn-batch-printer select {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 10px;
  border: 1px solid #b89a43;
  border-radius: 10px;
  background: #0b0c09;
  color: #fff9dc;
}
#view-barcode .lpn-batch-printer input[type='number'] {
  width: 130px;
}
#view-barcode .lpn-batch-printer button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Dashboard tools: one primary action, followed by compact operation tools. */
#dashboardArea .tools-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

#dashboardArea .tools-grid .tool-btn {
  min-width: 0 !important;
  min-height: 86px !important;
  padding: 16px 18px !important;
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, #172033, #0b1322) !important;
  color: #e5edf9 !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.24) !important;
}

#dashboardArea .tools-grid #toolCreateTask {
  grid-column: 1 / -1;
  grid-template-columns: 58px minmax(0, 1fr) 58px;
  position: relative;
  overflow: hidden;
  min-height: 148px !important;
  border: 2px solid #ffe775 !important;
  background:
    radial-gradient(circle at 12% 14%, rgba(255, 255, 255, 0.3), transparent 28%),
    radial-gradient(circle at 88% 82%, rgba(114, 75, 4, 0.26), transparent 34%),
    linear-gradient(135deg, #8d6512, #d4af37 54%, #f5d66f) !important;
  color: #172033 !important;
  font-size: clamp(1.3rem, 2.6vw, 1.75rem) !important;
  letter-spacing: 0.01em;
  text-align: center;
  box-shadow:
    0 20px 48px rgba(212, 175, 55, 0.34),
    0 0 0 4px rgba(246, 201, 21, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
}

#dashboardArea .tools-grid #toolCreateTask .tool-icon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: rgba(23, 32, 51, 0.17);
  font-size: 28px;
}

#dashboardArea
  .tools-grid
  #toolCreateTask
  > span:not(.task-barcode-art):not(.task-package-cart-art) {
  position: relative;
  z-index: 1;
}

.task-barcode-art {
  position: absolute;
  right: 7%;
  bottom: 13%;
  width: min(42%, 310px);
  height: 42px;
  opacity: 0.3;
  pointer-events: none;
  transform: skewX(-12deg);
  background: repeating-linear-gradient(
    90deg,
    rgba(23, 32, 51, 0.9) 0 3px,
    transparent 3px 6px,
    rgba(23, 32, 51, 0.82) 6px 8px,
    transparent 8px 13px,
    rgba(23, 32, 51, 0.9) 13px 18px,
    transparent 18px 21px,
    rgba(23, 32, 51, 0.76) 21px 23px,
    transparent 23px 28px
  );
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  animation: task-barcode-sweep 4.8s ease-in-out infinite;
}

@keyframes task-barcode-sweep {
  0%,
  100% {
    opacity: 0.18;
    transform: translateX(16px) skewX(-12deg);
  }
  50% {
    opacity: 0.38;
    transform: translateX(-12px) skewX(-12deg);
  }
}

.task-package-cart-art {
  position: absolute;
  right: 8%;
  top: 16px;
  width: 92px;
  height: 61px;
  opacity: 0.36;
  pointer-events: none;
  animation: task-cart-drive 4.3s ease-in-out infinite;
}

.task-cart-box {
  position: absolute;
  left: 12px;
  top: 2px;
  width: 34px;
  height: 29px;
  border: 2px solid rgba(23, 32, 51, 0.82);
  border-radius: 4px;
  background: linear-gradient(135deg, rgba(255, 244, 178, 0.92), rgba(212, 175, 55, 0.9));
  box-shadow: 0 0 10px rgba(23, 32, 51, 0.16);
  animation: task-cart-box-bounce 1.45s ease-in-out infinite;
}

.task-cart-box::before,
.task-cart-box::after {
  content: '';
  position: absolute;
  background: rgba(23, 32, 51, 0.45);
}

.task-cart-box::before {
  top: 0;
  bottom: 0;
  left: 15px;
  width: 3px;
}

.task-cart-box::after {
  top: 9px;
  left: 5px;
  width: 22px;
  height: 2px;
}

.task-cart-body {
  position: absolute;
  left: 5px;
  bottom: 14px;
  width: 62px;
  height: 13px;
  border: 3px solid rgba(23, 32, 51, 0.84);
  border-top: 0;
  border-radius: 0 0 9px 9px;
}

.task-cart-body::after {
  content: '';
  position: absolute;
  right: -16px;
  top: -21px;
  width: 16px;
  height: 25px;
  border-right: 3px solid rgba(23, 32, 51, 0.84);
  border-top: 3px solid rgba(23, 32, 51, 0.84);
  border-radius: 0 8px 0 0;
  transform: skewX(9deg);
}

.task-cart-wheel {
  position: absolute;
  bottom: 4px;
  width: 13px;
  height: 13px;
  border: 3px solid rgba(23, 32, 51, 0.88);
  border-radius: 50%;
  background: rgba(255, 244, 178, 0.9);
  animation: task-cart-wheel-spin 0.85s linear infinite;
}

.task-cart-wheel::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: rgba(23, 32, 51, 0.75);
}

.task-cart-wheel-one {
  left: 17px;
}

.task-cart-wheel-two {
  left: 57px;
}

@keyframes task-cart-drive {
  0%,
  100% {
    transform: translateX(18px);
    opacity: 0.2;
  }
  18%,
  76% {
    opacity: 0.4;
  }
  50% {
    transform: translateX(-16px);
  }
}

@keyframes task-cart-box-bounce {
  0%,
  100% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-3px) rotate(-1deg);
  }
}

@keyframes task-cart-wheel-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .task-barcode-art,
  .task-package-cart-art,
  .task-cart-box,
  .task-cart-wheel {
    animation: none;
  }
}

#dashboardArea .tools-grid #toolCreateTask .tool-arrow {
  color: #172033;
  font-size: 44px;
  justify-self: end;
}

#dashboardArea .tools-grid #toolCreateTask:hover,
#dashboardArea .tools-grid #toolCreateTask:focus-visible {
  border-color: #fff4b2 !important;
  box-shadow:
    0 24px 54px rgba(212, 175, 55, 0.42),
    0 0 0 5px rgba(246, 201, 21, 0.17),
    inset 0 1px 0 rgba(255, 255, 255, 0.38) !important;
}

#dashboardArea .tools-grid #toolLowStock {
  position: relative;
  overflow: hidden;
  border-color: rgba(248, 113, 113, 0.38) !important;
}

#dashboardArea .tools-grid #toolLowStock > span:not(.low-stock-tool-art) {
  position: relative;
  z-index: 1;
}

.low-stock-tool-art {
  position: absolute;
  right: 14%;
  bottom: 8px;
  width: 78px;
  height: 62px;
  opacity: 0.46;
  pointer-events: none;
}

.low-stock-shelf {
  position: absolute;
  left: 3px;
  right: 3px;
  bottom: 5px;
  height: 6px;
  border-radius: 999px;
  background: #fca5a5;
  box-shadow:
    0 -29px 0 rgba(252, 165, 165, 0.52),
    0 0 10px rgba(248, 113, 113, 0.42);
}

.low-stock-shelf::before,
.low-stock-shelf::after {
  content: '';
  position: absolute;
  bottom: -8px;
  width: 5px;
  height: 44px;
  border-radius: 4px;
  background: rgba(252, 165, 165, 0.78);
}

.low-stock-shelf::before {
  left: 2px;
}

.low-stock-shelf::after {
  right: 2px;
}

.low-stock-box {
  position: absolute;
  left: 14px;
  bottom: 12px;
  width: 25px;
  height: 21px;
  border: 2px solid rgba(255, 244, 178, 0.9);
  border-radius: 4px;
  background: linear-gradient(135deg, #8d6512, #d4af37);
  box-shadow: 0 0 10px rgba(248, 223, 138, 0.36);
  animation: low-stock-box-shiver 2.2s ease-in-out infinite;
}

.low-stock-box::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 10px;
  width: 2px;
  background: rgba(255, 244, 178, 0.5);
}

.low-stock-alert {
  position: absolute;
  top: 0;
  right: 2px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 2px solid #fff4b2;
  border-radius: 50%;
  background: linear-gradient(135deg, #991b1b, #ef4444);
  color: #fff4b2;
  font-size: 21px;
  font-weight: 950;
  line-height: 1;
  box-shadow: 0 0 15px rgba(248, 113, 113, 0.72);
  animation: low-stock-alert-pulse 1.35s ease-in-out infinite;
}

@keyframes low-stock-box-shiver {
  0%,
  78%,
  100% {
    transform: translateX(0) rotate(0);
  }
  84% {
    transform: translateX(-2px) rotate(-2deg);
  }
  90% {
    transform: translateX(2px) rotate(2deg);
  }
  96% {
    transform: translateX(-1px) rotate(-1deg);
  }
}

@keyframes low-stock-alert-pulse {
  0%,
  100% {
    transform: scale(0.78);
    opacity: 0.55;
  }
  50% {
    transform: scale(1.12);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .low-stock-box,
  .low-stock-alert {
    animation: none;
  }
}

@media (max-width: 520px) {
  .low-stock-tool-art {
    right: 11%;
    bottom: 2px;
    opacity: 0.32;
    transform: scale(0.76);
    transform-origin: bottom right;
  }
}

#dashboardArea .tools-grid .tool-printers {
  position: relative;
  overflow: hidden;
  border-color: rgba(96, 165, 250, 0.38) !important;
}

#dashboardArea .tools-grid .tool-printers > span:not(.printer-tool-art) {
  position: relative;
  z-index: 1;
}

.printer-tool-art {
  position: absolute;
  right: 14%;
  bottom: 8px;
  width: 76px;
  height: 63px;
  opacity: 0.42;
  pointer-events: none;
}

.printer-tool-body {
  position: absolute;
  right: 3px;
  bottom: 4px;
  width: 56px;
  height: 34px;
  border: 2px solid rgba(147, 197, 253, 0.92);
  border-radius: 8px 8px 5px 5px;
  background: linear-gradient(145deg, #334155, #172033);
  box-shadow: 0 0 12px rgba(96, 165, 250, 0.3);
}

.printer-tool-body::before {
  content: '';
  position: absolute;
  top: 8px;
  right: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f8df8a;
  box-shadow: 0 0 8px rgba(248, 223, 138, 0.9);
  animation: printer-status-blink 1.25s ease-in-out infinite;
}

.printer-tool-paper {
  position: absolute;
  right: 10px;
  top: 1px;
  z-index: 1;
  width: 42px;
  height: 38px;
  border: 2px solid rgba(219, 234, 254, 0.94);
  border-radius: 3px;
  background:
    repeating-linear-gradient(180deg, rgba(30, 64, 175, 0.72) 0 2px, transparent 2px 7px), #eff6ff;
  background-position: 7px 8px;
  background-size: 27px 100%;
  background-repeat: repeat-y;
  box-shadow: 0 0 10px rgba(147, 197, 253, 0.34);
  animation: printer-paper-feed 2.7s ease-in-out infinite;
}

.printer-tool-line {
  position: absolute;
  right: 12px;
  top: 17px;
  z-index: 2;
  width: 38px;
  height: 2px;
  border-radius: 999px;
  background: #d4af37;
  box-shadow: 0 0 7px rgba(248, 223, 138, 0.9);
  animation: printer-line-scan 1.35s ease-in-out infinite;
}

@keyframes printer-paper-feed {
  0%,
  15% {
    transform: translateY(19px);
    opacity: 0.35;
  }
  55%,
  82% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-5px);
    opacity: 0;
  }
}

@keyframes printer-line-scan {
  0%,
  100% {
    transform: translateY(-7px) scaleX(0.74);
    opacity: 0.35;
  }
  50% {
    transform: translateY(15px) scaleX(1);
    opacity: 1;
  }
}

@keyframes printer-status-blink {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .printer-tool-paper,
  .printer-tool-line,
  .printer-tool-body::before {
    animation: none;
  }
}

@media (max-width: 520px) {
  .printer-tool-art {
    right: 11%;
    bottom: 2px;
    opacity: 0.3;
    transform: scale(0.76);
    transform-origin: bottom right;
  }
}

#dashboardArea .tools-grid .tool-scanners {
  position: relative;
  overflow: hidden;
  border-color: rgba(251, 146, 60, 0.4) !important;
}

#dashboardArea .tools-grid .tool-scanners > span:not(.scanner-camera-tool-art) {
  position: relative;
  z-index: 1;
}

.scanner-camera-tool-art {
  position: absolute;
  right: 12%;
  bottom: 5px;
  width: 96px;
  height: 70px;
  opacity: 0.45;
  pointer-events: none;
}

.scanner-device {
  position: absolute;
  left: 2px;
  top: 17px;
  width: 31px;
  height: 20px;
  border: 2px solid rgba(253, 186, 116, 0.95);
  border-radius: 7px 7px 5px 5px;
  background: linear-gradient(145deg, #334155, #172033);
  box-shadow: 0 0 11px rgba(251, 146, 60, 0.38);
  transform: rotate(-13deg);
  transform-origin: right center;
  animation: scanner-device-move 1.7s ease-in-out infinite;
}

.scanner-device::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 17px;
  width: 12px;
  height: 27px;
  border: 2px solid rgba(253, 186, 116, 0.9);
  border-top: 0;
  border-radius: 0 0 7px 7px;
  background: #172033;
  transform: skewX(-8deg);
}

.scanner-device::after {
  content: '';
  position: absolute;
  right: -5px;
  top: 5px;
  width: 6px;
  height: 7px;
  border-radius: 50%;
  background: #f8df8a;
  box-shadow: 0 0 8px rgba(248, 223, 138, 0.9);
}

.scanner-device-beam {
  position: absolute;
  left: 33px;
  top: 22px;
  width: 29px;
  height: 18px;
  border-top: 2px solid rgba(248, 223, 138, 0.9);
  border-bottom: 2px solid rgba(248, 223, 138, 0.36);
  clip-path: polygon(0 35%, 100% 0, 100% 100%, 0 65%);
  background: rgba(248, 223, 138, 0.12);
  transform: rotate(-7deg);
  transform-origin: left center;
  animation: scanner-device-beam-pulse 1.2s ease-in-out infinite;
}

.camera-phone {
  position: absolute;
  right: 1px;
  top: 3px;
  width: 34px;
  height: 59px;
  border: 3px solid rgba(147, 197, 253, 0.92);
  border-radius: 9px;
  background: linear-gradient(160deg, #1e293b, #0b1322);
  box-shadow: 0 0 12px rgba(96, 165, 250, 0.32);
  animation: camera-phone-float 2.2s ease-in-out infinite;
}

.camera-phone::after {
  content: '';
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 4px;
  height: 3px;
  border-radius: 999px;
  background: rgba(219, 234, 254, 0.72);
}

.camera-phone-lens {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 10px;
  height: 10px;
  border: 2px solid #bfdbfe;
  border-radius: 50%;
  background: #2563eb;
  box-shadow: 0 0 8px rgba(96, 165, 250, 0.85);
}

.camera-focus-frame {
  position: absolute;
  right: 8px;
  top: 25px;
  width: 20px;
  height: 17px;
  border: 2px solid rgba(248, 223, 138, 0.88);
  border-radius: 3px;
  animation: camera-focus-pulse 1.35s ease-in-out infinite;
}

@keyframes scanner-device-move {
  0%,
  100% {
    transform: rotate(-13deg) translateY(0);
  }
  50% {
    transform: rotate(-5deg) translateY(-4px);
  }
}

@keyframes scanner-device-beam-pulse {
  0%,
  100% {
    transform: rotate(-7deg) scaleX(0.55);
    opacity: 0.2;
  }
  50% {
    transform: rotate(-7deg) scaleX(1);
    opacity: 1;
  }
}

@keyframes camera-phone-float {
  0%,
  100% {
    transform: translateY(0) rotate(1deg);
  }
  50% {
    transform: translateY(-4px) rotate(-1deg);
  }
}

@keyframes camera-focus-pulse {
  0%,
  100% {
    transform: scale(0.72);
    opacity: 0.35;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scanner-device,
  .scanner-device-beam,
  .camera-phone,
  .camera-focus-frame {
    animation: none;
  }
}

@media (max-width: 520px) {
  .scanner-camera-tool-art {
    right: 8%;
    bottom: 0;
    opacity: 0.3;
    transform: scale(0.72);
    transform-origin: bottom right;
  }
}

#dashboardArea .tools-grid #toolCredit {
  position: relative;
  overflow: hidden;
  border-color: rgba(74, 222, 128, 0.36) !important;
}

#dashboardArea .tools-grid #toolCredit > span:not(.credit-tool-art) {
  position: relative;
  z-index: 1;
}

.credit-tool-art {
  position: absolute;
  right: 12%;
  bottom: 6px;
  width: 94px;
  height: 66px;
  opacity: 0.45;
  pointer-events: none;
}

.credit-card-art {
  position: absolute;
  left: 3px;
  top: 14px;
  width: 58px;
  height: 37px;
  border: 2px solid rgba(134, 239, 172, 0.92);
  border-radius: 8px;
  background:
    linear-gradient(90deg, transparent 0 9px, rgba(255, 255, 255, 0.2) 9px 12px, transparent 12px),
    linear-gradient(135deg, #047857, #10b981);
  box-shadow: 0 0 14px rgba(74, 222, 128, 0.38);
  transform-origin: center;
  animation: credit-card-swipe 2.8s ease-in-out infinite;
}

.credit-card-art::after {
  content: '';
  position: absolute;
  right: 7px;
  bottom: 7px;
  width: 20px;
  height: 3px;
  border-radius: 999px;
  background: rgba(236, 253, 245, 0.78);
}

.credit-card-chip {
  position: absolute;
  left: 8px;
  top: 10px;
  width: 13px;
  height: 10px;
  border: 1px solid rgba(120, 53, 15, 0.62);
  border-radius: 3px;
  background: linear-gradient(135deg, #f8df8a, #d4af37);
}

.credit-coin {
  position: absolute;
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border: 2px solid #fff4b2;
  border-radius: 50%;
  background: linear-gradient(135deg, #8d6512, #d4af37);
  color: #fff4b2;
  font-size: 12px;
  font-weight: 950;
  box-shadow: 0 0 10px rgba(248, 223, 138, 0.52);
  animation: credit-coin-rise 2.3s ease-in-out infinite;
}

.credit-coin-one {
  right: 5px;
  bottom: 3px;
}

.credit-coin-two {
  right: 24px;
  bottom: 0;
  animation-delay: 0.28s;
}

.credit-approved {
  position: absolute;
  top: 0;
  right: 2px;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border: 2px solid rgba(220, 252, 231, 0.94);
  border-radius: 50%;
  background: #16a34a;
  color: #f0fdf4;
  font-size: 16px;
  font-weight: 950;
  box-shadow: 0 0 12px rgba(74, 222, 128, 0.68);
  animation: credit-approved-pop 2.8s ease-in-out infinite;
}

@keyframes credit-card-swipe {
  0%,
  12% {
    transform: translateX(-12px) rotate(-4deg);
    opacity: 0.4;
  }
  48%,
  78% {
    transform: translateX(9px) rotate(1deg);
    opacity: 1;
  }
  100% {
    transform: translateX(13px) rotate(1deg);
    opacity: 0.55;
  }
}

@keyframes credit-coin-rise {
  0%,
  100% {
    transform: translateY(5px) scale(0.82);
    opacity: 0.45;
  }
  50% {
    transform: translateY(-5px) scale(1);
    opacity: 1;
  }
}

@keyframes credit-approved-pop {
  0%,
  48% {
    transform: scale(0.4);
    opacity: 0;
  }
  62%,
  86% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.7);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .credit-card-art,
  .credit-coin,
  .credit-approved {
    animation: none;
  }
}

@media (max-width: 520px) {
  .credit-tool-art {
    right: 8%;
    bottom: 1px;
    opacity: 0.3;
    transform: scale(0.74);
    transform-origin: bottom right;
  }
}

#dashboardArea .tools-grid #toolLowStock .tool-icon {
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
}

#dashboardArea .tools-grid .tool-printers .tool-icon {
  background: rgba(37, 99, 235, 0.22);
  color: #93c5fd;
}

#dashboardArea .tools-grid .tool-scanners .tool-icon {
  background: rgba(234, 88, 12, 0.22);
  color: #fdba74;
}

#dashboardArea .tools-grid #toolCredit .tool-icon {
  background: rgba(5, 150, 105, 0.22);
  color: #86efac;
}

#dashboardArea .tools-grid .tool-btn:hover,
#dashboardArea .tools-grid .tool-btn:focus-visible {
  transform: translateY(-3px);
  filter: brightness(1.08);
}

@media (max-width: 900px) {
  #dashboardArea .tools-grid #toolCreateTask {
    min-height: 116px !important;
    padding: 18px 14px !important;
  }
}

@media (max-width: 520px) {
  #dashboardArea .tools-grid {
    gap: 9px;
  }

  #dashboardArea .tools-grid .tool-btn {
    min-height: 66px !important;
    padding: 11px 10px !important;
  }

  #dashboardArea .tools-grid #toolCreateTask {
    grid-template-columns: 46px minmax(0, 1fr) 46px;
    min-height: 94px !important;
    padding: 12px 10px !important;
  }

  #dashboardArea .tools-grid #toolCreateTask .tool-icon {
    width: 46px;
    height: 46px;
    border-radius: 15px;
    font-size: 23px;
  }

  .task-barcode-art {
    right: 4%;
    width: 48%;
    height: 32px;
  }

  .task-package-cart-art {
    right: 4%;
    top: 8px;
    opacity: 0.26;
    transform: scale(0.72);
    transform-origin: top right;
  }
}
#view-barcode .lpn-batch-printer > div {
  margin-top: 12px;
}
#view-barcode .lpn-batch-printer select:focus-visible {
  outline: 3px solid #fff09a;
  outline-offset: 3px;
}