/**
 * SQLab Hub — Shared lesson sidebar / progress-card / completion-bar styles.
 * Loaded by every lesson page (static HTML + the big-6 Next.js page) alongside
 * frontend/public/js/lesson-registry.js + lesson-progress.js.
 *
 * Reuses the CSS custom properties (--bg, --green, --mono, etc.) already
 * defined on :root by each page's own inline <style> block — this file does
 * not redefine the palette, only new component classes.
 */

/* ── Progress card (top of sidebar) ─────────────────────────────────────── */
.sqlab-progress-card{padding:1.1rem 1.25rem 1.25rem;border-bottom:1px solid var(--border);margin-bottom:0.25rem}
.sqlab-progress-title{font-size:0.78rem;font-weight:700;color:var(--text);margin-bottom:0.6rem;letter-spacing:0.01em}
.sqlab-progress-top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:0.35rem}
.sqlab-progress-pct{font-family:var(--mono);font-size:1.5rem;font-weight:700;color:var(--green);line-height:1}
.sqlab-progress-sub{font-size:0.72rem;color:var(--text-muted)}
.sqlab-progress-bar-wrap{height:8px;background:var(--bg3);border-radius:999px;overflow:hidden;border:1px solid var(--border);margin:0.6rem 0 0.5rem}
.sqlab-progress-bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--green),var(--cyan));transition:width 0.6s ease}
.sqlab-progress-remaining{font-size:0.7rem;font-family:var(--mono);color:var(--text-dim)}
.sqlab-login-cta{display:block;margin-top:0.75rem;font-size:0.72rem;font-family:var(--mono);color:var(--cyan);text-decoration:none;border:1px solid rgba(0,229,255,0.3);background:var(--cyan-dim);border-radius:8px;padding:0.45rem 0.6rem;text-align:center;transition:all 0.15s}
.sqlab-login-cta:hover{background:rgba(0,229,255,0.18)}
.sqlab-auth-status{display:flex;align-items:center;gap:0.4rem;margin-top:0.75rem;font-size:0.72rem;font-family:var(--mono);color:var(--text-muted)}
.sqlab-auth-status-in{color:#00e676}
.sqlab-auth-status-pending{color:var(--text-dim);opacity:0.6}
.sqlab-auth-dot{width:6px;height:6px;border-radius:50%;background:#00e676;flex-shrink:0;box-shadow:0 0 6px rgba(0,230,118,0.7)}
.sqlab-auth-dot-pending{background:var(--text-dim);box-shadow:none;animation:sqlabPulse 1.2s ease-in-out infinite}
@keyframes sqlabPulse{0%,100%{opacity:0.4}50%{opacity:1}}

/* ── Sidebar lesson-status icons ────────────────────────────────────────── */
.sqlab-status-icon{font-size:0.85rem;width:16px;text-align:center;flex-shrink:0;line-height:1}
.sqlab-status-icon.done{color:#00e676}
.sqlab-status-icon.current{color:var(--green)}
.sqlab-status-icon.available{color:var(--text-dim)}
.sqlab-status-icon.soon{color:var(--text-dim);opacity:0.5}
.sqlab-status-toggle{cursor:pointer;border-radius:50%;transition:transform 0.15s,background 0.15s}
.sqlab-status-toggle:hover{transform:scale(1.35);background:rgba(255,255,255,0.1)}
.sidebar-item.sqlab-current{color:var(--green);background:var(--green-dim);border-left-color:var(--green);font-weight:600}
.sidebar-item.sqlab-done{color:var(--text)}
.sidebar-item.sqlab-soon{opacity:0.45;cursor:default;pointer-events:none}

/* ── Lesson completion bar (bottom of lesson content) ───────────────────── */
.sqlab-complete-bar{margin:1rem 0 2.5rem;padding:1.5rem;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);text-align:center}
.sqlab-complete-btn{background:var(--green);color:#000;font-family:var(--sans,inherit);font-weight:700;font-size:0.9rem;border:none;padding:0.8rem 2rem;border-radius:var(--radius);cursor:pointer;transition:all 0.2s}
.sqlab-complete-btn:hover{background:#fff;transform:translateY(-2px);box-shadow:0 8px 24px rgba(124,77,255,0.25)}
.sqlab-complete-success{animation:sqlabFadeUp 0.4s ease}
.sqlab-complete-success-badge{display:inline-flex;align-items:center;gap:0.5rem;color:#00e676;font-weight:700;font-size:1rem;margin-bottom:0.35rem}
.sqlab-complete-success-sub{color:var(--text-muted);font-size:0.85rem;margin-bottom:1.1rem}
.sqlab-next-btn{display:inline-flex;align-items:center;gap:0.6rem;background:var(--green-dim);border:1px solid rgba(124,77,255,0.35);color:var(--green);font-weight:700;font-size:0.9rem;padding:0.75rem 1.5rem;border-radius:var(--radius);text-decoration:none;transition:all 0.2s}
.sqlab-next-btn:hover{background:var(--green);color:#000;transform:translateX(3px)}
.sqlab-course-complete{color:var(--amber);font-weight:700}
.sqlab-guest-note{margin-top:0.9rem;font-size:0.78rem;color:var(--text-muted)}
.sqlab-guest-note a{color:var(--cyan);text-decoration:none}
.sqlab-guest-note a:hover{text-decoration:underline}
@keyframes sqlabFadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ── Related-challenges topic link ──────────────────────────────────────── */
.sqlab-topic-link{display:inline-block;margin-top:0.9rem;font-size:0.82rem;font-weight:600;color:var(--green);text-decoration:none}
.sqlab-topic-link:hover{text-decoration:underline}

/* ── Prev/Next lesson quick-nav row ─────────────────────────────────────── */
.sqlab-prevnext-row{display:flex;justify-content:space-between;gap:1rem;margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--border)}
.sqlab-prev-link{font-size:0.8rem;color:var(--text-muted);text-decoration:none;transition:color 0.15s}
.sqlab-prev-link:hover{color:var(--green)}