/*
 * Merchant operations refresh
 * Loaded after the shared PERABOX theme so operational hierarchy, readable
 * type, and field-use accessibility remain app-specific.
 */

body[data-perabox-app="merchant"] {
  --merchant-bg: #f4f2eb;
  --merchant-surface: #fffefa;
  --merchant-surface-soft: #f8f6ef;
  --merchant-ink: #1b1a16;
  --merchant-muted: #66655f;
  --merchant-faint: #85847c;
  --merchant-line: #d9d6cc;
  --merchant-gold: #e9b949;
  --merchant-gold-soft: #fff3ca;
  --merchant-lime: #c7ef49;
  --merchant-green: #227456;
  --merchant-green-soft: #e1f4e8;
  --merchant-coral: #c74f3d;
  --merchant-coral-soft: #fff0ec;
  --merchant-shadow: 0 16px 42px rgba(40, 31, 12, 0.08);
  --merchant-z-base: 0;
  --merchant-z-sticky: 20;
  --merchant-z-drawer: 40;
  --merchant-z-scrim: 30;
  --merchant-z-toast: 80;
  min-width: 320px;
  background: var(--merchant-bg);
  color: var(--merchant-ink);
  font-size: 16px;
  line-height: 1.55;
}

body[data-perabox-app="merchant"] *,
body[data-perabox-app="merchant"] *::before,
body[data-perabox-app="merchant"] *::after {
  min-width: 0;
}

body[data-perabox-app="merchant"] :where(button, a, input, select, textarea) {
  touch-action: manipulation;
}

body[data-perabox-app="merchant"] :where(button, a[href], select, label[for], .toggle-field) {
  cursor: pointer;
}

body[data-perabox-app="merchant"] :where(.button, .icon-button, .nav-link, .support-note, .text-button, .period-select, .filter-chip) {
  min-height: 44px;
}

body[data-perabox-app="merchant"] :where(.button, .icon-button, .nav-link, .support-note, .text-button, .period-select, .filter-chip, .menu-card, .notification-item) {
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease,
    opacity 180ms ease;
}

body[data-perabox-app="merchant"] :where(.button, .nav-link, .text-button, .menu-card):hover {
  transform: none;
}

body[data-perabox-app="merchant"] :where(button, a[href]):active {
  opacity: 0.78;
}

body[data-perabox-app="merchant"] :where(button, input, select, textarea):disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

body[data-perabox-app="merchant"] .skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--merchant-surface);
  color: var(--merchant-ink);
  box-shadow: var(--merchant-shadow);
  transform: translateY(-160%);
  transition: transform 180ms ease;
}

body[data-perabox-app="merchant"] .skip-link:focus-visible {
  transform: translateY(0);
}

body[data-perabox-app="merchant"] .main-content:focus {
  outline: 0;
}

/* Shell and navigation */
body[data-perabox-app="merchant"] .sidebar {
  z-index: var(--merchant-z-drawer);
  width: 264px;
  padding: 28px 20px max(20px, env(safe-area-inset-bottom));
}

body[data-perabox-app="merchant"] .main-content {
  margin-left: 264px;
  background:
    radial-gradient(circle at 88% 8%, rgba(233, 185, 73, 0.08), transparent 24rem),
    var(--merchant-bg);
}

body[data-perabox-app="merchant"] .brand {
  font-size: 1.25rem;
}

body[data-perabox-app="merchant"] .brand small,
body[data-perabox-app="merchant"] .nav-label {
  font-size: 0.6875rem;
  line-height: 1.35;
}

body[data-perabox-app="merchant"] .nav-list {
  gap: 8px;
  margin-top: 44px;
}

body[data-perabox-app="merchant"] .nav-link {
  gap: 12px;
  padding: 0 14px;
  font-size: 0.875rem;
}

body[data-perabox-app="merchant"] .nav-link:hover {
  background: rgba(255, 255, 255, 0.07);
}

