/*
 * Fixed Rassini corporate theme.
 * Scope is deliberately limited to page content so Login, AppHeader,
 * AppSidebar, the global scrollbar and existing pagers remain unchanged.
 */
html[data-theme] {
    --chedraui-blue: #58585a;
    --chedraui-blue-hover: #454547;
    --chedraui-blue-active: #343436;
    --chedraui-orange: #f89434;
    --on-accent: #fff;
    --text-on-accent: #fff;
}

html[data-theme="light"] {
    --chedraui-page-surface: rgba(250, 249, 248, .90);
    --chedraui-surface: #ffffff;
    --chedraui-surface-secondary: #f6f5f4;
    --chedraui-surface-hover: #efeeec;
    --chedraui-surface-selected: #fff0e1;
    --chedraui-border: #dedbd8;
    --chedraui-border-strong: #c5c1bd;
    --chedraui-input: #ffffff;
    --chedraui-disabled: #efedeb;
    --chedraui-overlay: rgba(7, 18, 39, .48);
    --chedraui-shadow: 0 12px 28px rgba(88, 88, 90, .10);
    --chedraui-text: #29292b;
    --chedraui-muted: #68686a;
}

html[data-theme="dark"] {
    --chedraui-page-surface: rgba(25, 25, 26, .86);
    --chedraui-surface: #242426;
    --chedraui-surface-secondary: #2d2d2f;
    --chedraui-surface-hover: #38383a;
    --chedraui-surface-selected: #49382a;
    --chedraui-border: #48484a;
    --chedraui-border-strong: #5f5f62;
    --chedraui-input: #202022;
    --chedraui-disabled: #333335;
    --chedraui-overlay: rgba(1, 8, 19, .72);
    --chedraui-shadow: 0 16px 34px rgba(0, 0, 0, .24);
    --chedraui-text: #f2f6fc;
    --chedraui-muted: #bebebf;
}

