/* ============================================================
   ADMIN CONSOLE  (admin/admin.js + admin/admin-reports.js)

   Admin-only page shell + the Reports section. Layout ported from
   Chris's reference (arcanium-admin-reports.html), restyled to the
   Arcanium design language (section-label / card-title conventions,
   white cards on the wash, house blues).

   Everything is adminx- prefixed. All buttons explicitly reset the
   global `button` gradient/box-shadow/hover-translate from styles.css
   (the recurring ghost-halo gotcha).
   ============================================================ */

.adminx-page {
    max-width: 860px;
    margin: 0 auto;
}

/* every admin button opts out of the global button skin */
.adminx-page button {
    background: #FFFFFF;
    box-shadow: none;
    color: #4A4A4A;
    transition: border-color .14s, background .14s, color .14s;
}
.adminx-page button:hover {
    transform: none;
}

/* ---------- shell ---------- */
.adminx-head {
    margin-bottom: 6px;
}
.adminx-head h2 {
    margin: 0;
    font-size: 24px;
    letter-spacing: -0.01em;
}
.adminx-sub {
    font-size: 13px;
    color: #767676;
    margin-bottom: 18px;
}

.adminx-tabs {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.adminx-tab {
    font-size: 12.5px;
    line-height: 1;
    padding: 8px 14px;
    border-radius: 20px;
    cursor: pointer;
    border: 1px solid #E4E4E1;
}
.adminx-tab.adminx-on {
    background: #111111;
    border-color: #111111;
    color: #FFFFFF;
}

/* ---------- filters ---------- */
.adminx-filters {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 18px;
}
.adminx-pill {
    font-size: 12.5px;
    line-height: 1;
    padding: 7px 12px;
    border-radius: 20px;
    cursor: pointer;
    border: 1px solid #E4E4E1;
}
.adminx-pill:hover {
    border-color: #C9C9C4;
}
.adminx-pill.adminx-on {
    background: #111111;
    border-color: #111111;
    color: #FFFFFF;
}
.adminx-sep {
    width: 1px;
    height: 20px;
    background: #E4E4E1;
    margin: 0 4px;
}
.adminx-filters select {
    font: 400 12.5px/1 inherit;
    padding: 7px 10px;
    border-radius: 20px;
    border: 1px solid #E4E4E1;
    background: #FFFFFF;
    color: #4A4A4A;
    cursor: pointer;
}

.adminx-search {
    font: 400 12.5px/1 inherit;
    padding: 7px 12px;
    border-radius: 20px;
    border: 1px solid #E4E4E1;
    background: #FFFFFF;
    color: #111111;
    min-width: 300px;
    flex: 1 1 260px;
}
.adminx-search::placeholder { color: #9A9A94; }
.adminx-search:focus { outline: none; border-color: #111111; }

/* ---------- grouping by type ---------- */
.adminx-group { margin-bottom: 22px; }
.adminx-grouphead {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 2px 9px;
    cursor: pointer;
    border-bottom: 1px solid #E4E4E1;
    margin-bottom: 12px;
}
.adminx-grouphead h4 {
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #111111;
}
.adminx-groupchev { font-size: 11px; color: #9A9A94; width: 10px; }
.adminx-groupcount {
    font-size: 12px;
    color: #6A6A64;
}
.adminx-groupsel {
    margin-left: auto;
    font-size: 11.5px;
    padding: 4px 10px;
}
.adminx-group.adminx-collapsed .adminx-grouprows { display: none; }
.adminx-group.adminx-collapsed .adminx-grouphead { margin-bottom: 0; border-bottom-color: transparent; }

/* ---------- bulk selection ---------- */
.adminx-pick {
    display: flex;
    align-items: center;
    padding: 0 2px 0 0;
    cursor: pointer;
}
.adminx-pick input { width: 15px; height: 15px; cursor: pointer; accent-color: #111111; }
.adminx-row.adminx-picked {
    border-color: #111111;
    box-shadow: 0 0 0 1px #111111 inset;
}
.adminx-bulk {
    position: sticky;
    top: 8px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 14px;
    margin-bottom: 16px;
    border-radius: 12px;
    background: #111111;
    color: #FFFFFF;
    font-size: 12.5px;
}
.adminx-bulk .adminx-btn {
    background: #FFFFFF;
    border-color: #FFFFFF;
    color: #111111;
}
.adminx-bulk .adminx-btn:hover { background: #EDEDEA; border-color: #EDEDEA; }
.adminx-bulk .adminx-btn.adminx-fix { background: #1F7A46; border-color: #1F7A46; color: #FFFFFF; }

/* ---------- report rows ---------- */
.adminx-row {
    background: #FFFFFF;
    border: 1px solid #E4E4E1;
    border-radius: 12px;
    margin-bottom: 9px;
    overflow: hidden;
    transition: border-color .14s;
}
.adminx-row:hover {
    border-color: #CFCFCA;
}
.adminx-row.adminx-done {
    opacity: .5;
}

.adminx-main {
    display: flex;
    gap: 13px;
    padding: 14px 16px;
    cursor: pointer;
    align-items: flex-start;
}
.adminx-count {
    flex: 0 0 auto;
    min-width: 30px;
    height: 26px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    font-weight: 600;
    background: #F7F6F3;
    color: #767676;
    padding: 0 8px;
    margin-top: 1px;
}
.adminx-count.adminx-warm {
    background: #FBF3E4;
    color: #B8791A;
}
.adminx-count.adminx-hot {
    background: #FBEDEA;
    color: #D8442A;
}

.adminx-body {
    flex: 1;
    min-width: 0;
}
.adminx-toprow {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 3px;
}
.adminx-cat {
    font-size: 14px;
    font-weight: 600;
    color: #111111;
}
.adminx-id {
    font: 400 11.5px/1 ui-monospace, Menlo, monospace;
    background: #E9F3FE;
    color: #0B6BC9;
    padding: 3px 7px;
    border-radius: 5px;
}
.adminx-ago {
    font-size: 12px;
    color: #767676;
    margin-left: auto;
    white-space: nowrap;
}
.adminx-where {
    font-size: 12.5px;
    color: #767676;
}
.adminx-quote {
    font-size: 13.5px;
    color: #4A4A4A;
    margin-top: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.adminx-badge {
    font-size: 10.5px;
    padding: 2px 7px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: #E4F5EF;
    color: #1D9E75;
}
.adminx-badge.adminx-badge-dismissed {
    background: #F1F1EE;
    color: #767676;
}

/* ---------- drawer ---------- */
.adminx-drawer {
    display: none;
    border-top: 1px solid #E4E4E1;
    padding: 14px 16px 14px 59px;
    background: #FCFCFB;
}
.adminx-drawer.adminx-open {
    display: block;
}
.adminx-cmt {
    font-size: 13.5px;
    color: #4A4A4A;
    padding: 7px 0;
    border-bottom: 1px solid #EFEFEC;
}
.adminx-cmt:last-of-type {
    border: none;
}
.adminx-cmt span {
    color: #767676;
    font-size: 11.5px;
    margin-right: 7px;
}
/* highlighted-text captures, distinct from numbered comments */
.adminx-cmt.adminx-sel {
    font-style: italic;
    background: #F7F6F3;
    border-left: 3px solid #1284F5;
    border-radius: 6px;
    padding-left: 9px;
}
.adminx-cmt.adminx-sel span {
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 10px;
    color: #0B6BC9;
}
.adminx-meta {
    font-size: 11.5px;
    color: #767676;
    margin: 10px 0 12px;
    font-family: ui-monospace, Menlo, monospace;
}
.adminx-acts {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}
.adminx-btn {
    font: 400 12.5px/1 inherit;
    padding: 8px 13px;
    border-radius: 7px;
    cursor: pointer;
    border: 1px solid #E4E4E1;
}
.adminx-btn:hover {
    border-color: #C0C0BA;
}
.adminx-btn.adminx-go {
    background: #0B6BC9;
    border-color: #0B6BC9;
    color: #FFFFFF;
}
.adminx-btn.adminx-fix {
    border-color: #1D9E75;
    color: #1D9E75;
}

/* ---------- states + toast ---------- */
.adminx-state {
    text-align: center;
    padding: 40px;
    color: #767676;
    font-size: 14px;
    background: #FFFFFF;
    border: 1px solid #E4E4E1;
    border-radius: 12px;
}
.adminx-state.adminx-error {
    color: #B4232A;
}

.adminx-toast {
    position: fixed;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%) translateY(70px);
    background: #111111;
    color: #FFFFFF;
    font-size: 13px;
    padding: 10px 16px;
    border-radius: 9px;
    transition: transform .28s cubic-bezier(.2, 1.2, .4, 1);
    z-index: 1360;
}
.adminx-toast.adminx-show {
    transform: translateX(-50%) translateY(0);
}

/* ---------- profile-modal admin entry (injected for admins only) ---------- */
.adminx-modal-entry {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #E4E4E1;
}
.adminx-modal-entry .section-label {
    margin-bottom: 8px;
}
.adminx-modal-entry-button {
    width: 100%;
    padding: 12px 18px;
    border-radius: 12px;
    border: 1px solid #111111;
    background: #111111;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: none;
}
.adminx-modal-entry-button:hover {
    transform: none;
    background: #2A2A2A;
}

/* ---- Reports: resolved-row note ---- */
.adminx-resolved-note {
    align-self: center;
    font-size: 12.5px;
    font-weight: 700;
    color: #16805a;
    padding: 0 6px;
}

/* ---- Users section ---- */
.adminx-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}
.adminx-stat {
    background: #fff;
    border: 1px solid #E4E4E1;
    border-radius: 12px;
    padding: 14px 16px;
}
.adminx-stat-v { font-size: 26px; font-weight: 800; color: #16233c; line-height: 1.05; font-variant-numeric: tabular-nums; }
.adminx-stat-l { font-size: 12.5px; font-weight: 700; color: #4A4A4A; margin-top: 4px; }
.adminx-stat-s { font-size: 11.5px; color: #8a8a86; margin-top: 2px; }

.adminx-growth {
    background: #fff;
    border: 1px solid #E4E4E1;
    border-radius: 12px;
    padding: 14px 16px 10px;
    margin-bottom: 16px;
}
.adminx-growth-title { font-size: 12.5px; font-weight: 800; color: #4A4A4A; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 10px; }
.adminx-growth-bars { display: flex; gap: 10px; align-items: flex-end; height: 96px; }
.adminx-growth-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.adminx-growth-bar-wrap { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.adminx-growth-bar { width: 100%; min-height: 3px; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, #4f8df9, #2563eb); }
.adminx-growth-n { font-size: 12px; font-weight: 800; color: #16233c; margin-top: 4px; }
.adminx-growth-label { font-size: 11px; color: #8a8a86; }

.adminx-user-controls { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.adminx-user-search { flex: 1; min-width: 180px; padding: 9px 12px; border: 1px solid #E4E4E1; border-radius: 10px; font-size: 13.5px; }
.adminx-user-sort { padding: 9px 12px; border: 1px solid #E4E4E1; border-radius: 10px; font-size: 13px; background: #fff; }

.adminx-user-head,
.adminx-user-row {
    display: grid;
    grid-template-columns: minmax(200px, 2fr) 1.3fr 1fr .8fr;
    gap: 12px;
    align-items: center;
}
.adminx-user-head { padding: 6px 16px; font-size: 11.5px; font-weight: 800; color: #8a8a86; letter-spacing: .04em; text-transform: uppercase; }
.adminx-user-row {
    background: #fff;
    border: 1px solid #E4E4E1;
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 8px;
}
.adminx-user-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.adminx-user-email { font-size: 13.5px; font-weight: 700; color: #16233c; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adminx-user-name { font-size: 12px; color: #6b6b67; }
.adminx-user-cell strong { display: block; font-size: 13.5px; color: #16233c; }
.adminx-user-cell span { display: block; font-size: 11.5px; color: #8a8a86; }
.adminx-user-num { text-align: right; }

.adminx-act-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; margin-right: 4px; }
.adminx-act-today { background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.18); }
.adminx-act-week  { background: #2563eb; }
.adminx-act-month { background: #f59e0b; }
.adminx-act-stale { background: #cbd5e1; }
.adminx-act-never { background: transparent; border: 1.5px solid #cbd5e1; }
.adminx-user-legend { margin-top: 10px; font-size: 11.5px; color: #8a8a86; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

@media (max-width: 720px) {
    .adminx-user-head { display: none; }
    .adminx-user-row { grid-template-columns: 1fr 1fr; }
    .adminx-user-id { grid-column: 1 / -1; }
}

.adminx-structured {
    display: inline-block;
    margin-top: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #EAF3FF;
    color: #1d4fd7;
    font-size: 12.5px;
    font-weight: 700;
}

/* ============================================================
   Reports · table layout

   A real sheet, not a stack of cards. .adminx-row carries card
   chrome (white panel, border, radius, margin) which is right for
   the card layout and wrong here — every one of those is reset on
   .adminx-trow so rows read as rows. The whole table sits in ONE
   bordered container instead of 136 floating boxes.

   Rows keep the .adminx-row / data-fp contract, so every existing
   action handler works unchanged.
   ============================================================ */
.adminx-table {
    background: #FFFFFF;
    border: 1px solid #E4E4E1;
    border-radius: 12px;
    overflow-x: auto;
    overflow-y: hidden;
}

/* Undo the card chrome inherited from .adminx-row. */
.adminx-trow {
    display: block;
    background: none;
    border: 0;
    border-top: 1px solid #F1F1EE;
    border-radius: 0;
    margin: 0;
    overflow: visible;
}
.adminx-trow:hover { border-color: #F1F1EE; }
.adminx-trow.adminx-picked { background: #F5F8FF; }
.adminx-trow.adminx-texpanded { background: #FAFAF8; }
.adminx-trow.adminx-done { opacity: 1; }
.adminx-trow.adminx-done .adminx-tcells { opacity: .45; }

.adminx-thead,
.adminx-tline { display: flex; align-items: stretch; min-width: 1180px; }

.adminx-thead {
    background: #FAFAF8;
    border-bottom: 1px solid #E4E4E1;
    position: sticky;
    top: 0;
    z-index: 1;
}

.adminx-tpick {
    flex: 0 0 34px;
    display: flex; align-items: center; justify-content: center;
}

.adminx-tcells {
    flex: 1 1 auto;
    display: grid;
    gap: 14px;
    align-items: center;
    grid-template-columns: var(--adminx-tcols);
    background: none; border: 0; border-radius: 0;
    font: inherit; text-align: left; color: inherit;
    padding: 10px 14px 10px 0;
    cursor: pointer;
}
.adminx-trow .adminx-tcells:hover { background: #FAFAF8; }

/* Header cells are plain labels — no button chrome. */
.adminx-th {
    background: none; border: 0; border-radius: 0; box-shadow: none;
    font: inherit; font-size: .68rem; font-weight: 600;
    color: #8A8A82; text-transform: uppercase; letter-spacing: .05em;
    text-align: left; padding: 11px 0; cursor: pointer;
    display: flex; align-items: center; gap: 4px;
    white-space: nowrap;
}
.adminx-th:hover { color: #1A1A17; background: none; }
.adminx-th-on { color: #1A1A17; }
.adminx-th i { font-style: normal; font-size: .55rem; opacity: .7; }

.adminx-tc {
    font-size: .82rem; color: #3A3A34; line-height: 1.4;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.adminx-tc-ref {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .7rem; color: #8A8A82; letter-spacing: .02em;
}
.adminx-tc-id {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .7rem; color: #2F5FD0;
}
.adminx-tc-num { text-align: right; font-variant-numeric: tabular-nums; color: #8A8A82; }
.adminx-tc-date { white-space: nowrap; }
.adminx-tc-date em { display: block; font-style: normal; font-size: .68rem; color: #A8A8A0; }
.adminx-tmuted { color: #C4C4BC; font-style: italic; }

/* Category and status read as quiet labels, not badges competing with the data. */
.adminx-tcat {
    display: inline-block; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: .78rem; font-weight: 500; color: #3A3A34;
}
.adminx-tstatus {
    display: inline-block; font-size: .72rem; font-weight: 500;
    text-transform: capitalize; color: #8A8A82;
}
.adminx-ts-new { color: #B4451F; font-weight: 600; }
.adminx-ts-triaged { color: #9A6B10; }
.adminx-ts-fixed { color: #2F6B4F; }
.adminx-ts-wontfix,
.adminx-ts-duplicate { color: #A8A8A0; }

/* ---- expanded row: the whole question ---- */
.adminx-tdrawer {
    padding: 4px 20px 20px 48px;
    border-top: 1px solid #F1F1EE;
    background: #FDFDFC;
}
.adminx-tdrawer h5 {
    margin: 16px 0 5px; font-size: .68rem; text-transform: uppercase;
    letter-spacing: .06em; color: #8A8A82; font-weight: 600;
}
.adminx-tmeta { margin: 12px 0 0; font-size: .74rem; color: #A8A8A0; }

/* The structured answer is the whole report for wrong_module / wrong_subject
   / typo, so it leads rather than sitting below the question. */
.adminx-tanswer {
    margin-top: 12px; padding: 10px 14px;
    background: #F5F8FF; border-left: 3px solid #2F5FD0; border-radius: 0 8px 8px 0;
    font-size: .84rem; color: #1A1A17;
}
.adminx-tanswer strong { color: #2F5FD0; }

.adminx-tstem { margin: 0; font-size: .86rem; color: #1A1A17; line-height: 1.6; max-width: 80ch; }
.adminx-texpl { margin: 0; font-size: .81rem; color: #55554D; line-height: 1.6; max-width: 80ch; }
.adminx-topts { margin: 10px 0 0; padding-left: 20px; }
.adminx-topts li { font-size: .81rem; color: #55554D; margin-bottom: 3px; }
.adminx-topt-correct { color: #2F6B4F; font-weight: 600; }
.adminx-tcomments { margin: 0; padding-left: 18px; }
.adminx-tcomments li { font-size: .83rem; color: #1A1A17; margin-bottom: 4px; line-height: 1.5; }
.adminx-tactions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }


/* ---- Open-a-question-by-ID (inspection) ---- */
.adminx-id-open {
    background: none; border: 0; padding: 0; cursor: pointer;
    font: inherit; color: #2563eb; text-decoration: underline dotted; text-underline-offset: 2px;
}
.adminx-id-open:hover { text-decoration-style: solid; }
.adminx-inspect-backdrop {
    position: fixed; inset: 0; z-index: 5000; background: rgba(15, 23, 42, 0.45);
    display: flex; align-items: flex-start; justify-content: center; padding-top: 18vh;
}
.adminx-inspect {
    background: #fff; border-radius: 14px; box-shadow: 0 24px 60px rgba(15, 23, 42, 0.3);
    padding: 20px 22px; width: 400px; max-width: calc(100vw - 40px);
}
.adminx-inspect h4 { margin: 0 0 6px; font-size: 16px; }
.adminx-inspect p { margin: 0 0 12px; font-size: 12.5px; color: #64748b; line-height: 1.45; }
.adminx-inspect-input {
    width: 100%; box-sizing: border-box; padding: 9px 11px; font: 500 14px/1.2 ui-monospace, Menlo, monospace;
    border: 1px solid #cbd5e1; border-radius: 8px; outline: none;
}
.adminx-inspect-input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); }
.adminx-inspect-error { margin-top: 8px; font-size: 12.5px; color: #b91c1c; }
.adminx-inspect-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }