/* ========================================================================
   Modern Progressive Theme - Modernization Strategy Guide

   This theme file contains modern, clean styling that progressively
   enhances the IMathAS interface without breaking existing functionality.

   ========================================================================

   CORE PRINCIPLES:
   ----------------
   1. All styles MUST be scoped with .modern-theme to prevent conflicts
   2. Use NEW class names for modernized components (don't reuse old ones)
   3. NEVER use !important except for true utility classes (see below)
   4. Follow BEM naming convention: .block__element--modifier
   5. Check for dependencies before removing IDs from HTML

   ========================================================================

   HOW TO MODERNIZE A COMPONENT:
   ------------------------------

   STEP 1: Identify the Component
   - Find the HTML element(s) you want to modernize
   - Note any existing IDs and classes
   - Example: <div id="viewbuttoncont"> with class="buttonactive"

   STEP 2: Create New Class Names
   - Use BEM naming convention
   - Base: .modern-[component-name]
   - Element: .modern-[component-name]__[element]
   - Modifier: .modern-[component-name]--[modifier]
   - Example: .modern-view-btn, .modern-view-btn--active, .modern-view-btn--left

   STEP 3: Check for Dependencies
   - Search for JavaScript usage: grep -r "getElementById('oldid')" .
   - Search for jQuery usage: grep -r "$('#oldid')" .
   - Search for CSS usage: grep -r "#oldid" . --include="*.css"
   - Search for PHP usage: grep -r "oldid" . --include="*.php"

   STEP 4: Update HTML in PHP Files
   - Add new class names to the element
   - Keep old ID if JavaScript depends on it (add TODO comment)
   - Remove old ID if no dependencies found
   - Example:
     OLD: <div id="viewbuttoncont" class="hideinmobile">
     NEW: <div id="viewbuttoncont" class="modern-view-buttons hideinmobile">

   STEP 5: Handle CSS Specificity

   A) If NO legacy ID exists:
      ✅ Use simple class selectors:
      .modern-theme .modern-component { }

   B) If legacy ID exists AND you kept it in HTML:
      ✅ Include ID in selector for higher specificity:
      .modern-theme #oldid.modern-component .modern-element { }

      This gives specificity high enough to override legacy CSS like:
      div#oldid a { } (specificity: 102)

   C) If legacy ID exists BUT you removed it from HTML:
      ✅ Use simple class selectors (ID is gone):
      .modern-theme .modern-component { }

   STEP 6: Write CSS in This File
   - All styles go in modern-progressive.css (this file)
   - Always scope with .modern-theme
   - Add clear comments explaining what was modernized
   - Group related styles together

   ========================================================================

   SPECIFICITY STRATEGY:
   ---------------------

   DO THIS:
   ✅ Use ID selectors when legacy CSS has IDs
      .modern-theme #viewbuttoncont.modern-view-buttons .modern-view-btn
      (Specificity: 132 - beats div#viewbuttoncont a with 102)

   ✅ Remove IDs from HTML when safe (no JS dependencies)
      Then use clean class selectors:
      .modern-theme .modern-view-buttons .modern-view-btn

   ✅ Use BEM modifiers for variants
      .modern-view-btn--active, .modern-view-btn--disabled

   DON'T DO THIS:
   ❌ Never use !important for normal styling
      .modern-view-btn { background: blue !important; }  NO! 

   ❌ Don't reuse old class names
      .buttonactive { styling  }  NO! Creates conflicts 

   ❌ Don't style without .modern-theme scope
      .modern-view-btn { }  NO! Could affect non-modern pages 

   ========================================================================

   WHEN TO USE !IMPORTANT:
   -----------------------

   Only use !important for TRUE utility classes that should ALWAYS work:

   ✅ Visibility utilities:
      .modern-theme .sr-only { display: none !important; }
      .modern-theme .hidden { visibility: hidden !important; }

   ✅ Display utilities:
      .modern-theme .d-block { display: block !important; }
      .modern-theme .d-none { display: none !important; }

   ✅ Overriding inline styles you can't control:
      .modern-theme .force-white-bg { background: white !important; }

   ❌ Never for component styling:
      .modern-view-btn { padding: 8px !important; }  NO! 

   ========================================================================

   EXAMPLE MODERNIZATION:
   ----------------------

   OLD CODE (imascore.css):
   div#viewbuttoncont {
       display: flex;
       background: #fff;
   }
   div#viewbuttoncont a.buttonactive {
       background-color: #369;
       color: #fff;
   }

   OLD HTML (course.php):
   <div id="viewbuttoncont">
       <a href="..." class="buttonactive buttoncurveleft">Instructor</a>
   </div>

   MODERNIZATION STEPS:

   1. Check dependencies: grep -r "viewbuttoncont" .
      Result: Only CSS, no JavaScript → Safe to keep/remove ID

   2. Create new class names:
      Container: .modern-view-buttons
      Button: .modern-view-btn
      Active: .modern-view-btn--active
      Position: .modern-view-btn--left

   3. Update HTML (course.php):
   <div id="viewbuttoncont" class="modern-view-buttons hideinmobile">
       <a href="..." class="modern-view-btn modern-view-btn--active modern-view-btn--left">
           Instructor
       </a>
   </div>

   4. Write CSS (modern-progressive.css):
   .modern-theme #viewbuttoncont.modern-view-buttons .modern-view-btn {
       display: inline-flex;
       padding: 8px 16px;
       background: #ffffff;
   }
   .modern-theme #viewbuttoncont.modern-view-buttons .modern-view-btn--active {
       background: linear-gradient(135deg, #5b7d8e 0%, #4a6a78 100%);
       color: #ffffff;
   }

   5. Later, remove ID when fully modernized:
   HTML: <div class="modern-view-buttons hideinmobile">
   CSS: .modern-theme .modern-view-buttons .modern-view-btn { }

   ========================================================================

   COMPLETED MODERNIZATIONS:
   -------------------------
   ✓ Navigation bar (header.php) - Messages and Gradebook links
   ✓ View buttons (course.php) - Instructor/Student/Quick Rearrange

   ========================================================================

   RESOURCES:
   ----------
   - BEM Naming: https://getbem.com/naming/
   - CSS Specificity Calculator: https://specificity.keegan.st/
   - Font Awesome Icons: https://fontawesome.com/search?o=r&m=free

   ======================================================================== */

/* ========================================================================
   ICON SYSTEM - Font Awesome 6

   Modern icons loaded via CDN in header.php
   All Font Awesome classes work: fa-solid (fa-s), fa-regular (fa-r), etc.

   USAGE EXAMPLES:
   <i class="fa-solid fa-envelope"></i>         Basic icon
   <i class="fa-solid fa-chart-simple icon-sm"></i>   Small icon with utility class

   MIGRATION REFERENCE (Old → New):
   menu.png          → fa-solid fa-bars
   edit.png          → fa-solid fa-pen / fa-pen-to-square
   delete.png        → fa-solid fa-trash / fa-trash-can
   add.png           → fa-solid fa-plus
   assess.png        → fa-solid fa-file-lines
   forum.png         → fa-solid fa-comments
   folder.png        → fa-solid fa-folder
   doc.png           → fa-solid fa-file
   cal.gif           → fa-solid fa-calendar
   gradebook icons   → fa-solid fa-chart-simple / fa-table
   messages icons    → fa-solid fa-envelope / fa-message
   ======================================================================== */

