/* Mobile Optimizations - Global Touch Target & Responsive Fixes */

/* 1. GLOBAL TOUCH TARGET MINIMUMS (44x44px for accessibility) */
@media (max-width: 767px) {
    button, a, input[type="button"], input[type="submit"], input[type="reset"], 
    input[type="checkbox"], input[type="radio"], select, textarea {
        min-height: 44px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    /* 2. INPUT FIELDS - Mobile Optimizations */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="date"],
    input[type="time"],
    input[type="search"],
    textarea,
    select {
        font-size: 16px; /* Prevents iOS zoom on focus */
        min-height: 48px; /* Touch target */
        padding: 12px 16px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    /* 3. BUTTONS - All states responsive */
    button, 
    input[type="button"], 
    input[type="submit"], 
    input[type="reset"],
    a.btn,
    a[class*="button"],
    a[class*="btn"] {
        min-height: 44px;
        min-width: 44px;
        padding: 12px 16px;
        cursor: pointer;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        font-size: 16px; /* Prevents iOS zoom */
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
    }

    /* 4. LINKS - Ensure they're easy to tap */
    a {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* 5. CHECKBOXES & RADIO BUTTONS */
    input[type="checkbox"],
    input[type="radio"] {
        width: 20px;
        height: 20px;
        cursor: pointer;
        accent-color: currentColor;
    }
}

/* 6. APP LAYOUT TOKENS */
:root {
    --app-nav-h: 72px;
    --app-page-pad-x: 2rem;
    --app-page-pad-y: 2rem;
    --app-section-gap: 2rem;
    --app-card-pad: 1.5rem;
    --app-sidebar-w: 16rem;
}

@media (max-width: 767px) {
    :root {
        --app-page-pad-x: 1rem;
        --app-page-pad-y: 1rem;
        --app-section-gap: 1.25rem;
        --app-card-pad: 1rem;
    }
}

/* 7. APP SHELL + NAV */
.app-shell {
    min-height: 100vh;
}

.app-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    padding-top: env(safe-area-inset-top);
}

.app-main {
    min-height: 100vh;
    padding-top: calc(var(--app-nav-h) + var(--app-page-pad-y));
    padding-left: var(--app-page-pad-x);
    padding-right: var(--app-page-pad-x);
    padding-bottom: calc(var(--app-page-pad-y) + env(safe-area-inset-bottom));
}

.app-main--with-sidebar {
    margin-left: var(--app-sidebar-w);
}

@media (max-width: 767px) {
    .app-main--with-sidebar {
        margin-left: 0;
    }
}

/* 8. APP SIDEBAR */
.app-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(6px);
}

.app-sidebar-overlay.open {
    display: block;
}

.app-sidebar-panel {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    z-index: 40;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(.4, 0, .2, 1);
}

.app-sidebar-panel.open {
    transform: translateX(0);
}

@media (min-width: 768px) {
    .app-sidebar-panel {
        transform: translateX(0);
    }

    .app-sidebar-overlay {
        display: none !important;
    }
}

/* 7. MODALS - Mobile Responsive */
@media (max-width: 768px) {
    .modal,
    [class*="modal"],
    [role="dialog"] {
        padding: 16px !important;
    }

    .modal-content,
    [class*="modal-content"] {
        margin: 0 !important;
        border-radius: 12px !important;
        max-height: 95vh !important;
    }

    .modal-header,
    [class*="modal-header"] {
        padding: 16px 20px !important;
    }

    .modal-body,
    [class*="modal-body"] {
        padding: 16px 20px !important;
    }
}

/* 9. FORMS - Mobile Friendly */
@media (max-width: 768px) {
    form {
        padding: 16px;
    }

    form > * {
        margin-bottom: 12px;
    }

    label {
        display: block;
        margin-bottom: 8px;
        font-weight: 500;
    }

    fieldset {
        margin: 16px 0;
    }
}

/* 10. TABLES - Mobile Scrollable */
@media (max-width: 768px) {
    table {
        font-size: 13px;
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    table th,
    table td {
        padding: 12px 16px;
        min-width: 80px;
    }

    /* Stack table vertically on very small screens */
    @media (max-width: 480px) {
        table th,
        table td {
            padding: 8px 12px;
            font-size: 12px;
            min-width: 60px;
        }
    }
}

/* 11. DASHBOARD LAYOUT HELPERS */
.dash-header {
    margin-bottom: var(--app-section-gap);
}

.dash-stats-grid {
    margin-bottom: var(--app-section-gap);
}

.dash-panel-grid {
    gap: 1.5rem;
}

@media (max-width: 767px) {
    .dash-header {
        margin-bottom: 1rem;
    }

    .dash-header h1,
    .dash-header h2 {
        font-size: 1.6rem;
        line-height: 1.1;
    }

    .dash-header p {
        margin-top: 0.4rem;
    }

    .dash-stats-grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
        margin-bottom: 1rem !important;
    }

    .dash-stat-card {
        padding: var(--app-card-pad) !important;
    }

    .dash-stat-card h3 {
        font-size: 1.85rem !important;
        line-height: 1;
    }

    .dash-panel-grid {
        gap: 1rem !important;
    }
}

