/* ==========================================================================
   FONT LOADING
   Local fonts (Avenir, Trajan Pro) are loaded dynamically by brand-loader.js
   from each entity's brand.json → brands/{entity}/fonts/ directory.
   ========================================================================== */

/* PT Serif - Long-form content (from Google Fonts) */
@import url('https://fonts.googleapis.com/css2?family=PT+Serif:wght@400;700&display=swap');

/* Import Brand Design System */
@import url('theme.css');


/* ==========================================================================
   CSS CUSTOM PROPERTIES (App-Specific)
   ==========================================================================
   Note: Core design tokens are in theme.css (--brand-* variables).
   These are application-specific layout overrides and aliases.
   ========================================================================== */

:root {
    /* App-specific aliases (map to brand variables) */
    --brand-link: var(--brand-text-link);
    --brand-light-gray: var(--brand-text-lightest);
    --brand-text-primary: var(--brand-text-base);
    --brand-text-secondary: var(--brand-text-secondary);
    --brand-border: var(--brand-form-control-border);

    /* Typography aliases */
    --font-primary: var(--brand-font-body);
    --font-display: var(--brand-font-display);
    --font-serif: var(--brand-font-heading);

    /* App-specific layout variables */
    --sidebar-width: 350px;
    --sidebar-min-width: 200px;
    --sidebar-max-width: 600px;
    --header-height: 110px;
    --notes-height: 200px;

    /* Admin/app UI uses the brand's small radius for consistency */
    --app-border-radius: var(--brand-radius-sm);
}


/* ==========================================================================
   BASE STYLES
   ========================================================================== */

body {
    font-family: var(--font-primary);
    background: var(--brand-light-gray);
    overflow-x: hidden;
    min-height: 100vh;
    color: var(--brand-text-primary);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Typography refinements */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-primary);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--brand-text-primary);
}

/* Long-form content uses PT Serif */
.text-content,
.interpretation-text,
.rag-text,
.section-text-content {
    font-family: var(--font-serif);
    line-height: 1.7;
}

/* Special display headings (optional - use class="display-heading") */
.display-heading {
    font-family: var(--font-display);
    letter-spacing: 0.05em;
}


/* ==========================================================================
   TEXT CONTRAST - Ensure proper text colors on backgrounds
   ========================================================================== */

/* White text on dark/colored backgrounds (solid colors only) */
.bg-primary:not([class*="opacity"]),
.bg-secondary:not([class*="opacity"]),
.bg-success:not([class*="opacity"]),
.bg-danger:not([class*="opacity"]),
.bg-info:not([class*="opacity"]),
.bg-dark:not([class*="opacity"]) {
    color: #FFFFFF;
}

/* Dark text on light/translucent backgrounds */
.bg-warning,
.bg-light,
[class*="bg-opacity"] {
    color: var(--brand-text-primary);
}

/* Badge specific overrides for consistent styling */
.badge.bg-primary,
.badge.bg-secondary,
.badge.bg-success,
.badge.bg-danger,
.badge.bg-info,
.badge.bg-dark {
    color: #FFFFFF !important;
}

.badge.bg-warning,
.badge.bg-light {
    color: var(--brand-text-primary) !important;
}

/* Soft badges (bg-opacity-*) must use dark text. The solid-color white-text rule above
   otherwise wins via !important and renders them white-on-a-10%-tint background — unreadable
   (e.g. "Competitive"/"Medium" topic pills). Matches the intent of the [class*="bg-opacity"]
   rule, which the badge override was inadvertently defeating. */
.badge[class*="bg-opacity"] {
    color: var(--brand-text-primary) !important;
}

/* Card headers on colored backgrounds */
.card-header.bg-primary,
.card-header.bg-secondary,
.card-header.bg-success,
.card-header.bg-danger,
.card-header.bg-info,
.card-header.bg-dark {
    color: #FFFFFF;
}

/* Card headers with translucent backgrounds need dark text */
.card-header.bg-success.bg-opacity-10,
.card-header.bg-primary.bg-opacity-10,
.card-header.bg-info.bg-opacity-10,
.card-header.bg-danger.bg-opacity-10,
.card-header.bg-warning.bg-opacity-10,
.card-header[class*="bg-opacity-10"],
.card-header[class*="bg-opacity-25"] {
    color: var(--brand-text-primary) !important;
}

/* ==========================================================================
   QUIZ QUESTION CARDS
   ========================================================================== */

.question-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    border: 1px solid #dee2e6;
}

.question-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--brand-shadow-md);
    border-color: var(--brand-primary);
}

.question-card .card-header {
    border-bottom: 1px solid #dee2e6;
}

.question-card .card-footer {
    border-top: 1px solid #f0f0f0;
}

/* Quiz Question Modal Fixes */
#questionDetailModal .modal-header {
    background: var(--brand-primary);
    color: #FFFFFF;
}

#questionDetailModal .modal-header .modal-title {
    color: #FFFFFF;
}

#questionDetailModal .modal-header .btn-close-white {
    filter: brightness(0) invert(1);
}

#questionDetailModal .modal-body {
    color: var(--brand-text-primary);
}

#questionDetailModal .modal-body p,
#questionDetailModal .modal-body span,
#questionDetailModal .modal-body div {
    color: var(--brand-text-primary);
}

#questionDetailModal .card-body {
    color: var(--brand-text-primary);
}

/* Ensure hint button has readable text */
#questionDetailModal .btn-dark {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #FFFFFF;
}

/* Answer text in modal */
#questionDetailModal .d-flex span {
    color: var(--brand-text-primary);
}

/* ==========================================================================
   HEADER
   ========================================================================== */

/* Legacy single-row header (still used by student.html) */
.app-header {
    height: var(--header-height);
    background: var(--brand-primary);
    color: white;
    display: flex;
    align-items: center;
    padding: 0 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1030;
    position: sticky;
    top: 0;
}

/* Two-level header layout */
.app-header.app-header-two-level {
    height: auto;
    flex-direction: column;
    padding: 0;
}

.app-header-two-level .header-main {
    display: flex;
    align-items: center;
    padding: 0 20px;
    min-height: 56px;
    width: 100%;
}

.app-header-two-level .header-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 20px;
    width: 100%;
    background: rgba(0, 0, 0, 0.15);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    min-height: 38px;
}

.app-header-two-level .toolbar-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.app-header-two-level .toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.app-header-two-level .toolbar-right .btn-sm {
    padding: 3px 10px;
    font-size: 0.8rem;
    line-height: 1.4;
}

.app-header-two-level .header-entity-name {
    white-space: nowrap;
}

.app-header h1 {
    font-size: 1.4rem;
    margin: 0;
    font-weight: 700;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    color: #FFFFFF;
}

.header-logo {
    height: var(--brand-logo-height, 50px);
    margin: 10px 24px 10px 0;
}

@media (max-width: 768px) {
    .header-logo {
        height: var(--brand-logo-height-mobile, 40px);
    }
}

/* Page title next to logo */
.app-header h1 .page-title {
    margin-left: 8px;
    padding-left: 16px;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
}

/* Header Navigation Links */
.header-nav {
    display: flex;
    gap: 4px;
    margin-left: 32px;
}

/* ── The Logout guarantee (S70, Todd's S69 close) ──────────────────────────────
   Todd: "the header can grow and shrink parts of the page that you need to see —
   the login and logout button disappear."

   Mechanism: a flex item's default `min-width` is `auto`, which means it refuses to
   shrink below its own min-content width. `.header-nav` is a nowrap flex row whose
   min-content width grows with every nav item, so inside `.header-main` there was
   simply nothing to give — the nav won, and the `ms-auto` entity name plus the user
   menu (which is where Logout lives) were pushed off the right edge entirely.

   The two rules below are the fix:
     min-width:0      lets the nav shrink below its content width at all
     flex-shrink:0    makes the entity name, the user menu and the logo the LAST things
                      to give rather than the first  (on the siblings, below)

   Result: a crowded header instead of an unusable one. This is deliberately independent
   of the grouping below — it holds even if every group menu is expanded, and it would
   still hold if the grouping were reverted entirely. Logout is unreachable-proof.

   ── S71: `overflow:hidden` REMOVED from this rule. It was a ship blocker. ──────────
   S70 listed a third rule here, `overflow:hidden`, described as "makes the excess clip
   INSIDE the nav instead of displacing siblings". That description is wrong about CSS:
   `overflow` does not affect the size of a flex item or the layout of its siblings at
   all — it only decides whether overflowing CONTENT is painted. `min-width:0` is what
   lets the nav shrink; `flex-shrink:0` is what protects the siblings. The clip was
   contributing nothing to the Logout guarantee.

   What it DID do was clip the group dropdown panels to a ~40px sliver — the nav's own
   height — so every menu in the main navigation opened and was invisible. The entire
   navigation was dead on every page, for every user.

   MEASURED S71 at 1920x1080, forcing the exact condition this rule exists for
   (40 synthetic nav items; nav scrollWidth 7024 into a 1305px box):

       overflow:hidden   -> Logout x=1834..1885, on screen    menu: NOT painted anywhere
       overflow:visible  -> Logout x=1834..1885, on screen    menu: painted at all 3 probes

   Byte-identical Logout geometry. The guarantee is untouched by this removal.

   Found by Todd clicking a menu during the S71 pre-publish walkthrough. All 56 gate
   suites passed over it — including qa-s70-header-logout-guarantee — because every one
   of them checked `display`/`visibility`/`opacity`/position, all of which report
   "visible" for a clipped element. None asked what was actually PAINTED at those
   pixels. qa-s71-header-dropdown-visible.py now does, via elementFromPoint. */
.header-nav {
    min-width: 0;
    flex-shrink: 1;
}

.header-entity-name,
.header-user-menu,
.app-header-two-level .header-main > h1 {
    flex-shrink: 0;
}

