/* ============================================================
   Sellerina Admin Mobile Overrides
   Loaded only on narrow screens after admin.css.
   Baseline viewport: 390 x 844
   ============================================================ */

:root {
  --mtr-mobile-edge: 16px;
  --mtr-mobile-section-gap: 16px;
  --mtr-mobile-card-pad: 18px;
}

html,
body {
  overflow-x: hidden !important;
  -webkit-text-size-adjust: 100% !important;
}

body {
  background:
    radial-gradient(circle at 42% 0%, rgba(255,255,255,.88) 0, rgba(255,255,255,0) 36%),
    linear-gradient(135deg, #F8F8F8 0%, #E7E7E7 42%, #F4F4F4 68%, #D2D2D2 100%) !important;
}

.layout {
  display: block !important;
  min-width: 0 !important;
}

.mobile-topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  height: auto !important;
  min-height: 50px !important;
  padding: 7px var(--mtr-mobile-edge) 5px !important;
  background: rgba(255,255,255,.86) !important;
  border-bottom: 1px solid rgba(26,26,26,.06) !important;
  backdrop-filter: blur(14px) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1200 !important;
}

.mobile-topbar .hamburger,
#mobileHamburger {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 34px !important;
  flex: 0 0 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #1A1A1A !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

.mobile-topbar .hamburger svg,
#mobileHamburger svg {
  width: 30px !important;
  height: 30px !important;
  stroke-width: 1.8 !important;
}

.mobile-topbar-logo {
  display: none !important;
}

.sidebar,
.sidebar.is-open {
  top: 0 !important;
  bottom: 0 !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  width: min(336px, 86vw) !important;
  max-width: 86vw !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: 0 22px 22px 0 !important;
}

.sidebar-close {
  display: none !important;
}

.sidebar.is-open .sidebar-close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  background: rgba(255,255,255,.10) !important;
  color: #FFFFFF !important;
  z-index: 3 !important;
  font-size: 24px !important;
  line-height: 1 !important;
  font-weight: 300 !important;
  backdrop-filter: blur(6px) !important;
}

.sidebar-close span {
  transform: translateY(-1px);
}

.sidebar-header {
  flex: 0 0 auto !important;
  padding: 28px 56px 18px 22px !important;
  margin-bottom: 4px !important;
}

.sidebar-nav {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 0 12px 12px !important;
  -webkit-overflow-scrolling: touch !important;
}

.sidebar-footer {
  flex: 0 0 auto !important;
  padding: 10px 22px 14px !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  background: linear-gradient(180deg, rgba(47,47,47,0), rgba(47,47,47,.52)) !important;
}

.sidebar-quota-widget {
  display: block !important;
  height: auto !important;
  min-height: 124px !important;
  margin: 8px 8px 14px !important;
  padding: 12px 12px 11px !important;
  overflow: visible !important;
}

.quota-widget-row {
  display: block !important;
  min-height: 22px !important;
}

.quota-widget-row + .quota-widget-row {
  margin-top: 9px !important;
}

.quota-widget-label {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
}

.quota-widget-label span,
.quota-widget-label strong {
  line-height: 1.2 !important;
}

.quota-widget-bar {
  height: 4px !important;
  margin-top: 5px !important;
}

.sidebar-backdrop.is-open {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 1240 !important;
  background: rgba(0,0,0,.36) !important;
}

.main,
.main-content,
.admin-main,
main {
  margin-left: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
}

.page-container,
.main-content > .page-container,
.main-content .page-container,
main.page-container,
.admin-content,
.content,
.content-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: var(--mtr-mobile-edge) !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

.page-container > * + * {
  margin-top: var(--mtr-mobile-section-gap) !important;
}

.masthead,
.page-header,
.admin-page-header {
  width: 100% !important;
  margin: 0 0 var(--mtr-mobile-section-gap) !important;
  padding: 0 !important;
  gap: 12px !important;
  align-items: stretch !important;
}

.masthead-titles {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  flex-wrap: nowrap !important;
}

.masthead-title,
.masthead h1,
.page-header h1,
.admin-page-header h1,
h1 {
  font-size: 25px !important;
  line-height: 1.18 !important;
  letter-spacing: -0.045em !important;
  font-weight: 900 !important;
}

.masthead-sub,
.masthead-context,
.page-subtitle {
  font-size: 12.5px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  color: #7A7A7A !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
}

.masthead .wf-breadcrumb,
.wf-breadcrumb {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 12px 10px !important;
  border: 1px solid #E2E2E2 !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.72) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
}

