/* Temperature sensor mobile touch fix
   Scope: temperature-sensor.php only. Common theme CSS is not modified. */

.tss-page .tss-tabs,
.tss-page #tssModelTabs {
    position: relative !important;
    z-index: 5 !important;
}

.tss-page .tss-tabs button,
.tss-page #tssModelTabs button {
    position: relative !important;
    z-index: 6 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    cursor: pointer !important;
}

@media (max-width: 980px) {
    .tss-page #tssModelTabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-x: contain !important;
        gap: 8px !important;
        padding: 2px 2px 8px !important;
        margin-bottom: 12px !important;
    }

    .tss-page #tssModelTabs button {
        flex: 0 0 auto !important;
        min-width: max-content !important;
        min-height: 42px !important;
        padding: 0 14px !important;
        line-height: 1 !important;
        user-select: none !important;
        -webkit-user-select: none !important;
    }

    .tss-page .tss-model-grid {
        position: relative !important;
        z-index: 1 !important;
    }
}

html.tss-mobile-device .tss-page #tssModelTabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
}

html.tss-mobile-device .tss-page #tssModelTabs button {
    flex: 0 0 auto !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
}


/* Model tab filter fix
   Mobile CSS uses display:grid!important for model cards, so hidden items need an
   equally strong rule. */
.tss-page .tss-model-card.tss-is-filter-hidden,
.tss-page .tss-model-card[hidden] {
    display: none !important;
}