/* ── Header group menus (S70, corrected S71) ───────────────────────────────────
   S70 wrote here: "Group menus live inside the overflow:hidden nav above, so their
   dropdown panels would be clipped by it. Popper's `fixed` strategy (Bootstrap 5.2+,
   set via data-bs-strategy on the toggle) takes the panel out of that clipping
   context. Without it the menus open and are invisible."

   The prediction was exactly right — that is verbatim the bug Todd hit at S71. The
   mitigation was not. `strategy` is NOT a Bootstrap Dropdown option: Bootstrap 5.3's
   Dropdown Default has autoClose / boundary / display / offset / popperConfig /
   reference, and unknown data-bs-* keys are ignored. So `data-bs-strategy="fixed"`
   was read by nothing, the panel never escaped the clip, and the computed position
   stayed `absolute`. A protection was written down, believed, and never in force —
   [[D217]], "a control that is only PRESCRIBED is not a control", in CSS.

   Fixed at the source instead: the clip is gone (see above), so there is no clipping
   context to escape and no dependence on a Popper option we do not set. If a future
   change reintroduces a clip here, the escape must be real — `popperConfig:
   { strategy: 'fixed' }` passed in JS — and proven by the paint-level suite, not
   asserted in a comment. */
.header-nav .dropdown-menu {
    z-index: 1055;
}

/* The group toggle is a <button> styled to match the <a> links exactly, so a grouped
   header and a flat one are visually indistinguishable at the top level. */
.header-nav .nav-link-header {
    background: none;
    border: 0;
}

.header-nav-group {
    display: flex;
    align-items: center;
}

/* Bootstrap's caret adds width per menu. At 5 menus that is ~50px of pure decoration
   in the element we are trying to keep narrow, and the label already reads as a menu. */
.header-nav .dropdown-toggle::after {
    margin-left: 5px;
    opacity: 0.55;
}

.header-nav .dropdown-item.active {
    background-color: var(--brand-primary);
    color: #fff;
}

.nav-link-header {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    padding: 8px 12px;
    border-radius: var(--brand-radius-sm);
    font-size: 0.825rem;
    font-weight: 500;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.nav-link-header:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
}

.nav-link-header.active {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.2);
}

.nav-divider {
    width: 1px;
    height: 20px;
    background-color: rgba(255, 255, 255, 0.25);
    margin: 0 4px;
    align-self: center;
    flex-shrink: 0;
}

/* Hide nav label text on medium screens to save space, keep icons */
@media (max-width: 1400px) and (min-width: 992px) {
    .nav-link-header .nav-label {
        display: none;
    }
    .nav-link-header i {
        margin-right: 0 !important;
    }
    .header-nav {
        gap: 2px;
    }
}

/* ── S102 (W-22) — the navigation stays REACHABLE below 992px ──────────────────
   Todd, S101: "the page links in the header completely disappear, no longer accessible."

   The rule above stops at min-width:992px, and below it `.header-nav` carried Bootstrap's
   `d-none`, so the entire page navigation was display:none with no working replacement
   (see the note in shared-header.js — the fallback targeted an element that exists on ONE
   page in the tree). The markup no longer carries those Bootstrap classes; visibility is
   governed here, where the fallback lives beside the thing it falls back from.

   ⭐ The open panel is a WRAPPED ROW of the header, not an absolutely-positioned overlay.
   That is deliberate and it is the S71 lesson: `.header-nav` is a row of grouped DROPDOWNS,
   and an overlay with `max-height` + `overflow-y:auto` would clip every one of them the
   moment it opened — which is exactly how S70's `overflow:hidden` made the entire navigation
   open invisible while reporting itself visible. A wrapped row creates no clipping context
   and no scroll container, so the group menus open normally. The header is height:auto and
   sticky, so it simply grows. */
.header-nav-toggle {
    display: none;
    padding: 4px 8px;
    text-decoration: none;
}

@media (max-width: 991.98px) {
    .app-header-two-level .header-main {
        flex-wrap: wrap;
    }

    .header-nav {
        display: none;
    }

    .app-header.nav-open .header-nav {
        display: flex;
        flex-basis: 100%;
        flex-wrap: wrap;
        margin-left: 0;
        padding: 6px 0 8px;
        gap: 4px;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
    }

    .header-nav-toggle {
        display: inline-flex;
        align-items: center;
    }
}

/* Mobile menu button */
.header-mobile-menu {
    padding: 4px 8px;
    text-decoration: none;
}

.header-actions {
    margin-left: auto;
    display: flex;
    gap: 10px;
    align-items: center;
}


/* ==========================================================================
   BUTTONS (LMS-inspired)
   ========================================================================== */

.btn {
    font-family: var(--font-primary);
    font-weight: 500;
    letter-spacing: 0.01em;
    border-radius: var(--brand-radius-sm);
    transition: all 0.2s ease;
    padding: 10px 20px;
}

.btn-sm {
    padding: 6px 14px;
    font-size: 0.85rem;
    border-radius: var(--brand-radius-sm);
}

.btn-lg {
    padding: 14px 28px;
    font-size: 1rem;
    border-radius: var(--brand-radius-sm);
}

/* Primary Button - Navy (like LMS DASHBOARD button) */
.btn-primary {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--brand-primary-dark);
    border-color: var(--brand-primary-dark);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(22, 63, 107, 0.3);
}

/* Accent Button - Gold with Navy text (per brand guide) */
.btn-accent {
    background-color: var(--brand-accent);
    border-color: var(--brand-accent);
    color: #FFFFFF;
    /* Navy text on gold */
}

.btn-accent:hover {
    background-color: var(--brand-accent-dark);
    border-color: var(--brand-accent-dark);
    color: var(--brand-primary);
    transform: translateY(-1px);
}

.btn-outline-accent {
    color: var(--brand-accent);
    border-color: var(--brand-accent);
}

.btn-outline-accent:hover {
    background-color: var(--brand-accent);
    border-color: var(--brand-accent);
    color: #fff;
}

/* Outline Primary */
.btn-outline-primary {
    color: var(--brand-primary);
    border-color: var(--brand-primary);
}

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


/* ==========================================================================
   MAIN LAYOUT
   ========================================================================== */

.app-container {
    display: flex;
    height: calc(100vh - var(--header-height));
}


/* ==========================================================================
   SIDEBAR
   ========================================================================== */

.sidebar {
    width: var(--sidebar-width);
    min-width: var(--sidebar-min-width);
    max-width: var(--sidebar-max-width);
    background: white;
    border-right: 1px solid var(--brand-border);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    position: relative;
}

.sidebar-header {
    padding: 15px;
    border-bottom: 1px solid var(--brand-border);
    background: #f8f9fa;
}

.tree-container {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
}

/* Sidebar Resize Handle */
.sidebar-resize-handle {
    width: 6px;
    background: transparent;
    cursor: col-resize;
    flex-shrink: 0;
    position: relative;
    z-index: 10;
    transition: background var(--transition);
}

.sidebar-resize-handle:hover,
.sidebar-resize-handle.dragging {
    background: var(--brand-accent);
}

.sidebar-resize-handle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 40px;
    background: #ccc;
    border-radius: 2px;
    opacity: 0;
    transition: opacity var(--transition);
}

.sidebar-resize-handle:hover::before,
.sidebar-resize-handle.dragging::before {
    opacity: 1;
    background: white;
}

/* Prevent text selection while dragging */
body.resizing-sidebar {
    user-select: none;
    cursor: col-resize !important;
}

body.resizing-sidebar * {
    cursor: col-resize !important;
}


/* ==========================================================================
   TREE STYLES
   ========================================================================== */

.tree-node {
    margin: 2px 0;
}

.tree-item {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: var(--brand-radius);
    cursor: pointer;
    transition: all 0.15s;
    font-size: 0.9rem;
    font-weight: 500;
}

.tree-item:hover {
    background: #e9ecef;
}

.tree-item.selected {
    background: var(--brand-primary);
    color: white;
}

.tree-item.selected .tree-icon {
    color: white;
}

.tree-item.selected .tree-toggle {
    color: white;
}

.tree-toggle {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 4px;
    font-size: 0.85rem;
    color: var(--brand-text-secondary);
    border-radius: var(--brand-radius-xs);
    transition: all var(--transition);
    flex-shrink: 0;
}

.tree-toggle:hover {
    background: rgba(22, 63, 107, 0.1);
    color: var(--brand-primary);
}

.tree-icon {
    margin-right: 8px;
    font-size: 1rem;
}

.tree-icon.course {
    color: var(--brand-primary);
}

.tree-icon.chapter {
    color: var(--brand-primary);
}

.tree-icon.lesson {
    color: var(--brand-accent);
}

.tree-icon.image {
    color: #20c997;
}

.tree-icon.pdf {
    color: #dc3545;
}

.tree-icon.video {
    color: #e83e8c;
}

.tree-icon.youtube {
    color: #dc3545;
}

.tree-icon.podcast {
    color: var(--brand-accent);
}

/* Favorites section */
.favorites-section {
    background: linear-gradient(to right, rgba(237, 169, 44, 0.05), transparent);
}

.favorites-section .course-node {
    border-left: 3px solid var(--brand-accent);
}

.favorite-toggle {
    opacity: 0.3;
    transition: opacity 0.2s ease;
}

.tree-item:hover .favorite-toggle,
.favorite-toggle:hover {
    opacity: 1;
}

.favorite-toggle .bi-star-fill {
    opacity: 1;
}

/* Clickable stat cards */
.stat-card-clickable {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.stat-card-clickable:hover {
    transform: translateY(-2px);
    box-shadow: var(--brand-shadow-md);
}

/* Asset list cards */
.asset-list-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.asset-list-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--brand-shadow-md);
    border-color: var(--brand-primary);
}

.min-width-0 {
    min-width: 0;
}

.tree-children {
    margin-left: 20px;
    display: none;
}

.tree-children.expanded {
    display: block;
}

.tree-badge {
    margin-left: auto;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: var(--brand-radius-sm);
    font-weight: 600;
    color: #FFFFFF; /* Ensure white text on colored backgrounds */
}

.tree-badge.bg-warning,
.tree-badge.bg-light {
    color: var(--brand-text-primary); /* Dark text on light backgrounds */
}

/* Simplified tree meta info (cleaner than badges) */
.tree-meta {
    margin-left: auto;
    font-size: 0.75rem;
    color: #6c757d;
    font-weight: 400;
    white-space: nowrap;
}

.tree-item.selected .tree-meta {
    color: rgba(255, 255, 255, 0.7);
}

/* Tree indicator icons (homework, etc.) */
.tree-indicator {
    margin-left: 6px;
    font-size: 0.75rem;
    color: #6c757d;
    opacity: 0.7;
}

.tree-item.selected .tree-indicator {
    color: rgba(255, 255, 255, 0.7);
}

.tree-item:hover .tree-indicator {
    opacity: 1;
}

.badge-educational {
    background: #d4edda;
    color: #155724;
}

.badge-decorative {
    background: #f8d7da;
    color: #721c24;
}

