.view {
  width: min(100%, 1440px);
  margin: 0 auto;
  padding: 1.5rem;
}

.view__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.view__title {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -.02em;
}

.view__subtitle {
  margin: .25rem 0 0.5rem;
  color: var(--text-muted);
  font-size: .9rem;
}

.toolbar {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-wrap: wrap;
}

.toolbar--end {
  justify-content: flex-end;
  margin-top: 1rem;
}

.catalog-sticky-controls {
  /* position: sticky; */
  top: 0;
  z-index: 2;
  margin-bottom: 1.25rem;
}

.catalog-sticky-controls .field__control {
  width: min(100%, 220px);
}

.catalog-sticky-controls .toolbar + .toolbar {
  margin-top: .85rem;
}

.checkbox-control {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 36px;
  color: var(--text);
  font-size: .9rem;
  font-weight: 600;
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: .2rem .55rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-muted);
  font-size: .8rem;
  font-weight: 700;
}

.catalog-thumbnail {
  display: inline-grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 7px;
  background: var(--surface-raised);
  color: var(--text-muted);
  object-fit: cover;
  vertical-align: middle;
}

.catalog-thumbnail--fallback {
  font-size: .65rem;
  font-weight: 800;
}

.onboarding-panel {
  width: min(100%, 1040px);
  max-height: min(900px, calc(100vh - 2rem));
  overflow: auto;
}

.card[aria-labelledby="catalog-table-title"] {
  border: none;
  padding: 1.25rem 0;
}

.inventory-table-card {
border: none;
  padding: 1.25rem 0;
}

.inventory-controls {
border: none;
  padding: 0;
}

.orders-controls {
border: none;
  padding: 0;
}

.orders-table-card {
border: none;
  padding: 1.25rem 0;
}

.customers-controls {
border: none;
  padding: 0;
}

.customers-table-card {
border: none;
  padding: 1.25rem 0;
}



.onboarding-media {
  display: block;
  width: 140px;
  height: 140px;
  border-radius: 8px;
  object-fit: cover;
}

.field__error {
  color: var(--text);
  font-size: .78rem;
  font-weight: 600;
}

.field__control[aria-invalid="true"] {
  border-color: var(--accent);
}

.catalog-taxonomy {
  display: block;
  margin-top: .15rem;
  color: var(--text-muted);
  font-size: .8rem;
}

.data-table tbody tr.is-selected td {
  background: var(--surface-raised);
}

.catalog-action-menu {
  position: fixed;
  z-index: 30;
  display: grid;
  min-width: 160px;
  padding: .35rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 12px 26px rgb(0 0 0 / .16);
}

.catalog-action-menu button {
  min-height: 36px;
  padding: 0 .65rem;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  text-align: left;
}

.catalog-action-menu button:hover,
.catalog-action-menu button:focus-visible {
  border-color: var(--border);
  background: var(--surface-raised);
}

.pos-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 440px);
  gap: 1.25rem;
  align-items: start;
}

.pos-catalog__toolbar {
  margin-bottom: 1rem;
}

.pos-catalog__toolbar > .field__control {
  width: min(100%, 320px);
}

.pos-product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}

#app-shell.is-sidebar-collapsed .pos-product-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

.pos-product-card {
  display: block;
  aspect-ratio: 1 / .8;
  min-width: 0;
  padding: .8rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  text-align: left;
  box-shadow: var(--shadow-subtle);
}

.pos-product-card:hover,
.pos-product-card:focus-visible {
  border-color: var(--accent);
  box-shadow: var(--shadow-hover);
}

.pos-product-card > .catalog-thumbnail {
  display: block;
  width: 100%;
  
  /* height: 44%; */
  
  height: 90%;
  margin-bottom: 8px;
  border-radius: 7px;
  object-fit: cover;
}

.pos-product-card__content {
  display: grid;
  min-width: 0;
  gap: .2rem;
}

.pos-product-card__price {
  font-weight: 700;
}

.pos-cart {
  position: sticky;
  top: 1.5rem;
}

