/**
 * Mobile-First Responsive Design
 * Comprehensive mobile enhancements for Time Insights
 *
 * Breakpoints:
 * - Mobile: 0-480px (small phones)
 * - Mobile Large: 481-768px (large phones, small tablets)
 * - Tablet: 769-1024px (tablets, small laptops)
 * - Desktop: 1025px+ (laptops, desktops)
 */

/* =================================================================
   MOBILE FIRST BASE STYLES (0-480px)
   ================================================================= */

/* Touch-Friendly Tap Targets (min 44x44px per iOS/Android guidelines) */
button,
a,
.btn,
.connect-button,
.sync-button,
input[type="submit"],
input[type="button"] {
    min-height: 44px;
    min-width: 44px;
    padding: 12px 20px;
    touch-action: manipulation; /* Prevent double-tap zoom */
}

/* Improved Touch Feedback */
button:active,
a:active,
.btn:active {
    transform: scale(0.98);
    opacity: 0.9;
}

/* Mobile: Reduce Container Padding */
@media (max-width: 480px) {
    body {
        padding: 10px;
    }

    .container {
        padding: 15px;
        border-radius: 15px;
    }

    /* Header Adjustments */
    header h1 {
        font-size: 1.75rem;
        line-height: 1.2;
    }

    .subtitle {
        font-size: 0.95rem;
    }

    /* Summary Cards - Stack Vertically */
    .summary-cards {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }

    .card {
        padding: 12px;
        min-height: 80px;
    }

    .card-icon {
        font-size: 1.75rem;
    }

    .card-content h3 {
        font-size: 1.25rem;
    }

    .card-content .value {
        font-size: 1.5rem;
    }

    /* Charts - Full Width, Reduced Height */
    .charts-row {
        flex-direction: column;
    }

    .chart-half,
    .chart-full {
        width: 100%;
        margin-bottom: 20px;
    }

    .chart-wrapper {
        min-height: 300px; /* Reduce for mobile */
        padding: 5px;
    }

    .chart-wrapper img {
        width: 100%;
        height: auto;
    }

    /* Stats Section - Single Column */
    .stats-section {
        grid-template-columns: 1fr !important;
    }

    .stat-card {
        padding: 15px;
    }

    /* Filter Bar - Stack Vertically */
    .filter-bar {
        flex-direction: column;
        gap: 10px;
    }

    .filter-group {
        width: 100%;
    }

    .filter-group label {
        display: block;
        margin-bottom: 5px;
        font-size: 0.9rem;
    }

    .filter-group select,
    .filter-group input {
        width: 100%;
        font-size: 16px; /* Prevent iOS zoom on focus */
        padding: 10px;
    }

    /* Upload Form - Stack Vertically */
    .upload-form {
        flex-direction: column;
        gap: 12px;
    }

    .upload-form input[type="file"] {
        width: 100%;
        font-size: 14px;
    }

    .upload-form button {
        width: 100%;
    }

    /* Google Calendar Section */
    .google-calendar-section {
        padding: 12px;
    }

    .google-connected,
    .google-disconnected {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .connect-button,
    .sync-button {
        width: 100%;
        max-width: 300px;
    }

    /* Tables - Responsive */
    table {
        font-size: 0.85rem;
    }

    table th,
    table td {
        padding: 8px 4px;
    }

    /* Scrollable Tables */
    .table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -15px; /* Extend to edges */
        padding: 0 15px;
    }

    /* Feature Cards */
    .feature-card {
        padding: 15px;
    }

    .feature-card h3 {
        font-size: 1.1rem;
    }

    /* Upgrade Card */
    .upgrade-card {
        padding: 25px 20px;
    }

    .upgrade-card h2 {
        font-size: 1.5rem;
    }

    .upgrade-card .price {
        font-size: 2rem;
    }

    /* Navigation */
    nav {
        flex-direction: column;
        gap: 10px;
    }

    nav a {
        width: 100%;
        text-align: center;
        padding: 12px;
    }

    /* Footer */
    footer {
        padding: 15px;
        font-size: 0.85rem;
        text-align: center;
    }

    /* Modals - Full Screen on Mobile */
    .modal-content {
        width: 95% !important;
        max-width: 95% !important;
        margin: 10px auto;
        max-height: 90vh;
        overflow-y: auto;
    }

    /* Forms */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    textarea {
        font-size: 16px !important; /* Prevent iOS zoom */
        padding: 12px;
    }

    /* Error/Success Messages */
    .alert,
    .message {
        padding: 12px;
        font-size: 0.9rem;
        border-radius: 8px;
    }
}

