/* Global overrides can be put here */

/* Unified bonus editor */
.unified-editor-textarea {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9em;
    line-height: 1.5;
    min-height: 250px;
    padding: 0.75em;
}

#toggle-unified-editor {
    margin-bottom: 0.75em;
}

/* jQuery UI dialog above Foundation dropdowns */
.ui-widget-overlay {
    z-index: 10000 !important;
}
.ui-dialog {
    z-index: 10001 !important;
}

/* Paste tossup dialog */
#paste-tossup-dialog textarea {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9em;
    line-height: 1.5;
    resize: vertical;
}

#paste-full-tossup {
    margin-bottom: 0.75em;
}

/* Threaded comments */
.comment-item {
    margin-bottom: 1em;
}

.comment-actions {
    margin-top: 0.25em;
    margin-bottom: 0.5em;
    font-size: 0.85em;
}

.comment-actions a {
    margin-right: 0.75em;
}

.comment-replies {
    margin-left: 30px;
    border-left: 2px solid #ddd;
    padding-left: 12px;
}

.reply-form {
    margin-top: 0.5em;
    margin-bottom: 0.75em;
}

.reply-form textarea {
    width: 100%;
    margin-bottom: 0.5em;
}

.reply-form .button {
    margin-right: 0.5em;
}

/* Anchored (Google Docs-style) comments */
.anchored-highlight {
    background-color: #fff3b0;
    border-bottom: 1px dotted #b8960c;
    cursor: pointer;
    padding: 0;
}

.anchored-highlight.active,
.anchored-highlight:hover {
    background-color: #ffd966;
}

.anchored-highlight.anchor-flash {
    background-color: #ffc107;
}

.comment-quote {
    border-left: 3px solid #e6b800;
    background-color: #fdf7e2;
    padding: 0.15em 0.5em;
    margin-bottom: 0.25em;
    font-style: italic;
    font-size: 0.9em;
    color: #666;
    cursor: pointer;
}

.comment-quote.orphaned {
    border-left-color: #bbb;
    background-color: #f2f2f2;
    cursor: default;
    text-decoration: line-through;
}

.comment-item.anchor-flash {
    background-color: #fdf7e2;
    transition: background-color 0.3s;
}

#anchor-comment-btn {
    position: absolute;
    z-index: 1000;
    margin: 0;
}

#anchor-comment-popup {
    position: absolute;
    z-index: 1000;
    width: 340px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    padding: 0.5em;
}

#anchor-comment-popup .anchor-popup-quote {
    border-left: 3px solid #e6b800;
    background-color: #fdf7e2;
    padding: 0.15em 0.5em;
    margin-bottom: 0.5em;
    font-style: italic;
    font-size: 0.85em;
    color: #666;
}

#anchor-comment-popup textarea {
    width: 100%;
    margin-bottom: 0.5em;
}

#anchor-comment-popup .button {
    margin: 0 0.5em 0 0;
}

/* Rich text question entry */
.rich-editor-wrapper {
    margin-bottom: 1em;
}

.rich-editor-toolbar {
    border: 1px solid #ccc;
    border-bottom: none;
    border-radius: 3px 3px 0 0;
    background-color: #f4f4f4;
    padding: 0.2em 0.5em;
}

.rich-editor-toolbar a.rich-editor-btn {
    display: inline-block;
    min-width: 2em;
    text-align: center;
    padding: 0.15em 0.45em;
    margin-right: 0.3em;
    border: 1px solid #bbb;
    border-radius: 3px;
    background-color: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
    color: #333;
    font-size: 1em;
    line-height: 1.4;
}

.rich-editor-toolbar a.rich-editor-btn:hover {
    border-color: #888;
    background-color: #eef4fa;
}

