/**
 * Enhanced Responsive CSS - Mobile-first responsive design
 * Improved mobile experience with better touch targets and layouts
 */

/* Mobile (Default - 0-767px) */
body {
    font-size: 16px; /* Prevent zoom on iOS */
}

.container {
    padding: 0 var(--space-4);
}

/* Improved Touch Targets for Mobile */
@media (max-width: 767px) {
    /* Minimum touch target size */
    button,
    a.btn,
    input[type="submit"],
    .calendar-day:not(.disabled),
    .slot-button {
        min-height: 44px;
        min-width: 44px;
    }
    
    .form-control {
        min-height: 44px;
        font-size: 16px; /* Prevent zoom on iOS */
    }
    
    /* Auth Pages */
    .auth-container {
        grid-template-columns: 1fr;
        gap: var(--space-4);
        padding: var(--space-3);
    }
    
    .auth-card {
        padding: var(--space-5);
    }
    
    .auth-info {
        display: none; /* Hide on mobile */
    }
    
    .info-card {
        padding: var(--space-4);
    }
    
    /* Dashboard Header */
    .dashboard-header {
        padding: var(--space-3);
    }
    
    .header-content {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
    }
    
    .header-content h1 {
        font-size: var(--text-xl);
    }
    
    .header-actions {
        width: 100%;
        flex-wrap: wrap;
        gap: var(--space-2);
    }
    
    .header-actions .btn {
        flex: 1 1 calc(50% - var(--space-2));
        justify-content: center;
    }
    
    .user-name {
        width: 100%;
        text-align: center;
        border-left: none;
        border-top: 1px solid var(--neutral-200);
        padding: var(--space-2) 0;
        margin-top: var(--space-2);
    }
    
    /* Dashboard Content */
    .dashboard-content {
        padding: var(--space-3);
    }
    
    .dashboard-summary {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }
    
    .summary-card {
        padding: var(--space-4);
    }
    
    .summary-icon {
        font-size: 36px;
    }
    
    .summary-info h3 {
        font-size: var(--text-2xl);
    }
    
    /* Sections */
    .section {
        padding: var(--space-4);
        margin-bottom: var(--space-4);
    }
    
    .section-header {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
    }
    
    .section-header h2 {
        font-size: var(--text-xl);
    }
    
    /* Appointments */
    .appointments-grid {
        grid-template-columns: 1fr;
    }
    
    .appointment-card {
        padding: var(--space-3);
    }
    
    .appointment-header {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-2);
    }
    
    .appointment-footer {
        flex-wrap: wrap;
        gap: var(--space-2);
    }
    
    .appointment-footer .btn {
        flex: 1 1 calc(50% - var(--space-1));
    }
    
    /* Calendar Improvements */
    .calendar-header {
        padding: var(--space-3);
        flex-direction: column;
        gap: var(--space-3);
    }
    
    .calendar-title {
        font-size: var(--text-lg);
        text-align: center;
    }
    
    .calendar-nav {
        width: 100%;
        justify-content: space-between;
    }
    
    .calendar-nav button,
    .calendar-nav .btn {
        flex: 1;
    }
    
    .calendar-weekday {
        font-size: 11px;
        padding: var(--space-1);
    }
    
    .calendar-day {
        min-height: 50px;
        padding: var(--space-1);
    }
    
    .calendar-day-number {
        font-size: var(--text-sm);
    }
    
    .calendar-day-badges {
        bottom: 2px;
        gap: 1px;
    }
    
    .day-badge {
        font-size: 9px;
        padding: 1px 3px;
    }
    
    /* View Toggle Buttons */
    .view-toggle {
        width: 100%;
        display: flex;
        gap: var(--space-2);
    }
    
    .view-toggle .btn {
        flex: 1;
    }
    
    /* Booking Page */
    .booking-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
    
    .calendar-section,
    .booking-section {
        padding: var(--space-4);
    }
    
    .section-title {
        font-size: var(--text-lg);
    }
    
    .slots-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-2);
    }
    
    .slot-button {
        font-size: var(--text-sm);
        padding: 12px 8px;
    }
    
    /* Forms */
    .form-group {
        margin-bottom: var(--space-3);
    }
    
    .btn {
        padding: 12px 20px;
        font-size: var(--text-base);
    }
    
    .btn-block {
        width: 100%;
    }
    
    /* Tables - Mobile Optimized */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 calc(var(--space-4) * -1);
        padding: 0 var(--space-4);
    }
    
    .data-table {
        font-size: var(--text-sm);
        min-width: 600px; /* Prevent excessive squishing */
    }
    
    .data-table th,
    .data-table td {
        padding: var(--space-2) var(--space-2);
        white-space: nowrap;
    }
    
    /* Hide non-essential columns on mobile */
    .data-table .hide-mobile {
        display: none;
    }
    
    /* Modals */
    .modal {
        width: 95%;
        max-height: 90vh;
        margin: var(--space-2);
    }
    
    .modal-header,
    .modal-body,
    .modal-footer {
        padding: var(--space-4);
    }
    
    .modal-footer {
        flex-direction: column-reverse;
        gap: var(--space-2);
    }
    
    .modal-footer .btn {
        width: 100%;
    }
    
    /* Toast Notifications */
    .toast-container {
        left: 10px;
        right: 10px;
        top: auto;
        bottom: 20px;
        max-width: none;
    }
    
    .toast {
        margin-bottom: var(--space-2);
    }
    
    /* Appointment Item - Mobile Layout */
    .appointment-item {
        grid-template-columns: 1fr;
        gap: var(--space-3);
        padding: var(--space-3);
    }
    
    .appointment-time,
    .appointment-status {
        align-items: flex-start;
    }
    
    /* Quick Stats */
    .quick-stats {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }
    
    /* Status Filter Tabs - Mobile Scroll */
    .status-filters {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 calc(var(--space-4) * -1) var(--space-4);
        padding: 0 var(--space-4);
    }
    
    .status-filters > div {
        display: flex;
        gap: var(--space-2);
        min-width: min-content;
    }
    
    .status-filters .btn {
        white-space: nowrap;
    }
}