body[data-perabox-app="merchant"] .nav-count {
  min-width: 24px;
  padding: 3px 7px;
  font-size: 0.6875rem;
}

body[data-perabox-app="merchant"] .store-mini {
  grid-template-columns: 40px 1fr 10px;
  min-height: 64px;
  padding: 10px;
}

body[data-perabox-app="merchant"] .store-avatar {
  width: 40px;
  height: 40px;
  font-size: 0.75rem;
}

body[data-perabox-app="merchant"] .store-mini strong {
  font-size: 0.75rem;
}

body[data-perabox-app="merchant"] .store-mini div span,
body[data-perabox-app="merchant"] .support-note div span {
  font-size: 0.6875rem;
  line-height: 1.4;
}

body[data-perabox-app="merchant"] .support-note {
  gap: 12px;
  padding: 10px;
}

body[data-perabox-app="merchant"] .support-icon {
  width: 30px;
  height: 30px;
  font-size: 0.75rem;
}

body[data-perabox-app="merchant"] .support-note strong {
  font-size: 0.75rem;
}

body[data-perabox-app="merchant"] .topbar {
  z-index: var(--merchant-z-sticky);
  min-height: 88px;
  padding: 16px clamp(24px, 3.2vw, 48px);
}

body[data-perabox-app="merchant"] .page-heading p {
  font-size: 0.6875rem;
}

body[data-perabox-app="merchant"] .page-heading h1 {
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  line-height: 1.2;
}

body[data-perabox-app="merchant"] .connection-pill {
  min-height: 40px;
  padding-inline: 13px;
  font-size: 0.6875rem;
}

body[data-perabox-app="merchant"] .icon-button {
  width: 44px;
  height: 44px;
}

body[data-perabox-app="merchant"] .button {
  padding-inline: 18px;
  font-size: 0.8125rem;
  line-height: 1.25;
}

body[data-perabox-app="merchant"] .content-wrap {
  width: min(100%, 1440px);
  padding: 32px clamp(24px, 3.2vw, 48px) 80px;
}

/* Dashboard action hierarchy */
body[data-perabox-app="merchant"] .setup-banner {
  padding: 18px 20px;
}

body[data-perabox-app="merchant"] .setup-banner-icon {
  width: 44px;
  height: 44px;
}

body[data-perabox-app="merchant"] .setup-banner-icon svg {
  width: 22px;
}

body[data-perabox-app="merchant"] .setup-banner strong {
  font-size: 0.9375rem;
}

body[data-perabox-app="merchant"] .setup-banner span {
  font-size: 0.75rem;
  line-height: 1.5;
}

body[data-perabox-app="merchant"] .operations-brief {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 16px;
  padding: 22px 24px;
  overflow: hidden;
  border: 1px solid rgba(233, 185, 73, 0.24);
  border-radius: 14px;
  background:
    radial-gradient(circle at 92% 10%, rgba(199, 239, 73, 0.12), transparent 14rem),
    linear-gradient(135deg, #171611, #0c0c0a);
  color: #f7f4ea;
  box-shadow: 0 20px 52px rgba(25, 20, 10, 0.16);
}

body[data-perabox-app="merchant"] .operations-brief-copy {
  max-width: 720px;
}

body[data-perabox-app="merchant"] .operations-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #b7b2a8;
  font-size: 0.75rem;
}

body[data-perabox-app="merchant"] .operations-status > i {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #63d19d;
  box-shadow: 0 0 0 4px rgba(99, 209, 157, 0.12);
}

body[data-perabox-app="merchant"] .operations-status strong {
  color: #8de0b8;
  font-size: 0.75rem;
}

body[data-perabox-app="merchant"] .operations-status.is-closed > i {
  background: #ef8b7a;
  box-shadow: 0 0 0 4px rgba(239, 139, 122, 0.12);
}

body[data-perabox-app="merchant"] .operations-status.is-closed strong {
  color: #ffad9f;
}

body[data-perabox-app="merchant"] .operations-brief h2 {
  margin: 8px 0 4px;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.035em;
}

