/* ============================================================
   admin.css — Admin dashboard layout (June 2026 redesign)

   The dashboard is organised into three bands, top to bottom:
     1. Library health   — ambient metrics you glance at (a thin ribbon)
     2. Needs attention   — actionable queues, as big cards
     3. Insights          — most-loved art + recent signups

   All colours come from the active theme's variable contract
   (see themes/drafting-table.css), so this page re-tints with the
   time-of-day palette automatically and never hard-codes a colour.
   Everything is scoped under .admin-dashboard so it can't leak.
   ============================================================ */

.admin-dashboard {
    max-width: 1100px;
    margin: 0 auto;
}

.admin-dashboard h1 {
    margin: 0 0 .25rem;
}

.admin-dashboard .admin-date {
    color: var(--ink-soft);
    font-size: .9rem;
    margin: 0 0 1.75rem;
}

/* Small uppercase band labels that separate the three zones. */
.admin-dashboard .band-label {
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .72rem;
    color: var(--ink-soft);
    margin: 0 0 .6rem;
}

/* ---------- Band 1: library health ribbon ------------------ */
/* A horizontal strip of compact, low-contrast metric chips. Quiet
   on purpose — these are for reassurance, not decisions. */
.admin-ribbon {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    margin: 0 0 1.75rem;
}

.admin-ribbon .metric {
    background: var(--paper2);
    border: 1px solid var(--card-line);
    border-radius: 8px;
    padding: .6rem .8rem;
}

.admin-ribbon .metric .num {
    display: block;
    font-size: 1.4rem;
    line-height: 1.1;
}

.admin-ribbon .metric .lbl {
    display: block;
    font-size: .8rem;
    color: var(--ink-soft);
    margin-top: .15rem;
}

/* ---------- Band 2a: automated status (no action) ---------- */
/* The processing queue: big, because it's worth seeing, but tinted
   like the ribbon (not accented) so it reads as "the robot's got it". */
.admin-auto-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--paper2);
    border: 1px solid var(--card-line);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    margin: 0 0 1.75rem;
}

.admin-auto-card .num {
    font-size: 1.9rem;
    color: var(--ink-soft);
}

.admin-auto-card .title { font-weight: bold; }
.admin-auto-card .sub { font-size: .85rem; color: var(--ink-soft); }

/* ---------- Band 2b: needs-your-attention cards ------------ */
/* These are calls to action. Whole card is a link; the count is the
   only accent-coloured thing on the page, so the eye lands on work. */
.admin-attention {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
    margin: 0 0 1.25rem;
}

.admin-attention .action-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--paper);
    border: 1px solid var(--card-line);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    text-decoration: none;
    color: var(--ink);
    transition: border-color .15s, transform .15s;
}

.admin-attention .action-card:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
}

.admin-attention .action-card .num {
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--accent);
    min-width: 1.6em;
    text-align: center;
}

/* A zero queue shouldn't shout — fade the count when there's nothing to do. */
.admin-attention .action-card.is-empty .num { color: var(--ink-soft); }

.admin-attention .action-card .title { font-weight: bold; }
.admin-attention .action-card .sub { font-size: .85rem; color: var(--ink-soft); }

/* ---------- Tools: deliberate, not urgent ------------------ */
/* Sections you go to on purpose. Plain pills, no counts. */
.admin-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 1.75rem;
}

.admin-tools .tool {
    text-decoration: none;
    color: var(--ink);
    background: transparent;
    border: 1px solid var(--card-line);
    border-radius: 8px;
    padding: .45rem .8rem;
    font-size: .9rem;
}

.admin-tools .tool:hover { border-color: var(--accent); }

/* ---------- Band 3: insights ------------------------------- */
.admin-insights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
}

.admin-insights ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.admin-insights li {
    padding: .3rem 0;
    border-bottom: 1px solid var(--card-line);
    font-size: .92rem;
}

.admin-insights li:last-child { border-bottom: none; }
.admin-insights a { color: var(--accent); text-decoration: none; }
.admin-insights a:hover { text-decoration: underline; }

/* ============================================================
   Member roster — /admin/users (read-only)
   Same variable contract as the dashboard, so it re-tints with
   the active theme. Scoped under .admin-users to avoid leaking.
   ============================================================ */
