/* Shared information surfaces. Developer > Site Appearance owns the palette.
 * Approved pale blue/lavender panels, with quieter records and fields.
 * Semantic states, editor content, live exams and report artwork stay separate. */
:root, .cexam-appearance-preview {
    --cexam-surface-sky: linear-gradient(125deg, var(--cexam-summary-a, #e8f4ff) 0%, var(--cexam-summary-b, #edf1ff) 58%, var(--cexam-summary-c, #f1edfc) 100%);
    --cexam-surface-lavender: linear-gradient(125deg, var(--cexam-summary-c, #f1edfc) 0%, var(--cexam-summary-b, #edf1ff) 52%, var(--cexam-summary-a, #e8f4ff) 100%);
    --cexam-surface-mint: linear-gradient(125deg, #e3f5f1 0%, #eaf5fa 58%, #edf1fc 100%);
    --cexam-surface-amber: linear-gradient(125deg, #fff2da 0%, #fff6e7 58%, #fbf0eb 100%);
    --cexam-surface-canvas: #fbfcff;
    --cexam-surface-detail: #fafbff;
    --cexam-surface-soft: linear-gradient(125deg, var(--cexam-surface-soft-a, #f8fbff) 0%, var(--cexam-surface-soft-b, #fcfcff) 60%, var(--cexam-surface-soft-c, #faf8fe) 100%);
    --cexam-surface-inset: var(--cexam-surface-detail);
    --cexam-surface-border: #dfe5ed;
    --cexam-surface-divider: #e9edf3;
    --cexam-surface-accent: #8098d2;
    --cexam-surface-lavender-accent: #a094d3;
    --cexam-surface-mint-accent: #72b6b5;
    --cexam-surface-amber-accent: #cca766;
    --cexam-surface-active-border: #4c75b1;
    --cexam-surface-active-ring: 0 0 0 2px rgb(76 117 177 / 20%);
    --cexam-surface-shadow: 0 7px 21px rgb(57 77 132 / 5%);
    --cexam-surface-label: #4b6280;
    --cexam-surface-value: #244f7d;
    --cexam-surface-table-head: #f1f6fc;
    --cexam-field-background: #fbfcff;
    --cexam-field-border: #dfe5ed;
    --cexam-field-focus: #8098d2;
}

/* Screen only: printed documents retain their existing colour treatment.
 * State exclusions use :where() so they do not inflate selector specificity. */
@media screen {
body.cexam-site-theme :is(
    .cexam-q-card, .cexam-q-card-soft, .cexam-people-profile-card,
    .cexam-people-form-shell, .cexam-security-group, .cexam-license-card,
    .cexam-purchase-card, .cexam-archive-item, .cexam-archive-record,
    .cexam-content-overview-card, .cexam-content-family-card, .cexam-r21-card,
    .cexam-experience .xp-panel, .cexam-experience .xp-destination, .acl-group,
    .cexam-invites-page .one-invite, .cexam-blog-card, .cexam-blogs-empty,
    .me-guide .mg-card, .icons3 .one-icon, .cexam-browser-card,
    .cexam-invites-page .cexam-invites-search,
    .cexam-frequency-evidence, .cexam-frequency-empty,
    .cexam-blog-article, .cexam-assessment-answer-card,
    .cexam-template-section-row, .cexam-q-label-card
):where(:not(.cexam-action-danger-card, .cexam-frequency-review,
    .cexam-license-create-card, .is-pending, .is-error, .is-warning,
    .is-approved, .is-success, .is-selected)) {
    background: var(--cexam-surface-soft);
    border-color: var(--cexam-surface-border);
    box-shadow: none;
}

body.cexam-site-theme #ma-home :is(.ma-step-card, .ma-scard, .ma-feature) {
    background: var(--cexam-surface-soft);
    border-color: var(--cexam-surface-border);
}

/* The page frame already encloses account forms; fields keep their own borders. */
body.cexam-site-theme .cexam-people-form-shell {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* These are real data-table components; editor and report tables are excluded.
 * Small-screen responsive cells remain transparent over the tinted record. */
body.cexam-site-theme :is(.cexam-q-table, .cexam-license-table.cexam-q-table,
    .cexam-ops-table, .cexam-your-table) > tbody > tr > :is(td, th):not(:where(.table-danger *, .table-warning *, .table-success *, .is-warning *, .is-error *)),
body.cexam-site-theme table.cexam-responsive-table:not(:where(.note-editor *, [contenteditable] *)) > tbody > tr > :is(td, th):not(:where(.table-danger *, .table-warning *, .table-success *, .is-warning *, .is-error *)) {
    background: var(--cexam-surface-canvas);
    border-color: var(--cexam-surface-border);
}
body.cexam-site-theme :is(.cexam-your-table, .cexam-ops-table, table.cexam-responsive-table:not(.cexam-q-table)) > thead > tr > th {
    background: var(--cexam-surface-table-head);
}
body.cexam-site-theme .cexam-question-content :is(.cexam-bank-card, .cexam-bank-card-footer) {
    background: var(--cexam-surface-soft);
    border-color: var(--cexam-surface-border);
}

/* Change field colour without removing native/select2 arrows or validation states. */
body.cexam-site-theme :is(.common_card, .cexam-people-shell, .cexam-q-wrap) :is(
    .form-control, .form-select, .cexam-q-field input, .cexam-q-field select,
    .cexam-q-field textarea, .cexam-q-table input, .cexam-q-table select,
    .cexam-q-table textarea, .select2-container--bootstrap-5 .select2-selection
):not(:where([type=checkbox], [type=radio], [type=hidden], [type=range], [type=color],
    [type=submit], [type=button], :disabled, [readonly], .is-invalid, .is-valid,
    [aria-invalid=true], .was-validated :invalid, .select2-container--disabled *,
    .note-editor *, [contenteditable] *)) {
    background-color: var(--cexam-field-background) !important;
    border-color: var(--cexam-field-border) !important;
    color: var(--cexam-surface-value) !important;
}
body.cexam-site-theme .select2-container--bootstrap-5:not(.select2-container--disabled) .select2-selection__rendered {
    color: var(--cexam-surface-value);
}
body.cexam-site-theme :is(.common_card, .cexam-people-shell, .cexam-q-wrap) :is(
    .form-control, .form-select, .cexam-q-field input, .cexam-q-field select,
    .cexam-q-field textarea, .cexam-q-table input, .cexam-q-table select, .cexam-q-table textarea
):focus:not(:where(.is-invalid, .is-valid, [aria-invalid=true], .note-editor *)),
body.cexam-site-theme .select2-container--bootstrap-5:is(.select2-container--focus, .select2-container--open) .select2-selection {
    border-color: var(--cexam-field-focus) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cexam-field-focus) 18%, transparent) !important;
}

body.cexam-site-theme :is(
    .cexam-q-stat, .cexam-workspace-status-block, .cexam-content-status-block,
    .cexam-people-status-block, .cexam-workspace-official-result > div,
    .cexam-people-profile-stats > div, .cexam-your-summary > div,
    .cexam-ops-stat, .cexam-experience .xp-stat, .cexam-centre .centre-metric
):where(:not(.is-internal, .is-attention, .is-ready, .is-selected,
    .cexam-question-content .cexam-q-stat)) {
    background: var(--cexam-surface-sky);
    border-color: var(--cexam-surface-border);
    border-top: 3px solid var(--cexam-surface-accent);
    box-shadow: var(--cexam-surface-shadow);
}

body.cexam-site-theme :is(
    .cexam-q-stat, .cexam-people-profile-stats > div,
    .cexam-your-summary > div, .cexam-ops-stat, .cexam-experience .xp-stat
):where(:nth-child(3n + 2)):where(:not(.is-internal, .is-attention, .is-ready, .is-selected,
    .cexam-question-content .cexam-q-stat)) {
    background: var(--cexam-surface-lavender);
    border-top-color: var(--cexam-surface-lavender-accent);
}
body.cexam-site-theme :is(
    .cexam-q-stat, .cexam-people-profile-stats > div,
    .cexam-your-summary > div, .cexam-ops-stat, .cexam-experience .xp-stat
):where(:nth-child(3n)):where(:not(.is-internal, .is-attention, .is-ready, .is-selected,
    .cexam-question-content .cexam-q-stat)) {
    background: var(--cexam-surface-mint);
    border-top-color: var(--cexam-surface-mint-accent);
}

body.cexam-site-theme :is(.cexam-q-stat, .cexam-workspace-status-block, .cexam-content-status-block, .cexam-people-status-block):where(:not(.cexam-question-content .cexam-q-stat)) span {
    color: var(--cexam-surface-label);
}
body.cexam-site-theme .cexam-q-stat:where(:not(.is-ready, .is-attention, .cexam-question-content .cexam-q-stat)) strong {
    color: var(--cexam-surface-value);
}
/* Existing Candidate summary states keep their established blue/amber/green meaning. */
body.cexam-site-theme .cexam-your-summary > div.is-blue {
    background: var(--cexam-surface-sky);
    border-top-color: var(--cexam-surface-accent);
}
body.cexam-site-theme .cexam-your-summary > div.is-amber {
    background: var(--cexam-surface-amber);
    border-top-color: var(--cexam-surface-amber-accent);
}
body.cexam-site-theme .cexam-your-summary > div.is-green {
    background: var(--cexam-surface-mint);
    border-top-color: var(--cexam-surface-mint-accent);
}

/* Service-request totals are compact summaries, not reading/table panels. */
body.cexam-site-theme .cexam-finance-summary > .cexam-q-card {
    background: var(--cexam-surface-sky);
    border-color: var(--cexam-surface-border);
    border-top: 3px solid var(--cexam-surface-accent);
    box-shadow: var(--cexam-surface-shadow);
}
body.cexam-site-theme .cexam-finance-summary > .cexam-q-card:nth-child(even) {
    background: var(--cexam-surface-lavender);
    border-top-color: var(--cexam-surface-lavender-accent);
}

/* Overview cards share the approved pale gradient with a restrained edge accent. */
body.cexam-site-theme .cexam-q-card.cexam-workspace-overview-card {
    background: var(--cexam-surface-soft);
    border-top: 2px solid var(--cexam-surface-accent);
}
body.cexam-site-theme .cexam-q-card.cexam-workspace-overview-card:nth-child(3n + 2) {
    border-top-color: var(--cexam-surface-lavender-accent);
}
body.cexam-site-theme .cexam-q-card.cexam-workspace-overview-card:nth-child(3n) {
    border-top-color: var(--cexam-surface-mint-accent);
}
body.cexam-site-theme .cexam-workspace-overview-card dl > div {
    border-color: rgb(99 125 163 / 17%);
}
body.cexam-site-theme .cexam-workspace-overview-card dt {
    color: var(--cexam-surface-label);
}
body.cexam-site-theme :is(.cexam-media-card-body, .cexam-media-capture-info) {
    background: var(--cexam-surface-inset);
}

/* Small read-only fields inside the existing identity and result headers.
 * Pending identity corrections keep their amber attention treatment. */
body.cexam-site-theme :is(
    .cexam-workspace-candidate-meta > div, .cexam-workspace-candidate-meta > a,
    .cexam-content-meta-grid > div, .cexam-people-meta-grid > div,
    .cexam-people-info-item, .cexam-people-detail-list > div,
    .cexam-people-file-item, .cexam-result-window-grid > div,
    .cexam-score-module-card
):where(:not(.is-pending, .is-error, .is-warning, .is-internal)) {
    background: var(--cexam-surface-inset);
    border-color: var(--cexam-surface-border);
    box-shadow: none;
}
body.cexam-site-theme .cexam-r21-workspace-identity-card:not(.is-pending) > a:hover {
    background: var(--cexam-surface-detail);
}

/* Selected operation filters remain visibly selected among coloured metrics. */
body.cexam-site-theme .cexam-ops-page .cexam-ops-stat.is-selected,
body.cexam-site-theme .cexam-ops-page .cexam-ops-stat:hover {
    background: var(--cexam-surface-sky);
    border-color: var(--cexam-surface-active-border);
    border-top: 3px solid var(--cexam-surface-active-border);
    box-shadow: var(--cexam-surface-active-ring);
}
body.cexam-site-theme .cexam-ops-stat:focus-visible {
    outline: 3px solid var(--cexam-surface-active-border);
    outline-offset: 3px;
}

/* Field/value pairs must read naturally on phone and tablet, including outside tables. */
@media screen and (max-width:1100px) {
    body.cexam-site-theme .cexam-workspace-overview-card dl > div {
        display: block;
        padding-block: 10px;
    }
    body.cexam-site-theme .cexam-workspace-overview-card dd {
        text-align: left;
        margin-top: 4px;
        overflow-wrap: anywhere;
    }
    body.cexam-site-theme :is(.cexam-q-card, .cexam-q-card-soft, .cexam-people-profile-card) {
        min-width: 0;
        overflow-wrap: anywhere;
    }
}
}