/* Quizzes / Results / Classes admin UI (templates/activity-manager.php).

   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.).

   Palette is a deliberate, scoped-to-this-page refresh (a slightly
   deeper/richer blue than activity-creator.css's own #3498db, plus a
   real neutral gray scale instead of two ad-hoc grays) - CSS custom
   properties declared once on .activity-manager itself so every rule
   below can reference one shared source instead of repeating hex values,
   and so a future palette tweak is a one-line change here rather than a
   find-and-replace across the whole file. Scoped to this ONE page on
   purpose (not activity-creator.css or smartviewer.css) - a page-wide
   palette refresh across the whole plugin wasn't asked for, just this
   admin screen. */

.activity-manager {
    --am-primary: #2563eb;
    --am-primary-hover: #1d4ed8;
    --am-primary-tint: #eff6ff;
    --am-primary-tint-strong: #dbeafe;
    --am-text: #1e293b;
    --am-text-muted: #64748b;
    --am-text-faint: #94a3b8;
    --am-border: #e2e8f0;
    --am-border-strong: #cbd5e1;
    --am-bg-page: #f4f6f9;
    --am-bg-card: #ffffff;
    --am-bg-subtle: #f8fafc;
    --am-bg-hover: #f1f5f9;
    --am-danger: #dc2626;
    --am-danger-bg: #fef2f2;
    --am-danger-border: #fecdd3;
    --am-danger-hover: #fee2e2;
    --am-success: #16a34a;
    --am-radius: 12px;
    --am-radius-sm: 8px;
    --am-shadow-card: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .05);
    --am-shadow-pop: 0 12px 32px rgba(15, 23, 42, .14), 0 2px 8px rgba(15, 23, 42, .08);

    /* 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. A soft page background (--am-bg-page) sits
       behind each pane's own white card (see .activity-manager-pane
       below) so the content visibly "sits on" the page instead of
       blending into a flat all-white background. */
    max-width: 1240px;
    margin: 0 auto;
    padding: 28px 20px 60px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--am-text);
    background: var(--am-bg-page);
    box-sizing: border-box;
}

/* --- Tab bar ------------------------------------------------------- */
.activity-manager .activity-manager-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px;
    margin-bottom: 20px;
    background: var(--am-bg-card);
    border: 1px solid var(--am-border);
    border-radius: var(--am-radius);
    box-shadow: var(--am-shadow-card);
}
.activity-manager .activity-manager-tab {
    padding: 9px 16px;
    border: none;
    border-radius: var(--am-radius-sm);
    background: none;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--am-text-muted);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
/* !important here, not just the extra .activity-manager ancestor-class
   scoping this file otherwise relies on for theme-override fights -
   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: var(--am-text) !important; background: var(--am-bg-hover) !important; }
.activity-manager .activity-manager-tab.active { color: #fff !important; background: var(--am-primary); box-shadow: 0 1px 4px rgba(37, 99, 235, .35); }
.activity-manager .activity-manager-tab.active:hover { color: #fff !important; background: var(--am-primary-hover) !important; }

/* --- Pane "card" shell ---------------------------------------------- */
/* Every pane (Quizzes/Results/Quick Poll Results/Widget Activity Results/
   Classes) gets the same elevated white card treatment against the page's
   own soft background - previously flat white-on-white with no visual
   separation from the page at all. */
.activity-manager .activity-manager-pane {
    background: var(--am-bg-card);
    border: 1px solid var(--am-border);
    border-radius: var(--am-radius);
    box-shadow: var(--am-shadow-card);
    padding: 24px;
}