.pos-cart .view__header {
  margin-bottom: .85rem;
}

.pos-customer-details {
  display: grid;
  gap: .7rem;
  margin-bottom: .85rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid var(--border);
}

#pos-cart-lines {
  min-height: 122px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
}

#pos-cart-lines .empty-state {
  display: grid;
  min-height: 120px;
  place-items: center;
  margin: 0;
  padding: 1rem;
  color: var(--text);
}

.pos-cart-line,
.pos-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.pos-cart-line__controls {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

.pos-cart-line__controls .button {
  width: 30px;
  min-width: 30px;
  min-height: 30px;
  padding: 0;
}

.pos-cart-line__quantity {
  display: inline-grid;
  min-width: 20px;
  place-items: center;
  font-weight: 700;
}

.pos-cart-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  padding: .55rem .65rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.pos-cart-line__product {
  display: grid;
  min-width: 0;
  gap: .1rem;
}

.pos-cart-line__product > span {
  overflow: hidden;
  color: var(--text-muted);
  font-size: .75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pos-cart__footer {
  display: grid;
  gap: .8rem;
  margin-top: 1rem;
}

.pos-total--final {
  padding-top: .8rem;
  border-top: 1px solid var(--border);
  font-size: 1rem;
}

.receipt-details {
  display: grid;
  gap: .3rem;
  margin: 1rem 0;
  color: var(--text-muted);
  font-size: .82rem;
}

.receipt-line,
.receipt-totals > div {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--border);
}

.receipt-totals {
  margin: 1rem 0;
}

.receipt-totals > div:last-child {
  border-bottom: 0;
  font-size: 1rem;
}

.inventory-controls {
  margin-bottom: 1.25rem;
}

.inventory-controls .toolbar {
  flex-wrap: nowrap;
}

.inventory-controls .field__control {
  flex: 1 1 160px;
  min-width: 0;
}

#inventory-table {
  min-width: 980px;
  table-layout: auto;
}

#inventory-table th:nth-child(1),
#inventory-table td:nth-child(1) { width: 44px; }

#inventory-table th:nth-child(2),
#inventory-table td:nth-child(2) { width: 68px; }

#inventory-table th:nth-child(5),
#inventory-table td:nth-child(5) { width: 150px; }

#inventory-table th:nth-child(6),
#inventory-table td:nth-child(6),
#inventory-table th:nth-child(7),
#inventory-table td:nth-child(7),
#inventory-table th:nth-child(8),
#inventory-table td:nth-child(8) { width: 120px; }

#inventory-table th:nth-child(9),
#inventory-table td:nth-child(9) { width: 54px; }

#inventory-table th,
#inventory-table td {
  padding: 10px 11px;
  vertical-align: middle;
  white-space: nowrap;
}

#inventory-table tr[data-inventory-product-id] {
  height: 58px;
}

#inventory-table tr[data-inventory-product-id] {
  cursor: pointer;
}

#inventory-table .catalog-thumbnail {
  width: 40px;
  height: 40px;
  margin: 0 auto;
}

.inventory-product-cell strong,
.inventory-product-cell small,
.inventory-product-id-cell strong,
.inventory-product-id-cell small,
.inventory-variants-cell strong,
.inventory-variants-cell small {
  display: block;
}

.inventory-product-cell small,
.inventory-product-id-cell small,
.inventory-variants-cell small {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: .72rem;
}

.inventory-expand-cell {
  text-align: center;
}

.inventory-expand {
  display: inline-grid;
  width: 32px;
  height: 32px;
  padding: 0;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
}

.inventory-expand:hover,
.inventory-expand:focus-visible {
  border-color: var(--border);
  background: var(--surface-raised);
}

