:root {
  --app-primary: #2563eb;
  --app-primary-soft: #eaf1ff;
  --app-text: #182335;
  --app-text-muted: #6f7d92;
  --app-muted: var(--app-text-muted);
  --app-border: #e2e8f0;
}

/* P8 security administration */
.security-feedback,
.security-readonly-notice {
    border: 1px solid var(--tblr-border-color, #dce1e7);
    border-radius: .375rem;
    margin-bottom: 1rem;
    padding: .75rem 1rem;
}

.security-feedback.is-error {
    background: #fff5f5;
    border-color: #ffc9c9;
    color: #b42318;
}

.security-feedback.is-success {
    background: #f0fff4;
    border-color: #b7ebc6;
    color: #16794c;
}

.security-readonly-notice {
    background: #f7f8fa;
    color: #536277;
}

.security-card-heading,
.security-context-bar,
.security-form-actions,
.security-row-actions,
.security-filter-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.security-card-heading,
.security-context-bar {
    justify-content: space-between;
}

.security-context-bar {
    background: #f7f8fa;
    border: 1px solid var(--tblr-border-color, #dce1e7);
    border-radius: .375rem;
    margin-bottom: 1rem;
    padding: .75rem 1rem;
}

.security-form-card {
    max-width: 880px;
}

.security-form-grid,
.security-log-filter {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.security-log-filter {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.security-wide-field,
.security-log-keyword,
.security-log-filter .security-form-actions {
    grid-column: 1 / -1;
}

.security-password-form {
    display: grid;
    gap: 1rem;
    max-width: 520px;
}

.security-description-list {
    display: grid;
    gap: .625rem 1rem;
    grid-template-columns: minmax(7rem, 10rem) 1fr;
}

.security-description-list dt {
    color: #667085;
    font-weight: 600;
}

.security-description-list dd {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.security-access-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.security-tree-group {
    border: 1px solid var(--tblr-border-color, #dce1e7);
    border-radius: .375rem;
    margin: 0 0 .75rem;
    padding: .75rem 1rem;
}

.security-tree-group legend {
    float: none;
    font-size: .875rem;
    font-weight: 700;
    margin: 0 0 .5rem;
    padding: 0 .25rem;
    width: auto;
}

.security-tree-group small {
    color: #7b8798;
    display: block;
}

.security-row-actions a,
.security-inline-confirm summary {
    cursor: pointer;
    white-space: nowrap;
}

.security-inline-confirm {
    position: relative;
}

.security-inline-confirm form {
    background: #fff;
    border: 1px solid var(--tblr-border-color, #dce1e7);
    border-radius: .375rem;
    box-shadow: 0 .25rem .75rem rgb(15 23 42 / 10%);
    min-width: 14rem;
    padding: .75rem;
    position: absolute;
    right: 0;
    top: 1.75rem;
    z-index: 10;
}

.security-empty-state {
    color: #667085;
    padding: 2rem 1rem;
    text-align: center;
}

.security-table th,
.security-table td {
    vertical-align: middle;
}

.security-log-table {
    min-width: 1040px;
}

.security-summary-cell {
    max-width: 24rem;
    overflow-wrap: anywhere;
}

.security-log-detail {
    background: #f7f8fa;
    border: 1px solid var(--tblr-border-color, #dce1e7);
    border-radius: .375rem;
    max-height: 28rem;
    overflow: auto;
    padding: 1rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.security-subtitle {
    font-size: 1rem;
    margin-top: 1.5rem;
}

.security-file-list {
    display: grid;
    gap: .75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.security-file-list li {
    align-items: center;
    border-bottom: 1px solid var(--tblr-border-color, #dce1e7);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding-bottom: .75rem;
}

.security-tree-actions,
.security-pagination,
.security-pagination > div {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.security-tree-actions {
    margin-bottom: .75rem;
}

.security-pagination {
    justify-content: space-between;
    margin-top: 1rem;
}

@media (max-width: 767.98px) {
    .security-form-grid,
    .security-log-filter,
    .security-access-grid {
        grid-template-columns: 1fr;
    }

    .security-wide-field,
    .security-log-keyword,
    .security-log-filter .security-form-actions {
        grid-column: auto;
    }

    .security-description-list {
        grid-template-columns: 1fr;
    }

    .security-description-list dd {
        margin-bottom: .5rem;
    }

    .security-form-actions .btn,
    .security-filter-row .btn,
    .security-filter-row .form-label {
        width: 100%;
    }

    .security-inline-confirm form {
        left: 0;
        right: auto;
    }

    .security-pagination,
    .security-pagination > div {
        align-items: stretch;
        flex-direction: column;
        width: 100%;
    }

    .security-pagination .btn {
        width: 100%;
    }
}

.point-feedback {
  margin-bottom: 1rem;
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  padding: .75rem 1rem;
}

.point-feedback.is-error {
  border-color: rgba(214, 57, 57, .35);
  background: rgba(214, 57, 57, .08);
  color: var(--tblr-danger);
}

.point-feedback.is-success {
  border-color: rgba(47, 179, 68, .35);
  background: rgba(47, 179, 68, .08);
  color: var(--tblr-success);
}

.point-filter-card,
.point-detail-grid,
.point-section-nav,
.point-page-actions,
.point-pagination,
.point-action-panel,
.point-add-image {
  margin-bottom: 1rem;
}

.point-filter-grid,
.point-order-filter-grid,
.point-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  align-items: end;
}

.point-filter-actions,
.point-form-actions,
.point-page-actions,
.point-command-actions,
.point-row-actions,
.point-section-nav,
.point-pagination,
.point-detail-heading {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

.point-list-heading,
.point-pagination,
.point-detail-heading {
  justify-content: space-between;
}

.point-empty-state,
.point-readonly-notice {
  padding: 1rem;
  color: var(--tblr-secondary-color);
}

.point-section-nav {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: .75rem;
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  background: var(--tblr-bg-surface);
}

.point-form-wide {
  grid-column: span 2;
}

.point-onsale-field {
  min-height: 2.5rem;
  align-items: center;
}

.point-description-editor {
  min-height: 18rem;
}

.point-safe-description,
.point-image-card,
.point-action-panel[open],
.point-add-image[open] {
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  padding: 1rem;
}

.point-image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.point-image-card img {
  display: block;
  width: 100%;
  height: 12rem;
  object-fit: contain;
  background: var(--tblr-bg-surface-secondary);
  margin-bottom: .75rem;
}

.point-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.point-description-list {
  display: grid;
  grid-template-columns: minmax(6rem, 9rem) minmax(0, 1fr);
  gap: .5rem 1rem;
  margin: 0;
}

.point-description-list dt {
  color: var(--tblr-secondary-color);
  font-weight: 600;
}

.point-description-list dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.point-action-panel form,
.point-add-image form,
.point-image-card form {
  display: grid;
  gap: .75rem;
  margin-top: .75rem;
}

@media (max-width: 640px) {
  .point-filter-grid,
  .point-order-filter-grid,
  .point-form-grid,
  .point-detail-grid {
    grid-template-columns: 1fr;
  }

  .point-form-wide {
    grid-column: auto;
  }

  .point-filter-actions,
  .point-form-actions,
  .point-page-actions,
  .point-command-actions,
  .point-detail-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .point-filter-actions .btn,
  .point-form-actions .btn,
  .point-page-actions .btn,
  .point-command-actions .btn,
  .point-detail-heading .btn,
  .point-action-panel summary,
  .point-add-image summary {
    min-height: 44px;
    width: 100%;
  }

  .point-description-list {
    grid-template-columns: 1fr;
  }

  .point-description-list dd {
    margin-bottom: .5rem;
  }
}

/* Shared shell: Tabler owns component appearance; these rules only bridge app behavior. */
html {
  min-width: 320px;
}

body {
  min-height: 100vh;
}

.skip-link {
  position: fixed;
  z-index: 1080;
  top: 0.5rem;
  left: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--tblr-border-radius, 0.375rem);
  background: var(--tblr-dark, #1f2937);
  color: var(--tblr-white, #fff);
  transform: translateY(-160%);
}

.skip-link:focus {
  color: var(--tblr-white, #fff);
  transform: translateY(0);
}

.app-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.65;
}

.app-sidebar {
  transition: transform 160ms ease;
}

.app-sidebar .navbar-brand {
  min-height: 4rem;
  border-bottom: var(--tblr-border-width, 1px) solid var(--tblr-border-color, #e5e7eb);
  white-space: normal;
}

.app-sidebar .sidebar-navigation {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0.75rem;
}

.nav-group {
  margin-bottom: 0.25rem;
}

.nav-group > .nav-parent {
  display: flex;
  width: 100%;
  cursor: pointer;
  border: 0;
  text-align: left;
}

.nav-parent .nav-link-title {
  min-width: 0;
  flex: 1 1 auto;
}

.nav-parent > .ms-auto .app-icon {
  width: 1rem;
  height: 1rem;
  transition: transform 140ms ease;
}

.nav-parent[aria-expanded="true"] > .ms-auto .app-icon {
  transform: rotate(90deg);
}

.nav-children {
  padding-left: 2rem;
}

.nav-children.is-collapsed {
  display: none;
}

.nav-children .nav-link {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

.is-search-hidden {
  display: none !important;
}

.sidebar-backdrop {
  display: none;
}

.app-topbar {
  position: sticky;
  z-index: 1020;
  top: 0;
}

.menu-search {
  width: min(22rem, 36vw);
}

.user-summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}

.error-panel {
  min-height: 20rem;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  text-align: center;
}

.error-panel > p {
  max-width: 36rem;
  margin-bottom: 0;
  color: var(--tblr-secondary-color, #6b7280);
}

.error-code {
  color: var(--tblr-tertiary-color, #9ca3af);
  font-size: 4rem;
  font-weight: 700;
  line-height: 1;
}

.placeholder-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.error-panel .request-id {
  margin-top: 1rem;
  color: var(--tblr-secondary-color, #6b7280);
}

.validation-summary:empty,
.validation-summary-valid,
.field-validation:empty {
  display: none;
}

.validation-summary ul {
  margin: 0;
  padding-left: 1.25rem;
}

@media (min-width: 992px) {
  body.sidebar-collapsed .app-sidebar {
    transform: translateX(-100%);
  }

  body.sidebar-collapsed .app-sidebar ~ .page-wrapper {
    margin-left: 0;
  }
}

@media (max-width: 991.98px) {
  .app-sidebar {
    position: fixed;
    z-index: 1040;
    inset: 0 auto 0 0;
    display: flex;
    width: 15rem;
    max-width: calc(100vw - 3rem);
    transform: translateX(-100%);
    box-shadow: var(--tblr-box-shadow-lg);
  }

  body.sidebar-open .app-sidebar {
    transform: translateX(0);
  }

  body .navbar-expand-lg.navbar-vertical ~ .page-wrapper {
    margin-left: 0;
  }

  .sidebar-backdrop {
    position: fixed;
    z-index: 1030;
    inset: 0;
    display: block;
    pointer-events: none;
    cursor: pointer;
    border: 0;
    background: rgba(15, 23, 42, 0.3);
    opacity: 0;
    transition: opacity 160ms ease;
  }

  body.sidebar-open .sidebar-backdrop {
    pointer-events: auto;
    opacity: 1;
  }

  .menu-search {
    width: min(18rem, 42vw);
  }
}

@media (max-width: 767.98px) {
  .app-breadcrumb {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .menu-search {
    display: none;
  }
}

/* Orders: P3B invoice payments */
.order-payment-summary,
.invoice-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  border-top: 1px solid #e6ebf1;
  border-bottom: 1px solid #e6ebf1;
  background: #e6ebf1;
}

.order-payment-summary > div,
.invoice-metric-grid > div {
  min-width: 0;
  padding: 14px 18px;
  background: #fbfcfe;
}

.order-payment-summary span,
.invoice-metric-grid dt {
  display: block;
  margin: 0 0 5px;
  color: #7b8799;
  font-size: 11px;
  font-weight: 500;
}

.order-payment-summary strong,
.invoice-metric-grid dd {
  display: block;
  margin: 0;
  overflow-wrap: anywhere;
  color: #34445b;
  font-size: 13px;
  font-weight: 650;
}

.order-invoice-guidance {
  margin: 0;
  padding: 11px 18px;
  border-bottom: 1px solid #e6ebf1;
  background: #f5f8fc;
  color: #66748a;
  font-size: 12px;
}

.invoice-payment-form > label {
  display: grid;
  gap: 6px;
  color: #46556c;
  font-size: 12px;
  font-weight: 600;
}

.invoice-list-table {
  min-width: 1040px;
}

.invoice-list-table .order-cell-secondary {
  display: block;
}

.invoice-summary-panel,
.invoice-editor-panel,
.invoice-payment-panel {
  margin-bottom: 18px;
}

.invoice-form-errors,
.invoice-payment-errors {
  margin: 16px 18px 0;
  padding: 12px 15px;
  border: 1px solid #efd4d8;
  border-radius: 5px;
  background: #fff4f5;
  color: #a13d4b;
  font-size: 12px;
}

.invoice-form-errors ul,
.invoice-payment-errors {
  margin-bottom: 0;
}

.invoice-editor-form {
  padding: 18px;
}

.invoice-editor-list {
  display: grid;
  gap: 10px;
}

.invoice-editor-row {
  display: grid;
  grid-template-columns: minmax(200px, 1.35fr) minmax(160px, 0.75fr) minmax(150px, auto) auto;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid #dfe5ed;
  border-radius: 6px;
  background: #fff;
}

.invoice-editor-row.is-new {
  grid-template-columns: minmax(200px, 1.35fr) minmax(160px, 0.75fr) auto;
  background: #fbfcfe;
}

.invoice-editor-row.is-removed {
  border-style: dashed;
  background: #f7f8fa;
  opacity: 0.7;
}

.invoice-editor-row label,
.invoice-editor-row > div {
  min-width: 0;
}

.invoice-editor-row strong,
.invoice-field-label {
  display: block;
}

.invoice-field-label {
  margin-bottom: 5px;
  color: #66748a;
  font-size: 11px;
  font-weight: 600;
}

.invoice-retain-choice {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #526178;
  font-size: 12px;
}

.invoice-new-heading,
.invoice-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.invoice-new-heading {
  margin: 24px 0 11px;
}

.invoice-new-heading h3,
.invoice-new-heading p {
  margin: 0;
}

.invoice-new-heading h3 {
  color: #34445b;
  font-size: 14px;
}

.invoice-new-heading p {
  margin-top: 3px;
  color: #7b8799;
  font-size: 11px;
}

.invoice-form-actions {
  justify-content: flex-start;
  margin-top: 18px;
}

.invoice-payment-context {
  border-bottom: 1px solid #e6ebf1;
}

.invoice-payment-form {
  max-width: 540px;
  padding: 18px;
}

@media (max-width: 991.98px) {
  .order-payment-summary,
  .invoice-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .invoice-editor-row,
  .invoice-editor-row.is-new {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .order-payment-summary,
  .invoice-metric-grid,
  .invoice-editor-row,
  .invoice-editor-row.is-new {
    grid-template-columns: 1fr;
  }

  .invoice-new-heading,
  .invoice-form-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .invoice-new-heading .btn,
  .invoice-form-actions .btn,
  .invoice-form-actions a {
    min-height: 44px;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Orders: read-only vertical slice */
.order-filter-body {
  padding: 18px 19px 19px;
}

.order-filter-grid {
  display: grid;
  grid-template-columns: minmax(170px, 1.1fr) minmax(170px, 1.1fr) minmax(270px, 1.7fr) minmax(135px, 0.8fr) minmax(135px, 0.8fr) minmax(135px, 0.8fr);
  gap: 14px 12px;
}

.order-filter-field,
.order-date-range {
  min-width: 0;
  margin: 0;
}

.order-filter-field label,
.order-date-range legend {
  display: block;
  margin: 0 0 6px;
  padding: 0;
  color: #536176;
  font-size: 12px;
  font-weight: 600;
}

.order-filter-field .form-control,
.order-filter-field .form-select,
.order-date-range .form-control {
  min-height: 38px;
  border-color: #d9e1eb;
  border-radius: 5px;
  font-size: 13px;
}

.order-date-range {
  border: 0;
}

.order-date-inputs {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto minmax(120px, 1fr);
  align-items: center;
  gap: 8px;
}

.order-date-separator {
  color: #8995a6;
  font-size: 12px;
}

.order-filter-actions,
.order-shortcuts,
.order-result-summary,
.order-pagination,
.order-pagination-links,
.order-heading-meta {
  display: flex;
  align-items: center;
}

.order-filter-actions {
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 17px;
}

.order-shortcuts {
  flex-wrap: wrap;
  gap: 7px;
}

.order-shortcuts-label {
  margin-right: 2px;
  color: #7b8799;
  font-size: 11px;
}

.order-field-error,
.order-validation-summary {
  color: #b43f4d;
  font-size: 11px;
}

.order-field-error {
  display: block;
  margin-top: 4px;
}

.order-validation-summary {
  margin-bottom: 15px;
  padding: 10px 12px;
  border: 1px solid #efd4d8;
  border-radius: 5px;
  background: #fff4f5;
}

.order-validation-summary ul {
  margin: 0;
  padding-left: 18px;
}

.order-result-summary {
  justify-content: space-between;
  gap: 14px;
  color: #768398;
  font-size: 12px;
}

.order-result-summary strong {
  color: #34445b;
}

.order-table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

.order-table {
  width: 100%;
  min-width: 1120px;
  margin: 0;
  border-collapse: collapse;
  color: #405068;
  font-size: 12px;
  white-space: nowrap;
}

.order-table caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.order-table th {
  padding: 11px 14px;
  border-top: 1px solid #e7ebf1;
  border-bottom: 1px solid #dde4ed;
  background: #f8fafc;
  color: #758196;
  font-size: 11px;
  font-weight: 600;
  text-align: left;
}

.order-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #edf1f5;
  vertical-align: top;
}

.order-table tbody tr:hover {
  background: #fafcff;
}

.order-table .order-recipient-cell,
.order-table .order-invoice-cell {
  max-width: 300px;
  white-space: normal;
}

.order-table .order-amount-cell {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.order-primary-link {
  color: #245fca;
  font-weight: 600;
}

.order-cell-secondary {
  display: block;
  margin-top: 3px;
  color: #8a96a8;
  font-size: 11px;
  line-height: 1.45;
  white-space: normal;
}

.order-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  border: 1px solid #dce7f8;
  border-radius: 4px;
  background: #f1f6ff;
  color: #3566b5;
  font-size: 11px;
  font-weight: 600;
}

.order-status-badge.is-complete {
  border-color: #d9ecdf;
  background: #eff8f2;
  color: #2e7d50;
}

.order-status-badge.is-cancelled,
.order-status-badge.is-unknown {
  border-color: #efdadd;
  background: #fff3f4;
  color: #a94753;
}

.order-empty-state {
  padding: 54px 20px;
  color: #7e8999;
  text-align: center;
}

.order-empty-state strong,
.order-empty-state span {
  display: block;
}

.order-empty-state strong {
  margin-bottom: 4px;
  color: #3a485d;
  font-size: 14px;
}

.order-empty-state .btn {
  margin-top: 15px;
}

.order-pagination {
  justify-content: space-between;
  gap: 15px;
  padding: 15px 19px;
  color: #7d899b;
  font-size: 11px;
}

.order-pagination-links {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}

.order-page-link {
  display: inline-grid;
  min-width: 32px;
  min-height: 32px;
  place-items: center;
  padding: 4px 8px;
  border: 1px solid #dfe5ed;
  border-radius: 4px;
  background: #fff;
  color: #5f6d83;
}

.order-page-link[aria-current="page"] {
  border-color: var(--app-primary);
  background: var(--app-primary);
  color: #fff;
}

.order-page-link.is-disabled {
  color: #aab2be;
  pointer-events: none;
}

.order-heading-meta {
  flex-wrap: wrap;
  gap: 8px;
}

.order-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(310px, 0.65fr);
  gap: 18px;
}

.order-detail-grid > * {
  min-width: 0;
}

.order-description-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 24px;
  margin: 0;
  padding: 18px 19px;
}

.order-description-grid > div {
  min-width: 0;
}

.order-description-grid dt {
  margin-bottom: 4px;
  color: #7e8a9c;
  font-size: 11px;
  font-weight: 500;
}

.order-description-grid dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: #34445b;
  font-size: 13px;
}

.order-notification-panel {
  margin-top: 18px;
}

.order-notification-status {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid var(--app-border);
  border-radius: 999px;
  background: #f8fafc;
  color: var(--app-text-muted);
  font-size: 12px;
  font-weight: 700;
}

.order-notification-status.is-processing {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
}

.order-notification-status.is-success {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #15803d;
}

.order-notification-status.is-warning {
  border-color: #fde68a;
  background: #fffbeb;
  color: #a16207;
}

.order-notification-status.is-danger,
.order-notification-status.is-unknown {
  border-color: #fecaca;
  background: #fef2f2;
  color: #b91c1c;
}

.order-notification-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(176px, 1fr));
  gap: 14px;
  margin: 0;
  padding: 18px 19px 0;
}

.order-notification-grid > div {
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--app-border);
  border-radius: 5px;
  background: #f8fafc;
}

.order-notification-grid dt {
  color: var(--app-text-muted);
  font-size: 11px;
}

.order-notification-grid dd {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
  color: #34445b;
  font-size: 13px;
  font-weight: 600;
}

.order-notification-reason {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 14px 19px 0;
  padding: 12px 14px;
  border-left: 3px solid var(--app-primary);
  background: var(--app-primary-soft);
  color: #34445b;
}

.order-notification-reason strong {
  flex: 0 0 auto;
}

.order-notification-reason span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.order-notification-help {
  margin: 10px 19px 18px;
  color: var(--app-text-muted);
  font-size: 12px;
}

.order-detail-table {
  min-width: 860px;
}

.order-timeline {
  margin: 0;
  padding: 0;
  list-style: none;
}

.order-readonly-copy {
  min-height: 92px;
  padding: 18px 19px;
  overflow-wrap: anywhere;
  color: #44536a;
  font-size: 13px;
  white-space: pre-wrap;
}

.order-preview-summary {
  padding: 13px 18px;
  border-bottom: 1px solid #edf1f5;
}

.order-product-code-cell {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.order-product-name-cell {
  width: 20rem;
  max-width: 20rem;
}

.order-product-name-cell > div,
.order-product-name {
  min-width: 0;
}

.order-timeline {
  padding: 19px 21px;
}

.order-timeline li {
  position: relative;
  margin-left: 5px;
  padding: 0 0 20px 22px;
  border-left: 1px solid #dde4ed;
  color: #415067;
  font-size: 12px;
}

.order-timeline li::before {
  position: absolute;
  top: 5px;
  left: -4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9db5dd;
  content: "";
}

.order-timeline li:last-child {
  padding-bottom: 0;
  border-left-color: transparent;
}

.order-timeline time,
.order-timeline .order-action-meta {
  display: block;
  margin-top: 4px;
  color: #8b96a6;
  font-size: 10px;
}

.order-related-links {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 18px 19px;
}

.order-products-dialog {
  width: min(980px, calc(100vw - 30px));
  max-height: min(760px, calc(100vh - 30px));
  padding: 0;
  overflow: hidden;
  border: 1px solid #dbe2eb;
  border-radius: 7px;
  color: var(--app-text);
  box-shadow: 0 18px 55px rgba(24, 39, 61, 0.18);
}

.order-products-dialog::backdrop {
  background: rgba(20, 31, 48, 0.48);
}

.order-dialog-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 18px;
  border-bottom: 1px solid #e2e7ee;
}

.order-dialog-heading h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 650;
}

.order-dialog-heading .icon-button {
  display: inline-grid;
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto;
  cursor: pointer;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--tblr-border-radius, 0.375rem);
  background: transparent;
  color: var(--tblr-secondary-color, #6b7280);
}

.order-dialog-heading .icon-button:hover,
.order-dialog-heading .icon-button:focus-visible {
  background: var(--tblr-tertiary-bg, #f3f4f6);
  color: var(--tblr-body-color, #1f2937);
}

.order-dialog-content {
  max-height: calc(100vh - 125px);
  overflow: auto;
}

.order-preview-loading,
.order-preview-error {
  margin: 0;
  padding: 42px 20px;
  color: #758296;
  text-align: center;
}

.order-preview-error {
  color: #a54350;
}

@media (max-width: 1199.98px) {
  .order-filter-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .order-detail-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767.98px) {
  .order-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .order-date-range {
    grid-column: 1 / -1;
  }

  .order-filter-actions,
  .order-result-summary,
  .order-pagination {
    align-items: flex-start;
    flex-direction: column;
  }

  .order-pagination-links {
    justify-content: flex-start;
  }

  .order-description-grid {
    grid-template-columns: 1fr;
  }

  .order-notification-grid {
    grid-template-columns: 1fr;
  }

  .order-notification-reason {
    flex-direction: column;
    gap: 4px;
  }
}

@media (max-width: 479.98px) {
  .order-filter-grid,
  .order-date-inputs {
    grid-template-columns: 1fr;
  }

  .order-date-separator {
    display: none;
  }
}

/* Orders: P3 workflow commands */
.order-workflow-panel {
  border-left: 3px solid #4d75b8;
}

.order-workflow-body {
  padding: 18px 19px 19px;
}

.order-command-feedback {
  margin-bottom: 15px;
  padding: 10px 12px;
  border: 1px solid;
  border-radius: 5px;
  font-size: 12px;
  line-height: 1.55;
}

.order-command-feedback.is-success {
  border-color: #cfe5d6;
  background: #eff8f2;
  color: #276c45;
}

.order-command-feedback.is-error {
  border-color: #efd4d8;
  background: #fff4f5;
  color: #a13d4b;
}

.order-command-form,
.order-command-preserved {
  max-width: 760px;
}

.order-command-remark label,
.order-command-preserved label {
  display: block;
  margin-bottom: 6px;
  color: #46556c;
  font-size: 12px;
  font-weight: 600;
}

.order-command-remark textarea,
.order-command-preserved textarea {
  min-height: 82px;
  resize: vertical;
}

.order-command-preserved textarea[readonly] {
  background: #f8fafc;
  color: #56647a;
}

.order-command-help {
  margin: 6px 0 0;
  color: #7b8799;
  font-size: 11px;
}

.order-command-restriction {
  margin: 0;
  padding: 11px 12px;
  border: 1px solid #e1e6ed;
  border-radius: 5px;
  background: #f8fafc;
  color: #68758a;
  font-size: 12px;
}

.order-command-errors {
  margin: 6px 0 0;
  padding-left: 18px;
  color: #b43f4d;
  font-size: 11px;
}

.order-command-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 15px;
}

.order-command-form[aria-busy="true"] .order-command-actions .btn,
.order-command-actions .btn[aria-disabled="true"] {
  pointer-events: none;
  opacity: 0.68;
}

.order-cancel-trigger {
  margin-left: 4px;
}

.order-cancel-dialog {
  width: min(560px, calc(100vw - 30px));
  max-height: min(620px, calc(100vh - 30px));
  padding: 0;
  overflow: hidden;
  border: 1px solid #e3c6cb;
  border-radius: 7px;
  color: var(--app-text);
  box-shadow: 0 18px 55px rgba(24, 39, 61, 0.18);
}

.order-cancel-dialog::backdrop {
  background: rgba(20, 31, 48, 0.48);
}

.order-cancel-dialog-card {
  display: flex;
  max-height: min(620px, calc(100vh - 30px));
  flex-direction: column;
}

.order-cancel-dialog-body {
  padding: 18px;
  overflow-y: auto;
  color: #56647a;
  font-size: 13px;
  line-height: 1.65;
}

.order-cancel-dialog-body p {
  margin: 0 0 10px;
}

.order-cancel-dialog-body p:last-child {
  margin-bottom: 0;
}

.order-cancel-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 18px;
  border-top: 1px solid #e2e7ee;
  background: #fafbfc;
}

.order-cancel-fallback {
  width: 100%;
  margin-top: 4px;
  padding: 10px 12px;
  border: 1px solid #e3c6cb;
  border-radius: 5px;
  background: #fff7f7;
  color: #71424a;
}

.order-cancel-fallback summary {
  cursor: pointer;
  font-weight: 600;
}

.order-cancel-fallback-content {
  padding-top: 10px;
  font-size: 12px;
  line-height: 1.6;
}

.order-cancel-fallback-content p {
  margin: 6px 0;
}

.order-shipping-dialog {
  width: min(660px, calc(100vw - 30px));
  max-height: min(720px, calc(100vh - 30px));
  padding: 0;
  overflow: hidden;
  border: 1px solid #dbe2eb;
  border-radius: 7px;
  color: var(--app-text);
  box-shadow: 0 18px 55px rgba(24, 39, 61, 0.18);
}

.order-shipping-dialog::backdrop {
  background: rgba(20, 31, 48, 0.48);
}

.order-shipping-dialog-card {
  display: flex;
  max-height: min(720px, calc(100vh - 30px));
  flex-direction: column;
}

.order-shipping-dialog-body {
  padding: 18px;
  overflow-y: auto;
}

.order-shipping-notice {
  margin: 0 0 16px;
  padding: 11px 12px;
  border: 1px solid #dce5f2;
  border-radius: 5px;
  background: #f4f7fb;
  color: #56647a;
  font-size: 12px;
  line-height: 1.65;
}

.order-shipping-choice-actions,
.order-shipping-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}

.order-shipping-choice-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 15px;
  padding: 10px 12px;
  border: 1px solid #d9e3f2;
  border-radius: 5px;
  background: #f5f8fc;
  color: #4d5c72;
  font-size: 12px;
}

.order-shipping-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.order-shipping-fields label {
  display: block;
  margin-bottom: 6px;
  color: #46556c;
  font-size: 12px;
  font-weight: 600;
}

.order-shipping-form[aria-busy="true"] .order-shipping-actions .btn {
  pointer-events: none;
  opacity: 0.68;
}

/* Orders: P3E delivery maintenance */
.order-delivery-feedback,
.order-delivery-restriction {
  margin: 16px 18px 0;
}

.order-delivery-feedback {
  border: 1px solid #b8d6c4;
  border-radius: 8px;
  background: #edf8f1;
  color: #205f36;
  padding: 11px 12px;
}

.order-delivery-feedback.is-error {
  border-color: #e5b8b8;
  background: #fff1f1;
  color: #8e2626;
}

.order-delivery-restriction {
  border-left: 3px solid #e0a82e;
  background: #fff8e6;
  color: #725419;
  padding: 10px 12px;
}

.order-delivery-readonly {
  color: var(--app-text-muted);
  font-size: 13px;
  white-space: nowrap;
}

.order-delivery-dialog {
  width: min(640px, calc(100vw - 30px));
  max-height: min(720px, calc(100vh - 30px));
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 20px 55px rgba(20, 31, 48, 0.28);
}

.order-delivery-dialog::backdrop {
  background: rgba(20, 31, 48, 0.48);
}

.order-delivery-form {
  margin: 0;
}

.order-delivery-dialog-body,
.order-delivery-fallback-form {
  padding: 18px;
}

.order-delivery-dialog-body {
  max-height: calc(100vh - 110px);
  overflow-y: auto;
}

.order-delivery-notice {
  margin: 0 0 16px;
  color: var(--app-text-muted);
}

.order-delivery-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.order-delivery-fields label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
}

.order-delivery-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.order-delivery-form[aria-busy="true"] .order-delivery-actions .btn {
  pointer-events: none;
  opacity: 0.68;
}

.order-delivery-draft {
  margin-top: 14px;
}

.order-delivery-fallback {
  margin: 14px 18px 18px;
  border: 1px solid var(--app-border);
  border-radius: 8px;
}

.order-delivery-fallback > summary {
  cursor: pointer;
  padding: 12px 14px;
  font-weight: 600;
}

@media (max-width: 767.98px) {
  .order-workflow-body {
    padding: 16px;
  }

  .order-command-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .order-command-actions .btn {
    min-height: 44px;
    width: 100%;
  }

  .order-cancel-trigger {
    margin-top: 6px;
    margin-left: 0;
  }

  .order-cancel-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .order-cancel-actions .btn {
    min-height: 44px;
    width: 100%;
  }

  .order-shipping-fields {
    grid-template-columns: 1fr;
  }

  .order-shipping-choice-actions,
  .order-shipping-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .order-shipping-choice-actions .btn,
  .order-shipping-actions .btn {
    min-height: 44px;
    width: 100%;
  }

  .order-delivery-fields {
    grid-template-columns: 1fr;
  }

  .order-delivery-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .order-delivery-actions .btn {
    min-height: 44px;
    width: 100%;
  }
}

.order-maintenance-panel > .card-header {
  align-items: flex-start;
}

.order-maintenance-panel > .card-header .order-command-help {
  margin: 0.35rem 0 0;
}

.order-maintenance-feedback,
.order-maintenance-restriction,
.order-maintenance-preserved {
  margin: 1rem 1.25rem 0;
  border-radius: 0.45rem;
  padding: 0.85rem 1rem;
}

.order-maintenance-feedback {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  justify-content: space-between;
  border: 1px solid #b9dfc9;
  background: #edf9f2;
  color: #17663a;
}

.order-maintenance-feedback.is-error,
.order-maintenance-restriction,
.order-maintenance-preserved {
  border: 1px solid #efc4c4;
  background: #fff5f5;
  color: #9b2c2c;
}

.order-maintenance-feedback a {
  color: inherit;
  font-weight: 700;
}

.order-maintenance-readonly {
  color: var(--app-text-muted);
  font-size: 0.82rem;
  white-space: nowrap;
}

.order-maintenance-table input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
}

.order-maintenance-totals {
  display: flex;
  justify-content: flex-end;
  gap: 2rem;
  margin: 0;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--app-border);
  background: #f8fafc;
}

.order-maintenance-totals div {
  display: grid;
  gap: 0.25rem;
}

.order-maintenance-totals dt {
  color: var(--app-text-muted);
  font-size: 0.78rem;
}

.order-maintenance-totals dd {
  margin: 0;
  color: var(--app-text);
  font-weight: 700;
}

.order-maintenance-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--app-border);
}

.order-maintenance-actions > div:first-child {
  margin-right: auto;
}

.order-maintenance-actions .order-command-help {
  margin: 0;
}

.order-maintenance-actions .order-command-help.is-error {
  color: #b42318;
}

.order-maintenance-preserved p {
  margin: 0.35rem 0 0;
}

.order-maintenance-dialog {
  width: min(44rem, calc(100vw - 2rem));
  max-width: none;
  max-height: calc(100vh - 2rem);
  padding: 0;
  border: 0;
  border-radius: 0.65rem;
  overflow: auto;
  box-shadow: 0 1.25rem 3.5rem rgb(15 23 42 / 25%);
}

.order-maintenance-dialog::backdrop {
  background: rgb(15 23 42 / 48%);
}

.order-maintenance-dialog > form,
.order-maintenance-dialog > div {
  margin: 0;
}

.order-maintenance-dialog-body {
  display: grid;
  gap: 1rem;
  padding: 1.25rem;
}

.order-maintenance-notice {
  margin: 0;
  padding: 0.8rem 0.9rem;
  border: 1px solid #c9dcfb;
  border-radius: 0.4rem;
  background: #f2f7ff;
  color: #315889;
}

.order-maintenance-current-values,
.order-maintenance-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
}

.order-maintenance-current-values {
  margin: 0;
}

.order-maintenance-current-values div {
  padding: 0.8rem;
  border: 1px solid var(--app-border);
  border-radius: 0.4rem;
  background: #f8fafc;
}

.order-maintenance-current-values dt {
  color: var(--app-text-muted);
  font-size: 0.78rem;
}

.order-maintenance-current-values dd {
  margin: 0.25rem 0 0;
  font-weight: 700;
}

.order-maintenance-fields.single-field {
  grid-template-columns: minmax(0, 18rem);
}

.order-maintenance-fields label {
  display: block;
  margin-bottom: 0.4rem;
  font-weight: 600;
}

.order-maintenance-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding-top: 0.25rem;
}

[data-order-maintenance-form][aria-busy="true"] .btn {
  pointer-events: none;
}

.order-maintenance-fallback {
  margin: 1rem 1.25rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--app-border);
  border-radius: 0.45rem;
  background: #fff;
}

.order-maintenance-fallback summary {
  cursor: pointer;
  font-weight: 700;
}

.order-maintenance-fallback form,
.order-maintenance-fallback > div {
  display: grid;
  gap: 0.9rem;
  margin-top: 0.9rem;
}

.order-split-dialog {
  width: min(52rem, calc(100vw - 2rem));
}

.order-split-preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.order-split-preview section {
  padding: 1rem;
  border: 1px solid var(--app-border);
  border-radius: 0.45rem;
  background: #f8fafc;
}

.order-split-preview h3 {
  margin: 0 0 0.75rem;
  font-size: 0.98rem;
}

.order-split-preview ul {
  min-height: 3rem;
  margin: 0 0 0.75rem;
  padding-left: 1.2rem;
}

.order-split-preview dl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.35rem 0.75rem;
  margin: 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--app-border);
}

