/* Quizzes / Results / Classes admin UI (templates/activity-manager.php).
   Colors match activity-creator.css's own palette (#2c3e50 / #6c757d).

   Every rule below is scoped under .activity-manager (two classes, e.g.
   `.activity-manager .am-primary-btn`), not left as a lone single class
   like `.am-primary-btn` on its own - confirmed real bug: a lone class
   selector has specificity (0,1,0), and it's extremely common for a
   WordPress theme's own global button/link styling to be scoped as
   `.entry-content button` / `.site-content a` / similar (element type +
   one ancestor class = specificity (0,1,1)), which beats a bare (0,1,0)
   rule regardless of source order or which stylesheet loaded later. That
   silently let the active theme's own button colors (often white text,
   assuming a colored theme button background this plugin's own
   background rules don't provide) win outright, making buttons/labels
   read as "white or very light, can't see" against this page's plain
   white background. Same specificity gotcha already documented and
   fixed dozens of times the same way in assets/css/smartviewer.css
   (".stub-modal-inner button" vs ".pen-type-btn", etc.) - this file just
   hadn't been through that pass yet. */

.activity-manager {
    /* Was capped at 1100px, centered with unused space on either side on
       any wider screen - widened to actually use the viewport (a class
       roster, a long results table, and the quiz editor's two-column
       layout all benefit from more horizontal room), while still leaving
       an upper bound so lines of text don't stretch edge-to-edge on an
       ultrawide monitor. */
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #2c3e50;
    background: #ffffff;
    box-sizing: border-box;
}

.activity-manager .activity-manager-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid #eef0f2;
    margin-bottom: 20px;
}
.activity-manager .activity-manager-tab {
    padding: 10px 18px;
    border: none;
    background: none;
    font-size: 14px;
    font-weight: 600;
    color: #6c757d;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
}
/* !important here, not just the extra .activity-manager ancestor-class
   scoping this file otherwise relies on for theme-override fights
   (see the file-header comment) - confirmed real bug: hovering Quizzes/
   Classes/Results turned the label unreadable-white ("text turns white, i
   can't see it"). These are plain <button>s with no themed background of
   their own on this page, so a theme's own `button:hover { color: #fff }`
   (styled assuming ITS colored button background, which never renders
   here) landed white text on this page's plain white background. An ID-
   scoped theme selector (e.g. `#content button:hover`) beats any amount of
   class-only specificity regardless of source order, so raising this
   rule's own class count further wouldn't reliably fix it - !important is
   the one thing guaranteed to win against that. */
