/* ===================================================
   RESPONSIVE — Mobile-first optimizations
   =================================================== */

/* Small screens (up to 480px) */
@media (max-width: 480px) {
    .mode-btn { padding: 7px 14px; font-size: 12px; }
    .toolbar { padding: 12px 12px 8px; }
    .toolbar-right { flex-direction: column; }
    .sort-select { min-width: 100%; }
    .task-list-container { padding: 0 12px 100px; }
    .detail-body { padding: 16px 12px; }
    .detail-title-input { font-size: 18px; }
    .detail-row { flex-direction: column; gap: 0; }
    .detail-row .detail-field { margin-bottom: 16px; }
    .fab { bottom: 20px; right: 16px; width: 52px; height: 52px; font-size: 20px; }
    .setup-container, .login-container { padding: 0 16px; }
}

/* Medium screens (481px–768px) */
@media (min-width: 481px) {
    .mode-btn span { display: inline; }
    .task-card-drag { opacity: 0.4; }
}

/* Tablet and up (769px+) */
@media (min-width: 769px) {
    .brand span { display: inline; }

    .toolbar {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .toolbar-right { flex: 0 1 auto; }

    .search-box { min-width: 220px; }

    .detail-content {
        width: var(--detail-w);
        border-left: 1px solid var(--border);
    }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
    .sidebar {
        transform: translateX(0);
        z-index: 10;
    }

    .sidebar .sidebar-overlay { display: none; }

    .main-content {
        margin-left: var(--sidebar-w);
    }

    .menu-toggle { display: none; }

    .fab {
        right: 32px;
        bottom: 32px;
    }
}

/* Large desktop (1280px+) */
@media (min-width: 1280px) {
    .task-list-container { padding: 0 24px 100px; }
    .toolbar { padding: 20px 24px 16px; }
}

/* Touch optimizations */
@media (hover: none) and (pointer: coarse) {
    .task-card { padding: 16px; }
    .task-card-drag { opacity: 0.5; }
    .step-delete { opacity: 0.6; }
    .comment-delete { opacity: 0.6; }
    .btn-icon { width: 44px; height: 44px; }
}

/* Safe areas for notched phones */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .fab {
        bottom: calc(24px + env(safe-area-inset-bottom));
    }
    .task-list-container {
        padding-bottom: calc(100px + env(safe-area-inset-bottom));
    }
    .app-header {
        padding-top: env(safe-area-inset-top);
        height: calc(var(--header-h) + env(safe-area-inset-top));
    }
}