@layer pages {
  .inventory-page .product-center-table {
    overflow-x: auto;
  }

  .inventory-page .product-stock-table:not(.product-stock-table--inv-desk) {
    table-layout: fixed;
    width: 1210px;
    min-width: 1210px;
    max-width: none;
  }

  .inventory-page .product-stock-table:not(.product-stock-table--inv-desk) col.product-col-name { width: 170px; }
  .inventory-page .product-stock-table:not(.product-stock-table--inv-desk) col.product-col-category { width: 130px; }
  .inventory-page .product-stock-table:not(.product-stock-table--inv-desk) col.product-col-tag { width: 90px; }
  .inventory-page .product-stock-table:not(.product-stock-table--inv-desk) col.product-col-money { width: 135px; }
  .inventory-page .product-stock-table:not(.product-stock-table--inv-desk) col.product-col-date { width: 120px; }
  .inventory-page .product-stock-table:not(.product-stock-table--inv-desk) col.product-col-fifo { width: 100px; }
  .inventory-page .product-stock-table:not(.product-stock-table--inv-desk) col.product-col-stock-inv { width: 72px; }
  .inventory-page .product-stock-table:not(.product-stock-table--inv-desk) col.product-col-margin { width: 88px; }
  .inventory-page .product-stock-table:not(.product-stock-table--inv-desk) col.product-col-archive { width: 84px; }
  .inventory-page .product-stock-table:not(.product-stock-table--inv-desk) col.product-col-status { width: 120px; }
  .inventory-page .product-stock-table:not(.product-stock-table--inv-desk) col.product-col-actions { width: 148px; }

  .inventory-page .product-stock-table {
    table-layout: fixed;
  }

  .inventory-page .product-stock-table th.money-head,
  .inventory-page .product-stock-table td.money-cell {
    text-align: right !important;
    padding-left: 8px !important;
    padding-right: 20px !important;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    white-space: nowrap;
  }

  .inventory-page .product-stock-table th.date-head,
  .inventory-page .product-stock-table td.date-cell {
    text-align: left !important;
    padding-left: 16px !important;
    white-space: nowrap;
  }

  .inventory-page .product-stock-table th.stock-head,
  .inventory-page .product-stock-table td.stock-cell {
    text-align: center !important;
    white-space: nowrap;
  }

  .inventory-page .batch-actions-cell {
    text-align: center;
    white-space: nowrap;
  }

  .inventory-page .batch-actions-cell .btn {
    min-width: 56px;
    justify-content: center;
  }

  .inventory-page .stock-batch-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }

  .inventory-page .stock-batch-toolbar input[type="text"] {
    height: 32px;
    min-height: 32px;
    font-size: 12.5px;
  }

  .inventory-page .stock-batch-focus {
    margin-top: -4px;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #475569;
    font-size: 12.5px;
  }

  .inventory-page .stock-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid #dbe3ee;
    border-radius: 999px;
    background: #fff;
    font-size: 12px;
    color: #334155;
    user-select: none;
  }

  .inventory-page .stock-toggle input {
    margin: 0;
  }

  .inventory-page .product-stock-table:not(.product-stock-table--inv-desk) .product-inline-select {
    height: 28px;
    min-height: 28px;
    border-radius: 999px;
    padding: 0 26px 0 10px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid #cbd5e1;
    background: #fff;
    width: 100%;
    max-width: 120px;
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 13px) 11px, calc(100% - 8px) 11px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
  }

  .inventory-page .product-stock-table:not(.product-stock-table--inv-desk) .product-inline-select:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .12);
    outline: none;
  }

  .inventory-page .product-stock-table:not(.product-stock-table--inv-desk) .product-inline-select[data-product-inline-field="category"][data-inline-value="Box"] {
    background-color: #dcfce7;
    border-color: #86efac;
    color: #166534;
  }

  .inventory-page .product-stock-table:not(.product-stock-table--inv-desk) .product-inline-select[data-product-inline-field="category"][data-inline-value="Pack"] {
    background-color: #ede9fe;
    border-color: #c4b5fd;
    color: #5b21b6;
  }

  .inventory-page .product-stock-table:not(.product-stock-table--inv-desk) .product-inline-select[data-product-inline-field="tags"][data-inline-value="Seal"] {
    background-color: #dcfce7;
    border-color: #86efac;
    color: #166534;
  }

  .inventory-page .product-stock-table:not(.product-stock-table--inv-desk) .product-inline-select[data-product-inline-field="tags"][data-inline-value="Unseal"] {
    background-color: #ffedd5;
    border-color: #fdba74;
    color: #9a3412;
  }

  #modal .product-identity-form {
    display: grid;
    gap: 10px;
  }

  #modal .product-identity-form .product-section {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px;
    background: #fff;
  }

  #modal .product-identity-form .product-section h4 {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 700;
    color: #334155;
  }

  #modal .product-identity-form .product-detail-grid {
    gap: 8px 10px;
  }

  #modal .product-identity-form .product-detail-grid label {
    font-size: 12px;
    color: #64748b;
  }

  #modal .product-identity-form .product-detail-grid input {
    height: 34px;
    min-height: 34px;
    font-size: 13px;
  }

  #modal .product-identity-form .product-status-readonly--compact {
    margin-top: 8px;
  }

  #modal .product-batch-form {
    gap: 8px 10px;
  }

  #modal .product-batch-form label {
    font-size: 12px;
    color: #64748b;
  }

  #modal .product-batch-form input,
  #modal .product-batch-form select {
    height: 34px;
    min-height: 34px;
    font-size: 13px;
  }

  #modal .product-center-form .product-status-readonly {
    display: grid;
    align-content: start;
    gap: 4px;
    min-height: 64px;
    border: 1px dashed #d9e2ec;
    border-radius: 10px;
    padding: 8px 10px;
    background: #f8fafc;
  }

  #modal .product-center-form .product-status-title {
    font-size: 12px;
    color: #64748b;
    font-weight: 600;
  }

  #modal .product-center-form .product-status-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  #modal .product-center-form .product-status-chip {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    border: 1px solid transparent;
  }

  #modal .product-center-form .product-status-chip.status-ok {
    background: #dcfce7;
    color: #166534;
    border-color: #86efac;
  }

  #modal .product-center-form .product-status-chip.status-warn {
    background: #ffedd5;
    color: #9a3412;
    border-color: #fdba74;
  }

  #modal .product-center-form .product-status-chip.status-empty {
    background: #e2e8f0;
    color: #475569;
    border-color: #cbd5e1;
  }

  #modal .product-center-form .product-status-chip.status-bad {
    background: #fee2e2;
    color: #b91c1c;
    border-color: #fca5a5;
  }

  #modal .product-center-form .product-status-chip.status-inactive {
    background: #cbd5e1;
    color: #334155;
    border-color: #94a3b8;
  }

  #modal .product-center-form .product-status-auto-text {
    font-size: 12px;
    color: #475569;
  }

  #modal .product-center-form .product-status-help {
    font-size: 11.5px;
    color: #64748b;
  }

  #modal .product-center-form .product-checkbox-row,
  #modal .product-batch-form .product-checkbox-row {
    margin: 0;
    font-size: 12.5px;
    color: #334155;
  }

  #modalForm .product-batch-form .product-batch-apply-sale-row {
    grid-column: 1 / -1;
    align-self: start;
  }

  .inventory-page .inventory-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
  }

  .inventory-page .inventory-tabs .btn {
    border-radius: 999px;
    min-height: 30px;
    padding: 0 12px;
    font-size: 12.5px;
  }

  .inventory-page #inventoryTabBody {
    display: grid;
    gap: 10px;
  }

  .inventory-page .cards .card {
    padding: 10px 12px;
  }

  .inventory-page .table-wrap table th {
    font-size: 12px;
    padding: 8px 10px;
  }

  .inventory-page .table-wrap table td {
    font-size: 13px;
    padding: 8px 10px;
  }

  .inventory-page .inventory-batch-table {
    table-layout: fixed;
    width: 1300px;
    min-width: 1300px;
  }

  .inventory-page .inventory-batch-table th:nth-child(5),
  .inventory-page .inventory-batch-table th:nth-child(6),
  .inventory-page .inventory-batch-table th:nth-child(7),
  .inventory-page .inventory-batch-table th:nth-child(8),
  .inventory-page .inventory-batch-table td:nth-child(5),
  .inventory-page .inventory-batch-table td:nth-child(6),
  .inventory-page .inventory-batch-table td:nth-child(7),
  .inventory-page .inventory-batch-table td:nth-child(8) {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
  }

  .inventory-page .table-wrap table tbody tr:hover td {
    background: rgba(15, 23, 42, 0.024);
  }

  .inventory-page .table-wrap table tbody tr.row-adjustment td {
    background: #fffdf2;
  }

  .inventory-page .table-wrap table tbody tr.row-adjustment:hover td {
    background: #fffbe8;
  }

  .inventory-page #batchSaleWarning.batch-sale-warning {
    margin-top: 8px;
    border: 1px solid #fde68a;
    background: #fffbeb;
    color: #92400e;
    border-radius: 10px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 12.5px;
  }

  #modal .product-batch-product-field,
  #modal .product-batch-sale-field {
    display: grid;
    gap: 4px;
    align-content: start;
  }

  #modal .batch-product-hints {
    font-size: 11.5px;
    line-height: 1.45;
    margin-top: 2px;
  }

  #modal .batch-product-hints__line + .batch-product-hints__line {
    margin-top: 1px;
  }

  #modal .batch-product-hints strong,
  #modal .batch-sale-hint strong {
    color: #0f172a;
    font-weight: 650;
  }

  .products-page .product-center-toolbar {
    gap: 6px;
  }

  .products-page .product-center-table table {
    table-layout: fixed;
    width: 100%;
  }

  .products-page .product-center-table .actions-col {
    width: 88px;
  }

  .products-page .product-actions-cell {
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
  }

  .products-page .product-history-drawer {
    max-width: 100%;
  }

  .product-storefront-panel {
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px dashed rgba(15, 23, 42, 0.12);
  }

  .product-checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-weight: 600;
  }

  .product-checkbox-row input {
    margin-top: 0.2rem;
  }

  .product-main-img-preview {
    margin-top: 0.35rem;
  }

  .product-main-dropzone {
    border: 1px dashed rgba(15, 23, 42, 0.2);
    border-radius: 12px;
    padding: 0.65rem 0.75rem;
    background: rgba(248, 250, 252, 0.65);
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s ease, background 0.15s ease;
  }

  .product-main-dropzone:focus-visible {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
  }

  .product-main-dropzone--active:not(.product-main-dropzone--disabled) {
    border-color: #3b82f6;
    background: rgba(239, 246, 255, 0.9);
  }

  .product-main-dropzone--disabled {
    cursor: not-allowed;
    opacity: 0.72;
  }

  .product-main-dropzone-hint {
    margin: 0.35rem 0 0.5rem;
  }

  .product-main-upload-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
  }

  .product-upload-status {
    margin: 0.25rem 0 0;
    font-size: 12.5px;
    min-height: 1.25em;
  }

  .product-upload-status--muted {
    color: #64748b;
  }

  .product-upload-status--ok {
    color: #15803d;
  }

  .product-upload-status--err {
    color: #b91c1c;
  }

  .product-gallery-block {
    margin-top: 0.25rem;
  }

  .product-gallery-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
  }

  .product-gallery-actions {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
  }

  .product-gallery-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
  }

  .product-gallery-line {
    display: flex;
    gap: 0.35rem;
    align-items: center;
  }

  .product-gallery-line input {
    flex: 1;
    min-width: 0;
  }

  tr.product-row.row-archived > td,
  tr.customer-row.row-archived > td {
    opacity: 0.78;
  }

  article.customer-mo-card.row-archived {
    opacity: 0.82;
  }

  .product-actions-inline {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    justify-content: flex-end;
  }

  .product-archive-filter,
  .customer-archive-filter {
    min-width: 170px;
    max-width: none;
  }

  .product-archive-filter-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 4px;
  }

  .product-col-archive,
  .customer-col-archive {
    white-space: nowrap;
    vertical-align: middle;
  }
}
