/* Shared compact spacing, loaded after page styles in both base layouts.
   Keep control heights and space for search icons/native select arrows. */
:root { --compact-padding: 4px; }

#main-content :is(section, article, header, form, .wrap,
  .wh-kpi, .wh-overview-card, .wh-message, .wh-form-error,
  .wh-inventory__header, .wh-filters, .wh-result-meta, .wh-pagination,
  .wh-dialog, .wh-dialog__body, .wh-inline-row,
  .bo-card-body, .bo-card-visual, .prod-body, .feat, .mod, .cat) {
  padding: var(--compact-padding) !important;
}

/* Full-width page/form containers; retain text, table and dialog limits. */
#main-content > :is(div, section),
#main-content .wrap,
#main-content .wh-page,
#main-content .wh-edit-form,
#main-content form:not([role="search"]) {
  max-width: none;
}

#main-content :is(th, td) { padding: 4px 6px !important; }
#main-content textarea { padding: 4px 6px !important; }
#main-content .wh-field :is(input, select) {
  padding: 4px 6px;
}
#main-content :is(.wh-btn-ghost, .wh-btn-primary, .wh-btn-danger) {
  padding-left: 6px;
  padding-right: 6px;
}
#main-content .wh-edit-form { padding: 4px !important; }
#main-content .wh-header { gap: 8px; margin-bottom: 8px; }
#main-content :is(.wh-kpi-grid, .wh-overview-grid) {
  gap: 8px;
  margin-bottom: 8px;
}
#main-content :is(.wh-edit-media, .wh-edit-fields, .wh-field-row,
  .wh-edit-fields--grid, .wh-inline__rows) { gap: 8px; }
#main-content .wh-edit-actions { padding-top: 4px; margin-top: 8px; }

/* Backoffice landing cards share the same spacing as management pages. */
#main-content .bo-page .wrap { padding: 0 !important; }
#main-content :is(.bo-card-banner, .bo-enter, .bento-card,
  .bo-category-badge, .bo-tag) { padding: 4px !important; }
#main-content .bo-header { gap: 8px; margin-bottom: 8px; }
#main-content :is(.bo-grid, .bo-bento) { gap: 8px; margin-bottom: 8px; }
#main-content :is(.bo-card-top, .bo-card p) { margin-bottom: 8px; }

/* Cap utility padding on page content and sidebar without changing p-0.
   Axis rules stay separate so positioning and icon offsets still work. */
:is(#main-content, #dashboardSidebar) :is(
  .p-2, .p-3, .p-4, .p-5, .p-6, .p-8, .p-10, .p-12) {
  padding: 4px !important;
}
:is(#main-content, #dashboardSidebar) :is(
  .px-2, .px-3, .px-4, .px-5, .px-6, .px-8, .px-10, .px-12) {
  padding-left: 4px !important;
  padding-right: 4px !important;
}
:is(#main-content, #dashboardSidebar) :is(
  .py-2, .py-3, .py-4, .py-5, .py-6, .py-8, .py-10, .py-12) {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}