/*
 * EduKenya eLearning Platform
 * Custom styles (loaded after Bootstrap 5)
 * Place this in: public/css/app.css
 * Link it in layouts/app.blade.php after Bootstrap
 */

/* ── Utilities ─────────────────────────────────────────────────────────────── */
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.text-primary { color: #f97316 !important; }
.btn-primary  { background-color: #f97316 !important; border-color: #f97316 !important; }
.btn-primary:hover { background-color: #ea580c !important; border-color: #ea580c !important; }
.btn-outline-primary { color: #f97316 !important; border-color: #f97316 !important; }
.btn-outline-primary:hover { background-color: #f97316 !important; color: #fff !important; }

/* ── Pagination ─────────────────────────────────────────────────────────────── */
.pagination .page-link { color: #f97316; border-color: #e2e8f0; border-radius: 8px; margin: 0 2px; }
.pagination .page-item.active .page-link { background-color: #f97316; border-color: #f97316; }
.pagination .page-link:hover { background-color: #ede9fe; color: #f97316; }
.pagination .page-item.disabled .page-link { color: #94a3b8; }

/* ── Form controls ──────────────────────────────────────────────────────────── */
.form-control:focus,
.form-select:focus {
    border-color: #f97316;
    box-shadow: 0 0 0 0.2rem rgba(79, 70, 229, 0.15);
}

/* ── Sidebar scrollbar ──────────────────────────────────────────────────────── */
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }

/* ── Toast / Alert animations ───────────────────────────────────────────────── */
.alert { animation: slideDown 0.35s ease-out; }
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Loading state ──────────────────────────────────────────────────────────── */
.btn-loading { pointer-events: none; opacity: .75; }

/* ── Card hover ─────────────────────────────────────────────────────────────── */
.card.hoverable { transition: transform .2s, box-shadow .2s; }
.card.hoverable:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,0.08); }

/* ── Responsive sidebar toggle ──────────────────────────────────────────────── */
@media (max-width: 768px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.open { transform: translateX(0); }
    .main-content { margin-left: 0; }
    .topbar { left: 0; }
    .content-area { padding: 16px; }
}