/* ═══════════════════════════════════════════════════════════════════════════
   BEYOND BARISTA ACADEMY - Premium Coffee-Themed Design System
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@500;600;700;800&display=swap');

:root {
    /* ───────────────────────────────────────────────────────────────────────
       Coffee-Based Premium Color Palette
       ─────────────────────────────────────────────────────────────────────── */

    /* Primary Colors - Coffee Tones */
    --color-primary: #6F4E37;
    --color-primary-rgb: 111, 78, 55;
    --color-primary-hover: #5a3d2a;
    --color-primary-light: #8b6f47;
    --color-primary-extra-light: #A0826D;

    /* Accent Colors - Warm Gold/Bronze */
    --color-accent: #C67C4E;
    --color-accent-rgb: 198, 124, 78;
    --color-accent-hover: #B36B3F;
    --color-accent-gold: #D4A574;
    --color-accent-bronze: #8B6F47;

    /* Neutral Colors */
    --color-bg: #F8F7F4;
    --color-surface: #FFFFFF;
    --color-surface-hover: #FAF8F6;
    --color-text-main: #2C1810;
    --color-text-muted: #6B6B6B;
    --color-border: #E8E6E1;
    --color-dark: #1F1F1F;

    /* Semantic Colors */
    --color-success: #52B788;
    --color-warning: #FFB703;
    --color-danger: #D62828;
    --color-secondary: #A0826D;

    /* Typography */
    --font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Shadows - Enhanced for Depth */
    --shadow-sm: 0 2px 4px rgba(44, 24, 16, 0.08);
    --shadow-md: 0 4px 12px rgba(44, 24, 16, 0.12);
    --shadow-lg: 0 8px 24px rgba(44, 24, 16, 0.16);
    --shadow-xl: 0 12px 32px rgba(44, 24, 16, 0.2);

    /* Border Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-pill: 9999px;

    /* Navbar */
    --navbar-height: 72px;

    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

[data-bs-theme="dark"] {
    --color-bg: #1A1410;
    --color-surface: #2C1810;
    --color-surface-hover: #3d2618;
    --color-text-main: #F8F7F4;
    --color-text-muted: #B8B8B8;
    --color-border: #4a3d30;
    --color-primary: #D4A574;
    --color-primary-hover: #E29578;
    --color-primary-light: #FAEDCD;
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
}

/* Base resets & typography */
body {
    font-family: var(--font-body);
    background-color: var(--color-bg);
    color: var(--color-text-main);
    line-height: 1.6;
    /* Final safeguard only — the actual overflow sources (fixed-width media,
       oversized display headings, unbreakable strings, fixed decorative
       elements) are fixed at source in the Responsive Foundation below.
       `clip` is preferred over `hidden`: `hidden` turns body into a scroll
       container, which breaks `position: sticky` on the navbar/headers.
       The `hidden` line is the fallback for browsers without `clip`. */
    overflow-x: hidden;
    overflow-x: clip;
    transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4, h5, h6, .font-heading {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-text-main);
    letter-spacing: -0.02em;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--color-accent);
}

/* Custom Buttons */
.btn-primary {
    background-color: #4C3103;
    border-color: #4C3103;
    color: #FFFFFF !important;
    font-weight: 600;
    padding: 0.625rem 1.35rem;
    border-radius: var(--radius-md);
    transition: all 0.25s ease;
    box-shadow: 0 2px 4px rgba(76, 49, 3, 0.15);
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--color-primary-hover) !important;
    border-color: var(--color-primary-hover) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(76, 49, 3, 0.25);
}

.btn-accent {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: #FFFFFF !important;
    font-weight: 600;
    padding: 0.625rem 1.35rem;
    border-radius: var(--radius-md);
    transition: all 0.25s ease;
}

.btn-accent:hover {
    background-color: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: #FFFFFF !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(226, 149, 120, 0.3);
}

.btn-outline-primary {
    color: #4C3103;
    border-color: #4C3103;
    font-weight: 600;
    border-radius: var(--radius-md);
}

.btn-outline-primary:hover {
    background-color: #4C3103;
    border-color: #4C3103;
    color: #FFFFFF;
}

