/* =====================================================================
   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 {
    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;
    }

    .topbar .icon-btn {
        width: 40px;
        height: 40px;
    }
}


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

@media (max-width: 767.98px) {
    .topbar {
        padding: 0 16px;
        gap: 8px;
        background: linear-gradient(135deg, #0d6b4e, #0a4a38);
        border-bottom: none;
    }

    .topbar .icon-btn {
        background: rgba(255, 255, 255, 0.12);
        border-color: rgba(255, 255, 255, 0.18);
        color: #fff;
    }

    .topbar .icon-btn:hover {
        background: rgba(255, 255, 255, 0.22);
        border-color: rgba(255, 255, 255, 0.28);
    }

    .topbar .js-sidebar-toggle {
        background: rgba(255, 255, 255, 0.12);
        border-color: rgba(255, 255, 255, 0.18);
        color: #fff;
    }

    .topbar-search {
        display: none;
    }

    .topbar .user-menu .avatar {
        border: 2px solid rgba(255, 255, 255, 0.3);
    }

    .topbar .dot {
        border-color: #0d6b4e;
    }

    .topbar-actions {
        gap: 4px;
    }

    /* Hide user meta text in topbar on mobile */
    .topbar .user-meta {
        display: none;
    }

    .user-menu {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        max-width: 40px;
        max-height: 40px;
        flex: 0 0 40px;
        padding: 0;
    }

    /* Compact notification dropdown */
    .dropdown.open .dropdown-menu.cm-notif-menu {
        position: fixed;
        top: var(--topbar-h, 60px);
        bottom: 0;
        left: 0;
        right: 0;
        inset-inline-start: 0;
        inset-inline-end: 0;
        width: 100%;
        max-width: 100%;
        height: calc(100% - var(--topbar-h, 60px));
        max-height: calc(100% - var(--topbar-h, 60px));
        border-radius: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        z-index: 9999;
    }

    /* Show close button only on mobile */
    .cm-notif-close-btn {
        display: flex;
    }
}

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

    .topbar-actions {
        gap: 6px;
    }

    .icon-btn,
    .user-menu,
    .topbar-actions .dropdown,
    .topbar-actions .cm-inline-form {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
        max-width: 36px;
        max-height: 36px;
        flex: 0 0 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: 18px 20px;
    }
}

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


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

@media (max-width: 768px) {
    .hero {
        padding: var(--s-9) var(--s-5);
    }

    .hero h1 {
        font-size: clamp(1.75rem, 6vw, 2.25rem);
        max-width: 100%;
    }

    .hero p {
        font-size: var(--fs-sm);
        max-width: 100%;
    }
}

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

    .hero h1 {
        font-size: clamp(1.5rem, 7vw, 1.85rem);
        letter-spacing: -0.02em;
    }

    .hero-badge {
        font-size: 0.8125rem;
        padding: 5px 12px;
        margin-bottom: var(--s-4);
    }

    .hero-cta {
        flex-direction: column;
        align-items: stretch;
        gap: var(--s-2);
    }

    .hero-cta .btn {
        width: 100%;
        justify-content: center;
        min-height: 48px;
    }
}


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

@media (max-width: 768px) {
    .features {
        grid-template-columns: repeat(2, 1fr);
        padding: var(--s-7) var(--s-5);
        gap: var(--s-4);
    }
}

@media (max-width: 480px) {
    .features {
        grid-template-columns: 1fr;
        padding: var(--s-7) 16px;
        gap: var(--s-3);
    }

    .feature {
        padding: var(--s-5);
    }

    .feature-icon {
        width: 44px;
        height: 44px;
    }
}


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

@media (max-width: 768px) {
    .categories-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--s-3);
    }
}

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

    .category-card {
        padding: var(--s-4) var(--s-2);
        gap: var(--s-2);
    }

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

    .category-label {
        font-size: var(--fs-sm);
    }
}


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

@media (max-width: 768px) {
    .steps-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--s-3);
    }
}

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

    .step-card {
        padding: var(--s-5) var(--s-4);
    }

    .step-num {
        width: 40px;
        height: 40px;
        font-size: var(--fs-sm);
    }
}


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