body[data-perabox-app="merchant"] .operations-brief p {
  max-width: 680px;
  margin: 0;
  color: #aaa69e;
  font-size: 0.875rem;
  line-height: 1.55;
}

body[data-perabox-app="merchant"] .operations-brief-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
}

body[data-perabox-app="merchant"] .operations-brief .button-secondary {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.07);
  color: #f7f4ea;
}

body[data-perabox-app="merchant"] .queue-button b {
  display: grid;
  min-width: 24px;
  height: 24px;
  place-items: center;
  padding-inline: 6px;
  border-radius: 999px;
  background: #171208;
  color: var(--pb-gold-2);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

body[data-perabox-app="merchant"] .stat-grid {
  gap: 12px;
}

body[data-perabox-app="merchant"] .stat-card {
  min-height: 172px;
  padding: 20px;
  background: var(--merchant-surface);
}

body[data-perabox-app="merchant"] .stat-card p {
  margin-top: 20px;
  color: var(--merchant-muted);
  font-size: 0.75rem;
}

body[data-perabox-app="merchant"] .stat-card h2 {
  font-size: clamp(1.75rem, 2.5vw, 2.25rem);
  font-variant-numeric: tabular-nums;
}

body[data-perabox-app="merchant"] .stat-card small,
body[data-perabox-app="merchant"] .trend {
  font-size: 0.6875rem;
}

body[data-perabox-app="merchant"] .stat-card small {
  overflow: visible;
  line-height: 1.45;
  text-overflow: clip;
  white-space: normal;
}

body[data-perabox-app="merchant"] .stat-icon {
  width: 40px;
  height: 40px;
}

body[data-perabox-app="merchant"] .stat-icon svg {
  width: 20px;
}

body[data-perabox-app="merchant"] .panel {
  background: var(--merchant-surface);
}

body[data-perabox-app="merchant"] .panel-header {
  padding: 22px 22px 16px;
}

body[data-perabox-app="merchant"] .panel-header h2 {
  font-size: 1.125rem;
}

body[data-perabox-app="merchant"] .section-kicker,
body[data-perabox-app="merchant"] .live-label {
  font-size: 0.6875rem;
}

body[data-perabox-app="merchant"] .text-button,
body[data-perabox-app="merchant"] .period-select {
  display: inline-flex;
  min-width: 44px;
  align-items: center;
  gap: 7px;
  padding-inline: 10px;
  font-size: 0.75rem;
}

body[data-perabox-app="merchant"] :where(.text-button, .period-select) svg {
  width: 16px;
  height: 16px;
}

body[data-perabox-app="merchant"] .dashboard-grid {
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.75fr);
}

body[data-perabox-app="merchant"] .compact-order {
  grid-template-columns: 44px minmax(0, 1fr) auto auto;
  min-height: 72px;
  gap: 12px;
  padding: 13px 10px;
}

body[data-perabox-app="merchant"] .order-symbol {
  width: 44px;
  height: 44px;
}

body[data-perabox-app="merchant"] .order-symbol svg {
  width: 21px;
  height: 21px;
}

body[data-perabox-app="merchant"] .compact-order-info strong,
body[data-perabox-app="merchant"] .compact-order-amount {
  font-size: 0.8125rem;
}

body[data-perabox-app="merchant"] .compact-order-info span {
  font-size: 0.6875rem;
}

body[data-perabox-app="merchant"] .order-status {
  padding: 6px 8px;
  font-size: 0.6875rem;
  line-height: 1.2;
}

body[data-perabox-app="merchant"] .empty-illustration {
  width: 64px;
  height: 64px;
}

body[data-perabox-app="merchant"] .empty-illustration svg {
  width: 28px;
  height: 28px;
}

body[data-perabox-app="merchant"] .empty-state strong {
  font-size: 0.9375rem;
}

body[data-perabox-app="merchant"] .empty-state p {
  font-size: 0.8125rem;
}