.admin-users {
    max-width: 1100px;
    margin: 0 auto;
}

.admin-users h1 { margin: 0 0 .25rem; }

.admin-users .admin-back {
    display: inline-block;
    margin: 0 0 1.25rem;
    color: var(--accent);
    text-decoration: none;
    font-size: .9rem;
}
.admin-users .admin-back:hover { text-decoration: underline; }

/* Summary tally — reuses the dashboard ribbon's quiet-chip look. */
.admin-users .roster-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    margin: 0 0 1.5rem;
}
.admin-users .roster-summary .metric {
    background: var(--paper2);
    border: 1px solid var(--card-line);
    border-radius: 8px;
    padding: .6rem .8rem;
}
.admin-users .roster-summary .num { display: block; font-size: 1.4rem; line-height: 1.1; }
.admin-users .roster-summary .lbl { display: block; font-size: .8rem; color: var(--ink-soft); margin-top: .15rem; }

/* The table itself. */
.roster-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .92rem;
}
.roster-table th,
.roster-table td {
    text-align: left;
    padding: .5rem .6rem;
    border-bottom: 1px solid var(--card-line);
    vertical-align: middle;
}
.roster-table thead th {
    color: var(--ink-soft);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}

/* Sortable headers: the whole cell is a click target. The caret only
   shows on the column currently sorted (set by the enhancement script). */
.roster-table th.sortable { cursor: pointer; user-select: none; }
.roster-table th.sortable:hover { color: var(--ink); }
.roster-table th.sortable .caret { opacity: .4; font-size: .7em; }
.roster-table th[aria-sort="ascending"]  .caret::after { content: " ▲"; }
.roster-table th[aria-sort="descending"] .caret::after { content: " ▼"; }
.roster-table th[aria-sort] .caret { opacity: 1; }

.roster-table tbody tr:hover { background: var(--paper2); }
.roster-name { font-weight: bold; }
.roster-name .no-name { font-weight: normal; color: var(--ink-soft); font-style: italic; }
.roster-table .tier-slug { color: var(--ink-soft); font-size: .82em; }
.roster-table .muted { color: var(--ink-soft); }

/* Pass badges — colour carries the meaning at a glance. */
.pass-badge {
    display: inline-block;
    padding: .12rem .5rem;
    border-radius: 999px;
    font-size: .8rem;
    border: 1px solid var(--card-line);
    white-space: nowrap;
}
.pass-badge.pass-permanent { border-color: var(--accent); color: var(--accent); }
.pass-badge.pass-dated     { color: var(--ink); }
.pass-badge.pass-expired   { color: var(--ink-soft); text-decoration: line-through; }
.pass-badge.pass-free      { border: none; color: var(--ink-soft); padding-left: 0; }

/* Per-row Manage button + the shared pass editor modal. */
.roster-table th.roster-actions-col { text-align: right; }
.roster-table td.roster-actions { text-align: right; white-space: nowrap; }

.roster-manage {
    background: transparent;
    border: 1px solid var(--card-line);
    color: var(--ink);
    border-radius: 6px;
    padding: .25rem .6rem;
    font-size: .82rem;
    cursor: pointer;
}
.roster-manage:hover { border-color: var(--accent); color: var(--accent); }

.roster-modal[hidden] { display: none; }
.roster-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 1000;
}
.roster-modal-card {
    position: relative;
    background: var(--paper);
    border: 1px solid var(--card-line);
    border-radius: 12px;
    padding: 1.4rem 1.5rem;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
}
.roster-modal-card h2 { margin: 0 0 .25rem; font-size: 1.15rem; }
.roster-modal-card .pm-hint { margin: 0 0 1rem; font-size: .82rem; color: var(--ink-soft); }

.roster-modal-close {
    position: absolute;
    top: .6rem;
    right: .7rem;
    background: none;
    border: none;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--ink-soft);
    cursor: pointer;
}
.roster-modal-close:hover { color: var(--ink); }

