/* =========================================================
   Thuận Audio V9.7.8.41.20 — unified admin responsive layer
   One final responsive stylesheet for product / orders / stock.
   Desktop base styles remain unchanged.
   ========================================================= */

:root{
  --adm-mobile-gap:10px;
  --adm-mobile-pad:12px;
  --adm-mobile-line:#dbe4ef;
  --adm-mobile-muted:#6f8096;
  --adm-mobile-ink:#0b1f3a;
  --adm-mobile-bg:#f4f7fb;
}

/* Never let admin content leak outside its container. */
.admin-page *{box-sizing:border-box}
.admin-page img{max-width:100%}

/* Mobile-only controls inserted by admin-mobile-modern.js. */
.mobile-admin-controls{display:none}

@media (min-width:1101px){
  .mobile-admin-controls{display:none!important}
}

@media (max-width:1100px){
  html,body.admin-page{max-width:100%;overflow-x:hidden}
  body.admin-page{background:var(--adm-mobile-bg)}
  body.admin-page .container{width:min(100% - 20px,1040px);max-width:none;margin-inline:auto}
  body.admin-page .admin-main{padding-top:10px}

  /* ---------- Header ---------- */
  body.admin-page .admin-header .simple-header-inner{
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr)!important;
    gap:9px 12px!important;
    align-items:center!important;
    padding-block:8px!important;
  }
  body.admin-page .admin-header .brand{min-width:0!important;gap:8px!important}
  body.admin-page .admin-header .brand img{width:34px!important;height:34px!important}
  body.admin-page .admin-header .brand-copy strong{font-size:12px!important}
  body.admin-page .admin-header .brand-copy span{display:none!important}
  body.admin-page .admin-header .simple-nav{
    grid-column:1/-1!important;
    display:flex!important;
    gap:6px!important;
    width:100%!important;
    overflow-x:auto!important;
    padding:1px 0 4px!important;
    scrollbar-width:none!important;
  }
  body.admin-page .admin-header .simple-nav::-webkit-scrollbar{display:none!important}
  body.admin-page .admin-header .simple-nav a,
  body.admin-page .admin-header .simple-nav button,
  body.admin-page .admin-session-user,
  body.admin-page .admin-session-action{
    flex:0 0 auto!important;
    width:auto!important;
    min-height:34px!important;
    padding:0 9px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    white-space:nowrap!important;
    font-size:10px!important;
    line-height:1!important;
    border-radius:5px!important;
  }

  /* ---------- Page/card heads ---------- */
  body.admin-page .admin-card,
  body.admin-page .data-center,
  body.admin-page .image-center,
  body.admin-page .excel-import-panel{
    padding:13px!important;
    margin-bottom:10px!important;
    border-radius:5px!important;
  }
  body.admin-page .admin-card-head,
  body.admin-page .data-center-head,
  body.admin-page .image-center-head{
    display:flex!important;
    align-items:flex-start!important;
    justify-content:space-between!important;
    gap:10px!important;
    min-height:0!important;
    margin:0 0 10px!important;
  }
  body.admin-page .admin-card-head>div,
  body.admin-page .data-center-head>div,
  body.admin-page .image-center-head>div{min-width:0!important}
  body.admin-page .admin-card-head h1,
  body.admin-page .admin-card-head h2,
  body.admin-page .data-center h1,
  body.admin-page .data-center h2,
  body.admin-page .image-center h1,
  body.admin-page .image-center h2{
    margin:2px 0 2px!important;
    font-size:21px!important;
    line-height:1.15!important;
    letter-spacing:-.03em!important;
  }
  body.admin-page .admin-card-head p,
  body.admin-page .data-center p,
  body.admin-page .image-center p{margin:0!important;font-size:10px!important;line-height:1.45!important}
  body.admin-page .eyebrow{font-size:8px!important;letter-spacing:.04em!important}
  body.admin-page .admin-card-head>.btn,
  body.admin-page .data-center-head>.btn,
  body.admin-page .image-center-head>.btn{
    width:auto!important;
    min-height:34px!important;
    padding:0 10px!important;
    font-size:9px!important;
    flex:0 0 auto!important;
  }

  /* ---------- Compact mobile controls ---------- */
  .mobile-admin-controls{
    display:flex!important;
    align-items:center!important;
    gap:6px!important;
    width:100%!important;
    margin:0 0 9px!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
  }
  .mobile-admin-controls button{
    width:auto!important;
    min-width:0!important;
    min-height:34px!important;
    padding:0 10px!important;
    border:1px solid #cfd9e6!important;
    border-radius:5px!important;
    background:#fff!important;
    color:#173b75!important;
    box-shadow:none!important;
    font:750 10px var(--font)!important;
    line-height:1!important;
    white-space:nowrap!important;
  }
  .mobile-admin-controls button.active{
    border-color:#9db9dd!important;
    background:#edf5ff!important;
    color:#12498f!important;
  }

  /* Filters are hidden until “Bộ lọc” is tapped. Search remains visible where possible. */
  body.admin-page .admin-toolbar,
  body.admin-page .order-toolbar,
  body.admin-page .inventory-toolbar,
  body.admin-page .history-toolbar{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    gap:8px!important;
    margin:0 0 10px!important;
    padding:0!important;
  }
  body.admin-page .admin-toolbar:not(.mobile-filter-open)>:not(.admin-search-box),
  body.admin-page .order-toolbar:not(.mobile-filter-open)>:not(.order-search-box):not(.admin-search-box),
  body.admin-page .inventory-toolbar:not(.mobile-filter-open)>:not(.admin-search-box),
  body.admin-page .history-toolbar:not(.mobile-filter-open)>:not(.admin-search-box){display:none!important}
  body.admin-page .admin-toolbar.mobile-filter-open,
  body.admin-page .order-toolbar.mobile-filter-open,
  body.admin-page .inventory-toolbar.mobile-filter-open,
  body.admin-page .history-toolbar.mobile-filter-open{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    padding:10px!important;
    border:1px solid var(--adm-mobile-line)!important;
    border-radius:5px!important;
    background:#f9fbfe!important;
  }
  body.admin-page .admin-toolbar.mobile-filter-open .admin-search-box,
  body.admin-page .order-toolbar.mobile-filter-open .admin-search-box,
  body.admin-page .order-toolbar.mobile-filter-open .order-search-box,
  body.admin-page .inventory-toolbar.mobile-filter-open .admin-search-box,
  body.admin-page .history-toolbar.mobile-filter-open .admin-search-box{grid-column:1/-1!important}
  body.admin-page .admin-search-box,
  body.admin-page .order-search-box{width:100%!important;max-width:none!important;min-width:0!important}
  body.admin-page .admin-toolbar input,
  body.admin-page .admin-toolbar select,
  body.admin-page .order-toolbar input,
  body.admin-page .order-toolbar select,
  body.admin-page .inventory-toolbar input,
  body.admin-page .inventory-toolbar select,
  body.admin-page .history-toolbar input,
  body.admin-page .history-toolbar select{
    width:100%!important;
    min-width:0!important;
    min-height:38px!important;
    padding:0 10px!important;
    font-size:11px!important;
    border-radius:5px!important;
  }
  body.admin-page .history-toolbar label,
  body.admin-page .order-toolbar label{min-width:0!important;font-size:9px!important}
  body.admin-page .history-toolbar .btn,
  body.admin-page .order-toolbar .btn,
  body.admin-page .admin-toolbar .btn{
    width:auto!important;
    min-height:36px!important;
    padding:0 10px!important;
    font-size:10px!important;
  }

  /* ---------- KPI ---------- */
  body.admin-page .admin-kpis,
  body.admin-page .inventory-kpis,
  body.admin-page .order-kpis{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    margin-bottom:10px!important;
  }
  body.admin-page .admin-kpis article,
  body.admin-page .inventory-kpis article,
  body.admin-page .order-kpis article{min-width:0!important;padding:10px!important}
  body.admin-page .admin-kpis strong,
  body.admin-page .inventory-kpis strong,
  body.admin-page .order-kpis strong{font-size:20px!important}

  /* ---------- All data tables become modern cards ---------- */
  body.admin-page .admin-table-wrap{overflow:visible!important;max-width:100%!important}
  body.admin-page table.admin-table:not(.variant-table):not(.import-preview-table):not(.bulk-image-table){
    display:block!important;width:100%!important;min-width:0!important;max-width:100%!important
  }
  body.admin-page table.admin-table:not(.variant-table):not(.import-preview-table):not(.bulk-image-table)>thead{display:none!important}
  body.admin-page table.admin-table:not(.variant-table):not(.import-preview-table):not(.bulk-image-table)>tbody{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
    width:100%!important;
  }
  body.admin-page table.admin-table:not(.variant-table):not(.import-preview-table):not(.bulk-image-table)>tbody>tr{
    position:relative!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
    padding:11px!important;
    border:1px solid var(--adm-mobile-line)!important;
    border-radius:5px!important;
    background:#fff!important;
    box-shadow:0 3px 12px rgba(11,31,58,.04)!important;
    overflow:hidden!important;
  }
  body.admin-page table.admin-table:not(.variant-table):not(.import-preview-table):not(.bulk-image-table)>tbody>tr>td{
    min-width:0!important;
    max-width:100%!important;
    border:0!important;
    padding:0!important;
    font-size:10px!important;
  }
  body.admin-page table.admin-table:not(.variant-table):not(.import-preview-table):not(.bulk-image-table)>tbody>tr>td::before{display:none!important}

  /* ---------- PRODUCT CARD ---------- */
  #adminRows>tr{
    display:grid!important;
    grid-template-columns:58px minmax(0,1fr) auto!important;
    grid-template-areas:
      "image main select"
      "image category category"
      "price price stock"
      "status status featured"
      "actions actions actions"!important;
    gap:7px 9px!important;
    align-items:center!important;
  }
  #adminRows .admin-product-image-cell{grid-area:image!important;align-self:start!important}
  #adminRows .admin-product-image-cell img,
  #adminRows .admin-product-thumb{width:58px!important;height:58px!important;object-fit:contain!important;border:1px solid #e1e8f1!important;border-radius:5px!important;background:#fff!important}
  #adminRows .admin-product-main-cell{grid-area:main!important;align-self:start!important}
  #adminRows .admin-product-name{display:grid!important;gap:2px!important;min-width:0!important}
  #adminRows .admin-product-name strong{font-size:11px!important;line-height:1.35!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important}
  #adminRows .admin-product-name small{font-size:8px!important;line-height:1.35!important;color:var(--adm-mobile-muted)!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  #adminRows .admin-category-td{grid-area:category!important}
  #adminRows .admin-category-cell{display:flex!important;align-items:center!important;gap:5px!important;min-width:0!important;color:var(--adm-mobile-muted)!important}
  #adminRows .admin-category-cell strong,
  #adminRows .admin-category-cell small{font-size:8.5px!important;font-weight:650!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  #adminRows .admin-category-cell strong::after{content:" · ";color:#a6b1bf}
  #adminRows .admin-price-cell{grid-area:price!important;display:flex!important;align-items:center!important;gap:5px!important}
  #adminRows .admin-price-cell::before{display:inline!important;content:"Giá:"!important;color:var(--adm-mobile-muted)!important;font-size:8px!important;font-weight:700!important;text-transform:uppercase!important}
  #adminRows .admin-price{font-size:13px!important;font-weight:850!important;color:#d92d3a!important;white-space:nowrap!important}
  #adminRows .admin-stock-td{grid-area:stock!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:6px!important;text-align:right!important}
  #adminRows .admin-stock-td::before{display:inline!important;content:"Tồn:"!important;color:var(--adm-mobile-muted)!important;font-size:8px!important;font-weight:700!important;text-transform:uppercase!important}
  #adminRows .admin-stock-cell{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:5px!important;min-width:0!important}
  #adminRows .admin-stock-cell>strong{font-size:11px!important;line-height:1!important}
  #adminRows .admin-stock-state,
  #adminRows .status-badge,
  #adminRows .featured-toggle{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:24px!important;
    padding:0 8px!important;
    border-radius:999px!important;
    font-size:8px!important;
    line-height:1!important;
    white-space:nowrap!important;
  }
  #adminRows .admin-status-cell{grid-area:status!important;display:flex!important;align-items:center!important;justify-content:flex-start!important}
  #adminRows .admin-featured-cell{grid-area:featured!important;display:flex!important;align-items:center!important;justify-content:flex-end!important}
  #adminRows .admin-select-cell{grid-area:select!important;display:none!important;align-self:start!important;justify-self:end!important}
  body.product-select-mode #adminRows .admin-select-cell{display:block!important}
  #adminRows .row-check{width:18px!important;height:18px!important;accent-color:#174c9e!important}
  #adminRows .admin-actions-cell{grid-area:actions!important;display:none!important;padding-top:7px!important;border-top:1px solid #edf1f6!important}
  #adminRows tr.mobile-actions-open .admin-actions-cell{display:block!important}
  #adminRows .admin-row-actions{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:6px!important}
  #adminRows .admin-row-actions button{width:100%!important;min-height:34px!important;padding:0 6px!important;font-size:9px!important;border-radius:5px!important}

  /* ---------- INVENTORY CARD ---------- */
  #inventoryRows>tr{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:
      "product product"
      "kind stock"
      "state state"
      "actions actions"!important;
    gap:8px!important;
    align-items:center!important;
  }
  #inventoryRows .inventory-product-td{grid-area:product!important}
  #inventoryRows .inventory-product-cell{display:grid!important;grid-template-columns:54px minmax(0,1fr)!important;gap:9px!important;align-items:center!important;min-width:0!important}
  #inventoryRows .inventory-product-cell img{width:54px!important;height:54px!important}
  #inventoryRows .inventory-product-cell strong{font-size:11px!important;line-height:1.35!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important}
  #inventoryRows .inventory-product-cell span,
  #inventoryRows .inventory-product-cell small{font-size:8px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  #inventoryRows .inventory-kind-td{grid-area:kind!important;display:flex!important;align-items:center!important;gap:5px!important}
  #inventoryRows .inventory-kind-td::before{display:inline!important;content:"Loại:"!important;color:var(--adm-mobile-muted)!important;font-size:8px!important;font-weight:700!important}
  #inventoryRows .inventory-stock-td{grid-area:stock!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:5px!important}
  #inventoryRows .inventory-stock-td::before{display:inline!important;content:"Tồn:"!important;color:var(--adm-mobile-muted)!important;font-size:8px!important;font-weight:700!important}
  #inventoryRows .inventory-stock{font-size:13px!important}
  #inventoryRows .inventory-state-td{grid-area:state!important;display:flex!important;align-items:center!important;justify-content:flex-start!important}
  #inventoryRows .inventory-state{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:24px!important;padding:0 8px!important;border-radius:999px!important;font-size:8px!important}
  #inventoryRows .inventory-actions-td{grid-area:actions!important;display:none!important;padding-top:7px!important;border-top:1px solid #edf1f6!important}
  #inventoryRows tr.mobile-actions-open .inventory-actions-td{display:block!important}
  #inventoryRows .inventory-actions{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:6px!important;min-width:0!important}
  #inventoryRows .inventory-actions button{width:100%!important;min-height:34px!important;padding:0 5px!important;font-size:9px!important}

  /* ---------- ORDER CARD ---------- */
  #orderRows>tr{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:
      "code select"
      "customer total"
      "items items"
      "priority status"
      "actions actions"!important;
    gap:7px 10px!important;
    align-items:center!important;
  }
  #orderRows .order-code-td{grid-area:code!important}
  #orderRows .order-select-cell{grid-area:select!important;display:none!important;justify-self:end!important;align-self:start!important}
  body.order-select-mode #orderRows .order-select-cell{display:block!important}
  #orderRows .order-row-check{width:18px!important;height:18px!important}
  #orderRows .order-customer-td{grid-area:customer!important;min-width:0!important}
  #orderRows .order-total-td{grid-area:total!important;text-align:right!important}
  #orderRows .order-items-td{grid-area:items!important;min-width:0!important;padding-top:2px!important}
  #orderRows .order-priority-td{grid-area:priority!important;display:flex!important;justify-content:flex-start!important}
  #orderRows .order-status-td{grid-area:status!important;display:flex!important;justify-content:flex-end!important}
  #orderRows .order-actions-td{grid-area:actions!important;display:none!important;padding-top:7px!important;border-top:1px solid #edf1f6!important}
  #orderRows tr.mobile-actions-open .order-actions-td{display:block!important}
  #orderRows .order-code-cell strong{font-size:11px!important}
  #orderRows .order-code-cell small,
  #orderRows .order-customer-cell a,
  #orderRows .order-items-cell small{font-size:8.5px!important}
  #orderRows .order-customer-cell strong,
  #orderRows .order-items-cell strong{font-size:10px!important;line-height:1.35!important}
  #orderRows .order-total-td>strong{font-size:13px!important;color:#d92d3a!important;white-space:nowrap!important}
  #orderRows .order-status-badge,
  #orderRows .order-priority-badge,
  #orderRows .order-channel,
  #orderRows .order-archive-badge,
  #orderRows .table-payment-status{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:23px!important;padding:0 7px!important;border-radius:999px!important;font-size:8px!important;line-height:1!important}
  #orderRows .order-row-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:6px!important}
  #orderRows .order-row-actions button{width:100%!important;min-height:34px!important;padding:0 7px!important;font-size:9px!important}

  /* ---------- History cards ---------- */
  #inventoryHistoryRows>tr{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px 12px!important}
  #inventoryHistoryRows>tr>td{display:grid!important;grid-template-columns:88px minmax(0,1fr)!important;gap:6px!important;align-items:center!important}
  #inventoryHistoryRows>tr>td::before{display:block!important;content:attr(data-label)!important;font-size:8px!important;color:var(--adm-mobile-muted)!important;font-weight:700!important;text-transform:uppercase!important}
  #inventoryHistoryRows .bulk-check-cell{display:none!important}
  body.history-select-mode #inventoryHistoryRows .bulk-check-cell{display:block!important;position:absolute!important;top:10px!important;right:10px!important}
  #inventoryHistoryRows td[data-label="Sản phẩm"],
  #inventoryHistoryRows td[data-label="Ghi chú"],
  #inventoryHistoryRows td[data-label="Thao tác"]{grid-column:1/-1!important}
  #inventoryHistoryRows td[data-label="Thao tác"]{display:none!important}
  #inventoryHistoryRows tr.mobile-actions-open td[data-label="Thao tác"]{display:block!important;padding-top:7px!important;border-top:1px solid #edf1f6!important}

  /* ---------- Bulk bars: in-flow, never cover content ---------- */
  body.admin-page .bulk-toolbar,
  body.admin-page .order-bulkbar,
  body.admin-page .history-bulkbar{
    position:static!important;
    inset:auto!important;
    transform:none!important;
    width:100%!important;
    max-width:none!important;
    margin:0 0 9px!important;
    padding:8px 10px!important;
    border:1px solid var(--adm-mobile-line)!important;
    border-radius:5px!important;
    background:#fff!important;
    box-shadow:none!important;
  }
  body.admin-page .bulk-toolbar:not(.open):not(.has-selection),
  body.admin-page .order-bulkbar:not(.has-selection),
  body.admin-page .history-bulkbar:not(.has-selection){display:none!important}
  body.admin-page .bulk-toolbar.open,
  body.admin-page .order-bulkbar.has-selection,
  body.admin-page .history-bulkbar.has-selection{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;flex-wrap:wrap!important}
  body.admin-page .bulk-toolbar button,
  body.admin-page .order-bulkbar button,
  body.admin-page .history-bulkbar button{width:auto!important;min-height:32px!important;padding:0 8px!important;font-size:8.5px!important}

  /* ---------- Forms / editors ---------- */
  body.admin-page .admin-editor-panel,
  body.admin-page .bulk-image-panel,
  body.admin-page .modal-panel{max-width:100%!important}
  body.admin-page .variant-editor,
  body.admin-page .variant-table tbody{min-width:0!important}
  body.admin-page .variant-table tr{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;padding:10px!important}
  body.admin-page .variant-table td{display:grid!important;gap:4px!important;padding:0!important;border:0!important}
  body.admin-page .variant-table td::before{display:block!important;content:attr(data-label)!important;color:var(--adm-mobile-muted)!important;font-size:8px!important;font-weight:700!important}
  body.admin-page .variant-table input,
  body.admin-page .variant-table select{width:100%!important;min-height:38px!important;padding:0 9px!important;font-size:10px!important}
  body.admin-page .variant-remove{position:absolute!important;right:8px!important;top:8px!important;width:28px!important;height:28px!important;min-height:0!important;padding:0!important}

  /* Generic admin action groups: never make all buttons full-screen. */
  body.admin-page .data-center-actions,
  body.admin-page .image-center-actions,
  body.admin-page .editor-actions,
  body.admin-page .settings-actions,
  body.admin-page .order-detail-actions,
  body.admin-page .manual-order-actions{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:7px!important;
    justify-content:flex-start!important;
  }
  body.admin-page .data-center-actions .btn,
  body.admin-page .image-center-actions .btn,
  body.admin-page .editor-actions .btn,
  body.admin-page .settings-actions .btn,
  body.admin-page .order-detail-actions .btn,
  body.admin-page .manual-order-actions .btn{
    width:auto!important;
    min-width:100px!important;
    min-height:36px!important;
    padding:0 11px!important;
    flex:0 0 auto!important;
    font-size:9px!important;
  }

  /* ---------- Pagination ---------- */
  body.admin-page .admin-pagination{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;flex-wrap:wrap!important;padding-top:10px!important}
  body.admin-page .admin-pagination label{font-size:9px!important}
  body.admin-page .admin-pagination button{width:auto!important;min-height:32px!important;padding:0 9px!important;font-size:9px!important}

  /* ---------- Inventory modal: compact bottom sheet ---------- */
  .inventory-admin-page #inventoryModal.open{
    display:flex!important;
    align-items:flex-end!important;
    justify-content:center!important;
    padding:0!important;
  }
  .inventory-admin-page #inventoryModal .inventory-modal-panel{
    width:min(100%,680px)!important;
    max-width:none!important;
    max-height:56dvh!important;
    margin:0 auto!important;
    padding:14px 14px 12px!important;
    border-radius:12px 12px 0 0!important;
    overflow:auto!important;
    box-shadow:0 -14px 40px rgba(8,25,54,.18)!important;
  }
  .inventory-admin-page #inventoryModal .modal-close{top:10px!important;right:10px!important;width:30px!important;height:30px!important;font-size:18px!important}
  .inventory-admin-page #inventoryModal h2{margin:3px 38px 9px 0!important;font-size:18px!important;line-height:1.15!important}
  .inventory-admin-page #inventoryModal .inventory-item-summary{
    grid-template-columns:48px minmax(0,1fr)!important;
    gap:9px!important;
    padding:8px!important;
    margin-bottom:9px!important;
  }
  .inventory-admin-page #inventoryModal .inventory-item-summary img{width:48px!important;height:48px!important}
  .inventory-admin-page #inventoryModal .inventory-item-summary strong{font-size:10px!important}
  .inventory-admin-page #inventoryModal .inventory-item-summary span,
  .inventory-admin-page #inventoryModal .inventory-item-summary small{font-size:8.5px!important}
  .inventory-admin-page #inventoryModal form{gap:8px!important}
  .inventory-admin-page #inventoryModal label{gap:4px!important;font-size:9px!important}
  .inventory-admin-page #inventoryModal input{min-height:38px!important;padding:0 9px!important;font-size:11px!important}
  .inventory-admin-page #inventoryModal textarea{min-height:64px!important;max-height:100px!important;padding:8px 9px!important;font-size:10px!important;resize:vertical!important}
  .inventory-admin-page #inventoryModal .inventory-modal-actions{
    position:sticky!important;
    bottom:-12px!important;
    display:flex!important;
    justify-content:flex-end!important;
    gap:7px!important;
    margin:3px -14px -12px!important;
    padding:8px 14px!important;
    border-top:1px solid #e4eaf2!important;
    background:#fff!important;
    z-index:3!important;
  }
  .inventory-admin-page #inventoryModal .inventory-modal-actions .btn{width:auto!important;min-width:96px!important;min-height:34px!important;padding:0 10px!important;font-size:9px!important}
  .inventory-admin-page #inventoryModal .inventory-message{min-height:0!important;margin:0!important;font-size:9px!important}

  /* Other admin modals: compact buttons and safe viewport. */
  .orders-admin-page .modal-panel,
  body.admin-page .admin-editor-panel{
    width:min(calc(100vw - 18px),760px)!important;
    max-height:calc(100dvh - 18px)!important;
    padding:13px!important;
    overflow:auto!important;
  }
  .orders-admin-page .order-detail-actions,
  .orders-admin-page .manual-order-actions,
  .orders-admin-page .settings-actions{position:sticky!important;bottom:-13px!important;margin:10px -13px -13px!important;padding:8px 13px!important;background:#fff!important;border-top:1px solid #e4eaf2!important;z-index:4!important}
}

