/**
 * Cardinal / C360 typography layer — semantic utilities + Phoenix content bridge.
 * Scoped to .broker-c360-ui. Load after c360-tokens.css and theme.
 * Reference roles: docs/C360_Cloud_Complete Initial Journey v4.html (body / labels / data).
 */

/* ── Shell baseline (reference: body 13.5px / 1.5 / --ch) ─────────────────── */
body.broker-c360-ui {
  font-size: var(--c360-body-size);
  line-height: var(--c360-body-lh);
}

body.broker-c360-ui #content-container,
body.broker-c360-ui #content-container.content {
  font-family: var(--fb);
  font-size: var(--c360-body-size);
  line-height: var(--c360-body-lh);
  color: var(--ch);
}

/* Mono / data helpers */
body.broker-c360-ui .c360-mono,
body.broker-c360-ui .mono {
  font-family: var(--fm);
}

body.broker-c360-ui kbd,
body.broker-c360-ui .c360-kbd {
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 600;
  font-style: normal;
}

/* ── Semantic roles (apply in modules instead of ad-hoc font-family) ─────── */

/** Page / screen title */
body.broker-c360-ui .c360-type-page-title {
  font-family: var(--fs);
  font-size: 1.35rem;
  font-weight: 700;
  font-style: normal;
  color: var(--navy);
  line-height: 1.25;
}

/** Card / panel title */
body.broker-c360-ui .c360-type-card-title {
  font-family: var(--fs);
  font-size: 13px;
  font-weight: 700;
  font-style: normal;
  color: var(--navy);
}

/** Large metric / hero number */
body.broker-c360-ui .c360-type-metric-lg {
  font-family: var(--fs);
  font-size: 24px;
  font-weight: 800;
  font-style: normal;
  color: var(--navy);
  line-height: 1.2;
}

/** Micro section label (form rows, panel sections) */
body.broker-c360-ui .c360-type-micro-label {
  font-family: var(--fs);
  font-size: var(--c360-micro-label-size);
  font-weight: 800;
  font-style: normal;
  text-transform: none;
  letter-spacing: var(--c360-micro-label-ls);
  color: var(--ch3);
}

/** Tabs — default row (Journey .ph-tab / .pt: 11.5px / 600) */
body.broker-c360-ui .c360-type-tab {
  font-family: var(--fs);
  font-size: 11.5px;
  font-weight: 600;
  font-style: normal;
}

/** Tabs — strong / cd-tab style (Journey .cd-tab: 12.5px / 700) */
body.broker-c360-ui .c360-type-tab-strong {
  font-family: var(--fs);
  font-size: 12.5px;
  font-weight: 700;
  font-style: normal;
}

/** Tables — header cell label */
body.broker-c360-ui .c360-type-table-th {
  font-family: var(--fs);
  font-size: var(--c360-table-th-size);
  font-weight: 600;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ch2);
}

/** Tables — body cell */
body.broker-c360-ui .c360-type-table-td {
  font-family: var(--fs);
  font-size: var(--c360-table-td-size);
  font-weight: 400;
  font-style: normal;
  color: var(--ch);
}

/* ── Default heading ladder inside routed content (Phoenix / Bootstrap reset) ─ */
body.broker-c360-ui #content-container h1,
body.broker-c360-ui #content-container .h1 {
  font-family: var(--fs);
  font-weight: 700;
  font-style: normal;
  color: var(--navy);
}

body.broker-c360-ui #content-container h2,
body.broker-c360-ui #content-container .h2,
body.broker-c360-ui #content-container h3,
body.broker-c360-ui #content-container .h3 {
  font-family: var(--fs);
  font-weight: 700;
  font-style: normal;
  color: var(--navy);
}

body.broker-c360-ui #content-container h4,
body.broker-c360-ui #content-container .h4,
body.broker-c360-ui #content-container h5,
body.broker-c360-ui #content-container .h5,
body.broker-c360-ui #content-container h6,
body.broker-c360-ui #content-container .h6 {
  font-family: var(--fs);
  font-weight: 700;
  font-style: normal;
  color: var(--navy);
}

/*
 * Modals mount inside #content-container; the routed heading ladder above must not
 * force navy/dark text onto modal chrome (e.g. navy header + h2 title).
 * Journey info modals may be moved to <body>; same inherit rule without #content-container.
 */
body.broker-c360-ui #content-container .modal .modal-header :is(h1, h2, h3, h4, h5, h6),
body.broker-c360-ui .c360-journey-info-modal .modal-header :is(h1, h2, h3, h4, h5, h6) {
  color: inherit;
}

/* Compact section headings in forms — prefer utility .c360-type-micro-label on small h5/h6 in templates */
body.broker-c360-ui #content-container .c360-type-section-h {
  font-family: var(--fs);
  font-size: var(--c360-micro-label-size);
  font-weight: 800;
  text-transform: none;
  letter-spacing: var(--c360-micro-label-ls);
  color: var(--ch3);
  margin-bottom: 0.5rem;
  line-height: 1.35;
}

/*
 * Journey + claims modals: Bootstrap field labels → task-modal micro label rhythm.
 * Opt out: .form-check-label | .c360-label-sentence
 */
body.broker-c360-ui .c360-journey-page .form-label:not(.form-check-label):not(.c360-label-sentence),
body.broker-c360-ui .c360-journey-page label.col-form-label:not(.c360-label-sentence),
body.broker-c360-ui #content-container .client-claims-modal .modal-body .form-label:not(.form-check-label):not(.c360-label-sentence),
body.broker-c360-ui #content-container .client-claims-modal-c360 .form-label:not(.form-check-label):not(.c360-label-sentence) {
  font-family: var(--fs);
  font-size: var(--c360-micro-label-size);
  font-weight: 800;
  font-style: normal;
  letter-spacing: var(--c360-micro-label-ls);
  text-transform: none;
  color: var(--ch3);
  margin-bottom: 0.375rem;
  line-height: 1.35;
}

