/* =====================================================
   MOBILE APP EXPERIENCE ENHANCEMENTS
   Makes the portal feel like a native mobile app
   ===================================================== */

/* =====================================================
   BASE MOBILE OVERRIDES
   ===================================================== */
@media (max-width: 768px) {
    /* Prevent horizontal overflow globally */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    /* App-like page content */
    .page-content {
        padding: 12px !important;
        padding-bottom: 80px !important; /* Space for potential bottom nav */
    }

    /* Page headers - app style */
    .page-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        margin-bottom: 16px !important;
        padding: 0 !important;
    }

    .page-header h1,
    .page-title {
        font-size: 1.375rem !important;
        margin-bottom: 0 !important;
    }

    .page-header .actions,
    .page-header .header-actions,
    .page-header > div:last-child {
        display: flex !important;
        gap: 8px !important;
        width: 100% !important;
    }

    /* Mailbox buttons - 2x2 grid layout */
    .page-header .actions.mailbox-actions {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .page-header .actions .btn,
    .page-header .header-actions .btn {
        flex: 1 !important;
        justify-content: center !important;
        padding: 12px 16px !important;
        font-size: 14px !important;
        min-height: 44px !important;
    }

    .page-header .actions.mailbox-actions .btn {
        flex: none !important;
        width: 100% !important;
        padding: 12px 8px !important;
        font-size: 13px !important;
    }

    /* =====================================================
       BUTTONS - Touch Friendly
       ===================================================== */
    .btn {
        min-height: 44px !important;
        padding: 10px 16px !important;
        font-size: 14px !important;
        border-radius: 10px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        white-space: nowrap !important;
    }

    .btn-sm {
        min-height: 36px !important;
        padding: 8px 12px !important;
        font-size: 13px !important;
    }

    .btn-lg {
        min-height: 52px !important;
        padding: 14px 24px !important;
        font-size: 16px !important;
    }

    /* Button groups - full width on mobile */
    .btn-group {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .btn-group .btn {
        flex: 1 !important;
        min-width: calc(50% - 4px) !important;
    }

    /* Action buttons in tables/lists - icon only on mobile */
    td .btn,
    .action-buttons .btn,
    .table-actions .btn {
        padding: 8px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        flex: 0 0 auto !important;
    }

    td .btn span:not(.fa):not(.fas):not(.far):not(.fab),
    .action-buttons .btn span:not(.fa):not(.fas):not(.far):not(.fab),
    .table-actions .btn span:not(.fa):not(.fas):not(.far):not(.fab) {
        display: none !important;
    }

    /* =====================================================
       CARDS - Mobile Optimized
       ===================================================== */
    .card {
        border-radius: 12px !important;
        margin-bottom: 12px !important;
        border: none !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    }

    .card-header {
        padding: 14px 16px !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .card-header h2,
    .card-header h3,
    .card-header .card-title {
        font-size: 1rem !important;
        margin: 0 !important;
    }

    .card-header .btn-group,
    .card-header .actions {
        width: 100% !important;
        display: flex !important;
        gap: 8px !important;
    }

    .card-body {
        padding: 14px 16px !important;
    }

    .card-footer {
        padding: 12px 16px !important;
    }

    /* =====================================================
       FORMS - Mobile Optimized
       ===================================================== */
    .form-group {
        margin-bottom: 16px !important;
    }

    .form-label,
    label {
        font-size: 13px !important;
        font-weight: 600 !important;
        margin-bottom: 6px !important;
        display: block !important;
    }

    .form-control,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="date"],
    input[type="datetime-local"],
    select,
    textarea {
        width: 100% !important;
        min-height: 48px !important;
        padding: 12px 14px !important;
        font-size: 16px !important; /* Prevents zoom on iOS */
        border-radius: 10px !important;
        border: 1px solid var(--border-color) !important;
        background: var(--bg-secondary) !important;
    }

    textarea.form-control {
        min-height: 100px !important;
    }

    /* Form rows - stack on mobile */
    .form-row,
    .row {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .form-row > div,
    .row > div[class*="col-"] {
        width: 100% !important;
        flex: none !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    /* Inline forms */
    .filter-form,
    .search-form {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .filter-form .form-group,
    .search-form .form-group {
        width: 100% !important;
        margin: 0 !important;
    }

    /* Checkboxes and radios - larger touch targets */
    input[type="checkbox"],
    input[type="radio"] {
        width: 22px !important;
        height: 22px !important;
        margin-right: 10px !important;
    }

    .form-check,
    .checkbox-label,
    label:has(input[type="checkbox"]),
    label:has(input[type="radio"]) {
        display: flex !important;
        align-items: center !important;
        padding: 12px 0 !important;
        min-height: 44px !important;
    }

    /* =====================================================
       TABLES - Mobile Card View
       ===================================================== */
    .table-responsive {
        margin: 0 -16px !important;
        padding: 0 16px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .table {
        min-width: 600px !important;
    }

    .table th,
    .table td {
        padding: 10px 12px !important;
        font-size: 13px !important;
        white-space: nowrap !important;
    }

    .table th {
        font-size: 11px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }

    /* Sticky first column */
    .table-responsive .table th:first-child,
    .table-responsive .table td:first-child {
        position: sticky !important;
        left: 0 !important;
        background: var(--bg-card) !important;
        z-index: 1 !important;
    }

    /* =====================================================
       STATS & DASHBOARD
       ===================================================== */
    .stats-grid,
    .stats-row,
    .row.stats-row {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .stat-card {
        padding: 14px !important;
        border-radius: 12px !important;
    }

    .stat-card .stat-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 1.125rem !important;
        margin-bottom: 8px !important;
    }

    .stat-card .stat-value {
        font-size: 1.375rem !important;
        line-height: 1.2 !important;
    }

    .stat-card .stat-label {
        font-size: 0.75rem !important;
    }

    /* =====================================================
       MODALS - Full Screen on Mobile
       ===================================================== */
    .modal {
        padding: 0 !important;
    }

    .modal-dialog,
    .modal-content {
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
    }

    .modal-header {
        padding: 16px !important;
        position: sticky !important;
        top: 0 !important;
        background: var(--bg-card) !important;
        z-index: 10 !important;
        border-bottom: 1px solid var(--border-color) !important;
    }

    .modal-body {
        padding: 16px !important;
        overflow-y: auto !important;
        flex: 1 !important;
    }

    .modal-footer {
        padding: 12px 16px !important;
        position: sticky !important;
        bottom: 0 !important;
        background: var(--bg-card) !important;
        border-top: 1px solid var(--border-color) !important;
        gap: 8px !important;
    }

    .modal-footer .btn {
        flex: 1 !important;
    }

    /* =====================================================
       BADGES & TAGS
       ===================================================== */
    .badge {
        padding: 4px 10px !important;
        font-size: 11px !important;
        border-radius: 6px !important;
    }

    /* =====================================================
       LISTS & NAV
       ===================================================== */
    .list-group-item {
        padding: 14px 16px !important;
    }

    .nav-tabs {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    .nav-tabs::-webkit-scrollbar {
        display: none !important;
    }

    .nav-tabs .nav-link {
        white-space: nowrap !important;
        padding: 12px 16px !important;
    }

    /* =====================================================
       DROPDOWNS
       ===================================================== */
    .dropdown-menu {
        min-width: 200px !important;
        max-width: calc(100vw - 32px) !important;
        border-radius: 12px !important;
        padding: 8px !important;
    }

    .dropdown-item {
        padding: 12px 16px !important;
        border-radius: 8px !important;
    }

    /* =====================================================
       ALERTS & NOTIFICATIONS
       ===================================================== */
    .alert {
        padding: 14px 16px !important;
        border-radius: 10px !important;
        font-size: 14px !important;
    }

    .flash-messages {
        padding: 0 12px !important;
        margin-bottom: 12px !important;
    }

    /* =====================================================
       SPECIFIC PAGE FIXES
       ===================================================== */

    /* Settings page cards */
    div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* Invoice/Quote/Contract view */
    .invoice-details,
    .quote-details,
    .document-details {
        padding: 16px !important;
    }

    /* Client/Lead cards */
    .client-card,
    .lead-card {
        padding: 14px !important;
    }

    /* Pipeline/Kanban boards */
    .pipeline-container,
    .kanban-board {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 16px !important;
    }

    .pipeline-column,
    .kanban-column {
        min-width: 280px !important;
        flex-shrink: 0 !important;
    }

    /* Calendar */
    .calendar-container {
        overflow-x: auto !important;
    }

    /* Empty states */
    .empty-state {
        padding: 40px 20px !important;
    }

    .empty-state .empty-icon {
        font-size: 48px !important;
    }

    .empty-state h3 {
        font-size: 1.125rem !important;
    }

    /* =====================================================
       UTILITY CLASSES
       ===================================================== */
    .d-none-mobile {
        display: none !important;
    }

    .d-block-mobile {
        display: block !important;
    }

    .w-100-mobile {
        width: 100% !important;
    }

    .text-center-mobile {
        text-align: center !important;
    }

    .mb-mobile {
        margin-bottom: 12px !important;
    }

    .p-mobile {
        padding: 12px !important;
    }
}

/* =====================================================
   EXTRA SMALL SCREENS (< 480px)
   ===================================================== */
@media (max-width: 480px) {
    .page-content {
        padding: 10px !important;
    }

    .page-header h1,
    .page-title {
        font-size: 1.25rem !important;
    }

    .stats-grid,
    .stats-row {
        grid-template-columns: 1fr !important;
    }

    .stat-card {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
    }

    .stat-card .stat-icon {
        margin-bottom: 0 !important;
    }

    .stat-card .stat-content {
        flex: 1 !important;
    }

    .card-body {
        padding: 12px !important;
    }

    .btn {
        padding: 10px 14px !important;
        font-size: 13px !important;
    }

    .table th,
    .table td {
        padding: 8px 10px !important;
        font-size: 12px !important;
    }
}

/* =====================================================
   TOUCH DEVICE ENHANCEMENTS
   ===================================================== */
@media (pointer: coarse) {
    /* All clickable elements get proper touch targets */
    a, button, .btn, .nav-link, .dropdown-item, .list-group-item {
        min-height: 44px !important;
    }

    /* Remove hover effects that don't work well on touch */
    .hover-lift:hover {
        transform: none !important;
    }

    /* Better tap highlight */
    * {
        -webkit-tap-highlight-color: rgba(168, 85, 247, 0.2) !important;
    }
}

/* =====================================================
   SAFE AREA SUPPORT (iPhone X+, etc)
   ===================================================== */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    @media (max-width: 768px) {
        .page-content {
            padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important;
        }

        .modal-footer {
            padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
        }

        .sidebar {
            padding-bottom: env(safe-area-inset-bottom) !important;
        }
    }
}

/* =====================================================
   LANDSCAPE MOBILE
   ===================================================== */
@media (max-width: 896px) and (orientation: landscape) {
    .modal-dialog,
    .modal-content {
        height: auto !important;
        max-height: 100vh !important;
    }

    .page-content {
        padding-bottom: 20px !important;
    }
}