:root {
  --by-admin-reference-green: #0d6259;
  --by-admin-reference-green-hover: #094f48;
  --by-admin-reference-green-dark: #183d38;
  --by-admin-reference-mint: #eaf5f1;
  --by-admin-reference-line: #d9e4e0;
  --by-admin-reference-bg: #f3f7f5;
  --by-admin-reference-muted: #667a76;
  --by-admin-reference-danger: #b42318;
  --by-admin-reference-shadow: 0 12px 34px rgba(28, 68, 58, .09);
  --by-admin-reference-appbar-height: 70px;
}

/* Final BY-only layout. This replaces reference-layout-v1; it is not layered on top of it. */
#by-order-ops-v2,
#by-admin-global-v3,
body.by-admin-shell-v3 #root {
  box-sizing: border-box;
  color: var(--by-admin-reference-green-dark);
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-size: 14px;
  line-height: 1.45;
}

#by-order-ops-v2 *,
#by-order-ops-v2 *::before,
#by-order-ops-v2 *::after,
#by-admin-global-v3 *,
#by-admin-global-v3 *::before,
#by-admin-global-v3 *::after,
body.by-admin-shell-v3 #root *,
body.by-admin-shell-v3 #root *::before,
body.by-admin-shell-v3 #root *::after {
  box-sizing: border-box;
}

#root :is(
  .MuiTypography-root,
  .MuiButtonBase-root,
  .MuiInputBase-root,
  .MuiInputLabel-root,
  .MuiFormLabel-root,
  .MuiTableCell-root,
  .MuiMenuItem-root,
  .MuiChip-root,
  .MuiTooltip-tooltip
) {
  font-family: 'Montserrat', Arial, sans-serif !important;
}

#by-order-ops-v2 {
  min-height: 100dvh;
  background: var(--by-admin-reference-bg);
}

#by-order-ops-v2 .by-ops-appbar,
#by-admin-global-v3 .by-ops-appbar {
  min-height: var(--by-admin-reference-appbar-height);
  border-bottom: 1px solid rgba(13, 98, 89, .16);
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 4px 22px rgba(24, 61, 56, .06);
}

#by-order-ops-v2 .by-ops-appbar-inner,
#by-admin-global-v3 .by-ops-appbar-inner {
  display: grid;
  width: min(100%, 1600px);
  min-height: var(--by-admin-reference-appbar-height);
  margin-inline: auto;
  padding: 0 24px;
  grid-template-columns: minmax(230px, .85fr) minmax(480px, 1.7fr) minmax(260px, .9fr);
  align-items: center;
  gap: 24px;
}

#by-order-ops-v2 .by-ops-brand-mark,
#by-admin-global-v3 .by-ops-brand-mark,
#by-order-ops-v2 .by-ops-title-mark {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 13px;
  background: var(--by-admin-reference-green);
  font-size: 12px;
  font-weight: 800;
}

#by-order-ops-v2 .by-ops-brand strong,
#by-admin-global-v3 .by-ops-brand strong,
#by-order-ops-v2 .by-ops-account strong,
#by-admin-global-v3 .by-ops-account strong {
  color: var(--by-admin-reference-green-dark);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: 0;
}

#by-order-ops-v2 .by-ops-brand small,
#by-admin-global-v3 .by-ops-brand small,
#by-order-ops-v2 .by-ops-account small,
#by-admin-global-v3 .by-ops-account small {
  color: var(--by-admin-reference-muted);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.35;
}

#by-order-ops-v2 .by-ops-main-nav,
#by-admin-global-v3 .by-ops-main-nav {
  justify-content: center;
  gap: 4px;
}

#by-order-ops-v2 .by-ops-main-nav a,
#by-admin-global-v3 .by-ops-main-nav a {
  min-height: 40px;
  padding: 0 13px;
  border-radius: 10px;
  color: #526a65;
  font-size: 12px;
  font-weight: 650;
}

#by-order-ops-v2 .by-ops-main-nav a:hover,
#by-admin-global-v3 .by-ops-main-nav a:hover {
  color: var(--by-admin-reference-green);
  background: #f0f7f4;
}

