/* ═══════════════════════════════════════════════════════════════════
   M4 STREAMLINE - Mobile Optimization & Responsive Design
   ═══════════════════════════════════════════════════════════════════ */

/* Mobile-First Responsive Breakpoints */
/* Tailwind default: sm: 640px, md: 768px, lg: 1024px, xl: 1280px */

/* BASE MOBILE STYLES (< 640px) */
@media (max-width: 640px) {
    
    /* Typography - Smaller on Mobile */
    h1 { font-size: 1.875rem !important; } /* 30px */
    h2 { font-size: 1.5rem !important; } /* 24px */
    h3 { font-size: 1.25rem !important; } /* 20px */
    
    /* Container Padding */
    .container,
    .max-w-7xl {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Tables - Horizontal Scroll */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    table {
        min-width: 800px; /* Force horizontal scroll for wide tables */
    }
    
    /* Cards - Full Width */
    .card,
    .bg-white {
        border-radius: 0.75rem;
        margin-bottom: 1rem;
    }
    
    /* Buttons - Larger Touch Targets */
    button,
    .btn,
    a.btn {
        min-height: 44px; /* iOS recommended touch target */
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }
    
    /* Forms - Better Mobile UX */
    input,
    select,
    textarea {
        min-height: 44px;
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 0.75rem;
    }
    
    /* Modal - Full Screen on Mobile */
    .modal-content {
        width: 100vw;
        height: 100vh;
        margin: 0;
        border-radius: 0;
        max-height: 100vh;
        overflow-y: auto;
    }
    
    /* Navigation - Stack Vertically */
    .nav-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    
    .nav-tab {
        display: inline-block;
        padding: 0.5rem 1rem;
        min-width: 100px;
    }
    
    /* Dashboard Cards - Stack */
    .dashboard-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }
    
    /* Stats - Smaller Numbers */
    .stat-number {
        font-size: 1.5rem !important;
    }
    
    /* Hide Desktop-Only Elements */
    .hide-mobile {
        display: none !important;
    }
    
    /* Show Mobile-Only Elements */
    .show-mobile {
        display: block !important;
    }
}

/* TABLET STYLES (640px - 1024px) */
@media (min-width: 640px) and (max-width: 1024px) {
    
    /* Two Column Grid */
    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* Tables - Better Spacing */
    td, th {
        padding: 0.75rem !important;
    }
}

/* TOUCH DEVICE OPTIMIZATIONS */
@media (hover: none) and (pointer: coarse) {
    
    /* Remove Hover Effects on Touch */
    *:hover {
        /* Prevent hover states getting "stuck" on touch devices */
    }
    
    /* Larger Touch Targets */
    button,
    a,
    input[type="checkbox"],
    input[type="radio"] {
        min-width: 44px;
        min-height: 44px;
    }
    
    /* Easier Scrolling */
    * {
        -webkit-overflow-scrolling: touch;
    }
}

/* MOBILE NAVBAR */
.mobile-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    border-top: 1px solid #e5e7eb;
    display: none;
    z-index: 50;
    padding: 0.5rem;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

@media (max-width: 640px) {
    .mobile-nav {
        display: flex;
        justify-content: space-around;
    }
    
    /* CRITICAL: Add padding to content so bottom nav doesn't cover it */
    .max-w-7xl,
    main,
    #app {
        padding-bottom: 100px !important;
    }
    
    .mobile-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0.5rem;
        font-size: 0.625rem;
        color: #6b7280;
        text-decoration: none;
        flex: 1;
        max-width: 80px;
    }
    
    .mobile-nav-item.active {
        color: #14b8a6;
    }
    
    .mobile-nav-icon {
        width: 24px;
        height: 24px;
        margin-bottom: 0.25rem;
    }
    
    /* Add padding to content to account for fixed nav */
    body {
        padding-bottom: 70px;
    }
}