/* Icon utility classes */
.modern-theme .modern-icon {
    display: inline-block;
    line-height: 1;
}

/* Icon sizes */
.modern-theme .icon-xs {
    font-size: 0.75rem;  /* 12px */
}

.modern-theme .icon-sm {
    font-size: 0.875rem; /* 14px */
}

.modern-theme .icon-md {
    font-size: 1rem;     /* 16px */
}

.modern-theme .icon-lg {
    font-size: 1.25rem;  /* 20px */
}

.modern-theme .icon-xl {
    font-size: 1.5rem;   /* 24px */
}

/* Icon colors */
.modern-theme .icon-primary {
    color: #3b82f6;
}

.modern-theme .icon-success {
    color: #10b981;
}

.modern-theme .icon-warning {
    color: #f59e0b;
}

.modern-theme .icon-danger {
    color: #ef4444;
}

.modern-theme .icon-muted {
    color: #6b7280;
}

/* Help/Info icons - Lighter, more modern appearance */
.modern-theme .help-icon {
    color: #6b7280;
    cursor: pointer;
    font-size: 1.125rem;
    transition: all 0.2s ease;
    vertical-align: middle;
    margin-left: 6px;
}

.modern-theme .help-icon:hover {
    color: #3b82f6;
    transform: scale(1.1);
}

.modern-theme .help-icon:active {
    transform: scale(0.95);
}

/* Assessment icons - Modern gradient styling (matches gradebook purple-to-pink) */
.modern-theme .assessment-icon {
    background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 1rem;
    vertical-align: middle;
    transition: all 0.2s ease;
}

.modern-theme .assessment-icon-sm {
    background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 0.875rem;
    vertical-align: middle;
    transition: all 0.2s ease;
}

.modern-theme a:hover .assessment-icon,
.modern-theme a:hover .assessment-icon-sm {
    opacity: 0.8;
    transform: scale(1.05);
}

/* Rubric icons - Special assessment icon variant */
.modern-theme .rubric-icon {
    background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 1.125rem;
    cursor: pointer;
    transition: all 0.2s ease;
    vertical-align: middle;
}

.modern-theme a:hover .rubric-icon {
    opacity: 0.8;
    transform: scale(1.1);
}

/* Expand/Collapse icons - Modern gradient styling */
.modern-theme .expand-icon {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    vertical-align: middle;
    display: inline-block;
}

.modern-theme .collapse-icon {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    vertical-align: middle;
    display: inline-block;
}

.modern-theme .expand-icon:hover,
.modern-theme .collapse-icon:hover {
    opacity: 0.8;
    transform: scale(1.15) rotate(90deg);
}

.modern-theme .expand-icon:active,
.modern-theme .collapse-icon:active {
    transform: scale(0.95);
}

/* Attachment/Paperclip icons - Modern gradient styling */
.modern-theme a.attach {
    background: none !important;
    padding-left: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.modern-theme a.attach::before {
    content: "\f0c6";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.modern-theme a.attach:hover::before {
    opacity: 0.8;
    transform: scale(1.1) rotate(-15deg);
}

/* Inline text icons - Modern gradient styling */
.modern-theme .inline-icon {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 1rem;
    vertical-align: middle;
    transition: all 0.2s ease;
}

.modern-theme .inline-icon-sm {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 0.875rem;
    vertical-align: middle;
    transition: all 0.2s ease;
}

.modern-theme a:hover .inline-icon,
.modern-theme a:hover .inline-icon-sm {
    opacity: 0.8;
    transform: scale(1.05);
}

/* PDF icons - Modern gradient styling */
.modern-theme .pdf-icon {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 1rem;
    vertical-align: middle;
    transition: all 0.2s ease;
}

.modern-theme .pdf-icon-sm {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 0.875rem;
    vertical-align: middle;
    transition: all 0.2s ease;
}

.modern-theme a:hover .pdf-icon,
.modern-theme a:hover .pdf-icon-sm {
    opacity: 0.8;
    transform: scale(1.05);
}

/* Web/Globe icons - Modern gradient styling */
.modern-theme .web-icon {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 1rem;
    vertical-align: middle;
    transition: all 0.2s ease;
}

.modern-theme .web-icon-sm {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 0.875rem;
    vertical-align: middle;
    transition: all 0.2s ease;
}

.modern-theme a:hover .web-icon,
.modern-theme a:hover .web-icon-sm {
    opacity: 0.8;
    transform: scale(1.05) rotate(15deg);
}

/* HTML/Code icons - Modern gradient styling */
.modern-theme .html-icon {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 1rem;
    vertical-align: middle;
    transition: all 0.2s ease;
}

.modern-theme .html-icon-sm {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 0.875rem;
    vertical-align: middle;
    transition: all 0.2s ease;
}

.modern-theme a:hover .html-icon,
.modern-theme a:hover .html-icon-sm {
    opacity: 0.8;
    transform: scale(1.05);
}

/* ========== Modern Navigation Bar ========== */

/* Main navigation bar container */
.modern-theme .modern-nav-bar {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 8px 16px;
    margin-bottom: 20px;
}

/* Container for flexbox layout */
.modern-theme .nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 100%;
    gap: 16px;
}

/* Home Button */
.modern-theme .nav-home-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: 1px solid #059669;
    border-radius: 6px;
    color: #ffffff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
    white-space: nowrap;
    flex-shrink: 0;
}

.modern-theme .nav-home-btn i {
    font-size: 14px;
    line-height: 1;
}

.modern-theme .nav-home-btn:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    border-color: #047857;
    box-shadow: 0 3px 6px rgba(16, 185, 129, 0.3);
    text-decoration: none;
    color: #ffffff;
    transform: translateY(-1px);
}

.modern-theme .nav-home-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(16, 185, 129, 0.2);
}

/* LMS Dashboard variant (for teachers) */
.modern-theme .nav-home-btn--lms {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: #764ba2;
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);
}

