frontend/responsive-pages.css

/* ==================================================================================
   RESPONSIVE STYLES FOR NON-LANDING PAGES
   ================================================================================== 
   This file contains responsive CSS for: analysis.html, history.html, video_result.html
   DO NOT link this file in index.html - landing page should keep its original design
   ================================================================================== */

/* ==================== FLUID TYPOGRAPHY VARIABLES ==================== */
:root {
    /* Fluid font sizes for inner pages */
    --font-size-page-title: clamp(1.75rem, 4vw + 0.5rem, 3rem);
    --font-size-section-header: clamp(1.25rem, 2.5vw + 0.5rem, 2rem);
    --font-size-card-title: clamp(1rem, 1.5vw + 0.5rem, 1.375rem);
    --font-size-body: clamp(0.875rem, 1vw + 0.5rem, 1.125rem);
    --font-size-small: clamp(0.75rem, 0.5vw + 0.5rem, 0.875rem);

    /* Fluid spacing */
    --container-padding: clamp(16px, 4vw, 40px);
    --card-padding: clamp(16px, 3vw, 32px);
    --gap-sm: clamp(12px, 2vw, 20px);
    --gap-md: clamp(20px, 3vw, 40px);
    --gap-lg: clamp(30px, 5vw, 60px);
}

/* ==================== ANALYSIS PAGE RESPONSIVE ==================== */

/* Analysis grid - stack on tablet and below */
.analysis-grid {
    gap: var(--gap-md);
}

@media (max-width: 1024px) {
    .analysis-grid {
        grid-template-columns: 1fr !important;
        gap: var(--gap-md);
    }
}

/* Upload section responsive */
.upload-section {
    gap: var(--gap-sm);
}

.section-header-small h2 {
    font-size: var(--font-size-section-header);
}

/* Upload area fluid sizing */
.upload-area {
    min-height: clamp(250px, 35vh, 400px);
    padding: var(--card-padding);
}

@media (max-width: 768px) {
    .upload-area {
        min-height: 220px;
        border-radius: 16px;
    }

    .upload-icon {
        font-size: 48px;
    }

    .upload-text {
        font-size: 14px;
    }
}

/* Results section responsive */
.results-section {
    padding: var(--card-padding);
}

@media (max-width: 768px) {
    .results-section {
        border-radius: 16px;
    }
}

/* Statistics grid responsive */
.statistics-grid {
    gap: var(--gap-sm);
}

@media (max-width: 768px) {
    .statistics-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    .statistics-grid {
        grid-template-columns: 1fr !important;
    }

    .stat-card {
        padding: 16px;
    }

    .stat-value {
        font-size: 24px;
    }
}

/* Recent analyses grid responsive */
.recent-grid {
    gap: var(--gap-sm);
}

@media (max-width: 768px) {
    .recent-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ==================== HISTORY PAGE RESPONSIVE ==================== */

/* History controls fluid spacing */
.history-controls {
    gap: var(--gap-sm);
    padding: var(--card-padding);
}

@media (max-width: 768px) {
    .history-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .search-container {
        min-width: 100%;
    }

    .filter-controls {
        flex-direction: column;
        width: 100%;
    }

    .filter-select {
        width: 100%;
    }

    .export-controls {
        flex-direction: column;
        width: 100%;
    }

    .btn-export,
    .btn-clear-all {
        width: 100%;
        min-height: 48px;
    }
}

/* History table horizontal scroll on mobile */
.history-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
    .history-table {
        min-width: 600px;
    }
}

/* Grid view card sizing */
@media (max-width: 768px) {
    .history-grid {
        grid-template-columns: 1fr !important;
        gap: var(--gap-sm);
    }
}

/* Batch actions bar mobile */
@media (max-width: 768px) {
    .batch-actions {
        flex-wrap: wrap;
        gap: 10px;
        padding: 12px;
    }

    .batch-actions button {
        flex: 1;
        min-width: calc(50% - 10px);
        min-height: 44px;
    }
}

/* ==================== VIDEO RESULT PAGE RESPONSIVE ==================== */

/* Video player container responsive */
.video-preview-container {
    max-width: 100%;
}

@media (max-width: 768px) {
    .video-window-container {
        border-radius: 16px;
    }

    .window-header {
        padding: 10px 12px;
    }

    .play-button {
        width: 60px;
        height: 60px;
        font-size: 28px;
    }
}

@media (max-width: 480px) {
    .play-button {
        width: 50px;
        height: 50px;
        font-size: 24px;
    }
}

/* Dashboard grid stack on mobile */
.dashboard-grid {
    gap: var(--gap-md);
}

@media (max-width: 1024px) {
    .dashboard-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Stats grid compact on mobile */
@media (max-width: 768px) {
    .video-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--gap-sm);
    }
}

@media (max-width: 480px) {
    .video-stats-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Timeline chart container responsive */
.timeline-container,
.chart-container {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Frame grid responsive */
@media (max-width: 768px) {
    .frame-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--gap-sm);
    }
}

@media (max-width: 480px) {
    .frame-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Report section mobile */
@media (max-width: 768px) {
    .report-section {
        padding: var(--card-padding);
    }

    .report-header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .btn-download-report {
        width: 100%;
        min-height: 48px;
    }
}

/* ==================== SHARED RESPONSIVE PATTERNS ==================== */

/* Container padding */
.analysis-container,
.history-container,
.video-result-container {
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

/* Card styling consistency */
.result-card,
.analysis-card,
.history-card,
.video-card {
    padding: var(--card-padding);
}

@media (max-width: 768px) {

    .result-card,
    .analysis-card,
    .history-card,
    .video-card {
        border-radius: 16px;
    }
}

/* Touch targets for interactive elements */
@media (max-width: 768px) {

    button,
    .btn,
    .btn-primary,
    .btn-secondary,
    [role="button"] {
        min-height: 44px;
        min-width: 44px;
    }
}

/* Prevent iOS input zoom */
@media (max-width: 768px) {

    input,
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* Modal responsive */
@media (max-width: 768px) {
    .modal-content {
        max-width: calc(100vw - 32px);
        max-height: calc(100vh - 32px);
        margin: 16px;
        border-radius: 16px;
    }

    .modal-close {
        width: 44px;
        height: 44px;
    }
}