/* Cards */
.card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: all 0.25s ease;
}

.card:hover {
    border-color: rgba(var(--color-primary-rgb), 0.2);
}

.card-hover-elevate:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* Course Card */
.course-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.course-card-img-wrapper {
    position: relative;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    background: linear-gradient(135deg, #322002 0%, #4C3103 50%, #674305 100%);
    overflow: hidden;
}

.course-card-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.course-card:hover .course-card-img {
    transform: scale(1.05);
}

.badge-floating {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
}

.badge-level {
    position: absolute;
    bottom: 12px;
    left: 12px;
    z-index: 2;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(4px);
    color: #FFFFFF;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-sm);
}

/* Navigation */
.navbar-custom {
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    min-height: var(--navbar-height);
    transition: all 0.3s ease;
}

.navbar-brand-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--color-text-main);
}

.navbar-brand-icon {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, #4C3103, #E29578);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 1.2rem;
}

/* Hero Section */
.hero-section {
    position: relative;
    background: linear-gradient(135deg, #1E1301 0%, #352102 50%, #4C3103 100%);
    color: #FFFFFF;
    padding: 5.5rem 0;
    overflow: hidden;
}

.hero-pattern {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(rgba(226, 149, 120, 0.15) 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: 0.6;
    pointer-events: none;
}

.hero-title {
    font-size: 3.25rem;
    font-weight: 800;
    line-height: 1.15;
    color: #FFFFFF;
    margin-bottom: 1.25rem;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.4rem 1rem;
    background: rgba(226, 149, 120, 0.2);
    border: 1px solid rgba(226, 149, 120, 0.4);
    border-radius: var(--radius-pill);
    color: #E29578;
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
}

/* Dashboard Sidebar & Layout */
.dashboard-wrapper {
    display: flex;
    min-height: calc(100vh - var(--navbar-height));
}

.dashboard-sidebar {
    width: 260px;
    background-color: var(--color-surface);
    border-right: 1px solid var(--color-border);
    padding: 1.5rem 1rem;
    flex-shrink: 0;
}

.dashboard-main {
    flex-grow: 1;
    /* min-width:0 lets this flex child actually shrink; without it a wide
       table forces the whole dashboard wider than the viewport. */
    min-width: 0;
    padding: 2rem;
    background-color: var(--color-bg);
    overflow-x: hidden;
    overflow-x: clip;
}

.sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    font-weight: 500;
    margin-bottom: 0.25rem;
    transition: all 0.2s ease;
}

.sidebar-nav-item:hover {
    background-color: var(--color-surface-hover);
    color: var(--color-primary);
}

.sidebar-nav-item.active {
    background-color: rgba(76, 49, 3, 0.1);
    color: #4C3103;
    font-weight: 600;
}

[data-bs-theme="dark"] .sidebar-nav-item.active {
    background-color: rgba(212, 163, 115, 0.15);
    color: #D4A373;
}

.sidebar-nav-item i {
    font-size: 1.15rem;
    width: 20px;
    text-align: center;
}

/* Stat KPI Cards */
.stat-card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.stat-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.stat-icon.primary {
    background-color: rgba(76, 49, 3, 0.1);
    color: #4C3103;
}

.stat-icon.accent {
    background-color: rgba(226, 149, 120, 0.15);
    color: var(--color-accent);
}

.stat-icon.success {
    background-color: rgba(22, 163, 74, 0.1);
    color: var(--color-success);
}

.stat-icon.warning {
    background-color: rgba(245, 158, 11, 0.1);
    color: var(--color-warning);
}

/* Classroom / Lesson View */
.classroom-container {
    display: flex;
    /* Uses the real navbar height token (was hardcoded 64px, an 8px mismatch). */
    height: calc(100vh - var(--navbar-height));
    overflow: hidden;
}

.classroom-player-area {
    flex-grow: 1;
    overflow-y: auto;
    padding: 2rem;
    background-color: var(--color-bg);
}

.classroom-sidebar {
    width: 360px;
    background-color: var(--color-surface);
    border-left: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    height: 100%;
}

.classroom-curriculum-list {
    overflow-y: auto;
    flex-grow: 1;
}

.lesson-item-link {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 0.9rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-main);
    transition: background-color 0.2s ease;
}

