/* 
 * TaskMate - Task Management App
 * Responsive Styles
 */

/* Large Desktop Screens (min-width: 1400px) */
@media (min-width: 1400px) {
    .dashboard {
        grid-template-columns: repeat(4, 1fr);
    }
    
    main {
        max-width: 1400px;
        padding: var(--spacing-2xl);
    }
    
    .pomodoro-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Tablet Styles (max-width: 992px) */
@media (max-width: 992px) {
    .dashboard {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: var(--spacing-base);
    }
    
    main {
        padding: var(--spacing-lg);
    }
    
    h1 {
        font-size: var(--font-size-2xl);
    }
    
    #task-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Pomodoro responsive adjustments */
    .pomodoro-container {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .circular-progress {
        width: 250px;
        height: 250px;
    }
    
    .timer-display {
        font-size: 3rem;
    }
    
    /* Move focus mode toggle to avoid overlap with sidebar toggle */
    .focus-mode-toggle {
        bottom: 5rem;
    }
    
    /* Reduce padding for better space usage */
    .card, .settings-section, .stats-section {
        padding: var(--spacing-base);
    }
    
    .footer-row {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .footer-col {
        margin-bottom: var(--spacing-sm);
        width: 100%;
    }
    
    .footer-nav {
        justify-content: center;
    }

    /* Media player responsive adjustments */
    .media-section {
        max-width: 100%;
    }

    #videoPlayer.active {
        height: 60vh;
        min-height: 350px;
    }
}

/* Mobile Styles (max-width: 768px) */
@media (max-width: 768px) {
    /* Show hamburger, hide nav buttons */
    .hamburger {
        display: block;
    }
    
    .nav-buttons {
        display: none;
    }
    
    /* Enable sidebar toggle */
    .toggle-sidebar {
        display: flex;
    }
    
    /* Show overlay when sidebar is active */
    .overlay.active {
        display: block;
    }
    
    main {
        padding: var(--spacing-base);
        margin-top: 60px;
        margin-bottom: 20px; /* Space for footer */
    }
    
    .dashboard {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .dashboard-item {
        padding: var(--spacing-base);
    }
    
    #task-stats {
        grid-template-columns: 1fr;
    }
    
    /* Form responsiveness */
    form {
        flex-wrap: wrap;
    }
    
    input[type="text"],
    input[type="search"],
    input[type="number"],
    select,
    input[type="submit"] {
        flex: 1 0 100%;
        margin-bottom: var(--spacing-sm);
        height: 44px; /* Better touch target */
    }
    
    /* Task items vertical layout */
    .tasks-section li {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .task-actions {
        width: 100%;
        margin-top: var(--spacing-sm);
        justify-content: space-between;
    }
    
    .task-priority {
        align-self: flex-start;
        margin-top: var(--spacing-xs);
    }
    
    /* Clock and calendar */
    .styled-date,
    .styled-clock {
        font-size: var(--font-size-lg);
    }
    
    /* Logs layout */
    #logs li {
        flex-direction: column;
        align-items: flex-start;
    }
    
    #logs li button {
        align-self: flex-end;
        margin-top: var(--spacing-sm);
    }
    
    /* Pomodoro responsive adjustments */
    .pomodoro-container {
        gap: var(--spacing-base);
    }
    
    .circular-progress {
        width: 220px;
        height: 220px;
    }
    
    .timer-display {
        font-size: 2.5rem;
    }
    
    .timer-controls, .time-presets {
        gap: var(--spacing-sm);
    }
    
    .timer-controls button, .time-presets button {
        padding: 0.6rem 1.2rem;
        font-size: 0.9rem;
        flex: 1;
        min-height: 44px; /* Better touch target */
    }
    
    .pomodoro-stats-dashboard {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Move focus mode toggle to avoid overlap with sidebar toggle */
    .focus-mode-toggle {
        padding: 0.8rem 1.5rem;
        bottom: 5rem;
        right: 1.5rem;
        min-height: 44px; /* Better touch target */
    }
    
    body.focus-mode .timer-section {
        transform: scale(1.1);
    }
    
    /* Improve Pomodoro settings layout */
    .pomodoro-settings label, 
    .alarm-settings label {
        flex-direction: column;
    }
    
    .volume-control {
        flex-direction: column;
        align-items: flex-start;
    }
    
    /* Optimize headers for better space usage */
    h1 {
        margin-block: var(--spacing-base);
    }
    
    h2, h3 {
        margin-bottom: var(--spacing-sm);
    }
    
    /* Reduce card spacing */
    .card, .dashboard-item, .settings-section, .stats-section {
        margin-bottom: var(--spacing-base);
    }
    
    .app-footer {
        padding: var(--spacing-base);
    }
    
    .footer-datetime {
        font-size: 0.85rem;
    }
    
    .footer-link {
        padding: var(--spacing-xs);
    }

    /* Media player responsive adjustments */
    .media-section {
        padding: var(--spacing-sm);
    }

    #videoPlayer.active {
        height: 50vh;
        min-height: 300px;
    }

    .media-dropzone {
        min-height: 200px;
        padding: var(--spacing-lg);
    }
}

/* Small Mobile Styles (max-width: 480px) */
@media (max-width: 480px) {
    h1 {
        font-size: var(--font-size-xl);
    }
    
    h2 {
        font-size: var(--font-size-lg);
    }
    
    h3 {
        font-size: var(--font-size-base);
    }
    
    /* Improve page padding */
    .page {
        padding: var(--spacing-sm);
    }
    
    main {
        padding: var(--spacing-sm);
    }
    
    /* Tasks form */
    .tasks-section form {
        flex-direction: column;
    }
    
    .tasks-section input[type="search"],
    .tasks-section select,
    .tasks-section input[type="submit"] {
        width: 100%;
        max-width: 100%;
        min-height: 44px; /* Better touch target size */
    }
    
    /* Task buttons in a row */
    .task-actions {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-xs);
    }
    
    .task-complete, 
    .task-edit, 
    .task-delete {
        padding: var(--spacing-sm);
        font-size: var(--font-size-xs);
        text-align: center;
        min-height: 44px; /* Better touch target */
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Make delete button full width */
    .task-delete {
        grid-column: span 2;
    }
    
    /* Media player improvements */
    #videoPlayer,
    #audioPlayer {
        max-height: 250px;
    }
    
    /* Clock and date */
    .datetime-container {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .styled-date,
    .styled-clock {
        max-width: 100%;
        font-size: var(--font-size-base);
    }
    
    /* Pomodoro responsive adjustments for very small screens */
    .circular-progress {
        width: 180px;
        height: 180px;
    }
    
    .timer-display {
        font-size: 2rem;
    }
    
    .progress-text {
        font-size: 0.9rem;
        bottom: 25%; /* Adjusted position */
    }
    
    .timer-controls, .time-presets {
        flex-direction: row;
        width: 100%;
    }
    
    .timer-controls button, .time-presets button {
        flex: 1;
        padding: 0.5rem;
        font-size: 0.8rem;
        text-align: center;
        min-height: 44px; /* Better touch target size */
    }
    
    .settings-section, .stats-section {
        padding: var(--spacing-base);
    }
    
    /* Ensure proper button positioning on small screens */
    .focus-mode-toggle {
        padding: 0.6rem 1rem;
        font-size: 0.9rem;
        bottom: 5rem; /* Keep away from the sidebar toggle */
        right: 1rem;
        min-width: 130px; /* Ensure sufficient width for text */
    }
    
    .toggle-sidebar {
        bottom: 1rem;
        right: 1rem;
    }
    
    body.focus-mode .timer-section {
        transform: scale(1);
    }
    
    /* Improve form inputs for better touch interaction */
    input[type="number"]#work-duration,
    input[type="number"]#break-duration,
    input[type="number"]#daily-pomodoro-goal {
        min-height: 44px;
        font-size: 1rem;
    }
    
    /* Improve sound selector layout */
    .sound-select {
        margin-bottom: var(--spacing-sm);
    }
    
    select#alarm-sound {
        min-height: 44px;
        width: 100%;
    }
    
    /* Better volume control for touch */
    #alarm-volume {
        width: 100%;
        margin: var(--spacing-xs) 0;
        height: 30px;
    }
    
    /* More compact cards */
    .card, .dashboard-item, .settings-section, .stats-section {
        padding: var(--spacing-sm);
    }
    
    /* Adjust header layout */
    header {
        height: 50px;
        padding: var(--spacing-sm);
    }
    
    main {
        margin-top: 50px;
    }
    
    .app-footer {
        padding: var(--spacing-sm);
        font-size: 0.8rem;
    }
    
    .footer-status {
        flex-direction: column;
        gap: var(--spacing-xs);
    }
    
    .status-indicator {
        font-size: 0.75rem;
    }

    /* Media player responsive adjustments */
    #videoPlayer.active {
        height: 40vh;
        min-height: 250px;
    }

    .media-dropzone {
        min-height: 180px;
        padding: var(--spacing-base);
    }

    .upload-icon {
        width: 36px;
        height: 36px;
    }

    .upload-text {
        font-size: var(--font-size-sm);
    }
}

