/*
 * This is a manifest file that'll be compiled into application.css.
 */

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Glassmorphism & Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: rgba(31, 41, 55, 0.5);
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(79, 70, 229, 0.4);
  border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(79, 70, 229, 0.6);
}

/* Turbo View Transitions */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.3s;
}

/* Custom Animations */
@keyframes telemetry-ping {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}

.animate-telemetry {
  animation: telemetry-ping 1s ease-out;
}

/* Prudence Global theme
 * Rollback: start Rails with APP_VISUAL_THEME=legacy, or remove data-theme="prudence_global" from layouts.
 */
[data-theme='prudence_global'] {
  --pg-abyss: #081d2d;
  --pg-navy: #12324a;
  --pg-orange: #ff8a00;
  --pg-silver: #a7a9ac;
  --pg-ink: #1e1e1e;
  --pg-paper: #f2f2f2;
  --pg-line: rgba(167, 169, 172, 0.22);
  --pg-blue-glow: rgba(18, 50, 74, 0.72);
  --pg-orange-glow: rgba(255, 138, 0, 0.2);
  background:
    radial-gradient(circle at 50% -10%, rgba(18, 50, 74, 0.95), transparent 42%),
    radial-gradient(circle at 92% 10%, rgba(255, 138, 0, 0.12), transparent 22%),
    linear-gradient(135deg, #050d16 0%, #081d2d 42%, #02070c 100%);
}

[data-theme='prudence_global']::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(rgba(242, 242, 242, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242, 242, 242, 0.02) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.85), transparent 82%);
}

[data-theme='prudence_global'] .brand-mark {
  position: relative;
  display: inline-flex;
  width: 2.25rem;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(242, 242, 242, 0.18);
  border-radius: 0.9rem;
  background:
    radial-gradient(circle at 68% 35%, rgba(242, 242, 242, 0.42), transparent 9%),
    radial-gradient(circle at 62% 46%, rgba(18, 50, 74, 0.95), rgba(8, 29, 45, 0.8) 42%, transparent 43%),
    linear-gradient(135deg, rgba(242, 242, 242, 0.95), rgba(167, 169, 172, 0.55) 44%, rgba(255, 138, 0, 0.95) 45%, rgba(255, 138, 0, 0.7));
  box-shadow: 0 0 0 1px rgba(255, 138, 0, 0.16), 0 14px 32px rgba(0, 0, 0, 0.36);
}

[data-theme='prudence_global'] .brand-mark::after {
  content: '';
  position: absolute;
  right: -0.35rem;
  bottom: 0.15rem;
  width: 1.8rem;
  height: 0.55rem;
  border-bottom: 0.22rem solid var(--pg-orange);
  border-radius: 50%;
  transform: rotate(-18deg);
}

[data-theme='prudence_global'] .brand-mark span {
  position: relative;
  z-index: 1;
  color: #f8fafc;
  font-size: 1.25rem;
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
}

[data-theme='prudence_global'] .brand-mark-lg {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 1.35rem;
}

[data-theme='prudence_global'] .brand-mark-lg span {
  font-size: 2.5rem;
}