.inventory-expand__icon {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.inventory-expand[aria-expanded="true"] .inventory-expand__icon {
  transform: rotate(180deg);
}

.inventory-detail-row:hover td {
  background: var(--surface);
}

.inventory-detail-row > td {
  padding: 0;
}

.inventory-detail {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 18px;
  max-width: 100%;
  padding: 18px;
  overflow: visible;
  animation: none;
}

.inventory-detail__summary {
  display: contents;
}

.inventory-detail__content {
  display: grid;
  min-width: 0;
  gap: .8rem;
}

.inventory-detail__content > strong {
  margin-bottom: .2rem;
  font-size: 1rem;
}

.inventory-detail__metadata {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .7rem;
}

.inventory-detail__metadata > span {
  display: grid;
  min-width: 0;
  gap: .2rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--border);
}

.inventory-detail__metadata small {
  color: var(--text-muted);
  font-size: .72rem;
  font-weight: 600;
}

.inventory-detail__metadata strong {
  overflow-wrap: anywhere;
  font-size: .85rem;
}

.inventory-detail__image {
  width: 190px !important;
  height: 190px !important;
  border-radius: 8px;
  object-fit: contain;
}

.inventory-detail__variants-wrap {
  grid-column: 2;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: visible;
}

.inventory-detail__actions {
  grid-column: 2;
  margin-top: -4px;
  padding-top: 0;
}

.inventory-detail__variants {
  table-layout: auto;
}

.inventory-detail__variants th,
.inventory-detail__variants td {
  padding: 9px 10px;
  overflow-wrap: normal;
  white-space: nowrap;
}

/* Inventory expanded row: adapted from the approved reference layout. */
#inventory-table {
  min-width: 920px;
}

#inventory-table th:nth-child(1),
#inventory-table td:nth-child(1) { width: 44px; }

#inventory-table th:nth-child(2),
#inventory-table td:nth-child(2) { width: 270px; }

#inventory-table th:nth-child(3),
#inventory-table td:nth-child(3) { width: 160px; }

#inventory-table th:nth-child(4),
#inventory-table td:nth-child(4) { width: 190px; }

#inventory-table th:nth-child(5),
#inventory-table td:nth-child(5),
#inventory-table th:nth-child(6),
#inventory-table td:nth-child(6),
#inventory-table th:nth-child(7),
#inventory-table td:nth-child(7) { width: 120px; }

#inventory-table th:nth-child(8),
#inventory-table td:nth-child(8) { width: 54px; }

#inventory-table .inventory-product-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

#inventory-table .inventory-product-cell__content {
  min-width: 0;
}

.inventory-detail-shell.is-open {
  display: block;
  opacity: 1;
}

.inventory-detail-row > td {
 
}

.inventory-detail {
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 18px;
  min-height: 0;
  padding: 0 18px;
  background: var(--surface);
}

.inventory-detail-shell.is-open .inventory-detail {
  padding-block: 18px;
}

.inventory-detail-image,
.inventory-detail-image .inventory-detail-img,
.inventory-detail-image .catalog-thumbnail--fallback {
  display: grid;
  width: 100% !important;
  min-height: 170px;
  max-height: 220px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface-raised);
  color: var(--text-muted);
  object-fit: contain;
}

.inventory-detail-image .inventory-detail-img {
  height: 190px !important;
}

.inventory-detail-content {
  min-width: 0;
}

.inventory-detail-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.inventory-detail-heading h3,
.inventory-detail-heading p {
  margin: 0;
}

.inventory-detail-heading p {
  margin-top: 4px;
  color: var(--text-muted);
}

.inventory-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.inventory-facts > div {
  min-width: 0;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--border);
}

.inventory-facts dt {
  color: var(--text-muted);
  font-size: .72rem;
}

.inventory-facts dd {
  margin: 4px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inventory-variant-wrap {
  max-height: 210px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 7px;
  scrollbar-width: none;
}

.inventory-variant-wrap::-webkit-scrollbar {
  display: none;
}

.inventory-variant-table th,
.inventory-variant-table td {
  padding: 9px 10px;
  background: var(--surface);
  white-space: nowrap;
}

.inventory-variant-table th:first-child,
.inventory-variant-table td:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

.inventory-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.inventory-workflow-dialog {
  width: min(100%, 860px);
}

.inventory-workflow-identity {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
  padding: .85rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-raised);
}

