/**
 * Responsive CSS - Mobile-First Design
 * This file contains all responsive styles and breakpoint-specific adjustments
 * Optimized for phone use at markets and various screen sizes
 */

/* ========================================
   MOBILE BASE (Default - up to 767px)
   Mobile-first approach for phone screens
   ======================================== */

/* Login Page Mobile */
@media (max-width: 767px) {
    .login-container {
        margin: var(--space-4);
        padding: var(--space-6) var(--space-4);
        max-width: 100%;
    }
    
    .brand-title {
        font-size: var(--text-2xl);
    }
}

/* Dashboard Mobile Layout */
@media (max-width: 767px) {
    /* Header Adjustments */
    .header-container {
        padding: var(--space-3) var(--space-4);
        flex-direction: column;
        gap: var(--space-3);
        align-items: flex-start;
    }
    
    .brand-name {
        font-size: var(--text-xl);
    }
    
    .header-user {
        width: 100%;
        justify-content: space-between;
    }
    
    .user-email {
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* Main Dashboard */
    .dashboard-main {
        padding: var(--space-4);
    }
    
    /* Tab Navigation - Horizontal Scroll */
    .tab-navigation {
        padding: var(--space-2);
        gap: var(--space-1);
        /* Enable horizontal scrolling */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    
    .tab-button {
        padding: var(--space-2) var(--space-3);
        font-size: var(--text-sm);
        min-width: fit-content;
    }
    
    .tab-icon {
        width: 18px;
        height: 18px;
    }
    
    /* Tab Content */
    .tab-content {
        padding: var(--space-4);
    }
    
    .panel-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }
    
    .panel-title {
        font-size: var(--text-xl);
    }
    
    .panel-actions {
        width: 100%;
    }
    
    .panel-actions .btn {
        flex: 1;
    }
    
    /* Filter Bar */
    .filter-bar {
        flex-direction: column;
        gap: var(--space-2);
    }
    
    .filter-group {
        width: 100%;
        flex-direction: column;
        gap: var(--space-1);
    }
    
    .filter-select {
        width: 100%;
    }
    
    /* Tables - Mobile Optimized */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 calc(var(--space-4) * -1);
        padding: 0 var(--space-4);
    }
    
    .data-table {
        min-width: 600px;
    }
    
    .data-table th,
    .data-table td {
        padding: var(--space-2);
        font-size: var(--text-xs);
    }
    
    /* Hide less important columns on mobile */
    .data-table th:nth-child(5),
    .data-table td:nth-child(5) {
        display: none; /* Hide message column on mobile */
    }
    
    .message-excerpt {
        max-width: 150px;
    }
    
    /* Workshop Cards */
    .workshop-grid {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }
    
    .workshop-card {
        padding: var(--space-4);
    }
    
    .workshop-card-details {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }
    
    /* Forms */
    .form-row {
        grid-template-columns: 1fr;
    }
    
    /* Modals */
    .modal-content {
        width: calc(100% - var(--space-4));
        max-height: calc(100vh - var(--space-8));
        margin: var(--space-4);
    }
    
    .modal-header {
        padding: var(--space-4);
    }
    
    .modal-body {
        padding: var(--space-4);
    }
    
    .modal-footer {
        padding: var(--space-4);
        flex-direction: column;
        gap: var(--space-2);
    }
    
    .modal-footer .btn {
        width: 100%;
    }
    
    .booking-details-grid,
    .detail-grid {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }
    
    /* Toasts */
    .toast-container {
        top: var(--space-4);
        right: var(--space-4);
        left: var(--space-4);
    }
    
    .toast {
        min-width: auto;
        max-width: 100%;
    }
    
    /* Buttons */
    .btn {
        padding: var(--space-3) var(--space-4);
        font-size: var(--text-base);
    }
    
    .btn-sm {
        padding: var(--space-2) var(--space-3);
        font-size: var(--text-sm);
    }
}

/* ========================================
   SMALL TABLETS (480px - 767px)
   Slightly larger mobile screens
   ======================================== */

@media (min-width: 480px) and (max-width: 767px) {
    .login-container {
        max-width: 400px;
        margin: auto;
    }
    
    .data-table th:nth-child(5),
    .data-table td:nth-child(5) {
        display: table-cell; /* Show message column on larger mobile */
    }
    
    .message-excerpt {
        max-width: 200px;
    }
}

/* ========================================
   TABLET PORTRAIT (768px - 1023px)
   iPad and similar tablets in portrait
   ======================================== */

