/* =========================================================
   EXISTING DASHBOARD STYLES
========================================================= */

.progress-list {

    list-style: none;

    padding: 0;

}

.progress-list li {

    background-color: var(--color-surface);

    border: 1px solid var(--color-border);

    border-radius: var(--radius);

    padding: 1rem;

    margin-bottom: 0.75rem;

}

.site-footer {

    text-align: center;

    padding: 2rem 1rem;

    color: var(--color-text-muted);

    font-size: 0.9rem;

}


/* =========================================================
   DASHBOARD FOUNDATION
========================================================= */

body {

    background-color: var(--color-background);

}

.dashboard-main {

    width: min(1180px, calc(100% - 3rem));

    max-width: none;

    margin: 0 auto;

    padding: 3.5rem 0 6rem;

}




/* =========================================================
   DASHBOARD SECTION LABEL
========================================================= */

.dashboard-section-label {

    display: inline-flex;

    align-items: center;

    padding: 0.4rem 0.75rem;

    margin-bottom: 0.9rem;

    border: 1px solid rgba(29, 78, 216, 0.14);

    border-radius: 999px;

    background: rgba(29, 78, 216, 0.05);

    color: var(--color-primary);

    font-size: 0.72rem;

    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;

}


/* =========================================================
   WELCOME
========================================================= */

.dashboard-welcome {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 3rem;

    min-height: 330px;

    margin-bottom: 3.5rem;

    padding: 3.5rem;

    overflow: hidden;

    border: 1px solid var(--color-border);

    border-radius: calc(var(--radius) + 4px);

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(29, 78, 216, 0.1),
            transparent 30%
        ),
        var(--color-surface);

}

.dashboard-welcome::after {

    content: "";

    position: absolute;

    width: 260px;

    height: 260px;

    right: -100px;

    bottom: -130px;

    border-radius: 50%;

    background: rgba(29, 78, 216, 0.05);

}

.welcome-content {

    position: relative;

    z-index: 2;

    max-width: 700px;

    text-align: left;

}

.welcome-content h2 {

    margin: 0;

    font-size: clamp(2.2rem, 5vw, 3.8rem);

    line-height: 1.05;

    letter-spacing: -0.045em;

}

.welcome-content > p {

    max-width: 650px;

    margin: 1rem 0 0;

    color: var(--color-text-muted);

    font-size: 1.02rem;

    line-height: 1.75;

}

.dashboard-welcome-status {

    margin-top: 1.5rem;

}

.dashboard-welcome-status p {

    display: inline-flex;

    margin: 0;

    padding: 0.5rem 0.9rem;

    border-radius: 999px;

    background: rgba(29, 78, 216, 0.07);

    color: var(--color-primary);

    font-size: 0.85rem;

    font-weight: 700;

}

.welcome-accent {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 150px;

    height: 150px;

    flex-shrink: 0;

    border: 1px solid rgba(29, 78, 216, 0.16);

    border-radius: 50%;

    background: rgba(29, 78, 216, 0.05);

    color: var(--color-primary);

    font-size: 0.78rem;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.08em;

}


/* =========================================================
   SECTION HEADINGS
========================================================= */

.dashboard-section-heading {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 2rem;

    margin-bottom: 1.5rem;

}

.dashboard-section-heading h3 {

    margin: 0;

    font-size: 1.6rem;

    letter-spacing: -0.025em;

}

.dashboard-section-heading > p {

    max-width: 360px;

    margin: 0;

    color: var(--color-text-muted);

    font-size: 0.9rem;

}


/* =========================================================
   QUICK ACTIONS
========================================================= */

.dashboard-quick-actions {

    margin-bottom: 5rem;

}

.quick-actions-grid {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 1rem;

}

.quick-action-card {

    position: relative;

    display: flex;

    flex-direction: column;

    min-height: 250px;

    padding: 1.75rem;

    overflow: hidden;

    border: 1px solid var(--color-border);

    border-radius: var(--radius);

    background: var(--color-surface);

    text-decoration: none;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;

}

.quick-action-card:hover {

    transform: translateY(-5px);

    border-color: rgba(29, 78, 216, 0.25);

    box-shadow: 0 18px 40px rgba(31, 41, 55, 0.08);

    text-decoration: none;

}

.quick-action-number {

    color: var(--color-primary);

    font-size: 0.75rem;

    font-weight: 800;

    letter-spacing: 0.08em;

}

.quick-action-card div {

    margin-top: auto;

}

.quick-action-card h4 {

    margin: 0 0 0.6rem;

    color: var(--color-text);

    font-size: 1.15rem;

}

.quick-action-card p {

    margin: 0;

    color: var(--color-text-muted);

    font-size: 0.9rem;

    line-height: 1.65;

}

.quick-action-arrow {

    position: absolute;

    top: 1.6rem;

    right: 1.6rem;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 34px;

    height: 34px;

    border-radius: 50%;

    background: rgba(29, 78, 216, 0.07);

    color: var(--color-primary);

    transition: transform 0.2s ease;

}

.quick-action-card:hover .quick-action-arrow {

    transform: translateX(4px);

}


/* =========================================================
   PROGRESS
========================================================= */

.dashboard-progress {

    margin-bottom: 5rem;

}