.inventory-workflow-identity small,
.inventory-workflow-identity strong {
  display: block;
}

.inventory-workflow-identity small {
  color: var(--text-muted);
}

.inventory-workflow-results {
  display: grid;
  gap: .4rem;
}

.inventory-workflow-results .button {
  justify-content: flex-start;
  text-align: left;
}

.inventory-receive-feedback {
  display: block;
  min-height: 5rem;
  color: var(--accent);
  font-size: clamp(4rem, 10vw, 6rem);
  font-weight: 800;
  line-height: 1;
  text-align: center;
}

.inventory-workflow-summary {
  color: var(--text-muted);
  font-weight: 650;
}

@media (max-width: 680px) {
  .inventory-workflow-identity {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Parent Inventory rows: compact fixed columns with no selection or chevron cell. */
#inventory-table {
  min-width: 940px;
  table-layout: fixed;
}

#inventory-table th:nth-child(1),
#inventory-table td:nth-child(1) { width: 62px; }

#inventory-table th:nth-child(2),
#inventory-table td:nth-child(2) { width: 250px; }

#inventory-table th:nth-child(3),
#inventory-table td:nth-child(3) { width: 160px; }

#inventory-table th:nth-child(4),
#inventory-table td:nth-child(4) { width: 205px; }

#inventory-table th:nth-child(5),
#inventory-table td:nth-child(5) { width: 120px; }

#inventory-table th:nth-child(6),
#inventory-table td:nth-child(6) { width: 110px; }

#inventory-table th:nth-child(7),
#inventory-table td:nth-child(7) { width: 120px; }

#inventory-table .inventory-thumbnail-cell {
  text-align: center;
}

#inventory-table .inventory-product-cell {
  display: table-cell;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#inventory-table .inventory-product-cell__content {
  display: block;
  overflow: hidden;
}

#inventory-table .inventory-product-cell strong,
#inventory-table .inventory-product-cell small,
#inventory-table .inventory-product-id-cell strong,
#inventory-table .inventory-product-id-cell small,
#inventory-table .inventory-variants-cell strong,
#inventory-table .inventory-variants-cell small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#inventory-table tr[data-inventory-product-id] {
  height: 62px;
}

#inventory-table > tbody > tr[data-inventory-product-id]:hover > td,
#inventory-table > tbody > tr[data-inventory-product-id].is-open > td {
  background: var(--surface-raised);
}

.inventory-detail-row:hover td,
.inventory-detail-row .inventory-variant-table tbody tr:hover td {
  background: var(--surface);
}

.inventory-detail-image,
.inventory-detail-image .inventory-detail-img,
.inventory-detail-image .catalog-thumbnail--fallback {
  border: 0;
  background: transparent;
}

.inventory-detail-image .inventory-detail-img {
  object-fit: cover;
}

.orders-controls {
  margin-bottom: 1.25rem;
}

.orders-controls > .toolbar {
  flex-wrap: nowrap;
}

.orders-controls .field__control {
  flex: 0 1 170px;
  min-width: 0;
}

.orders-controls #orders-search {
  flex-basis: 300px;
}

.orders-custom-dates,
.orders-filter-panel {
  margin-top: .85rem;
  padding-top: .85rem;
  border-top: 1px solid var(--border);
}

.orders-table {
  min-width: 980px;
}

.orders-table tbody tr[data-order-id] {
  cursor: pointer;
}

.orders-action-trigger {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 800;
  letter-spacing: .08em;
}

.orders-action-trigger:hover,
.orders-action-trigger:focus-visible {
  border-color: var(--border);
  background: var(--surface-raised);
}

.orders-action-menu {
  position: fixed;
  z-index: 30;
  display: grid;
  min-width: 180px;
  padding: .35rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow-hover);
}

.orders-action-menu button {
  min-height: 36px;
  padding: 0 .65rem;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  text-align: left;
}

.orders-action-menu button:hover,
.orders-action-menu button:focus-visible {
  border-color: var(--border);
  background: var(--surface-raised);
}

