/**
 * Mobile responsive styles for Telecast
 */

/* Mobile breakpoints */
/* Small devices (landscape phones, 576px and up) */
@media (max-width: 575.98px) {
    /* Adjust container padding */
    .container-fluid {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Simplify header */
    .navbar-brand {
        font-size: 1.1rem;
    }

    /* Stack navigation tabs vertically */
    .nav-tabs {
        flex-direction: column;
    }

    .nav-tabs .nav-link {
        border-radius: 0.25rem;
        margin-bottom: 0.25rem;
    }

    /* Make cards full width */
    .card {
        margin-bottom: 1rem;
    }

    /* Adjust button sizes */
    .btn-group-sm > .btn, .btn-sm {
        padding: 0.25rem 0.5rem;
        font-size: 0.8rem;
    }

    /* Chat list optimizations */
    #chatList {
        max-height: 50vh;
    }

    .chat-item {
        padding: 0.5rem;
    }

    .chat-item .form-check-input {
        margin-top: 0.5rem;
    }

    /* Hide less important columns in tables */
    .d-none-mobile {
        display: none !important;
    }

    /* Scheduled messages table */
    #scheduledTableBody td {
        padding: 0.5rem;
        font-size: 0.85rem;
    }

    /* Modal adjustments */
    .modal-dialog {
        margin: 0.5rem;
    }

    .modal-content {
        border-radius: 0.5rem;
    }

    /* Progress card */
    #progressCard {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        border-radius: 0;
        margin: 0;
        z-index: 1050;
    }

    /* Form controls */
    .form-control, .form-select {
        font-size: 16px; /* Prevent zoom on iOS */
    }

    /* Message input area */
    #messageInput {
        min-height: 80px;
    }

    /* Action buttons */
    .action-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .action-buttons .btn {
        flex: 1;
        min-width: 120px;
    }

    /* Stats cards */
    .stats-card {
        margin-bottom: 1rem;
    }

    .stats-card .card-body {
        padding: 1rem;
    }

    /* Search and filter */
    .search-filter-group {
        flex-direction: column;
    }

    .search-filter-group > * {
        width: 100%;
        margin-bottom: 0.5rem;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
    /* Tablet-specific styles */
    #chatList {
        max-height: 60vh;
    }

    .modal-dialog {
        max-width: 90%;
    }
}

/* Touch device optimizations */
@media (pointer: coarse) {
    /* Larger touch targets */
    .btn {
        min-height: 44px;
        min-width: 44px;
    }

    .form-check-input {
        width: 1.5em;
        height: 1.5em;
    }

    /* Better spacing for touch */
    .list-group-item {
        padding: 0.75rem 1rem;
    }

    /* Easier to tap close buttons */
    .btn-close {
        padding: 0.5rem;
    }
}

/* Landscape mode adjustments */
@media (max-width: 767.98px) and (orientation: landscape) {
    /* Reduce vertical space usage */
    .navbar {
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }

    #chatList {
        max-height: 40vh;
    }

    .modal-dialog {
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .btn-outline-primary {
        border-width: 2px;
    }

    .form-control, .form-select {
        border-width: 2px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .progress-bar {
        transition: none;
    }

    .modal.fade .modal-dialog {
        transition: none;
    }

    .collapse {
        transition: none;
    }
}

/* Dark mode mobile adjustments */
@media (max-width: 575.98px) and (prefers-color-scheme: dark) {
    body {
        background-color: #121212;
    }

    .card {
        background-color: #1e1e1e;
        border-color: #333;
    }

    .modal-content {
        background-color: #1e1e1e;
        border-color: #333;
    }
}

/* Utility classes for mobile */
.mobile-only {
    display: none;
}

@media (max-width: 575.98px) {
    .mobile-only {
        display: block;
    }

    .desktop-only {
        display: none !important;
    }
}

/* Sticky header on mobile */
@media (max-width: 767.98px) {
    .sticky-mobile-header {
        position: sticky;
        top: 0;
        z-index: 1020;
        background-color: var(--bs-body-bg);
        padding: 0.5rem 0;
        border-bottom: 1px solid var(--bs-border-color);
    }
}

/* Floating action button for mobile */
.fab-mobile {
    display: none;
}

@media (max-width: 575.98px) {
    .fab-mobile {
        display: flex;
        position: fixed;
        bottom: 1rem;
        right: 1rem;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 8px rgba(0,0,0,0.3);
        z-index: 1040;
    }
}