/* Timer Page Responsive Layout Enhancements */

/* True 2x2 Grid Layout optimizations */
.timer-main-container {
    min-height: calc(100vh - 200px);
}

/* Top and Bottom row grid layouts */
.timer-top-row,
.timer-bottom-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

/* Ensure proper spacing and layout on different screen sizes */
@media (max-width: 1023px) {
    /* On tablets and smaller, stack the grid items vertically */
    .timer-top-row,
    .timer-bottom-row {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    
    /* Make timer display more compact on mobile */
    .timer-circular-display {
        width: 240px !important; /* Increased from 180px to 240px */
        height: 240px !important; /* Increased from 180px to 240px */
    }
    
    .timer-display-text {
        font-size: 2.75rem !important; /* Increased from 2.25rem to 2.75rem for better mobile visibility */
    }
}

@media (max-width: 767px) {
    /* Mobile optimizations */
    .timer-top-row,
    .timer-bottom-row {
        gap: 1rem !important;
    }
    
    .timer-section-padding {
        padding: 1rem !important;
    }
    
    /* Timer controls grid - set a small but visible gap between buttons */
    .timer-controls .timer-controls-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.75rem !important; /* 12px, small but clearly visible space */
    }

    @media (max-width: 767px) {
        .timer-controls .timer-controls-grid {
            gap: 0.625rem !important; /* 10px on mobile - slightly smaller but still visible */
        }
    }
    
    .timer-skip-button {
        grid-column: span 2 !important;
    }
    
    /* Compact notification preferences on mobile */
    .notification-preferences {
        gap: 0.75rem !important;
    }
    
    /* Scrollable session history with max height */
    .session-history-mobile {
        max-height: 250px !important;
        overflow-y: auto !important;
    }
    
    /* Reduce heading sizes on mobile */
    .timer-top-row h2,
    .timer-top-row h3,
    .timer-bottom-row h2,
    .timer-bottom-row h3 {
        font-size: 1.125rem !important;
    }
}

/* Enhanced focus styles for better accessibility */
.timer-button:focus,
.timer-input:focus,
.timer-select:focus {
    outline: 2px solid #ef4444 !important;
    outline-offset: 2px !important;
}

/* Smooth transitions for state changes */
.timer-state-transition {
    transition: all 0.3s ease-in-out;
}

/* Visual timer announcement positioning */
.visual-time-announcement {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    z-index: 1000;
    backdrop-filter: blur(4px);
}

.visual-time-announcement.urgent {
    background: rgba(239, 68, 68, 0.9);
    animation: pulse 1s infinite;
}

/* Loading state styles */
.loading-state {
    opacity: 0.6;
    pointer-events: none;
    filter: grayscale(0.3);
}

/* Session history item hover effects */
.session-history-item {
    transition: all 0.2s ease-in-out;
}

.session-history-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Grid balance for equal height sections */
@media (min-width: 1024px) {
    .timer-top-row > section,
    .timer-bottom-row > section {
        display: flex;
        flex-direction: column;
        min-height: 450px;
    }
    
    .timer-top-row > section > *:last-child,
    .timer-bottom-row > section > *:last-child {
        margin-top: auto;
    }
}

/* Start Session button enhancement */
.form-btn-primary {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.form-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(239, 68, 68, 0.3);
}

.form-btn-primary:active {
    transform: translateY(0);
}

/* Session counter animation */
@keyframes session-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.session-counter-active {
    animation: session-pulse 2s infinite;
}

/* Dark mode specific adjustments */
@media (prefers-color-scheme: dark) {
    .visual-time-announcement {
        background: rgba(31, 41, 55, 0.9);
        border: 1px solid rgba(75, 85, 99, 0.3);
    }
    
    .session-history-item:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }
    
    .form-btn-primary:hover {
        box-shadow: 0 8px 20px rgba(239, 68, 68, 0.4);
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .timer-button,
    .session-state-indicator,
    .session-counter {
        border: 2px solid currentColor;
    }
    
    .timer-progress-circle {
        stroke-width: 20 !important;
    }
    
    .timer-top-row > section,
    .timer-bottom-row > section {
        border: 2px solid currentColor;
    }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .timer-state-transition,
    .session-history-item,
    .visual-time-announcement,
    .form-btn-primary,
    .session-counter-active {
        transition: none !important;
        animation: none !important;
    }
    
    .timer-progress-circle {
        transition: none !important;
    }
}