html[data-theme="light"] .main-shell {
    background:
        radial-gradient(circle at 10% -15%, rgba(248, 148, 52, .12), transparent 38%),
        linear-gradient(180deg, #f7f6f5 0%, #efedeb 100%);
}

html[data-theme="dark"] .main-shell {
    background:
        radial-gradient(circle at 12% -18%, rgba(248, 148, 52, .18), transparent 40%),
        linear-gradient(155deg, #171718 0%, #202022 48%, #1b1b1d 100%);
}

/* Page and neutral surfaces. Geometry remains owned by existing components. */
html[data-theme] .main-shell-content {
    background: var(--chedraui-page-surface);
    border-color: var(--chedraui-border);
}

html[data-theme] .main-shell-content :where(
    .card, .glass-panel, .panel, .widget, .widget-card, .kpi-card,
    .schedule-card, .plans-filters, .plans-state, .plan-row,
    .profile-card, .company-card, .admin-users-card, .ops-card,
    .andon-panel, .board-shell, .table-card, .filter-card
) {
    background-color: var(--chedraui-surface);
    background-image: none;
    border-color: var(--chedraui-border);
    box-shadow: var(--chedraui-shadow);
}

/* Common page-local surface names used across all active modules. */
html[data-theme] .main-shell-content :where(
    .machine-card, .station-card, .dashboard-card, .dashboard-panel,
    .general-card, .detail-card, .list-card, .calendar-card,
    .activity-card, .agenda-card, .event-card, .answer-card,
    .execution-card, .monitor-card, .plan-card, .recurrence-card,
    .reminders-card, .checklist-card, .indicators-card,
    .profile-section-card, .profile-information-card, .profile-summary-card,
    .profile-signature-card, .profile-photo-card, .role-card,
    .company-grid-card, .company-group-card, .company-sla-card,
    .ops-assignment-card, .technician-alert-card, .attention-stage-card,
    .alert-created-card, .evidence-file-card, .validity-card,
    .compressor-summary-panel, .extruder-summary-panel,
    .daily-summary-narrative-panel, .participants-panel, .timing-panel,
    .timing-sla-panel
) {
    color: var(--chedraui-text);
    background-color: var(--chedraui-surface);
    background-image: none;
    border-color: var(--chedraui-border);
    box-shadow: var(--chedraui-shadow);
}

html[data-theme] .main-shell-content :where(
    .machine-card, .station-card, .dashboard-card, .dashboard-panel,
    .activity-card, .agenda-card, .event-card, .plan-card,
    .role-card, .company-grid-card, .company-group-card,
    .ops-assignment-card, .technician-alert-card
):hover {
    border-color: color-mix(in srgb, var(--chedraui-blue), var(--chedraui-border) 56%);
}

html[data-theme] .main-shell-content :where(.card, .widget, .kpi-card, .plan-row, .ops-card)[class*="hover"]:hover,
html[data-theme] .main-shell-content :where(.card-link, .clickable-card, .selectable-card):hover {
    background-color: var(--chedraui-surface-hover);
    border-color: color-mix(in srgb, var(--chedraui-blue), var(--chedraui-border) 58%);
}

/* Form controls. Semantic invalid/valid states are restored below. */
html[data-theme] .main-shell-content :where(input, select, textarea, .text-input) {
    background-color: var(--chedraui-input);
    border-color: var(--chedraui-border);
    color: var(--chedraui-text);
    transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

html[data-theme] .main-shell-content :where(input, select, textarea, .text-input):hover:not(:disabled):not([readonly]) {
    border-color: color-mix(in srgb, var(--chedraui-blue), var(--chedraui-border) 45%);
}

html[data-theme] .main-shell-content :where(input, select, textarea, .text-input):focus,
html[data-theme] .main-shell-content :where(input, select, textarea, .text-input):focus-visible {
    outline: 0;
    border-color: var(--chedraui-blue);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--chedraui-blue), transparent 84%);
}

html[data-theme] .main-shell-content select option:checked {
    color: var(--chedraui-text);
    background-color: var(--chedraui-surface-selected);
}

html[data-theme] .main-shell-content :where(input, textarea)::placeholder {
    color: var(--chedraui-muted);
    opacity: .82;
}

html[data-theme] .main-shell-content :where(input, select, textarea):disabled,
html[data-theme] .main-shell-content :where(input, select, textarea)[readonly] {
    background-color: var(--chedraui-disabled);
    border-color: var(--chedraui-border);
    color: var(--chedraui-muted);
    opacity: .78;
}

html[data-theme] .main-shell-content :where(.invalid, [aria-invalid="true"], input:invalid:not(:placeholder-shown)) {
    border-color: var(--state-critical);
}

html[data-theme] .main-shell-content :where(.valid, [data-state="success"]) {
    border-color: var(--state-online);
}

html[data-theme] .main-shell-content :where(input[type="checkbox"], input[type="radio"]) {
    accent-color: var(--chedraui-blue);
}

html[data-theme] .main-shell-content :where(input[type="checkbox"], input[type="radio"]):focus-visible {
    outline: 2px solid color-mix(in srgb, var(--chedraui-blue), transparent 34%);
    outline-offset: 2px;
}

html[data-theme] .main-shell-content :where(.switch, .status-toggle, .toggle) input:checked + :where(i, span, .track, .status-toggle-track) {
    background-color: var(--chedraui-blue);
    border-color: var(--chedraui-blue);
}

/* Buttons: opt-in variants avoid recoloring semantic status controls. */
html[data-theme] .main-shell-content :where(
    .btn-primary, .primary-button, .action, button.primary,
    .admin-users-primary, .profile-primary, .ops-button.primary
) {
    color: #fff;
    background-color: var(--chedraui-blue);
    background-image: none;
    border-color: var(--chedraui-blue);
}

html[data-theme] .main-shell-content :where(
    .btn-primary, .primary-button, .action, button.primary,
    .admin-users-primary, .profile-primary, .ops-button.primary
):hover:not(:disabled) {
    background-color: var(--chedraui-blue-hover);
    border-color: var(--chedraui-blue-hover);
}

html[data-theme] .main-shell-content :where(
    .toolbar-btn, .toolbar-icon-btn, .tool-btn, .series-tool-btn,
    .workspace-toolbar-btn, .chart-action-btn, .table-action,
    .view-button, .back-button, .range-btn, .ops-history-button,
    .attention-config-button, .company-upload-button,
    .evidence-add-button, .evidence-open-button, .report-download-button
) {
    color: var(--chedraui-text);
    background-color: var(--chedraui-surface-secondary);
    border-color: var(--chedraui-border);
}

html[data-theme] .main-shell-content :where(
    .toolbar-btn, .toolbar-icon-btn, .tool-btn, .series-tool-btn,
    .workspace-toolbar-btn, .chart-action-btn, .table-action,
    .view-button, .back-button, .range-btn, .ops-history-button,
    .attention-config-button, .company-upload-button,
    .evidence-add-button, .evidence-open-button, .report-download-button
):hover:not(:disabled) {
    color: var(--chedraui-blue);
    background-color: var(--chedraui-surface-hover);
    border-color: var(--chedraui-blue);
}

html[data-theme] .main-shell-content :where(.range-btn-primary, .ops-apply-button) {
    color: #fff;
    background-color: var(--chedraui-blue);
    border-color: var(--chedraui-blue);
}

html[data-theme] .main-shell-content :where(
    .btn-primary, .primary-button, .action, button.primary,
    .admin-users-primary, .profile-primary, .ops-button.primary
):active:not(:disabled) {
    background-color: var(--chedraui-blue-active);
    border-color: var(--chedraui-blue-active);
}

html[data-theme] .main-shell-content :where(
    .btn-secondary, .secondary-button, .ghost-button, .filter-button,
    .admin-users-secondary, .ops-button:not(.primary), .icon-button
) {
    color: var(--chedraui-text);
    background-color: var(--chedraui-surface-secondary);
    border-color: var(--chedraui-border);
}

html[data-theme] .main-shell-content :where(.history-filters, .events-filters, .dashboard-company-filter) {
    background-color: var(--chedraui-surface-secondary);
    border-color: var(--chedraui-border);
}

html[data-theme] .main-shell-content :where(
    .btn-secondary, .secondary-button, .ghost-button, .filter-button,
    .admin-users-secondary, .ops-button:not(.primary), .icon-button
):hover:not(:disabled) {
    color: var(--chedraui-blue);
    background-color: var(--chedraui-surface-hover);
    border-color: color-mix(in srgb, var(--chedraui-blue), var(--chedraui-border) 45%);
}

html[data-theme] .main-shell-content :where(button, a, [role="button"]):focus-visible {
    outline: 2px solid color-mix(in srgb, var(--chedraui-blue), transparent 35%);
    outline-offset: 2px;
}

html[data-theme] .main-shell-content :where(button, .btn, [role="button"]):disabled,
html[data-theme] .main-shell-content :where(button, .btn, [role="button"])[aria-disabled="true"] {
    filter: saturate(.45);
    opacity: .55;
}

html[data-theme] .main-shell-content :where(.danger-button, .btn-danger, .destructive, .modal-danger-action) {
    color: var(--state-critical);
    background-color: color-mix(in srgb, var(--state-critical), transparent 90%);
    border-color: color-mix(in srgb, var(--state-critical), transparent 48%);
}

/* Tabs: Rassini gray interaction with a restrained orange selected marker. */
html[data-theme] .main-shell-content :where(.tabs, .tab-list, [role="tablist"]) :where(a, button, [role="tab"]):hover {
    color: var(--chedraui-blue);
    background-color: var(--chedraui-surface-hover);
}

html[data-theme] .main-shell-content :where(.tabs, .tab-list, [role="tablist"]) :where(.active, .selected, [aria-selected="true"]) {
    color: var(--chedraui-blue);
    border-color: var(--chedraui-orange);
    box-shadow: inset 0 -3px 0 var(--chedraui-orange);
}

/* Filters remain neutral; contained controls inherit the shared form system. */
html[data-theme] .main-shell-content :where(
    .filters, .filter-bar, .filter-panel, .andon-filters, .plans-filters,
    .dashboard-scope-bar, .cost-filters
) {
    background-color: var(--chedraui-surface-secondary);
    background-image: none;
    border-color: var(--chedraui-border);
}

/* Neutral table system. Pagers are intentionally excluded. */
html[data-theme] .main-shell-content :where(table, .status-table, .data-table) {
    background-color: var(--chedraui-surface);
    color: var(--chedraui-text);
}

html[data-theme] .main-shell-content :where(.ops-table, .events-table, .line-status-table, .company-sla-table) {
    color: var(--chedraui-text);
    background-color: var(--chedraui-surface);
}

html[data-theme] .main-shell-content :where(table, .status-table, .data-table) :where(thead, th) {
    background-color: var(--chedraui-surface-secondary);
    color: var(--chedraui-muted);
    border-color: var(--chedraui-border);
}

html[data-theme] .main-shell-content :where(table, .status-table, .data-table) td {
    background-color: transparent;
    border-color: var(--chedraui-border);
}

html[data-theme] .main-shell-content :where(table, .status-table, .data-table) tbody tr:hover {
    background-color: color-mix(in srgb, var(--chedraui-blue), transparent 94%);
}

html[data-theme] .main-shell-content :where(table, .status-table, .data-table) tbody tr:is(.selected, [aria-selected="true"]) {
    background-color: var(--chedraui-surface-selected);
    box-shadow: inset 3px 0 0 var(--chedraui-orange);
}

/* Modal, dropdown and tooltip surfaces. */
html[data-theme] .main-shell-content :where(.modal-backdrop, .modal-overlay, .dialog-overlay, .andon-modal-backdrop) {
    background-color: var(--chedraui-overlay);
}

html[data-theme] .main-shell-content :where(.modal-content, .modal-dialog, [role="dialog"], .andon-modal) {
    color: var(--chedraui-text);
    background-color: var(--chedraui-surface);
    background-image: none;
    border-color: var(--chedraui-border);
    box-shadow: var(--chedraui-shadow);
}

html[data-theme] .main-shell-content :where(.modal-header, .modal-footer, .dialog-header, .dialog-footer) {
    border-color: var(--chedraui-border);
}

html[data-theme] .main-shell-content :where(.dropdown-menu, .popover, .context-menu, [role="menu"]) {
    color: var(--chedraui-text);
    background-color: var(--chedraui-surface);
    background-image: none;
    border-color: var(--chedraui-border);
    box-shadow: var(--chedraui-shadow);
}

html[data-theme] .main-shell-content :where(
    .profile-password-modal, .profile-photo-modal, .profile-avatar-modal,
    .admin-avatar-modal, .role-modal, .cost-message-modal, .day-agenda-modal
) {
    color: var(--chedraui-text);
    background-color: var(--chedraui-surface);
    background-image: none;
    border-color: var(--chedraui-border);
    box-shadow: var(--chedraui-shadow);
}

html[data-theme] .main-shell-content :where(.dropdown-menu, .popover, .context-menu, [role="menu"]) :where(a, button, [role="menuitem"]):hover {
    color: var(--chedraui-blue);
    background-color: var(--chedraui-surface-hover);
}

html[data-theme] .main-shell-content :where(.tooltip, [role="tooltip"]) {
    color: var(--chedraui-text);
    background-color: var(--chedraui-surface-secondary);
    border-color: var(--chedraui-border);
    box-shadow: var(--chedraui-shadow);
}

/* Branding loaders only. Semantic progress variants retain their own colors. */
html[data-theme] .main-shell-content :where(.spinner:not(.success):not(.warning):not(.error), .loading-spinner) {
    color: var(--chedraui-blue);
    border-top-color: var(--chedraui-blue);
}

html[data-theme] .main-shell-content :where(progress:not(.success):not(.warning):not(.error), .progress-bar:not(.success):not(.warning):not(.error)) {
    accent-color: var(--chedraui-blue);
    background-color: var(--chedraui-blue);
}

/*
 * Smart Andon and Administration ship with a legacy theme adapter whose
 * selectors are intentionally specific. These selectors stay within the
 * page host and only replace visual properties, never geometry.
 */
html[data-theme] .main-shell-content .smart-andon-module-host .board-shell,
html[data-theme] .main-shell-content .smart-andon-module-host .andon-panel,
html[data-theme] .main-shell-content .smart-andon-module-host .widget,
html[data-theme] .main-shell-content .smart-andon-module-host .kpi-card,
html[data-theme] .main-shell-content .smart-andon-module-host .company-card,
html[data-theme] .main-shell-content .smart-andon-module-host .ops-card {
    background: var(--chedraui-surface);
    border-color: var(--chedraui-border);
    box-shadow: var(--chedraui-shadow);
}

html[data-theme] .main-shell-content .smart-andon-module-host .andon-filters,
html[data-theme] .main-shell-content .smart-andon-module-host .dashboard-scope-bar,
html[data-theme] .main-shell-content .smart-andon-module-host .cost-filters {
    background: var(--chedraui-surface-secondary);
    border-color: var(--chedraui-border);
}

html[data-theme] .main-shell-content .smart-andon-module-host .text-input,
html[data-theme] .main-shell-content .smart-andon-module-host .form-control,
html[data-theme] .main-shell-content .smart-andon-module-host .form-select,
html[data-theme] .main-shell-content .smart-andon-module-host .hardware-screen-modal .text-input {
    color: var(--chedraui-text);
    background: var(--chedraui-input);
    border-color: var(--chedraui-border-strong);
}

html[data-theme] .main-shell-content .smart-andon-module-host .text-input:hover:not(:disabled):not([readonly]),
html[data-theme] .main-shell-content .smart-andon-module-host .form-control:hover:not(:disabled):not([readonly]),
html[data-theme] .main-shell-content .smart-andon-module-host .form-select:hover:not(:disabled) {
    background: var(--chedraui-surface-hover);
    border-color: color-mix(in srgb, var(--chedraui-blue), var(--chedraui-border) 38%);
}

html[data-theme] .main-shell-content .smart-andon-module-host .text-input:focus,
html[data-theme] .main-shell-content .smart-andon-module-host .form-control:focus,
html[data-theme] .main-shell-content .smart-andon-module-host .form-select:focus,
html[data-theme] .main-shell-content .smart-andon-module-host .hardware-screen-modal .text-input:focus {
    color: var(--chedraui-text);
    background: var(--chedraui-input);
    border-color: var(--chedraui-blue);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--chedraui-blue), transparent 82%);
}