/* Very small screens (max-width: 360px) */
@media (max-width: 360px) {
    /* Further reduce padding for better space usage */
    .page, main, .card, .dashboard-item, .settings-section, .stats-section {
        padding: var(--spacing-xs);
    }
    
    /* Ultra-compact UI */
    .dashboard {
        gap: var(--spacing-xs);
    }
    
    .circular-progress {
        width: 150px;
        height: 150px;
    }
    
    .timer-display {
        font-size: 1.5rem;
    }
    
    .timer-controls button, .time-presets button {
        font-size: 0.7rem;
        padding: 0.4rem;
    }
    
    /* Adjust button positioning for very small screens */
    .focus-mode-toggle {
        position: fixed;
        bottom: 5rem;
        right: 0.5rem;
        padding: 0.5rem;
        font-size: 0.7rem;
        min-width: unset;
        width: auto;
        white-space: nowrap;
    }
    
    .toggle-sidebar {
        right: 0.5rem;
        width: 40px;
        height: 40px;
    }
    
    /* Ultra-compact forms */
    form {
        gap: var(--spacing-xs);
    }
    
    /* Reduce margins between elements */
    h1, h2, h3, h4, p {
        margin-bottom: var(--spacing-xs);
    }
    
    /* Compact task display */
    .tasks-section li, #logs li {
        padding: var(--spacing-xs);
        margin-bottom: var(--spacing-xs);
    }
    
    /* More compact buttons */
    .task-complete, .task-edit, .task-delete, .danger-btn, button {
        padding: var(--spacing-xs);
    }
    
    .footer-datetime span {
        display: inline-block;
    }
    
    .footer-nav {
        gap: var(--spacing-xs);
    }
    
    .footer-link {
        font-size: 0.75rem;
    }
    
    main {
        margin-bottom: 15px; /* Slightly less space for footer */
    }
}