.progress-container {

    padding: 1.25rem;

    border: 1px solid var(--color-border);

    border-radius: var(--radius);

    background: var(--color-surface);

}

.progress-list {

    margin: 0;

}

.progress-list li {

    position: relative;

    padding: 1.25rem;

    margin-bottom: 0.75rem;

    background: var(--color-background);

    transition:
        border-color 0.2s ease,
        transform 0.2s ease;

}

.progress-list li:hover {

    transform: translateX(3px);

    border-color: rgba(29, 78, 216, 0.2);

}

.progress-list li:last-child {

    margin-bottom: 0;

}


/* =========================================================
   STUDY SECTION
========================================================= */

.dashboard-study-section {

    position: relative;

    padding: 5rem 2rem;

    overflow: hidden;

    border-radius: calc(var(--radius) + 4px);

    background:
        linear-gradient(
            135deg,
            var(--color-primary-dark),
            var(--color-primary)
        );

    text-align: center;

}

.dashboard-study-section::before {

    content: "";

    position: absolute;

    width: 280px;

    height: 280px;

    top: -170px;

    right: -80px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.08);

}

.dashboard-study-section::after {

    content: "";

    position: absolute;

    width: 200px;

    height: 200px;

    bottom: -130px;

    left: -60px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.06);

}

.dashboard-study-content {

    position: relative;

    z-index: 2;

    max-width: 720px;

    margin: 0 auto;

}

.dashboard-study-section .dashboard-section-label {

    border-color: rgba(255, 255, 255, 0.2);

    background: rgba(255, 255, 255, 0.1);

    color: #ffffff;

}

.dashboard-study-section h3 {

    margin: 0;

    color: #ffffff;

    font-size: clamp(2rem, 4vw, 3rem);

    line-height: 1.1;

    letter-spacing: -0.035em;

}

.dashboard-study-section p {

    max-width: 620px;

    margin: 1.25rem auto 0;

    color: rgba(255, 255, 255, 0.82);

    line-height: 1.8;

}

.dashboard-study-section .btn {

    margin-top: 2rem;

    background: #ffffff;

    color: var(--color-primary);

}

.dashboard-study-section .btn:hover {

    background: var(--color-background);

    color: var(--color-primary-dark);

}


/* =========================================================
   FOOTER
========================================================= */

.site-footer {

    margin-top: 0;

    padding: 3rem max(1.5rem, calc((100% - 1180px) / 2));

    border-top: 1px solid var(--color-border);

    background: var(--color-surface);

}

.footer-content {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    max-width: 1180px;

    margin: 0 auto 2rem;

    text-align: left;

}

.footer-brand h3 {

    margin: 0;

    color: var(--color-text);

    font-size: 1.15rem;

}

.footer-brand p {

    margin: 0.4rem 0 0;

    font-size: 0.85rem;

}

.footer-navigation {

    display: flex;

    align-items: center;

    gap: 1.5rem;

}

.footer-navigation a {

    font-size: 0.88rem;

    font-weight: 600;

}

.footer-navigation a:hover {

    color: var(--color-primary-dark);

    text-decoration: none;

}

.site-footer > p {

    max-width: 1180px;

    margin: 0 auto;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .dashboard-header {

        padding-left: 1.5rem;

        padding-right: 1.5rem;

    }

    .dashboard-main {

        width: min(100% - 2rem, 900px);

    }

    .dashboard-welcome {

        padding: 2.5rem;

    }

    .quick-actions-grid {

        grid-template-columns: 1fr;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .dashboard-header {

        position: relative;

        align-items: flex-start;

        flex-direction: column;

        padding: 1rem;

    }

    .dashboard-brand {

        width: 100%;

        justify-content: space-between;

    }

    .dashboard-brand-subtitle {

        display: none;

    }

    .dashboard-nav {

        width: 100%;

        gap: 0.7rem;

        overflow-x: auto;

        padding-bottom: 0.25rem;

        flex-wrap: nowrap;

    }

    .dashboard-nav a {

        flex-shrink: 0;

        font-size: 0.82rem;

    }

    .dashboard-nav .btn {

        flex-shrink: 0;

    }

    .dashboard-main {

        width: calc(100% - 1.5rem);

        padding-top: 2rem;

    }

    .dashboard-welcome {

        flex-direction: column;

        align-items: flex-start;

        min-height: auto;

        padding: 2rem;

    }

    .welcome-accent {

        width: 100px;

        height: 100px;

        align-self: flex-end;

    }

    .dashboard-section-heading {

        align-items: flex-start;

        flex-direction: column;

        gap: 0.5rem;

    }

    .dashboard-quick-actions,
    .dashboard-progress {

        margin-bottom: 4rem;

    }

    .dashboard-study-section {

        padding: 4rem 1.5rem;

    }

    .footer-content {

        align-items: flex-start;

        flex-direction: column;

    }

    .footer-navigation {

        flex-wrap: wrap;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .dashboard-main {

        width: calc(100% - 1rem);

    }

    .dashboard-welcome {

        padding: 1.5rem;

    }

    .welcome-content h2 {

        font-size: 2rem;

    }

    .quick-action-card {

        min-height: 220px;

        padding: 1.5rem;

    }

    .dashboard-study-section {

        padding: 3.5rem 1.25rem;

    }

    .dashboard-study-section h3 {

        font-size: 1.9rem;

    }

}