#by-order-ops-v2 .by-ops-main-nav a.is-active,
#by-admin-global-v3 .by-ops-main-nav a.is-active {
  color: #fff;
  background: var(--by-admin-reference-green);
}

#by-order-ops-v2 .by-ops-account-avatar,
#by-admin-global-v3 .by-ops-account-avatar {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  color: var(--by-admin-reference-green);
  border: 1px solid #c7ddd6;
  background: var(--by-admin-reference-mint);
  font-weight: 750;
}

#by-order-ops-v2 .by-ops-shell {
  display: flex;
  width: 100%;
  height: calc(100dvh - var(--by-admin-reference-appbar-height));
  min-height: 0;
  padding: 0;
  flex-direction: column;
  overflow: hidden;
}

#by-order-ops-v2 .by-ops-topbar {
  display: flex;
  margin: 0;
  padding: 16px 24px 12px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

#by-order-ops-v2 .by-ops-title-row {
  gap: 13px;
}

#by-order-ops-v2 .by-ops-title {
  color: var(--by-admin-reference-green-dark);
  font-size: clamp(20px, 2vw, 27px);
  font-weight: 760;
  line-height: 1.2;
  letter-spacing: 0;
}

#by-order-ops-v2 .by-ops-subtitle {
  margin-top: 3px;
  color: var(--by-admin-reference-muted);
  font-size: 11px;
  font-weight: 500;
}

#by-order-ops-v2 .by-ops-filters {
  display: flex;
  width: 100%;
  margin: 0;
  padding: 0 24px 12px;
  flex: 0 0 auto;
  gap: 7px;
  overflow-x: auto;
  scrollbar-width: thin;
}

#by-order-ops-v2 .by-ops-filter,
#by-order-ops-v2 .by-ops-filter:first-child {
  min-width: 0;
  min-height: 35px;
  padding: 0 11px;
  flex: 0 0 auto;
  border-color: var(--by-admin-reference-line);
  border-radius: 10px;
  font-size: 10px;
  font-weight: 680;
}

#by-order-ops-v2 .by-ops-filter.is-active {
  border-color: var(--by-admin-reference-green);
  background: var(--by-admin-reference-green);
  box-shadow: none;
}

#by-order-ops-v2 .by-ops-filter-count {
  min-width: 20px;
  height: 20px;
  padding-inline: 5px;
  font-size: 9px;
  font-weight: 800;
}

#by-order-ops-v2 .by-ops-grid {
  display: grid;
  min-height: 0;
  padding: 0 24px 20px;
  flex: 1 1 auto;
  grid-template-columns: minmax(270px, 340px) minmax(0, 1fr);
  gap: 14px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#by-order-ops-v2 .by-ops-queue,
#by-order-ops-v2 .by-ops-detail {
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--by-admin-reference-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--by-admin-reference-shadow);
}

#by-order-ops-v2 .by-ops-queue {
  border-right: 1px solid var(--by-admin-reference-line);
  overflow: hidden;
  background: #fff;
}

#by-order-ops-v2 .by-ops-detail {
  padding: 0;
  overflow-y: auto;
}

#by-order-ops-v2 .by-ops-queue-head {
  padding: 12px;
  border-bottom: 1px solid #e5ece9;
  background: #fff;
}

#by-order-ops-v2 .by-ops-search {
  height: 42px;
  min-height: 42px;
  padding: 0 12px;
  border-color: #cfded9;
  border-radius: 11px;
  background: #fbfdfc;
  font-size: 11px;
  font-weight: 520;
}

#by-order-ops-v2 .by-ops-order-list {
  padding: 8px;
}

#by-order-ops-v2 .by-ops-order-card {
  margin-bottom: 6px !important;
  padding: 9px 10px !important;
  border-radius: 12px !important;
}

#by-order-ops-v2 .by-ops-order-number {
  font-size: 14px;
  font-weight: 750;
}

#by-order-ops-v2 .by-ops-order-price {
  font-size: 12px;
  font-weight: 760;
}

#by-order-ops-v2 .by-ops-time,
#by-order-ops-v2 .by-ops-card-meta .by-ops-badge {
  font-size: 9px;
}

