@layer reset {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    html {
        -moz-text-size-adjust: none;
        -webkit-text-size-adjust: none;
        text-size-adjust: none;
    }

    body,
    h1,
    h2,
    h3,
    h4,
    p,
    figure,
    blockquote,
    dl,
    dd {
        margin: 0;
    }

    [role="list"] {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    body {
        min-block-size: 100vh;
        line-height: 1.6;
    }

    h1,
    h2,
    h3,
    button,
    input,
    label {
        line-height: 1.1;
    }

    h1,
    h2,
    h3,
    h4 {
        text-wrap: balance;
    }

    p,
    li {
        text-wrap: pretty;
    }

    img,
    picture {
        max-inline-size: 100%;
        display: block;
    }

    input,
    button,
    textarea,
    select {
        font: inherit;
    }
}

@layer base {
    :root {
        --ff-heading: "Lato", sans-serif;
        --ff-body: "Inter", sans-serif;

        --fs-heading-lg: 2rem;
        --fs-heading-md: 1.5rem;
        --fs-heading-rg: 1.25rem;
        --fs-heading-sm: 1rem;

        --fs-body-xxl: 2rem;
        --fs-body-xl: 1.5rem;
        --fs-body-lg: 1.25rem;
        --fs-body-md: 1rem;
        --fs-body-rg: 0.75rem;
        --fs-body-sm: 0.5rem;

        --text-brand-light: #605bff;
        --text-brand-dark: #030229;
        --text-dark: #000000;
        --text-light: #fff;
        --text-gray: #9a9aa9;

        --fw-extra: 800;
        --fw-bold: 700;
        --fw-semi: 600;
        --fw-md: 500;
        --fw-rg: 400;

        --bg-brand-dark: #605bff;
        --bg-brand-light: #efefff;
        --bg-blue-dark: #5b93ff;
        --bg-blue-light: #eff4ff;
        --bg-orange-dark: #ffc327;
        --bg-orange-light: #fff7e1;
        --bg-pink-dark: #ff8f6b;
        --bg-pink-light: #fff4f0;
        --bg-netrual-light: #fafafb;
        --bg-netrual-dark: #f0f4f9;
        --bg-light: #fff;

        --layout-gap: 30px;
    }

    body {
        background-color: var(--bg-netrual-light);
        color: var(--text-brand-dark);
    }

    h1,
    h2,
    h3,
    h4 {
        font-family: var(--ff-heading);
    }
}

@layer layout {
    body {
        display: grid;
        grid-template-columns: auto 1fr;

        @media (width < 1140px) {
            grid-template-columns: 1fr;
        }
    }

    .main {
        display: flex;
        justify-content: center;
        padding: var(--layout-gap);

        @media (width < 1140px) {
            padding-left: 77px;
        }
    }

    .dashboard-wrapper {
        width: 100%;
        max-width: 1200px;
    }
}

@layer components {
    .product-card__stars {
        display: flex;
        align-items: center;
        gap: 4px;

        svg {
            fill: var(--bg-orange-dark);
        }
    }

    .product-card__price {
        font-family: var(--ff-heading);
        font-size: var(--fs-body-lg);
        font-weight: var(--fw-semi);
    }

    .product-card__image {
        width: 94px;
        height: 94px;
        border-radius: 1.5rem;
        object-fit: cover;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .product-card__info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 0.25rem;
    }

    .product-card {
        display: flex;
        gap: 1rem;
    }

    .product-card + .product-card {
        border-top: 1px solid var(--bg-netrual-dark);
        padding-top: 1rem;
    }

    .top-sale__card-container {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .top-sale,
    .analytic-chart,
    .sale-chart {
        display: grid;
        grid-template-rows: 28px 1fr;
        gap: 1rem;
    }

    .top-sale__title,
    .analytic-chart__title,
    .sale-chart__title {
        font-size: var(--fs-heading-md);

        @media (width < 640px) {
            font-size: var(--fs-heading-rg);
        }
    }

    .stat {
        display: flex;
        align-items: center;
        gap: 1.5rem;
    }

    .stat__icon {
        display: flex;
        align-items: center;
        justify-content: center;
        aspect-ratio: 1;
        border-radius: 50%;
        padding: 16px;
    }

    .stat__info {
        display: flex;
        flex-direction: column;
    }

    .stat__number {
        font-family: var(--ff-heading);
        font-size: var(--fs-body-xl);
        font-weight: var(--fw-bold);
        color: var(--text-brand-dark);

        @media (width < 1024px) {
            font-size: var(--fs-body-lg);
        }
    }

    .product-card__name,
    .stat__name {
        font-size: var(--fs-body-md);
    }

    .dashboard-layout {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: var(--layout-gap);
    }

    .card {
        background-color: #ffffff;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
        padding: 24px;
    }

    .card--stat {
        grid-column: span 3;

        @media (width < 1024px) {
            grid-column: span 6;
        }

        @media (width < 640px) {
            grid-column: span 12;
        }
    }

    .card--wide {
        grid-column: span 8;

        @media (width < 1024px) {
            grid-column: span 12;
        }
    }

    .card--narrow {
        grid-column: span 4;

        @media (width < 1024px) {
            grid-column: span 12;
        }
    }

    .dashboard__header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 40px;
        margin-bottom: var(--layout-gap);

        @media (width < 640px) {
            flex-wrap: wrap;
            height: auto;
            gap: var(--layout-gap);
        }
    }

    .dashboard__title {
        font-size: var(--fs-heading-lg);
        color: var(--text-brand-light);

        @media (width < 640px) {
            font-size: var(--fs-heading-md);
        }
    }

    .date-controls {
        display: flex;
        align-items: center;
        color: var(--text-brand-dark);
        gap: 1rem;
    }

    .date-controls__section {
        display: flex;
        align-items: center;
        background-color: var(--bg-light);
        padding: 8px 12px;
        gap: 8px;
        border-radius: 6px;
        box-shadow: 1px 1px 6px var(--bg-brand-light);
    }

    .date-controls__dropdown {
        display: flex;
        align-items: center;
        background-color: transparent;
        border: none;
        padding: 0;
        cursor: pointer;
    }

    @media (width < 640px) {
        :root {
            --layout-gap: 15px;
        }
    }

    .sidebar {
        position: sticky;
        top: 0;
        align-self: flex-start;
        display: flex;
        flex-direction: column;
        width: 250px;
        height: 100vh;
        font-size: var(--fs-heading-sm);
        background-color: var(--bg-netrual-dark);
        padding-inline: 1.5rem;

        transition: 100ms ease-in-out;

        @media (width < 1140px) {
            position: fixed;
        }
    }

    .sidebar.close {
        padding-inline: 1rem;
        width: calc(30px + 2rem);

        .sidebar__toggle-btn {
            justify-content: center;
        }

        .brand-logo,
        span {
            clip: rect(0 0 0 0);
            clip-path: inset(50%);
            height: 1px;
            overflow: hidden;
            position: absolute;
            white-space: nowrap;
            width: 1px;
        }

        a {
            justify-content: center;
        }
    }

    .sidebar__list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .sidebar li + li {
        margin-top: 18px;
    }

    .sidebar__list li:first-child {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-block: 2rem;
    }

    .sidebar__toggle-btn {
        display: flex;
        margin-left: auto;
        align-items: center;
        border: none;
        background-color: transparent;
        cursor: pointer;

        svg {
            fill: var(--text-brand-dark);

            transition: rotate 150ms ease;
        }
    }

    .sidebar__list li.selected a {
        color: var(--text-brand-light);

        svg {
            fill: var(--text-brand-light);
        }
    }

    .sidebar a {
        text-decoration: none;
        color: var(--text-dark);
        display: flex;
        align-items: center;
        gap: 2rem;

        svg {
            fill: var(--text-dark);
            width: 24px;
            height: 24px;
        }
    }

    .sidebar svg {
        flex-shrink: 0;
    }

    .rotate {
        rotate: 180deg;
    }

    .brand-logo {
        font-size: var(--fs-heading-lg);
        font-weight: var(--fw-extra);
        color: var(--bg-brand-dark);
    }
}

@layer util {
    .visually-hidden {
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }

    .bg-blue-light {
        background-color: var(--bg-blue-light);
    }

    .bg-blue-dark {
        background-color: var(--bg-blue-dark);
    }

    .fill-blue {
        fill: var(--bg-blue-dark);
    }

    .bg-orange-light {
        background-color: var(--bg-orange-light);
    }

    .bg-orange-dark {
        background-color: var(--bg-orange-dark);
    }

    .fill-orange {
        fill: var(--bg-orange-dark);
    }

    .bg-pink-light {
        background-color: var(--bg-pink-light);
    }

    .bg-pink-dark {
        background-color: var(--bg-pink-dark);
    }

    .fill-pink {
        fill: var(--bg-pink-dark);
    }

    .bg-brand-light {
        background-color: var(--bg-brand-light);
    }

    .bg-brand-dark {
        background-color: var(--bg-brand-dark);
    }

    .fill-brand {
        fill: var(--bg-brand-dark);
    }
}