/* TechPlatform design system v3.2 */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --tp-sidebar-w:     240px;
  --tp-topbar-h:      60px;
  --tp-sidebar-col:   58px;

  /* Palette – vivid */
  --tp-brand:         #6366f1;
  --tp-brand-soft:    #eef2ff;
  --tp-brand-dark:    #4f46e5;
  --tp-accent:        #06b6d4;
  --tp-success:       #16a34a;
  --tp-warning:       #d97706;
  --tp-danger:        #dc2626;

  /* Gradients */
  --tp-grad-brand:    linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%);
  --tp-grad-success:  linear-gradient(135deg,#16a34a 0%,#15803d 100%);
  --tp-grad-warning:  linear-gradient(135deg,#d97706 0%,#b45309 100%);
  --tp-grad-cyan:     linear-gradient(135deg,#06b6d4 0%,#0284c7 100%);

  /* Shadows */
  --tp-shadow-sm:     0 1px 4px rgba(0,0,0,.08);
  --tp-shadow:        0 4px 20px rgba(99,102,241,.12),0 2px 6px rgba(0,0,0,.06);
  --tp-shadow-lg:     0 12px 40px rgba(99,102,241,.2),0 4px 16px rgba(0,0,0,.1);
  --tp-shadow-card:   0 2px 8px rgba(0,0,0,.08);

  /* Radius */
  --tp-radius-sm:     .5rem;
  --tp-radius:        .75rem;
  --tp-radius-lg:     1.25rem;

  /* Transition */
  --tp-trans:         .18s cubic-bezier(.4,0,.2,1);
  --tp-trans-slow:    .3s  cubic-bezier(.4,0,.2,1);

  /* Surfaces (light) */
  --tp-surface:       #ffffff;
  --tp-surface-2:     #f8fafc;
  --tp-surface-3:     #f1f5f9;
  --tp-border:        #e2e8f0;
  --tp-text:          #0f172a;
  --tp-text-muted:    #475569;
  --tp-text-subtle:   #94a3b8;
}

[data-bs-theme="dark"] {
  --tp-brand-soft:    rgba(99,102,241,.18);
  --tp-shadow:        0 4px 20px rgba(0,0,0,.3),0 2px 6px rgba(0,0,0,.2);
  --tp-shadow-lg:     0 12px 40px rgba(0,0,0,.5),0 4px 16px rgba(0,0,0,.3);
  --tp-shadow-card:   0 2px 8px rgba(0,0,0,.25);
  --tp-surface:       #1e293b;
  --tp-surface-2:     #0f172a;
  --tp-surface-3:     #1e293b;
  --tp-border:        #334155;
  --tp-text:          #f1f5f9;
  --tp-text-muted:    #94a3b8;
  --tp-text-subtle:   #64748b;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Nunito',system-ui,sans-serif;font-size:.9375rem;background:var(--tp-surface-2);color:var(--tp-text);-webkit-font-smoothing:antialiased;line-height:1.6}
code,pre,.font-monospace,textarea.font-monospace{font-family:'JetBrains Mono',monospace;font-size:.875em}

::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--tp-border);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--tp-text-subtle)}

/* ── Navbar ────────────────────────────────────────────────── */
.tp-navbar{height:var(--tp-topbar-h);background:var(--tp-surface);border-bottom:1px solid var(--tp-border);box-shadow:var(--tp-shadow-sm);position:sticky;top:0;z-index:1000}

/* ── Cards ─────────────────────────────────────────────────── */
.card{background:var(--tp-surface);border-color:var(--tp-border)!important;border-radius:var(--tp-radius)!important;box-shadow:var(--tp-shadow-card)}

