/**
 * Responsive CSS - Mobile & Tablet Support
 *
 * Breakpoints:
 * - Desktop: > 1024px (default styles)
 * - Tablet: 768px - 1024px
 * - Mobile: < 768px
 *
 * Guidelines:
 * - Touch targets minimum 44x44px
 * - No horizontal page scroll
 * - Tables use horizontal scroll wrapper
 */

/* ==========================================================================
   CSS Custom Properties for Breakpoints
   ========================================================================== */
:root {
    --breakpoint-mobile: 768px;
    --breakpoint-tablet: 1024px;
    --touch-target-min: 44px;
}

/* ==========================================================================
   Tablet Styles (768px - 1024px)
   ========================================================================== */
@media screen and (max-width: 1024px) {
    /* Navigation */
    nav {
        padding: 10px 16px !important;
    }

    nav span[style*="font-size: var(--font-size-2xl)"] {
        font-size: var(--font-size-xl) !important;
    }

    /* Page containers */
    div[style*="max-width: var(--container"] {
        padding-left: var(--space-5) !important;
        padding-right: var(--space-5) !important;
    }

    /* Grid layouts - reduce columns */
    div[style*="grid-template-columns: repeat(auto-fit, minmax(200px"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    div[style*="grid-template-columns: repeat(auto-fill, minmax(300px"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Cost summary - stack layout */
    div[style*="grid-template-columns: 1fr 380px"] {
        grid-template-columns: 1fr !important;
    }

    /* Page header - reduce font size */
    h1[style*="font-size: var(--font-size-6xl)"] {
        font-size: var(--font-size-5xl) !important;
    }

    /* Tables - enable horizontal scroll */
    div[style*="overflow-x: auto"] {
        -webkit-overflow-scrolling: touch;
    }
}

/* ==========================================================================
   Mobile Styles (< 768px)
   ========================================================================== */
@media screen and (max-width: 767px) {
    /* Navigation - compact */
    nav {
        padding: 8px 12px !important;
        gap: 8px !important;
    }

    nav span[style*="font-size"] {
        font-size: var(--font-size-lg) !important;
    }

    /* Hide app name on very small screens */
    @media (max-width: 400px) {
        nav > div > span:last-child {
            display: none;
        }
    }

    /* Page containers - full width with minimal padding */
    div[style*="max-width: var(--container"] {
        padding-left: var(--space-4) !important;
        padding-right: var(--space-4) !important;
        padding-top: var(--space-5) !important;
    }

    /* Cards stack vertically */
    div[style*="grid-template-columns: repeat(auto-fit"],
    div[style*="grid-template-columns: repeat(auto-fill"] {
        grid-template-columns: 1fr !important;
    }

    /* Summary cards - 2 columns on mobile */
    div[style*="grid-template-columns: repeat(auto-fit, minmax(180px"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--space-3) !important;
    }

    /* Page header - mobile sizing */
    h1[style*="font-size: var(--font-size-6xl)"] {
        font-size: var(--font-size-4xl) !important;
    }

    h1[style*="font-size: var(--font-size-5xl)"] {
        font-size: var(--font-size-3xl) !important;
    }

    h2[style*="font-size: var(--font-size-5xl)"] {
        font-size: var(--font-size-3xl) !important;
    }

    /* Project header - stack elements */
    div[style*="display: flex"][style*="align-items: center"][style*="gap: var(--space-4)"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: var(--space-2) !important;
    }

    /* Filter bars - stack vertically */
    div[style*="display: flex"][style*="flex-wrap: wrap"][style*="gap: var(--space-5)"] {
        flex-direction: column !important;
        gap: var(--space-3) !important;
    }

    div[style*="display: flex"][style*="flex-wrap: wrap"] select {
        width: 100% !important;
        min-width: unset !important;
    }

    /* Tables */
    div[style*="overflow-x: auto"] {
        margin-left: calc(-1 * var(--space-4));
        margin-right: calc(-1 * var(--space-4));
        padding-left: var(--space-4);
        padding-right: var(--space-4);
        -webkit-overflow-scrolling: touch;
    }

    table {
        font-size: var(--font-size-md) !important;
    }

    th, td {
        padding: var(--space-2) var(--space-3) !important;
    }

    /* Sticky first column for tables */
    table th:first-child,
    table td:first-child {
        position: sticky;
        left: 0;
        background: inherit;
        z-index: 1;
    }

    /* Risk item grid - stack on mobile */
    .risk-item {
        grid-template-columns: 1fr !important;
        gap: var(--space-2) !important;
    }

    .risk-item > span:first-child {
        display: none; /* Hide code on mobile */
    }

    /* Cards - reduce padding */
    div[style*="border-radius: var(--radius-xl)"][style*="padding: var(--space-6)"],
    div[style*="border-radius: var(--radius-xl)"][style*="padding: var(--space-7)"] {
        padding: var(--space-4) !important;
    }

    a[style*="border-radius: var(--radius-4xl)"][style*="padding: var(--space-7)"] {
        padding: var(--space-5) !important;
    }

    /* Selling price card */
    div[style*="font-size: 42px"] {
        font-size: 32px !important;
    }

    /* Breadcrumbs - truncate */
    nav[aria-label="breadcrumb"] a,
    div[style*="breadcrumb"] a {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Touch targets */
    button,
    a[href],
    select,
    input {
        min-height: var(--touch-target-min);
    }

    /* WP row toggle - larger touch target */
    .wp-row td {
        padding: var(--space-4) var(--space-3) !important;
    }

    /* Activity rows - larger tap area */
    .activity-row td {
        padding: var(--space-3) var(--space-2) !important;
    }
}

/* ==========================================================================
   Table Responsive Wrapper
   ========================================================================== */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 calc(-1 * var(--space-4));
    padding: 0 var(--space-4);
}

@media screen and (min-width: 768px) {
    .table-responsive {
        margin: 0;
        padding: 0;
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */
@media print {
    nav,
    .no-print {
        display: none !important;
    }

    div[style*="max-width"] {
        max-width: 100% !important;
        padding: 0 !important;
    }

    * {
        box-shadow: none !important;
    }
}