.pos-dashboard,
.pos-report,
.pos-management,
.pos-account,
.pos-return-page,
#pos-ui.pos-invoice-page,
#pos-ui-purchase-inv.pos-invoice-page,
.pos-admin-overview {
  --pos-bg: #f4f6f9;
  --pos-surface: #ffffff;
  --pos-surface-soft: #f5f7fb;
  --pos-border: #d9dee7;
  --pos-border-strong: #aeb8c7;
  --pos-text: #1f2933;
  --pos-muted: #667085;
  --pos-primary: #407f71;
  --pos-primary-hover: #2f665a;
  --pos-success: #2f9e64;
  --pos-warning: #c88312;
  --pos-danger: #d9303e;
  --pos-info: #2563eb;
  --pos-token-bg: var(--pos-bg);
  --pos-token-surface: var(--pos-surface);
  --pos-token-surface-soft: var(--pos-surface-soft);
  --pos-token-border: var(--pos-border);
  --pos-token-border-strong: var(--pos-border-strong);
  --pos-token-text: var(--pos-text);
  --pos-token-muted: var(--pos-muted);
  --pos-token-primary: var(--pos-primary);
  --pos-token-primary-hover: var(--pos-primary-hover);
  --pos-token-success: var(--pos-success);
  --pos-token-warning: var(--pos-warning);
  --pos-token-danger: var(--pos-danger);
  --pos-token-info: var(--pos-info);
  --pos-radius-sm: 6px;
  --pos-radius: 8px;
  --pos-radius-lg: 12px;
  --pos-shadow-sm: 0 1px 4px rgba(17, 24, 39, 0.06);
  --pos-shadow: 0 6px 18px rgba(17, 24, 39, 0.07);
  --pos-space-1: 4px;
  --pos-space-2: 8px;
  --pos-space-3: 12px;
  --pos-space-4: 16px;
  --pos-space-5: 20px;
  --pos-font-sm: 12px;
  --pos-font-md: 14px;
  --pos-font-lg: 18px;
  --pos-control-height: 40px;
  color: var(--pos-text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.pos-dashboard *,
.pos-report *,
.pos-management *,
.pos-account *,
.pos-return-page *,
#pos-ui.pos-invoice-page *,
#pos-ui-purchase-inv.pos-invoice-page *,
.pos-admin-overview * {
  box-sizing: border-box;
}

.pos-dashboard a,
.pos-report a,
.pos-management a,
.pos-account a,
.pos-return-page a,
#pos-ui.pos-invoice-page a,
#pos-ui-purchase-inv.pos-invoice-page a,
.pos-admin-overview a {
  text-decoration: none;
}

.pos-dashboard :focus-visible,
.pos-report :focus-visible,
.pos-management :focus-visible,
.pos-account :focus-visible,
.pos-return-page :focus-visible,
#pos-ui.pos-invoice-page :focus-visible,
#pos-ui-purchase-inv.pos-invoice-page :focus-visible,
.pos-admin-overview :focus-visible {
  outline: 3px solid rgba(64, 127, 113, 0.24);
  outline-offset: 2px;
}

.pos-dashboard button:disabled,
.pos-report button:disabled,
.pos-management button:disabled,
.pos-account button:disabled,
.pos-return-page button:disabled,
#pos-ui.pos-invoice-page button:disabled,
#pos-ui-purchase-inv.pos-invoice-page button:disabled,
.pos-admin-overview button:disabled,
.pos-dashboard input[type="submit"]:disabled,
.pos-report input[type="submit"]:disabled,
.pos-management input[type="submit"]:disabled,
.pos-account input[type="submit"]:disabled,
.pos-return-page input[type="submit"]:disabled,
#pos-ui.pos-invoice-page input[type="submit"]:disabled,
#pos-ui-purchase-inv.pos-invoice-page input[type="submit"]:disabled,
.pos-admin-overview input[type="submit"]:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

/* Keep the POS select indicator independent from the active Drupal theme. */
.pos-dashboard select,
.pos-report select,
.pos-management select,
.pos-account select,
.pos-return-page select,
#pos-ui.pos-invoice-page select,
#pos-ui-purchase-inv.pos-invoice-page select,
.pos-admin-overview select,
.pos-company-switcher select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23556370' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6'/%3E%3C/svg%3E") !important;
  background-position: right 14px center !important;
  background-repeat: no-repeat !important;
  background-size: 12px 8px !important;
  padding-inline-end: 42px !important;
}

.pos-dashboard select:focus,
.pos-report select:focus,
.pos-management select:focus,
.pos-account select:focus,
.pos-return-page select:focus,
#pos-ui.pos-invoice-page select:focus,
#pos-ui-purchase-inv.pos-invoice-page select:focus,
.pos-admin-overview select:focus,
.pos-company-switcher select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23556370' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6'/%3E%3C/svg%3E") !important;
}

.pos-dashboard select:disabled,
.pos-report select:disabled,
.pos-management select:disabled,
.pos-account select:disabled,
.pos-return-page select:disabled,
#pos-ui.pos-invoice-page select:disabled,
#pos-ui-purchase-inv.pos-invoice-page select:disabled,
.pos-admin-overview select:disabled,
.pos-company-switcher select:disabled {
  background-color: #f2f4f7;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2398a2b3' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6'/%3E%3C/svg%3E") !important;
}

[dir="rtl"] .pos-dashboard select,
[dir="rtl"] .pos-report select,
[dir="rtl"] .pos-management select,
[dir="rtl"] .pos-account select,
[dir="rtl"] .pos-return-page select,
[dir="rtl"] #pos-ui.pos-invoice-page select,
[dir="rtl"] #pos-ui-purchase-inv.pos-invoice-page select,
[dir="rtl"] .pos-admin-overview select,
[dir="rtl"] .pos-company-switcher select {
  background-position: left 14px center !important;
  padding-inline-end: 10px !important;
  padding-inline-start: 42px !important;
}

/* Multiple selects are list controls, not dropdowns, so retain their native list UI. */
.pos-dashboard select[multiple],
.pos-report select[multiple],
.pos-management select[multiple],
.pos-account select[multiple],
.pos-return-page select[multiple],
#pos-ui.pos-invoice-page select[multiple],
#pos-ui-purchase-inv.pos-invoice-page select[multiple],
.pos-admin-overview select[multiple],
.pos-company-switcher select[multiple] {
  appearance: auto;
  background-image: none !important;
  padding-inline-start: 10px !important;
  padding-inline-end: 10px !important;
}