@media (max-width: 768px) {
    .trust-grid {
        grid-template-columns: 1fr;
        gap: var(--s-3);
    }

    .trust-card {
        padding: var(--s-5) var(--s-4);
        text-align: start;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: var(--s-4);
    }

    .trust-ico {
        margin: 0;
        flex-shrink: 0;
    }

    .trust-card h3 {
        margin-bottom: var(--s-1);
    }
}

@media (max-width: 480px) {
    .trust-card {
        padding: var(--s-4) var(--s-3);
    }
}


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

@media (max-width: 768px) {
    .cta-banner {
        padding: var(--s-9) var(--s-5);
    }
}

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

    .cta-banner h2 {
        font-size: clamp(1.25rem, 5vw, 1.5rem);
    }

    .cta-banner p {
        font-size: var(--fs-sm);
    }

    .cta-actions {
        flex-direction: column;
        align-items: stretch;
        gap: var(--s-2);
    }

    .cta-actions .btn {
        width: 100%;
        justify-content: center;
        min-height: 48px;
    }
}


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

@media (max-width: 768px) {
    .section {
        padding: var(--s-8) var(--s-5);
    }

    .section-head {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--s-3);
        margin-bottom: var(--s-5);
    }

    .section-sub {
        max-width: 100%;
    }
}

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

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

    .section-sub {
        font-size: var(--fs-sm);
    }

    .section-pill {
        font-size: 0.75rem;
        padding: 4px 10px;
    }
}


/* ═══════════════════════════════════════════════════════
   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 20px;
        min-height: 100vh;
        min-height: 100dvh;
    }
}

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

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

    .auth-bottom-link {
        font-size: var(--fs-xs);
    }

    .auth-oauth-grid .btn-oauth {
        min-height: 48px;
    }
}

/* Auth topbar clearance — re-assert padding-block-start after padding shorthand resets */
@media (max-width: 900px) {
    .auth-form-wrap {
        padding-block-start: 80px;
    }

    .auth-form {
        border-radius: var(--radius);
    }

    /* Full-width topbar on mobile (hero is hidden, form is 100%) */
    .auth-topbar {
        width: 100%;
        justify-content: space-between;
        background: linear-gradient(135deg, #0d6b4e, #0a4a38);
        padding: var(--s-3) var(--s-5);
    }

    /* Show brand name in auth topbar on mobile */
    .auth-topbar-brand {
        display: flex;
        color: #fff;
    }

    .auth-topbar-brand:hover {
        color: rgba(255, 255, 255, 0.85);
    }

    /* Override icon-btn colors for dark background */
    .auth-topbar .icon-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        background: rgba(255, 255, 255, 0.12);
        border-color: rgba(255, 255, 255, 0.18);
        color: #fff;
    }

    .auth-topbar .icon-btn:hover {
        background: rgba(255, 255, 255, 0.22);
        border-color: rgba(255, 255, 255, 0.28);
    }

    .auth-topbar .icon-btn:has(i) {
        width: auto;
        min-height: 44px;
        padding: 0 var(--s-3);
    }
}

@media (max-width: 480px) {
    .auth-form-wrap {
        padding-block-start: 72px;
    }

    .auth-form {
        padding: var(--s-5) var(--s-4);
        box-shadow: none;
        border-radius: var(--radius-lg);
    }
}


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

@media (max-width: 575.98px) {

    .cm-page-header,
    .page-header {
        flex-direction: column;
        align-items: stretch;
        gap: var(--s-3);
    }

    .page-header .cm-page-head-action {
        width: 100%;
        justify-content: center;
        min-height: 48px;
    }

    .page-title {
        font-size: var(--fs-xl);
    }

    .cm-page-head-title,
    .cm-page-title {
        font-size: var(--fs-lg);
    }

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

    .cm-detail-title {
        font-size: var(--fs-lg);
    }

    /* Stat grid: 2 columns on small phones */
    .stat-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--s-3);
    }

    .stat {
        padding: var(--s-4);
    }

    .stat-value {
        font-size: var(--fs-xl);
    }

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

    /* Split layout table: horizontal scroll */
    .split .table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 calc(var(--s-4) * -1);
        padding: 0 var(--s-4);
    }

    /* Active jobs list items */
    .split .card-body .d-flex.gap-3 {
        gap: var(--s-2);
    }
}