.modern-theme .nav-home-btn--lms:hover {
    background: linear-gradient(135deg, #5568d3 0%, #6a4190 100%);
    border-color: #6a4190;
    box-shadow: 0 3px 6px rgba(102, 126, 234, 0.3);
}

.modern-theme .nav-home-label {
    line-height: 1;
    display: inline-block;
}

/* Breadcrumb section */
.modern-theme .nav-breadcrumb {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: #6b7280;
    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
    padding: 6px 12px;
    border-radius: 4px;
    border: 1px solid #e5e7eb;
    overflow-x: auto;
    white-space: nowrap;
}

/* Individual breadcrumb items */
.modern-theme .breadcrumb-item {
    display: inline-flex;
    align-items: center;
}

/* RTD Logo in breadcrumbs (non-clickable) */
.modern-theme .rtd-logo {
    width: 22px;
    height: 22px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 4px;
}

/* Breadcrumb links */
.modern-theme .breadcrumb-item a {
    color: #4b5563;
    text-decoration: none;
    transition: all 0.2s ease;
    font-weight: 500;
    padding: 2px 4px;
    border-radius: 3px;
    position: relative;
}

.modern-theme .breadcrumb-item a:hover {
    background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transform: scale(1.02);
    text-decoration: none;
}

.modern-theme .breadcrumb-item a:active {
    transform: scale(0.98);
}

/* Current page (non-clickable last item) */
.modern-theme .breadcrumb-current {
    font-weight: 600;
    background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    padding: 2px 4px;
}

/* Breadcrumb separators (Font Awesome chevrons) */
.modern-theme .breadcrumb-separator {
    color: #9ca3af;
    font-size: 11px;
    margin: 0 6px;
    transition: all 0.2s ease;
    opacity: 0.7;
}

.modern-theme .breadcrumb-item:hover + .breadcrumb-separator {
    opacity: 1;
    color: #6b7280;
}

/* Navigation links section */
.modern-theme .nav-links {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* Individual navigation link styling */
.modern-theme .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    color: #374151;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.15s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    white-space: nowrap;
    height: 28px;
    line-height: 1;
}

.modern-theme .nav-link:hover {
    background: #f9fafb;
    border-color: #5b7d8e;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    text-decoration: none;
    color: #374151;
}

.modern-theme .nav-link:active {
    transform: scale(0.98);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

/* Label text */
.modern-theme .nav-label {
    line-height: 1;
    display: inline-block;
}

/* Navigation icons with gradient */
.modern-theme .nav-link i {
    font-size: 14px;
    line-height: 1;
    margin-right: 6px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Messages icon gradient (blue to teal) */
.modern-theme .nav-messages i {
    background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Gradebook icon gradient (purple to pink) */
.modern-theme .nav-gradebook i {
    background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.modern-theme .nav-link:hover i {
    /* Brighten gradient on hover */
    opacity: 0.85;
}

/* Badge for notification counts */
.modern-theme .nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: #ef4444;
    color: #ffffff;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
}

/* User info section */
.modern-theme .nav-user {
    display: flex;
    align-items: center;
    padding: 4px 12px;
    color: #5b7d8e;
    font-size: 14px;
    font-weight: 500;
}

.modern-theme .nav-username {
    color: #5b7d8e;
}

/* Left content toggle (hamburger menu) - HIDDEN */
.modern-theme #leftcontenttoggle {
    display: none !important;
}

/* Hide IMathAS branding text in top right */
.modern-theme #headerlogo {
    display: none !important;
}

/* ========== Modern View Buttons ========== */

/* Button group container */
.modern-theme .modern-view-buttons {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 16px;
    font-size: 14px;
}

/* View label */
.modern-theme .modern-view-label {
    margin-right: 8px;
    color: #6b7280;
    font-weight: 500;
}

/* Base button styles - using ID for higher specificity to override imascore.css */
.modern-theme #viewbuttoncont.modern-view-buttons .modern-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.25s ease;
    border: 1px solid transparent;
    background: #ffffff;
    color: #374151;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    margin-left: 0;
}

/* Remove duplicate borders between buttons */
.modern-theme #viewbuttoncont.modern-view-buttons .modern-view-btn + .modern-view-btn {
    margin-left: -1px;
}

/* Active button state - Clear vibrant gradient for easy identification */
.modern-theme #viewbuttoncont.modern-view-buttons .modern-view-btn--active {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border: 1px solid #2563eb;
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
    z-index: 1;
}

/* Inactive button state - Subtle gradient background */
.modern-theme #viewbuttoncont.modern-view-buttons .modern-view-btn--inactive {
    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
    border: 1px solid #e5e7eb;
    color: #6b7280;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

/* Inactive button hover - Lift with enhanced gradient */
.modern-theme #viewbuttoncont.modern-view-buttons .modern-view-btn--inactive:hover {
    background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
    border-color: rgba(91, 125, 142, 0.2);
    color: #374151;
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
    z-index: 1;
}

/* Active button hover - Brighten with glow */
.modern-theme #viewbuttoncont.modern-view-buttons .modern-view-btn--active:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    border-color: #1d4ed8;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4),
                0 0 0 3px rgba(59, 130, 246, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.25);
    text-decoration: none;
    transform: translateY(-1px);
}

/* Left button rounded corners */
.modern-theme #viewbuttoncont.modern-view-buttons .modern-view-btn--left {
    border-radius: 6px 0 0 6px;
}

/* Middle button (no rounded corners) */
.modern-theme #viewbuttoncont.modern-view-buttons .modern-view-btn--middle {
    border-radius: 0;
}

/* Right button rounded corners */
.modern-theme #viewbuttoncont.modern-view-buttons .modern-view-btn--right {
    border-radius: 0 6px 6px 0;
}

/* Focus states for accessibility */
.modern-theme #viewbuttoncont.modern-view-buttons .modern-view-btn:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
    z-index: 2;
}

/* Active state on click */
.modern-theme #viewbuttoncont.modern-view-buttons .modern-view-btn:active {
    transform: scale(0.98);
}

/* ========================================================================
   LEGACY OVERRIDES - Ensure modern theme takes priority over imascore.css
   ======================================================================== */

/* Override legacy body styles */
.modern-theme body,
body.modern-theme {
    background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%) !important;
    background-attachment: fixed;
}


/* Override legacy link colors from imascore.css - Use gradient by default */
.modern-theme a,
.modern-theme a:link,
.modern-theme a:visited {
    background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: transparent !important;
}

/* Override legacy .info class (teal #007585 in imascore.css) */
.modern-theme .info,
.modern-theme span.info {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: transparent !important;
}

/* Override legacy .warn class (orange #C40 in imascore.css) */
.modern-theme .warn,
.modern-theme span.warn {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: transparent !important;
}

/* Override legacy .noticetext class (red #db0000 in imascore.css) */
.modern-theme .noticetext,
.modern-theme a.noticetext,
.modern-theme a.noticetext:link,
.modern-theme a.noticetext:visited,
.modern-theme span.noticetext {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: transparent !important;
    font-weight: 600 !important;
}

/* Override legacy .item styles */
.modern-theme .item,
.modern-theme div.item {
    background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%) !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    margin-bottom: 16px !important;
}

/* Override legacy pagetitle styles */
.modern-theme .pagetitle h1,
.modern-theme .pagetitle h2,
.modern-theme div.pagetitle h1,
.modern-theme div.pagetitle h2 {
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: transparent !important;
}

/* ========================================================================
   MODERN LINK STYLING
   ======================================================================== */

/* Standard links - Modern gradient with brighter hover effect */
.modern-theme a {
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
}

