/* Label QR (LABEL-SCAN-001B). Every rule starts with a .label-scan- class, so nothing outside this feature is touched.
   Colours are the site's own theme variables (ui-theme-mode.css defines them for the dark default and for
   html[data-theme="light"]). Each var() keeps the dark value as its fallback, for when that file is not loaded. */

.label-scan-card {
  box-sizing: border-box;
  width: 100%;
  max-width: min(860px, 100%);
  margin: 0 0 12px;
  padding: 10px 14px;
  border: 1px solid var(--boba-border, rgba(255, 255, 255, 0.09));
  border-radius: 12px;
  background: var(--boba-surface, #131920);
  color: var(--boba-text, #f3f0e9);
}

.label-scan-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.label-scan-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--boba-text, #f3f0e9);
}

.label-scan-state {
  font-size: 13px;
  color: var(--boba-text-secondary, #c9c7c1);
}

.label-scan-hint {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--boba-text-secondary, #c9c7c1);
  overflow-wrap: anywhere;
}

.label-scan-error {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--boba-danger, #ed746e);
  overflow-wrap: anywhere;
}

.label-scan-error:empty {
  display: none;
}

/* The visible words of the switch are for screen readers only. The label stays attached to the switch through "for". */
.label-scan-switch-label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

/* A sliding switch: 44 by 24 pixels, a round knob that moves from left (off) to right (on). */
.label-scan-switch {
  -webkit-appearance: none !important;
  appearance: none !important;
  position: relative;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 44px !important;
  height: 24px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--boba-border, rgba(255, 255, 255, 0.09)) !important;
  border-radius: 12px !important;
  background: var(--boba-control, #0a1015) !important;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.label-scan-switch::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--boba-text-secondary, #c9c7c1);
  transition: transform 0.15s ease, background-color 0.15s ease;
}

/* The site's light-mode rule for inputs inside the app shell is !important with ids and classes in it (specificity 1,2,3).
   This rule has one more class than that, and ":is(#label-scan-switch)" adds the id, so the "on" colour wins (measured). */
.label-scan-card .label-scan-switch:checked:is(#label-scan-switch) {
  background: var(--boba-success, #59cb8c) !important;
  border-color: var(--boba-success, #59cb8c) !important;
}

.label-scan-switch:checked::before {
  transform: translateX(20px);
  background: var(--boba-surface, #131920);
}

.label-scan-switch:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.label-scan-switch:focus-visible {
  outline: 2px solid var(--boba-brand, #d4a650);
  outline-offset: 2px;
}

.label-scan-toast {
  position: fixed;
  top: 12px;
  left: 50%;
  z-index: 2000;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: min(560px, calc(100% - 32px));
  transform: translateX(-50%);
  padding: 12px 14px;
  border: 1px solid var(--boba-border-strong, rgba(224, 178, 91, 0.34));
  border-radius: 12px;
  background: var(--boba-surface-raised, #181f27);
  color: var(--boba-text, #f3f0e9);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

.label-scan-toast-text {
  flex: 1 1 auto;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--boba-text, #f3f0e9);
  overflow-wrap: anywhere;
}

.label-scan-toast-close {
  flex: 0 0 auto;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: var(--boba-text-secondary, #c9c7c1);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

/* The note under the opened customer's header (LABEL-SCAN-001C). On the phone it sits between the header and the tabs,
   which do not scroll; on the desktop the card scrolls, so the note stays at the top of it. */
.label-scan-notice {
  box-sizing: border-box;
  display: flex;
  flex: none;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 10px 16px;
  border-bottom: 1px solid var(--boba-border-strong, rgba(224, 178, 91, 0.34));
  background: var(--boba-surface-raised, #181f27);
  color: var(--boba-text, #f3f0e9);
  font-size: 14px;
  line-height: 1.6;
  position: sticky;
  top: 0;
  z-index: 3;
}

.label-scan-notice-text {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.label-scan-notice-close {
  flex: 0 0 auto;
  min-width: 36px;
  min-height: 36px;
  margin: -6px -8px -6px 0;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--boba-text-secondary, #c9c7c1);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

/* The scanned order: a ring round its row with space between the ring and the row's content, and a small tag at its top.
   The row's own rule gives it "padding: 16px 0" and a bottom border; the class is written twice so this one wins.
   The negative side margin takes the row's content back to the same place as an unmarked row. The tag's text is the
   surface colour on the brand colour, which reads at 4.5 or better in both modes. */
.label-scan-hit.label-scan-hit {
  margin: 8px -10px;
  padding: 12px 10px;
  border-radius: 6px;
  border-bottom-color: transparent;
  background: var(--boba-surface-raised, #181f27);
  box-shadow: 0 0 0 1px var(--boba-brand, #d4a650);
}

.label-scan-hit-tag {
  display: inline-block;
  margin: 0 0 8px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--boba-brand, #d4a650);
  color: var(--boba-surface, #131920);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
}

@media (max-width: 480px) {
  .label-scan-card {
    padding: 10px 12px;
  }

  .label-scan-toast {
    top: 8px;
    width: calc(100% - 16px);
  }
}