/**
 * Ultra-usability layer — spacing, touch targets, mobile overflow.
 * Does not redefine brand colors; only layout/interaction metrics.
 */

/* —— Symmetric card / grid gaps (always use layout token) —— */
.admin-grid .notice {
  margin-bottom: var(--layout-gap, 22px) !important;
}

.panel-head {
  margin-bottom: var(--layout-gap, 22px);
}

/* Panel content stack: one --layout-gap between head / form / notice / table / actions. */
.panel-stack {
  display: flex;
  flex-direction: column;
  gap: var(--layout-gap, 22px);
}

/* Author `display:flex` beats the UA [hidden] rule; keep section tabs hideable. */
.panel-stack[hidden],
.settings-section[hidden] {
  display: none !important;
}

.panel-stack > .panel-head,
.settings-currency-manager.panel-stack > .panel-head {
  margin-bottom: 0;
}

.panel-stack > .settings-section-actions {
  margin-top: 0;
}

/* Settings can contain multiple logical sections inside one multipart form. */
.settings-section-form {
  display: flex;
  flex-direction: column;
  gap: var(--layout-gap, 22px);
  min-width: 0;
}

.settings-section-form > .settings-section {
  margin: 0;
}

/* Shared section/card composition for Settings and System Manager. */
.settings-section-content {
  display: grid;
  gap: var(--layout-gap, 22px);
  min-width: 0;
  max-width: 100%;
}

.settings-card-grid {
  display: grid;
  gap: var(--layout-gap, 22px);
  min-width: 0;
  max-width: 100%;
}

.settings-card-grid--two-column {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .settings-card-grid--two-column {
    grid-template-columns: minmax(0, 1fr);
  }
}

.field.is-settings-gated-off,
[data-settings-gate-panel].is-settings-gated-off {
  opacity: 0.58;
}

.settings-toggle-gate.full,
.settings-toggle-gate {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
}

.settings-gate-panel.form-grid,
.settings-gate-panel.cache-settings-form-grid {
  margin: 0;
}

/* Card / panel padding: desktop 20px, mobile 16px */
.card.panel,
.panel,
.stat-card,
.table-card-head,
.catalogue-search-card,
.catalogue-card .panel,
.settings-currency-manager,
.login-panel,
.filter-panel.card {
  padding: 20px;
  box-sizing: border-box;
}

.table-card-head {
  padding: 16px 20px;
}

/* Roles permission search keeps the shared field language */
.permission-matrix-search {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--line, var(--border));
  border-radius: 10px;
  background: #fff;
  color: var(--muted, var(--text-muted));
  box-sizing: border-box;
}

.permission-matrix-search i {
  color: var(--brand-primary, var(--brand));
  flex: 0 0 auto;
}

.permission-matrix-search input {
  flex: 1;
  min-width: 0;
  width: 100%;
  border: 0 !important;
  outline: 0;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  min-height: 28px;
}

.permission-matrix-search:focus-within {
  border-color: var(--brand-secondary, var(--brand-2, var(--brand)));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-secondary, var(--brand-2, var(--brand))) 14%, transparent);
}

/* Catalogue category filter lives in the page header actions */
.page-head .actions .catalogue-category-filter {
  display: inline-flex;
  align-items: center;
  min-width: min(220px, 100%);
  margin: 0;
}

.page-head .actions .catalogue-category-filter .select {
  width: 100%;
  min-width: 180px;
  min-height: 42px;
}

/* Inventory filter: paired dates + labeled side-by-side actions. */
.inventory-filters .inventory-filter-actions {
  display: grid;
  gap: 7px;
  align-content: start;
}

.inventory-filters .inventory-filter-actions .filter-panel-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}

.inventory-filters .inventory-filter-actions .btn {
  width: 100%;
  justify-content: center;
  min-height: 44px;
}

