/* ============================================================
   LMS Platform — Design System (Value Driver Learning Hub)
   Built on top of Bootstrap 5.3 with a refined visual language:
     - Typographic scale based on Inter
     - Card-first layout, soft shadows, subtle borders
     - Brand palette derived from the VDTSL logo:
         · Primary: deep navy   #1a3a5c (wordmark)
         · Accent:  brand red   #e63946 (V stroke) — points, ratings, highlights
         · Warning: amber       #f59e0b (semantic caution only)
         · Danger:  deep red    #b91c1c (destructive actions)
     - Component patterns: course cards, stat cards, ratings,
       discussion threads, FAQ accordions, sidebar shell, footer
   ============================================================ */

/* ─── Tokens ──────────────────────────────────────────── */
:root {
    /* Brand palette — derived directly from the VDTSL logo:
       - Navy from the wordmark ("VALUE DRIVER" lettering and bottom blue stripes)
       - Red from the downward V stroke (the brand's hero accent)
       Amber is preserved only as the semantic *warning* color so that warnings
       don't read as the same emphasis as the brand-red accent. */
    --lms-primary:        #1a3a5c;   /* deep navy — primary buttons, links, headers */
    --lms-primary-hover:  #142d48;   /* darker navy on hover */
    --lms-primary-soft:   #e8eef5;   /* tinted navy for badges, soft hovers */
    --lms-primary-50:     #f3f6fa;

    --lms-accent:         #e63946;   /* VDTSL red — stars, ratings, points, leaderboard */
    --lms-accent-hover:   #c9202e;
    --lms-accent-soft:    #fde2e4;

    --lms-success:        #16a34a;
    --lms-success-soft:   #dcfce7;
    --lms-warning:        #f59e0b;   /* amber — semantic "caution", distinct from accent */
    --lms-warning-soft:   #fef3c7;
    --lms-danger:         #b91c1c;   /* deep red — destructive confirms; darker than accent on purpose */
    --lms-danger-soft:    #fee2e2;
    --lms-purple:         #7c3aed;
    --lms-purple-soft:    #ede9fe;
    --lms-pink:           #ec4899;
    --lms-pink-soft:      #fce7f3;

    /* Neutrals */
    --lms-gray-50:  #f9fafb;
    --lms-gray-100: #f3f4f6;
    --lms-gray-200: #e5e7eb;
    --lms-gray-300: #d1d5db;
    --lms-gray-400: #9ca3af;
    --lms-gray-500: #6b7280;
    --lms-gray-600: #4b5563;
    --lms-gray-700: #374151;
    --lms-gray-800: #1f2937;
    --lms-gray-900: #111827;

    /* Surface / elevation */
    --lms-radius-sm: 0.5rem;
    --lms-radius:    0.75rem;
    --lms-radius-lg: 1rem;
    --lms-shadow-xs: 0 1px 2px 0 rgb(17 24 39 / 0.04);
    --lms-shadow-sm: 0 1px 3px 0 rgb(17 24 39 / 0.06), 0 1px 2px -1px rgb(17 24 39 / 0.04);
    --lms-shadow:    0 4px 6px -1px rgb(17 24 39 / 0.08), 0 2px 4px -2px rgb(17 24 39 / 0.05);
    --lms-shadow-md: 0 10px 15px -3px rgb(17 24 39 / 0.10), 0 4px 6px -4px rgb(17 24 39 / 0.05);
    --lms-shadow-lg: 0 20px 25px -5px rgb(17 24 39 / 0.10), 0 8px 10px -6px rgb(17 24 39 / 0.05);

    /* Bootstrap variable overrides — propagates brand color into BS components */
    --bs-primary:           var(--lms-primary);
    --bs-primary-rgb:       26, 58, 92;     /* matches #1a3a5c */
    --bs-link-color:        var(--lms-primary);
    --bs-link-hover-color:  var(--lms-primary-hover);
    --bs-body-bg:           var(--lms-gray-50);
    --bs-body-color:        var(--lms-gray-800);
    --bs-body-font-family:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Inter via Google Fonts — high-quality default for LMS content */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ─── Base ────────────────────────────────────────────── */
body {
    font-family: var(--bs-body-font-family);
    background-color: var(--lms-gray-50);
    color: var(--lms-gray-800);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.55;
}
h1, h2, h3, h4, h5, h6 { font-weight: 700; color: var(--lms-gray-900); letter-spacing: -0.01em; }
h1 { font-size: clamp(1.875rem, 3vw, 2.5rem); }
h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); }
h3 { font-size: 1.25rem; }
a { text-decoration: none; }