.orders-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .75rem;
  margin-top: 1rem;
  color: var(--text-muted);
}

.orders-page-size {
  width: 118px;
  min-height: 34px;
}

.orders-detail-dialog {
  width: min(100%, 900px);
}

.orders-detail-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  margin: 1rem 0;
}

.orders-detail-facts > div {
  display: grid;
  gap: .2rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--border);
}

.orders-detail-facts small {
  color: var(--text-muted);
  font-size: .74rem;
  font-weight: 600;
}

.orders-detail-lines {
  min-width: 680px;
}

.orders-detail-totals {
  display: grid;
  gap: .45rem;
  width: min(100%, 280px);
  margin: 1rem 0 1rem auto;
}

.orders-detail-totals > div {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
}

.orders-detail-dialog h3 {
  margin: 1.25rem 0 .5rem;
  font-size: .92rem;
}

.orders-detail-dialog h3 + p,
.orders-detail-dialog h3 ~ p {
  margin: .35rem 0;
  color: var(--text-muted);
  font-size: .8rem;
}

.customers-controls {
  margin-bottom: 1.25rem;
}

.customers-controls > .toolbar {
  flex-wrap: nowrap;
}

.customers-controls .field__control {
  flex: 0 1 170px;
  min-width: 0;
}

.customers-controls #customers-search {
  flex-basis: 300px;
}

.customers-filter-panel {
  width: min(100%, 220px);
  margin-top: .85rem;
  padding-top: .85rem;
  border-top: 1px solid var(--border);
}

.customers-table {
  min-width: 920px;
}

.customers-table tbody tr[data-customer-id] {
  cursor: pointer;
}

.customers-action-trigger {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 800;
  letter-spacing: .08em;
}

.customers-action-trigger:hover,
.customers-action-trigger:focus-visible {
  border-color: var(--border);
  background: var(--surface-raised);
}

.customers-action-menu {
  position: fixed;
  z-index: 30;
  display: grid;
  min-width: 190px;
  padding: .35rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow-hover);
}

.customers-action-menu button {
  min-height: 36px;
  padding: 0 .65rem;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  text-align: left;
}

.customers-action-menu button:hover,
.customers-action-menu button:focus-visible {
  border-color: var(--border);
  background: var(--surface-raised);
}

.customers-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .75rem;
  margin-top: 1rem;
  color: var(--text-muted);
}

.customers-page-size {
  width: 118px;
  min-height: 34px;
}

.customers-profile-dialog {
  width: min(100%, 900px);
}

.customers-profile-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  margin: 1rem 0;
}

.customers-profile-facts > div {
  display: grid;
  gap: .2rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--border);
}

.customers-profile-facts small {
  color: var(--text-muted);
  font-size: .74rem;
  font-weight: 600;
}

.customers-profile-status {
  margin: 0 0 1rem;
}

.customers-profile-dialog h3 {
  margin: 1.25rem 0 .5rem;
  font-size: .92rem;
}

.customers-history-wrap {
  max-height: 260px;
}

.customers-history-table {
  min-width: 660px;
}

