@layer components {
    .analytics-period-form {
        display: flex;
        flex-wrap: wrap;
        align-items: end;
        gap: 0.75rem;
        margin-bottom: 1.25rem;
        padding: 1rem;
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        background: var(--surface);
        box-shadow: var(--shadow-sm);
    }

    .analytics-period-form .form-field {
        min-width: 165px;
    }

    .analytics-period-presets {
        display: flex;
        flex-wrap: wrap;
        gap: 0.45rem;
    }

    .analytics-summary-grid,
    .customer-summary-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1rem;
        margin-bottom: 1.25rem;
    }

    .analytics-summary-card {
        min-height: 142px;
        padding: 1.15rem;
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        background: var(--surface);
        box-shadow: var(--shadow-sm);
    }

    .analytics-summary-card__label {
        color: var(--text-soft);
        font-size: 0.78rem;
        font-weight: 760;
    }

    .analytics-summary-card__value {
        display: block;
        margin-top: 0.65rem;
        font-size: clamp(1.75rem, 4vw, 2.8rem);
        font-weight: 900;
        line-height: 1;
        letter-spacing: -0.045em;
    }

    .analytics-summary-card__hint {
        display: block;
        margin-top: 0.65rem;
        color: var(--text-muted);
        font-size: 0.73rem;
    }

    .analytics-dashboard-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
        align-items: start;
        gap: 1.25rem;
    }

    .analytics-dashboard-grid + .analytics-dashboard-grid,
    .analytics-dashboard-grid + .dashboard-panel,
    .dashboard-panel + .analytics-dashboard-grid {
        margin-top: 1.25rem;
    }

    .analytics-chart-scroll {
        overflow-x: auto;
        padding-bottom: 0.65rem;
    }

    .analytics-chart {
        display: grid;
        min-width: max(100%, calc(var(--analytics-days) * 28px));
        height: 310px;
        grid-template-columns: repeat(var(--analytics-days), minmax(20px, 1fr));
        align-items: end;
        gap: 0.35rem;
        padding: 1rem 0.5rem 0.2rem;
        border-bottom: 1px solid var(--border);
    }

    .analytics-chart__day {
        display: grid;
        height: 100%;
        grid-template-rows: minmax(0, 1fr) auto;
        align-items: end;
        gap: 0.45rem;
    }

    .analytics-chart__bars {
        display: flex;
        height: 100%;
        align-items: end;
        justify-content: center;
        gap: 2px;
    }

    .analytics-chart__bar {
        width: min(9px, 45%);
        min-height: 2px;
        border-radius: 7px 7px 2px 2px;
        transform-origin: bottom;
    }

    .analytics-chart__bar--visits {
        height: max(2px, var(--bar-height));
        background: linear-gradient(to top, var(--primary), var(--accent));
    }

    .analytics-chart__bar--orders {
        height: max(2px, var(--bar-height));
        background: linear-gradient(to top, var(--violet), #d07af3);
    }

    .analytics-chart__day > span {
        color: var(--text-muted);
        font-size: 0.62rem;
        text-align: center;
        writing-mode: vertical-rl;
        transform: rotate(180deg);
    }

    .analytics-chart-legend {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        margin-top: 0.8rem;
        color: var(--text-soft);
        font-size: 0.76rem;
    }

    .analytics-chart-legend span {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
    }

    .analytics-chart-legend span::before {
        width: 10px;
        height: 10px;
        border-radius: 3px;
        background: var(--primary);
        content: "";
    }

    .analytics-chart-legend span:last-child::before {
        background: var(--violet);
    }

    .analytics-table-scroll {
        overflow-x: auto;
    }

    .analytics-table {
        width: 100%;
        border-collapse: collapse;
    }

    .analytics-table th,
    .analytics-table td {
        padding: 0.8rem 0.7rem;
        border-bottom: 1px solid var(--border);
        text-align: start;
        vertical-align: middle;
    }

    .analytics-table th {
        color: var(--text-muted);
        font-size: 0.7rem;
        font-weight: 850;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .analytics-table tbody tr:last-child td {
        border-bottom: 0;
    }

    .analytics-country-code {
        display: inline-grid;
        min-width: 38px;
        min-height: 28px;
        place-items: center;
        padding-inline: 0.4rem;
        border-radius: 9px;
        color: var(--primary);
        background: var(--primary-soft);
        font-size: 0.72rem;
        font-weight: 900;
    }

    .admin-customer-search {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.75rem;
        margin-bottom: 1rem;
    }

    .admin-customer-list {
        display: grid;
        gap: 0.75rem;
    }

    .admin-customer-card {
        display: grid;
        grid-template-columns: 58px minmax(0, 1fr) auto;
        align-items: center;
        gap: 1rem;
        padding: 1rem;
        border: 1px solid var(--border);
        border-radius: 17px;
        background: var(--surface-soft);
    }

    .admin-customer-card__avatar {
        display: grid;
        width: 58px;
        height: 58px;
        place-items: center;
        border-radius: 17px;
        color: #ffffff;
        background: linear-gradient(135deg, var(--primary), var(--violet));
        font-size: 0.95rem;
        font-weight: 900;
    }

    .admin-customer-card__copy {
        min-width: 0;
    }

    .admin-customer-card__copy h3 {
        margin: 0;
        font-size: 1rem;
    }

    .admin-customer-card__copy > p {
        overflow: hidden;
        margin-top: 0.25rem;
        color: var(--text-soft);
        font-size: 0.82rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .admin-customer-card__meta {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
        margin-top: 0.65rem;
    }

    .admin-customer-card__meta span {
        padding: 0.28rem 0.5rem;
        border-radius: 999px;
        color: var(--text-muted);
        background: var(--surface);
        font-size: 0.68rem;
        font-weight: 760;
    }

    .admin-customer-detail {
        display: grid;
        grid-template-columns: minmax(0, 1.4fr) minmax(300px, 0.6fr);
        align-items: start;
        gap: 1.25rem;
    }

    .admin-customer-products,
    .admin-customer-orders {
        display: grid;
        gap: 0.75rem;
    }

    .admin-customer-product,
    .admin-customer-order {
        padding: 1rem;
        border: 1px solid var(--border);
        border-radius: 15px;
        background: var(--surface-soft);
    }

    .admin-customer-product__header,
    .admin-customer-order__header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
    }

    .admin-customer-product__header h3,
    .admin-customer-order__header h3 {
        margin: 0;
        font-size: 0.95rem;
    }

    .admin-customer-product__header p,
    .admin-customer-order__header p {
        margin-top: 0.25rem;
        color: var(--text-soft);
        font-size: 0.78rem;
    }

    .admin-customer-product__variants,
    .admin-customer-order__items {
        display: grid;
        gap: 0.45rem;
        margin-top: 0.8rem;
        padding-top: 0.8rem;
        border-top: 1px solid var(--border);
    }

    .admin-customer-product__variants li,
    .admin-customer-order__items li {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        color: var(--text-soft);
        font-size: 0.78rem;
    }

    .admin-customer-sidebar {
        display: grid;
        position: sticky;
        top: calc(var(--header-height) + 1.5rem);
        gap: 1rem;
    }

    .admin-customer-information {
        display: grid;
        gap: 0.7rem;
    }

    .admin-customer-information > div {
        display: grid;
        gap: 0.15rem;
        padding-bottom: 0.7rem;
        border-bottom: 1px solid var(--border);
    }

    .admin-customer-information > div:last-child {
        padding-bottom: 0;
        border-bottom: 0;
    }

    .admin-customer-information span {
        color: var(--text-muted);
        font-size: 0.7rem;
        font-weight: 850;
        text-transform: uppercase;
    }

    .admin-pagination {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
        margin-top: 1.25rem;
    }

    /* Demande V8 : aperçu carré dans la liste des produits. */
    .product-index-card__visual {
        width: 94px;
        height: 94px;
        aspect-ratio: 1 / 1;
    }

    .product-index-card__visual img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    @media (max-width: 1050px) {
        .analytics-summary-grid,
        .customer-summary-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .analytics-dashboard-grid,
        .admin-customer-detail {
            grid-template-columns: 1fr;
        }

        .admin-customer-sidebar {
            position: static;
        }
    }

    @media (max-width: 680px) {
        .analytics-summary-grid,
        .customer-summary-grid,
        .admin-customer-search {
            grid-template-columns: 1fr;
        }

        .analytics-period-form {
            align-items: stretch;
            flex-direction: column;
        }

        .analytics-period-form .form-field,
        .analytics-period-form .btn {
            width: 100%;
        }

        .admin-customer-card {
            grid-template-columns: 50px minmax(0, 1fr);
        }

        .admin-customer-card__avatar {
            width: 50px;
            height: 50px;
        }

        .admin-customer-card__actions {
            grid-column: 1 / -1;
        }

        .admin-customer-card__actions .btn {
            width: 100%;
        }

        .admin-customer-product__header,
        .admin-customer-order__header,
        .admin-customer-product__variants li,
        .admin-customer-order__items li {
            align-items: flex-start;
            flex-direction: column;
            gap: 0.25rem;
        }

        .product-index-card__visual {
            width: 72px;
            height: 72px;
        }
    }
}