.order-split-preview dd {
  margin: 0;
  text-align: right;
  font-weight: 600;
}

@media (max-width: 640px) {
  .order-maintenance-totals,
  .order-maintenance-actions,
  .order-maintenance-dialog-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .order-maintenance-totals {
    gap: 0.75rem;
  }

  .order-maintenance-totals div {
    grid-template-columns: 1fr auto;
  }

  .order-maintenance-actions > div:first-child {
    margin-right: 0;
  }

  .order-maintenance-actions .btn,
  .order-maintenance-dialog-actions .btn {
    width: 100%;
  }

  .order-maintenance-current-values,
  .order-maintenance-fields,
  .order-maintenance-fields.single-field,
  .order-split-preview {
    grid-template-columns: 1fr;
  }
}

.excel-task-actions,
.app-dialog-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.excel-file-field {
  display: grid;
  gap: 0.4rem;
}

.excel-file-field > span {
  font-weight: 700;
}

.excel-file-field small,
.excel-selected-file {
  color: var(--app-text-muted);
  font-size: 0.82rem;
}

.excel-task-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
}

.excel-task-facts > div {
  min-width: 0;
  padding: 0.85rem;
  border: 1px solid var(--app-border);
  border-radius: 0.45rem;
  background: #f8fafc;
}

