/* ========== MOBILE UX OPTIMIZATIONS ========== */
/* Phase 1: Touch-friendly buttons, forms, and responsive layouts */

/* ========== TOUCH TARGET SIZING (44x44px minimum) ========== */

/* Buttons: ensure minimum 44x44px touch targets */
button,
.btn,
input[type="button"],
input[type="submit"],
input[type="reset"],
a.btn {
    min-height: 2.75rem; /* 44px */
    min-width: 2.75rem; /* 44px */
    padding: 0.6rem 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* Form inputs: better sizing for touch */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"],
input[type="date"],
input[type="time"],
select,
textarea {
    min-height: 2.75rem; /* 44px */
    padding: 0.6rem 0.75rem;
    /* Fixed px (not rem): this file rescales the root font-size to 14px below
       540px, so a rem-based value here would compute under 16px and iOS Safari
       would auto-zoom on focus anyway. Keep this literally 16px. */
    font-size: 16px; /* Prevents auto-zoom on iOS */
}

/* Checkboxes and radios: better touch targets */
input[type="checkbox"],
input[type="radio"] {
    min-width: 1.25rem;
    min-height: 1.25rem;
    cursor: pointer;
}

/* Links and interactive elements */
a,
label {
    touch-action: manipulation;
}

/* ========== MOBILE-FIRST RESPONSIVE LAYOUT ========== */

/* Extra small devices (< 380px) */
@media (max-width: 380px) {
    body {
        font-size: 14px;
    }

    .main {
        padding: 0.75rem;
    }

    button,
    .btn {
        font-size: 0.9rem;
        padding: 0.5rem 0.75rem;
    }
}

/* Small devices (380px - 540px) */
@media (max-width: 540px) {
    html {
        font-size: 14px;
    }

    .main {
        padding: 1rem;
    }

    /* Full-width forms on mobile */
    form {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .form-group {
        margin-bottom: 0.75rem;
        width: 100%;
    }

    .form-label {
        display: block;
        margin-bottom: 0.5rem;
        font-weight: 500;
    }

    /* Form inputs: full width, better spacing */
    .form-input,
    .form-select,
    input,
    select,
    textarea {
        width: 100%;
        box-sizing: border-box;
        min-height: 2.75rem;
    }

    /* Button layout on mobile */
    .btn-group,
    .form-actions {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .btn-group .btn,
    .form-actions button {
        width: 100%;
    }

    /* Horizontal rules for buttons (side-by-side) only on larger phones */
    .btn-group--horizontal {
        flex-direction: row;
    }

    .btn-group--horizontal .btn {
        flex: 1;
        width: auto;
    }

    /* Cards: full-width on mobile */
    .card,
    .side-card,
    .mts-side-card {
        width: 100%;
        margin: 0.5rem 0;
    }

    /* Stats cards: single column */
    .mts-stats-panel,
    .stats-grid {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .stats-card {
        width: 100%;
    }

    /* Tables: horizontal scroll on mobile */
    table {
        font-size: 0.85rem;
    }

    .admin-table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Remove excess padding on mobile */
    h1 { font-size: 1.5rem; margin: 1rem 0 0.5rem; }
    h2 { font-size: 1.25rem; margin: 0.75rem 0 0.4rem; }
    h3 { font-size: 1.1rem; margin: 0.5rem 0 0.3rem; }

    /* Modal optimization */
    .modal,
    .admin-modal {
        max-width: 95vw !important;
        max-height: 90vh !important;
        padding: 1rem !important;
    }
}

/* Tablets (540px - 768px) */
@media (min-width: 541px) and (max-width: 768px) {
    .main {
        padding: 1.25rem;
    }

    /* Two-column forms on tablet */
    .form-group--half {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

    .form-group--half .form-group {
        margin-bottom: 0;
    }

    /* Better button grouping */
    .btn-group {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .btn-group .btn {
        flex: 1;
        min-width: 120px;
    }
}

/* Desktop (768px+) - enhance for larger screens */
@media (min-width: 768px) {
    /* Original desktop styles work fine, no special mobile overrides needed */
}

/* ========== TOUCH-FRIENDLY SPACING ========== */

/* Minimum 8px gap between interactive elements */
button + button,
.btn + .btn,
a + a {
    margin-left: 0.5rem;
}

/* Input spacing */
.form-group + .form-group {
    margin-top: 0.75rem;
}

/* List item touch targets — only for interactive nav/button lists */
nav li,
.btn-list li,
.day-tab-list li {
    min-height: 2.75rem;
    display: flex;
    align-items: center;
}

/* ========== FORM OPTIMIZATION ========== */

/* Better labels on mobile */
.form-label {
    font-size: 0.95rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    display: block;
}

/* Input focus state improvement */
.form-input:focus,
.form-select:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Remove default iOS styling — exclude select (native arrow on desktop) and checkboxes/radios (need native rendering) */
input:not([type="checkbox"]):not([type="radio"]),
textarea,
button {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0.375rem;
}
/* Apply only on touch devices where native select UX is still good */
@media (hover: none) {
    select {
        -webkit-appearance: none;
        appearance: none;
    }
}

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

    .main {
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }
}

/* ========== ACCESSIBILITY ========== */

/* Better focus indicators */
:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

/* Keyboard navigation support */
@media (prefers-reduced-motion: no-preference) {
    *:focus-visible {
        transition: outline 0.15s;
    }
}

/* High contrast mode support */
@media (prefers-contrast: more) {
    button,
    .btn,
    a.btn {
        border: 2px solid currentColor;
    }
}

/* ========== RESPONSIVE IMAGES ========== */

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Marketplace image optimization */
.marketplace-card img,
.product-image {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* ========== VIEWPORT META (in HTML, but documented here) ========== */
/* Add to <head>: */
/* <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> */

/* ========== PRINT STYLES ========== */

@media print {
    body {
        background: white;
        color: black;
    }

    .no-print {
        display: none;
    }
}