.modern-theme a:hover {
    background: linear-gradient(135deg, #2563eb 0%, #0891b2 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    transform: scale(1.02);
    text-decoration: none;
}

/* Animated underline effect - REMOVED (user found it distracting) */

/* Essential links (.essen) - Purple to pink gradient */
.modern-theme a.essen {
    font-weight: 600;
    color: #374151;
}

.modern-theme a.essen:hover {
    background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Sidebar navigation links - Darker text on colored background */
.modern-theme #leftcontent a {
    background: none !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: initial !important;
    background-clip: initial !important;
    color: #3730a3 !important;
    text-decoration: none;
    transition: all 0.25s ease;
    display: inline-block;
    position: relative;
    padding: 2px 0;
    font-weight: 500;
}

.modern-theme #leftcontent a:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    transform: translateX(3px);
}

.modern-theme #leftcontent a.essen {
    font-weight: 600;
}

.modern-theme #leftcontent a.essen:hover {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Item title links - Enhanced with icon alignment */
.modern-theme .itemtitle a {
    color: #1f2937;
    font-weight: 600;
    font-size: 1.05em;
    transition: all 0.3s ease;
}

.modern-theme .itemtitle a:hover {
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transform: translateX(2px);
}

/* Block title links */
.modern-theme .blocktitle a {
    color: #1f2937;
    font-weight: 700;
    transition: all 0.3s ease;
}

.modern-theme .blocktitle a:hover {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Back link styling */
.modern-theme .right a {
    color: #6b7280;
    font-weight: 500;
    transition: all 0.25s ease;
}

.modern-theme .right a:hover {
    background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Override for buttons that are links - keep original styling */
.modern-theme .modern-view-btn,
.modern-theme .nav-link,
.modern-theme .nav-home-btn {
    background: initial !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: initial !important;
    background-clip: initial !important;
}

.modern-theme .modern-view-btn:hover,
.modern-theme .nav-link:hover,
.modern-theme .nav-home-btn:hover {
    transform: initial;
}

/* Restore specific button hover states */
.modern-theme .modern-view-btn--active {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
}

.modern-theme .modern-view-btn--inactive {
    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%) !important;
}

/* ========================================================================
   MODERN TEXT COLORS & TYPOGRAPHY
   ======================================================================== */

/* Page titles - Blue to purple gradient with enhanced typography */
.modern-theme #headercourse h1,
.modern-theme .pagetitle h1,
.modern-theme .pagetitle h2 {
    font-weight: 700;
    margin: 0.8em 0 1em 0;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.modern-theme #headercourse h1 {
    font-size: 1.75em;
}

/* Info text - Typography enhancements */
.modern-theme .info {
    font-weight: 500;
}

/* Notice text - Enhanced hover state */
.modern-theme a.noticetext:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Warning text - Typography enhancements */
.modern-theme .warn {
    font-weight: 500;
}

/* Section headings */
.modern-theme h2 {
    color: #1f2937;
    font-weight: 700;
    font-size: 1.35em;
    margin: 1.2em 0 0.6em 0;
    letter-spacing: -0.01em;
}

.modern-theme h3 {
    color: #374151;
    font-weight: 600;
    font-size: 1.15em;
    margin: 1em 0 0.5em 0;
}

/* Improved typography for body text */
.modern-theme p {
    line-height: 1.6;
    color: #4b5563;
}

/* Block titles - Modern styling */
.modern-theme .blocktitle {
    font-size: 1.2em;
    font-weight: 700;
    color: #1f2937;
    margin: 0.5em 0;
}

/* Item titles - Modern styling */
.modern-theme .itemtitle {
    font-size: 1.05em;
    font-weight: 600;
    color: #1f2937;
}

/* Item descriptions - Better readability */
.modern-theme .itemdesc {
    color: #4b5563;
    line-height: 1.6;
    margin-top: 0.5em;
}

/* Sidebar section headers - Enhanced for colored background */
.modern-theme #leftcontent b {
    display: block;
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 0.95em;
    font-weight: 700;
    margin-bottom: 0.5em;
    margin-top: 1.2em;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding-bottom: 0.4em;
    border-bottom: 2px solid rgba(99, 102, 241, 0.2);
}

/* First section header - no top margin */
.modern-theme #leftcontent p:first-child b,
.modern-theme #leftcontent b:first-child {
    margin-top: 0;
}

/* ========================================================================
   MODERN COURSE ITEMS STYLING
   ======================================================================== */

/* Course item containers - Modern card design (base styles already set in overrides) */
.modern-theme .item {
    padding: 12px 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06),
                0 1px 2px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
    position: relative;
    overflow: visible;
}

/* Hover effect - Lift with enhanced shadow */
.modern-theme .item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08),
                0 2px 6px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
    border-color: rgba(59, 130, 246, 0.2);
}

/* Add subtle gradient border on hover */
.modern-theme .item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #3b82f6 0%, #06b6d4 50%, #8b5cf6 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 8px 8px 0 0;
    pointer-events: none;
}

.modern-theme .item:hover::before {
    opacity: 1;
}

/* Greyed out items */
.modern-theme .itemgrey {
    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
    opacity: 0.7;
}

/* Block containers - Enhanced design */
.modern-theme .block {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 20px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06),
                0 1px 3px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
    position: relative;
    overflow: visible;
}

.modern-theme .block:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08),
                0 3px 8px rgba(0, 0, 0, 0.06);
}

/* Block headers - Modern gradient accent */
.modern-theme .blockhdr {
    background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(90deg, #10b981 0%, #059669 100%);
    border-image-slice: 1;
    padding: 12px 16px;
    margin: -16px -16px 16px -16px;
    border-radius: 10px 10px 0 0;
}

/* Item headers - Clean modern design */
.modern-theme .itemhdr {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    position: relative;
}

/* Item header icon container - Modern styling */
.modern-theme .itemhdricon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 10;
}

.modern-theme .itemhdricon:hover {
    background: rgba(99, 102, 241, 0.08);
    transform: scale(1.1);
}

/* Chevron icon for expand/collapse */
.modern-theme .itemhdricon svg {
    width: 22px;
    height: 22px;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    color: #6366f1;
    pointer-events: none;
}

.modern-theme .itemhdricon.expanded svg {
    transform: rotate(180deg);
}

