/* =====================================================================
   CM-RESPONSIVE.CSS — Comprehensive Mobile Responsiveness
   Covers: Layout, Sidebar, Topbar, Landing, Auth, Dashboard,
           Forms, Tables, Cards, Grids, Tabs, Modals, Pagination
   Breakpoints: 480px (xs), 576px (sm), 768px (md), 992px (lg)
   ===================================================================== */

/* ═══════════════════════════════════════════════════════
   1. GLOBAL MOBILE FOUNDATIONS
   ═══════════════════════════════════════════════════════ */

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

/* Ensure touch targets are at least 44px */
@media (max-width: 767.98px) {

    .icon-btn,
    .cm-topbar-btn,
    .cm-theme-toggle,
    .cm-table-action,
    .cm-req-view-btn,
    .cm-request-view-btn {
        min-width: 44px;
        min-height: 44px;
    }
}


/* ═══════════════════════════════════════════════════════
   2. DASHBOARD LAYOUT — TOPBAR (mobile)
   ═══════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {
    .topbar {
        padding: 0 12px;
        gap: 8px;
    }

    .topbar-actions {
        gap: 4px;
    }

    /* Hide user meta text on mobile, keep avatar */
    .user-meta {
        display: none;
    }

    .user-menu {
        padding: 4px;
    }

    /* Compact notification dropdown */
    .dropdown-menu.cm-notif-menu {
        position: fixed;
        top: auto;
        bottom: 0;
        inset-inline-start: 0;
        inset-inline-end: 0;
        width: 100%;
        max-width: 100%;
        border-radius: 16px 16px 0 0;
        max-height: 70vh;
        overflow-y: auto;
    }
}

@media (max-width: 480px) {
    .topbar {
        padding: 0 8px;
    }

    .topbar-actions {
        gap: 2px;
    }

    .icon-btn {
        width: 36px;
        height: 36px;
    }
}


/* ═══════════════════════════════════════════════════════
   3. DASHBOARD LAYOUT — SIDEBAR (mobile)
   ═══════════════════════════════════════════════════════ */

@media (max-width: 960px) {

    /* Ensure sidebar toggle button is always visible */
    .js-sidebar-toggle {
        display: inline-flex !important;
    }

    /* Sidebar close area — tap outside to close */
    .app.mobile-open .sidebar {
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
    }

    [dir="rtl"] .app.mobile-open .sidebar {
        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
    }
}


/* ═══════════════════════════════════════════════════════
   4. DASHBOARD LAYOUT — PAGE CONTENT (mobile)
   ═══════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {
    .page {
        padding: 16px 12px;
    }
}

@media (max-width: 480px) {
    .page {
        padding: 12px 8px;
    }
}


/* ═══════════════════════════════════════════════════════
   5. LANDING PAGE — HERO (mobile)
   ═══════════════════════════════════════════════════════ */

