/* ============================================
   Responsive Design
   ============================================ */
@media (max-width: 1024px) {
    .settings-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pomodoro-stats {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    /* Hamburger visible on mobile */
    .mobile-menu-btn {
        display: flex;
    }

    /* Sidebar: off-screen by default, full width when open */
    .sidebar {
        width: var(--sidebar-width);
        transform: translateX(-100%);
        transition: transform 0.25s ease;
    }

    .sidebar.collapsed {
        width: var(--sidebar-width);
        transform: translateX(-100%);
    }

    /* Cancel hover expansion on mobile */
    .sidebar:hover {
        width: var(--sidebar-width);
        box-shadow: none;
        transform: translateX(-100%);
    }

    /* Open state: slide in */
    .sidebar.mobile-open {
        transform: translateX(0);
        box-shadow: var(--shadow-lg);
    }

    .sidebar.mobile-open:hover {
        transform: translateX(0);
    }

    /* Backdrop visible on mobile */
    .sidebar-backdrop {
        display: block;
        pointer-events: none;
    }

    .sidebar-backdrop.active {
        pointer-events: auto;
    }

    /* Main content: full width, no sidebar margin */
    .main-content {
        margin-left: 0 !important;
    }

    .sidebar.collapsed ~ .main-content {
        margin-left: 0;
    }

    /* Hide current time on mobile to save space */
    .current-time {
        display: none;
    }

    /* BMC button: icon-only on mobile */
    .bmc-btn .bmc-label {
        display: none;
    }

    .content-area {
        padding: 16px;
    }

    .tools-grid {
        grid-template-columns: 1fr;
    }

    .timer-display {
        width: 280px;
        height: 280px;
    }

    .timer-minutes,
    .timer-seconds,
    .timer-hours {
        font-size: 38px;
    }

    .timer-separator {
        font-size: 34px;
    }

    .settings-grid {
        grid-template-columns: 1fr;
    }

    .timer-mode-tabs {
        flex-direction: column;
        width: 100%;
    }
}

/* ============================================
   Animations
   ============================================ */
.timer-btn.primary:active {
    transform: scale(0.98);
}

/* Smooth page transitions */
.page {
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Scrollbar Styling - Light Theme */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border-default);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Selection */
::selection {
    background: rgba(9, 105, 218, 0.2);
}

/* Focus visible for accessibility */
:focus-visible {
    outline: 2px solid var(--accent-emphasis);
    outline-offset: 2px;
}