#by-order-ops-v2 .by-ops-badge {
  min-height: 20px;
  padding: 2px 6px;
  font-size: 9px;
}

#by-order-ops-v2 .by-ops-detail-inner {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 14px;
}

#by-order-ops-v2 .by-v7-top-card {
  display: grid;
  margin: 0 0 12px;
  padding: 14px;
  grid-template-columns: minmax(180px, .85fr) minmax(320px, 1.45fr) auto;
  align-items: start;
  gap: 14px;
  border-color: var(--by-admin-reference-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(28, 68, 58, .06);
}

#by-order-ops-v2 .by-v7-top-card .by-ops-detail-title {
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 780;
  line-height: 1.2;
}

#by-order-ops-v2 .by-v7-top-card .by-ops-detail-date {
  font-size: 10px;
  font-weight: 520;
}

#by-order-ops-v2 .by-ops-summary {
  display: grid;
  padding: 0;
  grid-template-columns: repeat(4, minmax(80px, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid #d4e2de;
  border-radius: 13px;
  background: #f8fbfa;
}

#by-order-ops-v2 .by-ops-summary > div {
  display: flex;
  min-width: 0;
  min-height: 60px;
  padding: 9px 10px;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid #dce7e3;
}

#by-order-ops-v2 .by-ops-summary > div:last-child {
  border-right: 0;
}

#by-order-ops-v2 .by-ops-summary span {
  color: var(--by-admin-reference-muted);
  font-size: 8px;
  font-weight: 650;
  letter-spacing: .03em;
  text-transform: uppercase;
}

#by-order-ops-v2 .by-ops-summary strong {
  margin-top: 3px;
  font-size: 12px;
  font-weight: 760;
}

#by-order-ops-v2 .by-ops-summary .is-total {
  margin-left: 0;
}

#by-order-ops-v2 .by-v7-composition,
#by-order-ops-v2 .by-ops-panel {
  margin-top: 12px;
  border-color: var(--by-admin-reference-line);
  border-radius: 16px;
  box-shadow: none;
}

#by-order-ops-v2 .by-v4-panel-heading {
  margin-bottom: 0;
  padding: 13px 15px;
  border-bottom: 1px solid #e2ebe8;
}

#by-order-ops-v2 .by-v4-panel-heading h3 {
  font-size: 15px;
  font-weight: 760;
}

#by-order-ops-v2 .by-v4-panel-heading p {
  font-size: 9px;
  font-weight: 520;
}

#by-order-ops-v2 .by-v4-worker-card {
  margin: 10px;
  overflow: hidden;
  border-color: #cdDED9;
  border-radius: 14px;
  background: #fbfdfc;
}

#by-order-ops-v2 .by-v4-worker-card > summary {
  min-height: 44px;
  padding: 0 13px;
  background: #eff7f4;
  font-size: 11px;
}

#by-order-ops-v2 .by-v4-worker-card > summary strong {
  font-size: 10px;
}

#by-order-ops-v2 .by-v4-worker-body {
  padding: 13px;
}

#by-order-ops-v2 .by-v4-worker-overview {
  grid-template-columns: minmax(220px, 1.3fr) minmax(210px, 1fr);
  gap: 13px;
}

#by-order-ops-v2 .by-v4-preview,
#by-order-ops-v2 .by-v4-params > div,
#by-order-ops-v2 .by-v4-engraving,
#by-order-ops-v2 .by-v4-stone {
  border-color: #dbe6e2;
  background: #fff;
}

#by-order-ops-v2 .by-v4-preview {
  min-height: 180px;
  padding: 11px;
  border-radius: 13px;
}

#by-order-ops-v2 .by-v4-preview > strong {
  font-size: 9px;
}

#by-order-ops-v2 .by-v4-bracelet-photo {
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: 260px;
  object-fit: contain;
}

#by-order-ops-v2 .by-v4-params {
  gap: 0;
  padding: 6px 12px;
}

#by-order-ops-v2 .by-v4-params > div {
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid #edf1f0;
  border-radius: 0;
}

