@media (max-width: 760px) {
  html,
  body,
  #app,
  .shell,
  .workspace,
  .content {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  .workspace,
  .content,
  .content > *,
  .summary,
  .metrics,
  .quick,
  .health-grid,
  .panel,
  .section-head,
  .heading,
  .search-bar,
  .product-list,
  .product-row,
  .quick-entry,
  .form-grid,
  .inline,
  .data-list,
  .data-row,
  .health-card,
  .health-card details,
  .health-card dl,
  .health-card dl > div,
  .health-card dt,
  .health-card dd {
    min-width: 0;
    max-width: 100%;
  }

  .content > *,
  .panel,
  .summary,
  .search-bar,
  .product-list,
  .quick-entry,
  .form-grid,
  .inline,
  .data-list {
    width: 100%;
  }

  .summary,
  .section-head,
  .heading,
  .product-row,
  .data-row,
  .health-card,
  .quick-entry,
  .form-grid,
  .inline {
    overflow-wrap: break-word;
    word-break: normal;
  }

  input,
  select,
  textarea,
  button {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    font: inherit;
  }

  input,
  select,
  textarea {
    -webkit-appearance: none;
    appearance: none;
    min-height: 44px;
    border-radius: 12px;
    line-height: 1.2;
  }

  button,
  .primary,
  .secondary,
  .ghost,
  .side-action,
  .menu {
    -webkit-appearance: none;
    appearance: none;
    min-height: 44px;
    border-radius: 12px;
    line-height: 1.1;
  }

  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  button:focus-visible {
    outline-offset: 2px;
  }

  .product-actions,
  .actions {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
  }

  .product-actions > *,
  .actions > * {
    min-width: 0;
    max-width: 100%;
  }

  .search-bar,
  .search-bar > *,
  .product-row,
  .product-row > * {
    min-width: 0;
    max-width: 100%;
  }

  .search-bar > div,
  .actions,
  .product-actions {
    flex-wrap: wrap;
  }

  .health-card > div {
    min-width: 0;
    max-width: 100%;
  }

  .health-card > div h3 {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .health-card .badge {
    flex: 0 0 auto;
  }

  .health-card dl > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .2rem;
    align-items: start;
  }

  .health-card dd {
    margin: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .checked {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .topbar,
  .topbar.mobile-fixed-topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    max-width: none !important;
    z-index: 80;
    box-sizing: border-box;
    transform: none !important;
    -webkit-transform: none !important;
  }

  .workspace,
  .workspace.mobile-fixed-header {
    padding-top: var(--mobile-topbar-height, 76px) !important;
  }

  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    height: auto;
    max-height: none;
    overflow-y: scroll;
    overflow-x: hidden;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    scroll-padding-bottom: 7rem;
  }

  .sidebar nav {
    min-height: min-content;
  }

  .sidebar footer {
    flex: 0 0 auto;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 7rem);
  }

  .backdrop {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
  }
}

/* The Mercadinho overview uses its own grid classes, introduced after the
   shared dashboard rules. Keep the cards readable instead of squeezing three
   columns into a narrow phone or a tablet beside the desktop sidebar. */
@media (min-width: 761px) and (max-width: 1100px) {
  [data-theme="mercadinho"] .dashboard-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  [data-theme="mercadinho"] .dashboard-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  [data-theme="mercadinho"] .health-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  [data-theme="mercadinho"] .health-card dl > div {
    min-width: 0;
    flex-wrap: wrap;
    gap: .3rem .75rem;
  }
  [data-theme="mercadinho"] .health-card dd {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 760px) {
  [data-theme="mercadinho"] .dashboard-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
  [data-theme="mercadinho"] .dashboard-head select {
    width: 100%;
    min-width: 0;
  }
  [data-theme="mercadinho"] .dashboard-metrics,
  [data-theme="mercadinho"] .dashboard-grid,
  [data-theme="mercadinho"] .dashboard-payments,
  [data-theme="mercadinho"] .dashboard-stock {
    grid-template-columns: minmax(0, 1fr);
  }
  [data-theme="mercadinho"] .dashboard-metrics article,
  [data-theme="mercadinho"] .dashboard-grid > *,
  [data-theme="mercadinho"] .dashboard-payments span,
  [data-theme="mercadinho"] .dashboard-stock span {
    min-width: 0;
  }
  [data-theme="mercadinho"] .dashboard-grid .heading,
  [data-theme="mercadinho"] .dashboard-ranking div {
    flex-wrap: wrap;
  }
  [data-theme="mercadinho"] .dashboard-ranking div > * {
    min-width: 0;
    overflow-wrap: break-word;
  }
  [data-theme="mercadinho"] .dashboard-grid .heading button {
    width: 100%;
  }
  [data-theme="mercadinho"] .dashboard-metrics span,
  [data-theme="mercadinho"] .dashboard-metrics small,
  [data-theme="mercadinho"] .dashboard-payments span,
  [data-theme="mercadinho"] .dashboard-stock span,
  [data-theme="mercadinho"] .data-row dd,
  [data-theme="mercadinho"] .row-main > span {
    font-size: .85rem;
  }
  [data-theme="mercadinho"] .badge {
    font-size: .75rem;
  }
}

@media (max-width: 430px) {
  [data-theme="mercadinho"] .customer-center .customer-result {
    grid-template-columns: 38px minmax(0, 1fr) !important;
  }
  [data-theme="mercadinho"] .customer-result-action {
    grid-column: 2;
  }
  [data-theme="mercadinho"] .customer-account-row dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  [data-theme="mercadinho"] .product-row > * {
    overflow-wrap: break-word;
  }
}

/* Mercadinho deliberately excludes supplier, purchasing, financial/AP-AR and
   customer-order/omnichannel modules. Keep shared code available to other tenants. */
html[data-theme="mercadinho"] .sidebar [data-page="suppliers"],
html[data-theme="mercadinho"] .sidebar [data-page="purchases"],
html[data-theme="mercadinho"] .sidebar [data-page="finance"],
html[data-theme="mercadinho"] .sidebar [data-page="sellables"],
html[data-theme="mercadinho"] .sidebar [data-page="orders"],
html[data-theme="mercadinho"] .sidebar [data-page="conversations"] {
  display: none !important;
}