.excel-task-facts dt {
  color: var(--app-text-muted);
  font-size: 0.78rem;
}

.excel-task-facts dd {
  margin: 0.3rem 0 0;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.excel-status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid #bfdbfe;
  border-radius: 0.35rem;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 0.78rem;
  font-weight: 700;
}

.excel-status-badge[data-status="completed"],
.excel-status-badge[data-status="succeeded"] {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #166534;
}

.excel-status-badge[data-status="failed"],
.excel-status-badge[data-status="rejected"] {
  border-color: #fecaca;
  background: #fef2f2;
  color: #991b1b;
}

.excel-task-message,
.excel-selected-file {
  margin: 0;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--app-border);
  border-radius: 0.4rem;
  background: #f8fafc;
}

.excel-task-actions {
  margin-top: 1rem;
}

.app-dialog {
  width: min(38rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  padding: 0;
  border: 0;
  border-radius: 0.5rem;
  box-shadow: 0 1rem 2.5rem rgb(15 23 42 / 22%);
}

.app-dialog::backdrop {
  background: rgb(15 23 42 / 48%);
}

.app-dialog-card {
  display: grid;
  gap: 0;
  margin: 0;
}

.app-dialog-header,
.app-dialog-body,
.app-dialog-footer {
  padding: 1rem 1.2rem;
}

.app-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--app-border);
}