.badge-pending {
    background: #fff3cd;
    color: #856404;
}


/* ==========================================================================
   MAIN CONTENT
   ========================================================================== */

.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.content-area {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}


/* ==========================================================================
   WELCOME SCREEN
   ========================================================================== */

.welcome-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    color: var(--brand-text-secondary);
}

.drop-zone {
    border: 3px dashed var(--brand-border);
    border-radius: var(--brand-radius-lg);
    padding: 60px;
    margin: 20px;
    transition: all 0.3s;
}

.drop-zone.dragover {
    border-color: var(--brand-primary);
    background: rgba(22, 63, 107, 0.05);
}


/* ==========================================================================
   SETUP CARD
   ========================================================================== */

.setup-card {
    background: white;
    border-radius: var(--brand-radius-sm);
    padding: 30px;
    max-width: 700px;
    margin: 20px auto;
    box-shadow: var(--brand-shadow-lg);
}

.setup-step {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.setup-step:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.step-number {
    width: 32px;
    height: 32px;
    background: var(--brand-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    flex-shrink: 0;
}

.step-content h5 {
    margin: 0 0 8px 0;
    font-weight: 600;
}

.step-content p {
    margin: 0;
    color: var(--brand-text-secondary);
}

.step-content code {
    background: #f8f9fa;
    padding: 2px 6px;
    border-radius: var(--brand-radius-xs);
    font-size: 0.85rem;
}


/* ==========================================================================
   DETAIL PANEL (LMS-inspired)
   ========================================================================== */

.detail-panel {
    background: white;
    border-radius: var(--brand-radius);
    border: 1px solid #e9ecef;
    box-shadow: var(--brand-shadow-sm);
    margin-bottom: 24px;
    overflow: hidden;
}

.detail-header {
    padding: 24px;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fff;
}

.detail-header h2 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--color-primary, #163f6b);
}

.detail-body {
    padding: 24px;
}


/* ==========================================================================
   PROPERTIES TABLE
   ========================================================================== */

.props-table {
    width: 100%;
    border-collapse: collapse;
}

.props-table th,
.props-table td {
    padding: 10px 15px;
    border-bottom: 1px solid #f0f0f0;
    text-align: left;
}

.props-table th {
    background: #f8f9fa;
    font-weight: 600;
    width: 200px;
    color: #495057;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.props-table td {
    font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
    font-size: 0.9rem;
}

.props-table td.editable {
    cursor: pointer;
}

.props-table td.editable:hover {
    background: #f8f9fa;
}

.prop-value-text {
    max-height: 150px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

.prop-value-url {
    color: var(--brand-link);
    word-break: break-all;
}

.prop-value-empty {
    color: #adb5bd;
    font-style: italic;
}


/* ==========================================================================
   ASSET PREVIEW
   ========================================================================== */

.asset-preview {
    background: #f8f9fa;
    border-radius: var(--brand-radius-sm);
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.asset-preview img {
    max-width: 100%;
    max-height: 400px;
    border-radius: var(--brand-radius-sm);
    box-shadow: var(--brand-shadow-md);
}

.asset-preview .no-preview {
    padding: 60px;
    color: var(--brand-text-secondary);
}


/* ==========================================================================
   PDF PREVIEW
   ========================================================================== */

.pdf-preview {
    background: #f8f9fa;
    border-radius: var(--brand-radius-sm);
    padding: 20px;
    margin-bottom: 20px;
}

.pdf-preview canvas {
    max-width: 100%;
    box-shadow: var(--brand-shadow-md);
    border-radius: var(--brand-radius-xs);
}

.pdf-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--brand-border);
}


/* ==========================================================================
   TRIAGE BADGES
   ========================================================================== */

.triage-result {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--brand-radius-lg);
    font-weight: 600;
}

.triage-educational {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    color: #155724;
}

.triage-decorative {
    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
    color: #721c24;
}

.triage-pending {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeeba 100%);
    color: #856404;
}


/* ==========================================================================
   FORMS & INPUTS (LMS-inspired)
   ========================================================================== */

.form-control {
    font-family: var(--font-primary);
    border-radius: var(--brand-radius-sm);
    border: 1px solid var(--brand-form-control-border);
    padding: 10px 14px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: #fff;
}

.form-control:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(22, 63, 107, 0.1);
    outline: none;
}

.form-control::placeholder {
    color: var(--brand-text-muted);
}

.form-label {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--brand-text-primary);
    margin-bottom: 6px;
}

.form-select {
    border-radius: var(--brand-radius-sm);
    border: 1px solid var(--brand-form-control-border);
    padding: 10px 14px;
}

.form-select:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(22, 63, 107, 0.1);
}

.input-group-text {
    border-radius: 8px 0 0 8px;
    border: 1px solid var(--brand-form-control-border);
    background: #f8f9fa;
}


/* ==========================================================================
   CARDS (LMS-inspired)
   ========================================================================== */

.card {
    border: 1px solid #e9ecef;
    border-radius: var(--brand-radius);
    box-shadow: var(--brand-shadow-sm);
    transition: box-shadow var(--transition), transform var(--transition);
    background: #fff;
}

.card:hover {
    box-shadow: var(--brand-shadow-md);
}

.card-header {
    background: #fff;
    border-bottom: 1px solid #e9ecef;
    font-weight: 600;
    padding: 16px 20px;
    border-radius: 16px 16px 0 0;
}

.card-body {
    padding: 20px;
}


/* ==========================================================================
   ANIMATIONS
   ========================================================================== */

@keyframes pulse {

    0%,
    100% {
        opacity: 0.4;
    }

    50% {
        opacity: 1;
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.spin {
    animation: spin 1s linear infinite;
}


/* ==========================================================================
   PREVIEW STATES
   ========================================================================== */

.preview-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: var(--brand-text-secondary);
    gap: 10px;
}

.preview-loading i {
    font-size: 2rem;
    animation: pulse 1.5s ease-in-out infinite;
}

.preview-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: #dc3545;
    gap: 5px;
}

.preview-error i {
    font-size: 1.5rem;
}

.preview-error span {
    font-size: 0.8rem;
}


/* ==========================================================================
   PDF VIEWER
   ========================================================================== */

.pdf-viewer {
    background: #f8f9fa;
    border-radius: var(--brand-radius-sm);
    padding: 15px;
    margin-top: 15px;
}

.pdf-viewer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

.pdf-viewer-header h6 {
    margin: 0;
    color: #495057;
    font-weight: 600;
}

.pdf-viewer-controls {
    display: flex;
    gap: 8px;
}

.pdf-pages-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pdf-page-card {
    background: white;
    border-radius: var(--brand-radius-sm);
    border: 1px solid #e9ecef;
    overflow: hidden;
}

.pdf-page-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    background: #f8f9fa;
    cursor: pointer;
    transition: background var(--transition);
}

.pdf-page-card-header:hover {
    background: #e9ecef;
}

.page-number {
    font-weight: 600;
    color: var(--brand-primary);
    min-width: 60px;
}

.page-summary-preview {
    flex: 1;
    color: var(--brand-text-secondary);
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pdf-page-card-header .expand-icon {
    transition: transform var(--transition);
}

.pdf-page-card-body {
    border-top: 1px solid #e9ecef;
}

.pdf-page-card-body.collapsed {
    display: none;
}

.pdf-page-content-wrapper {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 15px;
    padding: 15px;
}

@media (max-width: 768px) {
    .pdf-page-content-wrapper {
        grid-template-columns: 1fr;
    }
}

.pdf-page-image-container {
    background: #f1f3f4;
    border-radius: var(--brand-radius-sm);
    overflow: hidden;
    position: relative;
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pdf-page-image {
    width: 100%;
    height: auto;
    display: block;
    cursor: pointer;
    transition: transform var(--transition);
}

.pdf-page-image:hover {
    transform: scale(1.02);
}

.pdf-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--transition);
    pointer-events: none;
}

.pdf-image-overlay i {
    font-size: 2rem;
    color: white;
}

.pdf-page-image-container:hover .pdf-image-overlay {
    opacity: 1;
}

.pdf-page-image-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    color: var(--brand-text-secondary);
    gap: 10px;
    text-align: center;
}

.pdf-page-image-placeholder i {
    font-size: 2rem;
}

.pdf-page-image-placeholder span {
    font-size: 0.8rem;
}

.pdf-page-text-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pdf-page-field label {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--brand-text-secondary);
    margin-bottom: 5px;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pdf-field-value {
    background: #f8f9fa;
    padding: 10px;
    border-radius: var(--brand-radius-sm);
    font-size: 0.9rem;
    line-height: 1.5;
    cursor: text;
    transition: background var(--transition);
}

.pdf-field-value:hover {
    background: #e9ecef;
}

.pdf-key-points-list {
    margin: 0;
    padding-left: 20px;
}

.pdf-key-points-list li {
    margin-bottom: 5px;
    font-size: 0.9rem;
    cursor: text;
}

.pdf-key-points-list li:hover {
    color: var(--brand-primary);
}


/* ==========================================================================
   COURSE BROWSER
   ========================================================================== */

.course-browser-tree {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.course-filter {
    background: #f8f9fa;
    flex-shrink: 0;
}

.course-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

/* Country flag styling */
.country-flag {
    font-size: 0.9em;
    opacity: 0.8;
}

.course-browser-tree .course-node>.tree-item {
    padding-left: 8px;
}

.course-browser-tree .chapter-node>.tree-item {
    padding-left: 8px;
}

.course-browser-tree .lesson-node>.tree-item {
    padding-left: 8px;
}

/* Course item hover */
.course-item:hover {
    background: rgba(22, 63, 107, 0.05);
}

/* Tree loading and error states */
.tree-loading {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tree-loading i {
    animation: spin 1s linear infinite;
}

/* Section detail view */
.section-detail {
    padding: 20px;
}

.section-header h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--brand-primary);
}

.section-meta .badge {
    font-weight: 500;
}

.section-content .card-header {
    background: #f8f9fa;
    font-weight: 600;
}

.section-text-content {
    font-family: var(--font-serif);
    line-height: 1.7;
    color: var(--brand-text-primary);
}

.section-html-content {
    font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
    font-size: 0.85rem;
    line-height: 1.5;
}

/* Asset cards */
.asset-card {
    transition: box-shadow var(--transition), transform var(--transition);
}

.asset-card:hover {
    box-shadow: var(--brand-shadow-md);
    transform: translateY(-2px);
}