/* Landscape orientation on mobile */
@media (max-height: 500px) and (orientation: landscape) {
    /* Optimize height usage */
    h1 {
        font-size: var(--font-size-xl);
        margin-block: var(--spacing-xs);
    }
    
    main {
        margin-top: 50px;
        padding: var(--spacing-xs);
        margin-bottom: 10px; /* Minimal space for footer in landscape */
    }
    
    .dashboard {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-xs);
    }
    
    #task-stats {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .tasks-section form {
        flex-direction: row;
    }
    
    /* Pomodoro responsive adjustments for landscape */
    .pomodoro-container {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-base);
        margin-top: var(--spacing-base);
    }
    
    /* Adjust circular progress size */
    .circular-progress {
        width: 150px;
        height: 150px;
    }
    
    .timer-display {
        font-size: 1.8rem;
    }
    
    body.focus-mode .timer-section {
        transform: scale(1);
        margin: 1rem 0;
    }
    
    /* Button positions in landscape */
    .focus-mode-toggle {
        bottom: 1rem;
        right: 5rem; /* Move to the left of toggle sidebar */
    }
    
    .toggle-sidebar {
        bottom: 1rem;
        right: 1rem;
    }
    
    /* Better controls layout */
    .timer-controls button, .time-presets button {
        padding: 0.4rem 0.6rem;
        font-size: 0.75rem;
    }
    
    /* Optimize settings panels for landscape */
    .settings-section, .stats-section {
        padding: var(--spacing-sm);
        max-height: 80vh;
        overflow-y: auto; /* Allow scrolling */
    }
    
    /* Focus mode optimizations for landscape */
    body.focus-mode .pomodoro-container {
        flex-direction: row;
        display: flex;
    }
    
    body.focus-mode .timer-section {
        margin-right: auto;
        margin-left: auto;
    }
    
    /* Layout optimizations for landscape */
    .page {
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - 50px);
    }
    
    .card, .dashboard-item, .settings-section, .stats-section {
        padding: var(--spacing-xs);
        margin-bottom: var(--spacing-xs);
    }
    
    /* Enable horizontal layouts */
    .tasks-section ul, #logs {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-xs);
    }
    
    .tasks-section li, #logs li {
        width: calc(50% - var(--spacing-xs));
        margin-bottom: var(--spacing-xs);
    }
    
    .app-footer {
        padding: var(--spacing-xs);
    }
    
    .footer-row:last-child {
        display: none; /* Hide status row in landscape */
    }

    /* Media player responsive adjustments */
    #videoPlayer.active {
        height: 85vh;
        min-height: 200px;
    }

    .media-dropzone {
        min-height: 150px;
    }

    .upload-content {
        flex-direction: row;
        gap: var(--spacing-lg);
    }
}