[data-theme='prudence_global'] .brand-wordmark {
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

[data-theme='prudence_global'] .brand-wordmark span,
[data-theme='prudence_global'] .text-indigo-500,
[data-theme='prudence_global'] .text-indigo-400,
[data-theme='prudence_global'] .text-indigo-300,
[data-theme='prudence_global'] .text-indigo-200 {
  color: var(--pg-orange);
}

[data-theme='prudence_global'] .bg-gray-950,
[data-theme='prudence_global'].bg-gray-950 {
  background-color: transparent;
}

[data-theme='prudence_global'] .bg-gray-900,
[data-theme='prudence_global'] .bg-gray-900\/40,
[data-theme='prudence_global'] .bg-gray-900\/50,
[data-theme='prudence_global'] .bg-gray-900\/60,
[data-theme='prudence_global'] .bg-gray-900\/70,
[data-theme='prudence_global'] .bg-gray-900\/80 {
  background-color: rgba(8, 29, 45, 0.72);
}

[data-theme='prudence_global'] .bg-gray-800,
[data-theme='prudence_global'] .bg-gray-800\/20,
[data-theme='prudence_global'] .bg-gray-800\/30,
[data-theme='prudence_global'] .bg-gray-800\/40,
[data-theme='prudence_global'] .bg-gray-800\/50,
[data-theme='prudence_global'] .bg-gray-800\/60,
[data-theme='prudence_global'] .bg-gray-800\/80 {
  background-color: rgba(18, 50, 74, 0.7);
}

[data-theme='prudence_global'] .bg-gray-950\/30,
[data-theme='prudence_global'] .bg-gray-950\/35,
[data-theme='prudence_global'] .bg-gray-950\/40 {
  background-color: rgba(3, 10, 17, 0.42);
}

[data-theme='prudence_global'] .border-gray-800,
[data-theme='prudence_global'] .border-gray-800\/50,
[data-theme='prudence_global'] .border-gray-800\/70,
[data-theme='prudence_global'] .border-gray-700,
[data-theme='prudence_global'] .border-gray-700\/50 {
  border-color: var(--pg-line);
}

[data-theme='prudence_global'] .bg-indigo-600,
[data-theme='prudence_global'] .bg-indigo-700,
[data-theme='prudence_global'] .bg-indigo-500,
[data-theme='prudence_global'] .bg-indigo-500\/10,
[data-theme='prudence_global'] .bg-indigo-500\/20,
[data-theme='prudence_global'] .bg-indigo-500\/30,
[data-theme='prudence_global'] .bg-indigo-600\/20,
[data-theme='prudence_global'] .bg-indigo-600\/30 {
  background-color: var(--pg-orange);
}

[data-theme='prudence_global'] .bg-gradient-to-r.from-indigo-600.to-indigo-700 {
  background-image:
    radial-gradient(circle at 24% 20%, rgba(242, 242, 242, 0.14), transparent 24%),
    linear-gradient(135deg, rgba(8, 29, 45, 0.98), rgba(18, 50, 74, 0.92) 55%, rgba(255, 138, 0, 0.78));
}

[data-theme='prudence_global'] .border-indigo-500,
[data-theme='prudence_global'] .border-indigo-500\/20,
[data-theme='prudence_global'] .border-indigo-500\/30,
[data-theme='prudence_global'] .border-indigo-500\/40,
[data-theme='prudence_global'] .border-indigo-500\/50 {
  border-color: rgba(255, 138, 0, 0.48);
}

[data-theme='prudence_global'] .ring-indigo-500,
[data-theme='prudence_global'] .focus\:ring-indigo-500:focus {
  --tw-ring-color: var(--pg-orange);
}

[data-theme='prudence_global'] .focus\:border-indigo-500:focus,
[data-theme='prudence_global'] .has-\[\:checked\]\:border-indigo-500:has(:checked),
[data-theme='prudence_global'] .has-\[\:checked\]\:border-indigo-600:has(:checked) {
  border-color: var(--pg-orange);
}

[data-theme='prudence_global'] .shadow-indigo-500\/20 {
  --tw-shadow-color: var(--pg-orange-glow);
}

[data-theme='prudence_global'] nav {
  background:
    linear-gradient(90deg, rgba(3, 10, 17, 0.96), rgba(8, 29, 45, 0.9)),
    radial-gradient(circle at 82% 0%, rgba(255, 138, 0, 0.08), transparent 24%);
  border-color: rgba(167, 169, 172, 0.18);
}

[data-theme='prudence_global'] main > div:last-child {
  position: relative;
}

[data-theme='prudence_global'] .rounded-2xl,
[data-theme='prudence_global'] .rounded-xl {
  box-shadow: inset 0 1px 0 rgba(242, 242, 242, 0.03);
}

[data-theme='prudence_global'] .custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(255, 138, 0, 0.42);
}

[data-theme='prudence_global'] .custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 138, 0, 0.62);
}

[data-theme='prudence_global'] .expand-toggle {
  display: inline-flex !important;
  width: 2.5rem !important;
  height: 2.5rem !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  color: var(--pg-orange) !important;
  background: rgba(3, 10, 17, 0.38) !important;
  border: 1px solid rgba(255, 138, 0, 0.32) !important;
  border-radius: 0.75rem !important;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease !important;
}

[data-theme='prudence_global'] .expand-toggle:hover {
  color: #f2f2f2 !important;
  background: rgba(255, 138, 0, 0.1) !important;
  border-color: rgba(255, 138, 0, 0.65) !important;
}

[data-theme='prudence_global'] .expand-toggle svg {
  display: block !important;
  color: currentColor !important;
  stroke: currentColor !important;
}

/* Prudence Global — LIGHT mode
 * Same brand (orange accent, navy ink, blueprint grid) on a white background.
 * Mirrors the dark block's selectors but maps surfaces to white/paper and the
 * views' hardcoded light text (text-white / text-gray-100..300) to navy ink.
 */
