/* ===========================================
   MOBILE OVERRIDES CSS
   Centralized mobile-only styles for InspectorData
   Include AFTER main CSS files
   =========================================== */

/* ===========================================
   VIEW REPORTS - Mobile Card Layout
   =========================================== */

@media (max-width: 768px) {
    /* Hide table header on mobile */
    .reports-table thead {
        display: none !important;
    }

    /* Transform table structure to block */
    .reports-table {
        display: block !important;
        width: 100% !important;
        border: none !important;
        background: transparent !important;
    }

    .reports-table tbody {
        display: block !important;
        width: 100% !important;
    }

    .reports-table tr {
        display: block !important;
        width: 100% !important;
        background: white !important;
        margin-bottom: 0.75rem !important;
        border-radius: 12px !important;
        padding: 1rem !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
        border-left: 4px solid var(--accent-color, #6366f1) !important;
        border-collapse: separate !important;
        position: relative !important;
    }

    .reports-table tr:hover {
        transform: none !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
    }

    .reports-table td {
        display: block !important;
        width: 100% !important;
        padding: 0.5rem 0 !important;
        border: none !important;
        border-bottom: 1px solid #f3f4f6 !important;
        text-align: left !important;
    }

    .reports-table td:last-child {
        border-bottom: none !important;
        padding-top: 1rem !important;
        margin-top: 0.5rem !important;
    }

    /* Hide Report # column on mobile */
    .reports-table td[data-label="Report #"] {
        display: none !important;
    }

    /* Customer name - card header */
    .reports-table td[data-label="Customer"] {
        order: -3 !important;
        border-bottom: none !important;
        padding-bottom: 0.25rem !important;
    }

    .reports-table td[data-label="Customer"] .customer-info {
        flex-direction: row !important;
        gap: 0.75rem !important;
    }

    .reports-table td[data-label="Customer"] .customer-avatar {
        width: 40px !important;
        height: 40px !important;
        font-size: 0.9rem !important;
    }

    .reports-table td[data-label="Customer"] .customer-details h6 {
        font-size: 1.1rem !important;
        font-weight: 700 !important;
        color: #1f2937 !important;
    }

    /* Status - absolute position top right */
    .reports-table td[data-label="Status"] {
        order: -2 !important;
        position: absolute !important;
        top: 1rem !important;
        right: 1rem !important;
        padding: 0 !important;
        border: none !important;
        width: auto !important;
    }

    /* Address - full width, no truncation */
    .reports-table td[data-label="Address"] {
        order: -1 !important;
        font-size: 0.85rem !important;
        color: #6b7280 !important;
        padding: 0.25rem 0 0.5rem 0 !important;
        border-bottom: 1px solid #e5e7eb !important;
        margin-bottom: 0.25rem !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        word-wrap: break-word !important;
        line-height: 1.4 !important;
    }

    /* Grid layout for middle fields */
    .reports-table td[data-label="Date"],
    .reports-table td[data-label="Total"],
    .reports-table td[data-label="Services"],
    .reports-table td[data-label="Permission"] {
        display: inline-flex !important;
        flex-direction: column !important;
        width: 48% !important;
        padding: 0.5rem 0 !important;
        border-bottom: none !important;
        vertical-align: top !important;
    }

    /* Add labels above values */
    .reports-table td[data-label="Date"]::before,
    .reports-table td[data-label="Total"]::before,
    .reports-table td[data-label="Services"]::before,
    .reports-table td[data-label="Permission"]::before {
        content: attr(data-label) !important;
        display: block !important;
        font-size: 0.7rem !important;
        font-weight: 600 !important;
        color: #9ca3af !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        margin-bottom: 0.25rem !important;
    }

    /* Price styling */
    .reports-table td[data-label="Total"] .price-value {
        font-size: 1rem !important;
        font-weight: 700 !important;
        color: #059669 !important;
    }

    /* Permission toggle - centered */
    .reports-table td[data-label="Permission"] {
        text-align: center !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .reports-table td[data-label="Permission"] .permission-toggle {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.5rem !important;
        margin: 0 auto !important;
    }

    .reports-table td[data-label="Permission"] .permission-label,
    .reports-table td[data-label="Permission"] .permission-indicator {
        display: none !important;
    }

    /* Actions - full width at bottom */
    .reports-table td[data-label="Actions"] {
        display: flex !important;
        width: 100% !important;
        justify-content: center !important;
        gap: 0.5rem !important;
        padding-top: 1rem !important;
        border-top: 1px solid #f3f4f6 !important;
        margin-top: 0.5rem !important;
    }

    .reports-table td[data-label="Actions"]::before {
        display: none !important;
    }

    .reports-table td[data-label="Actions"] > div {
        display: flex !important;
        width: 100% !important;
        gap: 0.5rem !important;
        justify-content: center !important;
    }

    .reports-table td[data-label="Actions"] .action-btn {
        flex: 1 !important;
        padding: 0.6rem 1rem !important;
        font-size: 0.85rem !important;
        border-radius: 8px !important;
        justify-content: center !important;
    }

    .reports-table td[data-label="Actions"] .hamburger-menu {
        flex: 0 !important;
    }

    .reports-table td[data-label="Actions"] .hamburger-trigger {
        padding: 0.6rem 0.75rem !important;
        background: #f3f4f6 !important;
        border-radius: 8px !important;
    }

    /* Table container - transparent on mobile */
    .reports-table-container {
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        overflow: visible !important;
        padding: 0 !important;
    }

    /* Search controls stack */
    .search-controls {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }

    .search-input {
        width: 100% !important;
        max-width: none !important;
    }

    /* Hide filter dropdowns on mobile */
    .filter-select {
        display: none !important;
    }

    .search-input-container {
        max-width: none !important;
        width: 100% !important;
    }

    /* ===========================================
       STATS HEADER - Option 2: Mini Cards Row
       =========================================== */

    #stats-header {
        margin-bottom: 0.5rem !important;
        padding: 0 !important;
    }

    /* Title Row */
    #stats-header > div > div:first-child {
        grid-column: 1 / -1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 !important;
        margin-bottom: 0.5rem !important;
    }

    #stats-header > div > div:first-child h1 {
        font-size: 1rem !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }

    #stats-header > div > div:first-child p {
        font-size: 0.65rem !important;
        background: #f3f4f6 !important;
        padding: 0.2rem 0.5rem !important;
        border-radius: 4px !important;
        margin: 0 !important;
    }

    /* 4-column mini cards */
    #stats-header > div {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 0.5rem !important;
        align-items: stretch !important;
    }

    /* Mini metric cards - centered compact */
    .modern-metric-card.mini-metric {
        background: white !important;
        border-radius: 10px !important;
        padding: 0.6rem 0.4rem !important;
        text-align: center !important;
        box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
    }

    /* Stack: icon top, value middle, label bottom */
    .mini-metric > div {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 0.3rem !important;
    }

    /* Icon - smaller centered */
    .mini-metric > div > div:first-child {
        width: 24px !important;
        height: 24px !important;
        border-radius: 6px !important;
        order: -1 !important;
    }

    .mini-metric > div > div:first-child i {
        font-size: 0.7rem !important;
    }

    /* Text container */
    .mini-metric > div > div:last-child {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        flex: unset !important;
    }

    /* Value */
    .mini-metric > div > div:last-child > div:last-child {
        font-size: 0.95rem !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        order: 1 !important;
    }

    /* Label - tiny uppercase */
    .mini-metric > div > div:last-child > div:first-child {
        font-size: 0.55rem !important;
        text-transform: uppercase !important;
        color: #9ca3af !important;
        order: 2 !important;
        margin: 0 !important;
    }

    /* New quote section */
    .new-quote-section {
        padding: 1rem !important;
    }

    /* Table meta - stack */
    .table-meta {
        flex-direction: column !important;
        gap: 0.5rem !important;
        text-align: center !important;
    }

    /* ===========================================
       UTILITIES SECTION - Compact 3-Column
       =========================================== */

    /* Utilities in report detail modal */
    .utilities-section,
    [style*="fas fa-plug"] + div {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.5rem !important;
        text-align: center !important;
    }

    .utilities-section > div,
    .utility-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 0.25rem !important;
        padding: 0.5rem !important;
        background: #f8f9fa !important;
        border-radius: 8px !important;
    }

    .utilities-section strong,
    .utility-item strong {
        font-size: 0.7rem !important;
        color: #6b7280 !important;
    }

    /* ===========================================
       START NOW - Travel Fee Section
       =========================================== */

    /* Travel Fee charge-summary section - Stack properly */
    .charge-summary {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
        padding: 8px 0 !important;
    }

    .charge-summary .charge-label {
        font-size: 0.85rem !important;
        color: #6b7280 !important;
    }

    .charge-summary .charge-amount {
        font-size: 1.1rem !important;
        font-weight: 700 !important;
        color: #059669 !important;
    }

    .charge-summary .status-badge {
        font-size: 0.75rem !important;
        padding: 2px 8px !important;
        border-radius: 4px !important;
        background: #dcfce7 !important;
        color: #059669 !important;
        margin-top: 2px !important;
    }

    /* Compact mode buttons - horizontal centered */
    .compact-mode-buttons,
    #compactModeButtons {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        gap: 8px !important;
        margin-top: 8px !important;
    }

    .compact-mode-btn {
        padding: 6px 16px !important;
        font-size: 0.85rem !important;
        border-radius: 6px !important;
    }

    /* Compact travel calc - center text */
    .compact-travel-calc,
    #compactTravelCalc {
        text-align: center !important;
        font-size: 0.8rem !important;
        line-height: 1.4 !important;
        word-break: break-word !important;
    }
}

