/* =============================================
   ToolHive Mobile Improvements
   Add to public/css/styles.css at the END of the file,
   or link as a separate file: <link rel="stylesheet" href="{{ asset('css/mobile.css') }}">
   ============================================= */

/* ===== 1. TOUCH TARGETS (Google requires 48x48px minimum) ===== */
@media (max-width: 768px) {
    /* All clickable elements get minimum touch area */
    a, button, select, input[type="submit"], input[type="button"],
    .btn, .th-btn, .tab-link, .nav-action-btn {
        min-height: 44px;
        min-width: 44px;
    }

    /* Form inputs get comfortable mobile size */
    input[type="text"], input[type="email"], input[type="password"],
    input[type="number"], input[type="search"], input[type="tel"],
    textarea, select {
        font-size: 16px !important; /* Prevents iOS zoom on focus */
        padding: 12px !important;
        border-radius: 10px;
    }
}

/* ===== 2. FONT SCALING — readable on all screens ===== */
@media (max-width: 768px) {
    body {
        font-size: 15px;
        line-height: 1.6;
    }

    /* Headings scale down gracefully */
    h1 { font-size: 24px !important; }
    h2 { font-size: 20px !important; }
    h3 { font-size: 17px !important; }

    /* Small text gets a floor */
    .text-muted, .c-label, .th-kicker, .th-meta-key,
    .th-bubble-time, .th-system-time, .th-hint,
    small, .small {
        font-size: 12px !important;
    }

    /* Prevent unreadable text */
    p, li, td, th, label, span {
        font-size: max(13px, inherit);
    }
}

/* ===== 3. PRODUCT GRID — single column on mobile ===== */
@media (max-width: 640px) {
    /* Product cards go full width */
    .products-grid-vertical,
    .catalogs-grid-vertical,
    .certifications-grid-vertical,
    .news-grid-vertical,
    .exhibitions-grid-vertical {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    /* Homepage product grid */
    .th-home-latest__grid {
        grid-template-columns: 1fr !important;
    }

    /* Search results */
    .tools-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (min-width: 641px) and (max-width: 900px) {
    .products-grid-vertical,
    .tools-grid,
    .th-home-latest__grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ===== 4. PRODUCT PAGE — stack layout on mobile ===== */
@media (max-width: 900px) {
    /* Product detail page: stack image + sidebar vertically */
    .product-layout {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* Seller profile: stack content + contact sidebar */
    .profile-layout-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 0 16px !important;
    }

    /* Chat: stack sidebar + chat */
    .th-chat-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ===== 5. NAVBAR — better mobile spacing ===== */
@media (max-width: 768px) {
    header.topbar .topbar-inner {
        padding: 0 12px !important;
        gap: 8px !important;
    }

    /* Hide search on very small screens, show icon */
    .nav-search {
        max-width: 160px;
    }

    /* Logo text smaller */
    .brand-name {
        font-size: 18px !important;
    }

    /* Action buttons spacing */
    .header-right {
        gap: 4px !important;
    }

    .nav-action-btn {
        width: 36px;
        height: 36px;
        font-size: 15px;
    }
}

/* ===== 6. TABLES — horizontal scroll on mobile ===== */
@media (max-width: 768px) {
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    /* Seller dashboard tables */
    .sa-table {
        min-width: 600px;
    }
}

/* ===== 7. MODALS — full screen on mobile ===== */
@media (max-width: 640px) {
    .th-modal-card {
        max-width: 100% !important;
        border-radius: 16px 16px 0 0 !important;
        max-height: 90vh;
        overflow-y: auto;
    }

    .th-modal {
        align-items: flex-end !important;
    }
}

/* ===== 8. CARDS — reduced padding on mobile ===== */
@media (max-width: 640px) {
    .content-card,
    .contact-card,
    .th-card {
        padding: 16px !important;
        border-radius: 12px !important;
    }

    /* Reduce container padding */
    .container {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}

/* ===== 9. IMAGES — prevent overflow ===== */
img {
    max-width: 100%;
    height: auto;
}

/* ===== 10. STICKY ELEMENTS — disable on mobile ===== */
@media (max-width: 900px) {
    .contact-card {
        position: static !important;
    }
}

/* ===== 11. BREADCRUMBS — wrap on mobile ===== */
@media (max-width: 640px) {
    .breadcrumb {
        font-size: 11px !important;
        white-space: normal !important;
        word-break: break-word;
    }
}

/* ===== 12. COMPARE PAGE — scroll horizontally ===== */
@media (max-width: 768px) {
    .compare-grid {
        display: flex !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        gap: 12px !important;
        padding-bottom: 12px;
    }

    .compare-grid > * {
        min-width: 250px;
        flex-shrink: 0;
    }
}

/* ===== 13. SAFE AREAS (notch phones) ===== */
@supports (padding-top: env(safe-area-inset-top)) {
    header.topbar {
        padding-top: env(safe-area-inset-top);
    }

    .th-composer {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* ===== 14. REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===== 15. PRINT STYLES ===== */
@media print {
    header.topbar, .seller-sidebar, .th-composer,
    .th-modal, .contact-actions, .nav-search,
    .header-right, footer {
        display: none !important;
    }

    body {
        font-size: 12pt;
        color: #000;
        background: #fff;
    }

    a {
        color: #000;
        text-decoration: underline;
    }
}