.pm-field { margin: 0 0 1rem; }
.pm-field > label,
.pm-field .pm-legend {
    display: block;
    font-size: .8rem;
    color: var(--ink-soft);
    margin: 0 0 .35rem;
}
.pm-field select,
.pm-detail input {
    width: 100%;
    padding: .4rem .5rem;
    border: 1px solid var(--card-line);
    border-radius: 6px;
    background: var(--paper2);
    color: var(--ink);
    box-sizing: border-box;
}
.pm-radio { display: block; font-size: .9rem; margin: .2rem 0; color: var(--ink); cursor: pointer; }
.pm-radio input { width: auto; margin-right: .4rem; }
.pm-detail { margin: .4rem 0 0; }
.pm-detail .grant-hint { display: block; font-size: .78rem; color: var(--ink-soft); margin-top: .2rem; }

.pm-actions { display: flex; gap: .6rem; margin-top: 1.2rem; }
.pm-btn {
    border-radius: 6px;
    padding: .45rem .9rem;
    font-size: .9rem;
    cursor: pointer;
    border: 1px solid var(--card-line);
    background: transparent;
    color: var(--ink);
}
.pm-btn-primary { background: var(--accent); border-color: var(--accent); color: var(--paper); font-weight: bold; }
.pm-btn-primary:hover { filter: brightness(1.05); }
.pm-revoke { margin-left: auto; color: var(--ink-soft); }
.pm-revoke:hover { border-color: var(--ink-soft); color: var(--ink); }

/* ── Content Requests (type-aware cards; design §5) ─────────────────────── */
.admin-content-requests .request-group {
    border: 1px solid var(--card-line);
    border-radius: 8px;
    padding: 1rem 1.2rem;
    margin: 1rem 0;
    background: var(--paper);
}
.cr-header { display: flex; gap: 1rem; align-items: flex-start; }
.cr-thumb { flex: 0 0 auto; }
.cr-thumb img {
    width: 84px; height: 84px; object-fit: cover;
    border-radius: 6px; border: 1px solid var(--card-line); display: block;
}
.cr-heading h3 { margin: 0 0 .2rem; }
.cr-heading small { color: var(--ink-soft); font-weight: normal; }
.cr-oldest { margin: 0; font-size: .82rem; color: var(--ink-soft); }

.req-block {
    margin: .9rem 0 0;
    padding: .8rem 0 0;
    border-top: 1px dashed var(--card-line);
}
.req-asked { margin: 0 0 .5rem; font-size: .92rem; color: var(--ink); }
.req-asked .cr-who { font-weight: 600; }
.req-asked .cr-note { color: var(--ink-soft); font-style: italic; }
.req-demand-hint { margin: .2rem 0 0; font-size: .8rem; color: var(--ink-soft); }

.tag-editor { margin: .3rem 0 .6rem; }
.tag-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .5rem; min-height: 1.4rem; }
.tag-chips .tag-loading, .tag-chips .tag-empty { color: var(--ink-soft); font-size: .85rem; }
.tag-chips .tag-remove {
    background: none; border: none; cursor: pointer;
    color: inherit; font-size: 1rem; line-height: 1; padding: 0 0 0 .25rem;
}
.tag-add { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.tag-add-text { flex: 1 1 12rem; padding: .35rem .5rem; border: 1px solid var(--card-line); border-radius: 5px; }
.tag-add-cat { padding: .35rem .4rem; border: 1px solid var(--card-line); border-radius: 5px; }
.admin-content-requests .commentary-input {
    width: 100%; box-sizing: border-box; margin-bottom: .5rem;
    padding: .5rem; border: 1px solid var(--card-line); border-radius: 5px;
}
.req-editing-note { margin: 0 0 .5rem; font-size: .82rem; color: var(--accent); }

/* per-requester chips + dismiss (Phase 3) */
.cr-people { display: inline-flex; flex-wrap: wrap; gap: .5rem; vertical-align: middle; }
.cr-req { display: inline-flex; align-items: center; gap: .3rem; }
.req-dismiss {
    background: none; border: 1px solid var(--card-line); border-radius: 4px;
    color: var(--ink-soft); cursor: pointer; font-size: .72rem;
    padding: .05rem .35rem; line-height: 1.3;
}
.req-dismiss:hover { border-color: var(--accent); color: var(--accent); }