:root {
    --lms-navy: #0b2e59;
    --lms-blue: #0d6efd;
    --lms-light: #f4f6fb;
    --lms-card: #ffffff;
    --lms-text: #1f2937;
    --sidebar-width: 250px;
}

body {
    background: var(--lms-light);
    color: var(--lms-text);
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* ---------- Top navigation ---------- */
.top-navbar {
    background: var(--lms-navy);
    height: 60px;
    z-index: 1040;
}
.top-navbar .brand-text { color: #fff; font-weight: 600; }
.top-navbar .brand-logo { width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--lms-navy); display: inline-flex; align-items: center; justify-content: center; }
.top-navbar .nav-link, .top-navbar .btn-link { color: #e6edf7 !important; }

/* ---------- Layout ---------- */
.app-wrap { margin-top: 60px; min-height: calc(100vh - 60px); }

.sidebar {
    width: var(--sidebar-width);
    min-height: calc(100vh - 60px);
    background: #fff;
    border-right: 1px solid #e5e7eb;
    position: fixed;
    top: 60px;
    left: 0;
    padding-top: 1rem;
    overflow-y: auto;
    transition: transform .25s ease;
}
.sidebar .nav-link {
    color: #374151;
    padding: .65rem 1.25rem;
    border-left: 4px solid transparent;
}
.sidebar .nav-link i { width: 22px; color: var(--lms-blue); }
.sidebar .nav-link:hover { background: var(--lms-light); }
.sidebar .nav-link.active { background: #e8f0fe; border-left-color: var(--lms-blue); font-weight: 600; }

.content {
    margin-left: var(--sidebar-width);
    min-width: 0;
}

@media (max-width: 991.98px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.show { transform: translateX(0); box-shadow: 0 0 20px rgba(0,0,0,.15); }
    .content { margin-left: 0; }
}

/* ---------- Page heading ---------- */
.page-title { font-weight: 700; color: var(--lms-navy); margin-bottom: .25rem; }
.page-subtitle { color: #6b7280; margin-bottom: 1.5rem; }

/* ---------- Stat cards ---------- */
.stat-card {
    background: var(--lms-card);
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .06);
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 100%;
}
.stat-icon {
    width: 52px; height: 52px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.4rem; flex-shrink: 0;
}
.stat-value { font-size: 1.6rem; font-weight: 700; line-height: 1; }
.stat-label { color: #6b7280; font-size: .9rem; margin-top: .25rem; }

/* ---------- Panels ---------- */
.panel {
    background: var(--lms-card);
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .06);
    padding: 1.25rem;
    height: 100%;
}
.panel h5 { font-weight: 600; color: var(--lms-navy); margin-bottom: 1rem; }

/* ---------- Auth pages ---------- */
.auth-page {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--lms-navy), #1e5aa8);
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
}
.auth-card {
    background: #fff;
    border-radius: 16px;
    padding: 2.25rem;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 20px 50px rgba(0,0,0,.25);
}
.auth-logo {
    width: 64px; height: 64px; border-radius: 50%;
    background: var(--lms-navy); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; margin: 0 auto .75rem;
}