/* ============================================================
   Dashboard Layout
============================================================ */

.dashboard {
    width: 100%;
    position: relative;
}

/* Subtle gradient background for depth */
.dashboard::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        radial-gradient(1200px 600px at 15% -10%, rgba(33, 110, 137, 0.06), transparent 60%),
        radial-gradient(900px 500px at 100% 10%, rgba(127, 184, 106, 0.05), transparent 60%);
    pointer-events: none;
    z-index: -1;
}

.dashboard__container {
    width: 100%;
    max-width: 1600px;
    height: 100%;
    margin-inline: auto;
    padding: 16px 32px 16px;
}

.dashboard__layout {
    display: grid;
    grid-template-columns: 2fr 1fr 0.7fr;
    gap: 20px;
    height: calc(100vh - var(--header-height) - 32px);
}

/* ============================================================
   Right Column - Activities Grid
============================================================ */

.dashboard__activities {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
        "timed untimed"
        "sessions notes";
    gap: 20px;
}

/* ============================================================
   Center Column - Clock & Statistics
============================================================ */

.dashboard__center {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 20px;
    overflow: hidden;
}

/* ============================================================
   Module Cards - Shared Styles
============================================================ */

.dashboard__calendar,
.dashboard__clock,
.dashboard__statistics,
.dashboard__timed-activities,
.dashboard__untimed-activities,
.dashboard__sessions,
.dashboard__notes {
    position: relative;
    min-width: 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-surface-hover) 100%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    color: var(--color-text-secondary);
    overflow: hidden;
    transition: box-shadow var(--duration-base) var(--ease-standard),
                border-color var(--duration-base) var(--ease-standard);
}

/* Brand accent line at top of each card */
.dashboard__calendar::before,
.dashboard__clock::before,
.dashboard__statistics::before,
.dashboard__timed-activities::before,
.dashboard__untimed-activities::before,
.dashboard__sessions::before,
.dashboard__notes::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light), var(--color-accent));
    opacity: 0.85;
}

/* Hover state for all cards */
.dashboard__calendar:hover,
.dashboard__clock:hover,
.dashboard__statistics:hover,
.dashboard__timed-activities:hover,
.dashboard__untimed-activities:hover,
.dashboard__sessions:hover,
.dashboard__notes:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-strong);
}

/* ============================================================
   Grid Area Assignments
============================================================ */

.dashboard__timed-activities {
    grid-area: timed;
}

.dashboard__untimed-activities {
    grid-area: untimed;
}

.dashboard__sessions {
    grid-area: sessions;
}

.dashboard__notes {
    grid-area: notes;
}

/* ============================================================
   Responsive Design
============================================================ */

@media (max-width: 1200px) {
    .dashboard__layout {
        grid-template-columns: 1.5fr 1fr 0.6fr;
        gap: 16px;
    }

    .dashboard__container {
        padding: 12px 20px 12px;
    }

    .dashboard__activities {
        gap: 16px;
    }

    .dashboard__center {
        gap: 16px;
    }
}

@media (max-width: 992px) {
    .dashboard__layout {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        height: auto;
        min-height: calc(100vh - var(--header-height) - 32px);
    }

    .dashboard__activities {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        min-height: 400px;
    }

    .dashboard__center {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
        min-height: 400px;
    }

    .dashboard__calendar {
        grid-column: 1 / 3;
        grid-row: 2 / 3;
        min-height: 300px;
    }

    .dashboard__container {
        padding: 12px 16px 12px;
    }

    .dashboard__activities {
        gap: 12px;
    }

    .dashboard__center {
        gap: 12px;
    }
}

@media (max-width: 768px) {
    .dashboard__layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        gap: 16px;
        height: auto;
        min-height: calc(100vh - var(--header-height) - 32px);
    }

    .dashboard__activities {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        gap: 12px;
        min-height: 350px;
    }

    .dashboard__center {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
        grid-template-rows: auto auto;
        gap: 12px;
        min-height: 300px;
    }

    .dashboard__calendar {
        grid-column: 1 / 2;
        grid-row: 3 / 4;
        min-height: 250px;
    }

    .dashboard__container {
        padding: 10px 12px 10px;
    }
}

@media (max-width: 500px) {
    .dashboard__activities {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
        grid-template-areas:
            "timed"
            "untimed"
            "sessions"
            "notes";
        gap: 10px;
        min-height: 500px;
    }

    .dashboard__center {
        grid-template-rows: auto auto;
        gap: 10px;
        min-height: 350px;
    }

    .dashboard__calendar {
        min-height: 200px;
    }

    .dashboard__container {
        padding: 8px 10px 8px;
    }

    .dashboard__layout {
        gap: 12px;
    }
}