/* Block items container - Light gradient background when open */
.modern-theme .blockitems {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 0 0 10px 10px;
    padding: 16px;
    margin-top: -16px;
    margin-bottom: 20px;
    border: 1px solid #e2e8f0;
    border-top: none;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
    overflow: hidden;
    max-height: 10000px;
    opacity: 1;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                margin 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hidden state for collapsed blocks */
.modern-theme .hidden {
    max-height: 0 !important;
    opacity: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border: none !important;
    overflow: hidden;
    visibility: hidden;
}

/* Block wrapper for proper animation */
.modern-theme .blockwrap {
    margin-bottom: 20px;
}

/* Enhance block header when expanded */
.modern-theme .block.expanded {
    border-radius: 10px 10px 0 0;
    margin-bottom: 0;
}

/* Item summary - Better spacing */
.modern-theme .itemsum {
    margin-left: 44px;
    padding: 8px 0;
    line-height: 1.6;
}

/* Item info spans - Modern badges */
.modern-theme .iteminfo {
    display: inline-block;
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    color: #4b5563;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 0.9em;
    margin-left: 8px;
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Dropdown menus - Modern styling */
.modern-theme .itemhdrdd {
    margin-left: auto;
    position: relative;
}

.modern-theme .itemhdrdd.dropdown {
    display: inline-block;
}

.modern-theme .itemhdrdd .fa-gear {
    color: #6b7280;
    font-size: 1.1em;
    transition: all 0.3s ease;
    cursor: pointer;
    padding: 6px;
    border-radius: 4px;
}

.modern-theme .itemhdrdd .fa-gear:hover {
    background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transform: rotate(90deg);
}

/* Remove focus outline and cursor from dropdown toggle */
.modern-theme .itemhdrdd .dropdown-toggle {
    outline: none !important;
    -webkit-user-select: none;
    user-select: none;
}

.modern-theme .itemhdrdd .dropdown-toggle:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Block expand/isolate icon styling */
.modern-theme .block-expand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
}

.modern-theme .block-expand-icon i {
    font-size: 16px;
    color: #6366f1;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.modern-theme .block-expand-icon:hover {
    background: rgba(99, 102, 241, 0.08);
    transform: scale(1.1);
}

.modern-theme .block-expand-icon:hover i {
    color: #4f46e5;
}

/* Loading spinner animation */
.modern-theme .loading-spinner-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
}

.modern-theme .loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(99, 102, 241, 0.1);
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: modern-spinner-rotate 0.8s linear infinite;
}

@keyframes modern-spinner-rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Dropdown menu styling */
.modern-theme .dropdown-menu {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1),
                0 6px 12px rgba(0, 0, 0, 0.08);
    padding: 6px 0;
    margin-top: 8px;
    position: absolute;
    z-index: 1000;
    min-width: 160px;
    left: 0;
}

.modern-theme .dropdown-menu-right {
    left: auto;
    right: 0;
}

.modern-theme .dropdown-menu li {
    list-style: none;
}

.modern-theme .dropdown-menu li > a {
    display: block;
    padding: 8px 16px;
    color: #374151;
    transition: all 0.2s ease;
    font-size: 0.95em;
}

.modern-theme .dropdown-menu li > a:hover {
    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    -webkit-text-fill-color: initial;
    color: #1f2937;
    padding-left: 20px;
}

/* Item dates and metadata - TRANSPARENT BACKGROUND (no white boxes!) */
.modern-theme .instrdates,
.modern-theme .itemdates {
    color: #6b7280;
    font-size: 0.9em;
    margin-top: 6px;
    padding: 6px 10px;
    background: transparent !important; /* Fix white background issue */
    border-left: 3px solid #e5e7eb;
    border-radius: 0 4px 4px 0;
}

/* ========================================================================
   MODERN STATUS BADGE SYSTEM
   ======================================================================== */

/* Status badges - Elegant inline indicators for item availability */
.modern-theme .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.85em;
    font-weight: 600;
    letter-spacing: 0.01em;
    margin-left: 8px;
    background: transparent;
    transition: all 0.3s ease;
    white-space: nowrap;
}

/* Expires soon badge (date-restricted, currently visible) */
.modern-theme .status-badge--expires {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(6, 182, 212, 0.12) 100%);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #1e40af;
}

.modern-theme .status-badge--expires i {
    background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Hidden badge (not visible to students) */
.modern-theme .status-badge--hidden {
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.12) 0%, rgba(75, 85, 99, 0.12) 100%);
    border: 1px solid rgba(107, 114, 128, 0.3);
    color: #4b5563;
}

.modern-theme .status-badge--hidden i {
    color: #6b7280;
}

/* Scheduled badge (will be visible in future) */
.modern-theme .status-badge--scheduled {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.12) 0%, rgba(236, 72, 153, 0.12) 100%);
    border: 1px solid rgba(139, 92, 246, 0.3);
    color: #7c3aed;
}

.modern-theme .status-badge--scheduled i {
    background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Hidden items - Grey out entire container */
.modern-theme .item-hidden,
.modern-theme .block.item-hidden {
    opacity: 0.5;
    position: relative;
}

.modern-theme .item-hidden::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(243, 244, 246, 0.6) 0%, rgba(229, 231, 235, 0.6) 100%);
    pointer-events: none;
    border-radius: 8px;
}

/* Hover effect reveals hidden content slightly */
.modern-theme .item-hidden:hover {
    opacity: 0.75;
}

/* ========================================================================
   TINYMCE RICH TEXT EDITOR OVERRIDES
   ======================================================================== */

/* Override all TinyMCE buttons to prevent blue styling */
.modern-theme .mce-btn button,
.modern-theme .mce-widget button,
.modern-theme .mce-container button {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 4px 6px !important;
}

/* Override TinyMCE's blue primary buttons to match modern theme */
.modern-theme .mce-primary,
.modern-theme .mce-btn.mce-primary {
    color: #ffffff !important;
    border: 1px solid #5b7d8e !important;
    background: linear-gradient(135deg, #5b7d8e 0%, #4a6a78 100%) !important;
}

.modern-theme .mce-primary:hover,
.modern-theme .mce-primary:focus,
.modern-theme .mce-btn.mce-primary:hover,
.modern-theme .mce-btn.mce-primary:focus {
    background: linear-gradient(135deg, #4a6a78 0%, #3b5563 100%) !important;
    border-color: #3b5563 !important;
}

/* Override TinyMCE toolbar buttons */
.modern-theme .mce-btn {
    border-color: #d1d5db !important;
    background: white !important;
}

.modern-theme .mce-btn:hover {
    border-color: #9ca3af !important;
    background: #f9fafb !important;
}

/* Override TinyMCE active button state */
.modern-theme .mce-btn.mce-active {
    background: linear-gradient(135deg, #5b7d8e 0%, #4a6a78 100%) !important;
    border-color: #4a6a78 !important;
}

/* TinyMCE window/dialog styling */
.modern-theme .mce-window {
    border-radius: 8px !important;
}

.modern-theme .mce-window-head {
    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%) !important;
}

/* TinyMCE input fields */
.modern-theme .mce-textbox {
    border-color: #d1d5db !important;
}

.modern-theme .mce-textbox:focus {
    border-color: #5b7d8e !important;
}

/* ========================================================================
   MODERN FORM ELEMENTS & DROPDOWNS
   ======================================================================== */

/* "Add An Item" select dropdown - Modern styling */
.modern-theme select {
    background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 8px 32px 8px 12px;
    font-size: 14px;
    color: #374151;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    appearance: none;
    background-image: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%),
                      linear-gradient(135deg, #10b981 0%, #059669 100%);
    background-position: right 0 top 0, right 0 top 0;
    background-size: 100% 100%, 0 100%;
    background-repeat: no-repeat;
}

.modern-theme select:hover {
    border-color: #9ca3af;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

.modern-theme select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1),
                0 2px 4px rgba(0, 0, 0, 0.06);
}

/* Add gradient icon to select using ::after */
.modern-theme .cpmid select::before {
    content: '\f067';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-right: 8px;
}

/* Input fields - Modern styling */
.modern-theme input[type="text"],
.modern-theme input[type="email"],
.modern-theme input[type="password"],
.modern-theme input[type="number"],
.modern-theme textarea {
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 14px;
    color: #374151;
    transition: all 0.25s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.modern-theme input[type="text"]:hover,
.modern-theme input[type="email"]:hover,
.modern-theme input[type="password"]:hover,
.modern-theme input[type="number"]:hover,
.modern-theme textarea:hover {
    border-color: #9ca3af;
}

.modern-theme input[type="text"]:focus,
.modern-theme input[type="email"]:focus,
.modern-theme input[type="password"]:focus,
.modern-theme input[type="number"]:focus,
.modern-theme textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1),
                0 1px 2px rgba(0, 0, 0, 0.03);
}