@media (max-width: 576px) {
    .hero {
        padding: 40px 16px;
    }

    .hero h1 {
        font-size: clamp(1.5rem, 6vw, 2rem);
    }

    .hero p {
        font-size: 0.9rem;
    }

    .hero-cta {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-cta .btn {
        width: 100%;
        justify-content: center;
    }
}


/* ═══════════════════════════════════════════════════════
   6. LANDING PAGE — FEATURES GRID (mobile)
   ═══════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .features {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .features {
        grid-template-columns: 1fr;
    }
}


/* ═══════════════════════════════════════════════════════
   7. LANDING PAGE — CATEGORIES GRID (mobile)
   ═══════════════════════════════════════════════════════ */

@media (max-width: 480px) {
    .categories-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .category-card {
        padding: 16px 8px;
    }

    .category-ico {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
    }
}


/* ═══════════════════════════════════════════════════════
   8. LANDING PAGE — STEPS GRID (mobile)
   ═══════════════════════════════════════════════════════ */

@media (max-width: 576px) {
    .steps-grid {
        grid-template-columns: 1fr;
    }
}


/* ═══════════════════════════════════════════════════════
   9. LANDING PAGE — TRUST GRID (mobile)
   ═══════════════════════════════════════════════════════ */

@media (max-width: 576px) {
    .trust-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .trust-card {
        padding: 20px 16px;
    }
}


/* ═══════════════════════════════════════════════════════
   10. LANDING PAGE — CTA BANNER (mobile)
   ═══════════════════════════════════════════════════════ */

@media (max-width: 576px) {
    .cta-banner {
        padding: 40px 16px;
    }

    .cta-banner h2 {
        font-size: 1.35rem;
    }

    .cta-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .cta-actions .btn {
        width: 100%;
        justify-content: center;
    }
}


/* ═══════════════════════════════════════════════════════
   11. LANDING PAGE — SECTION SPACING (mobile)
   ═══════════════════════════════════════════════════════ */

@media (max-width: 576px) {
    .section {
        padding: 32px 16px;
    }

    .section-title {
        font-size: clamp(1.25rem, 5vw, 1.75rem);
    }

    .section-sub {
        font-size: 0.85rem;
    }
}


/* ═══════════════════════════════════════════════════════
   12. AUTH PAGES — LOGIN / REGISTER (mobile)
   ═══════════════════════════════════════════════════════ */

@media (max-width: 900px) {
    .auth-shell {
        grid-template-columns: 1fr;
    }

    .auth-hero {
        display: none;
    }

    .auth-form-wrap {
        padding: 24px 16px;
    }
}

@media (max-width: 480px) {
    .auth-form-wrap {
        padding: 16px 12px;
    }

    .auth-form {
        max-width: 100%;
    }
}


/* ═══════════════════════════════════════════════════════
   13. DASHBOARD — PAGE HEADERS (mobile)
   ═══════════════════════════════════════════════════════ */

@media (max-width: 575.98px) {
    .cm-page-header {
        flex-direction: column;
        gap: 10px;
    }

    .cm-page-head-title,
    .cm-page-title {
        font-size: 1.15rem;
    }

    .cm-detail-header {
        gap: 8px;
    }

    .cm-detail-title {
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {

    .cm-page-head-title,
    .cm-page-title {
        font-size: 1.05rem;
    }
}


/* ═══════════════════════════════════════════════════════
   14. DASHBOARD — STAT CARDS (mobile)
   ═══════════════════════════════════════════════════════ */

@media (max-width: 575.98px) {

    /* White stat cards v2 */
    .cm-stat-v2 {
        padding: 1rem;
    }

    .cm-stat-v2-value {
        font-size: 1.3rem;
    }

    /* Gradient stat cards */
    .cm-dash-stat {
        padding: 1rem;
    }

    .cm-dash-stat-value {
        font-size: 1.4rem;
    }

    .cm-dash-stat-icon {
        width: 40px;
        height: 40px;
    }
}

/* Financial stat cards — ensure 2-col on mobile */
@media (max-width: 575.98px) {
    .cm-fin-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .cm-fin-stat {
        padding: 0.75rem;
    }

    .cm-fin-stat-value {
        font-size: 1rem;
    }

    .cm-fin-stat-icon {
        width: 30px;
        height: 30px;
        font-size: 0.85rem;
    }
}

/* Stats strip (MyJobs) */
@media (max-width: 575.98px) {
    .cm-stats-strip {
        flex-wrap: wrap;
        gap: 8px;
    }

    .cm-stats-strip-item {
        flex: 1 1 calc(33% - 8px);
        min-width: 80px;
        padding: 10px 8px;
    }
}


/* ═══════════════════════════════════════════════════════
   15. DASHBOARD — FILTER TABS (mobile)
   ═══════════════════════════════════════════════════════ */

@media (max-width: 575.98px) {
    .cm-filter-tabs {
        gap: 0;
        -webkit-overflow-scrolling: touch;
    }

    .cm-filter-tab {
        padding: 8px 12px;
        font-size: 0.78rem;
    }

    .cm-filter-count {
        font-size: 0.62rem;
        padding: 1px 6px;
    }
}


/* ═══════════════════════════════════════════════════════
   16. DASHBOARD — REQUEST LIST CARDS (mobile)
   ═══════════════════════════════════════════════════════ */

@media (max-width: 575.98px) {
    .cm-req-list-card {
        padding: 1rem;
        gap: 10px;
    }

    .cm-req-list-icon {
        width: 38px;
        height: 38px;
        border-radius: 10px;
        font-size: 1rem;
    }

    .cm-req-list-cat {
        font-size: 0.82rem;
    }

    .cm-req-list-meta {
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .cm-req-list-card {
        padding: 0.85rem;
    }

    .cm-req-list-desc {
        font-size: 0.72rem;
    }
}


/* ═══════════════════════════════════════════════════════
   17. DASHBOARD — JOB CARDS (mobile)
   ═══════════════════════════════════════════════════════ */

@media (max-width: 575.98px) {
    .cm-job-card {
        padding: 1rem;
    }

    .cm-job-card-top {
        flex-direction: column;
        gap: 10px;
    }

    .cm-job-icon {
        width: 40px;
        height: 40px;
    }

    .cm-job-title {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .cm-job-meta {
        flex-wrap: wrap;
        gap: 6px;
        font-size: 0.7rem;
    }

    .cm-job-meta .sep {
        display: none;
    }

    .cm-job-card-footer {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }
}


/* ═══════════════════════════════════════════════════════
   18. DASHBOARD — OFFER CARDS (mobile)
   ═══════════════════════════════════════════════════════ */

@media (max-width: 575.98px) {
    .cm-offer-card {
        padding: 1rem;
    }

    .cm-offer-header {
        flex-direction: column;
        gap: 8px;
    }

    .cm-offer-body {
        flex-direction: column;
    }

    .cm-offer-aside {
        flex-direction: row;
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 8px;
    }

    .cm-offer-actions {
        flex-direction: column;
        width: 100%;
    }

    .cm-offer-actions .cm-btn,
    .cm-offer-actions .btn,
    .cm-offer-actions a {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}


/* ═══════════════════════════════════════════════════════
   19. DASHBOARD — DETAIL PAGES (mobile)
   ═══════════════════════════════════════════════════════ */

@media (max-width: 575.98px) {

    /* Info cards */
    .cm-info-card {
        padding: 1rem;
    }

    /* Detail grid (key-value pairs) */
    .cm-detail-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .cm-detail-pair {
        flex-direction: column;
        gap: 2px;
    }

    /* Order summary */
    .cm-order-summary {
        flex-direction: column;
        gap: 12px;
    }

    .cm-order-summary-item {
        text-align: start;
    }

    /* Tracking grid */
    .cm-tracking-grid {
        grid-template-columns: 1fr;
    }
}


/* ═══════════════════════════════════════════════════════
   20. DASHBOARD — FORMS (mobile)
   ═══════════════════════════════════════════════════════ */

@media (max-width: 575.98px) {
    .cm-form-card {
        padding: 1rem;
        border-radius: 0.85rem;
    }

    .cm-input {
        height: 44px;
        font-size: 16px;
        /* Prevents iOS zoom on focus */
    }

    textarea.cm-input {
        font-size: 16px;
    }

    .cm-submit-btn {
        height: 50px;
        font-size: 0.9rem;
        border-radius: 12px;
    }

    /* Category grid — 2 columns on small phones */
    .cm-cat-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .cm-cat-card {
        padding: 10px 6px;
    }

    .cm-cat-card-icon {
        width: 36px;
        height: 36px;
        font-size: 0.95rem;
    }

    .cm-cat-card-name {
        font-size: 0.7rem;
    }

    /* Subcategory grid */
    .cm-subcat-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Execution mode cards */
    .cm-exec-grid {
        gap: 8px;
    }

    .cm-exec-card {
        padding: 14px 10px;
    }

    .cm-exec-icon {
        width: 40px;
        height: 40px;
    }

    /* Dropzone */
    .cm-dropzone {
        padding: 1.25rem 0.75rem;
    }

    /* Budget input */
    .cm-budget-currency {
        font-size: 0.72rem;
    }

    .cm-budget-wrap .cm-input {
        padding-inline-start: 44px;
    }

    /* Select2 */
    .select2-container {
        width: 100% !important;
    }

    .form-select,
    .form-control {
        font-size: 16px;
        /* Prevents iOS zoom */
    }
}

@media (max-width: 480px) {
    .cm-cat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ═══════════════════════════════════════════════════════
   21. DASHBOARD — TABLES (mobile)
   Admin tables, payment tables, etc.
   ═══════════════════════════════════════════════════════ */

/* Ensure all tables scroll horizontally on mobile */
@media (max-width: 767.98px) {

    .table-responsive,
    .cm-pay-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -1rem;
        padding: 0 1rem;
    }

    /* Minimum width to prevent column crushing */
    .cm-table,
    .cm-dash-table,
    .cm-pay-table {
        min-width: 600px;
    }

    .cm-table th,
    .cm-table td,
    .cm-dash-table th,
    .cm-dash-table td {
        padding: 10px 12px;
        font-size: 0.78rem;
    }

    /* Admin card search forms */
    .cm-admin-card .d-flex.gap-2 {
        flex-direction: column;
    }

    .cm-admin-card .d-flex.gap-2 input[style*="max-width"] {
        max-width: 100% !important;
    }

    .cm-admin-card .d-flex.gap-2 .cm-btn {
        width: 100%;
        justify-content: center;
    }
}


/* ═══════════════════════════════════════════════════════
   22. DASHBOARD — PAGINATION (mobile)
   ═══════════════════════════════════════════════════════ */

@media (max-width: 575.98px) {
    .cm-pager {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .cm-pager-info {
        font-size: 0.7rem;
        text-align: center;
    }

    .cm-pager .page-link {
        padding: 5px 10px;
        font-size: 0.72rem;
    }

    /* Standard Bootstrap pagination */
    .pagination {
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px;
    }
}


/* ═══════════════════════════════════════════════════════
   23. DASHBOARD — WELCOME CARD (mobile)
   ═══════════════════════════════════════════════════════ */

@media (max-width: 575.98px) {
    .cm-welcome {
        padding: 1.25rem;
        border-radius: 0.85rem;
    }

    .cm-welcome h2 {
        font-size: 1.05rem;
    }

    .cm-welcome-v2 h2 {
        font-size: 1.05rem;
    }

    .cm-cta-card {
        padding: 1.25rem;
    }

    .cm-cta-card h3 {
        font-size: 0.95rem;
    }
}


/* ═══════════════════════════════════════════════════════
   24. DASHBOARD — QUICK ACTIONS (mobile)
   ═══════════════════════════════════════════════════════ */

@media (max-width: 575.98px) {
    .cm-quick-action {
        padding: 12px 14px;
        gap: 10px;
    }

    .cm-quick-action-icon {
        width: 36px;
        height: 36px;
    }
}


/* ═══════════════════════════════════════════════════════
   25. DASHBOARD — BREADCRUMBS (mobile)
   ═══════════════════════════════════════════════════════ */

@media (max-width: 575.98px) {
    .cm-breadcrumb {
        font-size: 0.72rem;
        flex-wrap: wrap;
        gap: 4px;
    }
}


/* ═══════════════════════════════════════════════════════
   26. PAYMENT SUMMARY PAGE (mobile)
   ═══════════════════════════════════════════════════════ */

@media (max-width: 575.98px) {

    /* Search/filter form */
    .cm-admin-card .row.g-3 {
        gap: 8px;
    }

    .cm-admin-card .row.g-3>[class*="col-md"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Mobile payment cards */
    .cm-pay-mobile-card {
        padding: 12px;
    }

    .cm-pay-mobile-row {
        gap: 8px;
    }
}


/* ═══════════════════════════════════════════════════════
   27. PROFILE PAGES (mobile)
   ═══════════════════════════════════════════════════════ */

@media (max-width: 575.98px) {

    /* Profile header */
    .cm-profile-header {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .cm-profile-avatar {
        margin: 0 auto;
    }

    .cm-profile-actions {
        width: 100%;
        justify-content: center;
    }

    /* Profile detail grid */
    .cm-profile-grid {
        grid-template-columns: 1fr;
    }
}


/* ═══════════════════════════════════════════════════════
   28. ESCROW / CONFIRMATION PAGES (mobile)
   ═══════════════════════════════════════════════════════ */

@media (max-width: 575.98px) {
    .cm-confirm-circle {
        width: 4.5rem;
        height: 4.5rem;
    }

    .cm-confirm-circle i {
        font-size: 1.8rem;
    }
}


/* ═══════════════════════════════════════════════════════
   29. MODALS (mobile)
   ═══════════════════════════════════════════════════════ */

@media (max-width: 575.98px) {
    .modal-dialog {
        margin: 8px;
        max-width: calc(100% - 16px);
    }

    .modal-body {
        padding: 1rem;
    }

    .modal-header {
        padding: 0.85rem 1rem;
    }

    .modal-footer {
        padding: 0.85rem 1rem;
        flex-wrap: wrap;
        gap: 8px;
    }

    .modal-footer .btn {
        flex: 1 1 auto;
    }
}


/* ═══════════════════════════════════════════════════════
   30. NOTIFICATION PAGE (mobile)
   ═══════════════════════════════════════════════════════ */

@media (max-width: 575.98px) {
    .notif {
        padding: 12px;
    }

    .notif-icon {
        width: 36px;
        height: 36px;
    }

    .cm-notif-copy {
        min-width: 0;
    }

    .notif-title {
        font-size: 0.82rem;
    }
}


/* ═══════════════════════════════════════════════════════
   31. ADMIN PAGES — SETTINGS / LOOKUPS (mobile)
   ═══════════════════════════════════════════════════════ */

@media (max-width: 575.98px) {

    /* Admin card padding */
    .cm-admin-card {
        border-radius: 0.85rem;
    }

    .cm-admin-card .card-body,
    .cm-admin-card .p-3 {
        padding: 12px !important;
    }

    /* Admin form rows */
    .cm-admin-card form .d-flex {
        flex-wrap: wrap;
    }

    /* Settings toggle rows */
    .cm-settings-row {
        flex-direction: column;
        gap: 8px;
    }
}


/* ═══════════════════════════════════════════════════════
   32. CRAFTSMAN PAGES (mobile)
   ═══════════════════════════════════════════════════════ */

@media (max-width: 575.98px) {

    /* Craftsman matching / browse cards */
    .cm-craftsman-card {
        padding: 1rem;
    }

    .cm-craftsman-header {
        flex-direction: column;
        gap: 8px;
    }

    .cm-craftsman-stats {
        flex-wrap: wrap;
        gap: 8px;
    }
}


/* ═══════════════════════════════════════════════════════
   33. DISPUTE / COMPLAINT FORMS (mobile)
   ═══════════════════════════════════════════════════════ */

@media (max-width: 575.98px) {

    .cm-dispute-form,
    .cm-complaint-form {
        padding: 1rem;
    }
}


/* ═══════════════════════════════════════════════════════
   34. SELECT PAYMENT PAGE (mobile)
   ═══════════════════════════════════════════════════════ */

@media (max-width: 575.98px) {
    .cm-payment-method-grid {
        grid-template-columns: 1fr;
    }

    .cm-payment-method-card {
        padding: 14px;
    }
}


/* ═══════════════════════════════════════════════════════
   35. ANNOUNCEMENTS PAGE (mobile)
   ═══════════════════════════════════════════════════════ */

@media (max-width: 575.98px) {
    .cm-announcement-card {
        padding: 1rem;
    }
}


/* ═══════════════════════════════════════════════════════
   36. TOAST NOTIFICATIONS (mobile)
   ═══════════════════════════════════════════════════════ */

@media (max-width: 575.98px) {
    .cm-toast {
        inset-inline-start: 12px;
        inset-inline-end: 12px;
        max-width: calc(100% - 24px);
    }
}


/* ═══════════════════════════════════════════════════════
   37. RATING PAGE (mobile)
   ═══════════════════════════════════════════════════════ */

@media (max-width: 575.98px) {
    .cm-rating-stars {
        gap: 4px;
    }

    .cm-rating-star {
        font-size: 1.75rem;
    }
}


/* ═══════════════════════════════════════════════════════
   38. ALERTS (mobile)
   ═══════════════════════════════════════════════════════ */

@media (max-width: 575.98px) {
    .cm-alert-shell {
        margin: 8px 12px 0;
    }

    .cm-dash-alert {
        margin: 8px 12px 0;
        border-radius: 10px;
        font-size: 0.82rem;
    }

    .alert {
        padding: 10px 14px;
        font-size: 0.82rem;
    }
}


/* ═══════════════════════════════════════════════════════
   39. TABLET OPTIMIZATIONS (768px — 992px)
   ═══════════════════════════════════════════════════════ */

@media (min-width: 768px) and (max-width: 991.98px) {

    /* Dashboard stat grids — 2 columns on tablet */
    .row>.col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* Detail grids */
    .cm-detail-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Tracking grid */
    .cm-tracking-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ═══════════════════════════════════════════════════════
   40. PRINT STYLES
   ═══════════════════════════════════════════════════════ */

@media print {

    .sidebar,
    .topbar,
    .cm-hamburger,
    .cm-topbar-actions,
    .auth-topbar,
    .cm-toast {
        display: none !important;
    }

    .page {
        padding: 0;
    }

    .app {
        display: block;
    }
}