/**
 * De accountschermen van de bieder.
 *
 * Geen eigen designsysteem: dezelfde groene accentkleur, dezelfde donkere knoppen en
 * dezelfde rustige grijstinten als de rest van 2Chair. Wat hier bij komt is structuur —
 * kaarten met een rand, vaste tussenruimte en één duidelijke primaire actie per kaart.
 *
 * Twee kolommen waar ruimte is, één kolom op een telefoon. Geen tabellen: die zijn op
 * 375px onbruikbaar.
 */

.account {
    margin-inline: auto;
    max-width: 32rem;
    padding: 150px 1.25rem;
}

/* Het account zelf is breder: daar passen twee kaarten naast elkaar. De losse
   formulierschermen (inloggen, registreren) blijven smal — een inlogformulier van
   vijftig centimeter breed leest slecht. */
.account--wide {
    max-width: 60rem;
}

.account__title {
    margin-bottom: .5rem;
}

.account__intro {
    color: #6c6c6c;
    margin-top: 0;
}

/* ------------------------------------------------------------------ kop met uitloggen */

.account__head {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.account__head .account__title {
    margin: 0;
}

/* Uitloggen is een POST-formulier en geen link, maar hoort er wel uit te zien als een
   rustige secundaire actie. */
.account__logout {
    margin: 0;
}

.account__logout-button {
    background: none;
    border: 0;
    color: #6c6c6c;
    cursor: pointer;
    font: inherit;
    font-size: .95rem;
    padding: .4rem 0;
    text-decoration: underline;
}

.account__logout-button:hover,
.account__logout-button:focus-visible {
    color: #1a1a18;
}

/* ---------------------------------------------------------------------------- kaarten */

.account__card {
    background: #fff;
    border: 1px solid #e3e3e1;
    border-radius: .6rem;
    margin: 0 0 1.25rem;
    padding: 1.25rem;
}

.account__card-title {
    font-size: 1.05rem;
    margin: 0 0 1rem;
}

/* Persoonlijke gegevens en Beveiliging staan naast elkaar zodra er plaats is. */
.account__grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr;
}

.account__grid .account__card {
    margin: 0;
}