/* Print styles */
@media print {
    .timer-controls,
    .notification-preferences,
    .toast-container {
        display: none !important;
    }
    
    .timer-top-row,
    .timer-bottom-row {
        grid-template-columns: 1fr 1fr !important;
        break-inside: avoid;
    }
    
    .timer-display-section {
        break-inside: avoid;
    }
}

/* Container query support for modern browsers */
.timer-container {
    container-type: inline-size;
}

@container (max-width: 500px) {
    .timer-responsive-text {
        font-size: 0.875rem;
    }
    
    .timer-responsive-padding {
        padding: 0.75rem;
    }
    
    .timer-top-row,
    .timer-bottom-row {
        gap: 0.75rem;
    }
}

/* Enhanced accessibility for screen readers */
.sr-only-focusable:focus {
    position: absolute !important;
    width: auto !important;
    height: auto !important;
    padding: 0.5rem 1rem !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
    background: #000 !important;
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 0.25rem !important;
    z-index: 10000 !important;
}

/* Form field enhancements for better spacing */
.form-field {
    container-type: inline-size;
}

@container (max-width: 300px) {
    .form-field .form-help-text {
        font-size: 0.75rem;
        margin-top: 0.25rem;
    }
}

/* Timer display container responsiveness */
.timer-display-container {
    container-type: inline-size;
}

@container (max-width: 250px) {
    .timer-circular-display {
        width: 200px !important; /* Increased from 160px to 200px (20% bigger) */
        height: 200px !important; /* Increased from 160px to 200px (20% bigger) */
    }
    
    .timer-display-text {
        font-size: 2.25rem !important; /* Increased from 1.75rem to 2.25rem for better visibility */
    }
}

/* Session setup form specific improvements */
.session-setup-form .form-field {
    margin-bottom: 1.5rem;
}

.session-setup-form .form-field:last-child {
    margin-bottom: 0;
}

/* Quick settings section optimization */
#settings-heading + .form-field {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding-top: 1rem;
}

.dark #settings-heading + .form-field {
    border-top-color: rgba(255, 255, 255, 0.1);
}

/* Session history specific styling */
.session-history-mobile {
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
}

.session-history-mobile::-webkit-scrollbar {
    width: 6px;
}

.session-history-mobile::-webkit-scrollbar-track {
    background: transparent;
}

.session-history-mobile::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.5);
    border-radius: 3px;
}

.session-history-mobile::-webkit-scrollbar-thumb:hover {
    background-color: rgba(156, 163, 175, 0.7);
}

/* Timer row spacing - force spacing between top and bottom rows */
.timer-row-spacing {
    display: flex;
    flex-direction: column;
    gap: 1rem !important; /* Reduced from 2rem to 1rem (16px) */
}

.timer-top-row {
    margin-bottom: 1rem !important; /* Reduced from 2rem to 1rem */
}

/* Row spacing for 2x2 layout */
.timer-layout-spacing {
    gap: 1rem !important; /* Reduced from 2rem to 1rem */
}

@media (max-width: 1023px) {
    .timer-layout-spacing {
        gap: 0.75rem !important; /* Reduced from 1.5rem to 0.75rem */
    }
    
    .timer-top-row {
        margin-bottom: 0.75rem !important;
    }
    
    .timer-row-spacing {
        gap: 0.75rem !important;
    }
}

@media (max-width: 767px) {
    .timer-layout-spacing {
        gap: 0.5rem !important; /* Reduced from 1rem to 0.5rem */
    }
    
    .timer-top-row {
        margin-bottom: 0.5rem !important;
    }
    
    .timer-row-spacing {
        gap: 0.5rem !important;
    }
}