/* ===========================================
   COST ESTIMATES - Smaller Mobile Fonts
   =========================================== */

@media (max-width: 768px) {
    /* Stats header numbers - smaller */
    .metric-number,
    .stat-value {
        font-size: 0.75rem !important;
    }

    /* Stats labels - smaller */
    .metric-label,
    .stat-label {
        font-size: 0.4rem !important;
        line-height: 1.1 !important;
    }

    /* Search input - smaller */
    .search-input {
        font-size: 0.7rem !important;
    }

    /* Search input placeholder - smaller */
    .search-input::placeholder {
        font-size: 0.7rem !important;
    }

    /* Hide checkbox (1), row number (2), STATUS (8) on mobile - KEEP Services visible */
    .elegant-table td:nth-child(1),
    .elegant-table td:nth-child(2),
    .elegant-table td:nth-child(8) {
        display: none !important;
    }

    /* Center all card content on mobile */
    .elegant-table tr {
        text-align: center !important;
    }

    .elegant-table td {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .elegant-table td::before {
        text-align: center !important;
        width: 100% !important;
        display: block !important;
        margin-bottom: 0.25rem !important;
    }

    /* Customer cell - stack and center */
    .customer-cell {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Hide customer avatar/initials icon on mobile */
    .customer-initial {
        display: none !important;
    }

    .customer-details {
        text-align: center !important;
    }

    .customer-details h4 {
        text-align: center !important;
    }

    .customer-email {
        text-align: center !important;
    }

    /* Property address - stack below label and center */
    .elegant-table td:nth-child(6) {
        flex-direction: column !important;
        align-items: center !important;
    }

    .property-address {
        text-align: center !important;
        display: block !important;
    }

    /* Center the actions column */
    .elegant-table td:nth-child(10) {
        justify-content: center !important;
        align-items: center !important;
        border-top: none !important;
    }

    /* 3-dot menu - turn into "More Options" button on mobile */
    .hamburger-trigger {
        background: linear-gradient(135deg, var(--primary-color), rgba(var(--primary-rgb), 0.8)) !important;
        border: none !important;
        border-radius: 8px !important;
        padding: 0.6rem 1.2rem !important;
        width: auto !important;
        height: auto !important;
        box-shadow: 0 2px 6px rgba(var(--primary-rgb), 0.3) !important;
        margin: 0 auto !important;
    }

    /* Hide the 3-dot icon */
    .hamburger-trigger i {
        display: none !important;
    }

    /* Add "More Options" text */
    .hamburger-trigger::after {
        content: "More Options" !important;
        color: white !important;
        font-size: 0.75rem !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
    }

    .hamburger-trigger:hover {
        transform: scale(1.02) !important;
        box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.4) !important;
    }
}

/* ===========================================
   EXTRA SMALL PHONES (480px and below)
   =========================================== */

@media (max-width: 480px) {
    /* Keep 4 mini cards, just smaller */
    #stats-header > div {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 0.25rem !important;
    }

    .modern-metric-card.mini-metric {
        padding: 0.4rem 0.2rem !important;
    }

    .mini-metric > div > div:first-child {
        width: 20px !important;
        height: 20px !important;
    }

    .mini-metric > div > div:first-child i {
        font-size: 0.6rem !important;
    }

    .mini-metric > div > div:last-child > div:last-child {
        font-size: 0.8rem !important;
    }

    .mini-metric > div > div:last-child > div:first-child {
        font-size: 0.5rem !important;
    }

    .reports-table tr {
        padding: 0.75rem !important;
    }

    .reports-table td[data-label="Date"],
    .reports-table td[data-label="Total"],
    .reports-table td[data-label="Services"],
    .reports-table td[data-label="Permission"] {
        width: 48% !important;
    }

    .reports-table td[data-label="Actions"] > div {
        flex-direction: column !important;
    }

    .reports-table td[data-label="Actions"] .action-btn {
        width: 100% !important;
    }

    .reports-table td[data-label="Status"] {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        order: -2 !important;
        width: 100% !important;
        text-align: right !important;
        padding: 0 0 0.5rem 0 !important;
    }
}