.rich-editor-toolbar a.rich-editor-btn:active {
    background-color: #dde8f2;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* Reflects the formatting at the caret/selection (pressed = active) */
.rich-editor-toolbar a.rich-editor-btn.active {
    background-color: #008cba;
    border-color: #0079a8;
    color: #fff;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
}

.rich-editor-hint {
    float: right;
    font-size: 0.75em;
    color: #888;
    padding-top: 0.35em;
}

/* Keep a long question answer in the top breadcrumb from overflowing the bar. */
.top-bar .breadcrumbs { overflow: hidden; max-width: 100%; }
.top-bar .breadcrumbs > li {
    max-width: 32ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.char-count-note { margin: 0.25rem 0 0.75rem; color: #555; font-size: 0.9em; }
.char-count-note .char-count-excluded { color: #888; }
.packet-assignment { padding: 4px 0; font-size: 0.95em; }
.packet-assignment .prefix { display: inline; background: none; border: none; padding: 0 6px 0 0; font-weight: bold; }
.packet-assignment .packet-grid-link { margin-left: 8px; font-size: 0.85em; }

.rich-editor {
    border: 1px solid #ccc;
    border-radius: 0 0 3px 3px;
    background-color: #fff;
    padding: 0.5em;
    min-height: 4.5em;
    font-family: inherit;
    font-size: 1em;
    line-height: 1.5;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    /* The editor sits inside a <label> (cursor: pointer in Foundation); force
       a text caret so it reads as an editable text box, not a clickable thing. */
    cursor: text;
}

/* Long question-stem / leadin / part-text fields start taller so a full-length
   tossup fits without scrolling; it still grows with content. */
.rich-editor.rich-editor-tall {
    min-height: 10em;
}

.rich-editor.rich-editor-short {
    min-height: 2.25em;
}

/* Edit-tossup / edit-bonus two-column layout: editing on the left, comments
   in a sticky panel on the right (mirrors the document view). */
.edit-layout { display: flex; gap: 20px; align-items: flex-start; }
.edit-main { flex: 1 1 auto; min-width: 0; }
.edit-comments {
    flex: 0 0 360px; max-width: 360px;
    position: sticky; top: 8px;
    max-height: calc(100vh - 24px); overflow-y: auto;
    border-left: 1px solid #eee; padding-left: 14px;
}
.edit-comments .comment-item { font-size: 0.9em; }
.edit-comments .reply-form { margin: 4px 0 6px; }
.comments-heading { margin: 0 0 8px; padding-bottom: 4px;
    border-bottom: 2px solid #008CBA; font-size: 1.1em; }
.edit-comments .add-comment-form label { font-weight: bold; font-size: 0.9em; }
.edit-comments .add-comment-form textarea { margin-bottom: 6px; }
@media (max-width: 980px) {
    .edit-layout { display: block; }
    .edit-comments { max-width: none; position: static; max-height: none;
        border-left: none; padding-left: 0; }
}

/* Tidy flag checkboxes (Locked / Edited / Proofread / Read Answer Carefully). */
.edit-meta-row { margin-top: 8px; }
ul.question-flags { list-style: none; margin: 0; }
ul.question-flags li { display: inline-block; margin: 0 16px 4px 0; }
ul.question-flags label { display: inline; font-weight: normal; white-space: nowrap; }
ul.question-flags input[type="checkbox"] { margin: 0 4px 0 0; vertical-align: middle; }
/* Edit pages use more horizontal space than the default centered column. */
body.edit-page-wide > .row { max-width: 1400px; }

/* Members who hold a role via a role group (rather than a direct assignment). */
.member-via-group { color: #777; font-style: italic; }

.rich-editor:focus {
    outline: none;
    border-color: #999;
    background-color: #fafafa;
}

.rich-editor.rich-editor-multiline {
    min-height: 16em;
}

/* Category tag insertion panel */
.category-tag-panel {
    margin: 0.75em 0 1em;
    padding: 0.75em;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fafafa;
}

.category-tag-panel > label {
    display: block;
    margin-bottom: 0.5em;
    font-size: 0.85em;
    font-weight: bold;
    color: #555;
}

.category-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35em;
}

/* Tree view for category tag insertion */
.category-tree-group {
    border-bottom: 1px solid #e5e5e5;
}

.category-tree-group:last-child {
    border-bottom: none;
}

.category-tree-toggle {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.35em 0.4em;
    background: none;
    border: none;
    font-size: 0.9rem;
    font-weight: bold;
    color: #333;
    cursor: pointer;
}

.category-tree-toggle:hover {
    background: #d9e8f6;
    /* Override Foundation's button:hover (white text), which made the label
       unreadable on the light hover background. */
    color: #004c6d;
}

.category-tree-toggle.open {
    color: #008cba;
}

.category-tree-arrow {
    display: inline-block;
    width: 1em;
    color: #888;
}

.category-tree-count {
    font-weight: normal;
    font-size: 0.75em;
    color: #999;
    background: #ececec;
    border-radius: 8px;
    padding: 0.05em 0.55em;
    margin-left: 0.3em;
}

.category-tree-children {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35em;
    padding: 0.25em 0.4em 0.6em 1.6em;
}

.category-tag-btn {
    display: inline-block;
    padding: 0.3em 0.65em;
    font-size: 0.8rem;
    font-family: inherit;
    line-height: 1.3;
    color: #333;
    background: #e8e8e8;
    border: 1px solid #bbb;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.category-tag-btn:hover {
    background: #008cba;
    color: #fff;
    border-color: #0079a8;
}

.category-tag-btn:active {
    background: #006d9a;
    color: #fff;
}

/* Unseen-activity notification badge on the My Activity button */
.activity-badge {
    display: inline-block;
    min-width: 1.2em;
    padding: 0 0.35em;
    margin-left: 0.25em;
    font-size: 0.75em;
    font-weight: bold;
    line-height: 1.4;
    color: #fff;
    background: #f04124;
    border-radius: 0.7em;
    text-align: center;
}

/* @mention autocomplete dropdown for comment boxes */
.mention-dropdown {
    position: absolute;
    z-index: 1000;
    max-height: 240px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #bbb;
    border-radius: 3px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.mention-item {
    padding: 0.35em 0.6em;
    cursor: pointer;
    font-size: 0.85rem;
    white-space: nowrap;
}
.mention-item.active,
.mention-item:hover {
    background: #008cba;
    color: #fff;
}
.mention-username {
    color: #888;
    font-size: 0.9em;
}
.mention-item.active .mention-username,
.mention-item:hover .mention-username {
    color: #d6eefa;
}

/* Resolved comments are dimmed and marked */
.comment-resolved {
    opacity: 0.6;
}
.comment-resolved-badge {
    float: right;
    margin-left: 0.4em;
}

/* Top nav: let the bar wrap instead of overflowing when there are many links
   (Report Bug / Search / Help / About / Profile / Log Out). */
.top-bar,
.top-bar .top-bar-section,
.top-bar .top-bar-section ul {
    height: auto;
}
.top-bar .top-bar-section {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}
.top-bar .top-bar-section .left,
.top-bar .top-bar-section .right {
    float: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.top-bar .top-bar-section .right {
    margin-left: auto;
}
.top-bar .top-bar-section li {
    float: none;
}
.top-bar .top-bar-section li > a {
    white-space: nowrap;
}

/* Style-check page styling lives in a scoped <style> block in
   templates/style_check.html. */