/*
 * 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);
}

/* Onvolledig: neutraal/grijs — nog niets te beoordelen. */
.account__badge--incomplete {
    background: color-mix(in srgb, var(--color-fg, #333) 8%, transparent);
    color: color-mix(in srgb, var(--color-fg, #333) 65%, transparent);
}

.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: 1px solid color-mix(in srgb, #c79b00 30%, transparent);
    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;
}


/* --- Gegevens-tab: bewerkbaar profiel --- */
.account__profile-edit {
    max-width: 36rem;
}

.account__profile-heading {
    font-size: var(--fs-h3);
    margin: var(--space-4) 0 var(--space-2);
    padding-bottom: var(--space-1);
    border-bottom: 1px solid color-mix(in srgb, currentColor 10%, transparent);
}

.account__profile-form .account__profile-heading:first-child { margin-top: 0; }

.account__profile-row {
    display: grid;
    grid-template-columns: var(--cols, 1fr 1fr);
    gap: var(--space-2);
}

@media (max-width: 32rem) {
    .account__profile-row { grid-template-columns: 1fr; }
}

.account__profile-check {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin-bottom: var(--space-2);
    cursor: pointer;
}

.account__profile-hint {
    color: color-mix(in srgb, currentColor 65%, transparent);
    font-size: 0.9rem;
    margin: var(--space-1) 0 0;
}

/* Uitleg bovenaan de Gegevens-tab (verifiëren/activeren). */
.account__profile-intro {
    color: color-mix(in srgb, currentColor 78%, transparent);
    font-size: 0.95rem;
    line-height: var(--line-normal, 1.5);
    margin: 0 0 var(--space-3);
}

/* Activatie-hulptekst vlak boven de opslaan-knop. */
.account__activate-hint {
    margin-top: var(--space-3);
}

.account__profile-submit {
    margin-top: var(--space-3);
}

@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);
    }
}

/* --- Overzicht: compacte gegevenskaarten + assortiment-CTA --- */
.account__overview-intro { margin: 0 0 var(--space-4); color: color-mix(in srgb, currentColor 72%, transparent); }
.account__overview-details { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin-bottom: var(--space-4); }
.account__overview-detail { display: flex; align-items: center; gap: .65rem; min-width: 0; padding: var(--space-3); border: var(--ws-card-border); border-radius: var(--ws-card-radius); background: var(--color-bg-elev, #fff); }
.account__overview-icon { display: grid; place-items: center; flex: 0 0 2rem; width: 2rem; height: 2rem; border-radius: 50%; background: color-mix(in srgb, var(--color-accent, currentColor) 12%, transparent); font-size: 1rem; }
.account__overview-detail-copy { display: grid; min-width: 0; gap: .15rem; }
.account__overview-detail-copy small { color: color-mix(in srgb, currentColor 62%, transparent); font-size: .72rem; }
.account__overview-detail-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; }
.account__overview-cta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4); border-radius: var(--ws-card-radius); background: color-mix(in srgb, var(--color-accent, currentColor) 9%, var(--color-bg-elev, #fff)); }
.account__overview-cta-copy { display: grid; gap: .25rem; }
.account__overview-cta-copy span { color: color-mix(in srgb, currentColor 70%, transparent); font-size: .88rem; }
@media (max-width: 640px) { .account__overview-details { grid-template-columns: 1fr; } .account__overview-cta { align-items: flex-start; flex-direction: column; } }
/* Downloads die de winkelier voor klanten klaarzet (catalogus, prijslijst).
   Bewust een kale lijst met links: het zijn er weinig en de bestandsnaam is
   het label, dus een kaartenraster zou meer aandacht vragen dan het verdient. */
.account-downloads__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2, .5rem);
}

.account-downloads__item + .account-downloads__item {
    border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent);
    padding-top: var(--space-2, .5rem);
}

.account-downloads__link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
    color: inherit;
    font-weight: 500;
}

.account-downloads__link::before {
    content: "";
    width: 1rem;
    height: 1rem;
    flex: none;
    background: currentColor;
    /* Pijl-omlaag-in-bak: als masker, zodat het icoon de tekstkleur volgt en
       er geen extra bestand bij komt. */
    -webkit-mask: var(--icoon-download) center / contain no-repeat;
    mask: var(--icoon-download) center / contain no-repeat;
    opacity: .7;
}

.account-downloads__link:hover,
.account-downloads__link:focus-visible {
    text-decoration: underline;
}

.account__downloads {
    --icoon-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v12m0 0l-4-4m4 4l4-4M4 17v2a2 2 0 002 2h12a2 2 0 002-2v-2' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}