/* ===========================================
   DASHBOARD - Mobile Sidebar Cleanup
   =========================================== */

@media (max-width: 768px) {
    /* Hide greeting and date - keep business name */
    #userGreeting {
        display: none !important;
    }

    .timezone-display {
        display: none !important;
    }

    /* Business name more prominent */
    #companyGreeting {
        font-size: 1rem !important;
        font-weight: 600 !important;
        margin: 0 !important;
        padding: 0.5rem 0 !important;
    }
}

/* ===========================================
   COST ESTIMATES - Mobile Header & Metrics
   =========================================== */

@media (max-width: 768px) {
    /* Stack header - title above metrics */
    .page-header {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 0.75rem !important;
    }

    /* Hide subtitle */
    .page-subtitle {
        display: none !important;
    }

    /* Title row - smaller */
    .page-header h1 {
        font-size: 1.1rem !important;
        margin-bottom: 0.5rem !important;
    }

    /* Metrics grid - 4 mini cards in row */
    .metrics-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 0.4rem !important;
        margin: 0 !important;
        width: 100% !important;
    }

    /* Mini metric cards */
    .metric-card {
        padding: 0.4rem !important;
        text-align: center !important;
        min-width: 0 !important;
    }

    .metric-content {
        flex-direction: column !important;
        align-items: center !important;
        gap: 0.2rem !important;
    }

    /* Number - prominent */
    .metric-number {
        font-size: 0.95rem !important;
        font-weight: 700 !important;
        order: 1 !important;
    }

    /* Label - tiny */
    .metric-label {
        font-size: 0.5rem !important;
        text-transform: uppercase !important;
        color: #6b7280 !important;
        order: 2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
    }

    /* Hide percentage change and icon on mobile */
    .metric-content > span,
    .metric-icon {
        display: none !important;
    }
}