/* ── Stat cards ─────────────────────────────────────────────── */
.stat-card{border-radius:var(--tp-radius-lg)!important;padding:1.25rem 1.5rem;background:var(--tp-surface);border:1px solid var(--tp-border);box-shadow:var(--tp-shadow-card);transition:transform var(--tp-trans),box-shadow var(--tp-trans);position:relative;overflow:hidden}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:var(--tp-radius-lg) var(--tp-radius-lg) 0 0}
.stat-card--brand::before{background:var(--tp-grad-brand)}
.stat-card--success::before{background:var(--tp-grad-success)}
.stat-card--warning::before{background:var(--tp-grad-warning)}
.stat-card--cyan::before{background:var(--tp-grad-cyan)}
.stat-card:hover{transform:translateY(-3px);box-shadow:var(--tp-shadow-lg)}

.stat-icon{width:48px;height:48px;border-radius:var(--tp-radius-sm);display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0}
.stat-icon--brand{background:var(--tp-brand-soft);color:var(--tp-brand)}
.stat-icon--success{background:rgba(22,163,74,.12);color:var(--tp-success)}
.stat-icon--warning{background:rgba(217,119,6,.12);color:var(--tp-warning)}
.stat-icon--cyan{background:rgba(6,182,212,.12);color:var(--tp-accent)}

/* ── Day cards ──────────────────────────────────────────────── */
.day-card{border-radius:var(--tp-radius-lg)!important;display:block;text-decoration:none!important;transition:transform var(--tp-trans),box-shadow var(--tp-trans)}
.day-card:hover{transform:translateY(-4px);box-shadow:var(--tp-shadow-lg)!important}
.day-card__locked{opacity:.65;cursor:default;filter:grayscale(.4)}
.day-card__locked:hover{transform:none;box-shadow:var(--tp-shadow-card)!important}

.day-progress-bar{height:5px;border-radius:3px;background:var(--tp-surface-3);overflow:hidden;margin-top:.5rem}
.day-progress-bar__fill{height:100%;border-radius:3px;background:var(--tp-grad-brand);transition:width .5s ease}
.day-progress-bar__fill--done{background:var(--tp-grad-success)}

/* ── Tabs ───────────────────────────────────────────────────── */
.tp-tabs{border-bottom:1px solid var(--tp-border)}
.tp-tabs .nav-link{color:var(--tp-text-muted);border:none;border-bottom:2.5px solid transparent;border-radius:0;padding:.65rem 1.25rem;font-weight:700;font-size:.875rem;transition:color var(--tp-trans),border-color var(--tp-trans)}
.tp-tabs .nav-link.active{color:var(--tp-brand);border-bottom-color:var(--tp-brand);background:transparent}
.tp-tabs .nav-link:hover:not(.active){color:var(--tp-text)}

/* ── Student dash tabs ──────────────────────────────────────── */
.student-dash-tabs .nav-link{font-weight:800;font-size:1rem;padding:.75rem 1.75rem;border-radius:var(--tp-radius-lg) var(--tp-radius-lg) 0 0;color:var(--tp-text-muted);border:1.5px solid transparent;border-bottom:none;transition:color var(--tp-trans),background var(--tp-trans)}
.student-dash-tabs .nav-link.active{color:var(--tp-brand);background:var(--tp-surface);border-color:var(--tp-border)}
.student-dash-tab-content{background:var(--tp-surface);border:1.5px solid var(--tp-border);border-radius:0 var(--tp-radius-lg) var(--tp-radius-lg) var(--tp-radius-lg);padding:1.5rem;box-shadow:var(--tp-shadow-card)}