[data-theme='prudence_global_light'] {
  --pg-abyss: #ffffff;
  --pg-navy: #12324a;
  --pg-orange: #ff8a00;
  --pg-silver: #6b7280;
  --pg-ink: #0b1d2d;
  --pg-paper: #eef1f5;
  --pg-line: rgba(18, 50, 74, 0.18);
  --pg-blue-glow: rgba(18, 50, 74, 0.08);
  --pg-orange-glow: rgba(255, 138, 0, 0.18);
  color: var(--pg-ink);
  /* Soft cool-gray page so white cards/nav separate clearly. */
  background:
    radial-gradient(circle at 50% -10%, rgba(18, 50, 74, 0.07), transparent 42%),
    radial-gradient(circle at 92% 10%, rgba(255, 138, 0, 0.06), transparent 22%),
    linear-gradient(135deg, #e7ebf1 0%, #e1e6ed 60%, #dce2ea 100%);
}

[data-theme='prudence_global_light']::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(rgba(18, 50, 74, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 50, 74, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), transparent 82%);
}

/* Surfaces */
[data-theme='prudence_global_light'] .bg-gray-950,
[data-theme='prudence_global_light'].bg-gray-950 {
  background-color: transparent;
}

[data-theme='prudence_global_light'] .bg-gray-900,
[data-theme='prudence_global_light'] .bg-gray-900\/40,
[data-theme='prudence_global_light'] .bg-gray-900\/50,
[data-theme='prudence_global_light'] .bg-gray-900\/60,
[data-theme='prudence_global_light'] .bg-gray-900\/70,
[data-theme='prudence_global_light'] .bg-gray-900\/80 {
  background-color: #ffffff;
}

[data-theme='prudence_global_light'] .bg-gray-800,
[data-theme='prudence_global_light'] .bg-gray-800\/20,
[data-theme='prudence_global_light'] .bg-gray-800\/30,
[data-theme='prudence_global_light'] .bg-gray-800\/40,
[data-theme='prudence_global_light'] .bg-gray-800\/50,
[data-theme='prudence_global_light'] .bg-gray-800\/60,
[data-theme='prudence_global_light'] .bg-gray-800\/80 {
  background-color: var(--pg-paper);
}

[data-theme='prudence_global_light'] .bg-gray-950\/30,
[data-theme='prudence_global_light'] .bg-gray-950\/35,
[data-theme='prudence_global_light'] .bg-gray-950\/40 {
  background-color: rgba(11, 29, 45, 0.04);
}

/* Chips / badges (the views' bg-gray-700 pills). bg-black is intentionally NOT
 * remapped — it is the lesson video container and stays black in both themes. */
[data-theme='prudence_global_light'] .bg-gray-700,
[data-theme='prudence_global_light'] .bg-gray-700\/30,
[data-theme='prudence_global_light'] .bg-gray-700\/50,
[data-theme='prudence_global_light'] .bg-gray-700\/60,
[data-theme='prudence_global_light'] .bg-gray-600 {
  background-color: rgba(18, 50, 74, 0.06);
}

/* Text — the views bake in light text; remap to navy ink for light mode */
[data-theme='prudence_global_light'] .text-white,
[data-theme='prudence_global_light'] .text-gray-100,
[data-theme='prudence_global_light'] .text-gray-200 {
  color: var(--pg-ink);
}

[data-theme='prudence_global_light'] .text-gray-300 {
  color: #334155;
}

[data-theme='prudence_global_light'] .text-gray-400 {
  color: #475569;
}

[data-theme='prudence_global_light'] .text-gray-500 {
  color: #64748b;
}

/* Text that sits on surfaces which stay dark in light mode (the indigo gradient
 * banners and solid indigo/orange buttons) must stay white — overriding the
 * default text-white -> ink remap above. */
[data-theme='prudence_global_light'] .bg-gradient-to-r.from-indigo-600.to-indigo-700 h1,
[data-theme='prudence_global_light'] .bg-gradient-to-r.from-indigo-600.to-indigo-700 h2,
[data-theme='prudence_global_light'] .bg-gradient-to-r.from-indigo-600.to-indigo-700 .text-white,
[data-theme='prudence_global_light'] .bg-gradient-to-r.from-indigo-600.to-indigo-700 .text-gray-100,
[data-theme='prudence_global_light'] .bg-gradient-to-r.from-indigo-600.to-indigo-700.text-white,
[data-theme='prudence_global_light'] .bg-indigo-600.text-white,
[data-theme='prudence_global_light'] .bg-indigo-700.text-white,
[data-theme='prudence_global_light'] .bg-indigo-500.text-white,
[data-theme='prudence_global_light'] .bg-indigo-600 .text-white,
[data-theme='prudence_global_light'] .bg-indigo-500 .text-white {
  color: #ffffff;
}