.asset-preview-img {
    border-radius: var(--brand-radius);
    background: #f5f5f5;
}

.asset-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.asset-ai-description {
    border-left: 3px solid var(--brand-accent);
    padding-left: 8px;
    font-style: italic;
}

/* Course and chapter overview cards */
.chapter-card,
.lesson-card {
    transition: box-shadow var(--transition), background var(--transition);
}

.chapter-card:hover,
.lesson-card:hover {
    box-shadow: var(--brand-shadow-sm);
    background: #f8f9fa;
}

/* Browser overview stats */
.browser-overview .card {
    border-radius: var(--brand-radius);
    border: none;
    box-shadow: var(--brand-shadow-md);
}

.browser-overview h2 {
    color: var(--brand-text-primary);
}

/* Course overview stats */
.course-overview .card {
    border-radius: var(--brand-radius);
    border: none;
    box-shadow: var(--brand-shadow-md);
}

/* AI analysis panel */
.section-ai-analysis .card {
    border-radius: var(--brand-radius);
}

.section-ai-analysis h6 {
    color: var(--brand-primary);
    font-weight: 600;
    margin-bottom: 8px;
}

.section-ai-analysis ul {
    margin-bottom: 0;
    padding-left: 20px;
}

/* Homework panel */
.section-homework .card {
    border-radius: var(--brand-radius);
}

/* Tree children for course browser */
.course-browser-tree .tree-children {
    display: none;
    padding-left: 16px;
}

.course-browser-tree .tree-children.expanded {
    display: block;
}

/* Selected state for items in browser */
.course-browser-tree .tree-item.selected {
    background: var(--brand-primary);
    border-left: 3px solid var(--brand-accent);
    color: #FFFFFF;
}

.course-browser-tree .tree-item.selected .tree-icon,
.course-browser-tree .tree-item.selected .tree-toggle,
.course-browser-tree .tree-item.selected .tree-badge,
.course-browser-tree .tree-item.selected .tree-label {
    color: #FFFFFF;
}

/* Course item selected */
.course-item.selected {
    background: var(--brand-primary);
    color: #FFFFFF;
}

.course-item.selected .tree-icon,
.course-item.selected .tree-toggle,
.course-item.selected .country-flag {
    color: #FFFFFF;
}


/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

.text-brand-primary {
    color: var(--brand-primary) !important;
}

.text-brand-accent {
    color: var(--brand-accent) !important;
}

.bg-brand-primary {
    background-color: var(--brand-primary) !important;
}

.bg-brand-accent {
    background-color: var(--brand-accent) !important;
}

/* Gold underscore decoration (matches main site feature cards) */
.gold-underline::after {
    content: '';
    display: block;
    width: 50px;
    height: 3px;
    background-color: var(--brand-accent);
    margin-top: 12px;
}


/* ==========================================================================
   NOTES PANEL - Dockable/Floating Rich Text Editor
   ========================================================================== */

.notes-panel {
    background: white;
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius);
    box-shadow: var(--brand-shadow-md);
    display: flex;
    flex-direction: column;
    z-index: 100;
    /* Only transition specific properties, not position/size (causes drag lag) */
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Dock positions */
.notes-panel.dock-bottom {
    position: relative;
    width: 100%;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
}

.notes-panel.dock-sidebar {
    position: fixed;
    right: 0;
    top: var(--header-height);
    width: 350px;
    height: calc(100vh - var(--header-height));
    border-radius: 0;
    border-right: none;
    border-top: none;
}

.notes-panel.dock-float {
    position: fixed;
    width: 400px;
    min-height: 250px;
    max-height: 500px;
    resize: both;
    overflow: hidden;
    box-shadow: var(--brand-shadow-lg);
}

.notes-panel.dock-float.dragging {
    opacity: 0.9;
    cursor: grabbing;
}

/* Header */
.notes-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-light) 100%);
    color: white;
    font-weight: 500;
    font-size: 0.85rem;
    user-select: none;
}

/* Entire header is draggable when floating */
.dock-float .notes-header {
    cursor: grab;
}

.dock-float .notes-header:active {
    cursor: grabbing;
}

.notes-drag-handle {
    padding: 0 4px;
    opacity: 0.7;
}

/* Hide drag handle when not floating (not needed) */
.dock-bottom .notes-drag-handle,
.dock-sidebar .notes-drag-handle {
    display: none;
}

.notes-title {
    display: flex;
    align-items: center;
    gap: 6px;
}

.notes-title i {
    color: var(--brand-accent);
}

.notes-context {
    margin-left: 8px;
}

.notes-context .badge {
    font-weight: 400;
    font-size: 0.75rem;
}

.notes-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.notes-actions .btn {
    padding: 2px 6px;
    border-color: rgba(255, 255, 255, 0.3);
    color: white;
}

.notes-actions .btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

.notes-actions .btn-group .btn {
    border-radius: 0;
}

.notes-actions .btn-group .btn:first-child {
    border-radius: var(--brand-radius) 0 0 var(--brand-radius);
}

.notes-actions .btn-group .btn:last-child {
    border-radius: 0 var(--brand-radius) var(--brand-radius) 0;
}

/* Body */
.notes-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.notes-editor-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 150px;
    overflow: hidden;
}

/* Quill Editor Styling */
#notesEditor {
    flex: 1;
    overflow-y: auto;
}

.notes-panel .ql-toolbar {
    border: none;
    border-bottom: 1px solid var(--brand-border);
    background: #f8f9fa;
    padding: 6px 8px;
}

.notes-panel .ql-container {
    border: none;
    font-family: var(--font-primary);
    font-size: 0.9rem;
}

.notes-panel .ql-editor {
    padding: 12px;
    line-height: 1.6;
    min-height: 100px;
}

.notes-panel .ql-editor.ql-blank::before {
    color: var(--brand-text-muted);
    font-style: normal;
}

/* Status bar */
.notes-status {
    padding: 4px 12px;
    background: #f8f9fa;
    border-top: 1px solid var(--brand-border);
    font-size: 0.75rem;
}

/* Sidebar dock adjustments */
.dock-sidebar .notes-body {
    height: calc(100% - 45px);
}

.dock-sidebar .notes-editor-container {
    min-height: 300px;
}

/* Notes Panel Resize Handles */
.notes-resize-handle {
    position: absolute;
    background: transparent;
    z-index: 10;
    display: none;
}

/* Top resize handle (for bottom dock - drag up/down) */
.notes-resize-top {
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    cursor: ns-resize;
}

.notes-resize-top::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 2px;
    transform: translateX(-50%);
    width: 40px;
    height: 3px;
    background: var(--brand-border);
    border-radius: 2px;
    opacity: 0;
    transition: opacity 0.2s;
}

.notes-resize-top:hover::before,
.notes-resize-top.dragging::before {
    opacity: 1;
    background: var(--brand-primary);
}

/* Left resize handle (for sidebar dock - drag left/right) */
.notes-resize-left {
    top: 0;
    left: 0;
    bottom: 0;
    width: 6px;
    cursor: ew-resize;
}

.notes-resize-left::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 2px;
    transform: translateY(-50%);
    width: 3px;
    height: 40px;
    background: var(--brand-border);
    border-radius: 2px;
    opacity: 0;
    transition: opacity 0.2s;
}

.notes-resize-left:hover::before,
.notes-resize-left.dragging::before {
    opacity: 1;
    background: var(--brand-primary);
}

/* Show appropriate handle based on dock position */
.dock-bottom .notes-resize-top {
    display: block;
}

.dock-sidebar .notes-resize-left {
    display: block;
}

/* Prevent text selection while resizing */
body.resizing-notes {
    user-select: none;
    cursor: ns-resize;
}

body.resizing-notes-horizontal {
    user-select: none;
    cursor: ew-resize;
}

/* Notes List Modal */
.notes-list-container {
    max-height: 400px;
    overflow-y: auto;
}

.note-list-item {
    padding: 12px;
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius);
    margin-bottom: 8px;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.note-list-item:hover {
    background-color: var(--brand-light-gray);
    border-color: var(--brand-primary);
}

.note-list-item.active {
    background-color: rgba(22, 63, 107, 0.1);
    border-color: var(--brand-primary);
}

.note-list-preview {
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--brand-text-primary);
    margin-bottom: 4px;
}

.note-list-meta {
    font-size: 0.75rem;
}


/* ==========================================================================
   BREADCRUMB NAVIGATION
   ========================================================================== */

.breadcrumb-nav {
    background: white;
    padding: 12px 20px;
    border-bottom: 1px solid var(--brand-border);
}

#breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 8px;
}

#breadcrumb .breadcrumb-item {
    display: inline-flex;
    align-items: center;
    font-size: 0.9rem;
    color: var(--brand-text-secondary);
}

#breadcrumb .breadcrumb-item+.breadcrumb-item::before {
    content: "›";
    padding-right: 8px;
    color: var(--brand-text-muted);
    font-weight: bold;
}

#breadcrumb .breadcrumb-item a {
    color: var(--brand-primary);
    text-decoration: none;
    transition: color var(--transition);
}

#breadcrumb .breadcrumb-item a:hover {
    color: var(--brand-accent);
    text-decoration: underline;
}

#breadcrumb .breadcrumb-item.active {
    color: var(--brand-text-primary);
    font-weight: 500;
}


/* ==========================================================================
   NOTES DASHBOARD
   ========================================================================== */

.notes-dashboard {
    padding: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

.notes-dashboard .dashboard-header h2 {
    color: var(--brand-text-primary);
    font-weight: 600;
}

/* Stat Cards */
.notes-dashboard .stat-card {
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    border: 1px solid var(--brand-border);
}

.notes-dashboard .stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--brand-shadow-md);
    border-color: var(--brand-primary);
}

.notes-dashboard .stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 12px;
}

.notes-dashboard .stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--brand-text-primary);
    line-height: 1;
}

.notes-dashboard .stat-label {
    font-size: 0.85rem;
    color: var(--brand-text-muted);
    margin-top: 4px;
}

/* Notes List Grid */
.notes-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}

.note-card {
    background: white;
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius);
    padding: 16px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.note-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--brand-shadow-md);
    border-color: var(--brand-primary);
}

.note-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.note-card-header .badge {
    font-size: 0.75rem;
}

.note-card-header .note-date {
    font-size: 0.75rem;
}

.note-card-body {
    min-height: 60px;
}

