/* ==========================================
 * Responsive fixes for inline styles (F2 — Round 2 expanded)
 * Overrides responsive issues that are still defined inline in HTML
 * ========================================== */

/* ==========================================
 * Global: prevent horizontal scroll everywhere
 * ========================================== */
*, *::before, *::after {
    max-width: 100%;
}

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

body {
    overflow-x: hidden;
}

/* ==========================================
 * Global: iOS zoom prevention — 16px font on all inputs at <= 768px
 * ========================================== */
@media (max-width: 768px) {
    input[type="text"],
    input[type="tel"],
    input[type="email"],
    input[type="number"],
    input[type="date"],
    input[type="password"],
    input[type="search"],
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* ==========================================
 * Global: 44x44px minimum touch targets on mobile
 * ========================================== */
@media (max-width: 768px) {
    button,
    a.btn,
    a.btn-outline,
    a.btn-primary,
    a.expert-call-btn,
    a.q-action-card,
    .nav-item,
    .icon-btn,
    .close-btn,
    .qty-btn,
    .list-qty-btn,
    .view-btn,
    .filter-apply-btn,
    .expert-call-btn,
    .logout-btn,
    .mark-read-btn,
    .resend-link,
    .open-filters-btn,
    .mega-menu-toggle,
    .chat-attach-btn,
    .chat-submit-btn,
    .chat-back-btn {
        min-height: 44px;
    }
    .icon-btn,
    .close-btn,
    .qty-btn,
    .list-qty-btn,
    .view-btn,
    .mega-menu-toggle,
    .chat-attach-btn,
    .nav-item {
        min-width: 40px;
    }
}

/* ==========================================
 * Global: Modals — full-screen on very small screens
 * ========================================== */
@media (max-width: 480px) {
    .modal-overlay {
        padding: 0 !important;
    }
    .modal-card {
        max-width: 100% !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        min-height: 100vh !important;
        margin: 0 !important;
        width: 100% !important;
    }
    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 15px !important;
    }
    /* Ensure scrolling happens inside the modal, not on the page */
    .modal-body {
        overflow-y: auto;
        flex: 1;
    }
}

/* ==========================================
 * Global: Tables — always wrap in scrollable container
 * ========================================== */
.table-container,
.colleagues-table-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

@media (max-width: 768px) {
    .details-table {
        min-width: 500px !important;
    }
    .details-table th,
    .details-table td {
        padding: 8px;
        font-size: 0.8rem;
        white-space: nowrap;
    }
}

/* ==========================================
 * Expert Panel — Filters section (overrides for any remaining inline styles)
 * ========================================== */
@media (max-width: 768px) {
    .filters-container {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    .filters-container > input,
    .filters-container > select,
    .filters-container > .filter-input,
    .filters-container > div[style*="display: flex"],
    .filters-container > .filter-row {
        width: 100% !important;
    }
    .filters-container > button,
    .filters-container > .filter-apply-btn {
        width: 100% !important;
        margin-right: 0 !important;
        padding: 12px !important;
    }
    /* Date filter rows: stack label + input on very small screens */
    .filters-container .filter-row {
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }
    .filters-container .filter-row input[type="date"] {
        flex: 1;
        min-width: 0;
    }
}

@media (max-width: 1024px) and (min-width: 769px) {
    .filters-container > input[type="text"] { width: 180px !important; }
    .filters-container > select { width: 150px !important; }
    .filters-container > div[style*="display: flex"] input,
    .filters-container .filter-row input[type="date"] { width: 110px !important; }
}

/* ==========================================
 * Expert Panel — Internal chat (legacy inline-style fallbacks)
 * ========================================== */
@media (max-width: 768px) {
    /* If the legacy attribute-selector patterns still match any leftover inline styles */
    section#tab-chat > div[style*="display: flex"][style*="height: calc"] {
        flex-direction: column !important;
        height: calc(100vh - 150px) !important;
        min-height: 400px !important;
        max-width: 100% !important;
        max-height: none !important;
    }
    section#tab-chat > div > div[style*="width: 320px"] {
        width: 100% !important;
        max-height: 140px !important;
        border-left: none !important;
        border-bottom: 1px solid var(--border) !important;
        flex-shrink: 0 !important;
    }
    section#tab-chat > div > div[style*="flex: 1"] {
        min-height: 0 !important;
    }
    #internal-chat-form {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    #internal-chat-input {
        width: 100% !important;
        flex: 1 1 100% !important;
        order: 1 !important;
    }
    #internal-chat-attach-btn { order: 2 !important; }
    #internal-chat-form > button[type="submit"] {
        order: 3 !important;
        flex: 1 !important;
        padding: 12px !important;
    }
}