body[data-perabox-app="merchant"] .donut span,
body[data-perabox-app="merchant"] .donut-copy > span,
body[data-perabox-app="merchant"] .donut-copy small,
body[data-perabox-app="merchant"] .mini-bar span,
body[data-perabox-app="merchant"] .menu-preview strong,
body[data-perabox-app="merchant"] .menu-preview span {
  font-size: 0.6875rem;
}

/* Orders: time pressure and next actions are explicit, not color-only. */
body[data-perabox-app="merchant"] .section-title-row {
  align-items: flex-start;
}

body[data-perabox-app="merchant"] .section-title-row h2 {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  line-height: 1.08;
}

body[data-perabox-app="merchant"] .section-title-row p {
  max-width: 680px;
  color: var(--merchant-muted);
  font-size: 0.875rem;
}

body[data-perabox-app="merchant"] .filter-chip {
  gap: 8px;
  padding-inline: 14px;
  font-size: 0.75rem;
}

body[data-perabox-app="merchant"] .filter-chip span {
  min-width: 22px;
  height: 22px;
  font-size: 0.6875rem;
}

body[data-perabox-app="merchant"] .order-board {
  grid-template-columns: repeat(3, minmax(300px, 1fr));
}

body[data-perabox-app="merchant"] .order-card {
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(40, 31, 12, 0.06);
}

body[data-perabox-app="merchant"] .order-card-head {
  min-height: 76px;
  padding: 18px;
}

body[data-perabox-app="merchant"] .order-card-head span:first-child,
body[data-perabox-app="merchant"] .order-customer span,
body[data-perabox-app="merchant"] .order-line,
body[data-perabox-app="merchant"] .more-items,
body[data-perabox-app="merchant"] .order-total-row span,
body[data-perabox-app="merchant"] .meta-chip,
body[data-perabox-app="merchant"] .accepted-state span {
  font-size: 0.6875rem;
}

body[data-perabox-app="merchant"] .order-card-head h3 {
  font-size: 1.0625rem;
}

body[data-perabox-app="merchant"] .order-sla {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 180px;
  padding: 6px 8px;
  border-radius: 8px;
  background: #efeee8;
  color: #65635d;
  font-size: 0.6875rem;
  font-weight: 750;
  line-height: 1.25;
  text-align: right;
}

body[data-perabox-app="merchant"] .order-sla svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

body[data-perabox-app="merchant"] .order-sla.is-new {
  background: var(--merchant-green-soft);
  color: var(--merchant-green);
}

body[data-perabox-app="merchant"] .order-sla.is-attention {
  background: var(--merchant-gold-soft);
  color: #715517;
}

body[data-perabox-app="merchant"] .order-sla.is-urgent {
  background: var(--merchant-coral-soft);
  color: #963727;
}

body[data-perabox-app="merchant"] .customer-avatar {
  width: 38px;
  height: 38px;
  font-size: 0.6875rem;
}

body[data-perabox-app="merchant"] .order-customer strong,
body[data-perabox-app="merchant"] .accepted-state strong,
body[data-perabox-app="merchant"] .order-actions .button {
  font-size: 0.75rem;
}

body[data-perabox-app="merchant"] .order-actions {
  grid-template-columns: 0.7fr minmax(104px, 0.9fr) 1.15fr;
  gap: 8px;
}

body[data-perabox-app="merchant"] .order-actions .button {
  min-height: 44px;
}

body[data-perabox-app="merchant"] .prep-control {
  position: relative;
  display: grid;
}

body[data-perabox-app="merchant"] .prep-control > span {
  position: absolute;
  z-index: 1;
  top: 4px;
  left: 11px;
  color: var(--merchant-faint);
  font-size: 0.6875rem;
  line-height: 1;
  pointer-events: none;
}

body[data-perabox-app="merchant"] .prep-select {
  height: 44px;
  padding: 14px 28px 2px 10px;
  font-size: 0.75rem;
  font-weight: 750;
}

body[data-perabox-app="merchant"] .stage-action > span {
  font-size: 0.75rem;
}