/* Accent — indigo maps to orange, same as dark */
[data-theme='prudence_global_light'] .brand-wordmark span,
[data-theme='prudence_global_light'] .text-indigo-500,
[data-theme='prudence_global_light'] .text-indigo-400,
[data-theme='prudence_global_light'] .text-indigo-300,
[data-theme='prudence_global_light'] .text-indigo-200 {
  color: var(--pg-orange);
}

[data-theme='prudence_global_light'] .bg-indigo-600,
[data-theme='prudence_global_light'] .bg-indigo-700,
[data-theme='prudence_global_light'] .bg-indigo-500,
[data-theme='prudence_global_light'] .bg-indigo-500\/10,
[data-theme='prudence_global_light'] .bg-indigo-500\/20,
[data-theme='prudence_global_light'] .bg-indigo-500\/30,
[data-theme='prudence_global_light'] .bg-indigo-600\/20,
[data-theme='prudence_global_light'] .bg-indigo-600\/30 {
  background-color: var(--pg-orange);
}

[data-theme='prudence_global_light'] .bg-gradient-to-r.from-indigo-600.to-indigo-700 {
  background-image:
    radial-gradient(circle at 24% 20%, rgba(255, 255, 255, 0.18), transparent 24%),
    linear-gradient(135deg, #12324a, #1c4a6e 55%, rgba(255, 138, 0, 0.92));
}

/* Borders */
[data-theme='prudence_global_light'] .border-gray-800,
[data-theme='prudence_global_light'] .border-gray-800\/50,
[data-theme='prudence_global_light'] .border-gray-800\/70,
[data-theme='prudence_global_light'] .border-gray-700,
[data-theme='prudence_global_light'] .border-gray-700\/50 {
  border-color: var(--pg-line);
}

[data-theme='prudence_global_light'] .border-indigo-500,
[data-theme='prudence_global_light'] .border-indigo-500\/20,
[data-theme='prudence_global_light'] .border-indigo-500\/30,
[data-theme='prudence_global_light'] .border-indigo-500\/40,
[data-theme='prudence_global_light'] .border-indigo-500\/50 {
  border-color: rgba(255, 138, 0, 0.55);
}

[data-theme='prudence_global_light'] .ring-indigo-500,
[data-theme='prudence_global_light'] .focus\:ring-indigo-500:focus {
  --tw-ring-color: var(--pg-orange);
}

[data-theme='prudence_global_light'] .focus\:border-indigo-500:focus,
[data-theme='prudence_global_light'] .has-\[\:checked\]\:border-indigo-500:has(:checked),
[data-theme='prudence_global_light'] .has-\[\:checked\]\:border-indigo-600:has(:checked) {
  border-color: var(--pg-orange);
}

[data-theme='prudence_global_light'] .shadow-indigo-500\/20 {
  --tw-shadow-color: var(--pg-orange-glow);
}

/* Status colors in light mode: the views use dark translucent boxes
 * (bg-*-900/40) with light text (text-*-300/400) tuned for the dark theme.
 * On white that reads as a dark blob, so map boxes to a light tint of the same
 * hue and the text to a darker, legible shade. Saturated solid -500 fills
 * (badges/pills) are left untouched. */
[data-theme='prudence_global_light'] .bg-green-900,
[data-theme='prudence_global_light'] .bg-green-900\/40,
[data-theme='prudence_global_light'] .bg-emerald-900\/40 {
  background-color: rgba(16, 185, 129, 0.12);
}
[data-theme='prudence_global_light'] .bg-red-900,
[data-theme='prudence_global_light'] .bg-red-900\/40,
[data-theme='prudence_global_light'] .bg-red-950 {
  background-color: rgba(239, 68, 68, 0.10);
}
[data-theme='prudence_global_light'] .bg-yellow-900,
[data-theme='prudence_global_light'] .bg-yellow-900\/40 {
  background-color: rgba(245, 158, 11, 0.14);
}

[data-theme='prudence_global_light'] .text-green-400,
[data-theme='prudence_global_light'] .text-green-300,
[data-theme='prudence_global_light'] .text-green-500,
[data-theme='prudence_global_light'] .text-emerald-400,
[data-theme='prudence_global_light'] .text-emerald-300 {
  color: #047857;
}
[data-theme='prudence_global_light'] .text-red-400,
[data-theme='prudence_global_light'] .text-red-300,
[data-theme='prudence_global_light'] .text-red-500,
[data-theme='prudence_global_light'] .text-red-200 {
  color: #b91c1c;
}
[data-theme='prudence_global_light'] .text-yellow-400,
[data-theme='prudence_global_light'] .text-yellow-300,
[data-theme='prudence_global_light'] .text-yellow-200,
[data-theme='prudence_global_light'] .text-yellow-500,
[data-theme='prudence_global_light'] .text-amber-400 {
  color: #b45309;
}
[data-theme='prudence_global_light'] .text-blue-400,
[data-theme='prudence_global_light'] .text-blue-300 {
  color: #1d4ed8;
}

[data-theme='prudence_global_light'] .border-red-700,
[data-theme='prudence_global_light'] .border-red-800,
[data-theme='prudence_global_light'] .border-red-900,
[data-theme='prudence_global_light'] .border-red-500 {
  border-color: rgba(220, 38, 38, 0.35);
}
[data-theme='prudence_global_light'] .border-green-700,
[data-theme='prudence_global_light'] .border-green-500,
[data-theme='prudence_global_light'] .border-green-400 {
  border-color: rgba(5, 150, 105, 0.35);
}
[data-theme='prudence_global_light'] .border-yellow-700,
[data-theme='prudence_global_light'] .border-yellow-500 {
  border-color: rgba(217, 119, 6, 0.4);
}

/* Nav — white glass with hairline */
[data-theme='prudence_global_light'] nav {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.96), rgba(244, 246, 248, 0.92)),
    radial-gradient(circle at 82% 0%, rgba(255, 138, 0, 0.06), transparent 24%);
  border-color: var(--pg-line);
}

