/* Mobile adjustments for Deal Manager */

/* Base mobile adjustments */
@media (max-width: 767.98px) {
    /* Prevent horizontal scroll */
    body {
        overflow-x: hidden;
    }
    
    .container-fluid {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    .card {
        margin-bottom: 1rem;
        border-radius: 0.5rem;
    }
    
    .card-title {
        font-size: 1rem;
    }
    
    .card-body {
        padding: 1rem;
    }
    
    .btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
    }
    
    .btn-sm {
        padding: 0.375rem 0.5rem;
        font-size: 0.75rem;
    }
    
    .table-sm td, .table-sm th {
        padding: 0.25rem;
    }
    
    /* Chart container heights */
    #salesMap {
        height: 300px !important;
    }
    
    #optionsSalesTimeline {
        height: 250px !important;
    }
    
    #salesPerOption {
        height: 250px !important;
    }
    
    .chart-container:not(#salesMap):not(#optionsSalesTimeline):not(#salesPerOption) {
        height: 250px !important;
    }
    
    /* Improve table readability */
    .table {
        font-size: 0.875rem;
    }
    
    /* Ensure buttons are more touch-friendly */
    .btn-group > .btn {
        padding: 0.5rem 0.75rem;
    }
    
    /* Mobile table optimizations */
    .table-responsive {
        border: none;
        margin: -1rem;
        padding: 1rem;
    }
    
    /* Stack form elements on mobile */
    .row .col-md-6,
    .row .col-md-4,
    .row .col-md-3 {
        margin-bottom: 1rem;
    }
    
    /* Mobile header adjustments */
    .header {
        padding: 0.5rem 1rem;
        flex-wrap: wrap;
    }
    
    .header-search {
        order: 3;
        width: 100%;
        margin: 0.5rem 0 0 0;
    }
    
    /* Mobile sidebar improvements */
    .sidebar {
        width: 280px;
    }
    
    /* Mobile form improvements */
    .form-control,
    .form-select {
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    /* Mobile modal adjustments */
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }
    
    /* Mobile calendar adjustments */
    .calendar-cell {
        height: 120px !important;
        padding: 0.25rem;
    }
    
    .calendar-row {
        min-height: 120px !important;
    }
    
    .deal-name-overlay {
        font-size: 0.7rem;
        padding: 0.25rem;
    }
    
    .schedule-btn {
        font-size: 0.7rem;
        padding: 0.25rem 0.5rem;
    }
    
    /* Mobile email form adjustments */
    .form-section {
        margin-bottom: 1.5rem;
        padding: 1rem;
    }
    
    .input-group .btn {
        padding: 0.375rem 0.5rem;
    }
    
    /* Mobile product table adjustments */
    .product-row td {
        vertical-align: top;
    }
    
    .action-cell .btn-group {
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .action-cell .btn {
        font-size: 0.7rem;
        padding: 0.25rem 0.5rem;
    }
}

/* Tablet adjustments */
@media (min-width: 768px) and (max-width: 991.98px) {
    #salesMap {
        height: 400px !important;
    }
    
    #optionsSalesTimeline {
        height: 350px !important;
    }
    
    #salesPerOption {
        height: 350px !important;
    }
    
    .chart-container:not(#salesMap):not(#optionsSalesTimeline):not(#salesPerOption) {
        height: 300px !important;
    }
}

/* Desktop adjustments */
@media (min-width: 992px) {
    #salesMap {
        height: 500px !important;
    }
    
    #optionsSalesTimeline {
        height: 400px !important;
    }
    
    #salesPerOption {
        height: 450px !important;
    }
    
    .chart-container:not(#salesMap):not(#optionsSalesTimeline):not(#salesPerOption) {
        height: 350px !important;
    }
}

/* Additional mobile optimizations */
@media (max-width: 575.98px) {
    /* Extra small devices */
    .container-fluid {
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }
    
    .card-body {
        padding: 0.75rem;
    }
    
    .btn {
        padding: 0.5rem;
        font-size: 0.8rem;
    }
    
    .table {
        font-size: 0.8rem;
    }
    
    .modal-dialog {
        margin: 0.25rem;
        max-width: calc(100% - 0.5rem);
    }
    
    .calendar-cell {
        height: 100px !important;
    }
    
    .calendar-row {
        min-height: 100px !important;
    }
    
    .deal-name-overlay {
        font-size: 0.65rem;
        padding: 0.2rem;
    }
    
    .form-section {
        padding: 0.75rem;
    }
}