/* Buttons - Modern styling */
.modern-theme button,
.modern-theme input[type="button"],
.modern-theme input[type="submit"] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border: 1px solid #2563eb;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

.modern-theme button:hover,
.modern-theme input[type="button"]:hover,
.modern-theme input[type="submit"]:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    border-color: #1d4ed8;
    box-shadow: 0 3px 6px rgba(59, 130, 246, 0.3);
    transform: translateY(-1px);
}

.modern-theme button:active,
.modern-theme input[type="button"]:active,
.modern-theme input[type="submit"]:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(59, 130, 246, 0.2);
}

.modern-theme button:disabled,
.modern-theme input[type="button"]:disabled,
.modern-theme input[type="submit"]:disabled {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    border-color: #d1d5db;
    color: #9ca3af;
    cursor: not-allowed;
    box-shadow: none;
}

/* Secondary buttons */
.modern-theme button.secondary,
.modern-theme input[type="button"].secondary {
    background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
    border: 1px solid #d1d5db;
    color: #374151;
}

.modern-theme button.secondary:hover,
.modern-theme input[type="button"].secondary:hover {
    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
    border-color: #9ca3af;
}

/* Checkboxes and radio buttons - Modern styling */
.modern-theme input[type="checkbox"],
.modern-theme input[type="radio"] {
    width: 18px;
    height: 18px;
    border: 2px solid #d1d5db;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.modern-theme input[type="radio"] {
    border-radius: 50%;
}

.modern-theme input[type="checkbox"]:checked,
.modern-theme input[type="radio"]:checked {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-color: #2563eb;
}

/* ========================================================================
   OVERALL PAGE POLISH & REFINEMENTS
   ======================================================================== */

/* Center content container - Enhanced layout */
.modern-theme #centercontent {
    background: #ffffff;
    padding: 24px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    min-height: 400px;
}

/* Left sidebar - Modern design with colored background for teacher tools */
.modern-theme #leftcontent {
    background: linear-gradient(135deg, #eff6ff 0%, #e0e7ff 100%);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #c7d2fe;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.12),
                0 1px 3px rgba(0, 0, 0, 0.06);
}

.modern-theme #leftcontent p {
    margin: 0.8em 0;
    padding: 0;
}

/* Spacing improvements */
.modern-theme .cpmid {
    margin: 16px 0;
    padding: 12px;
    background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
    border-radius: 6px;
    border: 1px solid #e5e7eb;
}

/* Clear elements - Better spacing */
.modern-theme .clear {
    clear: both;
    height: 0;
    margin: 0;
    padding: 0;
}

/* Right-aligned elements - Modern styling */
.modern-theme .right {
    float: right;
    margin-left: 12px;
}

/* Form classes - Better spacing */
.modern-theme br.form {
    display: block;
    margin: 8px 0;
    line-height: 0;
}

/* Tables - Modern styling */
.modern-theme table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    margin: 16px 0;
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.modern-theme table th {
    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
    color: #1f2937;
    font-weight: 600;
    padding: 12px 16px;
    text-align: left;
    border-bottom: 2px solid #e5e7eb;
}

.modern-theme table td {
    padding: 10px 16px;
    border-bottom: 1px solid #f3f4f6;
    color: #4b5563;
}

.modern-theme table tr:last-child td {
    border-bottom: none;
}

.modern-theme table tr:hover td {
    background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
}

/* Code blocks - Modern monospace styling (exclude CodeMirror editor) */
.modern-theme code:not(.CodeMirror *),
.modern-theme pre:not(.CodeMirror):not(.CodeMirror *) {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
    color: #f9fafb;
    border-radius: 6px;
    padding: 2px 6px;
    font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
    font-size: 0.9em;
}

.modern-theme pre:not(.CodeMirror):not(.CodeMirror *) {
    padding: 12px 16px;
    overflow-x: auto;
    margin: 12px 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* ========================================================================
   CODEMIRROR EDITOR STYLING - Modern Light Theme
   ======================================================================== */

/* Main CodeMirror container - Modern card design */
.modern-theme .CodeMirror {
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    font-family: 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08),
                inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.2s ease !important;
}

/* Focused state - Subtle blue glow */
.modern-theme .CodeMirror-focused {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1),
                0 2px 6px rgba(0, 0, 0, 0.1),
                inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

/* Line numbers gutter - Modern subtle design */
.modern-theme .CodeMirror-gutters {
    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%) !important;
    border-right: 1px solid #e5e7eb !important;
    border-radius: 8px 0 0 8px !important;
    padding-right: 4px !important;
    min-width: 32px !important;
}

.modern-theme .CodeMirror-linenumber {
    color: #9ca3af !important;
    padding: 0 6px 0 8px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    min-width: 20px !important;
}

/* Cursor - Modern blue (solid, no blinking) */
.modern-theme .CodeMirror-cursor {
    border-left: 2px solid #3b82f6 !important;
}

/* Selection - Modern blue gradient */
.modern-theme .CodeMirror-selected {
    background: rgba(59, 130, 246, 0.15) !important;
}

.modern-theme .CodeMirror-focused .CodeMirror-selected {
    background: rgba(59, 130, 246, 0.25) !important;
}

/* Active line highlighting - Subtle */
.modern-theme .CodeMirror-activeline-background {
    background: rgba(59, 130, 246, 0.05) !important;
}

/* Matching brackets - Green highlight */
.modern-theme .CodeMirror-matchingbracket {
    color: #059669 !important;
    background: rgba(16, 185, 129, 0.15) !important;
    font-weight: 600 !important;
    border-radius: 2px !important;
}

.modern-theme .CodeMirror-nonmatchingbracket {
    color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.15) !important;
    border-radius: 2px !important;
}

/* Scrollbar for CodeMirror */
.modern-theme .CodeMirror-scroll::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.modern-theme .CodeMirror-scroll::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 0 8px 8px 0;
}

.modern-theme .CodeMirror-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
    border-radius: 5px;
    border: 2px solid #f3f4f6;
}

.modern-theme .CodeMirror-scroll::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
}

/* ========================================================================
   CODEMIRROR SYNTAX HIGHLIGHTING - Modern Light Theme Colors
   ======================================================================== */

/* Keywords (if, for, while, etc.) - Purple gradient */
.modern-theme .cm-keyword {
    color: #7c3aed !important;
    font-weight: 600 !important;
}