.app-dialog-header h2 {
  margin: 0.15rem 0 0;
  font-size: 1.15rem;
}

.app-dialog-body {
  display: grid;
  gap: 1rem;
}

.app-dialog-body p {
  margin: 0;
}

.app-dialog-footer {
  justify-content: flex-end;
  border-top: 1px solid var(--app-border);
}

[data-once-submit][aria-busy="true"] {
  cursor: wait;
}

.product-feedback,
.product-readonly-notice,
.product-validation-summary,
.product-section-placeholder {
  margin-bottom: 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--app-border);
  border-radius: 0.45rem;
  background: #f8fafc;
}

.product-feedback.is-success {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #166534;
}

.product-feedback.is-error,
.product-validation-summary {
  border-color: #fecaca;
  background: #fef2f2;
  color: #991b1b;
}

.product-readonly-notice {
  border-color: #fde68a;
  background: #fffbeb;
  color: #92400e;
}

.product-validation-summary ul {
  margin: 0.5rem 0 0;
}

.product-panel-body {
  padding: 1.25rem;
}

.product-filter-grid,
.product-editor-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.product-field {
  display: grid;
  align-content: start;
  gap: 0.4rem;
  min-width: 0;
}

.product-field > label,
.product-batch-tools > label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #334155;
}

.product-field small,
.product-subtext {
  display: block;
  color: #64748b;
  font-size: 0.78rem;
}

