/* Manage access page. Loads AFTER base-styles.css and only adds to it.
   Nothing here redefines the mast, the nav, the user bar, the role badge or the preview switch:
   those are all in base-styles.css so the four pages cannot diverge. */

#main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 20px 60px;
}

h1 { font-size: 1.6rem; margin: 0 0 18px; }
h2 { font-size: 1.15rem; margin: 0 0 12px; }

.card {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #d8dde2);
    border-radius: 6px;
    padding: 24px;
    margin-bottom: 22px;
}

/* States the delay before anyone asks why a change "did not work". */
.notice {
    background: #eef4fa;
    border-left: 4px solid #386193;
    padding: 12px 16px;
    border-radius: 4px;
    margin-bottom: 22px;
    font-size: .92rem;
}
.notice p { margin: 0; }
[data-theme="dark"] .notice { background: #1b2430; }

.input-group { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 16px; }
.input-group label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 4px; width: 100%; }
.input-group input {
    flex: 1; min-width: 280px; padding: 10px 12px;
    border: 2px solid var(--border, #d8dde2); border-radius: 4px;
    font-size: 1rem; font-family: inherit;
    background: var(--input-bg, #fff); color: var(--text, #222);
}
.input-group input:focus { outline: 3px solid #e2ca76; border-color: #386193; }

.level-choice { border: 0; padding: 0; margin: 0 0 18px; }
.level-choice legend { font-weight: 600; font-size: .9rem; padding: 0 0 8px; }
.radio-label {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 10px 12px; margin-bottom: 8px;
    border: 1px solid var(--border, #d8dde2); border-radius: 4px;
    cursor: pointer; font-size: .92rem;
}
.radio-label:hover { border-color: #386193; }
.radio-label input { margin-top: 3px; }

.primary-btn {
    background: #386193; color: #fff; border: 0;
    padding: 11px 22px; border-radius: 4px;
    font-size: .95rem; font-family: inherit; cursor: pointer;
}
.primary-btn:hover { background: #0e335b; }
.primary-btn:focus-visible { outline: 3px solid #e2ca76; outline-offset: 2px; }

table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border, #e3e7eb); vertical-align: middle; }
th { font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .3px; color: var(--text-muted, #62717f); }

.level-admin {
    display: inline-block; padding: 3px 10px; border-radius: 12px;
    background: rgba(0,112,60,.14); color: #00703c; font-size: .8rem; font-weight: 600;
}
.level-user { color: var(--text-muted, #62717f); font-size: .86rem; }
[data-theme="dark"] .level-admin { color: #6fcf97; }

.you {
    background: #386193; color: #fff; font-size: .68rem; font-weight: 700;
    padding: 1px 7px; border-radius: 10px; margin-left: 6px; text-transform: uppercase;
}
/* Marked because granting rights to the wrong one of a person's two accounts is a genuinely
   confusing thing to diagnose. */
.native { color: #7a5800; cursor: help; border-bottom: 1px dotted currentColor; }
[data-theme="dark"] .native { color: #e2ca76; }

.action-cell { white-space: nowrap; }
.action-cell button {
    font-family: inherit; font-size: .8rem; padding: 5px 11px;
    border-radius: 4px; cursor: pointer; margin-right: 6px;
    border: 1px solid var(--border, #c9d1d9); background: none; color: var(--text, #222);
}
.promote-btn:hover:not(:disabled) { border-color: #00703c; color: #00703c; }
.demote-btn:hover:not(:disabled), .remove-btn:hover:not(:disabled) { border-color: #d4351c; color: #d4351c; }
.action-cell button:disabled { opacity: .45; cursor: not-allowed; }
.action-cell button:focus-visible { outline: 3px solid #e2ca76; outline-offset: 2px; }

.result-line { margin-top: 14px; font-size: .9rem; min-height: 1.2em; }
.result-ok { color: #00703c; }
.result-error { color: #d4351c; }
[data-theme="dark"] .result-ok { color: #6fcf97; }
[data-theme="dark"] .result-error { color: #ff8f80; }

.muted { color: var(--text-muted, #62717f); font-size: .9rem; }
.denied { color: #d4351c; font-weight: 600; }
.error { color: #d4351c; }
.loading { color: var(--text-muted, #62717f); padding: 16px 0; }