/* Variables ($answer, $x, etc.) - Blue */
.modern-theme .cm-variable-2 {
    color: #2563eb !important;
    font-weight: 500 !important;
}

/* Special IMathAS variables ($ansprompt, etc.) - Teal gradient */
.modern-theme .cm-variable-3 {
    color: #0891b2 !important;
    font-weight: 600 !important;
    background: rgba(6, 182, 212, 0.08) !important;
    padding: 1px 3px !important;
    border-radius: 3px !important;
}

/* Errors (disallowed variables) - Red with background */
.modern-theme .cm-error {
    color: #dc2626 !important;
    background: rgba(239, 68, 68, 0.12) !important;
    border-bottom: 2px wavy #ef4444 !important;
    padding: 1px 3px !important;
    border-radius: 3px !important;
    font-weight: 600 !important;
}

/* Built-in functions (sin, cos, rand, etc.) - Green */
.modern-theme .cm-builtin {
    color: #059669 !important;
    font-weight: 500 !important;
}

/* Strings - Orange */
.modern-theme .cm-string {
    color: #d97706 !important;
}

/* Numbers - Pink/Magenta */
.modern-theme .cm-number {
    color: #db2777 !important;
    font-weight: 500 !important;
}

/* Comments - Gray italic */
.modern-theme .cm-comment {
    color: #6b7280 !important;
    font-style: italic !important;
}

/* Atoms (true, false, null) - Purple */
.modern-theme .cm-atom {
    color: #8b5cf6 !important;
    font-weight: 600 !important;
}

/* Operators (+, -, =, etc.) - Gray */
.modern-theme .cm-operator {
    color: #4b5563 !important;
}

/* Brackets and punctuation - Darker gray */
.modern-theme .cm-bracket {
    color: #374151 !important;
    font-weight: 600 !important;
}

/* Tags (for HTML mode overlay) - Green */
.modern-theme .cm-tag {
    color: #059669 !important;
    font-weight: 600 !important;
}

/* Attributes - Blue */
.modern-theme .cm-attribute {
    color: #2563eb !important;
}

/* Common Control box specific styling */
.modern-theme #ccbox {
    background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 16px 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

/* Question text box specific styling */
.modern-theme #qtbox {
    background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 16px 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

/* Size control buttons ([+] [-]) - Modern styling */
.modern-theme .noselect .pointer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
    border: 1px solid #d1d5db;
    border-radius: 4px;
    color: #4b5563;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin: 0 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.modern-theme .noselect .pointer:hover {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-color: #2563eb;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

.modern-theme .noselect .pointer:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Horizontal rules - Gradient dividers */
.modern-theme hr {
    border: none;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        #e5e7eb 20%,
        #e5e7eb 80%,
        transparent 100%);
    margin: 24px 0;
}

/* Focus ring - Modern blue ring */
.modern-theme *:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.modern-theme *:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Scrollbar - Modern thin scrollbar */
.modern-theme ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.modern-theme ::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 4px;
}

.modern-theme ::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
    border-radius: 4px;
}

.modern-theme ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
}

/* Selection - Modern gradient highlight */
.modern-theme ::selection {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.3) 0%, rgba(139, 92, 246, 0.3) 100%);
    color: #1f2937;
}

/* Smooth animations for all interactive elements */
.modern-theme * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Loading states - Subtle pulse animation */
@keyframes modern-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.modern-theme .loading {
    animation: modern-pulse 1.5s ease-in-out infinite;
}

/* Fade in animation for content */
@keyframes modern-fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modern-theme .item,
.modern-theme .block {
    animation: modern-fade-in 0.4s ease-out;
}

/* Stagger animation for lists */
.modern-theme .item:nth-child(1) { animation-delay: 0.05s; }
.modern-theme .item:nth-child(2) { animation-delay: 0.1s; }
.modern-theme .item:nth-child(3) { animation-delay: 0.15s; }
.modern-theme .item:nth-child(4) { animation-delay: 0.2s; }
.modern-theme .item:nth-child(5) { animation-delay: 0.25s; }

/* Print styles - Clean printing */
@media print {
    .modern-theme .modern-nav-bar,
    .modern-theme #leftcontent,
    .modern-theme .modern-view-buttons,
    .modern-theme .itemhdrdd {
        display: none !important;
    }

    .modern-theme #centercontent {
        width: 100%;
        box-shadow: none;
        padding: 0;
    }

    .modern-theme .item,
    .modern-theme .block {
        box-shadow: none;
        page-break-inside: avoid;
    }
}

/* ========== Responsive Design ========== */

