/**
 * Responsive Mobile Styles
 * 
 * Mobile-specific overrides and optimizations for screens
 * 768px and below. Includes ultra-compact layout and bottom navigation.
 * 
 * @package Silva_Customer_Portal
 * @version 2.0.0
 */

/* ========================================
   HORIZONTAL OVERFLOW PROTECTION (ALL DEVICES)
   ======================================== */

.silva-customer-dashboard {
    max-width: 100vw;
    overflow-x: hidden;
}

.silva-customer-dashboard * {
    max-width: 100%;
}

.dashboard-content,
.tab-panel,
.overview-content,
.projects-content {
    overflow-x: hidden;
}

/* ========================================
   TABLET SCREENS (769px - 1024px)
   ======================================== */

@media (min-width: 769px) and (max-width: 1024px) {
    
    .silva-customer-dashboard {
        font-size: var(--font-size-sm);
    }
    
    /* Navigation tabs - slightly smaller but not bottom bar */
    .dashboard-nav {
        padding: 0 var(--spacing-sm);
    }
    
    .nav-tab {
        padding: var(--spacing-xs) var(--spacing-sm);
        min-height: 40px;
        font-size: var(--font-size-sm);
    }
    
    .tab-icon {
        font-size: 18px;
    }
    
    /* Status cards - 2 columns on tablet */
    .status-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }
    
    /* Content spacing */
    .dashboard-content {
        padding: var(--spacing-sm);
    }
    
    /* Modals - reasonable size on tablet */
    .modal-container {
        max-width: 600px;
        margin: var(--spacing-lg) auto;
    }
    
    /* Touch targets - medium size for tablets */
    .btn,
    .nav-tab,
    .status-card {
        min-height: 42px;
    }
    
    /* Photo gallery - 3 columns */
    .photos-gallery {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ========================================
   TABLET LANDSCAPE (1024px - 1199px)
   Better card layout without full sidebar
   ======================================== */

@media (min-width: 1024px) and (max-width: 1199px) {
    
    /* Property header stays at top (not sidebar) */
    .property-header-card {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        padding: 20px;
        margin-bottom: 20px;
        margin-top: 8px;
    }
    
    .property-info-section {
        grid-column: 1;
    }
    
    .property-actions-section {
        grid-column: 2;
    }
    
    /* Accordion cards in 2-column grid */
    .accordion-body {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 12px;
    }
    
    /* Individual cards in grid */
    .accordion-body > .project-card,
    .accordion-body > .estimate-card,
    .accordion-body > .invoice-card,
    .accordion-body > .job-card {
        margin: 0;
        width: 100%;
    }
    
    /* Empty state spans full width */
    .accordion-body > .empty-state-inline {
        grid-column: 1 / -1;
    }
    
    /* Slightly enhanced hover for tablets with mouse */
    @media (hover: hover) {
        .project-card:hover,
        .estimate-card:hover,
        .invoice-card:hover,
        .job-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
    }
}

/* ========================================
   MOBILE SCREENS (MAX 768px)
   ======================================== */

@media (max-width: 768px) {
    
    /* ========================================
       BASE LAYOUT
       ======================================== */
    
    .silva-customer-dashboard {
        font-size: var(--font-size-sm);
        line-height: 1.6;
    }
    
    /* Improve text readability */
    p {
        line-height: 1.65;
        margin-bottom: 1em;
    }
    
    .card-description,
    .action-description,
    .activity-description {
        line-height: 1.5;
    }
    
    h2, h3 {
        line-height: 1.3;
        margin-bottom: 0.75em;
    }
    
    /* ========================================
       HEADER
       ======================================== */
    
    .dashboard-header {
        flex-direction: column;
        align-items: stretch;
        padding: var(--spacing-xs) var(--spacing-sm);
        gap: var(--spacing-xs);
    }
    
    .dashboard-title {
        font-size: var(--font-size-base);
    }
    
    .dashboard-subtitle {
        font-size: 10px;
    }
    
    .btn-support {
        width: 100%;
        justify-content: center;
        min-height: 36px;
        padding: 6px 12px;
        font-size: var(--font-size-xs);
    }
    
    /* ========================================
       NAVIGATION - FIXED BOTTOM BAR
       ======================================== */
    
    .dashboard-nav {
        position: fixed !important;
        bottom: 0 !important;
        top: auto !important;
        left: 0;
        right: 0;
        width: 100%;
        padding: 0;
        padding-bottom: env(safe-area-inset-bottom); /* iOS safe area */
        margin-bottom: 0;
        display: flex !important;
        flex-wrap: nowrap !important; /* Force single row */
        justify-content: space-evenly;
        border-top: 1px solid var(--border-color);
        border-bottom: none;
        background: var(--bg-white);
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
        z-index: var(--z-sticky) !important;
        overflow-x: auto; /* Allow horizontal scroll if needed */
        overflow-y: hidden;
    }
    
    /* Nav bar above dashboard content but below site header */
    .dashboard-nav,
    .dashboard-nav * {
        z-index: var(--z-sticky) !important;
    }
    
    /* Add bottom padding to content to prevent hiding nav */
    .silva-customer-dashboard .dashboard-content {
        padding-bottom: 100px !important; /* Space for 64px nav + safe area + buffer */
        margin-bottom: 0 !important;
    }
    
    /* Services tab on mobile - zero top/side padding, keep bottom for nav */
    .silva-customer-dashboard .dashboard-content:has(.silva-customer-services) {
        padding-top: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-bottom: 100px !important;
        margin: 0 !important;
    }
    
    .silva-customer-dashboard .tab-panel:has(.silva-customer-services) {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .nav-tab {
        flex: 1 1 20%; /* Equal width - 5 tabs = 20% each */
        min-width: 0; /* Allow flex shrinking */
        max-width: none;
        font-size: 10px;
        padding: 10px 4px 8px;
        min-height: 64px; /* Minimum 64px for better touch targets */
        flex-direction: column;
        gap: 4px;
        border-bottom: none;
        border-top: 3px solid transparent;
        white-space: nowrap;
    }
    
    /* Ensure all buttons meet minimum touch target size */
    .btn {
        min-height: 44px;
        padding: 12px 16px;
        font-size: var(--font-size-sm);
    }
    
    .status-card {
        min-height: 80px; /* Larger touch area */
        padding: var(--spacing-sm);
    }
    
    /* Action buttons in cards - Mobile optimized */
    .card-actions .btn {
        min-height: 40px;
        padding: 10px 14px;
        font-size: 14px;
    }
    
    .nav-tab.active {
        border-bottom: none;
        border-top-color: var(--primary-blue);
    }
    
    .tab-icon {
        font-size: 24px;
    }
    
    .tab-label {
        display: block;
        font-size: 12px;
    }
    
    /* ========================================
       CONTENT AREA
       ======================================== */
    
    .dashboard-content {
        padding: var(--spacing-xs);
        padding-bottom: calc(100px + env(safe-area-inset-bottom)); /* Space for fixed bottom nav + safe area */
    }
    
    /* Fullwidth pages (Services) need bottom padding for nav bar */
    .dashboard-content--fullwidth {
        padding-bottom: calc(100px + env(safe-area-inset-bottom)) !important; /* Preserve bottom space for fixed nav */
    }
    
    /* Tab panels - optimize for mobile scrolling */
    .tab-panel {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    }
    
    /* Projects tab optimizations */
    .projects-content {
        padding-bottom: var(--spacing-sm);
    }
    
    .project-card {
        margin-bottom: var(--spacing-sm);
    }
    
    /* Messages tab - full height for chat interface */
    #messages-panel {
        height: calc(100vh - 64px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        overflow: hidden; /* Let UMH handle scrolling */
    }
    
    /* Design tab - iframe container */
    #design-panel {
        overflow: hidden;
    }
    
    /* Profile tab */
    #profile-panel {
        padding-bottom: var(--spacing-lg);
    }
    
    /* ========================================
       STATUS CARDS
       ======================================== */
    
    .status-cards {
        grid-template-columns: 1fr;
        gap: var(--spacing-xs);
    }
    
    .status-card {
        padding: var(--spacing-xs);
    }
    
    .card-icon {
        font-size: 16px;
    }
    
    .card-value {
        font-size: var(--font-size-base);
    }
    
    /* ========================================
       PROJECT CARDS
       ======================================== */
    
    .project-card {
        padding: var(--spacing-sm);
    }
    
    .card-header {
        flex-direction: column;
        gap: var(--spacing-xs);
    }
    
    .card-actions {
        flex-direction: column;
    }
    
    .card-actions .btn {
        width: 100%;
    }
    
    /* ========================================
       MODALS - FULL SCREEN ON MOBILE
       ======================================== */
    
    .modal-container {
        max-width: 100%;
        width: 100%;
        height: 100vh; /* Fallback */
        height: 100dvh; /* Dynamic viewport height for iOS Safari */
        margin: 0;
        border-radius: 0;
        max-height: 100vh; /* Fallback */
        max-height: 100dvh; /* Dynamic viewport height for iOS Safari */
    }
    
    .modal-header {
        padding: var(--spacing-sm);
        position: sticky;
        top: 0;
        background: var(--bg-white);
        z-index: 10;
        border-bottom: 1px solid var(--border-color);
    }
    
    .modal-body {
        padding: var(--spacing-sm);
        overflow-y: auto;
        flex: 1;
    }
    
    .modal-footer {
        padding: var(--spacing-sm);
        flex-direction: column-reverse;
        position: sticky;
        bottom: 0;
        background: var(--bg-white);
        border-top: 1px solid var(--border-color);
        gap: var(--spacing-xs);
    }
    
    .modal-footer .btn {
        width: 100%;
        min-height: 48px;
    }
    
    /* ========================================
       PHOTO GALLERY
       ======================================== */
    
    .photos-gallery {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-xs);
    }
    
    /* ========================================
       HELP SECTION
       ======================================== */
    
    .help-section {
        padding-top: var(--spacing-md);
        margin-top: var(--spacing-md);
    }
    
    .help-cards {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }
    
    .help-card {
        padding: var(--spacing-md);
    }
    
    .help-card .btn {
        width: 100%;
        min-height: 48px;
        font-size: var(--font-size-base);
    }
    
    /* ========================================
       ACTIONS & ACTIVITIES
       ======================================== */
    
    .action-item,
    .activity-item {
        flex-direction: column;
        align-items: flex-start;
        padding: var(--spacing-sm);
    }
    
    /* Outstanding Balance Card stays centered on mobile */
    .outstanding-balance-card {
        align-items: center !important;
        text-align: center;
    }
    
    .action-icon,
    .activity-icon {
        font-size: 20px;
    }
    
    .action-time,
    .activity-time {
        align-self: flex-end;
    }
    
    /* ========================================
       ACCORDION SECTIONS
       ======================================== */
    
    .accordion-header {
        padding: var(--spacing-sm);
        min-height: 56px;
    }
    
    .accordion-icon {
        font-size: 24px;
    }
    
    .accordion-title {
        font-size: 16px;
    }
    
    .accordion-count {
        min-width: 32px;
        height: 32px;
        font-size: 13px;
        padding: 0 10px;
    }
    
    /* ========================================
       ACCORDION - SINGLE COLUMN LAYOUT
       ======================================== */
    
    .accordion-body {
        display: block; /* Override desktop grid layout */
        padding: var(--spacing-sm) 0;
    }
    
    /* Cards stretch to fill full width */
    .accordion-body > .project-card,
    .accordion-body > .estimate-card,
    .accordion-body > .invoice-card,
    .accordion-body > .job-card {
        width: 100%; /* Stretch to container width */
        margin: 0 0 16px 0; /* Vertical spacing only */
    }
    
    .accordion-body > .project-card:last-child,
    .accordion-body > .estimate-card:last-child,
    .accordion-body > .invoice-card:last-child,
    .accordion-body > .job-card:last-child {
        margin-bottom: 0;
    }
    
    /* ========================================
       TOASTS
       ======================================== */
    
    #toast-container {
        top: 10px;
        right: 10px;
        left: 10px;
        max-width: none;
    }
    
    /* ========================================
       PROPERTY COMPONENTS
       ======================================== */
    
    .property-summary-card {
        padding: var(--spacing-xs);
    }
    
    .property-header {
        flex-direction: row;
        text-align: left;
        gap: var(--spacing-xs);
    }
    
    .property-photo {
        width: 40px;
        height: 40px;
    }
    
    .property-placeholder {
        font-size: 20px;
    }
    
    .property-title {
        font-size: var(--font-size-xs);
    }
    
    .property-meta {
        font-size: 9px;
    }
    
    .lifetime-investment-card {
        flex-direction: row;
        text-align: left;
        padding: var(--spacing-xs);
        gap: var(--spacing-xs);
    }
    
    .investment-icon {
        font-size: 20px;
    }
    
    .investment-amount {
        font-size: var(--font-size-base);
    }
    
    .investment-content h3 {
        font-size: 8px;
    }
    
    .investment-meta {
        flex-direction: row;
        gap: var(--spacing-xs);
        align-items: flex-start;
        font-size: 9px;
    }
    
    /* ========================================
       EXPLORE IFRAME
       ======================================== */
    
    .explore-iframe-container {
        height: calc(100vh - 160px);
        border-radius: 0;
    }
}

