/* 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;
}

/* Back-office (ນອກຈາກ POS): ຫວ່າງແບບພໍດີ ບໍ່ແໜ້ນຄື 4px — ກາດ/ຕາຕະລາງອ່ານງ່າຍຂຶ້ນ.
   POS (#posWorkspace) ແລະ ໜ້າເວັບລູກຄ້າ (base.html) ຍັງໃຊ້ 4px ຄືເກົ່າ. */
.admin-shell #main-content:not(:has(#posWorkspace)) {
  --comfy-1: 8px; --comfy-2: 12px; --comfy-3: 16px; --comfy-4: 20px;
}
.admin-shell #main-content:not(:has(#posWorkspace)) :is(section:not(.grid):not(.flex), article:not(.grid):not(.flex),
  .wh-kpi, .wh-overview-card, .wh-inventory__header, .wh-filters,
  .wh-dialog, .wh-dialog__body, .bo-card-body, .bo-card-visual, .feat, .mod, .cat) {
  padding: var(--comfy-3) !important;
}
.admin-shell #main-content:not(:has(#posWorkspace)) :is(header, .wh-message,
  .wh-form-error, .wh-result-meta, .wh-pagination, .wh-inline-row, .prod-body) {
  padding: var(--comfy-1) var(--comfy-2) !important;
}
.admin-shell #main-content:not(:has(#posWorkspace)) form:not(.acc-filters) { padding: 0 !important; }
.admin-shell #main-content:not(:has(#posWorkspace)) form.wh-edit-form { padding: var(--comfy-3) !important; }
.admin-shell #main-content:not(:has(#posWorkspace)) :is(th, td) { padding: 10px 12px !important; }
.admin-shell #main-content:not(:has(#posWorkspace)) :is(.p-2) { padding: var(--comfy-1) !important; }
.admin-shell #main-content:not(:has(#posWorkspace)) :is(.p-3) { padding: var(--comfy-2) !important; }
.admin-shell #main-content:not(:has(#posWorkspace)) :is(.p-4, .p-5, .p-6, .p-8, .p-10, .p-12) { padding: var(--comfy-4) !important; }
.admin-shell #main-content:not(:has(#posWorkspace)) :is(.px-2) { padding-left: var(--comfy-1) !important; padding-right: var(--comfy-1) !important; }
.admin-shell #main-content:not(:has(#posWorkspace)) :is(.px-3) { padding-left: var(--comfy-2) !important; padding-right: var(--comfy-2) !important; }
.admin-shell #main-content:not(:has(#posWorkspace)) :is(.px-4, .px-5, .px-6, .px-8, .px-10, .px-12) { padding-left: var(--comfy-3) !important; padding-right: var(--comfy-3) !important; }
.admin-shell #main-content:not(:has(#posWorkspace)) :is(.py-2) { padding-top: var(--comfy-1) !important; padding-bottom: var(--comfy-1) !important; }
.admin-shell #main-content:not(:has(#posWorkspace)) :is(.py-3, .py-4, .py-5, .py-6, .py-8, .py-10, .py-12) { padding-top: var(--comfy-2) !important; padding-bottom: var(--comfy-2) !important; }
.admin-shell #main-content:not(:has(#posWorkspace)) .wh-header { gap: 16px; margin-bottom: 18px; }
.admin-shell #main-content:not(:has(#posWorkspace)) :is(.wh-kpi-grid, .wh-overview-grid) { gap: 14px; margin-bottom: 18px; }
.admin-shell #main-content:not(:has(#posWorkspace)) :is(.wh-edit-media, .wh-edit-fields, .wh-field-row,
  .wh-edit-fields--grid, .wh-inline__rows) { gap: 14px; }
.admin-shell #main-content:not(:has(#posWorkspace)) .wh-page { padding: var(--comfy-3) !important; }
@media (max-width: 639.98px) {
  .admin-shell #main-content:not(:has(#posWorkspace)) { --comfy-3: 12px; --comfy-4: 14px; }
  .admin-shell #main-content:not(:has(#posWorkspace)) .wh-page { padding: var(--comfy-2) !important; }
}