/* Tablets */
@media (max-width: 1024px) {
    .modern-theme .nav-container {
        gap: 12px;
    }

    .modern-theme .nav-links {
        gap: 8px;
    }

    .modern-theme .nav-link {
        padding: 5px 10px;
        font-size: 12px;
        height: 26px;
    }

    .modern-theme .nav-breadcrumb {
        font-size: 12px;
        padding: 5px 10px;
    }

    .modern-theme .breadcrumb-separator {
        font-size: 10px;
        margin: 0 5px;
    }

    .modern-theme .rtd-logo {
        width: 20px;
        height: 20px;
    }

    .modern-theme .nav-home-btn {
        padding: 5px 12px;
        font-size: 12px;
        gap: 6px;
    }

    .modern-theme .nav-home-btn i {
        font-size: 13px;
    }

    .modern-theme .nav-user {
        display: none;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .modern-theme .modern-nav-bar {
        padding: 6px 12px;
    }

    .modern-theme .nav-container {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .modern-theme .nav-breadcrumb {
        font-size: 12px;
        order: 1;
        padding: 5px 10px;
    }

    .modern-theme .breadcrumb-separator {
        font-size: 10px;
        margin: 0 4px;
    }

    .modern-theme .breadcrumb-item a {
        padding: 1px 3px;
    }

    .modern-theme .rtd-logo {
        width: 18px;
        height: 18px;
    }

    .modern-theme .nav-home-btn {
        padding: 4px 10px;
        font-size: 11px;
        gap: 5px;
    }

    .modern-theme .nav-home-btn i {
        font-size: 12px;
    }

    /* Hide "Home" or "LMS Dashboard" text on mobile, show icon only */
    .modern-theme .nav-home-label {
        display: none;
    }

    .modern-theme .nav-links {
        order: 2;
        justify-content: center;
        gap: 8px;
    }

    .modern-theme .nav-link {
        flex: 1;
        justify-content: center;
        padding: 5px 10px;
        font-size: 12px;
        height: 26px;
    }

    .modern-theme .nav-user {
        display: none;
    }
}

/* Extra small screens */
@media (max-width: 576px) {
    .modern-theme .modern-nav-bar {
        padding: 6px 10px;
    }

    .modern-theme .nav-link {
        padding: 4px 8px;
        font-size: 11px;
        height: 24px;
    }

    .modern-theme .nav-badge {
        min-width: 14px;
        height: 14px;
        font-size: 9px;
    }

    .modern-theme .nav-breadcrumb {
        font-size: 11px;
        padding: 4px 8px;
    }

    .modern-theme .breadcrumb-separator {
        font-size: 9px;
        margin: 0 3px;
    }

    .modern-theme .breadcrumb-item a {
        padding: 1px 2px;
    }

    .modern-theme .rtd-logo {
        width: 16px;
        height: 16px;
    }

    .modern-theme .nav-home-btn {
        padding: 3px 8px;
        font-size: 10px;
    }

    .modern-theme .nav-home-btn i {
        font-size: 11px;
    }
}

/* ========================================================================
   ICON MIGRATION STRATEGY

   This section documents the progressive replacement of old PNG/GIF icons
   with modern Font Awesome icons throughout the IMathAS application.

   ========================================================================

   COMPLETED MIGRATIONS:
   ---------------------
   ✓ Navigation Bar (course/course.php lines 497, 507)
     - Messages: fa-solid fa-envelope
     - Gradebook: fa-solid fa-chart-simple

   ✓ Gear/Options Icons (course/courseshowitems.php)
     - gearsdd.png → fa-solid fa-gear
     - Used in dropdown menus for course items

   ✓ Help Icons (multiple files)
     - help.gif → fa-regular fa-circle-question with .help-icon class
     - Lighter appearance with hover effects
     - See .help-icon styles above

   ✓ Assessment Icons (multiple files)
     - assess.png → fa-solid fa-file-lines with .assessment-icon class
     - assess_tiny.png → fa-solid fa-file-lines with .assessment-icon-sm class
     - Gradient: purple to pink (#8b5cf6 to #ec4899) - matches gradebook
     - Files updated: course/addquestions.php, course/chgassessments2.php,
       course/courseshowitems.php, course/treereader.php, includes/rubric.php

   ✓ Expand/Collapse Icons (multiple files)
     - expand.gif → fa-solid fa-chevron-right with .expand-icon class
     - collapse.gif → fa-solid fa-chevron-down with .collapse-icon class
     - Expand gradient: green (#10b981 to #059669)
     - Collapse gradient: orange (#f59e0b to #d97706)
     - Smooth rotation animation on hover
     - Files updated: course/treereader.php, javascript/general.js
     - Backward compatible with old img tags

   ✓ Attachment/Paperclip Icons (a.attach class)
     - ed_attach.gif → fa-solid fa-paperclip (via ::before pseudo-element)
     - Gradient: blue to teal (#3b82f6 to #06b6d4) - matches messages icon
     - Fun rotation animation on hover (-15deg)
     - Overrides legacy background image in imascore.css, imascore3.css, mathtest.css
     - No HTML changes required - pure CSS override

   ✓ Inline Text Icons (multiple files)
     - inline.png → fa-solid fa-align-left with .inline-icon class
     - inline_tiny.png → fa-solid fa-align-left with .inline-icon-sm class
     - Gradient: green (#10b981 to #059669) - matches expand icon
     - Files updated: course/courseshowitems.php, course/treereader.php

   ✓ PDF Icons (multiple files)
     - pdf.png → fa-solid fa-file-pdf with .pdf-icon class
     - Gradient: red (#ef4444 to #dc2626) - classic PDF red color
     - Files updated: course/courseshowitems.php

   ✓ Web/External Link Icons (multiple files)
     - web.png → fa-solid fa-globe with .web-icon class
     - Gradient: blue (#3b82f6 to #2563eb) - web/link blue color
     - Fun rotation animation on hover (15deg)
     - Files updated: course/courseshowitems.php

   ✓ HTML/Page Icons (multiple files)
     - html.png → fa-solid fa-note-sticky with .html-icon class
     - Gradient: orange (#f59e0b to #d97706) - note/page color
     - Files updated: course/courseshowitems.php


   PRIORITY AREAS FOR FUTURE MIGRATION:
   -------------------------------------

   1. COURSE ACTIONS (Edit, Delete, Add, Move buttons)
      Files to update:
      - course/courseshowitems.php
      - course/course.php (teacher tools)
      - admin/forms.php

      Mapping:
      edit.png          → <i class="fa-solid fa-pen"></i>
      delete.png        → <i class="fa-solid fa-trash"></i>
      add.png           → <i class="fa-solid fa-plus"></i>
      move.png          → <i class="fa-solid fa-arrows-up-down"></i>
      copy.png          → <i class="fa-solid fa-copy"></i>

   2. ITEM TYPE ICONS (Assessment, Forum, Folder, etc.)
      Files to update:
      - course/courseshowitems.php

      Mapping:
      assess.png        → <i class="fa-solid fa-file-lines"></i>
      assess_tiny.png   → <i class="fa-solid fa-file-lines icon-sm"></i>
      forum.png         → <i class="fa-solid fa-comments"></i>
      forum_tiny.png    → <i class="fa-solid fa-comments icon-sm"></i>
      folder.png        → <i class="fa-solid fa-folder"></i>
      folder_tiny.png   → <i class="fa-solid fa-folder icon-sm"></i>
      doc.png           → <i class="fa-solid fa-file"></i>
      doc_tiny.png      → <i class="fa-solid fa-file icon-sm"></i>
      drill.png         → <i class="fa-solid fa-repeat"></i>
      linkedtext.png    → <i class="fa-solid fa-link"></i>

   3. STATUS INDICATORS (Checkmarks, Warnings, etc.)
      Files to update:
      - course/gradebook.php
      - assess2/displayq3.php

      Mapping:
      checkmark.png     → <i class="fa-solid fa-check icon-success"></i>
      x.png             → <i class="fa-solid fa-xmark icon-danger"></i>
      flagfilled.gif    → <i class="fa-solid fa-flag icon-warning"></i>
      flagempty.gif     → <i class="fa-regular fa-flag icon-muted"></i>

   4. NAVIGATION ICONS (Calendar, Menu, etc.)
      Files to update:
      - header.php
      - course/showcalendar.php

      Mapping:
      menu.png          → <i class="fa-solid fa-bars"></i>
      cal.gif           → <i class="fa-solid fa-calendar"></i>
      extlink.png       → <i class="fa-solid fa-arrow-up-right-from-square"></i>


   HOW TO MIGRATE AN ICON:
   -----------------------

   1. Find the old image tag:
      <img src="<?php echo $staticroot; ?>/img/edit.png" alt="Edit">

   2. Replace with Font Awesome icon:
      <i class="fa-solid fa-pen" aria-hidden="true"></i>
      <span class="sr-only">Edit</span>

      OR for inline text:
      <i class="fa-solid fa-pen"></i> Edit

   3. Add utility classes for sizing/color if needed:
      <i class="fa-solid fa-pen icon-sm icon-primary"></i>

   4. Test in both light and dark themes

   5. Verify accessibility (screen readers should still work)


   FONT AWESOME RESOURCES:
   -----------------------
   Icon search:   https://fontawesome.com/search?o=r&m=free
   Documentation: https://fontawesome.com/docs
   CDN version:   6.5.1 (loaded in header.php line 305)

   ======================================================================== */