.note-card-body .note-preview {
    font-size: 0.9rem;
    color: var(--brand-text-primary);
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.note-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--brand-border);
}

.note-card-footer .note-actions {
    display: flex;
    gap: 4px;
}

.note-card-footer .note-actions .btn {
    padding: 4px 8px;
    font-size: 0.75rem;
}

/* Note Detail Modal */
.note-content-display {
    background: var(--brand-light-gray);
    border-radius: var(--brand-radius);
    padding: 20px;
    min-height: 100px;
    max-height: 400px;
    overflow-y: auto;
}

.note-content-display h1 {
    font-size: 1.75rem;
    margin-bottom: 16px;
}

.note-content-display h2 {
    font-size: 1.5rem;
    margin-bottom: 14px;
}

.note-content-display h3 {
    font-size: 1.25rem;
    margin-bottom: 12px;
}

.note-content-display p {
    margin-bottom: 12px;
    line-height: 1.6;
}

.note-content-display ul,
.note-content-display ol {
    margin-bottom: 12px;
    padding-left: 24px;
}

.note-content-display blockquote {
    border-left: 4px solid var(--brand-primary);
    padding-left: 16px;
    margin: 16px 0;
    font-style: italic;
    color: var(--brand-text-muted);
}

.note-content-display pre {
    background: #2d2d2d;
    color: #f8f8f2;
    padding: 16px;
    border-radius: var(--brand-radius);
    overflow-x: auto;
    margin-bottom: 12px;
}


/* ==========================================================================
   DISCUSSION THREAD / COMMENTS
   ========================================================================== */

.comment-form {
    background: var(--brand-light-gray);
    padding: 12px;
    border-radius: var(--brand-radius);
}

.comment-item {
    background: white;
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius);
    padding: 12px;
    margin-bottom: 12px;
}

.comment-item.comment-reply {
    background: var(--brand-light-gray);
    margin-left: 0;
    margin-bottom: 8px;
    border-color: transparent;
}

.comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.comment-author {
    font-weight: 500;
    color: var(--brand-text-primary);
    font-size: 0.9rem;
}

.comment-date {
    font-size: 0.75rem;
    color: var(--brand-text-muted);
}

.comment-body {
    color: var(--brand-text-primary);
    line-height: 1.5;
    font-size: 0.9rem;
}

.comment-actions {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--brand-border);
}

.comment-actions .btn-link {
    padding: 0 8px 0 0;
    font-size: 0.8rem;
    text-decoration: none;
}

.comment-actions .btn-link:hover {
    text-decoration: underline;
}

.comment-replies {
    margin-top: 12px;
    padding-left: 20px;
    border-left: 2px solid var(--brand-border);
}

.reply-form-container {
    margin-top: 8px;
}

/* Empty state for comments */
#commentsContainer .text-center {
    padding: 20px;
}

/* ==========================================================================
   AI INTERPRETATION DISPLAY
   ========================================================================== */

/* Interpretation Toolbar */
.interpretation-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    flex-wrap: wrap;
    gap: 8px;
}

.provenance-bar {
    display: flex;
    gap: 8px;
    font-size: 0.8rem;
    flex-wrap: wrap;
}

.provenance-bar .model-badge,
.provenance-bar .date-badge {
    padding: 3px 10px;
    border-radius: var(--brand-radius-xs);
    background: #e9ecef;
    display: inline-flex;
    align-items: center;
}