/* =================================================================
   MOBILE LARGE (481-768px)
   ================================================================= */

@media (min-width: 481px) and (max-width: 768px) {
    .container {
        padding: 25px;
    }

    header h1 {
        font-size: 2.25rem;
    }

    /* Summary Cards - 2 Columns */
    .summary-cards {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px;
    }

    .card {
        padding: 15px;
    }

    /* Charts */
    .chart-wrapper {
        min-height: 350px;
    }

    /* Tables */
    table {
        font-size: 0.9rem;
    }

    table th,
    table td {
        padding: 10px 8px;
    }

    /* Filter Bar - 2 Columns */
    .filter-bar {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .filter-group {
        width: 100%;
    }
}

/* =================================================================
   TABLET (769-1024px)
   ================================================================= */

@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        padding: 30px;
    }

    /* Summary Cards - 3 or 4 Columns */
    .summary-cards {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    }

    /* Charts - Side by Side */
    .charts-row {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }

    .chart-half {
        flex: 1;
        min-width: calc(50% - 10px);
    }

    /* Filter Bar - Horizontal */
    .filter-bar {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .filter-group {
        flex: 1;
        min-width: 200px;
    }
}

/* =================================================================
   LANDSCAPE MOBILE OPTIMIZATION
   ================================================================= */

@media (max-height: 500px) and (orientation: landscape) {
    /* Reduce vertical padding/margins for landscape */
    body {
        padding: 10px 20px;
    }

    .container {
        padding: 15px 25px;
    }

    header {
        margin-bottom: 15px;
        padding-bottom: 15px;
    }

    header h1 {
        font-size: 1.5rem;
        margin-bottom: 5px;
    }

    .subtitle {
        font-size: 0.85rem;
    }

    /* Reduce chart heights */
    .chart-wrapper {
        min-height: 250px;
    }

    /* Compact cards */
    .card {
        padding: 10px;
        min-height: 60px;
    }

    .card-icon {
        font-size: 1.5rem;
    }

    /* Hide less critical content */
    .detailed-stats {
        display: none;
    }
}

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

@media (hover: none) and (pointer: coarse) {
    /* Increase all interactive element sizes */
    button,
    a,
    input,
    select {
        min-height: 48px; /* Slightly larger for touch */
    }

    /* Increase spacing between interactive elements */
    .button-group > * {
        margin: 8px 0;
    }

    /* Remove hover effects (they don't work well on touch) */
    button:hover,
    a:hover {
        transform: none;
    }

    /* Add active state for better feedback */
    button:active,
    a:active {
        opacity: 0.7;
        transform: scale(0.97);
    }

    /* Larger checkboxes and radio buttons */
    input[type="checkbox"],
    input[type="radio"] {
        width: 20px;
        height: 20px;
    }

    /* Scrollable areas need more padding */
    .scrollable {
        padding: 10px;
    }
}

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

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Ensure charts and images are crisp */
    img {
        image-rendering: -webkit-optimize-contrast;
    }

    /* Slightly reduce font-weight for better readability */
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* =================================================================
   PRINT STYLES (BONUS)
   ================================================================= */

@media print {
    /* Remove interactive elements when printing */
    button,
    .upload-form,
    .filter-bar,
    nav {
        display: none !important;
    }

    /* Optimize for print */
    body {
        background: white;
        padding: 0;
    }

    .container {
        box-shadow: none;
        padding: 0;
    }

    /* Ensure charts print well */
    .chart-wrapper {
        page-break-inside: avoid;
    }

    /* Black text for printing */
    * {
        color: #000 !important;
        background: white !important;
    }
}

/* =================================================================
   ACCESSIBILITY IMPROVEMENTS
   ================================================================= */

/* Focus Visible for Keyboard Navigation */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 3px solid #2d5a3d;
    outline-offset: 2px;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    button,
    .btn {
        border: 2px solid currentColor;
    }

    .card {
        border: 2px solid #2d5a3d;
    }
}

/* Reduced Motion for Users Who Prefer It */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Dark Mode Support (if user prefers) */
@media (prefers-color-scheme: dark) {
    /* Optional: Add dark mode styles if desired */
    /* This would require significant styling updates */
}