/**
 * MOBILE TOUCH TARGET FIXES
 * Purpose: Ensure all interactive elements meet minimum 44x44px size (Apple HIG / Material Design)
 * Issue: Many buttons were too small for reliable touch interaction
 * Impact: Improved mobile usability, reduced mis-taps
 */

/* ═══════════════════════════════════════════════════════════════════ */
/* MINIMUM TOUCH TARGET SIZES - 44x44px minimum                       */
/* ═══════════════════════════════════════════════════════════════════ */

/* All buttons must meet minimum size */
button,
.btn,
.button,
a.btn,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 12px 16px !important;
    font-size: 16px !important; /* Prevent iOS zoom on focus */
}

/* Icon-only buttons */
.icon-btn,
button.icon-only,
.btn-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 48px !important;
    min-height: 48px !important;
    padding: 12px !important;
}

/* Small action buttons */
.action-btn,
.btn-sm {
    min-height: 44px !important;
    padding: 10px 20px !important;
}

/* Link-style buttons */
a:not(.no-touch-target) {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 8px 4px;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* FORM INPUTS - Minimum 44px height                                   */
/* ═══════════════════════════════════════════════════════════════════ */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
textarea,
select {
    min-height: 44px !important;
    font-size: 16px !important; /* Prevent iOS zoom */
    padding: 12px 16px !important;
}

/* Checkbox and radio buttons */
input[type="checkbox"],
input[type="radio"] {
    min-width: 24px !important;
    min-height: 24px !important;
    /* Add larger tap target with padding */
    padding: 10px !important;
}

/* Checkbox/radio labels - expand tap target */
label.checkbox,
label.radio {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 0;
    cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* SPACING BETWEEN INTERACTIVE ELEMENTS                                */
/* ═══════════════════════════════════════════════════════════════════ */

/* Button groups - ensure minimum spacing */
.btn-group button,
.button-group button {
    margin: 8px 4px !important; /* 16px total gap between buttons */
}

.action-row {
    display: flex;
    gap: 12px !important;
    flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* MOBILE-SPECIFIC ADJUSTMENTS                                         */
/* ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Increase button sizes on mobile */
    button,
    .btn,
    .button {
        min-height: 48px !important;
        padding: 14px 20px !important;
        font-size: 16px !important;
    }

    /* Full-width buttons on mobile */
    .btn-mobile-full {
        width: 100% !important;
        display: block !important;
    }

    /* Stacked button groups */
    .btn-group,
    .button-group {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .btn-group button,
    .button-group button {
        width: 100%;
        margin: 0 !important;
    }

    /* Navigation tabs */
    .nav-tabs li,
    .tab-item {
        min-height: 48px;
        padding: 12px 16px;
    }

    /* List items */
    .list-item,
    li.clickable {
        min-height: 48px;
        padding: 12px 16px;
    }

    /* Card actions */
    .card-action,
    .card button {
        min-height: 48px;
    }

    /* Modal close buttons */
    .modal-close,
    .close-btn,
    button.close {
        min-width: 48px !important;
        min-height: 48px !important;
    }

    /* Dropdown menu items */
    .dropdown-item,
    .menu-item {
        min-height: 48px;
        padding: 12px 20px;
        display: flex;
        align-items: center;
    }

    /* Form submit buttons */
    form button[type="submit"],
    form input[type="submit"] {
        width: 100%;
        min-height: 52px;
        font-size: 18px;
        font-weight: 600;
    }
}

/* ═══════════════════════════════════════════════════════════════════ */
/* ACCESSIBILITY - Focus states                                        */
/* ═══════════════════════════════════════════════════════════════════ */

button:focus,
.btn:focus,
a:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 2px solid #007AFF;
    outline-offset: 2px;
}

/* Remove outline for mouse users, keep for keyboard users */
button:focus:not(:focus-visible),
.btn:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
    outline: none;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* SPECIFIC COMPONENT FIXES                                            */
/* ═══════════════════════════════════════════════════════════════════ */

/* Compact action buttons in tables - increase size */
.table .btn-sm,
table button {
    min-height: 44px !important;
    padding: 10px 16px !important;
}

/* Icon buttons in headers */
.header .icon-btn,
header button {
    min-width: 48px !important;
    min-height: 48px !important;
}

/* FAB (Floating Action Button) */
.fab,
.floating-action-button {
    width: 56px !important;
    height: 56px !important;
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Pagination buttons */
.pagination button,
.pagination a {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Toggle switches */
.toggle-switch,
.switch {
    min-width: 52px;
    min-height: 32px;
}

/* Slider controls */
input[type="range"] {
    min-height: 44px;
    /* Increase thumb size */
}

input[type="range"]::-webkit-slider-thumb {
    width: 24px;
    height: 24px;
}

input[type="range"]::-moz-range-thumb {
    width: 24px;
    height: 24px;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* ADMIN PANEL MOBILE FIXES                                            */
/* ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Admin table action buttons */
    .admin-table .action-btn,
    .data-table .action-btn {
        min-height: 44px;
        min-width: 44px;
        padding: 10px;
    }

    /* Admin navigation */
    .admin-nav a,
    .admin-menu a {
        min-height: 48px;
        padding: 12px 16px;
        display: flex;
        align-items: center;
    }

    /* Admin form buttons */
    .admin-form button,
    .settings-form button {
        width: 100%;
        min-height: 48px;
    }
}

/* ═══════════════════════════════════════════════════════════════════ */
/* TIMETABLE/CALENDAR TOUCH TARGETS                                    */
/* ═══════════════════════════════════════════════════════════════════ */

.calendar-day,
.timetable-slot {
    min-height: 48px;
    min-width: 48px;
}

.calendar-event,
.timetable-session {
    min-height: 44px;
    padding: 8px 12px;
}

.booking-button,
.calendar-action {
    min-height: 44px;
    min-width: 100px;
    padding: 10px 16px;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* PREVENT TEXT SIZE ADJUSTMENT ON iOS                                 */
/* ═══════════════════════════════════════════════════════════════════ */

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* SAFE AREA INSETS (iPhone X+, Android notch devices)                */
/* ═══════════════════════════════════════════════════════════════════ */

@supports (padding: max(0px)) {
    body {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
        padding-bottom: max(0px, env(safe-area-inset-bottom));
    }

    header {
        padding-top: max(0px, env(safe-area-inset-top));
    }

    .fixed-bottom {
        padding-bottom: max(0px, env(safe-area-inset-bottom));
    }
}