/* Mobile-specific table optimizations */
@media (max-width: 767.98px) {
    /* Hide less important columns on mobile */
    .table .d-none-mobile {
        display: none !important;
    }
    
    /* Make action buttons stack vertically */
    .btn-group-vertical-mobile {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }
    
    /* Optimize product table for mobile */
    .product-table-mobile .product-info {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .product-table-mobile .product-image {
        width: 30px;
        height: 30px;
    }
    
    /* Mobile-friendly pagination */
    .pagination {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .pagination .page-link {
        padding: 0.375rem 0.5rem;
        font-size: 0.875rem;
    }
    
    /* Mobile email table optimizations */
    .email-table-mobile .email-subject {
        font-weight: 600;
        margin-bottom: 0.25rem;
    }
    
    .email-table-mobile .email-meta {
        font-size: 0.75rem;
        color: var(--text-muted);
    }
    
    /* Mobile deal overview optimizations */
    .deal-overview-mobile .deal-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
        margin-bottom: 1rem;
    }
    
    .deal-overview-mobile .deal-info {
        grid-column: 1 / -1;
    }
    
    /* Mobile form optimizations */
    .form-mobile .form-group {
        margin-bottom: 1rem;
    }
    
    .form-mobile .form-label {
        font-weight: 600;
        margin-bottom: 0.5rem;
    }
    
    /* Mobile search optimizations */
    .search-mobile .input-group {
        flex-direction: column;
    }
    
    .search-mobile .input-group .btn {
        margin-top: 0.5rem;
        width: 100%;
    }
}

/* Landscape mobile optimizations */
@media (max-width: 767.98px) and (orientation: landscape) {
    .calendar-cell {
        height: 80px !important;
    }
    
    .calendar-row {
        min-height: 80px !important;
    }
    
    .deal-name-overlay {
        font-size: 0.6rem;
        padding: 0.15rem;
    }
    
    .modal-dialog {
        max-height: 90vh;
        overflow-y: auto;
    }
}

/* Dashboard-specific mobile fixes */
@media (max-width: 767.98px) {
    /* Ensure dashboard cards stack properly */
    .row.g-4 {
        --bs-gutter-x: 0.5rem !important;
        --bs-gutter-y: 0.5rem !important;
    }
    
    /* Fix chart container on mobile */
    #salesRevenueChart {
        height: 250px !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    
    /* Ensure all chart containers are mobile-friendly */
    .chart-container {
        height: 250px !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    
    /* Fix any amCharts containers */
    .am5-container {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    
    /* Ensure table cells don't cause overflow */
    .table td, .table th {
        word-wrap: break-word !important;
        word-break: break-word !important;
        white-space: normal !important;
    }
    
    /* Fix any flex containers that might overflow */
    .d-flex {
        flex-wrap: wrap !important;
    }
    
    /* Ensure badges and small elements don't overflow */
    .badge {
        font-size: 0.7rem !important;
        padding: 0.25rem 0.5rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* Fix progress bars on mobile */
    .progress {
        height: 6px !important;
    }
    
    .progress-bar-container {
        width: 50px !important;
        height: 4px !important;
    }
    
    /* Ensure countdown timers fit properly */
    #deal-countdown {
        font-size: 0.7rem !important;
        padding: 2px 6px !important;
        white-space: nowrap !important;
    }
    
    /* Fix icon boxes on mobile */
    .icon-box {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.8rem !important;
    }
    
    /* Ensure no horizontal scroll on any element */
    .card, .card-body, .card-header, .table-responsive, .row, .col, .col-* {
        overflow-x: hidden !important;
    }
    
    /* Fix any remaining text overflow */
    .text-truncate {
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    
    /* Fix card headers that might overflow */
    .card-header {
        padding: 0.75rem 0.5rem !important;
        flex-wrap: wrap !important;
    }
    
    .card-header .card-title {
        font-size: 0.9rem !important;
        margin-bottom: 0.25rem !important;
    }
    
    /* Fix countdown timer positioning */
    .card-header .d-flex {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    .card-header .d-flex .d-flex {
        margin-bottom: 0.25rem !important;
    }
}