/* ============================================================================
   CONFIGURE SOURCES - RESPONSIVE & MOBILE STYLES
   File 5 of 6: Media Queries and Responsive Adjustments
   ============================================================================ */

/* ============================================= */
/* TABLET - 1024px and below                    */
/* ============================================= */

@media (max-width: 1024px) {
    /* Success Section Source Items */
    .cs-success-section .cs-source-item {
        grid-template-columns: 50px 1fr 70px;
        gap: 12px;
        padding: 10px 12px;
    }
    
    .cs-success-section .cs-source-link {
        font-size: 13px;
    }
}

/* ============================================= */
/* MOBILE - 768px and below                     */
/* ============================================= */

@media (max-width: 768px) {
    /* Main Container */
    .cs-main-container {
        padding: 20px;
    }
    
    /* Page Header */
    .cs-page-title {
        font-size: 36px;
    }
    
    /* Stats Summary */
    .cs-stats-summary {
        flex-direction: column;
        gap: 24px;
        padding: 24px;
    }
    
    .cs-stats-summary-clean {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .cs-stat-block:not(:last-child) {
        border-right: none;
        border-bottom: 1px solid var(--vc-border-default);
        padding-bottom: 16px;
    }
    
    .cs-stat-item {
        padding: 16px;
        background: var(--vc-glass-bg);
        border-radius: 8px;
    }
    
    .cs-stats-row {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Category Grid - Horizontal to 2x2 on tablet/mobile */
    .cs-category-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    
    .cs-category-card {
        padding: 12px 16px;
        min-height: 56px;
    }
    
    .cs-category-title {
        font-size: 14px;
    }
    
    .cs-icon-badge {
        width: 32px;
        height: 32px;
    }
    
    .cs-icon-badge svg {
        width: 16px;
        height: 16px;
    }
    
    /* Sections */
    .cs-section {
        padding: 20px;
    }
    
    /* Source Cards - Mobile Layout */
    .cs-card-main {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 16px;
        padding-right: 16px; /* Reset desktop padding */
    }
    
    /* Card Actions - Stack Below Content */
    .cs-card-actions,
    .cs-inline-status,
    .cs-match-info {
        position: static;
        transform: none;
        width: 100%;
        justify-content: flex-end;
        margin-top: 8px;
    }
    
    .cs-match-info {
        width: 100%;
        margin-right: 0;
        flex-direction: column;
        align-items: flex-start;
    }
    
    /* Continue Button */
    .cs-continue-btn {
        width: 100%;
        padding: 16px;
    }
    
    /* Success Section */
    .cs-success-section .cs-source-item {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .cs-success-reference-input {
        max-width: 100%;
    }
    
    .cs-success-section .cs-source-status {
        justify-self: start;
    }
    
    /* Progress Stats */
    .cs-progress-stats {
        font-size: 12px;
    }
    
    /* Smart Match Footer */
    .cs-smart-match-footer {
        flex-direction: column;
        gap: 16px;
    }
    
    .cs-view-details-link {
        position: static;
    }
    
    /* Slider Container */
    .cs-slider-container {
        flex-direction: column;
    }
    
    .cs-slider-btn {
        width: 100%;
    }
    
    /* Tab Navigation */
    .cs-tab-navigation {
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    
    .cs-tab {
        flex-shrink: 0;
    }
}

/* ============================================= */
/* SMALL MOBILE - 480px and below               */
/* ============================================= */

@media (max-width: 480px) {
    /* Stats Row - Single Column */
    .cs-stats-row {
        grid-template-columns: 1fr;
    }
    
    /* Category Grid - Single column on small mobile */
    .cs-category-grid {
        grid-template-columns: 1fr;
    }
    
    /* Page Title */
    .cs-page-title {
        font-size: 28px;
    }
    
    /* Section Padding */
    .cs-section {
        padding: 16px;
    }
    
    /* Card Spacing */
    .cs-source-card {
        padding: 12px 16px;
    }
    
    /* Action Buttons - Stack Vertically */
    .cs-card-actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .cs-action-group {
        width: 100%;
        justify-content: space-between;
    }
    
    /* Smart Match Upload Area */
    .cs-smart-match-upload-area {
        padding: 24px;
        min-height: 150px;
    }
    
    .cs-smart-match-main-text {
        font-size: 15px;
    }
    
    .cs-smart-match-subtext {
        font-size: 12px;
    }
    
    /* Upload Actions */
    .cs-upload-actions {
        flex-direction: column;
        width: 100%;
    }
    
    .cs-upload-action-btn {
        width: 100%;
        justify-content: center;
    }
    
    /* Process Button */
    .sm-process-btn {
        width: 100%;
        padding: 14px 24px;
    }
    
    /* Stat Value Size */
    .cs-stat-value {
        font-size: 36px;
    }
    
    .cs-stat-label {
        font-size: 14px;
    }
    
    /* Category Card */
    .cs-category-card {
        padding: 20px;
    }
    
    .cs-category-icon {
        font-size: 36px;
    }
    
    /* Tab Buttons */
    .cs-tab {
        padding: 10px 16px;
        font-size: 13px;
    }
    
    .cs-tab-icon {
        font-size: 16px;
    }
    
    /* Bulk Actions */
    .cs-bulk-actions {
        flex-direction: column;
    }
    
    .cs-bulk-btn {
        width: 100%;
        justify-content: center;
    }
    
    /* Download Audit Button */
    .cs-download-audit-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================= */
/* LANDSCAPE MOBILE - Height Adjustments        */
/* ============================================= */

@media (max-height: 600px) and (orientation: landscape) {
    /* Reduce vertical spacing */
    .cs-section {
        padding: 16px 20px;
        margin-bottom: 16px;
    }
    
    .cs-stats-summary {
        padding: 16px;
        margin-bottom: 16px;
    }
    
    .cs-smart-match-upload-area {
        min-height: 120px;
        padding: 20px;
    }
    
    /* Scrollable Lists - Reduce Max Height */
    .cs-scrollable-list {
        max-height: 300px;
    }
    
    .cs-uncited-list {
        max-height: 300px;
    }
    
    #smartMatchResults {
        max-height: 250px;
    }
}

/* ============================================= */
/* DARK MODE ADJUSTMENTS (if needed)            */
/* ============================================= */

@media (prefers-color-scheme: dark) {
    /* Additional dark mode specific responsive adjustments can go here */
    /* Currently using CSS variables so this may not be needed */
}

/* ============================================= */
/* HIGH DPI DISPLAYS                             */
/* ============================================= */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Improve rendering on high DPI displays */
    .cs-source-card,
    .cs-section,
    .cs-smart-match-container {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* ============================================= */
/* PRINT STYLES                                  */
/* ============================================= */

@media print {
    /* Hide interactive elements when printing */
    .cs-card-actions,
    .cs-action-group,
    .cs-smart-match-container,
    .cs-bulk-actions,
    .cs-download-audit-btn {
        display: none !important;
    }
    
    /* Ensure content is readable */
    .cs-source-card {
        break-inside: avoid;
        page-break-inside: avoid;
    }
    
    /* Remove backgrounds for better printing */
    .cs-section,
    .cs-source-card,
    .cs-card-main {
        background: white !important;
        border: 1px solid #ccc !important;
    }
    
    /* Make text black for printing */
    .cs-doc-title,
    .cs-source-link,
    .cs-stat-value {
        color: #000 !important;
    }
}

/* ============================================= */
/* TOUCH DEVICE OPTIMIZATIONS                   */
/* ============================================= */

@media (hover: none) and (pointer: coarse) {
    /* Increase touch target sizes */
    .cs-action-icon {
        width: 40px;
        height: 40px;
    }
    
    .cs-action-icon svg {
        width: 20px;
        height: 20px;
    }
    
    .cs-tab {
        padding: 14px 20px;
    }
    
    .cs-upload-action-btn {
        padding: 12px 20px;
    }
    
    /* Remove hover effects on touch devices */
    .cs-source-card:hover,
    .cs-category-card:hover,
    .cs-tab:hover {
        transform: none;
    }
    
    /* Add active states instead */
    .cs-source-card:active {
        background: var(--vc-bg-input);
    }

    .cs-category-card:active {
        transform: scale(0.98);
    }

    .cs-tab:active {
        background: var(--vc-bg-input);
    }
}

/* ============================================= */
/* ACCESSIBILITY - REDUCED MOTION                */
/* ============================================= */

@media (prefers-reduced-motion: reduce) {
    /* Disable animations for users who prefer reduced motion */
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    /* Keep essential transforms but remove transitions */
    .cs-source-card:hover,
    .cs-category-card:hover {
        transform: none;
    }
    
    .cs-progress-fill {
        animation: none;
    }
    
    .sm-file-item.processing {
        animation: none;
    }
}

/* ============================================= */
/* RESPONSIVE UTILITIES                          */
/* ============================================= */

/* Hide on mobile */
.cs-hide-mobile {
    @media (max-width: 768px) {
        display: none !important;
    }
}

/* Show only on mobile */
.cs-show-mobile {
    display: none !important;
    
    @media (max-width: 768px) {
        display: block !important;
    }
}

/* Hide on tablet */
.cs-hide-tablet {
    @media (max-width: 1024px) {
        display: none !important;
    }
}

/* Show only on tablet */
.cs-show-tablet {
    display: none !important;
    
    @media (max-width: 1024px) and (min-width: 769px) {
        display: block !important;
    }
}