#by-order-ops-v2 .by-v4-params > div:last-child {
  border-bottom: 0;
}

#by-order-ops-v2 .by-v4-params dt,
#by-order-ops-v2 .by-v4-production-notes span {
  font-size: 9px;
  font-weight: 570;
}

#by-order-ops-v2 .by-v4-params dd,
#by-order-ops-v2 .by-v4-production-notes strong {
  font-size: 10px;
  font-weight: 680;
}

#by-order-ops-v2 .by-v4-production-notes {
  gap: 8px;
}

#by-order-ops-v2 .by-v4-production-notes > div {
  min-height: 54px;
  padding: 8px 10px;
}

#by-order-ops-v2 .by-v4-engraving {
  margin-block: 11px;
  padding: 8px 9px;
  border-radius: 13px;
}

#by-order-ops-v2 .by-v4-sequence-heading {
  margin: 13px 0 8px;
}

#by-order-ops-v2 .by-v4-sequence-heading strong {
  font-size: 11px;
}

#by-order-ops-v2 .by-v4-sequence-heading span {
  font-size: 8px;
}

#by-order-ops-v2 .by-v4-stones-grid {
  grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
  gap: 7px;
}

#by-order-ops-v2 .by-v4-stone {
  min-height: 116px;
  padding: 9px 6px 7px;
  border-radius: 11px;
}

#by-order-ops-v2 .by-v4-stone-image {
  width: 56px;
  height: 56px;
}

#by-order-ops-v2 .by-v4-stone strong {
  margin-top: 3px;
  font-size: 8px;
  font-weight: 680;
}

#by-order-ops-v2 .by-v4-stone small {
  font-size: 7px;
}

#by-order-ops-v2 .by-ops-columns {
  gap: 12px !important;
  margin-top: 12px !important;
}

/* Native React Admin pages: same compact geometry as the reference. */
body.by-admin-shell-v3 #root .RaLayout-content {
  min-width: 0 !important;
  padding: 22px !important;
  background: transparent !important;
}

body.by-admin-shell-v3 #root .MuiPaper-root {
  border-color: var(--by-admin-reference-line);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(28, 68, 58, .06);
}

:is(body.by-v9-route-price, body.by-v9-route-configuration) #root .RaLayout-content > .MuiBox-root > .MuiBox-root {
  width: min(100%, 720px) !important;
  margin-inline: auto;
  padding: clamp(18px, 3vw, 30px);
  border: 1px solid var(--by-admin-reference-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--by-admin-reference-shadow);
}

body.by-v9-route-users #root .RaFilterForm-filterFormInput:has(input[name='q_like'], input[id*='q_like']) {
  width: min(100%, 340px);
  max-width: 100%;
  flex: 0 1 340px;
}

body.by-v9-route-users #root .MuiFormControl-root:has(input[name='q_like'], input[id*='q_like']) {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 8px 0 2px !important;
}

body.by-v9-route-users #root .MuiInputBase-root:has(> input[name='q_like'], > input[id*='q_like']) {
  height: 42px;
  min-height: 42px;
  padding: 0 12px;
  overflow: visible;
  border: 1px solid #cfDEDA;
  border-radius: 11px;
  background: #fff;
}

body.by-v9-route-users #root .MuiFormControl-root:has(input[name='q_like'], input[id*='q_like']) input {
  height: 40px;
  padding: 0 !important;
  font-size: 11px;
  font-weight: 520;
  line-height: 40px;
}

/* Keep list overflow visible so the native 48 px toolbar can slide up above the table. */
:is(body.by-v9-route-users, body.by-v9-route-admins) #root .RaList-content {
  overflow: visible !important;
}

:is(body.by-v9-route-users, body.by-v9-route-admins) #root .RaDatagrid-root {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

:is(body.by-v9-route-users, body.by-v9-route-admins) #root .RaDatagrid-tableWrapper {
  display: block;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

:is(body.by-v9-route-users, body.by-v9-route-admins) #root .RaBulkActionsToolbar-toolbar {
  box-sizing: border-box;
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  max-width: 100% !important;
  min-height: 48px !important;
  height: 48px !important;
  padding-inline: 14px !important;
  overflow: hidden !important;
  transform: translateY(-48px) !important;
}

