/* ===== static/css/default.css ===== */
:root {
    /************
     * BASE STYLING
     ************/
    --app-min-width: 320px;
    --app-max-width: 600px;

    --color-primary: #d43731;
    --color-secondary: #812927;
    --color-error: blue;
    --color-success: green;
    --color-flash-highlight: yellow;

    --main-background-color: white;
    --page-background-color: darkgrey;

    --text-color-primary: black;
    --text-color-secondary: grey;
    --text-color-tertiary: lightgrey;

    --button-text-color-primary: white;
    --button-disabled-background-color-primary: #6c757d;

    --top-nav-background-color: #f3eff1;
    --active-nav-item-background-color: #807e7e;

    --focus-default-border-color: rgba(217, 43, 0, 0.8);

    --top-bar-color: var(--color-secondary);
    --top-bar-text-color: white;

    --compose-box-background-color: rgba(255, 255, 255, 0.95);
    --compose-box-textarea-background-color: #ffffff;
    --compose-box-textarea-border: 1.5px solid #e1e5e9;
    --compose-box-focus-border-color: #0066cc;
    --compose-box-submit-button-text-color: white;
    --compose-box-submit-button-background-color: linear-gradient(135deg,
            #0066cc 0%,
            #004499 100%);
    --compose-box-submit-button-background-color-hover: linear-gradient(135deg,
            #0052a3 0%,
            #003d7a 100%);
    --compose-box-submit-button-background-color-disabled: var(--button-disabled-background-color-primary);

    --reply-box-background-color: var(--main-background-color);
    --reply-box-border: 1px solid #ced4da;
    --reply-box-focus-border-color: #80bdff;
    --reply-box-chars-remaining-text-color: var(--button-disabled-background-color-primary);
    --reply-box-chars-remaining-background-color: rgba(255, 255, 255, 0.95);
    --reply-submit-button-color-disabled: var(--button-disabled-background-color-primary);
    --reply-submit-button-text-color: var(--button-text-color-primary);
    --reply-cancel-button-text-color: var(--button-text-color-primary);
    --reply-submit-button-color: var(--color-primary);
    --reply-submit-button-color-hover: var(--color-primary);
    --reply-cancel-button-color: var(--color-secondary);
    --reply-cancel-button-color-hover: var(--color-secondary);

    --post-actions-dropdown-trigger-color: #666;
    --post-actions-dropdown-trigger-background-color-hover: #f5f5f5;
    --post-actions-dropdown-trigger-color-hover: #333;
    --post-actions-dropdown-menu-background-color: white;
    --post-actions-dropdown-item-background-color-hover: #f8f9fa;
    --post-actions-dropdown-item-color-hover: #333;

    --textbox-chars-remaining-text-color: var(--text-color-tertiary);

    --post-background-color: var(--main-background-color);
    --post-author-name-text-color: var(--text-color-secondary);
    --post-author-id-text-color: var(--text-color-secondary);
    --post-timestamp-text-color: var(--text-color-secondary);
    --post-edited-tag-text-color: var(--text-color-secondary);

    --toast-max-width: 570px;
    --toast-success-bg-color: #28a745;
    --toast-warning-bg-color: #ffc107;
    --toast-error-bg-color: var(--color-error);
    --toast-text-color: var(--button-text-color-primary);
    --toast-dismiss-button-background-color: rgba(0, 0, 0, 0.25);
    --toast-dismiss-button-background-color-hover: rgba(0, 0, 0, 0.15);

    /************
     * ICONS
     ************/

    /* Font family mappings */
    --fa-style-old: "FontAwesome";
    --fa-style-classic: "Font Awesome 7 Free";
    --fa-current-style: var(--fa-style-classic);

    /* fa-paper-plane */
    --submit-fa-icon-code: "\f1d8";
    /* fa-times */
    --close-fa-icon-code: "\f057";
    /* fa-trash */
    --delete-fa-icon-code: "\f1f8";
    /* fa-plus */
    --add-fa-icon-code: "\f067";
    --save-fa-icon-code: "\f0c7";
    /* fa-chevron-down */
    --expand-down-fa-icon-code: "\f150";
    /* fa-bars */
    --grab-fa-icon-code: "\f0c9";
    /* fa-picture-o */
    --picture-fa-icon-code: "\f03e";
    --circle-check-fa-icon-code: "\f058";
    --circle-xmark-fa-icon-code: "\f057";

    /************
     * CHAT MODE STYLING
     ************/
    /* Chat Mode Opacity levels for background fill gradients */
    --chat-gradient-opacity-start: 0.25;
    --chat-gradient-opacity-mid: 0.15;

    /* Chat Mode User Colors/
    /* If you want to add more colors, add a new line with the suffix '-color' incremented by 1 */
    /* The JS in global.js will automatically generate the styles for the new colors */
    --chat-user-0-color: #5b7fa6;
    /* Muted blue */
    --chat-user-1-color: #7b9a7c;
    /* Muted green */
    --chat-user-2-color: #b8956a;
    /* Muted orange/amber */
    --chat-user-3-color: #a67b8a;
    /* Muted pink/mauve */

}

.help-tooltip-icon {
    display: inline-block;
    margin-left: 2px;
    color: var(--text-color-tertiary);
    cursor: help;
    position: relative;
}

/* Tooltip bubble created by JavaScript */
.tooltip-popup {
    position: absolute;
    top: calc(100% + 8px); /* Position below icon with small gap for arrow */
    left: 75%;
    transform: translateX(-25%);
    background-color: #333;
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    white-space: normal;
    max-width: 375px;
    width: max-content;
    font-size: 13px;
    line-height: 1.4;
    z-index: 1000;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    text-align: left;
}

/* Arrow/pointer for the tooltip - points upward to the icon */
.tooltip-popup::before {
    content: "";
    position: absolute;
    bottom: 100%; /* Position above tooltip bubble */
    left: 25%;
    transform: translateX(-90%);
    border: 6px solid transparent;
    border-bottom-color: #333; /* Arrow points up, so bottom border is visible */
    z-index: 1001;
}

/* Style list elements in tooltip */
.tooltip-popup ul {
    margin: 4px 0;
    padding-left: 18px;
    list-style-type: disc;
}

.tooltip-popup li {
    margin: 2px 0;
}

.tooltip-popup b {
    font-weight: 600;
}

/* ==========================================================================
   SECTION: CONFERENCE SPECIFIC
   ========================================================================== */
__SECTION_CONFERENCE_SPECIFIC__ {
    display: none;
}

/* HIDING DOWNVOTE FOR SC */
.question_downvote {
    display: none;
}

/* HIDING TITLE FOR SC */
h1,
h2,
.page-subtitle {
    display: none;
}

/* ==========================================================================
   SECTION: BASE
   ========================================================================== */
__SECTION_BASE__ {
    display: block;
}

html {
    height: 100%;
    background: var(--page-background-color);
    text-align: center;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

body {
    font-family: Sans-Serif;
    font-size: 16px;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    background: var(--main-background-color);
    width: 100%;
    min-width: var(--app-min-width);
    max-width: var(--app-max-width);
    height: 100vh;
    overflow: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* Responsive behavior for smaller screens */
@media (max-width: 600px) {
    body {
        width: 100%;
        max-width: 100%;
    }
}

/* Doublewide layout for intensive admin pages */
body.doublewide {
    max-width: 1200px;
}

/* Left-right pane layout for doublewide pages */
.doublewide-panes {
    display: flex;
    flex-direction: row;
    gap: 20px;
    padding: 20px;
    flex: 1;
    overflow: hidden;
    max-width: 100%;
    box-sizing: border-box;
}

.doublewide-panes .left-pane {
    flex: 0 0 calc(30% - 10px);
    min-width: 0;
    overflow-y: auto;
    padding: 10px;
    box-sizing: border-box;
}

.doublewide-panes .right-pane {
    flex: 0 0 calc(70% - 10px);
    min-width: 0;
    overflow-y: auto;
    padding: 10px;
    box-sizing: border-box;
}

/* Top / title bar */
.title-bar {
    background: var(--top-bar-color);
    color: var(--top-bar-text-color);
    display: block;
    font-size: 13px;
    padding: 10px 20px;
    text-align: left;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    min-height: 1em;
    padding-right: 44px; /* Space for popout button */
}

/* Hide title bar when no-header class is present */
.no-header .title-bar {
    display: none;
}

/* Hide title bar when empty (for channels without titles) */
.title-bar:empty {
    display: none;
}

a {
    color: var(--color-primary);
}

.content {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

h1 {
    background: white;
    padding: 10px;
    font-size: 24px;
}

.footer {
    color: grey;
    display: none;
    margin: 40px 0px;
    width: 100%;
    text-align: center;
    white-space: nowrap;
}

.footer a {
    color: grey;
}

.moderate .footer,
.active-org .footer,
.page-forbidden .footer {
    display: block;
}

.iframe-popout-button {
    position: fixed;
    top: 6px;
    /* Position relative to app content area, not viewport edge */
    right: max(
        calc(50vw - var(--app-max-width) / 2 + 6px),
        6px
    );
    width: 36px;
    height: 36px;
    background: var(--color-primary);
    color: white;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 10;
    transition: all 0.2s ease;
}

.iframe-popout-button:hover {
    background: var(--color-secondary);
    transform: scale(1.1);
}

/* Show only when show_popout_button parameter is present */
body.show-popout-button .iframe-popout-button {
    display: flex;
}

/* In your QnA app's CSS */
body.hide-popout-button .iframe-popout-button {
    display: none !important;
}

.main-content {
    width: 100%;
    flex: 1;
}

/* Only apply flex layout constraints when posts/questions sections exist */
.main-content:has(.questions-section),
.main-content:has(.posts-section) {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    height:100%;
}

/* For pages without posts structure (like polls moderation), allow normal scrolling */
.main-content:not(:has(.questions-section)):not(:has(.posts-section)) {
    overflow-y: auto;
}

/* Container sections need to be flex containers too */
.questions-section,
.posts-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* Section titles should not take flex space */
.questions-section > .section-title,
.posts-section > .section-title {
    flex-shrink: 0;
}

h1,
h2,
h3 {
    color: var(--color-primary);
    font-family: "Lato", "sans-serif";
    font-weight: 300;
}

h3 {
    font-size: 18px;
}

.section-title {
    display: none;
}

a:focus,
button:focus,
textarea:focus,
input:focus,
input[type]:focus,
.uneditable-input:focus {
    border-color: var(--focus-default-border-color);
    outline: 0 none;
}

.login-form,
.join-form,
.post-question-form,
.post-reply-form,
.edit-comment-form,
.edit-question-form,
.current-events {
    background: white;
    margin: 20px auto;
    padding: 0;
    min-width: 200px;
}

.login-form button,
.join-form button,
.post-question-form button,
.post-reply-form button,
.edit-comment-form button,
.edit-question-form button {
    background: var(--color-primary);
    color: var(--button-text-color-primary);
    font-size: 10px;
    text-transform: uppercase;
    width: 50%;
    margin: 10px;
    font-weight: bold;
    border-radius: 40px;
    border: 0;
    padding: 10px;
    cursor: pointer;
}

/* Temporary styling for edit comment form
      we will be replacing the edit page with inline edit soon */
.edit-question-form button {
    width: 20%;
    display: inline-block;
}

.login-form label,
.join-form label,
.post-question-form label,
.post-reply-form label,
.edit-comment-form label,
.edit-question-form label {
    display: block;
    margin: 10px 0px;
}

.login-form label span,
.join-form label span,
.post-question-form label span,
.post-reply-form label span,
.edit-comment-form label span,
.edit-question-form label span {
    display: none;
}

.login-form input,
.join-form input,
.post-question-form textarea,
.post-reply-form textarea,
.edit-comment-form textarea,
.edit-question-form textarea {
    /* FIXME */
    background: rgba(212, 55, 49, 0.15);
    width: 86%;
    font-size: 16px;
    margin: 0 10px;
    padding: 10px;
    min-height: 85px;
    border: 0;
}

.submit-post-disclaimer {
    display: none;
}

.anon-author::before {
    content: "Anonymous";
}

.auth-user form {
    display: inline;
}

.show-hidden-posts-link {
    display: inline-block;
    text-align: center;
    font-size: small;
    padding: 4px 8px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    background: var(--compose-box-background-color);
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.2s ease;
}

.show-hidden-posts-link:hover {
    background: var(--post-background-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transform: translateX(-50%) translateY(-1px);
}

.show-hidden-posts-link a {
    color: #333;
    text-decoration: none;
    font-weight: 500;
    display: block;
}

.show-hidden-posts-link a:hover {
    text-decoration: none;
}

.hidden {
    opacity: 0.25;
}

/* Visibility-based hiding for posts with charts/wordclouds */
/* This prevents Alpine x-show from using display:none, which breaks chart sizing */
[x-show].hideable-post-hidden {
    visibility: hidden !important;
    position: absolute !important;
    top: 0 !important;
    left: -9999px !important;
    pointer-events: none !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Override Alpine's default display:none for elements with hideable-post-hidden class */
[x-show][style*="display: none"].hideable-post-hidden {
    display: block !important;
}

.cursor-popup {
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 13px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-width: 200px;
    word-wrap: break-word;
}

.cursor-popup .popup-content {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cursor-popup .fa {
    flex-shrink: 0;
}

/* ==========================================================================
   SECTION: NAVIGATION
   ========================================================================== */
__SECTION_NAVIGATION__ {
    display: block;
}

.primary-nav {
    background: var(--top-nav-background-color);
    padding: 10px 20px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    z-index: 5;
    flex-shrink: 0;
}

.primary-nav:empty {
    display: none;
}

.secondary-nav {
    display: block;
    margin-top: 15px;
    z-index: 4;
}

.nav-item {
    background: var(--color-primary);
    color: var(--button-text-color-primary);
    padding: 3px 15px;
    margin: 0px 8px;
    text-decoration: none;
}

.primary-nav .nav-item {
    background: var(--color-primary);
    border-radius: 40px;
    padding: 10px 15px;
    display: inline-flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 10px;
    text-transform: uppercase;
}

.primary-nav .active.nav-item {
    background: #000;
}

.secondary-nav .nav-item {
    background: cadetblue;
    color: white;
}

.secondary-nav .nav-item.active {
    background: var(--active-nav-item-background-color);
    font-weight: bold;
    cursor: default;
    pointer-events: none;
}

.active.nav-item {
    background: var(--active-nav-item-background-color);
}

.left-filter-bar-inputs {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.left-filter-bar-inputs .filter-input {
    display: flex;
    flex-direction: column;
}

.left-filter-bar-inputs label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    text-align: left;
    font-size: 11pt;
}

.left-filter-text-input {
    display: block;
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.left-filter-bar .bottom-buttons {
    display: flex;
}

.left-filter-bar .bottom-buttons .apply-button {
    padding: 8px 16px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.left-filter-bar .bottom-buttons .clear-button {
    padding: 8px 16px;
    font-size: 10pt;
    text-decoration: none;
}

/* ==========================================================================
   SECTION: POSTS
   ========================================================================== */
__SECTION_POSTS__ {
    display: block;
}

.posts {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.posts .post {
    background: var(--post-background-color);
    border-bottom: var(--color-secondary) 1px solid;
    text-align: left;
    padding: 0px 10px 6px 10px;
    min-width: 200px;
    min-height: 39.5px;
    padding-top: 4.5px;
    padding-bottom: 4.5px;
    /* Trying to override siggraph external css that messes with post widths */
    width: auto !important;
}

.posts .poll.no-bottom-border {
    border-bottom: none !important;
}

.posts .question .primary::after {
    content: "";
    display: table;
    clear: both;
}

.posts .question .puttable-user-score,
.posts .question .active-user-score {
    font-size: 24px;
    padding: 0px 6px 0px 6px;
    background: none;
    border: none;
    cursor: pointer;
}

.posts .question .active-user-score:not(:disabled),
.posts .question .puttable-user-score:not(:disabled):active {
    color: var(--color-primary);
    cursor: pointer;
}

.posts .question .active-user-score:not(:disabled):active,
.posts .question .puttable-user-score:not(:disabled) {
    color: grey;
    cursor: pointer;
}

.posts .question .active-user-score:disabled,
.posts .question .puttable-user-score:disabled:active,
.posts .question .active-user-score:disabled:active,
.posts .question .puttable-user-score:disabled {
    cursor: not-allowed;
    color: lightgrey;
}



.posts .question .primary .score-section {
    display: inline-block;
    width: 60px;
    vertical-align: top;
}

.posts .question .primary .question-text {
    display: inline;
    line-height: 20px;
    overflow-wrap: anywhere;
}

.posts .question-text .edited-snip,
.posts .reply-text .edited-snip {
    color: var(--post-edited-tag-text-color);
    font-size: 12px;
}

.posts .question .primary .right-bar {
    display: inline-block;
    padding: 5px 0px 10px 0px;
    width: 100%;
}
/*
.posts .poll-result .right-bar {
    display: inline-block;
    padding: 0px;
    width: 100%;
} */

.posts .question .primary .score-section .score-text {
    display: inline-block;
}

.posts .post .post-action-button {
    background: var(--color-secondary);
    color: var(--button-text-color-primary);
    float: right;
    text-align: center;
    padding: 2px 10px;
    margin: 2px;
    border-radius: 20px;
    border: 0;
    font-weight: bold;
    font-size: 10px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    /* display: inline-flex;
	justify-content: center;
	align-items: center; */
}

.posts .post .toggle-hide-post-button-v2 {
    background: none;
    color: var(--color-secondary);
    border: none;
    float: right;
    scale: 1;
    cursor: pointer;
}

.posts .question .primary .right-bar .authorname {
    color: var(--post-author-name-text-color);
    position: relative;
    margin-right: 7px;
    display: inline-block;
    font-size: 12px;
    font-weight: 300;
}

.posts .question .primary .authorid {
    color: var(--post-author-id-text-color);
    font-style: italic;
    font-weight: 200;
    font-size: 12px;
    margin-right: 7px;
}

.posts .question .primary .right-bar .timestamp {
    color: var(--post-timestamp-text-color);
    position: relative;
    margin-right: 7px;
    display: inline-block;
    font-size: 12px;
    font-weight: 300;
}

.filler {
    display: block;
    height: 0px;
    overflow: hidden;
}

label.question-text-field-label {
    margin-bottom: 10px;
}

#question-text-field-chars-remaining,
#reply-text-field-chars-remaining {
    color: var(--textbox-chars-remaining-text-color);
    text-align: right;
    padding-right: 10px;
}

#question-text-field-chars-remaining.err,
#reply-text-field-chars-remaining.err {
    color: var(--color-primary);
}

#question-text-field-chars-remaining.err {
    color: var(--color-primary);
}

.question .replies .reply {
    border-top: 1px solid lightgrey;
    display: flex;
    flex-direction: row;
    font-size: 14px;
    color: grey;
    /* width:  100%; */
    /* flex-wrap: wrap; */
    flex-wrap: wrap;
    row-gap: 7px;
    margin-left: 5%;
    padding: 5px 0px 7px 0px;
}

.question .replies .reply .reply-text {
    order: 1;
    width: 100%;
    overflow-wrap: anywhere;
}

.question .replies .reply .reply-author {
    order: 2;
    width: 50%;
    font-weight: 300;
    font-size: 12.5px;
}

.question .replies .reply .right-bar {
    order: 3;
    width: 50%;
}

.posts .post {
    order: 0;
    flex-shrink: 0;
}

.posts .primary {
    display: flex;
    flex-flow: wrap;
}

/* ==========================================================================
   SECTION: CHAT MODE
   ========================================================================== */
__SECTION_CHAT_MODE__ {
    display: block;
}

/* Chat Mode Styling */
body.chat .posts {
    /* Inherits flex layout from base .posts */
}

/* Auto-scroll to bottom by default */
body.chat .posts::after {
    content: "";
    height: 1px;
    order: 1;
}

/* Base gradient for all chat users */
body.chat .primary {
    position: relative;
    background: none;
    /* Clear any existing background */
}

body.chat .primary::before {
    content: "";
    position: absolute;
    top: -4.5px;
    left: -12px;
    right: 0;
    bottom: -2.5px;
    pointer-events: none;
    z-index: 1;
}

/* Create colored "border" using ::after */
body.chat .primary::after {
    content: "";
    position: absolute;
    top: -4.5px;
    left: -12px;
    width: 4px;
    height: calc(100% + 4.5px + 2.5px);
    pointer-events: none;
}

/* Individual "border" colors */
body.chat .primary.chat-user-0::after {
    background: var(--chat-user-0-color);
}

body.chat .primary.chat-user-1::after {
    background: var(--chat-user-1-color);
}

body.chat .primary.chat-user-2::after {
    background: var(--chat-user-2-color);
}

body.chat .primary.chat-user-3::after {
    background: var(--chat-user-3-color);
}

/* ==========================================================================
   SECTION: ADMIN PAGES
   ========================================================================== */
__SECTION_ADMIN_PAGES__ {
    display: block;
}

body.moderate>.questions .primary,
body.removed-questions>.questions .primary {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: 7px;
    color: grey;
    padding: 5px 0px 7px 0px;
}

body.moderate>.questions .primary .meta-section,
body.removed-questions>.questions .primary .meta-section {
    order: 1;
    width: 20%;
    font-weight: 200;
    font-size: 12px;
    overflow-wrap: anywhere;
}

body.moderate>.questions .primary .question-text,
body.removed-questions>.questions .primary .question-text {
    order: 2;
    width: 80%;
}

body.moderate>.questions .primary .authorname,
body.removed-questions>.questions .primary .authorname {
    order: 3;
    flex: 1;
    align-self: flex-end;
    font-size: 12px;
}

body.moderate>.questions .primary .right-bar,
body.removed-questions>.questions .primary .right-bar,
body.moderate>.questions .primary .right-buttons,
body.removed-questions>.questions .primary .right-buttons {
    order: 4;
    /* align: right; */
    align-self: flex-end;
}

body.moderate .remove-question-button,
body.removed-questions .remove-question-button {
    align-self: flex-end;
    cursor: pointer;
}

body.moderate>.questions .primary .meta-section .score-text::before,
body.removed-questions>.questions .primary .meta-section .score-text::before {
    content: "Score: ";
}

body.moderate>.questions .primary .meta-section .post-removed-by::before,
body.removed-questions>.questions .primary .meta-section .post-removed-by::before {
    content: "Removed by: ";
}

/* Moderation post layout with metadata on the left */
.mod-post {
    display: flex;
    flex-direction: row;
    gap: 15px;
    padding: 10px;
    border-bottom: 1px solid #e0e0e0;
}

.mod-post .meta-section {
    flex: 0 0 125px;
    font-size: 12px;
    color: #666;
    line-height: 1.6;
    justify-items: flex-end;
}

.mod-post .meta-section .post-channel {
    font-weight: 600;
    color: #333;
}

.mod-post .meta-section .post-timestamp {
    font-size: 11px;
}

.mod-post .meta-section .vote-count,
.mod-post .meta-section .created-by {
    font-size: 11px;
}

.mod-post .post-content {
    flex: 1;
    min-width: 0;
}

.mod-post .post,
.mod-post .poll {
    padding-top: 0 !important;
}

/* ==========================================================================
   SECTION: ACTIVE CHANNEL PAGES
   ========================================================================== */
__SECTION_ACTIVE_CHANNEL_PAGES__ {
    display: block;
}

/* Scrollable container for active channels page */
.active-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    padding: 20px;
}

body.active-org .active-channel {
    display: flex;
    flex-direction: row;
    min-width: 350px;
}

body.active-org .active-channel .last-mod-time {
    flex: 3;
    text-align: right;
}

body.active-org .active-channel .channel-id {
    flex: 4;
}

body.active-org .active-channel .chan-question-count {
    flex: 2;
    text-align: left;
}

/* ==========================================================================
   SECTION: COMPOSE BOX
   ========================================================================== */
__SECTION_COMPOSE_BOX__ {
    display: block;
}

.compose-box {
    background: var(--compose-box-background-color);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow:
        0 -4px 20px rgba(0, 0, 0, 0.08),
        0 -1px 3px rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 20px;
    z-index: 100;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

/* Compose form container */
.compose-form {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    /* For absolute positioning of button */
}

/* Input container with padding for floating button */
.compose-input-container {
    position: relative;
    padding-right: 60px;
    /* Space for floating button */
}

/* Modern textarea styling */
.compose-input-container textarea {
    background: var(--compose-box-textarea-background-color);
    border: var(--compose-box-textarea-border);
    width: 100%;
    box-sizing: border-box;
    border-radius: 8px;
    padding: 16px;
    /* padding-right: 60px; */
    /* Extra padding for button overlap */
    /* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; */
    font-size: 16px;
    line-height: 1.4;
    /* resize: vertical; */
    min-height: 48px;
    max-height: 70px;
    transition: all 0.2s ease;
    outline: none;
}

.compose-input-container textarea:focus {
    border-color: var(--compose-box-focus-border-color);
    box-shadow:
        0 0 0 3px rgba(0, 102, 204, 0.1),
        0 2px 8px rgba(0, 0, 0, 0.04);
    transform: translateY(-1px);
}

/* Floating submit button */
.compose-actions {
    position: absolute;
    bottom: 25px;
    right: 8px;
    z-index: 10;
}

.compose-submit .submit-button {
    background: var(--compose-box-submit-button-background-color);
    color: var(--compose-box-submit-button-text-color);
    box-shadow: 0 2px 8px rgba(0, 102, 204, 0.3);
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    /* Circular button */
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    padding: 0;
}

.compose-submit .submit-button:hover:not(:disabled) {
    background: var(--compose-box-submit-button-background-color-hover);
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.4);
    transform: translateY(-1px) scale(1.05);
}

.compose-submit .submit-button:disabled {
    background: var(--compose-box-submit-button-background-color-disabled);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    cursor: not-allowed;
    transform: none;
}

/* Icon styling - using Font Awesome or similar */
.compose-submit .submit-button i {
    font-size: 16px;
}

.compose-submit .submit-button::before {
    /* Try FontAwesome first, fallback to a CSS arrow */
    font-family: var(--fa-current-style);
    content: var(--submit-fa-icon-code);
    /* fa-paper-plane */
    font-size: 18px;
    font-weight: 900;
    display: inline-block;
}

/* Fallback for when FontAwesome isn't available */
@supports not (font-family: var(--fa-current-style)) {
    .compose-submit .submit-button::before {
        content: "→";
        font-family: sans-serif;
        font-weight: bold;
        transform: rotate(-45deg);
    }
}

/* Loading state for circular button */
.compose-submit .submit-button[data-loading="true"] {
    position: relative;
}

.compose-submit .submit-button[data-loading="true"]::before {
    display: none;
    /* Hide arrow during loading */
}

.compose-submit .submit-button[data-loading="true"]::after {
    color: var(--compose-box-submit-button-text-color);
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 18px;
    height: 18px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Error message styling */
.err-msg {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    margin-top: 8px;
    margin-bottom: 8px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .compose-box {
        padding: 16px;
    }

    .compose-input-container {
        padding-right: 56px;
    }

    .compose-input-container textarea {
        font-size: 14px;
        padding: 14px;
    }

    .char-count {
        padding-right: 56px;
    }

    .compose-actions {
        bottom: 25px;
        right: 6px;
    }

    .compose-submit .submit-button {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
}

/* ==========================================================================
   SECTION: INLINE REPLY BOX - COMPACT VERSION
   ========================================================================== */

__SECTION_INLINE_REPLY_BOX__ {
    display: block;
}

.inline-reply-box {
    /* padding: 8px;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); */
    min-height: 80px;
    /* Give some minimum height */
    width: 100%;
}

.reply-form {
    display: flex;
    align-items: stretch;
    /* Make all children same height */
    gap: 12px;
    height: 100%;
    box-sizing: border-box;
}

.reply-input-container {
    flex: 1;
    /* Take up remaining space */
    min-width: 0;
    /* Important: allows flex item to shrink below content size */
    display: flex;
    flex-direction: column;
}

.reply-textarea {
    /* Remove width: 100% since it's causing overflow */
    background: var(--reply-box-background-color);
    border: var(--reply-box-border);
    flex: 1;
    /* Fill the container height */
    border-radius: 4px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    transition:
        border-color 0.15s ease-in-out,
        box-shadow 0.15s ease-in-out;
    overflow-y: auto;
    resize: vertical;
    padding: 8px 12px;
    box-sizing: border-box;
    min-height: 60px;
    /* Minimum usable height */
}

.reply-textarea:focus {
    border-color: var(--reply-box-focus-border-color);
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.15);
    outline: none;
}

.reply-char-counter {
    color: var(--reply-box-chars-remaining-text-color);
    background: var(--reply-box-chars-remaining-background-color);
    position: absolute;
    bottom: 4px;
    right: 50px;
    font-size: 11px;
    padding: 1px 3px;
    border-radius: 2px;
    pointer-events: none;
}

.reply-buttons {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
    /* Don't allow buttons to shrink */
    width: 40px;
    /* Fixed width for consistency */
    justify-content: flex-start;
    /* Align buttons to top */
}

.reply-submit-button,
.reply-cancel-button {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    position: relative;
    flex-shrink: 0;
    /* Don't let buttons shrink */
}

.reply-submit-button {
    color: var(--reply-submit-button-text-color);
    background-color: var(--reply-submit-button-color);
}

.reply-submit-button:hover:not(:disabled) {
    background-color: var(--reply-submit-button-color-hover);
    transform: translateY(-1px);
}

.reply-submit-button:disabled {
    background-color: var(--reply-submit-button-color-disabled);
    cursor: not-allowed;
    opacity: 0.6;
}

.reply-cancel-button {
    background-color: var(--reply-cancel-button-color);
    color: var(--reply-cancel-button-text-color);
}

.reply-cancel-button:hover {
    background-color: var(--reply-cancel-button-color-hover);
    transform: translateY(-1px);
}

/* FontAwesome 4 Icons */
.reply-submit-button::before {
    content: var(--submit-fa-icon-code);
    /* fa-paper-plane */
    font-family: var(--fa-current-style);
}

.reply-cancel-button::before {
    content: var(--close-fa-icon-code);
    /* fa-times */
    font-family: var(--fa-current-style);
}

/* Loading state for submit button */
.reply-submit-button[data-loading="true"]::before {
    content: "\f110";
    /* fa-spinner */
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.reply-errors {
    margin-top: 8px;
    grid-column: 1 / -1;
    /* Span full width if using grid */
}

.error-message {
    color: #dc3545;
    font-size: 13px;
    padding: 6px 10px;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    margin-bottom: 4px;
}

/* Focus state improvements */
.reply-form:focus-within .reply-buttons {
    opacity: 1;
}

.reply-buttons {
    opacity: 0.8;
    transition: opacity 0.15s ease-in-out;
}

/* ==========================================================================
   SECTION: QUESTION CONTENT CONTAINER
   ========================================================================== */

.question-content-container {
    min-height: 1.5em;
    position: relative;
    display: flex;
    width: 100%;
}

.question-text {
    transition: opacity 0.2s ease-in-out;
}

.inline-edit-box {
    transition: opacity 0.2s ease-in-out;
}

/* ==========================================================================
   SECTION: INLINE EDIT BOX - REPLACES POST CONTENT
   ========================================================================== */

.inline-edit-box {
    /* Make edit box occupy same space as post text */
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    min-height: auto;
}

.edit-form {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: 0;
}

.edit-input-container {
    flex: 1;
    min-width: 0;
    position: relative;
}

.edit-textarea {
    background: var(--main-background-color);
    border: 2px solid var(--reply-box-focus-border-color);
    border-radius: 4px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    transition:
        border-color 0.15s ease-in-out,
        box-shadow 0.15s ease-in-out;
    overflow-y: auto;
    resize: vertical;
    padding: 8px 12px;
    box-sizing: border-box;
    min-height: 60px;
    width: 100%;

    /* Match the visual style of the post text */
    font-size: inherit;
    line-height: inherit;
    color: var(--text-color-primary);
}

.edit-textarea:focus {
    border-color: var(--reply-box-focus-border-color);
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.15);
    outline: none;
}

.edit-char-counter {
    position: absolute;
    bottom: 4px;
    right: 4px;
    color: var(--reply-box-chars-remaining-text-color);
    background: var(--reply-box-chars-remaining-background-color);
    font-size: 11px;
    padding: 2px 4px;
    border-radius: 2px;
    pointer-events: none;
    z-index: 1;
}

.edit-char-counter.over-limit {
    color: #dc2626;
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.edit-buttons {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
    width: 40px;
    margin-top: 8px;
    /* Align with textarea top */
}

.edit-submit-button,
.edit-cancel-button {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    position: relative;
    flex-shrink: 0;
}

.edit-submit-button {
    color: var(--button-text-color-primary);
    background-color: var(--color-primary);
}

.edit-submit-button:hover:not(:disabled) {
    background-color: var(--color-secondary);
    transform: translateY(-1px);
}

.edit-submit-button:disabled {
    background-color: var(--button-disabled-background-color-primary);
    cursor: not-allowed;
    opacity: 0.6;
}

.edit-cancel-button {
    background-color: #6c757d;
    color: var(--button-text-color-primary);
}

.edit-cancel-button:hover {
    background-color: #545b62;
    transform: translateY(-1px);
}

/* FontAwesome 4 Icons */
.edit-submit-button::before {
    content: var(--save-fa-icon-code);
    /* fa-save */
    font-family: var(--fa-current-style);
}

.edit-cancel-button::before {
    content: var(--close-fa-icon-code);
    /* fa-times */
    font-family: var(--fa-current-style);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .edit-form {
        gap: 8px;
    }

    .edit-buttons {
        width: 36px;
    }

    .edit-submit-button,
    .edit-cancel-button {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
}

/* Loading states for edit box */
.edit-textarea.submitting {
    opacity: 0.7;
    cursor: not-allowed;
}

.edit-loading-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.9);
    padding: 8px 12px;
    border-radius: 4px;
    color: var(--color-primary);
    font-size: 14px;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.edit-submit-button.loading {
    opacity: 0.7;
    cursor: not-allowed;
}

.edit-submit-button.loading::before {
    content: "\f110";
    /* fa-spinner */
    animation: spin 1s linear infinite;
}

.edit-errors {
    margin-top: 8px;
}

.edit-errors .error-message {
    color: #dc3545;
    font-size: 13px;
    padding: 6px 10px;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    margin-bottom: 4px;
}

/* Spinner animation */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ==========================================================================
   SECTION: POST ACTIONS DROPDOWN
   ========================================================================== */

__SECTION_POST_ACTIONS_DROPDOWN__ {
    display: block;
}

.post-actions-dropdown {
    position: relative;
    /* display: inline-block;  */
}

.dropdown-trigger {
    color: var(--post-actions-dropdown-trigger-color);
    border: none;
    background: none;
    cursor: pointer;
    /* padding: 4px 8px; */
    border-radius: 4px;
    transition: all 0.2s ease;
}

.dropdown-trigger:hover,
.dropdown-trigger.active {
    background-color: var(--post-actions-dropdown-trigger-background-color-hover);
    color: var(--post-actions-dropdown-trigger-color-hover);
}

.dropdown-menu {
    background: var(--post-actions-dropdown-menu-background-color);
    border: 1px solid #ddd;
    position: absolute;
    top: 100%;
    right: 0;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    min-width: 120px;
    z-index: 1000;
    overflow: hidden;
}

.dropdown-item {
    display: block;
    width: 100%;
    padding: 8px 12px;
    text-decoration: none;
    color: #333;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.2s ease;
}

.dropdown-item:hover {
    background-color: var(--post-actions-dropdown-item-background-color-hover);
    color: var(--post-actions-dropdown-item-color-hover);
    text-decoration: none;
}

.dropdown-item i {
    margin-right: 8px;
    width: 14px;
}

.dropdown-item-form {
    margin: 0;
    padding: 0;
}

/* UNUSED 2025.07.07 */
/* .remove-button:hover {
    background-color: #fee;
    color: #c33;
} */

/* ==========================================================================
   SECTION: NOTYF (TOASTS)
   ========================================================================== */
__SECTION_NOTYF__ {
    display: block;
}

@-webkit-keyframes notyf-fadeinup {
    0% {
        opacity: 0;
        /* transform:translateY(25%) */
    }

    to {
        opacity: 1;
        /* transform:translateY(0) */
    }
}

@keyframes notyf-fadeinup {
    0% {
        opacity: 0;
        /* transform:translateY(25%) */
    }

    to {
        opacity: 1;
        /* transform:translateY(0) */
    }
}

@-webkit-keyframes notyf-fadeinleft {
    0% {
        opacity: 0;
        /* transform:translateX(25%) */
    }

    to {
        opacity: 1;
        /* transform:translateX(0) */
    }
}

@keyframes notyf-fadeinleft {
    0% {
        opacity: 0;
        /* transform:translateX(25%) */
    }

    to {
        opacity: 1;
        /* transform:translateX(0) */
    }
}

@-webkit-keyframes notyf-fadeoutright {
    0% {
        opacity: 1;
        /* transform:translateX(0) */
    }

    to {
        opacity: 0;
        /* transform:translateX(25%) */
    }
}

@keyframes notyf-fadeoutright {
    0% {
        opacity: 1;
        /* transform:translateX(0) */
    }

    to {
        opacity: 0;
        /* transform:translateX(25%) */
    }
}

@-webkit-keyframes notyf-fadeoutdown {
    0% {
        opacity: 1;
        /* transform:translateY(0) */
    }

    to {
        opacity: 0;
        /* transform:translateY(25%) */
    }
}

@keyframes notyf-fadeoutdown {
    0% {
        opacity: 1;
        /* transform:translateY(0) */
    }

    to {
        opacity: 0;
        /* transform:translateY(25%) */
    }
}

@-webkit-keyframes ripple {
    0% {
        transform: scale(0) translateY(-45%) translateX(13%);
    }

    to {
        transform: scale(1) translateY(-45%) translateX(13%);
    }
}

@keyframes ripple {
    0% {
        transform: scale(0) translateY(-45%) translateX(13%);
    }

    to {
        transform: scale(1) translateY(-45%) translateX(13%);
    }
}

.notyf {
    color: var(--toast-text-color);
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    pointer-events: none;
    box-sizing: border-box;
    padding: 20px;
}

.notyf__icon--error,
.notyf__icon--success {
    background: #fff;
    height: 21px;
    width: 21px;
    border-radius: 50%;
    display: block;
    margin: 0 auto;
    position: relative;
}

.notyf__icon--error:after,
.notyf__icon--error:before {
    content: "";
    background: currentColor;
    display: block;
    position: absolute;
    width: 3px;
    border-radius: 3px;
    left: 9px;
    height: 12px;
    top: 5px;
}

.notyf__icon--error:after {
    transform: rotate(-45deg);
}

.notyf__icon--error:before {
    transform: rotate(45deg);
}

.notyf__icon--success:after,
.notyf__icon--success:before {
    content: "";
    background: currentColor;
    display: block;
    position: absolute;
    width: 3px;
    border-radius: 3px;
}

.notyf__icon--success:after {
    height: 6px;
    transform: rotate(-45deg);
    top: 9px;
    left: 6px;
}

.notyf__icon--success:before {
    height: 11px;
    transform: rotate(45deg);
    top: 5px;
    left: 10px;
}

.notyf__toast {
    display: block;
    overflow: hidden;
    pointer-events: auto;
    -webkit-animation: notyf-fadeinup 0.3s ease-in forwards;
    animation: notyf-fadeinup 0.3s ease-in forwards;
    box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.25);
    position: relative;
    padding: 0 15px;
    border-radius: 2px;
    /*max-width:300px;*/
    max-width: var(--toast-max-width);
    width: 100%;
    /* transform:translateY(25%); */
    box-sizing: border-box;
    flex-shrink: 0;
}

.notyf__toast--disappear {
    /* transform:translateY(0); */
    -webkit-animation: notyf-fadeoutdown 1s forwards;
    animation: notyf-fadeoutdown 1s forwards;
    -webkit-animation-delay: 0.25s;
    animation-delay: 0.25s;
}

.notyf__toast--disappear .notyf__icon,
.notyf__toast--disappear .notyf__message {
    -webkit-animation: notyf-fadeoutdown 0.4s forwards;
    animation: notyf-fadeoutdown 0.4s forwards;
    opacity: 1;
    /* transform:translateY(0) */
}

.notyf__toast--disappear .notyf__dismiss {
    -webkit-animation: notyf-fadeoutright 0.3s forwards;
    animation: notyf-fadeoutright 0.3s forwards;
    opacity: 1;
    transform: translateX(0);
}

.notyf__toast--disappear .notyf__message {
    -webkit-animation-delay: 0.05s;
    animation-delay: 0.05s;
}

.notyf__toast--upper {
    margin-bottom: 20px;
}

.notyf__toast--lower {
    margin-top: 20px;
}

.notyf__toast--dismissible .notyf__wrapper {
    padding-right: 30px;
}

.notyf__ripple {
    width: 800px;
    height: 400px;
    position: absolute;
    transform-origin: bottom right;
    right: 0;
    top: 0;
    border-radius: 50%;
    transform: scale(0) translateY(-51%) translateX(13%);
    z-index: 5;
    -webkit-animation: ripple 0.4s ease-out forwards;
    animation: ripple 0.4s ease-out forwards;
}

.notyf__wrapper {
    display: flex;
    align-items: center;
    padding-top: 17px;
    padding-bottom: 17px;
    padding-right: 15px;
    border-radius: 3px;
    position: relative;
    z-index: 10;
}

.notyf__icon {
    width: 22px;
    text-align: center;
    font-size: 1.3em;
    opacity: 0;
    -webkit-animation: notyf-fadeinup 0.3s forwards;
    animation: notyf-fadeinup 0.3s forwards;
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
    margin-right: 13px;
}

.notyf__dismiss {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 26px;
    margin-right: -15px;
    -webkit-animation: notyf-fadeinleft 0.3s forwards;
    animation: notyf-fadeinleft 0.3s forwards;
    -webkit-animation-delay: 0.35s;
    animation-delay: 0.35s;
    opacity: 0;
}

.notyf__dismiss-btn {
    background-color: var(--toast-dismiss-button-background-color);
    border: none;
    cursor: pointer;
    transition:
        opacity 0.2s ease,
        background-color 0.2s ease;
    outline: none;
    opacity: 0.35;
    height: 100%;
    width: 100%;
}

.notyf__dismiss-btn:after,
.notyf__dismiss-btn:before {
    background: #fff;
    content: "";
    height: 12px;
    width: 2px;
    border-radius: 3px;
    position: absolute;
    left: calc(50% - 1px);
    top: calc(50% - 5px);
}

.notyf__dismiss-btn:after {
    transform: rotate(-45deg);
}

.notyf__dismiss-btn:before {
    transform: rotate(45deg);
}

.notyf__dismiss-btn:hover {
    background-color: var(--toast-dismiss-button-background-color-hover);
    opacity: 0.7;
}

.notyf__dismiss-btn:active {
    opacity: 0.8;
}

.notyf__message {
    vertical-align: middle;
    position: relative;
    opacity: 0;
    -webkit-animation: notyf-fadeinup 0.3s forwards;
    animation: notyf-fadeinup 0.3s forwards;
    -webkit-animation-delay: 0.25s;
    animation-delay: 0.25s;
    line-height: 1.5em;
}

@media only screen and (max-width: 480px) {
    .notyf {
        padding: 0;
    }

    .notyf__ripple {
        height: 600px;
        width: 600px;
        -webkit-animation-duration: 0.5s;
        animation-duration: 0.5s;
    }

    .notyf__toast {
        max-width: none;
        border-radius: 0;
        box-shadow: 0 -2px 7px 0 rgba(0, 0, 0, 0.13);
        width: 100%;
    }

    .notyf__dismiss {
        width: 56px;
    }
}


/* ===== static/css/poll.css ===== */
:root {
    --poll-live-background-color: white;
    --poll-selected-option-background-color: maroon;
    --poll-selected-option-text-color: white;
    --poll-selected-option-font-weight: bold;

    --poll-freeform-textarea-background-color: white;

    /************
     * POLL CHART STYLING
     ************/
    --poll-results-datalabel-var-prefix: poll-results-datalabels-;
    --poll-results-color-palette-var-prefix: poll-results-colors-palette-;

    /* dataLabel text */
    --poll-results-datalabels-style-font-size: 13px;
    --poll-results-datalabels-style-colors: black;
    --poll-results-datalabels-style-font-weight: 550;

    --poll-results-datalabels-dropshadow-enabled: false;
    /* --poll-results-datalabels-dropshadow-text-anchor: start; */
    /* --poll-results-datalabels-dropshadow-left: 2; */
    /* --poll-results-datalabels-dropshadow-top: 2; */

    /* --poll-results-datalabel-dropshadow-blur: 1px; */
    /* --poll-results-datalabel-dropshadow-color: #000; */
    /* --poll-results-datalabel-dropshadow-opacity: 0.45; */

    /* Bar color palettes */
    /* If multiple palettes are defined, then polls will cycle through the palettes */
    /* To add more color palettes, add a new line with the suffix '-palette-X' incremented by 1 */
    --poll-results-colors-palette-1: #e3923d;
    --poll-results-colors-palette-2: #da6437;
    --poll-results-colors-palette-3: #c49a6c;

    /* Quiz styling */
    --correct-quiz-option-fa-icon-code: var(--circle-check-fa-icon-code);
    /* fa-check */
    --correct-quiz-option-icon-color: green;
    --incorrect-quiz-option-fa-icon-code: var(--circle-xmark-fa-icon-code);
    /* fa-times */
    --incorrect-quiz-option-icon-color: red;
}

/* Increase the font size of the title bar for a single-poll page */
body.poll::before {
    font-size: 16px;
}

/***********
* POLLS RESULT
***********/

.posts .poll-result {
    padding-top: 15px !important;
}

.poll-result {
    border-bottom: 1px solid var(--color-secondary);
    padding-bottom: 30px;
}

.poll-prompt {
    /* Make this very responsive to resizing of the container */
    width: 100%;
    color: #333;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
}

.poll-mod-disp .poll-prompt {
    color: #333;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.5;
    display: flex;
    padding: 12px;
    margin: 0;
    backdrop-filter: brightness(.85);
    box-sizing: border-box;   /* FIXME: This should probably be global. Simplifies layout enormously. */
}

/* ==========================================================================
   SECTION: POLLS: LIVE
   ========================================================================== */
__SECTION_POLLS_LIVE__ {
    display: block;
}

/* Base poll container */
.posts .poll {
    padding-top: 15px;
    padding-bottom: 30px;
    /* Make room for the hide button, etc*/
    background: var(--poll-live-background-color);
    border-bottom: 1px solid var(--color-secondary);
}

.posts .post.no-bottom-border {
    border-bottom: none;
}

/* .poll.status-live .poll-vote-finalize-button:hover:not(:disabled) {
    background: var(--color-secondary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(212, 55, 49, 0.3);
}

.poll.status-live .poll-vote-finalize-button:disabled {
    background: var(--button-disabled-background-color-primary);
    cursor: not-allowed;
    opacity: 0.6;
    transform: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.poll.status-live .poll-vote-finalize-button::before {
    content: "Submit Answers";
}

.poll.status-live .poll-vote-finalize-button {
    background: var(--color-primary);
    color: var(--button-text-color-primary);
    border: none;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    justify-self: center;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
} */

.poll.status-live .poll-vote-finalize-button {
    /* Layout */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
    margin-bottom: 16px;

    /* Typography - softer appearance */
    font-size: 14px;
    font-weight: 500;
    /* Changed from 600 to be less bold */
    letter-spacing: 0.01em;

    /* Colors - more subtle */
    background: #f8f9fa;
    color: var(--color-primary);
    border: 1.5px solid var(--color-primary);

    /* Visual effects - understated */
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: all 0.2s ease;
}

.poll.status-live .poll-vote-finalize-button:hover:not(:disabled) {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(212, 55, 49, 0.2);
}

.poll.status-live .poll-vote-finalize-button:disabled {
    background: #f8f9fa;
    color: #adb5bd;
    border-color: #dee2e6;
    cursor: not-allowed;
    opacity: 0.7;
    transform: none;
    box-shadow: none;
}

.poll.status-live .poll-vote-finalize-button::before {
    content: "Submit Answers";
}

/***
 Freeform full responses: Style as tiles in an expandable section
    example: <div class="poll-full-responses"><div class="response-item">awefwaef</div><div class="response-item">ANn wneawe</div></div>
***/
.poll-full-responses {
    padding: 1rem;
    max-height: 300px;
    overflow-y: auto;
}

.poll-full-responses .poll-full-response {
    display: inline-flex;
    margin: 0.25rem;
    padding: 0.5rem 0.75rem;
    background-color: #ffffff;
    border: 1px solid #d0d0d0;
    border-radius: 16px;
    font-size: 0.9rem;
    line-height: 1.3;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
    word-break: break-word;
    max-width: 100%;
}

/* Expandable functionality */
.poll-full-responses.collapsed {
    max-height: 120px;
    position: relative;
    overflow: hidden;
}

.poll-full-responses.collapsed::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: linear-gradient(transparent, #fafafa);
    pointer-events: none;
}


/* =========================================================================
   SECTION: MULTIPLE CHOICE POLLS - LIVE
   ========================================================================== */

.poll.responsetype-multiple_choice .poll-options-grid {
    display: flex;
    flex-wrap: wrap;
}

.poll.responsetype-multiple_choice .poll-options-grid .poll-option-choice input[type="radio"],
.poll.responsetype-multiple_choice .poll-options-grid .poll-option-choice input[type="checkbox"],
.poll.responsetype-multiple_choice.readonly .poll-option-choice input[type="radio"],
.poll.responsetype-multiple_choice.readonly .poll-option-choice input[type="checkbox"] {
    display: none;
}

/* Highlight the selected button */
.poll.responsetype-multiple_choice .poll-options-grid .poll-option-choice input[type="radio"]:checked+label,
.poll.responsetype-multiple_choice .poll-options-grid .poll-option-choice input[type="checkbox"]:checked+label,
.poll.responsetype-multiple_choice.readonly .poll-option-choice input[type="radio"]:checked+label,
.poll.responsetype-multiple_choice.readonly .poll-option-choice input[type="checkbox"]:checked+label {
    background: var(--poll-selected-option-background-color);
    color: var(--poll-selected-option-text-color);
}

/* .poll.responsetype-multiple_choice .poll-options-grid  label {
    background-color: #f0f0f0;
    border: 2px solid #ccc;
    display: inline-block;
    padding: 5px 10px;
    margin: 2px;
    border-radius: 5px;
    cursor: pointer;
}
 */

/* Stylize the poll option labels as buttons */
.poll.responsetype-multiple_choice .poll-options-grid .poll-option-choice label {
    /* FIXME */
    color: black;
    background: white;
    border: 2px solid var(--color-secondary);
    display: flex;
    border-radius: 10px;
    cursor: pointer;
    margin-top: 10px;
    margin: 2px;
    padding: 10px;
    justify-content: center;
    width: 100%;
}

/* Hover effect for buttons */
.poll.responsetype-multiple_choice .poll-options-grid .poll-option-choice label:hover {
    /* FIXME */
    background-color: #ddd;
}

.poll.responsetype-multiple_choice .poll-options-grid.poll-cols-1 .poll-option-choice label {
    width: 100%;
}

.poll.responsetype-multiple_choice .poll-options-grid .poll-prompt {
    /* FIXME: Sticky property is a little awkward. */
    position: sticky;
    top: 0;

    color: #333;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    /* padding-bottom: 10px; */
}

.poll.responsetype-multiple_choice .poll-options-grid .poll-option-choice,
.poll.responsetype-multiple_choice.readonly .poll-option-choice {
    display: flex;
}

.poll.responsetype-multiple_choice .poll-options-grid .poll-option-choice input:disabled {
    opacity: 0.7;
}

.poll.responsetype-multiple_choice .poll-options-grid .poll-option-choice.pending {
    opacity: 0.7;
    pointer-events: none;
}

/* Enhanced poll option layout for images */
.poll.responsetype-multiple_choice .poll-options-grid .poll-option-content {
    display: flex;
    align-items: center;
    /* gap: 10px; */
    width: 100%;
}

.poll.responsetype-multiple_choice .poll-options-grid .poll-option-image {
    /* Fixed dimensions */
    width: 70px;
    height: 70px;

    /* Aspect ratio handling */
    object-fit: cover;
    object-position: center;

    /* Performance optimizations */
    image-rendering: auto;

    /* Visual styling */
    border-radius: 8px;
    /* border: 1px solid rgba(0, 0, 0, 0.1); */

    /* Layout */
    flex-shrink: 0;
    display: block;
}

.poll.responsetype-multiple_choice .poll-options-grid .poll-option-text {
    flex: 1;

}

/* Enhanced styling for options with block display for better image integration */
/* .poll.polltype-poll.responsetype-multiple_choice .poll-options-grid .poll-options-grid .poll-option-choice label {
    color: black;
    background: white;
    border: 2px solid var(--color-secondary);
    display: block;
    padding: 12px 15px;
    border-radius: 10px;
    cursor: pointer;
    margin-top: 10px;
    min-height: 44px;
    box-sizing: border-box;
    flex: 1;
} */

/* Hover and selected states maintain existing behavior */
.poll.responsetype-multiple_choice .poll-options-grid .poll-option-choice input[type="radio"]:checked~.poll-option-content .poll-option-image,
.poll.responsetype-multiple_choice .poll-options-grid .poll-option-choice input[type="checkbox"]:checked~.poll-option-content .poll-option-image {
    border-color: var(--button-text-color-primary);
}

/* Poll option col count styling */
.poll.responsetype-multiple_choice .poll-options-grid.poll-cols-1 .poll-option-choice {
    width: 100%;
    flex-basis: 100%;
}

.poll.responsetype-multiple_choice .poll-options-grid.poll-cols-2 .poll-option-choice {
    width: 50%;
}

.poll.responsetype-multiple_choice .poll-options-grid.poll-cols-3 .poll-option-choice {
    width: 33.3%;
}



/* @media (max-width: 480px) {
    .poll.polltype-poll.responsetype-multiple_choice .poll-options-grid.poll-cols-2 .poll-option-choice {
        width: 45%;
    }

    .poll.polltype-poll.responsetype-multiple_choice .poll-options-grid.poll-cols-3 .poll-option-choice {
        width: 30%;
    }
} */

/* Tile-style layout for poll options with images in 2 and 3 column layouts */
.poll.responsetype-multiple_choice .poll-options-grid.poll-cols-1 .poll-option-choice.poll-with-image label,
.poll.responsetype-multiple_choice .poll-options-grid.poll-cols-2 .poll-option-choice.poll-with-image label,
.poll.responsetype-multiple_choice .poll-options-grid.poll-cols-3 .poll-option-choice.poll-with-image label {
    padding: 0px;
}


.poll.responsetype-multiple_choice .poll-options-grid.poll-cols-2 .poll-option-choice.poll-with-image label,
.poll.responsetype-multiple_choice .poll-options-grid.poll-cols-3 .poll-option-choice.poll-with-image label {
    width: auto;
    height: 100%;
}


.poll.responsetype-multiple_choice .poll-options-grid.poll-cols-2 .poll-option-choice.poll-with-image,
.poll.responsetype-multiple_choice .poll-options-grid.poll-cols-3 .poll-option-choice.poll-with-image {
    padding: 0;
    min-height: 140px;
    height: auto;
    display: flex;
    flex-direction: column;
    overflow: visible;
    align-self: start;
}

/* Make sure the content container is flexible */
.poll.responsetype-multiple_choice .poll-options-grid.poll-cols-2 .poll-option-choice.poll-with-image .poll-option-content,
.poll.responsetype-multiple_choice .poll-options-grid.poll-cols-3 .poll-option-choice.poll-with-image .poll-option-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    flex: 1;
}

.poll.responsetype-multiple_choice .poll-options-grid.poll-cols-2 .poll-option-choice.poll-with-image .poll-option-image,
.poll.responsetype-multiple_choice .poll-options-grid.poll-cols-3 .poll-option-choice.poll-with-image .poll-option-image {
    width: 100%;
    height: 67%;
    /* Top 2/3 of the tile */
    object-fit: cover;
    object-position: center;
    border-radius: 8px 8px 0 0;
    border: none;
    flex-shrink: 0;
}

.poll.responsetype-multiple_choice .poll-options-grid.poll-cols-2 .poll-option-choice.poll-with-image .poll-option-text,
.poll.responsetype-multiple_choice .poll-options-grid.poll-cols-3 .poll-option-choice.poll-with-image .poll-option-text {
    /* Remove fixed height: 33% and replace with flexible min-height */
    min-height: 40px;
    /* Minimum height to maintain consistency */
    flex: 1;
    /* Allow text area to grow */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    border-radius: 0 0 10px 10px;
    /* Allow text wrapping and expansion */
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Adjust tile height for different column counts */
.poll.responsetype-multiple_choice .poll-options-grid.poll-cols-2 .poll-option-choice.poll-with-image {
    min-height: 160px;
    /* Change from fixed height to min-height */
    height: auto;
    /* Allow container to expand */
    display: flex;
    flex-direction: column;
}

.poll.responsetype-multiple_choice .poll-options-grid.poll-cols-3 .poll-option-choice.poll-with-image {
    min-height: 120px;
    /* Allow container to expand */
    display: flex;
    flex-direction: column;
}

.poll.responsetype-multiple_choice .poll-options-grid.poll-cols-3 .poll-option-choice.poll-with-image .poll-option-text {
    font-size: 12px;
    padding: 6px 8px;
}

/* Hover and selected states for tiles */
.poll.responsetype-multiple_choice .poll-options-grid.poll-cols-2 .poll-option-choice.poll-with-image input[type="radio"]:checked,
.poll.responsetype-multiple_choice .poll-options-grid.poll-cols-3 .poll-option-choice.poll-with-image input[type="radio"]:checked,
.poll.responsetype-multiple_choice .poll-options-grid.poll-cols-2 .poll-option-choice.poll-with-image input[type="checkbox"]:checked,
.poll.responsetype-multiple_choice .poll-options-grid.poll-cols-3 .poll-option-choice.poll-with-image input[type="checkbox"]:checked {
    border: 2px solid var(--color-secondary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.poll.responsetype-multiple_choice .poll-options-grid.poll-cols-2 .poll-option-choice.poll-with-image input[type="radio"]:checked~.poll-option-content .poll-option-text,
.poll.responsetype-multiple_choice .poll-options-grid.poll-cols-3 .poll-option-choice.poll-with-image input[type="radio"]:checked~.poll-option-content .poll-option-text,
.poll.responsetype-multiple_choice .poll-options-grid.poll-cols-2 .poll-option-choice.poll-with-image input[type="checkbox"]:checked~.poll-option-content .poll-option-text,
.poll.responsetype-multiple_choice .poll-options-grid.poll-cols-3 .poll-option-choice.poll-with-image input[type="checkbox"]:checked~.poll-option-content .poll-option-text {
    background: var(--poll-selected-option-background-color);
    color: var(--poll-selected-option-text-color);
    font-weight: var(--poll-selected-option-font-weight);
}

.poll.responsetype-multiple_choice.status-live .poll-options-grid.poll-cols-2 .poll-option-choice.poll-with-image:hover,
.poll.responsetype-multiple_choice.status-live .poll-options-grid.poll-cols-3 .poll-option-choice.poll-with-image:hover {
    /* transform: translateY(-2px); */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    /* transition: transform 0.2s ease, box-shadow 0.2s ease; */
}

/* Keep 1-column layout unchanged (horizontal) */
.poll.responsetype-multiple_choice .poll-options-grid.poll-cols-1 .poll-option-choice.poll-with-image .poll-option-content {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.poll.responsetype-multiple_choice .poll-options-grid.poll-cols-1 .poll-option-choice.poll-with-image .poll-option-image {
    width: 70px;
    height: 70px;
    object-fit: cover;
    object-position: center;
    border-radius: 8px;
    /* border: 1px solid rgba(0, 0, 0, 0.1); */
    flex-shrink: 0;
}

.poll.responsetype-multiple_choice .poll-options-grid.poll-cols-1 .poll-option-choice.poll-with-image .poll-option-text {
    flex: 1;
    text-align: left;
}

.poll.responsetype-multiple_choice .poll-options-grid .poll-option-choice:has(input[type="checkbox"]:disabled),
.poll.responsetype-multiple_choice .poll-options-grid .poll-option-choice:has(input[type="radio"]:disabled) {
    opacity: 0.7;
    cursor: not-allowed;
}

.poll.responsetype-multiple_choice.status-live .poll-options-grid .poll-option-choice:has(input[type="checkbox"]:disabled):hover,
.poll.responsetype-multiple_choice.status-live .poll-options-grid .poll-option-choice:has(input[type="radio"]:disabled):hover {
    opacity: 0.8;
    transform: scale(1.02);
}

.poll.responsetype-multiple_choice.status-closed .poll-options-grid .poll-option-choice:has(input[type="checkbox"]:disabled):hover,
.poll.responsetype-multiple_choice.status-closed .poll-options-grid .poll-option-choice:has(input[type="radio"]:disabled):hover,
.poll.responsetype-multiple_choice.status-closed .poll-options-grid .poll-option-choice:has(input[type="checkbox"]:disabled) label:hover,
.poll.responsetype-multiple_choice.status-closed .poll-options-grid .poll-option-choice:has(input[type="radio"]:disabled) label:hover {
    cursor: not-allowed;
}


.poll.responsetype-multiple_choice .poll-options-grid .poll-option-choice.correct-option::before,
.poll.responsetype-multiple_choice .poll-options-grid .poll-option-choice.incorrect-option::before {
    display: flex;
    font-weight: 900;
    font-size: 18px;
    margin-right: 8px;
    min-width: 20px;
    align-items: center;
}

.poll.responsetype-multiple_choice .poll-options-grid .poll-option-choice.correct-option::before {
    content: var(--correct-quiz-option-fa-icon-code);
    font-family: var(--fa-current-style);
    color: var(--correct-quiz-option-icon-color);
}

.poll.responsetype-multiple_choice .poll-options-grid .poll-option-choice.incorrect-option::before {
    content: var(--incorrect-quiz-option-fa-icon-code);
    font-family: var(--fa-current-style);
    color: var(--incorrect-quiz-option-icon-color);
}



.votes-remaining {
    /* Typography */
    font-size: 13px;
    font-weight: 500;
    color: #666;
    letter-spacing: 0.02em;

    /* Layout */
    display: block;
    text-align: center;
    align-self: right;
    padding: 8px 16px;
    margin-bottom: 5px;

    /* Modern styling */
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;

    /* Subtle effects */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}

/* When votes are maxed out */
.votes-remaining.votes-maxed {
    background: #f8d7da;
    color: #721c24;
    border-color: #f5c6cb;
}

/* ==========================================================================
   SECTION: FREEFORM POLLS - LIVE
   ========================================================================== */

/* Freeform poll form container */
.poll.polltype-poll.responsetype-freeform.status-live .freeform-poll-form {
    margin-top: 10px;
}

.poll.polltype-poll.responsetype-freeform.status-live .freeform-response-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Freeform input section */
.poll.polltype-poll.responsetype-freeform.status-live .freeform-input-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Freeform textarea styling - aligned with poll option labels */
.poll.polltype-poll.responsetype-freeform.status-live .freeform-textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--color-secondary);
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
    background: var(--poll-freeform-textarea-background-color, white);
    color: black;
    box-sizing: border-box;
    resize: vertical;
    min-height: 100px;
    transition: all 0.2s ease;
    line-height: 1.5;
}

.poll.polltype-poll.responsetype-freeform.status-live .freeform-textarea:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(212, 55, 49, 0.1);
}

.poll.polltype-poll.responsetype-freeform.status-live .freeform-textarea:disabled {
    background-color: #f8f9fa;
    color: var(--text-color-secondary);
    cursor: not-allowed;
    opacity: 0.7;
}

.poll.polltype-poll.responsetype-freeform.status-live .freeform-textarea::placeholder {
    color: #999;
}

/* Character count - aligned with votes-remaining styling */
.poll.polltype-poll.responsetype-freeform.status-live .character-count {
    font-size: 13px;
    font-weight: 500;
    color: #666;
    text-align: right;
    letter-spacing: 0.02em;
    padding: 4px 8px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    align-self: flex-end;
    transition: all 0.2s ease;
}

.poll.polltype-poll.responsetype-freeform.status-live .character-count span {
    font-weight: 600;
    color: var(--color-primary);
}

/* When close to limit, change color */
.poll.polltype-poll.responsetype-freeform.status-live .character-count.low-chars {
    background: #fff3cd;
    border-color: #ffc107;
    color: #856404;
}

.poll.polltype-poll.responsetype-freeform.status-live .character-count.very-low-chars {
    background: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}

/* Freeform action buttons container */
.poll.polltype-poll.responsetype-freeform.status-live .freeform-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 10px;
}

.poll.polltype-poll.responsetype-freeform.status-live .submit-freeform.btn-primary {
    background: var(--color-primary);
    color: var(--button-text-color-primary);
    border: none;
    border-radius: 6px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    min-height: 44px;
}

.poll.polltype-poll.responsetype-freeform.status-live .submit-freeform.btn-primary:hover:not(:disabled) {
    background: var(--color-secondary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(212, 55, 49, 0.3);
}

.poll.polltype-poll.responsetype-freeform.status-live .submit-freeform.btn-primary:disabled {
    background: var(--button-disabled-background-color-primary);
    cursor: not-allowed;
    opacity: 0.7;
    transform: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Clear button - secondary styling */
.poll.polltype-poll.responsetype-freeform.status-live .clear-freeform.btn-secondary {
    background: white;
    color: var(--color-primary);
    border: 2px solid var(--color-secondary);
    border-radius: 6px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
}

.poll.polltype-poll.responsetype-freeform.status-live .clear-freeform.btn-secondary:hover:not(:disabled) {
    background: #f8f9fa;
    border-color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.poll.polltype-poll.responsetype-freeform.status-live .clear-freeform.btn-secondary:disabled {
    background: #f8f9fa;
    color: var(--text-color-secondary);
    border-color: #e9ecef;
    cursor: not-allowed;
    opacity: 0.7;
    transform: none;
}

.poll-option-choice input:disabled+label {
    cursor: not-allowed !important;
    opacity: 0.7;
}

/* Other container wrappers should not interfere with flex layout */
.poll-edit .poll-option-custom-id-container,
.poll-edit .poll-option-remove-button-container {
    display: contents;
}

/* Text container participates in flex layout to grow and fill space */
.poll-edit .poll-option-text-container {
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0; /* Allow shrinking below content width */
}

/* The container becomes a toggle widget */
.poll-edit .poll-options-correct-cb-container {
    flex-shrink: 0;
    position: relative;
    cursor: pointer;
    z-index: 10;
    display: inline-flex;
    gap: 2px;
    align-items: center;
}

/* Hide the actual checkbox completely but keep it functional */
.poll-edit .poll-options-correct-cb {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
}

/* X icon (incorrect) - ::before - matches quiz renderer */
.poll-edit .poll-options-correct-cb-container::before {
    content: var(--incorrect-quiz-option-fa-icon-code);
    font-family: var(--fa-current-style);
    font-weight: 900;
    font-size: 28px;
    margin-right: 8px;
    min-width: 20px;
    display: flex;
    align-items: center;

    /* Default: red X (unchecked state) */
    color: var(--incorrect-quiz-option-icon-color);
    transition: all 0.2s ease;
}

/* Checkmark icon (correct) - ::after - matches quiz renderer */
.poll-edit .poll-options-correct-cb-container::after {
    content: var(--correct-quiz-option-fa-icon-code);
    font-family: var(--fa-current-style);
    font-weight: 900;
    font-size: 28px;
    min-width: 20px;
    display: flex;
    align-items: center;

    /* Default: gray checkmark (unchecked state) */
    color: #ccc;
    transition: all 0.2s ease;
}

/* When checked: X becomes gray, checkmark becomes green */
.poll-edit .poll-options-correct-cb-container:has(.poll-options-correct-cb:checked)::before {
    color: #ccc;
}

.poll-edit .poll-options-correct-cb-container:has(.poll-options-correct-cb:checked)::after {
    color: var(--correct-quiz-option-icon-color);
}

/* Hover effects */
.poll-edit .poll-options-correct-cb-container:hover::before,
.poll-edit .poll-options-correct-cb-container:hover::after {
    transform: scale(1.1);
}

/* Focus state */
.poll-edit .poll-options-correct-cb-container:has(.poll-options-correct-cb:focus-visible) {
    outline: 2px solid #4CAF50;
    outline-offset: 2px;
    border-radius: 16px;
}

/* Responsive design */
@media (max-width: 480px) {
    .poll.polltype-poll.responsetype-freeform.status-live .freeform-actions {
        flex-direction: column;
        gap: 8px;
    }

    .poll.polltype-poll.responsetype-freeform.status-live .submit-freeform.btn-primary,
    .poll.polltype-poll.responsetype-freeform.status-live .clear-freeform.btn-secondary {
        width: 100%;
    }
}

/* ==========================================================================
   SECTION: RANKED CHOICE POLLS
   ========================================================================== */
.ranked-results-container {
    margin-top: 6px;
}

.ranked-results-title {
    font-size: 16px;
    margin: 0;
    font-weight: 600;
    line-height: 1.3;
}

.ranked-results-subtitle {
    color: var(--text-color-secondary);
    font-size: 13px;
    font-weight: 400;
    margin: 0;
    line-height: 1.4;
    font-style: italic;
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .ranked-results-summary {
        padding: 12px 16px;
    }

    .ranked-results-title {
        font-size: 16px;
    }

    .ranked-results-subtitle {
        font-size: 12px;
    }
}

.poll.polltype-poll.responsetype-ranked .ranked-choice-edit-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.poll.polltype-poll.responsetype-ranked .ranked-choice-grab-icon {
    width: 20px;
    height: 20px;
    cursor: grab;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    color: var(--text-color-secondary);
    font-size: 14px;
}

/* FontAwesome Icons */
.poll.polltype-poll.responsetype-ranked .ranked-choice-grab-icon::before {
    font-family: var(--fa-current-style);
    content: var(--grab-fa-icon-code);
    font-weight: 900;
}

.poll.polltype-poll.responsetype-ranked .ranked-choice-grab-icon:active {
    cursor: grabbing;
}

.poll.polltype-poll.responsetype-ranked .ranked-choice-option-text {
    flex: 1;
}

.poll.polltype-poll.responsetype-ranked .option {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ==========================================================================
   SECTION: POLLS: MODERATE
   ========================================================================== */
__SECTION_POLLS_MODERATE__ {
    display: block;
}

.polls-list {
    padding-top: 0px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

/* Moderate Polls page styling */

.poll-mod-section {
    background: white;
}

.poll-mod-section .draft-poll-button {
    background: var(--color-primary);
    text-decoration: none;
    border-radius: 40px;
    border-width: 0px;
    color: white;
    padding: 10px;
    margin: 10px;
    display: inline-flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 10px;
    text-transform: uppercase;
}

.poll-mod-disp {
    background-color: rgba(212, 55, 49, 0.15);
    /* FIXME */
    border-radius: 10px;
    /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
    padding: 0;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 0;
    font-family: "Lato", sans-serif;
    overflow: hidden;
    /* transition: background-color 0.3s ease; */
}

/* Add padding to all direct children except poll-prompt */
.poll-mod-disp > *:not(.poll-prompt) {
    padding-left: 12px;
    padding-right: 12px;
}

/* Add gap back between children */
.poll-mod-disp > * + * {
    margin-top: 12px;
}

/* First child after prompt needs top padding */
.poll-mod-disp .poll-prompt + * {
    padding-top: 12px;
}

/* Last child needs bottom padding */
.poll-mod-disp > *:last-child {
    padding-bottom: 12px;
}

/* Poll question styling */
.poll-mod-disp .poll-question {
    color: #333;
    /* FIXME */
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
}

/* Poll options styling */
.poll-mod-disp .poll-option {
    background-color: #fff;
    /* FIXME */
    border: 1px solid #ddd;
    /* FIXME */
    padding: 3px 5px;
    border-radius: 6px;
    transition:
        transform 0.2s ease,
        background-color 0.2s ease;
    margin-bottom: 2px;
}

.poll-mod-disp .poll-option .poll-option-text {
    flex: none;
}

.poll-mod-disp .poll-option .poll-option-details {
    display: flex;
    flex-direction: column;
    margin-left: 10px;
    font-size: 12px;
    color: darkgray;
    text-align: left;
}

.poll-mod-disp .poll-option .poll-option-image-url,
.poll-mod-disp .poll-option .poll-option-custom-id {
    flex: none;
}

.poll-mod-disp .poll-option .poll-option-image-url::before {
    content: "Image: ";
    font-weight: bold;
}

.poll-mod-disp .poll-option .poll-option-custom-id::before {
    content: "Custom ID: ";
    font-weight: bold;
}

/* Styling individual metadata items with space */
.poll-mod-disp .poll-creator,
.poll-mod-disp .poll-creation-time,
.poll-mod-disp .poll-last-mod-time {
    color: #666;
    /* FIXME */
    font-weight: 400;
    justify-self: start;
    font-size: 10px;
}

.poll-meta {
    color: #666;
    /* FIXME */
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* gap: 10px; */
    font-size: 12px;
}

/* Style for all header elements */
.poll-meta [class$="-header"] {
    color: #555;
    /* FIXME */
    text-transform: uppercase;
    font-size: 8px;
    font-weight: 600;
    justify-self: start;
}

/* Create column groups */
.poll-meta .poll-creator-header,
.poll-meta .poll-creator {
    grid-column: 1;
}

.poll-meta .poll-creation-time-header,
.poll-meta .poll-creation-time {
    grid-column: 2;
}

.poll-meta .poll-last-mod-time-header,
.poll-meta .poll-last-mod-time {
    grid-column: 3;
}

/* Stack headers above values */
.poll-meta .poll-creator-header,
.poll-meta .poll-creation-time-header,
.poll-meta .poll-last-mod-time-header {
    grid-row: 1;
}

.poll-meta .poll-creator,
.poll-meta .poll-creation-time,
.poll-meta .poll-last-mod-time {
    grid-row: 2;
}

/* Style for secondary header elements */
.poll-meta2 {
    color: #666;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 15px 0;
    font-size: 12px;
}

.poll-meta2 .poll-meta-item {
    padding: 4px 8px;
    background: #f8f8f8;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    text-align: center;
    min-height: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.3;
}

.poll-meta2 .poll-meta-item::before {
    content: attr(data-label);
    font-size: 10px;
    color: #888;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
    display: block;
}

.poll-meta2 .poll-meta-item:empty::before {
    text-decoration: line-through;
    color: #bbb;
}

@media (max-width: 768px) {
    .poll-meta2 {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
        font-size: 11px;
    }

    .poll-meta2 .poll-meta-item {
        padding: 3px 6px;
        min-height: 28px;
    }

    .poll-meta2 .poll-meta-item::before {
        font-size: 9px;
    }
}

/* Special handling for status badge */
.poll-meta .poll-type {
    grid-row: 1 / span 2;
}

.poll-meta .poll-type::before {
    content: attr(data-poll-type);
    grid-column: 4;
    justify-self: end;
    align-self: start;

    background: #000;
    /* FIXME */
    display: inline-block;
    flex: 0 0 auto;
    margin-top: 10px;
    margin-left: auto;
    width: auto;
    max-width: 50px;
    padding: 3px 5px;
    border-radius: 40px;
    text-align: center;
    font-weight: bold;
    color: white;
    text-transform: uppercase;
}

.poll-meta .poll-type[data-poll-type="poll"]::before {
    background: green;
}

.poll-meta .poll-type[data-poll-type="quiz"]::before {
    background: blue;
}

.poll-meta .poll-status {
    grid-column: 5;
    grid-row: 1 / span 2;
    justify-self: end;
    align-self: start;
}

/* General status badge style */
.poll-mod-disp .poll-status {
    background: #000;
    /* FIXME */
    display: inline-block;
    flex: 0 0 auto;
    margin-top: 10px;
    margin-left: auto;
    width: auto;
    max-width: 50px;
    padding: 3px 5px;
    border-radius: 40px;
    text-align: center;
    font-weight: bold;
    color: white;
    text-transform: uppercase;
}

.poll-status[data-status="published"] {
    background: #da6339;
    /* FIXME */
    max-width: 65px;
}

.poll-votes-sum {
    margin-block: 15px;
    text-align: center;
}

/* Buttons container */
.poll-mod-disp .action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

/* Common button styling */
.poll-mod-disp .action-buttons button {
    background: var(--color-secondary);
    border: none;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    padding: 10px 8px;
    color: white;
}

.poll-edit button,
.options-container button {
    background: var(--color-secondary);
    color: var(--button-text-color-primary);
    border: none;
    border-radius: 10px;
    padding: 10px 15px;
    margin-top: 5px;
    width: auto;
}

.poll-option-remove-button::before {
    content: var(--delete-fa-icon-code);
    font-family: var(--fa-current-style);
    font-weight: 900;
    z-index: 9;
    font-size: 18px;
}

.options-container button {
    padding: 3px 10px;
    margin-left: 10px;
}

/* ==========================================================================
     POLL EDIT MODAL - MODERN STYLING
     ========================================================================== */

.poll-edit .modal {
    display: block;
    position: fixed;
    width: 90%;
    max-width: 650px;
    left: 50%;
    top: 10vh;
    transform: translateX(-50%);
    max-height: 80vh;
    z-index: 10;
    overflow-y: auto;
}

.poll-edit .poll-form {
    background: var(--main-background-color);
    border-radius: 8px;
    padding: 24px;
    font-family: "Lato", sans-serif;
    max-width: 100%;
    box-sizing: border-box;
    border: dashed;
    border-color: gray;
}

.poll-edit .poll-form h2 {
    color: var(--color-primary);
    font-weight: 300;
    font-size: 24px;
    margin: 0 0 24px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid #e9ecef;
}

/* Modal Close Button */
.poll-edit .close-button {
    color: var(--color-primary);
    position: absolute;
    top: 16px;
    right: 20px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid var(--color-primary);
    transition: all 0.2s ease;
    z-index: 100;
}

.poll-edit .close-button:hover {
    background: var(--color-primary);
    color: white;
    transform: scale(1.1);
}

.poll-edit .close-button::before {
    content: var(--close-fa-icon-code);
    font-family: var(--fa-current-style);
    font-weight: 900;
    font-size: 14px;
}

/* Poll form structure:
     section
        - section label
        - block
                - block label
                - input
                - input
                - input
        - block
                - block label
                - input
        - block
*/

/* Form Section */
.poll-edit .poll-form-section {
    padding: 12px 0;
    border-bottom: 1px solid #f5f5f5;
}

.poll-edit .poll-form-section::before {
    content: attr(data-title);
    display: flex;
    padding-top: 0;
    font-size: 16px;
    font-weight: 600;
    border-bottom: 1px solid #e9ecef;
}

/* Form Blocks - Left-Right Layout */
.poll-edit .poll-form-block {
    padding: 10px 0;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 20px;
    align-items: start;
}

/* Options container should span full width with label on top */
.poll-edit .poll-form-block.poll-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.poll-edit .poll-form-block.poll-options .options-container {
    width: 100%;
}

.poll-edit .poll-form-block:not(:last-child) {
    border-bottom: 1px solid #f5f5f5;
}

/* Labels - Right-aligned on left side */
/* FIXME: Maybe get rid of this in favor of pill button styles. This is stepping on other things. */
.poll-edit .poll-form label.setting-label,
.poll-edit .poll-form label.pill-button {
    display: block;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-color-primary);
    margin-bottom: 0;
    line-height: 1.4;
    text-align: right;
    padding-top: 12px;
    /* Align with input padding */
}

/* Section-level labels (first child of form sections) */
.poll-edit .poll-form-block>label:first-child {
    grid-column: 1;
    align-self: start;
}

/* Input containers go in the right column */
.poll-edit .poll-form-block>*:not(label:first-child) {
    grid-column: 2;
}

/* For sections with multiple elements, wrap them in a container */
.poll-edit .poll-form-block>.form-input-group {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.poll-edit .poll-form label .timezone-label {
    font-weight: 400;
    color: var(--text-color-secondary);
    font-size: 12px;
    margin-left: 4px;
}

/* Text Inputs - Left-aligned in right column */
.poll-edit .poll-form input[type="text"],
.poll-edit .poll-form input[type="number"],
.poll-edit .poll-form input[type="datetime-local"] {
    width: 100%;
    padding: 12px 16px;
    border: var(--compose-box-textarea-border);
    border-radius: 6px;
    font-size: 14px;
    background: var(--main-background-color);
    box-sizing: border-box;
    transition: all 0.2s ease;
    margin-bottom: 0;
}

.poll-edit .poll-form input[type="text"]:focus,
.poll-edit .poll-form input[type="number"]:focus,
.poll-edit .poll-form input[type="datetime-local"]:focus {
    border-color: var(--compose-box-focus-border-color);
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
    outline: none;
}

.poll-edit .poll-form input:disabled {
    background-color: #f8f9fa;
    color: var(--text-color-secondary);
    cursor: not-allowed;
    opacity: 0.7;
}


/* Pill Button Groups in Grid Layout */
.poll-edit .poll-form-block .pill-button-group {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
}

/* Pill button labels shouldn't follow the main label styling */
.poll-edit .poll-form .pill-button-group .pill-button {
    text-align: left;
    line-height: 0.8em;
    padding-bottom: 12px;
}

.poll-edit .poll-form .pill-button-group .pill-button-label {
    text-align: left;
}

/* Radio Buttons and Checkboxes */
.poll-edit .poll-form input[type="radio"],
.poll-edit .poll-form input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.poll-edit .poll-form input[type="radio"]:disabled,
.poll-edit .poll-form input[type="checkbox"]:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Radio button groups */
.poll-edit .poll-column-count input[type="radio"] {
    margin-right: 6px;
    margin-bottom: 4px;
}

.poll-edit .poll-column-count label {
    display: block;
    font-weight: 400;
    margin-bottom: 8px;
    cursor: pointer;
}

/* Poll Options Section */
.poll-edit .options-container {
    background: #f8f9fa;
    border-radius: 6px;
}

.poll-edit .poll-option-edit-list {
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 12px;
    display: flex;
    flex-direction: column;
}

.poll-edit .poll-option-edit-list li {
    background: var(--main-background-color);
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 6px;
    position: relative;
    transition: all 0.2s ease;
}

.poll-edit .poll-option-edit-list li:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border-color: var(--color-primary);
}

/* Option Content */
.poll-edit .option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.poll-edit .poll-option-grab-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color-secondary);
    font-size: 14px;
}

.poll-edit .poll-option-grab-icon:active {
    cursor: grabbing;
}

.poll-edit .poll-options-correct-cb-container {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.poll-edit .poll-options-correct-cb {
    flex-shrink: 0;
}

.poll-edit .poll-option-text-container input[type="text"] {
    flex: 1;
    width: 100%; /* Take full width of container */
    min-width: 0;
    margin-bottom: 0;
}

/* Custom ID container uses display: contents (defined above) */
/* Input styling when it's visible */
.poll-edit .poll-option-custom-id-container input[type="text"] {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}

.poll-edit .poll-option-remove-button-container {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

/* Legacy support for inputs not in containers */
.poll-edit .option input[type="text"] {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}

.poll-edit .poll-option-imageurl-indicator {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.2s ease;
}

.poll-edit .poll-option-imageurl-indicator.empty {
    color: #6c757d;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
}

.poll-edit .poll-option-imageurl-indicator.valid {
    color: #28a745;
    background: #d4edda;
    border: 1px solid #c3e6cb;
}

.poll-edit .poll-option-imageurl-indicator.invalid {
    color: #dc3545;
    background: #f8d7da;
    border: 1px solid #f5c6cb;
}

.poll-edit .poll-option-remove-button {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border: none;
    background: #dc3545;
    color: white;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.2s ease;
}

.poll-edit .poll-option-remove-button:hover:not(:disabled) {
    background: #c82333;
    transform: scale(1.05);
}

.poll-edit .poll-option-remove-button:disabled {
    background: var(--button-disabled-background-color-primary);
    cursor: not-allowed;
    opacity: 0.7;
}

/* Image URL Section */
.poll-edit .poll-option-image-url-section {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e9ecef;
}

.poll-edit .poll-option-image-url-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-color-secondary);
    margin-bottom: 6px;
}

/* Buttons */
.poll-edit .poll-form button {
    background: var(--color-primary);
    color: var(--button-text-color-primary);
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    min-height: 32px;
}

.poll-edit .poll-form button:hover:not(:disabled) {
    background: var(--color-secondary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(212, 55, 49, 0.3);
}

.poll-edit .poll-form button:disabled {
    background: var(--button-disabled-background-color-primary);
    cursor: not-allowed;
    opacity: 0.7;
    transform: none;
    box-shadow: none;
}

.poll-edit .poll-final-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e9ecef;
}

.poll-edit .poll-final-buttons button[type="button"] {
    background: var(--color-secondary);
}

.poll-edit .poll-final-buttons button[type="submit"] {
    background: var(--color-primary);
}

/* Disabled State Tooltips */
.poll-edit .poll-form button:disabled[data-disabled-reason]:hover::after {
    content: attr(data-disabled-reason);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.poll-edit .poll-form button:disabled[data-disabled-reason]:hover::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #333;
    z-index: 1000;
}

/* FontAwesome Icons */
.poll-edit .poll-option-grab-icon::before {
    font-family: var(--fa-current-style);
    content: var(--grab-fa-icon-code);
    font-weight: 900;
}

.poll-edit .poll-option-imageurl-indicator::before {
    font-family: var(--fa-current-style);
    content: var(--picture-fa-icon-code);
}

.poll-edit .poll-option-remove-button::before {
    font-family: var(--fa-current-style);
    content: var(--delete-fa-icon-code);
    font-weight: 900;
}

/* Responsive Design */
@media (max-width: 768px) {
    .poll-edit .poll-form {
        padding: 20px 16px;
    }

    /* Stack form sections vertically on mobile */
    .poll-edit .poll-form-block {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .poll-edit .poll-form-block>label:first-child {
        grid-column: 1;
        text-align: left;
        padding-top: 0;
        margin-bottom: 8px;
        border-bottom: 1px solid #f5f5f5;
        padding-bottom: 8px;
    }

    .poll-edit .poll-form-block>*:not(label:first-child) {
        grid-column: 1;
    }

    .poll-edit .poll-final-buttons {
        flex-direction: column;
    }

    .poll-edit .poll-final-buttons button {
        width: 100%;
    }

    .poll-edit .option {
        flex-wrap: wrap;
        gap: 8px;
    }

    .poll-edit .option input[type="text"] {
        min-width: 200px;
    }
}

@media (max-width: 480px) {

    /* Further compress pill buttons on very small screens */
    .poll-edit .poll-form-block .pill-button-group {
        gap: 6px;
    }

    .poll-edit .poll-form .pill-button-group .pill-button.pill-button-sm {
        font-size: 12px;
        padding: 6px 10px;
    }
}

/* Loading States */
.poll-edit .poll-form button[data-loading="true"] {
    position: relative;
    color: transparent;
}

.poll-edit .poll-form button[data-loading="true"]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    color: var(--button-text-color-primary);
}

@keyframes spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}


.poll-results-message {
    margin-top: 12px;
    font-size: 14px;
    color: var(--text-color-secondary);
}

.poll-results-message.prominent {
    font-size: 16px;
    font-weight: 600;
}

.embeddable-links-dropdown {
    position: relative;
    display: flex;
    justify-self: right;
    justify-content: flex-end;
    margin-top: 10px;
    margin-bottom: 10px;
}

.embeddable-links-button {
    background-color: var(--color-secondary);
    color: white;
    padding: 4px 8px;
    font-size: 14px;
    border: none;
    cursor: pointer;
    border-radius: 4px;
}

.embeddable-links-content {
    display: none;
    position: absolute;
    right: 0%;
    top: 100%;
    background-color: #f9f9f9;
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    border-radius: 4px;
}

.embeddable-links-content a {
    color: black;
    padding: 8px 12px;
    text-align: right;
    text-decoration: none;
    display: block;
}

.embeddable-links-content a:hover {
    background-color: #f1f1f1;
}

.embeddable-links-dropdown:hover .embeddable-links-content {
    display: block;
}

.embeddable-links-dropdown:hover .embeddable-links-button {
    filter: brightness(0.9);
}

/***********
 * FREEFORM POLL RESPONSE LIST
 ***********/

.poll-full-response {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}

.poll-full-response-text {
    flex: 1;
}

.btn-delete-response {
    flex-shrink: 0;
    background-color: #dc3545;
    color: white;
    border: none;
    padding: 8px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 10px;
    transition: background-color 0.2s;
    font-family: 'Font Awesome 7 Free';
    font-weight: 900;
    align-self: center;
}

.btn-delete-response::before {
    content: var(--delete-fa-icon-code);
}

.btn-delete-response:hover {
    background-color: #c82333;
}

.btn-delete-response:active {
    background-color: #bd2130;
}

/* ===== static/css/flash.css ===== */
/* Core flash animation using CSS keyframes - most compatible approach */
@keyframes flash-color {
    0% {
        background-color: var(--original-color, #ffffff);
    }
    50% {
        background-color: var(--flash-color, #ff6b6b);
    }
    100% {
        background-color: var(--original-color, #ffffff);
    }
}

/* Alternative pulse animation for emphasis */
@keyframes flash-pulse {
    0% {
        background-color: var(--original-color, #ffffff);
        transform: scale(1);
    }
    50% {
        background-color: var(--flash-color, #ff6b6b);
        transform: scale(1.02);
    }
    100% {
        background-color: var(--original-color, #ffffff);
        transform: scale(1);
    }
}

/* Subtle glow effect for modern devices */
@keyframes flash-glow {
    0% {
        background-color: var(--original-color, #ffffff);
        box-shadow: 0 0 0 rgba(255, 107, 107, 0);
    }
    50% {
        background-color: var(--flash-color, #ff6b6b);
        box-shadow: 0 0 15px rgba(255, 107, 107, 0.4);
    }
    100% {
        background-color: var(--original-color, #ffffff);
        box-shadow: 0 0 0 rgba(255, 107, 107, 0);
    }
}

/* Multi-flash keyframes for repeated animations */
@keyframes flash-color-2x {
    0%,
    100% {
        background-color: var(--original-color, #ffffff);
    }
    25%,
    75% {
        background-color: var(--flash-color, #ff6b6b);
    }
    50% {
        background-color: var(--original-color, #ffffff);
    }
}

@keyframes flash-color-3x {
    0%,
    100% {
        background-color: var(--original-color, #ffffff);
    }
    16.66%,
    50%,
    83.33% {
        background-color: var(--flash-color, #ff6b6b);
    }
    33.33%,
    66.66% {
        background-color: var(--original-color, #ffffff);
    }
}

@keyframes flash-pulse-2x {
    0%,
    100% {
        background-color: var(--original-color, #ffffff);
        transform: scale(1);
    }
    25%,
    75% {
        background-color: var(--flash-color, #ff6b6b);
        transform: scale(1.02);
    }
    50% {
        background-color: var(--original-color, #ffffff);
        transform: scale(1);
    }
}

@keyframes flash-pulse-3x {
    0%,
    100% {
        background-color: var(--original-color, #ffffff);
        transform: scale(1);
    }
    16.66%,
    50%,
    83.33% {
        background-color: var(--flash-color, #ff6b6b);
        transform: scale(1.02);
    }
    33.33%,
    66.66% {
        background-color: var(--original-color, #ffffff);
        transform: scale(1);
    }
}

/* Flash utility classes */
.flash-basic {
    animation: flash-color 0.6s ease-in-out;
}

.flash-pulse {
    animation: flash-pulse 0.8s ease-in-out;
}

.flash-glow {
    animation: flash-glow 1s ease-in-out;
}

.flash-success {
    --flash-color: #4caf50;
}

.flash-warning {
    --flash-color: #ff9800;
}

.flash-error {
    --flash-color: #f44336;
}

.flash-info {
    --flash-color: #2196f3;
}


/* ===== static/css/pill_buttons.css ===== */
/* Pill Button Components for Radio and Checkbox Inputs */
/* Integrates with existing QnA app design system */

:root {
    /* Pill Button Variables - using existing color scheme */
    --pill-button-border-radius: 20px;
    --pill-button-padding: 8px 16px;
    --pill-button-font-size: 14px;
    --pill-button-font-weight: 500;
    --pill-button-transition: all 0.2s ease;

    /* Default state colors */
    --pill-button-background: white;
    --pill-button-border: 2px solid #e1e5e9;
    --pill-button-text-color: var(--text-color-primary);

    /* Hover state colors */
    --pill-button-background-hover: #f8f9fa;
    --pill-button-border-hover: 2px solid #ced4da;

    /* Selected state colors - using app primary colors */
    --pill-button-background-selected: var(--color-primary);
    --pill-button-border-selected: 2px solid var(--color-primary);
    --pill-button-text-color-selected: var(--button-text-color-primary);

    /* Selected hover state */
    --pill-button-background-selected-hover: var(--color-secondary);
    --pill-button-border-selected-hover: 2px solid var(--color-secondary);

    /* Focus state */
    --pill-button-focus-outline: 2px solid var(--focus-default-border-color);
    --pill-button-focus-outline-offset: 2px;

    /* Disabled state */
    --pill-button-background-disabled: #f5f5f5;
    --pill-button-border-disabled: 2px solid #dee2e6;
    --pill-button-text-color-disabled: var(--button-disabled-background-color-primary);
}

/* Base pill button container */
.pill-button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0;
}

/* Base pill button styling */
.pill-button {
    position: relative;
    display: inline-block;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--pill-button-font-size);
    font-weight: var(--pill-button-font-weight);
    line-height: 1.4;
    padding: var(--pill-button-padding);
    border-radius: var(--pill-button-border-radius);
    border: var(--pill-button-border);
    background: var(--pill-button-background);
    color: var(--pill-button-text-color);
    transition: var(--pill-button-transition);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Hide the actual input */
.pill-button input[type="radio"],
.pill-button input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

/* Hover state */
.pill-button:hover {
    background: var(--pill-button-background-hover);
    border: var(--pill-button-border-hover);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Focus state for accessibility */
.pill-button:focus-within,
.pill-button input:focus + .pill-button-label {
    outline: var(--pill-button-focus-outline);
    outline-offset: var(--pill-button-focus-outline-offset);
}

/* Selected state */
.pill-button:has(input:checked),
.pill-button.selected {
    background: var(--pill-button-background-selected) !important;
    border: var(--pill-button-border-selected) !important;
    color: var(--pill-button-text-color-selected) !important;
    font-weight: 600;
}

/* Selected hover state */
.pill-button:has(input:checked):hover,
.pill-button.selected:hover {
    background: var(--pill-button-background-selected-hover);
    border: var(--pill-button-border-selected-hover);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(212, 55, 49, 0.3);
}

/* Disabled state */
.pill-button.disabled {
    background: var(--pill-button-background-disabled);
    border: var(--pill-button-border-disabled);
    color: var(--pill-button-text-color-disabled);
    cursor: not-allowed;
    opacity: 0.6;
    transform: none !important;
    box-shadow: none !important;
}

.pill-button.disabled:hover,
.pill-button:has(input:disabled) + .pill-button-label:hover {
    background: var(--pill-button-background-disabled);
    border: var(--pill-button-border-disabled);
}

/* Label styling when used with hidden inputs */
.pill-button-label {
    display: block;
    cursor: pointer;
    margin: 0;
    padding: 0;
    font-weight: inherit;
    color: inherit;
}

/* Size variants */
.pill-button.pill-button-sm {
    --pill-button-padding: 6px 12px;
    --pill-button-font-size: 12px;
    --pill-button-border-radius: 16px;
}

.pill-button.pill-button-lg {
    --pill-button-padding: 12px 20px;
    --pill-button-font-size: 16px;
    --pill-button-border-radius: 24px;
}

/* Color variants */
.pill-button.pill-button-secondary {
    --pill-button-background-selected: var(--color-secondary);
    --pill-button-border-selected: 2px solid var(--color-secondary);
    --pill-button-background-selected-hover: #6a2422;
    --pill-button-border-selected-hover: 2px solid #6a2422;
}

.pill-button.pill-button-success {
    --pill-button-background-selected: var(--color-success);
    --pill-button-border-selected: 2px solid var(--color-success);
    --pill-button-background-selected-hover: darkgreen;
    --pill-button-border-selected-hover: 2px solid darkgreen;
}

/* Multi-select checkboxes - add check icon */
.pill-button input[type="checkbox"]:checked + .pill-button-label::before {
    content: " ";
    font-weight: bold;
    margin-right: 4px;
}

/* Radio button groups - ensure only one selection */
.pill-button-group.radio-group .pill-button input[type="radio"] {
    margin: 0;
}

/* Responsive behavior */
@media (max-width: 600px) {
    .pill-button-group {
        gap: 6px;
    }

    .pill-button {
        --pill-button-padding: 6px 12px;
        --pill-button-font-size: 13px;
    }
}

/* Integration with existing form styles */
.pill-button-group.form-field {
    margin: 10px 0;
}

/* Error state integration */
.pill-button-group.error .pill-button {
    --pill-button-border: 2px solid var(--color-error);
}

.pill-button-group.error .pill-button:hover {
    --pill-button-border-hover: 2px solid var(--color-error);
}

/* Loading state */
.pill-button.loading {
    pointer-events: none;
    opacity: 0.7;
}

.pill-button.loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Animation for check mark appearance */
.pill-button input[type="checkbox"]:checked + .pill-button-label::before {
    animation: checkmark-appear 0.2s ease-out;
}

@keyframes checkmark-appear {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}