/* 
 * Organisize Mobile Responsive Dashboard Styles
 * Enhances mobile experience using Bootstrap grid system and media queries
 */

/* Small devices (landscape phones, 576px and up) */
@media (max-width: 575.98px) {
    /* Dashboard Home Page - Mobile optimizations */
    .dashboard-card-grid .card {
        margin-bottom: 1rem;
    }
    
    .dashboard-card-grid .card-body {
        padding: 1rem;
    }
    
    .dashboard-card-grid .btn {
        font-size: 0.875rem;
        padding: 0.5rem 1rem;
    }
    
    /* Vacation Detail Page - Action Buttons */
    .vacation-actions {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .vacation-actions .btn {
        width: 100%;
        font-size: 0.875rem;
    }
    
    /* Transportation, Stays, Activities Sections */
    .section-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.5rem;
    }
    
    .section-header .btn {
        width: 100%;
        font-size: 0.875rem;
    }
    
    /* List items with action buttons */
    .list-group-item .d-flex {
        flex-direction: column;
        align-items: flex-start !important;
    }
    
    .list-group-item .d-flex > div:last-child {
        width: 100%;
        margin-top: 1rem;
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .list-group-item .d-flex > div:last-child .btn {
        width: 100%;
        font-size: 0.75rem;
        padding: 0.375rem 0.75rem;
    }
    
    /* Activity voting buttons */
    .list-group-item .d-flex .d-flex.flex-column {
        width: 100%;
        align-items: stretch !important;
    }
    
    .list-group-item .d-flex .d-flex.flex-column .btn {
        margin-top: 0.25rem;
    }
    
    /* Shared users section */
    .shared-users-actions {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        margin-top: 1rem;
    }
    
    .shared-users-actions .btn {
        width: 100%;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
    /* Vacation Detail Page - Slightly better button layout for tablets */
    .vacation-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .vacation-actions .btn {
        flex: 1;
        min-width: calc(50% - 0.25rem);
    }
    
    /* Section headers - keep inline for tablets */
    .section-header .btn {
        white-space: nowrap;
    }
}

/* Modal Responsiveness */
@media (max-width: 575.98px) {
    /* Make modals more mobile-friendly */
    .modal-dialog {
        margin: 0.5rem;
    }
    
    .modal-dialog.modal-lg {
        max-width: none;
        margin: 0.5rem;
    }
    
    .modal-content {
        border-radius: 0.5rem;
    }
    
    .modal-header {
        padding: 1rem;
    }
    
    .modal-body {
        padding: 1rem;
    }
    
    .modal-footer {
        padding: 1rem;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .modal-footer .btn {
        width: 100%;
        order: 2;
    }
    
    .modal-footer .btn-secondary {
        order: 1;
    }
    
    /* Form improvements in modals */
    .modal-body .mb-3 {
        margin-bottom: 1rem;
    }
    
    .modal-body .form-control,
    .modal-body .form-select {
        font-size: 16px; /* Prevents zoom on iOS */
    }
}

/* Navigation Improvements */
@media (max-width: 991.98px) {
    /* Navbar improvements for mobile/tablet */
    .navbar-nav .nav-link {
        padding: 0.5rem 1rem;
    }
    
    .navbar-collapse {
        margin-top: 0.5rem;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding-top: 0.5rem;
    }
}

/* Card Layout Improvements */
@media (max-width: 575.98px) {
    /* Better card spacing on very small screens */
    .card {
        border-radius: 0.5rem;
        margin-bottom: 1rem;
    }
    
    .card-header {
        padding: 0.75rem 1rem;
    }
    
    .card-body {
        padding: 1rem;
    }
    
    /* Vacation card improvements */
    .vacation-card .badge {
        font-size: 0.75rem;
    }
    
    .vacation-card .btn {
        font-size: 0.875rem;
    }
}

/* Table Responsiveness */
@media (max-width: 767.98px) {
    .table-responsive {
        border: none;
    }
    
    .table-responsive .table {
        font-size: 0.875rem;
    }
    
    .table-responsive .table td,
    .table-responsive .table th {
        padding: 0.5rem 0.25rem;
        vertical-align: top;
    }
}

/* Additional spacing and layout improvements */
@media (max-width: 575.98px) {
    /* Container padding adjustments */
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Section spacing */
    .mt-4 {
        margin-top: 1.5rem !important;
    }
    
    .mt-5 {
        margin-top: 2rem !important;
    }
    
    .mb-4 {
        margin-bottom: 1.5rem !important;
    }
    
    .mb-5 {
        margin-bottom: 2rem !important;
    }
    
    /* Typography improvements */
    h1 {
        font-size: 1.75rem;
    }
    
    h2 {
        font-size: 1.5rem;
    }
    
    h4 {
        font-size: 1.25rem;
    }
    
    .lead {
        font-size: 1.1rem;
    }
}

/* Utility classes for mobile-specific layouts */
.mobile-stack {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

@media (min-width: 576px) {
    .mobile-stack {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.mobile-full-width {
    width: 100%;
}

@media (min-width: 576px) {
    .mobile-full-width {
        width: auto;
    }
}