/* ==========================================================================
   LIQUID GLASS (GLASSMORPHISM) - LUMINOUS, COLORFUL & ANIMATED THEME
   LMS Pintar STEMSI
   ========================================================================== */

/* --- CSS Variables & Design Tokens --- */
:root {
  --lg-font-family: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  
  /* Glass Surfaces */
  --lg-glass-bg: rgba(255, 255, 255, 0.72);
  --lg-glass-bg-subtle: rgba(255, 255, 255, 0.52);
  --lg-glass-bg-card: rgba(255, 255, 255, 0.70);
  --lg-glass-bg-hover: rgba(255, 255, 255, 0.88);
  --lg-glass-bg-drawer: rgba(255, 255, 255, 0.82);
  
  /* Glass Borders */
  --lg-glass-border: 1px solid rgba(255, 255, 255, 0.75);
  --lg-glass-border-subtle: 1px solid rgba(255, 255, 255, 0.45);
  --lg-glass-border-glow: 1px solid rgba(168, 85, 247, 0.4);
  
  /* Glass Filters & Shadows (Optimized for 60/120fps GPU performance) */
  --lg-blur: blur(12px) saturate(150%);
  --lg-blur-heavy: blur(16px) saturate(160%);
  --lg-blur-sm: blur(8px) saturate(140%);
  
  --lg-shadow-sm: 0 4px 20px 0 rgba(31, 38, 135, 0.08), inset 0 1px 1px rgba(255, 255, 255, 0.6);
  --lg-shadow-md: 0 10px 30px 0 rgba(31, 38, 135, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.8);
  --lg-shadow-lg: 0 18px 45px 0 rgba(99, 102, 241, 0.18), 0 4px 16px rgba(0, 0, 0, 0.04), inset 0 1px 1px rgba(255, 255, 255, 0.9);
  --lg-shadow-float: 0 24px 60px 0 rgba(168, 85, 247, 0.24), 0 6px 20px rgba(0, 0, 0, 0.06), inset 0 1px 2px rgba(255, 255, 255, 1);
  
  /* Colorful Liquid Gradients */
  --lg-grad-cosmic: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
  --lg-grad-ocean: linear-gradient(135deg, #06b6d4 0%, #3b82f6 50%, #6366f1 100%);
  --lg-grad-sunset: linear-gradient(135deg, #f43f5e 0%, #fb923c 100%);
  --lg-grad-emerald: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
  --lg-grad-aurora: linear-gradient(135deg, #a855f7 0%, #6366f1 40%, #06b6d4 80%, #10b981 100%);
  --lg-grad-iridescent: linear-gradient(90deg, #ec4899, #8b5cf6, #3b82f6, #06b6d4, #10b981, #ec4899);
  
  /* Accent Colors */
  --lg-color-primary: #6366f1;
  --lg-color-secondary: #a855f7;
  --lg-color-cyan: #06b6d4;
  --lg-color-pink: #ec4899;
}

/* ==========================================================================
   DYNAMIC LIQUID BACKGROUND & HIGH-PERFORMANCE GPU COMPOSITING
   ========================================================================== */
html {
  scroll-behavior: auto !important;
  -webkit-text-size-adjust: 100%;
}

body {
  position: relative;
  min-height: 100vh;
  background-color: #f1f5f9 !important;
  overflow-x: hidden;
  color: #1e293b;
  text-rendering: auto !important;
}

/* Instant Text & Content Appearance on Scroll (Zero Animation / Zero Stagger Lag) */
h1, h2, h3, h4, h5, h6, p, span, a, li,
.coursebox, .card, .activity-item, .section, .content,
.activity, .coursename, .summary, .teacher-name, .activity-item-content {
  animation: none !important;
  transition: none !important;
  opacity: 1 !important;
}

/* Truly Fixed Hardware-Accelerated Liquid Background Canvas
   (Static Rich Mesh: Cached once in GPU memory, zero repaints on scroll/idle) */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: -3;
  pointer-events: none;
  background-color: #f1f5f9;
  background-image: 
    radial-gradient(circle at 10% 10%, rgba(99, 102, 241, 0.18) 0%, rgba(6, 182, 212, 0.10) 35%, transparent 60%),
    radial-gradient(circle at 90% 90%, rgba(236, 72, 153, 0.16) 0%, rgba(168, 85, 247, 0.12) 35%, transparent 60%),
    radial-gradient(circle at 85% 15%, rgba(236, 72, 153, 0.12) 0px, transparent 45%),
    radial-gradient(circle at 15% 85%, rgba(139, 92, 246, 0.12) 0px, transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(16, 185, 129, 0.08) 0%, transparent 40%),
    linear-gradient(135deg, #f8faff 0%, #fdf4ff 35%, #f0fdfa 70%, #f5f3ff 100%) !important;
  background-repeat: no-repeat;
  background-size: cover;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Floating Ambient Morphing Blobs Disabled for Maximum GPU/CPU Performance */
body::after,
#page-wrapper::before,
#page-wrapper::after {
  display: none !important;
}

/* Floating Liquid Orb in Page Wrapper - z-index: auto to prevent subordinate stacking context */
#page-wrapper {
  position: relative;
  z-index: auto !important;
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
}

/* ==========================================================================
   EXECUTIVE LUXURY FROSTED CRYSTAL TOP NAVBAR
   ========================================================================== */
nav.navbar.fixed-top {
  height: 64px !important;
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(14px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(180%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.55) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  padding: 0 1.5rem !important;
  z-index: 35000000 !important;
}

/* Subtle luxury ambient hairline at top edge */
nav.navbar.fixed-top::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1.5px;
  background: linear-gradient(90deg, transparent 0%, rgba(99, 102, 241, 0.25) 25%, rgba(6, 182, 212, 0.3) 50%, rgba(99, 102, 241, 0.25) 75%, transparent 100%) !important;
  opacity: 0.65;
  pointer-events: none !important;
}

/* ==========================================================================
   PRESTIGIOUS EXECUTIVE BRAND LOGO (PINTAR EMBLEM)
   ========================================================================== */
nav.navbar .navbar-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.45rem !important;
  letter-spacing: -0.03em !important;
  text-transform: capitalize !important;
  color: #0f172a !important;
  padding: 0 !important;
  margin-right: 1.8rem !important;
  text-decoration: none !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Unique Pintar Vector Emblem (Graduation Cap + Knowledge Wings + Spark of Genius) */
nav.navbar .navbar-brand::before {
  content: "";
  display: inline-block !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' width='40' height='40' fill='none'%3E%3Cdefs%3E%3ClinearGradient id='pntBg' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%233b82f6'/%3E%3Cstop offset='35%25' stop-color='%234f46e5'/%3E%3Cstop offset='75%25' stop-color='%237c3aed'/%3E%3Cstop offset='100%25' stop-color='%23312e81'/%3E%3C/linearGradient%3E%3ClinearGradient id='pntGold' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23fef08a'/%3E%3Cstop offset='45%25' stop-color='%23fbbf24'/%3E%3Cstop offset='100%25' stop-color='%23d97706'/%3E%3C/linearGradient%3E%3ClinearGradient id='pntSheen' x1='20%25' y1='0%25' x2='80%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23ffffff' stop-opacity='0.55'/%3E%3Cstop offset='50%25' stop-color='%23ffffff' stop-opacity='0.15'/%3E%3Cstop offset='100%25' stop-color='%23ffffff' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cfilter id='pntGlow' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='1.5' result='b'/%3E%3CfeComposite in='SourceGraphic' in2='b' operator='over'/%3E%3C/filter%3E%3C/defs%3E%3Crect x='2' y='2' width='44' height='44' rx='13' fill='url(%23pntBg)'/%3E%3Crect x='2.5' y='2.5' width='43' height='43' rx='12.5' stroke='rgba(255,255,255,0.4)' stroke-width='1.2'/%3E%3Cpath d='M3 16 C3 8.5 8.5 3 16 3 L32 3 C39.5 3 45 8.5 45 16 C45 18 36 26 24 23 C12 20 4 24 3 16 Z' fill='url(%23pntSheen)'/%3E%3Cpath d='M12 32 C17 29.5 20.5 30.5 24 33 C27.5 30.5 31 29.5 36 32 C36 34.5 27.5 36.5 24 38 C20.5 36.5 12 34.5 12 32 Z' fill='%23ffffff' fill-opacity='0.95'/%3E%3Cpath d='M24 33 L24 37.8' stroke='%23cbd5e1' stroke-width='1' stroke-linecap='round'/%3E%3Cpath d='M16 23 L16 27 C16 29.5 19.5 31 24 31 C28.5 31 32 29.5 32 27 L32 23 C29 24.5 26.5 25.2 24 25.2 C21.5 25.2 19 24.5 16 23 Z' fill='%23e0e7ff'/%3E%3Cpolygon points='24,13 39,20 24,27 9,20' fill='%23ffffff'/%3E%3Cpolygon points='24,27 39,20 39,21.5 24,28.5 9,21.5 9,20' fill='%23c7d2fe'/%3E%3Ccircle cx='24' cy='20' r='2' fill='url(%23pntGold)'/%3E%3Ccircle cx='24' cy='20' r='0.9' fill='%23ffffff'/%3E%3Cpath d='M25.5 20.8 Q33 21 36.5 25.5 L36 30' stroke='url(%23pntGold)' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='36' cy='30.5' r='1.6' fill='url(%23pntGold)'/%3E%3Cg filter='url(%23pntGlow)'%3E%3Cpath d='M24 6 Q24 11 27 11 Q24 11 24 16 Q24 11 21 11 Q24 11 24 6 Z' fill='url(%23pntGold)'/%3E%3Ccircle cx='24' cy='11' r='1.2' fill='%23ffffff'/%3E%3C/g%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(79, 70, 229, 0.35), 0 2px 6px rgba(15, 23, 42, 0.08) !important;
  flex-shrink: 0 !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease !important;
}

/* Hide fallback ::before if inline SVG is present */
nav.navbar .navbar-brand.has-custom-logo::before,
nav.navbar .navbar-brand:has(.pintar-logo-emblem)::before {
  display: none !important;
}

nav.navbar .navbar-brand,
nav.navbar .navbar-brand:focus,
nav.navbar .navbar-brand:active,
nav.navbar .navbar-brand:visited,
nav.navbar .navbar-brand.aabtn,
nav.navbar .navbar-brand.aabtn:focus,
nav.navbar .navbar-brand.aabtn:active,
nav.navbar .navbar-toggler,
nav.navbar .navbar-toggler:focus,
nav.navbar .navbar-toggler:active {
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

.pintar-logo-emblem {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  background: transparent !important;
  background-color: transparent !important;
  overflow: visible !important;
  margin-right: 12px !important;
  flex-shrink: 0 !important;
  border: none !important;
  box-shadow: none !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
}

.pintar-img-logo {
  display: block !important;
  width: 46px !important;
  height: 46px !important;
  max-width: 46px !important;
  max-height: 46px !important;
  object-fit: contain !important;
  background: transparent !important;
  background-color: transparent !important;
  mix-blend-mode: normal !important;
  border: none !important;
  outline: none !important;
  pointer-events: none !important;
  position: relative !important;
  z-index: 5 !important;
  image-rendering: auto !important;
  image-rendering: smooth !important;
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
  transform: translateZ(0) !important;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.12)) !important;
  box-shadow: none !important;
  animation: none !important;
  transition: transform 0.2s ease, filter 0.2s ease !important;
}

/* Hilangkan seluruh animasi dan ornamen bergerak */
.pintar-circular-aura,
.pintar-circular-orbit,
.pintar-orbit-comet,
.pintar-sparkle-star {
  display: none !important;
  animation: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}

/* Brand Text with Moving Light Gradient */
.pintar-brand-name {
  display: inline-block !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.55rem !important;
  letter-spacing: -0.025em !important;
  background: linear-gradient(
    120deg,
    #1e3a8a 0%,
    #2563eb 20%,
    #38bdf8 40%,
    #4f46e5 60%,
    #2563eb 80%,
    #1e3a8a 100%
  ) !important;
  background-size: 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  transition: all 0.3s ease !important;
}

nav.navbar .navbar-brand:hover,
nav.navbar .navbar-brand:focus,
nav.navbar .navbar-brand:active,
nav.navbar .navbar-brand.aabtn:hover,
nav.navbar .navbar-brand.aabtn:focus,
nav.navbar .navbar-brand.aabtn:active {
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  background-color: transparent !important;
}

nav.navbar .navbar-brand:hover .pintar-img-logo,
nav.navbar .navbar-brand:focus .pintar-img-logo,
nav.navbar .navbar-brand:active .pintar-img-logo {
  filter: none !important;
  transform: none !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  mix-blend-mode: normal !important;
  outline: none !important;
}

nav.navbar .navbar-brand:hover .pintar-img-logo,
nav.navbar .navbar-brand:focus .pintar-img-logo {
  filter: drop-shadow(0 2px 5px rgba(37, 99, 235, 0.18)) !important;
  transform: translateY(-0.5px) !important;
}

nav.navbar .navbar-brand:hover .pintar-logo-emblem,
nav.navbar .navbar-brand:focus .pintar-logo-emblem,
nav.navbar .navbar-brand:active .pintar-logo-emblem {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  outline: none !important;
}

nav.navbar .navbar-brand:active {
  transform: scale(0.99) !important;
}

/* Navigation Container */
.primary-navigation .navigation,
.navbar-nav {
  align-items: center !important;
}

/* Nav Links - Refined Haute Couture Style */
.primary-navigation .navigation .nav-link,
.navbar-nav .nav-link {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 0.885rem !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  color: #475569 !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  margin: 0 3px !important;
  position: relative !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Hover - Quiet Luxury Glass Sheen */
.primary-navigation .navigation .nav-link:hover,
.navbar-nav .nav-link:hover {
  background: rgba(15, 23, 42, 0.04) !important;
  color: #0f172a !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ACTIVE LINK - SOPHISTICATED, LUXURY, HIGH-END (NO CANDY/PLAYFUL PILLS) */
.primary-navigation .navigation .nav-link.active,
.navbar-nav .nav-link.active {
  background: rgba(15, 23, 42, 0.055) !important;
  color: #0f172a !important;
  font-weight: 600 !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  transform: none !important;
}

/* Elegant Underline Indicator Bar for Active Link */
.primary-navigation .navigation .nav-link.active::after,
.navbar-nav .nav-link.active::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 18%;
  right: 18%;
  height: 2.5px;
  background: linear-gradient(90deg, #3730a3 0%, #4f46e5 50%, #0284c7 100%) !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.45) !important;
}

/* Right Utility Section */
#usernavigation {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

#usernavigation .nav-link {
  color: #475569 !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
  transition: all 0.2s ease !important;
}

#usernavigation .nav-link:hover {
  background: rgba(15, 23, 42, 0.04) !important;
  color: #0f172a !important;
}

/* Clean User Menu Toggle - NO Blue Highlight Box */
.usermenu,
.usermenu-container,
.usermenu .dropdown,
.usermenu .dropdown.show,
.usermenu .btn,
.usermenu .dropdown-toggle,
.usermenu .dropdown.show > .dropdown-toggle,
.usermenu .dropdown-toggle[aria-expanded="true"],
#user-menu-toggle,
.dropdown.show > #user-menu-toggle,
#usernavigation .usermenu .dropdown-toggle,
#usernavigation .usermenu a.btn {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
  padding: 0 !important;
  margin: 0 !important;
  outline: none !important;
  color: inherit !important;
}

.usermenu .userbutton {
  display: inline-flex !important;
  align-items: center !important;
  background: transparent !important;
  padding: 2px 4px !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  border: none !important;
}

/* Luxury Crystal User Profile Picture Ring */
.usermenu .userpicture,
.navbar .userpicture,
.usermenu .avatars .avatar img,
.usermenu .avatars .avatar.current img {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  background: transparent !important;
  border: 2px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1), 0 0 0 1px rgba(99, 102, 241, 0.18) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease !important;
}

.usermenu:hover .userpicture,
.usermenu .dropdown-toggle:hover .userpicture,
.navbar .userpicture:hover {
  transform: scale(1.06) !important;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.22), 0 0 0 2px rgba(99, 102, 241, 0.35) !important;
}

/* User Menu Dropdown Toggle Text */
.usermenu .dropdown-toggle {
  color: #0f172a !important;
  font-weight: 600 !important;
  font-size: 0.885rem !important;
}

/* ==========================================================================
   PRESTIGIOUS LIQUID GLASS NOTIFICATIONS & POPOVER REGION (COMPACT & SLEEK)
   ========================================================================== */
.popover-region,
#usernavigation .popover-region {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  overflow: visible !important;
}

/* Bell & Message Toggle Button */
.popover-region-toggle,
#usernavigation .popover-region .popover-region-toggle,
.navbar .popover-region .popover-region-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 11px !important;
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(226, 232, 240, 0.85) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
  color: #475569 !important;
  padding: 0 !important;
  margin: 0 3px !important;
  position: relative !important;
  overflow: visible !important; /* Never clip floating badge */
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.popover-region:not(.collapsed) .popover-region-toggle,
.popover-region-toggle:hover,
#usernavigation .popover-region .popover-region-toggle:hover {
  background: rgba(99, 102, 241, 0.12) !important;
  border-color: rgba(99, 102, 241, 0.3) !important;
  color: #4f46e5 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.18) !important;
}

.popover-region-toggle .icon {
  margin: 0 !important;
  font-size: 15px !important;
  color: inherit !important;
  line-height: 1 !important;
}

/* Disable old clunky pseudo-arrows */
.popover-region-toggle::before,
.popover-region-toggle::after {
  display: none !important;
}

/* THE BADGE: FLOATS PROUDLY OUTSIDE AT TOP-RIGHT CORNER (NOT SUBMERGED) */
.navbar .count-container,
.navbar-nav .count-container,
.popover-region .count-container,
#usernavigation .count-container,
.popover-region-toggle .count-container {
  position: absolute !important;
  top: -4px !important;
  right: -5px !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 100 !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 4px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%) !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
  line-height: 18px !important;
  text-align: center !important;
  box-shadow: 0 2px 6px rgba(225, 29, 72, 0.45), 0 0 0 2px #ffffff !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
  box-sizing: border-box !important;
}

.count-container.hidden {
  display: none !important;
}

/* The Popover Card Container - Compact & Sleek */
.popover-region-container {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  width: 350px !important;
  max-width: calc(100vw - 20px) !important;
  height: auto !important;
  max-height: calc(85vh - 70px) !important;
  background: rgba(255, 255, 255, 0.97) !important;
  backdrop-filter: blur(24px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(190%) !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 36px -8px rgba(15, 23, 42, 0.16), 0 6px 16px -4px rgba(99, 102, 241, 0.08), inset 0 1px 0 #ffffff !important;
  overflow: hidden !important;
  z-index: 35000010 !important;
  animation: popoverFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes popoverFadeIn {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Compact Header Container */
.popover-region-header-container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: auto !important;
  min-height: 44px !important;
  padding: 10px 14px !important;
  background: linear-gradient(135deg, rgba(248, 250, 252, 0.95), rgba(241, 245, 249, 0.8)) !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
  box-sizing: border-box !important;
}

.popover-region-header-text {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  letter-spacing: -0.02em !important;
  line-height: normal !important;
  margin: 0 !important;
  float: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.popover-region-header-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  float: none !important;
}

.popover-region-header-actions > *,
.popover-region-header-actions a.mark-all-read-button,
.popover-region-header-actions a[href*="preferences"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border-radius: 8px !important;
  background: rgba(99, 102, 241, 0.08) !important;
  border: 1px solid rgba(99, 102, 241, 0.14) !important;
  color: #4f46e5 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-decoration: none !important;
  transition: all 0.18s ease !important;
}

.popover-region-header-actions > *:hover,
.popover-region-header-actions a.mark-all-read-button:hover,
.popover-region-header-actions a[href*="preferences"]:hover {
  background: #4f46e5 !important;
  color: #ffffff !important;
  border-color: #4f46e5 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 10px rgba(79, 70, 229, 0.25) !important;
}

.popover-region-header-actions .icon {
  width: 13px !important;
  height: 13px !important;
  margin: 0 !important;
  color: inherit !important;
}

/* Compact Scrollable Content Container */
.popover-region-content-container {
  height: auto !important;
  max-height: 340px !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(99, 102, 241, 0.2) transparent !important;
}

.popover-region-content-container::-webkit-scrollbar {
  width: 4px !important;
}

.popover-region-content-container::-webkit-scrollbar-track {
  background: transparent !important;
}

.popover-region-content-container::-webkit-scrollbar-thumb {
  background: rgba(99, 102, 241, 0.2) !important;
  border-radius: 999px !important;
}

.popover-region-content-container::-webkit-scrollbar-thumb:hover {
  background: rgba(99, 102, 241, 0.45) !important;
}

/* Compact Notification Item */
.content-item-container {
  display: block !important;
  padding: 10px 14px !important;
  margin: 0 !important;
  border-bottom: 1px solid rgba(241, 245, 249, 0.9) !important;
  background: transparent !important;
  text-decoration: none !important;
  position: relative !important;
  transition: all 0.18s ease !important;
}

.content-item-container:hover {
  background: rgba(99, 102, 241, 0.05) !important;
}

/* Unread Notification Highlights */
.content-item-container.unread {
  background: rgba(238, 242, 255, 0.55) !important;
  border-left: 3px solid #6366f1 !important;
}

.content-item-container.unread:hover {
  background: rgba(238, 242, 255, 0.85) !important;
}

.content-item-container .context-link,
.content-item-container > div[tabindex="0"] {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  text-decoration: none !important;
  color: inherit !important;
  position: relative !important;
}

.content-item-container .content-item-body {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin: 0 !important;
  width: 100% !important;
}

/* Compact Notification Icon Badge */
.content-item-container.notification .notification-image,
.content-item-container .notification-image {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(168, 85, 247, 0.16)) !important;
  border: 1px solid rgba(99, 102, 241, 0.18) !important;
  float: none !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

.content-item-container.notification .notification-image img,
.content-item-container .notification-image img,
.content-item-container .notification-image .icon {
  width: 14px !important;
  height: 14px !important;
  object-fit: contain !important;
  margin: 0 !important;
}

/* Compact Notification Text Message */
.content-item-container .notification-message {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 12.5px !important;
  line-height: 1.38 !important;
  color: #1e293b !important;
  font-weight: 500 !important;
  width: 100% !important;
  margin: 0 !important;
  letter-spacing: -0.01em !important;
  word-break: break-word !important;
}

.content-item-container.unread .notification-message {
  font-weight: 700 !important;
  color: #0f172a !important;
}

/* Footer Section of Item (Timestamp & View full notification) */
.content-item-container .content-item-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-left: 38px !important;
  margin-top: 2px !important;
}

.content-item-container .timestamp {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #94a3b8 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  line-height: 1.2 !important;
}

.content-item-container .view-more {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #4f46e5 !important;
  background: rgba(99, 102, 241, 0.08) !important;
  border: 1px solid rgba(99, 102, 241, 0.14) !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
  line-height: 16px !important;
}

.content-item-container .view-more:hover {
  background: #4f46e5 !important;
  color: #ffffff !important;
  border-color: #4f46e5 !important;
}

/* "See all" Bottom Footer Container */
.popover-region-footer-container {
  padding: 8px 14px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.95)) !important;
  border-top: 1px solid rgba(226, 232, 240, 0.8) !important;
  height: auto !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

.see-all-link {
  text-decoration: none !important;
  display: block !important;
}

.popover-region-seeall-text {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 7px 12px !important;
  border-radius: 9px !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #4f46e5 !important;
  background: rgba(99, 102, 241, 0.06) !important;
  border: 1px solid rgba(99, 102, 241, 0.12) !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.see-all-link:hover .popover-region-seeall-text {
  background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 3px 10px rgba(79, 70, 229, 0.25) !important;
}

/* Empty State Message */
.popover-region-content-container .empty-message {
  padding: 28px 16px !important;
  text-align: center !important;
  font-family: 'Inter', sans-serif !important;
  color: #94a3b8 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

/* Messages Popover Avatar Support */
.popover-region-messages .profile-image-container {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  border: 2px solid rgba(99, 102, 241, 0.25) !important;
  flex-shrink: 0 !important;
  float: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.popover-region-messages .profile-image-container img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
}

/* Mobile Responsiveness */
@media (max-width: 480px) {
  .popover-region-container {
    position: fixed !important;
    top: 64px !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: none !important;
    border-radius: 14px !important;
  }
}

/* ==========================================================================
   TOP NAVBAR HAMBURGER / DRAWER BUTTON (BOX 1)
   ========================================================================== */
.navbar-toggler,
button[data-toggler="drawers"][data-target="theme_boost-drawers-primary"] {
  width: 40px !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  color: #334155 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08) !important;
  margin-right: 12px !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 35000005 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  user-select: none !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.navbar-toggler:hover,
button[data-toggler="drawers"][data-target="theme_boost-drawers-primary"]:hover {
  background: #ffffff !important;
  color: #4f46e5 !important;
  border-color: rgba(99, 102, 241, 0.45) !important;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.18) !important;
  transform: translateY(-1px) scale(1.02) !important;
}

.navbar-toggler:active,
button[data-toggler="drawers"][data-target="theme_boost-drawers-primary"]:active {
  transform: translateY(0) scale(0.96) !important;
}

.navbar-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' stroke='%23334155' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'%3E%3Cline x1='3.5' y1='6.5' x2='20.5' y2='6.5'/%3E%3Cline x1='3.5' y1='12' x2='20.5' y2='12'/%3E%3Cline x1='3.5' y1='17.5' x2='20.5' y2='17.5'/%3E%3C/svg%3E") !important;
  width: 20px !important;
  height: 20px !important;
  transition: filter 0.2s ease !important;
  pointer-events: none !important;
}

.navbar-toggler:hover .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' stroke='%234f46e5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'%3E%3Cline x1='3.5' y1='6.5' x2='20.5' y2='6.5'/%3E%3Cline x1='3.5' y1='12' x2='20.5' y2='12'/%3E%3Cline x1='3.5' y1='17.5' x2='20.5' y2='17.5'/%3E%3C/svg%3E") !important;
}

/* ==========================================================================
   COURSE INDEX & BLOCK DRAWER TOGGLE CONTROLS (LIQUID GLASS SQUIRCLE)
   ========================================================================== */
/* Integrated Course Index Button in Secondary Navigation */
.secondary-navigation .drawer-left-toggle,
.drawer-toggler.drawer-left-toggle {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  bottom: auto !important;
  right: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  margin-right: 14px !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  z-index: 105 !important;
}

.secondary-navigation .drawer-left-toggle .btn,
.course-index-toggle-btn {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1.5px solid rgba(226, 232, 240, 0.95) !important;
  color: #4f46e5 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.07), 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  overflow: hidden !important;
  position: relative !important;
}

.secondary-navigation .drawer-left-toggle .btn .icon,
.secondary-navigation .drawer-left-toggle .btn img.icon,
.secondary-navigation .drawer-left-toggle .btn i,
.course-index-toggle-btn .icon,
.course-index-toggle-btn img.icon {
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  color: #4f46e5 !important;
  transition: transform 0.2s ease, filter 0.2s ease !important;
}

.secondary-navigation .drawer-left-toggle .btn:hover,
.course-index-toggle-btn:hover {
  background: linear-gradient(135deg, #4338ca 0%, #6366f1 100%) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35) !important;
}

.secondary-navigation .drawer-left-toggle .btn:hover .icon,
.secondary-navigation .drawer-left-toggle .btn:hover img.icon,
.course-index-toggle-btn:hover .icon,
.course-index-toggle-btn:hover img.icon {
  filter: brightness(0) invert(1) !important;
  transform: scale(1.08) !important;
}

.secondary-navigation .drawer-left-toggle .btn:active,
.course-index-toggle-btn:active {
  transform: translateY(0px) scale(0.96) !important;
}

/* Integrated Right Block Drawer Toggle in Secondary Navigation */
.secondary-navigation .drawer-right-toggle {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  margin-left: 12px !important;
  margin-bottom: 0 !important;
  flex-shrink: 0 !important;
}

.secondary-navigation .drawer-right-toggle .btn,
.block-drawer-toggle-btn {
  width: 42px !important;
  min-width: 42px !important;
  height: 40px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1.5px solid rgba(226, 232, 240, 0.95) !important;
  color: #4f46e5 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.07), 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  cursor: pointer !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  overflow: hidden !important;
  position: relative !important;
}

.secondary-navigation .drawer-right-toggle .btn:hover,
.block-drawer-toggle-btn:hover {
  background: linear-gradient(135deg, #4338ca 0%, #6366f1 100%) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  transform: translateY(-2px) scale(1.04) !important;
  box-shadow: 0 6px 18px rgba(79, 70, 229, 0.35) !important;
}

.secondary-navigation .drawer-right-toggle .btn:hover .icon,
.block-drawer-toggle-btn:hover .icon {
  filter: brightness(0) invert(1) !important;
  transform: scale(1.08) !important;
}

/* Executive Header Utility Bar (For Pages with/without Secondary Navigation) */
.drawer-toggles,
.drawer-toggles.executive-header-bar {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: 6px 0 16px 0 !important;
  padding: 0 !important;
  z-index: 95 !important;
  gap: 12px !important;
}

.drawer-toggles .drawer-toggles-left {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.drawer-toggles .drawer-toggler,
.drawer-toggles .drawer-left-toggle,
.drawer-toggles .drawer-right-toggle {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  z-index: auto !important;
  pointer-events: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Executive Course Index Pill Button */
.drawer-toggles .executive-course-index-btn,
.executive-course-index-btn {
  width: auto !important;
  min-width: auto !important;
  max-width: none !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 16px 0 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  border: 1.5px solid rgba(203, 213, 225, 0.9) !important;
  color: #1e1b4b !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  cursor: pointer !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

.drawer-toggles .executive-course-index-btn:hover,
.executive-course-index-btn:hover {
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%) !important;
  border-color: #4f46e5 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(79, 70, 229, 0.3) !important;
  transform: translateY(-1px) !important;
}

.executive-course-index-btn .toggle-pill-icon {
  width: 18px !important;
  height: 18px !important;
  display: inline-block !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='2' y='2' width='20' height='20' rx='5.5' fill='%23eef2ff' stroke='%236366f1' stroke-width='1.5'/%3E%3Cpath d='M7 7.5h10M7 11.5h10M7 15.5h6' stroke='%234f46e5' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='16.5' cy='15.5' r='1.2' fill='%236366f1'/%3E%3C/svg%3E") !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
}

.drawer-toggles .executive-course-index-btn:hover .toggle-pill-icon,
.executive-course-index-btn:hover .toggle-pill-icon {
  filter: brightness(0) invert(1) !important;
  transform: scale(1.1) !important;
}

.executive-course-index-btn .toggle-pill-label {
  display: inline !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  color: inherit !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* Header Divider between button and breadcrumbs */
.executive-header-divider {
  display: inline-block !important;
  width: 1.5px !important;
  height: 20px !important;
  background: rgba(203, 213, 225, 0.75) !important;
  margin: 0 4px !important;
  flex-shrink: 0 !important;
}

/* Executive Block Toggle Pill Button */
.drawer-toggles .executive-block-btn,
.executive-block-btn {
  width: auto !important;
  min-width: auto !important;
  max-width: none !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 14px 0 11px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1.5px solid rgba(226, 232, 240, 0.95) !important;
  color: #475569 !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.83rem !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05) !important;
  cursor: pointer !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

.drawer-toggles .executive-block-btn:hover,
.executive-block-btn:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.09) !important;
  transform: translateY(-1px) !important;
}

.executive-block-btn .toggle-pill-icon.block-icon {
  width: 17px !important;
  height: 17px !important;
  display: inline-block !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236366f1' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3' ry='3'/%3E%3Cline x1='15' y1='3' x2='15' y2='21'/%3E%3C/svg%3E") !important;
  flex-shrink: 0 !important;
}

.executive-block-btn .toggle-pill-label {
  display: inline !important;
  font-size: 0.83rem !important;
  font-weight: 600 !important;
  color: inherit !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* Close buttons inside open drawers */
.drawer .drawerheader .drawertoggle,
.drawer .drawerheader .btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: rgba(15, 23, 42, 0.04) !important;
  border: 1px solid rgba(226, 232, 240, 0.8) !important;
  color: #475569 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
}

.drawer .drawerheader .drawertoggle:hover,
.drawer .drawerheader .btn:hover {
  background: #ffffff !important;
  color: #ef4444 !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15) !important;
  transform: scale(1.05) !important;
}

/* ==========================================================================
   PREMIUM THREE-DOTS ACTION MENUS (TITIK TIGA MENU)
   ========================================================================== */
.action-menu .dropdown-toggle:not(.dropdown-item),
a[id^="action-menu-toggle-"],
.activity-actions .action-menu .dropdown-toggle:not(.dropdown-item),
.section_action_menu .dropdown-toggle:not(.dropdown-item),
.cm_action_menu .dropdown-toggle:not(.dropdown-item),
.course-section-header .action-menu .dropdown-toggle:not(.dropdown-item),
.moodle-actionmenu .dropdown-toggle:not(.dropdown-item) {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(248, 250, 252, 0.85) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  color: #475569 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  padding: 0 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.action-menu .dropdown-toggle:not(.dropdown-item)::after,
a[id^="action-menu-toggle-"]::after {
  display: none !important; /* Hide bootstrap default caret down arrow on 3-dots */
}

.action-menu .dropdown-toggle:not(.dropdown-item) .icon,
.action-menu .dropdown-toggle:not(.dropdown-item) img.icon,
.action-menu .dropdown-toggle:not(.dropdown-item) i,
a[id^="action-menu-toggle-"] .icon,
a[id^="action-menu-toggle-"] img.icon,
a[id^="action-menu-toggle-"] i {
  font-size: 15px !important;
  line-height: 1 !important;
  margin: 0 !important;
  color: #475569 !important;
  transition: all 0.2s ease !important;
}

.action-menu .dropdown-toggle:not(.dropdown-item):hover,
a[id^="action-menu-toggle-"]:hover,
.activity-actions .action-menu .dropdown-toggle:not(.dropdown-item):hover,
.section_action_menu .dropdown-toggle:not(.dropdown-item):hover,
.cm_action_menu .dropdown-toggle:not(.dropdown-item):hover {
  background: #ffffff !important;
  color: #4f46e5 !important;
  border-color: rgba(99, 102, 241, 0.45) !important;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.18) !important;
  transform: translateY(-1px) scale(1.05) !important;
}

.action-menu .dropdown-toggle:not(.dropdown-item):hover .icon,
.action-menu .dropdown-toggle:not(.dropdown-item):hover i,
a[id^="action-menu-toggle-"]:hover .icon,
a[id^="action-menu-toggle-"]:hover i {
  color: #4f46e5 !important;
}

/* Active / Expanded Dropdown Toggle State (Strictly for Course Action Menus, NOT Subpanel Items) */
.action-menu.show > .menubar > .dropdown > .dropdown-toggle:not(.dropdown-item),
.action-menu.show > .dropdown > .dropdown-toggle:not(.dropdown-item),
.action-menu .dropdown-toggle[aria-expanded="true"]:not(.dropdown-item),
a[id^="action-menu-toggle-"][aria-expanded="true"],
.course-section .dropdown.show > .dropdown-toggle:not(.dropdown-item),
.activity-actions .dropdown.show > .dropdown-toggle:not(.dropdown-item),
.section_action_menu .dropdown.show > .dropdown-toggle:not(.dropdown-item),
.cm_action_menu .dropdown.show > .dropdown-toggle:not(.dropdown-item) {
  background: rgba(99, 102, 241, 0.14) !important;
  color: #4f46e5 !important;
  border: 1.5px solid #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2), 0 4px 12px rgba(99, 102, 241, 0.12) !important;
  transform: translateY(-1px) !important;
}

.action-menu.show > .menubar > .dropdown > .dropdown-toggle:not(.dropdown-item) .icon,
.action-menu.show > .menubar > .dropdown > .dropdown-toggle:not(.dropdown-item) i,
a[id^="action-menu-toggle-"][aria-expanded="true"] .icon,
a[id^="action-menu-toggle-"][aria-expanded="true"] i {
  color: #4f46e5 !important;
}

.action-menu.show > .menubar > .dropdown > .dropdown-toggle:not(.dropdown-item) img.icon,
a[id^="action-menu-toggle-"][aria-expanded="true"] img.icon {
  filter: none !important;
}

/* Action Menu Subpanels (Mode grup, Availability, Roles, etc.) */
.action-menu .dropdown-subpanel {
  position: relative !important;
  width: 100% !important;
  display: block !important;
}

.action-menu .dropdown-subpanel .dropdown-item,
.action-menu .dropdown-subpanel a.dropdown-toggle,
.dropdown-menu .dropdown-subpanel .dropdown-item {
  width: 100% !important;
  height: auto !important;
  min-width: 100% !important;
  max-width: 100% !important;
  border-radius: 8px !important;
  padding: 9px 14px !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: #334155 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  transform: none !important;
  cursor: pointer !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

.action-menu .dropdown-subpanel .dropdown-item:hover,
.action-menu .dropdown-subpanel .dropdown-item:focus,
.action-menu .dropdown-subpanel .dropdown-item[aria-expanded="true"],
.action-menu .dropdown-subpanel.content-displayed > .dropdown-item {
  background: rgba(99, 102, 241, 0.08) !important;
  color: #4f46e5 !important;
  border: none !important;
  box-shadow: none !important;
  transform: translateX(2px) !important;
}

.action-menu .dropdown-subpanel .dropdown-item .icon,
.action-menu .dropdown-subpanel .dropdown-item i,
.action-menu .dropdown-subpanel .dropdown-item img.icon {
  margin-right: 10px !important;
  font-size: 14px !important;
  color: #64748b !important;
  width: 16px !important;
  text-align: center !important;
  filter: none !important;
}

.action-menu .dropdown-subpanel .dropdown-item:hover .icon,
.action-menu .dropdown-subpanel .dropdown-item:hover i,
.action-menu .dropdown-subpanel .dropdown-item[aria-expanded="true"] .icon,
.action-menu .dropdown-subpanel .dropdown-item[aria-expanded="true"] i {
  color: #4f46e5 !important;
}

.action-menu .dropdown-subpanel .dropdown-item .menu-action-text {
  flex: 1 1 auto !important;
  text-align: left !important;
  display: inline-block !important;
  color: inherit !important;
}

/* Ensure the submenu chevron is visible on the right */
.action-menu .dropdown-subpanel .dropdown-item::after {
  display: inline-block !important;
  content: "" !important;
  width: 6px !important;
  height: 6px !important;
  border-top: 2px solid #94a3b8 !important;
  border-right: 2px solid #94a3b8 !important;
  transform: rotate(45deg) !important;
  margin-left: auto !important;
  margin-right: 2px !important;
  vertical-align: middle !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.action-menu .dropdown-subpanel .dropdown-item:hover::after,
.action-menu .dropdown-subpanel .dropdown-item[aria-expanded="true"]::after {
  border-top-color: #4f46e5 !important;
  border-right-color: #4f46e5 !important;
}

/* Flyout Submenu Content */
.action-menu .dropdown-subpanel-content,
.dropdown-menu .dropdown-subpanel-content {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 45px -8px rgba(15, 23, 42, 0.28), 0 8px 16px -4px rgba(15, 23, 42, 0.15) !important;
  padding: 8px !important;
  z-index: 100000005 !important;
  min-width: 220px !important;
}

/* Group Mode Indicator Button on Activity Card */
.activity-groupmode-info {
  display: inline-flex !important;
  align-items: center !important;
  margin-right: 6px !important;
}

.activity-groupmode-info .groupmode-information,
.activity-groupmode-info .btn.groupmode-information {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(248, 250, 252, 0.85) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  color: #475569 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  padding: 0 !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

.activity-groupmode-info .groupmode-information:hover,
.activity-groupmode-info .btn.groupmode-information:hover {
  background: #ffffff !important;
  color: #4f46e5 !important;
  border-color: rgba(99, 102, 241, 0.45) !important;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.18) !important;
  transform: translateY(-1px) scale(1.05) !important;
}

.activity-groupmode-info .groupmode-information .icon,
.activity-groupmode-info .groupmode-information i {
  font-size: 14px !important;
  margin: 0 !important;
  color: inherit !important;
}

.activity-groupmode-info .groupmode-information::after {
  display: none !important;
}

.activity-groupmode-info .groupmode-icon-info {
  display: none !important;
}

/* Luxury Semi-Transparent Mica Dropdown Menus */
.dropdown-menu {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.88) 0%, rgba(248, 250, 255, 0.82) 100%) !important;
  backdrop-filter: blur(28px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(200%) !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  border-radius: 16px !important;
  box-shadow: 
    0 20px 45px -8px rgba(15, 23, 42, 0.18), 
    0 8px 24px -4px rgba(99, 102, 241, 0.12),
    inset 0 1px 1px rgba(255, 255, 255, 0.9) !important;
  padding: 8px !important;
  overflow: visible !important;
  z-index: 50000000 !important;
}

.dropdown-item {
  border-radius: 10px !important;
  padding: 8px 14px !important;
  margin: 2px 0 !important;
  font-family: 'Outfit', 'Inter', sans-serif !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: linear-gradient(135deg, rgba(238, 242, 255, 0.95) 0%, rgba(245, 243, 255, 0.9) 100%) !important;
  color: #4338ca !important;
  border: 1px solid rgba(199, 210, 254, 0.8) !important;
  transform: translateX(3px) !important;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.12) !important;
}

/* ==========================================================================
   MAIN CONTENT & INNER PAGE GLASS CONTAINER
   ========================================================================== */
#page,
#page.drawers,
body #page.drawers,
body.limitedwidth #page.drawers,
body.mediumwidth #page.drawers {
  background: transparent !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  flex: 1 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: calc(100vh - 64px) !important;
  scroll-behavior: smooth !important;
  -webkit-overflow-scrolling: touch !important;
}

@media (min-width: 768px) {
  #page,
  #page.drawers,
  body #page.drawers,
  body.limitedwidth #page.drawers,
  body.mediumwidth #page.drawers {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* Universal Main Inner Card Across All Moodle Layouts */
#topofscroll,
#topofscroll.main-inner,
.main-inner,
#page.drawers .main-inner,
#page .main-inner,
.pagelayout-standard #page.drawers .main-inner,
body.limitedwidth #page.drawers .main-inner,
body.mediumwidth #page.drawers .main-inner,
.pagelayout-course #page.drawers .main-inner,
.pagelayout-incourse #page.drawers .main-inner,
.pagelayout-mydashboard #page.drawers .main-inner,
.pagelayout-admin #page.drawers .main-inner,
.pagelayout-frontpage #page.drawers .main-inner {
  background: var(--lg-glass-bg) !important;
  backdrop-filter: var(--lg-blur) !important;
  -webkit-backdrop-filter: var(--lg-blur) !important;
  border: var(--lg-glass-border) !important;
  border-radius: 24px !important;
  box-shadow: var(--lg-shadow-md) !important;
  padding: 28px !important;
  padding-bottom: 45px !important;
  margin-top: 20px !important;
  margin-bottom: 40px !important;
  max-width: 1360px !important;
  width: calc(100% - 3.5rem) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  position: relative;
  overflow: visible !important;
  transition: box-shadow 0.3s ease !important;
}

@media (max-width: 767.98px) {
  #topofscroll,
  #topofscroll.main-inner,
  .main-inner,
  #page.drawers .main-inner,
  #page .main-inner {
    width: calc(100% - 1.5rem) !important;
    padding: 20px 14px !important;
    border-radius: 20px !important;
  }
}

/* Subtle Specular Glow at Top of Main Card */
#topofscroll.main-inner::before,
.main-inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.9) 20%, rgba(168, 85, 247, 0.6) 50%, rgba(6, 182, 212, 0.6) 80%, transparent 100%);
  pointer-events: none;
}

/* Elimination of Sharp White Boxes: Make Inner Content Wrappers Transparent */
#page-content,
#region-main-box,
#region-main,
div[role="main"],
.pagelayout-course #region-main,
.pagelayout-incourse #region-main,
.pagelayout-standard #region-main,
.pagelayout-mydashboard #region-main,
.course-content,
.course-content ul.topics,
.course-content ul.weeks,
.course-content ul.sections {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 24px !important;
}

/* Single-Column & Popup Layout Support (Ensures rounded glass card if .main-inner is absent) */
body:not(.pagelayout-login) .pagelayout-columns1 #region-main,
body:not(.pagelayout-login) .pagelayout-popup #region-main,
body:not(.pagelayout-login) #page.container-fluid:not(.drawers) #region-main {
  background: var(--lg-glass-bg) !important;
  backdrop-filter: var(--lg-blur) !important;
  -webkit-backdrop-filter: var(--lg-blur) !important;
  border: var(--lg-glass-border) !important;
  border-radius: 24px !important;
  box-shadow: var(--lg-shadow-md) !important;
  padding: 28px !important;
  margin: 20px auto 40px !important;
  max-width: 1360px !important;
}

/* ==========================================================================
   SECONDARY NAVIGATION TABS (EXECUTIVE FROSTED GLASS DOCK & RADIANT PILLS)
   ========================================================================== */
.secondary-navigation {
  background: transparent !important;
  margin-top: 8px !important;
  margin-bottom: 22px !important;
  padding: 0 !important;
  position: relative !important;
  z-index: 100 !important;
  overflow: visible !important;
  border: none !important;
}

/* Elevate Secondary Navigation to the Top Layer when Active or Dropdown Open */
.secondary-navigation:focus-within,
.secondary-navigation:has(.show),
.secondary-navigation:has([aria-expanded="true"]),
.secondary-navigation.has-open-dropdown,
.secondary-navigation.dropdown-secnav-front,
body:has(.secondary-navigation .dropdown-menu.show) .secondary-navigation,
body:has(.secondary-navigation .show) .secondary-navigation {
  z-index: 30000000 !important;
  position: relative !important;
}

.secondary-navigation-wrapper {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  position: relative !important;
  z-index: 100 !important;
  overflow: visible !important;
  gap: 12px !important;
}

.secondary-navigation-wrapper:focus-within,
.secondary-navigation-wrapper:has(.show) {
  z-index: 30000000 !important;
}

.secondary-navigation-tabs,
.secondary-navigation-tabs.overflow-hidden,
.secondary-navigation-wrapper .secondary-navigation-tabs,
.secondary-navigation-wrapper .secondary-navigation-tabs.overflow-hidden {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 100 !important;
}

.secondary-navigation-tabs:focus-within,
.secondary-navigation-tabs:has(.show) {
  z-index: 30000000 !important;
}

/* Frosted Glass Navigation Track / Dock - Sempurna Mengurung Seluruh Tab */
.secondary-navigation .navigation,
.path-admin .secondary-navigation .navigation {
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(20px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(190%) !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 20px -4px rgba(99, 102, 241, 0.08), 
              0 1px 3px rgba(0, 0, 0, 0.03),
              inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
  padding: 5px 6px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  min-height: 48px !important;
  position: relative !important;
  z-index: 100 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

.secondary-navigation .navigation:focus-within,
.secondary-navigation .navigation:has(.show) {
  z-index: 30000000 !important;
}

.secondary-navigation .navigation .nav-tabs,
.secondary-navigation .more-nav.nav-tabs,
.path-admin .secondary-navigation .navigation .nav-tabs {
  border: none !important;
  border-bottom: none !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  background: transparent !important;
  height: 100% !important;
}

.secondary-navigation .navigation .nav-tabs .nav-item,
.secondary-navigation .more-nav .nav-item {
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Inactive Tab Pill - Presisi di dalam Dock */
.secondary-navigation .navigation .nav-tabs .nav-link,
.secondary-navigation .more-nav .nav-link {
  font-family: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  color: #64748b !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  padding: 0 16px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  margin-bottom: 0 !important;
  background: transparent !important;
  position: relative !important;
  white-space: nowrap !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  outline: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

/* Hover - Soft Glass Glow */
.secondary-navigation .navigation .nav-tabs .nav-link:hover,
.secondary-navigation .more-nav .nav-link:hover {
  background: rgba(255, 255, 255, 0.75) !important;
  color: #4f46e5 !important;
  border-color: rgba(226, 232, 240, 0.8) !important;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.08) !important;
  transform: none !important;
}

/* Click Tap Animation */
.secondary-navigation .navigation .nav-tabs .nav-link:active,
.secondary-navigation .more-nav .nav-link:active {
  transform: scale(0.96) !important;
  transition: transform 0.1s ease !important;
}

/* ACTIVE / CLICKED TAB - 100% RAPI DI DALAM DOCK (TIDAK KELUAR GARIS) */
.secondary-navigation .navigation .nav-tabs .nav-link.active,
.secondary-navigation .more-nav .nav-link.active,
.secondary-navigation .navigation .nav-tabs .nav-item.show .nav-link,
.secondary-navigation .navigation .nav-tabs .nav-link[aria-selected="true"],
.secondary-navigation .more-nav .nav-link[aria-selected="true"],
.path-admin .secondary-navigation .navigation .nav-tabs .nav-link.active {
  background: #ffffff !important;
  color: #3730a3 !important;
  font-weight: 700 !important;
  border: 1px solid rgba(99, 102, 241, 0.28) !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 10px rgba(99, 102, 241, 0.16), 
              inset 0 1px 0 #ffffff !important;
  transform: none !important;
  position: relative !important;
  height: 36px !important;
  padding: 0 16px !important;
  margin: 0 !important;
  margin-bottom: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Radiant Neon Underline on Active Tab (Rapi di Dasar Pill, Tidak Menggantung ke Luar) */
.secondary-navigation .navigation .nav-tabs .nav-link.active::after,
.secondary-navigation .more-nav .nav-link.active::after,
.secondary-navigation .navigation .nav-tabs .nav-link[aria-selected="true"]::after,
.secondary-navigation .more-nav .nav-link[aria-selected="true"]::after,
.path-admin .secondary-navigation .navigation .nav-tabs .nav-link.active::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, #06b6d4 0%, #6366f1 50%, #ec4899 100%) !important;
  border-radius: 0 !important;
  box-shadow: 0 -1px 6px rgba(99, 102, 241, 0.6) !important;
}

/* Dropdown Menu for Overflow "More" Tabs (Selengkapnya) */
.secondary-navigation .dropdown-menu,
.secondary-navigation .dropdownmoremenu > .dropdown-menu,
.secondary-navigation .more-nav .dropdown-menu {
  background: #ffffff !important;
  background-color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(203, 213, 225, 0.95) !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 45px -4px rgba(15, 23, 42, 0.22), 
              0 8px 20px rgba(99, 102, 241, 0.15) !important;
  padding: 8px !important;
  margin-top: 8px !important;
  min-width: 220px !important;
  position: absolute !important;
  z-index: 30000000 !important;
  pointer-events: auto !important;
}

.secondary-navigation .dropdown-menu .dropdown-item {
  border-radius: 10px !important;
  padding: 8px 16px !important;
  font-family: 'Outfit', 'Inter', sans-serif !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  color: #475569 !important;
  transition: all 0.2s ease !important;
}

.secondary-navigation .dropdown-menu .dropdown-item:hover,
.secondary-navigation .dropdown-menu .dropdown-item:focus {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.08) 100%) !important;
  color: #4338ca !important;
  transform: translateX(4px) !important;
}

.secondary-navigation .dropdown-menu .dropdown-item.active,
.secondary-navigation .dropdown-menu .dropdown-item[aria-selected="true"] {
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.35) !important;
}

/* ==========================================================================
   CARDS & DASHBOARD BLOCKS (FROSTED GLASSMORPHISM)
   ========================================================================== */
.card,
.block,
.que {
  background: var(--lg-glass-bg-card) !important;
  backdrop-filter: var(--lg-blur) !important;
  -webkit-backdrop-filter: var(--lg-blur) !important;
  border: var(--lg-glass-border) !important;
  border-radius: 20px !important;
  box-shadow: var(--lg-shadow-sm) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
              border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
              background 0.35s ease !important;
  overflow: visible !important;
  position: relative;
}

.dashboard-card,
.coursebox {
  background: var(--lg-glass-bg-card) !important;
  backdrop-filter: var(--lg-blur) !important;
  -webkit-backdrop-filter: var(--lg-blur) !important;
  border: var(--lg-glass-border) !important;
  border-radius: 20px !important;
  box-shadow: var(--lg-shadow-sm) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
              border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
              background 0.35s ease !important;
  overflow: hidden;
  position: relative;
}

/* Floating Hover Lift for Cards */
.card:hover,
.block:hover,
.dashboard-card:hover,
.coursebox:hover {
  transform: translateY(-5px) scale(1.008) !important;
  box-shadow: var(--lg-shadow-lg) !important;
  border-color: rgba(168, 85, 247, 0.4) !important;
  background: var(--lg-glass-bg-hover) !important;
}

/* Card Header */
.card-header,
.block .card-title {
  background: transparent !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.5) !important;
  padding: 16px 20px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
}

.card-header::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: var(--lg-grad-cosmic);
  transition: width 0.4s ease;
}

.card:hover .card-header::after {
  width: 100%;
}

/* Course Cards in Dashboard */
.dashboard-card-deck .dashboard-card {
  border-radius: 22px !important;
}

.dashboard-card .dashboard-card-img {
  border-radius: 18px 18px 0 0 !important;
  transition: transform 0.4s ease !important;
}

.dashboard-card:hover .dashboard-card-img {
  transform: scale(1.04);
}

/* Activity Items (Course Modules, Quizzes, Assignments, etc.) */
.activity-item {
  background: rgba(255, 255, 255, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  border-radius: 16px !important;
  padding: 14px 18px !important;
  margin-bottom: 12px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.activity-item:hover {
  background: rgba(255, 255, 255, 0.88) !important;
  border-color: rgba(99, 102, 241, 0.4) !important;
  transform: translateX(6px);
  box-shadow: 0 8px 25px rgba(99, 102, 241, 0.12) !important;
}

/* Activity Icons Glow */
.activityiconcontainer {
  border-radius: 14px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
  transition: transform 0.25s ease !important;
}

.activity-item:hover .activityiconcontainer {
  transform: scale(1.1) rotate(4deg);
}

/* ==========================================================================
   FROSTED GLASS DRAWERS (LEFT COURSE INDEX & RIGHT BLOCKS)
   ========================================================================== */
.drawer.drawer-left,
.drawer.drawer-right {
  background: var(--lg-glass-bg-drawer) !important;
  backdrop-filter: var(--lg-blur-heavy) !important;
  -webkit-backdrop-filter: var(--lg-blur-heavy) !important;
  border: var(--lg-glass-border) !important;
  box-shadow: 0 10px 40px rgba(31, 38, 135, 0.15) !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease !important;
}

.drawer-header {
  border-bottom: 1px solid rgba(226, 232, 240, 0.6) !important;
  padding: 16px 20px !important;
}

/* ==========================================================================
/* ==========================================================================
   COURSE INDEX DRAWER (DAFTAR MATERI KURSUS) - MICA SEMI-TRANSPARAN WARNA-WARNI & COMPACT
   ========================================================================== */

/* 1. Drawer Container: Windows 11 / macOS Mica Frosted Glass */
#theme_boost-drawers-courseindex,
.drawer.drawer-left.drawer-course-index {
  width: 320px !important;
  max-width: 90vw !important;
  z-index: 36000000 !important;
  transition: left 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.28s ease, transform 0.28s ease !important;
  background: 
    radial-gradient(circle at 10% 12%, rgba(99, 102, 241, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 90% 40%, rgba(236, 72, 153, 0.09) 0%, transparent 42%),
    radial-gradient(circle at 20% 80%, rgba(6, 182, 212, 0.10) 0%, transparent 45%),
    linear-gradient(165deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 255, 0.92) 100%) !important;
  backdrop-filter: blur(32px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(200%) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.7) !important;
  box-shadow: 14px 0 45px rgba(99, 102, 241, 0.12), 4px 0 18px rgba(15, 23, 42, 0.06) !important;
}

#theme_boost-drawers-courseindex.show,
.drawer.drawer-left.drawer-course-index.show {
  display: flex !important;
  flex-direction: column !important;
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  height: 100vh !important;
  left: 0 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 36000000 !important;
  box-shadow: 16px 0 48px rgba(15, 23, 42, 0.22), 4px 0 16px rgba(99, 102, 241, 0.12) !important;
}

#theme_boost-drawers-courseindex:not(.show),
.drawer.drawer-left.drawer-course-index:not(.show) {
  left: -350px !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 2. Drawer Header: Translucent Mica Bar */
#theme_boost-drawers-courseindex .drawerheader {
  height: 60px !important;
  min-height: 60px !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  z-index: 10 !important;
  position: relative !important;
}

#theme_boost-drawers-courseindex .drawerheader a[data-region="site-home-link"] {
  display: none !important;
}

/* Header Title (Modern Syllabus Badge & Title) */
#theme_boost-drawers-courseindex .drawerheader::before {
  content: "Daftar Materi" !important;
  display: inline-flex !important;
  align-items: center !important;
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 1.08rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: #0f172a !important;
  margin-left: 8px !important;
  margin-right: auto !important;
  order: 2 !important;
  padding-left: 36px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none'%3E%3Cdefs%3E%3ClinearGradient id='grad' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%234f46e5'/%3E%3Cstop offset='50%25' stop-color='%236366f1'/%3E%3Cstop offset='100%25' stop-color='%2306b6d4'/%3E%3C/linearGradient%3E%3Cfilter id='glow' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeDropShadow dx='0' dy='2' stdDeviation='2' flood-color='%234f46e5' flood-opacity='0.28'/%3E%3C/filter%3E%3C/defs%3E%3Crect x='1.5' y='1.5' width='29' height='29' rx='8.5' fill='url(%23grad)' filter='url(%23glow)'/%3E%3Crect x='2' y='2' width='28' height='28' rx='8' stroke='rgba(255,255,255,0.45)' stroke-width='1'/%3E%3Cpath d='M9 10C9 9.17 9.67 8.5 10.5 8.5H21.5C22.33 8.5 23 9.17 23 10V21.5C23 22.33 22.33 23 21.5 23H10.5C9.67 23 9 22.33 9 21.5V10Z' stroke='%23ffffff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9 18C10.2 18 11.8 18.5 13 19H23' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M13 12.5H19' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M13 15.5H17.5' stroke='rgba(255,255,255,0.85)' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='20.5' cy='19.5' r='1.2' fill='%2338bdf8'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
  background-size: 28px 28px !important;
  min-height: 28px !important;
  line-height: 28px !important;
}

/* Close Drawer Button */
#theme_boost-drawers-courseindex .drawerheader .drawertoggle {
  order: 1 !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.8) !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  color: #64748b !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05) !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
}

#theme_boost-drawers-courseindex .drawerheader .drawertoggle:hover {
  background: #fee2e2 !important;
  color: #ef4444 !important;
  border-color: rgba(239, 68, 68, 0.35) !important;
  transform: scale(1.06) !important;
}

#theme_boost-drawers-courseindex .drawerheader .drawerheadercontent {
  order: 3 !important;
  margin-left: auto !important;
}

/* Controls / Options Kebab Button */
#theme_boost-drawers-courseindex .drawerheader #courseindexdrawercontrols button {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.8) !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  color: #64748b !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05) !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
}

#theme_boost-drawers-courseindex .drawerheader #courseindexdrawercontrols button:hover {
  background: #ffffff !important;
  color: #4f46e5 !important;
  border-color: rgba(99, 102, 241, 0.35) !important;
  transform: scale(1.06) !important;
}

/* 3. Drawer Scrollable Area */
#theme_boost-drawers-courseindex .drawercontent {
  padding: 10px 8px 26px !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* 4. Course Index Root Tree */
.courseindex {
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.courseindex .courseindex-section {
  margin-bottom: 5px !important;
}

/* 5. Section Header Base Card */
.courseindex .courseindex-item.courseindex-section-title,
.courseindex .courseindex-section-title {
  border-radius: 10px !important;
  padding: 7px 10px !important;
  margin: 2px 3px !important;
  display: flex !important;
  align-items: center !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.courseindex .courseindex-section-title .courseindex-link {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 750 !important;
  letter-spacing: -0.01em !important;
  color: #0f172a !important; /* Always crisp & readable */
  text-decoration: none !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* Section Chevron */
.courseindex .courseindex-chevron {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-right: 6px !important;
  text-decoration: none !important;
  transition: transform 0.2s ease !important;
  border-radius: 6px !important;
}

.courseindex .courseindex-chevron .icon {
  width: 12px !important;
  height: 12px !important;
  font-size: 12px !important;
  margin: 0 !important;
}

/* ==========================================================================
   WARNA-WARNI SECTION PALETTES (Mica Pastel Glass per Section)
   ========================================================================== */

/* Theme 1: Indigo / Cosmic Violet (Section 1, 7, 13...) */
.courseindex .courseindex-section:nth-of-type(6n+1) .courseindex-section-title {
  background: rgba(238, 242, 255, 0.7) !important;
  border: 1px solid rgba(199, 210, 254, 0.8) !important;
  border-left: 4px solid #6366f1 !important;
}
.courseindex .courseindex-section:nth-of-type(6n+1) .courseindex-section-title:hover {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: #818cf8 !important;
  border-left: 4px solid #4f46e5 !important;
  box-shadow: 0 3px 12px rgba(99, 102, 241, 0.18) !important;
  transform: translateX(2px) !important;
}
/* Theme 1: Indigo / Cosmic Violet (Section 1, 7, 13...) */
.courseindex .courseindex-section:nth-of-type(6n+1) .courseindex-section-title {
  background: rgba(238, 242, 255, 0.7) !important;
  border: 1px solid rgba(199, 210, 254, 0.8) !important;
  border-left: 4px solid #6366f1 !important;
}
.courseindex .courseindex-section:nth-of-type(6n+1) .courseindex-section-title:hover {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: #818cf8 !important;
  border-left: 4px solid #4f46e5 !important;
  box-shadow: 0 3px 12px rgba(99, 102, 241, 0.18) !important;
  transform: translateX(2px) !important;
}
.courseindex .courseindex-section:nth-of-type(6n+1) .courseindex-section-title .courseindex-chevron {
  color: #6366f1 !important;
}
.courseindex .courseindex-section:nth-of-type(6n+1) .courseindex-sectioncontent {
  border-left: 2px solid rgba(99, 102, 241, 0.35) !important;
}

/* Theme 2: Emerald / Mint Fresh (Section 2, 8, 14...) */
.courseindex .courseindex-section:nth-of-type(6n+2) .courseindex-section-title {
  background: rgba(236, 253, 245, 0.7) !important;
  border: 1px solid rgba(167, 243, 208, 0.8) !important;
  border-left: 4px solid #10b981 !important;
}
.courseindex .courseindex-section:nth-of-type(6n+2) .courseindex-section-title:hover {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: #34d399 !important;
  border-left: 4px solid #059669 !important;
  box-shadow: 0 3px 12px rgba(16, 185, 129, 0.18) !important;
  transform: translateX(2px) !important;
}
.courseindex .courseindex-section:nth-of-type(6n+2) .courseindex-section-title .courseindex-chevron {
  color: #059669 !important;
}
.courseindex .courseindex-section:nth-of-type(6n+2) .courseindex-sectioncontent {
  border-left: 2px solid rgba(16, 185, 129, 0.35) !important;
}

/* Theme 3: Amber / Golden Sun (Section 3, 9, 15...) */
.courseindex .courseindex-section:nth-of-type(6n+3) .courseindex-section-title {
  background: rgba(254, 243, 199, 0.65) !important;
  border: 1px solid rgba(253, 230, 138, 0.85) !important;
  border-left: 4px solid #f59e0b !important;
}
.courseindex .courseindex-section:nth-of-type(6n+3) .courseindex-section-title:hover {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: #fbbf24 !important;
  border-left: 4px solid #d97706 !important;
  box-shadow: 0 3px 12px rgba(245, 158, 11, 0.18) !important;
  transform: translateX(2px) !important;
}
.courseindex .courseindex-section:nth-of-type(6n+3) .courseindex-section-title .courseindex-chevron {
  color: #d97706 !important;
}
.courseindex .courseindex-section:nth-of-type(6n+3) .courseindex-sectioncontent {
  border-left: 2px solid rgba(245, 158, 11, 0.35) !important;
}

/* Theme 4: Rose / Crimson Coral (Section 4, 10, 16...) */
.courseindex .courseindex-section:nth-of-type(6n+4) .courseindex-section-title {
  background: rgba(255, 241, 242, 0.7) !important;
  border: 1px solid rgba(254, 205, 211, 0.85) !important;
  border-left: 4px solid #f43f5e !important;
}
.courseindex .courseindex-section:nth-of-type(6n+4) .courseindex-section-title:hover {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: #fb7185 !important;
  border-left: 4px solid #e11d48 !important;
  box-shadow: 0 3px 12px rgba(244, 63, 94, 0.18) !important;
  transform: translateX(2px) !important;
}
.courseindex .courseindex-section:nth-of-type(6n+4) .courseindex-section-title .courseindex-chevron {
  color: #e11d48 !important;
}
.courseindex .courseindex-section:nth-of-type(6n+4) .courseindex-sectioncontent {
  border-left: 2px solid rgba(244, 63, 94, 0.35) !important;
}

/* Theme 5: Sky / Oceanic Cyan (Section 5, 11, 17...) */
.courseindex .courseindex-section:nth-of-type(6n+5) .courseindex-section-title {
  background: rgba(240, 249, 255, 0.7) !important;
  border: 1px solid rgba(186, 230, 253, 0.85) !important;
  border-left: 4px solid #0ea5e9 !important;
}
.courseindex .courseindex-section:nth-of-type(6n+5) .courseindex-section-title:hover {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: #38bdf8 !important;
  border-left: 4px solid #0284c7 !important;
  box-shadow: 0 3px 12px rgba(14, 165, 233, 0.18) !important;
  transform: translateX(2px) !important;
}
.courseindex .courseindex-section:nth-of-type(6n+5) .courseindex-section-title .courseindex-chevron {
  color: #0284c7 !important;
}
.courseindex .courseindex-section:nth-of-type(6n+5) .courseindex-sectioncontent {
  border-left: 2px solid rgba(14, 165, 233, 0.35) !important;
}

/* Theme 6: Violet / Royal Purple (Section 6, 12, 18...) */
.courseindex .courseindex-section:nth-of-type(6n+6) .courseindex-section-title {
  background: rgba(245, 243, 255, 0.7) !important;
  border: 1px solid rgba(221, 214, 254, 0.85) !important;
  border-left: 4px solid #8b5cf6 !important;
}
.courseindex .courseindex-section:nth-of-type(6n+6) .courseindex-section-title:hover {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: #a78bfa !important;
  border-left: 4px solid #7c3aed !important;
  box-shadow: 0 3px 12px rgba(139, 92, 246, 0.18) !important;
  transform: translateX(2px) !important;
}
.courseindex .courseindex-section:nth-of-type(6n+6) .courseindex-section-title .courseindex-chevron {
  color: #7c3aed !important;
}
.courseindex .courseindex-section:nth-of-type(6n+6) .courseindex-sectioncontent {
  border-left: 2px solid rgba(139, 92, 246, 0.35) !important;
}

/* ==========================================================================
   CURRENT ACTIVE SECTION HEADER
   ========================================================================== */
.courseindex .courseindex-section.current > .courseindex-item.courseindex-section-title,
.courseindex .courseindex-section.current > .courseindex-section-title {
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 60%, #4338ca 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(165, 180, 252, 0.5) !important;
  border-left: 4px solid #818cf8 !important;
  box-shadow: 0 4px 16px rgba(49, 46, 129, 0.3) !important;
  transform: translateX(2px) !important;
}

.courseindex .courseindex-section.current > .courseindex-item.courseindex-section-title .courseindex-link,
.courseindex .courseindex-section.current > .courseindex-section-title .courseindex-link {
  color: #ffffff !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}

.courseindex .courseindex-section.current > .courseindex-item.courseindex-section-title .courseindex-chevron,
.courseindex .courseindex-section.current > .courseindex-section-title .courseindex-chevron {
  color: #e0e7ff !important;
}

/* 7. Sub-item Activities List (.courseindex-sectioncontent) */
.courseindex .courseindex-sectioncontent {
  list-style: none !important;
  padding: 3px 0 5px 10px !important;
  margin: 0 0 4px 16px !important;
}

/* Compact Section Squircle Badge Before Title */
.courseindex .courseindex-section-title::before {
  content: "" !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  border-radius: 8px !important;
  margin-right: 8px !important;
  flex-shrink: 0 !important;
  background-size: 16px 16px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/%3E%3C/svg%3E") !important;
  transition: transform 0.2s ease !important;
}

.courseindex .courseindex-section-title:hover::before {
  transform: scale(1.08) !important;
}

.courseindex .courseindex-sectioncontent li.courseindex-item {
  padding: 5px 8px !important;
  margin: 3px 0 !important;
  border-radius: 10px !important;
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: #1e293b !important;
  background: #ffffff !important;
  border: 1px solid rgba(226, 232, 240, 0.85) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: flex !important;
  align-items: center !important;
  min-height: 38px !important;
  position: relative !important;
}

/* Squircle Icon Box Base (Compact 30px) */
.courseindex .courseindex-sectioncontent li.courseindex-item::before {
  content: "" !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  border-radius: 8px !important;
  margin-right: 8px !important;
  flex-shrink: 0 !important;
  background-size: 16px 16px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: #eff6ff !important;
  border: 1px solid #bfdbfe !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1-2.5-2.5Z'/%3E%3Cpath d='M6 6h10'/%3E%3Cpath d='M6 10h10'/%3E%3Cpath d='M6 14h6'/%3E%3C/svg%3E") !important;
  transition: transform 0.2s ease, filter 0.2s ease !important;
}

/* Activity Link inside Sub-item */
.courseindex .courseindex-sectioncontent .courseindex-link,
.courseindex .courseindex-sectioncontent li.courseindex-item a {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  text-decoration: none !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* Sub-item Activity Hover */
.courseindex .courseindex-sectioncontent li.courseindex-item:not(.active):not(.pageitem):not(.current):hover {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: rgba(99, 102, 241, 0.45) !important;
  transform: translateX(2px) !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06) !important;
}

.courseindex .courseindex-sectioncontent li.courseindex-item:not(.active):not(.pageitem):not(.current):hover::before {
  transform: scale(1.08) !important;
}

.courseindex .courseindex-sectioncontent li.courseindex-item:not(.active):not(.pageitem):not(.current):hover .courseindex-link,
.courseindex .courseindex-sectioncontent li.courseindex-item:not(.active):not(.pageitem):not(.current):hover a {
  color: #4338ca !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   TOPIC-SPECIFIC SQUIRCLE ICONS (MODUL, EVALUASI, JURNAL REFLEKSI, DLL)
   ========================================================================== */

/* A. JURNAL / REFLEKSI (Pastel Teal / Emerald Quill & Journal) */
.courseindex [data-topic="refleksi"]::before,
.courseindex .courseindex-section-title[data-topic="refleksi"]::before,
.courseindex li.courseindex-item[data-topic="refleksi"]::before {
  background-color: #f0fdf4 !important;
  border-color: #bbf7d0 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z'/%3E%3Cpath d='M15 5l3 3'/%3E%3C/svg%3E") !important;
}

/* B. EVALUASI / PENILAIAN / UJIAN / KUIS (Pastel Violet / Purple Ribbon & Award) */
.courseindex [data-topic="evaluasi"]::before,
.courseindex .courseindex-section-title[data-topic="evaluasi"]::before,
.courseindex li.courseindex-item[data-topic="evaluasi"]::before,
.courseindex .courseindex-sectioncontent li.courseindex-item[data-modname="quiz"]::before,
.courseindex .courseindex-sectioncontent li.courseindex-item:has(a[href*="/mod/quiz/"])::before {
  background-color: #f5f3ff !important;
  border-color: #ddd6fe !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='6'/%3E%3Cpath d='m15.477 12.89 2.523 7.11-6-3-6 3 2.523-7.11'/%3E%3Cpath d='m9 8 2 2 4-4'/%3E%3C/svg%3E") !important;
}

/* C. MODUL / MATERI / BAHAN AJAR (Pastel Blue Book & Layers) */
.courseindex [data-topic="modul"]::before,
.courseindex .courseindex-section-title[data-topic="modul"]::before,
.courseindex li.courseindex-item[data-topic="modul"]::before,
.courseindex .courseindex-sectioncontent li.courseindex-item[data-modname="resource"]::before,
.courseindex .courseindex-sectioncontent li.courseindex-item:has(a[href*="/mod/resource/"])::before {
  background-color: #eff6ff !important;
  border-color: #bfdbfe !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1-2.5-2.5Z'/%3E%3Cpath d='M6 6h10'/%3E%3Cpath d='M6 10h10'/%3E%3Cpath d='M6 14h6'/%3E%3C/svg%3E") !important;
}

/* D. PENDAHULUAN / ORIENTASI / PRA (Pastel Amber Sparkle & Compass) */
.courseindex [data-topic="pendahuluan"]::before,
.courseindex .courseindex-section-title[data-topic="pendahuluan"]::before,
.courseindex li.courseindex-item[data-topic="pendahuluan"]::before {
  background-color: #fffbeb !important;
  border-color: #fde68a !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d97706' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolygon points='16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76' fill='%23fef3c7'/%3E%3C/svg%3E") !important;
}

/* E. TUGAS / PRAKTIK / AKSI NYATA (Pastel Rose Briefcase & Check) */
.courseindex [data-topic="tugas"]::before,
.courseindex .courseindex-section-title[data-topic="tugas"]::before,
.courseindex li.courseindex-item[data-topic="tugas"]::before,
.courseindex .courseindex-sectioncontent li.courseindex-item[data-modname="assign"]::before,
.courseindex .courseindex-sectioncontent li.courseindex-item:has(a[href*="/mod/assign/"])::before {
  background-color: #fff1f2 !important;
  border-color: #fecdd3 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e11d48' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Crect x='8' y='2' width='8' height='4' rx='1' ry='1'/%3E%3Cpath d='m9 14 2 2 4-4'/%3E%3C/svg%3E") !important;
}

/* F. DISKUSI / FORUM / KOLABORASI (Pastel Indigo Chat Bubbles) */
.courseindex [data-topic="diskusi"]::before,
.courseindex .courseindex-section-title[data-topic="diskusi"]::before,
.courseindex li.courseindex-item[data-topic="diskusi"]::before,
.courseindex .courseindex-sectioncontent li.courseindex-item[data-modname="forum"]::before,
.courseindex .courseindex-sectioncontent li.courseindex-item:has(a[href*="/mod/forum/"])::before {
  background-color: #eef2ff !important;
  border-color: #c7d2fe !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='8.5' cy='10.5' r='1' fill='%234f46e5'/%3E%3Ccircle cx='12' cy='10.5' r='1' fill='%234f46e5'/%3E%3Ccircle cx='15.5' cy='10.5' r='1' fill='%234f46e5'/%3E%3C/svg%3E") !important;
}

/* G. PENUTUP / KESIMPULAN (Pastel Cyan Flag & Check) */
.courseindex [data-topic="penutup"]::before,
.courseindex .courseindex-section-title[data-topic="penutup"]::before,
.courseindex li.courseindex-item[data-topic="penutup"]::before {
  background-color: #ecfeff !important;
  border-color: #a5f3fc !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230891b2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z'/%3E%3Cline x1='4' y1='22' x2='4' y2='15'/%3E%3C/svg%3E") !important;
}

/* 4. PAGE / BUKU / BACAAN (Pastel Emerald / Mint) */
.courseindex .courseindex-sectioncontent li.courseindex-item[data-modname="page"]::before,
.courseindex .courseindex-sectioncontent li.courseindex-item:has(a[href*="/mod/page/"])::before {
  background-color: #ecfdf5 !important;
  border-color: #a7f3d0 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E") !important;
}

/* 5. URL / VIDEO / WEB LINK (Pastel Cyan / Teal) */
.courseindex .courseindex-sectioncontent li.courseindex-item[data-modname="url"]::before,
.courseindex .courseindex-sectioncontent li.courseindex-item:has(a[href*="/mod/url/"])::before {
  background-color: #ecfeff !important;
  border-color: #a5f3fc !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230891b2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E") !important;
}

/* 6. FOLDER / BERKAS (Pastel Orange) */
.courseindex .courseindex-sectioncontent li.courseindex-item[data-modname="folder"]::before,
.courseindex .courseindex-sectioncontent li.courseindex-item:has(a[href*="/mod/folder/"])::before {
  background-color: #fff7ed !important;
  border-color: #fed7aa !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ea580c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/%3E%3C/svg%3E") !important;
}

/* 9. H5P / INTERACTIVE CONTENT (Pastel Fuchsia) */
.courseindex .courseindex-sectioncontent li.courseindex-item[data-modname="h5pactivity"]::before,
.courseindex .courseindex-sectioncontent li.courseindex-item:has(a[href*="/mod/h5pactivity/"])::before {
  background-color: #fdf4ff !important;
  border-color: #f5d0fe !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c026d3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolygon points='10 8 16 12 10 16 10 8' fill='%23c026d3' stroke='none'/%3E%3C/svg%3E") !important;
}

/* 10. BOOK / LESSON (Pastel Teal) */
.courseindex .courseindex-sectioncontent li.courseindex-item[data-modname="book"]::before,
.courseindex .courseindex-sectioncontent li.courseindex-item:has(a[href*="/mod/book/"])::before {
  background-color: #f0fdfa !important;
  border-color: #99f6e4 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d9488' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/%3E%3C/svg%3E") !important;
}

/* ==========================================================================
   ACTIVE / CURRENT ACTIVITY ITEM (High-Contrast Vibrant Liquid Glass)
   ========================================================================== */
.courseindex .courseindex-sectioncontent li.courseindex-item.active,
.courseindex .courseindex-sectioncontent li.courseindex-item.pageitem,
.courseindex .courseindex-sectioncontent li.courseindex-item.current {
  background: linear-gradient(135deg, rgba(238, 242, 255, 0.95) 0%, #ffffff 100%) !important;
  color: #1e1b4b !important;
  font-weight: 750 !important;
  border: 1.5px solid #6366f1 !important;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.2) !important;
  transform: translateX(3px) !important;
}

.courseindex .courseindex-sectioncontent li.courseindex-item.active .courseindex-link,
.courseindex .courseindex-sectioncontent li.courseindex-item.pageitem .courseindex-link,
.courseindex .courseindex-sectioncontent li.courseindex-item.current .courseindex-link,
.courseindex .courseindex-sectioncontent li.courseindex-item.active a,
.courseindex .courseindex-sectioncontent li.courseindex-item.pageitem a,
.courseindex .courseindex-sectioncontent li.courseindex-item.current a {
  color: #4338ca !important;
  font-weight: 750 !important;
}

.courseindex .courseindex-sectioncontent li.courseindex-item.active::before,
.courseindex .courseindex-sectioncontent li.courseindex-item.pageitem::before,
.courseindex .courseindex-sectioncontent li.courseindex-item.current::before {
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3) !important;
  transform: scale(1.08) !important;
}

.courseindex .courseindex-sectioncontent li.courseindex-item.active .icon,
.courseindex .courseindex-sectioncontent li.courseindex-item.pageitem .icon,
.courseindex .courseindex-sectioncontent li.courseindex-item.current .icon {
  filter: brightness(0) invert(1) !important;
}

/* Completion Checkbox in Course Index */
.courseindex .completioninfo {
  margin-left: auto !important;
  padding-left: 6px !important;
  font-size: 11px !important;
  flex-shrink: 0 !important;
}

/* Locked icon & drag icon */
.courseindex .courseindex-locked,
.courseindex .dragicon {
  margin-left: 6px !important;
  color: #94a3b8 !important;
  flex-shrink: 0 !important;
}

/* ==========================================================================
   VIBRANT LIQUID BUTTONS & INTERACTIONS
   ========================================================================== */
.btn {
  border-radius: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  padding: 0.42rem 1.2rem !important;
  line-height: 1.5 !important;
  vertical-align: middle !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative;
  overflow: visible !important;
  box-sizing: border-box !important;
}

.btn-sm,
.btn-group-sm > .btn {
  padding: 0.25rem 0.75rem !important;
  font-size: 0.875rem !important;
  line-height: 1.4 !important;
  border-radius: 10px !important;
}


/* Primary Button with Liquid Shimmer */
.btn-primary {
  background: var(--lg-grad-cosmic) !important;
  background-size: 200% auto !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background-position: right center !important;
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 8px 25px rgba(236, 72, 153, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.6) !important;
  color: #ffffff !important;
}

.btn-primary:active {
  transform: translateY(-1px) scale(0.99) !important;
}

/* Secondary & Outline Buttons */
.btn-secondary,
.btn-outline-secondary {
  background: rgba(255, 255, 255, 0.65) !important;
  backdrop-filter: var(--lg-blur-sm) !important;
  border: var(--lg-glass-border) !important;
  color: #334155 !important;
  box-shadow: var(--lg-shadow-sm) !important;
}

.btn-secondary:hover,
.btn-outline-secondary:hover {
  background: rgba(255, 255, 255, 0.95) !important;
  color: #6366f1 !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--lg-shadow-md) !important;
}

/* Shimmer Light Beam Effect - Strictly Contained ONLY to Primary CTA Buttons */
.btn-primary:not(.drawer-toggle):not([data-toggler]):not(.btn-icon):not(.icon-no-margin):not(.course-index-toggle-btn):not(.block-drawer-toggle-btn) {
  position: relative !important;
  overflow: hidden !important;
}

.btn-primary:not(.drawer-toggle):not([data-toggler]):not(.btn-icon):not(.icon-no-margin):not(.course-index-toggle-btn):not(.block-drawer-toggle-btn)::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -60%;
  width: 40%;
  height: 200%;
  background: linear-gradient(
    90deg, 
    transparent, 
    rgba(255, 255, 255, 0.35), 
    transparent
  );
  transform: rotate(25deg);
  transition: all 0.6s ease;
  pointer-events: none;
}

.btn-primary:not(.drawer-toggle):not([data-toggler]):not(.btn-icon):not(.icon-no-margin):not(.course-index-toggle-btn):not(.block-drawer-toggle-btn):hover::after {
  left: 120%;
}

/* Explicitly eliminate any light beam leaks on all toggles, icons, and navigation buttons */
.btn-icon,
.icon-no-margin,
.drawer-toggler,
.drawer-toggler .btn,
.drawer-left-toggle .btn,
.drawer-right-toggle .btn,
.course-index-toggle-btn,
.block-drawer-toggle-btn,
[data-toggler="drawers"],
.secondary-navigation .btn,
.dropdown-toggle:not(.dropdown-item):not(.dropdown-subpanel a) {
  overflow: hidden !important;
}

.btn-icon::after,
.icon-no-margin::after,
.drawer-toggler::after,
.drawer-toggler .btn::after,
.drawer-left-toggle::after,
.drawer-left-toggle .btn::after,
.drawer-right-toggle::after,
.drawer-right-toggle .btn::after,
.course-index-toggle-btn::after,
.block-drawer-toggle-btn::after,
[data-toggler="drawers"]::after,
.secondary-navigation .btn::after,
.dropdown-toggle:not(.dropdown-item):not(.dropdown-subpanel a)::after {
  display: none !important;
  content: none !important;
}

/* ==========================================================================
   BADGES & PROGRESS BARS (VIBRANT GLOW)
   ========================================================================== */
.badge {
  border-radius: 30px !important;
  padding: 5px 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.35 !important;
  vertical-align: middle !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(8px) !important;
}

.badge-primary,
.badge-info {
  background: var(--lg-grad-ocean) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(6, 182, 212, 0.35) !important;
}

.badge-success {
  background: var(--lg-grad-emerald) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.35) !important;
}

.badge-warning {
  background: var(--lg-grad-sunset) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(244, 63, 94, 0.35) !important;
}

.badge-danger {
  background: linear-gradient(135deg, #ef4444 0%, #f43f5e 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(239, 68, 68, 0.35) !important;
}

/* Animated Flowing Gradient Progress Bar */
.progress {
  height: 10px !important;
  border-radius: 20px !important;
  background: rgba(226, 232, 240, 0.6) !important;
  overflow: hidden !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

.progress-bar {
  border-radius: 20px !important;
  background: var(--lg-grad-cosmic) !important;
  background-size: 200% 100% !important;
  animation: liquidProgressFlow 3s linear infinite !important;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4) !important;
}

@keyframes liquidProgressFlow {
  0% { background-position: 100% 0%; }
  100% { background-position: 0% 0%; }
}

/* ==========================================================================
   GLASS FORM CONTROLS & INPUT FIELDS
   ========================================================================== */
.form-control,
.custom-select,
select.form-control,
select.custom-select,
.urlselect select {
  background-color: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: var(--lg-blur-sm) !important;
  -webkit-backdrop-filter: var(--lg-blur-sm) !important;
  border: 1.5px solid rgba(203, 213, 225, 0.75) !important;
  border-radius: 12px !important;
  height: auto !important;
  min-height: 38px !important;
  padding: 0.38rem 0.85rem !important;
  font-size: 0.9375rem !important;
  line-height: 1.5 !important;
  color: #1e293b !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
}

.custom-select,
select.form-control,
select.custom-select,
.urlselect select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3e%3cpath fill='%2364748b' d='M5 6L0 1.2 1.2 0 5 3.6 8.8 0 10 1.2z'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 10px 6px !important;
  padding-right: 2.2rem !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}

.form-control:focus,
.custom-select:focus,
select.form-control:focus,
select.custom-select:focus,
.urlselect select:focus {
  background-color: rgba(255, 255, 255, 0.98) !important;
  border-color: #8b5cf6 !important;
  box-shadow: 0 0 0 3.5px rgba(139, 92, 246, 0.18), inset 0 1px 2px rgba(255, 255, 255, 0.9) !important;
  transform: translateY(-1px);
  outline: none !important;
}

.form-control-sm,
.custom-select-sm {
  min-height: 32px !important;
  padding: 0.2rem 0.6rem !important;
  font-size: 0.875rem !important;
  line-height: 1.4 !important;
  border-radius: 8px !important;
}

.custom-select-sm {
  padding-right: 1.8rem !important;
  background-position: right 0.5rem center !important;
}

/* Question Bank Filters, Match Selectors & Tertiary Navigation Alignment */
.tertiary-navigation .urlselect select,
.tertiary-navigation .btn,
[data-filterregion="filtermatch"] select,
[data-filterregion="filter"] select,
.qbank-filter select {
  height: auto !important;
  min-height: 38px !important;
  line-height: 1.5 !important;
  padding-top: 0.38rem !important;
  padding-bottom: 0.38rem !important;
  vertical-align: middle !important;
}

[data-filterregion="filtermatch"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap;
}

[data-filterregion="filtermatch"] select[data-filterfield="join"],
[data-filterregion="filter"] select[data-filterfield="join"] {
  width: auto !important;
  min-width: 85px !important;
  padding-left: 0.75rem !important;
  padding-right: 2rem !important;
}

/* Filter row stacking context and layout fixes */
.filter-group,
.questionbankwindow .filter-group {
  position: relative !important;
  z-index: 105 !important;
  overflow: visible !important;
}

.filter-group:focus-within,
.filter-group.filter-group-active-popup,
.filter-group:has(.form-autocomplete-suggestions:not([aria-hidden="true"])),
.filter-group:has(.form-autocomplete-suggestions:not([style*="display: none"])),
.filter-group:has([aria-expanded="true"]),
.questionbankwindow .filter-group:focus-within,
.questionbankwindow .filter-group.filter-group-active-popup,
.questionbankwindow .filter-group:has(.form-autocomplete-suggestions:not([aria-hidden="true"])),
.questionbankwindow .filter-group:has(.form-autocomplete-suggestions:not([style*="display: none"])),
.questionbankwindow .filter-group:has([aria-expanded="true"]) {
  z-index: 50000000 !important;
}

[data-filterregion="filters"] {
  position: relative !important;
  overflow: visible !important;
}

[data-filterregion="filter"] {
  position: relative !important;
  z-index: 2 !important;
  overflow: visible !important;
}

[data-filterregion="filter"]:focus-within,
[data-filterregion="filter"].filter-row-active-popup,
[data-filterregion="filter"]:has(.form-autocomplete-suggestions:not([aria-hidden="true"])),
[data-filterregion="filter"]:has(.form-autocomplete-suggestions:not([style*="display: none"])),
[data-filterregion="filter"]:has([aria-expanded="true"]) {
  z-index: 50000005 !important;
}

[data-filterregion="filter"] .row {
  align-items: center !important;
  border-radius: 14px !important;
  border: 1px solid rgba(226, 232, 240, 0.85) !important;
  background: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
  position: relative !important;
  z-index: 1 !important;
  overflow: visible !important;
}

[data-filterregion="filter"] .row:focus-within,
[data-filterregion="filter"].filter-row-active-popup .row,
[data-filterregion="filter"] .row:has(.form-autocomplete-suggestions:not([aria-hidden="true"])),
[data-filterregion="filter"] .row:has(.form-autocomplete-suggestions:not([style*="display: none"])),
[data-filterregion="filter"] .row:has([aria-expanded="true"]) {
  z-index: 50000005 !important;
}

[data-filterregion="filter"] select.custom-select {
  align-self: center !important;
  width: auto !important;
}

[data-filterregion="filter"] [data-filterfield="type"] {
  min-width: 150px !important;
}

[data-filterregion="value"] {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  position: relative !important;
  overflow: visible !important;
}

[data-filterregion="value"]:focus-within,
[data-filterregion="value"]:has(.form-autocomplete-suggestions:not([aria-hidden="true"])),
[data-filterregion="value"]:has([aria-expanded="true"]) {
  z-index: 50000006 !important;
}

.form-autocomplete-input {
  position: relative !important;
  z-index: 1 !important;
}

.form-autocomplete-input:focus-within,
.form-autocomplete-input:has([aria-expanded="true"]) {
  z-index: 50000007 !important;
}

[data-filterregion="value"] .form-control,
[data-filterregion="value"] .custom-select {
  align-self: center !important;
  height: auto !important;
  min-height: 38px !important;
}

/* Luxury Autocomplete Suggestions Popup */
.form-autocomplete-suggestions {
  position: absolute !important;
  z-index: 50000010 !important;
  background: #ffffff !important;
  border-radius: 14px !important;
  border: 1.5px solid rgba(203, 213, 225, 0.95) !important;
  box-shadow: 
    0 20px 45px -8px rgba(15, 23, 42, 0.22), 
    0 8px 24px -4px rgba(99, 102, 241, 0.12) !important;
  max-height: 22em !important;
  min-width: 280px !important;
  padding: 8px !important;
  margin-top: 4px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.form-autocomplete-suggestions li {
  list-style-type: none !important;
  padding: 8px 14px !important;
  margin: 2px 0 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  color: #1e293b !important;
  font-size: 0.875rem !important;
  line-height: 1.4 !important;
  transition: all 0.15s ease !important;
}

.form-autocomplete-suggestions li:hover,
.form-autocomplete-suggestions li:focus,
.form-autocomplete-suggestions li[aria-selected="true"] {
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%) !important;
  color: #ffffff !important;
}

.form-autocomplete-suggestions li[aria-disabled="true"] {
  pointer-events: none !important;
  color: #94a3b8 !important;
  background-color: transparent !important;
}

.form-autocomplete-suggestions li.suggestions-heading {
  pointer-events: none !important;
  font-weight: 700 !important;
  font-size: 0.78rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #64748b !important;
  background-color: #f1f5f9 !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
  margin-top: 6px !important;
  margin-bottom: 3px !important;
}


/* ==========================================================================
   DROPDOWN MENUS, MODALS & POPOVERS (FRONT-LAYERED & FLICKER-FREE)
   ========================================================================== */
.dropdown-menu,
.dropdown-menu,
.moodle-actionmenu .menu,
.moodle-actionmenu.show .menu,
.action-menu-content,
.dropdown-menu.show,
.action-menu.show .dropdown-menu,
.show > .dropdown-menu {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.88) 0%, rgba(248, 250, 255, 0.82) 100%) !important;
  backdrop-filter: blur(28px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(200%) !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  border-radius: 16px !important;
  box-shadow: 
    0 20px 45px -8px rgba(15, 23, 42, 0.18), 
    0 8px 24px -4px rgba(99, 102, 241, 0.12), 
    inset 0 1px 1px rgba(255, 255, 255, 0.95) !important;
  padding: 8px !important;
  z-index: 50000000 !important;
  position: absolute !important;
  pointer-events: auto !important;
  min-width: 200px !important;
  animation: lgMicaPopupFade 0.15s ease-out !important;
}

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

/* Semi-Transparent Mica Dropdown Items */
.dropdown-item,
.dropdown-menu .dropdown-item,
.moodle-actionmenu .menu a,
.moodle-actionmenu .dropdown-item,
.action-menu .dropdown-item,
.action-menu-item {
  border-radius: 10px !important;
  padding: 8px 14px !important;
  margin: 2px 0 !important;
  font-family: 'Outfit', 'Inter', sans-serif !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  background: transparent !important;
  text-decoration: none !important;
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.moodle-actionmenu .menu a:hover,
.moodle-actionmenu .menu a:focus,
.action-menu .dropdown-item:hover,
.action-menu .dropdown-item:focus {
  background: linear-gradient(135deg, rgba(238, 242, 255, 0.95) 0%, rgba(245, 243, 255, 0.9) 100%) !important;
  color: #4338ca !important;
  border: 1px solid rgba(199, 210, 254, 0.8) !important;
  transform: translateX(3px) !important;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.12) !important;
}

.dropdown-item .icon,
.dropdown-menu .dropdown-item .icon,
.moodle-actionmenu .menu a .icon,
.action-menu .dropdown-item .icon {
  font-size: 14px !important;
  width: 16px !important;
  height: 16px !important;
  color: #6366f1 !important;
  margin-right: 4px !important;
  transition: transform 0.18s ease !important;
}

.dropdown-item:hover .icon,
.dropdown-menu .dropdown-item:hover .icon {
  transform: scale(1.15) !important;
  color: #4f46e5 !important;
}

.dropdown-divider {
  margin: 6px 4px !important;
  border-top: 1px solid rgba(226, 232, 240, 0.7) !important;
}

.dropdown-active-parent,
.dropdown-activity-front {
  z-index: 10000000 !important;
  position: relative !important;
}

.dropdown-section-front,
li.course-section.dropdown-section-front,
li[data-for="section"].dropdown-section-front,
li[id^="section-"].dropdown-section-front,
li.section.main.dropdown-section-front {
  z-index: 9999999 !important;
  position: relative !important;
}

/* 1. Universal Pure CSS :focus-within elevation on the section LI */
li.course-section:focus-within,
li[data-for="section"]:focus-within,
li[id^="section-"]:focus-within,
li.section.main:focus-within {
  z-index: 9999999 !important;
  position: relative !important;
}

li.activity:focus-within,
.activity-item:focus-within,
.activity:focus-within,
[data-for="cmitem"]:focus-within,
.activity-actions:focus-within,
.dropdown:focus-within {
  z-index: 10000000 !important;
  position: relative !important;
}

/* 2. Modern CSS :has() elevation inside isolated @supports block */
@supports selector(:has(*)) {
  li.course-section:has(.dropdown-menu.show),
  li.course-section:has(.action-menu.show),
  li.course-section:has(.moodle-actionmenu.show),
  li.course-section:has(.dropdown.show),
  li.course-section:has([data-toggle="dropdown"][aria-expanded="true"]),
  li[data-for="section"]:has(.dropdown-menu.show),
  li[data-for="section"]:has(.action-menu.show),
  li[data-for="section"]:has(.dropdown.show),
  li[data-for="section"]:has([data-toggle="dropdown"][aria-expanded="true"]),
  li[id^="section-"]:has(.dropdown-menu.show),
  li[id^="section-"]:has(.action-menu.show),
  li[id^="section-"]:has(.dropdown.show),
  li[id^="section-"]:has([data-toggle="dropdown"][aria-expanded="true"]),
  li.section.main:has(.dropdown-menu.show),
  li.section.main:has(.action-menu.show),
  li.section.main:has([data-toggle="dropdown"][aria-expanded="true"]),
  li.course-section.dropdown-section-front {
    z-index: 9999999 !important;
    position: relative !important;
  }

  /* Any section NOT containing an active open menu MUST stay at base z-index when ANY menu is open */
  body:has(.dropdown-menu.show) li.course-section:not(:has(.dropdown-menu.show)):not(.dropdown-section-front),
  body:has(.dropdown-menu.show) li[data-for="section"]:not(:has(.dropdown-menu.show)):not(.dropdown-section-front),
  body:has(.dropdown-menu.show) li[id^="section-"]:not(:has(.dropdown-menu.show)):not(.dropdown-section-front),
  body:has(.action-menu.show) li.course-section:not(:has(.action-menu.show)):not(.dropdown-section-front),
  body.has-open-dropdown li.course-section:not(.dropdown-section-front) {
    z-index: 1 !important;
  }

  li.activity:has(.show),
  li.activity:has(.dropdown-menu.show),
  li.activity:has(.action-menu.show),
  li.activity:has([data-toggle="dropdown"][aria-expanded="true"]),
  .activity-item:has(.show),
  .activity-item:has(.dropdown-menu.show),
  .activity-item:has(.action-menu.show),
  .activity-item:has([data-toggle="dropdown"][aria-expanded="true"]),
  .activity:has(.show),
  [data-for="cmitem"]:has(.show),
  .activity-actions:has(.show),
  .cm_action_menu:has(.show),
  .section_action_menu:has(.show),
  .action-menu:has(.show),
  .moodle-actionmenu:has(.show),
  .dropdown:has(.show),
  .dropdown-activity-front {
    z-index: 10000000 !important;
    position: relative !important;
  }
}

/* ==========================================================================
   STACKING HIERARCHY & UN-CLIPPING: BRING TO FRONT GUARANTEE
   ========================================================================== */

/* Universal: ANY block/container housing an open dropdown menu MUST be elevated above siblings */
.block:has(.dropdown-menu.show),
.block:has(.action-menu.show),
.block:has([data-toggle="dropdown"][aria-expanded="true"]),
.block:has(.block-controls [aria-expanded="true"]),
.card.block:has(.dropdown-menu.show),
.card.block:has(.action-menu.show),
.card.block:has([data-toggle="dropdown"][aria-expanded="true"]),
#theme_boost-drawers-blocks .block:has(.dropdown-menu.show),
#theme_boost-drawers-blocks .block:has(.action-menu.show),
#theme_boost-drawers-blocks .block:has([data-toggle="dropdown"][aria-expanded="true"]),
#theme_boost-drawers-blocks .card.block:has(.dropdown-menu.show),
#theme_boost-drawers-blocks .card.block:has(.action-menu.show),
#theme_boost-drawers-blocks .card.block:has([data-toggle="dropdown"][aria-expanded="true"]),
.coursebox:has(.dropdown-menu.show),
.coursebox:has([data-toggle="dropdown"][aria-expanded="true"]),
li.course-section:has(.dropdown-menu.show),
li.course-section:has([data-toggle="dropdown"][aria-expanded="true"]),
li.activity:has(.dropdown-menu.show),
li.activity:has([data-toggle="dropdown"][aria-expanded="true"]),
.activity-item:has(.dropdown-menu.show),
.activity-item:has([data-toggle="dropdown"][aria-expanded="true"]),
.dropdown-active-parent,
.dropdown-front-layer {
  z-index: 1000000 !important;
  position: relative !important;
  overflow: visible !important;
  transform: none !important;
  filter: none !important;
  contain: none !important;
}

/* Ensure block-controls and all triggers do not clip */
.block .block-controls,
.block-controls,
.block-controls .action-menu,
.block-controls .menubar,
.block-controls .action-menu-trigger,
.block-controls .dropdown,
.block .card-body,
.block .content,
.block .card-title {
  overflow: visible !important;
}

/* Page Header (Section Header, Actions) ALWAYS elevated above Page Content */
#page-header {
  position: relative !important;
  z-index: 25000000 !important;
  overflow: visible !important;
}

#page-header:has(.show),
#page-header:has(.dropdown-menu.show),
#page-header:has([aria-expanded="true"]),
#page-header:focus-within,
body:has(#page-header .show) #page-header,
body:has(#page-header .dropdown-menu.show) #page-header {
  position: relative !important;
  z-index: 45000000 !important;
}

#page-header > div,
#page-header > div > div,
#page-header .d-flex,
.header-actions-container,
.header-action,
.section_action_menu,
.action-menu,
.action-menu .menubar,
.action-menu .dropdown,
.action-menu-trigger,
.moodle-actionmenu {
  overflow: visible !important;
}

/* Base level of secondary navigation */
.secondary-navigation {
  position: relative !important;
  z-index: 25 !important;
}

#topofscroll.main-inner,
#page-content,
#region-main-box,
#region-main {
  position: relative !important;
  z-index: 10 !important;
}

/* 1. When secondary-navigation has an active dropdown/menu, elevate it above page-content */
.secondary-navigation:has(.show),
.secondary-navigation:has(.dropdown-menu.show),
.secondary-navigation:has([aria-expanded="true"]),
.secondary-navigation:focus-within,
.secondary-navigation.dropdown-secnav-front,
body:has(.secondary-navigation .dropdown-menu.show) .secondary-navigation,
body:has(.secondary-navigation .show) .secondary-navigation {
  position: relative !important;
  z-index: 30000000 !important;
}

/* 2. When a dropdown/menu is active INSIDE page-content (e.g. activity menu), elevate page-content */
#page-content:has(.show),
#page-content:has(.dropdown-menu.show),
#page-content:has(.action-menu.show),
#page-content:has([aria-expanded="true"]),
#page-content:focus-within,
#page-content.dropdown-content-front,
body:has(#page-content .dropdown-menu.show) #page-content,
body:has(#page-content .show) #page-content {
  position: relative !important;
  z-index: 20000000 !important;
}

/* 3. Dropdown menus themselves - ultra high stacking order */
.dropdown-menu,
.moodle-actionmenu .dropdown-menu,
.action-menu .dropdown-menu,
.header-actions-container .dropdown-menu,
.header-actions-container .action-menu .dropdown-menu,
.secondary-navigation .dropdown-menu,
.secondary-navigation .dropdownmoremenu > .dropdown-menu,
.secondary-navigation .more-nav .dropdown-menu {
  z-index: 50000000 !important;
}

/* 4. Footer stays strictly below active dropdowns and popups */
#page-footer {
  position: static !important;
  z-index: auto !important;
}

.luxury-page-footer {
  position: relative !important;
  z-index: 1 !important;
}

body:has(.dropdown-menu.show) .luxury-page-footer,
body:has(.action-menu.show) .luxury-page-footer,
body.has-open-dropdown .luxury-page-footer {
  z-index: 0 !important;
}

/* 5. While any dropdown is open, keep non-active sections at lower stacking order */
body.has-open-dropdown li.course-section:not(.dropdown-section-front),
body.has-open-dropdown li.course-section:not(.dropdown-section-front) * {
  z-index: 1 !important;
}

/* 6. Prevent underlying cards & activity items from flickering / stealing hover when a menu is open */
body.has-open-dropdown .activity-item:hover,
body.has-open-dropdown .activity-actions:hover,
body.has-open-dropdown li.activity:hover,
body.has-open-dropdown .card:hover,
body.has-open-dropdown .course-section:hover,
body:has(.dropdown-menu.show) .activity-item:not(:has(.show)):hover,
body:has(.dropdown-menu.show) .activity-actions:not(:has(.show)):hover,
body:has(.dropdown-menu.show) li.activity:not(:has(.show)):hover,
body:has(.dropdown-menu.show) .card:not(:has(.show)):hover,
body:has(.show) .activity-item:not(:has(.show)):hover {
  transform: none !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02) !important;
  border-color: rgba(255, 255, 255, 0.7) !important;
}

/* Semi-Transparent Mica Modals & Dialogues */
.modal-content,
.moodle-dialogue-base .moodle-dialogue-wrap {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.94) 0%, rgba(248, 250, 255, 0.9) 100%) !important;
  backdrop-filter: blur(32px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(200%) !important;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  border-radius: 20px !important;
  box-shadow: 0 25px 60px -12px rgba(15, 23, 42, 0.25), 0 12px 30px -6px rgba(99, 102, 241, 0.15) !important;
  padding: 10px !important;
}

/* Semi-Transparent Mica Popovers */
.popover {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.92) 0%, rgba(248, 250, 255, 0.86) 100%) !important;
  backdrop-filter: blur(28px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(200%) !important;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 45px -8px rgba(15, 23, 42, 0.18), 0 8px 24px -4px rgba(99, 102, 241, 0.12) !important;
  z-index: 50000000 !important;
}

.popover-header {
  background: rgba(255, 255, 255, 0.75) !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.7) !important;
  border-top-left-radius: 16px !important;
  border-top-right-radius: 16px !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}

.popover-body {
  color: #334155 !important;
  font-family: 'Inter', sans-serif !important;
}

@keyframes liquidModalFade {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Anti-clipping for Moodle Popups, Action Menus, and Course Sections */
#page,
#page-content,
#region-main-box,
#region-main,
.card-body,
.mod-quiz-edit-content,
.quizquestions,
.editq,
.section,
.course-section,
.section-item,
.course-section-header,
li.section,
li.activity,
.activity,
.activity-item,
.activity-actions,
.actions,
.cm_action_menu,
.section_action_menu,
.action-menu,
.moodle-actionmenu,
.dropdown,
.menubar,
.automatic-dropdown,
.inplaceeditable,
.questionbankloading {
  overflow: visible !important;
}

.dropdown-item {
  border-radius: 12px !important;
  padding: 10px 16px !important;
  font-weight: 500 !important;
  color: #334155 !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: linear-gradient(90deg, rgba(99, 102, 241, 0.12), rgba(236, 72, 153, 0.12)) !important;
  color: #6366f1 !important;
  transform: translateX(4px);
}

/* ==========================================================================
   LOGIN PAGE LIQUID GLASS PORTAL (EXECUTIVE LUXURY, COLORFUL & MOBILE-FIRST)
   ========================================================================== */
body.pagelayout-login {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  background-color: #080c18 !important;
  background-image: none !important;
  background-attachment: scroll !important;
  position: relative;
  overflow: hidden !important; /* On desktop, perfectly centered without requiring scroll */
  font-family: var(--lg-font-family) !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* Atmospheric Hardware-Accelerated Deep Space Background for Login Portal */
body.pagelayout-login::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: -3;
  pointer-events: none;
  background-color: #080c18 !important;
  background-image: 
    radial-gradient(at 15% 15%, rgba(99, 102, 241, 0.35) 0px, transparent 55%),
    radial-gradient(at 85% 20%, rgba(236, 72, 153, 0.35) 0px, transparent 55%),
    radial-gradient(at 85% 85%, rgba(6, 182, 212, 0.3) 0px, transparent 55%),
    radial-gradient(at 15% 85%, rgba(168, 85, 247, 0.35) 0px, transparent 55%),
    linear-gradient(135deg, #050711 0%, #0c1222 40%, #161b36 75%, #080c18 100%) !important;
  background-repeat: no-repeat;
  background-size: cover;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}

/* Login Ambient Aurora Blobs Disabled (Replaced with Static Cosmic Mesh for Peak Performance) */
body.pagelayout-login #page::before {
  display: none !important;
}

body.pagelayout-login::after {
  display: none !important;
}

body.pagelayout-login #page-wrapper {
  width: 100%;
  height: 100%;
  max-height: 100vh;
  max-height: 100dvh;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  position: relative;
  z-index: 1;
  padding: 16px !important;
  margin: 0 !important;
  overflow-y: auto !important; /* Scrollable if screen height is very short */
  -webkit-overflow-scrolling: touch;
}

/* Strictly disable daytime blobs on login layout */
body.pagelayout-login #page-wrapper::before,
body.pagelayout-login #page-wrapper::after {
  display: none !important;
  content: none !important;
}

body.pagelayout-login #page {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

body.pagelayout-login #page-content {
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

body.pagelayout-login #region-main-box,
body.pagelayout-login #region-main {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* Central Login Wrapper - Sleek Proportions */
body.pagelayout-login .login-wrapper {
  max-width: 416px !important;
  width: 100% !important;
  margin: auto !important;
  padding: 0 !important;
  position: relative !important;
}

/* Local Ambient Glow Orbs behind the Card (High-Performance Static Glow) */
.login-glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(24px);
  -webkit-filter: blur(24px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.65;
}

.login-glow-orb.orb-1 {
  width: 190px;
  height: 190px;
  top: -35px;
  left: -40px;
  background: radial-gradient(circle, #6366f1 0%, #06b6d4 100%);
}

.login-glow-orb.orb-2 {
  width: 200px;
  height: 200px;
  bottom: -35px;
  right: -40px;
  background: radial-gradient(circle, #ec4899 0%, #8b5cf6 100%);
}

.login-glow-orb.orb-3 {
  width: 140px;
  height: 140px;
  top: 38%;
  right: -38px;
  background: radial-gradient(circle, #38bdf8 0%, #6366f1 100%);
}

.login-glow-orb.orb-4 {
  width: 150px;
  height: 150px;
  bottom: 22%;
  left: -35px;
  background: radial-gradient(circle, #10b981 0%, #fbbf24 100%);
  opacity: 0.5;
}

/* Login Card Container (Frosted Crystal Glassmorphism) */
body.pagelayout-login .login-container {
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(14px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.95) !important;
  border-radius: 26px !important;
  box-shadow: 
    0 16px 40px -10px rgba(15, 23, 42, 0.22),
    0 8px 24px -6px rgba(99, 102, 241, 0.16),
    inset 0 1.5px 2px rgba(255, 255, 255, 1) !important;
  padding: 26px 28px 20px 28px !important;
  position: relative;
  z-index: 10;
  overflow: hidden !important; /* Perfectly clips top shimmer bar to match the exact 26px corner curve */
  animation: liquidLoginSpring 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease !important;
}

@keyframes liquidLoginSpring {
  0% {
    opacity: 0;
    transform: translate3d(0, 24px, 0) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

/* Luminous Flowing Shimmer Bar at Top Edge of Login Card (Seamlessly clipped to container's curvature) */
body.pagelayout-login .login-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4.5px;
  border-radius: 0 !important;
  background: linear-gradient(90deg, #3b82f6, #6366f1, #a855f7, #ec4899, #06b6d4, #10b981, #fbbf24, #3b82f6);
  background-size: 300% 100%;
  animation: liquidBarShimmer 6s linear infinite;
  pointer-events: none;
  z-index: 2;
}

@keyframes liquidBarShimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* Strictly Kill Any Pseudo-Element Badge */
.loginform::before,
.loginform:hover::before,
body.pagelayout-login .loginform::before,
body.pagelayout-login .loginform:hover::before {
  display: none !important;
  content: none !important;
}

/* Brand Header in Login Form */
.login-brand-header {
  position: relative;
  text-align: center;
  margin-bottom: 18px;
}

.login-brand-emblem-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  padding: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(238, 242, 255, 0.85) 0%, rgba(255, 255, 255, 0.5) 60%, transparent 85%);
  box-shadow: 0 4px 18px rgba(99, 102, 241, 0.16);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.login-brand-emblem-svg,
.login-brand-emblem-img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0, 50, 150, 0.15));
  image-rendering: auto !important;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pintar-img-logo,
.luxury-footer-mini-logo {
  image-rendering: auto !important;
}

.login-brand-emblem-wrap:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.26);
}

.login-brand-emblem-wrap:hover .login-brand-emblem-svg,
.login-brand-emblem-wrap:hover .login-brand-emblem-img {
  transform: scale(1.06);
}

/* Heading & Subtitle */
body.pagelayout-login .login-heading {
  font-family: var(--lg-font-family) !important;
  font-weight: 800 !important;
  font-size: 1.55rem !important;
  letter-spacing: -0.025em !important;
  line-height: 1.2 !important;
  margin-bottom: 4px !important;
  text-align: center;
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 45%, #4338ca 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

body.pagelayout-login .login-heading::after {
  display: none !important;
}

.login-subtitle {
  font-size: 0.84rem;
  font-weight: 600;
  color: #6366f1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0;
  text-align: center;
}

/* Alert Cards (Error, Info, Maintenance) */
.login-alert-card {
  border-radius: 14px !important;
  padding: 10px 14px !important;
  font-size: 0.84rem !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: center !important;
  margin-bottom: 12px !important;
  border: 1px solid transparent !important;
  backdrop-filter: blur(10px) !important;
}

.login-alert-card.alert-danger {
  background: rgba(254, 242, 242, 0.95) !important;
  border-color: rgba(248, 113, 113, 0.5) !important;
  color: #b91c1c !important;
  box-shadow: 0 3px 10px rgba(239, 68, 68, 0.1) !important;
}

.login-alert-card.alert-info {
  background: rgba(240, 249, 255, 0.95) !important;
  border-color: rgba(56, 189, 248, 0.5) !important;
  color: #0369a1 !important;
  box-shadow: 0 3px 10px rgba(6, 182, 212, 0.1) !important;
}

/* Login Form Field Container */
.login-form-field {
  margin-bottom: 13px;
}

.login-field-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: #334155;
  margin-bottom: 5px;
  letter-spacing: -0.01em;
}

/* Input Wrapper & Icons */
.login-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.login-input-icon {
  position: absolute;
  left: 15px;
  font-size: 15px;
  color: #818cf8;
  pointer-events: none;
  z-index: 3;
  transition: color 0.2s ease, transform 0.2s ease;
}

.login-input-control {
  width: 100% !important;
  height: 48px !important;
  background: rgba(248, 250, 252, 0.88) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1.5px solid rgba(203, 213, 225, 0.85) !important;
  border-radius: 14px !important;
  padding: 10px 14px 10px 44px !important;
  font-size: 0.94rem !important;
  font-weight: 500 !important;
  color: #0f172a !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.login-input-control::placeholder {
  color: #94a3b8 !important;
  font-weight: 400 !important;
}

.login-input-control:focus {
  background-color: #ffffff !important;
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3.5px rgba(99, 102, 241, 0.2), 0 4px 14px rgba(99, 102, 241, 0.1) !important;
  transform: translateY(-1px);
  outline: none !important;
}

.login-input-wrapper:focus-within .login-input-icon {
  color: #4f46e5;
  transform: scale(1.1);
}

/* Password Visibility Toggle Button inside Wrapper */
.login-input-wrapper .btn,
.login-form-password .btn {
  position: absolute !important;
  right: 6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  height: 36px !important;
  width: 36px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 9px !important;
  background: transparent !important;
  border: none !important;
  color: #64748b !important;
  box-shadow: none !important;
  z-index: 4 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.login-input-wrapper .btn:hover,
.login-form-password .btn:hover {
  color: #4f46e5 !important;
  background: rgba(99, 102, 241, 0.1) !important;
}

/* Forgot Password Link - Hidden per User Request */
.login-form-forgotpassword,
.login-forgot-link,
body.pagelayout-login .login-form-forgotpassword,
body.pagelayout-login .login-forgot-link {
  display: none !important;
}

/* Grand CTA Login Button */
.login-form-submit {
  margin-top: 15px;
  margin-bottom: 8px;
}

.login-btn-cta,
#loginbtn {
  width: 100% !important;
  height: 48px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #4338ca 0%, #6366f1 40%, #8b5cf6 70%, #ec4899 100%) !important;
  background-size: 200% auto !important;
  font-size: 0.98rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 8px 24px rgba(79, 70, 229, 0.4), 0 3px 10px rgba(236, 72, 153, 0.22) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer !important;
}

.login-btn-cta:hover,
#loginbtn:hover {
  background-position: right center !important;
  transform: translateY(-2px) scale(1.008) !important;
  box-shadow: 0 10px 28px rgba(236, 72, 153, 0.44), 0 4px 14px rgba(79, 70, 229, 0.32) !important;
}

.login-btn-cta:active,
#loginbtn:active {
  transform: translateY(0) scale(0.985) !important;
  box-shadow: 0 3px 10px rgba(79, 70, 229, 0.3) !important;
}

/* Light Sheen Sweep Effect on CTA Button */
.login-btn-cta::after,
#loginbtn::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -75%;
  width: 50%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: rotate(25deg);
  transition: all 0.65s ease;
  pointer-events: none;
}

.login-btn-cta:hover::after,
#loginbtn:hover::after {
  left: 125%;
}

.login-btn-cta .btn-icon {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.login-btn-cta:hover .btn-icon {
  transform: translateX(4px);
}

/* Elegant Divider with Text */
.login-divider-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 13px 0 9px 0;
  gap: 10px;
}

.login-divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(203, 213, 225, 0.85), transparent);
}

.login-divider-text {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #94a3b8;
  text-transform: uppercase;
}

/* Guest Login & Signup Buttons */
.login-guest-btn,
#loginguestbtn,
.login-signup-btn {
  width: 100% !important;
  height: 42px !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  font-size: 0.88rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
}

.login-guest-btn,
#loginguestbtn {
  background: rgba(248, 250, 252, 0.92) !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  color: #334155 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

.login-guest-btn:hover,
#loginguestbtn:hover {
  background: #ffffff !important;
  border-color: #6366f1 !important;
  color: #4f46e5 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.16) !important;
}

.login-signup-btn {
  background: rgba(99, 102, 241, 0.06) !important;
  border: 1px solid rgba(99, 102, 241, 0.3) !important;
  color: #4f46e5 !important;
}

.login-signup-btn:hover {
  background: linear-gradient(135deg, #4338ca 0%, #6366f1 100%) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.25) !important;
}

/* Bottom Utility Dock - Cleanly Separated, No Overlap! */
.login-footer-dock {
  border-top: 1px solid rgba(226, 232, 240, 0.75);
  margin-top: 14px;
  padding-top: 12px;
}

.login-dock-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  width: 100% !important;
}

/* Fix Moodle's 34px action menu override for the language menu on login! */
.login-languagemenu,
.login-languagemenu .action-menu,
.login-languagemenu .menubar,
.login-languagemenu .action-menu-trigger,
.login-languagemenu .dropdown {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  overflow: visible !important;
  z-index: 100 !important;
}

.login-languagemenu:focus-within,
.login-languagemenu .dropdown.show,
.login-languagemenu:has(.show),
.login-languagemenu:has([aria-expanded="true"]) {
  z-index: 10000000 !important;
}

/* Language Dropdown Menu (Dropup Above Button, Brought to Front!) */
body.pagelayout-login .login-languagemenu .dropdown-menu,
body.pagelayout-login .login-languagemenu .dropdown-menu.show,
body.pagelayout-login .login-languagemenu .action-menu-content,
.login-languagemenu .dropdown-menu {
  position: absolute !important;
  bottom: calc(100% + 8px) !important;
  top: auto !important;
  left: 0 !important;
  right: auto !important;
  transform: none !important;
  z-index: 10000005 !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(203, 213, 225, 0.95) !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 40px -4px rgba(15, 23, 42, 0.28), 
              0 4px 14px rgba(99, 102, 241, 0.16) !important;
  padding: 6px !important;
  min-width: 190px !important;
  pointer-events: auto !important;
}

body.pagelayout-login .login-languagemenu .dropdown-menu .dropdown-item {
  border-radius: 10px !important;
  padding: 8px 14px !important;
  font-family: 'Outfit', 'Inter', sans-serif !important;
  font-size: 0.84rem !important;
  font-weight: 500 !important;
  color: #334155 !important;
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}

body.pagelayout-login .login-languagemenu .dropdown-menu .dropdown-item:hover,
body.pagelayout-login .login-languagemenu .dropdown-menu .dropdown-item:focus {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.08) 100%) !important;
  color: #4338ca !important;
  transform: translateX(3px) !important;
}

body.pagelayout-login .login-languagemenu .dropdown-menu .dropdown-item.active,
body.pagelayout-login .login-languagemenu .dropdown-menu .dropdown-item[aria-selected="true"] {
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

.login-languagemenu .dropdown-toggle,
.login-languagemenu a[id^="action-menu-toggle-"],
body.pagelayout-login .login-languagemenu a.dropdown-toggle,
body.pagelayout-login .login-languagemenu a[id^="action-menu-toggle-"] {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 32px !important;
  min-height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 0.76rem !important;
  font-weight: 500 !important;
  padding: 4px 11px !important;
  border-radius: 50px !important;
  background: rgba(248, 250, 252, 0.9) !important;
  border: 1px solid rgba(203, 213, 225, 0.95) !important;
  color: #475569 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  line-height: 1.2 !important;
  transition: all 0.2s ease !important;
}

.login-languagemenu .dropdown-toggle:hover,
.login-languagemenu a[id^="action-menu-toggle-"]:hover {
  background: #ffffff !important;
  border-color: #6366f1 !important;
  color: #4f46e5 !important;
  transform: translateY(-1px) !important;
}

.login-languagemenu .dropdown-toggle .caret,
.login-languagemenu a[id^="action-menu-toggle-"] .caret {
  margin-left: 3px !important;
  display: inline-block !important;
}

.login-pill-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 0.76rem !important;
  font-weight: 500 !important;
  padding: 4px 11px !important;
  height: 32px !important;
  min-height: 32px !important;
  border-radius: 50px !important;
  background: rgba(248, 250, 252, 0.9) !important;
  border: 1px solid rgba(203, 213, 225, 0.95) !important;
  color: #475569 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  transition: all 0.2s ease !important;
}

.login-pill-btn:hover {
  background: #ffffff !important;
  border-color: #6366f1 !important;
  color: #4f46e5 !important;
  transform: translateY(-1px) !important;
}

/* Hide Clumsy Default Moodle Floating Footer Popover Button on Login */
body.pagelayout-login .btn-footer-popover,
body.pagelayout-login .footer-content-debugging,
body.pagelayout-login #page-footer .footer-section {
  display: none !important;
}

body.pagelayout-login #page-footer {
  display: none !important;
}

/* ==========================================================================
   MOBILE SCREEN RESPONSIVE REFINEMENTS (OPTIMAL UNTUK HP)
   ========================================================================== */
@media (max-width: 576px) {
  body.pagelayout-login {
    height: auto !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    overflow-y: auto !important;
  }

  body.pagelayout-login #page-wrapper {
    height: auto !important;
    max-height: none !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    padding: 16px 12px !important;
    justify-content: center !important;
  }

  body.pagelayout-login .login-wrapper {
    max-width: 100% !important;
    padding: 0 !important;
    margin: auto !important;
  }

  body.pagelayout-login .login-container {
    padding: 24px 20px 18px 20px !important;
    border-radius: 20px !important;
  }

  .login-brand-emblem-svg {
    width: 42px !important;
    height: 42px !important;
  }

  body.pagelayout-login .login-heading {
    font-size: 1.35rem !important;
  }

  .login-subtitle {
    font-size: 0.8rem !important;
  }

  .login-input-control {
    height: 46px !important;
    font-size: 0.9rem !important;
  }

  .login-btn-cta,
  #loginbtn {
    height: 46px !important;
    font-size: 0.95rem !important;
  }

  .login-glow-orb.orb-1 {
    width: 150px;
    height: 150px;
    top: -15px;
    left: -15px;
  }

  .login-glow-orb.orb-2 {
    width: 160px;
    height: 160px;
    bottom: -15px;
    right: -15px;
  }

  .login-glow-orb.orb-3,
  .login-glow-orb.orb-4 {
    display: none;
  }
}

/* ==========================================================================
   PAGE FOOTER & POPOVER REFINEMENTS (100% SEJAJAR DENGAN KONTEN UTAMA)
   ========================================================================== */

/* Pastikan container #page-footer selalu berada di paling dasar (sticky / anchored to bottom) & membentang penuh 100% selebar halaman */
#page-footer,
#page-footer.footer-popover,
#page-footer.bg-white,
#page.drawers #page-footer,
#page-wrapper #page-footer,
.pagelayout-standard #page.drawers #page-footer,
body.limitedwidth #page.drawers #page-footer,
body.mediumwidth #page.drawers #page-footer,
.pagelayout-standard #page.drawers #page-footer.footer-popover,
body.limitedwidth #page.drawers #page-footer.footer-popover,
body.mediumwidth #page.drawers #page-footer.footer-popover {
  max-width: 100% !important;
  width: 100% !important;
  margin-top: auto !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  height: auto !important;
  min-height: auto !important;
  overflow: visible !important;
  flex-shrink: 0 !important;
}

.footer-content-debugging:empty,
.footer-content-debugging:has(.container-fluid:empty) {
  display: none !important;
}

/* Floating Action Button for Help ? (Fixed at Bottom-Right Corner) */
/* Floating Action Button for Help ? (Fixed at Bottom-Right Corner) */
div[data-region="footer-container-popover"] {
  position: relative !important;
  z-index: 1020 !important;
}

#btn-footer-popover-trigger,
.btn-footer-popover {
  position: fixed !important;
  bottom: 2rem !important;
  right: 2rem !important;
  left: auto !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 50%, #7c3aed 100%) !important;
  border: 2px solid rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 10px 28px rgba(79, 70, 229, 0.45),
              0 2px 8px rgba(0, 0, 0, 0.12) !important;
  color: #ffffff !important;
  cursor: pointer !important;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  z-index: 1025 !important;
  pointer-events: auto !important;
}

.btn-footer-communication {
  position: fixed !important;
  bottom: 5.5rem !important;
  right: 2rem !important;
  left: auto !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%) !important;
  border: 2px solid rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 10px 28px rgba(6, 182, 212, 0.45) !important;
  color: #ffffff !important;
  cursor: pointer !important;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  z-index: 1025 !important;
  pointer-events: auto !important;
}

body.modal-open div[data-region="footer-container-popover"],
body.modal-open #btn-footer-popover-trigger,
body.modal-open .btn-footer-popover,
body.modal-open .btn-footer-communication,
body.has-open-modal div[data-region="footer-container-popover"],
body.has-open-modal #btn-footer-popover-trigger,
body.has-open-modal .btn-footer-popover,
body.has-open-modal .btn-footer-communication {
  z-index: 1000 !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

.footer-popover-icon-glow {
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  font-family: 'Outfit', sans-serif !important;
  line-height: 1 !important;
  color: #ffffff !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) !important;
}

.btn-footer-popover:hover,
.btn-footer-communication:hover {
  background: linear-gradient(135deg, #4f46e5 0%, #9333ea 100%) !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
  transform: translateY(-4px) scale(1.1) !important;
  box-shadow: 0 16px 36px rgba(99, 102, 241, 0.6) !important;
}

/* Reposition buttons when sticky footer dock is active */
.hasstickyfooter .btn-footer-popover,
.hasstickyfooter #btn-footer-popover-trigger {
  bottom: calc(1rem + max(80px, 0.9375rem * 3)) !important;
}

.hasstickyfooter .btn-footer-communication {
  bottom: calc(4.5rem + max(80px, 0.9375rem * 3)) !important;
}

/* Footer Popover Floating Card (Scoped strictly to custom help card) */
#liquid-footer-popover-card {
  position: fixed !important;
  right: 2rem !important;
  bottom: calc(2rem + 58px) !important;
  left: auto !important;
  top: auto !important;
  width: 380px !important;
  max-width: calc(100vw - 32px) !important;
  max-height: calc(100vh - 120px) !important;
  z-index: 100000000 !important;
  border-radius: 22px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.95) !important;
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(28px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(200%) !important;
  box-shadow: 0 25px 60px -10px rgba(15, 23, 42, 0.35),
              0 10px 30px -5px rgba(99, 102, 241, 0.3) !important;
  overflow: hidden !important;
  display: none !important;
  flex-direction: column !important;
  pointer-events: auto !important;
}

#liquid-footer-popover-card.show {
  display: flex !important;
  animation: lgFadeInUp 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.hasstickyfooter #liquid-footer-popover-card {
  bottom: calc(1rem + max(80px, 0.9375rem * 3) + 58px) !important;
}

#liquid-footer-popover-card .liquid-footer-card-header {
  background: rgba(248, 250, 252, 0.92) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.9) !important;
  flex-shrink: 0 !important;
}

#liquid-footer-popover-card .popover-body,
.popover.footer .popover-body {
  padding: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  flex: 1 1 auto !important;
}

#liquid-footer-popover-card .popover-body::-webkit-scrollbar,
.popover.footer .popover-body::-webkit-scrollbar {
  width: 6px;
}

#liquid-footer-popover-card .popover-body::-webkit-scrollbar-track,
.popover.footer .popover-body::-webkit-scrollbar-track {
  background: transparent;
}

#liquid-footer-popover-card .popover-body::-webkit-scrollbar-thumb,
.popover.footer .popover-body::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.4);
  border-radius: 999px;
}

#liquid-footer-popover-card .footer-section,
.popover.footer .footer-section {
  padding: 14px 18px !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
  font-size: 0.86rem !important;
  color: #475569 !important;
  line-height: 1.5 !important;
}

#liquid-footer-popover-card .footer-section-dev,
.popover.footer .footer-section-dev {
  border-bottom: none !important;
  background: linear-gradient(135deg, #090d16 0%, #15102a 50%, #0f172a 100%) !important;
  color: #cbd5e1 !important;
  padding: 16px 18px !important;
}

#liquid-footer-popover-card .footer-section-dev .moodle-tag,
.popover.footer .footer-section-dev .moodle-tag {
  color: #94a3b8 !important;
  font-size: 0.78rem !important;
  display: block !important;
}

#liquid-footer-popover-card .footer-section-dev .moodle-version-tag,
.popover.footer .footer-section-dev .moodle-version-tag {
  color: #64748b !important;
  font-size: 0.74rem !important;
  display: block !important;
}

#liquid-footer-popover-card .footer-support-link,
.popover.footer .footer-support-link {
  margin-bottom: 8px !important;
}

#liquid-footer-popover-card .footer-support-link:last-child,
.popover.footer .footer-support-link:last-child {
  margin-bottom: 0 !important;
}

#liquid-footer-popover-card a,
.popover.footer a {
  color: #4f46e5 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.2s ease !important;
}

#liquid-footer-popover-card a:hover,
.popover.footer a:hover {
  color: #ec4899 !important;
  text-decoration: none !important;
  transform: translateX(2px) !important;
}

#liquid-footer-popover-card .logininfo,
.popover.footer .logininfo {
  font-size: 0.84rem !important;
  color: #475569 !important;
  line-height: 1.5 !important;
}

#liquid-footer-popover-card .logininfo a,
.popover.footer .logininfo a {
  color: #4f46e5 !important;
  font-weight: 700 !important;
}

@media (max-width: 576px) {
  #liquid-footer-popover-card,
  .liquid-footer-card {
    right: 12px !important;
    left: 12px !important;
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
    bottom: calc(1.5rem + 54px) !important;
  }
}

/* ==========================================================================
   PERMANENT LUXURY LIQUID GLASS PAGE FOOTER CARD
   (Bentuk Serasi, Mewah, dan Sejajar Penuh dengan Kartu Konten Utama)
   ========================================================================== */
/* ==========================================================================
   PERMANENT REAL FULL-WIDTH EXECUTIVE LUXURY FOOTER
   (Membentang Penuh 100% Edge-to-Edge Seperti Navbar Header)
   ========================================================================== */
.luxury-page-footer {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  background: linear-gradient(180deg, #090e1c 0%, #050811 100%) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 0 !important;
  box-shadow: 0 -12px 45px rgba(0, 0, 0, 0.4) !important;
  position: relative !important;
  z-index: 1 !important;
  overflow: hidden !important;
  color: #e2e8f0 !important;
}

/* Vibrant Multi-Color Neon Accent Bar Across 100% Width */
.luxury-footer-accent-bar {
  height: 3px !important;
  width: 100% !important;
  background: linear-gradient(90deg, #06b6d4 0%, #6366f1 25%, #a855f7 50%, #ec4899 75%, #f59e0b 100%) !important;
  box-shadow: 0 0 16px rgba(99, 102, 241, 0.7), 0 0 8px rgba(236, 72, 153, 0.5) !important;
  border-radius: 0 !important;
}

.luxury-footer-container {
  max-width: 1360px !important;
  margin: 0 auto !important;
  padding: 50px 2.5rem 36px !important;
}

.luxury-footer-grid {
  display: grid !important;
  grid-template-columns: 1.45fr 1.05fr 1.4fr !important;
  gap: 48px !important;
  align-items: start !important;
}

@media (max-width: 991.98px) {
  .luxury-footer-container {
    padding: 36px 1.5rem 28px !important;
  }
  .luxury-footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
  }
}

@media (max-width: 680px) {
  .luxury-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
}

/* Column 1: Brand & Developer */
.luxury-footer-brand {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.luxury-footer-logo-wrap {
  width: 48px !important;
  height: 48px !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px !important;
  flex-shrink: 0 !important;
}

.luxury-footer-logo {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

.luxury-brand-title {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.4rem !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
  background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 50%, #818cf8 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.luxury-brand-tagline {
  font-size: 0.82rem !important;
  color: #94a3b8 !important;
  font-weight: 500 !important;
  display: block !important;
  margin-top: 2px !important;
}

.luxury-footer-desc {
  color: #64748b !important;
  font-size: 0.84rem !important;
  line-height: 1.6 !important;
  margin: 14px 0 0 0 !important;
  max-width: 380px !important;
}

/* ==========================================================================
   DEVELOPER BADGE PILL ("</> Dikembangkan oleh Enlighten - Light")
   Clean, Elegant White Pill with High Contrast & Exact Brand Colors
   ========================================================================== */
.enlighten-dev-highlight-wrap,
.login-dev-footer {
  margin-top: 14px !important;
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
}

.enlighten-badge-pill,
.enlighten-dev-highlight {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 9999px !important;
  padding: 6px 18px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.07), 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  user-select: none !important;
  cursor: default !important;
}

.enlighten-badge-pill:hover,
.enlighten-dev-highlight:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(37, 99, 235, 0.25) !important;
  border-color: #cbd5e1 !important;
}

.enlighten-badge-code {
  font-family: "Consolas", "Monaco", "Courier New", ui-monospace, monospace !important;
  color: #1d72b8 !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  letter-spacing: -0.04em !important;
  margin-right: 2px !important;
  display: inline-block !important;
}

.enlighten-badge-text {
  color: #4b5563 !important;
  font-size: 0.86rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

.enlighten-badge-brand {
  color: #1877f2 !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
}

.enlighten-badge-sep {
  color: #64748b !important;
  font-size: 0.86rem !important;
  font-weight: 600 !important;
  margin: 0 1px !important;
}

.enlighten-badge-name {
  color: #ef4444 !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
}

/* Backward compatibility for inner spans if cached templates are served */
.enlighten-badge-inner {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.enlighten-pulse-dot,
.enlighten-sparkle-icon {
  display: none !important;
}
.enlighten-dev-label {
  color: #4b5563 !important;
  font-size: 0.86rem !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.enlighten-dev-name {
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  color: #1877f2 !important;
  background: none !important;
  -webkit-text-fill-color: #1877f2 !important;
  filter: none !important;
}

/* Column 2: Layanan & Bantuan */
.luxury-col-title {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  color: #f8fafc !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 18px !important;
  display: flex !important;
  align-items: center !important;
}

.luxury-links-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.luxury-links-list a {
  color: #94a3b8 !important;
  font-weight: 500 !important;
  font-size: 0.88rem !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.luxury-links-list a:hover {
  color: #38bdf8 !important;
  transform: translateX(4px) !important;
  text-decoration: none !important;
}

/* Column 3: Sesi & Akun */
.luxury-user-status-card {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  padding: 14px 18px !important;
  font-size: 0.86rem !important;
  color: #cbd5e1 !important;
  line-height: 1.6 !important;
}

.luxury-user-status-card a {
  color: #f87171 !important;
  font-weight: 700 !important;
  display: inline-block !important;
  margin-left: 6px !important;
  padding: 2px 9px !important;
  background: rgba(239, 68, 68, 0.15) !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
}

.luxury-user-status-card a:hover {
  background: #ef4444 !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

.luxury-extra-chips {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 14px !important;
}

.luxury-chip-btn {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #cbd5e1 !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  padding: 7px 16px !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: all 0.2s ease !important;
}

.luxury-chip-btn:hover {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
  color: #ffffff !important;
  border-color: #6366f1 !important;
  transform: translateY(-2px) !important;
  text-decoration: none !important;
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4) !important;
}

/* Full-Width Slim Executive Footer Bar (Bersih, Rapi & Elegan) */
.luxury-footer-slim-bar,
.luxury-footer-bottom-bar {
  background: transparent !important;
  width: 100% !important;
}

.luxury-slim-bar-inner,
.luxury-bottom-bar-inner {
  max-width: 1360px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  padding: 18px 2.5rem !important;
  min-height: 68px !important;
}

@media (max-width: 767.98px) {
  .luxury-slim-bar-inner,
  .luxury-bottom-bar-inner {
    padding: 16px 1.5rem !important;
    flex-direction: column !important;
    text-align: center !important;
    gap: 14px !important;
  }
}

.luxury-footer-mini-brand {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 9px !important;
  margin-right: 6px !important;
  flex-shrink: 0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

.luxury-footer-mini-logo {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

.luxury-bottom-left {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.luxury-copyright {
  color: #94a3b8 !important;
  font-size: 0.82rem !important;
}

.luxury-copyright strong {
  color: #ffffff !important;
}

.version-chip {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #94a3b8 !important;
  font-size: 0.74rem !important;
  padding: 2px 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.enlighten-contrast-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 999px !important;
  padding: 5px 16px !important;
  font-size: 0.78rem !important;
  color: #e2e8f0 !important;
}

.enlighten-contrast-badge .badge-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #06b6d4 !important;
  box-shadow: 0 0 8px #06b6d4 !important;
}

.enlighten-contrast-badge .badge-author {
  background: linear-gradient(135deg, #38bdf8 0%, #818cf8 50%, #e879f9 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
}

/* ==========================================================================
   SLIM LIQUID SCROLLBAR
   ========================================================================== */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(241, 245, 249, 0.5);
}

::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.5);
  border-radius: 20px;
  border: 2px solid transparent;
  background-clip: content-box;
  transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--lg-grad-cosmic);
  background-clip: content-box;
}

/* ==========================================================================
   TOAST NOTIFICATIONS (FROSTED POPUP)
   ========================================================================== */
.toast-wrapper .toast {
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: var(--lg-blur-heavy) !important;
  -webkit-backdrop-filter: var(--lg-blur-heavy) !important;
  border: var(--lg-glass-border) !important;
  border-radius: 18px !important;
  box-shadow: var(--lg-shadow-float) !important;
}

/* ==========================================================================
   QUESTION BANK EXECUTIVE LUXURY & TIDY TABLE REDESIGN
   ========================================================================== */

/* 1. Filter Group Container */
.questionbankwindow .filter-group {
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(226, 232, 240, 0.85) !important;
  border-radius: 18px !important;
  box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.04) !important;
  padding: 18px 22px !important;
  margin-bottom: 20px !important;
  position: relative !important;
  z-index: 105 !important;
  overflow: visible !important;
}

.questionbankwindow [data-filterregion="actions"] {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 14px !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(226, 232, 240, 0.7) !important;
}

.questionbankwindow [data-filteraction="add"] {
  background: rgba(99, 102, 241, 0.08) !important;
  color: #4f46e5 !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  padding: 7px 16px !important;
  border: 1.5px dashed rgba(99, 102, 241, 0.35) !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.questionbankwindow [data-filteraction="add"]:hover {
  background: rgba(99, 102, 241, 0.16) !important;
  color: #3730a3 !important;
  border-color: #6366f1 !important;
}

.questionbankwindow [data-filteraction="showall"],
.questionbankwindow [data-filteraction="reset"] {
  background: #ffffff !important;
  color: #475569 !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  padding: 7px 16px !important;
  transition: all 0.2s ease !important;
}

.questionbankwindow [data-filteraction="showall"]:hover,
.questionbankwindow [data-filteraction="reset"]:hover {
  background: #f8fafc !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

.questionbankwindow [data-filteraction="apply"] {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  padding: 8px 20px !important;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35) !important;
  transition: all 0.2s ease !important;
}

.questionbankwindow [data-filteraction="apply"]:hover {
  transform: translateY(-1px) scale(1.02) !important;
  box-shadow: 0 6px 18px rgba(79, 70, 229, 0.45) !important;
}

/* 2. Controls Toolbar (Above Table) - Perfectly Leveled & Seamless */
.questionbankwindow .d-grid.gap-2.d-md-flex,
.questionbankwindow .d-md-flex.justify-content-start {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-top: 6px !important;
  margin-bottom: 20px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Global 40px Height & Middle Alignment for All Controls */
.questionbankwindow .createnewquestion,
.questionbankwindow .createnewquestion form,
.questionbankwindow .question-text-format,
.questionbankwindow .d-md-flex > a.btn,
.questionbankwindow .d-md-flex > button.btn {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
}

/* 2a. Create New Question Primary Button */
.questionbankwindow .createnewquestion input[type="submit"],
.questionbankwindow .createnewquestion .btn {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  line-height: 40px !important;
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 50%, #8b5cf6 100%) !important;
  color: #ffffff !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 0 20px !important;
  margin: 0 !important;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35) !important;
  transition: all 0.25s ease !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
}

.questionbankwindow .createnewquestion input[type="submit"]:hover,
.questionbankwindow .createnewquestion .btn:hover {
  transform: translateY(-1px) scale(1.02) !important;
  box-shadow: 0 6px 20px rgba(79, 70, 229, 0.45) !important;
  color: #ffffff !important;
}

/* 2b. Reset Columns Secondary Button */
.questionbankwindow .d-md-flex > a.btn,
.questionbankwindow .d-md-flex > button.btn,
.questionbankwindow .d-md-flex .btn-secondary {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  line-height: 38px !important;
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #334155 !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  border-radius: 14px !important;
  padding: 0 18px !important;
  margin: 0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
}

.questionbankwindow .d-md-flex > a.btn:hover,
.questionbankwindow .d-md-flex > button.btn:hover {
  background: #f8fafc !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
  transform: translateY(-1px) !important;
}

/* 2c. Show Question Text Format - Executive Unified Pill */
.questionbankwindow .question-text-format {
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}

.questionbankwindow .question-text-format .input-group {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  overflow: hidden !important;
  transition: all 0.2s ease !important;
}

.questionbankwindow .question-text-format .input-group:focus-within {
  border-color: #8b5cf6 !important;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18) !important;
}

.questionbankwindow .question-text-format .input-group-prepend {
  margin: 0 !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
}

.questionbankwindow .question-text-format .input-group-text {
  background: #f8fafc !important;
  border: none !important;
  border-right: 1.5px solid #e2e8f0 !important;
  border-radius: 0 !important;
  color: #475569 !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  padding: 0 14px !important;
  line-height: 40px !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

.questionbankwindow .question-text-format select#question-text-format,
.questionbankwindow .question-text-format select.form-control {
  border: none !important;
  background-color: #ffffff !important;
  border-radius: 0 !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  padding: 0 32px 0 14px !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  box-shadow: none !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3e%3cpath fill='%2364748b' d='M5 6L0 1.2 1.2 0 5 3.6 8.8 0 10 1.2z'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 10px 6px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer !important;
  line-height: 40px !important;
  vertical-align: middle !important;
  width: auto !important;
  min-width: 80px !important;
}

.questionbankwindow .question-text-format .input-group-append {
  display: none !important;
}

/* 3. Question Bank Table Card Container */
#question_table,
.question_table,
.categoryquestionscontainer {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(226, 232, 240, 0.85) !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.04), 0 4px 12px -2px rgba(0, 0, 0, 0.02) !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  padding: 0 !important;
  margin-bottom: 24px !important;
  position: relative !important;
  z-index: 1 !important;
}

/* 4. Table Structure & Headers */
table.question-bank-table {
  width: 100% !important;
  min-width: 1180px !important;
  table-layout: auto !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

table.question-bank-table thead th.header {
  background: #f8fafc !important;
  border: none !important;
  border-bottom: 1.5px solid #e2e8f0 !important;
  color: #475569 !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  padding: 14px 12px !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}

table.question-bank-table thead tr th:first-child {
  border-top-left-radius: 18px !important;
}

table.question-bank-table thead tr th:last-child {
  border-top-right-radius: 18px !important;
}

/* 5. Tame Action Menu Cogs & Help Icons */
table.question-bank-table .header .action-menu {
  display: inline-block !important;
  vertical-align: middle !important;
  margin-left: 3px !important;
}

table.question-bank-table .header .action-menu .dropdown-toggle {
  color: #94a3b8 !important;
  font-size: 0.72rem !important;
  padding: 2px 4px !important;
  border-radius: 6px !important;
  opacity: 0.55;
  transition: all 0.2s ease !important;
}

table.question-bank-table .header:hover .action-menu .dropdown-toggle {
  opacity: 1;
  color: #4f46e5 !important;
  background: rgba(99, 102, 241, 0.08) !important;
}

table.question-bank-table .header .help-icon,
table.question-bank-table .header .iconhelp {
  font-size: 0.72rem !important;
  color: #94a3b8 !important;
  margin-left: 2px !important;
  vertical-align: middle !important;
}

/* Header sort links */
table.question-bank-table .header .sorters {
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: #64748b !important;
  margin-top: 3px !important;
  display: block !important;
}

table.question-bank-table .header .sorters a {
  color: #4f46e5 !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}

table.question-bank-table .header .sorters a:hover {
  color: #312e81 !important;
  text-decoration: underline !important;
}

table.question-bank-table .header .sorters i.iconsort {
  font-size: 0.7rem !important;
  margin-left: 2px !important;
}

/* 6. Column Widths & Content Balancing */
table.question-bank-table th.checkbox,
table.question-bank-table td.checkbox {
  width: 44px !important;
  max-width: 44px !important;
  text-align: center !important;
  padding: 12px 8px !important;
}

table.question-bank-table .checkbox input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  accent-color: #6366f1 !important;
  cursor: pointer !important;
  vertical-align: middle !important;
}

table.question-bank-table th.qtype,
table.question-bank-table td.qtype {
  width: 50px !important;
  max-width: 50px !important;
  text-align: center !important;
  padding: 12px 6px !important;
}

table.question-bank-table th.questionname,
table.question-bank-table td.questionname {
  min-width: 220px !important;
  max-width: 380px !important;
  font-weight: 600 !important;
}

table.question-bank-table td.questionname a {
  color: #1e293b !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

table.question-bank-table td.questionname a:hover {
  color: #6366f1 !important;
}

table.question-bank-table th.editmenu,
table.question-bank-table td.editmenu {
  width: 90px !important;
  text-align: center !important;
}

table.question-bank-table td.editmenu .dropdown-toggle {
  background: rgba(99, 102, 241, 0.08) !important;
  color: #4f46e5 !important;
  border-radius: 8px !important;
  padding: 4px 10px !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: all 0.2s ease !important;
}

table.question-bank-table td.editmenu .dropdown-toggle:hover {
  background: rgba(99, 102, 241, 0.16) !important;
  color: #3730a3 !important;
}

table.question-bank-table th.questionstatus,
table.question-bank-table td.questionstatus {
  width: 100px !important;
  text-align: center !important;
}

table.question-bank-table td.questionstatus .custom-select,
table.question-bank-table td.questionstatus .badge {
  border-radius: 20px !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  padding: 3px 10px !important;
  min-height: 28px !important;
  height: 28px !important;
  background-color: rgba(16, 185, 129, 0.1) !important;
  border: 1px solid rgba(16, 185, 129, 0.25) !important;
  color: #065f46 !important;
  display: inline-flex !important;
  align-items: center !important;
}

table.question-bank-table th.version,
table.question-bank-table td.version {
  width: 70px !important;
  text-align: center !important;
  font-size: 0.82rem !important;
  color: #64748b !important;
}

/* Fix for author/modifier name vertical squashing */
table.question-bank-table th.creatorname,
table.question-bank-table td.creatorname,
table.question-bank-table th.modifiername,
table.question-bank-table td.modifiername {
  min-width: 180px !important;
  max-width: 250px !important;
  font-size: 0.85rem !important;
  line-height: 1.4 !important;
}

table.question-bank-table td.creatorname,
table.question-bank-table td.modifiername {
  color: #1e293b !important;
  font-weight: 500 !important;
}

table.question-bank-table td.creatorname span.date,
table.question-bank-table td.modifiername span.date {
  display: block !important;
  font-size: 0.76rem !important;
  color: #94a3b8 !important;
  font-weight: normal !important;
  margin-top: 3px !important;
  white-space: nowrap !important;
}

/* Metrics columns compact centering */
table.question-bank-table th.commentscount,
table.question-bank-table td.commentscount,
table.question-bank-table th.needschecking,
table.question-bank-table td.needschecking,
table.question-bank-table th.facilityindex,
table.question-bank-table td.facilityindex,
table.question-bank-table th.discriminativeefficiency,
table.question-bank-table td.discriminativeefficiency,
table.question-bank-table th.usage,
table.question-bank-table td.usage,
table.question-bank-table th.questionlastused,
table.question-bank-table td.questionlastused {
  text-align: center !important;
  min-width: 75px !important;
  font-size: 0.85rem !important;
  color: #64748b !important;
  padding: 12px 8px !important;
}

/* 7. Table Rows Styling */
table.question-bank-table tbody tr {
  border-bottom: 1px solid #f1f5f9 !important;
  transition: background-color 0.15s ease !important;
}

table.question-bank-table tbody tr:last-child {
  border-bottom: none !important;
}

table.question-bank-table tbody tr:hover {
  background-color: rgba(248, 250, 252, 0.95) !important;
}

table.question-bank-table tbody tr.highlight {
  background-color: rgba(99, 102, 241, 0.05) !important;
  border-left: 3px solid #6366f1 !important;
}

table.question-bank-table tbody td {
  padding: 14px 12px !important;
  vertical-align: middle !important;
  border: none !important;
}

/* 8. Bulk Actions UI */
#bulkactionsui-container {
  margin-top: 14px !important;
  margin-bottom: 24px !important;
}

#bulkactionsui-selector {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #334155 !important;
  font-weight: 600 !important;
  border-radius: 12px !important;
  padding: 8px 18px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.2s ease !important;
}

#bulkactionsui-selector:hover {
  background: #f8fafc !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

/* ==========================================================================
   LIQUID GLASS FLOATING BULK ACTIONS DOCK
   ========================================================================== */
#sticky-footer.stickyfooter {
  position: fixed !important;
  bottom: 24px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  max-width: min(94vw, 920px) !important;
  min-height: 58px !important;
  height: auto !important;
  overflow: visible !important;
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 40px -12px rgba(15, 23, 42, 0.22),
              0 8px 16px -4px rgba(99, 102, 241, 0.12),
              inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  z-index: 1040 !important;
  padding: 8px 18px !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body:not(.hasstickyfooter) #sticky-footer.stickyfooter {
  bottom: -120px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(-50%) translateY(30px) scale(0.96) !important;
}

body.hasstickyfooter #sticky-footer.stickyfooter {
  bottom: 24px !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0) scale(1) !important;
}

#sticky-footer .sticky-footer-content-wrapper {
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}

#sticky-footer .sticky-footer-content.bulkactions {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  height: auto !important;
}

/* Left: Select all checkbox badge */
#sticky-footer .form-check {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 7px 14px !important;
  border-radius: 12px !important;
  background: rgba(241, 245, 249, 0.85) !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

#sticky-footer .form-check:hover {
  background: rgba(226, 232, 240, 0.8) !important;
  border-color: #cbd5e1 !important;
}

#sticky-footer .form-check-input {
  position: static !important;
  margin: 0 !important;
  width: 16px !important;
  height: 16px !important;
  cursor: pointer !important;
  accent-color: #6366f1 !important;
}

#sticky-footer .form-check-label {
  margin: 0 !important;
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  color: #334155 !important;
  cursor: pointer !important;
  user-select: none !important;
  line-height: 1 !important;
}

/* Center: Bulk tools list */
#sticky-footer [data-for="bulktools"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 4px !important;
  flex-shrink: 1 !important;
}

#sticky-footer .actions.nav {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

#sticky-footer .actions.nav .nav-item {
  display: inline-flex !important;
  align-items: center !important;
}

#sticky-footer .actions.nav .nav-item.d-none {
  display: none !important;
}

/* Pure CSS bulk action filtering: hide section actions by default unless a section checkbox is checked */
#sticky-footer .actions.nav .nav-item:has(button[data-bulk="section"]) {
  display: none;
}

body:has([data-bulkcheckbox][data-is-selectable="section"]:checked) #sticky-footer .actions.nav .nav-item:has(button[data-bulk="section"]) {
  display: inline-flex !important;
}

body:has([data-bulkcheckbox][data-is-selectable="section"]:checked) #sticky-footer .actions.nav .nav-item:has(button[data-bulk="cm"]) {
  display: none !important;
}

/* Action button styling */
#sticky-footer .actions.nav .btn,
#sticky-footer .actions button {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 6px 14px !important;
  height: 38px !important;
  border-radius: 12px !important;
  font-size: 0.83rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: #334155 !important;
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

#sticky-footer .btn::after {
  display: none !important;
}

#sticky-footer .actions.nav .btn:hover:not(.disabled):not([disabled]) {
  background: #6366f1 !important;
  color: #ffffff !important;
  border-color: #6366f1 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px -2px rgba(99, 102, 241, 0.35) !important;
}

#sticky-footer .actions.nav .btn:hover:not(.disabled):not([disabled]) img.icon,
#sticky-footer .actions.nav .btn:hover:not(.disabled):not([disabled]) i.icon {
  filter: brightness(0) invert(1) !important;
}

#sticky-footer .actions.nav .btn[data-action*="Delete"]:hover:not(.disabled):not([disabled]) {
  background: #ef4444 !important;
  color: #ffffff !important;
  border-color: #ef4444 !important;
  box-shadow: 0 6px 16px -2px rgba(239, 68, 68, 0.35) !important;
}

#sticky-footer .actions.nav .btn.disabled,
#sticky-footer .actions.nav .btn[disabled] {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  background: rgba(241, 245, 249, 0.6) !important;
  border-color: rgba(226, 232, 240, 0.6) !important;
  color: #94a3b8 !important;
  box-shadow: none !important;
  transform: none !important;
}

#sticky-footer .bulkaction-icon {
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

#sticky-footer .bulkaction-icon img.icon,
#sticky-footer .bulkaction-icon i.icon {
  width: 15px !important;
  height: 15px !important;
  font-size: 14px !important;
  margin: 0 !important;
  vertical-align: middle !important;
  transition: transform 0.2s ease !important;
}

#sticky-footer .actions button:hover .bulkaction-icon img.icon,
#sticky-footer .actions button:hover .bulkaction-icon i.icon {
  transform: scale(1.15) !important;
}

#sticky-footer .bulkaction-name {
  line-height: 1 !important;
  font-size: 0.83rem !important;
  font-weight: 600 !important;
  text-transform: capitalize !important;
}

/* Right side: Count & Cancel */
#sticky-footer .sticky-footer-content > .d-flex.flex-column {
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

#sticky-footer .bulkcount {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.12)) !important;
  color: #4f46e5 !important;
  border: 1px solid rgba(99, 102, 241, 0.25) !important;
  border-radius: 12px !important;
  padding: 6px 12px !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

#sticky-footer .bulkcancel {
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}

#sticky-footer .bulkcancel button {
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(241, 245, 249, 0.9) !important;
  border: 1px solid rgba(203, 213, 225, 0.9) !important;
  color: #64748b !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
}

#sticky-footer .bulkcancel button img.icon,
#sticky-footer .bulkcancel button i.icon {
  width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
}

#sticky-footer .bulkcancel button:hover {
  background: #fee2e2 !important;
  border-color: #fca5a5 !important;
  color: #ef4444 !important;
  transform: rotate(90deg) scale(1.08) !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25) !important;
}

#sticky-footer .bulkcancel button:hover img.icon {
  filter: invert(32%) sepia(85%) saturate(3020%) hue-rotate(338deg) brightness(97%) contrast(93%) !important;
}

@media (max-width: 768px) {
  #sticky-footer.stickyfooter {
    bottom: 16px !important;
    max-width: 95vw !important;
    padding: 6px 10px !important;
  }
  #sticky-footer .bulkaction-name {
    display: none !important;
  }
  #sticky-footer .actions.nav .btn {
    padding: 6px 10px !important;
    height: 36px !important;
  }
  #sticky-footer .form-check-label {
    display: none !important;
  }
}

/* ==========================================================================
   EXECUTIVE LIQUID GLASS FORM & SETTINGS LAYOUT (SYMMETRIC & COLORFUL)
   ========================================================================== */

/* Main form container styling */
#page .mform,
#page form.mform {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* --------------------------------------------------------------------------
   OUTER SECTION CARDS (FIELDSETS) - Frosted Crystal Luxury
   -------------------------------------------------------------------------- */
/* Target ONLY the main outer section fieldsets, NOT inner fieldsets */
#page .mform > fieldset,
#page form.mform > fieldset,
#page .mform fieldset.collapsible,
#page .mform fieldset.clearfix:not(.felement):not([id*="_fieldset"]) {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(24px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(190%) !important;
  border-radius: 20px !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  box-shadow: 0 8px 30px -4px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(15, 23, 42, 0.02) !important;
  margin-bottom: 26px !important;
  padding: 0 !important;
  overflow: visible !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#page .mform > fieldset:hover,
#page .mform fieldset.collapsible:hover {
  border-color: rgba(165, 180, 252, 0.9) !important;
  box-shadow: 0 12px 36px -6px rgba(99, 102, 241, 0.12), 0 4px 10px rgba(15, 23, 42, 0.04) !important;
}

/* Explicit Reset for Inner Fieldsets (e.g. Filemanager id_image_fieldset, Radio groups) */
#page .mform .felement fieldset,
#page .mform .fitem fieldset,
#page .mform fieldset[id$="_fieldset"],
#page .mform fieldset.felement {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
}

/* Fieldset Section Header / Toggler Bar */
#page .mform fieldset legend.ftoggler,
#page .mform > fieldset > .d-flex.align-items-center:first-child,
#page .mform fieldset.collapsible > .d-flex.align-items-center:first-child {
  padding: 16px 26px !important;
  margin-bottom: 0 !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.9) 60%, rgba(241, 245, 249, 0.8) 100%) !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.85) !important;
  border-top-left-radius: 19px !important;
  border-top-right-radius: 19px !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

#page .mform fieldset.collapsed legend.ftoggler,
#page .mform fieldset.collapsed > .d-flex.align-items-center:first-child {
  border-bottom-left-radius: 19px !important;
  border-bottom-right-radius: 19px !important;
  border-bottom: none !important;
}

/* Section Title Heading */
#page .mform fieldset .ftoggler h3,
#page .mform fieldset h3.d-flex {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.25rem !important;
  letter-spacing: -0.025em !important;
  color: #0f172a !important;
  margin-bottom: 0 !important;
}

/* Collapse/Expand Toggle Chevron Button - Vibrant Gradient Pill */
#page .mform fieldset .ftoggler a.fheader,
#page .mform fieldset .ftoggler a.icons-collapse-expand,
#page .mform fieldset .ftoggler .btn.btn-icon {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(6, 182, 212, 0.15) 100%) !important;
  color: #4f46e5 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin-right: 12px !important;
  border: 1px solid rgba(99, 102, 241, 0.2) !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 1px 3px rgba(99, 102, 241, 0.1) !important;
}

#page .mform fieldset .ftoggler a.fheader:hover,
#page .mform fieldset .ftoggler a.icons-collapse-expand:hover,
#page .mform fieldset .ftoggler .btn.btn-icon:hover {
  background: linear-gradient(135deg, #4f46e5 0%, #06b6d4 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  transform: scale(1.08) !important;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3) !important;
}

#page .mform fieldset .ftoggler a.fheader .icon,
#page .mform fieldset .ftoggler a.icons-collapse-expand .icon {
  margin: 0 !important;
  font-size: 13px !important;
  width: 14px !important;
  height: 14px !important;
}

/* Fields Inner Container */
#page .mform fieldset .fcontainer {
  padding: 22px 30px 28px 30px !important;
  background: rgba(255, 255, 255, 0.55) !important;
  border-bottom-left-radius: 19px !important;
  border-bottom-right-radius: 19px !important;
  overflow: visible !important;
}

/* --------------------------------------------------------------------------
   FORM ITEM ROWS - Symmetrical 2-Column Precision Layout
   -------------------------------------------------------------------------- */
/* Only target top-level rows (direct children of .fcontainer), NOT inner group elements */
#page .mform .fcontainer > .fitem,
#page .mform .fcontainer > div.row.fitem,
#page .mform .fcontainer > div[id^="fitem_"] {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  padding: 16px 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  border-bottom: 1px solid rgba(241, 245, 249, 0.9) !important;
  width: 100% !important;
}

#page .mform .fcontainer > .fitem:last-child,
#page .mform .fcontainer > div.row.fitem:last-child,
#page .mform .fcontainer > div[id^="fitem_"]:last-child {
  border-bottom: none !important;
}

/* --------------------------------------------------------------------------
   COLUMN 1: LABEL COLUMN (Exact Proportions, Zero Artificial Wrap)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  #page .mform .fcontainer > .fitem > .col-form-label,
  #page .mform .fcontainer > .fitem > .fitem-label-col,
  #page .mform .fcontainer > .fitem > .col-md-3,
  #page .mform .fcontainer > div[id^="fitem_"] > .col-form-label,
  #page .mform .fcontainer > div[id^="fitem_"] > .fitem-label-col,
  #page .mform .fcontainer > div[id^="fitem_"] > .col-md-3 {
    flex: 0 0 240px !important;
    max-width: 240px !important;
    width: 240px !important;
    min-width: 240px !important;
    padding-left: 0 !important;
    padding-right: 20px !important;
    padding-top: 10px !important; /* Perfectly aligns with input text baseline */
    padding-bottom: 0 !important;
    margin: 0 !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
  }
}

@media (min-width: 1200px) {
  #page .mform .fcontainer > .fitem > .col-form-label,
  #page .mform .fcontainer > .fitem > .fitem-label-col,
  #page .mform .fcontainer > .fitem > .col-md-3,
  #page .mform .fcontainer > div[id^="fitem_"] > .col-form-label,
  #page .mform .fcontainer > div[id^="fitem_"] > .fitem-label-col,
  #page .mform .fcontainer > div[id^="fitem_"] > .col-md-3 {
    flex: 0 0 260px !important;
    max-width: 260px !important;
    width: 260px !important;
    min-width: 260px !important;
    padding-right: 24px !important;
  }
}

/* Label Group Inner Wrapper */
#page .fitem-label-group {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  width: auto !important;
}

/* Label Typography */
#page .mform .col-form-label label,
#page .mform .col-form-label .word-break,
#page .mform .col-form-label .fitem-label-text,
#page .fitem label,
#page .fitem .word-break,
#page .fitem-label-text {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.94rem !important;
  color: #0f172a !important;
  letter-spacing: -0.015em !important;
  line-height: 1.35 !important;
  display: inline !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  word-wrap: normal !important;
  white-space: normal !important;
  hyphens: none !important;
  margin-bottom: 0 !important;
  flex: 0 1 auto !important;
}

/* Addon Icons Wrapper: Exclamation (!) & Help (?) */
#page .mform .col-form-label .form-label-addon,
#page .fitem .col-form-label .form-label-addon,
#page .form-label-addon {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}

@media (min-width: 576px) {
  #page .mform:not(.full-width-labels) .col-form-label .form-label-addon {
    margin-left: 0 !important;
  }
}

/* Required Exclamation Badge (!) - Vivid Coral Glow */
#page .form-label-addon .text-danger,
#page .form-label-addon .req-indicator,
#page .form-label-addon .req {
  color: #ef4444 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

#page .form-label-addon .text-danger img.icon,
#page .form-label-addon .req img.icon,
#page .form-label-addon .text-danger i.icon {
  width: 15px !important;
  height: 15px !important;
  display: inline-block !important;
  vertical-align: middle !important;
  filter: drop-shadow(0 1px 3px rgba(239, 68, 68, 0.4)) !important;
}

/* Help Button (?) - Modern Floating Cyan-Indigo Circle */
#page .form-label-addon a,
#page .form-label-addon a.btn-link,
#page .form-label-addon .btn,
#page .form-label-addon button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background: rgba(6, 182, 212, 0.14) !important;
  color: #0284c7 !important;
  border: 1px solid rgba(6, 182, 212, 0.35) !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 1px 3px rgba(6, 182, 212, 0.15) !important;
  text-decoration: none !important;
}

#page .form-label-addon a:hover,
#page .form-label-addon a.btn-link:hover,
#page .form-label-addon .btn:hover {
  background: #0284c7 !important;
  color: #ffffff !important;
  border-color: #0284c7 !important;
  transform: scale(1.15) !important;
  box-shadow: 0 3px 10px rgba(2, 132, 199, 0.35) !important;
}

#page .form-label-addon a .icon,
#page .form-label-addon .btn .icon {
  font-size: 11px !important;
  width: 11px !important;
  height: 11px !important;
  margin: 0 !important;
}

/* --------------------------------------------------------------------------
   COLUMN 2: ELEMENT COLUMN (Takes Full Width, Symmetrical & Unconstrained)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  #page .mform .fcontainer > .fitem > .felement,
  #page .mform .fcontainer > .fitem > .fitem-element-col,
  #page .mform .fcontainer > .fitem > .col-md-9,
  #page .mform .fcontainer > div[id^="fitem_"] > .felement,
  #page .mform .fcontainer > div[id^="fitem_"] > .fitem-element-col,
  #page .mform .fcontainer > div[id^="fitem_"] > .col-md-9 {
    flex: 1 1 calc(100% - 240px) !important;
    max-width: calc(100% - 240px) !important;
    width: calc(100% - 240px) !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: block !important;
  }
}

@media (min-width: 1200px) {
  #page .mform .fcontainer > .fitem > .felement,
  #page .mform .fcontainer > .fitem > .fitem-element-col,
  #page .mform .fcontainer > .fitem > .col-md-9,
  #page .mform .fcontainer > div[id^="fitem_"] > .felement,
  #page .mform .fcontainer > div[id^="fitem_"] > .fitem-element-col,
  #page .mform .fcontainer > div[id^="fitem_"] > .col-md-9 {
    flex: 1 1 calc(100% - 260px) !important;
    max-width: calc(100% - 260px) !important;
    width: calc(100% - 260px) !important;
  }
}

/* --------------------------------------------------------------------------
   TINYMCE RICH TEXT EDITOR - Clean Reference Card inside col-md-9
   -------------------------------------------------------------------------- */
#page [data-fieldtype="editor"],
#page [data-fieldtype="editor"] > div,
#page .editor_tiny,
#page .fitem[data-fieldtype="editor"] .felement,
#page .fitem_feditor .felement {
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
  position: relative !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

#page .tox.tox-tinymce {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  border-radius: 12px !important;
  border: 1.5px solid #cbd5e1 !important;
  overflow: visible !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  background: #ffffff !important;
  position: relative !important;
}

#page .tox.tox-tinymce:focus-within {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
}

#page .tox .tox-menubar {
  background: #ffffff !important;
  border-bottom: 1px solid #f1f5f9 !important;
  padding: 3px 6px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1px !important;
  border-top-left-radius: 11px !important;
  border-top-right-radius: 11px !important;
}

#page .tox .tox-mbtn {
  border-radius: 6px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.83rem !important;
  font-weight: 500 !important;
  color: #334155 !important;
  padding: 3px 8px !important;
  height: 28px !important;
  transition: all 0.15s ease !important;
}

#page .tox .tox-mbtn:hover,
#page .tox .tox-mbtn--active,
#page .tox .tox-mbtn[aria-expanded="true"] {
  background: rgba(99, 102, 241, 0.12) !important;
  color: #4f46e5 !important;
}

#page .tox .tox-toolbar,
#page .tox .tox-toolbar__overflow,
#page .tox .tox-toolbar__primary {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding: 4px 8px !important;
}

#page .tox .tox-tbtn {
  border-radius: 6px !important;
  color: #334155 !important;
  height: 30px !important;
  width: 30px !important;
  transition: all 0.15s ease !important;
}

#page .tox .tox-tbtn:hover,
#page .tox .tox-tbtn--enabled {
  background: rgba(99, 102, 241, 0.1) !important;
  color: #4f46e5 !important;
}

#page .tox .tox-statusbar {
  background: #f8fafc !important;
  border-top: 1px solid #e2e8f0 !important;
  padding: 4px 12px !important;
  color: #94a3b8 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.8rem !important;
  border-bottom-left-radius: 11px !important;
  border-bottom-right-radius: 11px !important;
}

/* ==========================================================================
   TINYMCE & MODAL POPUPS "BRING TO FRONT" FIX (ANTI-CLIPPING & STACKING ORDER)
   Ensures dropdowns, keyboard navigation, equation editor, help, dialogs,
   quickbars, and tooltips are NEVER clipped and stay in front of everything.
   ========================================================================== */

/* 1. Stacking order elevation on active form fieldsets when editor/dropdown is interacted */
#page .mform fieldset:focus-within,
#page .mform fieldset:has(.tox:focus-within),
#page .mform fieldset:has(.tox-tinymce:focus-within),
#page .mform fieldset:has(.tox-tinymce-aux),
#page .mform fieldset:has(.tox-menu),
#page .mform fieldset:has([aria-expanded="true"]),
#page .mform fieldset:has(.show),
#page .mform fieldset.dropdown-fieldset-front {
  z-index: 10000000 !important;
  position: relative !important;
}

/* 2. TinyMCE Sink, Popups, and Floating Auxiliary Layers - ULTRA BRING TO FRONT */
.tox.tox-silver-sink,
.tox.tox-silver-popup-sink,
.tox.tox-tinymce-aux,
.tox-tinymce-aux,
.tox-silver-sink,
.tox-silver-popup-sink {
  z-index: 20000050 !important;
  overflow: visible !important;
}

/* Menus & Submenus (e.g. Tools, Edit, View, Insert, Format, Table, Help) */
.tox .tox-menu,
.tox-menu,
.tox .tox-autocompleter .tox-menu {
  z-index: 20000060 !important;
  background: #ffffff !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  border-radius: 10px !important;
  box-shadow: 0 14px 40px -4px rgba(15, 23, 42, 0.18), 0 4px 16px rgba(99, 102, 241, 0.12) !important;
  overflow: visible !important;
}

/* TinyMCE Popups, Quickbars, Context Toolbars, and Keyboard Tool Popups */
.tox .tox-pop,
.tox .tox-pop__dialog,
.tox-pop,
.tox-pop__dialog,
.tox .tox-toolbar__overflow,
.tox-toolbar__overflow {
  z-index: 20000060 !important;
}

/* Dialog Wrap & Modals (TinyMCE Equation, Source Code, Help, Link, Image Dialogs) */
.tox .tox-dialog-wrap,
.tox-dialog-wrap {
  z-index: 20000070 !important;
}

.tox-dialog-wrap__backdrop {
  z-index: 20000069 !important;
}

.tox .tox-dialog,
.tox-dialog {
  z-index: 20000075 !important;
  border-radius: 16px !important;
  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.28), 0 8px 24px rgba(99, 102, 241, 0.15) !important;
}

/* Tooltips */
.tox .tox-tooltip,
.tox-tooltip {
  z-index: 20000080 !important;
}

/* Notifications */
.tox .tox-notification,
.tox-notification {
  z-index: 20000090 !important;
}

/* 3. Moodle Modals & Dialogues (Enrolment, Question Chooser, Activity Chooser, File Picker, Tiny Modals, etc.) */

/* Non-active / hidden backdrops MUST NOT intercept clicks */
.modal-backdrop:not(.show),
div[data-region="modal-backdrop"]:not(.show),
.modal-backdrop.hide,
div[data-region="modal-backdrop"].hide {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: -9999 !important;
}

/* On desktop (>= 992px) or on any form page, when NO modal is open, drawer backdrops MUST NOT exist or block clicks */
body:not(.modal-open):not(.has-open-modal) .modal-backdrop,
body:not(.modal-open):not(.has-open-modal) div[data-region="modal-backdrop"],
#page-course-modedit .modal-backdrop,
#page-course-modedit div[data-region="modal-backdrop"],
body:has(#region-main .mform) .modal-backdrop:not(body.modal-open .modal-backdrop),
body:has(#region-main .mform) div[data-region="modal-backdrop"]:not(body.modal-open div[data-region="modal-backdrop"]) {
  display: none !important;
  pointer-events: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  z-index: -9999 !important;
}

/* When NO modal is actively open, all backdrops MUST BE COMPLETELY INERT across desktop & mobile */
body:not(.modal-open):not(.has-open-modal):not(:has(#theme_boost-drawers-primary.show)):not(.drawer-primary-open) .modal-backdrop,
body:not(.modal-open):not(.has-open-modal):not(:has(#theme_boost-drawers-primary.show)):not(.drawer-primary-open) div[data-region="modal-backdrop"] {
  display: none !important;
  pointer-events: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  z-index: -9999 !important;
}

/* Primary navigation drawer backdrop (Active when primary drawer is open on desktop or mobile) */
body:not(.modal-open):not(.has-open-modal):has(#theme_boost-drawers-primary.show) .modal-backdrop.show,
body:not(.modal-open):not(.has-open-modal):has(.drawer.drawer-primary.show) .modal-backdrop.show,
body.drawer-primary-open:not(.modal-open):not(.has-open-modal) .modal-backdrop.show,
body.drawer-primary-open:not(.modal-open):not(.has-open-modal) div[data-region="modal-backdrop"].show {
  z-index: 35500000 !important;
  opacity: 0.48 !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  background: rgba(15, 23, 42, 0.48) !important;
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Active visible backdrops strictly behind modal dialog ONLY when a modal is open */
body.modal-open .modal-backdrop.show,
body.modal-open div[data-region="modal-backdrop"].show,
body.has-open-modal .modal-backdrop.show,
body.has-open-modal div[data-region="modal-backdrop"].show,
body:has(.modal.show) .modal-backdrop.show,
body:has(.modal.show) div[data-region="modal-backdrop"].show,
body:has(div[data-region="modal-container"].show) .modal-backdrop.show,
body:has(div[data-region="modal-container"].show) div[data-region="modal-backdrop"].show,
.moodle-dialogue-base:has(.moodle-dialogue:not(.moodle-dialogue-hidden):not(.hidden)) .moodle-dialogue-lightbox:not(.moodle-dialogue-hidden):not(.hidden) {
  z-index: 60000010 !important;
  opacity: 0.55 !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  background: rgba(15, 23, 42, 0.65) !important;
  pointer-events: auto !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
}

/* Inactive or hidden YUI masks and lightboxes must NEVER appear, block, or intercept clicks */
.moodle-dialogue-lightbox,
.moodle-dialogue-base:not(:has(.moodle-dialogue:not(.moodle-dialogue-hidden):not(.hidden))) .moodle-dialogue-lightbox,
.yui3-widget-mask,
.moodle-dialogue-base.moodle-dialogue-hidden,
.moodle-dialogue-base .moodle-dialogue-hidden,
.moodle-dialogue-base.hidden,
.moodle-dialogue-base .hidden,
.moodle-dialogue-base.moodle-dialogue-hidden .moodle-dialogue-lightbox,
.moodle-dialogue-base.hidden .moodle-dialogue-lightbox,
.moodle-dialogue-lightbox.hidden,
.moodle-dialogue-lightbox.moodle-dialogue-hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  z-index: -9999 !important;
}

/* All Moodle modals, dialogs, and overlays have unquestioned top priority ABOVE backdrop */
.modal,
.modal.show,
div[data-region="modal-container"],
div[data-region="modal-container"].show,
.moodle-dialogue-base .moodle-dialogue,
.moodle-dialogue-base .chooserdialogue,
.moodle-dialogue-base .yui3-panel,
.moodle-dialogue-base .moodle-has-zindex,
.chooserdialogue,
.moodle-dialogue,
.moodle-has-zindex,
.yui3-panel {
  z-index: 60000050 !important;
  pointer-events: auto !important;
}

.modal.show,
.modal,
div[data-region="modal-container"].show {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 0 !important;
  z-index: 60000050 !important;
  pointer-events: auto !important;
}

/* Modal dialog container - scrollable & responsive */
.modal-dialog,
div[data-region="modal"] {
  position: relative !important;
  margin: 36px auto !important;
  max-width: 960px !important;
  width: 94% !important;
  max-height: calc(100vh - 72px) !important;
  display: flex !important;
  flex-direction: column !important;
  z-index: 60000060 !important;
  pointer-events: auto !important;
}

.modal-dialog.modal-lg,
.modal-lg {
  max-width: 1020px !important;
}

.modal-dialog.modal-dialog-centered,
.modal-dialog-centered {
  min-height: auto !important;
  margin: 36px auto !important;
}

.modal-content {
  z-index: 60000070 !important;
  pointer-events: auto !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  max-height: calc(100vh - 72px) !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  border-radius: 16px !important;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.35) !important;
}

.modal-header,
div[data-region="header"] {
  flex-shrink: 0 !important;
  padding: 1.15rem 1.5rem !important;
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
  border-top-left-radius: 16px !important;
  border-top-right-radius: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.modal-body,
div[data-region="body"] {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-x: auto !important;
  max-height: calc(100vh - 190px) !important;
  padding: 1.25rem 1.5rem !important;
  -webkit-overflow-scrolling: touch !important;
  pointer-events: auto !important;
}

.modal-footer,
div[data-region="footer"] {
  flex-shrink: 0 !important;
  padding: 0.85rem 1.5rem !important;
  background: #f8fafc !important;
  border-top: 1px solid #e2e8f0 !important;
  border-bottom-left-radius: 16px !important;
  border-bottom-right-radius: 16px !important;
}

/* Question Bank popup interactive elements */
.questionbankwindow,
.questionbankformforpopup,
.categoryquestionscontainer,
.categoryquestionscontainer table,
.categoryquestionscontainer td,
.categoryquestionscontainer th,
.modal table,
.modal td,
.modal th {
  pointer-events: auto !important;
}

.modal input[type="checkbox"],
.modal input[type="radio"],
.modal .btn,
.modal a,
.modal select,
.modal .custom-select,
.modal .close,
.modal [data-action="hide"],
.modal [data-action="toggle"],
.modal [data-toggle="action"] {
  pointer-events: auto !important;
  cursor: pointer !important;
}

.modal input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  accent-color: #4f46e5 !important;
}

/* Sticky submit bar for Question Bank modal so "Add selected questions to the quiz" is ALWAYS reachable */
.questionbankformforpopup #questionsubmit > div:last-child,
.questionbankformforpopup .pt-2:has(input[name="add"]),
#questionsubmit .pt-2 {
  position: sticky !important;
  bottom: 0 !important;
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  padding: 12px 16px !important;
  margin: 16px -1.5rem -1.25rem -1.5rem !important;
  border-top: 1px solid #e2e8f0 !important;
  box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.06) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  z-index: 20 !important;
}

#questionsubmit input[name="add"] {
  pointer-events: auto !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  padding: 8px 20px !important;
  border-radius: 8px !important;
  transition: all 0.2s ease-in-out !important;
}

#questionsubmit input[name="add"]:not(:disabled) {
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35) !important;
  cursor: pointer !important;
}

#questionsubmit input[name="add"]:disabled {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
}

/* When a modal is open, ensure navbar and side drawers drop behind modal & backdrop */
body.modal-open nav.navbar.fixed-top,
body.has-open-modal nav.navbar.fixed-top {
  z-index: 1030 !important;
}

body.modal-open .drawer,
body.modal-open #theme_boost-drawers-courseindex,
body.modal-open #theme_boost-drawers-blocks,
body.modal-open #theme_boost-drawers-primary,
body.has-open-modal .drawer {
  z-index: 1040 !important;
  pointer-events: none !important;
}

/* Guarantee full interactivity, clicking, and typing for all Moodle forms (Assign, Quiz, Page, File, etc.) */
#page-course-modedit,
#page-course-modedit #page,
#page-course-modedit #region-main,
#page-course-modedit #region-main-box,
body:not(.modal-open):not(.has-open-modal) #page,
body:not(.modal-open):not(.has-open-modal) #region-main {
  pointer-events: auto !important;
}

#page-course-modedit #page {
  overflow-y: auto !important;
}

#page .mform,
#page .mform fieldset,
#page .mform .fitem,
#page .mform .felement,
#page .mform input,
#page .mform textarea,
#page .mform select,
#page .mform button,
#page .mform .btn,
#page .mform [role="button"],
#page .mform .editor_tiny,
#page .mform .editor_atto,
#page .mform [data-fieldtype="editor"],
#page .mform .tox,
#page .mform .tox-tinymce,
#page .mform .filemanager,
#page .mform .filepicker,
#page .mform .fp-btn-add,
#page .mform .dndupload-target,
#page .mform .fitem_fcheckbox,
#page .mform .form-check,
#page .mform .form-check-input {
  pointer-events: auto !important;
}

#page .mform input[type="text"],
#page .mform input[type="password"],
#page .mform input[type="email"],
#page .mform input[type="number"],
#page .mform input[type="url"],
#page .mform textarea,
#page .mform [contenteditable="true"] {
  cursor: text !important;
  user-select: text !important;
  -webkit-user-select: text !important;
  pointer-events: auto !important;
}

#page .mform select,
#page .mform input[type="checkbox"],
#page .mform input[type="radio"],
#page .mform button,
#page .mform .btn,
#page .mform [role="button"] {
  cursor: pointer !important;
}

/* Activity Chooser (.modchooser) full interactivity & high-contrast clarity */
.modchooser,
.modchooser .modal-header,
.modchooser .modal-body,
.modchooser .modal-footer,
.modchoosercontainer,
.modchoosercontainer .searchcontainer,
.modchoosercontainer .chooser-container,
.modchoosercontainer .optionscontainer,
.modchoosercontainer .searchresultitemscontainer,
.modchoosercontainer .option,
.modchoosercontainer .option .optioninfo,
.modchoosercontainer .option .optioninfo a,
.modchoosercontainer .option .optionactions,
.modchoosercontainer .option .optionactions button,
.modchooser [data-action="add-chooser-option"],
.modchooser [data-action="manage-module-favourite"],
.modchooser [data-action="show-option-summary"],
.modchooser .nav-tabs,
.modchooser .nav-tabs .nav-link,
.modchooser .searchbar,
.modchooser .searchbar input,
.modchooser .close,
.modchooser button[data-action="hide"] {
  pointer-events: auto !important;
  cursor: pointer !important;
  position: relative !important;
}

.modchooser .searchbar input {
  cursor: text !important;
}

.modchoosercontainer .optionscontainer .option .optioninfo a[data-action="add-chooser-option"],
.modchoosercontainer .searchresultitemscontainer .option .optioninfo a[data-action="add-chooser-option"] {
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  text-decoration: none !important;
  cursor: pointer !important;
  z-index: 2 !important;
}

.modchoosercontainer .option .optionactions {
  z-index: 3 !important;
}

.modchoosercontainer .option:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.18) !important;
  border: 1px solid rgba(99, 102, 241, 0.45) !important;
}



/* Ensure equation library buttons and keyboard tools are clearly visible & clickable */
.tiny_equation_library {
  overflow: visible !important;
}

.tiny_equation_library button {
  border-radius: 8px !important;
  transition: all 0.15s ease !important;
}

.tiny_equation_library button:hover {
  background: #4f46e5 !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25) !important;
}

/* --------------------------------------------------------------------------
   FILE MANAGER (GAMBAR KURSUS) - Symmetrical & Clean inside col-md-9
   -------------------------------------------------------------------------- */
#page [data-fieldtype="filemanager"],
#page [data-fieldtype="filepicker"],
#page .fitem[data-fieldtype="filemanager"] .felement,
#page .fitem[data-fieldtype="filepicker"] .felement {
  width: 100% !important;
  max-width: 100% !important;
}

/* Outer wrapper: clean, NO dashed border! */
#page .filemanager {
  width: 100% !important;
  max-width: 100% !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Restrictions text */
#page .filemanager .fp-restrictions {
  margin-bottom: 8px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  color: #64748b !important;
  display: block !important;
  line-height: 1.4 !important;
}

/* Toolbar Header Navbar: rounded top header */
#page .filemanager .fp-navbar {
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  border-top-left-radius: 12px !important;
  border-top-right-radius: 12px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 8px 12px !important;
  margin-bottom: 0 !important;
  box-shadow: none !important;
}

#page .filemanager .filemanager-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  width: 100% !important;
}

#page .filemanager .fp-toolbar {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  float: none !important;
}

#page .filemanager .fp-toolbar a.btn,
#page .filemanager .fp-toolbar .btn,
#page .filemanager .fp-btn-add a,
#page .filemanager .fp-btn-mkdir a,
#page .filemanager .fp-btn-download a,
#page .filemanager .fp-btn-delete a {
  border-radius: 8px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.82rem !important;
  padding: 5px 12px !important;
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  color: #334155 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03) !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  line-height: 1.2 !important;
}

#page .filemanager .fp-toolbar a.btn:hover,
#page .filemanager .fp-toolbar .btn:hover,
#page .filemanager .fp-btn-add a:hover,
#page .filemanager .fp-btn-mkdir a:hover,
#page .filemanager .fp-btn-download a:hover,
#page .filemanager .fp-btn-delete a:hover {
  background: #4f46e5 !important;
  border-color: #4f46e5 !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 8px rgba(79, 70, 229, 0.25) !important;
}

/* View Switcher Pill Group */
#page .filemanager .fp-viewbar {
  float: none !important;
  display: inline-flex !important;
  align-items: center !important;
  background: #f1f5f9 !important;
  padding: 2px !important;
  border-radius: 8px !important;
  border: 1px solid #e2e8f0 !important;
  gap: 2px !important;
}

#page .filemanager .fp-viewbar a.btn {
  border-radius: 6px !important;
  padding: 4px 8px !important;
  border: none !important;
  background: transparent !important;
  color: #64748b !important;
  transition: all 0.2s ease !important;
}

#page .filemanager .fp-viewbar a.btn.checked,
#page .filemanager .fp-viewbar:not(.disabled) a.checked {
  background: #ffffff !important;
  color: #4f46e5 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}

/* Breadcrumb Path Bar */
#page .filemanager .fp-pathbar {
  margin-top: 6px !important;
  padding-top: 6px !important;
  border-top: 1px solid #f1f5f9 !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.82rem !important;
  color: #475569 !important;
  display: flex !important;
  align-items: center !important;
}

#page .filemanager .fp-pathbar .fp-path-folder-name {
  color: #4f46e5 !important;
  text-decoration: none !important;
}

/* Dropzone Area: Clean Dashed Box */
#page .filemanager-container {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 160px !important;
  border: 1.5px dashed #cbd5e1 !important;
  border-top: none !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 12px !important;
  border-bottom-right-radius: 12px !important;
  background: #fafafa !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.2s ease !important;
  box-shadow: none !important;
}

/* Filepicker Dropzone Area: Standalone Complete Box */
#page .filepicker-filelist {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 160px !important;
  border: 1.5px dashed #cbd5e1 !important;
  border-radius: 14px !important;
  background: #fafafa !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.2s ease !important;
  box-shadow: none !important;
  margin-top: 10px !important;
}

#page .filemanager-container:hover,
#page .filepicker-filelist:hover {
  border-color: #6366f1 !important;
  background: #f8fafc !important;
}

/* Filepicker Choose Button & Max Size Header */
#page [data-fieldtype="filepicker"] [id^="filepicker-wrapper-"] > div:first-child {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-bottom: 8px !important;
}

#page [data-fieldtype="filepicker"] .fp-btn-choose {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.86rem !important;
  padding: 8px 18px !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #334155 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1.3 !important;
}

#page [data-fieldtype="filepicker"] .fp-btn-choose:hover {
  background: #4f46e5 !important;
  border-color: #4f46e5 !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.22) !important;
}

#page [data-fieldtype="filepicker"] [id^="filepicker-wrapper-"] > div:first-child span {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.82rem !important;
  color: #64748b !important;
  font-weight: 500 !important;
}

/* Dropzone Empty Content */
#page .filemanager.fm-noitems .fm-empty-container,
#page .filepicker-filelist .filepicker-container {
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  border: none !important;
  padding: 28px 16px !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

/* Clean Single Drag & Drop Message: Flex column with icon on top, text below */
#page .dndupload-message {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.92rem !important;
  color: #475569 !important;
  font-weight: 500 !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  line-height: 1.5 !important;
  width: 100% !important;
  position: relative !important;
}

#page .dndupload-message br {
  display: none !important;
}

/* Floating Upload Arrow: static flow, order: -1 so it sits cleanly ABOVE text without overlapping */
#page .dndupload-arrow {
  position: static !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  order: -1 !important;
  width: 50px !important;
  height: 50px !important;
  min-width: 50px !important;
  border-radius: 50% !important;
  background: rgba(99, 102, 241, 0.1) !important;
  border: 1.5px solid rgba(99, 102, 241, 0.25) !important;
  color: #4f46e5 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 2px auto !important;
  box-shadow: 0 3px 10px rgba(99, 102, 241, 0.15) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#page .filemanager-container:hover .dndupload-arrow,
#page .filepicker-filelist:hover .dndupload-arrow {
  transform: translateY(-2px) scale(1.05) !important;
  background: #4f46e5 !important;
  border-color: #4f46e5 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.3) !important;
}

#page .dndupload-arrow i {
  font-size: 22px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
}

/* Drop Overlay Target: Strictly hidden unless dragging */
#page .dndupload-target {
  display: none !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  border: 2px dashed #4f46e5 !important;
  border-radius: 12px !important;
  background: rgba(238, 242, 255, 0.96) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  padding: 16px !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 50 !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  color: #4338ca !important;
  gap: 12px !important;
}

#page .dndupload-target br {
  display: none !important;
}

#page .dndupload-target .dndupload-arrow {
  order: -1 !important;
  position: static !important;
  background: #4f46e5 !important;
  border-color: #4f46e5 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.35) !important;
}

#page .filemanager-container.dndupload-over .dndupload-target,
#page .filepicker-filelist.dndupload-over .dndupload-target {
  display: flex !important;
}

/* Filepicker selected file link */
#page .filepicker-filelist .filepicker-filename {
  padding: 24px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  text-align: center !important;
}

#page .filepicker-filelist .filepicker-filename a {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.92rem !important;
  color: #4f46e5 !important;
  text-decoration: none !important;
  padding: 8px 18px !important;
  background: #eef2ff !important;
  border-radius: 8px !important;
  border: 1px solid #c7d2fe !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: all 0.2s ease !important;
}

#page .filepicker-filelist .filepicker-filename a:hover {
  background: #4f46e5 !important;
  border-color: #4f46e5 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25) !important;
}

/* Filemanager Accepted File Types info below dropzone */
#page .mform .fitem[data-fieldtype="filemanager"] .form-control-feedback,
#page .mform .fitem[data-fieldtype="filepicker"] .form-control-feedback,
#page .mform .fitem[data-fieldtype="filemanager"] small,
#page .mform .fitem[data-fieldtype="filemanager"] .text-muted,
#page .mform .fitem[data-fieldtype="filepicker"] small,
#page .mform .fitem[data-fieldtype="filepicker"] .text-muted {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.81rem !important;
  color: #64748b !important;
  margin-top: 6px !important;
  display: block !important;
  line-height: 1.4 !important;
}

/* --------------------------------------------------------------------------
   DATE & TIME SELECTORS & INNER GROUP FORM ITEMS (PERFECT HORIZONTAL ROW)
   -------------------------------------------------------------------------- */
/* CRITICAL: Invalidate any descendant .fitem styles for inner elements */
#page .felement .fitem,
#page .felement div[id^="fitem_"],
#page .felement .fitem.row,
#page .fdate_time_selector .fitem,
#page .fdate_selector .fitem,
#page .fgroup .fitem,
#page [data-fieldtype="date_time"] .fitem,
#page [data-fieldtype="date_selector"] .fitem {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  border: none !important;
  border-bottom: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Date & Time Row Containers */
#page .fdate_time_selector,
#page .fdate_selector,
#page .felement .fdate_time_selector,
#page .felement .fdate_selector,
#page .fgroup,
#page .felement .fgroup,
#page [data-fieldtype="date_time"] .fdate_time_selector,
#page [data-fieldtype="date_selector"] .fdate_selector,
#page fieldset[data-fieldtype="date_time"] > div,
#page fieldset[data-fieldtype="date_selector"] > div {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px 10px !important;
  width: auto !important;
  max-width: 100% !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Reset ANY inner wrapper inside date/time selectors to sit inline */
#page .fdate_time_selector > *,
#page .fdate_selector > *,
#page .fgroup > *,
#page .fdate_time_selector div,
#page .fdate_time_selector span,
#page .fdate_selector div,
#page .fdate_selector span {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  border: none !important;
  border-bottom: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Date / Time Select Dropdowns Styling */
#page .fdate_time_selector select,
#page .fdate_selector select,
#page select.custom-select[name*="[day]"],
#page select.custom-select[name*="[month]"],
#page select.custom-select[name*="[year]"],
#page select.custom-select[name*="[hour]"],
#page select.custom-select[name*="[minute]"] {
  height: 42px !important;
  min-height: 42px !important;
  line-height: 1.5 !important;
  border-radius: 12px !important;
  border: 1.5px solid #cbd5e1 !important;
  background-color: #ffffff !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.92rem !important;
  font-weight: 500 !important;
  color: #1e293b !important;
  padding: 6px 14px !important;
  width: auto !important;
  min-width: 68px !important;
  display: inline-block !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  transition: all 0.2s ease !important;
  margin: 0 !important;
}

#page select.custom-select[name*="[month]"] {
  min-width: 135px !important;
}

#page .fdate_time_selector select:focus,
#page .fdate_selector select:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3.5px rgba(99, 102, 241, 0.15) !important;
  outline: none !important;
}

/* Checkbox label: "Aktifkan" */
#page .fdate_time_selector label,
#page .fdate_selector label,
#page .fdate_time_selector .form-check,
#page .fdate_selector .form-check,
#page [data-fieldtype="date_time"] label,
#page [data-fieldtype="date_selector"] label {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.92rem !important;
  color: #1e293b !important;
  margin: 0 12px 0 0 !important;
  padding: 0 !important;
  border: none !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

#page .fdate_time_selector input[type="checkbox"],
#page .fdate_selector input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  accent-color: #4f46e5 !important;
  cursor: pointer !important;
  margin: 0 !important;
  position: static !important;
}

/* Calendar Button Icon */
#page .fdate_time_selector a,
#page .fdate_selector a,
#page [data-fieldtype="date_time"] a,
#page [data-fieldtype="date_selector"] a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 12px !important;
  background: rgba(99, 102, 241, 0.1) !important;
  color: #4f46e5 !important;
  border: 1px solid rgba(99, 102, 241, 0.2) !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  margin: 0 0 0 4px !important;
  padding: 0 !important;
}

#page .fdate_time_selector a:hover,
#page .fdate_selector a:hover {
  background: #4f46e5 !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(79, 70, 229, 0.25) !important;
}

/* --------------------------------------------------------------------------
   STANDARD INPUT CONTROLS & FORM SELECTS
   -------------------------------------------------------------------------- */
#page .mform .form-control,
#page .mform select.custom-select,
#page .mform .custom-select,
#page .fitem-element-col input[type="text"],
#page .fitem-element-col input[type="password"],
#page .fitem-element-col select {
  border-radius: 12px !important;
  border: 1.5px solid #cbd5e1 !important;
  background-color: #ffffff !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.925rem !important;
  font-weight: 500 !important;
  color: #1e293b !important;
  padding: 8px 14px !important;
  min-height: 42px !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

#page .mform .form-control:focus,
#page .mform select.custom-select:focus,
#page .mform .custom-select:focus,
#page .fitem-element-col input:focus,
#page .fitem-element-col select:focus {
  border-color: #6366f1 !important;
  background-color: #ffffff !important;
  box-shadow: 0 0 0 3.5px rgba(99, 102, 241, 0.15) !important;
  outline: none !important;
}

/* Course Fullname & Shortname Field Widths */
#page .mform input[name="fullname"] {
  width: 100% !important;
  max-width: 640px !important;
}

#page .mform input[name="shortname"] {
  width: 100% !important;
  max-width: 340px !important;
}

/* Form Autocomplete Tag Chips (e.g. "x TKJ") - Bright Glass Badge */
#page .form-autocomplete-selection {
  margin-bottom: 6px !important;
}

#page .form-autocomplete-selection [data-value] {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(6, 182, 212, 0.12) 100%) !important;
  border: 1px solid rgba(99, 102, 241, 0.3) !important;
  border-radius: 999px !important;
  padding: 5px 14px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  color: #3730a3 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  box-shadow: 0 1px 3px rgba(99, 102, 241, 0.1) !important;
}

/* Expand / Collapse All Top-Right Button */
#page .collapsible-actions a,
#page .collapsemenu a {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  color: #4f46e5 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  background: rgba(99, 102, 241, 0.08) !important;
  border: 1px solid rgba(99, 102, 241, 0.18) !important;
}

#page .collapsible-actions a:hover,
#page .collapsemenu a:hover {
  color: #ffffff !important;
  background: #4f46e5 !important;
  border-color: #4f46e5 !important;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.25) !important;
  text-decoration: none !important;
}

/* --------------------------------------------------------------------------
   RESPONSIVE MOBILE LAYOUT (< 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  /* Hide desktop primary links in navbar on mobile so they do not overlap hamburger or brand */
  nav.navbar.fixed-top .primary-navigation {
    display: none !important;
  }
  nav.navbar.fixed-top {
    padding: 0 0.85rem !important;
  }
  nav.navbar .navbar-brand {
    margin-right: 0.5rem !important;
    max-width: 150px !important;
    overflow: hidden !important;
  }
  nav.navbar .navbar-brand .pintar-brand-name {
    font-size: 1.125rem !important;
  }
  #page .mform fieldset .fcontainer {
    padding: 16px !important;
  }
  #page .mform .fcontainer > .fitem,
  #page .mform .fcontainer > div[id^="fitem_"],
  #page .mform .fcontainer > .fitem.row {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 14px 0 !important;
  }
  #page .mform .fcontainer > .fitem > .col-form-label,
  #page .mform .fcontainer > .fitem > .col-md-3,
  #page .mform .fcontainer > .fitem > [class*="col-md-3"],
  #page .mform fieldset .fcontainer.collapseable .col-form-label,
  #page .mform .fcontainer > div[id^="fitem_"] > .col-form-label,
  #page .mform .fcontainer > div[id^="fitem_"] > .col-md-3,
  #page .fitem-label-col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    padding: 0 0 8px 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }
  #page .mform .fcontainer > .fitem > .felement,
  #page .mform .fcontainer > .fitem > .col-md-9,
  #page .mform .fcontainer > .fitem > [class*="col-md-9"],
  #page .mform .fcontainer > div[id^="fitem_"] > .felement,
  #page .mform .fcontainer > div[id^="fitem_"] > .col-md-9,
  #page .fitem-element-col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
  }
}

/* ==========================================================================
   UNIVERSAL PRIMARY SIDE NAVIGATION DRAWER (.drawer-primary)
   Responsive Across Mobile, Tablet & Desktop + Exquisite Liquid Glass
   ========================================================================== */

/* 1. Dedicated Backdrop for Primary & Course Index Drawers */
.drawer-primary-backdrop,
.drawer-courseindex-backdrop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 35500000 !important;
  background-color: rgba(15, 23, 42, 0.48) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.28s ease !important;
}

.drawer-primary-backdrop.show,
body.drawer-primary-open .drawer-primary-backdrop,
.drawer-courseindex-backdrop.show,
body.drawer-courseindex-open .drawer-courseindex-backdrop {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* 2. Closed Primary Drawer (Hidden off-screen left on all devices) */
.drawer.drawer-primary:not(.show),
#theme_boost-drawers-primary:not(.show) {
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  height: 100vh !important;
  left: -380px !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: 36000000 !important;
  transition: left 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.28s ease !important;
}

/* 3. Open Primary Drawer (Slid into view across desktop, tablet & mobile) */
.drawer.drawer-primary.show,
#theme_boost-drawers-primary.show,
body.drawer-primary-open .drawer.drawer-primary,
body.drawer-primary-open #theme_boost-drawers-primary {
  display: flex !important;
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  height: 100vh !important;
  left: 0 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 36000000 !important;
  box-shadow: 16px 0 48px rgba(15, 23, 42, 0.18), 4px 0 16px rgba(99, 102, 241, 0.08) !important;
  transition: left 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.28s ease !important;
}

/* 4. Drawer Container: High-priority luxurious frosted glass for Primary Drawer */
.drawer.drawer-primary,
#theme_boost-drawers-primary {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.96) 100%) !important;
  backdrop-filter: blur(28px) saturate(210%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(210%) !important;
  border-right: 1px solid rgba(226, 232, 240, 0.85) !important;
  border-top: none !important;
  border-left: none !important;
  border-bottom: none !important;
  width: 320px !important;
  max-width: 86vw !important;
  flex-direction: column !important;
}

/* 5. Mobile Touch & Interaction Guarantee for Primary Drawer */
.drawer.drawer-primary.show,
.drawer.drawer-primary.show .drawerheader,
.drawer.drawer-primary.show .drawercontent,
.drawer.drawer-primary.show .list-group,
.drawer.drawer-primary.show .list-group-item,
.drawer.drawer-primary.show a.list-group-item,
.drawer.drawer-primary.show .drawertoggle,
.drawer.drawer-primary.show [data-action="closedrawer"],
.drawer.drawer-primary.show a,
.drawer.drawer-primary.show button {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: rgba(99, 102, 241, 0.12) !important;
  cursor: pointer !important;
}

/* 6. Drawer Header: Frosted header bar with sleek close button & brand */
.drawer.drawer-primary .drawerheader,
.drawer .drawerheader {
  height: 68px !important;
  min-height: 68px !important;
  padding: 0 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(16px) !important;
  position: relative !important;
  z-index: 36000010 !important;
}

/* Close button squircle */
.drawer .drawerheader .drawertoggle,
.drawer .drawerheader button[data-action="closedrawer"] {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  border-radius: 11px !important;
  background: rgba(241, 245, 249, 0.85) !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  color: #64748b !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 36000012 !important;
  touch-action: manipulation !important;
  padding: 0 !important;
  margin: 0 !important;
}

.drawer.drawer-primary .drawerheader .drawertoggle:hover,
.drawer.drawer-primary .drawerheader .drawertoggle:active {
  background: #fee2e2 !important;
  color: #ef4444 !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  transform: scale(1.05) !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15) !important;
}

.drawer.drawer-primary .drawerheader .drawertoggle .icon,
.drawer.drawer-primary .drawerheader .drawertoggle img.icon,
.drawer.drawer-primary .drawerheader .drawertoggle i {
  width: 15px !important;
  height: 15px !important;
  font-size: 15px !important;
  margin: 0 !important;
  line-height: 1 !important;
  color: inherit !important;
}

/* Brand Link inside Drawer Header with Real Website Logo */
.drawer.drawer-primary .drawerheader a[data-region="site-home-link"] {
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
  margin-left: 6px !important;
  max-width: 220px !important;
  overflow: hidden !important;
}

/* Hide generated SVG mortarboard */
.drawer.drawer-primary .drawerheader a[data-region="site-home-link"]::before {
  display: none !important;
  content: none !important;
}

/* Real Website Logo Badge matching Navbar */
.drawer.drawer-primary .drawerheader .pintar-drawer-logo,
.drawer.drawer-primary .drawerheader .pintar-logo-emblem {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(226, 232, 240, 0.95) !important;
  padding: 2px !important;
  flex-shrink: 0 !important;
  margin-right: 10px !important;
}

.drawer.drawer-primary .drawerheader img.pintar-img-logo {
  width: 32px !important;
  height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  object-fit: contain !important;
  border-radius: 50% !important;
  display: block !important;
}

.drawer.drawer-primary .drawerheader .pintar-brand-name,
.drawer.drawer-primary .drawerheader .sitename {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 1.45rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: #1e1b4b !important;
  line-height: 1.2 !important;
}

/* 5. Drawer Content: Scrollable list container */
.drawer.drawer-primary .drawercontent {
  position: relative !important;
  z-index: 1062 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 16px 14px 28px !important;
}

/* Section Title: "Menu Utama" */
.drawer.drawer-primary .drawer-nav-section-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #94a3b8 !important;
  padding: 4px 10px 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.drawer.drawer-primary .drawer-nav-section-title::before {
  content: "" !important;
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #6366f1 !important;
}

/* 6. Navigation List */
.drawer.drawer-primary .drawercontent .list-group {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

/* 7. Nav Item Cards */
.drawer.drawer-primary .drawercontent .list-group-item {
  position: relative !important;
  z-index: 1064 !important;
  border-radius: 14px !important;
  border: 1px solid rgba(226, 232, 240, 0.8) !important;
  background: rgba(255, 255, 255, 0.75) !important;
  color: #334155 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  padding: 10px 14px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03) !important;
}

/* Icon Badge Base */
.drawer.drawer-primary .drawercontent .list-group-item::before {
  content: "" !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  border-radius: 11px !important;
  flex-shrink: 0 !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 20px 20px !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  background-color: #f1f5f9 !important;
  border: 1px solid rgba(203, 213, 225, 0.7) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolygon points='16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76' fill='%2364748b' fill-opacity='0.25'/%3E%3C/svg%3E") !important;
}

/* 1. HOME ICON (Modern Blue House) */
.drawer.drawer-primary .drawercontent .list-group-item[data-key="home"]::before,
.drawer.drawer-primary .drawercontent .list-group-item[data-nav-type="home"]::before,
.drawer.drawer-primary .drawercontent .list-group-item[href$="/"]::before,
.drawer.drawer-primary .drawercontent .list-group-item[href*="index.php"]:not([href*="my"]):not([href*="course"]):not([href*="admin"])::before {
  background-color: #eff6ff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z' fill='%232563eb' fill-opacity='0.15'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22' stroke='%232563eb' stroke-width='1.8'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 20px 20px !important;
  border: 1px solid rgba(59, 130, 246, 0.22) !important;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.08) !important;
}

/* 2. DASHBOARD ICON (Modern Indigo 4-Card Grid) */
.drawer.drawer-primary .drawercontent .list-group-item[data-key="myhome"]::before,
.drawer.drawer-primary .drawercontent .list-group-item[data-nav-type="dashboard"]::before,
.drawer.drawer-primary .drawercontent .list-group-item[href*="/my"]::before {
  background-color: #eef2ff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='2' fill='%234f46e5' fill-opacity='0.25'/%3E%3Crect x='14' y='3' width='7' height='7' rx='2' fill='%234f46e5' fill-opacity='0.1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='2' fill='%234f46e5' fill-opacity='0.25'/%3E%3Crect x='3' y='14' width='7' height='7' rx='2' fill='%234f46e5' fill-opacity='0.1'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 20px 20px !important;
  border: 1px solid rgba(99, 102, 241, 0.22) !important;
  box-shadow: 0 2px 6px rgba(79, 70, 229, 0.08) !important;
}

/* 3. MY COURSES ICON (Modern Amber Graduation Cap) */
.drawer.drawer-primary .drawercontent .list-group-item[data-key="mycourses"]::before,
.drawer.drawer-primary .drawercontent .list-group-item[data-nav-type="courses"]::before,
.drawer.drawer-primary .drawercontent .list-group-item[href*="/course"]::before {
  background-color: #fffbeb !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d97706' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 10v6M2 10l10-5 10 5-10 5z' fill='%23d97706' fill-opacity='0.18'/%3E%3Cpath d='M6 12v5c0 1.66 2.69 3 6 3s6-1.34 6-3v-5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 20px 20px !important;
  border: 1px solid rgba(245, 158, 11, 0.25) !important;
  box-shadow: 0 2px 6px rgba(217, 119, 6, 0.08) !important;
}

/* 4. SITE ADMINISTRATION ICON (Modern Rose Settings Cog) */
.drawer.drawer-primary .drawercontent .list-group-item[data-key="siteadminnode"]::before,
.drawer.drawer-primary .drawercontent .list-group-item[data-nav-type="admin"]::before,
.drawer.drawer-primary .drawercontent .list-group-item[href*="/admin"]::before {
  background-color: #fff1f2 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e11d48' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3' fill='%23e11d48' fill-opacity='0.22'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 20px 20px !important;
  border: 1px solid rgba(244, 63, 94, 0.25) !important;
  box-shadow: 0 2px 6px rgba(225, 29, 72, 0.08) !important;
}

/* Chevron arrow on the right side */
.drawer.drawer-primary .drawercontent .list-group-item:not(.icons-collapse-expand)::after {
  content: "" !important;
  display: inline-block !important;
  margin-left: auto !important;
  width: 14px !important;
  height: 14px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='14' height='14' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  opacity: 0;
  transform: translateX(-4px);
  transition: all 0.2s ease !important;
}

/* Hover state */
.drawer.drawer-primary .drawercontent .list-group-item:hover {
  background: rgba(255, 255, 255, 0.95) !important;
  color: #0f172a !important;
  transform: translateX(4px) !important;
  border-color: rgba(226, 232, 240, 0.9) !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06) !important;
}

.drawer.drawer-primary .drawercontent .list-group-item:hover::after {
  opacity: 0.9 !important;
  transform: translateX(0) !important;
}

/* Tap feedback */
.drawer.drawer-primary .drawercontent .list-group-item:active {
  transform: scale(0.98) translateX(2px) !important;
}

/* ACTIVE ITEM: Vibrant Indigo Liquid Glass Card with Left Rim Accent */
.drawer.drawer-primary .drawercontent .list-group-item.active {
  background: linear-gradient(90deg, rgba(238, 242, 255, 0.96) 0%, rgba(245, 243, 255, 0.7) 100%) !important;
  color: #312e81 !important;
  font-weight: 700 !important;
  border: 1px solid rgba(199, 210, 254, 0.85) !important;
  border-left: 4px solid #4f46e5 !important;
  box-shadow: 0 4px 16px rgba(79, 70, 229, 0.12), inset 0 1px 0 #ffffff !important;
  transform: translateX(3px) !important;
}

.drawer.drawer-primary .drawercontent .list-group-item.active::after {
  opacity: 0.9 !important;
  transform: translateX(0) !important;
}

/* 8. Nested Dropdown Sub-menus in Drawer */
.drawer.drawer-primary .drawercontent .collapse.show.list-group-item {
  background: rgba(248, 250, 252, 0.8) !important;
  border-radius: 12px !important;
  margin: 2px 0 6px 12px !important;
  padding: 6px !important;
  border-left: 2.5px solid rgba(99, 102, 241, 0.3) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.drawer.drawer-primary .drawercontent .collapse:not(.show) {
  display: none !important;
}

.drawer.drawer-primary .drawercontent .collapse .list-group-item {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: #64748b !important;
  padding: 8px 12px !important;
  border-radius: 9px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
}

.drawer.drawer-primary .drawercontent .collapse .list-group-item::before,
.drawer.drawer-primary .drawercontent .collapse .list-group-item::after {
  display: none !important;
}

.drawer.drawer-primary .drawercontent .collapse .list-group-item:hover {
  background: #ffffff !important;
  color: #4f46e5 !important;
  transform: translateX(3px) !important;
}

.drawer.drawer-primary .drawercontent .collapse .list-group-item.active {
  background: rgba(99, 102, 241, 0.12) !important;
  color: #4338ca !important;
  font-weight: 600 !important;
}

/* 9. Drawer Smart Footer Branding Card */
.drawer.drawer-primary .drawer-smart-footer {
  margin-top: 28px !important;
  padding-top: 16px !important;
  border-top: 1px dashed rgba(226, 232, 240, 0.85) !important;
}

.drawer.drawer-primary .drawer-school-card {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, rgba(248, 250, 252, 0.95), rgba(241, 245, 249, 0.8)) !important;
  border: 1px solid rgba(226, 232, 240, 0.85) !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}

.drawer.drawer-primary .school-icon-wrap {
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  background: rgba(16, 185, 129, 0.12) !important;
  border: 1px solid rgba(16, 185, 129, 0.25) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.drawer.drawer-primary .school-live-indicator {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #10b981 !important;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.7) !important;
  animation: pulseLive 2s infinite ease-in-out !important;
}

@keyframes pulseLive {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.25); opacity: 0.7; }
}

.drawer.drawer-primary .school-info-wrap {
  display: flex !important;
  flex-direction: column !important;
}

.drawer.drawer-primary .school-name {
  font-family: 'Outfit', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  letter-spacing: -0.01em !important;
}

.drawer.drawer-primary .school-status {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  color: #64748b !important;
}

/* ==========================================================================
   MESSAGE DRAWER & CHAT PANEL ([data-region="right-hand-drawer"], .message-app)
   Luxury Frosted Glass, Sleek Search, Squircle Cards & Refined Chat UI
   ========================================================================== */

/* 1. Drawer Container: Frosted Glass Panel */
[data-region="right-hand-drawer"],
[data-region="right-hand-drawer"].drawer {
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(28px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(200%) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.85) !important;
  box-shadow: -14px 0 45px rgba(15, 23, 42, 0.14), -4px 0 12px rgba(99, 102, 241, 0.05) !important;
  z-index: 1050 !important;
  width: 330px !important;
}

@media (max-width: 767.98px) {
  [data-region="right-hand-drawer"],
  [data-region="right-hand-drawer"].drawer {
    width: 100% !important;
    max-width: 100% !important;
    top: 0 !important;
    height: 100vh !important;
    z-index: 1060 !important;
  }
}

.message-app {
  background: transparent !important;
  height: 100% !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* 2. Sleek Close Button in Top Corner */
.message-app .closewidget {
  padding: 10px 14px 4px !important;
  display: flex !important;
  justify-content: flex-end !important;
  background: transparent !important;
}

.message-app .closewidget a[data-action="closedrawer"] {
  width: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
  background: rgba(241, 245, 249, 0.85) !important;
  border: 1px solid rgba(203, 213, 225, 0.75) !important;
  color: #64748b !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
}

.message-app .closewidget a[data-action="closedrawer"]:hover {
  background: #fee2e2 !important;
  color: #ef4444 !important;
  border-color: rgba(239, 68, 68, 0.35) !important;
  transform: scale(1.06) !important;
  box-shadow: 0 3px 10px rgba(239, 68, 68, 0.15) !important;
}

.message-app .closewidget a[data-action="closedrawer"] .icon,
.message-app .closewidget a[data-action="closedrawer"] img.icon,
.message-app .closewidget a[data-action="closedrawer"] i {
  font-size: 13px !important;
  width: 13px !important;
  height: 13px !important;
  margin: 0 !important;
  line-height: 1 !important;
  color: inherit !important;
}

/* 3. Search Bar, Settings & Contacts Navigation */
.message-app .header-container [data-region="view-overview"] {
  border-bottom: 1px solid rgba(226, 232, 240, 0.7) !important;
  padding: 4px 14px 12px !important;
  background: transparent !important;
}

.message-app .simplesearchform {
  border-radius: 12px !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04) !important;
  display: flex !important;
  flex: 1 !important;
}

.message-app .simplesearchform input.form-control,
.message-app .simplesearchform [data-region="view-overview-search-input"] {
  height: 40px !important;
  border-radius: 12px 0 0 12px !important;
  border: 1.5px solid rgba(203, 213, 225, 0.75) !important;
  border-right: none !important;
  background: rgba(255, 255, 255, 0.9) !important;
  padding: 8px 14px !important;
  font-size: 0.885rem !important;
  color: #1e293b !important;
  font-family: 'Inter', sans-serif !important;
  transition: all 0.2s ease !important;
}

.message-app .simplesearchform input.form-control:focus {
  border-color: #6366f1 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.message-app .simplesearchform .input-group-append {
  margin-left: 0 !important;
}

.message-app .simplesearchform .btn-submit {
  height: 40px !important;
  border-radius: 0 12px 12px 0 !important;
  border: 1.5px solid rgba(203, 213, 225, 0.75) !important;
  border-left: none !important;
  background: rgba(248, 250, 252, 0.95) !important;
  color: #6366f1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 14px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.message-app .simplesearchform .btn-submit:hover {
  background: #e0e7ff !important;
  color: #4338ca !important;
}

.message-app .simplesearchform .btn-submit .icon {
  margin: 0 !important;
  font-size: 14px !important;
  color: inherit !important;
}

/* Settings Cog button */
.message-app a[data-route="view-settings"] {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 12px !important;
  background: rgba(248, 250, 252, 0.95) !important;
  border: 1.5px solid rgba(203, 213, 225, 0.75) !important;
  color: #475569 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
}

.message-app a[data-route="view-settings"]:hover {
  background: #ffffff !important;
  color: #6366f1 !important;
  border-color: #6366f1 !important;
  transform: scale(1.05) !important;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15) !important;
}

.message-app a[data-route="view-settings"] .icon {
  margin: 0 !important;
  font-size: 16px !important;
}

/* Contacts capsule chip */
.message-app a[data-route="view-contacts"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 14px !important;
  border-radius: 999px !important;
  background: rgba(99, 102, 241, 0.08) !important;
  border: 1px solid rgba(99, 102, 241, 0.18) !important;
  color: #4338ca !important;
  font-weight: 600 !important;
  font-size: 0.835rem !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.message-app a[data-route="view-contacts"]:hover {
  background: rgba(99, 102, 241, 0.16) !important;
  color: #312e81 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.12) !important;
}

.message-app a[data-route="view-contacts"] .icon {
  font-size: 12px !important;
  color: inherit !important;
}

/* 4. Section Accordions ("Bertanda bintang", "Grup", "Privat") */
/* Reset global .card styles so message sections don't balloon or distort */
.message-app .view-overview-body {
  padding: 8px 4px !important;
}

.message-app .view-overview-body .section,
.message-app .card {
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(226, 232, 240, 0.85) !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
  transform: none !important;
  margin: 8px 10px !important;
  overflow: hidden !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.message-app .view-overview-body .section:hover,
.message-app .card:hover {
  transform: none !important;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.08) !important;
  border-color: rgba(165, 180, 252, 0.6) !important;
  background: rgba(255, 255, 255, 0.96) !important;
}

.message-app .card-header {
  background: transparent !important;
  border-bottom: none !important;
  padding: 0 !important;
}

.message-app .card-header::after {
  display: none !important;
}

/* Section Toggle Header Button */
.message-app .overview-section-toggle {
  padding: 13px 16px !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.93rem !important;
  letter-spacing: -0.01em !important;
  color: #1e293b !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  border-radius: 0 !important;
  border: none !important;
  background: transparent !important;
  transition: background 0.2s ease !important;
  box-shadow: none !important;
}

.message-app .overview-section-toggle:hover {
  background: rgba(241, 245, 249, 0.6) !important;
  color: #4338ca !important;
  text-decoration: none !important;
}

/* Caret Icons Toggle: strictly one visible at a time */
.message-app .overview-section-toggle .collapsed-icon-container,
.message-app .overview-section-toggle .expanded-icon-container {
  width: 22px !important;
  height: 22px !important;
  align-items: center !important;
  justify-content: center !important;
  color: #6366f1 !important;
  background: rgba(99, 102, 241, 0.08) !important;
  border-radius: 6px !important;
  margin-right: 10px !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
}

/* Default (Expanded): show expanded icon, hide collapsed icon */
.message-app .overview-section-toggle .collapsed-icon-container {
  display: none !important;
}
.message-app .overview-section-toggle .expanded-icon-container {
  display: inline-flex !important;
}

/* Collapsed: show collapsed icon, hide expanded icon */
.message-app .overview-section-toggle.collapsed .collapsed-icon-container {
  display: inline-flex !important;
}
.message-app .overview-section-toggle.collapsed .expanded-icon-container {
  display: none !important;
}

.message-app .overview-section-toggle .collapsed-icon-container .icon,
.message-app .overview-section-toggle .expanded-icon-container .icon {
  font-size: 11px !important;
  color: #6366f1 !important;
  margin: 0 !important;
  line-height: 1 !important;
  transition: color 0.2s ease !important;
}

.message-app .overview-section-toggle:hover .collapsed-icon-container,
.message-app .overview-section-toggle:hover .expanded-icon-container {
  background: rgba(99, 102, 241, 0.16) !important;
  color: #4f46e5 !important;
}
.message-app .overview-section-toggle:hover .collapsed-icon-container .icon,
.message-app .overview-section-toggle:hover .expanded-icon-container .icon {
  color: #4f46e5 !important;
}

.message-app .overview-section-toggle [data-region="section-total-count-container"] {
  font-size: 0.825rem !important;
  color: #64748b !important;
  font-weight: 500 !important;
  margin-left: 6px !important;
}

.message-app .overview-section-toggle [data-region="section-unread-count-container"] {
  background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
  color: #ffffff !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.3) !important;
}

/* 5. Conversation Items within Section */
.message-app .list-group {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  border-top: 1px solid rgba(226, 232, 240, 0.7) !important;
}

.message-app .list-group .list-group-item {
  border: none !important;
  border-bottom: 1px solid rgba(241, 245, 249, 0.85) !important;
  background: transparent !important;
  padding: 12px 16px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  color: #334155 !important;
  text-decoration: none !important;
  position: relative !important;
}

.message-app .list-group .list-group-item:last-child {
  border-bottom: none !important;
}

.message-app .list-group .list-group-item:hover {
  background: rgba(241, 245, 249, 0.85) !important;
  color: #0f172a !important;
  transform: translateX(3px) !important;
}

/* Avatar in conversation row */
.message-app .list-group .list-group-item img.rounded-circle {
  width: 42px !important;
  height: 42px !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08) !important;
  border: 1.5px solid #ffffff !important;
  margin-top: 0 !important;
  align-self: center !important;
}

/* Name heading */
.message-app .list-group .list-group-item h6 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.895rem !important;
  color: #1e293b !important;
  margin-bottom: 2px !important;
}

/* Last message preview */
.message-app .list-group .list-group-item .last-message {
  font-size: 0.815rem !important;
  color: #64748b !important;
  min-height: auto !important;
  line-height: 1.35 !important;
}

/* Date / time stamp */
.message-app .list-group .list-group-item small.text-muted {
  font-size: 0.75rem !important;
  color: #94a3b8 !important;
  font-weight: 500 !important;
}

/* Online Status indicator dot */
.message-app .contact-status {
  position: absolute !important;
  left: 44px !important;
  bottom: 12px !important;
  z-index: 2 !important;
}

.message-app .contact-status.online .icon,
.message-app .contact-status.online i {
  color: #10b981 !important;
  font-size: 11px !important;
  filter: drop-shadow(0 0 4px rgba(16, 185, 129, 0.6)) !important;
}

/* Chevron arrow on the right */
.message-app .list-group .list-group-item i.fa-angle-right,
.message-app .list-group .list-group-item i.fa-chevron-right {
  color: #94a3b8 !important;
  font-size: 14px !important;
  transition: transform 0.2s ease, color 0.2s ease !important;
}

.message-app .list-group .list-group-item:hover i.fa-angle-right,
.message-app .list-group .list-group-item:hover i.fa-chevron-right {
  color: #6366f1 !important;
  transform: translateX(2px) !important;
}

/* 6. Conversation Chat View (Inside an open chat) */
.message-app .view-conversation [data-region="header-container"] {
  border-bottom: 1px solid rgba(226, 232, 240, 0.7) !important;
  background: rgba(255, 255, 255, 0.6) !important;
  backdrop-filter: blur(12px) !important;
  padding: 10px 14px !important;
}

.message-app .icon-back-in-drawer,
.message-app [data-route-back] {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  background: rgba(241, 245, 249, 0.85) !important;
  border: 1px solid rgba(226, 232, 240, 0.8) !important;
  color: #475569 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

.message-app .icon-back-in-drawer:hover,
.message-app [data-route-back]:hover {
  background: #ffffff !important;
  color: #6366f1 !important;
  border-color: #6366f1 !important;
  transform: translateX(-2px) !important;
}

/* Chat Bubbles */
.message-app .message {
  border-radius: 14px !important;
  padding: 10px 14px !important;
  font-size: 0.885rem !important;
  line-height: 1.45 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
  margin-bottom: 8px !important;
}

.message-app .message.send {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
  color: #ffffff !important;
  border-bottom-right-radius: 3px !important;
}

.message-app .message.received {
  background: rgba(255, 255, 255, 0.95) !important;
  color: #1e293b !important;
  border: 1px solid rgba(226, 232, 240, 0.8) !important;
  border-bottom-left-radius: 3px !important;
}

/* Chat Input Footer */
.message-app .footer-container {
  border-top: 1px solid rgba(226, 232, 240, 0.7) !important;
  background: rgba(255, 255, 255, 0.7) !important;
  padding: 8px 12px !important;
}

.message-app .footer-container textarea {
  border-radius: 12px !important;
  border: 1.5px solid rgba(203, 213, 225, 0.75) !important;
  background: rgba(255, 255, 255, 0.95) !important;
  padding: 10px 12px !important;
  font-size: 0.9rem !important;
  font-family: 'Inter', sans-serif !important;
  color: #1e293b !important;
  transition: all 0.2s ease !important;
}

.message-app .footer-container textarea:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
  outline: none !important;
}

.message-app .footer-container [data-action="send-message"] {
  border-radius: 12px !important;
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25) !important;
  transition: all 0.2s ease !important;
}

.message-app .footer-container [data-action="send-message"]:hover {
  transform: scale(1.04) !important;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35) !important;
}

/* ==========================================================================
   PAGE HEADER & HEADER ACTIONS ALIGNMENT (RATA KANAN & RESPONSIVE DOCK)
   ========================================================================== */
#page-header.header-maxwidth,
.header-maxwidth,
.single-section-page .header-maxwidth,
body.limitedwidth .header-maxwidth {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#page-header {
  width: 100% !important;
  margin-bottom: 22px !important;
}

#page-navbar {
  width: 100% !important;
  margin-bottom: 8px !important;
}

#page-navbar .breadcrumb {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  color: #64748b !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

#page-navbar .breadcrumb-item a {
  color: #6366f1 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

#page-navbar .breadcrumb-item a:hover {
  color: #4f46e5 !important;
  text-decoration: underline !important;
}

#page-navbar .breadcrumb-item.active {
  color: #334155 !important;
  font-weight: 600 !important;
}

#page-header > div > .d-flex.align-items-center {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}

#page-header .page-context-header {
  margin: 0 !important;
  padding: 0 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

#page-header .page-context-header .page-header-headings h1,
#page-header h1.h2,
#page-header h1 {
  font-family: 'Outfit', sans-serif !important;
  font-size: 1.75rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: #0f172a !important;
  margin: 0 !important;
  line-height: 1.25 !important;
}

.single-section-page .header-actions-container,
.header-actions-container {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  margin-left: auto !important;
  text-align: right !important;
}

.single-section-page .header-actions-container .header-action,
.header-actions-container .header-action {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
}

.header-actions-container .bulkEnable,
.bulkEnable.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  height: 38px !important;
  padding: 0 16px !important;
  border-radius: 10px !important;
  font-family: 'Outfit', 'Inter', sans-serif !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  background: rgba(99, 102, 241, 0.08) !important;
  color: #4f46e5 !important;
  border: 1.5px solid rgba(99, 102, 241, 0.25) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.header-actions-container .bulkEnable:hover,
.bulkEnable.btn:hover {
  background: #4f46e5 !important;
  color: #ffffff !important;
  border-color: #4f46e5 !important;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.3) !important;
  transform: translateY(-1px) !important;
}

.header-actions-container .bulkEnable .icon,
.bulkEnable.btn .icon,
.header-actions-container .bulkEnable i,
.bulkEnable.btn i {
  font-size: 13px !important;
  margin: 0 !important;
  color: inherit !important;
}

.header-actions-container .action-menu,
.header-actions-container .action-menu .menubar,
.header-actions-container .action-menu .dropdown {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
}

.header-actions-container .action-menu .dropdown-toggle:not(.dropdown-item) {
  height: 38px !important;
  min-width: 38px !important;
  width: 38px !important;
  border-radius: 10px !important;
  background: rgba(248, 250, 252, 0.9) !important;
  border: 1.5px solid rgba(226, 232, 240, 0.95) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

.header-actions-container .action-menu .dropdown-toggle:not(.dropdown-item):hover {
  background: rgba(255, 255, 255, 1) !important;
  border-color: #6366f1 !important;
  color: #4f46e5 !important;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.2) !important;
  transform: translateY(-1px) !important;
}

/* ==========================================================================
   QUIZ EDIT PAGE (#page-mod-quiz-edit) - LIQUID GLASS ENHANCEMENTS
   Luminous, colorful, tidy and unified interface
   ========================================================================== */

#page-mod-quiz-edit #region-main {
  font-family: var(--lg-font-family, 'Outfit', 'Inter', sans-serif) !important;
}

#page-mod-quiz-edit [role="main"] h2:first-of-type,
#page-mod-quiz-edit h2.heading {
  font-family: var(--lg-font-family, 'Outfit', 'Inter', sans-serif) !important;
  font-weight: 800 !important;
  font-size: 1.65rem !important;
  letter-spacing: -0.02em !important;
  color: #0f172a !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 20px !important;
}

/* --- Top Controls Hero Card --- */
#page-mod-quiz-edit .mod_quiz-edit-top-controls {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border: 1.5px solid rgba(226, 232, 240, 0.88) !important;
  border-radius: 20px !important;
  padding: 20px 24px !important;
  margin-bottom: 28px !important;
  box-shadow: 0 10px 30px -5px rgba(99, 102, 241, 0.08), 0 4px 12px -2px rgba(15, 23, 42, 0.03) !important;
}

#page-mod-quiz-edit .mod_quiz-edit-top-controls > div {
  margin-bottom: 12px !important;
}
#page-mod-quiz-edit .mod_quiz-edit-top-controls > div:last-child {
  margin-bottom: 0 !important;
}

/* Status Pill Badges */
#page-mod-quiz-edit .statusbar {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 0 !important; /* Conceal raw delimiter pipe */
}

#page-mod-quiz-edit .statusbar .numberofquestions {
  font-family: var(--lg-font-family, 'Outfit', 'Inter', sans-serif) !important;
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  color: #4338ca !important;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(139, 92, 246, 0.12) 100%) !important;
  border: 1.5px solid rgba(99, 102, 241, 0.25) !important;
  border-radius: 9999px !important;
  padding: 6px 16px !important;
  letter-spacing: 0.01em !important;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.08) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

#page-mod-quiz-edit .statusbar .quizopeningstatus {
  font-family: var(--lg-font-family, 'Outfit', 'Inter', sans-serif) !important;
  font-size: 0.86rem !important;
  font-weight: 600 !important;
  color: #047857 !important;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(5, 150, 105, 0.1) 100%) !important;
  border: 1.5px solid rgba(16, 185, 129, 0.28) !important;
  border-radius: 9999px !important;
  padding: 6px 16px !important;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.08) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

#page-mod-quiz-edit .statusbar .quizopeningstatus::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.9);
}

/* Maximum Grade Input Box */
#page-mod-quiz-edit .maxgrade {
  display: inline-flex !important;
  align-items: center !important;
}

#page-mod-quiz-edit .maxgrade label {
  font-family: var(--lg-font-family, 'Outfit', 'Inter', sans-serif) !important;
  font-weight: 600 !important;
  color: #475569 !important;
  font-size: 0.88rem !important;
  margin-right: 8px !important;
  margin-bottom: 0 !important;
}

#page-mod-quiz-edit .maxgrade input#inputmaxgrade {
  width: 72px !important;
  height: 38px !important;
  border-radius: 10px !important;
  border: 1.5px solid #cbd5e1 !important;
  background: #ffffff !important;
  font-family: var(--lg-font-family, 'Outfit', 'Inter', sans-serif) !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  text-align: center !important;
  padding: 4px 8px !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.2s ease !important;
}

#page-mod-quiz-edit .maxgrade input#inputmaxgrade:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2) !important;
  outline: none !important;
}

#page-mod-quiz-edit .maxgrade input[type="submit"] {
  height: 38px !important;
  padding: 0 18px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
  color: #ffffff !important;
  border: none !important;
  font-family: var(--lg-font-family, 'Outfit', 'Inter', sans-serif) !important;
  font-weight: 600 !important;
  font-size: 0.88rem !important;
  box-shadow: 0 3px 12px rgba(79, 70, 229, 0.28) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
}

#page-mod-quiz-edit .maxgrade input[type="submit"]:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(79, 70, 229, 0.38) !important;
  background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%) !important;
}

#page-mod-quiz-edit .maxgrade button.btn-distribute-marks {
  height: 38px !important;
  padding: 0 16px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
  color: #ffffff !important;
  border: none !important;
  font-family: var(--lg-font-family, 'Outfit', 'Inter', sans-serif) !important;
  font-weight: 600 !important;
  font-size: 0.88rem !important;
  box-shadow: 0 3px 12px rgba(16, 185, 129, 0.28) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
}

#page-mod-quiz-edit .maxgrade button.btn-distribute-marks:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.4) !important;
  background: linear-gradient(135deg, #047857 0%, #059669 100%) !important;
}

/* Hide Moodle Site Registration Warnings */
.alert:has(form[action*="registration/index.php"]),
.alert:has(a[href*="admin/registration"]),
.alert:has([data-help-icon*="registration"]),
.alert.alert-danger:has(.singlebutton form[action*="registration"]),
div.error.alert.alert-danger:has(a[href*="registration"]) {
  display: none !important;
}

/* Action Buttons (Repaginate, Select Multiple) */
#page-mod-quiz-edit .mod_quiz-edit-action-buttons {
  display: flex !important;
  gap: 10px !important;
}

#page-mod-quiz-edit .mod_quiz-edit-action-buttons input.btn,
#page-mod-quiz-edit .mod_quiz-edit-action-buttons button.btn {
  height: 38px !important;
  padding: 0 18px !important;
  border-radius: 10px !important;
  font-family: var(--lg-font-family, 'Outfit', 'Inter', sans-serif) !important;
  font-weight: 600 !important;
  font-size: 0.88rem !important;
  background: rgba(255, 255, 255, 0.95) !important;
  color: #334155 !important;
  border: 1.5px solid rgba(203, 213, 225, 0.9) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
}

#page-mod-quiz-edit .mod_quiz-edit-action-buttons input.btn:hover,
#page-mod-quiz-edit .mod_quiz-edit-action-buttons button.btn:hover {
  background: rgba(99, 102, 241, 0.08) !important;
  border-color: #6366f1 !important;
  color: #4f46e5 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15) !important;
}

/* Total Points Badge */
#page-mod-quiz-edit .totalpoints {
  font-family: var(--lg-font-family, 'Outfit', 'Inter', sans-serif) !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  color: #b45309 !important;
  background: linear-gradient(135deg, rgba(254, 243, 199, 0.9) 0%, rgba(253, 230, 138, 0.6) 100%) !important;
  border: 1.5px solid rgba(245, 158, 11, 0.35) !important;
  border-radius: 12px !important;
  padding: 8px 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.1) !important;
}

/* Bulk Selection Toolbar & Buttons */
#page-mod-quiz-edit .selectmultiplecommand.actions {
  display: inline-flex !important;
  gap: 8px !important;
}

#page-mod-quiz-edit #selectmultipledeletecommand {
  background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  padding: 0 16px !important;
  height: 38px !important;
  box-shadow: 0 3px 12px rgba(225, 29, 72, 0.25) !important;
}

#page-mod-quiz-edit #selectmultiplecancelcommand {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  padding: 0 16px !important;
  height: 38px !important;
}

/* --- Section Lists & Heading --- */
#page-mod-quiz-edit ul.slots {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

#page-mod-quiz-edit ul.slots li.section {
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#page-mod-quiz-edit ul.slots li.section .content {
  background: transparent !important;
  padding: 0 !important;
}

#page-mod-quiz-edit ul.section {
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

#page-mod-quiz-edit .section-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin: 20px 0 12px 0 !important;
  height: auto !important;
  padding: 6px 4px !important;
}

#page-mod-quiz-edit .section-heading .instancesectioncontainer {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

#page-mod-quiz-edit .section-heading .instancesectioncontainer h3 {
  font-family: var(--lg-font-family, 'Outfit', 'Inter', sans-serif) !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}

#page-mod-quiz-edit .section-heading .editing_section {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  background: rgba(99, 102, 241, 0.08) !important;
  color: #4f46e5 !important;
  transition: all 0.15s ease !important;
  margin-left: 6px !important;
}

#page-mod-quiz-edit .section-heading .editing_section:hover {
  background: #4f46e5 !important;
  color: #ffffff !important;
  transform: scale(1.05) !important;
}

#page-mod-quiz-edit .section-heading .editing_section .icon {
  margin: 0 !important;
  font-size: 12px !important;
}

#page-mod-quiz-edit .section-heading .instanceshufflequestions {
  float: none !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(255, 255, 255, 0.85) !important;
  border: 1.5px solid rgba(226, 232, 240, 0.95) !important;
  border-radius: 10px !important;
  padding: 6px 14px !important;
  font-family: var(--lg-font-family, 'Outfit', 'Inter', sans-serif) !important;
  font-size: 0.86rem !important;
  font-weight: 600 !important;
  color: #334155 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  backdrop-filter: blur(10px) !important;
}

#page-mod-quiz-edit .section-heading .instanceshufflequestions input[type="checkbox"] {
  accent-color: #6366f1 !important;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  cursor: pointer !important;
}

#page-mod-quiz-edit .section-heading .instanceshufflequestions label {
  margin: 0 !important;
  cursor: pointer !important;
  font-weight: 600 !important;
  color: #334155 !important;
}

#page-mod-quiz-edit .section-heading .instanceshufflequestions .shuffle-help-tip {
  display: inline-flex !important;
  align-items: center !important;
}

/* --- Page Banners (Page 1, Page 2, ...) --- */
#page-mod-quiz-edit ul.slots li.section li.activity.page {
  background: linear-gradient(90deg, rgba(238, 242, 255, 0.95) 0%, rgba(245, 243, 255, 0.75) 100%) !important;
  border: 1px solid rgba(224, 231, 255, 0.95) !important;
  border-left: 4px solid #6366f1 !important;
  border-radius: 12px !important;
  padding: 10px 18px !important;
  margin: 22px 0 10px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.05) !important;
  backdrop-filter: blur(10px) !important;
}

#page-mod-quiz-edit ul.slots li.section li.activity.page h4 {
  margin: 0 !important;
  font-family: var(--lg-font-family, 'Outfit', 'Inter', sans-serif) !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  color: #4338ca !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

#page-mod-quiz-edit ul.slots li.section li.activity.page h4::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6366f1;
  box-shadow: 0 0 8px rgba(99, 102, 241, 0.6);
}

/* Page Add Button (+ Add) */
#page-mod-quiz-edit .add-menu-outer {
  position: relative !important;
  right: auto !important;
}

#page-mod-quiz-edit .add-menu-outer .action-menu .dropdown-toggle:not(.dropdown-item) {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
  color: #ffffff !important;
  font-family: var(--lg-font-family, 'Outfit', 'Inter', sans-serif) !important;
  font-weight: 600 !important;
  font-size: 0.82rem !important;
  padding: 6px 16px !important;
  border-radius: 9999px !important;
  box-shadow: 0 3px 10px rgba(99, 102, 241, 0.25) !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}

#page-mod-quiz-edit .add-menu-outer .action-menu .dropdown-toggle:not(.dropdown-item):hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.35) !important;
  color: #ffffff !important;
}

#page-mod-quiz-edit .add-menu-outer .dropdown-menu {
  border-radius: 14px !important;
  border: 1.5px solid rgba(226, 232, 240, 0.95) !important;
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(16px) !important;
  box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.12) !important;
  padding: 6px !important;
  min-width: 230px !important;
}

#page-mod-quiz-edit .add-menu-outer .dropdown-item {
  border-radius: 8px !important;
  padding: 8px 14px !important;
  font-family: var(--lg-font-family, 'Outfit', 'Inter', sans-serif) !important;
  font-weight: 600 !important;
  color: #334155 !important;
  font-size: 0.88rem !important;
  transition: all 0.15s ease !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

#page-mod-quiz-edit .add-menu-outer .dropdown-item:hover {
  background: rgba(99, 102, 241, 0.08) !important;
  color: #4f46e5 !important;
}

#page-mod-quiz-edit .add-menu-outer .dropdown-item .icon {
  color: #6366f1 !important;
  margin-right: 4px !important;
}

#page-mod-quiz-edit .last-add-menu {
  height: auto !important;
  margin: 20px 0 !important;
  display: flex !important;
  justify-content: flex-end !important;
}

/* --- Question Slot Cards --- */
#page-mod-quiz-edit ul.slots li.section li.activity.slot {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1.5px solid rgba(226, 232, 240, 0.92) !important;
  border-radius: 14px !important;
  margin: 8px 0 !important;
  padding: 10px 16px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.02) !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative !important;
}

#page-mod-quiz-edit ul.slots li.section li.activity.slot:hover {
  border-color: rgba(165, 180, 252, 0.95) !important;
  box-shadow: 0 8px 22px rgba(99, 102, 241, 0.12), 0 2px 4px rgba(15, 23, 42, 0.02) !important;
  transform: translateY(-1.5px) !important;
}

/* Drag Handle */
#page-mod-quiz-edit ul.slots li.section li.activity.slot .editing_move {
  position: absolute !important;
  left: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 26px !important;
  height: 26px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 6px !important;
  color: #94a3b8 !important;
  cursor: grab !important;
  transition: all 0.15s ease !important;
  z-index: 2 !important;
  background: transparent !important;
}

#page-mod-quiz-edit ul.slots li.section li.activity.slot .editing_move:hover {
  color: #6366f1 !important;
  background: rgba(99, 102, 241, 0.1) !important;
}

#page-mod-quiz-edit ul.slots li.section li.activity.slot .editing_move .icon {
  margin: 0 !important;
  font-size: 13px !important;
}

/* Card Inner Layout */
#page-mod-quiz-edit ul.slots li.section li.activity.slot .mod-indent-outer {
  padding-left: 28px !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  gap: 10px !important;
}

/* Slot Number Pill */
#page-mod-quiz-edit .slotnumber {
  background: linear-gradient(135deg, #eef2ff 0%, #ede9fe 100%) !important;
  color: #4f46e5 !important;
  font-family: var(--lg-font-family, 'Outfit', 'Inter', sans-serif) !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  min-width: 32px !important;
  height: 32px !important;
  border-radius: 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(199, 210, 254, 0.9) !important;
  margin: 0 !important;
  box-shadow: 0 2px 5px rgba(99, 102, 241, 0.08) !important;
  flex-shrink: 0 !important;
}

/* Activity Instance & Title */
#page-mod-quiz-edit ul.slots li.activity div.activityinstance {
  display: flex !important;
  align-items: center !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  gap: 8px !important;
}

#page-mod-quiz-edit ul.slots li.activity div.activityinstance .instancename {
  display: inline-flex !important;
  align-items: center !important;
  height: auto !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  gap: 8px !important;
  width: 100% !important;
}

#page-mod-quiz-edit ul.slots li.activity div.activityinstance .questionname {
  font-family: var(--lg-font-family, 'Outfit', 'Inter', sans-serif) !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  font-size: 0.92rem !important;
}

#page-mod-quiz-edit ul.slots li.activity div.activityinstance .questiontext {
  color: #64748b !important;
  font-size: 0.85rem !important;
  font-weight: 400 !important;
}

/* Quickedit Title Pencil */
#page-mod-quiz-edit .activityinstance .quickeditlink,
#page-mod-quiz-edit .activityinstance .editing_title,
#page-mod-quiz-edit .editicon {
  color: #818cf8 !important;
  transition: color 0.15s ease !important;
}

#page-mod-quiz-edit .activityinstance .quickeditlink:hover,
#page-mod-quiz-edit .editicon:hover {
  color: #4f46e5 !important;
}

/* Slot Actions Container */
#page-mod-quiz-edit .section .activity .actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: transparent !important;
  padding: 0 !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

/* Version Dropdown Select */
#page-mod-quiz-edit .version-selection {
  height: 32px !important;
  padding: 2px 24px 2px 10px !important;
  font-family: var(--lg-font-family, 'Outfit', 'Inter', sans-serif) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: #334155 !important;
  background-color: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.15s ease !important;
}

#page-mod-quiz-edit .version-selection:hover,
#page-mod-quiz-edit .version-selection:focus {
  border-color: #6366f1 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
}

/* Preview Action Button */
#page-mod-quiz-edit ul.slots li.section li.activity a.preview {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  background: rgba(14, 165, 233, 0.1) !important;
  color: #0284c7 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(14, 165, 233, 0.25) !important;
  text-decoration: none !important;
  transition: all 0.18s ease !important;
}

#page-mod-quiz-edit ul.slots li.section li.activity a.preview:hover {
  background: #0284c7 !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(2, 132, 199, 0.3) !important;
}

#page-mod-quiz-edit ul.slots li.section li.activity a.preview .icon {
  margin: 0 !important;
  font-size: 13px !important;
}

/* Delete Action Button */
#page-mod-quiz-edit ul.slots li.section li.activity a.editing_delete {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  background: rgba(244, 63, 94, 0.1) !important;
  color: #e11d48 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(244, 63, 94, 0.25) !important;
  text-decoration: none !important;
  transition: all 0.18s ease !important;
}

#page-mod-quiz-edit ul.slots li.section li.activity a.editing_delete:hover {
  background: #e11d48 !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(225, 29, 72, 0.3) !important;
}

#page-mod-quiz-edit ul.slots li.section li.activity a.editing_delete .icon {
  margin: 0 !important;
  font-size: 13px !important;
}

/* Marks / Points Container */
#page-mod-quiz-edit ul.slots li.section li.activity .instancemaxmarkcontainer {
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 4px 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 0 0 4px !important;
  transition: all 0.15s ease !important;
}

#page-mod-quiz-edit ul.slots li.section li.activity .instancemaxmarkcontainer:hover {
  border-color: #cbd5e1 !important;
  background: #ffffff !important;
}

#page-mod-quiz-edit ul.slots li.section li.activity .instancemaxmark {
  font-family: var(--lg-font-family, 'Outfit', 'Inter', sans-serif) !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  color: #334155 !important;
}

#page-mod-quiz-edit ul.slots li.section li.activity .editing_maxmark {
  color: #6366f1 !important;
  cursor: pointer !important;
}

#page-mod-quiz-edit ul.slots li.section li.activity .instancemaxmarkcontainer input[type="text"] {
  height: 26px !important;
  padding: 2px 6px !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  border: 1.5px solid #6366f1 !important;
}

/* Page Split / Join Button */
#page-mod-quiz-edit ul.slots li.section li.activity .page_split_join_wrapper {
  position: absolute !important;
  left: -14px !important;
  bottom: -13px !important;
  z-index: 5 !important;
}

#page-mod-quiz-edit .page_split_join_wrapper a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
  color: #64748b !important;
  transition: all 0.15s ease !important;
}

#page-mod-quiz-edit .page_split_join_wrapper a:hover {
  background: #6366f1 !important;
  border-color: #6366f1 !important;
  color: #ffffff !important;
  transform: scale(1.1) !important;
  box-shadow: 0 4px 10px rgba(99, 102, 241, 0.25) !important;
}

#page-mod-quiz-edit .page_split_join_wrapper .icon {
  margin: 0 !important;
  font-size: 11px !important;
}

/* ==========================================================================
   QUIZ ATTEMPT & PREVIEW PAGE (.path-mod-quiz) - LIQUID GLASS LUXURY UI
   Ultra-clean glass cards, interactive option pills, modern nav grid
   ========================================================================== */

/* 1. Main Question Container Card (Liquid Glass with Top Accent Gradient) */
.path-mod-quiz .que,
#page-mod-quiz-attempt .que,
#page-mod-quiz-review .que,
#page-mod-quiz-summary .que,
#page-question-preview .que,
.que {
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(20px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(190%) !important;
  border: 1.5px solid rgba(226, 232, 240, 0.95) !important;
  border-radius: 22px !important;
  box-shadow: 0 14px 35px -6px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(0, 0, 0, 0.02) !important;
  padding: 24px !important;
  margin: 18px 0 26px 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 24px !important;
  clear: both !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.25s ease !important;
}

.path-mod-quiz .que::before,
#page-mod-quiz-attempt .que::before,
#page-mod-quiz-review .que::before,
.que::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 5px !important;
  background: linear-gradient(90deg, #4f46e5 0%, #7c3aed 50%, #06b6d4 100%) !important;
  border-radius: 22px 22px 0 0 !important;
}

@media (max-width: 991.98px) {
  #page-mod-quiz-attempt .que,
  #page-mod-quiz-review .que,
  #page-mod-quiz-summary .que,
  #page-question-preview .que,
  .path-mod-quiz .que,
  .que {
    flex-direction: column !important;
    padding: 14px !important;
    gap: 12px !important;
  }
}

/* 2. Left Question Info Sidebar (Compact Gradient Pill Panel) */
.path-mod-quiz .que .info,
#page-mod-quiz-attempt .que .info,
.que .info {
  float: none !important;
  width: 145px !important;
  min-width: 145px !important;
  max-width: 145px !important;
  background: linear-gradient(170deg, #f8fafc 0%, #f1f5f9 100%) !important;
  border: 1.5px solid rgba(226, 232, 240, 0.95) !important;
  border-radius: 16px !important;
  padding: 18px 12px 14px 12px !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 9px !important;
  text-align: center !important;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.9), 0 2px 6px rgba(0, 0, 0, 0.02) !important;
  box-sizing: border-box !important;
}

@media (max-width: 991.98px) {
  #page-mod-quiz-attempt .que .info,
  #page-mod-quiz-review .que .info,
  #page-mod-quiz-summary .que .info,
  #page-question-preview .que .info,
  .path-mod-quiz .que .info,
  .que .info {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 14px !important;
    gap: 8px !important;
  }
}

.path-mod-quiz .que .info h3.no,
.que .info h3.no {
  margin: 0 !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #64748b !important;
  font-family: 'Outfit', sans-serif !important;
}

.path-mod-quiz .que .info span.qno,
.que .info span.qno {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  font-size: 1.45rem !important;
  font-weight: 800 !important;
  font-family: 'Outfit', sans-serif !important;
  margin: 2px auto !important;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.38) !important;
}

.path-mod-quiz .que .info .state,
.que .info .state {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important;
  border: 1px solid #fde68a !important;
  color: #b45309 !important;
  font-weight: 700 !important;
  font-size: 0.72rem !important;
  border-radius: 8px !important;
  padding: 4px 8px !important;
  width: 100% !important;
  text-align: center !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
  box-sizing: border-box !important;
}

.path-mod-quiz .que .info .grade,
.que .info .grade {
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%) !important;
  border: 1px solid #c7d2fe !important;
  color: #4338ca !important;
  font-weight: 700 !important;
  font-size: 0.72rem !important;
  border-radius: 8px !important;
  padding: 4px 8px !important;
  width: 100% !important;
  text-align: center !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
  box-sizing: border-box !important;
}

.path-mod-quiz .que .info .questionflag,
.que .info .questionflag {
  margin-top: 4px !important;
  width: 100% !important;
}

.path-mod-quiz .que .info .questionflag a,
.que .info .questionflag a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 5px 8px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: #64748b !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}

.path-mod-quiz .que .info .questionflag a:hover,
.que .info .questionflag a:hover {
  background: #fee2e2 !important;
  border-color: #fca5a5 !important;
  color: #dc2626 !important;
}

.path-mod-quiz .que .info .editquestion,
.que .info .editquestion {
  width: 100% !important;
}

.path-mod-quiz .que .info .editquestion a,
.que .info .editquestion a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  background: rgba(14, 165, 233, 0.08) !important;
  border: 1.5px solid rgba(14, 165, 233, 0.25) !important;
  border-radius: 8px !important;
  padding: 5px 8px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: #0284c7 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}

.path-mod-quiz .que .info .editquestion a:hover,
.que .info .editquestion a:hover {
  background: #0284c7 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3) !important;
}

.path-mod-quiz .que .info .badge,
.que .info .badge {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
  color: #ffffff !important;
  border-radius: 6px !important;
  font-size: 0.68rem !important;
  padding: 3px 8px !important;
  font-weight: 700 !important;
  margin-top: 4px !important;
}

/* 3. Main Question Content & Formulation Card */
.path-mod-quiz .que .content,
.que .content {
  margin: 0 !important;
  flex: 1 1 auto !important;
  width: calc(100% - 170px) !important;
  min-width: 0 !important;
}

@media (max-width: 991.98px) {
  #page-mod-quiz-attempt .que .content,
  #page-mod-quiz-review .que .content,
  #page-mod-quiz-summary .que .content,
  #page-question-preview .que .content,
  .path-mod-quiz .que .content,
  .que .content {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
}

.path-mod-quiz .que .formulation,
.que .formulation {
  background: #ffffff !important;
  border: 1.5px solid rgba(226, 232, 240, 0.95) !important;
  border-radius: 18px !important;
  padding: 24px 26px !important;
  color: #1e293b !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.02) !important;
}

/* Question Scenario / Text Container */
.path-mod-quiz .que .qtext,
.que .qtext {
  font-family: 'Inter', sans-serif !important;
  font-size: 1.05rem !important;
  line-height: 1.8 !important;
  font-weight: 500 !important;
  color: #0f172a !important;
  margin-bottom: 22px !important;
  padding: 18px 22px !important;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
  border: 1.5px solid #e2e8f0 !important;
  border-left: 5px solid #6366f1 !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.8), 0 2px 6px rgba(0, 0, 0, 0.02) !important;
}

.path-mod-quiz .que .qtext p:last-child,
.que .qtext p:last-child {
  margin-bottom: 0 !important;
}

/* Prompt ("Select one:") */
.path-mod-quiz .que .prompt,
.que .prompt {
  font-size: 0.84rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #6366f1 !important;
  margin-bottom: 14px !important;
  font-family: 'Outfit', sans-serif !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.path-mod-quiz .que .prompt::before,
.que .prompt::before {
  content: '✦';
  font-size: 0.9rem;
  color: #8b5cf6;
}

/* 4. Multiple Choice Option Cards (Colorful & Interactive) */
.path-mod-quiz .que.multichoice .answer,
.que.multichoice .answer {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.path-mod-quiz .que.multichoice .answer div.r0,
.path-mod-quiz .que.multichoice .answer div.r1,
.que.multichoice .answer div.r0,
.que.multichoice .answer div.r1 {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 13px 18px !important;
  margin-bottom: 0 !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.03) !important;
}

.path-mod-quiz .que.multichoice .answer div.r0:hover,
.path-mod-quiz .que.multichoice .answer div.r1:hover,
.que.multichoice .answer div.r0:hover,
.que.multichoice .answer div.r1:hover {
  border-color: #818cf8 !important;
  background: #faf5ff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.14) !important;
}

/* Selected Option: Glowing Vibrant Indigo-Violet Tint */
.path-mod-quiz .que.multichoice .answer div.r0:has(input:checked),
.path-mod-quiz .que.multichoice .answer div.r1:has(input:checked),
.que.multichoice .answer div.r0:has(input:checked),
.que.multichoice .answer div.r1:has(input:checked) {
  background: linear-gradient(135deg, rgba(238, 242, 255, 0.98) 0%, rgba(224, 231, 255, 0.85) 100%) !important;
  border-color: #4f46e5 !important;
  box-shadow: 0 6px 20px -4px rgba(79, 70, 229, 0.3), inset 0 0 0 1px #6366f1 !important;
  transform: translateY(-1px) !important;
}

.path-mod-quiz .que.multichoice .answer input[type="radio"],
.path-mod-quiz .que.multichoice .answer input[type="checkbox"],
.que.multichoice .answer input[type="radio"],
.que.multichoice .answer input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  margin: 0 12px 0 0 !important;
  accent-color: #4f46e5 !important;
  cursor: pointer !important;
}

.path-mod-quiz .que.multichoice .answernumber,
.que.multichoice .answernumber {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 9px !important;
  font-weight: 800 !important;
  font-size: 0.85rem !important;
  margin-right: 12px !important;
  font-family: 'Outfit', sans-serif !important;
  transition: all 0.2s ease !important;
  text-transform: uppercase !important;
}

.path-mod-quiz .que.multichoice div.r0:hover .answernumber,
.path-mod-quiz .que.multichoice div.r1:hover .answernumber,
.que.multichoice div.r0:hover .answernumber,
.que.multichoice div.r1:hover .answernumber {
  border-color: #818cf8 !important;
  color: #4f46e5 !important;
  background: #eef2ff !important;
}

.path-mod-quiz .que.multichoice div.r0:has(input:checked) .answernumber,
.path-mod-quiz .que.multichoice div.r1:has(input:checked) .answernumber,
.que.multichoice div.r0:has(input:checked) .answernumber,
.que.multichoice div.r1:has(input:checked) .answernumber {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.45) !important;
  transform: scale(1.06) !important;
}

.path-mod-quiz .que.multichoice .answer [data-region="answer-label"],
.que.multichoice .answer [data-region="answer-label"] {
  display: flex !important;
  align-items: center !important;
  flex: 1 1 auto !important;
  cursor: pointer !important;
  margin: 0 !important;
}

.path-mod-quiz .que.multichoice .answer .flex-fill,
.que.multichoice .answer .flex-fill {
  font-size: 0.96rem !important;
  line-height: 1.55 !important;
  color: #1e293b !important;
  font-weight: 450 !important;
  cursor: pointer !important;
}

.path-mod-quiz .que.multichoice div.r0:has(input:checked) .flex-fill,
.path-mod-quiz .que.multichoice div.r1:has(input:checked) .flex-fill,
.que.multichoice div.r0:has(input:checked) .flex-fill,
.que.multichoice div.r1:has(input:checked) .flex-fill {
  color: #1e1b4b !important;
  font-weight: 600 !important;
}

/* 5. Compact, High-Density Quiz Navigation Matrix (6 Columns, Tidy & Neomorphic) */
.path-mod-quiz #mod_quiz_navblock,
.path-mod-quiz .block_quiz_navigation,
.block_quiz_navigation,
#mod_quiz_navblock {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border: 1.5px solid rgba(226, 232, 240, 0.9) !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.05) !important;
  padding: 14px 14px 16px 14px !important;
}

.path-mod-quiz #mod_quiz_navblock .card-title,
.path-mod-quiz .block_quiz_navigation .card-title,
.block_quiz_navigation .card-title {
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
  letter-spacing: -0.01em !important;
}

.path-mod-quiz #mod_quiz_navblock .card-title::before,
.path-mod-quiz .block_quiz_navigation .card-title::before,
.block_quiz_navigation .card-title::before {
  content: '' !important;
  display: inline-block !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #6366f1 !important;
  box-shadow: 0 0 8px #6366f1 !important;
}

/* The buttons container: Compact 6-column matrix that never stretches vertically */
.path-mod-quiz #mod_quiz_navblock .qn_buttons,
.path-mod-quiz .block_quiz_navigation .qn_buttons,
.path-mod-quiz [data-block="quiz_navigation"] .qn_buttons,
.path-mod-quiz .qn_buttons,
#mod_quiz_navblock .qn_buttons,
.block_quiz_navigation .qn_buttons {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 4px !important;
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Individual question button: Compact 30x30 squircle with vertically centered number */
.path-mod-quiz #mod_quiz_navblock .qnbutton,
.path-mod-quiz .block_quiz_navigation .qnbutton,
.path-mod-quiz [data-block="quiz_navigation"] .qnbutton,
.path-mod-quiz .qnbutton,
#mod_quiz_navblock .qnbutton,
.block_quiz_navigation .qnbutton,
.qnbutton {
  width: 100% !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  min-width: 0 !important;
  max-width: 36px !important;
  aspect-ratio: 1 !important;
  border-radius: 7px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  font-family: 'Outfit', sans-serif !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  position: relative !important;
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #334155 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  line-height: 1 !important;
  float: none !important;
  box-sizing: border-box !important;
}

.path-mod-quiz #mod_quiz_navblock a.qnbutton:hover,
.path-mod-quiz .block_quiz_navigation a.qnbutton:hover,
.qnbutton:hover {
  border-color: #6366f1 !important;
  color: #4f46e5 !important;
  background: #eef2ff !important;
  transform: scale(1.06) !important;
  box-shadow: 0 3px 8px rgba(99, 102, 241, 0.25) !important;
  text-decoration: none !important;
  z-index: 3 !important;
}

/* Current Active Question */
.path-mod-quiz #mod_quiz_navblock .qnbutton.thispage,
.path-mod-quiz .block_quiz_navigation .qnbutton.thispage,
.qnbutton.thispage {
  border-color: #4338ca !important;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 3px 10px rgba(79, 70, 229, 0.45) !important;
  transform: scale(1.08) !important;
  z-index: 2 !important;
}

/* Answered / Completed Question (Vibrant Emerald / Green) */
.path-mod-quiz #mod_quiz_navblock .qnbutton.answersaved,
.path-mod-quiz #mod_quiz_navblock .qnbutton.complete,
.path-mod-quiz .block_quiz_navigation .qnbutton.answersaved,
.path-mod-quiz .block_quiz_navigation .qnbutton.complete,
.qnbutton.answersaved,
.qnbutton.complete {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%) !important;
  border-color: #10b981 !important;
  color: #065f46 !important;
  font-weight: 800 !important;
}

/* Flagged question marker */
.path-mod-quiz #mod_quiz_navblock .qnbutton.flagged::after,
.path-mod-quiz .block_quiz_navigation .qnbutton.flagged::after,
.qnbutton.flagged::after {
  content: '' !important;
  position: absolute !important;
  top: 2px !important;
  right: 2px !important;
  width: 5px !important;
  height: 5px !important;
  background: #ef4444 !important;
  border-radius: 50% !important;
  box-shadow: 0 0 4px #ef4444 !important;
}

/* Completely remove the bulky internal trafficlight / thispageholder that doubles button height */
.path-mod-quiz #mod_quiz_navblock .qnbutton .thispageholder,
.path-mod-quiz #mod_quiz_navblock .qnbutton .trafficlight,
.path-mod-quiz .block_quiz_navigation .qnbutton .thispageholder,
.path-mod-quiz .block_quiz_navigation .qnbutton .trafficlight,
.path-mod-quiz .qnbutton .thispageholder,
.path-mod-quiz .qnbutton .trafficlight,
.qnbutton .thispageholder,
.qnbutton .trafficlight {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Finish attempt link */
.path-mod-quiz #mod_quiz_navblock a.endtestlink,
.path-mod-quiz .block_quiz_navigation a.endtestlink,
a.endtestlink {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 10px !important;
  padding: 8px 12px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: #4f46e5 !important;
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%) !important;
  border: 1px solid rgba(99, 102, 241, 0.25) !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  width: 100% !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

.path-mod-quiz #mod_quiz_navblock a.endtestlink:hover,
.path-mod-quiz .block_quiz_navigation a.endtestlink:hover,
a.endtestlink:hover {
  background: #4f46e5 !important;
  color: #ffffff !important;
  border-color: #4f46e5 !important;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3) !important;
  transform: translateY(-1px) !important;
  text-decoration: none !important;
}

/* Start a new preview / other controls */
.path-mod-quiz #mod_quiz_navblock input[type="submit"],
.path-mod-quiz #mod_quiz_navblock .btn,
.block_quiz_navigation input[type="submit"],
.block_quiz_navigation .btn {
  border-radius: 10px !important;
  padding: 7px 12px !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  width: 100% !important;
  margin-top: 6px !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}

/* 6. Page Action Buttons ("Next page", "Previous page", "Back") */
.path-mod-quiz .submitbtns {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  margin-top: 24px !important;
  padding-top: 18px !important;
  gap: 12px !important;
}

.path-mod-quiz .submitbtns input[type="submit"],
.path-mod-quiz #mod_quiz-next-nav {
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 50%, #8b5cf6 100%) !important;
  border: none !important;
  color: #ffffff !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.98rem !important;
  padding: 12px 30px !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 22px rgba(79, 70, 229, 0.38) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  letter-spacing: 0.02em !important;
}

.path-mod-quiz .submitbtns input[type="submit"]:hover,
.path-mod-quiz #mod_quiz-next-nav:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(79, 70, 229, 0.48) !important;
  filter: brightness(1.05) !important;
}

.path-mod-quiz #mod_quiz-prev-nav {
  background: #ffffff !important;
  color: #334155 !important;
  border: 1.5px solid #cbd5e1 !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  padding: 11px 24px !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.path-mod-quiz #mod_quiz-prev-nav:hover {
  background: #f8fafc !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
  transform: translateY(-1px) !important;
}

.path-mod-quiz a[role="button"][href*="view.php"] {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #334155 !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  border-radius: 12px !important;
  padding: 8px 20px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
}

.path-mod-quiz a[role="button"][href*="view.php"]:hover {
  background: #f8fafc !important;
  border-color: #6366f1 !important;
  color: #4f46e5 !important;
  transform: translateY(-1px) !important;
}

/* 7. Quiz Outcome & Review Feedback Callouts */
.path-mod-quiz .que .outcome,
.path-mod-quiz .que .comment {
  border-radius: 14px !important;
  padding: 16px 20px !important;
  margin-top: 18px !important;
  font-size: 0.92rem !important;
  line-height: 1.6 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03) !important;
}

.path-mod-quiz .que .outcome.correct,
.path-mod-quiz .que .outcome:has(.correct) {
  background: #f0fdf4 !important;
  border: 1.5px solid #bbf7d0 !important;
  color: #166534 !important;
}

.path-mod-quiz .que .outcome.incorrect,
.path-mod-quiz .que .outcome:has(.incorrect) {
  background: #fef2f2 !important;
  border: 1.5px solid #fecaca !important;
  color: #991b1b !important;
}

.path-mod-quiz .que .outcome.partiallycorrect,
.path-mod-quiz .que .outcome:has(.partiallycorrect) {
  background: #fffbeb !important;
  border: 1.5px solid #fde68a !important;
  color: #92400e !important;
}

.path-mod-quiz .que .rightanswer {
  background: rgba(240, 253, 244, 0.7) !important;
  border-left: 4px solid #22c55e !important;
  padding: 12px 16px !important;
  border-radius: 0 10px 10px 0 !important;
  margin-top: 14px !important;
  font-weight: 500 !important;
}

/* ==========================================================================
   COURSE SECTIONS & COLLAPSED VIEW BEAUTIFICATION
   Liquid Glass Cards, Rounded Squircle Chevrons, Glow Badges & Tidy Header
   ========================================================================== */

/* 1. Section Card Container (General Section, Topics, Weeks) */
li.course-section,
li.section.main.course-section,
li.section.main,
li.section,
li[id^="section-"] {
  list-style: none !important;
  margin-top: 14px !important;
  margin-bottom: 14px !important;
  border-bottom: none !important;
  border-radius: 18px !important;
}

li.course-section .section-item,
li.section.main .section-item,
li.section .section-item,
li[id^="section-"] .section-item,
.course-section .section-item {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(14px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(170%) !important;
  border: 1.5px solid rgba(226, 232, 240, 0.88) !important;
  border-radius: 18px !important;
  padding: 16px 22px !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03), 0 1px 3px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Fallback for Section 0 / General Section without inner .section-item */
li.section.main:not(.course-section):not(:has(.section-item)),
li[id="section-0"]:not(.course-section):not(:has(.section-item)) {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(14px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(170%) !important;
  border: 1.5px solid rgba(226, 232, 240, 0.88) !important;
  border-radius: 18px !important;
  padding: 16px 22px !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03), 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

li.course-section:hover .section-item,
li.section.main:hover .section-item,
li.section:hover .section-item,
li[id^="section-"]:hover .section-item {
  border-color: rgba(165, 180, 252, 0.85) !important;
  box-shadow: 0 10px 28px -5px rgba(99, 102, 241, 0.1), 0 4px 10px -2px rgba(15, 23, 42, 0.03) !important;
  transform: translateY(-1.5px);
}

/* Active / Current Section Highlight */
li.course-section.current .section-item {
  border-left: 5px solid #6366f1 !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(245, 243, 255, 0.85) 100%) !important;
  box-shadow: 0 8px 24px -4px rgba(99, 102, 241, 0.12) !important;
}

/* Hidden Section */
li.course-section.hidden .section-item {
  background: rgba(248, 250, 252, 0.8) !important;
  opacity: 0.85;
}

/* 2. Course Section Header Layout */
.course-section-header {
  align-items: center !important;
  width: 100% !important;
  gap: 12px !important;
}

.course-section-header > .d-flex.align-items-start {
  align-items: center !important;
  gap: 4px !important;
}

/* 3. Section Collapse / Expand Toggler Button (Radiant Glass Pill with Crisp Animated Chevron) */
.course-section-header .icons-collapse-expand,
.course-section-header a[data-for="sectiontoggler"],
.course-section-header .btn.btn-icon.icons-collapse-expand {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  border-radius: 11px !important;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(168, 85, 247, 0.15) 100%) !important;
  border: 1.5px solid rgba(99, 102, 241, 0.3) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin-right: 14px !important;
  transition: all 0.24s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.8) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  outline: none !important;
  position: relative !important;
}

.course-section-header .icons-collapse-expand:hover,
.course-section-header a[data-for="sectiontoggler"]:hover,
.course-section-header .btn.btn-icon.icons-collapse-expand:hover {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%) !important;
  border-color: transparent !important;
  transform: translateY(-1.5px) scale(1.08) !important;
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4), 0 0 12px rgba(236, 72, 153, 0.3) !important;
  outline: none !important;
}

/* Hide fallback broken icons completely to prevent tofu box glyphs */
.course-section-header .icons-collapse-expand .expanded-icon,
.course-section-header .icons-collapse-expand .collapsed-icon {
  display: none !important;
}

/* Pure crisp animated SVG chevron arrow */
.course-section-header .icons-collapse-expand::after {
  content: "" !important;
  display: block !important;
  width: 14px !important;
  height: 14px !important;
  background-color: #4f46e5 !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") no-repeat center / contain !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") no-repeat center / contain !important;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease !important;
  transform: rotate(0deg) !important; /* Pointing right when collapsed */
  margin-left: 1px !important;
}

/* When expanded (open), smoothly rotates down */
.course-section-header .icons-collapse-expand:not(.collapsed)::after {
  transform: rotate(90deg) !important;
  margin-left: 0 !important;
  margin-top: 1px !important;
}

/* White chevron on hover */
.course-section-header .icons-collapse-expand:hover::after,
.course-section-header a[data-for="sectiontoggler"]:hover::after {
  background-color: #ffffff !important;
}


/* 4. Section Title */
.course-section .sectionname,
.course-section .sectionname > a {
  font-family: var(--lg-font-family, 'Outfit', 'Inter', sans-serif) !important;
  font-weight: 700 !important;
  font-size: 1.08rem !important;
  color: #1e293b !important;
  letter-spacing: -0.01em !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}

.course-section .sectionname > a:hover {
  color: #6366f1 !important;
}

/* Quickedit Pencil Icon */
.course-section .sectionname .quickeditlink,
.course-section .sectionname .inplaceeditable .quickeditlink {
  color: #818cf8 !important;
  margin-left: 8px !important;
  transition: color 0.15s ease !important;
}

.course-section .sectionname .quickeditlink:hover {
  color: #4f46e5 !important;
}

/* 5. "Collapse all / Expand all" Link Button */
#collapsesections,
.section-collapsemenu {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  font-family: var(--lg-font-family, 'Outfit', 'Inter', sans-serif) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: #4f46e5 !important;
  background: rgba(99, 102, 241, 0.08) !important;
  border: 1px solid rgba(99, 102, 241, 0.2) !important;
  border-radius: 9999px !important;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 1px 3px rgba(99, 102, 241, 0.06) !important;
}

#collapsesections:hover,
.section-collapsemenu:hover {
  background: #6366f1 !important;
  color: #ffffff !important;
  border-color: #6366f1 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.28) !important;
  text-decoration: none !important;
}

/* 6. Section 3-Dots Action Menu */
.course-section-header .section_action_menu .dropdown-toggle:not(.dropdown-item),
.course-section-header .action-menu .dropdown-toggle:not(.dropdown-item) {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: rgba(248, 250, 252, 0.9) !important;
  border: 1.5px solid rgba(226, 232, 240, 0.95) !important;
  color: #64748b !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

.course-section-header .section_action_menu .dropdown-toggle:not(.dropdown-item):hover,
.course-section-header .action-menu .dropdown-toggle:not(.dropdown-item):hover {
  background: #ffffff !important;
  border-color: #6366f1 !important;
  color: #4f46e5 !important;
  transform: scale(1.05) !important;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15) !important;
}

/* 7. Section Badges */
.course-section .sectionbadges .badge {
  border-radius: 9999px !important;
  padding: 5px 12px !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
}

/* 8. "+ Add section" Button at Bottom */
.course-content .changenumsections a,
.course-content [data-action="addSection"],
.course-content .add-sections {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px 24px !important;
  border-radius: 16px !important;
  border: 1.5px dashed rgba(99, 102, 241, 0.45) !important;
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(12px) !important;
  color: #6366f1 !important;
  font-family: var(--lg-font-family, 'Outfit', 'Inter', sans-serif) !important;
  font-weight: 600 !important;
  font-size: 0.92rem !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.04) !important;
  text-decoration: none !important;
  width: 100% !important;
  margin-top: 10px !important;
}

.course-content .changenumsections a:hover,
.course-content [data-action="addSection"]:hover,
.course-content .add-sections:hover {
  border-color: #6366f1 !important;
  border-style: solid !important;
  background: rgba(99, 102, 241, 0.06) !important;
  color: #4f46e5 !important;
  transform: translateY(-1.5px) !important;
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.15) !important;
}

/* ==========================================================================
   BLOCK DRAWER (SIDE BLOCKS / RIGHT DRAWER) MODERN LIQUID GLASS STYLING
   ========================================================================== */

/* 1. Drawer Container */
.drawer.drawer-right,
#theme_boost-drawers-blocks {
  width: 330px !important;
  max-width: 92vw !important;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.97) 0%, rgba(241, 245, 249, 0.95) 100%) !important;
  backdrop-filter: blur(28px) saturate(210%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(210%) !important;
  border-left: 1px solid rgba(226, 232, 240, 0.9) !important;
  border-right: none !important;
  box-shadow: -10px 0 40px rgba(15, 23, 42, 0.12), -4px 0 16px rgba(99, 102, 241, 0.05) !important;
  z-index: 1060 !important;
}

/* 2. Drawer Header: Clean & Minimal Close Button Row */
.drawer.drawer-right .drawerheader,
#theme_boost-drawers-blocks .drawerheader {
  height: 54px !important;
  min-height: 54px !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.6) !important;
  background: transparent !important;
}

/* Hide all text/headings in right drawer header */
.drawer.drawer-right .drawerheader a[data-region="site-home-link"],
.drawer.drawer-right .drawerheader .block-drawer-header-title,
.drawer.drawer-right .drawerheader .block-drawer-title,
.drawer.drawer-right .drawerheader .block-drawer-badge {
  display: none !important;
}

.drawer.drawer-right .drawerheader::before,
.drawer.drawer-right .drawerheader::after {
  display: none !important;
  content: none !important;
}

/* Close Button (X) */
.drawer.drawer-right .drawerheader .drawertoggle,
.drawer.drawer-right .drawerheader .drawerslider button,
#theme_boost-drawers-blocks .drawerheader .drawertoggle {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  border-radius: 11px !important;
  background: rgba(241, 245, 249, 0.9) !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  color: #64748b !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  margin-left: auto !important;
}

.drawer.drawer-right .drawerheader .drawertoggle:hover,
.drawer.drawer-right .drawerheader .drawerslider button:hover,
#theme_boost-drawers-blocks .drawerheader .drawertoggle:hover {
  background: #fee2e2 !important;
  color: #ef4444 !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  transform: scale(1.05) !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15) !important;
}

.drawer.drawer-right .drawerheader .drawertoggle .icon,
.drawer.drawer-right .drawerheader .drawertoggle img.icon,
.drawer.drawer-right .drawerheader .drawertoggle i {
  width: 14px !important;
  height: 14px !important;
  font-size: 14px !important;
  margin: 0 !important;
  line-height: 1 !important;
  color: inherit !important;
}

/* 3. Drawer Content */
.drawer.drawer-right .drawercontent,
#theme_boost-drawers-blocks .drawercontent {
  padding: 16px 14px 28px !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* 4. Block Cards Base Styling */
.drawer.drawer-right .block,
.drawer.drawer-right .card.block,
.drawer.drawer-right section.block,
.drawer.drawer-left .block,
.drawer.drawer-left .card.block,
.drawer.drawer-left section.block,
#theme_boost-drawers-blocks .block,
#theme_boost-drawers-blocks .card.block {
  background: #ffffff !important;
  border-radius: 20px !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.02) !important;
  margin-bottom: 16px !important;
  overflow: visible !important;
  transition: box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s ease !important;
  position: relative !important;
}

.drawer.drawer-right .block:hover,
.drawer.drawer-right .card.block:hover,
#theme_boost-drawers-blocks .block:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(99, 102, 241, 0.06) !important;
  border-color: rgba(203, 213, 225, 0.95) !important;
}

/* Disable hover transform when a dropdown/action-menu is open inside the block */
.drawer.drawer-right .block:has(.show),
.drawer.drawer-right .card.block:has(.show),
#theme_boost-drawers-blocks .block:has(.show),
#theme_boost-drawers-blocks .card.block:has(.show),
.drawer.drawer-right .block:has([aria-expanded="true"]),
.drawer.drawer-right .card.block:has([aria-expanded="true"]),
#theme_boost-drawers-blocks .block:has([aria-expanded="true"]),
#theme_boost-drawers-blocks .card.block:has([aria-expanded="true"]),
.block.dropdown-front-layer,
.card.block.dropdown-front-layer {
  transform: none !important;
  z-index: 100000000 !important;
  position: relative !important;
}

/* Block Headers */
.drawer.drawer-right .block .card-title,
.drawer.drawer-right .block h5,
#theme_boost-drawers-blocks .block .card-title {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
  color: #0f172a !important;
  margin: 0 !important;
  padding: 14px 16px 12px !important;
  border-bottom: 1px solid rgba(241, 245, 249, 0.95) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: transparent !important;
}

.drawer.drawer-right .block .card-title::after {
  display: none !important;
}

.drawer.drawer-right .block .card-title::before {
  content: "" !important;
  display: inline-block !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #6366f1 !important;
  flex-shrink: 0 !important;
}

/* Block Card Body */
.drawer.drawer-right .block .card-body,
#theme_boost-drawers-blocks .block .card-body {
  padding: 14px 16px 16px !important;
}

/* 5. Online Users Block (.block_online_users) */
.drawer.drawer-right .block_online_users .card-title::before {
  background: #10b981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25) !important;
}

.drawer.drawer-right .block_online_users .info {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #047857 !important;
  background: rgba(16, 185, 129, 0.08) !important;
  border: 1px solid rgba(16, 185, 129, 0.2) !important;
  border-radius: 9999px !important;
  padding: 4px 11px !important;
  margin-bottom: 12px !important;
  text-align: left !important;
}

.drawer.drawer-right .block_online_users .content .list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.drawer.drawer-right .block_online_users .content .list li.listentry {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 12px !important;
  background: rgba(248, 250, 252, 0.85) !important;
  border: 1px solid rgba(226, 232, 240, 0.85) !important;
  border-radius: 13px !important;
  transition: all 0.2s ease !important;
  clear: none !important;
}

.drawer.drawer-right .block_online_users .content .list li.listentry:hover {
  background: #ffffff !important;
  border-color: rgba(99, 102, 241, 0.3) !important;
  transform: translateX(2px) !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05) !important;
}

.drawer.drawer-right .block_online_users .content .list li.listentry .user,
.block_online_users .content .list li.listentry .user {
  display: flex !important;
  align-items: center !important;
  float: none !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.drawer.drawer-right .block_online_users .content .list li.listentry .user a,
.block_online_users .content .list li.listentry .user a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  text-decoration: none !important;
  line-height: 1.35 !important;
}

.drawer.drawer-right .block_online_users .content .list li.listentry .user a:hover,
.block_online_users .content .list li.listentry .user a:hover {
  color: #4f46e5 !important;
}

.drawer.drawer-right .block_online_users .content .list li.listentry .user a .userpicture,
.drawer.drawer-right .block_online_users .content .list li.listentry .user .userpicture,
.block_online_users .content .list li.listentry .user a .userpicture {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  border-radius: 50% !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) !important;
  vertical-align: middle !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  object-fit: cover !important;
}

.drawer.drawer-right .block_online_users .content .list li.listentry .user a .user-name-wrap,
.block_online_users .content .list li.listentry .user a .user-name-wrap {
  display: block !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  line-height: 1.35 !important;
  word-break: break-word !important;
}

.drawer.drawer-right .block_online_users .content .list li.listentry .uservisibility,
.drawer.drawer-right .block_online_users .content .list li.listentry .message {
  float: none !important;
  margin: 0 0 0 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border-radius: 8px !important;
  background: rgba(99, 102, 241, 0.08) !important;
  border: 1px solid rgba(99, 102, 241, 0.18) !important;
  color: #4f46e5 !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
  text-decoration: none !important;
}

.drawer.drawer-right .block_online_users .content .list li.listentry .uservisibility:hover,
.drawer.drawer-right .block_online_users .content .list li.listentry .message:hover {
  background: #4f46e5 !important;
  color: #ffffff !important;
}

.drawer.drawer-right .block_online_users .content .list li.listentry .uservisibility i,
.drawer.drawer-right .block_online_users .content .list li.listentry .uservisibility .icon,
.drawer.drawer-right .block_online_users .content .list li.listentry .message i,
.drawer.drawer-right .block_online_users .content .list li.listentry .message .icon {
  width: 14px !important;
  height: 14px !important;
  font-size: 14px !important;
  margin: 0 !important;
  line-height: 1 !important;
  color: inherit !important;
}

/* 6. Recently Accessed Items (.block_recentlyaccesseditems) */
.drawer.drawer-right .block_recentlyaccesseditems .card-title::before {
  background: #3b82f6 !important;
}

.drawer.drawer-right .block_recentlyaccesseditems [data-region="items-list"] {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.drawer.drawer-right .block_recentlyaccesseditems .card[role="listitem"] {
  background: rgba(248, 250, 252, 0.75) !important;
  border: 1px solid rgba(226, 232, 240, 0.85) !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03) !important;
  margin: 0 !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.drawer.drawer-right .block_recentlyaccesseditems .card[role="listitem"]:hover {
  background: #ffffff !important;
  border-color: rgba(99, 102, 241, 0.35) !important;
  transform: translateX(3px) !important;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.08) !important;
}

.drawer.drawer-right .block_recentlyaccesseditems .card[role="listitem"] a {
  text-decoration: none !important;
  color: inherit !important;
  display: block !important;
}

.drawer.drawer-right .block_recentlyaccesseditems .card[role="listitem"] .card-body {
  padding: 10px 12px !important;
  margin: 0 !important;
}

.drawer.drawer-right .block_recentlyaccesseditems .activityiconcontainer {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(59, 130, 246, 0.15)) !important;
  border: 1px solid rgba(99, 102, 241, 0.2) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-right: 10px !important;
  flex-shrink: 0 !important;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.06) !important;
  padding: 0 !important;
}

.drawer.drawer-right .block_recentlyaccesseditems .activityiconcontainer .icon,
.drawer.drawer-right .block_recentlyaccesseditems .activityiconcontainer img {
  width: 20px !important;
  height: 20px !important;
  object-fit: contain !important;
  margin: 0 !important;
}

.drawer.drawer-right .block_recentlyaccesseditems h6 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: #2563eb !important;
  line-height: 1.35 !important;
  margin-bottom: 2px !important;
}

.drawer.drawer-right .block_recentlyaccesseditems small {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 11.5px !important;
  color: #64748b !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
}

/* "Show more items" button */
.drawer.drawer-right .block_recentlyaccesseditems [data-action="more-items"],
#theme_boost-drawers-blocks [data-action="more-items"] {
  width: 100% !important;
  padding: 9px 16px !important;
  border-radius: 12px !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  background: rgba(241, 245, 249, 0.85) !important;
  border: 1px solid rgba(203, 213, 225, 0.8) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  transition: all 0.22s ease !important;
  cursor: pointer !important;
}

.drawer.drawer-right .block_recentlyaccesseditems [data-action="more-items"]:hover,
#theme_boost-drawers-blocks [data-action="more-items"]:hover {
  background: #ffffff !important;
  color: #4f46e5 !important;
  border-color: #6366f1 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.12) !important;
}

/* 7. Common other blocks in block drawer */
.drawer.drawer-right .block_calendar_month .minicalendar {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 3px !important;
}

.drawer.drawer-right .block_calendar_month .minicalendar td,
.drawer.drawer-right .block_calendar_month .minicalendar th {
  text-align: center !important;
  padding: 4px 0 !important;
  font-size: 12px !important;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3) !important;
}

/* ==========================================================================
   MY COURSES (COURSES.PHP) & COURSE OVERVIEW - LUXURY COLORFUL LIQUID GLASS
   LMS Pintar STEMSI
   ========================================================================== */

/* 1. Page Header & Hero Banner on /my/courses.php */
body.page-mycourses #page-header,
body.pagelayout-mycourses #page-header {
  margin-bottom: 24px !important;
}

body.page-mycourses #page-header .page-context-header,
body.pagelayout-mycourses #page-header .page-context-header {
  position: relative !important;
}

body.page-mycourses #page-header h1,
body.pagelayout-mycourses #page-header h1 {
  font-family: 'Outfit', sans-serif !important;
  font-size: 2.1rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  background: linear-gradient(135deg, #0f172a 30%, #4338ca 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  margin: 0 0 6px 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Header management actions button */
body.page-mycourses .header-action .course-manage .btn,
body.pagelayout-mycourses .header-action .course-manage .btn {
  height: 40px !important;
  padding: 0 16px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1.5px solid rgba(203, 213, 225, 0.8) !important;
  color: #334155 !important;
  font-family: 'Outfit', 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.88rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.page-mycourses .header-action .course-manage .btn:hover,
body.pagelayout-mycourses .header-action .course-manage .btn:hover {
  background: #4f46e5 !important;
  border-color: #4f46e5 !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.28) !important;
}

/* Container Box of Course Overview Block - Generous Padding from Outer Border */
.block.block_myoverview,
.block_myoverview.card,
#block-region-content .block_myoverview,
section.block_myoverview {
  padding: 24px 28px !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1.5px solid rgba(226, 232, 240, 0.9) !important;
  box-shadow: 0 10px 32px -4px rgba(15, 23, 42, 0.06), 0 2px 8px rgba(0, 0, 0, 0.02) !important;
  margin-bottom: 30px !important;
  overflow: visible !important;
}

.block_myoverview .card-body,
#region-main .block_myoverview .card-body {
  padding: 0 !important;
}

/* Course overview Title Header - Gives Breathing Room from Top Border */
.block_myoverview .card-title,
.block_myoverview h5.card-title,
#region-main .block_myoverview .card-title {
  font-family: 'Outfit', sans-serif !important;
  font-size: 1.45rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: #0f172a !important;
  margin-top: 2px !important;
  margin-bottom: 22px !important;
  padding-top: 0 !important;
  display: inline-block !important;
  border: none !important;
  background: transparent !important;
}

.block_myoverview .block-controls,
.block_myoverview .block-controls.float-right {
  margin-top: 4px !important;
  margin-right: 0 !important;
}

/* 2. Top Filter Toolbar (Command Bar) */
.block-myoverview,
[data-region="myoverview"] {
  position: relative !important;
  z-index: 50 !important;
}

.block-myoverview [data-region="filter"],
[data-region="myoverview"] [data-region="filter"] {
  position: relative !important;
  z-index: 100 !important;
  overflow: visible !important;
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(18px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.05), 0 2px 8px rgba(0, 0, 0, 0.02) !important;
  border-radius: 18px !important;
  padding: 14px 18px !important;
  margin-bottom: 26px !important;
  display: flex !important;
  align-items: center !important;
}

.block-myoverview [data-region="filter"] .row.no-gutters,
[data-region="myoverview"] [data-region="filter"] .row.no-gutters {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin: 0 !important;
  position: relative !important;
  z-index: 101 !important;
  overflow: visible !important;
}

/* Filter Dropdown Buttons */
.block-myoverview [data-region="filter"] .dropdown,
[data-region="myoverview"] [data-region="filter"] .dropdown {
  margin: 0 !important;
  position: relative !important;
  z-index: 102 !important;
}

/* Elevate filter toolbar whenever any dropdown is open or clicked */
.block-myoverview [data-region="filter"]:has(.dropdown.show),
[data-region="myoverview"] [data-region="filter"]:has(.dropdown.show),
.block-myoverview [data-region="filter"]:has(.show),
[data-region="myoverview"] [data-region="filter"]:has(.show),
.block-myoverview [data-region="filter"].filter-active-open,
[data-region="myoverview"] [data-region="filter"].filter-active-open {
  z-index: 99999 !important;
}

.block-myoverview [data-region="filter"] .dropdown.show,
[data-region="myoverview"] [data-region="filter"] .dropdown.show {
  z-index: 100000 !important;
}

.block-myoverview [data-region="filter"] .dropdown-menu,
[data-region="myoverview"] [data-region="filter"] .dropdown-menu {
  z-index: 100005 !important;
  position: absolute !important;
  box-shadow: 0 16px 40px -4px rgba(15, 23, 42, 0.18), 0 6px 16px rgba(0, 0, 0, 0.08) !important;
  border-radius: 14px !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

/* Ensure courses cards container below stays in standard layer */
.block-myoverview .container-fluid,
[data-region="myoverview"] .container-fluid,
[data-region="myoverview"] [data-region="courses-view"] {
  position: relative !important;
  z-index: 1 !important;
}

.block-myoverview [data-region="filter"] .btn.dropdown-toggle,
[data-region="myoverview"] [data-region="filter"] .btn.dropdown-toggle {
  height: 40px !important;
  padding: 0 16px !important;
  border-radius: 12px !important;
  font-family: 'Outfit', 'Inter', sans-serif !important;
  font-size: 0.86rem !important;
  font-weight: 600 !important;
  color: #334155 !important;
  background: rgba(248, 250, 252, 0.9) !important;
  border: 1.5px solid rgba(226, 232, 240, 0.95) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.block-myoverview [data-region="filter"] .btn.dropdown-toggle:hover,
.block-myoverview [data-region="filter"] .btn.dropdown-toggle:focus,
[data-region="myoverview"] [data-region="filter"] .btn.dropdown-toggle:hover,
[data-region="myoverview"] [data-region="filter"] .btn.dropdown-toggle:focus {
  background: #ffffff !important;
  border-color: #6366f1 !important;
  color: #4f46e5 !important;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15) !important;
  transform: translateY(-1px) !important;
}

/* Filter Search Box */
.block-myoverview [data-region="filter"] .flex-grow-1,
[data-region="myoverview"] [data-region="filter"] .flex-grow-1 {
  margin: 0 !important;
  min-width: 220px !important;
  flex: 1 1 auto !important;
}

.block-myoverview [data-region="filter"] .input-group,
[data-region="myoverview"] [data-region="filter"] .input-group {
  position: relative !important;
  width: 100% !important;
}

.block-myoverview [data-region="filter"] .form-control,
[data-region="myoverview"] [data-region="filter"] .form-control {
  height: 40px !important;
  border-radius: 12px !important;
  background: rgba(248, 250, 252, 0.95) !important;
  border: 1.5px solid rgba(226, 232, 240, 0.95) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  padding: 0 16px !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.2s ease !important;
}

.block-myoverview [data-region="filter"] .form-control:focus,
[data-region="myoverview"] [data-region="filter"] .form-control:focus {
  background: #ffffff !important;
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3.5px rgba(99, 102, 241, 0.18) !important;
  outline: none !important;
}

/* 3. CARD GRID SPACING & ISOLATION (Solves "bercampur dan kacau" & "mepet border tepi") */
.block-myoverview .card-grid[data-region="card-deck"],
.card-grid[data-region="card-deck"],
.dashboard-card-deck {
  display: flex !important;
  flex-wrap: wrap !important;
  margin-left: -12px !important;
  margin-right: -12px !important;
  row-gap: 26px !important;
  padding: 2px 0 !important;
}

.block-myoverview .card-grid[data-region="card-deck"] > .col,
.card-grid[data-region="card-deck"] > .col,
.dashboard-card-deck > .col {
  padding-left: 12px !important;
  padding-right: 12px !important;
  margin-bottom: 0 !important;
  display: flex !important;
  align-items: stretch !important;
}

/* 4. BASE COURSE CARD CONTAINER (Luxury Frosted Glass Surface) */
.course-card.card,
.dashboard-card-deck .dashboard-card {
  width: 100% !important;
  margin: 0 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(16px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(170%) !important;
  border: 1.5px solid rgba(226, 232, 240, 0.88) !important;
  box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.07), 0 2px 6px -1px rgba(0, 0, 0, 0.03) !important;
  overflow: hidden !important;
  position: relative !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Luminous Top Accent Beam */
.course-card.card::before,
.dashboard-card-deck .dashboard-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: var(--cc-gradient, var(--lg-grad-cosmic)) !important;
  z-index: 10 !important;
  box-shadow: 0 1px 8px var(--cc-glow, rgba(99, 102, 241, 0.35)) !important;
}

/* 5. MULTI-COLOR PALETTES (WARNA-WARNI KAYA & MEWAH)
   Automatically cycles through 6 curated premium color palettes */

/* Default Palette fallback */
.course-card.card,
.dashboard-card-deck .dashboard-card {
  --cc-primary: #6366f1;
  --cc-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
  --cc-glow: rgba(99, 102, 241, 0.28);
  --cc-badge-bg: rgba(99, 102, 241, 0.12);
  --cc-badge-text: #4338ca;
  --cc-border-hover: rgba(99, 102, 241, 0.5);
  --cc-light-bg: rgba(238, 242, 255, 0.8);
}

/* Palette 1: Cosmic Indigo & Fuchsia */
.card-grid > .col:nth-child(6n + 1) .course-card,
.dashboard-card-deck > .col:nth-child(6n + 1) .dashboard-card,
.block-myoverview .list-group-item:nth-child(6n + 1) {
  --cc-primary: #6366f1;
  --cc-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
  --cc-glow: rgba(99, 102, 241, 0.28);
  --cc-badge-bg: rgba(99, 102, 241, 0.12);
  --cc-badge-text: #4338ca;
  --cc-border-hover: rgba(99, 102, 241, 0.55);
  --cc-light-bg: rgba(238, 242, 255, 0.8);
}

/* Palette 2: Ocean Azure & Vibrant Cyan */
.card-grid > .col:nth-child(6n + 2) .course-card,
.dashboard-card-deck > .col:nth-child(6n + 2) .dashboard-card,
.block-myoverview .list-group-item:nth-child(6n + 2) {
  --cc-primary: #0284c7;
  --cc-gradient: linear-gradient(135deg, #06b6d4 0%, #0ea5e9 50%, #2563eb 100%);
  --cc-glow: rgba(14, 165, 233, 0.28);
  --cc-badge-bg: rgba(14, 165, 233, 0.12);
  --cc-badge-text: #0369a1;
  --cc-border-hover: rgba(14, 165, 233, 0.55);
  --cc-light-bg: rgba(240, 249, 255, 0.8);
}

/* Palette 3: Emerald & Fresh Mint */
.card-grid > .col:nth-child(6n + 3) .course-card,
.dashboard-card-deck > .col:nth-child(6n + 3) .dashboard-card,
.block-myoverview .list-group-item:nth-child(6n + 3) {
  --cc-primary: #059669;
  --cc-gradient: linear-gradient(135deg, #10b981 0%, #059669 50%, #0d9488 100%);
  --cc-glow: rgba(16, 185, 129, 0.28);
  --cc-badge-bg: rgba(16, 185, 129, 0.12);
  --cc-badge-text: #047857;
  --cc-border-hover: rgba(16, 185, 129, 0.55);
  --cc-light-bg: rgba(236, 253, 245, 0.8);
}

/* Palette 4: Sunset Rose & Coral Tangerine */
.card-grid > .col:nth-child(6n + 4) .course-card,
.dashboard-card-deck > .col:nth-child(6n + 4) .dashboard-card,
.block-myoverview .list-group-item:nth-child(6n + 4) {
  --cc-primary: #e11d48;
  --cc-gradient: linear-gradient(135deg, #f43f5e 0%, #fb7185 50%, #f97316 100%);
  --cc-glow: rgba(244, 63, 94, 0.28);
  --cc-badge-bg: rgba(244, 63, 94, 0.12);
  --cc-badge-text: #be123c;
  --cc-border-hover: rgba(244, 63, 94, 0.55);
  --cc-light-bg: rgba(255, 241, 242, 0.8);
}

/* Palette 5: Royal Violet & Vivid Orchid */
.card-grid > .col:nth-child(6n + 5) .course-card,
.dashboard-card-deck > .col:nth-child(6n + 5) .dashboard-card,
.block-myoverview .list-group-item:nth-child(6n + 5) {
  --cc-primary: #7c3aed;
  --cc-gradient: linear-gradient(135deg, #8b5cf6 0%, #a855f7 50%, #d946ef 100%);
  --cc-glow: rgba(139, 92, 246, 0.28);
  --cc-badge-bg: rgba(139, 92, 246, 0.12);
  --cc-badge-text: #6d28d9;
  --cc-border-hover: rgba(139, 92, 246, 0.55);
  --cc-light-bg: rgba(245, 243, 255, 0.8);
}

/* Palette 6: Golden Amber & Warm Apricot */
.card-grid > .col:nth-child(6n + 6) .course-card,
.dashboard-card-deck > .col:nth-child(6n + 6) .dashboard-card,
.block-myoverview .list-group-item:nth-child(6n + 6) {
  --cc-primary: #d97706;
  --cc-gradient: linear-gradient(135deg, #f59e0b 0%, #ea580c 50%, #e11d48 100%);
  --cc-glow: rgba(245, 158, 11, 0.28);
  --cc-badge-bg: rgba(245, 158, 11, 0.12);
  --cc-badge-text: #b45309;
  --cc-border-hover: rgba(245, 158, 11, 0.55);
  --cc-light-bg: rgba(254, 243, 199, 0.8);
}

/* 6. CARD HOVER LIFT & GLOW (Floating 3D Elevation) */
.course-card.card:hover,
.dashboard-card-deck .dashboard-card:hover {
  transform: translateY(-8px) scale(1.012) !important;
  box-shadow: 0 22px 48px -8px var(--cc-glow), 0 6px 16px rgba(0, 0, 0, 0.04) !important;
  border-color: var(--cc-border-hover) !important;
  background: #ffffff !important;
}

/* 7. COURSE IMAGE HEADER (Cinematic & Smooth Zoom) */
.course-card .card-img-top,
.dashboard-card .card-img-top {
  height: 155px !important;
  background-position: center !important;
  background-size: cover !important;
  background-color: #f1f5f9 !important;
  position: relative !important;
  border-radius: 20px 20px 0 0 !important;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
  overflow: hidden !important;
}

.course-card a[tabindex="-1"],
.dashboard-card a[tabindex="-1"] {
  display: block !important;
  overflow: hidden !important;
  border-radius: 20px 20px 0 0 !important;
  position: relative !important;
}

.course-card a[tabindex="-1"]::after,
.dashboard-card a[tabindex="-1"]::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.02) 40%, rgba(15, 23, 42, 0.28) 100%) !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease !important;
}

.course-card:hover .card-img-top,
.dashboard-card:hover .card-img-top {
  transform: scale(1.06) !important;
}

/* 8. CARD BODY CONTENT & TYPOGRAPHY (LUXURY INSET, BREATHING ROOM & ALIGNED WITH HOME CONCEPT) */
.course-card .card-body.course-info-container,
.course-card .course-info-container,
.block .block-cards .course-info-container,
.dashboard-card .card-body {
  padding: 22px 24px 16px 24px !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  box-sizing: border-box !important;
  position: relative !important;
}

/* Ensure flex column layout for all direct children inside card-body */
.course-card .card-body > .d-flex,
.dashboard-card .card-body > .d-flex {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  flex: 1 1 auto !important;
}

/* Ensure title wrapper container does not squash or clip card title & badges */
.course-card .card-body .w-100.text-truncate,
.course-card .card-body > .d-flex > .text-truncate,
.dashboard-card .card-body .w-100.text-truncate {
  overflow: visible !important;
  white-space: normal !important;
  text-overflow: clip !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Category Chip Badge - Positioned neatly above the title with luxury pill layout */
.course-card .text-muted.muted,
.dashboard-card .text-muted.muted {
  order: -1 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
  height: auto !important;
  overflow: visible !important;
}

.course-card .text-muted.muted > div,
.dashboard-card .text-muted.muted > div {
  display: none !important;
}

.course-card .categoryname,
.dashboard-card .categoryname,
.block-myoverview span.categoryname {
  position: static !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  padding: 4px 12px !important;
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  border-radius: 9999px !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  background: rgba(99, 102, 241, 0.08) !important;
  color: #4f46e5 !important;
  border: 1.2px solid rgba(99, 102, 241, 0.22) !important;
  box-shadow: 0 1px 2px rgba(99, 102, 241, 0.05) !important;
  margin: 0 !important;
  width: fit-content !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  pointer-events: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1 !important;
}

.course-card .categoryname::before,
.dashboard-card .categoryname::before,
.block-myoverview span.categoryname::before {
  content: "" !important;
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #4f46e5 !important;
  box-shadow: 0 0 6px rgba(79, 70, 229, 0.7) !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

/* Course Full Name Title - Uniform 2-Line Height Matching Home Concept */
.course-card a.coursename,
.dashboard-card a.coursename {
  order: 0 !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  line-height: 1.34 !important;
  color: #0f172a !important;
  text-decoration: none !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  height: 2.8rem !important;
  min-height: 2.8rem !important;
  max-height: 2.8rem !important;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
  margin-right: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  box-sizing: border-box !important;
  transition: color 0.2s ease !important;
}

.course-card:hover a.coursename,
.dashboard-card:hover a.coursename {
  color: var(--cc-primary, #4f46e5) !important;
  text-decoration: none !important;
}

/* Teacher info in course card: Indented with 24px margin and comfortable breathing room */
.course-card .course-teacher-info,
.dashboard-card .course-teacher-info {
  order: 1 !important;
  width: 100% !important;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
  padding: 6px 14px !important;
  border-radius: 14px !important;
  background: rgba(248, 250, 252, 0.95) !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04) !important;
  box-sizing: border-box !important;
}

/* Hidden From Students Badge */
.course-card .badge.bg-info,
.dashboard-card .badge.bg-info {
  background: linear-gradient(135deg, #64748b, #475569) !important;
  color: #ffffff !important;
  border-radius: 10px !important;
  padding: 3px 9px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  display: inline-flex !important;
  align-items: center !important;
  margin-top: 6px !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Views badge anchored cleanly at the bottom of card body */
.course-card .pintar-course-views-badge,
.dashboard-card .pintar-course-views-badge {
  order: 2 !important;
  margin-top: auto !important;
  margin-bottom: 6px !important;
  margin-left: 2px !important;
}

/* 9. CARD FOOTER & CONTROLS (Clean, Integrated & Separated from Body) */
.course-card .d-flex.align-items-start:last-child,
.dashboard-card .d-flex.align-items-start:last-child {
  margin-top: auto !important;
  border-top: 1px solid rgba(226, 232, 240, 0.85) !important;
  background: rgba(248, 250, 252, 0.65) !important;
  padding: 12px 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-radius: 0 0 22px 22px !important;
}

/* Reset default white card-footer */
.course-card .card-footer,
.dashboard-card .card-footer {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Progress indicator capsule pill */
.course-card .progress-text,
.dashboard-card .progress-text {
  font-family: 'Outfit', 'Inter', sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  color: #334155 !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(203, 213, 225, 0.8) !important;
  border-radius: 20px !important;
  padding: 4px 12px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* Progress bar if bar element is rendered */
.course-card .progress,
.dashboard-card .progress {
  height: 7px !important;
  border-radius: 10px !important;
  background: rgba(226, 232, 240, 0.8) !important;
  overflow: hidden !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06) !important;
}

.course-card .progress-bar,
.dashboard-card .progress-bar {
  background: var(--cc-gradient) !important;
  box-shadow: 0 0 10px var(--cc-glow) !important;
  border-radius: 10px !important;
}

/* 3-Dots Course Action Menu Button */
.course-card .coursemenubtn,
.dashboard-card .coursemenubtn,
.course-card .btn.coursemenubtn {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(203, 213, 225, 0.8) !important;
  color: #64748b !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  padding: 0 !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
}

.course-card .coursemenubtn:hover,
.dashboard-card .coursemenubtn:hover,
.course-card .coursemenubtn[aria-expanded="true"] {
  background: var(--cc-primary) !important;
  color: #ffffff !important;
  border-color: var(--cc-primary) !important;
  box-shadow: 0 4px 12px var(--cc-glow) !important;
  transform: scale(1.08) !important;
}

.course-card .coursemenubtn i,
.dashboard-card .coursemenubtn i {
  font-size: 14px !important;
  line-height: 1 !important;
  color: inherit !important;
}

/* Star / Favourite Icon */
.course-card .favourite-icon,
.dashboard-card .favourite-icon {
  margin-right: 4px !important;
  transition: all 0.2s ease !important;
}

.course-card .favourite-icon.text-primary,
.course-card .favourite-icon[data-favourite="true"],
.course-card .icon.fa-star {
  color: #f59e0b !important;
  filter: drop-shadow(0 2px 5px rgba(245, 158, 11, 0.4)) !important;
}

/* 10. Semi-Transparent Mica Dropdown Menus in Course Cards */
.course-card .dropdown-menu,
.dashboard-card .dropdown-menu,
.block-myoverview .dropdown-menu {
  z-index: 50000000 !important;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.94) 0%, rgba(248, 250, 255, 0.9) 100%) !important;
  backdrop-filter: blur(24px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(200%) !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 40px -8px rgba(15, 23, 42, 0.18), 0 6px 18px rgba(99, 102, 241, 0.1) !important;
  padding: 8px !important;
  min-width: 200px !important;
}

.course-card .dropdown-menu .dropdown-item,
.dashboard-card .dropdown-menu .dropdown-item,
.block-myoverview .dropdown-menu .dropdown-item {
  border-radius: 10px !important;
  padding: 8px 14px !important;
  font-family: 'Outfit', 'Inter', sans-serif !important;
  font-size: 0.86rem !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: all 0.18s ease !important;
}

.course-card .dropdown-menu .dropdown-item:hover,
.course-card .dropdown-menu .dropdown-item:focus,
.block-myoverview .dropdown-menu .dropdown-item:hover,
.block-myoverview .dropdown-menu .dropdown-item:focus {
  background: linear-gradient(135deg, rgba(238, 242, 255, 0.95) 0%, rgba(245, 243, 255, 0.9) 100%) !important;
  color: #4338ca !important;
  border: 1px solid rgba(199, 210, 254, 0.8) !important;
  transform: translateX(3px) !important;
}

/* 11. LIST VIEW & SUMMARY VIEW ENHANCEMENTS */
.block-myoverview .list-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.block-myoverview .list-group-item.course-listitem {
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(14px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
  border: 1px solid rgba(226, 232, 240, 0.85) !important;
  border-left: 5px solid var(--cc-primary, #6366f1) !important;
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.05) !important;
  padding: 16px 20px !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.block-myoverview .list-group-item.course-listitem:hover {
  transform: translateY(-3px) scale(1.006) !important;
  background: #ffffff !important;
  box-shadow: 0 12px 30px -4px var(--cc-glow, rgba(99, 102, 241, 0.18)) !important;
  border-color: var(--cc-border-hover, #6366f1) !important;
  border-left-color: var(--cc-primary, #6366f1) !important;
}

.block-myoverview .list-group-item.course-listitem .list-image {
  border-radius: 12px !important;
  height: 70px !important;
  width: 100px !important;
  background-size: cover !important;
  background-position: center !important;
}

/* 12. ZERO STATE (EMPTY COURSES) ILLUMINATED ISLAND */
.block-myoverview [data-region="empty-message"] {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(16px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
  border: 1.5px dashed rgba(199, 210, 254, 0.8) !important;
  border-radius: 24px !important;
  padding: 48px 24px !important;
  margin: 20px 0 !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04) !important;
}

.block-myoverview [data-region="empty-message"] h5,
.block-myoverview [data-region="empty-message"] .h5 {
  font-family: 'Outfit', sans-serif !important;
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  margin-bottom: 8px !important;
}

.block-myoverview [data-region="empty-message"] p {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.92rem !important;
  color: #64748b !important;
}

/* 13. SKELETON LOADING PLACEHOLDERS (Matching Rounded Glow) */
[data-region="loading-placeholder-content"] .card {
  border-radius: 22px !important;
  background: rgba(255, 255, 255, 0.8) !important;
  border: 1px solid rgba(226, 232, 240, 0.8) !important;
  overflow: hidden !important;
}

/* ==========================================================================
   TEACHER / PENGAJAR INFO & PROFILE PHOTO LIGHTBOX ZOOM MODAL
   ========================================================================== */

/* 1. Teacher Container in Course Card */
.course-teacher-info {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 6px 12px !important;
  margin: 0 0 10px 0 !important;
  border-radius: 14px !important;
  background: rgba(248, 250, 252, 0.85) !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03) !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  box-sizing: border-box !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.course-card:hover .course-teacher-info {
  background: #ffffff !important;
  border-color: var(--cc-border-hover, rgba(99, 102, 241, 0.4)) !important;
  box-shadow: 0 4px 12px var(--cc-glow, rgba(99, 102, 241, 0.12)) !important;
}

/* Avatar Wrapper with Zoom Hint */
.teacher-avatar-wrap {
  position: relative !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 50% !important;
  cursor: zoom-in !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.teacher-avatar {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12) !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease !important;
}

.teacher-avatar-wrap:hover .teacher-avatar {
  transform: scale(1.1) !important;
  box-shadow: 0 4px 12px var(--cc-glow, rgba(99, 102, 241, 0.3)) !important;
}

.teacher-avatar-placeholder {
  background: #e2e8f0 !important;
  color: #94a3b8 !important;
  font-size: 28px !important;
  cursor: default !important;
}

/* Small search-plus zoom badge */
.teacher-zoom-badge {
  position: absolute !important;
  bottom: -2px !important;
  right: -2px !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background: var(--cc-primary, #4f46e5) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 8px !important;
  border: 1.5px solid #ffffff !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
  pointer-events: none !important;
  transition: transform 0.2s ease !important;
}

.teacher-avatar-wrap:hover .teacher-zoom-badge {
  transform: scale(1.15) !important;
}

/* Teacher Typography */
.teacher-meta {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.teacher-label {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #64748b !important;
  line-height: 1.1 !important;
  margin-bottom: 2px !important;
}

.teacher-name {
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.course-card:hover .teacher-name {
  color: var(--cc-primary, #0f172a) !important;
}

/* 2. LIGHTBOX ZOOM MODAL (Luxurious Frosted Glass Lightbox) */
.pintar-lightbox-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.24s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.24s ease !important;
}

.pintar-lightbox-overlay.show {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.pintar-lightbox-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(15, 23, 42, 0.72) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  cursor: pointer !important;
}

.pintar-lightbox-dialog {
  position: relative !important;
  z-index: 2 !important;
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(28px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(200%) !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 30px 70px -12px rgba(15, 23, 42, 0.4), 0 10px 25px rgba(99, 102, 241, 0.2) !important;
  border-radius: 28px !important;
  padding: 32px 28px 26px 28px !important;
  max-width: 360px !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  transform: scale(0.9) translateY(16px) !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.pintar-lightbox-overlay.show .pintar-lightbox-dialog {
  transform: scale(1) translateY(0) !important;
}

.pintar-lightbox-close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: rgba(241, 245, 249, 0.9) !important;
  border: 1px solid rgba(203, 213, 225, 0.8) !important;
  color: #475569 !important;
  font-size: 15px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
  z-index: 10 !important;
}

.pintar-lightbox-close:hover {
  background: #f43f5e !important;
  color: #ffffff !important;
  border-color: #f43f5e !important;
  transform: rotate(90deg) scale(1.1) !important;
  box-shadow: 0 4px 12px rgba(244, 63, 94, 0.35) !important;
}

.pintar-lightbox-img-wrap {
  width: 200px !important;
  height: 200px !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  box-shadow: 0 12px 30px -4px rgba(15, 23, 42, 0.22) !important;
  border: 3.5px solid #ffffff !important;
  margin-bottom: 20px !important;
  background: #f1f5f9 !important;
  position: relative !important;
}

.pintar-lightbox-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.pintar-lightbox-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
}

.pintar-lightbox-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 14px !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(168, 85, 247, 0.15) 100%) !important;
  color: #4338ca !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 8px !important;
  border: 1px solid rgba(199, 210, 254, 0.8) !important;
}

.pintar-lightbox-title {
  font-family: 'Outfit', sans-serif !important;
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 0 6px 0 !important;
  line-height: 1.3 !important;
}

.pintar-lightbox-sub {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.86rem !important;
  color: #64748b !important;
  margin: 0 !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}

body.pintar-lightbox-open {
  overflow: hidden !important;
}

/* ==========================================================================
   HOMEPAGE (FRONTPAGE /?redirect=0) & MULTI-TEACHER LUXURY LIQUID GLASS
   LMS PINTAR STEMSI - SMKN 1 SUKASADA
   ========================================================================== */

/* 1. FRONTPAGE HERO BANNER (Liquid Glass Cosmic Mesh) */
.pintar-home-hero {
  position: relative !important;
  margin: 0 0 34px 0 !important;
  padding: 40px 36px 36px 36px !important;
  border-radius: 30px !important;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.94) 0%, rgba(30, 27, 75, 0.92) 50%, rgba(88, 28, 135, 0.88) 100%) !important;
  backdrop-filter: blur(28px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(200%) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.5), 0 0 40px rgba(99, 102, 241, 0.25) !important;
  overflow: hidden !important;
  color: #ffffff !important;
}

.pintar-hero-mesh {
  position: absolute !important;
  inset: 0 !important;
  background-image: 
    radial-gradient(circle at 15% 20%, rgba(56, 189, 248, 0.28) 0%, transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(192, 132, 252, 0.25) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(99, 102, 241, 0.2) 0%, transparent 55%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.pintar-hero-content {
  position: relative !important;
  z-index: 1 !important;
  max-width: 960px !important;
}

.pintar-hero-pill-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 16px !important;
  border-radius: 9999px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #a5f3fc !important;
  margin-bottom: 16px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15) !important;
}

.pintar-badge-pulse {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #34d399 !important;
  box-shadow: 0 0 10px #34d399 !important;
  animation: pintarPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
}

@keyframes pintarPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.25); }
}

.pintar-hero-heading {
  font-family: 'Outfit', sans-serif !important;
  font-size: 2.5rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.2 !important;
  color: #ffffff !important;
  margin: 0 0 14px 0 !important;
}

.pintar-hero-grad {
  background: linear-gradient(135deg, #38bdf8 0%, #a78bfa 50%, #f472b6 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.pintar-hero-subheading {
  font-family: 'Inter', sans-serif !important;
  font-size: 1.05rem !important;
  line-height: 1.65 !important;
  color: rgba(226, 232, 240, 0.9) !important;
  margin: 0 0 26px 0 !important;
  max-width: 780px !important;
}

.pintar-hero-highlights {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 16px !important;
  margin-top: 10px !important;
}

.pintar-hero-highlight-item {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 14px 18px !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease !important;
}

.pintar-hero-highlight-item:hover {
  transform: translateY(-3px) !important;
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}

.pintar-hero-highlight-item .highlight-icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.8) 0%, rgba(168, 85, 247, 0.8) 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  color: #ffffff !important;
  flex-shrink: 0 !important;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35) !important;
}

.pintar-hero-highlight-item .highlight-text {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
}

.pintar-hero-highlight-item .highlight-text strong {
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.96rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.25 !important;
  margin-bottom: 2px !important;
}

.pintar-hero-highlight-item .highlight-text span {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.78rem !important;
  color: rgba(203, 213, 225, 0.8) !important;
  line-height: 1.2 !important;
}

/* 2. FRONTPAGE COURSE GRID & SECTION LAYOUT (EXPANDS TO FULL WIDTH) */
#page-site-index #frontpage-available-course-list,
#page-site-index #frontpage-course-list,
#frontpage-available-course-list,
#frontpage-course-list {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-bottom: 36px !important;
  clear: both !important;
}

#page-site-index #frontpage-available-course-list .courses,
#page-site-index #frontpage-course-list .courses,
#page-site-index .courses.frontpage-course-list-all,
#page-site-index .frontpage-course-list-all,
#page-site-index #region-main .courses,
#frontpage-available-course-list .courses,
#frontpage-course-list .courses,
.courses.frontpage-course-list-all,
.frontpage-course-list-all {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 22px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 16px !important;
  margin-bottom: 24px !important;
  padding: 0 !important;
}

/* Frontpage Headings */
#page-site-index h2,
#page-site-index .frontpage-category-names h2,
#page-site-index #frontpage-available-course-list h2,
#page-site-index #frontpage-course-list h2,
#page-site-index #frontpage-available-course-list > .title,
#frontpage-available-course-list h2,
#frontpage-course-list h2 {
  font-family: 'Outfit', sans-serif !important;
  font-size: 1.45rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: #0f172a !important;
  margin: 24px 0 14px 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
}

#page-site-index h2::before,
#page-site-index #frontpage-available-course-list h2::before,
#page-site-index #frontpage-course-list h2::before,
#page-site-index #frontpage-available-course-list > .title::before,
#frontpage-available-course-list h2::before,
#frontpage-course-list h2::before {
  content: "" !important;
  display: inline-block !important;
  width: 5px !important;
  height: 24px !important;
  border-radius: 4px !important;
  background: linear-gradient(135deg, #4f46e5 0%, #ec4899 100%) !important;
}

/* Frontpage Coursebox as Compact Modern Liquid Glass Cards */
#page-site-index .coursebox,
.frontpage-course-list-all .coursebox {
  display: flex !important;
  flex-direction: column !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  border: 1.5px solid rgba(226, 232, 240, 0.9) !important;
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(0, 0, 0, 0.02) !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.22s ease !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 100% !important;
  position: relative !important;
}

#page-site-index .coursebox:hover,
.frontpage-course-list-all .coursebox:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 20px 35px -8px rgba(99, 102, 241, 0.22), 0 4px 12px rgba(168, 85, 247, 0.1) !important;
  border-color: rgba(99, 102, 241, 0.45) !important;
}

/* Fallback Decorative Course Banner when image is missing */
.coursebox-cover-fallback {
  width: 100% !important;
  height: 140px !important;
  min-height: 140px !important;
  max-height: 140px !important;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #06b6d4 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 16px 16px 0 0 !important;
  flex-shrink: 0 !important;
}

.coursebox-cover-glow {
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.3), transparent 65%) !important;
}

.coursebox-cover-icon {
  font-size: 38px !important;
  color: rgba(255, 255, 255, 0.92) !important;
  position: relative !important;
  z-index: 1 !important;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.22)) !important;
  transition: transform 0.3s ease !important;
}

.coursebox:hover .coursebox-cover-icon {
  transform: scale(1.12) rotate(-5deg) !important;
}

/* Frontpage Course Image (Balanced 140px height) */
#page-site-index .coursebox .courseimage,
.frontpage-course-list-all .coursebox .courseimage,
.coursebox .courseimage {
  width: 100% !important;
  height: 140px !important;
  min-height: 140px !important;
  max-height: 140px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%) !important;
  border-radius: 16px 16px 0 0 !important;
  flex-shrink: 0 !important;
}

#page-site-index .coursebox .courseimage img,
.frontpage-course-list-all .coursebox .courseimage img,
.coursebox .content .courseimage img,
.coursebox .courseimage img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.35s ease !important;
}

#page-site-index .coursebox:hover .courseimage img,
.frontpage-course-list-all .coursebox:hover .courseimage img,
.coursebox:hover .courseimage img {
  transform: scale(1.06) !important;
}

/* Coursebox Info & Title */
#page-site-index .coursebox .info,
.frontpage-course-list-all .coursebox .info {
  padding: 12px 16px 4px 16px !important;
  margin: 0 !important;
  border: none !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-height: 60px !important;
  box-sizing: border-box !important;
}

#page-site-index .coursebox .coursename,
.frontpage-course-list-all .coursebox .coursename {
  font-family: 'Outfit', sans-serif !important;
  font-size: 1.02rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
  line-height: 1.34 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  height: 2.75rem !important;
  min-height: 2.75rem !important;
  max-height: 2.75rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#page-site-index .coursebox .coursename a,
.frontpage-course-list-all .coursebox .coursename a {
  color: #0f172a !important;
  text-decoration: none !important;
  transition: color 0.18s ease !important;
}

#page-site-index .coursebox:hover .coursename a,
.frontpage-course-list-all .coursebox:hover .coursename a {
  color: #4f46e5 !important;
}

/* Coursebox Content Area */
#page-site-index .coursebox .content,
.frontpage-course-list-all .coursebox .content {
  padding: 0 16px 14px 16px !important;
  margin: 0 !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
}

#page-site-index .coursebox .content .d-flex,
.frontpage-course-list-all .coursebox .content .d-flex {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  flex: 1 1 auto !important;
  justify-content: flex-end !important;
}

#page-site-index .coursebox .content .flex-grow-1,
.frontpage-course-list-all .coursebox .content .flex-grow-1,
.coursebox .content .flex-grow-1 {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  flex: 1 1 auto !important;
  justify-content: flex-end !important;
}

#page-site-index .coursebox .summary,
.frontpage-course-list-all .coursebox .summary {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.8rem !important;
  color: #64748b !important;
  line-height: 1.45 !important;
  margin: 4px 0 8px 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

#page-site-index .coursebox .summary:empty,
.frontpage-course-list-all .coursebox .summary:empty {
  display: none !important;
}

/* Hide legacy unstyled Moodle ul.teachers on frontpage */
.coursebox .teachers:not(.course-teachers-list),
ul.teachers:not(.course-teachers-list) {
  display: none !important;
}

/* Clean up Admin frontpage section 0/1 */
#page-site-index .course-content {
  margin-bottom: 16px !important;
}
#page-site-index .course-content:empty {
  display: none !important;
}
#page-site-index .course-content .section-modchooser {
  margin: 8px 0 !important;
}

/* 3. TEACHER & MULTI-TEACHER CARD BAR (UNIFORM 52PX HEIGHT & LUXURY GLASS) */
.course-teachers-list {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  width: 100% !important;
  margin-top: auto !important;
  margin-bottom: 8px !important;
  padding: 6px 10px !important;
  border-radius: 14px !important;
  background: rgba(248, 250, 252, 0.92) !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03) !important;
  box-sizing: border-box !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  overflow: hidden !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.course-card:hover .course-teachers-list,
.coursebox:hover .course-teachers-list {
  background: #ffffff !important;
  border-color: rgba(99, 102, 241, 0.35) !important;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.08) !important;
}

/* Views badge in Frontpage coursebox: positioned neatly below teacher info */
#page-site-index .coursebox .pintar-course-views-badge,
.frontpage-course-list-all .coursebox .pintar-course-views-badge,
.coursebox .pintar-course-views-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 0 !important;
  margin-bottom: 2px !important;
  margin-left: 2px !important;
  padding: 4px 12px !important;
  border-radius: 9999px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  width: fit-content !important;
  background: rgba(248, 250, 252, 0.95) !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  color: #475569 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#page-site-index .coursebox .pintar-course-views-badge:hover,
.frontpage-course-list-all .coursebox .pintar-course-views-badge:hover,
.coursebox .pintar-course-views-badge:hover {
  background: #ffffff !important;
  border-color: rgba(99, 102, 241, 0.45) !important;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.12) !important;
  transform: translateY(-1px) !important;
}

#page-site-index .coursebox .pintar-course-views-badge.is-popular,
.frontpage-course-list-all .coursebox .pintar-course-views-badge.is-popular,
.coursebox .pintar-course-views-badge.is-popular {
  background: linear-gradient(135deg, rgba(254, 243, 199, 0.9) 0%, rgba(255, 237, 213, 0.9) 100%) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
  color: #92400e !important;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.08) !important;
}

/* Interactive Multi-Teacher Card Bar */
.course-teacher-info.multi-teacher {
  cursor: pointer !important;
}

.course-teacher-info.multi-teacher:hover {
  background: #ffffff !important;
  border-color: rgba(99, 102, 241, 0.45) !important;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.12) !important;
}

/* Single Teacher Row */
.course-teacher-item {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  width: 100% !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
}

/* Multi-Teacher Bar Content */
.teacher-stack-bar {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.teacher-avatar-stack {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  padding-right: 2px !important;
}

.teacher-avatar-stack .stack-item {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  margin-left: -9px !important;
  border-radius: 50% !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), z-index 0.2s ease !important;
}

.teacher-avatar-stack .stack-item:first-child {
  margin-left: 0 !important;
}

.teacher-avatar-stack .stack-item:hover {
  transform: translateY(-2px) scale(1.15) !important;
  z-index: 25 !important;
}

/* Counter bubble for 3+ teachers (+1, +2) */
.teacher-avatar-more {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
  color: #ffffff !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: -8px !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.16) !important;
  flex-shrink: 0 !important;
  transition: transform 0.2s ease !important;
}

.course-teacher-info.multi-teacher:hover .teacher-avatar-more {
  transform: scale(1.08) !important;
}

.teacher-avatar-wrap {
  position: relative !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 50% !important;
  cursor: zoom-in !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.teacher-avatar {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.14) !important;
  transition: transform 0.2s ease !important;
}

.teacher-avatar-wrap:hover .teacher-avatar {
  transform: scale(1.1) !important;
  box-shadow: 0 3px 8px rgba(99, 102, 241, 0.3) !important;
}

.teacher-zoom-badge {
  position: absolute !important;
  bottom: -2px !important;
  right: -2px !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background: #4f46e5 !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 6px !important;
  border: 1px solid #ffffff !important;
  pointer-events: none !important;
}

.teacher-meta {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.teacher-label {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: #6366f1 !important;
  line-height: 1.1 !important;
  margin-bottom: 2px !important;
}

.teacher-label.tim-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  color: #4f46e5 !important;
  margin-bottom: 2px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.teacher-label.tim-badge i {
  font-size: 9px !important;
  flex-shrink: 0 !important;
}

/* Right-anchored Pill Button for Lihat Tim */
.btn-team-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  color: #4f46e5 !important;
  background: rgba(99, 102, 241, 0.08) !important;
  border: 1px solid rgba(99, 102, 241, 0.22) !important;
  border-radius: 9999px !important;
  padding: 3px 8px !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
}

.course-teacher-info.multi-teacher:hover .btn-team-pill {
  background: #4f46e5 !important;
  color: #ffffff !important;
  border-color: #4f46e5 !important;
  box-shadow: 0 2px 6px rgba(79, 70, 229, 0.25) !important;
  transform: translateX(1px) !important;
}

.btn-team-pill i {
  font-size: 7px !important;
  transition: transform 0.2s ease !important;
}

.course-teacher-info.multi-teacher:hover .btn-team-pill i {
  transform: translateX(2px) !important;
}

.teacher-name {
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.83rem !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.teacher-name.multi-preview {
  color: #334155 !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  display: block !important;
  width: 100% !important;
}

/* Dedicated Lightbox Modal for Teaching Team */
.pintar-team-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999998 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.24s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.24s ease !important;
}

.pintar-team-overlay.show {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.pintar-team-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(15, 23, 42, 0.72) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  cursor: pointer !important;
}

.pintar-team-dialog {
  position: relative !important;
  z-index: 2 !important;
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(28px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(200%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 30px 70px -12px rgba(15, 23, 42, 0.4), 0 10px 25px rgba(99, 102, 241, 0.2) !important;
  border-radius: 26px !important;
  padding: 24px 22px !important;
  max-width: 460px !important;
  width: 100% !important;
  max-height: 88vh !important;
  display: flex !important;
  flex-direction: column !important;
  transform: scale(0.92) translateY(16px) !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.pintar-team-overlay.show .pintar-team-dialog {
  transform: scale(1) translateY(0) !important;
}

.pintar-team-close {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: rgba(241, 245, 249, 0.9) !important;
  border: 1px solid rgba(203, 213, 225, 0.8) !important;
  color: #475569 !important;
  font-size: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
  z-index: 10 !important;
}

.pintar-team-close:hover {
  background: #f43f5e !important;
  color: #ffffff !important;
  border-color: #f43f5e !important;
  transform: rotate(90deg) scale(1.08) !important;
}

.pintar-team-header {
  padding-right: 36px !important;
  margin-bottom: 16px !important;
}

.pintar-team-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(168, 85, 247, 0.12) 100%) !important;
  color: #4338ca !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 8px !important;
  border: 1px solid rgba(199, 210, 254, 0.8) !important;
}

.pintar-team-title {
  font-family: 'Outfit', sans-serif !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 !important;
  line-height: 1.35 !important;
}

.pintar-team-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  overflow-y: auto !important;
  max-height: calc(88vh - 120px) !important;
  padding-right: 4px !important;
  margin: 0 !important;
}

.pintar-team-list::-webkit-scrollbar {
  width: 5px !important;
}

.pintar-team-list::-webkit-scrollbar-track {
  background: transparent !important;
}

.pintar-team-list::-webkit-scrollbar-thumb {
  background: rgba(203, 213, 225, 0.8) !important;
  border-radius: 9999px !important;
}

.pintar-team-member-item {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 11px 16px !important;
  border-radius: 18px !important;
  background: rgba(248, 250, 252, 0.95) !important;
  border: 1.5px solid rgba(226, 232, 240, 0.85) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.pintar-team-member-item:hover {
  background: #ffffff !important;
  border-color: rgba(99, 102, 241, 0.45) !important;
  box-shadow: 0 6px 18px rgba(99, 102, 241, 0.12) !important;
  transform: translateY(-2px) !important;
}

.pintar-team-avatar-wrap {
  position: relative !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  border-radius: 50% !important;
  cursor: zoom-in !important;
  flex-shrink: 0 !important;
}

.pintar-team-avatar {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12) !important;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.pintar-team-member-item:hover .pintar-team-avatar {
  transform: scale(1.1) !important;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35) !important;
  border-color: #4f46e5 !important;
}

.pintar-team-avatar-zoom-icon {
  position: absolute !important;
  bottom: -2px !important;
  right: -2px !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background: #4f46e5 !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 8px !important;
  border: 1.5px solid #ffffff !important;
  pointer-events: none !important;
}

.pintar-team-member-info {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.pintar-team-member-role {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: #6366f1 !important;
  margin-bottom: 2px !important;
}

.pintar-team-member-name {
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.96rem !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  word-break: break-word !important;
}

/* 4. FRONTPAGE SEARCH FORM (Floating Glass Capsule) */
#page-site-index .coursesearchbox,
#page-site-index .simplesearchform {
  max-width: 580px !important;
  margin: 16px auto 30px auto !important;
  display: flex !important;
  align-items: center !important;
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1.5px solid rgba(203, 213, 225, 0.8) !important;
  border-radius: 9999px !important;
  padding: 6px 8px 6px 18px !important;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.8) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#page-site-index .coursesearchbox:focus-within,
#page-site-index .simplesearchform:focus-within {
  border-color: #6366f1 !important;
  box-shadow: 0 12px 30px -5px rgba(99, 102, 241, 0.25), 0 0 0 3px rgba(99, 102, 241, 0.2) !important;
  transform: translateY(-2px) !important;
}

#page-site-index .coursesearchbox input[type="text"],
#page-site-index .simplesearchform input[type="search"] {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.95rem !important;
  color: #0f172a !important;
  flex: 1 1 auto !important;
  outline: none !important;
  padding: 8px 6px !important;
}

#page-site-index .coursesearchbox button,
#page-site-index .simplesearchform button {
  height: 42px !important;
  padding: 0 20px !important;
  border-radius: 9999px !important;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
  border: none !important;
  color: #ffffff !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.35) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#page-site-index .coursesearchbox button:hover,
#page-site-index .simplesearchform button:hover {
  transform: scale(1.03) !important;
  box-shadow: 0 6px 18px rgba(79, 70, 229, 0.45) !important;
}

/* Responsive tweaks for mobile devices */
@media (max-width: 768px) {
  .pintar-home-hero {
    padding: 26px 20px 22px 20px !important;
    border-radius: 22px !important;
  }
  .pintar-hero-heading {
    font-size: 1.8rem !important;
  }
  .pintar-hero-subheading {
    font-size: 0.92rem !important;
  }
  .pintar-hero-highlights {
    grid-template-columns: 1fr !important;
  }
  #page-site-index #frontpage-available-course-list .courses,
  #page-site-index #frontpage-course-list .courses,
  #page-site-index .courses.frontpage-course-list-all,
  #page-site-index .frontpage-course-list-all,
  #page-site-index #region-main .courses,
  #frontpage-available-course-list .courses,
  #frontpage-course-list .courses,
  .courses.frontpage-course-list-all,
  .frontpage-course-list-all {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   MOBILE RESPONSIVE PERFECTION (MAX-WIDTH: 767.98PX & 575.98PX)
   Dedicated High-Performance Responsive Optimizations for Smartphones
   100% Scoped to Mobile - Zero Impact on Desktop/PC Layout
   ========================================================================== */

@media (max-width: 767.98px) {
  /* 1. Global Viewport & Touch Ergonomics */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
    -webkit-text-size-adjust: 100% !important;
  }

  button, a, input, select, textarea {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(99, 102, 241, 0.12);
  }

  /* 2. Top Navbar on Mobile Phones */
  nav.navbar.fixed-top {
    padding: 0 0.75rem !important;
    height: 60px !important;
  }

  .navbar-toggler {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin-right: 6px !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(226, 232, 240, 0.85) !important;
  }

  nav.navbar .navbar-brand,
  nav.navbar .navbar-brand:focus,
  nav.navbar .navbar-brand:active,
  nav.navbar .navbar-brand:hover {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-right: 4px !important;
    padding: 0 !important;
    max-width: calc(100vw - 210px) !important;
    overflow: hidden !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
  }

  nav.navbar .navbar-brand .pintar-logo-emblem {
    margin-right: 4px !important;
    flex-shrink: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    filter: none !important;
    outline: none !important;
  }

  nav.navbar .navbar-brand .pintar-img-logo {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    mix-blend-mode: normal !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    filter: none !important;
    outline: none !important;
  }

  nav.navbar .navbar-brand .pintar-brand-name {
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Hide long username text on mobile navbar so avatar & notification badges fit cleanly */
  .usermenu .usertext,
  .usermenu-container .usertext,
  #usernavigation .usermenu .usertext {
    display: none !important;
  }

  #usernavigation {
    gap: 3px !important;
    margin-left: auto !important;
  }

  #usernavigation .divider {
    margin: 0 2px !important;
    opacity: 0.4 !important;
    height: 50% !important;
  }

  #usernavigation .popover-region .popover-region-toggle {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .usermenu .userpicture,
  .navbar .userpicture {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
  }

  /* Mobile search dropdown/popover */
  #usernavigation .simplesearchform,
  #usernavigation [data-region="search-input-wrapper"] {
    max-width: calc(100vw - 20px) !important;
  }

  /* 3. Main Inner Card Container (Maximize Content Space) */
  #topofscroll,
  #topofscroll.main-inner,
  .main-inner,
  #page.drawers .main-inner,
  #page .main-inner,
  .pagelayout-standard #page.drawers .main-inner,
  body.limitedwidth #page.drawers .main-inner,
  body.mediumwidth #page.drawers .main-inner,
  .pagelayout-course #page.drawers .main-inner,
  .pagelayout-incourse #page.drawers .main-inner,
  .pagelayout-mydashboard #page.drawers .main-inner,
  .pagelayout-admin #page.drawers .main-inner,
  .pagelayout-frontpage #page.drawers .main-inner {
    width: calc(100% - 1.25rem) !important;
    padding: 16px 12px !important;
    padding-bottom: 30px !important;
    margin-top: 12px !important;
    margin-bottom: 24px !important;
    border-radius: 18px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
  }

  /* 4. Page Header, Headings & Action Buttons */
  #page-header {
    margin-bottom: 14px !important;
  }

  #page-header .page-context-header .page-header-headings h1,
  #page-header h1.h2,
  #page-header h1 {
    font-size: 1.3rem !important;
    line-height: 1.3 !important;
    letter-spacing: -0.01em !important;
  }

  #page-navbar {
    margin-bottom: 6px !important;
  }

  #page-navbar .breadcrumb {
    font-size: 0.76rem !important;
    gap: 4px !important;
  }

  .single-section-page .header-actions-container,
  .header-actions-container {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    width: 100% !important;
    margin-left: 0 !important;
    text-align: left !important;
    gap: 6px !important;
  }

  .header-actions-container .bulkEnable,
  .bulkEnable.btn {
    height: 34px !important;
    padding: 0 12px !important;
    font-size: 0.8rem !important;
    border-radius: 9px !important;
  }

  .header-actions-container .action-menu .dropdown-toggle:not(.dropdown-item) {
    height: 34px !important;
    width: 34px !important;
    min-width: 34px !important;
    border-radius: 9px !important;
  }

  /* 5. Secondary Navigation Dock & Drawer Toggles */
  .secondary-navigation-wrapper {
    gap: 6px !important;
    align-items: center !important;
  }

  .secondary-navigation .drawer-left-toggle,
  .secondary-navigation .drawer-right-toggle {
    margin: 0 !important;
    flex-shrink: 0 !important;
  }

  .secondary-navigation .drawer-left-toggle .btn,
  .course-index-toggle-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.28) !important;
    flex-shrink: 0 !important;
  }

  .secondary-navigation .drawer-left-toggle .btn .icon,
  .course-index-toggle-btn .icon,
  .course-index-toggle-btn img.icon {
    filter: brightness(0) invert(1) !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
  }

  .course-index-toggle-btn::after {
    display: none !important;
    content: none !important;
  }

  .secondary-navigation .drawer-right-toggle .btn,
  .block-drawer-toggle-btn {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
  }

  /* Modern Floating Action Button for Course Index on Mobile Screens */
  .mobile-courseindex-float-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    position: fixed !important;
    bottom: 22px !important;
    left: 14px !important;
    z-index: 34500000 !important;
    padding: 10px 16px 10px 13px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #1e1b4b 0%, #4338ca 45%, #6366f1 100%) !important;
    color: #ffffff !important;
    border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 6px 22px rgba(79, 70, 229, 0.45), 0 2px 6px rgba(15, 23, 42, 0.16) !important;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.86rem !important;
    letter-spacing: -0.01em !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .mobile-courseindex-float-btn:hover,
  .mobile-courseindex-float-btn:active {
    transform: translateY(-2px) scale(1.04) !important;
    box-shadow: 0 10px 28px rgba(79, 70, 229, 0.55) !important;
    color: #ffffff !important;
  }

  .mobile-courseindex-float-btn .float-icon {
    width: 18px !important;
    height: 18px !important;
    display: inline-block !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='none' stroke='%2338bdf8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1-2.5-2.5Z'/%3E%3Cpath d='M6 6h10'/%3E%3Cpath d='M6 10h10'/%3E%3Cpath d='M6 14h6'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
  }

  /* Fade out floating button when course index drawer is open to prevent clutter */
  body:has(#theme_boost-drawers-courseindex.show) .mobile-courseindex-float-btn,
  body.drawer-courseindex-open .mobile-courseindex-float-btn {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(20px) scale(0.9) !important;
  }

  .secondary-navigation .navigation,
  .path-admin .secondary-navigation .navigation {
    min-height: 40px !important;
    padding: 3px 4px !important;
    border-radius: 11px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  .secondary-navigation .navigation::-webkit-scrollbar {
    display: none !important;
  }

  .secondary-navigation .navigation .nav-tabs,
  .secondary-navigation .more-nav.nav-tabs {
    flex-wrap: nowrap !important;
    gap: 3px !important;
  }

  .secondary-navigation .navigation .nav-tabs .nav-link,
  .secondary-navigation .more-nav .nav-link {
    font-size: 0.8rem !important;
    padding: 6px 10px !important;
    white-space: nowrap !important;
    border-radius: 8px !important;
  }

  /* 6. Frontpage Hero & Course Cards */
  .pintar-home-hero {
    padding: 18px 14px 16px 14px !important;
    border-radius: 18px !important;
    margin-bottom: 20px !important;
  }

  .pintar-hero-heading {
    font-size: 1.4rem !important;
    line-height: 1.25 !important;
  }

  .pintar-hero-subheading {
    font-size: 0.84rem !important;
    line-height: 1.4 !important;
  }

  .pintar-hero-badge {
    font-size: 0.72rem !important;
    padding: 4px 10px !important;
    margin-bottom: 10px !important;
  }

  .pintar-hero-actions {
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .pintar-btn-hero-primary,
  .pintar-btn-hero-secondary {
    width: 100% !important;
    justify-content: center !important;
    padding: 10px 16px !important;
    font-size: 0.88rem !important;
  }

  #page-site-index .coursesearchbox,
  #page-site-index .simplesearchform {
    width: 100% !important;
    max-width: 100% !important;
    margin: 10px auto 18px auto !important;
    padding: 3px 5px 3px 14px !important;
  }

  #page-site-index .coursesearchbox input[type="text"],
  #page-site-index .simplesearchform input[type="search"] {
    font-size: 0.88rem !important;
    padding: 6px 2px !important;
  }

  #page-site-index .coursesearchbox button,
  #page-site-index .simplesearchform button {
    height: 36px !important;
    padding: 0 14px !important;
    font-size: 0.82rem !important;
  }

  #page-site-index .coursebox,
  .frontpage-course-list-all .coursebox {
    border-radius: 16px !important;
    margin-bottom: 14px !important;
  }

  #page-site-index .coursebox .courseimage,
  .frontpage-course-list-all .coursebox .courseimage,
  .coursebox-cover-fallback {
    height: 120px !important;
    min-height: 120px !important;
    max-height: 120px !important;
  }

  #page-site-index .coursebox .coursename,
  .frontpage-course-list-all .coursebox .coursename {
    font-size: 0.94rem !important;
    line-height: 1.3 !important;
  }

  #page-site-index .coursebox .summary,
  .frontpage-course-list-all .coursebox .summary {
    font-size: 0.78rem !important;
    line-height: 1.35 !important;
  }

  .course-teachers-list {
    padding: 6px 8px !important;
    gap: 8px !important;
  }

  .teacher-avatar-wrap,
  .teacher-avatar-wrap img {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
  }

  .teacher-name {
    font-size: 0.78rem !important;
    max-width: calc(100% - 40px) !important;
  }

  .btn-team-pill,
  .btn-team-link {
    font-size: 0.62rem !important;
    padding: 2px 7px !important;
  }

  /* 7. Course Activities & Sections */
  .course-section-header h3,
  .section-title {
    font-size: 1.15rem !important;
  }

  .activity-item {
    padding: 10px 12px !important;
    border-radius: 13px !important;
    margin-bottom: 8px !important;
  }

  /* Disable hover translate that causes glitch on touch devices */
  .activity-item:hover {
    transform: none !important;
  }

  .activityiconcontainer {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 10px !important;
  }

  .activityiconcontainer .icon,
  .activityiconcontainer img {
    width: 20px !important;
    height: 20px !important;
  }

  .activity-instance {
    gap: 10px !important;
  }

  .activity-instance .activityname {
    font-size: 0.88rem !important;
    line-height: 1.3 !important;
  }

  .activity-badges,
  .activity-completion {
    margin-top: 4px !important;
  }

  .activity-completion button,
  .activity-completion .badge {
    font-size: 0.72rem !important;
    padding: 3px 8px !important;
  }

  /* 8. Quiz Attempt & Examination (path-mod-quiz) */
  #page-mod-quiz-attempt .que,
  #page-mod-quiz-review .que,
  #page-mod-quiz-summary .que,
  #page-question-preview .que,
  .path-mod-quiz .que,
  .que {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px 12px !important;
    border-radius: 16px !important;
    gap: 12px !important;
    box-sizing: border-box !important;
  }

  #page-mod-quiz-attempt .que .info,
  #page-mod-quiz-review .que .info,
  #page-mod-quiz-summary .que .info,
  #page-question-preview .que .info,
  .path-mod-quiz .que .info,
  .que .info {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }

  #page-mod-quiz-attempt .que .content,
  #page-mod-quiz-review .que .content,
  #page-mod-quiz-summary .que .content,
  #page-question-preview .que .content,
  .path-mod-quiz .que .content,
  .que .content {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  #page-mod-quiz-attempt .que .info h3.no,
  #page-mod-quiz-review .que .info h3.no,
  .path-mod-quiz .que .info h3.no,
  .que .info h3.no {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.85rem !important;
    margin: 0 !important;
  }

  .path-mod-quiz .que .info .state,
  .path-mod-quiz .que .info .grade {
    font-size: 0.74rem !important;
    padding: 2px 8px !important;
    margin: 0 !important;
  }

  .path-mod-quiz .que .qtext {
    font-size: 0.92rem !important;
    line-height: 1.5 !important;
  }

  .path-mod-quiz .que.multichoice .answer div.r0,
  .path-mod-quiz .que.multichoice .answer div.r1,
  .que.multichoice .answer div.r0,
  .que.multichoice .answer div.r1 {
    padding: 10px 12px !important;
    border-radius: 12px !important;
    margin-bottom: 6px !important;
  }

  .path-mod-quiz .que.multichoice .answer div.r0:hover,
  .path-mod-quiz .que.multichoice .answer div.r1:hover {
    transform: none !important;
  }

  .path-mod-quiz .que.multichoice .answernumber,
  .que.multichoice .answernumber {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    font-size: 0.78rem !important;
    margin-right: 8px !important;
    border-radius: 7px !important;
  }

  .path-mod-quiz .que.multichoice .answer input[type="radio"],
  .path-mod-quiz .que.multichoice .answer input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    margin-right: 8px !important;
  }

  .path-mod-quiz .submitbtns,
  #page-mod-quiz-attempt .submitbtns {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 8px 0 !important;
  }

  .path-mod-quiz .submitbtns input[type="submit"],
  .path-mod-quiz .submitbtns .btn {
    width: 100% !important;
    min-height: 44px !important;
    font-size: 0.9rem !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .path-mod-quiz #mod_quiz_navblock .qn_buttons,
  .path-mod-quiz .block_quiz_navigation .qn_buttons {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(32px, 1fr)) !important;
    gap: 6px !important;
  }

  .path-mod-quiz .qnbutton,
  .qnbutton {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    max-width: 100% !important;
    font-size: 0.78rem !important;
  }

  /* 9. Universal Responsive Tables */
  .table-responsive,
  .no-overflow,
  [data-region="grading-navigation-panel"],
  .gradestable,
  .userenrolment,
  .flexible-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
    width: 100% !important;
    display: block !important;
  }

  table.generaltable,
  table.flexible {
    width: 100% !important;
    font-size: 0.8rem !important;
  }

  table.generaltable th,
  table.generaltable td,
  table.flexible th,
  table.flexible td {
    padding: 8px 8px !important;
    white-space: normal !important;
  }

  table.generaltable td.actions,
  table.flexible td.actions {
    white-space: nowrap !important;
  }

  /* 10. Moodle Forms (.mform) & Inputs */
  #page .mform fieldset .fcontainer {
    padding: 12px 10px !important;
  }

  #page .mform .fcontainer > .fitem,
  #page .mform .fcontainer > div[id^="fitem_"] {
    padding: 10px 0 !important;
  }

  #page .mform .col-form-label {
    font-size: 0.86rem !important;
    font-weight: 700 !important;
    padding-bottom: 4px !important;
  }

  /* Minimum 16px font-size to prevent iOS Safari auto-zoom on input focus */
  #page input[type="text"],
  #page input[type="password"],
  #page input[type="email"],
  #page select,
  #page textarea,
  .mform input[type="text"],
  .mform input[type="password"],
  .mform input[type="email"],
  .mform select,
  .mform textarea {
    font-size: 16px !important;
    border-radius: 10px !important;
  }

  .mform .fitem_actionbuttons,
  #page .mform .fitem_actionbuttons .col-md-9,
  #page .mform .btn-cancel,
  #page .mform input[type="submit"] {
    width: 100% !important;
  }

  #page .mform .fitem_actionbuttons .col-md-9 {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  #page .mform .btn {
    width: 100% !important;
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
  }

  /* 11. Modals & Dialogs on Mobile */
  .modal-dialog {
    margin: 0.5rem !important;
    max-width: calc(100vw - 1rem) !important;
    width: calc(100vw - 1rem) !important;
  }

  .modal-content,
  .moodle-dialogue-base .moodle-dialogue-wrap {
    padding: 6px !important;
    border-radius: 18px !important;
    max-height: calc(100dvh - 1rem) !important;
  }

  .modal-header,
  .moodle-dialogue-hd {
    padding: 12px 14px !important;
  }

  .modal-body,
  .moodle-dialogue-bd {
    padding: 12px 14px !important;
    max-height: calc(100dvh - 130px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .modal-footer,
  .moodle-dialogue-ft {
    padding: 10px 14px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .modal-footer .btn {
    flex: 1 1 auto !important;
    min-height: 40px !important;
  }

  .pintar-lightbox-dialog,
  .pintar-team-dialog {
    max-width: calc(100vw - 20px) !important;
    padding: 16px 14px !important;
    border-radius: 20px !important;
  }

  .pintar-lightbox-img-wrap {
    max-height: 52vh !important;
  }

  /* 12. Floating Popovers & Luxury Footer on Mobile */
  #btn-footer-popover-trigger,
  .btn-footer-popover {
    bottom: 1rem !important;
    right: 1rem !important;
    width: 44px !important;
    height: 44px !important;
  }

  .btn-footer-communication {
    bottom: 4.25rem !important;
    right: 1rem !important;
    width: 44px !important;
    height: 44px !important;
  }

  #liquid-footer-popover-card {
    right: 0.75rem !important;
    left: 0.75rem !important;
    bottom: calc(1rem + 50px) !important;
    width: auto !important;
    max-width: calc(100vw - 1.5rem) !important;
    max-height: calc(100dvh - 90px) !important;
    border-radius: 18px !important;
  }

  .luxury-page-footer {
    padding: 0 !important;
  }

  .luxury-slim-bar-inner,
  .luxury-bottom-bar-inner {
    padding: 14px 1rem !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    text-align: center !important;
  }

  .luxury-bottom-left {
    justify-content: center !important;
    text-align: center !important;
    gap: 6px !important;
  }

  .luxury-copyright {
    font-size: 0.76rem !important;
  }

  .luxury-bottom-right {
    justify-content: center !important;
  }

  .enlighten-badge-pill {
    padding: 4px 12px !important;
    font-size: 0.74rem !important;
  }
}

/* Extra Tweaks for Compact Phone Screens (< 480px) */
@media (max-width: 480px) {
  #topofscroll,
  #topofscroll.main-inner,
  .main-inner,
  #page.drawers .main-inner,
  #page .main-inner {
    width: calc(100% - 0.75rem) !important;
    padding: 14px 10px !important;
    padding-bottom: 24px !important;
    border-radius: 14px !important;
  }

  #page-header .page-context-header .page-header-headings h1,
  #page-header h1.h2,
  #page-header h1 {
    font-size: 1.2rem !important;
  }

  .activity-item {
    padding: 9px 10px !important;
  }

  .activityiconcontainer {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
  }

  .activityiconcontainer .icon,
  .activityiconcontainer img {
    width: 18px !important;
    height: 18px !important;
  }

  .path-mod-quiz .que,
  .que {
    padding: 12px 10px !important;
  }
}

/* Extra Tweaks for Ultra-Narrow Phones (< 400px) */
@media (max-width: 399.98px) {
  nav.navbar .navbar-brand .pintar-brand-name {
    display: none !important;
  }
}

/* ==========================================================================
   MOBILE & TABLET ULTRA-COMPACT & BEAUTIFUL: COURSE & INDEX PAGES
   Prevents word-wrapping clutter, scales down fonts & padding with laser precision
   ========================================================================== */
@media (max-width: 767.98px) {
  /* 1. MAIN WRAPPER & CONTAINER SPACING */
  #topofscroll,
  #topofscroll.main-inner,
  .main-inner,
  #page.drawers .main-inner,
  #page .main-inner {
    width: calc(100% - 0.5rem) !important;
    padding: 10px 8px !important;
    padding-bottom: 20px !important;
    border-radius: 14px !important;
  }

  /* 2. INDEX / DASHBOARD / FRONTPAGE COURSE CARDS */
  .course-card.card,
  .dashboard-card-deck .dashboard-card {
    border-radius: 14px !important;
    margin-bottom: 12px !important;
  }

  .course-card .card-img-top,
  .dashboard-card .card-img-top {
    height: 105px !important;
    border-radius: 14px 14px 0 0 !important;
  }

  .course-card a[tabindex="-1"],
  .dashboard-card a[tabindex="-1"] {
    border-radius: 14px 14px 0 0 !important;
  }

  .course-card .card-body.course-info-container,
  .course-card .course-info-container,
  .block .block-cards .course-info-container,
  .dashboard-card .card-body {
    padding: 10px 12px 6px 12px !important;
  }

  /* Category Chip Badge */
  .course-card .categoryname,
  .dashboard-card .categoryname,
  .block-myoverview span.categoryname {
    font-size: 0.60rem !important;
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
    padding: 2px 8px !important;
    gap: 4px !important;
    margin-bottom: 6px !important;
    letter-spacing: 0.03em !important;
  }

  .course-card .categoryname::before,
  .dashboard-card .categoryname::before,
  .block-myoverview span.categoryname::before {
    width: 5px !important;
    height: 5px !important;
  }

  /* Course Title: Compact & Crisp 2-Line Uniform Height */
  .course-card a.coursename,
  .dashboard-card a.coursename {
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    height: 2.22rem !important;
    min-height: 2.22rem !important;
    max-height: 2.22rem !important;
    margin-bottom: 6px !important;
  }

  /* Teacher Info & Meta in Card */
  .course-card .course-teacher-info,
  .course-card .course-teachers-list,
  .course-card .teacher-name {
    font-size: 0.68rem !important;
    line-height: 1.2 !important;
  }

  .course-card .pintar-course-views-badge {
    font-size: 0.64rem !important;
    padding: 2px 6px !important;
    border-radius: 6px !important;
  }

  /* Card Footer, Progress & Menu Button */
  .course-card .d-flex.align-items-start:last-child,
  .course-card .card-footer {
    padding: 4px 12px 8px 12px !important;
  }

  .course-card .progress {
    height: 4px !important;
  }

  .course-card .progress-text {
    font-size: 0.65rem !important;
  }

  .course-card .coursemenubtn,
  .course-card .btn.coursemenubtn {
    width: 26px !important;
    height: 26px !important;
    padding: 0 !important;
    font-size: 0.70rem !important;
  }

  /* Filter Toolbar on Dashboard / Course Overview */
  .block-myoverview .filters-toolbar,
  [data-region="filter"] {
    gap: 6px !important;
    margin-bottom: 10px !important;
  }

  .block-myoverview .dropdown-toggle,
  [data-region="filter"] .dropdown-toggle,
  [data-region="filter"] .btn {
    font-size: 0.74rem !important;
    padding: 5px 10px !important;
    border-radius: 8px !important;
  }

  .block-myoverview [data-region="search-input"] input {
    font-size: 0.76rem !important;
    padding: 5px 10px !important;
    border-radius: 8px !important;
  }

  /* 3. COURSE LIST CATALOG (coursebox on /course/index.php & frontpage) */
  .coursebox {
    padding: 10px 12px !important;
    border-radius: 12px !important;
    margin-bottom: 8px !important;
  }

  .coursebox .coursename {
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    margin-bottom: 4px !important;
  }

  .coursebox .content .summary {
    font-size: 0.75rem !important;
    line-height: 1.35 !important;
  }

  .coursebox .content .teachers {
    font-size: 0.68rem !important;
  }

  /* 4. COURSE PAGE HEADER BANNER (/course/view.php) */
  #page-course-view #page-header,
  .path-course-view #page-header,
  #page-header {
    padding: 12px 14px !important;
    border-radius: 12px !important;
    margin-bottom: 10px !important;
  }

  #page-course-view #page-header h1,
  .path-course-view #page-header h1,
  #page-header .page-context-header .page-header-headings h1,
  #page-header h1.h2,
  #page-header h1 {
    font-size: 1.12rem !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
    margin: 2px 0 4px 0 !important;
  }

  #page-header .page-header-headings .text-muted,
  #page-header .breadcrumb {
    font-size: 0.70rem !important;
    margin-bottom: 2px !important;
  }

  #page-header .header-actions-container .btn {
    font-size: 0.72rem !important;
    padding: 4px 10px !important;
    border-radius: 8px !important;
  }

  /* 5. SECONDARY NAVIGATION TABS (Course, Settings, Participants, Grades...) */
  .secondary-navigation {
    margin-bottom: 10px !important;
  }

  .secondary-navigation .navigation,
  .secondary-navigation nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 4px !important;
    padding-bottom: 3px !important;
  }

  .secondary-navigation .navigation::-webkit-scrollbar {
    height: 3px !important;
  }

  .secondary-navigation .navigation::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border-radius: 3px !important;
  }

  .secondary-navigation .nav-tabs,
  .secondary-navigation ul.nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    border-bottom: none !important;
  }

  .secondary-navigation .nav-link {
    font-size: 0.74rem !important;
    padding: 5px 11px !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    font-weight: 600 !important;
  }

  /* 6. COURSE SECTIONS & TOPICS */
  .course-section,
  .section,
  li.section {
    padding: 10px 12px !important;
    border-radius: 12px !important;
    margin-bottom: 10px !important;
  }

  .sectionname,
  h3.sectionname,
  .section-title {
    font-size: 0.94rem !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    margin-bottom: 6px !important;
  }

  .section .summary,
  .section .section-summary {
    font-size: 0.76rem !important;
    line-height: 1.35 !important;
    margin-bottom: 6px !important;
  }

  /* 7. ACTIVITY ITEMS (Quizzes, Assignments, Pages, URLs, etc.) */
  .activity-item {
    padding: 8px 10px !important;
    border-radius: 12px !important;
    margin-bottom: 7px !important;
    border: 1.2px solid rgba(226, 232, 240, 0.85) !important;
    gap: 8px !important;
  }

  .activityiconcontainer {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 8px !important;
  }

  .activityiconcontainer .icon,
  .activityiconcontainer img.activityicon {
    width: 17px !important;
    height: 17px !important;
  }

  .activityname,
  .activity-name,
  .instancename {
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    color: #0f172a !important;
  }

  .activity-item .contentafterlink,
  .activity-item .activity-description {
    font-size: 0.72rem !important;
    line-height: 1.3 !important;
    color: #64748b !important;
  }

  /* Activity Badges, Completion Pills & Restrictions */
  .activity-item .automatic-completion-conditions,
  .activity-item .badge,
  .activity-item .activity-information .badge {
    font-size: 0.65rem !important;
    padding: 2px 6px !important;
    border-radius: 5px !important;
    font-weight: 600 !important;
  }

  .activity-item .availabilityinfo,
  .activity-item .activity-restrictions {
    font-size: 0.68rem !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    margin-top: 4px !important;
    line-height: 1.25 !important;
  }

  .activity-actions .action-menu .dropdown-toggle,
  .activity-item .action-menu-trigger .btn {
    width: 26px !important;
    height: 26px !important;
    padding: 0 !important;
    font-size: 0.70rem !important;
  }

  /* 8. COURSE INDEX DRAWER (LEFT DRAWER) */
  #theme_boost-drawers-courseindex .courseindex-link {
    font-size: 0.78rem !important;
    padding: 6px 10px !important;
  }

  #theme_boost-drawers-courseindex .courseindex-section-title {
    font-size: 0.82rem !important;
    font-weight: 700 !important;
  }
}

/* ==========================================================================
   MOBILE FULL-WIDTH EXPANSION (HP & SMARTPHONES: MELEBAR MEMENUHI LAYAR)
   Eliminates all nested side margins/paddings so course & index content fills
   the phone screen edge-to-edge beautifully, without touching PC/desktop view.
   ========================================================================== */
@media (max-width: 991.98px) {
  /* 1. Eliminate Page & Drawers Outer Gutters on Mobile */
  html,
  body,
  #page,
  #page.drawers,
  body #page.drawers,
  body.limitedwidth #page.drawers,
  body.mediumwidth #page.drawers,
  .pagelayout-course #page.drawers,
  .pagelayout-incourse #page.drawers,
  .pagelayout-standard #page.drawers,
  .pagelayout-frontpage #page.drawers,
  .pagelayout-mydashboard #page.drawers {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* 2. Main Inner Container Expands to Full Mobile Screen Width */
  html body #topofscroll,
  html body #topofscroll.main-inner,
  html body .main-inner,
  html body #page.drawers .main-inner,
  html body #page .main-inner,
  html body.pagelayout-standard #page.drawers .main-inner,
  html body.limitedwidth #page.drawers .main-inner,
  html body.mediumwidth #page.drawers .main-inner,
  html body.pagelayout-course #page.drawers .main-inner,
  html body.pagelayout-incourse #page.drawers .main-inner,
  html body.pagelayout-mydashboard #page.drawers .main-inner,
  html body.pagelayout-admin #page.drawers .main-inner,
  html body.pagelayout-frontpage #page.drawers .main-inner {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 4px !important;
    margin-bottom: 20px !important;
    padding: 10px 8px !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }

  /* 3. Strip Cumulative Padding in Content Hierarchy */
  #page-content,
  #region-main-box,
  #region-main,
  div[role="main"],
  .course-content,
  .course-content ul.topics,
  .course-content ul.weeks,
  .course-content ul.sections,
  .course-content .topics,
  .course-content .weeks,
  .course-content .sections {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 4. Course Sections (Topics / Weeks) Full-Width */
  li.course-section,
  li.section.main.course-section,
  li.section.main,
  li.section,
  li[id^="section-"],
  .course-section {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Section Item Card expands fully */
  li.course-section .section-item,
  li.section.main .section-item,
  li.section .section-item,
  li[id^="section-"] .section-item,
  .course-section .section-item,
  li.section.main:not(.course-section):not(:has(.section-item)),
  li[id="section-0"]:not(.course-section):not(:has(.section-item)) {
    padding: 12px 10px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }

  /* 5. Activities, Roadmaps, Labels, Cards and Modules Expand to Full Width */
  .activity-item,
  .activity,
  li.activity,
  .section .activity,
  .contentwithoutlink,
  .activity-description,
  .section-summary,
  .section .summary,
  .section .content,
  .activity .content,
  .activity-item .content,
  .activity-item .activity-item-content,
  .no-overflow,
  .card,
  .box {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .activity-item {
    padding: 10px 10px !important;
    border-radius: 12px !important;
  }

  /* Ensure any custom HTML roadmap/timeline boxes expand to 100% */
  .course-content [style*="width"],
  .activity-item [style*="width"],
  .section-summary [style*="width"],
  .contentwithoutlink [style*="width"] {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 6. Page Header Banner Full-Width on Mobile */
  #page-header,
  #page-header.header-maxwidth,
  .header-maxwidth,
  .single-section-page .header-maxwidth,
  body.limitedwidth .header-maxwidth {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
}

/* --- BEAUTIFUL PINTAR ACTIVITY VIEWS BADGE (ULTRA-PRECISE & ELEGANT) --- */
.activity-item .activity-grid {
  position: relative !important;
}

.activity-item .activity-actions {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  align-self: start !important;
  margin-top: 2px !important;
}

.pintar-act-views-badge {
  grid-area: actions !important;
  justify-self: end !important;
  align-self: start !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 28px !important;
  line-height: 26px !important;
  padding: 0 12px !important;
  margin: 2px 0 0 6px !important;
  border-radius: 999px !important;
  background: rgba(248, 250, 252, 0.95) !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  color: #475569 !important;
  letter-spacing: -0.01em !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  user-select: none !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  min-width: max-content !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
  text-decoration: none !important;
  outline: none !important;
}

.pintar-act-views-badge:hover {
  background: #ffffff !important;
  border-color: rgba(99, 102, 241, 0.5) !important;
  color: #4338ca !important;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.16), 0 1px 3px rgba(15, 23, 42, 0.06) !important;
  transform: translateY(-1px) !important;
}

.pintar-act-views-badge .act-badge-icon {
  font-size: 0.78rem !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  transition: transform 0.2s ease !important;
}

.pintar-act-views-badge:hover .act-badge-icon {
  transform: scale(1.18) !important;
}

.pintar-act-views-badge .act-views-group,
.pintar-act-views-badge .act-users-group {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.pintar-act-views-badge .act-badge-subicon {
  font-size: 0.72rem !important;
  color: #64748b !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

.pintar-act-views-badge .act-views-num,
.pintar-act-views-badge .act-users-num {
  font-weight: 700 !important;
  color: #0f172a !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1 !important;
}

.pintar-act-views-badge .act-views-txt,
.pintar-act-views-badge .act-users-txt {
  font-weight: 500 !important;
  color: #64748b !important;
  line-height: 1 !important;
}

.pintar-act-views-badge:hover .act-views-txt,
.pintar-act-views-badge:hover .act-users-txt,
.pintar-act-views-badge:hover .act-badge-subicon {
  color: #4338ca !important;
}

.pintar-act-views-badge .act-pill-sep {
  font-weight: 900 !important;
  color: #cbd5e1 !important;
  margin: 0 2px !important;
  user-select: none !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

.pintar-act-views-badge.is-popular {
  background: linear-gradient(135deg, rgba(254, 243, 199, 0.92) 0%, rgba(254, 240, 138, 0.85) 100%) !important;
  border-color: rgba(245, 158, 11, 0.45) !important;
  color: #92400e !important;
}

.pintar-act-views-badge.is-popular .act-views-num,
.pintar-act-views-badge.is-popular .act-users-num {
  color: #b45309 !important;
}

.pintar-act-views-badge.is-popular .act-views-txt,
.pintar-act-views-badge.is-popular .act-users-txt {
  color: #92400e !important;
}

.pintar-act-views-badge.is-popular .act-pill-sep {
  color: rgba(217, 119, 6, 0.4) !important;
}

.pintar-act-views-badge.is-popular:hover {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
  border-color: #f59e0b !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.25) !important;
}

@media (max-width: 575.98px) {
  .pintar-act-views-badge {
    height: 25px !important;
    line-height: 23px !important;
    padding: 0 9px !important;
    font-size: 0.68rem !important;
    gap: 4px !important;
  }
}

/* --- PINTAR ACTIVITY VIEWERS MODAL (LIQUID GLASS) --- */
.pintar-viewers-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.24s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.24s ease !important;
}

.pintar-viewers-overlay.show {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.pintar-viewers-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(15, 23, 42, 0.72) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  cursor: pointer !important;
}

.pintar-viewers-dialog {
  position: relative !important;
  z-index: 2 !important;
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(28px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(200%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 30px 70px -12px rgba(15, 23, 42, 0.4), 0 10px 25px rgba(99, 102, 241, 0.2) !important;
  border-radius: 26px !important;
  max-width: 520px !important;
  width: 100% !important;
  max-height: 88vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  transform: scale(0.92) translateY(16px) !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.pintar-viewers-overlay.show .pintar-viewers-dialog {
  transform: scale(1) translateY(0) !important;
}

.pintar-viewers-header {
  padding: 20px 22px 16px !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
  position: relative !important;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%) !important;
}

.pintar-viewers-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  background: rgba(99, 102, 241, 0.12) !important;
  color: #4f46e5 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
}

.pintar-viewers-title {
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.35 !important;
  padding-right: 36px !important;
  word-break: break-word !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-height: 42px !important;
}

.pintar-viewers-close {
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: rgba(241, 245, 249, 0.9) !important;
  border: 1px solid rgba(203, 213, 225, 0.8) !important;
  color: #475569 !important;
  font-size: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
}

.pintar-viewers-close:hover {
  background: #f43f5e !important;
  color: #ffffff !important;
  border-color: #f43f5e !important;
  transform: rotate(90deg) scale(1.08) !important;
}

.pintar-viewers-search-box {
  padding: 12px 20px !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.7) !important;
  background: #f8fafc !important;
}

.pintar-viewers-search-inner {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 14px !important;
  background: #ffffff !important;
  border-radius: 14px !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  transition: all 0.2s ease !important;
}

.pintar-viewers-search-inner:focus-within {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
}

.pintar-viewers-search-inner input {
  border: none !important;
  outline: none !important;
  background: transparent !important;
  font-size: 13.5px !important;
  color: #1e293b !important;
  width: 100% !important;
  font-family: inherit !important;
}

.pintar-viewers-list {
  padding: 16px 20px !important;
  overflow-y: auto !important;
  max-height: 52vh !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.pintar-viewer-row {
  display: flex !important;
  align-items: center !important;
  padding: 10px 14px !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  border: 1px solid rgba(226, 232, 240, 0.8) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  transition: all 0.2s ease !important;
}

.pintar-viewer-row:hover {
  border-color: rgba(99, 102, 241, 0.4) !important;
  background: rgba(248, 250, 252, 0.95) !important;
  transform: translateX(2px) !important;
}

.pintar-viewer-avatar {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid #e2e8f0 !important;
  margin-right: 12px !important;
  flex-shrink: 0 !important;
  background: #f1f5f9 !important;
}

.pintar-viewer-meta {
  flex-grow: 1 !important;
  min-width: 0 !important;
}

.pintar-viewer-name {
  font-weight: 700 !important;
  font-size: 13.5px !important;
  color: #0f172a !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.pintar-viewer-time {
  font-size: 11.5px !important;
  color: #64748b !important;
  margin-top: 2px !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.pintar-viewer-count-badge {
  flex-shrink: 0 !important;
  margin-left: 12px !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  background: #eef2ff !important;
  color: #4f46e5 !important;
  border: 1px solid rgba(165, 180, 252, 0.6) !important;
  white-space: nowrap !important;
}

.pintar-viewers-footer {
  padding: 12px 20px !important;
  border-top: 1px solid rgba(226, 232, 240, 0.8) !important;
  background: #f8fafc !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 12px !important;
  color: #64748b !important;
}

/* ==========================================================================
   MOBILE PERFORMANCE TURBO BOOST (Smartphones & Tablets < 992px)
   Eliminates all GPU fillrate throttling on mid-end & low-end mobile devices
   ========================================================================== */
@media (max-width: 991.98px) {
  *, *::before, *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    text-shadow: none !important;
  }

  nav.navbar.fixed-top,
  .login-container,
  .drawer,
  .drawer-primary,
  .drawer-right,
  #theme_boost-drawers-primary,
  #theme_boost-drawers-blocks,
  #theme_boost-drawers-courseindex,
  .popover-region-container,
  .modal-content,
  .dropdown-menu,
  #page .mform > fieldset,
  .coursebox,
  .card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-color: #ffffff !important;
  }

  .coursebox,
  .login-container,
  .card,
  #page .mform > fieldset,
  .modal-content {
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08) !important;
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
  }

  * {
    animation-iteration-count: 1 !important;
  }
}