/* Canonical Heatmap segmented controls.
 * Shared by CRM Heatmap, Client Dashboard Heatmap and tool/theme_design.
 * Keep Heatmap button-group geometry and states here only.
 */
.heatmap-device-type-buttons.btn-group.btn-group-sm,
.heatmap-report-type-buttons.btn-group.btn-group-sm,
.heatmap-screenshot-nav-group.btn-group.btn-group-sm {
    align-items: stretch !important;
    gap: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Visibility utilities must always win; these groups are shown/hidden dynamically. */
.heatmap-device-type-buttons.btn-group.btn-group-sm.d-none,
.heatmap-report-type-buttons.btn-group.btn-group-sm.d-none,
.heatmap-screenshot-nav-group.btn-group.btn-group-sm.d-none {
    display: none !important;
}

.heatmap-device-type-buttons.btn-group.btn-group-sm > .btn,
.heatmap-report-type-buttons.btn-group.btn-group-sm > .btn,
.heatmap-screenshot-nav-group.btn-group.btn-group-sm > .btn,
.heatmap-screenshot-nav-group.btn-group.btn-group-sm > .dropdown > .btn {
    min-height: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 11px !important;
    border: 1px solid var(--cd-component-border, rgba(143, 193, 230, .15)) !important;
    border-radius: 0 !important;
    color: var(--cd-component-muted, #90a9bf) !important;
    background: var(--cd-component-control, #081d2e) !important;
    box-shadow: none !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    transform: none !important;
}

.heatmap-device-type-buttons.btn-group.btn-group-sm > .btn + .btn,
.heatmap-report-type-buttons.btn-group.btn-group-sm > .btn + .btn,
.heatmap-screenshot-nav-group.btn-group.btn-group-sm > .btn + .btn,
.heatmap-screenshot-nav-group.btn-group.btn-group-sm > .dropdown,
.heatmap-screenshot-nav-group.btn-group.btn-group-sm > .dropdown + .btn {
    margin-left: -1px !important;
}

/* first-child cannot be used here because the device/type groups contain hidden inputs */
.heatmap-device-type-buttons.btn-group.btn-group-sm > .btn:first-of-type,
.heatmap-report-type-buttons.btn-group.btn-group-sm > .btn:first-of-type,
.heatmap-screenshot-nav-group.btn-group.btn-group-sm > .btn:first-of-type,
.heatmap-screenshot-nav-group.btn-group.btn-group-sm > .dropdown:first-child > .btn {
    border-radius: 9px 0 0 9px !important;
}

.heatmap-device-type-buttons.btn-group.btn-group-sm > .btn:last-of-type,
.heatmap-report-type-buttons.btn-group.btn-group-sm > .btn:last-of-type,
.heatmap-screenshot-nav-group.btn-group.btn-group-sm > .btn:last-of-type,
.heatmap-screenshot-nav-group.btn-group.btn-group-sm > .dropdown:last-child > .btn {
    border-radius: 0 9px 9px 0 !important;
}

.heatmap-device-type-buttons.btn-group.btn-group-sm > .btn:not(:disabled):not(.disabled):not(.active):not(.bg-secondary):hover,
.heatmap-device-type-buttons.btn-group.btn-group-sm > .btn:not(:disabled):not(.disabled):not(.active):not(.bg-secondary):focus-visible,
.heatmap-report-type-buttons.btn-group.btn-group-sm > .btn:not(:disabled):not(.disabled):not(.active):not(.bg-secondary):hover,
.heatmap-report-type-buttons.btn-group.btn-group-sm > .btn:not(:disabled):not(.disabled):not(.active):not(.bg-secondary):focus-visible,
.heatmap-screenshot-nav-group.btn-group.btn-group-sm .btn:not(:disabled):not(.disabled):hover,
.heatmap-screenshot-nav-group.btn-group.btn-group-sm .btn:not(:disabled):not(.disabled):focus-visible {
    border-color: var(--cd-component-border-strong, rgba(143, 193, 230, .24)) !important;
    color: var(--cd-text-strong, #eff8fc) !important;
    background: var(--cd-component-hover, rgba(77, 169, 255, .08)) !important;
    box-shadow: none !important;
    transform: none !important;
}

.heatmap-device-type-buttons.btn-group.btn-group-sm > .btn:is(.active, .bg-secondary),
.heatmap-device-type-buttons.btn-group.btn-group-sm > .btn:is(.active, .bg-secondary):hover,
.heatmap-device-type-buttons.btn-group.btn-group-sm > .btn:is(.active, .bg-secondary):focus-visible,
.heatmap-report-type-buttons.btn-group.btn-group-sm > .btn:is(.active, .bg-secondary),
.heatmap-report-type-buttons.btn-group.btn-group-sm > .btn:is(.active, .bg-secondary):hover,
.heatmap-report-type-buttons.btn-group.btn-group-sm > .btn:is(.active, .bg-secondary):focus-visible {
    border-color: rgba(128, 211, 226, .42) !important;
    color: #ffffff !important;
    background: linear-gradient(115deg, #7656c5 0%, #3c88bc 62%, #2e9eaa 100%) !important;
    box-shadow: 0 10px 24px rgba(45, 58, 133, .18), inset 0 1px 0 rgba(255, 255, 255, .16) !important;
    transform: none !important;
}

.heatmap-device-type-buttons.btn-group.btn-group-sm > .btn:disabled,
.heatmap-device-type-buttons.btn-group.btn-group-sm > .btn.disabled,
.heatmap-report-type-buttons.btn-group.btn-group-sm > .btn:disabled,
.heatmap-report-type-buttons.btn-group.btn-group-sm > .btn.disabled,
.heatmap-screenshot-nav-group.btn-group.btn-group-sm .btn:disabled,
.heatmap-screenshot-nav-group.btn-group.btn-group-sm .btn.disabled {
    color: var(--cd-component-subtle, #70899b) !important;
    background: var(--cd-component-soft, rgba(255, 255, 255, .035)) !important;
    box-shadow: none !important;
    opacity: .62 !important;
}

html[data-theme="light"] .heatmap-device-type-buttons.btn-group.btn-group-sm > .btn:not(.active):not(.bg-secondary),
html[data-theme="light"] .heatmap-report-type-buttons.btn-group.btn-group-sm > .btn:not(.active):not(.bg-secondary),
html[data-theme="light"] .heatmap-screenshot-nav-group.btn-group.btn-group-sm > .btn,
html[data-theme="light"] .heatmap-screenshot-nav-group.btn-group.btn-group-sm > .dropdown > .btn {
    border-color: rgba(68, 126, 163, .14) !important;
    color: #52758a !important;
    background: #f2f8fb !important;
}

html[data-theme="light"] .heatmap-device-type-buttons.btn-group.btn-group-sm > .btn:not(:disabled):not(.disabled):not(.active):not(.bg-secondary):hover,
html[data-theme="light"] .heatmap-device-type-buttons.btn-group.btn-group-sm > .btn:not(:disabled):not(.disabled):not(.active):not(.bg-secondary):focus-visible,
html[data-theme="light"] .heatmap-report-type-buttons.btn-group.btn-group-sm > .btn:not(:disabled):not(.disabled):not(.active):not(.bg-secondary):hover,
html[data-theme="light"] .heatmap-report-type-buttons.btn-group.btn-group-sm > .btn:not(:disabled):not(.disabled):not(.active):not(.bg-secondary):focus-visible,
html[data-theme="light"] .heatmap-screenshot-nav-group.btn-group.btn-group-sm .btn:not(:disabled):not(.disabled):hover,
html[data-theme="light"] .heatmap-screenshot-nav-group.btn-group.btn-group-sm .btn:not(:disabled):not(.disabled):focus-visible {
    border-color: rgba(68, 139, 181, .22) !important;
    color: #17384e !important;
    background: #e7f2f7 !important;
}

html[data-theme="light"] .heatmap-device-type-buttons.btn-group.btn-group-sm > .btn:is(.active, .bg-secondary),
html[data-theme="light"] .heatmap-device-type-buttons.btn-group.btn-group-sm > .btn:is(.active, .bg-secondary):hover,
html[data-theme="light"] .heatmap-device-type-buttons.btn-group.btn-group-sm > .btn:is(.active, .bg-secondary):focus-visible,
html[data-theme="light"] .heatmap-report-type-buttons.btn-group.btn-group-sm > .btn:is(.active, .bg-secondary),
html[data-theme="light"] .heatmap-report-type-buttons.btn-group.btn-group-sm > .btn:is(.active, .bg-secondary):hover,
html[data-theme="light"] .heatmap-report-type-buttons.btn-group.btn-group-sm > .btn:is(.active, .bg-secondary):focus-visible {
    border-color: rgba(128, 211, 226, .42) !important;
    color: #ffffff !important;
    background: linear-gradient(115deg, #7656c5 0%, #3c88bc 62%, #2e9eaa 100%) !important;
    box-shadow: 0 10px 24px rgba(45, 58, 133, .14), inset 0 1px 0 rgba(255, 255, 255, .2) !important;
}