@media (max-width: 960px) {
  .orders-detail-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .customers-profile-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .orders-detail-facts {
    grid-template-columns: 1fr;
  }

  .orders-pagination {
    align-items: flex-start;
    flex-direction: column;
  }

  .customers-profile-facts {
    grid-template-columns: 1fr;
  }

  .customers-pagination {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 960px) {
  .pos-layout {
    grid-template-columns: 1fr;
  }

  .pos-cart {
    position: static;
  }

  .inventory-controls .toolbar {
    flex-wrap: wrap;
  }

  .inventory-detail {
    grid-template-columns: 150px minmax(0, 1fr);
  }

  .inventory-detail__image {
    width: 150px !important;
    height: 150px !important;
  }

  .inventory-controls .field__control {
    flex-basis: 200px;
  }

  .pos-product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  #app-shell.is-sidebar-collapsed .pos-product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 620px) {
  .pos-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #app-shell.is-sidebar-collapsed .pos-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .inventory-detail {
    grid-template-columns: 1fr;
  }

  .inventory-detail__metadata {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .inventory-detail__image {
    width: 100% !important;
    max-width: 220px;
    height: 220px !important;
  }

  .inventory-detail__variants-wrap,
  .inventory-detail__actions {
    grid-column: 1;
  }
}

@media (max-width: 1000px) {
  .inventory-detail {
    grid-template-columns: 150px minmax(0, 1fr);
  }

  .inventory-detail-image .inventory-detail-img {
    height: 170px !important;
  }

  .inventory-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .inventory-detail {
    grid-template-columns: 1fr;
  }

  .inventory-detail-image {
    max-width: 220px;
  }

  .inventory-facts {
    grid-template-columns: 1fr;
  }
}

.grid {
  display: grid;
  gap: 1rem;
}

.grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.empty-state {
  padding: 1rem 1rem;
  color: var(--text-muted);
  text-align: center;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.login-view {
  display: grid;
  place-items: center;
  min-height: 100vh;
  max-width: none;
  padding: 2rem;
}

.login-card {
  width: min(100%, 525px);
  justify-self: center;
  padding: 2.25rem;
  box-shadow: 0 18px 36px rgb(0 0 0 / .1);
}

.login-card__brand-row {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-bottom: 1.65rem;
}

.login-card__brand {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  background: var(--text);
  mask: url('../assets/brand/boyshop-mark.svg') center / contain no-repeat;
  -webkit-mask: url('../assets/brand/boyshop-mark.svg') center / contain no-repeat;
}

.login-card__logo {
  width: 190px;
  height: 44px;
  background: var(--text);
  mask: url('../assets/brand/boyshop-logo.svg') left center / contain no-repeat;
  -webkit-mask: url('../assets/brand/boyshop-logo.svg') left center / contain no-repeat;
}

.login-card .view__title {
  margin-bottom: 1.4rem;
}

.login-card .button {
  width: 100%;
  margin-top: .25rem;
}

#login-error {
  margin: 0;
  color: var(--text);
  font-size: .85rem;
  font-weight: 600;
}

@media (max-width: 760px) {
  .view {
    padding: 1rem;
  }

  .view__header {
    align-items: flex-start;
    flex-direction: column;
  }

  .grid--two,
  .grid--three {
    grid-template-columns: 1fr;
  }

}

/* Settings uses the shared form and table components; these rules only arrange its stable sections. */
.settings-notice { min-height: 1.2rem; margin: -.5rem 0 .75rem; color: var(--text-muted); font-weight: 600; }
.settings-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 1.5rem; }
.settings-tabs { position: sticky; top: 1rem; display: grid; gap: .3rem; align-self: start; }
.settings-tabs button { min-height: 36px; padding: .45rem .65rem; border: 0; border-radius: 7px; background: transparent; color: var(--text-muted); font: inherit; font-weight: 650; text-align: left; cursor: pointer; }
.settings-tabs button:hover, .settings-tabs button.is-active { background: var(--surface-raised); color: var(--text); }
.settings-panel > header { margin-bottom: 1rem; }
.settings-panel h2, .settings-panel h3 { margin: 0; font-size: 1rem; }
.settings-panel header p { margin: .3rem 0 0; color: var(--text-muted); }
.settings-form { max-width: 860px; }
.settings-theme-field { max-width: 300px; }
.settings-request-queue { margin-top: 1.75rem; }
.settings-request-queue h3 { margin-bottom: .7rem; }
.settings-supported-note { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .7rem 1rem; max-width: 800px; color: var(--text-muted); }
.settings-supported-note strong { color: var(--text); }
.settings-system-actions { display: grid; justify-items: start; gap: .65rem; }
.settings-capabilities { display: grid; gap: .6rem; margin: 0; padding: .8rem; border: 1px solid var(--border); border-radius: 8px; }
.settings-capabilities legend { padding: 0 .3rem; color: var(--text); font-weight: 700; }
.settings-capabilities > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem 1rem; }
.settings-capability, .settings-active { display: flex; align-items: center; gap: .45rem; color: var(--text); }
.settings-capability small { margin-left: auto; color: var(--text-muted); font-size: .72rem; }
.settings-request-details { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: .45rem .8rem; margin: 0; }
.settings-request-details dt { color: var(--text-muted); font-weight: 650; }
.settings-request-details dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }

