/* =============================================================================
   Organic System — Enterprise Section Container
   Unifies section headers + content into theme-aware bordered groups.
   Applies to existing .os-desktop-section-title patterns and <os-section>.
   ============================================================================= */

:root,
html {
  --os-section-border: var(--os-color-border, #c8c8c8);
  --os-section-bg: var(--os-color-surface);
  --os-section-header-bg: var(--os-color-section-title-bg, #eef1f4);
  --os-section-header-text: var(--os-color-section-title-text, var(--os-color-text, #1e293b));
  --os-section-radius: 0.5rem;
  --os-section-gap: 0.85rem;
  --os-section-header-height: var(--os-section-title-height, 1.65rem);
  --os-section-header-pad-x: 0.75rem;
  --os-section-body-pad: 0.75rem;
  --os-section-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* —— Explicit reusable component (<os-section> / .os-section) —— */
.os-section {
  display: flex;
  flex-direction: column;
  margin-top: var(--os-section-gap);
  border: 1px solid var(--os-section-border);
  border-radius: var(--os-section-radius);
  background: var(--os-section-bg);
  box-shadow: var(--os-section-shadow);
  overflow: hidden;
  min-width: 0;
}

.os-section:first-child,
.os-section.os-section--flush-top {
  margin-top: 0;
}

.os-section__header {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  box-sizing: border-box;
  min-height: var(--os-section-header-height);
  height: var(--os-section-header-height);
  padding: 0 var(--os-section-header-pad-x);
  margin: 0;
  border-bottom: 1px solid var(--os-section-border);
  background: var(--os-section-header-bg);
  color: var(--os-section-header-text);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
}

.os-section__header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  line-height: 1;
  opacity: 0.9;
}

.os-section__title {
  margin: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

.os-section__body {
  min-width: 0;
  background: var(--os-section-bg);
}

.os-section__body--padded {
  padding: var(--os-section-body-pad);
}

.os-section__body > .os-desktop-form-table,
.os-section__body > .aps-site-table,
.os-section__body > table {
  border: none;
  border-radius: 0;
  margin: 0;
  box-shadow: none;
}

.os-section__body > .os-desktop-form-table tr:first-child > *,
.os-section__body > .aps-site-table tr:first-child > * {
  border-top: none;
}

/* —— Legacy title bars → enterprise section chrome (all pages) —— */
.os-desktop-section-title,
.aps-site-section-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  box-sizing: border-box;
  height: var(--os-section-header-height);
  min-height: var(--os-section-header-height);
  margin-top: var(--os-section-gap);
  margin-bottom: 0;
  padding: 0 var(--os-section-header-pad-x);
  border: 1px solid var(--os-section-border);
  border-bottom-color: var(--os-section-border);
  border-radius: 0;
  background: var(--os-section-header-bg);
  color: var(--os-section-header-text);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
  box-shadow: var(--os-section-shadow);
}

.os-desktop-section-title:first-child,
.aps-site-section-title:first-child,
.os-desktop-form > .os-desktop-section-title:first-child,
.os-desktop-form > .aps-site-section-title:first-child,
.os-page-scroll > .os-desktop-section-title:first-child {
  margin-top: 0;
}

/* Content immediately under a section title becomes the body of the container */
.os-desktop-section-title + .os-desktop-form-table,
.os-desktop-section-title + .aps-site-table,
.aps-site-section-title + .os-desktop-form-table,
.aps-site-section-title + .aps-site-table,
.os-desktop-section-title + .table-responsive,
.aps-site-section-title + .table-responsive,
.os-desktop-section-title + .os-erp-data-table-host,
.aps-site-section-title + .os-erp-data-table-host,
.os-desktop-section-title + .os-section-stack,
.aps-site-section-title + .os-section-stack,
.os-desktop-section-title + .row,
.aps-site-section-title + .row,
.os-desktop-section-title + .ags-export-invoice-header-grid,
.os-desktop-section-title + .ags-export-invoice-list-panel,
.os-desktop-section-title + .ags-export-invoice-details-panel,
.os-desktop-section-title + .ags-export-invoice-footer-fields,
.os-desktop-section-title + .prs-export-order-header-grid,
.os-desktop-section-title + .prs-ro-layout,
.os-desktop-section-title + [id$="-grid"],
.os-desktop-section-title + [id$="-panel"],
.os-desktop-section-title + .dx-widget,
.os-desktop-section-title + textarea,
.aps-site-section-title + textarea {
  border: 1px solid var(--os-section-border);
  border-top: none;
  border-radius: 0;
  background: var(--os-section-bg);
  box-shadow: var(--os-section-shadow);
  margin-top: 0;
}

.os-desktop-section-title + .row,
.aps-site-section-title + .row,
.os-desktop-section-title + .table-responsive,
.aps-site-section-title + .table-responsive,
.os-desktop-section-title + .os-erp-data-table-host,
.aps-site-section-title + .os-erp-data-table-host,
.os-desktop-section-title + .ags-export-invoice-header-grid,
.os-desktop-section-title + .ags-export-invoice-list-panel,
.os-desktop-section-title + .ags-export-invoice-details-panel,
.os-desktop-section-title + .ags-export-invoice-footer-fields,
.os-desktop-section-title + .prs-export-order-header-grid,
.os-desktop-section-title + .prs-ro-layout,
.os-desktop-section-title + [id$="-grid"],
.os-desktop-section-title + [id$="-panel"],
.os-desktop-section-title + textarea,
.aps-site-section-title + textarea {
  padding: var(--os-section-body-pad);
}

.os-desktop-section-title + .os-desktop-form-table,
.os-desktop-section-title + .aps-site-table,
.aps-site-section-title + .os-desktop-form-table,
.aps-site-section-title + .aps-site-table,
.os-desktop-section-title + .os-section-stack,
.aps-site-section-title + .os-section-stack {
  padding: 0;
  background: var(--os-section-bg);
}

.os-section-stack {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: visible;
}

.os-section-stack > .table-responsive,
.os-section-stack > .os-erp-data-table-host {
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  max-height: var(--os-table-scroll-max-height);
  overflow-x: auto;
  overflow-y: auto;
}

.os-section-stack > .os-inline-add-form,
.os-section-stack > form {
  margin-bottom: 0;
}

/* Image / signature / stamp panels */
.os-desktop-image-panel,
.aps-site-image-panel,
.aps-consultant-signature-panel {
  border: 1px solid var(--os-section-border);
  border-radius: var(--os-section-radius);
  background: var(--os-section-bg);
  box-shadow: var(--os-section-shadow);
  overflow: hidden;
}

.os-desktop-image-panel .os-desktop-section-title,
.os-desktop-image-panel .aps-site-section-title,
.aps-site-image-panel .aps-site-section-title,
.aps-consultant-signature-panel .aps-site-section-title,
.aps-consultant-signature-panel .os-desktop-section-title {
  margin-top: 0;
  border: none;
  border-bottom: 1px solid var(--os-section-border);
  border-radius: 0;
  box-shadow: none;
}

.os-desktop-image-panel .aps-site-image-frame,
.aps-site-image-panel .aps-site-image-frame,
.aps-consultant-signature-panel .aps-site-image-frame {
  border: none;
  border-radius: 0;
  background: var(--os-section-bg);
}

/* Module hub ribbon sections */
.module-main-section,
.prs-ribbon-section {
  border: 1px solid var(--os-section-border);
  border-radius: var(--os-section-radius);
  background: var(--os-section-bg);
  box-shadow: var(--os-section-shadow);
}

.module-main-section-title,
.prs-ribbon-section-title {
  color: var(--os-section-header-text);
}

/* App cards align with section language */
body.os-app-body .card:not(.mk-page .card) {
  border: 1px solid var(--os-section-border);
  border-radius: var(--os-section-radius);
  background: var(--os-section-bg);
  box-shadow: var(--os-section-shadow);
}

body.os-app-body .card-header {
  background: var(--os-section-header-bg);
  color: var(--os-section-header-text);
  border-bottom: 1px solid var(--os-section-border);
}

/* QCAP / nested certificate bars stay consistent */
.aps-qcap-certificate-section {
  border-radius: var(--os-section-radius) var(--os-section-radius) 0 0;
}

/* Title + actions: one responsive row for landscape and portrait */
.os-desktop-section-title.os-section-title--with-actions,
.os-section__header.os-title-actions-row {
  height: auto;
  min-height: var(--os-section-header-height);
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 0.65rem;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}

.os-section-title__label {
  min-width: 0;
}

.os-section-title__actions,
.os-section__header .os-section-title__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  flex: 1 1 auto;
  min-width: 0;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 500;
  font-size: 0.8125rem;
}

.os-section-title__actions .btn,
.os-section__header .os-section-title__actions .btn {
  text-transform: none;
  letter-spacing: normal;
  font-weight: 500;
}