/* ─── Buttons ─────────────────────────────────────────── */
.btn {
    border-radius: var(--lms-radius-sm);
    font-weight: 500;
    padding: 0.5rem 1rem;
    transition: all 0.15s ease;
    box-shadow: var(--lms-shadow-xs);
}
.btn:active { transform: translateY(1px); }
.btn-lg { padding: 0.75rem 1.5rem; font-size: 1rem; }
.btn-sm { padding: 0.375rem 0.75rem; font-size: 0.875rem; }

.btn-primary {
    --bs-btn-bg:               var(--lms-primary);
    --bs-btn-border-color:     var(--lms-primary);
    --bs-btn-hover-bg:         var(--lms-primary-hover);
    --bs-btn-hover-border-color: var(--lms-primary-hover);
    --bs-btn-active-bg:        var(--lms-primary-hover);
    --bs-btn-disabled-bg:      var(--lms-gray-300);
    --bs-btn-disabled-border-color: var(--lms-gray-300);
}
.btn-light {
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--lms-gray-200);
    --bs-btn-hover-bg: var(--lms-gray-50);
    --bs-btn-hover-border-color: var(--lms-gray-300);
}

/* ─── Cards ───────────────────────────────────────────── */
.card {
    border: 1px solid var(--lms-gray-200);
    border-radius: var(--lms-radius);
    box-shadow: var(--lms-shadow-xs);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    background: #fff;
}
.card.card-hover:hover {
    box-shadow: var(--lms-shadow-md);
    transform: translateY(-2px);
}
.card-header {
    background: #fff;
    border-bottom: 1px solid var(--lms-gray-200);
    font-weight: 600;
    padding: 1rem 1.25rem;
    border-radius: var(--lms-radius) var(--lms-radius) 0 0 !important;
}
.card-body { padding: 1.25rem; }

/* ─── Forms ───────────────────────────────────────────── */
.form-control, .form-select {
    border-radius: var(--lms-radius-sm);
    border-color: var(--lms-gray-200);
    padding: 0.55rem 0.875rem;
    font-size: 0.9375rem;
    color: var(--lms-gray-800);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.form-control:focus, .form-select:focus {
    border-color: var(--lms-primary);
    box-shadow: 0 0 0 3px rgb(54 96 146 / 0.1);
}
.form-label { font-weight: 500; color: var(--lms-gray-700); font-size: 0.875rem; margin-bottom: 0.375rem; }
.input-group-text { background: var(--lms-gray-50); border-color: var(--lms-gray-200); color: var(--lms-gray-500); }

/* ─── Navbar ──────────────────────────────────────────── */
.lms-navbar {
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--lms-gray-200);
    padding: 0.75rem 0;
    position: sticky; top: 0; z-index: 1020;
}
.lms-navbar .navbar-brand {
    font-weight: 700; font-size: 1.25rem; color: var(--lms-gray-900);
    display: flex; align-items: center; gap: 0.625rem;
}
.lms-navbar .brand-mark {
    width: 36px; height: 36px;
    background: linear-gradient(135deg, var(--lms-primary) 0%, var(--lms-primary-hover) 100%);
    color: #fff; border-radius: var(--lms-radius-sm);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; box-shadow: var(--lms-shadow-sm);
}
.lms-navbar .nav-link {
    color: var(--lms-gray-600); font-weight: 500;
    padding: 0.5rem 0.875rem !important; border-radius: var(--lms-radius-sm);
    transition: all 0.15s;
}
.lms-navbar .nav-link:hover { color: var(--lms-primary); background: var(--lms-primary-soft); }
.lms-navbar .nav-link.active { color: var(--lms-primary); background: var(--lms-primary-soft); }