.product-field-error {
  color: #b91c1c;
  font-size: 0.78rem;
  font-weight: 600;
}

.product-field-wide {
  grid-column: span 2;
}

.product-field-full {
  grid-column: 1 / -1;
}

.product-filter-actions,
.product-form-actions,
.product-page-actions,
.product-row-actions,
.product-pagination,
.product-batch-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.product-filter-actions {
  margin-top: 1.15rem;
}

.product-result-panel,
.product-editor-section {
  margin-top: 1rem;
}

.product-result-heading {
  gap: 1rem;
  flex-wrap: wrap;
}

.product-result-heading p {
  margin: 0.3rem 0 0;
  color: #64748b;
}

.product-batch-tools {
  justify-content: flex-end;
}

.product-batch-tools .form-select {
  width: 9rem;
}

.product-selected-count {
  min-width: 4.5rem;
  color: #475569;
  font-size: 0.8rem;
}

.product-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.product-table {
  min-width: 58rem;
  margin: 0;
}

.product-table th,
.product-table td {
  vertical-align: middle;
}

.product-select-cell {
  width: 3rem;
  text-align: center;
}

.product-number-cell {
  text-align: right;
  white-space: nowrap;
}

.product-state-badge {
  display: inline-flex;
  margin-top: 0.4rem;
  margin-right: 0.3rem;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  background: #e2e8f0;
  color: #334155;
  font-size: 0.72rem;
  font-weight: 700;
}

