/**
 * Global Mobile-Responsive Styles for MergefitQC
 * Include this in all pages for consistent mobile scroll-friendly behavior.
 */

/* ========== Modal / Popup Scroll Fix (Desktop & Mobile) ========== */

/* All fixed-position modal overlays must be scrollable */
.modal,
.modal-overlay,
[id$="Modal"] {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Modal inner content boxes - ensure they don't exceed viewport */
.modal-content,
.modal-box {
    max-height: 85vh;
    overflow-y: auto;
    margin-top: 5vh;
    margin-bottom: 5vh;
}

/* Inline-styled modal inner boxes (e.g., dashboard modals) */
[id$="Modal"] > div {
    max-height: calc(100vh - 60px);
    overflow-y: auto;
}

/* Scrollbar styling for modal content */
.modal-content::-webkit-scrollbar,
.modal-box::-webkit-scrollbar,
[id$="Modal"] > div::-webkit-scrollbar {
    width: 6px;
}

.modal-content::-webkit-scrollbar-thumb,
.modal-box::-webkit-scrollbar-thumb,
[id$="Modal"] > div::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.modal-content::-webkit-scrollbar-track,
.modal-box::-webkit-scrollbar-track,
[id$="Modal"] > div::-webkit-scrollbar-track {
    background: transparent;
}

/* ========== Base Mobile Improvements ========== */

/* Prevent horizontal overflow on mobile */
html, body {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Touch-friendly tap targets */
button, a, select, input[type="checkbox"], input[type="radio"] {
    min-height: 44px;
    min-width: 44px;
}

input, select, textarea {
    font-size: 16px; /* Prevents iOS zoom on focus */
}

/* ========== Navigation Scroll ========== */
.nav {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
}

.nav a {
    flex-shrink: 0;
}

.nav::-webkit-scrollbar {
    height: 3px;
}

.nav::-webkit-scrollbar-thumb {
    background: rgba(102, 126, 234, 0.4);
    border-radius: 3px;
}

/* ========== Tab Navigation Scroll ========== */
.tab-navigation {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    flex-wrap: nowrap;
}

.tab-navigation::-webkit-scrollbar {
    height: 3px;
}

.tab-navigation::-webkit-scrollbar-thumb {
    background: rgba(102, 126, 234, 0.4);
    border-radius: 3px;
}

/* ========== Table Containers ========== */
.table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

.table-container::-webkit-scrollbar {
    height: 4px;
}

.table-container::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

/* ========== Form Rows ========== */
@media (max-width: 768px) {
    /* Stack form rows on mobile */
    .form-row, .form-row-3, .ps-form-row, .ps-form-row-3 {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* Navigation improvements */
    .nav {
        padding: 10px 12px;
    }

    .nav a {
        padding: 6px 12px;
        font-size: 13px;
        margin-right: 8px;
        display: inline-block;
    }

    /* Tab buttons */
    .tab-btn {
        padding: 8px 14px;
        font-size: 13px;
        white-space: nowrap;
    }

    /* Container padding */
    .container {
        border-radius: 8px;
    }

    .content {
        padding: 15px;
    }

    /* Header */
    .header h1 {
        font-size: 1.5rem;
    }

    .header p {
        font-size: 0.85rem;
    }

    /* Cards */
    .card-header {
        padding: 12px 15px;
    }

    .card-body {
        padding: 12px;
    }

    /* Buttons */
    .btn {
        padding: 8px 14px;
        font-size: 13px;
    }

    /* Modals */
    .modal,
    .modal-overlay,
    [id$="Modal"] {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .modal-content,
    .modal-box {
        width: 95%;
        margin: 10px auto;
        padding: 20px;
        max-height: calc(100vh - 20px);
        overflow-y: auto;
    }

    /* Inline-styled modal inner boxes (dashboard.html pattern) */
    .modal > div,
    [id$="Modal"] > div {
        max-height: calc(100vh - 20px);
        overflow-y: auto;
        margin-top: 10px !important;
        margin-bottom: 10px !important;
    }

    /* Filter sections */
    .filters, .filters-section {
        padding: 12px;
    }

    .filter-group {
        flex-direction: column;
        gap: 8px;
    }

    /* Stats grid */
    .stats-grid, .stat-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    /* Type toggle */
    .type-toggle label {
        padding: 10px 8px;
        font-size: 13px;
    }

    /* Section titles */
    .section-title, .ps-section-title {
        font-size: 16px;
    }

    /* Batch table and similar */
    #batchTable, .entries-table, .actual-table {
        min-width: 500px;
    }
}

@media (max-width: 480px) {
    body {
        padding: 4px;
    }

    .header {
        padding: 15px;
    }

    .header h1 {
        font-size: 1.2rem;
    }

    .content {
        padding: 10px;
    }

    .nav a {
        padding: 5px 10px;
        font-size: 12px;
        margin-right: 6px;
    }

    .stats-grid, .stat-grid {
        grid-template-columns: 1fr;
    }

    .stat-value {
        font-size: 1.5rem;
    }

    .btn {
        padding: 8px 12px;
        font-size: 12px;
    }

    /* Modal full-width on small screens */
    .modal-content,
    .modal-box {
        width: 98%;
        margin: 5px auto;
        padding: 15px;
        border-radius: 8px;
        max-height: calc(100vh - 10px);
        overflow-y: auto;
    }

    /* Inline-styled modal inner boxes */
    .modal > div,
    [id$="Modal"] > div {
        max-height: calc(100vh - 10px);
        overflow-y: auto;
        margin-top: 5px !important;
        margin-bottom: 5px !important;
        border-radius: 8px;
    }

    /* Card header flex wrap */
    .card-header {
        flex-wrap: wrap;
        gap: 8px;
    }

    .card-header h3 {
        font-size: 0.9rem;
    }
}

/* ========== Landscape orientation fix ========== */
@media (max-height: 500px) and (orientation: landscape) {
    .modal-content {
        margin: 5px auto;
        max-height: 95vh;
    }

    .header {
        padding: 10px 15px;
    }

    .header h1 {
        font-size: 1.2rem;
        margin-bottom: 2px;
    }

    .header p {
        display: none;
    }
}