.lesson-item-link:hover {
    background-color: var(--color-surface-hover);
    color: var(--color-text-main);
}

.lesson-item-link.active {
    background-color: rgba(76, 49, 3, 0.08);
    border-left: 3px solid #4C3103;
    font-weight: 600;
}

.video-container-responsive {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background-color: #000;
    box-shadow: var(--shadow-lg);
}

.video-container-responsive iframe,
.video-container-responsive video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Certificate Styles */
.certificate-frame {
    background: #FFFDF9;
    border: 12px double #4C3103;
    border-radius: 12px;
    padding: 40px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    color: #1E293B;
    max-width: 900px;
    margin: 0 auto;
}

.certificate-seal {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: radial-gradient(circle, #E29578 0%, #4C3103 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 2.2rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    border: 3px solid #FFD700;
}

/* Footer — Deep Espresso & Amber Gold (matches .topbar-luxury for a cohesive
   premium look top-to-bottom, instead of the old mismatched slate-blue). */
.footer-custom {
    background: linear-gradient(180deg, #1C1006 0%, #130B04 100%);
    color: #C9B79C;
    padding: 4.5rem 0 2rem;
    border-top: none;
    position: relative;
}

/* Thin gold hairline across the very top edge for a refined, editorial finish. */
.footer-custom::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(212, 165, 116, 0.6), transparent);
}

.footer-custom a {
    color: #E8DCC8;
    text-decoration: none;
    transition: color 0.2s ease, padding-left 0.2s ease;
}

/* Beats Bootstrap's own !important .text-muted utility (a dark, near-black
   gray meant for LIGHT backgrounds) which was rendering almost invisibly
   against this dark footer — scoped here so the fix never touches .text-muted
   anywhere else on the (light-background) site. */
.footer-custom .text-muted {
    color: #C9B79C !important;
}

.footer-custom a:hover,
.footer-custom .text-muted:hover {
    color: #F3C78E !important;
    padding-left: 3px;
}

.footer-custom h5,
.footer-custom h6 {
    letter-spacing: 0.06em;
}

/* Was referenced in the footer markup but never defined anywhere — the
   "The Future Starts Today" tagline and section headings were silently
   falling back to the base muted color instead of gold. */
.text-accent-gold {
    color: var(--color-accent-gold, #D4A574) !important;
}

/* Circular bordered social icons instead of bare glyphs. */
.footer-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(212, 165, 116, 0.3);
    color: #E8DCC8;
    font-size: 1rem;
    transition: all 0.25s ease;
}

