/* Aanmelding en feedback: paneel in de header, het aanmeldvenster en de formulieren.
 * Gebruikt de tokens uit styles.css, dus licht en donker volgen vanzelf. */

/* ---------- Header ---------- */

#accessPanel { display: flex; align-items: center; gap: .75rem; font-size: .875rem; }
.access-header-btn {
    padding: .4rem .9rem;
    border: 1px solid rgb(255 255 255 / 35%);
    border-radius: 999px;
    background: transparent;
    color: var(--header-text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.access-header-btn::-webkit-details-marker { display: none; }
.access-header-btn:hover { background: rgb(255 255 255 / 8%); }
.access-header-btn.due { border-color: #f5b942; }
.access-header-link { color: var(--header-text-2); }
.access-header-link:hover { color: var(--header-text); }

.access-panel-details { position: relative; }
.access-panel-body {
    position: absolute;
    right: 0;
    top: calc(100% + .5rem);
    z-index: 900;
    width: min(420px, calc(100vw - 2rem));
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-lg);
}
.access-copy { display: flex; gap: .5rem; margin-top: .25rem; }
.access-copy input {
    flex: 1;
    min-width: 0;
    padding: .4rem .5rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text);
    font-family: ui-monospace, monospace;
    font-size: .8rem;
}
@media (max-width: 640px) {
    /* Past anders niet naast de tabs; "Ik heb al toegang" staat ook in het aanmeldvenster. */
    .access-header-link { display: none; }
    .access-header-btn { padding: .4rem .7rem; }
    .header-actions { gap: .25rem; }  /* ruimte voor de aanmeldknop naast de tabs */
    .access-panel-body { position: fixed; left: 1rem; right: 1rem; top: 4.5rem; width: auto; }
}

/* ---------- Venster ---------- */

.access-dialog { width: min(720px, calc(100vw - 2rem)); }
@media (max-width: 640px) { .access-dialog { width: 100vw; } }
.access-lead { margin-top: 0; }
.access-why {
    padding: .75rem 1rem;
    border-left: 3px solid var(--primary);
    border-radius: var(--radius-sm);
    background: var(--primary-soft);
    font-size: .925rem;
}
.access-note { color: var(--text-2); font-size: .875rem; }

.access-form { display: flex; flex-direction: column; gap: .8rem; }
.access-form label { display: flex; flex-direction: column; gap: .25rem; font-weight: 600; }
.access-form label small { color: var(--text-2); font-weight: 400; }
.access-form label.inline { flex-direction: row; align-items: flex-start; gap: .5rem; font-weight: 400; }
.access-form label.inline input { margin-top: .3rem; }
.access-form input:not([type=checkbox]):not([type=radio]),
.access-form select,
.access-form textarea {
    padding: .5rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-weight: 400;
}
.access-form fieldset { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; margin: 0; padding: 0; border: 0; }
.access-form legend { margin-bottom: .25rem; padding: 0; font-weight: 600; }
#accessOrgFields { display: flex; flex-direction: column; gap: .75rem; padding-left: 1rem; border-left: 3px solid var(--primary-soft); }
#accessOrgFields[hidden] { display: none; }

.access-tier-info:empty { display: none; }
.access-tier-info:not(:empty) {
    margin: 0;
    padding: .6rem .8rem;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    font-size: .9rem;
}
.access-brontoets {
    padding: .75rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--warn-soft);
    font-size: .9rem;
}
.access-brontoets h3, .access-terms h3 { margin: 0 0 .5rem; font-size: 1rem; }
.access-brontoets ol, .access-terms ol { padding-left: 1.25rem; }
.access-terms { font-size: .9rem; }
.access-terms summary { color: var(--primary); cursor: pointer; font-weight: 600; }

.access-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: .5rem; }
.access-status:empty { display: none; }
.access-status.error, .access-status.ok { padding: .5rem .75rem; border-radius: var(--radius-sm); }
.access-status.error { background: var(--warn-soft); color: var(--danger); }
.access-status.ok { background: var(--primary-soft); color: var(--text); }

/* ---------- Losse pagina's (privacy) ---------- */

.access-page { max-width: 760px; margin: 2rem auto; padding: 0 1rem; line-height: 1.6; }
.access-page h2 { margin: 1.5rem 0 .5rem; font-size: 1.2rem; }
.access-page ul { padding-left: 1.25rem; }