/* Admin dashboard. Layout only — every colour comes from themes.css, so this
 * follows the site's colour schemes and day/night mode like everything else. */

/* Wider than the site's reading pages on purpose. This is a dashboard, not
   prose: six per-row actions plus the account columns need about 950px before
   something has to be clipped, and at the site's usual 900 the Delete button
   fell off the right-hand edge.

   The cap that actually binds is .site-wrapper, which is site-wide, so the
   modifier goes on this page's wrapper rather than on the shared rule. Every
   other page keeps its 900px measure. */
.site-wrapper.site-wrapper-wide {
    max-width: 1200px;
}

.admin-content {
    max-width: 1200px;
}

.admin-controls {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 12px;
}

.admin-search {
    flex: 1 1 220px;
    min-width: 0;
    padding: 6px 8px;
    border: var(--border-light, #ccc) solid 1px;
    border-radius: 5px;
    font-size: 0.95em;
    background-color: var(--bg-input, #ffffff);
    color: var(--text-primary, #000);
}

.admin-select {
    padding: 6px 8px;
    border: var(--border-light, #ccc) solid 1px;
    border-radius: 5px;
    font-size: 0.95em;
    background-color: var(--bg-input, #ffffff);
    color: var(--text-primary, #000);
}

/* Sortable headers. The arrow is appended in JS so the label stays plain text
   for anyone reading the markup. */
.admin-sort {
    cursor: pointer;
    user-select: none;
}

.admin-sort:hover {
    text-decoration: underline;
}

.admin-sort.admin-sorted {
    background-color: var(--bg-secondary, #ffffff);
}

/* The table scrolls inside its own box rather than pushing the page sideways
   on a phone. */
.admin-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
    color: var(--text-primary, #000);
}

.admin-table th,
.admin-table td {
    padding: 8px 10px;
    text-align: left;
    /* Every cell holds exactly one line, so centring lines them all up —
       including the action buttons, which are taller than a line of text.
       Top-aligning instead left the buttons hanging below everything else, and
       nothing in a cell is allowed to wrap or add a second line any more. */
    vertical-align: middle;
    border-bottom: 1px solid var(--border-light, #ccc);
    white-space: nowrap;
}

/* Short values sit better centred than ranged left against a wide column. */
.admin-table th.admin-mid,
.admin-table td.admin-mid {
    text-align: center;
}

.admin-table th {
    color: var(--theme-primary, #cc0000);
    font-weight: 700;
    border-bottom: 2px solid var(--theme-primary, #cc0000);
}

/* Addresses are never wrapped. The wrapper scrolls horizontally, so a long
   address costs a little width rather than a second line — and a second line
   is what threw the row out of alignment in the first place. Every row is now
   one line tall, apart from a pending-change note, which hangs below. */
.admin-table td.admin-email {
    white-space: nowrap;
}

.admin-table td.admin-email .admin-you-tag {
    color: var(--text-secondary, #666);
    font-weight: 400;
}

/* Sits on the same line as the address it replaces, so the row stays one line
   tall. The full meaning is in the title attribute. */
.admin-table td.admin-email .admin-pending {
    color: var(--text-secondary, #666);
    font-style: italic;
}

.admin-table tr.admin-you td {
    background-color: var(--bg-secondary, #ffffff);
    font-weight: 700;
}

.admin-count {
    font-size: 0.7em;
    color: var(--text-secondary, #666);
    font-weight: 400;
}

.admin-yes { color: #2e7d32; font-weight: 700; }
.admin-no  { color: var(--text-secondary, #666); }

/* State badges next to the address. Inline for the same reason .admin-pending
   is: the row stays one line tall and the table keeps its alignment. The two
   are deliberately different weights. Suspended is a decision somebody made
   and should catch the eye; locked is the rate limiter doing its ordinary job
   and clears itself, so it stays quiet. */
.admin-table td .admin-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 0.72em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: middle;
    white-space: nowrap;
}

.admin-table td .admin-suspended {
    color: #ffffff;
    background-color: var(--theme-primary, #cc0000);
}

.admin-table td .admin-locked {
    color: #8a6d00;
    background-color: #f7e9b0;
    font-weight: 400;
}

.admin-btn {
    padding: 4px 10px;
    font-size: 0.85em;
    font-weight: 700;
    border-radius: 6px;
    border: 2px solid var(--border-light, #ccc);
    background-color: var(--bg-button, #efefde);
    color: var(--text-primary, #000);
    cursor: pointer;
    margin-right: 4px;
}

.admin-btn:hover:not(:disabled) {
    background-color: var(--bg-secondary, #ffffff);
}

.admin-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.admin-btn.admin-danger {
    border-color: var(--theme-primary, #cc0000);
    color: var(--theme-primary, #cc0000);
}

/* Six actions do not fit one line, and an auto-layout table answers that by
   growing until the last buttons sit outside the panel. A fixed-width flex
   group wraps them instead, so every action stays reachable without a
   sideways scroll.

   The slack has to go somewhere, though, and left to itself the browser
   spreads it across every column, which pushes the actions back out again.
   Giving the email column width: 100% makes it absorb the lot, so every other
   column shrinks to its content and the action group keeps its width. */
.admin-table td.admin-email,
.admin-table th[data-sort="email"] {
    width: 100%;
}

.admin-table td.admin-actions {
    white-space: normal;
}

.admin-action-group {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* Only the user rows carry six buttons and need the fixed width. The blocks
   table has one, and would otherwise reserve a 268px column for it. */
#admin-rows .admin-action-group {
    width: 268px;
}

/* The group's gap handles spacing now; the button's own right margin would
   add to it and break the alignment of the wrapped lines. */
.admin-action-group .admin-btn {
    margin-right: 0;
}

/* The blocks panel sits under the user table in the same card, so it needs a
   heading that separates the two without looking like a second page. */
.admin-subhead {
    margin: 28px 0 4px;
    font-size: 1.05em;
    color: var(--theme-primary, #cc0000);
}

.admin-subhead .admin-btn {
    margin-left: 10px;
    vertical-align: middle;
}