.dashboard-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.dashboard-kpi { display: grid; gap: .35rem; min-height: 86px; padding: .85rem; border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-subtle); }
.dashboard-kpi span { color: var(--text-muted); font-size: .76rem; font-weight: 700; }
.dashboard-kpi strong { font-size: 1.2rem; }
.dashboard-kpi--warning { border-top: 2px solid var(--status-warning); }
.dashboard-kpi--danger { border-top: 2px solid var(--status-danger); }
.dashboard-kpi--value { border-top: 2px solid var(--status-info); }
.dashboard-grid { display: grid; gap: 1rem; margin-bottom: 1rem; }
.dashboard-grid--primary { grid-template-columns: minmax(0, 1.4fr) minmax(280px, .9fr); align-items: stretch; }
.dashboard-grid--primary > .dashboard-section { display: flex; flex-direction: column; height: 100%; }
.dashboard-grid--primary > .dashboard-section > .dashboard-list { flex: 1; }
.dashboard-grid--secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dashboard-section { min-width: 0; 
}
.dashboard-section__header { display: flex; align-items: start; justify-content: space-between; gap: .8rem; margin-bottom: .75rem; margin-top: .75rem; }
.dashboard-section__header h2 { margin: 0; font-size: 1rem; }
.dashboard-section__header .view__subtitle { margin: .2rem 0 0; }
.dashboard-periods { display: flex; gap: .35rem; }
.dashboard-periods .button { min-height: 30px; padding: .3rem .55rem; }
.dashboard-periods .button.is-active { background: var(--text); color: var(--surface); }
.dashboard-trend { display: flex; align-items: end; gap: .55rem; min-height: 150px; padding: .65rem .25rem 0; }
.dashboard-trend__item { display: grid; flex: 1; min-width: 0; grid-template-rows: auto 1fr auto; gap: .3rem; height: 130px; }
.dashboard-trend__value, .dashboard-trend__item small { overflow: hidden; color: var(--text-muted); font-size: .7rem; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-trend__item i { align-self: end; width: 100%; min-height: 4px; height: var(--dashboard-bar); border-radius: 5px 5px 0 0; background: var(--status-info); opacity: .75; }
.dashboard-list { display: grid; gap: .45rem; border-radius: 10px; border: 1px solid var(--border); padding: 1rem 1.25rem;
}
.dashboard-list__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto; align-items: center; gap: .75rem; width: 100%; min-height: 42px; padding: .55rem 0; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); font: inherit; text-align: left; }
button.dashboard-list__row { cursor: pointer; }
button.dashboard-list__row:hover { color: var(--status-info); }
.dashboard-list__row strong, .dashboard-list__row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-list__row span { color: var(--text-muted); font-size: .78rem; }
.dashboard-list__row:last-child { border-bottom: 0; }
.dashboard-orders-table tbody tr { cursor: pointer; }

@media (max-width: 1100px) { .dashboard-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .dashboard-kpis, .dashboard-grid--primary, .dashboard-grid--secondary { grid-template-columns: 1fr; } .dashboard-section__header { align-items: flex-start; flex-direction: column; } .dashboard-list__row { grid-template-columns: minmax(0, 1fr) auto; } .dashboard-list__row span { grid-column: 1 / -1; } }

@media (max-width: 760px) {
  .settings-layout { grid-template-columns: 1fr; }
  .settings-tabs { position: static; display: flex; overflow-x: auto; padding-bottom: .2rem; }
  .settings-tabs button { flex: 0 0 auto; }
  .settings-capabilities > div { grid-template-columns: 1fr; }
}