body[data-perabox-app="merchant"] .stage-action > span b {
  display: block;
  margin-bottom: 2px;
  color: var(--merchant-ink);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Catalog, reporting, and forms */
body[data-perabox-app="merchant"] .toolbar {
  gap: 12px;
  padding: 12px;
}

body[data-perabox-app="merchant"] .search-field,
body[data-perabox-app="merchant"] .toolbar select {
  height: 46px;
}

body[data-perabox-app="merchant"] .search-field input,
body[data-perabox-app="merchant"] .toolbar select,
body[data-perabox-app="merchant"] .toolbar-count {
  font-size: 0.8125rem;
}

body[data-perabox-app="merchant"] .menu-card-actions button {
  width: 40px;
  height: 40px;
}

body[data-perabox-app="merchant"] .menu-card-copy > span,
body[data-perabox-app="merchant"] .menu-card-copy p,
body[data-perabox-app="merchant"] .menu-card-foot span,
body[data-perabox-app="merchant"] .report-stat > span,
body[data-perabox-app="merchant"] .report-stat small,
body[data-perabox-app="merchant"] .chart-total,
body[data-perabox-app="merchant"] .chart-column span,
body[data-perabox-app="merchant"] .top-item strong,
body[data-perabox-app="merchant"] .top-item span,
body[data-perabox-app="merchant"] .top-item > b,
body[data-perabox-app="merchant"] .top-rank {
  font-size: 0.6875rem;
}

body[data-perabox-app="merchant"] .menu-card-copy h3 {
  font-size: 0.9375rem;
}

body[data-perabox-app="merchant"] .report-stat {
  min-height: 126px;
}

body[data-perabox-app="merchant"] .report-stat strong {
  font-size: 1.625rem;
  font-variant-numeric: tabular-nums;
}

body[data-perabox-app="merchant"] .profile-state,
body[data-perabox-app="merchant"] .merchant-access strong,
body[data-perabox-app="merchant"] .merchant-access span,
body[data-perabox-app="merchant"] .profile-visual span,
body[data-perabox-app="merchant"] .form-section-head p,
body[data-perabox-app="merchant"] .field > span,
body[data-perabox-app="merchant"] .field-help,
body[data-perabox-app="merchant"] .location-preview small,
body[data-perabox-app="merchant"] .location-preview output,
body[data-perabox-app="merchant"] .location-mode,
body[data-perabox-app="merchant"] .input-suffix span,
body[data-perabox-app="merchant"] .input-prefix span,
body[data-perabox-app="merchant"] .toggle-field strong,
body[data-perabox-app="merchant"] .toggle-field small,
body[data-perabox-app="merchant"] .payment-note strong,
body[data-perabox-app="merchant"] .payment-note small,
body[data-perabox-app="merchant"] .pill,
body[data-perabox-app="merchant"] .registration-privacy-note,
body[data-perabox-app="merchant"] .registration-password-note,
body[data-perabox-app="merchant"] .store-form-status,
body[data-perabox-app="merchant"] .form-actions > span {
  font-size: 0.6875rem;
}

/* Operator labels and status text are instructions, not decorative microcopy. */
body[data-perabox-app="merchant"] .availability,
body[data-perabox-app="merchant"] .field > span,
body[data-perabox-app="merchant"] .merchant-address-field > label,
body[data-perabox-app="merchant"] .toggle-field strong {
  font-size: 0.75rem;
  line-height: 1.4;
}

body[data-perabox-app="merchant"] .segmented-control button {
  min-height: 40px;
  height: auto;
  font-size: 0.75rem;
}

body[data-perabox-app="merchant"] .merchant-address-results button strong {
  font-size: 0.875rem;
}

body[data-perabox-app="merchant"] .merchant-address-results button small,
body[data-perabox-app="merchant"] .merchant-address-results > p,
body[data-perabox-app="merchant"] #serviceLocationNote,
body[data-perabox-app="merchant"] .location-preview small,
body[data-perabox-app="merchant"] .location-preview output,
body[data-perabox-app="merchant"] .location-mode,
body[data-perabox-app="merchant"] .store-form-status {
  font-size: 0.8125rem;
}

body[data-perabox-app="merchant"] .profile-visual strong {
  font-size: 1rem;
}

body[data-perabox-app="merchant"] .form-section-head h3 {
  font-size: 1rem;
}

body[data-perabox-app="merchant"] .form-section-head > span {
  width: 34px;
  height: 34px;
  font-size: 0.6875rem;
}

body[data-perabox-app="merchant"] .field input,
body[data-perabox-app="merchant"] .field select,
body[data-perabox-app="merchant"] .input-suffix,
body[data-perabox-app="merchant"] .input-prefix {
  min-height: 48px;
  font-size: 1rem;
}

body[data-perabox-app="merchant"] .field textarea {
  min-height: 96px;
  font-size: 1rem;
  line-height: 1.5;
}

body[data-perabox-app="merchant"] .toggle-field {
  min-height: 64px;
}

body[data-perabox-app="merchant"] .location-marker {
  width: 40px;
  height: 40px;
}

body[data-perabox-app="merchant"] .location-marker svg {
  width: 20px;
}

body[data-perabox-app="merchant"] .modal {
  max-height: calc(100dvh - 24px);
  border-radius: 16px;
}

body[data-perabox-app="merchant"] .modal-header .icon-button {
  width: 44px;
  height: 44px;
}

body[data-perabox-app="merchant"] .item-image-editor label strong,
body[data-perabox-app="merchant"] .item-image-editor label span,
body[data-perabox-app="merchant"] .item-image-editor label em,
body[data-perabox-app="merchant"] .confirm-modal p,
body[data-perabox-app="merchant"] .support-intro,
body[data-perabox-app="merchant"] .support-section-head h3,
body[data-perabox-app="merchant"] .support-form h3,
body[data-perabox-app="merchant"] .support-ticket > div strong,
body[data-perabox-app="merchant"] .support-ticket > div span,
body[data-perabox-app="merchant"] .support-ticket > small,
body[data-perabox-app="merchant"] .support-ticket > p,
body[data-perabox-app="merchant"] .support-ticket-status,
body[data-perabox-app="merchant"] .support-empty,
body[data-perabox-app="merchant"] .notification-toolbar p,
body[data-perabox-app="merchant"] .notification-item strong,
body[data-perabox-app="merchant"] .notification-item small,
body[data-perabox-app="merchant"] .notification-item time,
body[data-perabox-app="merchant"] .toast strong,
body[data-perabox-app="merchant"] .toast span {
  font-size: 0.6875rem;
}

body[data-perabox-app="merchant"] .notification-item {
  min-height: 64px;
}

body[data-perabox-app="merchant"] .notification-icon {
  width: 38px;
  height: 38px;
}

body[data-perabox-app="merchant"] .notification-icon svg {
  width: 18px;
  height: 18px;
}

body[data-perabox-app="merchant"] .toast-region {
  z-index: var(--merchant-z-toast);
  bottom: max(20px, env(safe-area-inset-bottom));
}

body[data-perabox-app="merchant"] .toast::before {
  content: "";
  background-color: var(--lime);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}

body[data-perabox-app="merchant"] .toast.is-error::before {
  content: "";
  background-color: var(--coral);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v9M12 18h.01'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v9M12 18h.01'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}

@media (max-width: 1320px) {
  body[data-perabox-app="merchant"] .order-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 920px) {
  body[data-perabox-app="merchant"] .sidebar {
    width: min(320px, calc(100vw - 48px));
  }

  body[data-perabox-app="merchant"] .sidebar-scrim {
    z-index: var(--merchant-z-scrim);
  }

  body[data-perabox-app="merchant"] .main-content {
    margin-left: 0;
  }

  body[data-perabox-app="merchant"] .dashboard-grid,
  body[data-perabox-app="merchant"] .sales-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-perabox-app="merchant"] :where(.orders-panel, .performance-panel, .chart-panel, .top-items-panel) {
    width: 100%;
  }

  body[data-perabox-app="merchant"] .operations-brief {
    align-items: flex-start;
  }

  body[data-perabox-app="merchant"] .operations-brief-actions {
    flex-direction: column;
  }

  body[data-perabox-app="merchant"] .operations-brief-actions .button {
    width: 100%;
  }
}