.wf-breadcrumb::-webkit-scrollbar {
  display: none !important;
}

.wf-breadcrumb .wf-steps {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0 !important;
  min-width: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-wrap: nowrap !important;
}

.wf-breadcrumb .wf-step,
.wf-breadcrumb .wf-step.is-current,
.wf-breadcrumb .wf-step a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  white-space: nowrap !important;
}

.wf-breadcrumb .wf-step {
  flex: 1 1 0 !important;
}

.wf-breadcrumb .wf-step.is-current {
  flex: 1.85 1 0 !important;
}

.wf-breadcrumb .wf-step a {
  width: 100% !important;
}

.wf-breadcrumb .wf-num,
.wf-breadcrumb .wf-step .wf-num,
.main-content .wf-breadcrumb .wf-step span.wf-num {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  background: linear-gradient(145deg, #F5F5F5 0%, #E2E2E2 100%) !important;
  color: #6A6A6A !important;
  border: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 1px 2px rgba(26,26,26,.05) !important;
}

.wf-breadcrumb .wf-step.is-current .wf-num {
  background: #1A1A1A !important;
  color: #FFFFFF !important;
}

.wf-breadcrumb .wf-step.is-done .wf-num {
  background: linear-gradient(145deg, #F0F0F0 0%, #DEDEDE 100%) !important;
  color: #5A5A5A !important;
}

.wf-breadcrumb .wf-num-prefix {
  display: none !important;
}

.wf-breadcrumb .wf-lbl,
.wf-breadcrumb .wf-step.is-current .wf-lbl {
  font-size: 14px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  color: #1F1F1F !important;
  white-space: nowrap !important;
  max-width: 92px !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.wf-breadcrumb .wf-step:not(.is-current) .wf-lbl {
  display: none !important;
}

.wf-breadcrumb .wf-arrow {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 34px !important;
  padding: 0 2px !important;
  font-size: 16px !important;
  line-height: 1 !important;
  color: #B8B8B8 !important;
  flex: 0 0 12px !important;
}

.panel,
.card,
.gf-card,
.form-card,
.help-box,
section.panel,
section.card,
div.panel,
div.card {
  padding: var(--mtr-mobile-card-pad) !important;
  border-radius: 18px !important;
}

body .main-content > main.page-container > .masthead,
body .main-content > .page-container > .masthead,
body main.page-container > .masthead,
body .page-container > .masthead {
  margin: 0 0 var(--mtr-mobile-section-gap) !important;
  padding: 0 !important;
}

body .page-container > .dispatch-product-card,
body .page-container > .product-list-page,
body .page-container > .ai-product-panel,
body .page-container > .card,
body .page-container > .panel {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body .page-container > .dispatch-product-card {
  margin-top: 0 !important;
  margin-bottom: var(--mtr-mobile-section-gap) !important;
}

body .dispatch-product-card .product-list-table tr.product-row,
body .product-list-page .product-list-table tr.product-row,
body .ai-product-panel .product-list-table tr.product-row {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Product management cards include a selection checkbox before the brand column. */
body .products-list-card .product-list-table tr.product-row {
  display: grid !important;
  grid-template-columns: 108px minmax(0, 1fr) !important;
  gap: 8px 14px !important;
  padding: 16px !important;
  border: 1px solid #EAEDF2 !important;
  border-radius: 18px !important;
  background: #FFFFFF !important;
  position: relative !important;
}

body .products-list-card .product-list-table tr.product-row > td {
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  white-space: normal !important;
  overflow: visible !important;
}

body .products-list-card .product-list-table tr.product-row > td:nth-child(1) {
  position: absolute !important;
  left: 16px !important;
  top: 16px !important;
  z-index: 4 !important;
  width: auto !important;
  height: auto !important;
}

body .products-list-card .product-list-table tr.product-row > td:nth-child(3) {
  grid-column: 1 !important;
  grid-row: 1 / span 6 !important;
  padding-top: 22px !important;
}

body .products-list-card .product-list-table tr.product-row > td:nth-child(2) {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

body .products-list-card .product-list-table tr.product-row > td:nth-child(4) {
  grid-column: 2 !important;
  grid-row: 2 !important;
  font-size: 12px !important;
  color: #6B7280 !important;
}

body .products-list-card .product-list-table tr.product-row > td:nth-child(5) {
  grid-column: 2 !important;
  grid-row: 3 !important;
}

body .products-list-card .product-list-table tr.product-row > td:nth-child(6),
body .products-list-card .product-list-table tr.product-row > td:nth-child(7),
body .products-list-card .product-list-table tr.product-row > td:nth-child(8),
body .products-list-card .product-list-table tr.product-row > td:nth-child(9),
body .products-list-card .product-list-table tr.product-row > td:nth-child(10),
body .products-list-card .product-list-table tr.product-row > td:nth-child(11),
body .products-list-card .product-list-table tr.product-row > td:nth-child(12) {
  grid-column: 2 !important;
}

body .products-list-card .product-list-table tr.product-row > td:nth-child(13) {
  grid-column: 2 !important;
  margin-top: 6px !important;
}

body .products-list-card .product-list-table tr.product-row > td:nth-child(14) {
  grid-column: 1 / -1 !important;
  margin-top: 8px !important;
}

body .products-list-card .product-select-check {
  width: 18px !important;
  height: 18px !important;
}

body .products-list-card .product-thumb,
body .products-list-card .product-thumb-link {
  width: 104px !important;
  height: 139px !important;
  min-width: 104px !important;
  border-radius: 16px !important;
}

body .products-list-card.card:not(.dispatch-product-card) .product-list-table tr.product-row > td:nth-child(1) {
  position: absolute !important;
  left: 16px !important;
  top: 16px !important;
  grid-column: auto !important;
  grid-row: auto !important;
}

body .products-list-card.card:not(.dispatch-product-card) .product-list-table tr.product-row > td:nth-child(2) {
  display: block !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: start !important;
}

body .products-list-card.card:not(.dispatch-product-card) .product-list-table tr.product-row > td:nth-child(3) {
  display: block !important;
  grid-column: 1 !important;
  grid-row: 1 / span 6 !important;
  padding-top: 22px !important;
}

body .products-list-card.card:not(.dispatch-product-card) .product-list-table tr.product-row > td:nth-child(4) {
  display: block !important;
  grid-column: 2 !important;
  grid-row: 2 !important;
  font-size: 12px !important;
  color: #6B7280 !important;
}

body .products-list-card.card:not(.dispatch-product-card) .product-list-table tr.product-row > td:nth-child(5) {
  display: block !important;
  grid-column: 2 !important;
  grid-row: 3 !important;
}

body .products-list-card.card:not(.dispatch-product-card) .product-list-table tr.product-row > td:nth-child(6),
body .products-list-card.card:not(.dispatch-product-card) .product-list-table tr.product-row > td:nth-child(7),
body .products-list-card.card:not(.dispatch-product-card) .product-list-table tr.product-row > td:nth-child(8),
body .products-list-card.card:not(.dispatch-product-card) .product-list-table tr.product-row > td:nth-child(9),
body .products-list-card.card:not(.dispatch-product-card) .product-list-table tr.product-row > td:nth-child(10),
body .products-list-card.card:not(.dispatch-product-card) .product-list-table tr.product-row > td:nth-child(11),
body .products-list-card.card:not(.dispatch-product-card) .product-list-table tr.product-row > td:nth-child(12) {
  display: block !important;
  grid-column: 2 !important;
}

body .products-list-card.card:not(.dispatch-product-card) .product-list-table tr.product-row > td:nth-child(13) {
  display: block !important;
  grid-column: 2 !important;
  margin-top: 6px !important;
}

body .products-list-card.card:not(.dispatch-product-card) .product-list-table tr.product-row > td:nth-child(14) {
  display: block !important;
  grid-column: 1 / -1 !important;
  margin-top: 8px !important;
}

/* Mobile photo surfaces stay square-edged. */
body .main-content img,
body .admin-main img,
body .page-container img,
body .product-thumb,
body .product-thumb img,
body .product-thumb-link,
body .product-thumb-link img,
body .product-list-table .product-thumb,
body .product-list-table .product-thumb-empty,
body .dispatch-product-card .thumb,
body .dispatch-product-card img,
body .ai-product-panel .product-thumb,
body .sourcing-thumb,
body .sourcing-thumb img,
body .sourcing-edit-images img,
body .sourcing-grid img,
body .sourcing-photo,
body .photo-preview,
body .dropzone,
body .dropzone img,
body .image-thumbs,
body .image-thumbs img,
body .ai-passed-strip img,
body .passed-grid img,
body .edit-grid-images img,
body .ai-gallery-card img,
body .qc-thumb,
body .qc-thumb img,
body .gf-product-image,
body .img-card,
body .img-card img,
body .main-img,
body .image-lightbox-img {
  border-radius: 0 !important;
}