/* ============================================================
   publiek/account.css - de pagina's voor accounts: inloggen,
   account maken, je profiel.
   Hoort bij templates/public/account_*.html en bij de bouwstenen
   in templates/public/delen/_formulier.html.
   ============================================================ */

.account {
    max-width: 920px;
    margin: 0 auto;
    padding-top: 30px;
}
/* inloggen en account maken: een smalle kolom */
.account.smal { max-width: 460px; }
/* je eigen account: menu links, een vak rechts */
.account.profiel { max-width: 760px; }

/* ------------------------------------------------- de titel */
.account-kop { margin-bottom: 18px; }
.account-kop h1 {
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 800;
    letter-spacing: -.5px;
    overflow-wrap: anywhere;
}
.account-kop h1 span {
    display: inline-block;
    padding-bottom: .12em;   /* ruimte voor de staart van de g */
    background: linear-gradient(90deg, #8b3dff 0%, #4f6bff 48%, #38bdf8 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}
.account-kop p { margin: 6px 0 0; color: #e3e6ff; font-size: 15.5px; }

/* op het profiel: letter, naam en rechts 'Sign out' */
.account-wie { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.account-wie > div { flex: 1; min-width: 200px; }
.account-wie h1 { font-size: clamp(24px, 3vw, 34px); }
.account-letter {
    flex: none;
    display: grid;
    place-items: center;
    width: 58px; height: 58px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--paars), var(--cyaan));
    font-size: 26px;
    font-weight: 800;
    color: #fff;
}

/* ---------------------------------------------- meldingen */
.account-melding {
    margin: 0 0 14px;
    padding: 10px 14px;
    border: 1px solid;
    border-radius: var(--rond-klein);
    font-size: 14.5px;
}
.account-melding.goed { border-color: rgba(52, 211, 153, .7); background: rgba(52, 211, 153, .12); color: #d6ffee; }
.account-melding.fout { border-color: rgba(239, 83, 80, .7); background: rgba(239, 83, 80, .13); color: #ffd9d7; }

/* ------------------------------------------------ een vak */
.account-vak {
    padding: 20px 22px;
    border: 1px solid var(--rand-neon);
    border-radius: var(--rond);
    background: linear-gradient(180deg, #0e1238 0%, #090c28 100%);
    box-shadow: var(--gloed);
}
.account-vak h2 { margin-bottom: 6px; font-size: 18px; }
.account-uitleg { margin: 0 0 14px; font-size: 14px; color: var(--tekst-zacht); }
.account-uitleg strong { color: var(--tekst); overflow-wrap: anywhere; }

/* ------------------------------------------- het profiel
   Links het menu, rechts de vakken. static/js/account.js laat
   een vak tegelijk zien; zonder dat script staan ze onder elkaar. */
.account-twee {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}
.account-menu { display: grid; gap: 4px; }
/* '.account' ervoor: anders wint de gewone linkkleur van '.account a' */
.account .account-menu a {
    padding: 10px 14px;
    border-radius: var(--rond-klein);
    color: var(--tekst-zacht);
    font-size: 15px;
    text-decoration: none;
}
.account .account-menu a:hover { color: #fff; background: rgba(124, 58, 237, .10); }
.account .account-menu a.nu {
    background: rgba(124, 58, 237, .22);
    box-shadow: inset 3px 0 0 var(--paars-licht);
    color: #fff;
    font-weight: 700;
}
.account .account-menu a.rood { margin-top: 14px; color: #ff9d99; }
.account .account-menu a.rood.nu { background: rgba(239, 83, 80, .16); box-shadow: inset 3px 0 0 #ef5350; color: #ffd9d7; }

.account-vakken { display: grid; gap: 18px; min-width: 0; }
.account-vakken .account-vak { padding: 22px 24px; border-color: var(--rand); box-shadow: none; }
.account-vakken .account-vak h2 { font-size: 20px; }
.account-vakken .account-vak form { max-width: 400px; }
.account-vak.gevaar { border-color: rgba(239, 83, 80, .45); }
.account-vak form + form { margin-top: 12px; }

/* iets wat je wel ziet maar niet kunt wijzigen: je gebruikersnaam */
.account-vast { margin: 0 0 15px; }
.account-vast dt { margin-bottom: 5px; font-size: 13.5px; font-weight: 700; }
.account-vast dd { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
.account-vast dd span { margin-left: 8px; font-size: 12.5px; color: var(--tekst-dof); }

/* -------------------------------------------------- velden */
.account-veld { margin-bottom: 15px; min-width: 0; }
.account-veld label { display: block; margin-bottom: 5px; font-size: 13.5px; font-weight: 700; }
.account-veld label span { margin-left: 4px; font-weight: 400; color: var(--tekst-dof); }
.account-veld small { display: block; margin-top: 5px; font-size: 12.5px; color: var(--tekst-zacht); }
.account-veld input {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--rand);
    border-radius: var(--rond-klein);
    background: var(--vlak-diep);
    color: var(--tekst);
    font: inherit;
    font-size: 15px;
    outline: 0;
}
.account-veld input:focus { border-color: var(--paars-licht); box-shadow: 0 0 0 2px rgba(124, 58, 237, .3); }

/* Het oogje in een wachtwoordveld: tonen of verbergen. De knop staat
   in het veld, rechts. Zonder JavaScript is hij er niet (hidden). */
.ww-vak { position: relative; }
.ww-vak input { padding-right: 46px; }
.ww-oog {
    position: absolute;
    top: 1px;
    right: 1px;
    bottom: 1px;
    width: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: var(--rond-klein);
    background: none;
    color: var(--tekst-zacht);
    cursor: pointer;
}
.ww-oog[hidden] { display: none; }
.ww-oog:hover, .ww-oog:focus-visible { color: var(--tekst); }
.ww-oog:focus-visible { outline: 2px solid var(--paars-licht); outline-offset: -3px; }
.ww-oog svg { width: 20px; height: 20px; }
.ww-oog svg[hidden] { display: none; }

.account-vink {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 2px 0 16px;
    font-size: 14px;
    cursor: pointer;
}
.account-vink input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--paars); }

/* ------------------------------------------------- knoppen */
.account-knop { width: 100%; padding: 11px; font-size: 15px; cursor: pointer; }
.account-rood {
    border: 1px solid rgba(239, 83, 80, .8);
    border-radius: var(--rond-klein);
    background: rgba(239, 83, 80, .16);
    color: #ffd9d7;
    font: inherit;
    font-weight: 700;
}
.account-rood:hover { background: rgba(239, 83, 80, .3); }
/* een knop die eruitziet als een link: uitloggen, mail opnieuw sturen */
.account-stil {
    padding: 8px 14px;
    border: 1px solid var(--rand);
    border-radius: var(--rond-klein);
    background: transparent;
    color: var(--tekst);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}
.account-stil:hover { border-color: var(--paars-licht); }

.account-label {
    margin-left: 6px;
    padding: 1px 8px;
    border: 1px solid var(--goud);
    border-radius: 999px;
    font-size: 12px;
    color: var(--goud);
    white-space: nowrap;
}
.account-label.goed { border-color: var(--groen); color: var(--groen); }

.account-onder { margin: 14px 2px 0; font-size: 14px; color: var(--tekst-zacht); }
.account a { color: #b9a4ff; text-underline-offset: 3px; }
.account a:hover { color: #fff; }

/* Het veld tegen robots (spellenplaza/veilig.py): mensen zien het niet.
   Niet 'display: none': sommige robots slaan zulke velden juist over. */
.niet-invullen {
    position: absolute;
    left: -9999px;
    width: 1px; height: 1px;
    overflow: hidden;
}

/* smal scherm: het menu wordt een rij bovenaan die opzij kan schuiven */
@media (max-width: 680px) {
    .account-twee { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .account-menu {
        display: flex;
        gap: 6px;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: thin;
    }
    .account .account-menu a { flex: none; padding: 9px 13px; white-space: nowrap; }
    .account .account-menu a.nu { box-shadow: inset 0 -3px 0 var(--paars-licht); }
    .account .account-menu a.rood { margin-top: 0; }
    .account .account-menu a.rood.nu { box-shadow: inset 0 -3px 0 #ef5350; }
    .account-vakken .account-vak { padding: 16px 14px; }
}

@media (max-width: 520px) {
    .account { padding-top: 20px; }
    .account-vak { padding: 16px 14px; }
    .account-letter { width: 46px; height: 46px; font-size: 21px; }
}

/* Wachtwoordmanagers (Bitwarden) zetten hun icoon en menu verkeerd bij 'zoom' op body. Hier zit de vergroting op html. */
html { zoom: 1; }
body { zoom: 1; }