.activity-manager .activity-manager-tab:hover { color: #2c3e50 !important; background: none !important; }
.activity-manager .activity-manager-tab.active { color: #3498db !important; border-bottom-color: #3498db; }
.activity-manager .activity-manager-tab.active:hover { color: #3498db !important; }

.activity-manager .am-primary-btn {
    background: #3498db;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.activity-manager .am-primary-btn:hover { background: #2b7fb8; }
.activity-manager .am-secondary-btn {
    background: #f4f6f8;
    color: #2c3e50;
    border: 1px solid #d7dee3;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
}
.activity-manager .am-secondary-btn:hover { background: #e9ecef; }
.activity-manager .am-secondary-btn:disabled { color: #adb5bd; cursor: not-allowed; }
.activity-manager .am-secondary-btn:disabled:hover { background: #f4f6f8; }

/* Styled label wrapping a hidden file input, same visual pattern as the
   in-canvas quiz editor's .quiz-add-img-label (assets/css/smartviewer.css)
   - used for the Import Classes / Import Roster CSV/TXT uploads. */
.activity-manager .am-file-btn {
    display: inline-block;
    font-size: 12px;
    color: #3498db;
    cursor: pointer;
    padding: 6px 12px;
    border: 1px dashed #b0c8e0;
    border-radius: 6px;
    background: #f0f7ff;
    margin-bottom: 6px;
}
.activity-manager .am-file-btn:hover { background: #e0efff; }
.activity-manager .am-import-status {
    display: block;
    font-size: 12px;
    color: #6c757d;
    margin: -2px 0 6px;
}
.activity-manager .am-import-status.is-error { color: #e74c3c; }
.activity-manager .am-danger-btn {
    background: #fdecea;
    color: #c0392b;
    border: 1px solid #f5c6cb;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
}
.activity-manager .am-danger-btn:hover { background: #fadbd8; }

.activity-manager .am-text-input, .activity-manager .am-textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d7dee3;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 13px;
    font-family: inherit;
    color: #2c3e50;
    background: #fff;
}
.activity-manager .am-toggle-label { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; color: #2c3e50; }

.activity-manager .am-empty-state { color: #9aa7b0; font-style: italic; padding: 30px; text-align: center; }

.activity-manager .am-list { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.activity-manager .am-list-row {
    display: block;
    width: 100%;
    text-align: left;
    background: #fff;
    border: 1px solid #e6eaed;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 13px;
    cursor: pointer;
    color: #2c3e50;
}
.activity-manager .am-list-row:hover { background: #f4f6f8; }
.activity-manager .am-list-row.active { border-color: #3498db; background: #eaf4fc; }
.activity-manager .am-list-remove-btn {
    background: none;
    border: none;
    color: #9aa7b0;
    cursor: pointer;
    font-size: 13px;
    padding: 2px 6px;
}
.activity-manager .am-list-remove-btn:hover { color: #c0392b; }

/* Quizzes tab */
.activity-manager .am-quizzes-layout { display: grid; grid-template-columns: 260px 1fr; gap: 24px; }
.activity-manager .am-quiz-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 16px 0 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e6eaed;
}
/* Not defined elsewhere on this page (smartviewer.css's own copy isn't
   loaded here) - without an explicit color this inherited fine from
   .activity-manager's own #2c3e50, but scoped/declared explicitly here
   too for the same robustness as everything else in this pass. */
.activity-manager .am-quiz-editor-header .settings-label { color: #6c757d; font-size: 13px; font-weight: 600; }
.activity-manager .am-questions-list { display: flex; flex-direction: column; gap: 12px; max-height: 60vh; overflow-y: auto; }
.activity-manager .am-quiz-editor-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #e6eaed;
}
.activity-manager .am-save-status { font-size: 12px; color: #6c757d; flex: 1; }

/* Reused from the Quiz Widget's own in-canvas question editor
   (assets/css/smartviewer.css) - duplicated here rather than loading the
   whole smartviewer.css bundle on this admin page, since only this small
   slice is actually needed and that file is scoped to the canvas editor.
   Scoped to :is(.activity-manager, #dynamic-content-form, #edit-dynamic-form-container) rather than
   just .activity-manager - the same quiz-question-editor.js instance is
   now also used by the wizard's Quiz template (activity-creator.js's
   loadTemplateForm(), #dynamic-content-form is that step's container),
   and this file loads unconditionally site-wide (see enqueue_scripts()'s
   own comment on why), so both contexts share this one copy rather than
   needing a second duplicate. */
:is(.activity-manager, #dynamic-content-form, #edit-dynamic-form-container) .quiz-q-row { border: 1px solid #d7dee3; border-radius: 8px; padding: 10px 12px; background: #fafbfc; }
:is(.activity-manager, #dynamic-content-form, #edit-dynamic-form-container) .quiz-q-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; gap: 8px; }
:is(.activity-manager, #dynamic-content-form, #edit-dynamic-form-container) .quiz-q-num { font-size: 11px; font-weight: 700; color: #3498db; flex-shrink: 0; }
:is(.activity-manager, #dynamic-content-form, #edit-dynamic-form-container) .quiz-q-type-select { font-size: 11px; border: 1px solid #d7dee3; border-radius: 12px; padding: 2px 8px; background: #f4f6f8; color: #1a2a38; cursor: pointer; flex: 1; min-width: 0; max-width: 160px; }
:is(.activity-manager, #dynamic-content-form, #edit-dynamic-form-container) .quiz-q-remove { font-size: 11px; padding: 2px 6px; flex-shrink: 0; background: #fdecea; color: #c0392b; border: 1px solid #f5c6cb; border-radius: 4px; cursor: pointer; }
:is(.activity-manager, #dynamic-content-form, #edit-dynamic-form-container) .quiz-q-text { width: 100%; box-sizing: border-box; font-size: 12px; border: 1px solid #d7dee3; border-radius: 4px; padding: 4px 6px; resize: vertical; font-family: inherit; color: #1a1a1a; background: #fff; }
:is(.activity-manager, #dynamic-content-form, #edit-dynamic-form-container) .quiz-choices-editor { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
:is(.activity-manager, #dynamic-content-form, #edit-dynamic-form-container) .quiz-choice-row { display: flex; align-items: center; gap: 6px; }
:is(.activity-manager, #dynamic-content-form, #edit-dynamic-form-container) .quiz-choice-input { flex: 1; font-size: 12px; border: 1px solid #d7dee3; border-radius: 4px; padding: 3px 6px; color: #1a1a1a; background: #fff; }
:is(.activity-manager, #dynamic-content-form, #edit-dynamic-form-container) .quiz-choice-row input[type=radio], :is(.activity-manager, #dynamic-content-form, #edit-dynamic-form-container) .quiz-choice-row input[type=checkbox] { flex-shrink: 0; cursor: pointer; }
:is(.activity-manager, #dynamic-content-form, #edit-dynamic-form-container) .quiz-correct-badge { font-size: 10px; background: #eafaf1; color: #1e8449; border-radius: 3px; padding: 1px 5px; flex-shrink: 0; }
:is(.activity-manager, #dynamic-content-form, #edit-dynamic-form-container) .quiz-fillin-answer { width: 100%; box-sizing: border-box; font-size: 12px; border: 1px solid #d7dee3; border-radius: 4px; padding: 4px 6px; margin-top: 4px; color: #1a1a1a; background: #fff; }
:is(.activity-manager, #dynamic-content-form, #edit-dynamic-form-container) .quiz-add-choice-btn { align-self: flex-start; font-size: 11px; padding: 2px 8px; margin-top: 2px; background: #f4f6f8; color: #1a2a38; border: 1px solid #d7dee3; border-radius: 4px; cursor: pointer; }
:is(.activity-manager, #dynamic-content-form, #edit-dynamic-form-container) .quiz-q-img-row { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
:is(.activity-manager, #dynamic-content-form, #edit-dynamic-form-container) .quiz-q-img-thumb { width: 80px; height: 56px; object-fit: cover; border-radius: 4px; border: 1px solid #d7dee3; flex-shrink: 0; }
:is(.activity-manager, #dynamic-content-form, #edit-dynamic-form-container) .quiz-add-img-label { font-size: 11px; color: #3498db; cursor: pointer; padding: 3px 8px; border: 1px dashed #b0c8e0; border-radius: 4px; background: #f0f7ff; }
:is(.activity-manager, #dynamic-content-form, #edit-dynamic-form-container) .quiz-add-img-label:hover { background: #e0efff; }

/* Question image crop tool (quiz-question-editor.js's own openImageCropModal) - same module as the in-canvas
   Quiz Widget settings modal (smartviewer.css has an identical copy of this block), built entirely in JS onto
   document.body rather than a template element, so it needs no markup of its own on this page either. These
   are NOT nested under .activity-manager since the crop overlay is appended straight to <body>, outside this
   page's own wrapper - kept as two-class-or-higher selectors already (e.g. ".quiz-crop-card"'s own children),
   which is enough on its own; each one is unlikely to collide with a theme's generic button/link rule the way
   the bare single-class rules above did, but color/background are still declared explicitly throughout. */
.quiz-q-img-thumb-wrap { position: relative; display: inline-block; cursor: pointer; flex-shrink: 0; }
.quiz-q-img-crop-badge { position: absolute; bottom: -4px; right: -4px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1px solid #d7dee3; font-size: 10px; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
/* z-index matches the wizard's own "nested sub-modal" convention (Pixabay
   search/image picker, 1000050 inline in activity-creator.js) rather than
   the original 10000 - confirmed real bug: activity-creator.css's own
   .activity-modal (the wizard's backdrop) uses z-index: 999999 on purpose,
   to clear aggressive theme nav bars, so a crop modal at 10000 opened from
   inside the wizard rendered UNDER the wizard form instead of over it. This
   file's own .quiz-crop-overlay is otherwise unrelated to that context -
   see this block's own header comment - so this only matters because the
   crop tool is now also reachable from inside the wizard (the Quiz
   template's question editor), not just from the admin-only Quiz Library
   tab this file was originally written for. */
.quiz-crop-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 1000050; }
/* text-align:center centers quiz-crop-stage below (inline-flex, shrink-wraps to the image's real size - see that
   rule's own comment in smartviewer.css for why display:flex there was a real bug). */
.quiz-crop-card { background: #fff; color: #1a1a1a; border-radius: 12px; padding: 16px; max-width: min(560px, 92vw); width: 100%; box-shadow: 0 10px 40px rgba(0,0,0,.35); text-align: center; }
.quiz-crop-title { font-size: 15px; font-weight: 700; color: #1a1a1a; margin-bottom: 10px; text-align: left; }
.quiz-crop-stage { position: relative; max-height: 60vh; overflow: hidden; display: inline-flex; touch-action: none; }
.quiz-crop-img { max-width: 100%; max-height: 60vh; display: block; user-select: none; -webkit-user-drag: none; }
.quiz-crop-mask { position: absolute; background: rgba(0,0,0,.55); pointer-events: none; }
.quiz-crop-box { position: absolute; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.4); cursor: move; touch-action: none; }
.quiz-crop-handle { position: absolute; width: 16px; height: 16px; background: #fff; border: 1px solid #3498db; border-radius: 50%; touch-action: none; }
.quiz-crop-handle-nw { top: -9px; left: -9px; cursor: nwse-resize; }
.quiz-crop-handle-ne { top: -9px; right: -9px; cursor: nesw-resize; }
.quiz-crop-handle-sw { bottom: -9px; left: -9px; cursor: nesw-resize; }
.quiz-crop-handle-se { bottom: -9px; right: -9px; cursor: nwse-resize; }
.quiz-crop-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.quiz-crop-btn { font-size: 12px; font-weight: 600; padding: 7px 16px; border-radius: 6px; border: 1px solid #d7dee3; background: #f4f6f8; color: #1a2a38; cursor: pointer; }
.quiz-crop-btn-reset { margin-right: auto; }
.quiz-crop-btn-apply { background: #3498db; border-color: #3498db; color: #fff; }
.quiz-crop-btn-apply:hover { background: #2c81bd; }

/* Classes tab */
.activity-manager .am-classes-layout { display: grid; grid-template-columns: 260px 1fr; gap: 24px; }
.activity-manager .am-new-class-row, .activity-manager .am-new-student-row { display: flex; gap: 8px; margin-bottom: 6px; }
.activity-manager .am-new-class-row .am-text-input, .activity-manager .am-new-student-row .am-text-input { flex: 1; }
.activity-manager .am-roster-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #e6eaed;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 13px;
    color: #2c3e50;
    background: #fff;
}
.activity-manager #am-delete-class-btn { margin-top: 20px; }

/* Results tab */
.activity-manager .am-results-filters { display: flex; gap: 20px; margin-bottom: 16px; font-size: 13px; color: #2c3e50; }
.activity-manager .am-results-filters select { margin-left: 6px; padding: 6px 8px; border: 1px solid #d7dee3; border-radius: 6px; color: #2c3e50; background: #fff; }
.activity-manager .am-table { width: 100%; border-collapse: collapse; font-size: 13px; color: #2c3e50; }
.activity-manager .am-table th, .activity-manager .am-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #e6eaed; }
.activity-manager .am-table th { color: #6c757d; font-weight: 600; }

/* Quiz editor's own Close action - leaves editing mode and returns to the
   empty state, whether that means discarding a quiz that was never saved
   (the "no Cancel button while creating" report) or just finishing up
   after a successful save (the "no Close/Exit button" report) - one
   persistent escape hatch covers both, always visible in the footer.
   Confirmed real gap: there was previously no way out of quiz-editing
   mode at all short of navigating away from the page entirely. */
.activity-manager .am-quiz-close-btn {
    background: #f4f6f8;
    color: #2c3e50;
    border: 1px solid #d7dee3;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.activity-manager .am-quiz-cancel-btn:hover,
.activity-manager .am-quiz-close-btn:hover { background: #e9ecef; }

@media (max-width: 720px) {
    .activity-manager .am-quizzes-layout, .activity-manager .am-classes-layout { grid-template-columns: 1fr; }
}