html[data-theme] .main-shell-content .smart-andon-module-host .andon-modal-backdrop,
html[data-theme] .main-shell-content .smart-andon-module-host .hardware-screen-backdrop,
html[data-theme] .main-shell-content .smart-andon-module-host .profile-modal-backdrop {
    background: var(--chedraui-overlay);
}

html[data-theme] .main-shell-content .smart-andon-module-host .andon-modal,
html[data-theme] .main-shell-content .smart-andon-module-host .hardware-screen-modal,
html[data-theme] .main-shell-content .smart-andon-module-host .profile-password-modal,
html[data-theme] .main-shell-content .smart-andon-module-host .profile-photo-modal,
html[data-theme] .main-shell-content .smart-andon-module-host .profile-avatar-modal,
html[data-theme] .main-shell-content .smart-andon-module-host .admin-avatar-modal {
    color: var(--chedraui-text);
    background: var(--chedraui-surface);
    background-image: none;
    border-color: color-mix(in srgb, var(--chedraui-blue), var(--chedraui-border) 66%);
    box-shadow: 0 22px 52px rgba(0, 0, 0, .34);
}

html[data-theme] .main-shell-content .smart-andon-module-host .andon-modal > header,
html[data-theme] .main-shell-content .smart-andon-module-host .andon-modal > footer,
html[data-theme] .main-shell-content .smart-andon-module-host .hardware-screen-modal > header,
html[data-theme] .main-shell-content .smart-andon-module-host .hardware-screen-modal > footer {
    background: var(--chedraui-surface-secondary);
    border-color: var(--chedraui-border);
}

