/* Responsive system v2: admin layout */
:root {
  --admin-shell-max: 1440px;
  --admin-sidebar-width: 248px;
  --admin-gutter-x: clamp(14px, 2vw, 28px);
  --admin-gutter-y: clamp(16px, 2.2vw, 28px);
}

html,
body {
  overflow-x: hidden;
}

body {
  min-width: 320px;
}

img {
  max-width: 100%;
  height: auto;
}

.admin {
  grid-template-columns: var(--admin-sidebar-width) minmax(0, 1fr);
}

.sidebar {
  min-width: 0;
  width: auto;
}

.content {
  min-width: 0;
  width: min(100%, calc(var(--admin-shell-max) - var(--admin-sidebar-width)));
  padding: var(--admin-gutter-y) var(--admin-gutter-x) 44px;
  margin: 0;
}

.content > *,
.panel,
.card-box,
.table,
.stats-kpi,
.cards,
.grid-2,
.form,
.row,
.modal,
.modal-body,
.filters,
.products-list,
.categories-list,
.stats-bars,
.settings-grid {
  min-width: 0;
}

.panel-head,
.view-head,
.cat-toolbar,
.settings-phones-head,
.settings-input-row,
.upload-inline,
.row,
.form-actions,
.card-actions,
.modal-actions,
.stats-toolbar,
.stats-custom-range,
.stats-period {
  flex-wrap: wrap;
}

.tabs,
.catalog-tabs,
.inner-tabs,
.stats-period,
.stats-custom-range,
.stats-order-statuses {
  overflow-x: auto;
  scrollbar-width: thin;
}

.tab-btn,
.catalog-tab-btn,
.promo-tab-btn,
.content-tab-btn,
.feedback-tab-btn,
.settings-tab-btn,
.stats-tab-btn,
.chip {
  white-space: nowrap;
  flex: 0 0 auto;
}

.filters,
.stats-filters {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  align-items: stretch;
}

.filters input,
.filters select,
.stats-filters select {
  width: 100%;
  max-width: 100%;
}

.compact-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.uploads,
.uploads-grid,
.photo-grid {
  width: 100%;
}

.photo-grid {
  grid-template-columns: repeat(auto-fill, minmax(96px, 96px));
}

.table {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.orders-list .table-head,
.orders-list .row,
.stock-table .table-head,
.stock-table #stockTableBody .row,
.promo-codes-table .table-head,
.promo-codes-table #promoCodeTableBody .row,
.promo-action-table .table-head,
.promo-action-table #promotionTableBody .row,
.feedback-list .table-head,
.feedback-list .row,
.stats-table .table-head,
.stats-table .row,
.content-table .table-head,
.content-table .row {
  min-width: max-content;
}

.content-table .table-head,
.content-table .row {
  grid-template-columns: minmax(220px, 1fr) auto;
}

.attr-list,
.variant-list {
  overflow-x: auto;
  padding-bottom: 2px;
}

.attr-row,
.variant-head,
.variant-row,
.item-row {
  min-width: max-content;
}

.settings-phone-row,
.settings-input-row,
.faq-topic-row,
.upload-inline,
.row {
  grid-template-columns: minmax(0, 1fr) auto;
}

@media (max-width: 1100px) {
  :root {
    --admin-gutter-x: 14px;
    --admin-gutter-y: 18px;
  }

  .content {
    width: 100%;
    padding: 68px var(--admin-gutter-x) 40px;
  }

  .orders-list .table-head,
  .orders-list .row {
    grid-template-columns: 96px 240px 180px 150px 140px 180px !important;
  }

  .stock-table .table-head,
  .stock-table #stockTableBody .row {
    grid-template-columns: 220px 260px 130px 140px 110px 130px !important;
  }

  .promo-codes-table .table-head,
  .promo-codes-table #promoCodeTableBody .row {
    grid-template-columns: 90px 140px 220px 90px 90px 90px 100px 110px !important;
  }

  .promo-action-table .table-head,
  .promo-action-table #promotionTableBody .row {
    grid-template-columns: 150px 240px 130px 90px 90px 100px 110px !important;
  }

  .feedback-list .table-head,
  .feedback-list .row {
    grid-template-columns: 260px 220px 200px 150px 150px !important;
  }

  .stats-table .table-head,
  .stats-table .row {
    grid-template-columns: 120px 100px 120px 100px 120px 140px 140px !important;
  }

  .cat-row,
  .product-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .promo-code-form,
  .promotion-form,
  .modal-grid,
  .grid-2 {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 900px) {
  .sidebar {
    width: min(280px, 84vw);
  }

  .panel-head,
  .view-head,
  .cat-toolbar,
  .settings-phones-head {
    align-items: flex-start;
  }

  .filters,
  .stats-filters,
  .settings-phone-row,
  .settings-input-row,
  .faq-topic-row,
  .upload-inline,
  .row {
    grid-template-columns: 1fr;
  }

  .cat-row,
  .product-row {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .cat-actions,
  .product-badges,
  .card-actions,
  .form-actions,
  .modal-actions {
    justify-content: flex-start;
  }

  .cards,
  .grid-2,
  .stats-kpi {
    grid-template-columns: 1fr;
  }

  .tabs,
  .catalog-tabs,
  .inner-tabs {
    flex-wrap: nowrap;
    padding-bottom: 4px;
  }

  .product-modal,
  .modal,
  .topic-modal {
    width: min(96vw, 1100px);
  }
}

@media (max-width: 700px) {
  .content {
    padding: 64px 12px 34px;
  }

  .table {
    padding: 12px;
  }

  .table-head,
  .table .row,
  .item-row,
  .variant-head,
  .variant-row,
  .attr-row {
    font-size: 13px;
  }

  .kpi-card strong {
    font-size: 20px;
  }

  .stats-bar-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}


.table-window {
  min-width: 0;
}

.table-window .table-scroll {
  max-width: 100%;
}

@media (max-width: 900px) {
  .sheet-meta {
    grid-template-columns: 1fr;
  }

  .sheet-print-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .sheet-print-actions {
    width: 100%;
    flex-wrap: wrap;
  }
}


@media (max-width: 1100px) {
  .table-window {
    overflow-x: hidden;
  }

  .table-window .table-scroll {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
  }

  .table-window .table-head {
    position: static;
  }

  .table-window .table {
    width: max-content !important;
    min-width: max-content !important;
  }
}