/* High DPI Screens */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Enhance shadow effects for high DPI screens */
    .card,
    .dashboard-item,
    .tasks-section li,
    #logs li {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    }
    
    /* Improve pomodoro ring sharpness */
    .progress-ring, .progress-ring-fill {
        stroke-width: 6;
    }
    
    /* Sharper borders */
    input, select, button {
        border-width: 1px;
    }

    /* Media player responsive adjustments */
    .media-dropzone {
        border-width: 1.5px;
    }
}

/* Accessibility - Prefers Reduced Motion */
@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;
    }
    
    .dashboard-item:hover,
    .tasks-section li:hover {
        transform: none !important;
    }
    
    /* Disable pomodoro animations */
    .progress-ring-fill {
        transition: none !important;
    }
    
    body.focus-mode .timer-section {
        transform: none !important;
    }
}

/* Print styles */
@media print {
    body {
        background: white;
        font-size: 12pt;
    }
    
    header,
    .sidebar,
    .toggle-sidebar,
    .overlay,
    .file-upload,
    input[type="submit"],
    button {
        display: none !important;
    }
    
    main {
        margin: 0;
        padding: 0;
    }
    
    .page {
        display: block !important;
        break-inside: avoid;
    }
    
    .tasks-section li,
    #logs li {
        border: 1px solid #ddd;
        box-shadow: none;
    }
    
    a {
        text-decoration: underline;
    }
    
    /* Print styles for pomodoro */
    .pomodoro-container {
        display: block;
    }
    
    .settings-section, .focus-mode-toggle {
        display: none !important;
    }
    
    .timer-section {
        margin: 0 auto;
    }
}