/* ─── Hero ────────────────────────────────────────────── */
.lms-hero {
    background: linear-gradient(135deg, #0f2540 0%, var(--lms-primary) 55%, #2f5a82 100%);
    color: #fff;
    padding: 4.5rem 0;
    margin-bottom: 3rem;
    position: relative;
    overflow: hidden;
}
.lms-hero::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at 80% 20%, rgba(255,255,255,0.1) 0%, transparent 60%),
                radial-gradient(circle at 20% 80%, rgba(255,255,255,0.06) 0%, transparent 50%);
    pointer-events: none;
}
.lms-hero h1 {
    color: #fff; font-weight: 800;
    font-size: clamp(2rem, 4vw, 3.25rem);
    margin-bottom: 1rem; letter-spacing: -0.02em;
}
.lms-hero p { font-size: 1.125rem; color: #dbeafe; max-width: 38rem; margin-bottom: 1.5rem; }
.lms-hero .container { position: relative; z-index: 1; }

/* ─── Course card ─────────────────────────────────────── */
.course-card {
    background: #fff; border-radius: var(--lms-radius);
    overflow: hidden; border: 1px solid var(--lms-gray-200);
    transition: all 0.2s ease; height: 100%; display: flex; flex-direction: column;
    color: inherit;
}
.course-card:hover {
    box-shadow: var(--lms-shadow-md);
    transform: translateY(-3px);
    border-color: var(--lms-primary-soft);
}
.course-card .thumb {
    height: 180px;
    background: linear-gradient(135deg, var(--lms-primary-soft) 0%, #c7dbf0 100%);
    display: flex; align-items: center; justify-content: center;
    color: var(--lms-primary); font-size: 3.25rem; font-weight: 700;
    position: relative; overflow: hidden;
}
.course-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.course-card .thumb-overlay {
    position: absolute; top: 0.75rem; right: 0.75rem;
    background: rgba(255,255,255,0.95); color: var(--lms-gray-900);
    padding: 0.25rem 0.625rem; border-radius: 999px;
    font-size: 0.75rem; font-weight: 600; backdrop-filter: blur(4px);
}
.course-card .body { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; }
.course-card h3 {
    font-size: 1rem; font-weight: 600; color: var(--lms-gray-900);
    margin-bottom: 0.5rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: 2.75rem;
}
.course-card .description {
    color: var(--lms-gray-500); font-size: 0.875rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    margin-bottom: 0.75rem; flex: 1;
}
.course-card .meta-row {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 0.8125rem; color: var(--lms-gray-500);
    padding-top: 0.75rem; border-top: 1px solid var(--lms-gray-100);
}

/* ─── Star rating ─────────────────────────────────────── */
.lms-stars {
    display: inline-flex; align-items: center; gap: 0.125rem;
    color: var(--lms-accent); font-size: 0.95rem;
}
.lms-stars .bi-star-fill { color: var(--lms-accent); }
.lms-stars .bi-star { color: var(--lms-gray-300); }
.lms-stars .bi-star-half { color: var(--lms-accent); }
.lms-stars .rating-value {
    margin-left: 0.375rem; color: var(--lms-gray-900);
    font-weight: 600; font-size: 0.875rem;
}
.lms-stars .rating-count {
    margin-left: 0.25rem; color: var(--lms-gray-500); font-size: 0.8125rem;
}

/* Interactive star input (for the rating form) */
.star-input { display: inline-flex; gap: 0.25rem; cursor: pointer; }
.star-input .star {
    font-size: 1.875rem; color: var(--lms-gray-300);
    transition: color 0.15s, transform 0.1s;
    cursor: pointer; user-select: none; line-height: 1;
}
.star-input .star.is-active,
.star-input .star.is-hover { color: var(--lms-accent); }
.star-input .star:hover { transform: scale(1.15); }

/* Distribution bars (5★ ████████ 234) */
.rating-summary {
    display: grid; grid-template-columns: auto 1fr auto; gap: 0.625rem;
    align-items: center; font-size: 0.875rem;
}
.rating-summary .bar-track {
    background: var(--lms-gray-100); border-radius: 999px; height: 8px; overflow: hidden;
}
.rating-summary .bar-fill {
    background: var(--lms-accent); height: 100%; border-radius: 999px;
    transition: width 0.3s ease;
}

/* ─── Badges ──────────────────────────────────────────── */
.badge-soft {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.25rem 0.625rem; border-radius: 999px;
    font-size: 0.75rem; font-weight: 500;
}
.badge-soft-primary { background: var(--lms-primary-soft); color: var(--lms-primary); }
.badge-soft-accent  { background: var(--lms-accent-soft);  color: var(--lms-accent); }
.badge-soft-success { background: var(--lms-success-soft); color: var(--lms-success); }
.badge-soft-warning { background: var(--lms-warning-soft); color: var(--lms-warning); }
.badge-soft-danger  { background: var(--lms-danger-soft);  color: var(--lms-danger); }
.badge-soft-purple  { background: var(--lms-purple-soft);  color: var(--lms-purple); }

/* Brand-red accent text utility — use for points, stars, trophies, ratings */
.text-accent { color: var(--lms-accent) !important; }
.bg-accent   { background-color: var(--lms-accent) !important; }
.bg-accent-soft { background-color: var(--lms-accent-soft) !important; }
.difficulty-1 { background: var(--lms-success-soft); color: var(--lms-success); }
.difficulty-2 { background: var(--lms-warning-soft); color: var(--lms-warning); }
.difficulty-3 { background: var(--lms-danger-soft);  color: var(--lms-danger); }

/* ─── Stat cards ──────────────────────────────────────── */
.stat-card {
    background: #fff; border-radius: var(--lms-radius);
    padding: 1.25rem; border: 1px solid var(--lms-gray-200);
    box-shadow: var(--lms-shadow-xs); position: relative; overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.stat-card:hover { box-shadow: var(--lms-shadow-sm); transform: translateY(-1px); }
.stat-card .label {
    font-size: 0.8125rem; color: var(--lms-gray-500); margin-bottom: 0.375rem;
    display: flex; align-items: center; gap: 0.375rem; font-weight: 500;
}
.stat-card .value { font-size: 1.875rem; font-weight: 700; color: var(--lms-gray-900); line-height: 1.2; }
.stat-card .delta { font-size: 0.75rem; margin-top: 0.25rem; }
.stat-card.accent-primary { border-left: 3px solid var(--lms-primary); }
.stat-card.accent-success { border-left: 3px solid var(--lms-success); }
.stat-card.accent-warning { border-left: 3px solid var(--lms-warning); }
.stat-card.accent-purple  { border-left: 3px solid var(--lms-purple); }
.stat-card.accent-pink    { border-left: 3px solid var(--lms-pink); }
.stat-card.accent-amber   { border-left: 3px solid var(--lms-accent); }

/* ─── Sidebar shell ──────────────────────────────────── */
.lms-shell {
    display: grid;
    grid-template-columns: 240px 1fr;
    /* No min-height here — let each column own its sizing. The sticky
       sidebar takes 100vh, the main column flows in the document scroll. */
    align-items: start;
}

.lms-sidebar {
    background: #fff;
    border-right: 1px solid var(--lms-gray-200);
    padding: 1.5rem 0.75rem;
    /* Sticky to the top of the viewport (below the 64px navbar).
       The sidebar gets its own scroll container so if the nav list is
       long it can scroll without dragging the main content. The main
       content scrolls in the page document as normal — they're now
       fully decoupled. */
    position: sticky;
    top: 64px;
    height: calc(100vh - 64px);
    overflow-y: auto;
    /* Slim scrollbar styling so it doesn't visually compete with the
       main scroll. Falls back gracefully where unsupported. */
    scrollbar-width: thin;
    scrollbar-color: var(--lms-gray-300) transparent;
}

    .lms-sidebar::-webkit-scrollbar {
        width: 6px;
    }

    .lms-sidebar::-webkit-scrollbar-thumb {
        background: var(--lms-gray-300);
        border-radius: 3px;
    }

    .lms-sidebar .nav-link {
        color: var(--lms-gray-700);
        padding: 0.625rem 0.875rem;
        border-radius: var(--lms-radius-sm);
        font-weight: 500;
        margin-bottom: 0.125rem;
        display: flex;
        align-items: center;
        gap: 0.625rem;
        transition: all 0.15s;
    }

        .lms-sidebar .nav-link:hover {
            background: var(--lms-gray-50);
            color: var(--lms-primary);
        }

        .lms-sidebar .nav-link.active {
            background: var(--lms-primary-soft);
            color: var(--lms-primary);
            font-weight: 600;
        }

        .lms-sidebar .nav-link i {
            font-size: 1rem;
            width: 20px;
            text-align: center;
        }

    .lms-sidebar .nav-section-title {
        font-size: 0.6875rem;
        text-transform: uppercase;
        color: var(--lms-gray-400);
        font-weight: 700;
        padding: 0.875rem 0.875rem 0.375rem;
        letter-spacing: 0.06em;
    }

/* ─── Sidebar collapse on desktop (toggleable) ─────────
   When the .sidebar-collapsed class is on .lms-shell, the sidebar
   shrinks to 64px wide and shows only icons. Click the toggle to
   expand back. Saves screen real estate for content-heavy pages. */
.lms-shell.sidebar-collapsed {
    grid-template-columns: 64px 1fr;
}

    .lms-shell.sidebar-collapsed .lms-sidebar {
        padding: 1.5rem 0.5rem;
    }

        .lms-shell.sidebar-collapsed .lms-sidebar .nav-link {
            justify-content: center;
            padding: 0.625rem 0;
        }

            .lms-shell.sidebar-collapsed .lms-sidebar .nav-link span,
            .lms-shell.sidebar-collapsed .lms-sidebar .nav-section-title {
                display: none;
            }

            .lms-shell.sidebar-collapsed .lms-sidebar .nav-link i {
                margin: 0;
                font-size: 1.125rem;
            }

/* The toggle button itself */
.sidebar-toggle {
    background: transparent;
    border: 0;
    color: var(--lms-gray-500);
    padding: 0.5rem 0.875rem;
    border-radius: var(--lms-radius-sm);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    transition: background 0.15s;
}

    .sidebar-toggle:hover {
        background: var(--lms-gray-50);
        color: var(--lms-primary);
    }

.sidebar-collapsed .sidebar-toggle {
    justify-content: center;
}

    .sidebar-collapsed .sidebar-toggle span {
        display: none;
    }

@media (max-width: 992px) {
    .lms-shell {
        grid-template-columns: 1fr;
    }

    .lms-sidebar {
        display: none;
    }
}

/* ─── Discussion thread ───────────────────────────────── */
.discussion-thread { display: flex; flex-direction: column; gap: 1rem; }
.discussion-post {
    background: #fff; border: 1px solid var(--lms-gray-200);
    border-radius: var(--lms-radius); padding: 1.125rem;
}
.discussion-post .post-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }
.discussion-avatar {
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--lms-primary-soft); color: var(--lms-primary);
    display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 0.875rem; flex-shrink: 0;
}
.discussion-post .author { font-weight: 600; color: var(--lms-gray-900); font-size: 0.9375rem; }
.discussion-post .meta { color: var(--lms-gray-500); font-size: 0.8125rem; }
.discussion-post .body { color: var(--lms-gray-700); line-height: 1.55; white-space: pre-wrap; }
.discussion-post .actions {
    margin-top: 0.625rem; display: flex; gap: 1rem;
    color: var(--lms-gray-500); font-size: 0.875rem;
}
.discussion-post .actions a, .discussion-post .actions button {
    color: var(--lms-gray-500); background: none; border: 0; padding: 0;
    font-size: 0.875rem; text-decoration: none; transition: color 0.15s;
}
.discussion-post .actions a:hover, .discussion-post .actions button:hover { color: var(--lms-primary); }
.discussion-replies {
    margin-top: 0.75rem; margin-left: 2rem; padding-left: 1rem;
    border-left: 2px solid var(--lms-gray-100);
    display: flex; flex-direction: column; gap: 0.625rem;
}
.discussion-reply {
    background: var(--lms-gray-50); border-radius: var(--lms-radius-sm);
    padding: 0.75rem 0.875rem;
}
.discussion-reply .post-head { margin-bottom: 0.25rem; }
.discussion-reply .discussion-avatar { width: 28px; height: 28px; font-size: 0.75rem; }

/* ─── Review card ─────────────────────────────────────── */
.review-card {
    background: #fff; border: 1px solid var(--lms-gray-200);
    border-radius: var(--lms-radius); padding: 1.125rem;
}
.review-card .review-head {
    display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.625rem;
}
.review-card .review-body {
    color: var(--lms-gray-700); line-height: 1.55; white-space: pre-wrap;
    font-size: 0.9375rem;
}

/* ─── Lesson player layout ────────────────────────────── */
.lesson-layout { display: grid; grid-template-columns: 1fr 320px; gap: 1.5rem; }
@media (max-width: 992px) { .lesson-layout { grid-template-columns: 1fr; } }

/* ─── Progress ────────────────────────────────────────── */
.progress { height: 8px; background-color: var(--lms-gray-100); border-radius: 999px; }
.progress-bar {
    background: linear-gradient(90deg, var(--lms-primary) 0%, #4a7eb5 100%);
    border-radius: 999px;
}

/* ─── Tabs ────────────────────────────────────────────── */
.nav-tabs {
    border-bottom: 1px solid var(--lms-gray-200);
    margin-bottom: 1.5rem; gap: 0.25rem;
}
.nav-tabs .nav-link {
    color: var(--lms-gray-600); border: 0; border-bottom: 2px solid transparent;
    padding: 0.625rem 1rem; font-weight: 500; border-radius: 0;
    transition: color 0.15s, border-color 0.15s;
}
.nav-tabs .nav-link:hover { color: var(--lms-primary); border-bottom-color: var(--lms-primary-soft); }
.nav-tabs .nav-link.active {
    color: var(--lms-primary); background: transparent;
    border-bottom-color: var(--lms-primary); font-weight: 600;
}

/* ─── Accordion ───────────────────────────────────────── */
.accordion-button {
    background: #fff; color: var(--lms-gray-800); font-weight: 500;
    box-shadow: none !important;
}
.accordion-button:not(.collapsed) {
    background: var(--lms-primary-soft); color: var(--lms-primary);
}
.accordion-button:focus { border-color: var(--lms-primary); }
.accordion-item { border-color: var(--lms-gray-200); }

/* ─── Footer ──────────────────────────────────────────── */
.lms-footer {
    background: var(--lms-gray-900); color: var(--lms-gray-300);
    padding: 3.5rem 0 1.5rem; margin-top: 4rem;
}
.lms-footer h6 {
    color: #fff; font-weight: 600; font-size: 0.8125rem;
    text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 1rem;
}
.lms-footer .nav-link {
    padding: 0.25rem 0; color: var(--lms-gray-400); font-size: 0.875rem;
    transition: color 0.15s;
}
.lms-footer .nav-link:hover { color: #fff; }
.lms-footer .footer-brand {
    display: flex; align-items: center; gap: 0.625rem;
    font-size: 1.125rem; font-weight: 700; color: #fff; margin-bottom: 0.5rem;
}
.lms-footer .footer-brand .brand-mark {
    width: 32px; height: 32px;
    background: linear-gradient(135deg, var(--lms-primary) 0%, #4a7eb5 100%);
    color: #fff; border-radius: var(--lms-radius-sm);
    display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.lms-footer .tagline {
    color: var(--lms-gray-400); font-size: 0.875rem; max-width: 22rem;
}
.lms-footer .social-links { display: flex; gap: 0.5rem; margin-top: 1rem; }
.lms-footer .social-links a {
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255,255,255,0.06);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--lms-gray-300); transition: all 0.15s;
}
.lms-footer .social-links a:hover { background: var(--lms-primary); color: #fff; }
.lms-footer .footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.08); padding-top: 1.5rem; margin-top: 2.5rem;
    color: var(--lms-gray-500); font-size: 0.8125rem;
}
.lms-footer .footer-bottom a { color: var(--lms-gray-400); }
.lms-footer .footer-bottom a:hover { color: #fff; }

/* ─── SweetAlert overrides ────────────────────────────── */
.swal2-popup {
    border-radius: var(--lms-radius) !important;
    font-family: var(--bs-body-font-family) !important;
}
.swal2-confirm.btn { background-color: var(--lms-primary) !important; }
.swal2-confirm.btn:hover { background-color: var(--lms-primary-hover) !important; }

/* ─── Utilities ───────────────────────────────────────── */
.text-truncate-2 {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.text-truncate-3 {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--lms-gray-500); }
.empty-state > .bi { font-size: 3rem; opacity: 0.3; }
[x-cloak] { display: none !important; }

/* ─── Material icons (file-type colored squares) ──────── */
.material-icon {
    width: 44px; height: 44px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; flex-shrink: 0;
}
.material-icon.icon-pdf { background: #fee2e2; color: #b91c1c; }
.material-icon.icon-doc { background: #dbeafe; color: #1d4ed8; }
.material-icon.icon-xls { background: #d1fae5; color: #047857; }
.material-icon.icon-ppt { background: #ffedd5; color: #c2410c; }
.material-icon.icon-zip { background: #ede9fe; color: #6d28d9; }
.material-icon.icon-img { background: #fce7f3; color: #be185d; }
.material-icon.icon-vid { background: #fef3c7; color: #b45309; }
.material-icon.icon-aud { background: #cffafe; color: #0e7490; }
.material-icon.icon-txt { background: #f1f5f9; color: #475569; }
.material-icon.icon-default { background: var(--lms-gray-100); color: var(--lms-gray-600); }

/* Attention-panel hover row — for dashboard "items to act on" lists. */
.hover-bg-light:hover {
    background-color: var(--lms-gray-50, #f9fafb);
    border-radius: var(--bs-border-radius);
    transition: background-color 0.15s ease-in-out;
}
/* Lesson HTML body — proper typographic treatment for study-guide
   and article-style HTML content stored in Lesson.BodyHtml. */
.lesson-body {
    line-height: 1.65;
    font-size: 1rem;
}

    .lesson-body h1, .lesson-body h2, .lesson-body h3 {
        color: #366092;
        margin-top: 1.75rem;
        margin-bottom: 0.75rem;
    }

    .lesson-body h2 {
        font-size: 1.35rem;
        border-bottom: 1px solid #e5e7eb;
        padding-bottom: .3rem;
    }

    .lesson-body h3 {
        font-size: 1.1rem;
        color: #1f4373;
    }

    .lesson-body p {
        margin-bottom: .75rem;
    }

    .lesson-body ul, .lesson-body ol {
        padding-left: 1.5rem;
        margin-bottom: .75rem;
    }

    .lesson-body li {
        margin-bottom: .25rem;
    }

    .lesson-body table {
        border-collapse: collapse;
        width: 100%;
        margin: 1rem 0;
    }

        .lesson-body table th, .lesson-body table td {
            border: 1px solid #d1d5db;
            padding: .5rem .75rem;
            text-align: left;
            vertical-align: top;
        }

        .lesson-body table th {
            background: #f3f4f6;
            font-weight: 600;
        }

    .lesson-body strong {
        color: #1f4373;
    }

    .lesson-body code, .lesson-body pre {
        background: #f3f4f6;
        border-radius: 4px;
        padding: 0 .25rem;
        font-size: .9em;
    }

.option-row {
    transition: background .15s, border-color .15s;
}

    .option-row:hover {
        background: #f8f9fa;
        border-color: var(--bs-primary) !important;
    }