/* 12. DASHBOARD SECTION OVERRIDES */
@media (max-width: 767px) {
    .dash-bookings-controls {
        padding: 1rem !important;
        gap: 0.75rem !important;
    }

    .dash-booking-filters {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        padding-bottom: 0.25rem;
    }

    .dash-booking-filters button {
        flex: 0 0 auto;
    }

    .dash-bookings-summary {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .dash-bookings-search {
        height: 48px;
    }

    .dash-bookings-empty {
        padding: 1.5rem !important;
    }

    .dash-messages-shell {
        flex-direction: column !important;
        min-height: auto !important;
        height: auto !important;
    }

    .dash-contacts-sidebar {
        width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    }

    .dash-contacts-search {
        height: 48px;
    }

    .dash-chat-header {
        padding: 0.85rem 1rem !important;
    }

    .dash-chat-history {
        padding: 1rem !important;
        gap: 1rem !important;
    }

    .dash-chat-input {
        padding: 1rem !important;
        position: sticky;
        bottom: 0;
        padding-bottom: calc(1rem + env(safe-area-inset-bottom)) !important;
    }

    .dash-settings-shell {
        border-radius: 1.25rem !important;
    }
}

/* 12.1 MESSAGING SHELL STABILITY */
.dash-messages-shell,
#chat-view,
#contacts-sidebar {
    min-height: 0;
}

.dash-chat-history,
#chat-history {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.dash-contacts-sidebar,
#contacts-sidebar {
    min-height: 0;
}

#contacts-list {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* 15. BOTTOM SHEET OPTIMIZATION */
@media (max-width: 768px) {
    .bottom-sheet,
    [class*="bottom-sheet"] {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        border-radius: 12px 12px 0 0;
        max-height: 90vh;
        overflow-y: auto;
    }
}

/* 16. HOVER STATE REMOVAL ON TOUCH DEVICES */
@media (hover: none) {
    button:hover,
    a:hover,
    [class*="btn"]:hover {
        transform: none !important;
        box-shadow: none !important;
        opacity: 1 !important;
    }

    button:active,
    a:active,
    [class*="btn"]:active {
        opacity: 0.8;
    }
}

/* 17. ZOOM & INTERACTION IMPROVEMENTS */
@media (max-width: 768px) {
    * {
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
    }

    input, textarea, select {
        font-size: 16px;
        -webkit-user-zoom: 1;
    }

    html {
        -webkit-user-select: none;
        -webkit-user-zoom: 1;
        -webkit-text-size-adjust: 100%;
    }

    body {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }
}

/* 18. APP NAV INTERACTIONS */
@media (max-width: 767px) {
    .app-nav a,
    .app-nav button {
        min-height: 44px;
        font-size: 14px;
    }
}

/* 18.1 CHAT INPUT SAFE AREA + STICKY ON MOBILE */
@media (max-width: 767px) {
    #message-input-area {
        position: sticky;
        bottom: 0;
        padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    }

    #chat-history {
        padding-bottom: calc(4.5rem + env(safe-area-inset-bottom));
    }
}

/* 19. PREVENT TEXT SELECTION ON TOUCH */
@media (hover: none) and (pointer: coarse) {
    button, a, [role="button"] {
        -webkit-user-select: none;
        user-select: none;
        -webkit-user-drag: none;
    }
}

/* 20. ORIENTATION CHANGES */
@media (orientation: landscape) and (max-height: 500px) {
    html, body {
        height: auto;
        min-height: auto;
    }

    nav, header {
        min-height: 44px;
    }

    form input,
    form button {
        min-height: 40px;
        font-size: 14px;
    }
}

/* 21. SKELETON LOADERS + STABLE CONTAINER HEIGHTS */
.skeleton {
    position: relative;
    overflow: hidden;
    background: #f1f1f1;
}

.skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
    animation: skeleton-shimmer 1.2s ease-in-out infinite;
}

.skeleton-rounded {
    border-radius: 9999px;
}

.skeleton-card {
    border-radius: 1rem;
}

.skeleton-line {
    height: 0.75rem;
    border-radius: 9999px;
}

/* 21.1 SOFT CONTENT REVEAL + ICON ALIGNMENT */
.material-symbols-outlined {
    line-height: 1;
    vertical-align: middle;
}

.card-appear {
    animation: card-fade 0.2s ease both;
}

@keyframes card-fade {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .card-appear {
        animation: none;
    }
}

@keyframes skeleton-shimmer {
    100% {
        transform: translateX(100%);
    }
}

#bookings-list,
#trainer-bookings-list,
#next-sessions-list,
#trainers-list,
#contacts-list,
#chat-history,
#find-trainers-results,
#saved-trainers-results,
#trainers-grid,
#trainers-container {
    min-height: 160px;
}