:is(body.by-v9-route-users, body.by-v9-route-admins) #root .RaBulkActionsToolbar-toolbar.RaBulkActionsToolbar-collapsed {
  min-height: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  transform: translateY(0) !important;
}

:is(body.by-v9-route-users, body.by-v9-route-admins) #root .RaBulkActionsToolbar-toolbar:not(.RaBulkActionsToolbar-collapsed) {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

:is(body.by-v9-route-users, body.by-v9-route-admins) #root .RaBulkActionsToolbar-toolbar:not(.RaBulkActionsToolbar-collapsed) .MuiButton-root {
  color: #fff !important;
  border-radius: 10px !important;
  background: var(--by-admin-reference-danger) !important;
}

:is(body.by-v9-route-users, body.by-v9-route-admins) #root .MuiCheckbox-root:not(.Mui-disabled).Mui-checked {
  color: var(--by-admin-reference-green) !important;
}

@media (max-width: 1180px) and (min-width: 901px) {
  #by-order-ops-v2 .by-ops-appbar-inner,
  #by-admin-global-v3 .by-ops-appbar-inner {
    grid-template-columns: minmax(185px, .8fr) minmax(420px, 1.8fr) auto;
    gap: 12px;
  }

  #by-order-ops-v2 .by-ops-main-nav a,
  #by-admin-global-v3 .by-ops-main-nav a {
    padding-inline: 10px;
    font-size: 11px;
  }

  #by-order-ops-v2 .by-v7-top-card {
    grid-template-columns: minmax(160px, .75fr) minmax(310px, 1.45fr);
  }

  #by-order-ops-v2 .by-v7-top-card > .by-ops-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

@media (max-width: 900px) and (min-width: 821px) {
  :root {
    --by-admin-reference-appbar-height: 62px;
  }

  #by-order-ops-v2 .by-ops-appbar-inner,
  #by-admin-global-v3 .by-ops-appbar-inner {
    padding-inline: 14px;
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  #by-order-ops-v2 .by-ops-grid {
    padding-inline: 14px;
    grid-template-columns: minmax(250px, 300px) minmax(0, 1fr);
  }

  #by-order-ops-v2 .by-v7-top-card,
  #by-order-ops-v2 .by-v4-worker-overview,
  #by-order-ops-v2 .by-ops-columns {
    grid-template-columns: 1fr;
  }

  #by-order-ops-v2 .by-ops-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  :root {
    --by-admin-reference-appbar-height: 62px;
  }

  #by-order-ops-v2 {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  #by-order-ops-v2 .by-ops-appbar-inner,
  #by-admin-global-v3 .by-ops-appbar-inner {
    min-height: var(--by-admin-reference-appbar-height);
    padding-inline: 12px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
  }

  #by-order-ops-v2 .by-ops-shell {
    height: auto;
    min-height: calc(100dvh - var(--by-admin-reference-appbar-height));
    overflow: visible;
  }

  #by-order-ops-v2 .by-ops-topbar {
    padding-inline: 14px;
  }

  #by-order-ops-v2 .by-ops-title-mark {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    border-radius: 11px;
  }

  #by-order-ops-v2 .by-ops-title {
    font-size: 19px;
  }

  #by-order-ops-v2 .by-ops-subtitle {
    display: none;
  }

  #by-order-ops-v2 .by-ops-filters {
    padding-inline: 14px;
  }

  #by-order-ops-v2 .by-ops-grid {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    min-width: 0;
    padding-inline: 14px;
    overflow: visible;
  }

  #by-order-ops-v2 .by-ops-queue,
  #by-order-ops-v2 .by-ops-detail {
    min-height: calc(100dvh - 194px);
  }

  #by-order-ops-v2 .by-ops-detail {
    width: auto;
    max-width: 100%;
    min-width: 0;
    overflow: visible;
  }

  #by-order-ops-v2 .by-ops-detail-inner {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 10px;
  }

  #by-order-ops-v2 .by-v7-top-card,
  #by-order-ops-v2 .by-v4-worker-overview,
  #by-order-ops-v2 .by-ops-columns {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
  }

  #by-order-ops-v2 .by-v7-top-card {
    padding: 12px;
  }

  #by-order-ops-v2 .by-ops-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #by-order-ops-v2 .by-v4-bracelet-photo {
    height: auto;
    max-height: 250px;
  }

  body.by-admin-shell-v3 #root :is(
    .layout,
    .RaLayout-appFrame,
    main.RaLayout-contentWithSidebar,
    .RaLayout-content,
    .RaLayout-content > .MuiBox-root,
    .list-page,
    .RaList-main,
    .RaList-content
  ) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.by-admin-shell-v3 #root .RaLayout-content {
    padding: 12px !important;
  }

  body.by-admin-shell-v3 #root .RaList-content {
    display: block;
    max-width: 100%;
  }

  :is(body.by-v9-route-users, body.by-v9-route-admins) #root .RaList-content {
    overflow: visible !important;
  }

  body.by-admin-shell-v3 #root table {
    min-width: 680px;
  }
}

