/* ── LMS Platform — Main Stylesheet ─────────────────────────────────────── */

:root {
    --brand-primary:   #0f3460;
    --brand-secondary: #16213e;
    --brand-accent:    #e94560;
    --text-muted:      #6c757d;
    --border-light:    #e8ecf4;
}

/* ── Global ──────────────────────────────────────────────────────────────── */
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
a { color: var(--brand-primary); }

/* ── Utility ─────────────────────────────────────────────────────────────── */
.btn-xs { padding: .15rem .5rem; font-size: .75rem; }
.text-truncate-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card { border-radius: 10px; }
.course-card { transition: transform .15s, box-shadow .15s; }
.course-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.12) !important; }

/* ── Navbar ──────────────────────────────────────────────────────────────── */
.navbar { box-shadow: 0 2px 8px rgba(0,0,0,.15); }

/* ── Forms ───────────────────────────────────────────────────────────────── */
.form-control:focus, .form-select:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 .2rem rgba(15,52,96,.2);
}

/* ── Progress bars ───────────────────────────────────────────────────────── */
.progress { border-radius: 10px; background: #e9ecef; }
.progress-bar { border-radius: 10px; }

/* ── Badge variants ──────────────────────────────────────────────────────── */
.badge { font-weight: 500; letter-spacing: .02em; }

/* ── Pagination ──────────────────────────────────────────────────────────── */
.page-link { color: var(--brand-primary); }
.page-item.active .page-link { background: var(--brand-primary); border-color: var(--brand-primary); }

/* ── Admin / Instructor layouts ──────────────────────────────────────────── */
.admin-layout  .admin-content  { animation: fadeInUp .2s ease; }
.player-layout { overflow: hidden; }

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 576px) {
    .admin-content, .inst-content { padding: 1rem; }
}