@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');

/* ═══════════════════════════════════════
   ElevateMe — Shared Stylesheet
   Edit colors here → updates all pages
═══════════════════════════════════════ */
:root {
    --brand-dark:   #1a1a1a;
    --brand-teal:   #488a6d;
    --brand-accent: #c7493a;
    --bg-light:     #f4f9f6;
    --text-main:    #2d3436;
    --sidebar-w:    280px;
}

* { margin:0; padding:0; box-sizing:border-box;
    font-family:'Nunito Sans',sans-serif; }

body { background:var(--bg-light); color:var(--text-main); line-height:1.5; }

/* ── NAVBAR ── */
.navbar {
    background:#fff; box-shadow:0 2px 15px rgba(0,0,0,0.05);
    padding:0.8rem 2rem; display:flex; align-items:center;
    justify-content:space-between; position:sticky; top:0; z-index:200;
}
.logo-area { display:flex; align-items:center; gap:12px; cursor:pointer; text-decoration:none; }
.nav-links  { display:flex; gap:2rem; align-items:center; }
.nav-links a { text-decoration:none; color:var(--brand-dark); font-weight:500; transition:0.2s; font-size:0.95rem; }
.nav-links a:hover,.nav-links a.active { color:var(--brand-teal); }
.btn-accent { background:var(--brand-accent); border-radius:6px; padding:0.5rem 1.2rem; color:white!important; font-weight:600; transition:0.3s; }
.btn-accent:hover { background:#c7493a; filter:brightness(1.05); }
.btn-changepw { background:none; border:1px solid #c8ecd4; border-radius:6px; padding:0.4rem 0.9rem; color:var(--brand-teal); font-size:0.82rem; font-weight:700; cursor:pointer; font-family:'Nunito Sans',sans-serif; transition:0.2s; }
.btn-changepw:hover { background:#f0f8f4; border-color:var(--brand-teal); }
.btn-changepw i { margin-right:0.3rem; }

.admin-badge {
    display:none; background:#fff3cd; color:#856404;
    border:1px solid #ffc107; border-radius:20px;
    padding:0.25rem 0.8rem; font-size:0.75rem; font-weight:700;
    letter-spacing:0.05em; align-items:center; gap:0.4rem;
}
body.is-admin .admin-badge { display:flex; }

/* ── WEEK SHELL (sidebar layout) ── */
.week-shell {
    display:flex; min-height:calc(100vh - 64px);
    max-width:1400px; margin:0 auto;
}

/* LEFT SIDEBAR */
.week-sidebar {
    width:var(--sidebar-w); flex-shrink:0; background:white;
    border-right:1px solid #edf2f0; position:sticky; top:64px;
    height:calc(100vh - 64px); overflow-y:auto; display:flex; flex-direction:column;
}
.sidebar-header { padding:1.5rem 1.2rem 1rem; border-bottom:1px solid #edf2f0; }
.sidebar-back {
    display:inline-flex; align-items:center; gap:6px;
    color:var(--brand-teal); font-weight:600; font-size:0.82rem;
    text-decoration:none; margin-bottom:1rem;
    text-transform:uppercase; letter-spacing:0.05em;
}
.sidebar-back:hover { opacity:0.8; }
.sidebar-phase { color:var(--brand-accent); font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.12em; }
.sidebar-week-title { font-size:1rem; font-weight:800; color:var(--brand-dark); margin-top:0.2rem; line-height:1.3; }
.sidebar-progress { padding:0.8rem 1.2rem; border-bottom:1px solid #edf2f0; }
.sidebar-progress-label { display:flex; justify-content:space-between; font-size:0.75rem; color:#7f8c8d; margin-bottom:0.4rem; }
.sidebar-progress-label strong { color:var(--brand-teal); }
.progress-track { height:10px; background:#edf2f0; border-radius:99px; overflow:hidden; }
.progress-fill { height:100%; width:0%; background:linear-gradient(90deg,var(--brand-teal),#82bba3); border-radius:99px; transition:width 0.6s ease; }
.sidebar-modules { flex:1; padding:0.8rem 0; }
.sidebar-module-btn {
    width:100%; background:none; border:none; padding:0.75rem 1.2rem;
    text-align:left; cursor:pointer; display:flex; align-items:center; gap:0.7rem;
    transition:background 0.15s; border-left:3px solid transparent;
}
.sidebar-module-btn:hover { background:#fff0ef; }
.sidebar-module-btn.active { background:#eef7f2; border-left-color:var(--brand-teal); }
.sidebar-module-btn.done .sm-check { background:var(--brand-teal); border-color:var(--brand-teal); color:white; }
.sidebar-module-btn.done .sm-title { color:#7f8c8d; }
.sm-check {
    width:20px; height:20px; border-radius:50%; border:2px solid #b2bec3;
    display:flex; align-items:center; justify-content:center;
    font-size:0.6rem; color:transparent; flex-shrink:0; transition:all 0.2s;
}
.sm-text { flex:1; min-width:0; }
.sm-title { font-size:0.82rem; font-weight:600; color:var(--brand-dark); display:block; line-height:1.3; }
.sm-subtitle { font-size:0.7rem; color:#7f8c8d; display:block; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-nav { padding:0.8rem 1.2rem; border-top:1px solid #edf2f0; display:flex; gap:0.5rem; }
.sidebar-nav-btn {
    flex:1; padding:0.5rem; border:1px solid #edf2f0; border-radius:8px;
    background:white; cursor:pointer; font-size:0.78rem; font-weight:600;
    color:var(--brand-teal); transition:all 0.2s; display:flex; align-items:center; justify-content:center; gap:0.4rem;
}
.sidebar-nav-btn:hover { background:#fff0ef; border-color:#c7493a; color:#c7493a; }
.sidebar-nav-btn:disabled { opacity:0.3; cursor:not-allowed; }

/* RIGHT CONTENT */
.week-content { flex:1; padding:2rem 2.5rem; overflow-y:auto; min-width:0; }
.module-panel { display:none; animation:fadeIn 0.25s ease; }
.module-panel.active { display:block; }
@keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

/* Step indicator */
.lesson-step-indicator {
    display:flex; align-items:center; gap:0.6rem;
    font-size:0.78rem; font-weight:600; color:#7f8c8d;
    margin-bottom:1.4rem; flex-wrap:wrap;
}
.step-pill { background:var(--brand-teal); color:white; border-radius:20px; padding:0.2rem 0.8rem; font-size:0.72rem; font-weight:700; letter-spacing:0.05em; }
.step-dots { display:flex; gap:5px; align-items:center; }
.step-dot { width:8px; height:8px; border-radius:50%; background:#dfe6e9; transition:all 0.3s; }
.step-dot.done { background:var(--brand-teal); }
.step-dot.active { background:var(--brand-accent); width:20px; border-radius:4px; }

/* Video player */
.lesson-video-wrap {
    background:var(--brand-dark); border-radius:16px; overflow:hidden;
    aspect-ratio:16/9; width:100%; margin-bottom:1.8rem;
    position:relative; display:flex; align-items:center; justify-content:center;
}
.lesson-video-wrap iframe,.lesson-video-wrap video { position:absolute; inset:0; width:100%; height:100%; border:none; }
.lesson-video-placeholder { display:flex; flex-direction:column; align-items:center; gap:0.8rem; color:rgba(255,255,255,0.35); text-align:center; padding:2rem; }
.lesson-video-placeholder i { font-size:3.5rem; color:rgba(255,255,255,0.1); }
.lesson-video-placeholder span { font-size:0.85rem; }

/* Watch Video button (Google Drive videos open in new tab) */
.video-link-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.6rem; text-decoration: none; color: white; padding: 2rem;
    width: 100%; height: 100%; position: absolute; inset: 0;
    background: linear-gradient(135deg, #488a6d 0%, #2d6b52 100%);
    border-radius: 16px; transition: all 0.3s ease;
}
.video-link-btn i { font-size: 3rem; color: rgba(255,255,255,0.9); transition: transform 0.3s; }
.video-link-btn span { font-size: 1.1rem; font-weight: 800; letter-spacing: 0.04em; }
.video-link-btn small { font-size: 0.75rem; color: rgba(255,255,255,0.6); font-weight: 500; }
.video-link-btn:hover { background: linear-gradient(135deg, #c7493a 0%, #a83a2e 100%); }
.video-link-btn:hover i { transform: scale(1.15); }
.lesson-video-url-row { display:none; gap:0.5rem; margin-bottom:1.5rem; align-items:center; }
body.is-admin .lesson-video-url-row { display:flex; }
.video-url-input { flex:1; font-size:0.8rem; padding:0.4rem 0.7rem; border:1px solid #c8d8d0; border-radius:6px; background:white; color:var(--text-main); outline:none; }
.video-url-input:focus { border-color:var(--brand-teal); }
.btn-save-url { background:var(--brand-teal); color:white; border:none; border-radius:6px; padding:0.4rem 0.8rem; font-size:0.78rem; font-weight:600; cursor:pointer; transition:0.2s; white-space:nowrap; }
.btn-save-url:hover { filter:brightness(1.1); }
.btn-clear-url { background:none; color:#b2bec3; border:none; cursor:pointer; font-size:0.85rem; padding:0.3rem; transition:color 0.2s; }
.btn-clear-url:hover { color:var(--brand-accent); }

/* Lesson notes */
.lesson-notes-card {
    background:white; border-radius:16px; padding:1.6rem 1.8rem;
    border-left:5px solid var(--brand-teal);
    box-shadow:0 2px 12px rgba(0,0,0,0.04); margin-bottom:1.5rem;
}
.lesson-notes-card .notes-header {
    font-size:0.78rem; font-weight:700; text-transform:uppercase;
    letter-spacing:0.1em; color:var(--brand-teal); margin-bottom:1rem; display:flex; align-items:center; gap:0.5rem;
}
.worksheet-bullets { list-style:none; margin:1rem 0; }
.worksheet-bullets li { display:flex; align-items:center; gap:10px; padding:0.4rem 0; border-bottom:1px solid #f5f5f5; font-size:0.9rem; }
.worksheet-bullets li:last-child { border-bottom:none; }
.worksheet-bullets li i { color:var(--brand-teal); width:18px; }

/* Takeaways */
.takeaways-card { background:#eef7f2; border-radius:16px; padding:1.4rem 1.6rem; margin-bottom:1.5rem; border:1px solid #c8e6d8; }
.takeaways-card .tk-header { display:flex; align-items:center; gap:0.6rem; font-size:0.78rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--brand-teal); margin-bottom:1rem; }
.takeaways-list { list-style:none; }
.takeaways-list li { display:flex; align-items:flex-start; gap:0.8rem; padding:0.5rem 0; font-size:0.9rem; color:var(--text-main); border-bottom:1px solid rgba(97,154,132,0.12); line-height:1.5; }
.takeaways-list li:last-child { border-bottom:none; }
.tk-bullet { width:20px; height:20px; border-radius:50%; background:var(--brand-teal); color:white; display:flex; align-items:center; justify-content:center; font-size:0.6rem; flex-shrink:0; margin-top:2px; }

/* Action card */
.action-card { background:#fff8f7; border-radius:16px; padding:1.4rem 1.6rem; margin-bottom:1.5rem; border:1px solid #f5c6be; display:flex; gap:1rem; align-items:flex-start; }
.action-icon { width:42px; height:42px; border-radius:10px; background:var(--brand-accent); color:white; display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; }
.action-text .action-label { font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--brand-accent); margin-bottom:0.3rem; }
.action-text p { font-size:0.88rem; color:var(--text-main); line-height:1.6; }

/* Resources */
.resources-card { background:white; border-radius:16px; padding:1.4rem 1.6rem; margin-bottom:1.5rem; border:1px solid #edf2f0; box-shadow:0 2px 8px rgba(0,0,0,0.03); }
.resources-card .res-header { font-size:0.78rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:#7f8c8d; margin-bottom:0.9rem; display:flex; align-items:center; gap:0.5rem; }
.resources-list { display:flex; flex-direction:column; gap:0.5rem; }
.resource-item { display:flex; align-items:center; gap:0.8rem; padding:0.65rem 0.9rem; border-radius:10px; background:var(--bg-light); border:1px solid #edf2f0; text-decoration:none; color:var(--text-main); font-size:0.85rem; font-weight:500; transition:all 0.2s; }
.resource-item:hover { border-color:#c7493a; background:#fff0ef; color:#c7493a; }
.resource-item i { color:var(--brand-teal); width:18px; text-align:center; flex-shrink:0; }
.resource-item .res-tag { margin-left:auto; font-size:0.68rem; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; background:#edf2f0; padding:0.15rem 0.5rem; border-radius:4px; color:#7f8c8d; }

/* Complete toggle bar */
.complete-toggle-bar {
    background:white; border-radius:12px; padding:1rem 1.4rem;
    display:flex; align-items:center; justify-content:space-between;
    border:1px solid #edf2f0; box-shadow:0 2px 8px rgba(0,0,0,0.03);
    margin-bottom:1.5rem; flex-wrap:wrap; gap:0.8rem;
}
.complete-toggle-bar.done { border-color:var(--brand-teal); background:#f4faf7; }
.complete-toggle-bar .done-msg { font-size:0.85rem; font-weight:600; color:var(--brand-teal); display:none; align-items:center; gap:0.5rem; }
.complete-toggle-bar.done .done-msg { display:flex; }
.complete-toggle { display:flex; align-items:center; gap:0.6rem; cursor:pointer; user-select:none; font-size:0.88rem; font-weight:500; }
.complete-toggle input[type="checkbox"] { display:none; }
.complete-toggle .check-box { width:22px; height:22px; border-radius:6px; border:2px solid #b2bec3; display:flex; align-items:center; justify-content:center; transition:all 0.2s; background:white; }
.complete-toggle input:checked + .check-box { background:var(--brand-teal); border-color:var(--brand-teal); }
.complete-toggle .check-box i { color:white; font-size:0.75rem; display:none; }
.complete-toggle input:checked + .check-box i { display:block; }
.complete-toggle .toggle-label { color:#7f8c8d; }
.complete-toggle input:checked ~ .toggle-label { color:var(--brand-teal); font-weight:600; }
.next-module-btn { background:var(--brand-teal); color:white; border:none; border-radius:8px; padding:0.55rem 1.2rem; font-size:0.85rem; font-weight:600; cursor:pointer; display:flex; align-items:center; gap:0.5rem; transition:0.2s; }
.next-module-btn:hover { filter:brightness(1.1); background:#c7493a!important; }

/* Coach avatar */
.coach-avatar { background:var(--brand-teal); width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:white; font-weight:700; font-size:0.85rem; flex-shrink:0; }

/* Badge optional */
.badge-optional { background:#e1ede8; padding:0.2rem 0.8rem; border-radius:30px; font-size:0.8rem; margin-left:0.5rem; color:#7f8c8d; }

/* Toast */
.toast { position:fixed; bottom:2rem; right:2rem; background:var(--brand-dark); color:white; padding:0.8rem 1.4rem; border-radius:10px; font-size:0.88rem; font-weight:500; box-shadow:0 8px 24px rgba(0,0,0,0.2); transform:translateY(80px); opacity:0; transition:all 0.3s ease; z-index:999; display:flex; align-items:center; gap:0.6rem; }
.toast.show { transform:translateY(0); opacity:1; }
.toast i { color:var(--brand-teal); }

/* Footer */
.footer-hint { max-width:1200px; margin:0 auto; padding:2rem 2rem 1.5rem; color:#7f8c8d; border-top:1px solid #e0e8e4; display:flex; justify-content:space-between; font-size:0.85rem; }

/* Responsive */
@media(max-width:768px){
    .week-shell { flex-direction:column; }
    .week-sidebar { width:100%; height:auto; position:relative; top:0; border-right:none; border-bottom:1px solid #edf2f0; }
    .week-content { padding:1.2rem; }
    .navbar { padding:0.8rem 1rem; }
    .nav-links { gap:1rem; }
}

/* ── GLOBAL BUTTON HOVER — matches elevateme.pro ── */
/* Black buttons turn red on hover */
.btn-accent,
.next-module-btn,
.btn-save-url {
    transition: background 0.2s, box-shadow 0.2s;
}
.btn-accent:hover { background: #c7493a !important; box-shadow: 0 4px 12px rgba(199,73,58,0.3); }
.btn-save-url:hover { background: #c7493a !important; }
.next-module-btn:hover { background: #c7493a !important; }
.sidebar-back:hover { color: #c7493a; }