/* admin.css — consolidated styles for the YouDraw admin subdomain.
 *
 * Replaces the per-view inline <style> blocks that previously lived in each
 * admin view. Served directly by the admin subdomain (its .htaccess serves
 * real files before routing to index.php), so views link it as /admin.css.
 *
 * Font matches the main site (Barlow); see main.css.
 */

/* ============================================================
   Font: Barlow (Google Fonts) — matches the main site.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;600&display=swap');

/* ============================================================
   Base — shared by every admin screen.
   ============================================================ */
body {
    font-family: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
        Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
    background: #f5f5f5;
    color: #333;
}

/* Per-page content widths. Views set one of these on <body>; the default
   (no modifier) is the 1000px width used by the list screens. */
body.admin-page--narrow { max-width: 600px; padding: 40px 20px; }
body.admin-page--medium { max-width: 900px; }
body.admin-page--wide   { max-width: 1100px; }

h1 { margin-bottom: 0.5em; }

/* Book-tools pages open with a plain "← Back" link and use anchor colouring. */
.admin-page--wide a { color: #007bff; }

/* ============================================================
   Shared components
   ============================================================ */
.back-link {
    display: inline-block;
    margin-bottom: 12px;
    color: #007bff;
    text-decoration: none;
}
.back-link:hover { text-decoration: underline; }

.alert {
    padding: 10px 15px;
    border-radius: 4px;
    margin-bottom: 15px;
}
.alert-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.alert-error   { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }

.card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 16px;
}

/* Primary button — the shared blue pill used across admin forms.
   Covers both <button> and .btn (anchors styled as buttons). */
