/* Direct account management */
.access-accounts-page {
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
}
.access-page-header { margin-bottom: 22px; }
.access-create-panel,
.access-accounts-panel { padding: 22px 24px; }
.access-panel-head { margin-bottom: 18px; }
.access-panel-head > div { display: flex; flex-direction: column; gap: 4px; }
.access-panel-head h2 { font-size: 23px; }

.access-create-form {
    display: grid;
    grid-template-columns: minmax(280px, 1.15fr) 150px minmax(320px, 1fr);
    gap: 14px 12px;
    align-items: end;
}
.access-create-form label,
.access-password-form label {
    display: flex;
    flex-direction: column;
    gap: 7px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}
.access-create-form input,
.access-create-form select { min-height: 46px; }
.access-password-field {
    grid-column: 1 / span 2;
    max-width: 620px;
}
.access-create-submit {
    grid-column: 3;
    justify-self: start;
    min-height: 46px;
    min-width: 160px;
    white-space: nowrap;
}
.access-password-control {
    display: grid;
    grid-template-columns: minmax(210px, 1fr) auto auto;
    gap: 7px;
    align-items: center;
}
.access-password-control input {
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    letter-spacing: .02em;
}
.access-form-note {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 11.5px;
    line-height: 1.45;
}

.access-accounts-panel { margin-top: 18px; }
.access-table-wrap { border: 1px solid var(--line); border-radius: 12px; overflow: auto; }
.access-accounts-table { min-width: 860px; }
.access-accounts-table th { background: var(--soft); }
.access-accounts-table td { background: var(--surface); }
.access-account-email { display: block; color: var(--ink); font-size: 13px; }
.access-account-name { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.access-role-badge { min-width: 62px; justify-content: center; }
.access-account-actions { text-align: right; white-space: nowrap; }
.access-empty { padding: 12px 0 4px; }

.access-password-dialog {
    width: min(520px, calc(100vw - 32px));
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 24px 64px rgba(0, 0, 0, .28);
}
.access-password-dialog::backdrop { background: rgba(15, 22, 19, .55); }
.access-password-form { display: flex; flex-direction: column; gap: 15px; padding: 22px; }
.access-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.access-dialog-head h2 { margin: 3px 0 6px; font-size: 24px; }
.access-dialog-close {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--soft);
    color: var(--muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.access-password-dialog-control { grid-template-columns: minmax(170px, 1fr) auto auto; }
.access-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

html[data-theme="dark"] .access-table-wrap { border-color: #35463e; }
html[data-theme="dark"] .access-accounts-table th { background: #1d2b25; }
html[data-theme="dark"] .access-accounts-table td { background: #17231e; }
html[data-theme="dark"] .access-password-dialog { background: #17231e; border-color: #40534a; }
html[data-theme="dark"] .access-dialog-close { background: #24332c; border-color: #40534a; color: #b7c3bd; }

@media (max-width: 980px) {
    .access-create-form { grid-template-columns: 1fr 150px; }
    .access-volunteer-field { grid-column: 1 / -1; }
    .access-password-field { grid-column: 1 / -1; max-width: none; }
    .access-create-submit { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 760px) {
    .access-accounts-page { width: calc(100% - 20px); }
    .access-create-panel,
    .access-accounts-panel { padding: 18px 16px; }
    .access-create-form { grid-template-columns: 1fr; }
    .access-email-field,
    .access-volunteer-field,
    .access-password-field,
    .access-create-submit { grid-column: auto; }
    .access-password-control,
    .access-password-dialog-control { grid-template-columns: 1fr 1fr; }
    .access-password-control input { grid-column: 1 / -1; }
    .access-create-submit { width: 100%; }
}