.provenance-bar .model-badge {
    background: rgba(22, 63, 107, 0.1);
    color: var(--brand-primary, #163f6b);
}

.action-buttons {
    display: flex;
    gap: 4px;
}

/* Interpretation Sections (Pretty View) */
.interp-section {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f0f0f0;
}

.interp-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.interp-section h6 {
    color: var(--brand-primary, #163f6b);
    font-size: 0.85rem;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.interp-section p {
    margin: 0;
    line-height: 1.6;
    color: #333;
}

.interp-section ul {
    margin: 0;
    padding-left: 20px;
    line-height: 1.8;
}

.interp-section li {
    margin-bottom: 4px;
}

.term-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Pretty Interpretation Container */
.pretty-interpretation {
    background: linear-gradient(to bottom, #f8f9fa, #ffffff);
    border-radius: var(--brand-radius-sm);
    padding: 16px;
    border: 1px solid #e9ecef;
}

/* Pretty Text Display (for plain text) */
.pretty-text-display {
    background: linear-gradient(to bottom, #f8f9fa, #ffffff);
    border-radius: var(--brand-radius-sm);
    padding: 20px;
    border: 1px solid #e9ecef;
}

.pretty-text-display .text-content {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #333;
}

.pretty-text-display .text-content p {
    margin-bottom: 12px;
}

.pretty-text-display .text-content p:last-child {
    margin-bottom: 0;
}

/* Markdown Rendered Content */
.markdown-rendered h3.md-h1 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--brand-primary, #163f6b);
    margin: 1.5rem 0 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--brand-primary-light, rgba(22, 63, 107, 0.2));
}

.markdown-rendered h4.md-h2 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--brand-primary, #163f6b);
    margin: 1.25rem 0 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid #e9ecef;
}

.markdown-rendered h5.md-h3 {
    font-size: 1rem;
    font-weight: 600;
    color: #495057;
    margin: 1rem 0 0.5rem;
}

.markdown-rendered h3.md-h1:first-child,
.markdown-rendered h4.md-h2:first-child,
.markdown-rendered h5.md-h3:first-child {
    margin-top: 0;
}

.markdown-rendered ul.md-list,
.markdown-rendered ol.md-list {
    margin: 0.5rem 0 1rem;
    padding-left: 0;
    list-style: none;
}

.markdown-rendered ul.md-list li {
    position: relative;
    padding: 0.5rem 0.75rem 0.5rem 2rem;
    margin-bottom: 0.25rem;
    background: rgba(22, 63, 107, 0.03);
    border-radius: var(--brand-radius-xs);
    border-left: 3px solid var(--brand-primary, #163f6b);
}

.markdown-rendered ul.md-list li::before {
    content: "•";
    position: absolute;
    left: 0.75rem;
    color: var(--brand-primary, #163f6b);
    font-weight: bold;
}

.markdown-rendered ol.md-list {
    counter-reset: md-counter;
}

.markdown-rendered ol.md-list li {
    position: relative;
    padding: 0.5rem 0.75rem 0.5rem 2.5rem;
    margin-bottom: 0.25rem;
    background: rgba(22, 63, 107, 0.03);
    border-radius: var(--brand-radius-xs);
    counter-increment: md-counter;
}

.markdown-rendered ol.md-list li::before {
    content: counter(md-counter) ".";
    position: absolute;
    left: 0.75rem;
    color: var(--brand-primary, #163f6b);
    font-weight: 600;
}

.markdown-rendered strong {
    font-weight: 700;
    color: #212529;
}

.markdown-rendered em {
    font-style: italic;
    color: #495057;
}

.markdown-rendered p {
    margin-bottom: 0.75rem;
    line-height: 1.7;
}

.markdown-rendered p:last-child {
    margin-bottom: 0;
}

/* Description text in pretty view */
.description-text {
    background: #fff;
    padding: 12px 16px;
    border-radius: var(--brand-radius-sm);
    border-left: 4px solid var(--brand-primary, #163f6b);
    font-size: 0.95rem;
    line-height: 1.7;
}

.description-text p {
    margin-bottom: 8px;
}

.description-text p:last-child {
    margin-bottom: 0;
}

/* Fact list styling */
.fact-list {
    list-style: none;
    padding-left: 0 !important;
    margin: 0;
}

.fact-list li {
    padding: 6px 12px;
    background: #fff;
    border-radius: var(--brand-radius-xs);
    margin-bottom: 6px;
    border: 1px solid #e9ecef;
    display: flex;
    align-items: flex-start;
}

.fact-list li i {
    margin-top: 2px;
    flex-shrink: 0;
}

/* Question list styling */
.question-list {
    list-style: none;
    padding-left: 0 !important;
    margin: 0;
}

.question-list li {
    padding: 8px 12px;
    background: rgba(22, 63, 107, 0.05);
    border-radius: var(--brand-radius-xs);
    margin-bottom: 6px;
    border-left: 3px solid var(--brand-primary, #163f6b);
    display: flex;
    align-items: flex-start;
}

.question-list li i {
    margin-top: 2px;
    flex-shrink: 0;
}

/* Visual structure styling */
.visual-structure {
    background: #fff;
    padding: 12px 16px;
    border-radius: var(--brand-radius-sm);
    border: 1px dashed #dee2e6;
    font-size: 0.9rem;
}

/* Other properties (definition list) */
.other-props {
    margin: 0;
    background: #fff;
    border-radius: var(--brand-radius-sm);
    padding: 12px;
    border: 1px solid #e9ecef;
}

.other-props dt {
    font-weight: 600;
    color: var(--brand-primary, #163f6b);
    font-size: 0.85rem;
    margin-bottom: 2px;
}

.other-props dd {
    margin-left: 0;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
    color: #555;
}

.other-props dd:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* JSON Display */
.json-display {
    background: #1e1e1e;
    border-radius: var(--brand-radius-sm);
    padding: 16px;
    margin: 0;
    overflow-x: auto;
}

.json-display code {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #d4d4d4;
}

/* JSON Syntax Highlighting */
.json-key { color: #9cdcfe; }
.json-string { color: #ce9178; }
.json-number { color: #b5cea8; }
.json-boolean { color: #569cd6; }
.json-null { color: #569cd6; }

/* Raw Display */
.raw-display {
    background: #f8f8f8;
    border: 1px solid #e0e0e0;
    border-radius: var(--brand-radius-sm);
    padding: 16px;
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #333;
}

/* Format toggle button active state */
.btn-group .btn[data-format].active {
    background-color: var(--brand-primary, #163f6b);
    border-color: var(--brand-primary, #163f6b);
    color: white;
}

/* ==========================================================================
   META PROPERTIES SECTION (Asset Detail)
   ========================================================================== */

.meta-properties-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

.meta-property-group {
    background: #f8f9fa;
    border-radius: var(--brand-radius-sm);
    padding: 16px;
    border: 1px solid #e9ecef;
}

.meta-property-group h6 {
    color: var(--brand-primary, #163f6b);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--brand-primary-light, rgba(22, 63, 107, 0.2));
}

.meta-property-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 8px 0;
    border-bottom: 1px solid #e9ecef;
}

.meta-property-row:last-child {
    border-bottom: none;
}

.meta-property-row label {
    font-size: 0.8rem;
    color: #6c757d;
    font-weight: 500;
    min-width: 120px;
    margin: 0;
}

.meta-property-value {
    font-size: 0.875rem;
    color: #333;
    text-align: right;
    flex: 1;
    word-break: break-word;
}

.meta-property-value.badge {
    text-align: center;
}

/* Confidence Display */
.confidence-display {
    display: flex;
    align-items: center;
    gap: 8px;
}

.confidence-bar {
    width: 80px;
    height: 8px;
    background: #e9ecef;
    border-radius: var(--brand-radius-xs);
    overflow: hidden;
}

.confidence-fill {
    height: 100%;
    border-radius: var(--brand-radius-xs);
    transition: width 0.3s ease;
}

.confidence-fill.high {
    background: linear-gradient(90deg, #58c76b, #2e7d32);
}

.confidence-fill.medium {
    background: linear-gradient(90deg, #ffc107, #ff9800);
}

.confidence-fill.low {
    background: linear-gradient(90deg, #f0506b, #c62828);
}

.confidence-value {
    font-size: 0.8rem;
    font-weight: 600;
    min-width: 40px;
}

/* Classification Badge Colors */
.badge.classification-educational {
    background-color: #58c76b !important;
    color: white;
}

.badge.classification-decorative {
    background-color: #6c757d !important;
    color: white;
}

.badge.classification-commerce {
    background-color: #ffc107 !important;
    color: #333;
}

.badge.classification-redundant {
    background-color: #f0506b !important;
    color: white;
}

.badge.classification-default {
    background-color: #0dcaf0 !important;
    color: #333;
}

/* Placeholder for future properties */
.placeholder-property {
    color: #adb5bd;
    font-style: italic;
    font-size: 0.8rem;
}

/* Edit Properties Button */
.meta-properties-footer {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #dee2e6;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* ==========================================================================
   LMS vs RAG ANALYSIS BADGES
   ========================================================================== */

/* Source type badges - used across pages to distinguish analysis sources */
.badge-lms {
    background-color: #3498db;
    color: #fff;
    font-size: 0.65rem;
    padding: 3px 8px;
    border-radius: var(--brand-radius-pill);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-rag {
    background-color: #9b59b6;
    color: #fff;
    font-size: 0.65rem;
    padding: 3px 8px;
    border-radius: var(--brand-radius-pill);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-rag-heuristic {
    background-color: #95a5a6;
    color: #fff;
    font-size: 0.65rem;
    padding: 3px 8px;
    border-radius: var(--brand-radius-pill);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-rag-ai {
    background-color: #9b59b6;
    color: #fff;
    font-size: 0.65rem;
    padding: 3px 8px;
    border-radius: var(--brand-radius-pill);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-human {
    background-color: #27ae60;
    color: #fff;
    font-size: 0.65rem;
    padding: 3px 8px;
    border-radius: var(--brand-radius-pill);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Analysis section styling */
.analysis-section {
    background: #fff;
    border-radius: var(--brand-radius);
    padding: 20px;
    border-left: 4px solid transparent;
    margin-bottom: 16px;
}

.analysis-section.source-lms {
    border-left-color: #3498db;
}

.analysis-section.source-rag {
    border-left-color: #9b59b6;
}

.analysis-section.source-human {
    border-left-color: #27ae60;
}


/* ==========================================================================
   TAMARIND LMS-INSPIRED STYLES
   Matches the look and feel of the student-facing LMS
   ========================================================================== */

/* --------------------------------------------------------------------------
   ENHANCED CARD STYLES (LMS-style)
   -------------------------------------------------------------------------- */

.card-lms {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: var(--brand-radius);
    box-shadow: var(--brand-shadow-sm);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    overflow: hidden;
}

.card-lms:hover {
    box-shadow: var(--brand-shadow-md);
}

.card-lms .card-header {
    background: #fff;
    border-bottom: 1px solid #e9ecef;
    padding: 16px 20px;
    font-weight: 600;
}

.card-lms .card-body {
    padding: 20px;
}

/* --------------------------------------------------------------------------
   CHAPTER/SECTION HEADER BARS (Navy with white text - like LMS)
   -------------------------------------------------------------------------- */

.chapter-header-bar {
    background: var(--color-primary, #163f6b);
    color: #fff;
    padding: 14px 20px;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 8px 8px 0 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.chapter-header-bar i {
    opacity: 0.8;
}

/* Lesson list item (like LMS course outline) */
.lesson-list-item {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.15s ease;
    gap: 12px;
}

.lesson-list-item:hover {
    background: #f8f9fa;
}

.lesson-list-item:last-child {
    border-bottom: none;
}

.lesson-list-item .lesson-number {
    color: var(--color-gray, #929497);
    font-size: 0.85rem;
    min-width: 24px;
}

.lesson-list-item .lesson-title {
    flex: 1;
    font-weight: 500;
    color: var(--color-base, #404041);
}

.lesson-list-item .lesson-duration {
    color: var(--color-gray, #929497);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 4px;
}

.lesson-list-item .lesson-status {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}

.lesson-list-item .lesson-status.completed {
    background: var(--color-success, #58c76b);
    color: #fff;
}

.lesson-list-item .lesson-status.in-progress {
    background: var(--color-info, #4cc0d2);
    color: #fff;
}

.lesson-list-item .lesson-status.not-started {
    background: #e9ecef;
    color: var(--color-gray, #929497);
}

/* --------------------------------------------------------------------------
   COURSE BANNER (Navy overlay like LMS)
   -------------------------------------------------------------------------- */

.course-banner {
    background: linear-gradient(135deg, var(--color-primary, #163f6b) 0%, var(--color-primary-dark, #0d2d4d) 100%);
    color: #fff;
    padding: 32px;
    border-radius: var(--brand-radius);
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}

.course-banner::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 40%;
    height: 100%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="80" cy="20" r="40" fill="rgba(255,255,255,0.05)"/><circle cx="90" cy="80" r="30" fill="rgba(255,255,255,0.03)"/></svg>');
    background-size: cover;
}

.course-banner h1,
.course-banner h2 {
    color: #fff;
    margin: 0 0 8px 0;
    position: relative;
    z-index: 1;
}

.course-banner p {
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    position: relative;
    z-index: 1;
}

/* --------------------------------------------------------------------------
   CALLOUT BOXES (SOLO ACTIVITY, THINK ABOUT, DATE NIGHT, etc.)
   -------------------------------------------------------------------------- */

.callout-box {
    display: flex;
    gap: 20px;
    padding: 24px;
    border-radius: var(--brand-radius-sm);
    margin: 24px 0;
    align-items: flex-start;
}

.callout-box .callout-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.callout-box .callout-content h4 {
    margin: 0 0 12px 0;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.callout-box .callout-content p {
    margin: 0;
    line-height: 1.7;
}

/* Solo Activity - Teal */
.callout-box.solo-activity {
    background: linear-gradient(135deg, #e8f4f8 0%, #d5eef5 100%);
}

.callout-box.solo-activity .callout-icon {
    background: #4cc0d2;
    color: #fff;
}

.callout-box.solo-activity .callout-content h4 {
    color: #2a8a9a;
}

/* Think About - Teal/Green */
.callout-box.think-about {
    background: linear-gradient(135deg, #e5f5f0 0%, #d0ebe5 100%);
}

.callout-box.think-about .callout-icon {
    background: #3aafa9;
    color: #fff;
}

.callout-box.think-about .callout-content h4 {
    color: #2a8a85;
}

/* Date Night - Pink/Heart */
.callout-box.date-night {
    background: linear-gradient(135deg, #fce4ec 0%, #f8bbd9 100%);
}

.callout-box.date-night .callout-icon {
    background: #e91e63;
    color: #fff;
}

.callout-box.date-night .callout-content h4 {
    color: #c2185b;
}

/* Deep Dive - Blue */
.callout-box.deep-dive {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
}

.callout-box.deep-dive .callout-icon {
    background: #1976d2;
    color: #fff;
}

.callout-box.deep-dive .callout-content h4 {
    color: #1565c0;
}

/* Takeaway - Gold/Orange */
.callout-box.takeaway {
    background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
}

.callout-box.takeaway .callout-icon {
    background: var(--color-accent, #EDA92C);
    color: #fff;
}

.callout-box.takeaway .callout-content h4 {
    color: #f57c00;
}

/* --------------------------------------------------------------------------
   ACCORDION SECTIONS (Expandable content like LMS)
   -------------------------------------------------------------------------- */

.accordion-lms {
    border: 1px solid #e9ecef;
    border-radius: var(--brand-radius-sm);
    overflow: hidden;
    margin-bottom: 8px;
}

.accordion-lms-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: #fff;
    cursor: pointer;
    transition: background 0.15s ease;
    font-weight: 600;
    color: var(--color-base, #404041);
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

.accordion-lms-header:hover {
    background: #f8f9fa;
}

.accordion-lms-header .accordion-icon {
    transition: transform 0.2s ease;
}

.accordion-lms-header.expanded .accordion-icon {
    transform: rotate(180deg);
}

.accordion-lms-body {
    padding: 0 20px 20px;
    display: none;
}

.accordion-lms-body.show {
    display: block;
}

/* --------------------------------------------------------------------------
   DASHBOARD STAT CARDS (Like LMS dashboard)
   -------------------------------------------------------------------------- */

.stat-card-lms {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: var(--brand-radius);
    padding: 24px;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card-lms:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.stat-card-lms .stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--brand-card-bg-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 1.5rem;
    color: var(--color-primary, #163f6b);
}

.stat-card-lms .stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-base, #404041);
    line-height: 1;
    margin-bottom: 4px;
}

.stat-card-lms .stat-label {
    font-size: 0.85rem;
    color: var(--color-gray, #929497);
}

/* Quick action tiles (like LMS dashboard grid) */
.quick-action-tile {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: var(--brand-radius);
    padding: 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.quick-action-tile:hover {
    background: #f8f9fa;
    border-color: var(--color-primary, #163f6b);
    transform: translateY(-2px);
}

.quick-action-tile .tile-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--brand-radius-sm);
    background: var(--brand-card-bg-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    font-size: 1.25rem;
    color: var(--color-primary, #163f6b);
}

.quick-action-tile .tile-label {
    font-weight: 500;
    color: var(--color-base, #404041);
    font-size: 0.9rem;
}

/* --------------------------------------------------------------------------
   PROGRESS INDICATORS (Like LMS donut charts)
   -------------------------------------------------------------------------- */

.progress-ring {
    position: relative;
    width: 120px;
    height: 120px;
}

.progress-ring svg {
    transform: rotate(-90deg);
}

.progress-ring .progress-ring-bg {
    fill: none;
    stroke: #e9ecef;
    stroke-width: 12;
}

.progress-ring .progress-ring-fill {
    fill: none;
    stroke-width: 12;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.5s ease;
}

.progress-ring .progress-ring-fill.completed {
    stroke: var(--brand-orange-accent);
}

.progress-ring .progress-ring-fill.in-progress {
    stroke: var(--color-primary, #163f6b);
}

.progress-ring .progress-ring-fill.not-started {
    stroke: #e9ecef;
}

.progress-ring-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.progress-ring-label .value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-base, #404041);
    display: block;
}

.progress-ring-label .label {
    font-size: 0.75rem;
    color: var(--color-gray, #929497);
}

/* --------------------------------------------------------------------------
   CONTENT TYPOGRAPHY (Match LMS lesson pages)
   -------------------------------------------------------------------------- */

.lesson-content-lms {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.8;
    color: var(--color-base, #404041);
}

.lesson-content-lms h1,
.lesson-content-lms h2 {
    font-family: var(--font-heading, 'PT Serif', Georgia, serif);
    color: var(--color-primary, #163f6b);
    margin: 2rem 0 1rem;
    line-height: 1.3;
}

.lesson-content-lms h1 {
    font-size: 2rem;
}

.lesson-content-lms h2 {
    font-size: 1.5rem;
}

.lesson-content-lms h3 {
    font-size: 1.25rem;
    color: var(--color-base, #404041);
    margin: 1.5rem 0 0.75rem;
}

.lesson-content-lms p {
    margin-bottom: 1.25rem;
}

.lesson-content-lms ul,
.lesson-content-lms ol {
    margin-bottom: 1.25rem;
    padding-left: 1.5rem;
}

.lesson-content-lms li {
    margin-bottom: 0.5rem;
}

.lesson-content-lms blockquote {
    border-left: 4px solid var(--color-primary, #163f6b);
    padding: 1rem 1.5rem;
    margin: 1.5rem 0;
    background: #f8f9fa;
    border-radius: 0 8px 8px 0;
    font-style: italic;
}

.lesson-content-lms a {
    color: var(--color-link, #4679cc);
    text-decoration: underline;
}

.lesson-content-lms a:hover {
    color: var(--color-primary, #163f6b);
}

/* --------------------------------------------------------------------------
   PREV/NEXT NAVIGATION (Like LMS lesson navigation)
   -------------------------------------------------------------------------- */

.lesson-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    margin: 24px 0;
    border-top: 1px solid #e9ecef;
    border-bottom: 1px solid #e9ecef;
}

.lesson-nav .nav-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: 1px solid #e9ecef;
    border-radius: var(--brand-radius-sm);
    background: #fff;
    color: var(--color-base, #404041);
    font-weight: 500;
    text-decoration: none;
    transition: all 0.15s ease;
}

.lesson-nav .nav-btn:hover {
    background: #f8f9fa;
    border-color: var(--color-primary, #163f6b);
    color: var(--color-primary, #163f6b);
}

.lesson-nav .nav-btn.disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   SIDEBAR MENU (Like LMS Learning Tools sidebar)
   -------------------------------------------------------------------------- */

.sidebar-menu-lms {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: var(--brand-radius);
    overflow: hidden;
}

.sidebar-menu-section {
    padding: 16px 20px 8px;
}

.sidebar-menu-section h5 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-primary, #163f6b);
    margin: 0 0 12px 0;
}

.sidebar-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    color: var(--color-base, #404041);
    text-decoration: none;
    transition: background 0.15s ease;
}

.sidebar-menu-item:hover {
    background: #f8f9fa;
}

.sidebar-menu-item.active {
    background: rgba(22, 63, 107, 0.08);
    color: var(--color-primary, #163f6b);
}

.sidebar-menu-item i {
    width: 20px;
    text-align: center;
    color: var(--color-gray, #929497);
}

.sidebar-menu-item.active i {
    color: var(--color-primary, #163f6b);
}

.sidebar-menu-divider {
    height: 1px;
    background: #e9ecef;
    margin: 8px 0;
}

/* --------------------------------------------------------------------------
   RESOURCE CARDS (Like LMS Resources section)
   -------------------------------------------------------------------------- */

.resource-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: var(--brand-radius-sm);
    transition: all 0.15s ease;
    cursor: pointer;
}

.resource-card:hover {
    border-color: var(--color-primary, #163f6b);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.resource-card .resource-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--brand-radius-sm);
    background: var(--brand-card-bg-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.resource-card .resource-icon.pdf {
    color: #dc3545;
}

.resource-card .resource-icon.video {
    color: #e83e8c;
}

.resource-card .resource-icon.glossary {
    color: var(--color-primary, #163f6b);
}

.resource-card .resource-info h6 {
    margin: 0 0 4px 0;
    font-weight: 600;
    color: var(--color-base, #404041);
}

.resource-card .resource-info span {
    font-size: 0.85rem;
    color: var(--color-gray, #929497);
}

/* --------------------------------------------------------------------------
   BADGE STYLES (Enhanced)
   -------------------------------------------------------------------------- */

.badge-lms {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: var(--brand-radius-lg);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-lms.finished {
    background: var(--brand-orange-accent);
    color: #fff;
}

.badge-lms.in-progress {
    background: var(--color-primary, #163f6b);
    color: #fff;
}

.badge-lms.not-started {
    background: #e9ecef;
    color: var(--color-gray, #929497);
}

/* --------------------------------------------------------------------------
   COURSE BROWSER LANDING PAGE
   -------------------------------------------------------------------------- */

.browser-overview {
    padding: 0;
}

/* Welcome Banner (like LMS admin dashboard) */
.welcome-banner {
    background: linear-gradient(135deg, var(--color-primary, #163f6b) 0%, #1e4a7d 100%);
    border-radius: var(--brand-radius);
    padding: 32px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.welcome-banner::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
}

.welcome-banner::after {
    content: '';
    position: absolute;
    bottom: -30%;
    right: 10%;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 50%;
}

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

.welcome-content h2 {
    color: #fff;
    margin: 0 0 8px 0;
    font-size: 1.75rem;
    font-weight: 600;
}

.welcome-content p {
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    font-size: 1rem;
}

.welcome-illustration {
    position: relative;
    z-index: 1;
}

.welcome-illustration i {
    font-size: 4rem;
    opacity: 0.3;
}

/* Asset Type Grid */
.asset-type-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

@media (max-width: 768px) {
    .asset-type-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.asset-type-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: var(--brand-radius-sm);
    background: #f8f9fa;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.asset-type-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--brand-shadow-md);
}

.asset-type-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--brand-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.asset-type-info {
    display: flex;
    flex-direction: column;
}

.asset-type-count {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-base, #404041);
    line-height: 1.2;
}

.asset-type-label {
    font-size: 0.8rem;
    color: var(--color-gray, #929497);
}

/* Publication Stats */
.publication-stats {
    display: flex;
    justify-content: space-around;
    text-align: center;
}

.pub-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pub-count {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 4px;
}

.pub-count.published {
    color: #4caf50;
}

.pub-count.draft {
    color: #ff9800;
}

.pub-label {
    font-size: 0.85rem;
    color: var(--color-gray, #929497);
}

/* Region List */
.region-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.region-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: #f8f9fa;
    border-radius: var(--brand-radius-sm);
    transition: background 0.15s ease;
}

.region-item:hover {
    background: #e9ecef;
}

.region-name {
    font-weight: 500;
    color: var(--color-base, #404041);
}

.region-count {
    font-weight: 700;
    color: var(--color-primary, #163f6b);
    background: rgba(22, 63, 107, 0.1);
    padding: 4px 12px;
    border-radius: var(--brand-radius-sm);
    font-size: 0.85rem;
}

/* Getting Started List */
.getting-started-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.getting-started-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #f8f9fa;
    border-radius: var(--brand-radius-sm);
    transition: background 0.15s ease;
}

.getting-started-item:hover {
    background: #e9ecef;
}

.getting-started-item i {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.getting-started-item span {
    color: var(--color-base, #404041);
    font-size: 0.9rem;
}

/* --------------------------------------------------------------------------
   COURSE DETAIL PAGE
   -------------------------------------------------------------------------- */

/* Course Detail Banner */
.course-detail-banner {
    background: linear-gradient(135deg, var(--color-primary, #163f6b) 0%, #1e4a7d 100%);
    border-radius: var(--brand-radius);
    padding: 24px 32px;
    display: flex;
    align-items: center;
    gap: 24px;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.course-detail-banner::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 250px;
    height: 250px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
}

.course-cover-wrapper {
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.course-cover-img {
    width: 160px;
    height: 100px;
    object-fit: cover;
    border-radius: var(--brand-radius-sm);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

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

.course-banner-content h2 {
    color: #fff;
    margin: 0 0 12px 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.course-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.course-country {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
}

.course-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: var(--brand-radius-lg);
    font-size: 0.75rem;
    font-weight: 500;
}

.course-badge.published {
    background: rgba(76, 175, 80, 0.2);
    color: #a5d6a7;
}

.course-badge.draft {
    background: rgba(255, 152, 0, 0.2);
    color: #ffcc80;
}

.course-badge.vectorized {
    background: rgba(76, 192, 210, 0.2);
    color: #80deea;
}

.course-badge.not-vectorized {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
}

.course-banner-actions {
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.course-banner-actions .btn {
    white-space: nowrap;
}

/* Clickable stat cards */
.stat-card-lms.clickable {
    cursor: pointer;
}

.stat-card-lms.clickable:hover {
    transform: translateY(-4px);
    box-shadow: var(--brand-shadow-lg);
    border-color: var(--color-primary, #163f6b);
}

.asset-type-item.clickable {
    cursor: pointer;
}

.asset-type-item.clickable:hover {
    transform: translateY(-2px);
    box-shadow: var(--brand-shadow-md);
}

/* Clickable publication stats */
.pub-stat.clickable {
    cursor: pointer;
    transition: all 0.15s ease;
}

.pub-stat.clickable:hover {
    transform: scale(1.05);
}

/* Vectorized count color */
.pub-count.vectorized {
    color: var(--color-info, #4cc0d2);
}

/* Clickable region items */
.region-item.clickable {
    cursor: pointer;
    transition: all 0.15s ease;
}

.region-item.clickable:hover {
    background: var(--color-blue-light, #e8f0f8);
    transform: translateX(4px);
}

/* Help button in welcome banner */
.welcome-banner {
    position: relative;
}

.welcome-banner .help-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.welcome-banner .help-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.welcome-banner .help-btn i {
    font-size: 1rem;
}

/* Embedded Resources Grid */
.embedded-resources-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}

@media (max-width: 992px) {
    .embedded-resources-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 576px) {
    .embedded-resources-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.embedded-resource-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 12px;
    background: #f8f9fa;
    border-radius: var(--brand-radius-sm);
    text-align: center;
    transition: all 0.15s ease;
}

.embedded-resource-item i {
    font-size: 1.5rem;
    color: var(--color-gray, #929497);
    margin-bottom: 8px;
}

.embedded-resource-item .resource-count {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-gray, #929497);
    line-height: 1;
}

.embedded-resource-item .resource-label {
    font-size: 0.7rem;
    color: var(--color-gray, #929497);
    margin-top: 4px;
}

.embedded-resource-item.has-content {
    background: rgba(22, 63, 107, 0.08);
}

.embedded-resource-item.has-content i,
.embedded-resource-item.has-content .resource-count {
    color: var(--color-primary, #163f6b);
}

.embedded-resource-item.has-content .resource-label {
    color: var(--color-base, #404041);
}

/* --------------------------------------------------------------------------
   EXTRACTION PREVIEW MODAL (Cleaned up)
   -------------------------------------------------------------------------- */

.extraction-stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #6c757d;
    font-size: 0.85rem;
}

.extraction-stat i {
    font-size: 0.9rem;
}

.extraction-tag {
    display: inline-block;
    padding: 3px 10px;
    background: rgba(22, 63, 107, 0.1);
    color: var(--color-primary, #163f6b);
    border-radius: var(--brand-radius-xs);
    font-size: 0.75rem;
    font-weight: 500;
}

.lesson-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--brand-radius-xs);
    font-size: 0.7rem;
    font-weight: 500;
}

.lesson-tag.homework {
    background: rgba(237, 169, 44, 0.15);
    color: #c68900;
}

.enrichment-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.85rem;
}

.enrichment-badge.completed {
    color: #4caf50;
}

.enrichment-badge.processing {
    color: #ff9800;
}

.enrichment-badge.pending {
    color: #9e9e9e;
}

.lesson-meta span {
    margin-right: 4px;
}

/* Chapter meta in accordion */
.chapter-meta {
    white-space: nowrap;
}

/* ==========================================================================
   DRAGGABLE MODALS
   ========================================================================== */

/* Make modal header show it's draggable */
.modal-header-draggable {
    cursor: grab;
    user-select: none;
    position: relative;
}

.modal-header-draggable:active {
    cursor: grabbing;
}

/* Visual feedback while dragging */
.modal-dragging {
    opacity: 0.95;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3) !important;
}

/* Ensure dragged modals appear above others */
.modal-dialog.modal-dragging {
    z-index: 1060;
}

/* Add a subtle drag indicator to headers */
.modal-header-draggable::after {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.modal-header-draggable:hover::after {
    opacity: 1;
}

/* Better visibility on colored headers */
.modal-header-draggable[style*="background"]::after,
.bg-primary .modal-header-draggable::after {
    background: rgba(255, 255, 255, 0.5);
}

/* Resize handle — bottom-right corner */
.modal-resize-handle {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 20px;
    height: 20px;
    cursor: nwse-resize;
    z-index: 10;
    border-right: 3px solid rgba(0, 0, 0, 0.15);
    border-bottom: 3px solid rgba(0, 0, 0, 0.15);
    border-radius: 0 0 var(--brand-radius-sm) 0;
    transition: border-color 0.2s ease;
}

.modal-resize-handle:hover {
    border-right-color: var(--brand-primary, #1a365d);
    border-bottom-color: var(--brand-primary, #1a365d);
}

/* Visual feedback while resizing */
.modal-dialog.modal-resizing {
    opacity: 0.95;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3) !important;
}

/* Ensure modal-content fills the dialog when resized */
.modal-dialog[style*="height"] .modal-content {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Settings modal — wider and height-constrained so it doesn't fill the page */
#settingsModal .modal-dialog {
    max-width: 900px;
}

#settingsModal .modal-content {
    max-height: 70vh;
    display: flex;
    flex-direction: column;
}

#settingsModal .modal-body {
    overflow-y: auto;
    flex: 1;
}

/* ==========================================================================
   TTS SPEAKER BUTTON STYLES (Global)
   ========================================================================== */

.speaker-btn {
    padding: 2px 6px;
    border-radius: var(--brand-radius-xs);
    font-size: 0.75rem;
    vertical-align: middle;
    transition: all 0.2s ease;
}

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

.speaker-btn.playing {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.speaker-btn:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* Enrichment card play all button */
.enrichment-play-all {
    transition: all 0.2s ease;
}

.enrichment-play-all:hover {
    transform: scale(1.1);
}

/* ==========================================================================
   COURSE MANAGEMENT DASHBOARD
   ========================================================================== */

#courseManagementTable {
    font-size: 0.875rem;
}

#courseManagementTable thead th {
    background: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    font-weight: 600;
    color: var(--color-base, #404041);
    padding: 12px 8px;
    position: sticky;
    top: 0;
    z-index: 10;
}

#courseManagementTable tbody tr {
    transition: background-color 0.15s ease;
}

#courseManagementTable tbody tr:hover {
    background-color: rgba(22, 63, 107, 0.04);
}

#courseManagementTable tbody td {
    padding: 10px 8px;
    vertical-align: middle;
    border-bottom: 1px solid #eee;
}

#courseManagementTable .badge {
    font-weight: 500;
}

#courseManagementTable .btn-sm {
    padding: 4px 8px;
    font-size: 0.75rem;
}

/* Course name link styling */
#courseManagementTable a {
    color: var(--color-primary, #163f6b);
    font-weight: 500;
}

#courseManagementTable a:hover {
    color: var(--color-primary-dark, #0d2845);
    text-decoration: underline !important;
}

/* Checkbox styling */
#courseManagementTable input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Card footer styling */
.browser-overview .card-footer {
    background: #f8f9fa;
    border-top: 1px solid #eee;
}

/* Form switch in card header */
.browser-overview .form-check-input:checked {
    background-color: var(--color-primary, #163f6b);
    border-color: var(--color-primary, #163f6b);
}

/* Course Management card header */
.browser-overview .card-header {
    background: #fff;
    border-bottom: none;
    padding: 16px;
}

.browser-overview .card-header span {
    font-weight: 600;
    color: var(--color-base, #404041);
}

/* Course Management Filter Bar */
.course-filter-bar {
    background: #f8f9fa;
    padding: 12px;
    border-radius: var(--brand-radius-sm);
    margin-top: 12px;
}

.course-filter-bar .filter-row {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    flex-wrap: wrap;
}

.course-filter-bar .filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.course-filter-bar .filter-label {
    font-size: 0.7rem;
    color: #666;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.course-filter-bar .form-select,
.course-filter-bar .form-control {
    min-width: 130px;
    font-size: 0.875rem;
}

.course-filter-bar .input-group {
    min-width: 200px;
}

/* Action buttons row */
.browser-overview .card-header .border-top {
    border-color: #eee !important;
}

#courseActionHint {
    color: #888;
}

/* ──────────────────────────────────────────────
   Marketing Hub — Edit Campaign / Add Goal Modals
   ────────────────────────────────────────────── */

.mh-edit-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}

.mh-edit-modal {
    background: #fff;
    border-radius: var(--brand-radius-sm);
    padding: 1.5rem;
    width: 90%;
    max-width: 540px;
    box-shadow: var(--brand-shadow-lg);
}


/* ==========================================================================
   PROVENANCE — "Show Your Work" Badges & Modal
   ========================================================================== */

.provenance-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 8px;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--brand-primary);
    background: color-mix(in srgb, var(--brand-primary) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand-primary) 20%, transparent);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    line-height: 1.4;
    vertical-align: middle;
}

.provenance-badge:hover {
    background: color-mix(in srgb, var(--brand-primary) 15%, transparent);
    border-color: color-mix(in srgb, var(--brand-primary) 40%, transparent);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

/* On a dark gradient header (e.g. the IC "AI Action Brief"), the default blue-on-light
   pill clashes with the white outline-light buttons beside it. Match them: white text on
   a translucent fill. */
.brief-gradient-header .provenance-badge {
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.45);
}
.brief-gradient-header .provenance-badge:hover {
    background: rgba(255, 255, 255, 0.28);
    border-color: rgba(255, 255, 255, 0.65);
}

.provenance-badge i {
    font-size: 0.7rem;
}

/* Summary bar in modal */
.prov-summary-bar .badge {
    font-size: 0.7rem;
    font-weight: 500;
}

/* Tab styling overrides within provenance modal */
#provenanceDetailModal .nav-tabs .nav-link {
    font-size: 0.8rem;
    padding: 0.4rem 0.75rem;
    color: var(--brand-text-muted, #6c757d);
}

#provenanceDetailModal .nav-tabs .nav-link.active {
    color: var(--brand-primary);
    font-weight: 600;
}

#provenanceDetailModal .table td {
    font-size: 0.85rem;
    padding: 0.5rem 0.75rem;
}

#provenanceDetailModal .list-group-item {
    border: none;
    border-bottom: 1px solid var(--brand-border-color, #dee2e6);
}


/* ==========================================================================
   QUICK CREATE — Format Button Grid
   ========================================================================== */

.qc-format-btn {
    padding: 0.75rem 0.5rem;
    text-align: center;
    transition: all 0.15s ease;
    border-color: var(--brand-border-color, #dee2e6);
}

.qc-format-btn:hover {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
    background: color-mix(in srgb, var(--brand-primary) 5%, transparent);
}

.qc-format-btn.btn-brand-primary {
    border-color: var(--brand-primary);
    background: var(--brand-primary);
    color: #fff;
}

.qc-format-btn i {
    transition: transform 0.15s ease;
}

.qc-format-btn:hover i {
    transform: scale(1.1);
}