/* ==========================================================================
   Warehouse EXP Date v21.7 — Global UI / Popup Surface Repair R2
   Scope: dialogs, drawers, transient overlays, typography and multi-barcode UI.
   Marker: WAREHOUSE_UI_SURFACE_REPAIR_R2
   Replaces the old R1 patch; adds zero !important declarations.
   ========================================================================== */

:root {
  --wx-dialog-backdrop: rgba(15, 23, 42, .62);
  --wx-dialog-surface: var(--card-bg, #ffffff);
  --wx-dialog-raised: color-mix(in srgb, var(--card-bg, #ffffff) 94%, #f1f5f9 6%);
  --wx-dialog-soft: var(--surface-soft, var(--bg-main, #f8fafc));
  --wx-dialog-text: var(--text-main, #0f172a);
  --wx-dialog-muted: var(--text-muted, #64748b);
  --wx-dialog-border: var(--border, #dbe3ef);
  --wx-dialog-border-strong: #bcc8d8;
  --wx-dialog-accent: var(--secondary, #c21875);
  --wx-dialog-focus: rgba(194, 24, 117, .18);
  --wx-dialog-shadow: 0 30px 90px rgba(15, 23, 42, .26), 0 8px 26px rgba(15, 23, 42, .11);
  --wx-dialog-radius: 22px;
  --wx-dialog-control-h: 44px;
  --wx-dialog-title-size: clamp(17px, 1.65vw, 20px);
  --wx-dialog-body-size: 13.5px;
  --wx-dialog-small-size: 10.5px;
}

body[data-theme="dark"],
html[data-theme="dark"] body {
  --wx-dialog-backdrop: rgba(2, 6, 23, .80);
  --wx-dialog-surface: var(--card-bg, #111827);
  --wx-dialog-raised: #172033;
  --wx-dialog-soft: var(--surface-soft, #0f172a);
  --wx-dialog-text: var(--text-main, #f8fafc);
  --wx-dialog-muted: var(--text-muted, #b7c2d3);
  --wx-dialog-border: var(--border, #334155);
  --wx-dialog-border-strong: #53647b;
  --wx-dialog-focus: rgba(244, 114, 182, .24);
  --wx-dialog-shadow: 0 32px 96px rgba(0, 0, 0, .58), 0 10px 30px rgba(0, 0, 0, .34);
}

/* Direct coverage for every known v21.6 overlay plus generic future dialogs. */
body .modal-overlay,
body .confirm-modal-overlay,
body .transfer-details-overlay,
body .erp-modal-overlay,
body .dialog-overlay,
body .sheet-overlay,
body .notification-backdrop,
body #cloudConnectionModal,
body #cloudAccountModal,
body #userModal,
body #cameraModal,
body #itemModal,
body #stockActionModal,
body #masterItemModal,
body #confirmModal,
body #warehouseManagementModal,
body #pendingSyncModal,
body #addSiteModal,
body #transferDetailsModal,
body #transferModal {
  box-sizing: border-box;
  padding: clamp(14px, 3vw, 34px);
  background: var(--wx-dialog-backdrop);
  backdrop-filter: blur(9px) saturate(112%);
  -webkit-backdrop-filter: blur(9px) saturate(112%);
  align-items: center;
  justify-content: center;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable both-edges;
}

body .modal-overlay,
body .confirm-modal-overlay,
body .transfer-details-overlay,
body .erp-modal-overlay,
body .dialog-overlay,
body .sheet-overlay,
body #cloudConnectionModal,
body #cloudAccountModal,
body #userModal,
body #cameraModal,
body #itemModal,
body #stockActionModal,
body #masterItemModal,
body #confirmModal,
body #warehouseManagementModal,
body #pendingSyncModal,
body #addSiteModal,
body #transferDetailsModal,
body #transferModal { z-index: 12000; }
body .notification-backdrop { z-index: 12990; }
body #toast-container { z-index: 30000; }

/* Opaque surface contract. This is intentionally wider than R1. */
body .modal-card,
body .modal-box,
body .confirm-modal-card,
body .transfer-details-modal-box,
body .transfer-document-modal,
body .erp-modal-box,
body .dialog-card,
body .sheet-card,
body .cloud-connect-card,
body .cloud-account-card,
body .user-modal-card,
body .operation-modal,
body .item-card-modal,
body .warehouse-management-modal,
body .pending-sync-modal-card,
body .site-modal-card,
body #cloudConnectionModal > div,
body #cloudAccountModal > div,
body #userModal > div,
body #cameraModal > div,
body #itemModal > div,
body #stockActionModal > div,
body #masterItemModal > div,
body #confirmModal > div,
body #warehouseManagementModal > div,
body #pendingSyncModal > div,
body #addSiteModal > div,
body #transferDetailsModal > div,
body #transferModal > div {
  box-sizing: border-box;
  inline-size: min(920px, 100%);
  max-inline-size: calc(100vw - 28px);
  max-block-size: min(90dvh, 940px);
  min-inline-size: 0;
  min-block-size: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
  color: var(--wx-dialog-text);
  background: var(--wx-dialog-surface);
  border: 1px solid var(--wx-dialog-border);
  border-radius: var(--wx-dialog-radius);
  box-shadow: var(--wx-dialog-shadow);
  text-align: start;
  font-size: var(--wx-dialog-body-size);
  line-height: 1.65;
}
body .item-card-modal,
body .operation-modal,
body .transfer-document-modal,
body .warehouse-management-modal { inline-size: min(1080px, 100%); }
body .confirm-modal-card { inline-size: min(560px, 100%); }
body .user-modal-card,
body .cloud-account-card { inline-size: min(680px, 100%); }

/* Typography repair: no micro-copy, no negative Latin tracking leaking into Arabic. */
body .modal-card *, body .modal-box *, body .confirm-modal-card *,
body .dialog-card *, body .sheet-card *, body .operation-modal *,
body .item-card-modal *, body .notification-drawer *, body .auth-user-dropdown * {
  box-sizing: border-box;
  overflow-wrap: anywhere;
}
html[dir="rtl"] body .modal-card *,
html[dir="rtl"] body .modal-box *,
html[dir="rtl"] body .confirm-modal-card *,
html[dir="rtl"] body .dialog-card *,
html[dir="rtl"] body .sheet-card *,
html[dir="rtl"] body .operation-modal *,
html[dir="rtl"] body .item-card-modal *,
html[dir="rtl"] body .notification-drawer *,
html[dir="rtl"] body .auth-user-dropdown * { letter-spacing: 0; }

body .modal-card small, body .modal-box small, body .confirm-modal-card small,
body .dialog-card small, body .sheet-card small, body .operation-modal small,
body .item-card-modal small, body .notification-drawer small,
body .auth-user-dropdown small, body .modal-note, body .field-help,
body .form-help, body .helper-text, body .master-form-note {
  font-size: max(var(--wx-dialog-small-size), .72rem);
  line-height: 1.65;
  color: var(--wx-dialog-muted);
}

/* Header hierarchy. */
body .modal-header,
body .confirm-modal-head,
body .transfer-document-head,
body .dialog-header,
body .sheet-header,
body .drawer-header,
body .operation-modal-header,
body .item-card-modal-header {
  position: relative;
  flex: 0 0 auto;
  min-block-size: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  color: var(--wx-dialog-text);
  background: var(--wx-dialog-raised);
  border-block-end: 1px solid var(--wx-dialog-border);
}
body .modal-header h1, body .modal-header h2, body .modal-header h3,
body .confirm-modal-head h1, body .confirm-modal-head h2, body .confirm-modal-head h3,
body .dialog-header h1, body .dialog-header h2, body .dialog-header h3,
body .sheet-header h1, body .sheet-header h2, body .sheet-header h3,
body .drawer-header h1, body .drawer-header h2, body .drawer-header h3,
body .operation-modal-header h1, body .operation-modal-header h2,
body .item-card-modal-header h1, body .item-card-modal-header h2 {
  min-inline-size: 0;
  margin: 0;
  color: var(--wx-dialog-text);
  font-size: var(--wx-dialog-title-size);
  line-height: 1.45;
  font-weight: 900;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
body .modal-header p, body .modal-header small,
body .confirm-modal-head p, body .dialog-header p,
body .drawer-header p, body .drawer-header small {
  margin: 3px 0 0;
  color: var(--wx-dialog-muted);
  line-height: 1.65;
}

/* Close controls. */
body .modal-header .close-btn,
body .confirm-modal-head .close-btn,
body .drawer-header .close-btn,
body .dialog-header .close-btn,
body .sheet-header .close-btn,
body .modal-close,
body .modal-close-btn,
body .drawer-close {
  flex: 0 0 40px;
  inline-size: 40px;
  block-size: 40px;
  min-inline-size: 40px;
  min-block-size: 40px;
  display: inline-grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border-radius: 12px;
  border: 1px solid var(--wx-dialog-border);
  background: var(--wx-dialog-soft);
  color: var(--wx-dialog-text);
  line-height: 1;
  font-size: 18px;
  box-shadow: none;
}
body .modal-header .close-btn:hover,
body .confirm-modal-head .close-btn:hover,
body .drawer-header .close-btn:hover,
body .dialog-header .close-btn:hover,
body .sheet-header .close-btn:hover,
body .modal-close:hover, body .modal-close-btn:hover, body .drawer-close:hover {
  border-color: var(--wx-dialog-border-strong);
  background: var(--wx-dialog-raised);
  transform: translateY(-1px);
}

/* Body and scroll ownership. */
body .modal-body,
body .operation-modal-body,
body #modalBodyContent,
body .transfer-document-body,
body .transfer-details-body,
body .dialog-body,
body .sheet-body,
body .warehouse-management-body,
body .item-card-modal-body,
body .cloud-connect-body,
body .cloud-account-body,
body .user-modal-body {
  flex: 1 1 auto;
  min-block-size: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: clamp(15px, 2.4vw, 22px);
  color: var(--wx-dialog-text);
  background: var(--wx-dialog-surface);
}
body .modal-body > :first-child, body .operation-modal-body > :first-child,
body #modalBodyContent > :first-child, body .dialog-body > :first-child { margin-block-start: 0; }
body .modal-body > :last-child, body .operation-modal-body > :last-child,
body #modalBodyContent > :last-child, body .dialog-body > :last-child { margin-block-end: 0; }

/* Confirm copy separation. */
body .confirm-modal-message {
  margin: 0;
  padding: 18px 20px 8px;
  color: var(--wx-dialog-text);
  font-size: 14px;
  line-height: 1.8;
  font-weight: 800;
}
body .confirm-modal-details {
  margin: 10px 20px 16px;
  padding: 12px 14px;
  border: 1px solid var(--wx-dialog-border);
  border-radius: 13px;
  background: var(--wx-dialog-soft);
  color: var(--wx-dialog-muted);
  line-height: 1.75;
  white-space: pre-wrap;
}
body .confirm-modal-card.danger { border-color: rgba(220, 38, 38, .42); }

/* Footer/action rows. */
body .modal-footer, body .modal-actions, body .operation-actions,
body .confirm-modal-actions, body .dialog-actions, body .sheet-actions,
body .user-modal-actions, body .cloud-account-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 18px;
  background: var(--wx-dialog-raised);
  border-block-start: 1px solid var(--wx-dialog-border);
}
body .modal-footer button, body .modal-actions button, body .operation-actions button,
body .confirm-modal-actions button, body .dialog-actions button, body .sheet-actions button,
body .user-modal-actions button, body .cloud-account-actions button {
  min-block-size: 42px;
  min-inline-size: 104px;
  border-radius: 12px;
}

/* Explicit form contrast and readable hierarchy. */
body .modal-card label, body .modal-box label, body .confirm-modal-card label,
body .dialog-card label, body .sheet-card label, body .operation-modal label,
body .item-card-modal label {
  color: var(--wx-dialog-text);
  font-size: 12.5px;
  line-height: 1.55;
  font-weight: 800;
}
body .modal-card input:not([type="checkbox"]):not([type="radio"]),
body .modal-card select, body .modal-card textarea,
body .modal-box input:not([type="checkbox"]):not([type="radio"]),
body .modal-box select, body .modal-box textarea,
body .dialog-card input:not([type="checkbox"]):not([type="radio"]),
body .dialog-card select, body .dialog-card textarea,
body .operation-modal input:not([type="checkbox"]):not([type="radio"]),
body .operation-modal select, body .operation-modal textarea,
body .item-card-modal input:not([type="checkbox"]):not([type="radio"]),
body .item-card-modal select, body .item-card-modal textarea {
  min-block-size: var(--wx-dialog-control-h);
  inline-size: 100%;
  max-inline-size: 100%;
  border: 1px solid var(--wx-dialog-border);
  border-radius: 12px;
  background: var(--wx-dialog-soft);
  color: var(--wx-dialog-text);
  caret-color: var(--wx-dialog-accent);
  padding: 9px 12px;
  font-size: 13.5px;
  line-height: 1.45;
}
body .modal-card textarea, body .modal-box textarea, body .dialog-card textarea,
body .operation-modal textarea, body .item-card-modal textarea { min-block-size: 92px; resize: vertical; }
body .modal-card input::placeholder, body .modal-card textarea::placeholder,
body .modal-box input::placeholder, body .modal-box textarea::placeholder,
body .dialog-card input::placeholder, body .dialog-card textarea::placeholder,
body .operation-modal input::placeholder, body .operation-modal textarea::placeholder {
  color: var(--wx-dialog-muted);
  opacity: .82;
}
body .modal-card input:focus, body .modal-card select:focus, body .modal-card textarea:focus,
body .modal-box input:focus, body .modal-box select:focus, body .modal-box textarea:focus,
body .dialog-card input:focus, body .dialog-card select:focus, body .dialog-card textarea:focus,
body .operation-modal input:focus, body .operation-modal select:focus, body .operation-modal textarea:focus,
body .item-card-modal input:focus, body .item-card-modal select:focus, body .item-card-modal textarea:focus {
  outline: none;
  border-color: var(--wx-dialog-accent);
  box-shadow: 0 0 0 3px var(--wx-dialog-focus);
  background: var(--wx-dialog-surface);
}
body .modal-card input:disabled, body .modal-card select:disabled, body .modal-card textarea:disabled,
body .modal-card input[readonly], body .modal-box input[readonly] {
  opacity: .72;
  cursor: not-allowed;
  background: color-mix(in srgb, var(--wx-dialog-soft) 88%, var(--wx-dialog-border) 12%);
}
body .modal-card input[dir="ltr"], body .modal-card input[type="number"],
body .modal-card input[type="date"], body .modal-card input[type="time"],
body .modal-card .english-number-input, body .modal-box .english-number-input,
body .wx-barcode-input {
  direction: ltr;
  text-align: left;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* Inner sections. */
body .operation-summary, body .item-card-section, body .item-card-hero,
body .modal-card .form-section, body .modal-card .permission-section,
body .modal-card .site-scope-section, body .modal-box .detail-card,
body .master-form-summary, body .stock-action-summary, body .modal-summary {
  border: 1px solid var(--wx-dialog-border);
  border-radius: 15px;
  background: var(--wx-dialog-soft);
  color: var(--wx-dialog-text);
}
body .operation-summary strong, body .item-card-section strong,
body .item-card-hero strong, body .master-form-summary strong { color: var(--wx-dialog-text); }
body .operation-summary small, body .item-card-section small,
body .item-card-hero small, body .master-form-summary small { color: var(--wx-dialog-muted); }

/* Tables inside popups. */
body .modal-card table, body .modal-box table, body .dialog-card table,
body .operation-modal table, body .item-card-modal table {
  inline-size: 100%;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--wx-dialog-text);
  font-size: 12px;
}
body .modal-card th, body .modal-box th, body .dialog-card th,
body .operation-modal th, body .item-card-modal th {
  padding: 10px 11px;
  background: var(--wx-dialog-soft);
  color: var(--wx-dialog-text);
  border-block-end: 1px solid var(--wx-dialog-border);
  font-weight: 900;
}
body .modal-card td, body .modal-box td, body .dialog-card td,
body .operation-modal td, body .item-card-modal td {
  padding: 10px 11px;
  border-block-end: 1px solid var(--wx-dialog-border);
  color: var(--wx-dialog-text);
  vertical-align: top;
}

/* Notification Center. */
body .notification-drawer {
  z-index: 13000;
  inline-size: min(480px, 94vw);
  max-inline-size: 94vw;
  background: var(--wx-dialog-surface);
  color: var(--wx-dialog-text);
  border-inline-start: 1px solid var(--wx-dialog-border);
  box-shadow: var(--wx-dialog-shadow);
}
body .notification-drawer .drawer-header {
  min-block-size: 68px;
  padding: 14px 16px;
  background: var(--wx-dialog-raised);
  border-block-end: 1px solid var(--wx-dialog-border);
}
body .notification-drawer .drawer-title-text strong { color: var(--wx-dialog-text); font-size: 14px; }
body .notification-drawer .drawer-title-text small { color: var(--wx-dialog-muted); line-height: 1.55; }
body .notification-drawer .drawer-summary {
  gap: 8px;
  padding: 12px;
  background: var(--wx-dialog-surface);
  border-block-end: 1px solid var(--wx-dialog-border);
}
body .notification-drawer .drawer-summary-card,
body .notification-drawer .notification-card,
body .notification-drawer .drawer-notification,
body .notification-drawer .alert-card,
body .notification-drawer .notif-item {
  min-inline-size: 0;
  border: 1px solid var(--wx-dialog-border);
  border-radius: 13px;
  background: var(--wx-dialog-soft);
  color: var(--wx-dialog-text);
  font-size: 11.5px;
  line-height: 1.65;
}
body .notification-drawer .drawer-body {
  min-block-size: 0;
  overflow: auto;
  color: var(--wx-dialog-text);
  background: var(--wx-dialog-surface);
}

/* Searchable account dropdown. */
body .auth-user-dropdown {
  z-index: 14000;
  border: 1px solid var(--wx-dialog-border);
  border-radius: 16px;
  background: var(--wx-dialog-surface);
  color: var(--wx-dialog-text);
  box-shadow: var(--wx-dialog-shadow);
}
body .auth-user-search input {
  border-color: var(--wx-dialog-border);
  background: var(--wx-dialog-soft);
  color: var(--wx-dialog-text);
}
body .auth-user-dropdown-option {
  border-color: transparent;
  background: var(--wx-dialog-surface);
  color: var(--wx-dialog-text);
  min-block-size: 48px;
}
body .auth-user-dropdown-option:hover,
body .auth-user-dropdown-option.active,
body .auth-user-dropdown-option[aria-selected="true"] {
  border-color: var(--wx-dialog-border-strong);
  background: var(--wx-dialog-soft);
}
body .auth-user-dropdown-option-copy strong { color: var(--wx-dialog-text); font-size: 12px; }
body .auth-user-dropdown-option-copy small,
body .auth-user-dropdown-empty,
body .auth-user-dropdown-meta { color: var(--wx-dialog-muted); }

/* Toasts and progress overlays. */
body #toast-container .toast, body .toast {
  max-inline-size: min(440px, calc(100vw - 24px));
  border: 1px solid var(--wx-dialog-border);
  border-radius: 14px;
  background: var(--wx-dialog-raised);
  color: var(--wx-dialog-text);
  box-shadow: 0 18px 46px rgba(15, 23, 42, .22);
  font-size: 12.5px;
  line-height: 1.65;
}
body .progress-overlay {
  z-index: 40000;
  box-sizing: border-box;
  padding: 24px;
  gap: 14px;
  background: var(--wx-dialog-backdrop);
  color: #ffffff;
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}
body .progress-overlay #progressTitle {
  max-inline-size: min(640px, calc(100vw - 32px));
  margin: 0;
  padding: 16px 18px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 16px;
  background: rgba(15,23,42,.86);
  color: #ffffff;
  font-size: clamp(17px, 2.4vw, 21px);
  line-height: 1.55;
  text-align: center;
}
body .progress-overlay .progress-bar-container {
  inline-size: min(580px, calc(100vw - 40px));
  block-size: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  background: rgba(255,255,255,.14);
}
body .progress-overlay #progressStatusText {
  margin: 0;
  color: #ffffff;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

/* RTL/LTR alignment. */
html[dir="rtl"] body .modal-card, html[dir="rtl"] body .modal-box,
html[dir="rtl"] body .confirm-modal-card, html[dir="rtl"] body .notification-drawer,
html[dir="rtl"] body .operation-modal, html[dir="rtl"] body .item-card-modal { text-align: right; }
html[dir="ltr"] body .modal-card, html[dir="ltr"] body .modal-box,
html[dir="ltr"] body .confirm-modal-card, html[dir="ltr"] body .notification-drawer,
html[dir="ltr"] body .operation-modal, html[dir="ltr"] body .item-card-modal { text-align: left; }

/* Mobile bottom-sheet contract and compact barcode editor. */
@media (max-width: 760px) {
  body .modal-overlay, body .confirm-modal-overlay, body .transfer-details-overlay,
  body .erp-modal-overlay, body .dialog-overlay, body .sheet-overlay,
  body #cloudConnectionModal, body #cloudAccountModal, body #userModal,
  body #cameraModal, body #itemModal, body #stockActionModal, body #masterItemModal,
  body #confirmModal, body #warehouseManagementModal, body #pendingSyncModal,
  body #addSiteModal, body #transferDetailsModal, body #transferModal {
    padding: 0;
    align-items: flex-end;
  }
  body .modal-card, body .modal-box, body .confirm-modal-card,
  body .transfer-details-modal-box, body .transfer-document-modal, body .erp-modal-box,
  body .dialog-card, body .sheet-card, body .cloud-connect-card, body .cloud-account-card,
  body .user-modal-card, body .operation-modal, body .item-card-modal,
  body #cloudConnectionModal > div, body #cloudAccountModal > div, body #userModal > div,
  body #cameraModal > div, body #itemModal > div, body #stockActionModal > div,
  body #masterItemModal > div, body #confirmModal > div, body #warehouseManagementModal > div,
  body #pendingSyncModal > div, body #addSiteModal > div,
  body #transferDetailsModal > div, body #transferModal > div {
    inline-size: 100%;
    max-inline-size: 100%;
    max-block-size: 94dvh;
    border-inline: 0;
    border-block-end: 0;
    border-radius: 22px 22px 0 0;
    padding-block-end: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -18px 54px rgba(2, 6, 23, .28);
  }
  body .modal-header, body .confirm-modal-head, body .dialog-header,
  body .sheet-header, body .operation-modal-header, body .item-card-modal-header {
    min-block-size: 60px;
    padding: 15px 13px 11px;
  }
  body .modal-header::before, body .confirm-modal-head::before,
  body .dialog-header::before, body .sheet-header::before,
  body .operation-modal-header::before, body .item-card-modal-header::before {
    content: "";
    position: absolute;
    inset-block-start: 6px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    inline-size: 42px;
    block-size: 4px;
    border-radius: 999px;
    background: var(--wx-dialog-border-strong);
    opacity: .82;
  }
  body .modal-body, body .operation-modal-body, body #modalBodyContent,
  body .dialog-body, body .sheet-body, body .item-card-modal-body { padding: 13px; }
  body .modal-footer, body .modal-actions, body .operation-actions,
  body .confirm-modal-actions, body .dialog-actions, body .sheet-actions,
  body .user-modal-actions, body .cloud-account-actions {
    padding: 11px 12px calc(11px + env(safe-area-inset-bottom, 0px));
    gap: 8px;
  }
  body .modal-footer button, body .modal-actions button, body .operation-actions button,
  body .confirm-modal-actions button, body .dialog-actions button, body .sheet-actions button,
  body .user-modal-actions button, body .cloud-account-actions button {
    flex: 1 1 138px;
    min-block-size: 44px;
  }
  body .notification-drawer { inline-size: 100vw; max-inline-size: 100vw; }
  body .notification-drawer .drawer-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body .auth-user-dropdown {
    position: fixed;
    inset-block-start: auto;
    inset-block-end: max(8px, env(safe-area-inset-bottom, 8px));
    inset-inline: 8px;
    max-block-size: min(74dvh, 580px);
    border-radius: 20px;
    padding: 10px;
  }
  body .auth-user-options { max-block-size: min(52dvh, 400px); }
}

@media (max-width: 420px) {
}
@media (max-height: 700px) and (min-width: 761px) {
  body .modal-card, body .modal-box, body .confirm-modal-card,
  body .dialog-card, body .operation-modal, body .item-card-modal { max-block-size: 95dvh; }
}
@media (prefers-reduced-motion: reduce) {
  body .modal-card, body .modal-box, body .confirm-modal-card,
  body .auth-user-dropdown, body .notification-drawer, body .toast,
  body .operation-modal, body .item-card-modal { animation: none; transition: none; }
}
@media (prefers-contrast: more) {
  body .modal-card, body .modal-box, body .confirm-modal-card,
  body .auth-user-dropdown, body .notification-drawer,
  body .operation-modal, body .item-card-modal { border-width: 2px; }
}



/* --------------------------------------------------------------------------
   v21.7 Multi-barcode runtime alignment
   -------------------------------------------------------------------------- */
body .wx-barcode-manager {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
  margin-block-start: 12px;
  padding: 14px;
  color: var(--wx-dialog-text);
  background: var(--wx-dialog-soft);
  border: 1px solid var(--wx-dialog-border);
  border-radius: 16px;
}
body .wx-barcode-manager-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
body .wx-barcode-manager-title { display: grid; gap: 3px; min-inline-size: 0; }
body .wx-barcode-manager-title strong { color: var(--wx-dialog-text); font-size: 13.5px; line-height: 1.5; font-weight: 900; }
body .wx-barcode-manager-title small { color: var(--wx-dialog-muted); font-size: max(10.5px, .72rem); line-height: 1.65; }
body .wx-barcode-count {
  flex: 0 0 auto;
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
  padding: 5px 9px;
  border-radius: 999px;
  color: var(--wx-dialog-muted);
  background: var(--wx-dialog-raised);
  border: 1px solid var(--wx-dialog-border);
  font-size: 11px;
  font-weight: 800;
}
body .wx-barcode-add {
  min-block-size: 42px;
  inline-size: fit-content;
  padding-inline: 15px;
  border: 1px dashed color-mix(in srgb, var(--wx-dialog-accent) 58%, var(--wx-dialog-border));
  border-radius: 12px;
  color: var(--wx-dialog-accent);
  background: color-mix(in srgb, var(--wx-dialog-accent) 7%, var(--wx-dialog-surface));
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}
body .wx-barcode-add:hover { background: color-mix(in srgb, var(--wx-dialog-accent) 12%, var(--wx-dialog-surface)); }
body .wx-barcode-list { display: grid; gap: 9px; min-inline-size: 0; }
body .wx-barcode-empty {
  padding: 12px 14px;
  color: var(--wx-dialog-muted);
  background: var(--wx-dialog-surface);
  border: 1px dashed var(--wx-dialog-border);
  border-radius: 12px;
  line-height: 1.65;
}
body .wx-barcode-row {
  display: grid;
  grid-template-columns: minmax(160px, 1.4fr) minmax(125px, .8fr) minmax(110px, auto) 42px;
  gap: 9px;
  align-items: end;
  padding: 10px;
  background: var(--wx-dialog-surface);
  border: 1px solid var(--wx-dialog-border);
  border-radius: 13px;
}
body .wx-barcode-row.is-historical { opacity: .82; }
body .wx-barcode-value-wrap,
body .wx-barcode-type-wrap { display: grid; gap: 5px; min-inline-size: 0; }
body .wx-barcode-value-wrap label,
body .wx-barcode-type-wrap label { color: var(--wx-dialog-muted); font-size: 10.5px; line-height: 1.4; font-weight: 800; }
body .wx-barcode-value,
body .wx-barcode-type {
  inline-size: 100%;
  min-block-size: 42px;
  padding: 9px 11px;
  color: var(--wx-dialog-text);
  background: var(--wx-dialog-surface);
  border: 1px solid var(--wx-dialog-border-strong);
  border-radius: 11px;
  font: inherit;
}
body .wx-barcode-value { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
body .wx-barcode-value:focus,
body .wx-barcode-type:focus { outline: 3px solid var(--wx-dialog-focus); border-color: var(--wx-dialog-accent); }
body .wx-barcode-active {
  min-block-size: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 10px;
  color: var(--wx-dialog-text);
  background: var(--wx-dialog-raised);
  border: 1px solid var(--wx-dialog-border);
  border-radius: 11px;
  cursor: pointer;
  user-select: none;
}
body .wx-barcode-active.is-disabled { color: var(--wx-dialog-muted); cursor: default; }
body .wx-barcode-active input { inline-size: 17px; block-size: 17px; accent-color: var(--wx-dialog-accent); }
body .wx-barcode-remove {
  inline-size: 42px;
  block-size: 42px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, #dc2626 30%, var(--wx-dialog-border));
  border-radius: 11px;
  color: #b91c1c;
  background: color-mix(in srgb, #ef4444 7%, var(--wx-dialog-surface));
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
body[data-theme="dark"] .wx-barcode-remove,
html[data-theme="dark"] body .wx-barcode-remove { color: #fca5a5; background: rgba(248,113,113,.10); }
body .wx-barcode-column { min-inline-size: 190px; }
body .wx-barcode-chip-list { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
body .wx-barcode-chip,
body .wx-barcode-more {
  max-inline-size: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--wx-dialog-text);
  background: var(--wx-dialog-raised);
  border: 1px solid var(--wx-dialog-border);
  font-size: 10.5px;
  line-height: 1.35;
  font-weight: 800;
}
body .wx-barcode-chip.is-primary { border-color: color-mix(in srgb, var(--wx-dialog-accent) 58%, var(--wx-dialog-border)); }
body .wx-barcode-chip.is-inactive,
body .wx-barcode-chip.is-historical { opacity: .58; text-decoration: line-through; }
body .wx-barcode-more { color: var(--wx-dialog-muted); text-decoration: none; }
body .wx-barcode-none { color: var(--wx-dialog-muted); font-size: 10.5px; line-height: 1.5; }

@media (max-width: 760px) {
  body .wx-barcode-manager-head { align-items: stretch; flex-direction: column; }
  body .wx-barcode-count { align-self: flex-start; }
  body .wx-barcode-add { inline-size: 100%; }
  body .wx-barcode-row { grid-template-columns: minmax(0, 1fr) minmax(105px, .72fr); }
  body .wx-barcode-active { justify-content: center; }
  body .wx-barcode-remove { inline-size: 100%; }
  body .wx-barcode-column { min-inline-size: 150px; }
}
@media (max-width: 460px) {
  body .wx-barcode-row { grid-template-columns: 1fr; }
  body .wx-barcode-remove { inline-size: 100%; }
}

/* WAREHOUSE_UI_SURFACE_REPAIR_R2_END */