.product-state-badge.is-on {
  background: #dcfce7;
  color: #166534;
}

.product-state-badge.is-deleted {
  background: #fee2e2;
  color: #991b1b;
}

.product-confirm {
  position: relative;
}

.product-confirm > summary {
  list-style: none;
  cursor: pointer;
}

.product-confirm > summary::-webkit-details-marker {
  display: none;
}

.product-confirm > form {
  position: absolute;
  z-index: 5;
  top: calc(100% + 0.45rem);
  right: 0;
  width: 16rem;
  padding: 0.9rem;
  border: 1px solid var(--app-border);
  border-radius: 0.45rem;
  background: #fff;
  box-shadow: 0 0.75rem 2rem rgb(15 23 42 / 18%);
}

.product-batch-confirm-body {
  position: absolute;
  z-index: 5;
  right: 0;
  width: 18rem;
  padding: 0.9rem;
  border: 1px solid var(--app-border);
  border-radius: 0.45rem;
  background: #fff;
  box-shadow: 0 0.75rem 2rem rgb(15 23 42 / 18%);
}

.product-batch-confirm-body p {
  margin: 0 0 0.75rem;
}

.product-confirm-wide > form {
  position: static;
  width: min(32rem, 100%);
  margin-top: 0.75rem;
}

.product-confirm p {
  margin: 0 0 0.75rem;
}

.product-empty-state {
  display: grid;
  justify-items: start;
  gap: 0.5rem;
  padding: 2rem 1.25rem;
}

.product-empty-state p {
  margin: 0;
  color: #64748b;
}

.product-pagination {
  justify-content: center;
  padding: 1rem;
}

.product-editor-nav {
  position: sticky;
  z-index: 3;
  top: 0;
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.65rem;
  border: 1px solid var(--app-border);
  border-radius: 0.45rem;
  background: rgb(255 255 255 / 96%);
}

.product-editor-nav a {
  padding: 0.45rem 0.75rem;
  border-radius: 0.35rem;
  white-space: nowrap;
  font-weight: 700;
}

.product-editor-form fieldset {
  min-width: 0;
  padding: 0;
  border: 0;
}

.product-editor-form.is-readonly fieldset:disabled {
  opacity: 1;
}

.product-editor-form.is-readonly input,
.product-editor-form.is-readonly select,
.product-editor-form.is-readonly textarea {
  color: #475569;
  background: #f8fafc;
}

.product-flag-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.product-flag-card {
  display: grid;
  gap: 0.5rem;
  padding: 0.85rem;
  border: 1px solid var(--app-border);
  border-radius: 0.4rem;
}

.product-form-actions {
  margin-top: 1.25rem;
}

.product-description-input {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.product-description-readonly pre {
  max-height: 28rem;
  overflow: auto;
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--app-border);
  border-radius: 0.4rem;
  background: #f8fafc;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.product-image-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-image-list li {
  display: grid;
  gap: 0.45rem;
}

.product-image-list img {
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid var(--app-border);
  border-radius: 0.4rem;
  object-fit: contain;
  background: #fff;
}

@media (max-width: 1080px) {
  .product-filter-grid,
  .product-editor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .product-filter-grid,
  .product-editor-grid,
  .product-flag-grid {
    grid-template-columns: 1fr;
  }

  .product-field-wide,
  .product-field-full {
    grid-column: auto;
  }

  .product-batch-tools,
  .product-page-actions,
  .product-form-actions {
    align-items: stretch;
    flex-direction: column;
    width: 100%;
  }

  .product-batch-tools .form-select,
  .product-batch-tools .btn,
  .product-page-actions .btn,
  .product-form-actions .btn {
    width: 100%;
  }

  .product-confirm > form {
    position: static;
    width: min(100%, 20rem);
    margin-top: 0.5rem;
  }

  .product-batch-confirm-body {
    position: static;
    width: 100%;
    margin-top: 0.5rem;
  }
}

.product-operation-section,
.product-operation-task {
  margin-top: 1rem;
}

.product-operation-body,
.product-task-body {
  display: grid;
  gap: 1rem;
  padding: 1rem;
}

.product-operation-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  padding: 1rem;
}

.product-operation-card {
  display: grid;
  align-content: start;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--app-border);
  border-radius: 0.45rem;
  background: #fff;
}

.product-operation-card h3,
.product-operation-card p {
  margin: 0;
}

.product-operation-card form,
.product-file-single-form,
.product-image-add-form,
.product-image-actions form {
  display: grid;
  gap: 0.65rem;
}

.product-operation-filter {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 0.75rem;
  align-items: end;
}

.product-operation-filter label,
.product-file-single-form > label,
.product-image-add-form > label,
.product-image-actions form > label {
  display: grid;
  gap: 0.4rem;
  font-weight: 700;
}

.product-template-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.5rem;
  margin: 0;
  padding-left: 1.5rem;
}

.product-template-details {
  margin: 0 1rem 1rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--app-border);
  border-radius: 0.45rem;
  background: #f8fafc;
}

