:root {
    color-scheme: light;
    font-family: Inter, "Segoe UI", system-ui, sans-serif;
    font-synthesis: none;
    --wam-canvas: #f5f7f2;
    --wam-surface: #ffffff;
    --wam-surface-subtle: #f8faf6;
    --wam-surface-selected: #dfe7d5;
    --wam-border: #cbd5c2;
    --wam-border-strong: #75826a;
    --wam-text: #293123;
    --wam-text-subtle: #53604c;
    --wam-primary: #47503b;
    --wam-primary-hover: #353d2c;
    --wam-primary-subtle: #e8edde;
    --wam-accent: #806000;
    --wam-accent-bright: #d4af37;
    --wam-danger: #8b1e17;
    --wam-focus: #996f00;
    --wam-radius-sm: 0.55rem;
    --wam-radius: 0.9rem;
    --wam-radius-lg: 1rem;
    --wam-shadow: 0 0.5rem 1.5rem rgb(41 49 35 / 7%);
    --wam-shadow-lg: 0 1.25rem 3rem rgb(41 49 35 / 10%);
}

.skip-link { position: fixed; top: .5rem; left: .5rem; z-index: 1100; padding: .75rem 1rem; border-radius: .55rem; background: var(--wam-surface); color: var(--wam-text); transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

.email-test-form {
    display: grid;
    gap: 1.25rem;
}

.email-test-form > label {
    display: grid;
    gap: 0.5rem;
}

body {
    background: var(--wam-canvas);
    color: var(--wam-text);
    line-height: 1.5;
}

button,
input,
select,
textarea {
    font: inherit;
}

:focus-visible { outline: 3px solid var(--wam-focus); outline-offset: 3px; }
/* DxPopup portals outside the page's scoped CSS and includes its dialog in the Tab order. */
body .dxbl-popup.adl-document-popup:focus-visible { outline: 3px solid var(--wam-focus); outline-offset: -3px; }
/* Route navigation focuses the heading to announce the new page. */
h1[tabindex="-1"]:focus { outline: none; }
input, select, textarea { max-width: 100%; }
.create-panel > summary { color: var(--wam-primary); cursor: pointer; font-weight: 700; padding: .6rem 0; }
.create-panel[open] > summary { margin-bottom: 1rem; }

a {
    color: var(--wam-primary);
    text-underline-offset: 0.15em;
}
.list-toolbar, .pager { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem; margin: 1rem 0; }
.list-toolbar > div { display: grid; gap: .35rem; flex: 1 1 16rem; }
.list-toolbar input { min-height: 2.5rem; padding: .45rem .6rem; border: 1px solid #8795a5; border-radius: .25rem; }
.pager { align-items: center; justify-content: center; }
.pager button, .list-toolbar button { min-height: 2.5rem; padding: .4rem .9rem; }
button:disabled { cursor: not-allowed; }
.agency-edit { margin: .75rem 0; border: 1px solid #ced6df; border-radius: .4rem; }
.agency-edit > summary { cursor: pointer; padding: 1rem; overflow-wrap: anywhere; }
.agency-edit > summary span { margin-left: .75rem; color: #475467; }
.agency-edit[open] > summary { border-bottom: 1px solid #ced6df; }
@media (max-width: 600px) {
    .list-toolbar { align-items: stretch; }
    .list-toolbar > div { flex-basis: 100%; }
    .pager { justify-content: space-between; }
}
.inline-edit-fields { border: 0; padding: 0; margin: 0; min-width: 0; }

/* Nova-inspired shared presentation layer. Page-specific styles still own
   layout and status colors; these rules provide one consistent shell, panel,
   control, and table treatment across the application. */
body .content h1,
body .content h2,
body .content h3,
body .content legend {
    color: var(--wam-text);
}

body .content .eyebrow {
    color: var(--wam-accent);
}

body .content :is(
    .agency-card,
    .agency-switcher,
    .agreement-panel,
    .credential-panel,
    .data-panel,
    .filter-panel,
    .help-search,
    .help-topic,
    .mapping-card,
    .password-card,
    .registration-card,
    .results-panel,
    .review-card,
    .search-card,
    .secret-card,
    .settings-card,
    .status-grid article,
    .status-grid .identity-status,
    .user-card,
    .csa-roles-card
) {
    background: var(--wam-surface);
    border-color: var(--wam-border);
    border-top-color: color-mix(in srgb, var(--wam-primary) 55%, var(--wam-border));
    border-radius: var(--wam-radius-lg);
    box-shadow: var(--wam-shadow);
}

body .content :is(input, select, textarea) {
    min-width: 0;
    border-color: var(--wam-border-strong);
    border-radius: var(--wam-radius-sm);
    color: var(--wam-text);
}

body .content form { min-width: 0; }

body .content :is(input, select, textarea):focus {
    border-color: var(--wam-primary);
    box-shadow: 0 0 0 3px rgb(71 80 59 / 16%);
    outline: none;
}

/* DevExpress draws the editor boundary on its wrapper, rather than the input. */
body .content .dxbl-text-edit:not(.valid):not(.invalid) {
    --dxbl-text-edit-border-color: var(--wam-border-strong);
}

body .content .dxbl-text-edit:focus-within {
    outline: 3px solid var(--wam-focus);
    outline-offset: 3px;
}

body .content :is(input:not(.dxbl-text-edit-input), select, textarea):focus-visible {
    outline: 3px solid var(--wam-focus);
    outline-offset: 3px;
}

@media (forced-colors: active) {
    body .content .dxbl-text-edit {
        border-color: ButtonText;
    }

    body .content .dxbl-text-edit:focus-within,
    body .content :is(input, select, textarea):focus-visible {
        outline-color: Highlight;
    }
}

body .content :is(.primary-action, button[type="submit"]:not(.text-button, .user-edit-action)) {
    background: var(--wam-primary);
    border-color: var(--wam-primary);
    border-radius: var(--wam-radius-sm);
    color: #fff;
    font-weight: 700;
}

body .content :is(.primary-action, button[type="submit"]:not(.text-button, .user-edit-action)):hover:not(:disabled) {
    background: var(--wam-primary-hover);
    border-color: var(--wam-primary-hover);
}

body .content :is(.secondary-action, .clear-button, .pagination button, .pager button) {
    border-radius: var(--wam-radius-sm);
}

body .content table {
    border-color: var(--wam-border);
}

body .content thead {
    background: var(--wam-surface-subtle);
}

@media (prefers-reduced-motion: no-preference) {
    body .content :is(a, button, input, select, textarea) {
        transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, color 150ms ease;
    }
}