/* ── Buttons ────────────────────────────────────────────────── */
.btn-brand{background:var(--tp-grad-brand);border:none;color:#fff;font-weight:700;border-radius:var(--tp-radius-sm);box-shadow:0 4px 14px rgba(99,102,241,.35);transition:opacity var(--tp-trans),transform var(--tp-trans),box-shadow var(--tp-trans)}
.btn-brand:hover{color:#fff;opacity:.92;transform:translateY(-1px);box-shadow:0 6px 20px rgba(99,102,241,.45)}
.btn-brand:active{transform:translateY(0)}

.btn-icon{width:36px;height:36px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--tp-radius-sm);border:1px solid var(--tp-border);background:transparent;color:var(--tp-text-muted);transition:background var(--tp-trans),color var(--tp-trans)}
.btn-icon:hover{background:var(--tp-surface-3);color:var(--tp-text)}

.badge-brand{background:var(--tp-grad-brand);color:#fff}

/* ── Answer options ─────────────────────────────────────────── */
.answer-option{cursor:pointer;border-radius:var(--tp-radius);border:2px solid var(--tp-border)!important;padding:.85rem 1rem;transition:border-color var(--tp-trans),background var(--tp-trans),box-shadow var(--tp-trans);user-select:none}
.answer-option:hover{border-color:var(--tp-brand)!important;background:var(--tp-brand-soft)}
.answer-option.selected{border-color:var(--tp-brand)!important;background:var(--tp-brand-soft);box-shadow:0 0 0 3px rgba(99,102,241,.15)}
.answer-option.correct{border-color:var(--tp-success)!important;background:rgba(22,163,74,.08)}
.answer-option.wrong{border-color:var(--tp-danger)!important;background:rgba(220,38,38,.07)}
.answer-option.missed{border-color:var(--tp-warning)!important;background:rgba(217,119,6,.08)}

/* ── Progress ───────────────────────────────────────────────── */
.progress{border-radius:8px;background:var(--tp-surface-3)}
.progress-bar{border-radius:8px;background:var(--tp-grad-brand)}

/* ── Task accordion ─────────────────────────────────────────── */
.task-accordion .accordion-button{font-weight:700;background:var(--tp-surface);color:var(--tp-text)}
.task-accordion .accordion-button:not(.collapsed){background:var(--tp-brand-soft);color:var(--tp-brand);box-shadow:none}
.task-accordion .accordion-item{border:2px solid var(--tp-border)!important;border-radius:var(--tp-radius)!important;margin-bottom:.75rem;overflow:hidden}
.task-accordion .accordion-item.task-done{border-color:rgba(22,163,74,.35)!important}
.task-accordion .accordion-item.task-done .accordion-button{background:rgba(22,163,74,.06);color:var(--tp-success)}
.task-accordion .accordion-button::after{filter:none}

/* ── Question accordion (admin) ─────────────────────────────── */
.q-ans-list .d-flex{align-items:center}
#questionsList .accordion-item{border-color:var(--tp-border)!important;border-radius:var(--tp-radius)!important;overflow:hidden}
#questionsList .drag-handle:hover{cursor:grab}

/* ── Rendered markdown ──────────────────────────────────────── */
.rendered-md{line-height:1.75}
.rendered-md h1,.rendered-md h2,.rendered-md h3{margin-top:1.4em;font-weight:800}
.rendered-md img{max-width:100%;border-radius:var(--tp-radius);box-shadow:var(--tp-shadow-sm);margin:.5rem 0}
.rendered-md pre{background:var(--tp-surface-3);padding:1rem;border-radius:var(--tp-radius);overflow-x:auto;border:1px solid var(--tp-border)}
.rendered-md code{background:var(--tp-surface-3);padding:.1em .35em;border-radius:.3em}
.rendered-md pre code{background:transparent;padding:0}
.rendered-md table{width:100%;border-collapse:collapse;margin:1em 0}
.rendered-md th,.rendered-md td{border:1px solid var(--tp-border);padding:.45rem .75rem}
.rendered-md th{background:var(--tp-surface-3);font-weight:700}
.rendered-md blockquote{border-left:3px solid var(--tp-brand);margin:0;padding:.5rem 1rem;background:var(--tp-brand-soft);border-radius:0 var(--tp-radius-sm) var(--tp-radius-sm) 0}

.img-placeholder{display:inline-flex;align-items:center;gap:.5rem;background:var(--tp-surface-3);border:1.5px dashed var(--tp-border);border-radius:var(--tp-radius-sm);padding:.4rem .75rem;color:var(--tp-text-muted);font-size:.85rem;cursor:pointer;transition:border-color var(--tp-trans)}
.img-placeholder:hover{border-color:var(--tp-brand);color:var(--tp-brand)}

/* ── EasyMDE ─────────────────────────────────────────────────── */
.EasyMDEContainer .CodeMirror{font-family:'JetBrains Mono',monospace;font-size:.875rem;border-color:var(--tp-border);border-radius:0 0 var(--tp-radius-sm) var(--tp-radius-sm);background:var(--tp-surface);color:var(--tp-text)}
.editor-toolbar{background:var(--tp-surface-3);border-color:var(--tp-border);border-radius:var(--tp-radius-sm) var(--tp-radius-sm) 0 0}
.editor-toolbar button{color:var(--tp-text-muted)!important;border-radius:4px!important}
.editor-toolbar button:hover,.editor-toolbar button.active{background:var(--tp-brand-soft)!important;color:var(--tp-brand)!important}

/* ── Forms ───────────────────────────────────────────────────── */
.form-control,.form-select{border-color:var(--tp-border);background:var(--tp-surface);color:var(--tp-text);border-radius:var(--tp-radius-sm);transition:border-color var(--tp-trans),box-shadow var(--tp-trans)}
.form-control:focus,.form-select:focus{border-color:var(--tp-brand);box-shadow:0 0 0 3px rgba(99,102,241,.15);background:var(--tp-surface);color:var(--tp-text)}
[data-bs-theme="dark"] .form-control,[data-bs-theme="dark"] .form-select{background:var(--tp-surface-2);color:var(--tp-text);border-color:var(--tp-border)}

/* ── Tables ──────────────────────────────────────────────────── */
.table{color:var(--tp-text)}
.table>:not(caption)>*>*{background-color:transparent;border-bottom-color:var(--tp-border)}
.table-hover>tbody>tr:hover>*{background-color:var(--tp-brand-soft)}
.table thead th{border-bottom:2px solid var(--tp-border);font-weight:800;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--tp-text-muted)}

/* ── Media grid ──────────────────────────────────────────────── */
.media-item-wrap{border-radius:var(--tp-radius);overflow:hidden;border:2px solid transparent;transition:border-color var(--tp-trans),transform var(--tp-trans);cursor:pointer}
.media-item-wrap:hover{border-color:var(--tp-brand);transform:scale(1.03)}
.media-item-wrap.selected{border-color:var(--tp-success)}
.media-item-wrap img{width:100%;aspect-ratio:1;object-fit:cover;display:block}

/* ── Drop zone ───────────────────────────────────────────────── */
.drop-zone{border:2px dashed var(--tp-border);border-radius:var(--tp-radius-lg);padding:2rem;text-align:center;color:var(--tp-text-muted);transition:border-color var(--tp-trans),background var(--tp-trans);cursor:pointer}
.drop-zone:hover,.drop-zone.drag-over{border-color:var(--tp-brand);background:var(--tp-brand-soft)}

/* ── Pagination ──────────────────────────────────────────────── */
.page-link{border-color:var(--tp-border);color:var(--tp-text-muted);border-radius:var(--tp-radius-sm)!important}
.page-link:hover{background:var(--tp-brand-soft);color:var(--tp-brand);border-color:var(--tp-brand)}
.page-item.active .page-link{background:var(--tp-grad-brand);border-color:transparent}

/* ── ILM ─────────────────────────────────────────────────────── */
.ilm-preview{max-height:80px;border-radius:.35rem;margin-top:.5rem}

/* ── Toasts ──────────────────────────────────────────────────── */
.toast{border-radius:var(--tp-radius)!important;box-shadow:var(--tp-shadow-lg)}

/* ── Alert ───────────────────────────────────────────────────── */
.alert{border-radius:var(--tp-radius)}

/* ── Responsive ──────────────────────────────────────────────── */
@media(max-width:576px){
  .tp-navbar .navbar-brand span{display:none}
  h4.fw-bold{font-size:1.1rem}
  .stat-card{padding:1rem}
}