html[data-theme] .main-shell-content .smart-andon-module-host .action,
html[data-theme] .main-shell-content .smart-andon-module-host .admin-users-primary,
html[data-theme] .main-shell-content .smart-andon-module-host .profile-primary,
html[data-theme] .main-shell-content .smart-andon-module-host .ops-button.primary {
    color: #fff;
    background: var(--chedraui-blue);
    background-image: none;
    border-color: var(--chedraui-blue);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--chedraui-blue), transparent 70%);
}

html[data-theme] .main-shell-content .smart-andon-module-host .action:hover:not(:disabled),
html[data-theme] .main-shell-content .smart-andon-module-host .admin-users-primary:hover:not(:disabled),
html[data-theme] .main-shell-content .smart-andon-module-host .profile-primary:hover:not(:disabled),
html[data-theme] .main-shell-content .smart-andon-module-host .ops-button.primary:hover:not(:disabled) {
    color: #fff;
    background: var(--chedraui-blue-hover);
    border-color: var(--chedraui-blue-hover);
}

html[data-theme] .main-shell-content .smart-andon-module-host .ghost-button,
html[data-theme] .main-shell-content .smart-andon-module-host .admin-users-secondary,
html[data-theme] .main-shell-content .smart-andon-module-host .ops-button:not(.primary) {
    color: var(--chedraui-text);
    background: var(--chedraui-surface-secondary);
    border-color: var(--chedraui-border-strong);
}