/* --- Buttons ---------------------------------------------------------- */
.activity-manager .am-primary-btn {
    background: var(--am-primary);
    color: #fff;
    border: none;
    border-radius: var(--am-radius-sm);
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(37, 99, 235, .25);
    transition: background-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
.activity-manager .am-primary-btn:hover { background: var(--am-primary-hover); box-shadow: 0 4px 10px rgba(37, 99, 235, .3); }
.activity-manager .am-primary-btn:active { transform: translateY(1px); }
.activity-manager .am-secondary-btn {
    background: var(--am-bg-subtle);
    color: var(--am-text);
    border: 1px solid var(--am-border-strong);
    border-radius: var(--am-radius-sm);
    padding: 7px 14px;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
.activity-manager .am-secondary-btn:hover { background: var(--am-bg-hover); border-color: var(--am-text-faint); }
.activity-manager .am-secondary-btn:disabled { color: var(--am-text-faint); border-color: var(--am-border); cursor: not-allowed; }
.activity-manager .am-secondary-btn:disabled:hover { background: var(--am-bg-subtle); border-color: var(--am-border); }

/* 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;
    font-weight: 500;
    color: var(--am-primary);
    cursor: pointer;
    padding: 7px 14px;
    border: 1px dashed #93c5fd;
    border-radius: var(--am-radius-sm);
    background: var(--am-primary-tint);
    margin-bottom: 8px;
    transition: background-color .15s ease;
}
.activity-manager .am-file-btn:hover { background: var(--am-primary-tint-strong); }
.activity-manager .am-import-status {
    display: block;
    font-size: 12px;
    color: var(--am-text-muted);
    margin: -3px 0 8px;
}
.activity-manager .am-import-status.is-error { color: var(--am-danger); }
.activity-manager .am-danger-btn {
    background: var(--am-danger-bg);
    color: var(--am-danger);
    border: 1px solid var(--am-danger-border);
    border-radius: var(--am-radius-sm);
    padding: 7px 14px;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .15s ease;
}
.activity-manager .am-danger-btn:hover { background: var(--am-danger-hover); }

.activity-manager .am-text-input, .activity-manager .am-textarea, .activity-manager .am-search-input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--am-border-strong);
    border-radius: var(--am-radius-sm);
    padding: 9px 11px;
    font-size: 13px;
    font-family: inherit;
    color: var(--am-text);
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.activity-manager .am-text-input:focus, .activity-manager .am-textarea:focus, .activity-manager .am-search-input:focus {
    outline: none;
    border-color: var(--am-primary);
    box-shadow: 0 0 0 3px var(--am-primary-tint-strong);
}
.activity-manager .am-toggle-label { display: flex; align-items: center; gap: 7px; font-size: 13px; cursor: pointer; color: var(--am-text); }

/* Search box above the Quizzes list (#am-quizzes-list) - client-side
   filter, same "don't make the user scroll a huge unbroken list" fix
   the searchable Quiz/Poll/Activity result filters below address for
   their own dropdowns. */
.activity-manager .am-search-input { margin: 10px 0; }

.activity-manager .am-empty-state { color: var(--am-text-faint); font-style: italic; padding: 36px 20px; text-align: center; font-size: 13px; }
.activity-manager .am-list-empty { padding: 18px 10px; border: 1px dashed var(--am-border); border-radius: var(--am-radius-sm); margin-top: 4px; }

.activity-manager .am-list { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }
.activity-manager .am-list-row {
    position: relative;
    display: block;
    width: 100%;
    text-align: left;
    background: var(--am-bg-card);
    border: 1px solid var(--am-border);
    border-left: 3px solid transparent;
    border-radius: var(--am-radius-sm);
    padding: 10px 12px 10px 14px;
    font-size: 13px;
    cursor: pointer;
    color: var(--am-text);
    transition: background-color .12s ease, border-color .12s ease;
}
.activity-manager .am-list-row:hover { background: var(--am-bg-hover); border-color: var(--am-border-strong); }
.activity-manager .am-list-row.active { border-left-color: var(--am-primary); background: var(--am-primary-tint); border-top-color: var(--am-primary-tint-strong); border-right-color: var(--am-primary-tint-strong); border-bottom-color: var(--am-primary-tint-strong); font-weight: 600; }
.activity-manager .am-list-remove-btn {
    background: none;
    border: none;
    color: var(--am-text-faint);
    cursor: pointer;
    font-size: 13px;
    padding: 2px 6px;
    border-radius: 4px;
    transition: color .15s ease, background-color .15s ease;
}
.activity-manager .am-list-remove-btn:hover { color: var(--am-danger); background: var(--am-danger-bg); }

/* --- Quizzes tab ------------------------------------------------------ */
.activity-manager .am-quizzes-layout { display: grid; grid-template-columns: 280px 1fr; gap: 28px; }
.activity-manager .am-quizzes-list-col { border-right: 1px solid var(--am-border); padding-right: 24px; }
.activity-manager .am-quiz-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 4px 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--am-border);
}
.activity-manager .am-quiz-editor-header .settings-label { color: var(--am-text-muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.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: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--am-border);
}
.activity-manager .am-save-status { font-size: 12px; color: var(--am-text-muted); 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. Left as its own untouched visual style
   (not part of this page's own redesign pass) since changing it would
   also change the wizard's Quiz step, which wasn't part of this ask. */
: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. Left
   unchanged (not part of this page's own redesign pass) since it's shared with the wizard's Quiz step too. */
.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: 280px 1fr; gap: 28px; }
.activity-manager .am-classes-list-col { border-right: 1px solid var(--am-border); padding-right: 24px; }
.activity-manager .am-new-class-row, .activity-manager .am-new-student-row { display: flex; gap: 8px; margin-bottom: 8px; }
.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 var(--am-border);
    border-radius: var(--am-radius-sm);
    padding: 9px 12px;
    font-size: 13px;
    color: var(--am-text);
    background: var(--am-bg-card);
    transition: background-color .12s ease;
}
.activity-manager .am-roster-row:hover { background: var(--am-bg-hover); }
.activity-manager #am-roster-class-name { font-size: 17px; margin: 0 0 14px; }
.activity-manager #am-delete-class-btn { margin-top: 22px; }

/* --- Results / Quick Poll Results / Widget Activity Results tabs ------- */
.activity-manager .am-results-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-bottom: 20px; font-size: 13px; color: var(--am-text); }
.activity-manager .am-results-filters label { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--am-text-muted); }
/* Any plain (non-enhanced) <select> left on the page - defensive fallback
   only; every filter <select> here is enhanced into a .am-combobox by
   activity-manager.js's enhanceSelectWithSearch, but this keeps a sane,
   on-brand look if that ever fails to run (JS error/adblock edge case)
   instead of falling back to a totally unstyled native select. */
