/**
     * Blue Theme Layout Stylesheet
     * ============================================================
     * This stylesheet is organized for maintainability and follows
     * a hierarchical structure from base to component-level styles.
     *
     * STRUCTURE:
     * 0. Design System (Variables, Typography, Utilities)
     * 1. Header & Top Navigation
     * 2. Global Navigation Links & Icons
     * 3. Horizontal Navigation (Desktop)
     * 4. Dropdowns & Submenus
     * 5. Notification System
     * 6. Mobile Sidebar
     * 7. Right Header & Notifications
     * 8. Toastr Notifications
     * 9. Footer
     * 10. Course Dashboard
     * 11. Buttons (Pill CTA family)
     * 12. Course In Progress (Continue Learning / All Course Progress)
     * 13. Dashboard Load-In Animations
     * 14. Mobile Navigation & Dashboard (<=991px)
     * ============================================================
     */

    /* ============================================================
       Design System: Theme Variables & Typography
       ============================================================ */
    :root {
        /* Typography & Colors - Modern Purple Theme (matches Figma palette) */
        --primary-font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        --primary-color: #693D94;
        --primary-dark: #5A3480;
        --primary-darker: #5A3480;
        --primary-light: #F0E8F7;
        --primary-soft: #F0E8F7;
        --gradient-end: #AA399F;
        --accent-color: var(--primary-color);
        --avatar-pill-bg: #2D2D4A;

        /* Backgrounds & Glass Morphism */
        --bg-white: #FFFFFF;
        --bg-light: #F4F5F7;
        --bg-lighter: #F3F0F7;
        --glass-bg: rgba(255, 255, 255, 0.95);
        --glass-bg-opaque: rgba(255, 255, 255, 0.98);

        /* Text Colors */
        --text-dark: #1E293B;
        --text-main: #2D3748;
        --text-muted: #64748B;
        --text-light: #A0AEC0;

        /* Border & Shadow */
        --border-light: #E2E8F0;
        --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
        --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
        --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

        /* Layout */
        --nav-height: 44px;
        --nav-menu-height: 44px;
        --content-max: 1440px;
        --sidebar-width: 280px;
        --spacing-xs: 4px;
        --spacing-sm: 8px;
        --spacing-md: 16px;
        --spacing-lg: 24px;
        --spacing-xl: 32px;

        /* Animations */
        --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

        /* Top navigation icon/avatar sizing (kept consistent across burger, bell, play icons) */
        --icon-size-topbar: 14px;
        --avatar-size-topbar: 20px;

        /* Dashboard card text/border tones (Figma "Course Dashboard" palette) */
        --card-title: #1E2939;
        --card-border: #E5E7EB;
        --note-body: #6A7282;
        --note-bold: #4A5565;
        --close-btn-gray: #99A1AF;

        /* Mobile topbar/menu-bar (Figma phone frame uses a dark navy
           topbar instead of desktop's purple) */
        --topbar-mobile-bg: #1A1A2E;
    }

    /* A legacy Bootstrap v3.4.1 asset bundle (published under
       web/assets/<hash>/css/bootstrap.css, registered only on views that
       use yii\bootstrap\ActiveForm instead of yii\widgets\ActiveForm — e.g.
       sign-in/account) sets html{font-size:10px} as its own rem base.
       Every rem-sized rule in this stylesheet (nav dropdown padding,
       margins, item height, icon sizing, etc.) was authored assuming the
       browser's normal 16px root, which is what pages WITHOUT that legacy
       bundle get by default. The result: the exact same navbar dropdown
       renders ~35% smaller/cramped on any page that happens to pull in
       that one Bootstrap 3 bundle, purely by accident of which form
       widget a view uses — nothing to do with the dropdown itself. Pin
       the root size here (loaded last on every page) so shared theme
       sizing is identical everywhere. */
    html {
        font-size: 16px !important;
    }

    body {
        font-family: var(--primary-font) !important;
        background: var(--bg-light) !important;
        color: var(--text-main) !important;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }

    h1, h2, h3, h4, h5, h6, .nav-link, .btn {
        font-family: var(--primary-font) !important;
    }

    /* Page container with proper spacing */
    .page-content,
    .content-wrap,
    .main-content {
        background: var(--bg-light) !important;
        /*padding: var(--spacing-lg) !important;*/
    }

    /* Sticky footer: content grows to push footer to bottom */
    .content-wrap {
        flex: 1 0 auto;
        margin-bottom: 0 !important;
        /*max-width: 1440px;*/
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100%;
    }

    footer#footer {
        flex-shrink: 0;
    }

    /* Smooth transitions for all interactive elements */
    button, a, input, select, textarea {
        transition: var(--transition) !important;
    }

    /* ============================================================
       0. Base UI & Utilities
       ============================================================ */

    /* Utility Classes */
    .rounded-circle {
        border: 0.5px solid #FEFEFE;
        font-size: 1.5em;
        line-height: 1.5em;
        text-align: center;
        vertical-align: middle;
        color: white;
    }

    div.required label:after {
        content: " *";
        color: red;
    }

    /* ============================================================
       1. Header & Top Navigation Bar
       ============================================================ */

    .navbar-header {
        background: var(--primary-color) !important;
        height: var(--nav-height) !important;
        /* Pages that pull in a third-party grid widget (e.g. kartik\grid with
           row expansion) register their own full Bootstrap stylesheet
           alongside this one. Bootstrap's own navbar rules set a min-height
           that wins over the height above regardless of !important, since
           min-height always takes precedence over height in CSS. Pin it too,
           so this header can never grow past --nav-height and push the
           nav-links bar (position: absolute, top: --nav-height, and a child
           of this header) into a visible overlap. Can't use overflow:hidden
           to enforce this instead — the nav-links bar is a child of this
           header sitting just below its box, and hidden overflow clips it
           away entirely. */
        min-height: var(--nav-height) !important;
        max-height: var(--nav-height) !important;
        border-bottom: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        /* Side inset stays at --spacing-xl until the viewport outgrows the
           --content-max column, then grows to keep the logo/avatar aligned
           with the centered content below instead of staying pinned to the
           true viewport edge. */
        /*padding: 0 max(var(--spacing-xl), calc((100% - var(--content-max)) / 2)) !important;*/
        box-shadow: none !important;
        z-index: 1030 !important;
    }

    .learning-progress-icon {
        color: #fff;
        margin-left: 10px;
        display: inline-flex;
        align-items: center;
        font-size: var(--icon-size-topbar);
    }

    .learning-progress-icon:hover {
        color: #fff;
        text-decoration: none;
    }

    /* .nav-profile (avatar pill) and .learning-progress-icon (play icon) are
       siblings inside .dropdown-profile - without a flex row here, the block-level
       .learning-progress-icon drops onto its own line instead of sitting inline. */
    .dropdown-profile {
        display: flex;
        align-items: center;
    }

    /* .avatar-sm is referenced in markup but never defined, so the img (40px)
       and initial-letter span (30px) fallback render at different sizes;
       pin both to the same size here. */
    .navbar-header .avatar.avatar-sm,
    .navbar-header .avatar.avatar-sm img,
    .navbar-header .avatar.avatar-sm span.rounded-circle {
        width: var(--avatar-size-topbar) !important;
        height: var(--avatar-size-topbar) !important;
        line-height: var(--avatar-size-topbar) !important;
    }

    /* Header text/icons should be white */
    .navbar-header .nav-link,
    .navbar-header .burger-menu,
    .navbar-header .navbar-brand,
    .navbar-header .navbar-right .nav-link,
    .navbar-header .navbar-right .nav-link i,
    .navbar-header .avatar-profile h5 {
        color: #ffffff !important;
    }

    #homeSubMenu .sub-nav-item:hover{
        background-color: transparent !important;
        border-radius: 18px !important;
    }

    .burger-menu {
        width: 42px !important;
        height: 42px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(255, 255, 255, 0.12) !important;
        border-radius: 12px !important;
        transition: var(--transition) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        margin-right: 15px !important;
        cursor: pointer;
    }

    .burger-menu:hover {
        background: rgba(255, 255, 255, 0.2) !important;
        transform: scale(0.95);
    }

    /* dist/app.css sets this icon to 24px; align it with the other topbar icons */
    .burger-menu i {
        font-size: var(--icon-size-topbar) !important;
    }

    .navbar-brand {
        font-weight: 800 !important;
        font-size: 24px !important;
        letter-spacing: -0.5px !important;
        text-decoration: none !important;
        display: flex !important;
        align-items: center !important;
        /* Bootstrap's own .navbar-brand rule (pulled in by pages using a
           kartik\grid widget, see .navbar-header above) adds vertical
           padding that pushes this past --nav-height and overflows the
           header. Neutralize it directly at the source. */
        height: var(--nav-height) !important;
        padding: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .navbar-brand a, .navbar-brand a:hover, .navbar-brand a:focus {
        color: #ffffff !important;
        text-decoration: none !important;
    }

    .navbar-brand span {
        font-weight: 300;
        opacity: 0.8;
    }

    .navbar-logo-image {
        height: 22px;
        max-width: 100%;
        object-fit: contain;
    }

    /* ============================================================
       1.5. Dashboard Hero Banner & Welcome Section
       ============================================================ */

    .hero-banner,
    .welcome-banner,
    .quote-banner,
    .greeting-banner {
        background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%) !important;
        border-radius: 16px !important;
        padding: var(--spacing-xl) !important;
        color: white !important;
        margin-bottom: var(--spacing-lg) !important;
        box-shadow: var(--shadow-md) !important;
        position: relative;
        overflow: hidden;
    }

    .hero-banner::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 400px;
        height: 100%;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        opacity: 0.3;
    }

    .hero-banner-content {
        position: relative;
        z-index: 1;
    }

    .hero-banner h2,
    .greeting-text {
        font-size: 28px;
        font-weight: 700;
        margin-bottom: var(--spacing-md);
        line-height: 1.2;
    }

    .hero-banner-quote,
    .quote-text {
        /*font-size: 16px;*/
        /*line-height: 1.6;*/
        margin-bottom: var(--spacing-md);
        opacity: 0.95;
        text-align: left;
    }

    .quote-attribution {
        font-size: 14px;
        font-weight: 500;
        opacity: 0.85;
    }

    /* ============================================================
       1.7. Dashboard Cards - Modern Minimal Design
       ============================================================ */

    .dashboard-card,
    .info-card {
        background: var(--bg-white) !important;
        border: none !important;
        border-radius: 12px !important;
        padding: var(--spacing-lg) !important;
        box-shadow: var(--shadow-sm) !important;
        transition: var(--transition) !important;
    }

    .dashboard-card:hover,
    .info-card:hover {
        box-shadow: var(--shadow-md) !important;
        transform: translateY(-2px);
    }

    .stat-card-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        border-radius: 12px;
        background: var(--primary-light) !important;
        color: var(--primary-color) !important;
        font-size: 24px;
        margin-bottom: var(--spacing-md);
    }

    .stat-card-number {
        font-size: 32px;
        font-weight: 700;
        color: var(--text-dark) !important;
        margin-bottom: var(--spacing-sm);
    }

    .stat-card-label {
        font-size: 12px;
        font-weight: 600;
        color: var(--text-muted) !important;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* ============================================================
       1.9. Buttons & Forms - Purple Theme
       ============================================================ */

    .btn,
    button,
    input[type="submit"],
    input[type="button"],
    input[type="reset"] {
        font-family: var(--primary-font) !important;
        border-radius: 8px !important;
        font-weight: 600 !important;
        font-size: 14px !important;
        padding: 4px 4px !important;
        border: none !important;
        cursor: pointer !important;
        transition: var(--transition) !important;
    }

    .btn-primary,
    .btn-purple,
    .btn-default {
        background: var(--primary-color) !important;
        color: white !important;
    }

    .btn-primary:hover,
    .btn-purple:hover,
    .btn-default:hover {
        background: var(--primary-dark) !important;
        box-shadow: var(--shadow-md) !important;
        transform: translateY(-1px);
    }

    .btn-primary:active,
    .btn-purple:active,
    .btn-default:active {
        background: var(--primary-darker) !important;
        transform: translateY(0);
    }

    .btn-secondary,
    .btn-outline {
        background: transparent !important;
        color: var(--primary-color) !important;
        border: 2px solid var(--primary-color) !important;
    }

    .btn-secondary:hover,
    .btn-outline:hover {
        background: var(--primary-light) !important;
        border-color: var(--primary-dark) !important;
    }

    .btn-sm {
        padding: 6px 16px !important;
        font-size: 13px !important;
    }

    .btn-lg {
        padding: 14px 28px !important;
        font-size: 16px !important;
    }

    /* Form inputs
       ------------------------------------------------------------
       Wrapped in :where() so this base rule carries zero selector
       specificity. Without it, `input[type="text"]` (an element +
       attribute selector) structurally out-specifies a plain single
       class like `.pl-5` or a one-off icon-clearance class, even
       when both sides use !important — so any page that reserves
       space for an icon inside an input (search bars, etc.) had
       its padding silently clobbered back to the 10px/12px default
       everywhere that pattern is used. `padding` is intentionally
       left off the !important list for the same reason: any real
       component override, of any specificity, should be able to
       claim the space it needs. */
    :where(
        input[type="text"],
        input[type="email"],
        input[type="password"],
        input[type="search"],
        input[type="url"],
        input[type="date"],
        input[type="datetime"],
        input[type="datetime-local"],
        input[type="month"],
        input[type="time"],
        input[type="week"],
        input[type="number"],
        input[type="tel"],
        textarea,
        select
    ) {
        background: var(--bg-white) !important;
        border: 1px solid var(--border-light) !important;
        border-radius: 8px !important;
        padding: 10px 12px;
        font-family: var(--primary-font) !important;
        font-size: 14px !important;
        color: var(--text-main) !important;
        transition: var(--transition) !important;
    }

    input[type="text"]:focus,
    input[type="email"]:focus,
    input[type="password"]:focus,
    input[type="search"]:focus,
    input[type="url"]:focus,
    input[type="date"]:focus,
    input[type="datetime"]:focus,
    input[type="datetime-local"]:focus,
    input[type="month"]:focus,
    input[type="time"]:focus,
    input[type="week"]:focus,
    input[type="number"]:focus,
    input[type="tel"]:focus,
    textarea:focus,
    select:focus {
        border-color: var(--primary-color) !important;
        box-shadow: 0 0 0 3px rgba(139, 106, 179, 0.1) !important;
        outline: none !important;
    }

    /* ============================================================
       1.95. Responsive Grid Layouts
       ============================================================ */

    .grid-container,
    .dashboard-grid,
    .cards-grid {
        display: grid !important;
        gap: var(--spacing-lg) !important;
        margin-bottom: var(--spacing-lg) !important;
    }

    .grid-2,
    .grid-cols-2 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .grid-3,
    .grid-cols-3 {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .grid-4,
    .grid-cols-4 {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    /* Course & Class Cards */
    .course-card,
    .class-card,
    .learning-card {
        background: var(--bg-white) !important;
        border: none !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        box-shadow: var(--shadow-sm) !important;
        transition: var(--transition) !important;
    }

    .course-card:hover,
    .class-card:hover,
    .learning-card:hover {
        box-shadow: var(--shadow-md) !important;
        transform: translateY(-4px);
    }

    .course-card-image,
    .class-card-image {
        width: 100%;
        height: 200px;
        background: linear-gradient(135deg, var(--primary-light) 0%, rgba(139, 106, 179, 0.1) 100%);
        object-fit: cover;
    }

    .course-card-body,
    .class-card-body {
        padding: var(--spacing-lg) !important;
    }

    .course-card-title,
    .class-card-title {
        font-size: 16px;
        font-weight: 600;
        color: var(--text-dark) !important;
        margin-bottom: var(--spacing-sm);
    }

    .course-card-description,
    .class-card-description {
        font-size: 14px;
        color: var(--text-muted) !important;
        margin-bottom: var(--spacing-md);
        line-height: 1.5;
    }

    .course-card-meta,
    .class-card-meta {
        font-size: 12px;
        color: var(--text-light) !important;
        margin-bottom: var(--spacing-md);
    }

    .course-card-footer,
    .class-card-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: var(--spacing-md);
        border-top: 1px solid var(--border-light) !important;
    }

    /* Progress Bar */
    .progress,
    .progress-bar-container {
        height: 8px;
        background: var(--border-light) !important;
        border-radius: 4px;
        overflow: hidden;
        margin: var(--spacing-md) 0;
    }

    .progress-bar,
    .progress-fill {
        height: 100%;
        background: linear-gradient(90deg, var(--primary-color) 0%, var(--primary-dark) 100%);
        border-radius: 4px;
        transition: width 0.4s ease;
    }

    /* Large Progress Card */
    .progress-card-large,
    .progress-section-large {
        background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
        border-radius: 12px;
        padding: var(--spacing-xl);
        color: white;
        text-align: left;
        box-shadow: var(--shadow-md);
    }

    .progress-percentage,
    .progress-value {
        font-size: 48px;
        font-weight: 700;
        margin-bottom: var(--spacing-md);
        line-height: 1;
    }

    .progress-label,
    .progress-title {
        font-size: 14px;
        font-weight: 600;
        opacity: 0.9;
        margin-bottom: var(--spacing-md);
    }

    /* Points/Rewards Circle */
    .points-circle,
    .rewards-badge,
    .achievement-circle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
        color: white;
        font-size: 32px;
        font-weight: 700;
        box-shadow: var(--shadow-md);
    }

    /* ============================================================
       2. Global Navigation Links & Icons
       ============================================================ */

    /* Flat, monochrome nav icons that recolor with the link (grey by
       default, purple on hover/active) instead of a fixed icon-fill
       color baked into the source SVG asset. Each icon sets its own
       --icon-url via an inline style on the .nav-icon-mask span; this
       base rule is breakpoint-independent so it works identically in
       the desktop horizontal nav and the mobile off-canvas drawer,
       which each define their own width/height/color per context.
       All properties are !important because dist/app.css has an
       unrelated legacy ".nav-link span" rule (a notification-count
       badge dot: position:absolute, top:-16px, right:-16px, round
       yellow background) that otherwise wins on specificity against
       a bare class selector and knocks the icon out of place. */
    .nav-icon-mask {
        display: inline-block !important;
        position: static !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        bottom: auto !important;
        /* The legacy rule also sets color:#000, which currentColor below
           would otherwise pick up directly (color is the one property
           background-color:currentColor reads from THIS element, not from
           the parent .nav-link) instead of inheriting the link's own
           purple/grey — that's what was making every icon render black
           regardless of the link's active/hover state. */
        color: inherit !important;
        background-color: currentColor !important;
        border-radius: 0 !important;
        line-height: normal !important;
        font-size: 0 !important;
        -webkit-mask-image: var(--icon-url);
        mask-image: var(--icon-url);
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
    }

    .nav-link {
        display: flex !important;
        align-items: center !important;
        transition: var(--transition) !important;
        text-decoration: none !important;
        cursor: pointer;
    }

    /* Pin arrows/chevrons to the far right */
    .nav-link i.fa-angle-down,
    .nav-link i.fa-angle-right,
    .nav-link i.fa-angle-left,
    .nav-link i.fa-chevron-down {
        margin-left: auto !important;
        font-size: 13px !important;
        transition: transform 0.3s ease !important;
        background: none !important;
        width: auto !important;
        height: auto !important;
        border-radius: 0 !important;
        color: inherit !important;
        opacity: 0.7;
    }

    .nav-item.active > a i.fa-angle-down,
    .nav-link[aria-expanded="true"] i.fa-angle-down,
    .sidebar-dropdown.active > a i.fa-angle-down {
        transform: rotate(180deg) !important;
    }
    .panel-title {
      margin-top: 10px;
      margin-bottom: 0;
      font-size: 12px !important;
      color: var(--text-main) !important;
    }

    /* ============================================================
       3. Horizontal Navigation (Laptop/Desktop)
       ============================================================ */
    @media (min-width: 992px) {
        /* #navbarMenu.navbar-menu-wrapper (further down) is position:absolute;
           top:var(--nav-height), forming a second bar stacked directly below the fixed
           topbar. Nothing was pushing the page content down to clear BOTH bars, so
           content rendered at y:0 and got covered by the topbar and this second bar.
           The general-sibling "~" selector covers BOTH the regular-user markup (the
           display:none .mobile-menu-bar still sits between the header and the content
           wrap in the DOM, so a "+" adjacent selector would not match) and the admin
           markup (content-wrap follows .navbar-menu-wrapper as a sibling). This rule
           lives inside the min-width:992px block, so mobile gets no extra space — the
           header is not fixed below 992px there. The -4px trim pulls content up to sit
           flush against the bottom edge of the white second bar so it feels snug while
           still clearing both fixed bars. */
        .navbar-header-fixed ~ .content-wrap {
            margin-top: calc(var(--nav-height) + var(--nav-menu-height) - var(--nav-menu-height));
        }

        .navbar-menu-wrapper {
            flex: 1 !important;
            display: flex !important;
            align-items: center !important;
            margin-left: 0 !important; /* Removed margin to allow full-width */
            flex-wrap: nowrap !important;
        }

        .navbar-menu {
            display: flex !important;
            flex-wrap: nowrap !important;
            align-items: center !important;
            gap: 4px !important;
        }

        .navbar-menu .nav-link {
            padding: 10px 15px !important;
            color: rgba(255, 255, 255, 0.85) !important; /* Default for header links */
            font-size: 14px !important;
            font-weight: 500 !important;
            border-radius: 12px !important;
            white-space: nowrap !important;
        }

        /* Narrow spacing for laptop view (1024px) */
        @media (max-width: 1200px) {
            .navbar-menu .nav-link {
                padding: 8px 10px !important;
                font-size: 13px !important;
                gap: 6px !important;
            }
            .navbar-menu .nav-link > i:first-child {
                width: 30px !important;
                height: 30px !important;
                margin-right: 8px !important;
                font-size: 12px !important;
            }
        }

        .navbar-menu .nav-link:hover {
            background: rgba(255, 255, 255, 0.1) !important;
            color: #ffffff !important;
        }

        .navbar-menu .nav-item.active > .nav-link {
            background: rgba(255, 255, 255, 0.15) !important;
            color: #ffffff !important;
        }

        /* If links are on a white bar (secondary nav) */
        .navbar-menu-wrapper:not(.navbar-header *) .nav-link {
            color: var(--text-main) !important;
        }

        .navbar-menu .nav-link > i:first-child {
            width: 32px !important;
            height: 32px !important;
            margin-right: 10px !important;
            background: rgba(255, 255, 255, 0.1) !important;
            border-radius: 10px !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
        }
        .navbar-menu .dropdown-toggle::after { display: none !important; }
        #homeSubMenu li{
            margin: .1rem 0 !important;
        }
    }
    .dropdown-toggle::after {
        display: none !important;
    }

    /* ============================================================
       4. Dropdowns & Submenus (Premium)
       ============================================================ */
    .dropdown-menu, .sidebar-submenu, .sub-menu {
        border: none !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12) !important;
        background: #ffffff !important;
        border-radius: 16px !important;
        padding: 8px !important;
        margin-top: 10px !important;
        border: 1px solid rgba(0,0,0,0.05) !important;
        z-index: 1060;
    }

    .dropdown-item {
        border-radius: 16px !important;
        padding: 12px 20px !important;
        font-size: 14px !important;
        color: var(--text-main) !important;
        transition: var(--transition) !important;
        display: flex !important;
        align-items: center !important;
        margin-bottom: 2px !important;
        width: auto;
    }

    .dropdown-item i {
        margin-right: 14px !important;
        opacity: 0.8;
        font-size: 16px !important;
        width: 20px;
        text-align: center;
    }

    .dropdown-item:hover {
        background: var(--primary-soft) !important;
        color: var(--primary-color) !important;
        transform: translateX(5px);
    }

    /* Profile Dropdown Enhanced */
    .dropdown-profile .dropdown-menu {
        width: 250px !important;
        min-width: 250px !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: none !important;
        box-shadow: 0 15px 50px rgba(0,0,0,0.2) !important;
    }

    .profile-header-box {
        background: var(--primary-first);
        padding: 12px 15px;
        display: flex;
        align-items: center;
        color: #fff;
        position: relative;
    }

    .profile-header-box .avatar {
        width: 40px;
        height: 40px;
        margin: 0 12px 0 0;
        /*border: 2px solid rgba(255,255,255,0.2);*/
        padding: 2px;
        /*background: rgba(255,255,255,0.1);*/
        flex-shrink: 0;
    }

    .profile-header-box .avatar img,
    .profile-header-box .avatar .avatar-initial {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        color: var(--primary-color);
        font-weight: 700;
        font-size: 15px;
    }

    .profile-info {
        text-align: left;
        line-height: 1.2;
    }

    .profile-header-box h6 {
        color: #fff !important;
        font-weight: 700 !important;
        font-size: 15px !important;
        margin-bottom: 2px !important;
        letter-spacing: -0.3px;
    }

    .profile-header-box p {
        color: rgba(255,255,255,0.8) !important;
        font-size: 11px !important;
        text-transform: uppercase !important;
        font-weight: 600 !important;
        letter-spacing: 1.5px !important;
        margin-bottom: 0 !important;
    }

    .dropdown-profile .dropdown-item {
        margin: 2px 10px !important;
        padding: 10px 15px !important;
        font-weight: 500 !important;
        color: #4a5568 !important;
        transition:
            background 1s ease,
            color 1s ease,
            transform 1s ease;
    }

    .dropdown-profile .dropdown-item:hover {
        background: rgba(84, 87, 193, 0.1) !important;
        color: var(--primary-color) !important;
        transform: translateX(6px);
    }

    .dropdown-profile .dropdown-item i {
        font-size: 16px !important;
        width: 20px !important;
        margin-right: 12px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: inherit !important;
        opacity: 0.8 !important;
        vertical-align: middle !important;
    }

    .dropdown-profile .dropdown-item.logout-item:hover {
        background: rgba(239, 68, 68, 0.1) !important;
        color: #e53e3e !important;
    }

    .dropdown-profile .dropdown-divider {
        margin: 10px 0 !important;
        opacity: 0.5;
    }

    #notificationList {
        max-height: 380px;
        overflow-y: auto;
    }
    #notificationList::-webkit-scrollbar {
        width: 4px;
    }
    #notificationList::-webkit-scrollbar-track {
        background: transparent;
    }
    #notificationList::-webkit-scrollbar-thumb {
        background: #e2e8f0;
        border-radius: 4px;
    }

    /* ============================================================
       5. Notification System (Modern UI)
       ============================================================ */

    /* Notification Item Container */
    .notification-item {
        display: flex !important;
        align-items: flex-start !important;
        gap: 14px !important;
        padding: 16px 20px !important;
        border-bottom: 1px solid #f1f5f9 !important;
        background: #fff !important;
        margin: 0 !important;
        border-radius: 0 !important;
        transition: background 0.2s ease !important;
        cursor: default;
    }
    .notification-item:hover {
        background: #fafbfc !important;
    }

    /* Unread item: subtle background tint + dot indicator */
    .notification-item.unread {
        background: #f8f9ff !important;
    }

    /* Icon circle */
    .notif-item-left { flex-shrink: 0; padding-top: 2px; }
    .notif-item-icon {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        background: #f1f4f9;
        color: #94a3b8;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        transition: all 0.2s ease;
    }
    .notif-item-icon.icon-unread {
        background: rgba(92, 82, 212, 0.1);
        color: var(--primary-color);
    }
    .notification-item:hover .notif-item-icon {
        background: #e8ecf1;
    }
    .notification-item.unread:hover .notif-item-icon.icon-unread {
        background: rgba(92, 82, 212, 0.15);
    }

    /* Content area */
    .notif-item-content {
        flex: 1;
        min-width: 0;
        cursor: pointer;
    }
    .notif-item-title-row {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .notif-item-title {
        font-size: 13px;
        font-weight: 600;
        color: #1e293b;
        line-height: 1.4;
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        cursor: pointer;
        transition: color 0.2s ease;
    }
    .notif-item-title:hover {
        color: var(--primary-color);
    }
    /* Unread dot indicator (replaces chevron) */
    .notif-unread-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--primary-color);
        flex-shrink: 0;
    }

    /* Body — always visible, truncated to 2 lines */
    .notif-item-body {
        font-size: 12px;
        color: #64748b;
        line-height: 1.5;
        margin-top: 4px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        word-break: break-word;
    }

    /* Empty state */
    .notif-empty-state {
        padding: 32px 20px;
        text-align: center;
    }
    .notif-empty-icon {
        font-size: 32px;
        color: #22c55e;
        margin-bottom: 10px;
    }
    .notif-empty-text {
        font-size: 14px;
        color: #94a3b8;
        font-weight: 500;
    }

    .notification-dropdown .dropdown-footer {
        padding: 14px 20px !important;
        background: #fafbfc !important;
        text-align: center !important;
        border-top: 1px solid #f1f5f9 !important;
    }
    .notification-dropdown .dropdown-footer a {
        font-weight: 600 !important;
        color: var(--primary-color) !important;
        font-size: 13px !important;
        text-decoration: none !important;
        transition: opacity 0.2s ease;
    }
    .notification-dropdown .dropdown-footer a:hover {
        opacity: 0.8;
    }

    /* ============================================================
       6. Premium Pagination (Consolidated)
       ============================================================ */
    .pagination {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        background: #fff;
        padding: 20px 30px !important;
        border-radius: 24px !important;
        /*box-shadow: 0 10px 40px rgba(0,0,0,0.04) !important;*/
        margin: 30px auto !important;
        width: fit-content !important;
        flex-wrap: wrap !important;
    }

    .page-item {
        margin: 0 !important;
    }

    .page-link {
        border: 1px solid #f1f5f9 !important;
        color: #64748b !important;
        font-weight: 600 !important;
        font-size: 14px !important;
        width: 42px !important;
        height: 42px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 12px !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        background: #fff !important;
    }

    .page-item.active .page-link {
        background: var(--primary-color) !important;
        color: #fff !important;
        border-color: var(--primary-color) !important;
        box-shadow: 0 8px 20px rgba(84, 87, 193, 0.35) !important;
        transform: translateY(-2px);
    }

    .page-link:hover:not(.active) {
        background: #f8fafc !important;
        border-color: #e2e8f0 !important;
        color: var(--primary-color) !important;
        transform: translateY(-1px);
    }

    /* Circular Arrows */
    .page-item.prev .page-link,
    .page-item.next .page-link {
        border-radius: 50% !important;
        background: #f8fafc !important;
        border: none !important;
        color: #475569 !important;
        width: 44px !important;
        height: 44px !important;
        font-size: 14px !important;
    }

    .page-item.prev .page-link:hover,
    .page-item.next .page-link:hover {
        background: #f1f5f9 !important;
        color: var(--primary-color) !important;
    }

    /* Progress Bar and Status Text */
    .pagination-footer {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        margin-top: 5px;
    }

    .pg-progress-container {
        width: 200px;
        height: 4px;
        background: #f1f5f9;
        border-radius: 10px;
        overflow: hidden;
    }

    .pg-progress-bar {
        height: 100%;
        background: var(--primary-color);
        border-radius: 10px;
        transition: width 0.4s ease;
    }

    .pg-status-text {
        font-size: 12px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #94a3b8;
    }

    /* Loading state for individual buttons */
    .page-link.pjax-loading {
        color: var(--primary-color) !important;
        background: #fff !important;
        border-color: var(--primary-color) !important;
        opacity: 0.8;
    }

    .page-link.pjax-loading i {
        font-size: 16px;
    }

    @media (max-width: 575px) {
        .pagination {
            padding: 15px !important;
            gap: 8px !important;
        }
        .page-link {
            width: 36px !important;
            height: 36px !important;
            font-size: 12px !important;
        }
        .pg-progress-container {
            width: 150px;
        }
    }

    /* Mobile Dropdown Overrides */
    @media (max-width: 575px) {
        .notification-dropdown,
        .dropdown-profile .dropdown-menu {
            position: fixed !important;
            top: 70px !important;
            left: 15px !important;
            right: 15px !important;
            width: auto !important;
            min-width: unset !important;
            max-height: calc(100vh - 100px) !important;
            z-index: 1050 !important;
            border-radius: 16px !important;
        }

        .notification-dropdown {
            width: auto !important;
            margin-top: 0 !important;
        }

        .le-logo img {
            height: 32px !important;
        }
        .le-logo {
            font-size: 16px !important;
        }
        .le-logo span {
            font-size: 14px !important;
        }

        /* Navbar single row fix */
        .navbar-header {
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            flex-wrap: nowrap !important;
            height: 60px !important;
            padding: 0 10px !important;
            margin-bottom: 0 !important;
        }

        .burger-menu {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 35px !important;
            height: 35px !important;
            background: rgba(255,255,255,0.1) !important;
            border-radius: 8px !important;
            margin-right: 5px !important;
            flex-shrink: 0 !important;
        }

        .burger-menu i {
            font-size: 18px !important;
            /*color: #fff !important;*/
        }

        .navbar-brand {
            margin: 0 !important;
            padding: 0 !important;
            display: flex !important;
            align-items: center !important;
            flex-grow: 1 !important;
            /*justify-content: center !important;*/
            overflow: hidden !important;
        }

        .navbar-right {
            display: flex !important;
            align-items: center !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
            float: none !important;
            flex-shrink: 0 !important;
        }

        .date-time {
            display: none !important; /* Hide date/time on mobile to fit icons */
        }

        .notification-wrapper {
            /*margin-right: 5px !important;*/
        }

        #notificationBell {
            padding: 5px !important;
        }

        .dropdown-profile .dropdown-link {
            /*padding: 0 !important;*/
        }

        .avatar-profile h5 {
            display: none !important; /* Hide name on small mobile header, keep avatar */
        }

        .avatar-profile {
            margin-left: 0 !important;
        }

        /* Impersonation alert compact */
        .navbar-header > div:not(.navbar-brand):not(.navbar-right):not(.burger-menu) {
            padding: 0 5px !important;
            font-size: 10px !important;
            white-space: nowrap !important;
        }
    }

    /* ============================================================
       6. Mobile Sidebar (Modern UI)
       ============================================================ */
    @media (max-width: 991px) {
        #navbarMenu.navbar-menu-wrapper {
            /* Keep the drawer opaque so navigation remains legible over
               page content. */
            background: #ffffff !important;
            backdrop-filter: none !important;
            box-shadow: 20px 0 60px rgba(0,0,0,0.1) !important;
            width: 80% !important;
            position: fixed !important;
            top: 0 !important;
            bottom: 0 !important;
            left: 0 !important;
            z-index: 10000 !important;
            display: block !important;
            transform: translateX(-100%) !important;
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
            visibility: hidden;
            opacity: 0;
            padding: 0 !important;
        }

        body.navbar-nav-show #navbarMenu.navbar-menu-wrapper {
            transform: translateX(0) !important;
            visibility: visible !important;
            opacity: 1 !important;
        }

        .navbar-menu-header {
            padding: 20px 25px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            background: rgba(0,0,0,0.02) !important;
            border-bottom: 1px solid rgba(0,0,0,0.05) !important;
            margin-bottom: 10px !important;
        }

        #navbarMenu .nav-item {
            padding: 0 !important;
            margin: 0 !important;
            width: 100% !important;
            display: block !important;
        }

        #navbarMenu .nav-link {
            padding: 12px 20px !important;
            margin: 4px 15px !important;
            background: #ffffff !important;
            border: 1px solid var(--card-border) !important;
            border-radius: 12px !important;
            color: var(--text-main) !important;
            font-weight: 600 !important;
            font-size: 15px !important;
            display: flex !important;
            align-items: center !important;
            transition: all 0.2s ease !important;
            text-decoration: none !important;
        }

        #navbarMenu .nav-link .fa-chevron-down,
        #navbarMenu .nav-link .fa-angle-down,
        #navbarMenu .nav-link .down-icon {
            margin-left: auto !important;
            font-size: 12px !important;
            opacity: 0.6 !important;
            transition: transform 0.3s ease !important;
        }

        #navbarMenu .nav-item.active > .nav-link .fa-chevron-down,
        #navbarMenu .nav-item.active > .nav-link .fa-angle-down,
        #navbarMenu .nav-item.nav-active > .nav-link .fa-chevron-down,
        #navbarMenu .nav-item.nav-active > .nav-link .fa-angle-down {
            transform: rotate(180deg) !important;
        }

        #navbarMenu .nav-link i:first-child,
        #navbarMenu .nav-link img:first-child,
        #navbarMenu .nav-link .nav-icon-mask:first-child {
            width: 36px !important;
            height: 36px !important;
            margin-right: 12px !important;
            /* The link itself owns the surface; the icon is intentionally
               transparent so it does not look like a separate white tile. */
            background: transparent !important;
            border-radius: 10px !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            color: var(--primary-color) !important;
            /* box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important; */
            box-shadow: none !important;
            padding: 8px !important;
            transition: all 0.3s ease !important;
            flex-shrink: 0 !important;
        }

        #navbarMenu .nav-item.active .nav-link i:first-child,
        #navbarMenu .nav-item.active .nav-link img:first-child,
        #navbarMenu .nav-item.active .nav-link .nav-icon-mask:first-child,
        #navbarMenu .nav-item.nav-active .nav-link i:first-child,
        #navbarMenu .nav-item.nav-active .nav-link img:first-child,
        #navbarMenu .nav-item.nav-active .nav-link .nav-icon-mask:first-child {
            background: transparent !important;
            box-shadow: none !important;
        }

        /* .nav-icon-mask paints its icon via background-color: currentColor
           (see the base rule near the top of the file), unlike i/img which
           use a transparent background behind separately-colored glyph
           content. The two rules above zero out "background" for all three
           icon types to strip the decorative tile behind i/img, but that
           same reset would erase the mask icon's actual fill — put it back.
           Selectors are repeated (rather than a single lower-specificity
           rule) so this wins the active/nav-active variants too, which are
           more specific than a plain "#navbarMenu .nav-link .nav-icon-mask"
           override would be. */
        #navbarMenu .nav-link .nav-icon-mask:first-child,
        #navbarMenu .nav-item.active .nav-link .nav-icon-mask:first-child,
        #navbarMenu .nav-item.nav-active .nav-link .nav-icon-mask:first-child {
            background-color: currentColor !important;
        }

        #navbarMenu .nav-link:hover,
        #navbarMenu .nav-item.active > .nav-link,
        #navbarMenu .nav-item.nav-active > .nav-link {
            background: var(--primary-soft) !important;
            color: var(--primary-color) !important;
        }

        /* Sub-navigation is visually nested below its parent. The regular
           user menu renders this list as #homeSubMenu (rather than the
           admin-only .sidebar-submenu), so style that real structure. */
        #navbarMenu #homeSubMenu {
            display: none;
            list-style: none;
            margin: 2px 15px 10px 31px;
            padding: 6px;
            background: var(--primary-soft);
            border-left: 2px solid var(--primary-color);
            border-radius: 0 10px 10px 0;
        }

        #navbarMenu .nav-item.show > #homeSubMenu,
        #navbarMenu .nav-item.active > #homeSubMenu {
            display: block !important;
        }

        #navbarMenu #homeSubMenu .sub-nav-item {
            width: 100%;
            margin: 0;
        }

        #navbarMenu #homeSubMenu .nav-link {
            margin: 2px 0 !important;
            padding: 10px 12px !important;
            background: transparent !important;
            border-color: transparent !important;
            border-radius: 8px !important;
            color: var(--note-bold) !important;
            font-size: 13px !important;
            font-weight: 500 !important;
        }

        #navbarMenu #homeSubMenu .nav-link:hover,
        #navbarMenu #homeSubMenu .sub-nav-item.active > .nav-link {
            background: #ffffff !important;
            border-color: rgba(92, 82, 212, 0.16) !important;
            color: var(--primary-color) !important;
        }

        #navbarMenu #homeSubMenu .nav-link img:first-child,
        #navbarMenu #homeSubMenu .nav-link i:first-child,
        #navbarMenu #homeSubMenu .nav-link .nav-icon-mask:first-child {
            width: 24px !important;
            height: 24px !important;
            margin-right: 8px !important;
            padding: 3px !important;
            border-radius: 6px !important;
        }

        .navbar-menu .nav-label {
            color: var(--text-muted) !important;
            font-size: 11px !important;
            font-weight: 700 !important;
            letter-spacing: 1.5px !important;
            padding: 20px 25px 10px !important;
            text-transform: uppercase !important;
            display: block !important;
        }

        .sidebar-submenu {
            background: rgba(0, 0, 0, 0.02) !important;
            margin: 0 15px 8px !important;
            border-radius: 12px !important;
            padding: 5px 0 !important;
            list-style: none !important;
            display: none;
        }

        #navbarMenu .nav-item.active .sidebar-submenu,
        #navbarMenu .nav-item.nav-active .sidebar-submenu {
            display: block !important;
        }

        .sidebar-submenu li a {
            padding: 10px 20px 10px 68px !important;
            font-size: 14px !important;
            color: var(--text-muted) !important;
            border-radius: 8px !important;
            display: block !important;
            transition: var(--transition);
            text-decoration: none !important;
        }

        .sidebar-submenu li a:hover {
            color: var(--primary-color) !important;
            background: var(--primary-soft) !important;
        }
    }

    .spin {
        animation: spin 2s linear infinite;
    }
    @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }

    /* ============================================================
       7. Notifications & Right Header
       ============================================================ */
    .navbar-right {
        display: flex !important;
        align-items: center !important;
        gap: 2px !important;
        margin-left: auto !important;
        /* The legacy Bootstrap v3.4.1 asset bundle (registered only on
           pages using yii\bootstrap\ActiveForm — see the html{font-size}
           fix above for the same root cause) ships its own ".navbar-right"
           utility class (float:right + margin-right:-15px, meant for its
           own navbar component) that collides by name with this unrelated
           div. Neither rule was overridden here before, so any page
           pulling in that bundle got its topbar user-menu/date-time block
           pulled 15px past the edge of the header. */
        margin-right: 0 !important;
        float: none !important;
    }

    .date-time {
        text-align: right !important;
        line-height: 1.3 !important;
        font-size: 12px !important;
        font-weight: 400 !important;
        color: rgba(255, 255, 255, 0.9) !important;
        background: none !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        text-decoration: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 14px 0 0 !important;
        white-space: nowrap;
    }
    .nav-profile{
        text-decoration: none;
        cursor: pointer;
        /* text-align: right !important; */
        /*padding: 2px 5px 2px 2px !important;*/
        text-decoration: none !important;
        transition: all 0.2s ease !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 0 0 6px !important;
        gap: 6px;
        font-family: var(--primary-font) !important;
    }

    .navbar-header .avatar span.rounded-circle {
        background-color: var(--bg-white);
        color: var(--primary-color);
        font-size: 11px !important;
        font-weight: 600 !important;
    }

    .avatar-profile,
    .navbar-header .avatar-profile h5 {
        color: rgba(255, 255, 255, 0.95) !important;
        font-family: var(--primary-font) !important;
        font-size: 12px !important;
        font-weight: 400 !important;
        white-space: nowrap;
        margin-left: 4px;
    }

    .notification-wrapper {
        position: relative;
    }

    .notification-bell {
        cursor: pointer;
        color: #fff;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        font-size: var(--icon-size-topbar);
        margin: 0 10px 0 0;
    }

    .notification-dropdown {
        display: none;
        position: absolute;
        top: calc(100% + 15px);
        right: -10px;
        width: 360px;
        background: #fff !important;
        border-radius: 16px !important;
        box-shadow: 0 15px 50px rgba(0,0,0,0.18) !important;
        z-index: 2000 !important;
        padding: 0 !important;
        overflow: hidden;
        border: 1px solid rgba(0,0,0,0.05) !important;
    }

    .notification-dropdown.show { display: block !important; }

    .notification-dropdown .dropdown-header {
        padding: 16px 20px !important;
        background: #fff !important;
        border-bottom: 1px solid #f1f5f9 !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
    .notification-dropdown .dropdown-header span {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #111827 !important;
    }
    .notification-dropdown .dropdown-header a {
        font-size: 12px !important;
        color: var(--primary-color) !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        transition: opacity 0.2s ease;
    }
    .notification-dropdown .dropdown-header a:hover {
        opacity: 0.8;
    }

    .notification-badge {
        position: absolute; 
        top: -9px; 
        right: -13px;
        color: var(--bg-white);
        font-size: 8px; 
        font-weight: 800; 
        width: 14px; 
        height: 14px;
        display: flex; 
        align-items: center; 
        justify-content: center; 
        border-radius: 50%;
        border: 0.1px solid;
        padding: 7px;
    }

    /* ── Skeleton Loader ── */
    .notification-skeleton { padding: 0 !important; margin: 0 !important; }
    .notification-skeleton .skeleton-item {
        padding: 15px 20px !important;
        border-bottom: 1px solid #f0f2f5 !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
    }
    .skeleton-avatar {
        width: 36px !important; height: 36px !important;
        border-radius: 10px !important;
        background: #e2e8f0 !important;
        flex-shrink: 0 !important;
    }
    .skeleton-lines { flex: 1 !important; display: flex !important; flex-direction: column !important; gap: 8px !important; }
    .skeleton-line {
        height: 12px !important; border-radius: 6px !important;
        background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
        background-size: 200% 100% !important;
        animation: shimmer 1.5s ease-in-out infinite !important;
    }
    .skeleton-line:first-child { width: 65% !important; }
    .skeleton-line:last-child { width: 40% !important; }
    @keyframes shimmer {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }

    /* Fix Navigation Bar (White Bar) */
    @media (min-width: 992px) {
        .burger-menu {
            display: none !important;
        }
        #navbarMenu.navbar-menu-wrapper {
            display: flex !important;
            position: absolute !important;
            top: var(--nav-height) !important;
            left: 0 !important;
            right: 0 !important;
            width: 100% !important;
            background: #ffffff !important;
            border-bottom: 1px solid var(--card-border, #E5E7EB) !important;
            /*padding: 0 max(var(--spacing-xl), calc((100% - var(--content-max)) / 2)) !important;*/
            height: var(--nav-menu-height) !important;
            align-items: center !important;
            justify-content: center !important;
            box-shadow: none !important;
            z-index: 1000 !important;
            margin: 0 !important;
        }

        #navbarMenu #homeSubMenu {
            background: #ffffff !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            border-radius: 16px !important;
            box-shadow: 0 10px 40px rgba(0,0,0,0.1) !important;
            padding: 8px 0 !important;
        }
        #navbarMenu .nav.navbar-menu {
            display: flex !important;
            flex-direction: row !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 24px !important;
            max-width: var(--content-max);
            width: auto !important;
            margin: 0 auto !important;
        }

        #navbarMenu .nav-link {
            display: flex !important;
            align-items: center !important;
            gap: 6px !important;
            color: #64748b !important;
            font-weight: 400 !important;
            font-size: 12px !important;
            padding: 12px 18px !important;
            border-radius: 6px !important;
            background: none !important;
            transition: all 0.2s ease !important;
            letter-spacing: -0.1px !important;
        }

        /* Chrome's default focus ring (a solid rounded rectangle) shows on
           this link after any click, since it's an <a> that never actually
           navigates (href="javascript:void(0)"). Suppress it for mouse
           interaction but keep a visible ring for real keyboard/tab focus
           so the dropdown trigger stays accessible. */
        #navbarMenu .nav-link:focus {
            outline: none !important;
        }

        #navbarMenu .nav-link:focus-visible {
            outline: 2px solid var(--primary-color) !important;
            outline-offset: 2px !important;
        }

        #navbarMenu .nav-link:hover,
        #navbarMenu .nav-item.active > .nav-link {
            color: var(--primary-color) !important;
            font-weight: 500 !important;
            background: none !important;
        }

        #navbarMenu .nav-link img,
        #navbarMenu .nav-link .nav-icon-mask {
            width: 14px !important;
            height: 14px !important;
            opacity: 0.8 !important;
            transition: all 0.2s ease !important;
        }

        #navbarMenu .nav-link > i.far,
        #navbarMenu .nav-link > i.fa,
        #navbarMenu .nav-link > i.fas {
            font-size: 13px !important;
            width: 14px !important;
            /* An older, lower-specificity ".navbar-menu .nav-link > i:first-child"
               rule sets width AND height to 32px. This rule's width:14px
               wins on specificity, but since it never set its own height,
               that rule's height:32px was left standing uncontested —
               ballooning every nav-link (and the whole white sub-nav bar,
               whose height is fixed via --nav-menu-height) to fit a 32px-tall
               icon squeezed into a 14px-wide box. Match the width so the
               icon box is square again. */
            height: 14px !important;
            text-align: center !important;
            opacity: 0.8 !important;
            transition: all 0.2s ease !important;
        }

        /* Flat, monochrome nav icons that recolor with the link (grey by
           default, purple on hover/active) instead of a fixed icon-fill
           color baked into the source asset. */
        #navbarMenu .nav-link .nav-icon-mask {
            display: inline-block;
            background-color: currentColor;
            -webkit-mask-image: var(--icon-url);
            mask-image: var(--icon-url);
            -webkit-mask-size: contain;
            mask-size: contain;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-position: center;
            mask-position: center;
        }

        #navbarMenu .nav-link:hover img,
        #navbarMenu .nav-item.active > .nav-link img,
        #navbarMenu .nav-link:hover .nav-icon-mask,
        #navbarMenu .nav-item.active > .nav-link .nav-icon-mask,
        #navbarMenu .nav-link:hover > i.far,
        #navbarMenu .nav-item.active > .nav-link > i.far,
        #navbarMenu .nav-link:hover > i.fas,
        #navbarMenu .nav-item.active > .nav-link > i.fas {
            opacity: 1 !important;
        }

        #navbarMenu .dropdown-menu {
            border: 1px solid #f1f5f9 !important;
            box-shadow: 0 20px 40px rgba(0,0,0,0.08) !important;
            border-radius: 14px !important;
            padding: 10px !important;
            margin-top: 10px !important;
        }

        #navbarMenu .sub-nav-item a {
            padding: 10px 15px !important;
            border-radius: 8px !important;
            font-size: 14px !important;
            display: flex !important;
            align-items: center !important;
            gap: 10px !important;
            color: #64748b !important;
        }

        #navbarMenu .sub-nav-item a:hover {
            background: var(--primary-soft) !important;
            color: var(--primary-color) !important;
            border-radius: '18px';
        }
    }

    /* ============================================================
       8. Modern Toastr Notifications
       ============================================================ */
    #toast-container > div {
        border-radius: 14px !important;
        padding: 14px 18px 14px 48px !important;
        min-width: 380px !important;
        box-shadow: 0 12px 40px rgba(0,0,0,0.15) !important;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
        opacity: 1 !important;
        background-position: 16px center !important;
        background-size: 20px !important;
        border: none !important;
    }
    #toast-container > div:hover {
        box-shadow: 0 16px 48px rgba(0,0,0,0.2) !important;
        opacity: 1 !important;
    }
    #toast-container > .toast-success {
        background-color: #059669 !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E") !important;
    }
    #toast-container > .toast-error {
        background-color: #dc2626 !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='15' y1='9' x2='9' y2='15'/%3E%3Cline x1='9' y1='9' x2='15' y2='15'/%3E%3C/svg%3E") !important;
    }
    #toast-container > .toast-warning {
        background-color: #b45309 !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E") !important;
    }
    #toast-container > .toast-info {
        background-color: var(--primary-color) !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E") !important;
    }
    .toast-title {
        font-weight: 700 !important;
        font-size: 14px !important;
    }
    .toast-message {
        font-size: 13px !important;
        white-space: normal !important;
        line-height: 1.5 !important;
    }
    .toast-close-button {
        font-size: 18px !important;
        font-weight: 300 !important;
        opacity: 0.7 !important;
        color: #fff !important;
        text-shadow: none !important;
        right: -2px !important;
        top: -2px !important;
    }
    .toast-close-button:hover {
        opacity: 1 !important;
        color: #fff !important;
    }
    .toast-progress {
        height: 3px !important;
        opacity: 0.3 !important;
        background-color: #fff !important;
    }

    @media screen and (max-width: 580px) {
        #toast-container {
            left: 0 !important;
            width: 100vw !important;
            padding: 10px !important;
        }
        #toast-container > div {
            min-width: unset !important;
            width: 100% !important;
            padding: 12px 14px 12px 44px !important;
            border-radius: 12px !important;
            font-size: 13px !important;
            margin-bottom: 8px !important;
        }
        .date-time {display: none !important;}
        .nav-profile {padding-right: 0px !important; background: none !important;}
    }
    /* Desktop submenus open only after a click. The compiled legacy bundle
       opens #homeSubMenu on hover, which makes menus appear while simply
       moving the pointer across the navigation. */
    @media (min-width: 992px) {
        #navbarMenu .nav-item:hover > #homeSubMenu {
            display: none !important;
        }

        #navbarMenu .nav-item.show > #homeSubMenu {
            display: flex !important;
            flex-direction: column;
            padding: 8px 0 !important;
            border-radius: 16px !important;
        }
    }

    /* ============================================================
       Responsive Design - Tablet (768px - 1024px)
       ============================================================ */
    @media (max-width: 1024px) {
        .grid-4,
        .grid-cols-4 {
            grid-template-columns: repeat(2, 1fr) !important;
        }

        .grid-3,
        .grid-cols-3 {
            grid-template-columns: repeat(2, 1fr) !important;
        }

        .hero-banner {
            padding: var(--spacing-lg) !important;
        }

        .hero-banner h2,
        .greeting-text {
            font-size: 24px;
        }
    }

    /* ============================================================
       Responsive Design - Mobile (< 768px)
       ============================================================ */
    @media (max-width: 768px) {
        :root {
            --spacing-lg: 16px;
            --spacing-xl: 20px;
        }

        .navbar-header {
            padding: 0 var(--spacing-md) !important;
        }

        .page-content,
        .content-wrap,
        .main-content {
            /*padding: var(--spacing-md) !important;*/
        }

        /* Hero Banner - Mobile */
        .hero-banner,
        .welcome-banner,
        .quote-banner {
            padding: var(--spacing-lg) !important;
            border-radius: 12px !important;
            margin-bottom: var(--spacing-md) !important;
        }

        .hero-banner h2,
        .greeting-text {
            font-size: 20px;
        }

        .hero-banner-quote,
        .quote-text {
            /*font-size: 14px;*/
        }

        /* Grid Layouts - Mobile Stack */
        .grid-container,
        .dashboard-grid,
        .cards-grid,
        .grid-2,
        .grid-cols-2,
        .grid-3,
        .grid-cols-3,
        .grid-4,
        .grid-cols-4 {
            grid-template-columns: 1fr !important;
            gap: var(--spacing-md) !important;
        }

        /* Cards - Mobile */
        .stat-card,
        .dashboard-card,
        .info-card,
        .course-card,
        .class-card,
        .learning-card {
            padding: var(--spacing-md) !important;
            border-radius: 10px !important;
        }

        .stat-card-number {
            font-size: 28px;
        }

        .course-card-image {
            height: 150px;
        }

        /* Buttons - Mobile */
        .btn,
        button {
            width: 100%;
            padding: 4px !important;
            font-size: 14px !important;
        }

        .btn-sm {
            width: auto;
        }

        /* Progress Card - Mobile */
        .progress-card-large,
        .progress-section-large {
            padding: var(--spacing-lg);
        }

        .progress-percentage,
        .progress-value {
            font-size: 36px;
        }

        /* Points Circle - Mobile */
        .points-circle,
        .rewards-badge {
            width: 100px;
            height: 100px;
            font-size: 28px;
        }

        /* Navigation - Mobile */
        .navbar-menu {
            flex-direction: column !important;
            /*gap: var(--spacing-sm) !important;*/
        }

        .navbar-menu .nav-link {
            padding: 10px 12px !important;
            font-size: 12px !important;
        }

        /* Notification - Mobile */
        .notification-dropdown {
            width: calc(100vw - 32px) !important;
            right: 16px !important;
            left: auto !important;
        }

        /* Dropdown Profile - Mobile */
        .dropdown-profile .dropdown-menu {
            width: calc(100vw - 32px) !important;
            right: 16px !important;
            left: auto !important;
        }

        /* Forms - Mobile */
        input[type="text"],
        input[type="email"],
        textarea,
        select {
            width: 100%;
        }
    }

    /* ============================================================
       Extra Small Mobile (< 480px)
       ============================================================ */
    @media (max-width: 480px) {
        .navbar-header {
            height: 56px !important;
        }

        .navbar-brand {
            font-size: 18px !important;
        }

        .hero-banner h2,
        .greeting-text {
            font-size: 18px;
        }

        .stat-card-number {
            font-size: 24px;
        }

        .progress-percentage {
            font-size: 32px;
        }

        .btn,
        button {
            padding: 4px !important;
            font-size: 13px !important;
        }
    }

    /* ============================================================
       9. Footer
       ============================================================ */
    footer#footer {
        /*margin: 20px auto 0 !important;*/
        padding: 20px 32px !important;
        border-top: 1px solid var(--card-border, #E5E7EB) !important;
        background: var(--bg-light) !important;
        max-width: 1440px;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100%;
        box-sizing: border-box;
    }
    .footer-menu ul li a {
        color: var(--note-body, #6A7282) !important;
        font-size: 13px !important;
    }
    .footer-menu ul li a:hover {
        color: var(--primary-color) !important;
    }
    .social-link ul li a i {
        color: var(--close-btn-gray, #99A1AF) !important;
        font-size: 18px !important;
    }
    .social-link ul li a i:hover {
        color: var(--primary-color) !important;
    }

    /* ============================================================
       10. Course Dashboard
       ============================================================ */
    .dashboard-wrapper {
        padding: 24px 40px;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        color: var(--card-title);
        /*max-width: var(--content-max);*/
        /*margin: 0 auto;*/
    }

    .dashboard-header { margin-bottom: 20px; }
    .dashboard-header p { margin: 0; color: #4a5565; font-size: 0.95rem; }

    .summary-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
        margin-bottom: 24px;
    }

    .stat-card {
        background: var(--bg-white);
        padding: 16px 20px;
        border-radius: 12px;
        border: 1px solid var(--card-border);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    }

    .stat-header {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.75rem;
        font-weight: 700;
        color: var(--primary-color);
        letter-spacing: 0.5px;
    }
    .stat-header.warning { color: #d97706; }
    .stat-header.success { color: #16a34a; }

    .stat-value {
        font-size: 2.2rem;
        font-weight: 800;
        margin: 6px 0 0 0;
        color: var(--card-title);
        line-height: 1;
    }

    /* Cards are placed directly as grid children (see markup) so each
       row's pair stretches to match the taller card automatically via
       Grid's default row alignment — no JS/height sync needed. */
    .main-dashboard-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        margin-bottom: 24px;
    }

    .glass-card {
        background: #ffffff !important;
        border-radius: 8px !important;
        border: 1px solid #e5e7eb !important;
        padding: 20px !important;
        box-shadow: none !important;
        color: #374151 !important;
    }

    .section-header-row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        margin-bottom: 16px !important;
    }

    .section-title-main { font-size: 16px !important; font-weight: 600 !important; color: #374151 !important; margin: 0 !important; }
    .section-title-sm { font-size: 12px !important; font-weight: 600 !important; color: #6b7280 !important; letter-spacing: 0.5px !important; margin: 0 !important; }

    .view-more-link {
        /*font-size: 12px !important;*/
        font-weight: 600 !important;
        color: var(--primary-color) !important;
        background: none !important;
        border: none !important;
        padding: 0 !important;
        cursor: pointer !important;
        text-decoration: none !important;
    }
    .view-more-link:hover { text-decoration: underline !important; }

    .course-progress-item {
        margin-bottom: 16px !important;
    }
    .course-progress-item .course-info {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-bottom: 6px !important;
    }
/*    .course-progress-item .course-info span {
        font-size: 1rem !important;
        font-weight: 400 !important;
        color: #4b5563 !important;
    }*/
    .course-progress-item .progress-num {
        font-size: 14px !important;
        font-weight: 500 !important;
        color: #9ca3af !important;
    }
    .course-progress-item .mini-bar {
        width: 100% !important;
        height: 6px !important;
        background: #f3f4f6 !important;
        border-radius: 9999px !important;
        overflow: hidden !important;
    }
    .course-progress-item .mini-fill {
        height: 100% !important;
        background: var(--primary-color) !important;
        border-radius: 9999px !important;
    }

    .continue-learning-card { display: flex; gap: 18px; align-items: flex-start; }
    .course-thumbnail { width: 145px; height: 200px; flex-shrink: 0; border-radius: 14px; overflow: hidden; }
    .course-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
    .course-details { display: flex; flex-direction: column; align-items: flex-start; }
    .class-title {
        font-size: 13px;
        font-weight: 600;
        color: var(--primary-color);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin: 0 0 6px;
    }
    .course-title { font-size: 1rem; font-weight: 700; color: var(--card-title); margin: 0 0 8px; }
    .course-description {
        font-size: 0.9rem;
        color: var(--close-btn-gray);
        margin: 0 0 14px;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .continue-learning-carousel { position: relative; }

    .continue-learning-track { position: relative; }

    .continue-learning-slide {
        display: none;
    }

    .continue-learning-slide.active {
        display: block;
        animation: clFadeIn 0.35s ease;
    }

    @keyframes clFadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    .continue-learning-dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6px;
        margin-top: 14px;
    }

    .cl-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        border: none;
        padding: 0;
        background: var(--card-border);
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .cl-dot.active {
        background: var(--primary-color);
        width: 18px;
        border-radius: 4px;
    }

    .continue-learning-card {
        height: 100%;
    }
    .due-tag { font-size: 0.85rem; font-weight: 600; color: var(--primary-color); margin-bottom: 14px; display: flex; align-items: center; gap: 6px; }

    .course-progress-item { margin-bottom: 16px; }
    .course-progress-item:last-child { margin-bottom: 0; }
    .course-info { display: flex; justify-content: space-between; font-size: 0.9rem; font-weight: 500; color: var(--card-title); margin-bottom: 6px; }
    .icon-purple { color: var(--primary-color); margin-right: 6px; }

    /* Inline SVG stand-ins for FA icons with no Free-tier outline glyph
       (book-open, exclamation-circle) - size/align like the <i> icons
       they replace since raw <svg> has no font-relative sizing. */
    .svg-icon {
        width: 1em;
        height: 1em;
        vertical-align: -0.125em;
        flex-shrink: 0;
    }
    .progress-num { color: var(--note-body); font-weight: 600; }
    .mini-bar { background: #f1f5f9; height: 4px; border-radius: 4px; overflow: hidden; }
    .mini-fill { background: var(--primary-color); height: 100%; border-radius: 4px; }

    .sessions-list { display: flex; flex-direction: column; gap: 12px; }
    .session-pill { background: #f8fafc; border: 0.5px solid #f1f5f9; border-radius: 10px; padding: 14px 16px; display: flex; justify-content: space-between; align-items: self-start; gap: 12px; }
    .session-info { flex: 1 1 auto; min-width: 0; }
    .session-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
    .session-name { font-size: 0.95rem; font-weight: 700; color: var(--card-title); }
    .session-badge { background-color: var(--primary-light); color: var(--primary-color); font-size: 0.7rem; font-weight: 700; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
    .session-time, .session-host { margin: 0; font-size: 0.78rem; color: var(--close-btn-gray); }
    .session-time {
        display: flex;
        align-items: center;
        gap: 6px;
        /*margin-bottom: 6px;*/
    }
    .session-time i {
        width: 12px;
        text-align: center;
        flex-shrink: 0;
    }
    .session-host strong {
        color: var(--note-bold);
        font-weight: 600;
    }

    .glass-card.progress-hero-card,
    .progress-hero-card {
        background: linear-gradient(to right, rgb(105, 61, 148), rgb(170, 57, 159)) !important;
        border-radius: 12px !important;
        padding: 20px !important;
        color: #ffffff !important;
        border: none !important;
        box-shadow: none !important;
        display: flex !important;
        flex-direction: column !important;
        /*justify-content: center !important;*/
    }
    .hero-header-row {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
    }
    .hero-header-title {
        font-size: 1rem !important;
        font-weight: 400 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        color: rgba(255, 255, 255, 0.9) !important;
    }
    .progress-label-hero {
        font-size: 48px !important;
        font-weight: 600 !important;
        line-height: 1 !important;
        margin-bottom: 16px !important;
        color: #ffffff !important;
    }
    .progress-bar-main {
        background: rgba(255, 255, 255, 0.15) !important;
        height: 6px !important;
        border-radius: 9999px !important;
        overflow: hidden !important;
        width: 100% !important;
    }
    .progress-fill-main {
        background: rgba(255, 255, 255, 0.5) !important;
        height: 100% !important;
        border-radius: 9999px !important;
    }

    .stat-card .stat-header:not(.warning):not(.success) span {
        color: #9ca3af !important;
    }

    .stat-card .stat-header span {
        font-size: 12px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
    }

    .btn-discussion-view {
        font-size: 12px !important;
        font-weight: 600 !important;
        color: var(--primary-color) !important;
        border: 1px solid var(--primary-color) !important;
        background: transparent !important;
        padding: 4px 12px !important;
        border-radius: 12px !important;
        transition: all 0.2s ease !important;
        text-decoration: none !important;
        flex-shrink: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .btn-discussion-view:hover {
        background: var(--primary-color) !important;
        color: #ffffff !important;
    }

    .required-section .course-name-text {
        font-size: 16px !important;
        font-weight: 400 !important;
        color: #374151 !important;
    }
    .required-section .item-index {
        font-size: 16px !important;
        font-weight: 400 !important;
        color: #9ca3af !important;
    }

    .rewards-card,
    .discussion-card {
        background: #ffffff !important;
        border-radius: 8px !important;
        border: 1px solid #e5e7eb !important;
        padding: 20px !important;
        box-shadow: none !important;
    }

    .rewards-card .section-header-row,
    .discussion-card .section-header-row {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-bottom: 16px !important;
        border-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    .rewards-card .section-title-main,
    .discussion-card .section-title-main {
        font-size: 16px !important;
        font-weight: 600 !important;
        color: #374151 !important;
        margin: 0 !important;
    }

    .session-badge,
    .discussion-active-badge {
        font-size: 12px !important;
        font-weight: 600 !important;
        color: var(--primary-color) !important;
        background: #f0e8f7 !important;
        border-radius: 9999px !important;
    }

    .rewards-card .rewards-points-row {
        display: flex !important;
        align-items: center !important;
        gap: 20px !important;
    }

    .rewards-card .rewards-points-circle {
        width: 80px !important;
        height: 80px !important;
        border-radius: 50% !important;
        flex-shrink: 0 !important;
        background: linear-gradient(135deg, rgb(105, 61, 148), rgb(170, 57, 159)) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .rewards-card .rewards-points-number {
        font-size: 24px !important;
        font-weight: 700 !important;
        color: #ffffff !important;
        line-height: 1 !important;
    }

    .rewards-card .rewards-points-unit {
        font-size: 10px !important;
        color: rgba(255, 255, 255, 0.8) !important;
        font-weight: 500 !important;
        margin-top: 2px !important;
    }

    .rewards-card .rewards-points-copy {
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    .rewards-card .rewards-points-title {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #1f2937 !important;
        margin-bottom: 4px !important;
        opacity: 1 !important;
    }

    .rewards-card .rewards-points-desc {
        font-size: 12px !important;
        color: #6b7280 !important;
        margin-bottom: 12px !important;
        line-height: 1.5 !important;
        opacity: 1 !important;
    }

    .rewards-activity {
        margin-top: 8px !important;
        border-top: 1px solid #f3f4f6 !important;
        padding-top: 8px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
    }

    .rewards-item {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        background: #f9fafb !important;
        border-radius: 24px !important;
        padding: 4px 10px !important;
    }

    .rewards-item-label {
        font-size: 12px !important;
        color: #4b5563 !important;
        opacity: 1 !important;
    }

    .rewards-item-points {
        font-size: 12px !important;
        font-weight: 600 !important;
        color: var(--primary-color) !important;
        opacity: 1 !important;
    }

    .discussion-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .discussion-list .discussion-item {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        background: #f9fafb !important;
        border: 1px solid #f3f4f6 !important;
        border-radius: 8px !important;
        padding: 12px 16px !important;
        transition: all 0.2s ease !important;
        width: 100% !important;
    }

    .card-hover-preview:hover {
        background-color: rgba(240, 232, 247, 0.3) !important;
        border-color: rgb(105 61 148 / 30%) !important;
    }

    .table-hover-preview:hover {
        border-color: rgba(105, 61, 148, 0.3) !important;
        background: #f8f8ff !important;
    }

    .discussion-item-content {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .btn-discussion-view {
        margin-left: auto !important;
        flex-shrink: 0 !important;
    }

    .discussion-list .course-name-text,
    .discussion-card .course-name-text {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #1f2937 !important;
        line-height: 1.375 !important;
        margin-bottom: 4px !important;
        opacity: 1 !important;
    }

    .discussion-meta,
    .discussion-meta span,
    .discussion-card .discussion-meta {
        font-size: 12px !important;
        color: #6b7280 !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        opacity: 1 !important;
    }

    @media (min-width: 993px) {
        /* These are paired in the first grid row. Explicit stretch/height
           keeps the right card flush with Continue Learning even if its
           session copy is shorter or unavailable. */
        .continue-learning-glass-card,
        .upcoming-sessions-card {
            align-self: stretch;
            height: 100%;
        }
    }

    .required-list { display: flex; flex-direction: column; }
    .required-item { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--card-border); }
    .required-item:last-child { border-bottom: none; }
    .required-info { display: flex; align-items: center; gap: 16px; }
    .item-index { color: #9ca3af; font-weight: 600; font-size: 0.9rem; min-width: 12px; }
    .course-name-text { font-size: 0.92rem; font-weight: 600; color: var(--card-title); }
    .view-all-required-wrapper { display: flex; justify-content: center; margin-top: 20px; }
    .empty-state { font-size: 0.85rem; color: var(--note-body); margin: 8px 0 0; }

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

    @media (max-width: 768px) {
        .dashboard-wrapper {
            padding: 16px 12px !important;
        }
        .dashboard-header {
            margin-bottom: 20px !important;
        }
        .dashboard-header h2 {
            font-size: 1.5rem !important;
            margin-bottom: 4px !important;
        }
        .dashboard-header p {
            font-size: 0.95rem !important;
            line-height: 1.4 !important;
        }
        /* Figma keeps the 3 stat cards side by side even on phones
           (see section 14), so this only needs a tighter gap and
           smaller padding/type to fit a narrow column. */
        .summary-grid {
            gap: 10px !important;
            margin-bottom: 20px !important;
        }
        .stat-card {
            padding: 12px 14px !important;
            border-radius: 14px !important;
        }
        .course-card-mini {
            flex-direction: column !important;
            align-items: flex-start !important;
            gap: 10px !important;
        }
    }

    /* ============================================================
       11. Buttons (Pill CTA family)
       ------------------------------------------------------------
       Reusable purple call-to-action button. Combine the base class
       with one size modifier and, optionally, the outline skin:
         <a class="btn-pill">              solid, medium (default)
         <a class="btn-pill btn-pill-lg">  solid, large
         <a class="btn-pill btn-pill-sm">  solid, small
         <a class="btn-pill btn-pill-xs btn-pill-outline"> outline, xs
       Not scoped to the dashboard — this file loads on every page in
       the blue theme, so any view can use these same classes.
       ============================================================ */
    .btn-pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        font-family: var(--primary-font);
        font-weight: 700;
        text-decoration: none;
        cursor: pointer;
        border: none;
        background-color: var(--primary-color);
        color: #fff;
        white-space: nowrap;
        transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
        padding: 10px 24px;
        font-size: 0.9rem;
        border-radius: 20px;
    }

    .btn-pill:hover {
        background-color: var(--primary-dark);
        color: #fff;
    }

    .btn-pill-outline {
        background-color: transparent;
        color: var(--primary-color);
        border: 1px solid var(--primary-color);
    }

    .btn-pill-outline:hover {
        background-color: var(--primary-color);
        color: #fff;
    }

    .btn-pill-xs {
        padding: 4px 16px;
        font-size: 0.82rem;
        font-weight: 600;
        border-radius: calc( 0.625rem + 4px);
    }

    .btn-pill-sm {
        padding: 6px 16px;
        font-size: 0.8rem;
        font-weight: 600;
        border-radius: 14px;
    }

    .btn-pill-lg {
        padding: 10px 26px;
        font-size: 0.95rem;
        border-radius: 24px;
    }

    /* ============================================================
       12. Course In Progress (Continue Learning List)
       ------------------------------------------------------------
       backend/views/course/continue-learning.php — full list of a
       learner's in-progress courses. Colors/spacing verified against
       courseProgess.png; all values map onto existing design tokens.
       ============================================================ */
    .cl-container {
        /*max-width: var(--content-max);*/
        margin: 0 auto;
        padding: var(--spacing-lg) var(--spacing-xl);
    }

    .cl-header {
        display: flex;
        align-items: center;
        margin-bottom: var(--spacing-lg);
    }

    .cl-back-link {
        color: var(--primary-color);
        font-weight: 600;
        text-decoration: none;
        font-size: 14px;
    }

    .cl-back-link:hover {
        color: var(--primary-dark);
    }

    .cl-divider-vertical {
        border-left: 1px solid var(--card-border);
        height: 18px;
    }

    .cl-title {
        font-weight: 600;
        color: var(--card-title);
        font-size: 18px;
    }

    .cl-count-text {
        color: var(--close-btn-gray);
        font-size: 14px;
    }

    /* Card & Table Styling */
    .cl-card {
        border-radius: 24px !important;
        overflow: hidden;
        background: var(--bg-white);
    }
    .cl-table {
        /*border-collapse: separate !important;*/
        border-spacing: 0 !important;
    }
    .cl-table thead tr,
    .cl-table tbody tr {
        display: table-row !important;
        justify-content: normal !important;
    }

    .cl-table th,
    .cl-table td {
        display: table-cell !important;
    }
    .cl-continue-learning .cl-table,
    .cl-all-course-progress .cl-table {
        table-layout: fixed;
    }

    .cl-continue-learning .cl-table th:first-child,
    .cl-continue-learning .cl-table td:first-child,
    .cl-all-course-progress .cl-table th:first-child,
    .cl-all-course-progress .cl-table td:first-child {
        width: 32px !important;
        white-space: nowrap;
    }

    .cl-continue-learning .cl-table th:nth-child(3),
    .cl-continue-learning .cl-table td:nth-child(3) {
        width: 90px !important;
    }

    .cl-continue-learning .cl-table th.cl-action-column,
    .cl-continue-learning .cl-table td.cl-action-column {
        width: 80px !important;
    }

    .cl-all-course-progress .cl-table th.cl-progress-column,
    .cl-all-course-progress .cl-table td.cl-progress-column {
        width: 140px !important;
    }

    .cl-table th {
        font-size: 11px;
        letter-spacing: 0.8px;
        font-weight: 600;
        color: var(--close-btn-gray) !important;
        padding-top: 16px;
        padding-bottom: 16px;
        border-bottom: 1px solid var(--card-border);
        background-color: #F9FBFA;
        align-content: center;
    }

    .cl-table td {
        border-bottom: 0.1px solid var(--card-border);
        color: var(--close-btn-gray);
    }

    .cl-table tbody tr:last-child td {
        border-bottom: none;
    }
    .cl-table thead tr:first-child th:first-child {
        border-top-left-radius: 24px;
    }

    .cl-table thead tr:first-child th:last-child {
        border-top-right-radius: 24px;
    }

    .cl-table tbody tr:last-child td:first-child {
        border-bottom-left-radius: 24px;
    }

    .cl-table tbody tr:last-child td:last-child {
        border-bottom-right-radius: 24px;
    }

    /* Course Details */
    .cl-table .course-name {
        color: var(--card-title);
        font-size: 15px;
        margin-bottom: 3px;
    }

    .cl-table .class-info {
        font-size: 13px;
        color: var(--close-btn-gray) !important;
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .cl-table .dot-separator {
        margin: 0 4px;
        color: var(--close-btn-gray);
    }
    .cl-status-badge {
        background-color: var(--primary-light);
        color: var(--primary-color);
        font-size: 10px;
        font-weight: 600;
        padding: 5px 10px;
        border-radius: 50px;
        display: inline-block;
        white-space: nowrap;
    }
    .cl-continue-learning .cl-table td.cl-action-column .btn-pill {
        padding: 4px 8px !important;
        font-size: 11px;
    }

    /* In-Progress Courses — phone layout from the mobile Figma reference. */
    @media (max-width: 767px) {
        .cl-continue-learning {
            padding: 20px 0 28px;
        }

        .cl-continue-learning .cl-header {
            min-height: 36px;
            margin: 0 2px 16px;
            white-space: nowrap;
        }

        .cl-continue-learning .cl-back-link {
            font-size: 16px;
            font-weight: 700;
        }

        .cl-continue-learning .cl-divider-vertical {
            height: 24px;
            margin-right: 14px !important;
            margin-left: 14px !important;
        }

        .cl-continue-learning .cl-title {
            font-size: 18px;
            line-height: 24px;
            margin-right: 0 !important;
        }

        .cl-continue-learning .cl-count-text {
            margin-left: auto;
            font-size: 14px;
        }

        .cl-continue-learning .cl-card {
            border: 1px solid #e7eaf0;
            border-radius: 14px !important;
            box-shadow: none !important;
        }

        .cl-continue-learning .cl-table th {
            height: 40px;
            padding: 0 8px !important;
            font-size: 10px;
            letter-spacing: 0.7px;
            vertical-align: middle;
        }

        .cl-continue-learning .cl-table th:first-child,
        .cl-continue-learning .cl-table td:first-child {
            padding-left: 12px !important;
        }

        .cl-continue-learning .cl-table th.cl-action-column,
        .cl-continue-learning .cl-table td.cl-action-column {
            padding-right: 10px !important;
        }

        .cl-continue-learning .cl-table td {
            padding-top: 16px;
            padding-bottom: 16px;
            vertical-align: middle;
        }

        .cl-continue-learning .cl-table .course-name {
            font-size: 14px;
            line-height: 18px;
            margin-bottom: 4px;
        }

        .cl-continue-learning .cl-table .class-info {
            flex-wrap: wrap;
            column-gap: 5px;
            row-gap: 2px;
            font-size: 12px;
            line-height: 16px;
        }

        .cl-continue-learning .cl-status-badge {
            padding: 4px 8px !important;
            font-size: 9px;
            line-height: 12px;
            white-space: nowrap;
        }
        .cl-all-course-progress {
            padding: 20px 0 28px;
        }

        .cl-all-course-progress .cl-header {
            min-height: 36px;
            margin: 0 2px 16px;
            white-space: nowrap;
        }

        .cl-all-course-progress .cl-back-link {
            font-size: 14px;
            font-weight: 700;
        }

        .cl-all-course-progress .cl-divider-vertical {
            height: 24px;
            margin-right: 14px !important;
            margin-left: 14px !important;
        }

        .cl-all-course-progress .cl-title {
            font-size: 17px;
            line-height: 24px;
            margin-right: 0 !important;
        }

        .cl-all-course-progress .cl-count-text {
            margin-left: auto;
            font-size: 13px;
        }

        .cl-all-course-progress .cl-card {
            border: 1px solid #e7eaf0;
            border-radius: 14px !important;
            box-shadow: none !important;
        }

        .cl-all-course-progress .cl-table th {
            height: 40px;
            padding: 0 8px !important;
            font-size: 10px;
            letter-spacing: 0.7px;
            vertical-align: middle;
        }

        .cl-all-course-progress .cl-table th:first-child,
        .cl-all-course-progress .cl-table td:first-child {
            padding-left: 12px !important;
        }

        .cl-all-course-progress .cl-table th.cl-progress-column,
        .cl-all-course-progress .cl-table td.cl-progress-column {
            padding-right: 12px !important;
        }

        .cl-all-course-progress .cl-table td {
            padding-top: 16px;
            padding-bottom: 16px;
            vertical-align: middle;
        }

        .cl-all-course-progress .cl-table .course-name {
            font-size: 14px;
            line-height: 18px;
            margin-bottom: 4px;
        }

        .cl-all-course-progress .cl-table .class-info {
            flex-wrap: wrap;
            column-gap: 5px;
            row-gap: 2px;
            font-size: 12px;
            line-height: 16px;
        }

        .cl-all-course-progress .cl-progress-percent {
            font-size: 11px;
        }
        .cl-dev-plan .cl-header {
            flex-direction: column;
            align-items: stretch;
            gap: 12px;
        }

        .cl-dev-plan .cl-header h4 {
            margin-right: 0 !important;
        }

        .cl-dev-plan .cl-header .btn-pill {
            width: 100%;
        }
    }
    .fw-bold {
        font-weight: 600;
    }
    .cl-progress-block {
        width: 100%;
    }

    .cl-progress-percent {
        font-size: 13px;
        font-weight: 700;
        color: var(--primary-color);
        margin-bottom: 6px;
    }

    .cl-progress-bar {
        width: 100%;
        height: 6px;
        background-color: #F3F4F6;
        border-radius: 10px;
        overflow: hidden;
    }

    .cl-progress-fill {
        height: 100%;
        background-color: var(--primary-color);
        border-radius: 10px;
        transition: width 0.4s ease;
    }

    /* ============================================================
       13. Dashboard Load-In Animations
       ------------------------------------------------------------
       Cards fade/slide up on page load, staggered by their fixed
       markup position (the summary stats and the six main-grid
       cards are always the same count/order regardless of data,
       so the delay can be assigned per nth-child with no JS).
       Progress-bar fills and the summary numbers animate via a
       small script at the bottom of _dashboardData.php, since
       those targets are dynamic values PHP renders per request.
       Entirely skipped under prefers-reduced-motion.
       ============================================================ */
    @media (prefers-reduced-motion: no-preference) {
        @keyframes dashFadeInUp {
            from { opacity: 0; transform: translateY(16px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        .summary-grid .stat-card,
        .main-dashboard-grid > .glass-card,
        .dashboard-wrapper > .glass-card.required-section {
            opacity: 1 !important;
            animation: none !important;
            transform: none !important;
        }

        .summary-grid .stat-card:nth-child(1) { animation-delay: 0.1s; }
        .summary-grid .stat-card:nth-child(2) { animation-delay: 0.3s; }
        .summary-grid .stat-card:nth-child(3) { animation-delay: 0.5s; }

        .main-dashboard-grid > .glass-card:nth-child(1) { animation-delay: 0.4s; }
        .main-dashboard-grid > .glass-card:nth-child(2) { animation-delay: 0.6s; }
        .main-dashboard-grid > .glass-card:nth-child(3) { animation-delay: 0.8s; }
        .main-dashboard-grid > .glass-card:nth-child(4) { animation-delay: 1.0s; }
        .main-dashboard-grid > .glass-card:nth-child(5) { animation-delay: 1.2s; }
        .main-dashboard-grid > .glass-card:nth-child(6) { animation-delay: 1.4s; }

        .dashboard-wrapper > .glass-card.required-section {
            animation-delay: 1.6s;
        }

        .mini-fill,
        .progress-fill-main {
            transition: width 1.6s cubic-bezier(0.16, 1, 0.3, 1) 1s;
        }
    }

    /* ============================================================
       14. Mobile Navigation & Dashboard (<=991px)
       ------------------------------------------------------------
       Matches TrainingPipelinedashboarddesign.png (phone frame).
       991px is the same breakpoint the existing off-canvas #navbarMenu
       already switches on at (section 6), so the topbar/trigger look
       changes at exactly the point the horizontal desktop nav
       disappears — no new breakpoint introduced.
       ============================================================ */
    @media (max-width: 991px) {
        /* Topbar switches from brand purple to the dark navy Figma
           uses for the phone frame. */
        .navbar-header {
            /*background: var(--topbar-mobile-bg) !important;*/
        }

        /* The topbar's own hamburger hands off to .mobile-menu-bar's
           trigger below for non-admin users (see bluetheme_layout.php);
           admins have no equivalent bar and keep this one. */
        .navbar-header .burger-menu.topbar-burger-hidden-on-mobile {
            display: none !important;
        }

        /* Figma's phone topbar shows just the avatar chip, no name
           (there's a narrower rule for this at <=575px already, but
           the rest of the mobile topbar treatment now starts at 991px,
           so the name needs to disappear at that same breakpoint). */
        .navbar-header .avatar-profile h5 {
            display: none !important;
        }

        #demo-carousel.carousel {
            margin: 0px !important;;
        }

        /* Second bar right below the topbar: "Menu" label + a hamburger
           that opens the same #navbarMenu off-canvas drawer as the
           topbar's own .burger-menu (wired in bluetheme_layout.php). */
        .mobile-menu-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 20px;
            background: var(--bg-white);
            border-bottom: 1px solid var(--card-border);
        }

        .mobile-menu-bar-label {
            font-size: 15px;
            font-weight: 700;
            color: var(--card-title);
        }

        .mobile-menu-bar-toggle {
            margin-left: auto;
            background: none;
            border: none;
            padding: 4px;
            color: var(--note-body);
            font-size: 18px;
            line-height: 1;
            cursor: pointer;
        }

        /* Continue Learning: Figma's phone card has no visible thumbnail
           image, just the article label/title/due-date/button stacked. */
        .continue-learning-card {
            flex-direction: column;
        }

        .course-thumbnail {
            display: none;
        }

        .continue-learning-card .btn-pill {
            width: 100%;
        }

        /* Upcoming Virtual Classes: Join button drops below the session
           info and stretches full width instead of sitting inline. */
        .session-pill {
            flex-direction: column;
            align-items: stretch;
        }

        .session-pill .btn-pill {
            width: 100%;
        }

        /* Keep the session label readable by moving it below a long course
           title instead of squeezing both elements into the same row. */
        .session-title-row .session-badge {
            /*flex-basis: 100%;*/
            /*width: fit-content;*/
        }

        /* Rewards & Points: let the circle/copy wrap instead of
           overflowing a ~340px content column. */
        .rewards-points-row {
            flex-wrap: wrap;
        }

        /* Footer: centered and stacked instead of the desktop row.
           app.css's bare `footer{}` selector sets display:flex,
           align-items:stretch and justify-content:flex-start with
           !important (that's what makes .social-link's margin-left:auto
           push it to the right on desktop), so overriding the axis
           here needs !important too or it's silently dropped. */
        footer#footer {
            padding: 20px var(--spacing-md) !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
            text-align: center;
            gap: 12px;
        }

        .footer-menu ul li {
            margin: 0 12px !important;
        }

        .social-link {
            margin-left: 0 !important;
        }

        /* Smaller type scale + tighter padding across the dashboard
           cards. Several of these (.progress-label-hero in particular,
           a 3.2rem/51px number) were only ever sized for the desktop
           column width and had no mobile fallback, so on a narrow
           phone they were running past their card instead of just
           looking big. */
        .glass-card {
            padding: 16px !important;
        }

        .required-section {
            padding: 16px !important;
        }

        .stat-header {
            font-size: 0.56rem !important;
            gap: 4px !important;
            letter-spacing: 0.2px !important;
        }

        .stat-value {
            font-size: 1.6rem !important;
        }

        .course-title {
            font-size: 1.05rem !important;
        }

        .session-name {
            font-size: 1rem !important;
        }

        .progress-hero {
            padding: 18px !important;
        }

        .progress-label-hero {
            font-size: 2.2rem !important;
            margin-bottom: 12px !important;
        }

        .rewards-points-circle {
            width: 72px !important;
            height: 72px !important;
        }

        .rewards-points-number {
            font-size: 1.25rem !important;
        }

        .rewards-points-title {
            font-size: 0.88rem !important;
        }

        .course-name-text {
            font-size: 0.88rem !important;
        }

        /* Flexbox default min-width:auto lets a flex item's content
           refuse to shrink below its own max-content width, so a long
           course/discussion title next to a fixed-size button or index
           number pushes the row (and the card) wider than the viewport
           instead of wrapping. min-width:0 lets these actually shrink
           and wrap within the card like the rest of the text does. */
        .required-info,
        .rewards-points-copy {
            min-width: 0;
            flex: 1 1 auto;
        }

        .course-info > span:first-child {
            min-width: 0;
            flex: 1 1 auto;
        }

        .required-item .btn-pill {
            flex-shrink: 0;
        }

        /* The profile name is plain text inside .avatar-profile in the
           current layout, so hiding only a hypothetical h5 leaves it visible. */
        .navbar-header .avatar-profile {
            display: none !important;
        }
    }

/* ============================================================
   15. Figma Reusable Component Classes (Modals, Badges, Overlays)
   ============================================================ */

.impersonated-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 16px;
}
.impersonated-label {
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.5px;
}
.impersonated-link {
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    opacity: 0.9;
    margin-left: 2px;
}
.impersonated-link:hover {
    opacity: 1;
    color: #ffffff;
}

.figma-modal-backdrop {
    background: rgba(180, 185, 230, 0.55) !important;
}
.figma-modal-dialog {
    max-width: 640px !important;
    margin: 1.75rem auto !important;
}
.figma-modal-content {
    border-radius: 16px !important;
    border: none !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
    padding: 1.5rem !important;
    position: relative !important;
    background: #ffffff !important;
}
.figma-modal-close {
    position: absolute !important;
    top: 16px !important;
    right: 20px !important;
    font-size: 24px !important;
    font-weight: 300 !important;
    color: #99a1af !important;
    opacity: 1 !important;
    border: none !important;
    background: transparent !important;
    z-index: 10 !important;
    cursor: pointer !important;
}
.figma-modal-header {
    border-bottom: none !important;
    display: block !important;
    padding-bottom: 0 !important;
    text-align: center !important;
}
.figma-modal-title {
    font-size: 24px !important;
    font-weight: 300 !important;
    color: #364153 !important;
    letter-spacing: 0.6px !important;
    margin: 0 !important;
    text-align: center !important;
    width: 100% !important;
}
.figma-modal-body {
    padding-top: 1rem !important;
    padding-bottom: 0.5rem !important;
}
.figma-modal-footer {
    border-top: none !important;
    display: flex !important;
    gap: 16px !important;
    justify-content: center !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}
.figma-btn-skip {
    border-radius: 20px !important;
    padding: 10px 32px !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    border: 1px solid #d1d5db !important;
    color: #6b7280 !important;
    background: transparent !important;
}
.figma-btn-skip:hover {
    border-color: #9ca3af !important;
    color: #374151 !important;
}
.figma-btn-confirm {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    border-radius: 20px !important;
    padding: 10px 48px !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    color: #ffffff !important;
}
.figma-btn-confirm:hover {
    background-color: var(--primary-hover, #5A3480) !important;
    border-color: var(--primary-hover, #5A3480) !important;
}
.figma-form-label {
    display: block !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #364153 !important;
    margin-bottom: 6px !important;
}
.figma-form-input {
    height: 50px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    padding: 0 16px !important;
    font-size: 14px !important;
    color: #374151 !important;
}
.figma-form-input:focus {
    border-color: var(--primary-color) !important;
    outline: none !important;
}
.figma-note-text {
    font-size: 12px !important;
    color: #6a7282 !important;
    font-style: italic !important;
    line-height: 20px !important;
    margin-top: 16px !important;
    margin-bottom: 0 !important;
}
.figma-note-bold {
    font-weight: 700 !important;
    font-style: normal !important;
    color: #4a5565 !important;
}

.hero-quote-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    /*background: var(--primary-color) !important;*/
    opacity: 0.82 !important;
    visibility: visible !important;
    z-index: 1 !important;
    border-radius: 12px !important;
}

/* High contrast overrides for Rewards & Discussion Cards matching Figma App.tsx */
.rewards-card .rewards-points-title,
.discussion-card .discussion-item-title,
.discussion-item .discussion-item-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
    line-height: 1.375 !important;
    margin-bottom: 2px !important;
    opacity: 1 !important;
}

.rewards-card .rewards-points-desc,
.rewards-item-label,
.discussion-card .discussion-meta,
.discussion-meta,
.discussion-meta span {
    font-size: 12px !important;
    color: #9ca3af !important;
    opacity: 1 !important;
}

.discussion-meta .dot-separator {
    color: #d1d5db !important;
    font-size: 12px !important;
}

.rewards-item-points,
.session-badge,
.discussion-active-badge {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--primary-color) !important;
    border-radius: 9999px !important;
    opacity: 1 !important;
}

/* ============================================================
   13. Badges Grid (backend/views/user-badges/index.php)
   ------------------------------------------------------------
   Badge source images come in wildly different native dimensions
   (small icon PNGs next to large hexagon PNGs). img-fluid alone
   only caps oversized images, it doesn't scale small ones up, so
   without a fixed box every badge in the grid rendered at a
   different size. Give every badge slot the same square box with
   object-fit: contain so the grid stays visually uniform.
   ============================================================ */
.badge-items {
    row-gap: 20px;
}

.badge-items .position-relative {
    width: 120px;
    height: 120px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.badge-items .position-relative img.img-fluid {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.badge-items .lock-icon {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* The widget can render zero items even when its data provider isn't
   empty (each item's visibility is filtered per-user in PHP), leaving
   the section blank with no explanation. Fill that gap purely in CSS. */
.badge-items:empty::after {
    content: 'No badges to show yet.';
    display: block;
    color: var(--close-btn-gray, #6b7280);
    font-size: 14px;
    padding: 8px 0 4px;
}

/* ============================================================
   Course catalog cards (.team-item) — shared by every page that
   lists courses as cards: course/index (catalogue.php) and the
   search-result pages (_searchResult.php / _searchNoResult.php).
   This used to live only in catalogue.php's own <style> block, so
   it never reached the search-result pages even though they render
   the exact same .team-item card markup — that page-specific
   <style> tag simply isn't present when a different view is
   rendered. Moved here (and those pages now share the same
   .course-index wrapper) so every page listing course cards gets
   consistent spacing/alignment/hover behavior instead of drifting
   out of sync with course/index whenever one gets touched and the
   other doesn't.
   ============================================================ */
.course-index .container {
    padding: 0px 40px !important;
}

.course-index .team-item .bottom-content {
    display: flex;
    flex-direction: column;
}

.course-index .team-item .bottom-content p {
    display: block !important;
    width: 100% !important;
    margin-top: auto !important;
    background-color: rgba(255, 255, 255, 0.12) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.55) !important;
    border-radius: 10px !important;
    padding: 10px 20px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}

.course-index .team-item .bottom-content p:hover {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
    box-shadow: none !important;
}

.course-index .team-item .bottom-content p:hover a {
    color: var(--primary-color) !important;
}

@media screen and (min-width: 768px) {
    .course-index .team-item {
        transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    .course-index .team-item:hover {
        transform: translateY(-6px);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
    }
}

.course-index .team-item .plus-icon,
.course-index .team-item .minus-icon {
    visibility: visible !important;
    background: #ffffff !important;
    color: var(--primary-color) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.course-index .team-item .plus-icon:hover,
.course-index .team-item .minus-icon:hover {
    background: var(--primary-color) !important;
    color: #ffffff !important;
}

@media screen and (max-width: 540px) {
    .course-index .container {
        padding: 0px !important;
    }

    .course-index #my-courses,
    .course-index #resources,
    .course-index #org-courses,
    .course-index #search-result {
        border: none;
    }
}

@media screen and (max-width: 767px) {
    .course-index .team-item {
        border-radius: 8px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        height: 100%;
        margin-bottom: 25px;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        border: none;
    }

    .course-index .team-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    }

    .course-index .team-img {
        position: relative;
        height: 170px;
        width: 100%;
    }

    .course-index .team-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .course-index .plus-icon,
    .course-index .minus-icon {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 36px;
        height: 36px;
        background: rgba(255, 255, 255, 0.9);
        color: #693D94;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
        text-decoration: none !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    .course-index .plus-icon:hover,
    .course-index .minus-icon:hover {
        background: #693D94;
        color: #fff;
        transform: scale(1.1);
    }

    .course-index .course__overlay,
    .course-index .course2__overlay {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(33, 37, 41, 0.9);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 15px;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        z-index: 10;
    }

    .course-index .course__overlay.active,
    .course-index .course2__overlay.active {
        opacity: 1;
        visibility: visible;
    }

    .course-index .course__overlay p,
    .course-index .course2__overlay p {
        color: #ffffff;
        font-size: 13px;
        text-align: center;
        margin-bottom: 15px;
    }

    .course-index .overlay_btn {
        color: #ffffff !important;
        padding: 8px 20px;
        border-radius: 6px;
        font-size: 13px;
        font-weight: 600;
        margin: 0 5px;
        text-decoration: none !important;
        background: #693D94 !important;
        display: inline-block;
        transition: background 0.2s;
    }

    .course-index .overlay_btn:hover {
        background: #4345a3 !important;
        color: #ffffff !important;
    }

    .course-index .center-content {
        padding: 12px 15px;
        text-align: center;
        background: #f8fafc;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    .course-index .pagination.load-more .page-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        min-height: 40px;
        margin: 0 4px;
    }

    .course-index .center-content h6 {
        font-size: 11px;
        color: #6c757d;
        text-transform: uppercase;
        margin: 0 0 4px 0;
        letter-spacing: 0.5px;
    }

    .course-index .center-content h5 {
        font-size: 14px;
        color: #111827;
        font-weight: 700;
        margin: 0;
    }

    .course-index .bottom-content {
        padding: 20px;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }

    .course-index .course-rating-summary {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.7) !important;
        margin-bottom: 10px;
    }

    .course-index .course-rating-summary a {
        color: rgba(255, 255, 255, 0.9) !important;
    }

    .course-index .bottom-content h2 {
        font-size: 18px;
        font-weight: 700;
        margin: 0 0 20px 0;
        line-height: 1.3;
    }

    .course-index .bottom-content h2 a {
        color: #ffffff !important;
        text-decoration: none;
    }

    .course-index .bottom-content > p {
        margin-top: auto;
        margin-bottom: 0;
    }

    .course-index .bottom-content > p a {
        display: block;
        text-align: center;
        color: #ffffff !important;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none !important;
    }
}
#course-structure > .container:not(#course-class-pjax *),
#redeem-point-wrap > .container,
#badges-wrap > .container {
    max-width: none !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
}
#redeem-point-wrap > .container > .row > [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
#badges-wrap > .container > .row > [class*="col-"]:first-child {
    padding-left: 0 !important;
}

#badges-wrap > .container > .row > [class*="col-"]:last-child {
    padding-right: 0 !important;
}

#course-dashboard.container {
    max-width: none !important;
}

.cl-dev-plan.cl-container {
    padding-left: 40px !important;
    padding-right: 40px !important;
}
header.navbar-header-fixed {
    margin-bottom: 0 !important;
}
.profile-block,
.badges-block,
.redeem-block {
    margin-top: 8px !important;
}

#profile-wrap > .container {
    padding-left: 40px !important;
    padding-right: 40px !important;
}