@media (max-width:680px){
  body.admin-page .container{width:calc(100% - 12px)!important}
  body.admin-page table.admin-table:not(.variant-table):not(.import-preview-table):not(.bulk-image-table)>tbody{grid-template-columns:1fr!important}
  body.admin-page .admin-toolbar.mobile-filter-open,
  body.admin-page .order-toolbar.mobile-filter-open,
  body.admin-page .inventory-toolbar.mobile-filter-open,
  body.admin-page .history-toolbar.mobile-filter-open{grid-template-columns:1fr!important}
  body.admin-page .admin-toolbar.mobile-filter-open .admin-search-box,
  body.admin-page .order-toolbar.mobile-filter-open .admin-search-box,
  body.admin-page .inventory-toolbar.mobile-filter-open .admin-search-box,
  body.admin-page .history-toolbar.mobile-filter-open .admin-search-box{grid-column:auto!important}
  body.admin-page .admin-kpis,
  body.admin-page .inventory-kpis,
  body.admin-page .order-kpis{grid-template-columns:1fr 1fr!important}
  #inventoryHistoryRows>tr{grid-template-columns:1fr!important}
  #inventoryHistoryRows>tr>td{grid-template-columns:82px minmax(0,1fr)!important}
  #adminRows>tr{grid-template-columns:54px minmax(0,1fr) auto!important}
  #adminRows .admin-product-image-cell img,#adminRows .admin-product-thumb{width:54px!important;height:54px!important}
  body.admin-page .variant-table tr{grid-template-columns:1fr 1fr!important}
}