/* ========================================
   SMALL MOBILE (< 400px)
   ======================================== */

@media (max-width: 400px) {
    .nav-tab {
        max-width: 70px;
        padding: 8px 2px 6px;
    }
    
    .tab-icon {
        font-size: 20px;
    }
    
    .tab-label {
        font-size: 10px;
    }
    
    .photos-gallery {
        grid-template-columns: 1fr;
    }
    
    .help-cards {
        gap: var(--spacing-xs);
    }
    
    .help-card {
        padding: var(--spacing-sm);
    }
    
    .accordion-header {
        padding: 10px var(--spacing-sm);
        min-height: 52px;
        gap: var(--spacing-xs);
    }
    
    .accordion-title {
        font-size: 14px;
    }
    
    .accordion-count {
        min-width: 28px;
        height: 28px;
        font-size: 12px;
        padding: 0 8px;
    }
    
    /* Accordion - maintain single column with compact spacing */
    .accordion-body {
        padding: var(--spacing-xs) 0;
    }
    
    .accordion-body > .project-card,
    .accordion-body > .estimate-card,
    .accordion-body > .invoice-card,
    .accordion-body > .job-card {
        width: 100%;
        margin-bottom: var(--spacing-sm);
    }
    
    .status-cards {
        grid-template-columns: 1fr;
        gap: var(--spacing-xs);
    }
    
    .dashboard-content {
        padding: var(--spacing-xs);
    }
}

