/* ============================================================
   CFA MAIN PLATFORM — NORMALIZATION LAYER
   Scope: body.cfa-app ONLY (layout.phtml + noheaderfooterlayout.phtml)
   Admin uses body.admin-app and does NOT load this file.

   Purpose: align legacy designer.css / shared patterns with design tokens
   without editing hundreds of per-page templates. Loaded after
   cfa-global.css so these rules win on specificity.
   ============================================================ */

/* ── 1. Shell / canvas ──
   Wins over designer.css body { background-color: #ecf0f2 !important; } */
body.cfa-app {
  color: var(--cfa-text) !important;
  background-color: var(--cfa-bg-soft) !important;
}

/* Primary content column in the main layout (layout.phtml) */
body.cfa-app .container > .content_wrapper-iom {
  padding-top: var(--cfa-space-10);
  padding-bottom: var(--cfa-space-8);
}

/* Home page — page contains .cfa-cta-strip (hero section) */
body.cfa-app:has(.cfa-cta-strip) .container > .content_wrapper-iom {
  padding: 0;
}

/* ── 2. Page / flow wrappers (non-admin routes) ──
   Many views nest .content_wrapper inside .content_wrapper-iom. */
body.cfa-app .content_wrapper {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

/* Horizontal rhythm for long-form flows that don’t use .formbg cards */
body.cfa-app .content_wrapper > .container,
body.cfa-app .content_wrapper > .row {
  box-sizing: border-box;
}

@media (max-width: 767px) {
  body.cfa-app .content_wrapper {
    padding-left: var(--cfa-space-2);
    padding-right: var(--cfa-space-2);
  }
}

/* ── 3. Member / account surfaces (market, profile, role-specific dashboards) ──
   designer.css hard-codes #eee / #cfcfcf / #383838 — map to tokens. */
body.cfa-app .myaccount_content_wrapper {
  background: var(--cfa-bg) !important;
  border-color: var(--cfa-border) !important;
}

body.cfa-app .mrmyaccount_content_wrapper .myaccount_content {
  border-color: var(--cfa-border) !important;
}

body.cfa-app .mrmyaccount_content_wrapper .mmyprofile_row {
  background: var(--cfa-bg) !important;
}

body.cfa-app .mrmyaccount_content_wrapper .myprofile_info,
body.cfa-app .mrmyaccount_content_wrapper .myprofile_buttons,
body.cfa-app .mrmyaccount_content_wrapper .myprofile_become_inv {
  background-color: var(--cfa-bg-soft) !important;
  border-color: var(--cfa-border) !important;
}

body.cfa-app .mrmyaccount_content_wrapper .myaccount_content_title {
  color: var(--cfa-text) !important;
  font-size: var(--cfa-text-lg) !important;
  font-weight: var(--cfa-weight-semibold) !important;
}

body.cfa-app .mrmyaccount_content_wrapper .myprofile_notif {
  color: var(--cfa-text-mid) !important;
  background-color: var(--cfa-bg-soft) !important;
  border-color: var(--cfa-border) !important;
  font-size: var(--cfa-text-xs) !important;
}

/* ── 4. Forms — legacy label row pattern (company/pitch/token flows) ── */
body.cfa-app .form_input_label,
body.cfa-app span.form_input_label {
  color: var(--cfa-text) !important;
  font-size: var(--cfa-text-sm) !important;
  font-weight: var(--cfa-weight-semibold) !important;
  font-family: var(--cfa-font-body) !important;
}

body.cfa-app .form_input_label_edit {
  color: var(--cfa-text-mid) !important;
  font-family: var(--cfa-font-body) !important;
}

body.cfa-app .input_field {
  font-family: var(--cfa-font-body);
}

/* ── 5. Tables — Bootstrap / bootstrap-table inside main app ── */
body.cfa-app .table > thead > tr > th {
  font-family: var(--cfa-font-body);
  color: var(--cfa-text-mid);
  border-bottom-color: var(--cfa-border-strong);
}

body.cfa-app .table > tbody > tr > td {
  font-family: var(--cfa-font-body);
  color: var(--cfa-text);
  border-top-color: var(--cfa-border);
}

body.cfa-app .fixed-table-container {
  border-color: var(--cfa-border);
}

/* ── 6. Panels / wells (legacy Bootstrap 3) ── */
body.cfa-app .well {
  background-color: var(--cfa-bg-soft);
  border-color: var(--cfa-border);
  border-radius: var(--cfa-radius-md);
}

body.cfa-app .panel {
  border-color: var(--cfa-border);
  border-radius: var(--cfa-radius-md);
}

body.cfa-app .panel-default > .panel-heading {
  background: var(--cfa-bg-soft);
  border-color: var(--cfa-border);
  color: var(--cfa-text);
  font-family: var(--cfa-font-body);
}

/* ── 7. Modals (Bootstrap dialogs on marketing / home / shared flows) ── */
body.cfa-app .modal-content {
  border: 1px solid var(--cfa-border);
  border-radius: var(--cfa-radius-lg);
  background: var(--cfa-bg);
  font-family: var(--cfa-font-body);
}

body.cfa-app .modal-header {
  border-bottom: 1px solid var(--cfa-border);
  color: var(--cfa-text);
}

body.cfa-app .modal-footer {
  border-top: 1px solid var(--cfa-border);
}