/* System V3.7 - mobile tap highlight fix */
html, body, body * {
    -webkit-tap-highlight-color: transparent !important;
}

/* Full-screen modal backdrops must never behave like one giant tap target. */
.modal_back,
.small_modal_out, .large_modal_out,
.over_modal_out, .over_emodal_out,
.top_modal_out, .tab_error_out {
    cursor: default !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* Keep touch handling on the real controls only. */
button, a, [role="button"], [onclick],
.bclick, .sys_sel, .sys_opt,
.modal_menu_item, .tab_menu_item, .reg_menu_item,
.modal_top_item, .head_option, .left_menu_item, .footer_item,
.user_item, .sub_list_item, .switch_item, .room_elem, .room_celem {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent !important;
}

/* Do not let focus/tap feedback leak from a child to the full modal wrapper. */
.modal_in, .modal_content, .profile_wrap, .profile_content_wrap {
    -webkit-tap-highlight-color: transparent !important;
}


/* V3.8: guaranteed save confirmation, independent of theme/modal layers. */
#sys_saved_toast.sys_saved_toast,
.sys_saved_toast {
    position: fixed !important;
    left: 50% !important;
    top: max(18px, env(safe-area-inset-top)) !important;
    transform: translate(-50%, -20px) !important;
    z-index: 2147483647 !important;
    background: rgba(18, 145, 72, .96) !important;
    color: #fff !important;
    padding: 10px 18px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    box-shadow: 0 6px 20px rgba(0,0,0,.28) !important;
    pointer-events: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity .15s ease, transform .15s ease, visibility .15s ease !important;
    white-space: nowrap !important;
}
#sys_saved_toast.sys_saved_toast_show,
.sys_saved_toast.sys_saved_toast_show {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate(-50%, 0) !important;
}

/* V3.8 mobile: Chrome can synthesize/stick :hover and make a large parent look
   pressed. Remove those desktop-only visual states on coarse touch screens. */
@media (hover: none), (pointer: coarse) {
    html, body, body * {
        -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
    }

    /* Do not tint the whole viewport when a profile/box is opened on mobile. */
    .modal_back,
    .small_modal_out, .large_modal_out,
    .over_modal_out, .over_emodal_out,
    .top_modal_out, .tab_error_out {
        background-color: transparent !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    /* Desktop hover feedback must not remain stuck after a finger tap. */
    .bhover:hover, .bhoverr:hover,
    .bbackhover:hover, .bbackhoverb:hover,
    .blisting:hover, .bpmenu:hover, .bsub:hover,
    .bmenu:hover, .submenu:hover,
    .pag_btn:hover {
        background-color: transparent !important;
        box-shadow: none !important;
        filter: none !important;
    }

    .user_item:hover { opacity: inherit !important; }
    .sub_options:hover, .psub_options:hover {
        transition: none !important;
    }

    button, a, [onclick], .bclick, .modal_menu_item, .tab_menu_item,
    .reg_menu_item, .modal_top_item, .head_option, .left_menu_item,
    .footer_item, .user_item, .room_elem, .room_celem {
        -webkit-tap-highlight-color: transparent !important;
        outline: none !important;
    }
}


/* V3.9 definitive mobile modal backdrop fix. */
@media (hover:none), (pointer:coarse), (max-width:900px) {
  #small_modal.modal_back, #large_modal.modal_back, #over_modal.modal_back,
  #over_emodal.modal_back, #top_modal.modal_back {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
  }
}