/* Media queries for responsive design */
@media (max-width: 1024px) {
    .sidebar {
        width: 240px;
    }
}

@media (max-width: 768px) {
    html, body {
        overflow: auto;
    }

    .layout {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 260px;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 1001;
        order: initial;
    }

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

    .main-content {
        width: 100%;
        padding: 16px;
        height: auto;
    }

    .tasks-container {
        max-width: 100%;
        padding: 16px;
    }

    .second-container {
        padding: 16px;
    }

    .input-container {
        width: 100%;
        max-width: none;
    }

    .menu-toggle {
        position: fixed;
        top: 5px;
        left: 12px;
        z-index: 1002;
        width: 35px;
        height: 35px;
        border-radius: 8px;
        border: 1px solid rgba(0,0,0,0.15);
        background: #ffffff;
        color: #333;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    }

    .menu-toggle i { 
        font-size: 18px; 
    }

    .menu-toggle:hover {
        color: #ffc107;
        background-color: rgba(255, 193, 7, 0.1);
        transform: translateY(-10%);
        transition: all 0.2s ease-in;
    }

    .sidebar-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.35);
        z-index: 1000;
        display: none;
    }

    .sidebar-backdrop.show { 
        display: block; 
    }
}

@media (max-width: 600px) {
    .reminder-icon {
        right: 45px !important;
        font-size: 1rem !important;
        padding: 6px !important;
    }
    
    .reminder-picker {
        right: 85px !important;
        min-width: 160px !important;
    }
}

@media (max-width: 480px) {
    .clear-completed-btn {
        width: 100%;
        min-width: 0;
    }

    .task-item {
        padding: 10px 6px;
        font-size: 0.95em;
        min-height: 44px;
    }

    .second-container input[type="text"] {
        padding: 8px 8px 8px 36px;
        font-size: 1em;
    }
}