/* =============================================================================
   OrganicSystem — UI-1.11 Forms / Cards / Panels Standardization
   Shared Light/Dark surface theme for forms, cards, panels, sections, fieldsets,
   content panels, summary/dashboard cards. Consumes --os-* tokens only.

   SCOPE (paint only — preserve structure / behavior / layout):
   - Cards: .card, .os-form-card, card-header/body/footer/title
   - Panels: module/prs group panels, plan/rotation panels, image panels
   - Sections: .os-section, .os-desktop-section-title, form section titles
   - Fieldsets: fieldset, .os-fieldset, .login-group, .os-form-section
   - Content panels: .prs-content-panel, .aps-*-content-panel
   - Dashboard / summary cards: .os-erp-dashboard-card*
   - Workflow panel surface: .os-erp-workflow (status chips keep semantics)

   OUT OF SCOPE (do not restyle):
   - Form controls / inputs (UI-1.3 os-form-controls-theme.css)
   - Buttons (UI-1.2)
   - Dropdowns / DX editors (UI-1.4 / UI-1.6)
   - DataGrid internals (UI-1.7)
   - HTML table cells (UI-1.8)

   Load AFTER os-theme-apply.css so surface tokens win without fighting inputs.
   ============================================================================= */

/* ---- Shared surface tokens (aliases over Theme Engine) ---- */
:root,
html[data-theme="light"],
html[data-theme="dark"],
body[data-theme="light"],
body[data-theme="dark"] {
  --os-surface-card-bg: var(--os-color-card, var(--os-color-surface));
  --os-surface-panel-bg: var(--os-color-panel, var(--os-color-surface));
  --os-surface-section-bg: var(--os-section-bg, var(--os-color-surface));
  --os-surface-section-header-bg: var(--os-section-header-bg, var(--os-color-section-header));
  --os-surface-section-header-text: var(--os-section-header-text, var(--os-color-section-title-text));
  --os-surface-border: var(--os-section-border, var(--os-color-border));
  --os-surface-shadow: var(--os-section-shadow, var(--os-color-shadow));
  --os-surface-radius: var(--os-section-radius, 0.5rem);
  --os-surface-title-text: var(--os-color-text);
  --os-surface-muted-text: var(--os-color-text-muted);
  --os-surface-label-text: var(--os-color-form-label-text, var(--os-color-text));
  --os-surface-icon: var(--os-color-icon-muted, var(--os-color-text-muted));
}

/* ---- Cards ---- */
body.os-app-body .card:not(.mk-page .card),
.os-form-card,
.card.os-form-card {
  background-color: var(--os-surface-card-bg) !important;
  color: var(--os-color-text) !important;
  border-color: var(--os-surface-border) !important;
  box-shadow: var(--os-surface-shadow);
}

.card > .card-header,
.os-form-card > .card-header,
.card > .card-footer,
.os-form-card > .card-footer {
  background: var(--os-surface-section-header-bg) !important;
  color: var(--os-surface-section-header-text) !important;
  border-color: var(--os-surface-border) !important;
}

.card > .card-body,
.os-form-card > .card-body,
.module-section-panel .card-body {
  background-color: var(--os-surface-card-bg) !important;
  color: var(--os-color-text) !important;
}

.card-title,
.card-subtitle,
.card .card-header .card-title {
  color: var(--os-surface-title-text) !important;
}

.card .bi,
.card [class^="bi-"],
.card [class*=" bi-"],
.os-form-card .bi,
.os-section__header-icon {
  color: var(--os-surface-icon);
}

/* ---- Panels (hub / plan / rotation / image) ---- */
.module-main-group-panel,
.prs-group-panel,
.module-section-panel,
.plan-grid-panel,
.rotation-panel,
.os-desktop-image-panel,
.aps-site-image-panel,
.aps-consultant-signature-panel,
.module-main-section,
.prs-ribbon-section {
  background-color: var(--os-surface-panel-bg) !important;
  color: var(--os-color-text) !important;
  border-color: var(--os-surface-border) !important;
}

.module-main-group-panel-title,
.prs-group-panel-title,
.module-main-section-title,
.prs-ribbon-section-title,
.module-section-title,
.module-main-section-panel-title,
.plan-grid-panel-title,
.rotation-panel-title,
.os-panel-title,
.payment-section-title {
  color: var(--os-surface-title-text) !important;
}

.plan-grid-panel-title,
.rotation-panel-title {
  background: var(--os-surface-section-header-bg) !important;
  color: var(--os-surface-section-header-text) !important;
  border-color: var(--os-surface-border) !important;
}

/* ---- Sections ---- */
.os-section,
os-section {
  background-color: var(--os-surface-section-bg) !important;
  color: var(--os-color-text) !important;
  border-color: var(--os-surface-border) !important;
  box-shadow: var(--os-surface-shadow);
}

.os-section__header,
.os-desktop-section-title,
.aps-site-section-title,
.os-form-section-title,
.os-section-title {
  background: var(--os-surface-section-header-bg) !important;
  color: var(--os-surface-section-header-text) !important;
  border-color: var(--os-surface-border) !important;
}

.os-section__body,
.os-section__title {
  color: inherit;
}

