/*
 * Mijn account — shell rond de account-subsecties (header, tabs, panelen).
 * De orderlijst zelf zit in layer-order-history.css.
 */
@import url('variables/webshop.css');

.layer__account {
    padding-block: var(--space-5);
    max-width: 48rem;
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* --- Header: naam + status-badge + uitloggen --- */
.account__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    margin-bottom: var(--space-3);
}

.account__head h1 {
    font-size: var(--fs-h1);
    line-height: var(--line-tight);
    margin: 0;
}

.account__badge {
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    white-space: nowrap;
    background: color-mix(in srgb, currentColor 10%, transparent);
}

.account__badge--approved {
    background: color-mix(in srgb, var(--ws-stock-in-color) 14%, transparent);
    color: var(--ws-stock-in-color);
}

.account__badge--pending {
    background: color-mix(in srgb, #c79b00 14%, transparent);
    color: #8a6d00;
}

.account__badge--rejected {
    background: color-mix(in srgb, var(--ws-price-sale-color) 12%, transparent);
    color: var(--ws-price-sale-color);
}

.account__logout {
    margin: 0 0 0 auto;
}

/* --- Sub-navigatie: tabs met actieve onderstreping --- */
.account__nav {
    display: flex;
    gap: var(--space-1);
    border-bottom: var(--ws-card-border);
    margin-bottom: var(--space-4);
}

.account__nav-item {
    padding: 0.6rem 0.9rem;
    text-decoration: none;
    color: color-mix(in srgb, currentColor 70%, transparent);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px; /* over de rand van de nav heen */
    transition: color .15s ease, border-color .15s ease;
}

.account__nav-item:hover {
    color: currentColor;
}

.account__nav-item.is-active {
    color: currentColor;
    font-weight: 600;
    border-bottom-color: var(--color-accent, currentColor);
}

/* --- Panelen --- */
.account__panel {
    margin: 0;
}

/* layer-order-history.css centreert/padt zichzelf; binnen de account-shell
   is dat al gedaan door .layer__account. */
.account__panel.layer__order-history {
    padding: 0;
    max-width: none;
}

.account__notice {
    border: var(--ws-card-border);
    border-left: 4px solid #c79b00;
    border-radius: var(--ws-card-radius);
    background: color-mix(in srgb, #c79b00 8%, transparent);
    padding: var(--space-3) var(--space-4);
    margin: 0 0 var(--space-3);
}

/* --- Gegevens (dl) --- */
.account__profile {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-2) var(--space-4);
    margin: 0;
    border: var(--ws-card-border);
    border-radius: var(--ws-card-radius);
    background: var(--color-bg-elev, #fff);
    padding: var(--space-4);
}

.account__profile dt {
    font-weight: 600;
}

.account__profile dd {
    margin: 0;
}

/* --- Uitgelogde staat --- */
.account-loggedout h1 {
    font-size: var(--fs-h1);
    line-height: var(--line-tight);
    margin: 0 0 var(--space-2);
}

.account-actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

@media (max-width: 40rem) {
    .account__nav {
        overflow-x: auto;
    }
    .account__nav-item {
        white-space: nowrap;
    }
    .account__profile {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }
    .account__profile dd {
        margin-bottom: var(--space-2);
    }
}