.activity-manager .am-results-filters select {
    padding: 8px 10px;
    border: 1px solid var(--am-border-strong);
    border-radius: var(--am-radius-sm);
    color: var(--am-text);
    background: #fff;
    font-size: 13px;
}
.activity-manager .am-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    color: var(--am-text);
    border: 1px solid var(--am-border);
    border-radius: var(--am-radius-sm);
    overflow: hidden;
}
.activity-manager .am-table th, .activity-manager .am-table td { text-align: left; padding: 10px 14px; }
.activity-manager .am-table thead th {
    color: var(--am-text-muted);
    font-weight: 700;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: var(--am-bg-subtle);
    border-bottom: 1px solid var(--am-border);
}
.activity-manager .am-table tbody tr { border-bottom: 1px solid var(--am-border); transition: background-color .1s ease; }
.activity-manager .am-table tbody tr:last-child { border-bottom: none; }
.activity-manager .am-table tbody tr:nth-child(even) { background: var(--am-bg-subtle); }
.activity-manager .am-table tbody tr:hover { background: var(--am-primary-tint); }

/* --- Searchable select combobox (activity-manager.js's own
   enhanceSelectWithSearch) ------------------------------------------- */
/* The real <select> stays in the DOM (functioning normally - every
   loadX()/render/export function in activity-manager.js keeps reading/
   writing it exactly as before) but is visually hidden; .am-combobox-
   display is the visible stand-in button, .am-combobox-panel is the
   floating search+list popover. */