@media (max-width: 540px) {
  #by-order-ops-v2 .by-ops-appbar-inner,
  #by-admin-global-v3 .by-ops-appbar-inner {
    display: flex;
    padding-inline: 10px;
    gap: 8px;
  }

  #by-order-ops-v2 .by-ops-brand > span:last-child,
  #by-admin-global-v3 .by-ops-brand > span:last-child {
    display: none;
  }

  #by-order-ops-v2 .by-ops-brand-mark,
  #by-admin-global-v3 .by-ops-brand-mark {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    border-radius: 11px;
  }

  #by-order-ops-v2 .by-ops-main-nav,
  #by-admin-global-v3 .by-ops-main-nav {
    flex: 1 1 auto;
    justify-content: flex-start;
    overflow-x: auto;
  }

  #by-order-ops-v2 .by-ops-main-nav a,
  #by-admin-global-v3 .by-ops-main-nav a {
    min-height: 36px;
    padding-inline: 9px;
    font-size: 10px;
  }

  #by-order-ops-v2 .by-ops-topbar {
    padding: 12px 10px 9px;
  }

  #by-order-ops-v2 .by-ops-filters {
    padding: 0 10px 9px;
  }

  #by-order-ops-v2 .by-ops-filter,
  #by-order-ops-v2 .by-ops-filter:first-child {
    min-height: 32px;
    padding-inline: 9px;
    font-size: 9px;
  }

  #by-order-ops-v2 .by-ops-grid {
    padding: 0 8px 12px;
  }

  #by-order-ops-v2 .by-ops-queue,
  #by-order-ops-v2 .by-ops-detail {
    border-radius: 14px;
  }

  #by-order-ops-v2 .by-v4-worker-card {
    margin: 8px;
  }

  #by-order-ops-v2 .by-v4-worker-body,
  #by-order-ops-v2 .by-v4-panel-heading {
    padding: 10px;
  }

  #by-order-ops-v2 .by-v4-production-notes,
  #by-order-ops-v2 .by-v4-stones-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 360px) {
  #by-order-ops-v2 .by-ops-title-mark {
    display: none;
  }

  #by-order-ops-v2 .by-ops-summary {
    grid-template-columns: 1fr;
  }

  #by-order-ops-v2 .by-ops-summary > div {
    min-height: 50px;
    border-right: 0;
    border-bottom: 1px solid #dce7e3;
  }

  #by-order-ops-v2 .by-v4-production-notes,
  #by-order-ops-v2 .by-v4-stones-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  #by-order-ops-v2 *,
  #by-admin-global-v3 *,
  body.by-admin-shell-v3 #root * {
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
}

/*
 * Material UI calculates native input height with content-box. The scoped
 * border-box reset above is useful for the custom admin workspace, but native
 * React Admin inputs must retain their expected box model so labels, values,
 * and helper text never overlap.
 */
body.by-admin-shell-v3 #root :is(
  input.MuiInputBase-input,
  textarea.MuiInputBase-input
) {
  box-sizing: content-box;
}