/* IMPROVED MOBILE TABLE VIEW */
@media (max-width: 640px) {
    
    /* Option 1: Card-Based Mobile Table */
    .mobile-table-card {
        display: block !important;
        margin-bottom: 1rem;
        padding: 1rem;
        background: white;
        border-radius: 0.5rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
    
    .mobile-table-card thead {
        display: none;
    }
    
    .mobile-table-card tbody,
    .mobile-table-card tr,
    .mobile-table-card td {
        display: block;
    }
    
    .mobile-table-card tr {
        margin-bottom: 1rem;
        padding: 1rem;
        background: #f9fafb;
        border-radius: 0.5rem;
    }
    
    .mobile-table-card td {
        text-align: right;
        padding: 0.5rem;
        position: relative;
        border: none;
    }
    
    .mobile-table-card td:before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        font-weight: 600;
        color: #374151;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   QUOTES MODULE - MOBILE CARD LAYOUT (App-Style)
   Replaces table with cards on mobile for better UX
   ═══════════════════════════════════════════════════════════════════ */

/* Desktop: Show table, hide cards */
@media (min-width: 769px) {
    .quotes-mobile-cards {
        display: none !important;
    }
    
    .quotes-desktop-table {
        display: block !important;
    }
    
    .invoices-mobile-cards {
        display: none !important;
    }
    
    .invoices-desktop-table {
        display: block !important;
    }
    
    .clients-mobile-view {
        display: none !important;
    }
    
    .clients-desktop-view {
        display: block !important;
    }
    
    .expenses-mobile-cards {
        display: none !important;
    }
    
    .expenses-desktop-table {
        display: block !important;
    }
    
    .team-mobile-cards {
        display: none !important;
    }
    
    .team-desktop-table {
        display: block !important;
    }
}

/* Mobile: Hide table, show cards */
@media (max-width: 768px) {
    /* CRITICAL: Add padding to content so bottom nav doesn't cover it */
    .max-w-7xl {
        padding-bottom: 100px !important;
    }
    
    /* Hide desktop table */
    .quotes-desktop-table {
        display: none !important;
    }
    
    /* Show mobile cards */
    .quotes-mobile-cards {
        display: block !important;
    }
    
    /* Quote Card Styling */
    .quote-card {
        background: white;
        border-radius: 12px;
        padding: 16px;
        margin-bottom: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        border-left: 4px solid #14b8a6;
        transition: transform 0.2s, box-shadow 0.2s;
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(20, 184, 166, 0.1);
    }
    
    .quote-card:active {
        transform: scale(0.98) !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15) !important;
    }
    
    .dark .quote-card {
        background: #1f2937;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }
    
    /* Card Header */
    .quote-card-header {
        display: flex;
        justify-content: space-between;
        align-items: start;
        margin-bottom: 12px;
    }
    
    .quote-card-number {
        font-size: 14px;
        font-weight: 600;
        color: #14b8a6;
    }
    
    .quote-card-amount {
        font-size: 20px;
        font-weight: 700;
        color: #111827;
    }
    
    .dark .quote-card-amount {
        color: #f9fafb;
    }
    
    /* Card Body */
    .quote-card-client {
        font-size: 16px;
        font-weight: 600;
        color: #111827;
        margin-bottom: 4px;
    }
    
    .dark .quote-card-client {
        color: #f9fafb;
    }
    
    .quote-card-address {
        font-size: 13px;
        color: #6b7280;
        margin-bottom: 8px;
    }
    
    .dark .quote-card-address {
        color: #9ca3af;
    }
    
    .quote-card-title {
        font-size: 14px;
        color: #374151;
        margin-bottom: 12px;
    }
    
    .dark .quote-card-title {
        color: #d1d5db;
    }
    
    /* Card Status Row */
    .quote-card-status-row {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 12px;
        flex-wrap: wrap;
    }
    
    .quote-card-date {
        font-size: 12px;
        color: #6b7280;
    }
    
    .dark .quote-card-date {
        color: #9ca3af;
    }
    
    /* Card Actions */
    .quote-card-actions {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 8px;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid #e5e7eb;
    }
    
    .dark .quote-card-actions {
        border-top-color: #374151;
    }
    
    .quote-card-action-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 10px 12px;
        font-size: 13px;
        font-weight: 500;
        color: #14b8a6;
        background: #f0fdfa;
        border: 1px solid #99f6e4;
        border-radius: 8px;
        transition: all 0.2s;
        min-height: 44px;
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(20, 184, 166, 0.1);
    }
    
    .quote-card-action-btn:active {
        background: #ccfbf1 !important;
        transform: scale(0.95) !important;
    }
    
    .dark .quote-card-action-btn {
        background: #134e4a;
        border-color: #115e59;
        color: #5eead4;
    }
    
    .dark .quote-card-action-btn:active {
        background: #0f3f3c !important;
    }
    
    /* Deposit Badge in Card */
    .quote-card-deposit {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 12px;
        font-weight: 600;
    }
    
    /* Icon sizing in cards */
    .quote-card svg {
        min-width: 16px;
        min-height: 16px;
    }
    
    /* ═══════════════════════════════════════════════════════════════
       INVOICES - MOBILE CARD LAYOUT (Same as Quotes)
       ═══════════════════════════════════════════════════════════════ */
    
    /* Hide desktop table on mobile, show cards */
    .invoices-desktop-table {
        display: none !important;
    }
    
    /* Show mobile cards */
    .invoices-mobile-cards {
        display: block !important;
    }
    
    /* Invoice Card Styling */
    .invoice-card {
        background: white;
        border-radius: 12px;
        padding: 16px;
        margin-bottom: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        border-left: 4px solid #14b8a6;
        transition: transform 0.2s, box-shadow 0.2s;
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(20, 184, 166, 0.1);
    }
    
    .invoice-card:active {
        transform: scale(0.98) !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15) !important;
    }
    
    .dark .invoice-card {
        background: #1f2937;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }
    
    /* Invoice Card Header */
    .invoice-card-header {
        display: flex;
        justify-content: space-between;
        align-items: start;
        margin-bottom: 12px;
    }
    
    .invoice-card-number {
        font-size: 14px;
        font-weight: 600;
        color: #14b8a6;
    }
    
    .invoice-card-date {
        font-size: 11px;
        color: #6b7280;
        margin-top: 2px;
    }
    
    .dark .invoice-card-date {
        color: #9ca3af;
    }
    
    .invoice-card-due {
        font-size: 11px;
        color: #f59e0b;
        font-weight: 600;
        margin-top: 2px;
    }
    
    .dark .invoice-card-due {
        color: #fbbf24;
    }
    
    .invoice-card-amount {
        font-size: 20px;
        font-weight: 700;
        color: #111827;
    }
    
    .dark .invoice-card-amount {
        color: #f9fafb;
    }
    
    /* Invoice Card Body */
    .invoice-card-client {
        font-size: 16px;
        font-weight: 600;
        color: #111827;
        margin-bottom: 4px;
    }
    
    .dark .invoice-card-client {
        color: #f9fafb;
    }
    
    .invoice-card-address {
        font-size: 13px;
        color: #6b7280;
        margin-bottom: 8px;
    }
    
    .dark .invoice-card-address {
        color: #9ca3af;
    }
    
    .invoice-card-title {
        font-size: 14px;
        color: #374151;
        margin-bottom: 12px;
    }
    
    .dark .invoice-card-title {
        color: #d1d5db;
    }
    
    /* Invoice Card Status Row */
    .invoice-card-status-row {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 12px;
        flex-wrap: wrap;
    }
    
    /* Invoice Card Actions */
    .invoice-card-actions {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 8px;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid #e5e7eb;
    }
    
    .dark .invoice-card-actions {
        border-top-color: #374151;
    }
    
    .invoice-card-action-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 10px 12px;
        font-size: 13px;
        font-weight: 500;
        color: #14b8a6;
        background: #f0fdfa;
        border: 1px solid #99f6e4;
        border-radius: 8px;
        transition: all 0.2s;
        min-height: 44px;
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(20, 184, 166, 0.1);
    }
    
    .invoice-card-action-btn:active {
        background: #ccfbf1 !important;
        transform: scale(0.95) !important;
    }
    
    .dark .invoice-card-action-btn {
        background: #134e4a;
        border-color: #115e59;
        color: #5eead4;
    }
    
    .dark .invoice-card-action-btn:active {
        background: #0f3f3c !important;
    }
    
    /* Icon sizing in invoice cards */
    .invoice-card svg {
        min-width: 16px;
        min-height: 16px;
    }
    
    /* ═══════════════════════════════════════════════════════════════
       CLIENTS - MOBILE OPTIMIZATION
       Optimize existing client cards for mobile
       ═══════════════════════════════════════════════════════════════ */
    
    /* Client cards - better mobile styling */
    #clientsList > div {
        padding: 20px !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12) !important;
        border-radius: 12px !important;
        margin-bottom: 16px !important;
        border-left: 4px solid #14b8a6;
        transition: transform 0.2s, box-shadow 0.2s;
    }
    
    .dark #clientsList > div {
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
    }
    
    /* Card press effect */
    #clientsList > div:active {
        transform: scale(0.98);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15) !important;
    }
    
    /* Client name - bigger and bolder */
    #clientsList h3 {
        font-size: 19px !important;
        font-weight: 700 !important;
        margin-bottom: 10px !important;
        color: #111827;
    }
    
    .dark #clientsList h3 {
        color: #f9fafb !important;
    }
    
    /* Contact info - clearer text */
    #clientsList p.text-sm {
        font-size: 15px !important;
        margin-bottom: 6px !important;
        line-height: 1.6 !important;
    }
    
    /* Notes - better visibility */
    #clientsList p.italic {
        font-size: 14px !important;
        padding: 14px !important;
        margin-top: 14px !important;
        background: #fef3c7 !important;
        border-left: 4px solid #f59e0b !important;
        border-radius: 8px !important;
    }
    
    .dark #clientsList p.italic {
        background: #78350f !important;
        border-left-color: #fbbf24 !important;
        color: #fef3c7 !important;
    }
    
    /* Checkbox - bigger for easier tapping */
    #clientsList input[type="checkbox"] {
        width: 28px !important;
        height: 28px !important;
    }
    
    /* Action buttons container - stack vertically */
    #clientsList .flex-1 .flex.sm\\:flex-col {
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
        margin-top: 16px !important;
        padding-top: 16px !important;
        border-top: 1px solid #e5e7eb;
    }
    
    .dark #clientsList .flex-1 .flex.sm\\:flex-col {
        border-top-color: #374151;
    }
    
    /* All action buttons - bigger touch targets */
    #clientsList .flex.sm\\:flex-col button {
        width: 100% !important;
        min-height: 50px !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        padding: 14px 18px !important;
        border-radius: 10px !important;
        transition: all 0.2s !important;
        border-width: 2px !important;
    }
    
    /* Button press effect */
    #clientsList .flex.sm\\:flex-col button:active {
        transform: scale(0.97) !important;
    }
    
    /* New Quote button - green */
    #clientsList button.hover\\:bg-green-50 {
        background: #d1fae5 !important;
        border-color: #34d399 !important;
        color: #065f46 !important;
    }
    
    .dark #clientsList button.hover\\:bg-green-50 {
        background: #064e3b !important;
        border-color: #059669 !important;
        color: #6ee7b7 !important;
    }
    
    /* Edit button - teal */
    #clientsList button.hover\\:bg-teal-50 {
        background: #ccfbf1 !important;
        border-color: #14b8a6 !important;
        color: #115e59 !important;
    }
    
    .dark #clientsList button.hover\\:bg-teal-50 {
        background: #134e4a !important;
        border-color: #14b8a6 !important;
        color: #5eead4 !important;
    }
    
    /* Delete button - red */
    #clientsList button.text-red-600 {
        background: #fee2e2 !important;
        border-color: #ef4444 !important;
        color: #991b1b !important;
    }
    
    .dark #clientsList button.text-red-600 {
        background: #7f1d1d !important;
        border-color: #dc2626 !important;
        color: #fca5a5 !important;
    }
    
    /* Select all checkbox */
    .flex.items-center.gap-2.mb-4 input[type="checkbox"] {
        width: 26px !important;
        height: 26px !important;
    }
    
    .flex.items-center.gap-2.mb-4 label {
        font-size: 16px !important;
        font-weight: 600 !important;
    }
    
    /* ═══════════════════════════════════════════════════════════════
       QUOTE DETAIL PAGE - MOBILE OPTIMIZATION  
       Makes detail view compact with proper table handling
       ═══════════════════════════════════════════════════════════ */
    
    /* Quote Detail: Compact header */
    .bg-white.rounded-xl h1 {
        font-size: 1.5rem !important; /* Smaller quote number */
    }
    
    .bg-white.rounded-xl h2 {
        font-size: 1rem !important; /* Smaller title */
    }
    
    .bg-white.rounded-xl .text-4xl {
        font-size: 1.75rem !important; /* Smaller amount */
    }
    
    /* Action buttons: Grid layout for mobile */
    .bg-white.rounded-xl .flex-wrap {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }
    
    .bg-white.rounded-xl .flex-wrap button {
        font-size: 13px !important;
        padding: 10px 12px !important;
        white-space: nowrap;
        min-height: 44px !important;
    }
    
    /* Grid layout: Force single column on mobile */
    .grid.lg\\:grid-cols-3 {
        grid-template-columns: 1fr !important;
    }
    
    /* Line Items Section: CRITICAL FIX for horizontal scroll */
    .space-y-6 .bg-white:has(table),
    .space-y-6 > div:has(table) {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 12px;
    }
    
    /* Force table to be wide enough to scroll */
    .space-y-6 table {
        min-width: 650px !important;
        width: 100% !important;
    }
    
    /* Compact table text but keep readable */
    .space-y-6 table td,
    .space-y-6 table th {
        font-size: 12px !important;
        padding: 8px 6px !important;
        white-space: normal !important;
    }
    
    /* Description column: Allow wrapping */
    .space-y-6 table td:first-child,
    .space-y-6 table th:first-child {
        min-width: 150px;
        white-space: normal !important;
    }
    
    /* Number columns: Keep tight */
    .space-y-6 table td:nth-child(2),
    .space-y-6 table td:nth-child(3),
    .space-y-6 table td:nth-child(4),
    .space-y-6 table th:nth-child(2),
    .space-y-6 table th:nth-child(3),
    .space-y-6 table th:nth-child(4) {
        white-space: nowrap !important;
    }
    
    /* Table totals: Keep prominent */
    .space-y-6 table tfoot td {
        font-size: 13px !important;
        font-weight: 600 !important;
    }
    
    /* Profit section: Compact but readable */
    .space-y-3 .flex {
        font-size: 13px !important;
    }
    
    .space-y-3 .text-lg {
        font-size: 16px !important;
    }
    
    /* Client info: Compact */
    .space-y-6 .text-sm {
        font-size: 13px !important;
    }
    
    /* Section headers: Slightly smaller */
    .space-y-6 h3 {
        font-size: 14px !important;
    }
    
    /* ═══════════════════════════════════════════════════════════════
       EXPENSES - MOBILE CARD LAYOUT
       ═══════════════════════════════════════════════════════════════ */
    
    /* Hide desktop table on mobile, show cards */
    .expenses-desktop-table {
        display: none !important;
    }
    
    /* Show mobile cards */
    .expenses-mobile-cards {
        display: block !important;
        padding: 12px;
    }
    
    /* Expense Card Styling */
    .expense-card {
        background: white;
        border-radius: 12px;
        padding: 16px;
        margin-bottom: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        border-left: 4px solid #dc2626;
    }
    
    .dark .expense-card {
        background: #1f2937;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }
    
    /* Expense Card Header */
    .expense-card-header {
        display: flex;
        justify-content: space-between;
        align-items: start;
        margin-bottom: 12px;
        padding-bottom: 12px;
        border-bottom: 1px solid #e5e7eb;
    }
    
    .dark .expense-card-header {
        border-bottom-color: #374151;
    }
    
    .expense-card-date {
        font-size: 12px;
        color: #6b7280;
        margin-bottom: 4px;
    }
    
    .dark .expense-card-date {
        color: #9ca3af;
    }
    
    .expense-card-category {
        display: inline-block;
        padding: 4px 8px;
        border-radius: 6px;
        font-size: 11px;
        font-weight: 600;
        border: 1px solid;
    }
    
    .expense-card-amount {
        font-size: 20px;
        font-weight: 700;
        color: #dc2626;
    }
    
    .dark .expense-card-amount {
        color: #ef4444;
    }
    
    /* Expense Card Body */
    .expense-card-description {
        font-size: 14px;
        color: #374151;
        margin-bottom: 8px;
    }
    
    .dark .expense-card-description {
        color: #d1d5db;
    }
    
    .expense-card-job,
    .expense-card-team {
        font-size: 13px;
        color: #6b7280;
        margin-bottom: 4px;
    }
    
    .dark .expense-card-job,
    .dark .expense-card-team {
        color: #9ca3af;
    }
    
    .expense-card-receipt {
        font-size: 13px;
        margin-top: 8px;
    }
    
    .expense-card-receipt a {
        color: #14b8a6;
        text-decoration: none;
    }
    
    .dark .expense-card-receipt a {
        color: #5eead4;
    }
    
    /* Expense Card Actions */
    .expense-card-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid #e5e7eb;
    }
    
    .dark .expense-card-actions {
        border-top-color: #374151;
    }
    
    .expense-card-action-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 10px 12px;
        font-size: 13px;
        font-weight: 500;
        color: #14b8a6;
        background: #f0fdfa;
        border: 1px solid #99f6e4;
        border-radius: 8px;
        transition: all 0.2s;
        min-height: 44px;
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(20, 184, 166, 0.1);
    }
    
    .expense-card-action-btn:active {
        transform: scale(0.95) !important;
    }
    
    .dark .expense-card-action-btn {
        background: #134e4a;
        border-color: #115e59;
        color: #5eead4;
    }
    
    /* Icon sizing in expense cards */
    .expense-card svg {
        min-width: 16px;
        min-height: 16px;
    }
    
    /* Mobile Total */
    .expense-mobile-total {
        background: #fee2e2;
        border: 2px solid #dc2626;
        border-radius: 12px;
        padding: 16px;
        margin-top: 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .dark .expense-mobile-total {
        background: #7f1d1d;
        border-color: #dc2626;
    }
    
    .expense-mobile-total-label {
        font-size: 14px;
        font-weight: 600;
        color: #991b1b;
        text-transform: uppercase;
    }
    
    .dark .expense-mobile-total-label {
        color: #fca5a5;
    }
    
    .expense-mobile-total-amount {
        font-size: 24px;
        font-weight: 700;
        color: #dc2626;
    }
    
    .dark .expense-mobile-total-amount {
        color: #ef4444;
    }
    
    /* ═══════════════════════════════════════════════════════════════
       TEAM - MOBILE CARD LAYOUT
       ═══════════════════════════════════════════════════════════════ */
    
    /* Hide desktop table on mobile, show cards */
    .team-desktop-table {
        display: none !important;
    }
    
    /* Show mobile cards */
    .team-mobile-cards {
        display: block !important;
    }
    
    /* Team Member Card Styling */
    .team-card {
        background: white;
        border-radius: 12px;
        padding: 16px;
        margin-bottom: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        border-left: 4px solid #3b82f6;
    }
    
    .dark .team-card {
        background: #1f2937;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }
    
    /* Team Card Header */
    .team-card-header {
        display: flex;
        justify-content: space-between;
        align-items: start;
        margin-bottom: 12px;
        padding-bottom: 12px;
        border-bottom: 1px solid #e5e7eb;
    }
    
    .dark .team-card-header {
        border-bottom-color: #374151;
    }
    
    .team-card-name {
        font-size: 16px;
        font-weight: 600;
        color: #111827;
        margin-bottom: 4px;
    }
    
    .dark .team-card-name {
        color: #f9fafb;
    }
    
    .team-card-occupation {
        font-size: 13px;
        color: #14b8a6;
        font-weight: 500;
    }
    
    .dark .team-card-occupation {
        color: #5eead4;
    }
    
    /* Team Card Body */
    .team-card-contact {
        font-size: 13px;
        color: #6b7280;
        margin-bottom: 4px;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    .dark .team-card-contact {
        color: #9ca3af;
    }
    
    .team-card-icon {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }
    
    /* Team Card Actions */
    .team-card-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid #e5e7eb;
    }
    
    .dark .team-card-actions {
        border-top-color: #374151;
    }
    
    .team-card-action-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 10px 12px;
        font-size: 13px;
        font-weight: 500;
        border-radius: 8px;
        transition: all 0.2s;
        min-height: 44px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    
    .team-card-action-btn:active {
        transform: scale(0.95) !important;
    }
    
    .team-card-edit {
        color: #3b82f6;
        background: #eff6ff;
        border: 1px solid #bfdbfe;
    }
    
    .dark .team-card-edit {
        background: #1e3a8a;
        border-color: #1e40af;
        color: #93c5fd;
    }
    
    .team-card-delete {
        color: #dc2626;
        background: #fee2e2;
        border: 1px solid #fecaca;
    }
    
    .dark .team-card-delete {
        background: #7f1d1d;
        border-color: #991b1b;
        color: #fca5a5;
    }
    
    /* ═══════════════════════════════════════════════════════════════
       SCHEDULE CALENDAR - MOBILE OPTIMIZATION
       Makes FullCalendar responsive and touch-friendly
       ═══════════════════════════════════════════════════════════════ */
    
    /* Calendar container - allow horizontal scroll to see all days */
    #calendar {
        overflow-x: auto !important;
        overflow-y: visible !important;
        max-width: 100vw !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* FullCalendar mobile optimizations */
    .fc {
        font-size: 10px !important;
        min-width: 100% !important;
    }
    
    /* Calendar table - ensure all 7 days show */
    .fc-scrollgrid {
        width: 100% !important;
    }
    
    /* Calendar header toolbar - compact */
    .fc-header-toolbar {
        flex-direction: column !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
    }
    
    .fc-toolbar-chunk {
        display: flex !important;
        gap: 4px !important;
        justify-content: center !important;
    }
    
    /* Calendar title - smaller */
    .fc-toolbar-title {
        font-size: 15px !important;
        font-weight: 600 !important;
    }
    
    /* Calendar buttons - touch-friendly */
    .fc-button {
        padding: 6px 8px !important;
        font-size: 11px !important;
        min-height: 38px !important;
    }
    
    /* Day headers - very compact to fit all 7 */
    .fc-col-header-cell {
        padding: 4px 1px !important;
        font-size: 9px !important;
    }
    
    .fc-col-header-cell-cushion {
        padding: 2px 0 !important;
    }
    
    /* Day cells - smaller to fit */
    .fc-daygrid-day {
        min-height: 35px !important;
    }
    
    .fc-daygrid-day-number {
        padding: 2px !important;
        font-size: 10px !important;
    }
    
    .fc-daygrid-day-frame {
        min-height: 35px !important;
    }
    
    /* Events - very compact */
    .fc-event {
        font-size: 8px !important;
        padding: 1px 2px !important;
        margin-bottom: 1px !important;
        border-radius: 2px !important;
        cursor: pointer !important;
    }
    
    .fc-event-title {
        font-weight: 500 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* More events link */
    .fc-daygrid-more-link {
        font-size: 8px !important;
    }
    
    /* Hide time grid on mobile (month view only) */
    .fc-timeGridWeek-button {
        display: none !important;
    }
    
    /* Dark mode calendar fixes */
    .dark .fc {
        color: #f9fafb !important;
    }
    
    .dark .fc-theme-standard td,
    .dark .fc-theme-standard th {
        border-color: #374151 !important;
    }
    
    .dark .fc-button {
        background: #374151 !important;
        border-color: #4b5563 !important;
        color: #f9fafb !important;
    }
    
    .dark .fc-button:hover {
        background: #4b5563 !important;
    }
    
    .dark .fc-button-active {
        background: #14b8a6 !important;
        border-color: #14b8a6 !important;
    }
    
    .dark .fc-daygrid-day-number {
        color: #f9fafb !important;
    }
    
    .dark .fc-col-header-cell-cushion {
        color: #9ca3af !important;
    }
    
    /* ═══════════════════════════════════════════════════════════════
       COMPANY & TEAM PAGES - MOBILE OPTIMIZATION
       Better forms and cards on mobile
       ═══════════════════════════════════════════════════════════════ */
    
    /* Company Settings - Form improvements */
    .max-w-2xl {
        max-width: 100% !important;
    }
    
    /* Forms - Better mobile spacing */
    .space-y-4 > div {
        margin-bottom: 1rem;
    }
    
    /* Grid columns - Stack on mobile */
    .grid.grid-cols-2 {
        grid-template-columns: 1fr !important;
    }
    
    /* Form inputs - Touch-friendly */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    textarea,
    select {
        min-height: 44px !important;
        font-size: 16px !important; /* Prevents zoom on iOS */
    }
    
    /* Labels - Better spacing */
    label {
        margin-bottom: 0.5rem;
        font-size: 14px;
    }
    
    /* Buttons - Touch-friendly */
    button {
        min-height: 44px !important;
        padding: 12px 16px !important;
    }
    
    /* Team member cards - Mobile optimization */
    .bg-white.p-4.rounded-lg.shadow {
        padding: 16px !important;
    }
    
    /* Team member actions - Stack vertically */
    .bg-white.p-4.rounded-lg.shadow .flex.gap-2 {
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .bg-white.p-4.rounded-lg.shadow .flex.gap-2 button {
        width: 100% !important;
    }
    
    /* Team member info - Better mobile layout */
    .bg-white.p-4.rounded-lg.shadow .flex.justify-between {
        flex-direction: column !important;
        gap: 16px !important;
    }
    
    /* File upload area - Better mobile */
    .border-dashed {
        padding: 1rem !important;
    }
    
    /* Logo preview - Smaller on mobile */
    .h-32 {
        height: 80px !important;
    }
    
    /* Stripe/Email/SMS sections - Compact */
    .bg-white.dark\\:bg-gray-800.p-6 {
        padding: 1rem !important;
    }
    
    /* Section headers - Smaller on mobile */
    h3 {
        font-size: 16px !important;
    }
}

/* SWIPE GESTURES HINT */
.swipe-hint {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════
   ANALYTICS - SALESPERSON & TRADESPERSON MOBILE CARDS
   Desktop: table, Mobile: cards (same pattern as quotes/expenses)
   ═══════════════════════════════════════════════════════════════ */

/* Desktop: Show tables, hide cards */
@media (min-width: 769px) {
    .sp-mobile-cards {
        display: none !important;
    }
    
    .sp-desktop-table {
        display: block !important;
    }
    
    .tp-mobile-cards {
        display: none !important;
    }
    
    .tp-desktop-table {
        display: block !important;
    }
}

/* Mobile: Hide tables, show cards */
@media (max-width: 768px) {
    .sp-desktop-table {
        display: none !important;
    }
    
    .sp-mobile-cards {
        display: block !important;
    }
    
    .tp-desktop-table {
        display: none !important;
    }
    
    .tp-mobile-cards {
        display: block !important;
    }
    
    /* ── Salesperson Cards ── */
    .sp-card {
        background: white;
        border-radius: 12px;
        padding: 16px;
        margin-bottom: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        border-left: 4px solid #a855f7;
        cursor: pointer;
        transition: transform 0.2s, box-shadow 0.2s;
        -webkit-tap-highlight-color: rgba(168, 85, 247, 0.1);
    }
    
    .sp-card:active {
        transform: scale(0.98) !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15) !important;
    }
    
    .dark .sp-card {
        background: #1f2937;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }
    
    .sp-card-header {
        display: flex;
        justify-content: space-between;
        align-items: start;
        margin-bottom: 12px;
        padding-bottom: 12px;
        border-bottom: 1px solid #e5e7eb;
    }
    
    .dark .sp-card-header {
        border-bottom-color: #374151;
    }
    
    .sp-card-name {
        font-size: 16px;
        font-weight: 600;
        color: #a855f7;
    }
    
    .dark .sp-card-name {
        color: #c084fc;
    }
    
    .sp-card-subtitle {
        font-size: 12px;
        color: #6b7280;
        margin-top: 2px;
    }
    
    .dark .sp-card-subtitle {
        color: #9ca3af;
    }
    
    .sp-card-winrate {
        font-size: 20px;
        font-weight: 700;
        padding: 4px 10px;
        border-radius: 8px;
        min-width: 60px;
        text-align: center;
    }
    
    .sp-winrate-good {
        color: #16a34a;
        background: #f0fdf4;
    }
    
    .dark .sp-winrate-good {
        color: #4ade80;
        background: rgba(22, 163, 74, 0.15);
    }
    
    .sp-winrate-ok {
        color: #ca8a04;
        background: #fefce8;
    }
    
    .dark .sp-winrate-ok {
        color: #facc15;
        background: rgba(202, 138, 4, 0.15);
    }
    
    .sp-winrate-low {
        color: #4b5563;
        background: #f9fafb;
    }
    
    .dark .sp-winrate-low {
        color: #9ca3af;
        background: rgba(75, 85, 99, 0.2);
    }
    
    .sp-card-stats {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 8px;
    }
    
    .sp-card-stat {
        text-align: center;
        padding: 8px 4px;
        background: #f9fafb;
        border-radius: 8px;
    }
    
    .dark .sp-card-stat {
        background: #111827;
    }
    
    .sp-card-stat-value {
        display: block;
        font-size: 18px;
        font-weight: 700;
    }
    
    .sp-card-stat-label {
        display: block;
        font-size: 10px;
        color: #6b7280;
        text-transform: uppercase;
        font-weight: 600;
        margin-top: 2px;
    }
    
    .dark .sp-card-stat-label {
        color: #9ca3af;
    }
    
    .sp-card-tap-hint {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        margin-top: 12px;
        padding-top: 10px;
        border-top: 1px solid #e5e7eb;
        font-size: 12px;
        color: #a855f7;
        font-weight: 500;
    }
    
    .dark .sp-card-tap-hint {
        border-top-color: #374151;
        color: #c084fc;
    }
    
    /* ── Tradesperson Cards ── */
    .tp-card {
        background: white;
        border-radius: 12px;
        padding: 16px;
        margin-bottom: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        border-left: 4px solid #3b82f6;
    }
    
    .dark .tp-card {
        background: #1f2937;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }
    
    .tp-card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
        padding-bottom: 12px;
        border-bottom: 1px solid #e5e7eb;
    }
    
    .dark .tp-card-header {
        border-bottom-color: #374151;
    }
    
    .tp-card-name {
        font-size: 16px;
        font-weight: 600;
        color: #111827;
    }
    
    .dark .tp-card-name {
        color: #f9fafb;
    }
    
    .tp-card-total {
        font-size: 20px;
        font-weight: 700;
        color: #dc2626;
    }
    
    .dark .tp-card-total {
        color: #ef4444;
    }
    
    .tp-card-stats {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 8px;
    }
    
    .tp-card-stat {
        text-align: center;
        padding: 8px 4px;
        background: #f9fafb;
        border-radius: 8px;
    }
    
    .dark .tp-card-stat {
        background: #111827;
    }
    
    .tp-card-stat-value {
        display: block;
        font-size: 16px;
        font-weight: 700;
        color: #111827;
    }
    
    .dark .tp-card-stat-value {
        color: #f9fafb;
    }
    
    .tp-card-stat-label {
        display: block;
        font-size: 10px;
        color: #6b7280;
        text-transform: uppercase;
        font-weight: 600;
        margin-top: 2px;
    }
    
    .dark .tp-card-stat-label {
        color: #9ca3af;
    }
    
    /* ── Analytics KPI cards - prevent text overflow on small screens ── */
    .text-3xl {
        word-break: break-word;
        overflow-wrap: break-word;
    }
    
    /* ── Analytics funnel - 2x2 grid on mobile ── */
    .grid.grid-cols-2.md\\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* ── Charts - ensure proper height on mobile ── */
    .bg-white.dark\\:bg-gray-800.p-6.rounded-lg.shadow [style*="height: 300px"] {
        height: 250px !important;
    }
}

@media (max-width: 640px) {
    .swipe-hint {
        display: block;
        text-align: center;
        padding: 0.5rem;
        font-size: 0.75rem;
        color: #9ca3af;
    }
}

/* PULL TO REFRESH INDICATOR */
.pull-to-refresh {
    position: fixed;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    transition: top 0.3s ease;
    z-index: 1000;
    background: white;
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.pull-to-refresh.active {
    top: 10px;
}

/* MOBILE SEARCH BAR */
@media (max-width: 640px) {
    .search-bar {
        width: 100%;
        margin-bottom: 1rem;
    }
    
    .search-input {
        width: 100%;
        padding-right: 2.5rem;
    }
}

/* MOBILE ACTION BUTTONS */
@media (max-width: 640px) {
    .action-buttons {
        position: fixed;
        bottom: 70px; /* Above mobile nav */
        right: 1rem;
        z-index: 40;
    }
    
    .floating-action-button {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: #14b8a6;
        color: white;
        box-shadow: 0 4px 12px rgba(20, 184, 166, 0.4);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        border: none;
        cursor: pointer;
    }
    
    .floating-action-button:active {
        transform: scale(0.95);
    }
}

/* LANDSCAPE MODE ADJUSTMENTS */
@media (max-width: 896px) and (orientation: landscape) {
    .modal-content {
        max-height: 90vh;
        overflow-y: auto;
    }
    
    h1 {
        font-size: 1.5rem !important;
    }
}

/* SAFE AREA INSETS (iPhone Notch Support) */
@supports (padding: max(0px)) {
    body {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }
    
    .mobile-nav {
        padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
    }
}

/* PERFORMANCE OPTIMIZATIONS */
@media (max-width: 640px) {
    
    /* Disable Animations on Low-End Devices */
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
    
    /* GPU Acceleration for Smooth Scrolling */
    .smooth-scroll {
        transform: translateZ(0);
        will-change: scroll-position;
    }
}

/* MOBILE UTILITY CLASSES */
@media (max-width: 640px) {
    .mobile-p-4 { padding: 1rem !important; }
    .mobile-text-sm { font-size: 0.875rem !important; }
    .mobile-hidden { display: none !important; }
    .mobile-flex { display: flex !important; }
    .mobile-block { display: block !important; }
    .mobile-w-full { width: 100% !important; }
}

/* PROGRESSIVE WEB APP (PWA) OPTIMIZATIONS */
@media (display-mode: standalone) {
    /* App is installed as PWA */
    .pwa-install-banner {
        display: none;
    }
    
    /* Remove top padding if no browser chrome */
    body {
        padding-top: 0;
    }
}

/* HIGH DPI DISPLAYS (Retina) */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Use high-res images */
    .logo {
        background-image: url('logo@2x.png');
        background-size: contain;
    }
}