/* Cards get a real soft shadow instead of the dark inset highlight */
[data-theme='prudence_global_light'] .rounded-2xl,
[data-theme='prudence_global_light'] .rounded-xl {
  box-shadow: 0 1px 2px rgba(11, 29, 45, 0.08), 0 12px 28px rgba(11, 29, 45, 0.10);
}

[data-theme='prudence_global_light'] .custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(255, 138, 0, 0.42);
}

[data-theme='prudence_global_light'] .custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 138, 0, 0.62);
}

[data-theme='prudence_global_light'] .expand-toggle {
  display: inline-flex !important;
  width: 2.5rem !important;
  height: 2.5rem !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  color: var(--pg-orange) !important;
  background: rgba(255, 138, 0, 0.06) !important;
  border: 1px solid rgba(255, 138, 0, 0.32) !important;
  border-radius: 0.75rem !important;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease !important;
}

[data-theme='prudence_global_light'] .expand-toggle:hover {
  color: #0b1d2d !important;
  background: rgba(255, 138, 0, 0.12) !important;
  border-color: rgba(255, 138, 0, 0.65) !important;
}

[data-theme='prudence_global_light'] .expand-toggle svg {
  display: block !important;
  color: currentColor !important;
  stroke: currentColor !important;
}

/* Brand mark reads on light too */
[data-theme='prudence_global_light'] .brand-mark {
  border-color: rgba(18, 50, 74, 0.18);
  box-shadow: 0 0 0 1px rgba(255, 138, 0, 0.18), 0 10px 24px rgba(11, 29, 45, 0.12);
}

/* Theme-conditional assets: show the right logo / toggle icon per active theme.
 * CSS-driven (keyed on the server-rendered data-theme) so there is no flash. */
[data-theme='prudence_global'] [data-theme-icon='light'],
[data-theme='prudence_global'] [data-theme-logo='light'],
[data-theme='prudence_global_light'] [data-theme-icon='dark'],
[data-theme='prudence_global_light'] [data-theme-logo='dark'] {
  display: none;
}

/* Theme toggle button (shared) */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.75rem;
  border: 1px solid var(--pg-line);
  color: var(--pg-orange);
  background: transparent;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.theme-toggle:hover {
  border-color: rgba(255, 138, 0, 0.55);
  background: rgba(255, 138, 0, 0.08);
}

.theme-toggle svg {
  width: 1.15rem;
  height: 1.15rem;
}

/* Progress elements base styling */
progress {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
}

