/* smkk-button-contrast.css — DEFINITIVE readability for highlighted/selected buttons, everywhere.
 *
 * Why this exists (2026-07-02): the prior fix in kk-polish.css only applied under
 *   html[data-smkk-theme] body.kk-brand.app-mode:not(.ai-helper-page)
 * But `app-mode` is intentionally NOT set on the phone portal (isPhonePortal), the kk-site, or
 * embeds (_Layout.cshtml ~line 37), and the PAFDS orders layout (_PafdsLayout.cshtml) never loaded
 * kk-polish.css at all. So on mobile, the orders site, and kk-site pages the highlighted-button
 * text stayed unreadable (white/near-invisible on a light fill) — the long-standing complaint.
 *
 * This sheet is loaded LAST in every layout and is UNGATED (no body/theme-class requirement), with
 * hard color fallbacks so it works even where the --smkk-theme-* tokens are undefined (orders site).
 * It guarantees: any highlighted / selected / active / primary control gets a solid dark fill plus
 * high-contrast light text. It does NOT touch non-highlighted buttons, and it does not strip intended
 * gradients (it only sets a solid background-COLOR underneath, so text is always on a dark surface).
 */

button[aria-pressed="true"],
button[aria-selected="true"],
[role="button"][aria-pressed="true"],
[role="button"][aria-selected="true"],
[role="tab"][aria-selected="true"],
[role="option"][aria-selected="true"],
[aria-current="true"], [aria-current="page"],
.btn.active, .btn-primary, .btn-check:checked + .btn,
.app-btn.primary, .app-btn.active, .app-btn.is-active, .app-btn.is-selected,
.pill.active, .pill.is-active, .pill.is-selected,
.chip.active, .chip.is-active, .chip.is-selected,
.tag.active, .tag.is-active, .tag.is-selected,
.badge.active, .badge.is-active, .badge.is-selected,
.status-pill.active, .status-pill.is-active, .status-pill.is-selected,
.filter-pill.active, .filter-pill.is-active, .filter-pill.is-selected,
.filter-button.active, .filter-button.is-active, .filter-button.is-selected,
.toggle.active, .toggle.is-active, .segmented .active,
.tab.active, .nav-pill.active, .nav-link.active,
.dashboard-range-link.active, .dashboard-compare-link.active, .desktop-range-quick.active,
.desktop-pill.active, .desktop-button.active, .dashboard-activity-filter.is-active,
.inventory-action-btn.active, .inventory-filter-btn.active,
.sales-stage-step.active, .sales-lead-board-filter.active, .installer-field-filter.active,
.kk-app-common-link.active, .kk-operations-command-link.active,
.identity-lane-tab.is-active, .vehicle-chip.active, .app-request-chip.active,
.mozaik-queue-item.active, .mozaik-badge.active,
.kk-mobile-dock-link.active, .kk-mobile-appbar-action.active,
.smkk-more-sheet__link.active,
.phone-pane-button.is-active, .phone-pane-button[aria-selected="true"],
.spx-button[aria-pressed="true"], .spx-button.is-selected,
.spx-tab[aria-selected="true"], .spx-tab.is-selected, .spx-tab.spx-is-active,
.spx-filter-pill[aria-pressed="true"], .spx-filter-pill.is-selected, .spx-filter-pill.spx-is-active,
.spx-chip.is-selected, .spx-sidebar-item.spx-is-active,
.health-chip.is-active, .seg-pill.is-active,
.range-link.active, .menu-link.active, .rail-link.active,
.topo-scope-chip.active, .topo-btn.active,
.is-selected, .is-active, .selected {
    background-color: var(--smkk-spx-primary, var(--smkk-theme-action, #17384a)) !important;
    border-color: var(--smkk-spx-primary, var(--smkk-theme-action, #17384a)) !important;
    color: var(--smkk-spx-text-on-accent, var(--smkk-theme-action-text, #ffffff)) !important;
    text-shadow: none !important;
    -webkit-text-fill-color: currentColor !important;
}

/* Mobile tap/highlight states must stay readable even before JS toggles active classes. */
:is(.btn, .app-btn, .cta-btn, .ghost-btn, .pill, .chip, .tag, .filter-pill, .filter-button, .nav-link, .tab, .toggle, button[type="submit"], button[aria-pressed], button[aria-selected]):is(:hover, :focus-visible, :active) {
    background-color: var(--smkk-theme-action, #175a4a) !important;
    border-color: var(--smkk-theme-action, #175a4a) !important;
    color: var(--smkk-theme-action-text, #ffffff) !important;
    -webkit-text-fill-color: var(--smkk-theme-action-text, #ffffff) !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

:is(.btn-primary, .app-btn.primary, .cta-btn, button[type="submit"], .filter-pill.active, .filter-button.active, .nav-link.active, button[aria-pressed="true"], button[aria-selected="true"]):is(:hover, :focus-visible, :active) {
    background-color: var(--smkk-theme-action, #175a4a) !important;
    border-color: var(--smkk-theme-action, #175a4a) !important;
}

/* Nested text/icons inside a highlighted control inherit the same readable color. */
button[aria-pressed="true"] :is(span, small, strong, b, i, em, label, svg),
button[aria-selected="true"] :is(span, small, strong, b, i, em, label, svg),
[role="tab"][aria-selected="true"] :is(span, small, strong, b, i, em, label, svg),
.btn.active :is(span, small, strong, b, i, em, label, svg),
.btn-primary :is(span, small, strong, b, i, em, label, svg),
.app-btn.primary :is(span, small, strong, b, i, em, label, svg),
.app-btn.active :is(span, small, strong, b, i, em, label, svg),
.pill.active :is(span, small, strong, b, i, em, label, svg),
.chip.active :is(span, small, strong, b, i, em, label, svg),
.filter-pill.active :is(span, small, strong, b, i, em, label, svg),
.filter-button.active :is(span, small, strong, b, i, em, label, svg),
.nav-link.active :is(span, small, strong, b, i, em, label, svg),
.desktop-pill.active :is(span, small, strong, b, i, em, label, svg),
.desktop-button.active :is(span, small, strong, b, i, em, label, svg),
.dashboard-activity-filter.is-active :is(span, small, strong, b, i, em, label, svg),
.identity-lane-tab.is-active :is(span, small, strong, b, i, em, label, svg),
.vehicle-chip.active :is(span, small, strong, b, i, em, label, svg),
.app-request-chip.active :is(span, small, strong, b, i, em, label, svg),
.mozaik-queue-item.active :is(span, small, strong, b, i, em, label, svg),
.mozaik-badge.active :is(span, small, strong, b, i, em, label, svg),
.kk-mobile-dock-link.active :is(span, small, strong, b, i, em, label, svg, path),
.kk-mobile-appbar-action.active :is(span, small, strong, b, i, em, label, svg, path),
.smkk-more-sheet__link.active :is(span, small, strong, b, i, em, label, svg, path),
.phone-pane-button.is-active :is(span, small, strong, b, i, em, label, svg, path),
.phone-pane-button[aria-selected="true"] :is(span, small, strong, b, i, em, label, svg, path),
.spx-button[aria-pressed="true"] :is(span, small, strong, b, i, em, label, svg, path),
.spx-button.is-selected :is(span, small, strong, b, i, em, label, svg, path),
.spx-tab[aria-selected="true"] :is(span, small, strong, b, i, em, label, svg, path),
.spx-tab.is-selected :is(span, small, strong, b, i, em, label, svg, path),
.spx-tab.spx-is-active :is(span, small, strong, b, i, em, label, svg, path),
.spx-filter-pill[aria-pressed="true"] :is(span, small, strong, b, i, em, label, svg, path),
.spx-filter-pill.is-selected :is(span, small, strong, b, i, em, label, svg, path),
.spx-filter-pill.spx-is-active :is(span, small, strong, b, i, em, label, svg, path),
.is-selected :is(span, small, strong, b, i, em, label, svg),
.is-active :is(span, small, strong, b, i, em, label, svg),
.selected :is(span, small, strong, b, i, em, label, svg),
:is(.btn, .app-btn, .cta-btn, .ghost-btn, .pill, .chip, .tag, .filter-pill, .filter-button, .nav-link, .tab, .toggle, button[type="submit"], button[aria-pressed], button[aria-selected]):is(:hover, :focus-visible, :active) :is(span, small, strong, b, i, em, label, svg) {
    color: var(--smkk-theme-action-text, #ffffff) !important;
    -webkit-text-fill-color: var(--smkk-theme-action-text, #ffffff) !important;
    fill: currentColor !important;
}

@media (hover: none), (pointer: coarse) {
    :is(.btn, .app-btn, .cta-btn, .ghost-btn, .pill, .chip, .tag, .filter-pill, .filter-button, .nav-link, .tab, .toggle, .desktop-pill, .desktop-button, .dashboard-activity-filter, .identity-lane-tab, .vehicle-chip, .app-request-chip, .mozaik-queue-item, .mozaik-badge, .kk-mobile-dock-link, .kk-mobile-appbar-action, .smkk-more-sheet__link, .phone-pane-button, .spx-button, .spx-tab, .spx-filter-pill, .range-link, .menu-link, .rail-link, button[type="submit"], button[aria-pressed], button[aria-selected], [role="button"][aria-pressed], [role="button"][aria-selected]):is(:active, :focus, :focus-visible),
    :is(.btn, .app-btn, .cta-btn, .ghost-btn, .pill, .chip, .tag, .filter-pill, .filter-button, .nav-link, .tab, .toggle, .desktop-pill, .desktop-button, .dashboard-activity-filter, .identity-lane-tab, .vehicle-chip, .app-request-chip, .mozaik-queue-item, .mozaik-badge, .kk-mobile-dock-link, .kk-mobile-appbar-action, .smkk-more-sheet__link, .phone-pane-button, .spx-button, .spx-tab, .spx-filter-pill, .range-link, .menu-link, .rail-link, button[type="submit"], button[aria-pressed], button[aria-selected], [role="button"][aria-pressed], [role="button"][aria-selected]).active,
    :is(.btn, .app-btn, .cta-btn, .ghost-btn, .pill, .chip, .tag, .filter-pill, .filter-button, .nav-link, .tab, .toggle, .desktop-pill, .desktop-button, .dashboard-activity-filter, .identity-lane-tab, .vehicle-chip, .app-request-chip, .mozaik-queue-item, .mozaik-badge, .kk-mobile-dock-link, .kk-mobile-appbar-action, .smkk-more-sheet__link, .phone-pane-button, .spx-button, .spx-tab, .spx-filter-pill, .range-link, .menu-link, .rail-link, button[type="submit"], button[aria-pressed], button[aria-selected], [role="button"][aria-pressed], [role="button"][aria-selected]).selected,
    :is(.btn, .app-btn, .cta-btn, .ghost-btn, .pill, .chip, .tag, .filter-pill, .filter-button, .nav-link, .tab, .toggle, .desktop-pill, .desktop-button, .dashboard-activity-filter, .identity-lane-tab, .vehicle-chip, .app-request-chip, .mozaik-queue-item, .mozaik-badge, .kk-mobile-dock-link, .kk-mobile-appbar-action, .smkk-more-sheet__link, .phone-pane-button, .spx-button, .spx-tab, .spx-filter-pill, .range-link, .menu-link, .rail-link, button[type="submit"], button[aria-pressed], button[aria-selected], [role="button"][aria-pressed], [role="button"][aria-selected]).is-active,
    :is(.btn, .app-btn, .cta-btn, .ghost-btn, .pill, .chip, .tag, .filter-pill, .filter-button, .nav-link, .tab, .toggle, .desktop-pill, .desktop-button, .dashboard-activity-filter, .identity-lane-tab, .vehicle-chip, .app-request-chip, .mozaik-queue-item, .mozaik-badge, .kk-mobile-dock-link, .kk-mobile-appbar-action, .smkk-more-sheet__link, .phone-pane-button, .spx-button, .spx-tab, .spx-filter-pill, .range-link, .menu-link, .rail-link, button[type="submit"], button[aria-pressed], button[aria-selected], [role="button"][aria-pressed], [role="button"][aria-selected]).is-selected {
        background: var(--smkk-spx-primary, var(--smkk-theme-action, #17384a)) !important;
        background-image: none !important;
        border-color: var(--smkk-spx-primary, var(--smkk-theme-action, #17384a)) !important;
        color: var(--smkk-spx-text-on-accent, var(--smkk-theme-action-text, #ffffff)) !important;
        -webkit-text-fill-color: currentColor !important;
        text-shadow: none !important;
        opacity: 1 !important;
    }
}