/**
 * iOS fixes for v1 (classic version)
 * Fixes: Footer, notch, FAB positioning, dropdown sensitivity
 */

/* iOS Detection */
@supports (-webkit-touch-callout: none) {
    /* Proper viewport handling */
    html {
        height: 100%;
        height: -webkit-fill-available;
    }

    body {
        min-height: 100vh;
        min-height: -webkit-fill-available;
    }

    /* Header with notch support */
    .header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        padding-top: env(safe-area-inset-top, 0px) !important;
        z-index: 1000 !important;
    }

    /* Footer fixed positioning */
    .footer-mobile,
    footer {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
        box-sizing: border-box !important;
        z-index: 999 !important;
    }

    /* Main content spacing */
    .app-container,
    #app,
    main {
        padding-top: calc(60px + env(safe-area-inset-top, 0px));
        padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    }

    /* FAB buttons */
    .fab-button,
    .btn-floating,
    [class*="fab-"] {
        bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Fix dropdown sensitivity on iOS */
    select {
        -webkit-appearance: none;
        appearance: none;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path fill="%23666" d="M1 1l5 5 5-5"/></svg>');
        background-repeat: no-repeat;
        background-position: right 12px center;
        padding-right: 32px !important;
        min-height: 44px; /* iOS minimum tap target */
    }

    /* Prevent accidental touches */
    button,
    a,
    .btn {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        min-height: 44px; /* iOS minimum tap target */
    }

    /* Input fields iOS optimization */
    input,
    textarea {
        -webkit-appearance: none;
        appearance: none;
        border-radius: 6px;
    }

    /* Modal safe areas */
    .modal,
    .modal-dialog {
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
}

/* iPhone 13/14/15 specific fixes */
@media only screen
    and (min-device-width: 375px)
    and (max-device-width: 430px)
    and (-webkit-min-device-pixel-ratio: 2) {

    @supports (-webkit-touch-callout: none) {
        .header {
            padding-top: env(safe-area-inset-top, 44px) !important;
        }

        .footer-mobile,
        footer {
            padding-bottom: env(safe-area-inset-bottom, 34px) !important;
        }

        .fab-button,
        .btn-floating,
        [class*="fab-"] {
            bottom: calc(70px + env(safe-area-inset-bottom, 34px)) !important;
        }
    }
}

/* Small device optimizations */
@media only screen and (max-width: 360px) {
    /* Time displays */
    .time,
    .hora,
    [class*="time-"] {
        font-size: 0.75rem !important;
        min-width: 50px !important;
    }

    /* Smaller buttons on small screens */
    .btn-sm,
    button.btn {
        font-size: 0.75rem !important;
        padding: 6px 10px !important;
    }

    /* Compact cards */
    .card {
        padding: 8px !important;
    }

    /* Footer items */
    .footer-mobile .nav-item,
    footer .nav-item {
        font-size: 0.7rem !important;
    }
}

@media only screen and (max-width: 375px) {
    /* iPhone SE and similar */
    h1 {
        font-size: 1.25rem !important;
    }

    h2 {
        font-size: 1.1rem !important;
    }

    h3 {
        font-size: 0.95rem !important;
    }

    /* Calendar grid adjustments */
    .calendar-grid,
    [class*="calendar-"] {
        font-size: 0.75rem !important;
    }

    /* Table cells */
    td, th {
        padding: 6px 4px !important;
        font-size: 0.8rem !important;
    }
}