.activity-manager .am-combobox { position: relative; display: inline-block; min-width: 200px; }
.activity-manager .am-combobox-native {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
}
.activity-manager .am-combobox-display {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    text-align: left;
    padding: 8px 32px 8px 12px;
    font-size: 13px;
    font-family: inherit;
    color: var(--am-text);
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
    border: 1px solid var(--am-border-strong);
    border-radius: var(--am-radius-sm);
    cursor: pointer;
    min-height: 36px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.activity-manager .am-combobox-display:hover { border-color: var(--am-text-faint); }
.activity-manager .am-combobox.is-open .am-combobox-display { border-color: var(--am-primary); box-shadow: 0 0 0 3px var(--am-primary-tint-strong); }
.activity-manager .am-combobox-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 40;
    width: max(100%, 240px);
    background: #fff;
    border: 1px solid var(--am-border);
    border-radius: var(--am-radius-sm);
    box-shadow: var(--am-shadow-pop);
    padding: 8px;
}
.activity-manager .am-combobox-search {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--am-border-strong);
    border-radius: 6px;
    padding: 7px 9px;
    font-size: 12.5px;
    font-family: inherit;
    color: var(--am-text);
    margin-bottom: 6px;
}
.activity-manager .am-combobox-search:focus { outline: none; border-color: var(--am-primary); }
.activity-manager .am-combobox-list { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.activity-manager .am-combobox-group-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--am-text-faint);
    padding: 8px 8px 3px;
}
.activity-manager .am-combobox-option {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-radius: 6px;
    padding: 7px 9px;
    font-size: 13px;
    color: var(--am-text);
    cursor: pointer;
}
.activity-manager .am-combobox-option:hover, .activity-manager .am-combobox-option.is-highlighted { background: var(--am-bg-hover); }
.activity-manager .am-combobox-option.is-selected { background: var(--am-primary-tint); color: var(--am-primary-hover); 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. */
.activity-manager .am-quiz-close-btn {
    background: var(--am-bg-subtle);
    color: var(--am-text);
    border: 1px solid var(--am-border-strong);
    border-radius: var(--am-radius-sm);
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease;
}
.activity-manager .am-quiz-cancel-btn:hover,
.activity-manager .am-quiz-close-btn:hover { background: var(--am-bg-hover); }

@media (max-width: 720px) {
    .activity-manager { padding: 16px 12px 40px; }
    .activity-manager .activity-manager-pane { padding: 16px; }
    .activity-manager .am-quizzes-layout, .activity-manager .am-classes-layout { grid-template-columns: 1fr; }
    .activity-manager .am-quizzes-list-col, .activity-manager .am-classes-list-col { border-right: none; padding-right: 0; border-bottom: 1px solid var(--am-border); padding-bottom: 20px; margin-bottom: 4px; }
    .activity-manager .am-results-filters { gap: 12px; }
    .activity-manager .am-combobox { min-width: 0; flex: 1; }
}

/* Inline student name editing in the class roster. */
.activity-manager .am-roster-row > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.activity-manager .am-roster-row { gap: 8px; }
.activity-manager .am-roster-row [hidden] { display: none; }
.activity-manager .am-student-name-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; }
.activity-manager .am-student-name-form input { flex: 1; min-width: 140px; }
.activity-manager .am-student-edit-status { flex-basis: 100%; font-size: 12px; }
.activity-manager .am-student-edit-btn { margin-left: auto; }
/* Explicit colors keep roster actions readable under WordPress theme button styles. */
.activity-manager .am-student-edit-btn,
.activity-manager .am-student-name-form button {
    background: #f1f5f9;
    color: #1e293b;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 7px 12px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
}
.activity-manager .am-student-name-form button[type="submit"] {
    background: #1d4ed8;
    color: #ffffff;
    border-color: #1d4ed8;
}
.activity-manager .am-student-edit-btn:hover,
.activity-manager .am-student-name-form button[type="button"]:hover { background: #e2e8f0; color: #1e293b; }
.activity-manager .am-student-name-form button[type="submit"]:hover { background: #1e40af; color: #ffffff; }
.activity-manager .am-student-edit-btn:focus-visible,
.activity-manager .am-student-name-form button:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.activity-manager .am-student-name-form button:disabled { background: #e2e8f0; color: #475569; border-color: #cbd5e1; opacity: 1; cursor: wait; }

/* Gradebook tab - roster rows x quiz / Quick Poll / Widget Activity columns,
   color-coded by type (blue = quiz, orange = Quick Poll, green = activity). */
.activity-manager .am-gb-legend { display: inline-flex; gap: 8px; margin-left: auto; }
.activity-manager .am-gb-key { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.activity-manager .am-gb-wrap { overflow: auto; max-height: 70vh; border: 1px solid var(--am-border); border-radius: 8px; }
.activity-manager .am-gb-table { border-collapse: separate; border-spacing: 0; width: auto; min-width: 100%; margin: 0; }
.activity-manager .am-gb-table th, .activity-manager .am-gb-table td { border-bottom: 1px solid var(--am-border); border-right: 1px solid var(--am-border); white-space: nowrap; }
.activity-manager .am-gb-table thead th { position: sticky; top: 0; z-index: 2; text-align: center; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.activity-manager .am-gb-table .am-gb-name-col { position: sticky; left: 0; z-index: 3; background: #fff; text-align: left; font-weight: 600; min-width: 160px; }
.activity-manager .am-gb-table thead .am-gb-name-col { z-index: 4; top: 0; background: var(--am-bg-subtle); }
.activity-manager .am-gb-table tbody tr:nth-child(even) .am-gb-name-col { background: var(--am-bg-subtle); }
.activity-manager .am-gb-cell { text-align: center; font-weight: 600; }
.activity-manager .am-gb-quiz { background: #e3f0ff; color: #0b4a8f; }
.activity-manager .am-gb-poll { background: #fff0dc; color: #8a4b00; }
.activity-manager .am-gb-activity { background: #e2f6e7; color: #1b6b32; }
.activity-manager .am-gb-colhead.am-gb-quiz { background: #bcdcff; }
.activity-manager .am-gb-colhead.am-gb-poll { background: #ffd9a3; }
.activity-manager .am-gb-colhead.am-gb-activity { background: #b9e8c4; }
.activity-manager .am-gb-table tbody .am-gb-cell.am-gb-none { background: transparent; color: inherit; font-weight: 400; opacity: .45; }