/* Tablet (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .container {
        padding: 0 var(--space-6);
    }
    
    .auth-container {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-8);
    }
    
    .dashboard-content {
        padding: var(--space-5);
    }
    
    .dashboard-summary {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .booking-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .appointments-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .slots-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .calendar-day {
        min-height: 70px;
    }
    
    /* Show more table columns on tablet */
    .data-table .hide-mobile {
        display: table-cell;
    }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
    .container {
        padding: 0 var(--space-8);
    }
    
    .dashboard-summary {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .appointments-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .slots-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .calendar-day {
        min-height: 80px;
    }
    
    /* Hover effects only on desktop */
    .card:hover,
    .appointment-card:hover,
    .summary-card:hover {
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
    }
    
    .btn:hover:not(:disabled) {
        transform: translateY(-1px);
    }
}

/* Wide screens (1280px+) */
@media (min-width: 1280px) {
    .container {
        max-width: 1280px;
    }
    
    .dashboard-content {
        max-width: 1400px;
    }
    
    .appointments-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Extra Wide screens (1536px+) */
@media (min-width: 1536px) {
    .appointments-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* Print styles */
@media print {
    .no-print,
    .btn,
    .calendar-nav,
    .header-actions,
    .modal-close,
    .view-toggle {
        display: none !important;
    }
    
    .calendar-day:hover {
        background: none !important;
        border-color: transparent !important;
    }
    
    .calendar-day.selected {
        border: 2px solid #000 !important;
        background: #f0f0f0 !important;
    }
    
    body {
        background: white !important;
    }
    
    .card,
    .section,
    .auth-card {
        border: 1px solid #000 !important;
        box-shadow: none !important;
        page-break-inside: avoid;
    }
    
    .dashboard-content {
        padding: 0;
    }
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Landscape mobile adjustments */
@media (max-width: 767px) and (orientation: landscape) {
    .calendar-day {
        min-height: 40px;
    }
    
    .modal {
        max-height: 85vh;
    }
    
    .dashboard-header {
        position: static;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .btn {
        border-width: 2px;
    }
    
    .calendar-day.selected {
        border-width: 3px;
    }
}

/* Additional Mobile-Specific Utilities */
@media (max-width: 767px) {
    .mobile-stack {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--space-2) !important;
    }
    
    .mobile-full-width {
        width: 100% !important;
    }
    
    .mobile-hide {
        display: none !important;
    }
    
    .mobile-text-center {
        text-align: center !important;
    }
}

/* Tablet-Specific Utilities */
@media (min-width: 768px) and (max-width: 1023px) {
    .tablet-hide {
        display: none !important;
    }
}

/* Desktop-Specific Utilities */
@media (min-width: 1024px) {
    .desktop-hide {
        display: none !important;
    }
}