/* ========================================
   ULTRA-SMALL SCREENS (< 360px)
   ======================================== */

@media (max-width: 360px) {
    
    .silva-customer-dashboard {
        font-size: 13px;
    }
    
    .nav-tab {
        min-width: 55px;
        max-width: 65px;
        padding: 6px 2px 4px;
        min-height: 56px;
    }
    
    .tab-icon {
        font-size: 18px;
    }
    
    .tab-label {
        font-size: 9px;
    }
    
    .dashboard-header {
        padding: var(--spacing-xs);
    }
    
    .dashboard-title {
        font-size: 14px;
    }
    
    .dashboard-subtitle {
        font-size: 9px;
    }
    
    .btn {
        font-size: 13px;
        padding: 10px 12px;
        min-height: 42px;
    }
    
    /* Accordion - maintain single column on ultra-small screens */
    .accordion-body {
        padding: var(--spacing-xs) 0;
    }
    
    .accordion-body > .project-card,
    .accordion-body > .estimate-card,
    .accordion-body > .invoice-card,
    .accordion-body > .job-card {
        width: 100%;
        margin-bottom: var(--spacing-xs);
    }
    
    .status-card {
        padding: 10px;
    }
    
    .card-icon {
        font-size: 14px;
    }
    
    .card-title {
        font-size: 11px;
    }
    
    .card-value {
        font-size: 16px;
    }
    
    .card-description {
        font-size: 10px;
    }
}

/* ========================================
   LANDSCAPE MOBILE
   ======================================== */

@media (max-width: 768px) and (orientation: landscape) {
    .dashboard-header {
        padding: var(--spacing-xs);
    }
    
    .dashboard-content {
        padding-bottom: var(--touch-target-large);
    }
    
    .explore-iframe-container {
        height: calc(100vh - 120px);
    }
}