html[data-theme] .main-shell-content .smart-andon-module-host .ghost-button:hover:not(:disabled),
html[data-theme] .main-shell-content .smart-andon-module-host .admin-users-secondary:hover:not(:disabled),
html[data-theme] .main-shell-content .smart-andon-module-host .ops-button:not(.primary):hover:not(:disabled) {
    color: var(--chedraui-blue);
    background: var(--chedraui-surface-hover);
    border-color: var(--chedraui-blue);
}

html[data-theme] .main-shell-content .smart-andon-module-host :where(.status-toggle, .switch) input:checked + :where(.status-toggle-track, i) {
    background: var(--chedraui-blue);
    border-color: var(--chedraui-blue);
}

html[data-theme] .main-shell-content .smart-andon-module-host :where(.ops-tabs, .company-tabs, .profile-nav) :where(.active, .selected, [aria-selected="true"]) {
    color: var(--chedraui-blue);
    border-color: var(--chedraui-orange);
    box-shadow: inset 0 -3px 0 var(--chedraui-orange);
}

html[data-theme] .main-shell-content .smart-andon-module-host .company-tabs button.active,
html[data-theme] .main-shell-content .smart-andon-module-host .hardware-subtabs button.active {
    color: var(--chedraui-blue);
    background: var(--chedraui-surface-selected);
    border-color: var(--chedraui-orange);
    box-shadow: inset 0 -3px 0 var(--chedraui-orange);
}