@media (min-width: 48em) {
    .account__grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ----------------------------------------------------------------- accountoverzicht */

.account__name {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
}

.account__email {
    color: #4a4a48;
    margin: .2rem 0 .6rem;
    overflow-wrap: anywhere;
}

/* "E-mailadres geverifieerd" in plaats van "Bevestigd: Ja": hetzelfde feit, maar in
   mensentaal en zonder dat het de kaart domineert. */
.account__verified {
    align-items: center;
    color: #176b3a;
    display: inline-flex;
    font-size: .95rem;
    font-weight: 600;
    gap: .4rem;
    margin: 0;
}

.account__verified--pending {
    color: #8a6100;
}

.account__verified::before {
    content: "✓";
    font-weight: 700;
}

.account__verified--pending::before {
    content: "!";
}

.account__terms {
    margin: 1rem 0 0;
}

/* De aanvaardingsdatum is bewijs, geen mededeling. Klein en grijs volstaat. */
.account__meta {
    color: #8a8a88;
    display: block;
    font-size: .85rem;
    margin-top: .2rem;
}

/* --------------------------------------------------------------------- velden en knoppen */

.account__readonly {
    background: #f6f6f5;
    color: #6c6c6c;
}

.account__hint {
    color: #8a8a88;
    font-size: .85rem;
    margin: -.6rem 0 1rem;
}

.account__button {
    border: 0;
    border-radius: .35rem;
    cursor: pointer;
    display: inline-block;
    font-size: 1rem;
    font-weight: 600;
    padding: .8rem 1.2rem;
    text-align: center;
    text-decoration: none;
    width: 100%;
}

.account__button--primary {
    background: #39aa34;
    color: #fff;
}

.account__button--primary:hover,
.account__button--primary:focus-visible {
    background: #2f9029;
    color: #fff;
}

.account__button--secondary {
    background: #fff;
    border: 1px solid #1a1a18;
    color: #1a1a18;
}

.account__button--secondary:hover,
.account__button--secondary:focus-visible {
    background: #1a1a18;
    color: #fff;
}

/* ------------------------------------------------------------------------- beveiliging */

.account__secret {
    color: #4a4a48;
    font-size: 1.15rem;
    letter-spacing: .15em;
    margin: 0 0 1.25rem;
}

/* details/summary in plaats van JavaScript: het formulier klapt open zonder script, en
   blijft open staan wanneer er een fout in staat. */
.account__toggle {
    margin: 0;
}

.account__toggle > summary {
    background: #fff;
    border: 1px solid #1a1a18;
    border-radius: .35rem;
    cursor: pointer;
    font-weight: 600;
    list-style: none;
    padding: .8rem 1.2rem;
    text-align: center;
}

.account__toggle > summary::-webkit-details-marker {
    display: none;
}

.account__toggle > summary:hover,
.account__toggle > summary:focus-visible {
    background: #1a1a18;
    color: #fff;
}

.account__toggle[open] > summary {
    margin-bottom: 1rem;
}

/* -------------------------------------------------------------------- mijn veilingen */

.account__section-title {
    font-size: 1.3rem;
    margin: 2.5rem 0 1rem;
}

.account__lot {
    background: #fff;
    border: 1px solid #e3e3e1;
    border-radius: .6rem;
    margin: 0 0 1rem;
    padding: 1.25rem;
}

/* Een openstaande betaling hoort op te vallen tussen de rest. */
.account__lot--due {
    border-color: #39aa34;
}

.account__lot-head {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: space-between;
}

.account__lot-title {
    font-size: 1.1rem;
    margin: 0;
}

.account__lot-title a {
    color: inherit;
    text-decoration: none;
}

.account__lot-title a:hover,
.account__lot-title a:focus-visible {
    text-decoration: underline;
}

.account__lot-number {
    color: #8a8a88;
    display: block;
    font-size: .85rem;
    font-weight: 400;
    margin-top: .15rem;
}

.account__badge {
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    padding: .3rem .7rem;
    text-transform: uppercase;
    white-space: nowrap;
}

.account__badge--good {
    background: rgba(57, 170, 52, .14);
    color: #1d6b19;
}

.account__badge--warn {
    background: rgba(201, 134, 0, .14);
    color: #8a6100;
}

.account__badge--muted {
    background: #f1f1ef;
    color: #5a5a58;
}

/* Rijen in plaats van een tabel: op een telefoon blijft label links en waarde rechts,
   en er valt niets horizontaal weg te scrollen. */
.account__lot-rows {
    margin: 1rem 0 0;
}

.account__row {
    border-top: 1px solid #f0f0ee;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: .5rem 0;
}

.account__row:first-child {
    border-top: 0;
}

.account__row dt {
    color: #6c6c6c;
    margin: 0;
}

.account__row dd {
    font-weight: 600;
    margin: 0;
    text-align: right;
}

.account__lot-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.25rem;
}

.account__lot-actions form {
    flex: 1 1 14rem;
    margin: 0;
}

.account__lot-link {
    color: #1a1a18;
    font-weight: 600;
    white-space: nowrap;
}

.account__note {
    color: #6c6c6c;
    margin: 1rem 0 0;
}

.account__note--paid {
    color: #176b3a;
    font-weight: 600;
}

.account__note--warn {
    color: #8a2320;
}

/* ------------------------------------------------------------------------- lege staat */

.account__empty {
    background: #f8f8f7;
    border: 1px dashed #d9d9d6;
    border-radius: .6rem;
    padding: 2rem 1.25rem;
    text-align: center;
}

.account__empty p {
    color: #6c6c6c;
    margin: 0 0 1.25rem;
}

.account__empty .account__button {
    width: auto;
}

@media (max-width: 575.98px) {
    .account {
        padding: 110px 1rem;
    }

    .account__lot-actions .account__button,
    .account__empty .account__button {
        width: 100%;
    }

    .account__lot-link {
        text-align: center;
        width: 100%;
    }
}