/* ==========================================
 * Dashboard — Order chat sidebar with inline height
 * ========================================== */
@media (max-width: 768px) {
    #order-chat-messages {
        height: calc(100vh - 130px) !important;
    }
    .chat-sidebar-card {
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* ==========================================
 * Store — Cart sidebar body and finance-info-box (legacy fallbacks)
 * ========================================== */
@media (max-width: 768px) {
    .cart-body[style*="padding"],
    .cart-items[style*="padding"],
    .cart-footer[style*="padding"] {
        padding: 15px !important;
    }
    .finance-info-box[style*="display: flex"][style*="gap"] {
        flex-direction: column !important;
        gap: 8px !important;
    }
    /* Cart footer step 2: stack buttons vertically on very small screens */
    .cart-footer-step2,
    #footer-step-2[style*="display: flex"] {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .cart-back-btn,
    .cart-submit-btn,
    #footer-step-2 > button {
        width: 100% !important;
        flex: none !important;
    }
}

/* ==========================================
 * Login — Province/city row stacking on small screens
 * ========================================== */
@media (max-width: 480px) {
    .input-group[style*="display: flex"][style*="gap: 10px"] {
        flex-direction: column !important;
    }
    .input-group[style*="display: flex"][style*="gap: 10px"] > select {
        width: 100% !important;
        flex: none !important;
    }
}

/* ==========================================
 * Expert Panel — Other elements (legacy inline-style fallbacks)
 * ========================================== */
@media (max-width: 480px) {
    table.colleagues-table {
        min-width: 600px !important;
    }
    #expert-review-modal .modal-card,
    #order-review-modal .modal-card {
        max-width: 100% !important;
        margin: 0 !important;
    }
    .order-info-summary[style*="display: flex"][style*="flex-wrap: wrap"] {
        flex-direction: column !important;
    }
}

/* ==========================================
 * Touch-target fix for inline-padded buttons (legacy)
 * ========================================== */
@media (max-width: 768px) {
    button[style*="padding: 8px"],
    button[style*="padding:8px"],
    a[style*="padding: 8px"],
    a[style*="padding:8px"] {
        padding: 12px !important;
        min-height: 44px;
    }
}

/* ==========================================
 * Welcome banner and section titles: fluid scaling
 * ========================================== */
.welcome-banner h1 { line-height: 1.4; }
.section-title { line-height: 1.4; }

/* ==========================================
 * Bottom navigation: ensure no overlap with content
 * ========================================== */
@media (max-width: 767px) {
    .app-layout { padding-bottom: 80px; }
    .nav-menu { padding: 8px 5px; }
    .nav-item { flex: 1; min-width: 0; }
    .nav-item span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
}

/* ==========================================
 * Floating chat button: position adjustments on mobile
 * ========================================== */
@media (max-width: 480px) {
    #open-order-chat-btn-floating {
        top: auto !important;
        bottom: 90px !important;
        left: 10px !important;
        padding: 10px 8px !important;
    }
    #open-order-chat-btn-floating span {
        font-size: 0.75rem !important;
    }
}

/* ==========================================
 * Print invoice/label buttons inside modal-footer
 * ========================================== */
@media (max-width: 480px) {
    .modal-footer[style*="justify-content: space-between"] {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .modal-footer[style*="justify-content: space-between"] > div[style*="display: flex"] {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .modal-footer[style*="justify-content: space-between"] > div[style*="display: flex"] > button,
    .modal-footer[style*="justify-content: space-between"] > button {
        width: 100% !important;
    }
}

/* ==========================================
 * Welcome banner overrides for expert panel (purple gradient)
 * ========================================== */
@media (max-width: 480px) {
    .welcome-banner[style*="linear-gradient"] {
        padding: 14px !important;
    }
    .welcome-banner[style*="linear-gradient"] h1 {
        font-size: 1rem !important;
    }
}