/*
 * Shared CSS — loaded on all authenticated webapp-tool pages.
 * Extracted from webapp/build-app.py TOPBAR_CSS + FEATURES_CSS (non-dark-mode rules).
 */

/* ── Top bar ── */
.top-bar { background:#16213e; color:#fff; padding:0.6rem 1.5rem; display:flex; justify-content:space-between; align-items:center; font-size:0.85rem; position:sticky; top:0; z-index:10000; }
.top-bar-left { display:flex; align-items:center; gap:0.5rem; min-width:0; }
.top-bar-left span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.top-bar-right { display:flex; align-items:center; gap:0.5rem; flex-shrink:0; }
.top-bar a, .top-bar > .top-bar-right > button { background:none; border:1px solid rgba(255,255,255,0.3); color:#8ab4f8; padding:0.25rem 0.8rem; border-radius:6px; cursor:pointer; font-size:0.8rem; text-decoration:none; white-space:nowrap; }
.top-bar a:hover, .top-bar > .top-bar-right > button:hover { background:rgba(255,255,255,0.15); }
.top-bar-menu-wrap { position:relative; }
.top-bar-menu-btn { font-size:1.1rem !important; padding:0.2rem 0.6rem !important; line-height:1; color:#fff !important; background:none; border:1px solid rgba(255,255,255,0.3); border-radius:6px; cursor:pointer; }
.top-bar-dropdown { position:absolute; right:0; top:calc(100% + 4px); background:#16213e; border:1px solid rgba(255,255,255,0.2); border-radius:8px; min-width:200px; box-shadow:0 8px 24px rgba(0,0,0,0.4); display:none; z-index:10001; overflow:hidden; }
.top-bar-dropdown.open { display:block; }
.top-bar-dropdown a, .top-bar-dropdown button { display:block; width:100%; text-align:left; border:none; border-bottom:1px solid rgba(255,255,255,0.1); padding:0.35rem 1rem; border-radius:0; font-size:0.85rem; color:#8ab4f8; background:none; cursor:pointer; text-decoration:none; }
.top-bar-dropdown a:hover, .top-bar-dropdown button:hover { background:rgba(255,255,255,0.1); }
.top-bar-dropdown .menu-divider { border-bottom:none; padding:0; height:0; border-top:1px solid rgba(255,255,255,0.2); }
.top-bar-dropdown .sign-out-item { color:#ff8a80; border-bottom:none; }
.top-bar-dropdown .menu-version { display:block; padding:0.25rem 1rem; font-size:0.75rem; color:rgba(255,255,255,0.35); border-bottom:none; cursor:default; }
.menu-profile { padding:0.6rem 1rem 0.3rem; border-bottom:1px solid rgba(255,255,255,0.15); }
.menu-profile-top { display:flex; align-items:center; gap:0.4rem; font-size:0.8rem; margin-bottom:0.15rem; }
.menu-profile-top-text { color:#e0e0e0; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; min-width:0; }
.menu-profile-subs { color:rgba(255,255,255,0.5); font-size:0.75rem; margin-bottom:0.4rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.menu-profile-change { color:#8ab4f8; font-size:0.75rem; cursor:pointer; background:none; border:none; padding:0; white-space:nowrap; margin-left:auto; flex-shrink:0; }
.menu-profile-change:hover { text-decoration:underline; }
@media print { .top-bar { display:none !important; } }

/* ── Exam badge (countdown) ── */
.exam-badge { display:inline-block; padding:0.15rem 0.5rem; border-radius:10px; font-size:0.7rem; font-weight:700; color:#fff; white-space:nowrap; line-height:1.3; }
.exam-badge.ecd-green { background:#2e7d32; }
.exam-badge.ecd-yellow { background:#f9a825; color:#333; }
.exam-badge.ecd-orange { background:#e65100; }
.exam-badge.ecd-red { background:#c62828; }
.exam-badge.ecd-pulse { background:#c62828; animation:ecd-pulse 1s ease-in-out infinite; }
.exam-badge.ecd-muted { background:#777; }
@keyframes ecd-pulse { 0%,100% { opacity:1; } 50% { opacity:0.5; } }

/* ── Auth loading spinner ── */
#auth-loading { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:60vh; }
#auth-loading .spinner { border:3px solid #f3f3f3; border-top:3px solid #667eea; border-radius:50%; width:40px; height:40px; animation:spin 1s linear infinite; }
@keyframes spin { 0% { transform:rotate(0deg); } 100% { transform:rotate(360deg); } }

/* ── Panel toolbar (shuffle, expand/collapse) ── */
.panel-toolbar { display:flex; gap:0.5rem; margin:0.5rem 0; flex-wrap:wrap; align-items:center; justify-content:center; }
.panel-toolbar-btn { padding:0.35rem 0.8rem; border-radius:6px; border:2px solid #ccc; background:#fff; font-weight:700; font-size:0.8rem; cursor:pointer; color:#555; transition:all 0.15s; -webkit-tap-highlight-color:transparent; }
.panel-toolbar-btn:hover { background:#f0f0f0; border-color:#999; }
.panel-toolbar-btn:active { transform:scale(0.97); }

/* ── Progress badges ── */
.q-progress-badge { font-size:0.72rem; font-weight:700; padding:0.1rem 0.5rem; border-radius:10px; flex-shrink:0; cursor:pointer; user-select:none; border:2px solid #ccc; background:#f0f0f0; color:#999; min-width:2.8rem; text-align:center; -webkit-tap-highlight-color:transparent; transition:all 0.15s; }
.q-progress-badge.status-review { background:#fff3cd; border-color:#f5a623; color:#8a6d00; }
.q-progress-badge.status-pass { background:#e8f5e9; border-color:#2e7d32; color:#2e7d32; }

/* ── Progress bars ── */
.progress-bar-container { display:flex; align-items:center; gap:0.8rem; margin:0.6rem 0 0.2rem; padding:0.6rem 1rem; background:#fff; border-radius:8px; box-shadow:0 1px 4px rgba(0,0,0,0.08); flex-wrap:wrap; }
.progress-bar-track { flex:1; min-width:100px; height:10px; background:#e0e0e0; border-radius:5px; overflow:hidden; }
.progress-bar-fill { height:100%; background:#2e7d32; border-radius:5px; transition:width 0.3s; }
.progress-bar-label { font-weight:700; font-size:0.85rem; color:#333; white-space:nowrap; }

/* ── Bookmark button ── */
.q-bookmark-btn { font-size:1rem; padding:0 0.2rem; background:none; border:none; cursor:pointer; flex-shrink:0; color:#ccc; transition:all 0.15s; -webkit-tap-highlight-color:transparent; line-height:1; }
.q-bookmark-btn.bookmarked { color:#f5a623; }
.q-bookmark-btn:hover { color:#f5a623; }
.panel-toolbar-btn.filter-active { background:#fff3cd; border-color:#f5a623; color:#8a6d00; }

/* ── Notes textarea ── */
.q-notes-area { width:100%; min-height:60px; margin-top:0.5rem; padding:0.5rem; border:2px solid #e0e0e0; border-radius:6px; font-family:Arial,Helvetica,sans-serif; font-size:0.85rem; resize:vertical; transition:border-color 0.15s; }
.q-notes-area:focus { border-color:#1a5fa1; outline:none; }
.q-notes-toggle { font-size:0.78rem; font-weight:700; padding:0.15rem 0.6rem; border-radius:10px; border:none; cursor:pointer; flex-shrink:0; background:#757575; color:#fff; transition:all 0.2s; min-width:4.5rem; text-align:center; }
.q-notes-toggle.has-notes { background:#1a5fa1; }
.q-notes-container { padding:0.5rem 1.2rem 1rem; display:none; }
.q-notes-container.visible { display:block; }

/* ── Explain button ── */
.q-explain-btn { font-size:0.78rem; font-weight:700; padding:0.15rem 0.6rem; border-radius:10px; border:none; cursor:pointer; flex-shrink:0; background:#7b1fa2; color:#fff; min-width:4.5rem; text-align:center; -webkit-tap-highlight-color:transparent; }
.q-answer-btn:disabled, .q-explain-btn:disabled { opacity:0.5; cursor:default; }
.q-explain-btn.loading { opacity:0.7; cursor:wait; }

/* ── Explain content panel ── */
.explain-content { display:none; padding:1rem 1.2rem; background:#f3e5f5; border-top:2px solid #ce93d8; font-size:0.9rem; line-height:1.6; }
.explain-content h4 { margin:0.8rem 0 0.3rem; color:#6a1b9a; }
.explain-content ul { margin:0.3rem 0; padding-left:1.5rem; }
.explain-content .explain-pattern { background:#fff; border-left:3px solid #7b1fa2; padding:0.5rem 0.8rem; margin:0.5rem 0; border-radius:0 6px 6px 0; }
.explain-table { border-collapse:collapse; margin:0.5rem 0; font-size:0.85rem; width:100%; }
.explain-table th, .explain-table td { border:1px solid #ccc; padding:0.3rem 0.6rem; text-align:left; }
.explain-table th { background:#f0f0f0; font-weight:600; }
.admin-regen-btn { float:right; font-size:0.75rem; font-weight:600; padding:0.2rem 0.6rem; border-radius:8px; border:1px solid #ef6c00; background:#fff3e0; color:#e65100; cursor:pointer; }
.admin-regen-btn:hover { background:#ffe0b2; }
.admin-regen-btn:disabled { opacity:0.5; cursor:wait; }

/* ── AI Chat follow-up ── */
.explain-chat { margin-top:0.8rem; border-top:1px dashed #ce93d8; padding-top:0.8rem; }
.explain-chat-messages { max-height:300px; overflow-y:auto; margin-bottom:0.5rem; }
.explain-chat-msg { padding:0.4rem 0.6rem; margin-bottom:0.4rem; border-radius:6px; font-size:0.85rem; line-height:1.5; }
.explain-chat-msg.user { background:#e8eaf6; color:#1a237e; text-align:right; }
.explain-chat-msg.ai { background:#f3e5f5; color:#4a148c; }
.explain-chat-msg.ai h4 { margin:0.4rem 0 0.2rem; color:#6a1b9a; font-size:0.85rem; }
.explain-chat-input { display:flex; gap:0.4rem; }
.explain-chat-field { flex:1; padding:0.4rem 0.6rem; border:2px solid #ce93d8; border-radius:6px; font-size:0.85rem; font-family:Arial,Helvetica,sans-serif; }
.explain-chat-field:focus { border-color:#7b1fa2; outline:none; }
.explain-chat-send { padding:0.4rem 0.8rem; border-radius:6px; border:none; background:#7b1fa2; color:#fff; font-weight:700; font-size:0.8rem; cursor:pointer; }
.explain-chat-send:hover { background:#6a1b9a; }
.explain-chat-send:disabled { opacity:0.5; cursor:wait; }

/* ── Share button ── */
.q-share-btn { font-size:0.78rem; font-weight:700; padding:0.15rem 0.6rem; border-radius:10px; border:none; cursor:pointer; flex-shrink:0; background:#757575; color:#fff; transition:all 0.2s; text-align:center; -webkit-tap-highlight-color:transparent; }
.q-share-btn:hover { background:#555; }
.q-share-btn.copied { background:#2e7d32; }
.share-toast { position:fixed; bottom:2rem; left:50%; transform:translateX(-50%); background:#333; color:#fff; padding:0.6rem 1.5rem; border-radius:8px; font-size:0.9rem; font-weight:600; z-index:99999; opacity:0; transition:opacity 0.3s; pointer-events:none; }
.share-toast.visible { opacity:1; }

/* ── Deep link highlight ── */
.question-card.highlight-linked { animation:highlight-pulse 2s ease-out; }
@keyframes highlight-pulse { 0% { box-shadow:0 0 0 4px #f5a623; } 100% { box-shadow:0 1px 4px rgba(0,0,0,0.05); } }

/* ── Question button (back to question view) ── */
.q-question-btn { font-size:0.78rem; font-weight:700; padding:0.15rem 0.6rem; border-radius:10px; border:none; cursor:pointer; flex-shrink:0; background:#2e7d32; color:#fff; transition:all 0.2s; min-width:4.5rem; text-align:center; -webkit-tap-highlight-color:transparent; }
.q-question-btn:hover { background:#1b5e20; }
.q-question-btn:disabled { background:#ccc; color:#999; cursor:default; }

/* ── Question search ── */
.search-container { margin:0.5rem 0 0.8rem; display:flex; gap:0.5rem; align-items:center; flex-wrap:wrap; }
.search-input { flex:1; min-width:200px; padding:0.5rem 0.8rem; border:2px solid #ccc; border-radius:8px; font-size:0.9rem; font-family:Arial,Helvetica,sans-serif; transition:border-color 0.15s; }
.search-input:focus { border-color:#1a5fa1; outline:none; }
.search-input::placeholder { color:#999; }
.search-count { font-size:0.8rem; color:#666; white-space:nowrap; }
.search-clear { padding:0.4rem 0.8rem; border-radius:6px; border:2px solid #ccc; background:#fff; font-weight:700; font-size:0.8rem; cursor:pointer; color:#555; }
.search-clear:hover { background:#f0f0f0; border-color:#999; }

/* ── Self-assessment marks entry ── */
.self-assess-bar { display:flex; align-items:center; gap:0.5rem; padding:0.5rem 1rem; background:#fffde7; border-top:1px dashed #f5a623; flex-wrap:wrap; }
.self-assess-bar label { font-weight:700; font-size:0.82rem; color:#555; }
.self-assess-input { width:3.5rem; padding:0.2rem 0.4rem; border:2px solid #ccc; border-radius:6px; font-size:0.9rem; font-weight:700; text-align:center; font-family:monospace; }
.self-assess-input:focus { border-color:#f5a623; outline:none; }
.self-assess-save { padding:0.2rem 0.6rem; border-radius:6px; border:none; cursor:pointer; font-weight:700; font-size:0.78rem; background:#2e7d32; color:#fff; }
.self-assess-max { font-weight:600; color:#999; font-size:0.85rem; }
.q-self-score { font-size:0.75rem; font-weight:700; color:#2e7d32; background:#e8f5e9; padding:0.1rem 0.45rem; border-radius:10px; flex-shrink:0; font-family:monospace; }

/* ── Cloud sync indicator ── */
.sync-status { font-size:0.7rem; color:#888; margin-left:0.5rem; opacity:0; transition:opacity 0.5s; }
.sync-status.synced { color:#2e7d32; }

/* ── Card body wrapper + split view ── */
.card-body img.q-img { display:block; margin-left:auto; margin-right:auto; width:100%; }
.card-body.split-active { display:flex; gap:0; }
.card-body.split-active > .question-text,
.card-body.split-active > .answer-content,
.card-body.split-active > .explain-content,
.card-body.split-active > .info-content { flex:1; min-width:0; }
.card-body.split-active > .answer-content { border-left:2px solid #a5d6a7; padding-left:0.8rem; background:rgba(232,245,233,0.3); }
.card-body.split-active > .explain-content { border-left:2px solid #ce93d8; padding-left:0.8rem; border-top:none; }
.card-body.split-active > .info-content { border-left:2px solid #42a5f5; border-top:none; padding-left:0.8rem; background:rgba(33,150,243,0.08); }
.card-body.split-active img { width:100%; height:auto; }
@media (max-width:700px) {
  .card-body.split-active { flex-direction:column; }
  .card-body.split-active > .answer-content { border-left:none; border-top:2px solid #a5d6a7; padding-left:0; padding-top:0.5rem; }
  .card-body.split-active > .explain-content { border-left:none; border-top:2px solid #ce93d8; padding-left:0; padding-top:0.5rem; }
  .card-body.split-active > .info-content { border-left:none; border-top:2px solid #42a5f5; padding-left:0; padding-top:0.5rem; }
}

/* ── Spaced repetition / Review mode ── */
.panel-toolbar-btn.review-btn { background:#e3f2fd; border-color:#1565c0; color:#1565c0; }
.panel-toolbar-btn.review-btn:hover { background:#bbdefb; }
.panel-toolbar-btn.review-active { background:#1565c0; color:#fff; border-color:#1565c0; }
.review-badge { font-size:0.65rem; font-weight:700; background:#e3f2fd; color:#1565c0; padding:0.1rem 0.4rem; border-radius:8px; margin-left:0.3rem; vertical-align:middle; }
@media print { .review-badge { display:none !important; } }

/* ── Expiry warning banner ── */
.expiry-warning { background:#fff3cd; color:#856404; border-bottom:1px solid #ffc107; padding:0.5rem 1rem; text-align:center; font-size:0.9rem; position:relative; z-index:100; }
.expiry-warning a { color:#0f3460; font-weight:700; }
.expiry-warning .dismiss-btn { position:absolute; right:0.75rem; top:50%; transform:translateY(-50%); background:none; border:none; font-size:1.1rem; cursor:pointer; color:#856404; }

/* ── Freemium banner ── */
#freemium-banner { background:#e8f4fd; border-bottom:1px solid #90caf9; color:#1565c0; padding:8px 16px; font-size:14px; text-align:center; }
#freemium-banner a { color:#0d47a1; font-weight:600; }

/* ── Schedule ── */
.schedule-school-selector { display:flex; align-items:center; gap:0.5rem; margin-bottom:1.5rem; }
.schedule-school-selector label { font-weight:600; white-space:nowrap; }
.schedule-school-selector input[list] { flex:1; padding:0.5rem 0.75rem; border:2px solid #a5d6a7; border-radius:8px; font-size:0.95rem; background:#fff; }
.schedule-school-selector input[list]:focus { outline:none; border-color:#2e7d32; box-shadow:0 0 0 3px rgba(46,125,50,0.15); }
.schedule-school-name { font-weight:700; color:#2e7d32; font-size:0.95rem; }
.schedule-school-name a { color:#0f3460; font-weight:600; font-size:0.85rem; margin-left:0.5rem; text-decoration:underline; }
.schedule-content { display:none; }
.schedule-content.active { display:block; }
.schedule-countdown { background:linear-gradient(135deg,#1a3570 0%,#0f3460 100%); color:#fff; border-radius:10px; padding:1rem 1.5rem; margin-bottom:1.5rem; text-align:center; }
.schedule-countdown .countdown-label { font-size:0.85rem; opacity:0.85; margin-bottom:0.3rem; }
.schedule-countdown .countdown-value { font-size:1.6rem; font-weight:800; }
.schedule-countdown .countdown-task { font-size:1rem; font-weight:600; margin-top:0.2rem; }
.schedule-past td { text-decoration:line-through; opacity:0.5; }
.schedule-next { background:#e8f5e9 !important; }
.schedule-next td { font-weight:700 !important; color:#2e7d32 !important; }
.schedule-generic-msg { font-size:0.85rem; color:#888; margin-top:1rem; }

/* ── Print styles ── */
@media print {
  body { padding:0; background:#fff; }
  .page-tabs, .draw-toolbar, .panel-toolbar, .progress-bar-container, .view-toggle,
  .q-timer-btn, .q-answer-btn, .q-info-btn, .q-progress-badge, .q-bookmark-btn,
  .q-notes-toggle, .q-notes-container, .q-share-btn, .q-question-btn, .q-explain-btn, .explain-content, .admin-regen-btn, .q-preview, #sample-banner { display:none !important; }
  .page-panel { display:block !important; border:none !important; padding:0 !important; }
  .topic-section, .question-card { break-inside:avoid; page-break-inside:avoid; }
  .topic-section[open] > .topic-label { border:none; background:none; }
  .question-card { border:1px solid #999; margin-bottom:1rem; box-shadow:none; }
  .question-header { background:none; border-bottom:1px solid #999; }
  .question-text { padding:0.5rem; display:block !important; }
  .answer-content { display:block !important; border-top:1px solid #999; padding:0.5rem; }
  .card-body.split-active { display:block !important; }
  .q-img { max-width:100%; border:none; padding:0; }
  .draw-layer { display:none !important; }
  .container { max-width:100%; }
  .search-container { display:none !important; }
  #freemium-banner { display:none !important; }
  .explain-chat { display:none !important; }
}