button,
.btn {
    padding: 8px 16px;
    background: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    font-family: inherit;
}
.btn {
    display: inline-block;
    text-decoration: none;
}
button:hover,
.btn:hover { background: #0056b3; }

.results-info {
    margin-bottom: 15px;
    color: #666;
    font-size: 0.9em;
}

.no-results {
    color: #666;
    font-style: italic;
    padding: 20px;
    text-align: center;
}

/* Contextual action buttons reused across screens. */
.btn-delete {
    padding: 4px 10px;
    background: #dc3545;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.85em;
}
.btn-delete:hover { background: #a71d2a; }

.btn-clear {
    padding: 4px 10px;
    background: #007bff;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.85em;
}
.btn-clear:hover { background: #0056b3; }

/* ============================================================
   Home / dashboard
   ============================================================ */
/* The dashboard gives its title extra breathing room. */
.admin-page--home h1 { margin-bottom: 1em; }

/* Dashboard subsections: each grouped in its own white card. */
.admin-section {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 16px 20px;
    margin-bottom: 16px;
}
.admin-section h2 {
    margin: 0 0 12px;
    font-size: 1.1em;
}
/* Inside a subsection, nav links and the search form sit flush. */
.admin-section .nav-links { margin-bottom: 0; }
.admin-section .nav-links + .search-form { margin-top: 14px; }
.admin-section .search-form { margin-bottom: 0; }

.nav-links {
    list-style: none;
    padding: 0;
    margin-bottom: 2em;
}
.nav-links li { margin-bottom: 8px; }
.nav-links a {
    color: #007bff;
    text-decoration: none;
    font-size: 1.05em;
}
.nav-links a:hover { text-decoration: underline; }

.search-section {
    background: #fff;
    padding: 20px;
    border-radius: 6px;
    border: 1px solid #ddd;
}
.search-section h2 {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 1.1em;
}

/* Shared search form (dashboard number field + galleries text field). */
.search-form {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}
.search-form input[type="number"],
.search-form input[type="text"] {
    flex: 1;
    padding: 8px 12px;
    font-size: 1em;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* ============================================================
   Settings forms (registration mode, selector settings)
   ============================================================ */
fieldset {
    margin-bottom: 16px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
}
legend { padding: 0 6px; font-weight: 600; }

.field { margin-bottom: 12px; }
.field label { display: block; margin-bottom: 4px; }
.field input[type="number"] {
    padding: 6px 10px;
    font-size: 1em;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 8em;
}
.hint { color: #666; font-size: 0.9em; }

/* Registration-mode radios stack with breathing room. */
.current-mode { margin-bottom: 16px; }
.registration-modes label { display: block; margin-bottom: 10px; }
.registration-modes label:last-child { margin-bottom: 0; }
.registration-modes input[type="radio"] { margin-right: 6px; }

/* ============================================================
   Login
   ============================================================ */
.login-form .field label { display: block; margin-bottom: 4px; }
.login-form input[type="email"],
.login-form input[type="password"] {
    padding: 6px 10px;
    font-size: 1em;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
}
.login-form .checkbox-field label { display: inline; }
.login-form .checkbox-field input { margin-right: 6px; }

/* ============================================================
   User admin page (name + avatar, invite-quota controls)
   ============================================================ */
.user-card {
    display: flex;
    align-items: center;
    gap: 14px;
}
/* Avatars: square corners, smooth (non-pixelated) rendering — always. */
.user-card__avatar {
    width: 24px;
    height: 48px;
    object-fit: cover;
    border-radius: 0;
    image-rendering: auto;
    flex: 0 0 auto;
}
.user-card__name {
    font-size: 1.15em;
    font-weight: 600;
}
.user-quota,
.user-role {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 15px 18px;
    margin-bottom: 16px;
}
.user-quota dt,
.user-role dt { font-weight: 600; color: #555; }
.user-quota dd,
.user-role dd { margin: 0 0 10px; }
.user-quota dd:last-child,
.user-role dd:last-child { margin-bottom: 0; }
.user-role-form .field select {
    padding: 6px 10px;
    font-size: 1em;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.user-quota-form .field input[type="number"] { width: 8em; }
.user-quota-reset { margin-top: 12px; }
.btn-reset {
    padding: 8px 16px;
    background: #6c757d;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
}
.btn-reset:hover { background: #565e64; }

/* ============================================================
   Gallery moderation (table + row forms + pagination)
   ============================================================ */
.gallery-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.gallery-table th,
.gallery-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid #eee;
}
.gallery-table th {
    background: #f8f9fa;
    font-weight: 600;
    font-size: 0.9em;
    color: #555;
}
.gallery-table tr:last-child td { border-bottom: none; }

.rename-form {
    display: flex;
    gap: 6px;
    align-items: center;
}
.rename-form input[type="text"] {
    padding: 5px 8px;
    font-size: 0.9em;
    border: 1px solid #ccc;
    border-radius: 3px;
    width: 200px;
}
.btn-rename {
    padding: 4px 10px;
    background: #28a745;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.85em;
}
.btn-rename:hover { background: #218838; }

.reassign-form {
    display: flex;
    gap: 6px;
    align-items: center;
}
.reassign-form input[type="text"] {
    padding: 5px 8px;
    font-size: 0.9em;
    border: 1px solid #ccc;
    border-radius: 3px;
    width: 130px;
}
.btn-reassign {
    padding: 4px 10px;
    background: #6f42c1;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.85em;
}
.btn-reassign:hover { background: #59349c; }
.reassign-note {
    color: #999;
    font-size: 0.85em;
    font-style: italic;
}

.pagination {
    margin-top: 20px;
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
}
.pagination a,
.pagination span {
    padding: 6px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #007bff;
    font-size: 0.9em;
}
.pagination span.current {
    background: #007bff;
    color: #fff;
    border-color: #007bff;
}
.pagination a:hover { background: #e9ecef; }

/* ============================================================
   Reported draws (cards + badges)
   ============================================================ */
.queue-toggle {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 0.92em;
}
.queue-toggle label { cursor: pointer; }
.queue-toggle .hint { color: #888; font-size: 0.9em; margin-left: 4px; }

.report-card {
    display: flex;
    gap: 20px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 16px;
    margin-bottom: 16px;
}
/* Draws render at their native, unscaled size (125x250). */
.report-card__thumb {
    width: 125px;
    height: 250px;
    flex: 0 0 125px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fafafa;
    object-fit: none;
}
.report-card__body { flex: 1; min-width: 0; }
.report-card__meta {
    margin: 0 0 12px;
    font-size: 0.9em;
    color: #555;
}
.report-card__meta strong { color: #333; }
.report-card__meta a { color: #007bff; text-decoration: none; }
.report-card__meta a:hover { text-decoration: underline; }

.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.8em;
    font-weight: 600;
}
.badge-count { background: #ffe0e0; color: #a71d2a; }
.badge-usable { background: #d4edda; color: #155724; }
.badge-hidden { background: #f1f1f1; color: #666; }
.badge-approved { background: #fff3cd; color: #856404; }

.reasons {
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
    border-top: 1px solid #eee;
}
.reasons li {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    font-size: 0.92em;
}
.reasons .reason-text { color: #333; white-space: pre-wrap; word-break: break-word; }
.reasons .reason-meta { color: #999; font-size: 0.85em; margin-top: 2px; }

.review-actions {
    display: flex;
    gap: 10px;
}
.review-actions button {
    padding: 7px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    color: #fff;
}
.btn-acceptable { background: #28a745; }
.btn-acceptable:hover { background: #218838; }
.btn-rude { background: #dc3545; }
.btn-rude:hover { background: #a71d2a; }

/* Reports uses cards for its empty state. */
.report-list .no-results,
.no-results.no-results--card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* ============================================================
   Draw moderation
   ============================================================ */
.draw-image {
    max-width: 100%;
    border: 2px solid #ccc;
    border-radius: 4px;
    background: #fff;
}
.draw-meta {
    background: #fff;
    padding: 15px;
    border-radius: 4px;
    border: 1px solid #ddd;
    margin: 15px 0;
}
.draw-meta dt { font-weight: bold; display: inline; }
.draw-meta dt::after { content: ": "; }
.draw-meta dd { display: inline; margin: 0 20px 0 0; }

.type-form {
    background: #fff;
    padding: 15px;
    border-radius: 4px;
    border: 1px solid #ddd;
    margin: 15px 0;
}
.type-form select {
    padding: 5px 10px;
    font-size: 1em;
    margin-right: 10px;
}
.type-form button {
    padding: 6px 14px;
}

.assign-form {
    background: #fff;
    padding: 15px;
    border-radius: 4px;
    border: 1px solid #ddd;
    margin: 15px 0;
}
.assign-form form {
    display: flex;
    gap: 8px;
    align-items: center;
}
.assign-form label { font-weight: bold; }
.assign-form input[type="text"] {
    padding: 5px 10px;
    font-size: 1em;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 200px;
}
.assign-form button {
    padding: 6px 14px;
    background: #6f42c1;
}
.assign-form button:hover { background: #59349c; }
.assign-form .hint {
    color: #999;
    font-size: 0.85em;
    margin-top: 8px;
}

.comments-list {
    list-style: none;
    padding: 0;
}
.comment-item {
    background: #fff;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 10px;
    position: relative;
}
.comment-item.offensive {
    border-color: #dc3545;
    background: #fff5f5;
}
.comment-item.offensive::before {
    content: "⚠ Flagged";
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 0.8em;
    font-weight: bold;
    color: #dc3545;
    background: #f8d7da;
    padding: 2px 8px;
    border-radius: 3px;
}
.comment-meta {
    font-size: 0.85em;
    color: #666;
    margin-bottom: 6px;
}
.comment-text { margin: 8px 0; }
.comment-actions form { display: inline; }

.legacy-user-form {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    margin-right: 12px;
}
.legacy-user-form label {
    font-size: 0.85em;
    color: #555;
}
.legacy-user-form input[type="text"] {
    padding: 3px 8px;
    font-size: 0.85em;
    border: 1px solid #ccc;
    border-radius: 3px;
    width: 160px;
}
.comment-text-form {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    margin-right: 12px;
    margin-bottom: 6px;
}
.comment-text-form label {
    font-size: 0.85em;
    color: #555;
}
.comment-text-form input[type="text"] {
    padding: 3px 8px;
    font-size: 0.85em;
    border: 1px solid #ccc;
    border-radius: 3px;
    width: 350px;
}
.btn-legacy {
    padding: 4px 10px;
    background: #007bff;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.85em;
}
.btn-legacy:hover { background: #0056b3; }
.no-comments {
    color: #666;
    font-style: italic;
}

/* moderate_draw uses "h1, h2 { margin-top }" spacing. */
.admin-page--medium h1,
.admin-page--medium h2 { margin-top: 1.5em; }

/* ============================================================
   Book-layout tools (find-draw, layout, selector) — shared shell.
   ============================================================ */
.nav { margin: 16px 0; }
.nav a { margin-right: 12px; }

/* Draws in a set render at their intrinsic size — never scaled. */
.draw-thumb {
    width: 125px;
    height: 250px;
    display: block;
    background: #fff;
    border: 1px solid #ddd;
}
table { border-collapse: collapse; border-spacing: 0; background: #fff; }

/* ---- Layout spread ---- */
.spread { border-collapse: collapse; }
.spread td { text-align: center; padding: 20px; vertical-align: top; }
/* The page grid renders a scaled miniature of the printed page: draws touch
   (no cell borders/padding/margins). Regular draws are 20x40; the highlighted
   "picks" are drawn larger (82x164) in place. This is a layout preview, not a
   public set of draws, so it deliberately uses the legacy miniature sizes. */
.page-grid { border-collapse: collapse; border-spacing: 0; margin: 0 auto; }
.page-grid td { border: 0; margin: 0; padding: 0; }
.page-grid img {
    display: block;
    width: 20px;
    height: 40px;
    border: 0;
    margin: 0;
    padding: 0;
}
.page-grid img.pick {
    width: 82px;
    height: 164px;
    padding: 0 0 0 1px;
}
.page-label { text-align: center; margin-top: 8px; }

/* ---- Page-list tables (layout + selector landing) ----
   Black borders on every cell; draw thumbnails 50x100 with no border (a
   scan-friendly index, not a public set of draws, so it uses the legacy
   50x100 thumbnails). */
.page-list { border-collapse: collapse; border-spacing: 0; }
.page-list th,
.page-list td { text-align: center; border: 1px solid #000; padding: 2px 10px; }
.page-list img { width: 50px; height: 100px; border: 0; display: inline-block; }

/* ---- Interactive selector page ---- */
.page-pic-wrapper { display: flex; gap: 40px; align-items: flex-start; margin: 16px 0; }
.selection-slots { display: flex; gap: 12px; }
.slot {
    padding: 10px;
    background: #eee;
    text-align: center;
    float: none;
}
.slot.next { background: #FFC000; }
/* Chosen selections render at intrinsic draw size. */
.slot img { width: 125px; height: 250px; display: block; }
.slot .label { text-align: center; margin-top: 8px; }

/* Layout grid: shows where the two picks sit on the printed page. */
table.layout { border-collapse: collapse; border-spacing: 0; }
table.layout td {
    border: .5pt solid windowtext;
    height: 9pt;
    width: 4pt;
    background-color: #eeeeee;
    margin: 0; padding: 0;
    font-size: 6pt;
}
table.layout td.pic_1,
table.layout td.pic_2 { background-color: #aaaaaa; }

.candidates { margin: 16px 0; }
.image-wrapper {
    float: left;
    padding-bottom: 12px;
    font-size: 12px;
    text-align: center;
}
.image { padding: 5px; }
/* Candidate thumbnails are small so the whole page fits on screen. */
.image img { width: 50px; height: 100px; cursor: pointer; }
.image.selectable   { background-color: #eeeeee; }
.image.artist_used  { background-color: #FFC000; }
.image.selected     { background-color: #92D050; }
.image.artist_limit { background-color: red; }
.image.highlight    { background-color: blue !important; }
.end-float { float: none; clear: both; }
body.waiting, body.waiting * { cursor: wait !important; }

/* Author hover-preview panel: fixed top-right, shows the hovered draw's author
   and all that author's selected draws in the book. */
.author-images {
    background-color: #eeeeee;
    position: fixed;
    top: 0;
    right: 0;
    border: 4px solid black;
    text-align: center;
    font-size: 14px;
    max-height: 100vh;
    overflow-y: auto;
    z-index: 100;
}
.author-images .author { padding: 5px; }
.author-images .author-image { padding: 10px; float: left; text-align: center; }
.author-images .author-image div { padding-top: 5px; }
.author-images .author-image img { width: 50px; height: 100px; }