.product-template-details summary {
  cursor: pointer;
  font-weight: 700;
}

.product-template-details .product-template-columns {
  margin-top: 1rem;
}

.product-task-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
}

.product-task-facts div {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
  padding: 0.75rem;
  border: 1px solid var(--app-border);
  border-radius: 0.4rem;
  background: #f8fafc;
}

.product-task-facts dt {
  color: var(--app-muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.product-task-facts dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.product-task-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
}

.product-issue-table {
  min-width: 50rem;
}

.product-image-summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 1rem;
  color: var(--app-muted);
}

.product-image-add-form {
  max-width: 38rem;
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid var(--app-border);
  border-radius: 0.45rem;
  background: #f8fafc;
}

.product-image-management-list {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-image-management-list > li {
  display: grid;
  grid-template-columns: minmax(12rem, 18rem) minmax(0, 1fr);
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--app-border);
  border-radius: 0.45rem;
}

.product-image-management-list > li.is-overflow {
  background: #fffbeb;
}

.product-image-preview {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
}

.product-image-preview img {
  width: 6rem;
  height: 6rem;
  border: 1px solid var(--app-border);
  border-radius: 0.4rem;
  object-fit: contain;
  background: #fff;
}

.product-image-preview > div {
  display: grid;
  gap: 0.35rem;
}

.product-image-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.product-image-actions .danger-confirmation {
  grid-column: 1 / -1;
}

@media (max-width: 980px) {
  .product-operation-grid,
  .product-operation-filter,
  .product-task-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-operation-filter .btn {
    align-self: end;
  }
}

@media (max-width: 640px) {
  .product-operation-grid,
  .product-operation-filter,
  .product-task-facts,
  .product-image-management-list > li,
  .product-image-actions {
    grid-template-columns: 1fr;
  }

  .product-operation-card form .btn,
  .product-file-single-form .btn,
  .product-operation-filter .btn,
  .product-task-actions .btn,
  .product-image-add-form .btn,
  .product-image-actions .btn {
    width: 100%;
  }

  .product-task-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .product-image-actions .danger-confirmation {
    grid-column: auto;
  }
}

.catalog-feedback,
.catalog-readonly-notice,
.catalog-validation-summary,
.catalog-inline-notice,
.catalog-empty-state {
  margin-bottom: 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--app-border);
  border-radius: 0.45rem;
  background: #f8fafc;
}

.customer-feedback,
.customer-validation-summary,
.customer-readonly-notice,
.customer-empty-state,
.customer-context-bar {
  padding: 0.85rem 1rem;
  border: 1px solid var(--app-border);
  border-radius: 0.45rem;
  background: #f8fafc;
}

.point-validation-summary {
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid #fecaca;
  border-radius: 0.45rem;
  color: #991b1b;
  background: #fff7f7;
}

.point-validation-summary ul {
  margin: 0.4rem 0 0;
  padding-left: 1.25rem;
}

.customer-feedback,
.customer-validation-summary,
.customer-readonly-notice,
.customer-context-bar,
.customer-filter-card,
.customer-account-metrics,
.customer-account-adjustment {
  margin-bottom: 1rem;
}

.customer-feedback.is-error {
  border-color: #fecaca;
  color: #991b1b;
  background: #fff7f7;
}

.customer-validation-summary {
  border-color: #fecaca;
  color: #991b1b;
  background: #fff7f7;
}

.customer-validation-summary ul {
  margin: 0.4rem 0 0;
  padding-left: 1.25rem;
}

.customer-feedback.is-success {
  border-color: #bbf7d0;
  color: #166534;
  background: #f0fdf4;
}

.customer-inline-confirmation {
  display: inline-block;
}

.customer-inline-confirmation > summary {
  cursor: pointer;
  color: #b42318;
}

.customer-inline-confirmation > form {
  min-width: 14rem;
  margin-top: 0.5rem;
  padding: 0.75rem;
  border: 1px solid #fecaca;
  border-radius: 0.35rem;
  background: #fff7f7;
  white-space: normal;
}

.customer-list-heading,
.customer-context-bar,
.customer-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.customer-list-table {
  min-width: 64rem;
}

.customer-cell-note,
.customer-address-line {
  display: block;
  color: var(--app-muted);
  font-size: 0.82rem;
}

.customer-empty-state {
  text-align: center;
  color: var(--app-muted);
}

.customer-pagination {
  margin-top: 1rem;
}

.customer-pagination > div {
  display: flex;
  gap: 0.5rem;
}

.customer-editor-layout,
.customer-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(18rem, 0.8fr);
  gap: 1rem;
  align-items: start;
}

.customer-editor-side,
.customer-detail-side {
  display: grid;
  gap: 1rem;
}

.customer-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.customer-form-span,
.customer-password-section,
.customer-form-actions {
  grid-column: 1 / -1;
}

.customer-password-section {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--app-border);
}

.customer-form-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.customer-account-value {
  margin-bottom: 0.75rem;
  font-size: 1.75rem;
  font-weight: 700;
}

.customer-description-list {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 0.8rem 1rem;
  margin: 0;
}

.customer-description-list dt {
  color: var(--app-muted);
}

.customer-description-list dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.customer-balance-list {
  display: grid;
  gap: 0.8rem;
}

.customer-balance-list > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.customer-address-table {
  min-width: 48rem;
}

.customer-account-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.customer-account-metrics .card-body {
  display: grid;
  gap: 0.35rem;
}

.customer-account-metrics strong {
  font-size: 1.6rem;
}

.customer-account-adjust-grid {
  display: grid;
  grid-template-columns: minmax(8rem, 0.7fr) minmax(8rem, 0.7fr) minmax(10rem, 1fr);
  gap: 0.75rem 1rem;
  align-items: center;
}

.customer-account-heading {
  font-weight: 600;
}

.customer-account-reason {
  margin-top: 1rem;
}

.customer-ledger-table {
  min-width: 56rem;
}

@media (max-width: 640px) {
  .customer-form-grid,
  .customer-editor-layout,
  .customer-detail-grid,
  .customer-account-metrics,
  .customer-account-adjust-grid {
    grid-template-columns: 1fr;
  }

  .customer-form-span,
  .customer-password-section,
  .customer-form-actions {
    grid-column: auto;
  }

  .customer-form-actions,
  .customer-pagination,
  .customer-context-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .customer-form-actions .btn,
  .customer-pagination .btn,
  .customer-context-card .btn {
    width: 100%;
  }

  .customer-account-heading {
    display: none;
  }

  .customer-account-adjust-grid label {
    margin-top: 0.5rem;
    font-weight: 600;
  }
}

.catalog-feedback.is-success {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #166534;
}

.catalog-feedback.is-error,
.catalog-validation-summary {
  border-color: #fecaca;
  background: #fef2f2;
  color: #991b1b;
}

.catalog-readonly-notice {
  border-color: #fde68a;
  background: #fffbeb;
  color: #92400e;
}

.catalog-validation-summary ul {
  margin: 0.5rem 0 0;
}

.catalog-panel-body {
  padding: 1.25rem;
}

.category-workspace {
  display: grid;
  grid-template-columns: minmax(15rem, 19rem) minmax(0, 1fr);
  gap: 1rem;
}

.category-tree-panel,
.category-editor-panel {
  min-width: 0;
}

.category-tree {
  display: grid;
  max-height: 42rem;
  overflow: auto;
  padding: 0.55rem;
}

.category-tree a {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.4rem;
  padding: 0.45rem 0.6rem 0.45rem calc(0.6rem + var(--category-depth, 0) * 1.1rem);
  border-radius: 0.35rem;
  color: #334155;
}

.category-tree a:hover,
.category-tree a:focus-visible {
  background: #f1f5f9;
}

.category-tree a.is-selected {
  background: #e0f2fe;
  color: #075985;
  font-weight: 700;
}

.catalog-field,
.catalog-editor-form {
  display: grid;
  gap: 0.45rem;
}

.catalog-field > label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #334155;
}

.catalog-field small,
.catalog-help-text,
.catalog-muted {
  color: #64748b;
  font-size: 0.78rem;
}