/* —— Touch targets ≥ 48px (phone + tablet shell) —— */
@media (max-width: 800px) {
  /* Topbar must fit 48px search without clipping fixed chrome. */
  .topbar {
    height: auto;
    min-height: calc(72px + env(safe-area-inset-top));
    align-items: center;
  }

  .topbar .search,
  .topbar .global-search-shell {
    min-height: 48px;
    padding-top: 0;
    padding-bottom: 0;
    box-sizing: border-box;
  }

  .btn,
  .btn-table-view,
  .btn-table-edit,
  .btn-table-delete,
  .icon-btn,
  .topbar-action-button.icon-btn,
  .topbar-popover-head .icon-btn,
  .mobile-menu-toggle,
  .mobile-sidebar-close,
  .profile-trigger,
  .toast-close,
  .notice-close,
  .field-password-toggle,
  .table-identity-view,
  .table-pagination-button,
  .table-page-size select,
  .table-mobile-sort-select,
  .appointment-period-arrow,
  .appointment-period-trigger,
  .appointment-today-button,
  .appointment-workspace-tabs .btn,
  .appointment-period-controls .btn,
  .appointment-period-month,
  .catalogue-card-menu summary,
  .filter-panel-toggle,
  .table-filter-panel-toggle,
  .table-column-manager-toggle,
  .table-card-head-more-toggle,
  .table-card-head-sort .table-mobile-sort-select,
  .number-stepper button,
  .input,
  .select,
  select.input,
  select.select,
  #global-search,
  .search input,
  .global-search-shell > input,
  .shared-table-toolbar .input,
  .shared-table-toolbar .select,
  .shared-table-toolbar .btn,
  .inventory-filters .inventory-filter-actions .btn,
  .permission-matrix-search,
  .permission-matrix-search input,
  .permission-matrix-presets .btn,
  .daily-task-complete,
  .quick-actions-toggle,
  .nav-group-tab,
  .nav-submenu a,
  .nav-submenu-item > a,
  .sidebar-foot-toggle,
  .sidebar-trash-link,
  .sidebar-logout,
  .profile-menu > button,
  .profile-menu > a {
    min-height: 48px !important;
  }

  /* Keep ≥48px hit areas, but collapse inter-row air so Beheer lists stay dense. */
  .nav-groups {
    gap: 4px;
  }

  .nav-group {
    gap: 2px;
  }

  .nav-submenu {
    gap: 0;
  }

  .nav-group-tab {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .nav-submenu a,
  .nav-submenu-item > a {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    box-sizing: border-box;
  }

  .number-stepper {
    --number-stepper-control-height: 48px;
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    max-width: 180px;
  }

  .number-stepper .input,
  .number-stepper button {
    height: var(--number-stepper-control-height) !important;
    min-height: var(--number-stepper-control-height) !important;
  }

  .icon-btn,
  .topbar-action-button.icon-btn,
  .topbar-popover-head .icon-btn,
  .mobile-menu-toggle,
  .mobile-sidebar-close,
  .profile-trigger,
  .toast-close,
  .notice-close,
  .field-password-toggle,
  .table-pagination-button,
  .appointment-period-arrow,
  .catalogue-card-menu summary,
  .number-stepper button,
  .nav-pin-toggle,
  .nav-pin-drag {
    min-width: 48px !important;
    width: auto;
    height: auto;
  }

  .nav-pin-toggle,
  .nav-pin-drag {
    min-height: 48px !important;
    width: 48px !important;
    height: 48px !important;
  }

  /* Override fixed desktop sizes for notice/password chrome. */
  .notice-close,
  .field-password-toggle {
    width: 48px !important;
    height: 48px !important;
    flex: 0 0 48px;
  }

  .table-identity-view {
    align-items: center;
    box-sizing: border-box;
    padding: 8px 0;
  }

  /* iOS Safari zooms focused fields under 16px — keep desktop density above 800px */
  .input,
  .select,
  .textarea,
  select.input,
  select.select,
  #global-search,
  .search input,
  .global-search-shell > input,
  .table-page-size select,
  .table-mobile-sort-select,
  .permission-matrix-search input,
  .shared-table-toolbar .input,
  .shared-table-toolbar .select {
    font-size: 16px !important;
  }

  .toast-close {
    top: 8px;
    right: 8px;
    display: inline-grid;
    place-items: center;
    font-size: 22px;
    line-height: 1;
  }

  .notice-close {
    display: inline-grid;
    place-items: center;
    align-self: center;
    font-size: 18px;
    line-height: 1;
  }

  /* Keep companion checkbox visuals compact; row-select is handled below. */
  .table-select-all,
  .bulk-product-table input[type="checkbox"],
  .permission-matrix input[type="checkbox"],
  .checklist-check {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px;
    min-height: 22px;
    margin: 0;
  }

  /*
   * Row selection inputs are audited on the <input> itself (not the wrapper).
   * Expand the hit box to ≥44×44 while drawing a centered 22px checkbox via background.
   * font-size: 16px clears IOS_INPUT_ZOOM_RISK scanners on generic inputs.
   */
  input[type="checkbox"].table-row-select {
    -webkit-appearance: none;
    appearance: none;
    font-size: 16px !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px 22px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Crect x='1.25' y='1.25' width='19.5' height='19.5' rx='4' fill='%23fff' stroke='%23dce7f2' stroke-width='1.5'/%3E%3C/svg%3E");
    display: inline-block !important;
    vertical-align: middle;
    cursor: pointer;
    flex: 0 0 44px;
    color: var(--brand-primary, var(--brand));
    accent-color: var(--brand-primary, var(--brand));
  }

  input[type="checkbox"].table-row-select:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Crect x='1.25' y='1.25' width='19.5' height='19.5' rx='4' fill='%232463a8' stroke='%232463a8' stroke-width='1.5'/%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M5.5 11.2l3.2 3.2 7.2-7.4'/%3E%3C/svg%3E");
  }

  input[type="checkbox"].table-row-select:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--brand-2, var(--brand)) 45%, transparent);
    outline-offset: 2px;
  }

  .table-select-all-control,
  .table-mobile-select,
  .permission-col-toggle,
  label:has(> input[type="checkbox"].table-row-select),
  label:has(> input[type="checkbox"][data-permission-row-toggle]),
  td:has(> input[type="checkbox"][data-permission-key]),
  .permission-matrix td:has(> input[type="checkbox"]) {
    min-height: 48px;
    min-width: 48px;
    box-sizing: border-box;
  }

  .table-select-all-control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .table-mobile-select,
  .permission-col-toggle,
  label:has(> input[type="checkbox"].table-row-select),
  label:has(> input[type="checkbox"][data-permission-row-toggle]),
  td:has(> input[type="checkbox"][data-permission-key]),
  .permission-matrix td:has(> input[type="checkbox"]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .card.panel,
  .panel,
  .stat-card,
  .catalogue-search-card,
  .catalogue-card .panel,
  .settings-currency-manager,
  .login-panel,
  .filter-panel.card {
    padding: 16px !important;
  }

  .table-card-head {
    padding: 14px 16px !important;
  }

  .table-mobile-card {
    padding: 16px !important;
  }

  .inventory-filters .inventory-filter-actions .filter-panel-actions {
    grid-template-columns: 1fr;
  }

  /* Pagination: wide, easy taps */
  .table-pagination-bottom,
  .table-pagination.table-pagination-bottom {
    display: grid;
    gap: 12px;
    padding: 12px 16px 16px;
  }

  .table-pagination-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
    gap: 8px;
    width: 100%;
  }

  .table-pagination-button {
    width: 100%;
    min-height: 48px !important;
    min-width: 48px !important;
    font-size: 15px;
  }

  .table-page-size {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    width: 100%;
  }

  .table-page-size select {
    flex: 1;
    min-width: 0;
    min-height: 48px !important;
  }

  /* Charts: no horizontal page/card scroll */
  .native-chart-host {
    overflow-x: hidden !important;
    height: auto;
    min-height: 220px;
  }

  .native-chart {
    min-width: 0 !important;
    width: 100% !important;
  }

  .native-chart-bars {
    gap: 6px;
    padding-inline: 4px;
  }

  .native-bar-group {
    min-width: 0 !important;
  }

  .chartjs-host,
  .chart {
    overflow-x: hidden;
    max-width: 100%;
  }

  /* Appointment calendar: compact day cells, no wide minmax */
  .appointment-calendar-grid,
  .appointment-calendar-grid.is-week,
  .appointment-calendar-weekdays,
  .appointment-week-head {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 4px !important;
    overflow: visible !important;
  }

  .appointment-day {
    min-height: 48px !important;
    height: auto !important;
  }

  .admin-grid {
    gap: var(--layout-gap, 22px) !important;
  }

  /* Roles permission matrix → stacked cards */
  .permission-matrix .table-wrap--matrix {
    overflow: visible !important;
    border: 0;
    background: transparent;
  }

  .permission-matrix .table-wrap--matrix::before,
  .permission-matrix .table-wrap--matrix::after {
    display: none !important;
  }

  .permission-matrix .table {
    display: block;
    width: 100%;
  }

  .permission-matrix .table thead {
    display: none;
  }

  .permission-matrix .table tbody {
    display: grid;
    gap: var(--layout-gap, 22px);
  }

  .permission-matrix .table tr.permission-group-row {
    display: block;
    margin: 0;
    border: 0;
    background: transparent;
  }

  .permission-matrix .table tr.permission-group-row td {
    display: block;
    padding: 0 2px 4px;
    background: transparent;
    border: 0;
    font-size: 13px;
    font-weight: 800;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .permission-matrix .table tr[data-permission-row] {
    display: grid;
    gap: 10px;
    padding: 16px;
    margin: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow);
  }

  .permission-matrix .table tr[data-permission-row] td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    padding: 8px 0;
    border: 0;
    border-top: 1px solid var(--line);
    text-align: left !important;
  }

  .permission-matrix .table tr[data-permission-row] td:first-child {
    min-width: 0 !important;
    border-top: 0;
    padding-top: 0;
    display: block;
  }

  .permission-matrix .table tr[data-permission-row] td:not(:first-child)::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--ink);
    flex: 1;
    min-width: 0;
  }

  .permission-matrix .table tr[data-permission-row] td:nth-child(2)::before {
    content: attr(data-label);
  }

  .permission-matrix .permission-special-list {
    flex: 1;
    min-width: 0;
    justify-items: stretch;
  }

  .permission-matrix .permission-special-item {
    justify-content: flex-end;
    white-space: normal;
    font-size: 12px;
  }

  .permission-matrix .permission-special-item input {
    flex: 0 0 18px;
  }

  /* Keep section-shell nav padding with styles.css (10px); do not widen asymmetrically. */
  .section-nav {
    padding: 10px !important;
  }

  /* Profile: stack at the shared 800px shell breakpoint; prevent 320px overflow */
  .profile-identity-card,
  .profile-password-card,
  .profile-security-card,
  .profile-info-card,
  .profile-page-form,
  .profile-identity-summary,
  .profile-form-actions {
    min-width: 0;
    max-width: 100%;
  }

  .profile-identity-summary {
    align-items: flex-start;
  }

  .profile-identity-summary > div:last-child {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .profile-identity-summary h2,
  .profile-identity-summary p {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .profile-info-row {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px 12px;
  }

  .profile-info-row > span,
  .profile-info-row strong {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .profile-info-row strong {
    flex: 1 1 auto;
    text-align: right;
  }

  .profile-form-actions {
    justify-content: stretch;
  }

  .profile-form-actions .btn {
    width: 100%;
  }

  .profile-page-avatar {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    font-size: 20px;
  }

  /* Card tables: no horizontal-scroll heuristic / page bleed (desktop table stays display:none) */
  .table-wrap.table-wrap--cards,
  .table-wrap:has(.table-mobile-list) {
    overflow-x: visible !important;
    max-width: 100%;
  }

  .table-wrap.table-wrap--cards .table--desktop,
  .table-wrap:has(.table-mobile-list) .table--desktop {
    display: none !important;
  }
}

@media (max-width: 800px) and (min-width: 481px) {
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/*
 * Authenticated panel content stays full main-column width on desktop /
 * ultrawide. Do not reintroduce a reading-measure max-width on `.content`
 * children — it fights the full-bleed work-surface shell. Shared list tables
 * still densify columns above 800px (below). Never center-cap `.content`
 * itself (topbar stays full-bleed).
 */

/* Shared list tables: keep short columns compact while giving the identity column
 * a real share of the available width. Applying width:1% to every cell makes
 * product/customer names collapse under the table's auto layout algorithm. */
@media (min-width: 801px) {
  .table-card:not([data-mbb-table="customers"]) .table-wrap:not(.line-items-wrap):not(.table-wrap--matrix) > table.table {
    table-layout: auto;
    width: 100%;
  }

  .table-card:not([data-mbb-table="customers"]) .table-wrap:not(.line-items-wrap):not(.table-wrap--matrix) > table.table > thead > tr > th,
  .table-card:not([data-mbb-table="customers"]) .table-wrap:not(.line-items-wrap):not(.table-wrap--matrix) > table.table > tbody > tr:not(.table-empty-row) > td {
    white-space: nowrap;
  }

  /* Name/identity gets a readable minimum and absorbs the remaining width. */
  .table-card:not([data-mbb-table="customers"]) .table-wrap:not(.line-items-wrap):not(.table-wrap--matrix) > table.table .table-identity-col {
    width: auto;
    min-width: min(42%, 360px);
    max-width: none;
    white-space: normal;
  }

  /* Opt-in clip columns stay capped; do not share this cap with identity. */
  .table-card:not([data-mbb-table="customers"]) .table-wrap:not(.line-items-wrap):not(.table-wrap--matrix) > table.table .table-clip-col {
    width: auto;
    max-width: var(--table-clip-max, 180px);
    white-space: normal;
  }

  /* Empty lists: keep header row content-sized so labels do not stretch across the card. */
  .table-card .table-wrap:has(.table-empty-row) > table.table {
    width: max-content;
    max-width: 100%;
  }
}

/* Mobile card identity is the primary piece of information; do not inherit
 * the desktop ellipsis treatment from .identity-cell. */
@media (max-width: 800px) {
  .table-mobile-identity,
  .table-mobile-identity .product-identity-cell,
  .table-mobile-identity .product-identity-text,
  .table-mobile-identity .identity-cell {
    min-width: 0;
    max-width: 100%;
  }

  .table-mobile-identity .identity-cell strong,
  .table-mobile-identity .identity-cell small {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .table-mobile-identity .identity-cell strong {
    font-size: 15px;
    line-height: 1.35;
  }
}

/* Products is the densest shared list. Keep every column inside the card so
 * actions remain reachable without a page-level horizontal scroll. */
@media (min-width: 801px) {
  [data-mbb-table="products"] .table-wrap > table.table {
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
  }

  [data-mbb-table="products"] .table-wrap > table.table th,
  [data-mbb-table="products"] .table-wrap > table.table td {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Header sorting buttons: compact pill sizing so header buttons fit inside tight numeric columns */
  [data-mbb-table="products"] .table-wrap > table.table th {
    overflow: visible;
  }

  [data-mbb-table="products"] .table-wrap > table.table th .table-sort-button {
    white-space: nowrap;
    padding: 3px 5px;
    gap: 3px;
    font-size: 9px;
    min-height: 26px;
    box-sizing: border-box;
  }

  [data-mbb-table="products"] .table-wrap > table.table th .table-sort-button-state {
    padding: 1px 3px;
    font-size: 8.5px;
  }

  /* Checkbox column */
  [data-mbb-table="products"] .table-wrap > table.table [data-column-key="__selection"] {
    width: 35px;
  }

  /* Product Name column expanded by over 30% so full product names never truncate */
  [data-mbb-table="products"] .table-wrap > table.table .table-identity-col {
    width: 32%;
    min-width: 220px;
  }

  /* Unit */
  [data-mbb-table="products"] .table-wrap > table.table [data-column-key="unit"] {
    width: 40px;
    text-align: center;
    white-space: nowrap;
  }

  /* Category */
  [data-mbb-table="products"] .table-wrap > table.table [data-column-key="category"] {
    width: 10%;
    white-space: nowrap;
  }

  /* Prices & Profit Margin reduced by another 10% (76px -> 68px, 48px -> 43px) */
  [data-mbb-table="products"] .table-wrap > table.table [data-column-key="price"],
  [data-mbb-table="products"] .table-wrap > table.table [data-column-key="cost_price"] {
    width: 68px;
    text-align: right;
    white-space: nowrap;
  }

  [data-mbb-table="products"] .table-wrap > table.table [data-column-key="profit_margin"] {
    width: 43px;
    text-align: right;
    white-space: nowrap;
  }

  [data-mbb-table="products"] .table-wrap > table.table [data-column-key="stock"] {
    width: 55px;
    text-align: right;
    white-space: nowrap;
  }

  /* Tight padding for numeric & unit cells in product rows */
  [data-mbb-table="products"] .table-wrap > table.table td[data-column-key="unit"],
  [data-mbb-table="products"] .table-wrap > table.table td[data-column-key="price"],
  [data-mbb-table="products"] .table-wrap > table.table td[data-column-key="cost_price"],
  [data-mbb-table="products"] .table-wrap > table.table td[data-column-key="profit_margin"],
  [data-mbb-table="products"] .table-wrap > table.table td[data-column-key="stock"] {
    padding-left: 3px;
    padding-right: 3px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }

  [data-mbb-table="products"] .table-wrap > table.table [data-column-key="status"] {
    width: 75px;
    white-space: nowrap;
  }

  [data-mbb-table="products"] .table-wrap > table.table [data-column-key="catalogue_status"] {
    width: 80px;
    white-space: nowrap;
  }

  [data-mbb-table="products"] .table-wrap > table.table td:has(.table-row-actions),
  [data-mbb-table="products"] .table-wrap > table.table th[data-column-key="actions"] {
    width: 130px;
  }

  [data-mbb-table="products"] .product-identity-cell,
  [data-mbb-table="products"] .product-identity-text,
  [data-mbb-table="products"] .product-identity-cell > .table-identity-view {
    width: 100%;
    min-width: 0;
  }

  [data-mbb-table="products"] .identity-cell strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  [data-mbb-table="products"] .table-row-actions {
    width: 100%;
    max-width: none;
    justify-content: flex-start;
    gap: 4px;
  }

  [data-mbb-table="products"] .table-row-actions .btn {
    width: auto;
    min-width: 0;
    height: 36px;
    padding: 6px 8px;
    font-size: 11px;
    white-space: nowrap;
  }
}