/* Desktop View (≥768px) */
@media (min-width: 768px) {

    /* Desktop: Full width for dashboard */
    .container {
        max-width: 100%;
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    /* Desktop: Hide mobile filter tabs (use column headers instead) */
    .mobile-filter-tabs {
        display: none;
    }

    /* Desktop: 3-column grid layout */
    .tasks-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.5rem;
        width: 100%;
        box-sizing: border-box;
    }

    /* Task Column */
    .task-column {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        min-width: 0;
        overflow: hidden;
    }

    /* Column Header - Desktop: Show headers */
    .column-header {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 1rem 1.5rem;
        background: rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-radius: 14px;
        border: 1px solid rgba(255, 255, 255, 0.25);
        margin-bottom: 1rem;
        width: 100%;
        margin: 0 auto;
    }

    .column-header i {
        font-size: 1.2rem;
        color: var(--text-muted);
    }

    .column-header h3 {
        flex: 1;
        margin: 0;
        font-size: 1rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--text-color);
    }

    .column-header .task-count {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 28px;
        height: 28px;
        padding: 0 8px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 14px;
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--text-color);
    }

    /* Column Header Colors */
    .column-header.in-progress i {
        color: #fbbf24;
    }

    .column-header.done i {
        color: #10b981;
    }

    /* Desktop: Reposition priority tag below title for more title space */
    .task-main {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .task-title {
        white-space: normal;
        text-overflow: unset;
        overflow: visible;
        line-height: 1.4;
    }

    /* Desktop: Full priority badge with text */
    .task-priority {
        width: auto;
        height: auto;
        min-width: auto;
        min-height: auto;
        padding: 0.2rem 0.6rem;
        border-radius: 20px;
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
        color: white;
    }

    /* Desktop: hover effect with lift */
    .task-card {
        cursor: default;
        /* Desktop: not clickable, use buttons instead */
    }

    .task-card:hover {
        transform: translateY(-4px);
        border-left-color: var(--primary-color);
    }

    /* Desktop: Hover-only buttons */
    .task-actions {
        display: flex;
        gap: 0.3rem;
        flex-shrink: 0;
        opacity: 0;
        transition: opacity 0.2s ease;
    }

    .task-card:hover .task-actions {
        opacity: 1;
    }

    .controls-area {
        display: flex;
        gap: 1rem;
        align-items: center;
    }

    .search-bar {
        flex: 1;
        max-width: 400px;
        margin-bottom: 0;
    }

    .filter-sort-row {
        flex-shrink: 0;
        gap: 0.75rem;
    }

    .filter-sort-row select {
        min-width: 200px;
    }

    /* Dashboard Grid - Desktop Scaling */

    /* TODO - maybe make smaller */
    .dashboard-grid {
        gap: 1.5rem;
    }

    .dashboard-top-row {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: 1.5rem;
        flex-direction: row;
    }

    /* Larger side cards on desktop */
    .side-card {
        gap: 0.5rem;
        padding: 0.5rem;
    }

    .side-card-top {
        gap: 0.6rem;
    }

    .side-card i {
        font-size: 2rem;
    }

    .side-card-number {
        font-size: 2.25rem;
    }

    .side-card-label {
        font-size: 0.75rem;
    }

    /* Larger circular progress on desktop */
    .progress-circle-container {
        width: 160px;
        height: 160px;
        order: 0;
        /* Normal order on desktop */
    }

    .progress-circle {
        width: 160px;
        height: 160px;
    }

    .progress-circle-bg {
        stroke-width: 10;
        cx: 80;
        cy: 80;
        r: 70;
    }

    .progress-circle-fill {
        stroke-width: 10;
        stroke-dasharray: 439.8;
        /* 2 * PI * 70 */
        cx: 80;
        cy: 80;
        r: 70;
    }

    .progress-percentage {
        font-size: 2.5rem;
    }

    .progress-label {
        font-size: 0.85rem;
        margin-top: 0.25rem;
    }

    /* Desktop bottom row - grid layout */
    .dashboard-bottom-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
        flex-direction: row;
    }

    .stat-card {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem;
        justify-content: flex-start;
    }

    .stat-card-header {
        gap: 0.5rem;
    }

    .stat-card-header i {
        font-size: 1.1rem;
    }

    .stat-card-label {
        font-size: 0.75rem;
    }

    .stat-card-number {
        font-size: 1.25rem;
    }

    .stat-card-bar-container {
        width: 100%;
        height: 8px;
        border-radius: 4px;
        flex: 0 0 auto;
    }

    .stat-card-bar {
        border-radius: 4px;
    }

    .controls-area {
        display: flex;
        gap: 1rem;
        align-items: center;
    }

    .empty-state {
        text-align: center;
        padding: 2rem 2rem;
        grid-column: 1 / -1;
    }

    .empty-state p {
        display: contents;
        color: var(--text-muted);
    }

    /* Desktop: Priority and Date stacked vertically in modal */
    .form-row {
        flex-direction: column;
    }
}