/* Admin panel mobile layout only. Desktop rules are unchanged. */
@media (max-width: 820px) {
  html:has(.admin-app),
  html body.admin-body,
  html:has(.admin-app) body {
    overflow-x: hidden !important;
    max-width: 100%;
  }

  html body .admin-app {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    padding-bottom: 12px !important;
    overflow-x: hidden !important;
  }

  html body .admin-mobile-menu {
    display: grid !important;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: none;
  }

  html body .admin-sidebar-toggle {
    display: none !important;
  }

  html body .admin-nav-backdrop {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 85 !important;
    background: #03101fcc !important;
    border: 0 !important;
  }

  html body .admin-app .admin-sidebar {
    position: fixed !important;
    inset: 0 0 0 auto !important;
    top: 0 !important;
    bottom: 0 !important;
    width: min(88vw, 320px) !important;
    height: 100dvh !important;
    z-index: 90 !important;
    padding: 18px 14px 28px !important;
    overflow: auto !important;
    border: 0 !important;
    transform: translateX(110%) !important;
    box-sizing: border-box !important;
  }

  html body .admin-app.admin-nav-open .admin-sidebar,
  html body .admin-sidebar.is-open {
    transform: translateX(0) !important;
  }

  html body .admin-app .admin-brand,
  html body .admin-app .admin-sidebar nav h3,
  html body .admin-app .admin-sidebar nav section,
  html body .admin-app .view-store,
  html body .admin-app .admin-sidebar nav a span,
  html body .admin-app .admin-sidebar nav a > b {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    white-space: normal !important;
  }

  html body .admin-app .admin-sidebar nav,
  html body .admin-app .admin-sidebar nav section {
    display: block !important;
    grid-template-columns: none !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
  }

  html body .admin-app .admin-sidebar nav h3 {
    font-size: 12px !important;
    line-height: 1.5 !important;
    margin: 8px 4px !important;
  }

  html body .admin-app .admin-sidebar nav a,
  html body .admin-app .admin-sidebar nav section:first-child a {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 44px !important;
    padding: 8px 10px !important;
    box-sizing: border-box !important;
    place-items: unset !important;
  }

  html body .admin-app .admin-sidebar nav a i {
    flex: none !important;
    width: auto !important;
    height: auto !important;
    font-size: 16px !important;
    line-height: 1 !important;
  }

  html body .admin-app .admin-sidebar nav a span {
    flex: 1 1 auto !important;
    display: block !important;
    width: auto !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
  }

  html body .admin-stage,
  html body .admin-main,
  html body .soft-page {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  html body .admin-main {
    padding: 12px 10px 24px !important;
    overflow-x: hidden !important;
  }

  html body .admin-topbar {
    height: auto !important;
    min-height: 58px;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 8px 10px !important;
    box-sizing: border-box !important;
  }

  html body .admin-topbar > div {
    min-width: 0 !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
  }

  html body .admin-topbar > div:last-child {
    margin-inline-start: auto;
    justify-content: flex-end;
  }

  html body .admin-breadcrumb {
    min-width: 0 !important;
    flex-wrap: wrap !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  html body .admin-breadcrumb b {
    display: block;
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: 16px !important;
    line-height: 1.4 !important;
  }

  html body .admin-notify-panel {
    position: fixed !important;
    top: 64px !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(60dvh, 420px);
    overflow: auto !important;
    box-sizing: border-box !important;
  }

  html body .admin-notify-panel button,
  html body .admin-notify-panel p,
  html body .admin-notify-panel small {
    white-space: normal !important;
    overflow-wrap: anywhere;
    font-size: 13px !important;
    line-height: 1.5 !important;
    text-align: right;
  }

  html body .admin-page-head,
  html body .catalog-section-head,
  html body .admin-card > header,
  html body .card-head,
  html body .seo-score,
  html body .ohm-accounting-head,
  html body .ohm-metal-head,
  html body .rg-ov-visits header,
  html body .admin-form-actions,
  html body .admin-modal footer,
  html body .content-cards .admin-card footer,
  html body .row-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html body .admin-page-head > div:last-child,
  html body .catalog-section-head > div:last-child,
  html body .admin-card > header > div:last-child {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 8px !important;
  }

  html body .admin-page-head h1,
  html body .admin-card h2,
  html body .admin-card h3,
  html body .catalog-section-head h2,
  html body .admin-modal h2 {
    font-size: 20px !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere;
    margin-top: 4px !important;
  }

  html body .admin-page-head p,
  html body .admin-page-head span,
  html body .catalog-section-head p,
  html body .catalog-section-head span,
  html body .admin-main .prose,
  html body .admin-main .field small,
  html body .admin-main .field label,
  html body .seo-score span,
  html body .admin-kpis span,
  html body .admin-kpis small,
  html body .catalog-entity li span,
  html body .catalog-entity li small {
    font-size: 13px !important;
    line-height: 1.6 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  html body .admin-kpis {
    grid-template-columns: 1fr 1fr !important;
    min-width: 0 !important;
  }

  html body .admin-kpis strong {
    font-size: 18px !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere;
  }

  html body .admin-form-grid,
  html body .catalog-entity-grid,
  html body .settings-grid,
  html body .price-rule-grid,
  html body .integration-grid,
  html body .report-grid,
  html body .content-cards,
  html body .health-grid,
  html body .media-grid,
  html body .admin-grid-main,
  html body .product-media-upload-grid,
  html body .catalog-filter-grid,
  html body .gallery-preview,
  html body .product-placement-options,
  html body .ohm-metal-grid,
  html body .payment-card-upload-grid,
  html body .rg-ov-charts,
  html body .rg-ov-hero,
  html body .admin-app .rg-ov-strip {
    grid-template-columns: 1fr !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  html body .admin-app .rg-ov-strip,
  html body .admin-app .rg-ov-pills {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  html body .admin-filters,
  html body .catalog-filter-tools,
  html body .catalog-filter-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 8px !important;
  }

  html body .admin-filters input:first-child {
    min-width: 0 !important;
  }

  html body .admin-main fieldset,
  html body .admin-main form,
  html body .admin-main .admin-card,
  html body .admin-main .field,
  html body .admin-modal,
  html body .crm-dialog {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  html body .admin-main input:not([type="checkbox"]):not([type="radio"]),
  html body .admin-main select,
  html body .admin-main textarea,
  html body .admin-modal input:not([type="checkbox"]):not([type="radio"]),
  html body .admin-modal select,
  html body .admin-modal textarea,
  html body .crm-dialog input:not([type="checkbox"]):not([type="radio"]),
  html body .crm-dialog select,
  html body .crm-dialog textarea,
  html body .auth-shell .panel.admin-login input:not([type="checkbox"]):not([type="radio"]) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    font-size: 16px !important;
    line-height: 1.45 !important;
    box-sizing: border-box !important;
  }

  html body .admin-main .admin-primary,
  html body .admin-main .admin-secondary,
  html body .admin-main .button,
  html body .admin-main .wide-button,
  html body .admin-main .text-button,
  html body .admin-modal .admin-primary,
  html body .admin-modal .admin-secondary,
  html body .admin-modal footer > *,
  html body .admin-form-actions > * {
    font-size: 13px !important;
    line-height: 1.45 !important;
    height: auto !important;
    min-height: 40px;
    white-space: normal !important;
    overflow-wrap: anywhere;
    max-width: 100% !important;
    width: 100%;
    box-sizing: border-box !important;
    text-align: center;
  }

  html body .admin-tabs,
  html body .catalog-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  html body .admin-tabs button,
  html body .catalog-tabs a {
    font-size: 13px !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    height: auto !important;
  }

  html body .admin-main .table-wrap,
  html body .admin-main .crm-table-wrap,
  html body .admin-card .table-wrap {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  html body .admin-main table.data-table,
  html body .admin-main table.crm-table {
    min-width: 0 !important;
    width: max-content;
    max-width: none;
    margin-top: 12px;
  }

  html body .admin-main table.data-table th,
  html body .admin-main table.data-table td,
  html body .admin-main table.crm-table th,
  html body .admin-main table.crm-table td {
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 7.25rem;
    max-width: 16rem;
    font-size: 13px !important;
    line-height: 1.5 !important;
    vertical-align: top;
  }

  html body .admin-main .catalog-entity li {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
  }

  html body .admin-main img,
  html body .admin-main video,
  html body .admin-product-thumb,
  html body .gallery-tile img,
  html body .saved-media-list img {
    max-width: 100% !important;
    height: auto;
  }

  html body .saved-media-list > div {
    flex-wrap: wrap !important;
    width: 100%;
    box-sizing: border-box;
  }

  html body .admin-main pre,
  html body .admin-main code,
  html body .admin-modal pre,
  html body .admin-modal code {
    white-space: pre-wrap !important;
    overflow-wrap: anywhere;
    max-width: 100%;
  }

  html body .admin-modal-backdrop,
  html body .crm-dialog-backdrop {
    padding: 8px !important;
    box-sizing: border-box !important;
  }

  html body .admin-modal,
  html body .crm-dialog,
  html body .audit-drawer {
    width: min(560px, calc(100vw - 16px)) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px);
    overflow: auto !important;
    box-sizing: border-box !important;
  }

  html body .auth-shell,
  html body .auth-shell.admin-auth-shell,
  html body .auth-shell.admin-auth-check {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    padding: 16px 12px 24px !important;
  }

  html body .auth-shell .panel.admin-login {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}