@media (max-width:420px){
  body.admin-page .admin-kpis,
  body.admin-page .inventory-kpis,
  body.admin-page .order-kpis{grid-template-columns:1fr 1fr!important}
  #adminRows .admin-category-cell{display:block!important}
  #adminRows .admin-category-cell strong,#adminRows .admin-category-cell small{display:inline!important}
  .inventory-admin-page #inventoryModal .inventory-modal-panel{max-height:58dvh!important}
}

/* v9.7.8.41.21 - follow-up mobile/admin polish */
@media (max-width: 680px){
  /* Inventory popup: centered modal instead of bottom sheet */
  .inventory-admin-page #inventoryModal.open{
    align-items:center!important;
    justify-content:center!important;
    padding:10px!important;
  }
  .inventory-admin-page #inventoryModal .inventory-modal-panel{
    width:min(calc(100vw - 20px),560px)!important;
    max-height:min(70dvh,620px)!important;
    margin:auto!important;
    border-radius:14px!important;
    box-shadow:0 14px 36px rgba(8,25,54,.18)!important;
  }
  .inventory-admin-page #inventoryModal .inventory-modal-actions{
    position:sticky!important;
    bottom:0!important;
    margin:8px -14px -12px!important;
    padding:10px 14px!important;
    justify-content:center!important;
    gap:8px!important;
  }
  .inventory-admin-page #inventoryModal .inventory-modal-actions .btn{
    min-width:102px!important;
    min-height:36px!important;
    font-size:9.5px!important;
  }

  /* Product admin cards: give thumbnail/text more breathing room */
  #adminRows>tr{
    grid-template-columns:64px minmax(0,1fr) auto!important;
    gap:9px 12px!important;
  }
  #adminRows .admin-product-image-cell img,
  #adminRows .admin-product-thumb{
    width:60px!important;
    height:60px!important;
  }
  #adminRows .admin-product-name{gap:4px!important}
  #adminRows .admin-product-name strong{line-height:1.42!important}
  #adminRows .admin-price-cell,
  #adminRows .admin-stock-td{padding-top:2px!important}

  /* Inventory product summary rows: more spacing between image and text */
  #inventoryRows .inventory-product-cell{
    grid-template-columns:58px minmax(0,1fr)!important;
    gap:11px!important;
  }
  #inventoryRows .inventory-product-cell img{width:58px!important;height:58px!important}
  #inventoryRows .inventory-product-cell strong{line-height:1.42!important}
}