/* ============================================
   RESPONSIVE BREAKPOINTS
   Desktop-first approach
   ============================================ */

/* Large desktop (< 1440px) */
@media (max-width: 1440px) {
    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Standard desktop (< 1200px) */
@media (max-width: 1200px) {
    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
    }

    .dashboard-grid {
        gap: 16px;
    }

    .page-content {
        padding: 24px;
    }
}

/* Tablet landscape / small laptop (< 1024px) */
@media (max-width: 1024px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .dashboard-card.card-wide {
        grid-column: span 1;
    }

    .navbar-date {
        display: none;
    }

    .search-box kbd {
        display: none;
    }
}

/* Tablet portrait (< 768px) */
@media (max-width: 768px) {
    /* Sidebar goes off-canvas */
    .sidebar {
        transform: translateX(-100%);
        box-shadow: none;
        width: var(--sidebar-width);
    }

    .sidebar.mobile-open {
        transform: translateX(0);
        box-shadow: var(--shadow-lg);
    }

    .sidebar.collapsed {
        width: var(--sidebar-width);
    }

    .sidebar.collapsed .logo-text,
    .sidebar.collapsed .nav-item span,
    .sidebar.collapsed .sidebar-collapse-btn svg {
        opacity: 1;
        width: auto;
    }

    /* Show mobile menu button */
    .mobile-menu-btn {
        display: flex;
    }

    /* Sidebar collapse button hidden on mobile */
    .sidebar-collapse-btn {
        display: none;
    }

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

    .page-content {
        padding: 20px 16px;
    }

    .top-navbar {
        padding: 0 16px;
    }

    /* Quick add button — icon only */
    .btn-quick-add span {
        display: none;
    }

    .btn-quick-add {
        padding: 8px 10px;
    }

    .page-title {
        font-size: 1.35rem;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .stat-card {
        padding: 16px;
        gap: 12px;
    }

    .stat-icon {
        width: 42px;
        height: 42px;
        border-radius: 12px;
    }

    .stat-value {
        font-size: 1.25rem;
    }
}

/* Mobile (< 480px) */
@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .stat-card {
        padding: 14px;
        gap: 10px;
    }

    .stat-icon {
        width: 38px;
        height: 38px;
        border-radius: 10px;
    }

    .stat-icon svg {
        width: 18px;
        height: 18px;
    }

    .stat-value {
        font-size: 1.1rem;
    }

    .stat-label {
        font-size: 0.7rem;
    }

    .dashboard-card {
        padding: 18px;
    }

    .chart-container {
        height: 200px;
    }

    .chart-container.chart-sm {
        height: 180px;
    }

    .search-box {
        min-width: 0;
    }

    .navbar-right {
        gap: 6px;
    }

    .top-navbar {
        gap: 8px;
    }

    .toast-container {
        bottom: 16px;
        right: 16px;
        left: 16px;
    }

    .toast {
        min-width: auto;
        max-width: none;
    }

    .page-content {
        padding: 16px 12px;
    }

    .page-title {
        font-size: 1.2rem;
    }

    .profile-avatar {
        width: 32px;
        height: 32px;
        font-size: 0.75rem;
    }
}

/* Tiny screens (< 360px) */
@media (max-width: 360px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .stat-card {
        flex-direction: row;
    }
}

/* ============================================
   PHASE 2: TASK TOOLBAR / CARDS / MODAL
   ============================================ */
@media (max-width: 768px) {
    .task-toolbar {
        padding: 12px;
    }

    .filter-select {
        max-width: none;
        flex: 1;
        min-width: 130px;
    }

    .task-card {
        padding: 14px;
        gap: 10px;
    }

    .task-card-actions {
        flex-direction: column;
    }

    .form-row,
    .form-row-3 {
        grid-template-columns: 1fr;
    }

    .modal {
        max-height: 92vh;
        border-radius: 16px;
    }

    .modal-header,
    .modal-body,
    .modal-footer {
        padding-left: 18px;
        padding-right: 18px;
    }

    .page-header-flex {
        flex-direction: column;
        align-items: stretch;
    }

    .page-header-flex .btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .task-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .task-search-box {
        min-width: 0;
    }

    .filter-select {
        min-width: 0;
        width: 100%;
    }

    .btn-icon-toggle {
        width: 100%;
        justify-content: center;
    }

    .task-card-top {
        flex-wrap: wrap;
    }

    .task-card-title {
        white-space: normal;
    }

    .modal-overlay {
        padding: 0;
        align-items: flex-end;
    }

    .modal {
        max-width: 100%;
        max-height: 94vh;
        border-radius: 20px 20px 0 0;
    }
}

/* ============================================
   PHASE 3: PROJECTS / CALENDAR / NOTES / NOTIFICATIONS
   ============================================ */
@media (max-width: 768px) {
    .projects-grid,
    .notes-grid {
        grid-template-columns: 1fr;
    }

    .notification-panel {
        position: fixed;
        top: 64px;
        right: 8px;
        left: 8px;
        width: auto;
        max-height: 70vh;
    }

    .calendar-card {
        padding: 12px;
    }

    #calendarEl .fc-toolbar {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
    }

    #calendarEl .fc-toolbar-chunk {
        display: flex;
        justify-content: center;
    }

    .calendar-legend {
        gap: 10px;
    }
}

@media (max-width: 480px) {
    #calendarEl .fc-button {
        padding: 5px 8px;
        font-size: 0.72rem;
    }

    .project-stat-row {
        gap: 4px;
    }

    .project-stat-value {
        font-size: 0.95rem;
    }
}

/* ============================================
   PHASE 4: KANBAN / REPORTS
   ============================================ */
@media (max-width: 1024px) {
    .kanban-board {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .kanban-board {
        grid-template-columns: 1fr;
    }

    .report-period-toggle {
        width: 100%;
    }

    .period-btn {
        flex: 1;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .kanban-column {
        padding: 10px;
    }

    .kanban-card {
        padding: 10px 12px;
    }
}