@media (max-width: 650px) {
  body[data-perabox-app="merchant"] .topbar {
    min-height: calc(72px + env(safe-area-inset-top));
    padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  }

  body[data-perabox-app="merchant"] .content-wrap {
    padding: 20px 16px calc(56px + env(safe-area-inset-bottom));
  }

  body[data-perabox-app="merchant"] .operations-brief {
    display: grid;
    gap: 18px;
    padding: 20px;
  }

  body[data-perabox-app="merchant"] .operations-brief-actions {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
  }

  body[data-perabox-app="merchant"] .stat-card {
    min-height: 164px;
    padding: 16px;
  }

  body[data-perabox-app="merchant"] .stat-card small {
    display: block;
  }

  body[data-perabox-app="merchant"] .stat-card p {
    margin-top: 16px;
  }

  body[data-perabox-app="merchant"] .compact-order {
    grid-template-columns: 44px minmax(0, 1fr) auto;
  }

  body[data-perabox-app="merchant"] .compact-order .order-status {
    grid-column: 2 / -1;
    justify-self: start;
  }

  body[data-perabox-app="merchant"] .order-board {
    grid-template-columns: 1fr;
  }

  body[data-perabox-app="merchant"] .order-actions {
    grid-template-columns: minmax(0, 0.8fr) minmax(116px, 1.2fr);
  }

  body[data-perabox-app="merchant"] .order-actions > .button-primary {
    grid-column: 1 / -1;
  }

  body[data-perabox-app="merchant"] .order-actions.stage-action {
    grid-template-columns: 1fr;
  }

  body[data-perabox-app="merchant"] .stage-action .button {
    width: 100%;
  }

  body[data-perabox-app="merchant"] .toolbar select {
    min-height: 46px;
  }

  body[data-perabox-app="merchant"] .modal {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }

  body[data-perabox-app="merchant"] .modal-footer {
    padding-bottom: max(15px, env(safe-area-inset-bottom));
  }
}