/* Plain Bootstrap tables on journey pages: match .c360-tasks-table header scale (no ALL CAPS) */
body.broker-c360-ui .c360-journey-page .table:not(.c360-tasks-table) thead th {
  font-family: var(--fs);
  font-size: var(--c360-table-th-size);
  font-weight: 600;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ch2);
}

/* Primary UI buttons already use Bootstrap; reinforce Montserrat where theme leaks Nunito */
body.broker-c360-ui #content-container .btn:not(.btn-link) {
  font-family: var(--fs);
  font-style: normal;
}

body.broker-c360-ui #content-container .form-control,
body.broker-c360-ui #content-container .form-select,
body.broker-c360-ui #content-container textarea {
  font-family: var(--fb);
  font-style: normal;
}

/*
 * Field values app-wide — normal weight (Phoenix .form-control / .form-select default to 600).
 * Labels stay semibold via .form-label rules; inputs, selects, textareas, Choices, Selectize,
 * Flatpickr, and native text-like inputs use 400.
 */
body.broker-c360-ui .form-control,
body.broker-c360-ui .form-select,
body.broker-c360-ui textarea,
body.broker-c360-ui .form-control-plaintext,
body.broker-c360-ui input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="file"]):not([type="hidden"]),
body.broker-c360-ui .selectize-control .selectize-input,
body.broker-c360-ui .choices .choices__inner,
body.broker-c360-ui .choices .choices__list--single .choices__item,
body.broker-c360-ui .choices[data-type*="select-one"] > .choices__inner > .choices__list--single .choices__item,
body.broker-c360-ui .choices__list--dropdown .choices__item,
body.broker-c360-ui .choices__list[aria-expanded] .choices__item,
body.broker-c360-ui .flatpickr-input,
body.broker-c360-ui input.flatpickr-input.form-control {
  font-weight: 400 !important;
}

/*
 * Claim journey field values — normal weight (Phoenix .form-control / .form-select default to 600).
 * Labels stay 600 via module CSS; inputs, selects, textareas, Choices, and Selectize use 400.
 */
body.broker-c360-ui #form_page .claim-form .form-control,
body.broker-c360-ui #form_page .claim-form .form-select,
body.broker-c360-ui #form_page .claim-form textarea,
body.broker-c360-ui #tab-container .claim-form .form-control,
body.broker-c360-ui #tab-container .claim-form .form-select,
body.broker-c360-ui #tab-container .claim-form textarea,
body.broker-c360-ui #form_page .claim-config-table .form-control,
body.broker-c360-ui #form_page .claim-config-table .form-select,
body.broker-c360-ui #tab-container .claim-config-table .form-control,
body.broker-c360-ui #tab-container .claim-config-table .form-select,
body.broker-c360-ui #form_page .claim-form .choices .choices__inner,
body.broker-c360-ui #form_page .claim-form .choices .choices__list--single .choices__item,
body.broker-c360-ui #tab-container .claim-form .choices .choices__inner,
body.broker-c360-ui #tab-container .claim-form .choices .choices__list--single .choices__item,
body.broker-c360-ui #form_page .claim-form .choices[data-type*="select-one"] > .choices__inner > .choices__list--single .choices__item,
body.broker-c360-ui #tab-container .claim-form .choices[data-type*="select-one"] > .choices__inner > .choices__list--single .choices__item,
body.broker-c360-ui #form_page .claim-config-table .choices .choices__inner,
body.broker-c360-ui #form_page .claim-config-table .choices .choices__list--single .choices__item,
body.broker-c360-ui #tab-container .claim-config-table .choices .choices__inner,
body.broker-c360-ui #tab-container .claim-config-table .choices .choices__list--single .choices__item,
body.broker-c360-ui #form_page .claim-form .selectize-control .selectize-input,
body.broker-c360-ui #tab-container .claim-form .selectize-control .selectize-input {
  font-weight: 400 !important;
}

/* Journey forms: Phoenix .form-floating>label — sentence case, consistent muted label colour */
body.broker-c360-ui .c360-journey-page .form-floating > label {
  font-family: var(--fs);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--ch2) !important;
}

body.broker-c360-ui .c360-journey-page .form-floating > .form-control:focus ~ label,
body.broker-c360-ui .c360-journey-page .form-floating > .form-control:not(:placeholder-shown) ~ label,
body.broker-c360-ui .c360-journey-page .form-floating > .form-select ~ label,
body.broker-c360-ui .c360-journey-page .form-floating > .form-select:focus ~ label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ch2) !important;
}

/* Journey field values — body font, normal weight (override Phoenix tertiary/emphasis mix) */
body.broker-c360-ui .c360-journey-page .form-floating > .form-control,
body.broker-c360-ui .c360-journey-page .form-floating > .form-select {
  font-family: var(--fb);
  font-size: var(--c360-body-size);
  font-weight: 400;
  color: var(--ch);
}

/* System sentence case — do not force ALL CAPS via Bootstrap utility or legacy rules */
body.broker-c360-ui .text-uppercase:not(.c360-preserve-uppercase) {
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Reference / intent codes entered by users stay uppercase */
body.broker-c360-ui .c360-preserve-uppercase,
body.broker-c360-ui #wba-code,
body.broker-c360-ui #wbi-code {
  text-transform: uppercase !important;
}