.catalog-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.catalog-field-wide {
  grid-column: span 2;
}

.catalog-form-actions,
.catalog-row-actions,
.catalog-pagination,
.catalog-editor-nav,
.brand-filter-form,
.brand-region-add-form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.catalog-form-actions {
  margin-top: 1rem;
}

.catalog-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.catalog-facts div {
  padding: 0.85rem;
  border: 1px solid var(--app-border);
  border-radius: 0.4rem;
}

.catalog-facts dt {
  color: #64748b;
  font-size: 0.78rem;
}

.catalog-facts dd {
  margin: 0.3rem 0 0;
  font-weight: 700;
}

.catalog-danger-zone {
  position: relative;
  margin-top: 1rem;
}

.catalog-danger-zone > summary {
  list-style: none;
  cursor: pointer;
}

.catalog-danger-zone > summary::-webkit-details-marker {
  display: none;
}

.catalog-danger-zone > form {
  width: min(32rem, 100%);
  margin-top: 0.65rem;
  padding: 0.9rem;
  border: 1px solid #fecaca;
  border-radius: 0.45rem;
  background: #fff7f7;
}

.catalog-danger-zone p {
  margin: 0 0 0.75rem;
}

.catalog-row-confirm {
  margin: 0;
}

.catalog-row-confirm > form {
  position: absolute;
  z-index: 5;
  right: 0;
  width: 18rem;
  background: #fff;
  box-shadow: 0 0.75rem 2rem rgb(15 23 42 / 18%);
}

.brand-filter-form {
  align-items: end;
}

.brand-keyword-field {
  flex: 1 1 22rem;
}

.catalog-result-panel,
.catalog-editor-section {
  margin-top: 1rem;
}

.catalog-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.brand-table {
  min-width: 66rem;
  margin: 0;
}

.brand-region-table {
  min-width: 42rem;
  margin: 0;
}

.brand-logo-thumbnail {
  width: 4rem;
  height: 2.5rem;
  border: 1px solid var(--app-border);
  border-radius: 0.3rem;
  object-fit: contain;
  background: #fff;
}

.brand-description-cell {
  display: -webkit-box;
  max-width: 18rem;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.catalog-number-cell {
  text-align: right;
  white-space: nowrap;
}

.catalog-pagination {
  justify-content: center;
  padding: 1rem;
}

.catalog-editor-nav {
  position: sticky;
  z-index: 3;
  top: 0;
  overflow-x: auto;
  padding: 0.65rem;
  border: 1px solid var(--app-border);
  border-radius: 0.45rem;
  background: rgb(255 255 255 / 96%);
}

.catalog-editor-nav a {
  padding: 0.45rem 0.75rem;
  white-space: nowrap;
  font-weight: 700;
}

.catalog-editor-form fieldset {
  min-width: 0;
  padding: 0;
  border: 0;
}

.catalog-editor-form.is-readonly fieldset:disabled {
  opacity: 1;
}

.catalog-editor-form.is-readonly input,
.catalog-editor-form.is-readonly textarea {
  color: #475569;
  background: #f8fafc;
}

.brand-logo-section,
.brand-logo-form {
  display: grid;
  justify-items: start;
  gap: 1rem;
}

.brand-logo-preview {
  max-width: min(20rem, 100%);
  max-height: 10rem;
  border: 1px solid var(--app-border);
  border-radius: 0.4rem;
  object-fit: contain;
  background: #fff;
}

.brand-region-add-form {
  align-items: end;
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid var(--app-border);
  border-radius: 0.45rem;
  background: #f8fafc;
}

.brand-region-add-form .catalog-field {
  flex: 1 1 10rem;
}

.brand-region-table .form-control {
  min-width: 9rem;
}

@media (max-width: 860px) {
  .category-workspace {
    grid-template-columns: 1fr;
  }

  .category-tree {
    max-height: 20rem;
  }
}

@media (max-width: 720px) {
  .catalog-field-grid,
  .catalog-facts {
    grid-template-columns: 1fr;
  }

  .catalog-field-wide {
    grid-column: auto;
  }

  .catalog-form-actions,
  .brand-filter-form,
  .brand-region-add-form {
    align-items: stretch;
    flex-direction: column;
  }

  .catalog-form-actions .btn,
  .brand-filter-form .btn,
  .brand-region-add-form .btn,
  .brand-filter-form .catalog-field,
  .brand-region-add-form .catalog-field {
    width: 100%;
  }

  .catalog-row-confirm > form {
    position: static;
    width: min(100%, 20rem);
  }
}

@media (max-width: 720px) {
  .excel-task-actions,
  .app-dialog-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .excel-task-actions .btn,
  .excel-task-actions form,
  .excel-task-actions form .btn,
  .app-dialog-footer .btn {
    width: 100%;
  }

  .excel-task-facts {
    grid-template-columns: 1fr;
  }
}

.content-feedback,
.content-readonly-notice,
.content-empty-state {
  margin-bottom: 1rem;
  padding: .85rem 1rem;
  border-radius: var(--tblr-border-radius);
}

.content-feedback.is-error {
  border: 1px solid rgba(214, 57, 57, .35);
  background: rgba(214, 57, 57, .08);
  color: var(--tblr-danger);
}

.content-feedback.is-success {
  border: 1px solid rgba(47, 179, 68, .35);
  background: rgba(47, 179, 68, .08);
  color: var(--tblr-success);
}

.content-readonly-notice,
.content-empty-state {
  color: var(--tblr-secondary-color);
  background: var(--tblr-bg-surface-secondary);
}

.content-filter-card,
.content-section-nav {
  margin-bottom: 1rem;
}

.content-filter-grid,
.content-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  align-items: end;
}

.content-wide {
  grid-column: span 2;
}

.content-actions,
.content-row-actions,
.content-section-nav,
.content-list-heading {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

.content-list-heading {
  justify-content: space-between;
}

.content-pagination,
.content-pagination > div {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

.content-pagination {
  justify-content: space-between;
  margin-top: 1rem;
}

.content-table {
  min-width: 52rem;
}

.content-section-nav {
  position: sticky;
  z-index: 4;
  top: 0;
  overflow-x: auto;
  padding: .75rem;
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  background: var(--tblr-bg-surface);
}

.content-section-nav a {
  white-space: nowrap;
}

.content-description-list {
  display: grid;
  grid-template-columns: minmax(6rem, 9rem) minmax(0, 1fr);
  gap: .6rem 1rem;
  margin: 0;
}

.content-description-list dt {
  color: var(--tblr-secondary-color);
  font-weight: 600;
}

.content-description-list dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.content-field-help {
  color: var(--tblr-secondary-color);
}

.content-child-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: .75rem 0;
  border-bottom: 1px solid var(--tblr-border-color);
}

.content-child-row > :first-child {
  min-width: min(100%, 18rem);
  flex: 1;
}

.content-child-row form,
.content-inline-editor {
  display: grid;
  gap: .75rem;
  min-width: min(22rem, calc(100vw - 3rem));
  margin-top: .75rem;
}

.content-row-actions form {
  margin: 0;
}

@media (max-width: 640px) {
  .content-filter-grid,
  .content-form-grid,
  .content-description-list {
    grid-template-columns: 1fr;
  }

  .content-wide {
    grid-column: auto;
  }

  .content-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .content-actions .btn,
  .content-section-nav a {
    min-height: 44px;
  }

  .content-child-row {
    align-items: stretch;
    flex-direction: column;
  }

  .content-pagination,
  .content-pagination > div {
    align-items: stretch;
    flex-direction: column;
    width: 100%;
  }
}
.tox.tox-tinymce {
  border-color: var(--tblr-border-color, #d7ddea);
  border-radius: 0.5rem;
  box-shadow: none;
}

.tox.tox-tinymce:focus-within {
  border-color: var(--tblr-primary, #206bc4);
  box-shadow: 0 0 0 0.2rem rgba(32, 107, 196, 0.12);
}

.tox .tox-statusbar {
  color: var(--tblr-secondary, #626976);
}