.footer-social-icon:hover {
    background: linear-gradient(135deg, #E5B869, #C67C4E);
    border-color: transparent;
    color: #1A0F07;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(212, 165, 116, 0.35);
}

.footer-bottom-bar {
    border-top: 1px solid rgba(212, 165, 116, 0.18) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE FOUNDATION
   ───────────────────────────────────────────────────────────────────────────
   Breakpoints follow Bootstrap 5.3 exactly (the framework already in use) so
   markup utilities (col-md-*, d-lg-none, sticky-lg-top…) and this stylesheet
   always agree. Do not invent new breakpoint values:

     <576px    Phones (320–575)      — base / mobile-first, no media query
     ≥576px    sm  Large phones
     ≥768px    md  Tablets
     ≥992px    lg  Small laptops     — desktop layouts engage here
     ≥1200px   xl  Desktop
     ≥1400px   xxl Large desktop

   Prefer fluid sizing (clamp/minmax/%) over breakpoint jumps. Breakpoints are
   for layout *structure* changes only.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Global box model ──────────────────────────────────────────────────────
   layouts/dashboard.php does not load premium-design.css (which holds the
   project's only *{box-sizing} reset), so the entire LMS relied on Bootstrap
   Reboot alone. Declared here because app.css is the one stylesheet BOTH
   layouts load. */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ── Long content can never force horizontal scroll ───────────────────────
   Long unbroken strings (URLs, emails, DB-driven titles, certificate codes)
   were the most likely root cause of the body-level overflow-x guard. */
body {
    overflow-wrap: break-word;
}

/* ── In-page anchor jumps land below the sticky navbar ────────────────────
   #mainNavigation is sticky-top on every public page, and home.php has real
   scroll-to-anchor links (#about-intro, #bba-experience, #contact) — without
   this, the target section's heading scrolls to y=0 and hides underneath the
   ~72-74px sticky bar. scroll-padding-top offsets ALL fragment navigation
   (link clicks and direct #hash URLs alike), not just one target element. */
html {
    scroll-padding-top: calc(var(--navbar-height) + 16px);
}

/* ── Media is fluid by default ────────────────────────────────────────────
   max-width only: height stays auto so intrinsic aspect ratio is preserved,
   and any explicit inline/utility height still wins where it's intentional
   (avatars, fixed thumbnails). */
img,
svg,
video,
canvas {
    max-width: 100%;
}

/* ── Fluid display headings ───────────────────────────────────────────────
   Bootstrap's .display-* are fixed rem values with no scaling, so interior
   page heroes rendered at full desktop size on phones. Each clamp() keeps
   the ORIGINAL Bootstrap size as its upper bound, so desktop is unchanged
   and only small screens scale down. Fixes every .display-* sitewide from
   one place instead of editing ~15 view files. */
.display-1 { font-size: clamp(2.75rem, 1.5rem + 5vw, 5rem); }
.display-2 { font-size: clamp(2.5rem, 1.4rem + 4.5vw, 4.5rem); }
.display-3 { font-size: clamp(2.25rem, 1.3rem + 4vw, 4rem); }
.display-4 { font-size: clamp(2rem, 1.2rem + 3.5vw, 3.5rem); }
.display-5 { font-size: clamp(1.75rem, 1.1rem + 3vw, 3rem); }
.display-6 { font-size: clamp(1.5rem, 1rem + 2.5vw, 2.5rem); }

/* ── Width utilities referenced across the app but never defined ──────────
   .max-w-500/700/800/900 are used in ~15 public + LMS views (home, about,
   contact, classroom, quiz, verify…) and were silently no-ops. */
.max-w-500 { max-width: 500px; }
.max-w-600 { max-width: 600px; }
.max-w-700 { max-width: 700px; }
.max-w-800 { max-width: 800px; }
.max-w-900 { max-width: 900px; }

/* ── Rich-text safety net ─────────────────────────────────────────────────
   Blog bodies render raw admin-authored HTML; an editor pasting a wide image
   or table must not be able to break the page layout. */
.blog-content img {
    max-width: 100%;
    height: auto;
}

.blog-content iframe,
.blog-content video {
    max-width: 100%;
}

.blog-content table {
    width: 100%;
    display: block;
    overflow-x: auto;
}

/* ── Sticky side panels ───────────────────────────────────────────────────
   Only stick once the column is genuinely a sidebar. Below lg these panels
   stack full-width in normal flow, where sticky just "catches" mid-scroll. */
.sticky-panel {
    position: static;
}

@media (min-width: 992px) {
    .sticky-panel {
        position: sticky;
        top: 90px;
    }
}

/* ── Touch ergonomics ─────────────────────────────────────────────────────
   Scoped to coarse pointers so desktop sizing is untouched. Explicit
   inline/utility sizes still win, so icon buttons keep their dimensions. */
@media (pointer: coarse) {
    .btn-sm,
    .dropdown-item,
    .page-link,
    .nav-pills .nav-link {
        min-height: 40px;
        display: flex;
        align-items: center;
    }

    .dropdown-item,
    .page-link {
        justify-content: flex-start;
    }
}

/* ── Global Mobile Hygiene & Pro Experience ─────────────────────────── */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
    -webkit-tap-highlight-color: transparent;
}

/* Prevent iOS Safari 100% zoom-in when focusing text inputs on phones */
@media (max-width: 767.98px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    select,
    textarea,
    .form-control,
    .form-select {
        font-size: 16px !important;
    }
}

/* ── Mobile Navigation Toggler Button ──────────────────────────────────── */
.bba-mobile-toggler {
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.bba-toggler-box {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(212, 165, 116, 0.12);
    border: 1.5px solid rgba(212, 165, 116, 0.4);
    color: #D4A574;
    font-size: 1.55rem;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.bba-mobile-toggler:active .bba-toggler-box {
    transform: scale(0.92);
    background: rgba(212, 165, 116, 0.28);
    border-color: #D4A574;
    color: #FFFFFF;
}

[data-bs-theme="dark"] .bba-toggler-box {
    background: rgba(212, 165, 116, 0.16);
    border-color: rgba(212, 165, 116, 0.5);
    color: #F3C78E;
}

/* ── Mobile Luxury Navigation Drawer (Public Site) ─────────────────────────
   #mainNavbar uses Bootstrap's offcanvas-navbar pattern: below lg it is a
   luxurious slide-in drawer with native backdrop, focus trap, and touch lock. */
@media (max-width: 991.98px) {
    #mainNavbar.offcanvas,
    #mainNavbar.bba-luxury-offcanvas {
        width: min(340px, 88vw);
        background: linear-gradient(185deg, #180F08 0%, #110904 60%, #0A0502 100%) !important;
        border-left: 1px solid rgba(212, 165, 116, 0.25);
        box-shadow: -15px 0 45px rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
    }

    #mainNavbar .offcanvas-header {
        padding: 1.15rem 1.25rem;
        border-bottom: 1px solid rgba(212, 165, 116, 0.18);
        background: rgba(26, 16, 8, 0.75);
    }

    .bba-drawer-logo-box {
        padding: 3px;
        border-radius: 10px;
        background: rgba(212, 165, 116, 0.14);
        border: 1px solid rgba(212, 165, 116, 0.35);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .bba-drawer-brand-title {
        font-family: var(--font-heading, 'Poppins', sans-serif);
        font-weight: 800;
        font-size: 1.08rem;
        color: #FFFFFF;
        display: block;
        line-height: 1.1;
        letter-spacing: -0.2px;
    }

    .bba-drawer-brand-subtitle {
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 1.8px;
        color: #D4A574;
        display: block;
        margin-top: 1px;
    }

    .btn-close-luxury {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(212, 165, 116, 0.3);
        color: #D4A574;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0.95rem;
        cursor: pointer;
        transition: all 0.22s ease;
    }

    .btn-close-luxury:active,
    .btn-close-luxury:hover {
        background: rgba(212, 165, 116, 0.25);
        color: #FFFFFF;
        transform: rotate(90deg);
        border-color: #D4A574;
    }

    #mainNavbar .offcanvas-body {
        padding: 1.15rem;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Logged-in user drawer profile card */
    .bba-drawer-user-card {
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(212, 165, 116, 0.22);
        border-radius: 14px;
        padding: 0.95rem 1rem;
    }

    .bba-drawer-avatar {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: linear-gradient(135deg, #D4A574 0%, #92400E 100%);
        color: #170E08;
        font-weight: 800;
        font-size: 1.1rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        border: 2px solid rgba(255, 255, 255, 0.25);
    }

    /* Menu links */
    #mainNavbar .nav-link {
        color: rgba(245, 235, 220, 0.88) !important;
        padding: 0.72rem 0.95rem !important;
        margin-bottom: 4px;
        border-radius: 10px;
        font-size: 0.98rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        min-height: 48px;
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        border-left: 3px solid transparent;
    }

    #mainNavbar .nav-link:hover,
    #mainNavbar .nav-link:focus {
        color: #F8DFC0 !important;
        background: rgba(212, 165, 116, 0.1);
        border-left-color: rgba(212, 165, 116, 0.4);
    }

    #mainNavbar .nav-link.active {
        color: #FFFFFF !important;
        background: rgba(212, 165, 116, 0.16);
        border-left-color: #D4AF37;
        font-weight: 700;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    }

    .nav-icon-mobile {
        color: #D4A574;
        font-size: 1.1rem;
        width: 22px;
        text-align: center;
    }

    #mainNavbar .navbar-nav {
        margin-bottom: 1rem;
    }

    /* Online Academy CTA button in mobile drawer */
    .btn-nav-online-academy {
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.75rem 1.25rem;
        border-radius: 12px;
        font-weight: 700;
        font-size: 0.94rem;
        letter-spacing: 0.02em;
    }

    /* Mobile drawer utilities section */
    .mobile-drawer-utilities {
        border-top: 1px solid rgba(212, 165, 116, 0.18);
    }

    .mobile-utility-card {
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(212, 165, 116, 0.16);
    }

    /* 3-way language segmented control */
    .mobile-lang-segmented .mobile-lang-label {
        font-size: 0.78rem;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.65);
    }

    .mobile-lang-btn {
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(212, 165, 116, 0.25);
        color: rgba(255, 255, 255, 0.85);
        font-size: 0.8rem;
        padding: 0.55rem 0.5rem;
        font-weight: 600;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
    }

    .mobile-lang-btn.active {
        background: linear-gradient(135deg, #D4A574 0%, #A06225 100%) !important;
        color: #150E06 !important;
        border-color: #D4A574 !important;
        font-weight: 800;
        box-shadow: 0 2px 10px rgba(212, 165, 116, 0.35);
    }

    /* 1-tap quick action contact links */
    .mobile-quick-link {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 0.75rem 0.95rem;
        border-radius: 11px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(212, 165, 116, 0.14);
        color: #E8DCC8;
        text-decoration: none;
        font-size: 0.88rem;
        min-height: 44px;
        transition: all 0.2s ease;
    }

    .mobile-quick-link:active,
    .mobile-quick-link:hover {
        background: rgba(212, 165, 116, 0.16);
        border-color: rgba(212, 165, 116, 0.35);
        color: #FFFFFF;
        transform: translateX(2px);
    }
}

/* ── LMS sidebar drawer ───────────────────────────────────────────────────
   .dashboard-sidebar carries .offcanvas-lg: a drawer below lg, the original
   static 260px sidebar at ≥lg. The !important below exist only to undo
   Bootstrap's own !important resets so the DESKTOP look is unchanged. */
@media (min-width: 992px) {
    .dashboard-sidebar.offcanvas-lg {
        background-color: var(--color-surface) !important;
        border-right: 1px solid var(--color-border) !important;
        visibility: visible !important;
    }

    .dashboard-sidebar .offcanvas-body {
        display: block;
        padding: 0;
        overflow-y: visible;
    }
}

@media (max-width: 991.98px) {
    .dashboard-sidebar.offcanvas-lg {
        width: min(280px, 84vw);
    }

    .dashboard-sidebar .offcanvas-body {
        padding: 1rem;
    }

    /* Sidebar is now an overlay, so content takes the full width. */
    .dashboard-main {
        padding: 1.25rem 1rem;
    }
}

/* ── Classroom (course player) ────────────────────────────────────────────
   Player stacks above the curriculum list below lg; curriculum keeps its own
   internal scroll so the learner is never trapped in a long list. */
@media (max-width: 991.98px) {
    .classroom-container {
        flex-direction: column;
        height: auto;
        overflow: visible;
    }

    .classroom-player-area {
        padding: 1.25rem 1rem;
        overflow-y: visible;
    }

    .classroom-sidebar {
        width: 100%;
        height: auto;
        max-height: 60vh;
        border-left: none;
        border-top: 1px solid var(--color-border);
    }

    /* Lesson tabs scroll horizontally instead of wrapping into 3 rows. */
    .classroom-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .classroom-tabs .nav-link {
        white-space: nowrap;
    }
}

/* ── Small-phone refinements (≤575px) ─────────────────────────────────────
   Reclaim horizontal space and stop nowrap badges from overflowing cards. */
@media (max-width: 575.98px) {
    .dashboard-main {
        padding: 1rem 0.75rem;
    }

    .badge {
        white-space: normal;
    }

    /* Toolbar controls (bulk actions, search) take the full row rather than
       being squeezed side by side. */
    .bulk-action-bar .form-select,
    .bulk-action-bar .btn {
        width: 100%;
    }
}