/*
 * SIMCO app-wide title colour consistency.
 * Screen-only title colour. Geometry, typography and behavior stay unchanged.
 * Two small title-only light backings preserve contrast on dark surfaces.
 */
@layer simco-app-title-colors {
  @media screen {
    /*
     * Actual page content and popup surfaces only. The exclusions preserve
     * semantic feedback, navigation, and FullCalendar's event/status colours.
     */
    body :is(
      main,
      .modal-overlay,
      .sched-modal-box,
      .ci-modal-dialog,
      .tmpl-modal,
      .light-modal,
      .notif-panel,
      [role="dialog"],
      [role="alertdialog"]
    ) :is(h1, h2, h3, h4, h5, h6, [role="heading"]):not(:where(
      [role="alert"],
      [role="status"],
      .alert,
      .warning,
      .error,
      .danger,
      .status,
      .fc-event,
      .fc-event *,
      .ci-negative-text,
      .alert-error,
      .alert-warning,
      .alert-error *,
      .alert-warning *,
      .alert *,
      .warning *,
      .error *,
      .danger *,
      .jc-admin *,
      [role="alert"] *,
      [role="status"] *
    )) {
      color: var(--green-action, #2E7E54) !important;
    }

    /* Explicit non-semantic title aliases used by current app templates. */
    body :is(
      main,
      .modal-overlay,
      .sched-modal-box,
      .ci-modal-dialog,
      .tmpl-modal,
      .light-modal,
      .notif-panel,
      [role="dialog"],
      [role="alertdialog"]
    ) :is(
      .qcard-title,
      .metric-label,
      .ui-kpi-label,
      .ui-eyebrow,
      .eyebrow,
      .ops-eyebrow,
      .pbx-eyebrow,
      .emp-profile-eyebrow,
      .emp-hero-eyebrow,
      .email-section-eyebrow,
      .sms-section-eyebrow,
      .admin-reply-title,
      .pbx-call-success-title,
      .qe-section-title,
      .qe-intel-section-title,
      .qe-task-group-title,
      .qe-freq-title,
      .jobcard-task-group-title,
      .quote-scope-title,
      .pf-group-label,
      .pf-conditional-heading,
      .pbx-journey-title,
      .pbx-next-title,
      .pbx-gallery-title,
      .pbx-panel-next-title,
      .pbx-thanks-heading,
      .admin-panel-title,
      .admin-section-heading,
      .admin-disclosure-toggle,
      .page-title,
      .section-title,
      .quote-step-title,
      .jc-title
    ):not(:where(
      [role="alert"],
      [role="status"],
      .alert,
      .warning,
      .error,
      .danger,
      .status,
      .fc-event,
      .fc-event *,
      .ci-negative-text,
      .alert-error,
      .alert-warning,
      .alert-error *,
      .alert-warning *,
      .alert *,
      .warning *,
      .error *,
      .danger *,
      .jc-admin *,
      [role="alert"] *,
      [role="status"] *
    )) {
      color: var(--green-action, #2E7E54) !important;
    }

    /* Public booking groups/legends are labels, not body copy. */
    body.public-page main :is(fieldset legend, .pf-group-label) {
      color: var(--green-action, #2E7E54) !important;
    }

    /* Public booking form: only the hero and initial service-step titles are black. */
    body.public-booking-page main .pbx-shell .pbx-aside-primary > h1.pbx-headline,
    body.public-booking-page main .pbx-shell #pfStep1 > h2.pf-step-title {
      color: #000000 !important;
    }

    /* These classes mark layout wrappers; colour only their actual title node. */
    body :is(main, .modal-overlay, .sched-modal-box, [role="dialog"])
      .emp-week-heading > h1,
    body :is(main, .modal-overlay, .sched-modal-box, [role="dialog"])
      .emp-week-heading > h2,
    body :is(main, .modal-overlay, .sched-modal-box, [role="dialog"])
      .emp-week-heading > h3,
    body :is(main, .modal-overlay, .sched-modal-box, [role="dialog"])
      .emp-week-heading > h4,
    body :is(main, .modal-overlay, .sched-modal-box, [role="dialog"])
      .emp-profile-heading :is(h1, h2, h3, h4, h5, h6),
    body :is(main, .modal-overlay, .sched-modal-box, .notif-panel, [role="dialog"])
      .notif-panel-head > span {
      color: var(--green-action, #2E7E54) !important;
    }
    body .notif-panel .notif-panel-head > span {
      color: var(--green-action, #2E7E54) !important;
      background-color: var(--surface-base, #ffffff);
    }

    /* Standalone interactive job card has no shared <main> wrapper. */
    body.simco-job-card-page .jc-card
      :is(h1, h2, h3, h4, h5, h6, [role="heading"]):not(:where(.jc-admin *)) {
      color: var(--green-action, #2E7E54) !important;
    }

    /* Keep the established dark photo gallery intact. A light title backing
       gives the same forest green sufficient contrast without changing layout. */
    body.simco-quote-photos-page .card-body > h2 {
      color: var(--green-action, #2E7E54) !important;
      background-color: var(--surface-base, #ffffff);
    }

    /* The quote-photo brand header is deliberately excluded: it is dark and
       contains branding, not app content titles. */
    body.simco-quote-photos-page .card-header :is(h1, h2, h3, h4, h5, h6, [role="heading"]) {
      color: #ffffff !important;
    }
  }
}