/*
 * Modern Focus theme. Load last, after application/page styles and tenant branding.
 * The explicit root class limits this presentation layer to opted-in web layouts.
 * Colors inherit the validated tenant palette; status colors and behavioral classes
 * (hidden, disabled, validation, responsive grids) remain owned by their components.
 */
html.df-theme-modern {
    --df-theme-ink: var(--primary-text-color, var(--df-ink, #202321));
    --df-theme-surface: var(--input-background, var(--df-surface, #ffffff));
    --df-theme-muted: color-mix(in srgb, var(--df-theme-ink) 72%, var(--df-theme-surface));
    --df-theme-line: color-mix(in srgb, var(--df-theme-ink) 14%, var(--df-theme-surface));
    --df-theme-control-border: color-mix(in srgb, var(--df-theme-ink) 55%, var(--df-theme-surface));
    --df-theme-subtle: color-mix(in srgb, var(--df-theme-ink) 3%, var(--df-theme-surface));
    --df-theme-disabled: color-mix(in srgb, var(--df-theme-ink) 8%, var(--df-theme-surface));
    --df-theme-invalid-border: var(--input-error-color, var(--df-color-danger));
    --df-theme-accent: var(--btn-primary, var(--df-gold-dark, var(--df-gold-strong, #8a6608)));
    --df-control-radius: 0.4375rem;
    --df-radius-sm: var(--df-control-radius);
    --df-radius-md: 0.625rem;
    --df-radius-lg: 0.75rem;
    --df-radius: var(--df-radius-lg);
    --df-shadow-sm: none;
    --df-shadow-lg: 0 0.75rem 2rem rgb(0 0 0 / 10%);
    --df-color-ink-muted: var(--df-theme-muted);
    --df-color-border: var(--df-theme-line);
    --df-focus-ring: 0 0 0 0.1875rem color-mix(in srgb, var(--df-theme-accent) 22%, transparent);
    --bs-body-font-family: var(--df-font-family-sans);
    font-size: 16px;
    background: var(--df-theme-surface);
}

html.df-theme-modern body {
    color: var(--df-theme-ink);
    background: var(--df-theme-surface);
    font-family: var(--df-font-family-sans);
    font-size: 0.875rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

html.df-theme-modern :is(button, input, select, textarea) { font-family: var(--df-font-family-sans); }
html.df-theme-modern :is(h1, .h1) { font-size: clamp(1.5rem, 2.4vw, 1.75rem); font-weight: 550; line-height: 1.3; letter-spacing: -0.035em; }
html.df-theme-modern :is(h2, .h2) { font-weight: 550; letter-spacing: -0.02em; }
html.df-theme-modern :is(h3, h4, h5, h6, .h3, .h4, .h5, .h6) { font-weight: 550; }
html.df-theme-modern .form-label { font-size: 0.8125rem; font-weight: 500; }

html.df-theme-modern :is(.btn, .modal-content, .dropdown-menu) { border-radius: var(--df-control-radius); }
html.df-theme-modern .btn {
    min-height: 2.75rem;
    padding: 0.625rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 550;
    line-height: 1.4;
    box-shadow: none;
    transform: none;
}
html.df-theme-modern .btn-sm { min-height: 2.25rem; padding: 0.4375rem 0.6875rem; }
/* Bootstrap removes the native outline; restore a visible ring after flattening shadows. */
html.df-theme-modern .btn:focus-visible { outline: 2px solid var(--df-theme-ink); outline-offset: 2px; box-shadow: var(--df-focus-ring); }
html.df-theme-modern .btn-link { color: var(--df-theme-accent); }
/* A filled-button gold is too dark as text on a charcoal tenant surface. */
html.df-theme-modern [data-df-app="portal"] :is(.btn-link, .btn-outline-primary) { color: var(--df-theme-ink); }
html.df-theme-modern [data-df-app="portal"] .btn-outline-primary { border-color: var(--df-theme-control-border); }
html.df-theme-modern [data-df-app="portal"] :is(.btn-link, .btn-outline-primary):is(:hover, :focus, :active) { color: var(--df-theme-ink); background: var(--df-theme-subtle); }
html.df-theme-modern [data-df-app="portal"] .btn-link:active { color: var(--df-theme-ink) !important; }
html.df-theme-modern :is(.btn-outline-secondary, .btn-light) { color: var(--df-theme-ink); border-color: var(--df-theme-line); background: var(--df-theme-surface); }
html.df-theme-modern :is(.btn-outline-secondary, .btn-light):hover { background: var(--df-theme-subtle); }

html.df-theme-modern :is(.form-control, .form-select) {
    min-height: 2.75rem;
    border-radius: var(--df-control-radius);
    padding-block: 0.625rem;
    font-size: 0.875rem;
    color: var(--df-theme-ink);
    background-color: var(--df-theme-subtle);
}
/* Never paint over an invalid/disabled control or its existing validation state. */
html.df-theme-modern :is(.form-control, .form-select):not(:disabled, .input-validation-error, .is-invalid, .error, [aria-invalid="true"]):not(:focus) { border-color: var(--df-theme-control-border); }
html.df-theme-modern :is(.form-control, .form-select):focus { border-color: var(--df-theme-accent); box-shadow: var(--df-focus-ring); }
html.df-theme-modern :is(.form-control, .form-select):focus-visible { outline: 2px solid var(--df-theme-ink); outline-offset: 2px; }
html.df-theme-modern :is(.form-control, .form-select):disabled { background-color: var(--df-theme-disabled); color: var(--df-theme-muted); opacity: 1; }
html.df-theme-modern :is(.form-control, .form-select):is(.is-invalid, .input-validation-error, .error, [aria-invalid="true"]) { border-color: var(--df-theme-invalid-border); }
html.df-theme-modern .form-control::placeholder { color: var(--df-theme-muted); opacity: 1; }
html.df-theme-modern .input-group-text { border-color: var(--df-theme-line); background: var(--df-theme-subtle); color: var(--df-theme-muted); }
html.df-theme-modern .input-group > :not(:first-child):not(.dropdown-menu) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
html.df-theme-modern .input-group > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
html.df-theme-modern .form-check-input { accent-color: var(--df-theme-accent); }

/* Standard surfaces retain grouping without stacked shadows or heavy chrome. */
html.df-theme-modern :is(.card, .df-surface, .df-state-card, .df-fieldset, .df-manage-surface,
    .df-money-surface, .df-review-summary, .df-decision-panel, .df-dashboard-panel,
    .df-dashboard-status-card, .df-info-card, .df-guidance-card, .df-readiness-card,
    .df-remediation-panel, .df-action-card, .df-resource-card, .df-guide-card) {
    border-color: var(--df-theme-line);
    border-radius: var(--df-radius-lg);
    box-shadow: none;
}
html.df-theme-modern .card-header { background: transparent; border-bottom-color: var(--df-theme-line); }
html.df-theme-modern :is(.df-resource-card, .df-guide-card, .df-action-card):hover { box-shadow: none; transform: none; }
html.df-theme-modern :is(.df-page-header, .df-money-hero, .df-manage-header) { margin-bottom: 1.5rem; }
html.df-theme-modern :is(.df-page-header h1, .df-money-hero h1, .df-dashboard-hero h1, .df-dd-hero h1) { font-size: clamp(1.5rem, 2.4vw, 1.75rem); letter-spacing: -0.035em; }

html.df-theme-modern :is(.df-dashboard, .df-money-page, .df-manage-page) {
    --df-workspace-border: var(--df-theme-line);
    --df-workspace-muted: var(--df-theme-muted);
    --df-dashboard-border: var(--df-theme-line);
    --df-dashboard-shadow: none;
    --df-money-border: var(--df-theme-line);
    --df-money-muted: var(--df-theme-muted);
    --df-manage-border: var(--df-theme-line);
}

/* Keep the existing shell, navigation permissions and collapse behavior. */
html.df-theme-modern .df-shell { --df-rail: 220px; --df-nav-line: var(--df-theme-line); }
/* Sidebar labels inherit the header palette, including dark-header/light-body tenants. */
html.df-theme-modern .df-sidebar { background: var(--df-nav-bg); }
html.df-theme-modern :is(.df-topbar, .df-site-header) { box-shadow: none; border-bottom-color: var(--df-theme-line); }
html.df-theme-modern .df-main-inner { padding-block: 1.75rem; }
html.df-theme-modern :is(.df-site-footer, .df-site-footer__bottom) { border-color: var(--df-theme-line); }
html.df-theme-modern :is(.df-nav-item, .df-nav-link, .df-nav-group-toggle) { border-radius: var(--df-control-radius); font-size: 0.8125rem; }
html.df-theme-modern .df-manage-header { border-bottom-color: var(--df-theme-line); }

/* An inline metric strip replaces decorative dashboard metric cards. */
html.df-theme-modern .df-dashboard-metric { border: 0; background: transparent; box-shadow: none; padding: 0.5rem 1rem 0.5rem 0; }
html.df-theme-modern .df-dashboard-metric-icon { display: none; }
html.df-theme-modern .df-dashboard-metric-value { font-size: 1.75rem; font-weight: 500; letter-spacing: -0.035em; }
html.df-theme-modern .df-dashboard-metric h2 { font-weight: 500; }
html.df-theme-modern :is(.df-dashboard-panel, .df-money-surface, .df-manage-surface) { background: var(--df-theme-surface); }
html.df-theme-modern :is(.df-dashboard-section-kicker, .df-money-eyebrow, .df-manage-eyebrow) { text-transform: none; letter-spacing: 0; color: var(--df-theme-muted); }
html.df-theme-modern .df-open-requests .df-money-surface { border: 0; border-radius: 0; padding-inline: 0; }
html.df-theme-modern .df-open-requests .df-queue-results { padding-inline: 1rem; }

html.df-theme-modern :is(.table, table.dataTable) { color: var(--df-theme-ink); }
html.df-theme-modern :is(.table, table.dataTable) > thead > tr > th { font-size: 0.75rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--df-theme-muted); border-bottom-color: var(--df-theme-line); }
html.df-theme-modern :is(.table, table.dataTable) > tbody > tr > td { border-bottom-color: var(--df-theme-line); font-size: 0.8125rem; }
html.df-theme-modern :is(.table, table.dataTable) > tbody > tr { --bs-table-striped-bg: transparent; --bs-table-hover-bg: var(--df-theme-subtle); }
html.df-theme-modern .df-status-pill { font-weight: 550; }
html.df-theme-modern .df-rail-capabilities-table { min-width: 36rem; }

/* Existing flow controllers keep ownership of their steps and validation. */
html.df-theme-modern .df-flow-steps { gap: 1.25rem; font-size: 0.75rem; }
html.df-theme-modern .df-flow-steps span { width: 1.4375rem; height: 1.4375rem; background: var(--df-theme-subtle); }
html.df-theme-modern .df-flow-steps [aria-current="step"] { font-weight: 500; color: var(--df-theme-ink); }
html.df-theme-modern .df-flow-steps [aria-current="step"] span { color: #fff; background: var(--df-theme-accent); }
/* The funding editor uses Bootstrap's !important border utility in older views. */
html.df-theme-modern .df-guided-flow [data-flow-stage="funding"] .df-form-item { border: 0 !important; border-radius: 0; }
html.df-theme-modern .df-guided-flow [data-flow-stage="funding"] .card-header { border: 0; padding-inline: 0; background: transparent; font-size: 1rem; }
html.df-theme-modern .df-guided-flow [data-flow-stage="funding"] .card-body { padding-inline: 0; }
html.df-theme-modern .df-dd-create-page { border: 0; border-radius: 0; background: var(--df-theme-surface); }
html.df-theme-modern .df-dd-create-page .df-dd-setup-nav { border-bottom: 0; gap: 1.25rem; }
html.df-theme-modern .df-dd-create-page .df-dd-setup-nav button { min-height: 2.75rem; padding-bottom: 0; border-bottom: 0; font-size: 0.75rem; }
html.df-theme-modern .df-dd-create-page .df-dd-setup-nav button span { display: inline-grid; place-items: center; width: 1.4375rem; height: 1.4375rem; border-radius: 50%; background: var(--df-theme-subtle); }
html.df-theme-modern .df-dd-create-page .df-dd-setup-nav button[aria-current="step"] span { background: var(--df-theme-accent); color: #fff; }

/* Consumer pages share the same paper surface and narrow, readable review column. */
html.df-theme-modern body[data-df-app="consumer"] .df-main-shell { max-width: 1000px; padding: 2.125rem 2.25rem 2rem; }
html.df-theme-modern .df-focused-consumer #main-content > :is(.df-state-card, form.df-consumer-form) { border: 0 !important; border-radius: 0; padding-inline: 0; }
html.df-theme-modern .df-focused-flow { --focus-radius: var(--df-radius-lg); --focus-line: var(--df-theme-line); --focus-field: var(--df-theme-subtle); --focus-muted: var(--df-theme-muted); }

/* Focused pages retain Main's light-content contract, including dark tenant shells. */
html.df-theme-modern .df-focused-flow {
    --df-theme-ink: var(--focus-ink);
    --df-theme-surface: var(--focus-surface);
    --df-theme-muted: color-mix(in srgb, var(--df-theme-ink) 72%, var(--df-theme-surface));
    --df-theme-line: color-mix(in srgb, var(--df-theme-ink) 14%, var(--df-theme-surface));
    --df-theme-control-border: color-mix(in srgb, var(--df-theme-ink) 55%, var(--df-theme-surface));
    --df-theme-subtle: color-mix(in srgb, var(--df-theme-ink) 3%, var(--df-theme-surface));
    --df-theme-disabled: color-mix(in srgb, var(--df-theme-ink) 8%, var(--df-theme-surface));
    --focus-canvas: var(--focus-surface);
    --participant-canvas: var(--focus-surface);
    --participant-ink: var(--focus-ink);
    --participant-muted: var(--df-theme-muted);
    --participant-line: var(--df-theme-line);
    --participant-field: var(--df-theme-subtle);
}
html.df-theme-modern .df-focused-flow :is(#main-content, #df-main) :is(.form-control, .form-select):not(:disabled, .input-validation-error, .is-invalid, .error, [aria-invalid="true"]):not(:focus) { border-color: var(--df-theme-control-border); }
html.df-theme-modern .df-focused-flow :is(#main-content, #df-main) :is(.form-control, .form-select) { border-radius: var(--df-control-radius); }
html.df-theme-modern .df-focused-flow :is(#main-content, #df-main) :is(.btn, .card, .df-state-card) { box-shadow: none !important; }
html.df-theme-modern .df-participant-flow #main-content .df-participant-page { font-family: var(--df-font-family-sans); }
html.df-theme-modern .df-focused-portal #df-main :is(.df-dd-hero, .df-money-hero, .df-funding-summary > header, .df-manage-page > .df-page-header),
html.df-theme-modern .df-focused-consumer #main-content > .df-page-header,
html.df-theme-modern .df-focused-consumer #main-content > .df-state-card > h1,
html.df-theme-modern .df-participant-flow #main-content .df-participant-hero {
    background: var(--df-theme-surface);
    color: var(--df-theme-ink);
    border-bottom: 1px solid var(--df-theme-line);
    border-radius: 0;
}
html.df-theme-modern .df-focused-portal #df-main :is(.df-dd-hero, .df-money-hero, .df-funding-summary > header, .df-manage-page > .df-page-header) :is(h1, p, .text-muted, .df-money-eyebrow, .df-dd-amount strong, .df-dd-amount small, .df-money-reference, .df-money-reference code),
html.df-theme-modern .df-focused-consumer #main-content > .df-page-header :is(h1, p),
html.df-theme-modern .df-participant-flow #main-content .df-participant-hero :is(h1, p) { color: var(--df-theme-ink); }
html.df-theme-modern .df-focused-consumer #main-content > .df-state-card > h1 { margin: 0 0 1.5rem; padding: 0; color: var(--df-theme-ink); }
/* Older focused headers force light secondary text with Bootstrap utilities. */
html.df-theme-modern .df-focused-portal #df-main :is(.df-dd-hero, .df-money-hero) :is(.text-muted, .df-money-eyebrow, .df-dd-amount small) { color: var(--df-theme-muted) !important; }
html.df-theme-modern .df-participant-flow #main-content .df-participant-hero h1 { font-size: clamp(1.5rem, 2.4vw, 1.75rem); font-weight: 550 !important; }
html.df-theme-modern .df-participant-flow #main-content .df-participant-summary .df-participant-amount { background: var(--df-theme-surface); border-color: var(--df-theme-line); }
html.df-theme-modern .df-participant-flow #main-content .df-participant-summary .df-participant-amount :is(h2, p, span, strong, small, dt, dd) { color: var(--df-theme-ink); }
html.df-theme-modern .df-participant-flow #main-content .df-participant-login,
html.df-theme-modern .df-focused-portal #df-main :is(.df-dd-hero, .df-money-hero, .df-funding-summary > header, .df-manage-page > .df-page-header) :is(.btn-outline-light, .btn-outline-primary) { color: var(--df-theme-accent); border-color: var(--df-theme-accent); background: transparent; }
html.df-theme-modern .df-focused-portal #df-main :is(.df-dd-hero, .df-money-hero, .df-funding-summary > header, .df-manage-page > .df-page-header) :is(.btn-outline-light, .btn-outline-primary):hover:not(:disabled) { color: #fff; background: var(--df-theme-accent); }
html.df-theme-modern .df-participant-flow #main-content .df-participant-login:focus-visible,
html.df-theme-modern .df-focused-portal #df-main :is(.df-dd-hero, .df-money-hero, .df-funding-summary > header, .df-manage-page > .df-page-header) :is(a, button, summary):focus-visible { outline-color: var(--df-theme-ink); }

/* Intranet/developer aliases bridge their existing component tokens to this theme. */
html.df-theme-modern body[data-df-app="intranet"],
html.df-theme-modern body[data-df-app="developer"] {
    --df-ink: var(--df-theme-ink);
    --df-ink-soft: var(--df-theme-muted);
    --df-ink-faint: var(--df-theme-muted);
    --df-canvas: var(--df-theme-surface);
    --df-surface-muted: var(--df-theme-subtle);
    --df-surface-soft: var(--df-theme-subtle);
    --df-border: var(--df-theme-line);
    --df-line: var(--df-theme-line);
    --df-line-strong: var(--df-theme-line);
    --df-gold-soft: color-mix(in srgb, var(--df-theme-accent) 9%, var(--df-theme-surface));
}

/* Scalar owns the API-reference component; use its public presentation tokens. */
html.df-theme-modern .df-api-reference-page {
    --scalar-font: var(--df-font-family-sans);
    --scalar-color-accent: var(--df-theme-accent);
    --scalar-background-1: var(--df-theme-surface);
    --scalar-background-2: var(--df-theme-subtle);
    --scalar-background-3: var(--df-theme-subtle);
}

@media (max-width: 767.98px) {
    html.df-theme-modern :is(.form-control, .form-select) { font-size: 1rem; }
    html.df-theme-modern .df-main-inner { padding-block: 1.25rem; }
    html.df-theme-modern body[data-df-app="consumer"] .df-main-shell { padding: 1.5rem 1rem; }
}
@media (pointer: coarse) {
    html.df-theme-modern :is(.btn-sm, .df-payment-edit, summary) { min-height: 2.75rem; }
}
@media (prefers-reduced-motion: reduce) {
    html.df-theme-modern { scroll-behavior: auto; }
    html.df-theme-modern :is(.btn, .df-resource-card, .df-guide-card, .df-action-card) { transition: none; }
}
@media print {
    html.df-theme-modern body { background: #fff; color: #000; }
}