/* Root-cause layout fix (2026-09-26) - global.css's shared
   `.page-section.active` rule makes every page a
   `display:flex; flex-direction:column; justify-content:center;
   align-items:center` box (min-height:100vh) - fine for a page whose
   content is always taller/wider than the centering box, but this page's
   header+main can be shorter than the viewport (e.g. one grade's single
   question, or the loading-indicator frame before data arrives), and
   centering then visibly pushes header+main down from the top, leaving a
   large blank gap above the WE Trust logo on a short/mobile viewport -
   "why is not using the space in top." Same fix already applied to
   #support-requests-page/#registration-dashboard-page/etc (see
   support-requests.css's own note on this) - top-align instead of
   vertically centering, stretch to fill width instead of shrink-to-fit. */
#poll-page.page-section.active {
    justify-content: flex-start;
    align-items: stretch;
}

#poll-page {
    background: linear-gradient(180deg, #eef4fb 0%, #f8f9fa 220px);
    min-height: 100vh;
}

#poll-page .poll-date-label {
    display: inline-block;
    margin-top: 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
}

#poll-page .poll-completion-banner {
    display: none;
    align-items: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    color: white;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 6px 18px rgba(39, 174, 96, 0.25);
    font-weight: 600;
    font-size: 0.98rem;
}

#poll-page .poll-completion-banner i {
    font-size: 1.4rem;
    flex-shrink: 0;
}

#poll-page .poll-completion-banner .poll-completion-sub {
    display: block;
    font-weight: 400;
    font-size: 0.85rem;
    opacity: 0.9;
    margin-top: 0.15rem;
}

#poll-page .poll-card {
    background: white;
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(10, 61, 98, 0.08);
    padding: 1.5rem;
    margin-bottom: 1.25rem;
    border: 1px solid #eef1f5;
    border-left: 4px solid #dfe6ee;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

#poll-page .poll-card.answered {
    border-left-color: #2ecc71;
}

#poll-page .poll-card:hover {
    box-shadow: 0 8px 24px rgba(10, 61, 98, 0.12);
}

#poll-page .poll-question {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0a3d62;
    margin-bottom: 1.1rem;
    line-height: 1.4;
}

#poll-page .poll-options {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

#poll-page .poll-option-btn {
    flex: 1;
    min-width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    border-radius: 10px;
    border: 2px solid #e3e8ee;
    background: #fbfcfd;
    color: #4a5568;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
}

#poll-page .poll-option-btn i {
    font-size: 0.95rem;
}

#poll-page .poll-option-btn:hover {
    border-color: #3498db;
    background: #f2f8fd;
    transform: translateY(-1px);
}

#poll-page .poll-option-btn.poll-yes.selected {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    border-color: #27ae60;
    color: white;
    box-shadow: 0 4px 12px rgba(46, 204, 113, 0.35);
}

#poll-page .poll-option-btn.poll-no.selected {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    border-color: #c0392b;
    color: white;
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.35);
}

#poll-page .poll-status {
    margin-top: 0.85rem;
    font-size: 0.88rem;
    color: #6b7785;
    min-height: 1.2em;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

#poll-page .poll-status i {
    color: #2ecc71;
}

#poll-page .poll-status-error {
    color: #d32f2f;
}

#poll-page .poll-status-error i {
    color: #d32f2f;
}

#poll-page .no-polls {
    text-align: center;
    padding: 3rem 1.5rem;
    color: #6b7785;
    background: white;
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(10, 61, 98, 0.08);
}

#poll-page .no-polls i {
    font-size: 2.2rem;
    color: #b7c3d0;
    margin-bottom: 0.75rem;
    display: block;
}

#poll-page .no-polls p {
    font-size: 1.05rem;
    margin: 0;
}

@media (max-width: 600px) {
    #poll-page .poll-options {
        flex-direction: column;
    }
    #poll-page .poll-completion-banner {
        font-size: 0.9rem;
    }
}

/* ─── "My Answers" tab (added 2026-09-26) ─────────────────────────────── */

.poll-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    border-bottom: 2px solid #e9ecef;
}

.poll-tab {
    flex: 1;
    background: none;
    border: none;
    padding: 0.75rem 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #6c757d;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.poll-tab:hover {
    color: #3498db;
}

.poll-tab.active {
    color: #0a3d62;
    border-bottom-color: #3498db;
}

.poll-panel {
    display: none;
}

.poll-panel.active {
    display: block;
}

.poll-history-day-card {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.poll-history-day-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #f1f3f5;
}

.poll-history-day-date {
    font-weight: 700;
    color: #0a3d62;
    font-size: 0.95rem;
}

.poll-history-day-grade {
    font-size: 0.78rem;
    font-weight: 600;
    color: #3498db;
    background: #eaf4fc;
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
}

.poll-history-question-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.4rem 0;
}

.poll-history-question-row + .poll-history-question-row {
    border-top: 1px dashed #f1f3f5;
}

.poll-history-question-text {
    font-size: 0.9rem;
    color: #333;
    flex: 1;
}

.poll-history-answer-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 0.25rem 0.65rem;
    white-space: nowrap;
}

.poll-history-answer-yes {
    background: #e6f7ec;
    color: #1e8449;
}

.poll-history-answer-no {
    background: #fdecea;
    color: #a71d2a;
}

.poll-history-load-more-btn {
    background: #eaf4fc;
    color: #0a3d62;
    border: 1px solid #cfe6f7;
    border-radius: 8px;
    padding: 0.6rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.poll-history-load-more-btn:hover {
    background: #d8ecfa;
}

.poll-history-load-more-btn:disabled {
    opacity: 0.6;
    cursor: default;
}