/* 1. Student Dashboard Progress Bar */
progress.student-course-progress {
  background-color: rgba(31, 41, 55, 0.5); /* bg-gray-800/50 */
}
progress.student-course-progress::-webkit-progress-bar {
  background-color: rgba(31, 41, 55, 0.5); /* bg-gray-800/50 */
  border-radius: 9999px;
}
progress.student-course-progress::-webkit-progress-value {
  background-color: #6366f1; /* bg-indigo-500 */
  border-radius: 9999px;
  transition: all 0.3s ease;
}
progress.student-course-progress::-moz-progress-bar {
  background-color: #6366f1; /* bg-indigo-500 */
  border-radius: 9999px;
  transition: all 0.3s ease;
}

/* Theme overrides for student progress bar */
[data-theme='prudence_global'] progress.student-course-progress {
  background-color: rgba(18, 50, 74, 0.7);
}
[data-theme='prudence_global'] progress.student-course-progress::-webkit-progress-bar {
  background-color: rgba(18, 50, 74, 0.7);
}
[data-theme='prudence_global'] progress.student-course-progress::-webkit-progress-value {
  background-color: var(--pg-orange);
}
[data-theme='prudence_global'] progress.student-course-progress::-moz-progress-bar {
  background-color: var(--pg-orange);
}

[data-theme='prudence_global_light'] progress.student-course-progress {
  background-color: var(--pg-paper);
}
[data-theme='prudence_global_light'] progress.student-course-progress::-webkit-progress-bar {
  background-color: var(--pg-paper);
}
[data-theme='prudence_global_light'] progress.student-course-progress::-webkit-progress-value {
  background-color: var(--pg-orange);
}
[data-theme='prudence_global_light'] progress.student-course-progress::-moz-progress-bar {
  background-color: var(--pg-orange);
}

/* 2. Admin Collaborator Progress Bar */
progress.collaborator-progress {
  background-color: #1f2937; /* bg-gray-800 */
}
progress.collaborator-progress::-webkit-progress-bar {
  background-color: #1f2937; /* bg-gray-800 */
  border-radius: 9999px;
}

/* Compliant state */
progress.collaborator-progress.is-compliant::-webkit-progress-value {
  background-color: #4ade80; /* bg-green-400 */
  border-radius: 9999px;
}
progress.collaborator-progress.is-compliant::-moz-progress-bar {
  background-color: #4ade80;
  border-radius: 9999px;
}

/* In-progress state */
progress.collaborator-progress.is-in-progress::-webkit-progress-value {
  background-color: #facc15; /* bg-yellow-400 */
  border-radius: 9999px;
}
progress.collaborator-progress.is-in-progress::-moz-progress-bar {
  background-color: #facc15;
  border-radius: 9999px;
}

/* Empty state */
progress.collaborator-progress.is-empty::-webkit-progress-value {
  background-color: #4b5563; /* bg-gray-600 */
  border-radius: 9999px;
}
progress.collaborator-progress.is-empty::-moz-progress-bar {
  background-color: #4b5563;
  border-radius: 9999px;
}

/* Theme overrides for collaborator progress track */
[data-theme='prudence_global'] progress.collaborator-progress {
  background-color: rgba(18, 50, 74, 0.7);
}
[data-theme='prudence_global'] progress.collaborator-progress::-webkit-progress-bar {
  background-color: rgba(18, 50, 74, 0.7);
}

[data-theme='prudence_global_light'] progress.collaborator-progress {
  background-color: var(--pg-paper);
}
[data-theme='prudence_global_light'] progress.collaborator-progress::-webkit-progress-bar {
  background-color: var(--pg-paper);
}

/* Light theme overrides for collaborator progress value colors to ensure high contrast */
[data-theme='prudence_global_light'] progress.collaborator-progress.is-compliant::-webkit-progress-value {
  background-color: #10b981; /* emerald-500 */
}
[data-theme='prudence_global_light'] progress.collaborator-progress.is-compliant::-moz-progress-bar {
  background-color: #10b981;
}

[data-theme='prudence_global_light'] progress.collaborator-progress.is-in-progress::-webkit-progress-value {
  background-color: #d97706; /* amber-600 */
}
[data-theme='prudence_global_light'] progress.collaborator-progress.is-in-progress::-moz-progress-bar {
  background-color: #d97706;
}

[data-theme='prudence_global_light'] progress.collaborator-progress.is-empty::-webkit-progress-value {
  background-color: #94a3b8; /* slate-400 */
}
[data-theme='prudence_global_light'] progress.collaborator-progress.is-empty::-moz-progress-bar {
  background-color: #94a3b8;
}