@media (min-width: 768px) and (max-width: 1023px) {
    /* Header */
    .header-container {
        padding: var(--space-4) var(--space-5);
    }
    
    /* Dashboard */
    .dashboard-main {
        padding: var(--space-5);
    }
    
    /* Tab Navigation */
    .tab-navigation {
        overflow-x: visible;
    }
    
    /* Workshop Grid */
    .workshop-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
    
    /* Tables */
    .data-table {
        min-width: auto;
    }
    
    .message-excerpt {
        max-width: 250px;
    }
    
    /* Modals */
    .modal-content {
        width: 90%;
        max-width: 600px;
    }
    
    .modal-footer {
        flex-direction: row;
    }
    
    .modal-footer .btn {
        width: auto;
    }
}

/* ========================================
   DESKTOP (1024px - 1279px)
   Standard desktop screens
   ======================================== */

@media (min-width: 1024px) {
    /* Full desktop layout - already defined in main styles */
    .message-excerpt {
        max-width: 300px;
    }
    
    .workshop-grid {
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    }
}

/* ========================================
   LARGE DESKTOP (1280px+)
   Wide screens and large monitors
   ======================================== */

@media (min-width: 1280px) {
    .dashboard-main {
        max-width: 1400px;
    }
    
    .workshop-grid {
        grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    }
    
    .message-excerpt {
        max-width: 400px;
    }
}

/* ========================================
   TOUCH DEVICE OPTIMIZATIONS
   Enhanced interactions for touch screens
   ======================================== */

@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .btn {
        min-height: 44px;
        padding: var(--space-3) var(--space-4);
    }
    
    .form-input,
    .form-select,
    .form-textarea {
        min-height: 44px;
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    .checkbox-label input[type="checkbox"],
    .radio-label input[type="radio"] {
        width: 24px;
        height: 24px;
    }
    
    .tab-button {
        min-height: 44px;
    }
    
    .table-actions .btn {
        padding: var(--space-2) var(--space-3);
        min-height: 36px;
    }
    
    /* Remove hover effects on touch devices */
    .data-table tbody tr:hover {
        background: transparent;
    }
    
    /* Add active states for better feedback */
    .btn:active {
        transform: scale(0.98);
    }
    
    .workshop-card:active {
        transform: scale(0.99);
    }
}

/* ========================================
   PRINT STYLES
   Optimized for printing reports
   ======================================== */

@media print {
    /* Remove unnecessary elements */
    .admin-header,
    .tab-navigation,
    .filter-bar,
    .panel-actions,
    .table-actions,
    .modal,
    .toast-container,
    .loading-overlay {
        display: none !important;
    }
    
    /* Reset backgrounds */
    body {
        background: white;
    }
    
    .tab-content {
        box-shadow: none;
        padding: 0;
    }
    
    /* Ensure all content is visible */
    .tab-panel {
        display: block !important;
        page-break-after: always;
    }
    
    /* Table styles for print */
    .data-table {
        border: 1px solid #000;
    }
    
    .data-table th,
    .data-table td {
        border: 1px solid #000;
        padding: 8px;
    }
    
    /* Show full messages */
    .message-excerpt {
        max-width: none;
        white-space: normal;
    }
}

/* ========================================
   ACCESSIBILITY IMPROVEMENTS
   Enhanced keyboard navigation and screen readers
   ======================================== */

/* Focus visible for keyboard navigation */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .btn-primary {
        border: 2px solid;
    }
    
    .form-input,
    .form-select,
    .form-textarea {
        border-width: 2px;
    }
    
    .status-badge {
        border: 1px solid;
    }
}

/* Dark mode support (optional - for future enhancement) */
@media (prefers-color-scheme: dark) {
    /* Dark mode styles would go here if implemented */
}

/* ========================================
   ORIENTATION SPECIFIC
   Handle landscape vs portrait
   ======================================== */

/* Mobile landscape - optimize space */
@media (max-width: 767px) and (orientation: landscape) {
    .admin-header {
        position: static;
    }
    
    .dashboard-main {
        padding: var(--space-3);
    }
    
    .tab-content {
        padding: var(--space-3);
    }
    
    .modal-content {
        max-height: 90vh;
    }
}

/* Tablet landscape - utilize width */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {
    .workshop-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================
   CUSTOM SCROLLBAR STYLES
   Styled scrollbars for webkit browsers
   ======================================== */

@media (min-width: 768px) {
    /* Custom scrollbar for desktop */
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
    
    ::-webkit-scrollbar-track {
        background: var(--bg-tertiary);
        border-radius: var(--radius-full);
    }
    
    ::-webkit-scrollbar-thumb {
        background: var(--gray-400);
        border-radius: var(--radius-full);
    }
    
    ::-webkit-scrollbar-thumb:hover {
        background: var(--gray-500);
    }
    
    /* Firefox scrollbar */
    * {
        scrollbar-width: thin;
        scrollbar-color: var(--gray-400) var(--bg-tertiary);
    }
}

/* Mobile scrollbar - keep native for better performance */
@media (max-width: 767px) {
    * {
        scrollbar-width: auto;
        -webkit-overflow-scrolling: touch;
    }
}