@media (max-width: 480px) {

    .cm-page-head-title,
    .cm-page-title {
        font-size: var(--fs-md);
    }

    .page-title {
        font-size: var(--fs-lg);
    }

    .page-subtitle {
        font-size: var(--fs-xs);
    }

    /* Single column stats on very small phones */
    .stat-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .stat {
        padding: var(--s-3);
        gap: var(--s-2);
    }

    .stat-label {
        font-size: var(--fs-xs);
    }
}


/* ═══════════════════════════════════════════════════════
   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: 1.00rem;
    }
}

/* 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: 1.00rem;
    }

    .cm-filter-count {
        font-size: 1.00rem;
        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: 1.00rem;
    }

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

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

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


/* ═══════════════════════════════════════════════════════
   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: 1.00rem;
    }

    .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-profile-header {
        gap: 10px;
    }

    .cm-offer-profile-img,
    .cm-offer-avatar-lg {
        width: 50px;
        height: 50px;
    }

    .cm-offer-stats {
        gap: 8px;
    }

    .cm-offer-details-section {
        align-items: stretch;
    }

    .cm-offer-price-block {
        text-align: start;
        display: flex;
        align-items: baseline;
        gap: 6px;
    }

    .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: 1.00rem;
        /* Prevents iOS zoom on focus */
    }

    textarea.cm-input {
        font-size: 1.00rem;
    }

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

    /* Submit row: stack vertically on mobile */
    .cm-submit-row {
        flex-direction: column;
        gap: var(--s-2, 8px);
    }

    .cm-submit-row .cm-submit-btn {
        width: 100%;
        min-height: 50px;
    }

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

    .cm-cat-card {
        padding: var(--s-3) var(--s-2);
    }

    .cm-cat-card-icon {
        width: 44px;
        height: 44px;
        font-size: var(--fs-lg);
    }

    .cm-cat-card-name {
        font-size: var(--fs-xs);
    }

    /* 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: 1.00rem;
    }

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

    .form-select,
    .form-control {
        font-size: 1.00rem;
        /* 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: 1.00rem;
    }

    /* 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: 1.00rem;
        text-align: center;
    }

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

    /* 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: 1.00rem;
    }
}


/* ═══════════════════════════════════════════════════════
   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: 1.00rem;
        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: 1.00rem;
    }
}


/* ═══════════════════════════════════════════════════════
   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: 1.00rem;
    }

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


/* ═══════════════════════════════════════════════════════
   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. CHART CARDS — MOBILE (< 768px)
   ═══════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {

    .cm-chart-header {
        flex-wrap: wrap;
        gap: 8px;
    }

    .cm-period-filter {
        min-height: 44px;
        min-width: 44px;
        width: 100%;
        max-width: 100%;
        font-size: 1rem;
    }

    .cm-chart-body {
        min-height: 200px;
    }
}


/* ═══════════════════════════════════════════════════════
   41. LANDING PAGE — NAV & FOOTER (mobile)
   ═══════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .landing-nav {
        padding: 0 var(--s-4);
    }

    .landing-nav .brand {
        font-size: var(--fs-sm);
    }

    .landing-mobile-menu {
        width: calc(100vw - 32px);
        max-width: 300px;
    }

    .landing-footer {
        padding: var(--s-5) var(--s-4);
        font-size: var(--fs-xs);
        text-align: center;
    }
}

@media (max-width: 480px) {
    .landing-nav {
        padding: 0 12px;
    }

    .landing-mobile-menu {
        inset-inline-end: 12px;
        width: calc(100vw - 24px);
    }
}


/* ═══════════════════════════════════════════════════════
   42. LANDING PAGE — OVERFLOW PREVENTION
   ═══════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    .hero,
    .features,
    .section,
    .section-alt-wrap,
    .cta-banner {
        overflow-x: hidden;
    }

    /* Ensure images/svgs don't overflow */
    .hero img,
    .hero svg,
    .feature img,
    .feature svg,
    .category-card img,
    .trust-card img,
    .trust-card svg {
        max-width: 100%;
        height: auto;
    }
}


/* ═══════════════════════════════════════════════════════
   43. PRINT STYLES
   ═══════════════════════════════════════════════════════ */

@media print {

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

    .page {
        padding: 0;
    }

    .app {
        display: block;
    }
}