@media (max-width: 420px) {
  body[data-perabox-app="merchant"] .operations-brief-actions {
    grid-template-columns: 1fr;
  }

  body[data-perabox-app="merchant"] .stat-grid,
  body[data-perabox-app="merchant"] .report-stat-grid {
    grid-template-columns: 1fr;
  }

  body[data-perabox-app="merchant"] .stat-card {
    min-height: 148px;
  }

  body[data-perabox-app="merchant"] .trend {
    max-width: none;
    overflow: visible;
    text-overflow: clip;
  }

  body[data-perabox-app="merchant"] .section-title-row {
    display: grid;
  }

  body[data-perabox-app="merchant"] .section-title-row > .button,
  body[data-perabox-app="merchant"] .segmented-control {
    width: 100%;
  }
}

@media (max-width: 920px) and (max-height: 520px) and (orientation: landscape) {
  body[data-perabox-app="merchant"] .topbar {
    position: relative;
    min-height: 64px;
    padding-top: 10px;
  }

  body[data-perabox-app="merchant"] .content-wrap {
    padding-top: 16px;
  }

  body[data-perabox-app="merchant"] .operations-brief {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  body[data-perabox-app="merchant"] .operations-brief-actions {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-perabox-app="merchant"] .skip-link {
    transition: none;
  }
}

@media (forced-colors: active) {
  body[data-perabox-app="merchant"] .operations-brief,
  body[data-perabox-app="merchant"] .order-sla,
  body[data-perabox-app="merchant"] .operations-status > i {
    border: 1px solid CanvasText;
  }
}