html[data-theme] .main-shell-content .smart-andon-module-host .andon-tabs button.active {
    color: var(--chedraui-orange);
    background: var(--chedraui-surface-selected);
    border-color: var(--chedraui-blue);
    box-shadow: inset 0 -3px 0 var(--chedraui-blue);
}

html[data-theme] .main-shell-content .smart-andon-module-host :where(.ops-table, .status-table, .bitacora-compact-table) thead,
html[data-theme] .main-shell-content .smart-andon-module-host :where(.ops-table, .status-table, .bitacora-compact-table) th {
    color: var(--chedraui-muted);
    background: var(--chedraui-surface-secondary);
    border-color: var(--chedraui-border);
}

html[data-theme] .main-shell-content .smart-andon-module-host :where(.ops-table, .status-table, .bitacora-compact-table) td {
    border-color: var(--chedraui-border);
}

html[data-theme] .main-shell-content .smart-andon-module-host :where(.ops-table, .status-table, .bitacora-compact-table) tbody tr:hover {
    background: color-mix(in srgb, var(--chedraui-blue), transparent 93%);
}

/* Maintenance uses legacy hardcoded interaction blue; normalize branding only. */
html[data-theme] .main-shell-content .schedule-maintenance-page .priority button.selected,
html[data-theme] .main-shell-content .new-plan-page :where(.recurrence-options button.selected, .week-days button.selected) {
    color: var(--chedraui-blue);
    background: color-mix(in srgb, var(--chedraui-blue), transparent 90%);
    border-color: var(--chedraui-blue);
}

html[data-theme] .main-shell-content .schedule-maintenance-page .switch input:checked + i {
    background: var(--chedraui-blue);
}

html[data-theme] .main-shell-content .schedule-maintenance-page :where(.section-title button, .check-row > span, .order-summary dd > span),
html[data-theme] .main-shell-content .new-plan-page .section-heading button {
    color: var(--chedraui-blue);
}

/* Filled corporate-gray controls always use white foreground for contrast. */
html[data-theme] .main-shell-content :is(
    .pager-button.active,
    .pagination button.active,
    .pagination button.current,
    .plans-footer button.current,
    .history-footer button.current,
    .page-button.active,
    .page-button.current,
    [class*="pagination"] button[aria-current="page"],
    [class*="pager"] button[aria-current="page"]
) {
    color: #fff !important;
    background-color: var(--chedraui-blue);
    border-color: var(--chedraui-blue);
}

html[data-theme] .main-shell-content :is(
    .pager-button.active,
    .pagination button.active,
    .pagination button.current,
    .plans-footer button.current,
    .history-footer button.current,
    .page-button.active,
    .page-button.current,
    [class*="pagination"] button[aria-current="page"],
    [class*="pager"] button[aria-current="page"]
) :where(i, span, svg) {
    color: #fff !important;
    fill: currentColor;
}

/* The first breadcrumb identifies the active module in Rassini orange. */
html[data-theme] body .app-header .breadcrumbs li:first-child :is(a, span) {
    color: var(--chedraui-orange);
}

html[data-theme] .main-shell-content .schedule-maintenance-page :where(.check-row > span, .order-summary dd > span) {
    background: color-mix(in srgb, var(--chedraui-blue), transparent 88%);
}

/* Native selects can retain a legacy blue shorthand from page-local styles. */
html[data-theme="dark"] .main-shell-content select {
    background-color: #2d2d2f !important;
    border-color: #5f5f62 !important;
    color: #f2f6fc !important;
    color-scheme: dark;
}

html[data-theme="light"] .main-shell-content select {
    background-color: #ffffff !important;
    border-color: #c5c1bd !important;
    color: #29292b !important;
    color-scheme: light;
}

html[data-theme] .main-shell-content select:focus {
    border-color: #f89434 !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, #f89434, transparent 80%) !important;
}