.os-section__body {
  background: var(--os-surface-section-bg) !important;
}

/* Section body siblings under legacy title bars */
.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 + .row,
.aps-site-section-title + .row {
  background: var(--os-surface-section-bg) !important;
  border-color: var(--os-surface-border) !important;
  color: var(--os-color-text);
}

/* ---- Fieldsets / form section groups ---- */
fieldset:not(.dx-fieldset),
.os-fieldset,
.os-form-section,
.login-group {
  background-color: var(--os-color-surface-muted, var(--os-surface-section-bg)) !important;
  color: var(--os-color-text) !important;
  border-color: var(--os-surface-border) !important;
}

fieldset:not(.dx-fieldset) > legend,
.os-fieldset > legend,
.os-form-section > legend,
.login-group legend {
  color: var(--os-surface-muted-text) !important;
  background: transparent;
}

/* ERP form page chrome (surface only — not inputs) */
.os-erp-form-page .os-desktop-page-header,
.os-erp-form-page .os-page-sticky-chrome,
form.os-erp-form,
form[data-os-erp-form="on"] {
  color: var(--os-color-text);
}

.os-erp-form-page .os-desktop-page-header,
.os-erp-form-page .os-page-sticky-chrome {
  background: var(--os-surface-card-bg) !important;
  border-color: var(--os-surface-border);
}

/* Form labels on form/card/panel surfaces (UI-1.3 owns control chrome) */
.card label,
.card .form-label,
.card .col-form-label,
.os-form-card label,
.os-form-card .form-label,
.os-section label,
.os-section .form-label,
.module-section-panel label,
.module-section-panel .form-label,
.prs-content-panel label,
.prs-content-panel .form-label,
.os-desktop-form .form-label,
.os-desktop-form label.form-label,
fieldset:not(.dx-fieldset) label,
.login-group label {
  color: var(--os-surface-label-text) !important;
}

/* ---- Content panels (layout containers — text + optional surface inherit) ---- */
.prs-content-panel,
.aps-qcap-content-panel,
.aps-laboratory-content-panel,
[class*="-content-panel"] {
  color: var(--os-color-text);
}

/* When a content panel also carries card/panel chrome classes, surface tokens apply via card/panel rules. */

/* ---- Dashboard / summary cards ---- */
.os-erp-dashboard-card,
.os-erp-dashboard-card--kpi {
  background: var(--os-hub-panel-bg, var(--os-surface-card-bg)) !important;
  color: var(--os-color-text) !important;
  border-color: var(--os-hub-panel-border, var(--os-surface-border)) !important;
  box-shadow: var(--os-hub-panel-shadow, var(--os-surface-shadow));
}

.os-erp-dashboard-card h3,
.os-erp-dashboard-card-value,
.os-erp-dashboard-title,
.os-erp-dashboard-stat strong {
  color: var(--os-hub-title, var(--os-surface-title-text)) !important;
}

.os-erp-dashboard-card-label,
.os-erp-dashboard-kicker,
.os-erp-dashboard-context,
.os-erp-dashboard-theme-hint,
.os-erp-dashboard-meta,
.os-erp-dashboard-empty,
.os-erp-dashboard-card-hint,
.os-erp-dashboard-stat span {
  color: var(--os-hub-muted, var(--os-surface-muted-text)) !important;
}

.os-erp-dashboard-card--kpi {
  border-inline-start-color: var(--os-hub-accent-bar, var(--os-color-primary));
}

.os-erp-dashboard-card--kpi.is-warn {
  border-inline-start-color: var(--os-color-warning);
}

.os-erp-dashboard-card--kpi.is-info {
  border-inline-start-color: var(--os-color-info);
}

.os-erp-dashboard-activity-live {
  border-top-color: var(--os-hub-header-border, var(--os-surface-border)) !important;
}

/* ---- Workflow panel surface (status chips keep semantic colors) ---- */
.os-erp-workflow {
  background: var(--os-surface-card-bg) !important;
  color: var(--os-color-text) !important;
  border-color: var(--os-surface-border) !important;
  box-shadow: var(--os-surface-shadow);
}

.os-erp-workflow-title {
  color: var(--os-surface-title-text) !important;
}

.os-erp-workflow-kicker,
.os-erp-workflow-section h3,
.os-erp-workflow-empty {
  color: var(--os-surface-muted-text) !important;
}

.os-erp-workflow-section {
  border-top-color: var(--os-surface-border) !important;
}

.os-erp-workflow-list,
.os-erp-workflow-history {
  color: var(--os-color-text) !important;
}

/* ---- Accordion / list group as panel surfaces ---- */
.accordion-item,
.list-group-item {
  background-color: var(--os-surface-card-bg) !important;
  color: var(--os-color-text) !important;
  border-color: var(--os-surface-border) !important;
}

.accordion-button {
  background-color: var(--os-surface-section-header-bg) !important;
  color: var(--os-surface-section-header-text) !important;
}

.accordion-button:not(.collapsed) {
  background-color: var(--os-surface-section-header-bg) !important;
  color: var(--os-surface-section-header-text) !important;
  box-shadow: none;
}

.accordion-body {
  background-color: var(--os-surface-card-bg) !important;
  color: var(--os-color-text) !important;
}