/**
 * JC Mi Agenda - Mobile Compatibility Fixes (iOS/Android)
 */

/* 1. Prevent zooming on focus in iOS Safari if font-size < 16px */
@media screen and (max-width: 767px) {
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* 2. Fix iOS Safari clickable element requirement for delegation */
a,
button,
[role="button"],
input,
select,
textarea,
.nav-control,
.hamburger,
[data-bs-toggle] {
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent;
}

/* 3. Smooth scrolling for iOS */
body {
    -webkit-overflow-scrolling: touch;
}

/* 4. Remove default iOS button styling */
input[type="submit"],
input[type="reset"],
input[type="button"],
button {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0.5rem;
}

/* 5. Fix for fixed header/sidebar on some mobile browsers */
#main-wrapper {
    display: flex;
    flex-direction: column;
}

.content-body {
    flex: 1 0 auto;
}

/* 6. Ensure dropdowns are visible on mobile */
@media screen and (max-width: 767px) {
    .dropdown-menu {
        max-height: 80vh;
        overflow-y: auto;
    }
}

/* 7. Specific fix for Bootstrap 5 dropdowns on mobile */
.dropdown-menu.show {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

/* 8. Fix for Lucide icons rendering */
[data-lucide] {
    display: inline-block;
    vertical-align: middle;
}

/* 9. Selectpicker / Bootstrap Select Mobile Fix */

/* When bootstrap-select is disabled on mobile, we need the original select to be visible and styled */
@media screen and (max-width: 991px) {
    /* Force original selects to be visible */
    select.default-select,
    select.selectpicker {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        min-height: calc(1.5em + 0.75rem + 2px) !important;
        padding: 0.375rem 0.75rem !important;
        border: var(--bs-border-width) solid #e4e4e4 !important;
        border-radius: var(--bs-border-radius) !important;
        background-color: var(--bs-body-bg) !important;
        -webkit-appearance: menulist !important;
        appearance: menulist !important;
        position: relative !important;
        z-index: 1 !important;
    }

    /* Hide the bootstrap-select replacement UI on mobile if it exists */
    .bootstrap-select:not(.mobile-enabled) {
        display: none !important;
    }
}

/* Native mobile appearance improvement */
select:not(.default-select):not(.selectpicker):not(.bs-select-hidden) {
    -webkit-appearance: menulist !important;
    appearance: auto !important;
    background-color: #fff;
}

/* Improve dropdown touch behavior on mobile */
@media screen and (max-width: 767px) {

    .bootstrap-select .dropdown-menu {
        font-size: 16px;
    }

    .bootstrap-select .dropdown-toggle {
        min-height: 44px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .bootstrap-select .dropdown-menu li a {
        padding-top: 12px;
        padding-bottom: 12px;
    }
}

@media screen and (max-width: 991px) {
	.jc-mobile-nav-open {
		overflow: hidden !important;
	}

	.jc-mobile-nav-open .deznav {
		z-index: 20000 !important;
	}

	.jc-mobile-nav-open .deznav .deznav-scroll {
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch;
	}
}

select.form-control,
select.default-select.form-control,
select.selectpicker.form-control {
	min-height: calc(1.5em + 0.75rem + 2px);
	border: var(--bs-border-width) solid #e4e4e4;
	border-radius: var(--bs-border-radius);
	padding: 0.375rem 0.75rem;
}

.bootstrap-select,
.bootstrap-select > .dropdown-toggle,
.bootstrap-select .dropdown-toggle,
.default-select .btn {
	width: 100% !important;
}

.bootstrap-select > .dropdown-toggle,
.bootstrap-select .dropdown-toggle,
.default-select .btn {
	min-height: calc(1.5em + 0.75rem + 2px);
	padding: 0.375rem 0.75rem;
	font-size: 0.875rem;
	line-height: 3.0;
	border: var(--bs-border-width) solid #e4e4e4;
	border-radius: var(--bs-border-radius);
	background-color: var(--bs-body-bg);
}

.bootstrap-select > .dropdown-toggle:focus,
.bootstrap-select .dropdown-toggle:focus,
.default-select .btn:focus {
	outline: 0;
	border-color: #b28ce1;
	box-shadow: 0 0 0 0.25rem rgba(100, 24, 195, 0.25);
}