/* Mobile and Tablet Responsive Styles */
/* Optimized for iPad and other tablet devices */

/* iPad-specific styles (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Ensure call cards use full width on tablets */
    .mobile-calls-container .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Larger touch targets for iPad */
    .btn-mobile-action {
        padding: 12px 24px;
        font-size: 1.1rem;
    }

    /* Better spacing for tablet view */
    .call-card-mobile, .unit-card-mobile {
        margin-bottom: 1rem;
    }

    /* Optimize font sizes for tablet readability */
    .mobile-call-info {
        font-size: 1rem;
    }

    .mobile-priority-badge,
    .mobile-status-badge,
    .mobile-unit-badge,
    .mobile-cfs-badge {
        font-size: 0.9rem;
        padding: 0.375rem 0.75rem;
    }
}

/* iPad Pro and larger tablets (1024px - 1366px) */
@media (min-width: 1024px) and (max-width: 1366px) {
    /* Allow 2 columns on larger tablets if space permits */
    .mobile-calls-container .row > div {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* Ensure units still display nicely */
    .unit-card-mobile {
        min-height: 150px;
    }
}

/* Phone and small tablet styles (max-width: 767px) */
@media (max-width: 767px) {
    /* Force single column on phones */
    .mobile-calls-container .row > div,
    .col-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Smaller padding on mobile */
    .card-body.p-3 {
        padding: 1rem !important;
    }

    /* Optimize button size for mobile */
    .btn-mobile-action {
        width: 100%;
        padding: 10px 20px;
    }

    /* Smaller badges on mobile */
    .mobile-priority-badge,
    .mobile-status-badge,
    .mobile-unit-badge,
    .mobile-cfs-badge {
        font-size: 0.8rem;
        padding: 0.25rem 0.5rem;
    }

    /* Better text wrapping on small screens */
    .text-break {
        word-break: break-word;
        overflow-wrap: anywhere;
    }
}

/* General mobile/tablet improvements */
.mobile-empty-icon {
    font-size: 4rem;
    color: #28a745;
}

.unit-number-mobile {
    font-weight: 600;
    color: #333;
}

.mobile-unit-status-badge {
    white-space: nowrap;
}

/* Ensure proper vertical spacing between stacked sections */
.row.g-3 > [class*='col-'] {
    margin-bottom: 1rem;
}

/* iPad Mini specific adjustments (768px x 1024px in portrait) */
@media (min-width: 768px) and (max-width: 768px) and (min-height: 1024px) {
    /* Full width cards for iPad Mini portrait */
    .mobile-calls-container .row > div {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* iPad Mini landscape (1024px x 768px) */
@media (min-width: 1024px) and (max-width: 1024px) and (max-height: 768px) {
    /* Allow 2 columns in landscape if space permits */
    .mobile-calls-container .row > div {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* Improve touch targets for all mobile/tablet devices */
@media (max-width: 1366px) and (pointer: coarse) {
    a, button {
        min-height: 44px;
        min-width: 44px;
    }

    .badge {
        padding: 0.5rem 0.75rem;
    }
}