/* Shared glyph rhythm. Keep native form semantics and the existing dense layout. */
:root {
  --ui-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23536178' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ui-arrow-inset: 12px;
  --ui-arrow-space: 36px;
  --ui-icon-gap: 8px;
  --ui-focus: #304fc0;
}
select:not(.inline-select) { box-sizing: border-box; min-height: 36px; border: 1px solid #cbd5e1; border-radius: 7px; background-color: #fff; color: #354258; }
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]),textarea) {
  box-sizing: border-box; border: 1px solid #cbd5e1; border-radius: 7px;
  padding: 7px 10px; background-color: #fff; color: #354258; font-family: inherit;
}
.logs-pagination label { display: inline-flex; align-items: center; gap: 8px; }
.logs-pagination label select { min-width: 72px; padding-left: 10px; font: inherit; }
select:not([multiple]):not([size]), select[size="1"]:not([multiple]) {
  appearance: none !important;
  -webkit-appearance: none !important;
  padding-right: var(--ui-arrow-space) !important;
  background-image: var(--ui-chevron) !important;
  background-repeat: no-repeat !important;
  background-position: right var(--ui-arrow-inset) center !important;
  background-size: 16px 16px !important;
  text-overflow: ellipsis;
}
.shop-multi-toggle { padding-right: var(--ui-arrow-space) !important; }
/* Legacy status colors use !important background shorthands, which reset repeat. */
:root #appView #ordersPage .orders-sheet select.inline-select {
  background-image: var(--ui-chevron) !important;
  background-repeat: no-repeat !important;
  background-position: right var(--ui-arrow-inset) center !important;
  background-size: 16px 16px !important;
}
.shop-multi-toggle > i {
  width: 16px; height: 16px; right: var(--ui-arrow-inset); top: 50%;
  margin-top: -8px !important; border: 0; background: var(--ui-chevron) center / 16px 16px no-repeat;
  transform: none;
}
.shop-multi-filter.is-open .shop-multi-toggle > i { transform: rotate(180deg); }
.ui-icon { display: inline-block; flex-shrink: 0; }
button:has(> .ui-icon) { gap: var(--ui-icon-gap); line-height: 1.4; }
:is(.filter-actions,.module-filter-actions,dialog footer) button > .ui-icon { width: 16px; height: 16px; }
.topbar nav button { gap: var(--ui-icon-gap); }
.topbar nav button i { flex-shrink: 0; }
.topbar nav button i > .ui-icon { width: 16px; height: 16px; }
.quick-filters button, .report-quick button { gap: 6px; }
.quick-filters button > .ui-icon, .report-quick button > .ui-icon { width: 14px; height: 14px; }
:is(.page-heading,.stock-toolbar,.hot-toolbar,.report-toolbar,.logs-toolbar,.admin-module-toolbar) h1 {
  display: flex; align-items: center; gap: 8px;
}
.after-sales-details summary > span { display: inline-flex; align-items: center; gap: 6px; }
.after-sales-fields label { gap: 6px; }
:is(.form-grid,.settings-personal-grid,.qwen-settings-form) label { row-gap: 8px; }
dialog header { align-items: center; gap: 16px; }
dialog header > div { min-width: 0; }
:is(#closeDialog,#closeInventoryDialog,#closeImageDialog,#closeUserDialog,#closeSmartOrderDialog,#closeProfileDialog,#closeRestorePasswordDialog,#closeActionConfirm) {
  flex-shrink: 0; min-width: 36px; min-height: 36px; display: grid; place-items: center;
  padding: 0; line-height: 1;
}
:is(button,input,select,textarea,summary,[tabindex]):focus-visible {
  outline: 2px solid var(--ui-focus) !important;
  outline-offset: 2px !important;
}
button:not(:disabled) { touch-action: manipulation; }
button:disabled { cursor: not-allowed; }
:is(input,select,textarea)[aria-invalid="true"] { border-color: #b42336 !important; }
.shop-filter-option { gap: 8px; }
.shop-filter-option span { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
#appView #ordersPage #filters .shop-filter-option { height: auto !important; padding-block: 8px; }
#appView #ordersPage #filters .shop-filter-option input[type="checkbox"] {
  width: 18px !important; height: 18px !important; min-height: 18px !important;
  min-width: 18px !important; flex: 0 0 18px !important; padding: 0 !important; margin: 0;
}
input:is([type="checkbox"],[type="radio"]) { accent-color: var(--ui-focus); }
dialog button[aria-label^="关闭"] { flex-shrink: 0; }
.address-copy-wrap .address-copy-button { width: 24px !important; height: 24px !important; min-width: 24px; min-height: 24px; padding: 4px; }
.address-copy-wrap :is(.inline-textarea,.row-display) { padding-right: 34px !important; }
#closeSmartOrder { min-width: 36px; min-height: 36px; padding: 0; display: grid; place-items: center; }
#metrics .metric.metric-ad-expense .metric-icon { background: #f2eeff; color: #694bb6; }
.metric.metric-ad-expense .metric-copy > b { font-variant-numeric: tabular-nums; }
/* Ten KPIs must stay visible: old nine-column/fixed-height grids clipped them. */
@media (min-width: 1600px) {
  #appView #ordersPage > .order-overview-row > .metrics { grid-template-columns: repeat(2,minmax(86px,.65fr)) repeat(8,minmax(120px,1fr)) !important; }
}
@media (min-width: 901px) and (max-width: 1599px) {
  #appView #ordersPage > .order-overview-row { height: 118px !important; min-height: 118px !important; max-height: none !important; min-width: 0 !important; grid-template-columns: 280px minmax(0,1fr) !important; }
  #appView #ordersPage > .order-overview-row > .metrics { grid-template-columns: repeat(5,minmax(0,1fr)) !important; height: 118px !important; min-height: 118px !important; max-height: none !important; }
  #appView #ordersPage .order-overview-row .greeting-band,
  #appView #ordersPage .order-overview-row .daily-greeting,
  #appView #ordersPage .order-overview-row .greeting-main,
  #appView #ordersPage .order-overview-row .greeting-datetime { height: 118px !important; min-height: 118px !important; max-height: none !important; }
  #appView #ordersPage .order-overview-row .metrics .metric:nth-child(6) { border-left: 0; }
}
@media (min-width: 901px) and (max-width: 1199px) {
  #appView #ordersPage > .order-overview-row { grid-template-columns: minmax(0,1fr) !important; height: auto !important; }
  #appView #ordersPage .order-overview-row .greeting-band,
  #appView #ordersPage .order-overview-row .daily-greeting,
  #appView #ordersPage .order-overview-row .greeting-main,
  #appView #ordersPage .order-overview-row .greeting-datetime { height: 60px !important; min-height: 60px !important; }
}
/* A smaller but still inset chevron fits the intentionally compact table cells. */
@media (min-width: 901px) {
  html:not(.phone-desktop-layout) #appView #ordersPage .orders-sheet .inline-select {
    padding-left: 3px !important; padding-right: 20px !important;
    background-image: var(--ui-chevron) !important;
    background-position: right 5px center !important; background-size: 12px 12px !important;
  }
  html:not(.phone-desktop-layout) #ordersPage .orders-sheet .actions button { gap: 4px; min-height: 26px; }
}
/* Override the old phone desktop padding without changing its compact viewport. */
html.phone-desktop-layout #appView #ordersPage > #filters select,
html.phone-desktop-layout #appView #ordersPage > #filters .shop-multi-toggle {
  padding-right: 28px !important; --ui-arrow-inset: 8px;
}
@media (max-width: 900px) {
  .address-copy-wrap .address-copy-button { width: 44px !important; height: 44px !important; padding: 12px; }
  .address-copy-wrap :is(.inline-textarea,.row-display) { padding-right: 54px !important; }
  #closeSmartOrder { min-width: 44px; min-height: 44px; }
  #appView #ordersPage .orders-sheet select.inline-select {
    padding-right: var(--ui-arrow-space) !important;
    background-position: right var(--ui-arrow-inset) center !important;
    background-size: 16px 16px !important;
  }
  :is(#closeDialog,#closeInventoryDialog,#closeImageDialog,#closeUserDialog,#closeSmartOrderDialog,#closeProfileDialog,#closeRestorePasswordDialog,#closeActionConfirm) { min-width: 44px; min-height: 44px; }
}
@media (forced-colors: active) {
  select:not([multiple]):not([size]), select[size="1"]:not([multiple]),
  :root #appView #ordersPage .orders-sheet select.inline-select {
    appearance: auto !important; -webkit-appearance: auto !important;
    background-image: none !important;
  }
  .shop-multi-toggle > i { background: none; width: 7px; height: 7px; border-right: 2px solid ButtonText; border-bottom: 2px solid ButtonText; transform: rotate(45deg); }
  .ads-shop-picker > summary > i { background: none; width: 7px; height: 7px; border-right: 2px solid ButtonText; border-bottom: 2px solid ButtonText; transform: rotate(45deg); }
}
@media (max-width: 360px) {
  #appView #ordersPage > #filters > select { grid-column: 1 / -1 !important; }
}
@media (prefers-reduced-motion: reduce) { .shop-multi-toggle > i { transition: none; } }

/* Highlight multi-piece quantities without resizing the column or fading digits. */
.order-quantity { position: relative; display: inline-block; vertical-align: middle; }
.order-quantity--editable { width: 100%; }
.order-quantity.is-multiple:not(.order-quantity--editable) {
  box-sizing: border-box; min-width: 24px; min-height: 24px;
  padding: 2px 4px; line-height: 20px; text-align: center;
}
.order-quantity.is-multiple::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border: 1px solid #d92d42; border-radius: 3px;
  animation: quantity-border-pulse 2s ease-in-out infinite;
}
@keyframes quantity-border-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}
.order-quantity:focus-within::after { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .order-quantity.is-multiple::after { animation: none; }
}
@media (forced-colors: active) {
  .order-quantity.is-multiple::after { border-color: Highlight; animation: none; }
}