/* =============================================================
   MOTADATA DESIGN SYSTEM — Theme Override Layer
   -------------------------------------------------------------
   Loaded AFTER app.css. Retokenizes primary → orange and adds
   utility classes ported from web-app-next.js/app/globals.css.
   Source: /home/aerina-halvadiya/Development/web-app-next.js
   ============================================================= */

:root {
  /* ── Brand Color ──
     Change this one value to restyle the whole brand. */
  --default-orange: 7 84% 67%; /* #f17463 */
  --default-orange-solid: #f17463;
  --default-orange-dark: #d95a48;

  /* HSL tokens (web-app-next.js parity) */
  --md-primary: var(--default-orange);
  --md-primary-foreground: 0 0% 100%;
  --md-ring: var(--default-orange);
  --md-border: 220 13% 91%;
  --md-input: 220 13% 91%;
  --md-muted: 220 14% 96%;
  --md-muted-foreground: 220 9% 46%;
  --md-foreground: 222 47% 11%;
  --md-card: 0 0% 100%;
  --md-radius: 0.625rem;

  /* Gradient endpoints */
  --md-gradient-from: var(--default-orange);
  --md-gradient-to: 350 75% 55%;
}

/* =====================================================
   PRIMARY COLOR OVERRIDES
   Recolors compiled .bg-primary / .text-primary / .border-primary
   from the Tailwind output. Specificity boosted once with [class]
   so these win without needing !important everywhere.
   ===================================================== */
html:not(.dark) [class].bg-primary,
html:not(.dark) .bg-primary,
html:not(.dark) .hover\:bg-primary:hover,
html:not(.dark) .focus\:bg-primary:focus,
html:not(.dark) .active\:bg-primary:active,
html:not(.dark) .checked\:bg-primary:checked,
html:not(.dark) .group:hover .group-hover\:bg-primary {
  background-color: var(--default-orange-solid);
}
html:not(.dark) .active\:bg-primary\/90:active {
  background-color: hsl(var(--default-orange) / 0.9);
}
html:not(.dark) .bg-primary-focus,
html:not(.dark) .hover\:bg-primary-focus:hover,
html:not(.dark) .focus\:bg-primary-focus:focus,
html:not(.dark) .active\:bg-primary-focus:active,
html:not(.dark) .active\:bg-primary-focus\/90:active {
  background-color: var(--default-orange-dark);
}
html:not(.dark) .text-primary,
html:not(.dark) .hover\:text-primary:hover,
html:not(.dark) .focus\:text-primary:focus,
html:not(.dark) .active\:text-primary:active,
html:not(.dark) .group:hover .group-hover\:text-primary,
html:not(.dark) .peer:focus ~ .peer-focus\:text-primary,
html:not(.dark) .peer-focus\:text-primary {
  color: var(--default-orange-solid);
}
/* Preserve Tailwind state-override intent: hover:text-white must beat text-primary.
   We boost these utility classes to the same specificity as the scoped text-primary
   rule above so normal cascade (later source order wins) takes effect. */
html:not(.dark) .hover\:text-white:hover,
html:not(.dark) .focus\:text-white:focus,
html:not(.dark) .active\:text-white:active,
html:not(.dark) .group:hover .group-hover\:text-white { color: #fff; }
html:not(.dark) .hover\:text-slate-50:hover  { color: #f8fafc; }
html:not(.dark) .hover\:text-slate-100:hover { color: #f1f5f9; }
html:not(.dark) .hover\:text-slate-800:hover { color: #1e293b; }
html:not(.dark) .hover\:text-slate-900:hover { color: #0f172a; }
html:not(.dark) .border-primary,
html:not(.dark) .hover\:border-primary:hover,
html:not(.dark) .focus\:border-primary:focus,
html:not(.dark) .checked\:border-primary:checked {
  border-color: var(--default-orange-solid);
}
html:not(.dark) .peer:focus ~ .peer-focus\:text-primary {
  color: var(--default-orange-solid);
}
html:not(.dark) .ring-primary,
html:not(.dark) .ring-primary\/50 {
  --tw-ring-color: var(--default-orange-solid);
}
html:not(.dark) .bg-primary\/10 { background-color: hsl(var(--default-orange) / 0.1); }
html:not(.dark) .bg-primary\/15 { background-color: hsl(var(--default-orange) / 0.15); }
html:not(.dark) .bg-primary\/20 { background-color: hsl(var(--default-orange) / 0.2); }
html:not(.dark) .bg-primary\/90 { background-color: hsl(var(--default-orange) / 0.9); }

/* Active-lead card used on dashboard — was hard-coded navy */
html:not(.dark) .active-lead .card {
  background: linear-gradient(135deg, hsl(var(--md-gradient-from)), hsl(var(--md-gradient-to))) !important;
  color: #fff !important;
  border: 0;
}

/* Dashboard table heading accent — was navy via .bg-theme */
html:not(.dark) .bg-theme {
  background-color: var(--default-orange-solid) !important;
}

/* Checkbox / radio primary marker */
html:not(.dark) .checked\:border-primary:checked {
  border-color: var(--default-orange-solid);
}
html:not(.dark) .before\:bg-primary::before {
  background-color: var(--default-orange-solid);
}

/* =====================================================
   TAILWIND BLUE/SKY/CYAN/INDIGO → MOTADATA ORANGE
   Remaps the utility classes that various pages use for
   buttons, badges, focus rings. Same selector specificity
   as the compiled Tailwind rule, later source order → wins
   without needing !important.
   ===================================================== */
html:not(.dark) .bg-blue-100,
html:not(.dark) .bg-sky-100 { background-color: hsl(var(--default-orange) / 0.12); }
html:not(.dark) .bg-blue-400,
html:not(.dark) .bg-blue-500,
html:not(.dark) .bg-blue-600,
html:not(.dark) .bg-blue-700,
html:not(.dark) .bg-sky-400,
html:not(.dark) .bg-sky-500,
html:not(.dark) .bg-sky-600,
html:not(.dark) .bg-cyan-500,
html:not(.dark) .bg-cyan-600,
html:not(.dark) .bg-indigo-500,
html:not(.dark) .bg-indigo-600 { background-color: var(--default-orange-solid); }

html:not(.dark) .bg-blue-500\/10,
html:not(.dark) .bg-blue-500\/15,
html:not(.dark) .bg-blue-500\/20 { background-color: hsl(var(--default-orange) / 0.15); }

html:not(.dark) .text-blue-200,
html:not(.dark) .text-blue-300 { color: hsl(var(--default-orange) / 0.7); }
html:not(.dark) .text-blue-400,
html:not(.dark) .text-blue-500,
html:not(.dark) .text-blue-600,
html:not(.dark) .text-blue-700,
html:not(.dark) .text-blue-800,
html:not(.dark) .text-sky-500,
html:not(.dark) .text-sky-600,
html:not(.dark) .text-cyan-500,
html:not(.dark) .text-cyan-600,
html:not(.dark) .text-indigo-500,
html:not(.dark) .text-indigo-600 { color: var(--default-orange-solid); }

html:not(.dark) .border-blue-400,
html:not(.dark) .border-blue-500,
html:not(.dark) .border-blue-600,
html:not(.dark) .border-sky-500,
html:not(.dark) .border-cyan-500,
html:not(.dark) .border-indigo-500 { border-color: var(--default-orange-solid); }

/* Hover variants */
html:not(.dark) .hover\:bg-blue-500:hover,
html:not(.dark) .hover\:bg-blue-600:hover,
html:not(.dark) .hover\:bg-blue-700:hover,
html:not(.dark) .hover\:bg-sky-500:hover,
html:not(.dark) .hover\:bg-sky-600:hover,
html:not(.dark) .hover\:bg-cyan-500:hover,
html:not(.dark) .hover\:bg-indigo-500:hover { background-color: var(--default-orange-solid); }
html:not(.dark) .hover\:bg-blue-500\/20:hover { background-color: hsl(var(--default-orange) / 0.20); }
html:not(.dark) .hover\:text-blue-500:hover,
html:not(.dark) .hover\:text-blue-600:hover,
html:not(.dark) .hover\:text-sky-500:hover { color: var(--default-orange-solid); }
html:not(.dark) .hover\:border-blue-500:hover,
html:not(.dark) .hover\:border-blue-600:hover { border-color: var(--default-orange-solid); }

/* Focus ring / focus border */
html:not(.dark) .focus\:ring-blue-500:focus,
html:not(.dark) .focus\:ring-sky-500:focus { --tw-ring-color: var(--default-orange-solid); }
html:not(.dark) .focus\:border-blue-500:focus,
html:not(.dark) .focus\:border-sky-500:focus { border-color: var(--default-orange-solid); }

/* Gradients commonly used on badges/CTAs */
html:not(.dark) .from-blue-500,
html:not(.dark) .from-sky-500 { --tw-gradient-from: var(--default-orange-solid) var(--tw-gradient-from-position); --tw-gradient-to: hsl(var(--default-orange) / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
html:not(.dark) .to-blue-500,
html:not(.dark) .to-sky-500 { --tw-gradient-to: var(--default-orange-solid) var(--tw-gradient-to-position); }
html:not(.dark) .to-blue-600 { --tw-gradient-to: var(--default-orange-dark) var(--tw-gradient-to-position); }

/* =====================================================
   UTILITY CLASSES (ported from web-app-next.js/globals.css)
   ===================================================== */

/* Gradient CTA — diagonal orange→pink */
.cta-gradient {
  background: linear-gradient(
    135deg,
    hsl(var(--md-gradient-from)),
    hsl(var(--md-gradient-to))
  );
}

/* Gradient text — foreground → orange → pink */
.hero-gradient-text {
  background: linear-gradient(
    135deg,
    hsl(var(--md-foreground)) 0%,
    hsl(var(--md-gradient-from)) 50%,
    hsl(var(--md-gradient-to)) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* Hover lift — 2px rise + soft warm shadow (web.motadata.com parity) */
.hover-lift {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow:
    0 12px 36px rgba(15, 23, 42, 0.07),
    0 4px 12px rgba(241, 116, 99, 0.08);
}

/* =====================================================
   SITE-WIDE HOVER AESTHETIC — mirror web.motadata.com:
   softer, wider blur, faint warm orange tint instead of
   Tailwind's hard grey drop shadow.
   ===================================================== */

/* Retune the compiled Tailwind shadow utilities used on hover */
html:not(.dark) .hover\:shadow-md:hover {
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05), 0 2px 6px rgba(241, 116, 99, 0.04);
}
html:not(.dark) .hover\:shadow-lg:hover {
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.07), 0 4px 12px rgba(241, 116, 99, 0.06);
}
html:not(.dark) .hover\:shadow-xl:hover {
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08), 0 6px 16px rgba(241, 116, 99, 0.07);
}

/* Gentle lift + warm shadow for any plain .card on hover — matches the
   subtle card animation on web.motadata.com without requiring every
   card markup to add hover-lift manually. Excludes already-gradient
   cards (active-lead) which have their own treatment. */
html:not(.dark) .card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
html:not(.dark) .card:hover:not(.no-hover) {
  transform: translateY(-1px);
  box-shadow:
    0 10px 28px rgba(15, 23, 42, 0.06),
    0 2px 8px rgba(241, 116, 99, 0.05);
}
/* active-lead gradient cards keep their own richer hover */
html:not(.dark) .active-lead .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(241, 116, 99, 0.35);
}

/* Buttons — warm, focused shadow on hover for bg-primary CTAs */
html:not(.dark) .btn.bg-primary:hover,
html:not(.dark) .hover\:bg-primary:hover {
  box-shadow: 0 8px 20px rgba(241, 116, 99, 0.28);
}

/* Feature-cell hover */
.feature-cell {
  transition: background-color 0.2s ease;
}
.feature-cell:hover {
  background-color: hsl(0 0% 97%);
}

/* Section divider — gradient line with diamond center */
.section-divider {
  position: relative;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    hsl(var(--md-border)) 20%,
    hsl(var(--default-orange) / 0.35) 50%,
    hsl(var(--md-border)) 80%,
    transparent 100%
  );
}
.section-divider::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 6px;
  height: 6px;
  background: hsl(var(--default-orange) / 0.5);
  border-radius: 1px;
}

/* Hero ambient glow — gentle breathing */
@keyframes md-ambient-glow {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.05); }
}
.hero-ambient-glow {
  animation: md-ambient-glow 5s ease-in-out infinite;
}

/* Shimmer label — gradient text sweep */
@keyframes md-shimmer-label {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
.shimmer-label {
  background: linear-gradient(
    90deg,
    hsl(var(--default-orange)) 0%,
    hsl(var(--default-orange) / 0.5) 40%,
    hsl(var(--default-orange)) 60%,
    hsl(var(--default-orange) / 0.5) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  animation: md-shimmer-label 3s ease-in-out infinite;
}

/* Glow pulse — soft attention ring */
@keyframes md-glow-pulse {
  0%, 100% {
    opacity: 0.5;
    box-shadow: 0 0 20px hsl(var(--default-orange) / 0.3);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 40px hsl(var(--default-orange) / 0.5);
  }
}
.glow-pulse {
  animation: md-glow-pulse 3s ease-in-out infinite;
}

/* Border glow */
@keyframes md-border-glow {
  0%, 100% {
    border-color: hsl(var(--md-border));
    box-shadow: 0 0 0 hsl(var(--default-orange) / 0);
  }
  50% {
    border-color: hsl(var(--default-orange) / 0.4);
    box-shadow: 0 0 20px hsl(var(--default-orange) / 0.2);
  }
}
.border-glow {
  animation: md-border-glow 4s ease-in-out infinite;
}

/* Shimmer sweep */
@keyframes md-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.animate-shimmer {
  animation: md-shimmer 2s ease-in-out infinite;
}

/* Gradient-shift */
@keyframes md-gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.gradient-shift {
  background-size: 200% 200%;
  animation: md-gradient-shift 8s ease infinite;
}

/* Marquee */
.marquee-wrap {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
}
@keyframes md-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: md-marquee 60s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }

/* =====================================================
   TABLES — web.motadata.com parity
   Retokenizes DataTables-style tables across the site.
   Target: .main-listing-table, any .table, DataTables wrappers.
   ===================================================== */
html:not(.dark) table.main-listing-table,
html:not(.dark) table.is-hoverable,
html:not(.dark) .dataTables_wrapper table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

/* Header row — soft slate surface, subtle orange accent on first/last cells */
html:not(.dark) table.main-listing-table thead th,
html:not(.dark) table.is-hoverable thead th,
html:not(.dark) .dataTables_wrapper table thead th {
  background-color: #f8fafc !important;      /* slate-50 */
  color: #475569 !important;                   /* slate-600 */
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 12px 16px !important;
  border: 0 !important;
  border-bottom: 1px solid #e2e8f0 !important; /* slate-200 */
}
html:not(.dark) table.main-listing-table thead tr:first-child th:first-child,
html:not(.dark) .dataTables_wrapper table thead tr:first-child th:first-child {
  border-top-left-radius: 12px;
}
html:not(.dark) table.main-listing-table thead tr:first-child th:last-child,
html:not(.dark) .dataTables_wrapper table thead tr:first-child th:last-child {
  border-top-right-radius: 12px;
}

/* Body cells */
html:not(.dark) table.main-listing-table tbody td,
html:not(.dark) table.is-hoverable tbody td,
html:not(.dark) .dataTables_wrapper table tbody td {
  padding: 14px 16px !important;
  font-size: 13.5px;
  color: #1e293b;                             /* slate-800 */
  border: 0 !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.6) !important;
  background: transparent !important;
}

/* Row hover */
html:not(.dark) table.main-listing-table tbody tr:hover td,
html:not(.dark) table.is-hoverable tbody tr:hover td,
html:not(.dark) .dataTables_wrapper table tbody tr:hover td {
  background-color: rgba(241, 116, 99, 0.05) !important;
}

/* Card wrapping table — remove hard borders if sitting inside a .card */
html:not(.dark) .card > .is-scrollbar-hidden table,
html:not(.dark) .card > .table-responsive table {
  border-radius: 12px;
  overflow: hidden;
}

/* =====================================================
   SEARCH BAR + DATATABLES SEARCH INPUT
   Matches web.motadata.com's pill-style search with left icon.
   ===================================================== */
html:not(.dark) .dataTables_filter label {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
  max-width: 320px;
}
html:not(.dark) .dataTables_filter input[type="search"],
html:not(.dark) .dataTables_filter input {
  height: 36px !important;
  width: 100% !important;
  border-radius: 10px !important;
  border: 1px solid #e2e8f0 !important;
  background-color: #fff !important;
  padding: 0 14px 0 34px !important;
  font-size: 13px !important;
  color: #0f172a !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  outline: 0 !important;
}
html:not(.dark) .dataTables_filter input:focus {
  border-color: hsl(var(--default-orange) / 0.6) !important;
  box-shadow: 0 0 0 3px hsl(var(--default-orange) / 0.15) !important;
}
html:not(.dark) .dataTables_filter input::placeholder {
  color: #94a3b8;                              /* slate-400 */
}
/* Inject search icon before the input */
html:not(.dark) .dataTables_filter label::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
}

/* Standalone search inputs commonly used across pages (named form-input.search or .search-input) */
html:not(.dark) input.form-input.search,
html:not(.dark) input[type="search"].form-input,
html:not(.dark) input.search-input {
  height: 36px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background-color: #fff;
  padding: 0 14px 0 34px;
  font-size: 13px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
html:not(.dark) input.form-input.search:focus,
html:not(.dark) input.search-input:focus {
  border-color: hsl(var(--default-orange) / 0.6);
  box-shadow: 0 0 0 3px hsl(var(--default-orange) / 0.15);
  outline: 0;
}

/* =====================================================
   FILTER PILLS — matches BlogFilters / FtGrid filter buttons
   Apply .md-filter-pill to an <a> or <button>.
   ===================================================== */
.md-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border-radius: 9999px;
  border: 1px solid #e2e8f0;
  background-color: #fff;
  color: #64748b;                              /* slate-500 */
  font-size: 12.5px;
  font-weight: 500;
  transition: all 0.15s ease;
  cursor: pointer;
}
.md-filter-pill:hover {
  border-color: #cbd5e1;
  color: #0f172a;
}
.md-filter-pill.is-active,
.md-filter-pill[aria-current="true"] {
  background-color: hsl(var(--default-orange));
  border-color: hsl(var(--default-orange));
  color: #fff;
}

/* =====================================================
   PAGE TITLES — hero + section variants
   ===================================================== */
.md-page-title {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #0f172a;
}
.md-section-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: hsl(var(--default-orange));
  margin-bottom: 8px;
}
.md-section-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #1e293b;
}
/* Orange accent bar next to section headings — same pattern as cta-gradient bars */
.md-section-heading::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 18px;
  border-radius: 2px;
  background: linear-gradient(180deg, hsl(var(--default-orange)), hsl(var(--md-gradient-to)));
}

/* =====================================================
   TITLE ICON BOX — matches web.motadata.com icon containers
   Usage: <span class="md-title-icon"><svg .../></span>
   ===================================================== */
.md-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background-color: hsl(var(--default-orange) / 0.10);
  color: hsl(var(--default-orange));
  transition: background-color 0.2s ease;
}
.md-title-icon.md-title-icon--lg {
  width: 48px;
  height: 48px;
  border-radius: 14px;
}
.group:hover .md-title-icon,
.md-title-icon:hover {
  background-color: hsl(var(--default-orange) / 0.18);
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .hero-ambient-glow,
  .shimmer-label,
  .glow-pulse,
  .border-glow,
  .animate-shimmer,
  .gradient-shift,
  .marquee-track {
    animation: none !important;
  }
  .hover-lift { transition: none; }
}

/* =====================================================
   MOTADATA PAGE BACKGROUND (web.motadata.com parity)
   -------------------------------------------------------------
   Source of truth: web-app-next.js/app/globals.css — the site
   body is plain white; orange only appears inside the cursor
   spotlight (InteractiveGrid).
   -------------------------------------------------------------
   body.motadata-bg    → interior authenticated pages: plain white
   body.motadata-login → login/hero: subtle ambient orbs (home-hero
                         analog), since that's where the marketing
                         site does use orange ambient glow.
   ===================================================== */
body.motadata-bg {
  background-color: #ffffff;
}
/* =====================================================
   DARK MODE — MASTER PALETTE (modern SaaS, Linear/Vercel/Stripe class)
   -------------------------------------------------------------
   Single source of truth for every dark surface in the app.
   Tweak these 12 tokens and the whole UI re-tones in one shot.

   Design rationale:
   - Body is a true near-black with the slightest warm undertone
     (`#0a0a0b`) — reads as "black" but feels less clinical than
     pure #000 on LCD.
   - Surface ladder is fully neutral gray — no blue tint — so the
     orange brand pops without fighting a slate undertone.
   - Borders use white-with-alpha (6% / 10% / 14%) — the modern
     SaaS hairline pattern (Linear, Vercel, GitHub primer dark).
   - Brand orange is reserved for accents (focus rings, selected
     state, primary CTA, glow shadows) — never as a large fill.
   ===================================================== */
html.dark {
  --md-dark-body:           #0a0a0b;
  --md-dark-surface-1:      #111114;   /* sidebar, header, top-bar */
  --md-dark-surface-2:      #16171a;   /* cards, table headings    */
  --md-dark-surface-3:      #1d1e22;   /* popovers, modals, inputs */
  --md-dark-surface-4:      #26272b;   /* hover state, divider     */
  --md-dark-surface-5:      #303136;   /* strong border, scrollbar */

  --md-dark-border-subtle:  rgba(255, 255, 255, 0.06);
  --md-dark-border-default: rgba(255, 255, 255, 0.10);
  --md-dark-border-strong:  rgba(255, 255, 255, 0.14);

  --md-dark-overlay-soft:   rgba(255, 255, 255, 0.04);
  --md-dark-overlay-medium: rgba(255, 255, 255, 0.08);

  --md-dark-text-primary:   #f4f4f5;
  --md-dark-text-secondary: #a1a1aa;
  --md-dark-text-muted:     #71717a;
}

html.dark body.motadata-bg,
html.dark #root {
  background-color: var(--md-dark-body) !important;
}

/* --- Tabler `navy-*` background → neutral gray ladder ---- */
html.dark .bg-navy-900,
html.dark .dark\:bg-navy-900 { background-color: var(--md-dark-body)      !important; }
html.dark .bg-navy-850,
html.dark .dark\:bg-navy-850 { background-color: var(--md-dark-surface-1) !important; }
html.dark .bg-navy-800,
html.dark .dark\:bg-navy-800 { background-color: var(--md-dark-surface-2) !important; }
html.dark .bg-navy-750,
html.dark .dark\:bg-navy-750 { background-color: var(--md-dark-surface-1) !important; }
html.dark .bg-navy-700,
html.dark .dark\:bg-navy-700 { background-color: var(--md-dark-surface-3) !important; }
html.dark .bg-navy-600,
html.dark .dark\:bg-navy-600 { background-color: var(--md-dark-surface-4) !important; }
html.dark .bg-navy-500,
html.dark .dark\:bg-navy-500 { background-color: var(--md-dark-surface-5) !important; }
html.dark .bg-navy-450,
html.dark .dark\:bg-navy-450 { background-color: var(--md-dark-surface-5) !important; }

/* `::before` pseudo-element used by `.header` for the blur underlay
   — Tabler emits `dark:before:bg-navy-750`. Catch both the literal
   class form and the actual pseudo so the LMS top-bar matches. */
html.dark .header::before,
html.dark .dark\:before\:bg-navy-750::before {
  background-color: var(--md-dark-surface-1) !important;
}

/* app.css line 642 forces header-container bg to slate-blue
   `rgba(34,46,69,0.8)` with !important AND high specificity
   (`.is-header-blur nav.header .header-container:is(.dark *)`).
   Beat it with same-or-higher specificity at root html.dark. */
html.dark .is-header-blur nav.header .header-container,
html.dark.is-header-blur nav.header .header-container {
  background-color: rgba(17, 17, 20, 0.85) !important;
}
html.dark nav.header,
html.dark nav.header:is(.dark *) {
  border-color: var(--md-dark-border-subtle) !important;
}

/* opacity variants — for backdrop blurs, sticky bars etc. */
html.dark .bg-navy-900\/90,
html.dark .dark\:bg-navy-900\/90 { background-color: rgba(10, 10, 11, 0.90) !important; }
html.dark .bg-navy-800\/90,
html.dark .dark\:bg-navy-800\/90 { background-color: rgba(22, 23, 26, 0.90) !important; }
html.dark .bg-navy-700\/90,
html.dark .dark\:bg-navy-700\/90 { background-color: rgba(29, 30, 34, 0.90) !important; }
html.dark .bg-navy-700\/80,
html.dark .dark\:bg-navy-700\/80 { background-color: rgba(29, 30, 34, 0.80) !important; }
html.dark .bg-navy-700\/70,
html.dark .dark\:bg-navy-700\/70 { background-color: rgba(29, 30, 34, 0.70) !important; }
html.dark .bg-navy-700\/50,
html.dark .dark\:bg-navy-700\/50 { background-color: rgba(29, 30, 34, 0.50) !important; }

/* --- Hover / focus / active states ---------------------- */
html.dark .hover\:bg-navy-700:hover,
html.dark .dark\:hover\:bg-navy-700:hover,
html.dark .focus\:bg-navy-700:focus,
html.dark .dark\:focus\:bg-navy-700:focus {
  background-color: var(--md-dark-surface-3) !important;
}
html.dark .hover\:bg-navy-600:hover,
html.dark .dark\:hover\:bg-navy-600:hover,
html.dark .focus\:bg-navy-600:focus,
html.dark .dark\:focus\:bg-navy-600:focus {
  background-color: var(--md-dark-surface-4) !important;
}
html.dark .hover\:bg-navy-500:hover,
html.dark .dark\:hover\:bg-navy-500:hover,
html.dark .focus\:bg-navy-500:focus,
html.dark .dark\:focus\:bg-navy-500:focus {
  background-color: var(--md-dark-surface-5) !important;
}
html.dark .hover\:bg-navy-450:hover,
html.dark .dark\:hover\:bg-navy-450:hover,
html.dark .focus\:bg-navy-450:focus,
html.dark .dark\:focus\:bg-navy-450:focus {
  background-color: var(--md-dark-surface-5) !important;
}
html.dark .active\:bg-navy-700\/90:active,
html.dark .dark\:active\:bg-navy-700\/90:active {
  background-color: rgba(29, 30, 34, 0.90) !important;
}
html.dark .active\:bg-navy-450\/90:active,
html.dark .dark\:active\:bg-navy-450\/90:active {
  background-color: rgba(48, 49, 54, 0.90) !important;
}

/* `bg-navy-300/20` is Tabler's translucent hover overlay.
   Use the standard SaaS white-alpha overlay instead. */
html.dark .bg-navy-300\/20,
html.dark .dark\:bg-navy-300\/20,
html.dark .hover\:bg-navy-300\/20:hover,
html.dark .dark\:hover\:bg-navy-300\/20:hover,
html.dark .focus\:bg-navy-300\/20:focus,
html.dark .dark\:focus\:bg-navy-300\/20:focus {
  background-color: var(--md-dark-overlay-medium) !important;
}
html.dark .active\:bg-navy-300\/25:active,
html.dark .dark\:active\:bg-navy-300\/25:active {
  background-color: var(--md-dark-overlay-medium) !important;
}

/* --- Borders → modern white-alpha hairlines ------------ */
html.dark .border-navy-800,
html.dark .dark\:border-navy-800,
html.dark .border-b-navy-800,
html.dark .dark\:border-b-navy-800 {
  border-color: var(--md-dark-border-subtle) !important;
}
html.dark .border-navy-700,
html.dark .dark\:border-navy-700,
html.dark .border-b-navy-700,
html.dark .dark\:border-b-navy-700 {
  border-color: var(--md-dark-border-subtle) !important;
}
html.dark .border-navy-600,
html.dark .dark\:border-navy-600,
html.dark .border-b-navy-600,
html.dark .dark\:border-b-navy-600 {
  border-color: var(--md-dark-border-default) !important;
}
html.dark .border-navy-500,
html.dark .dark\:border-navy-500,
html.dark .border-b-navy-500,
html.dark .dark\:border-b-navy-500 {
  border-color: var(--md-dark-border-default) !important;
}
html.dark .border-navy-450,
html.dark .dark\:border-navy-450 {
  border-color: var(--md-dark-border-strong) !important;
}

/* divide-* utilities (between table rows / list items) */
html.dark .divide-navy-500 > :not([hidden]) ~ :not([hidden]),
html.dark .dark\:divide-navy-500 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--md-dark-border-default) !important;
}
html.dark .divide-navy-600 > :not([hidden]) ~ :not([hidden]),
html.dark .dark\:divide-navy-600 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--md-dark-border-default) !important;
}

/* --- Cards: subtle border + lift, replaces template default
   (app.css `.card:is(.dark *)` forces #26334d navy — beat it) */
html.dark .card,
html.dark .card:is(.dark *) {
  background-color: var(--md-dark-surface-2) !important;
  border: 1px solid var(--md-dark-border-subtle) !important;
  color: var(--md-dark-text-primary) !important;
}

/* --- Select2 dark-mode comprehensive override -----------
   Plugin CSS sets white bg by default; Tabler app.css only
   handles borders. Map every Select2 surface to our palette. */
html.dark .select2-container--default .select2-selection--single,
html.dark .select2-container--default .select2-selection--multiple,
html.dark .select2-dropdown,
html.dark .select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: var(--md-dark-surface-3) !important;
  border-color: var(--md-dark-border-default) !important;
  color: var(--md-dark-text-primary) !important;
}
html.dark .select2-container--default .select2-selection--single .select2-selection__rendered,
html.dark .select2-container--default .select2-selection--multiple .select2-selection__rendered {
  color: var(--md-dark-text-primary) !important;
}
html.dark .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--md-dark-text-muted) !important;
}
html.dark .select2-results__option {
  background-color: transparent !important;
  color: var(--md-dark-text-primary);
}
html.dark .select2-container--default .select2-results__option--highlighted[aria-selected],
html.dark .select2-container--default .select2-results__option--highlighted {
  background-color: rgba(241, 116, 99, 0.12) !important;
  color: var(--md-dark-text-primary) !important;
}
html.dark .select2-container--default .select2-results__option--selected,
html.dark .select2-container--default .select2-results__option[aria-selected="true"],
html.dark .select2-container--default .select2-results__option[aria-selected=true],
html.dark .select2-results__option[aria-selected="true"],
html.dark .select2-results__option[aria-selected=true] {
  background-color: rgba(241, 116, 99, 0.18) !important;
  color: var(--md-dark-text-primary) !important;
}
/* Selected + highlighted (cursor on already-selected option) — strongest tint */
html.dark .select2-container--default .select2-results__option--selected.select2-results__option--highlighted,
html.dark .select2-container--default .select2-results__option[aria-selected="true"].select2-results__option--highlighted {
  background-color: rgba(241, 116, 99, 0.28) !important;
  color: #ffffff !important;
}
html.dark .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: rgba(241, 116, 99, 0.15) !important;
  border-color: rgba(241, 116, 99, 0.30) !important;
  color: var(--md-dark-text-primary) !important;
}
html.dark .select2-container--default.select2-container--focus .select2-selection--multiple,
html.dark .select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--default-orange-solid) !important;
}

/* =====================================================
   DARK MODE — PLUGIN COMPONENTS (master pass)
   Catches every navy hex still living inside app.css
   `:is(.dark *)` rules across plugin DOM. Mapped to the
   neutral surface ladder + orange accent.
   ===================================================== */

/* --- Tom-Select (.ts-control / .ts-dropdown / .ts-wrapper) */
html.dark .ts-control,
html.dark .ts-wrapper.single .ts-control,
html.dark .ts-wrapper.multi .ts-control {
  background-color: var(--md-dark-surface-3) !important;
  border-color: var(--md-dark-border-default) !important;
  color: var(--md-dark-text-primary) !important;
}
html.dark .ts-dropdown {
  background-color: var(--md-dark-surface-3) !important;
  border-color: var(--md-dark-border-default) !important;
  color: var(--md-dark-text-primary) !important;
}
html.dark .ts-dropdown .option:hover,
html.dark .ts-dropdown .active {
  background-color: rgba(241, 116, 99, 0.12) !important;
  color: var(--md-dark-text-primary) !important;
}
html.dark .ts-wrapper.multi .ts-control > div,
html.dark .ts-wrapper.multi .item {
  background-color: rgba(241, 116, 99, 0.15) !important;
  border-color: rgba(241, 116, 99, 0.30) !important;
  color: var(--md-dark-text-primary) !important;
}
html.dark .ts-wrapper.focus .ts-control,
html.dark .ts-wrapper.focus.input-active .ts-control {
  border-color: var(--default-orange-solid) !important;
}

/* --- Flatpickr Date Picker --------------------------- */
html.dark .flatpickr-calendar {
  background-color: var(--md-dark-surface-3) !important;
  border-color: var(--md-dark-border-default) !important;
  color: var(--md-dark-text-primary) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45) !important;
}
html.dark .flatpickr-calendar.arrowTop:before,
html.dark .flatpickr-calendar.arrowTop:after {
  border-bottom-color: var(--md-dark-surface-3) !important;
}
html.dark .flatpickr-calendar.arrowBottom:before,
html.dark .flatpickr-calendar.arrowBottom:after {
  border-top-color: var(--md-dark-surface-3) !important;
}
html.dark .flatpickr-months,
html.dark .flatpickr-innerContainer,
html.dark .flatpickr-rContainer {
  background-color: var(--md-dark-surface-3) !important;
}
html.dark .flatpickr-weekdays,
html.dark span.flatpickr-weekday {
  background-color: var(--md-dark-surface-3) !important;
  color: var(--md-dark-text-secondary) !important;
}
html.dark .flatpickr-day {
  color: var(--md-dark-text-primary) !important;
}
html.dark .flatpickr-day.flatpickr-disabled,
html.dark .flatpickr-day.prevMonthDay,
html.dark .flatpickr-day.nextMonthDay {
  color: var(--md-dark-text-muted) !important;
}
html.dark .flatpickr-day:hover,
html.dark .flatpickr-day.today:hover,
html.dark .flatpickr-day.prevMonthDay:hover,
html.dark .flatpickr-day.nextMonthDay:hover {
  background-color: rgba(241, 116, 99, 0.14) !important;
  border-color: rgba(241, 116, 99, 0.30) !important;
  color: var(--md-dark-text-primary) !important;
}
html.dark .flatpickr-day.selected,
html.dark .flatpickr-day.startRange,
html.dark .flatpickr-day.endRange,
html.dark .flatpickr-day.selected.inRange,
html.dark .flatpickr-day.startRange.inRange,
html.dark .flatpickr-day.endRange.inRange,
html.dark .flatpickr-day.selected:focus,
html.dark .flatpickr-day.startRange:focus,
html.dark .flatpickr-day.endRange:focus,
html.dark .flatpickr-day.selected:hover,
html.dark .flatpickr-day.startRange:hover,
html.dark .flatpickr-day.endRange:hover {
  background-color: var(--default-orange-solid) !important;
  border-color: var(--default-orange-solid) !important;
  color: #fff !important;
}
html.dark .flatpickr-day.inRange {
  background-color: rgba(241, 116, 99, 0.18) !important;
  border-color: rgba(241, 116, 99, 0.18) !important;
  box-shadow: -5px 0 0 rgba(241, 116, 99, 0.18), 5px 0 0 rgba(241, 116, 99, 0.18) !important;
}
html.dark .flatpickr-day.today {
  border-color: var(--default-orange-solid) !important;
}
html.dark .flatpickr-current-month .flatpickr-monthDropdown-months,
html.dark .flatpickr-current-month input.cur-year,
html.dark .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
  background-color: var(--md-dark-surface-3) !important;
  color: var(--md-dark-text-primary) !important;
}
html.dark .flatpickr-time input,
html.dark .flatpickr-time .flatpickr-am-pm {
  background-color: var(--md-dark-surface-3) !important;
  color: var(--md-dark-text-primary) !important;
}
html.dark .flatpickr-time input:hover,
html.dark .flatpickr-time .flatpickr-am-pm:hover {
  background-color: var(--md-dark-surface-4) !important;
}

/* --- Tippy Tooltips (default + primary theme) -------- */
html.dark .tippy-box {
  background-color: var(--md-dark-surface-4) !important;
  color: var(--md-dark-text-primary) !important;
}
html.dark .tippy-box[data-placement^="top"] > .tippy-arrow::before { border-top-color: var(--md-dark-surface-4) !important; }
html.dark .tippy-box[data-placement^="bottom"] > .tippy-arrow::before { border-bottom-color: var(--md-dark-surface-4) !important; }
html.dark .tippy-box[data-placement^="left"] > .tippy-arrow::before { border-left-color: var(--md-dark-surface-4) !important; }
html.dark .tippy-box[data-placement^="right"] > .tippy-arrow::before { border-right-color: var(--md-dark-surface-4) !important; }
html.dark .tippy-box[data-theme~="primary"] {
  background-color: var(--default-orange-solid) !important;
  color: #fff !important;
}
html.dark .tippy-box[data-theme~="primary"][data-placement^="top"] > .tippy-arrow::before { border-top-color: var(--default-orange-solid) !important; }
html.dark .tippy-box[data-theme~="primary"][data-placement^="bottom"] > .tippy-arrow::before { border-bottom-color: var(--default-orange-solid) !important; }
html.dark .tippy-box[data-theme~="primary"][data-placement^="left"] > .tippy-arrow::before { border-left-color: var(--default-orange-solid) !important; }
html.dark .tippy-box[data-theme~="primary"][data-placement^="right"] > .tippy-arrow::before { border-right-color: var(--default-orange-solid) !important; }

/* --- Quill Editor ----------------------------------- */
html.dark .ql-toolbar.ql-snow,
html.dark .ql-container.ql-snow {
  border-color: var(--md-dark-border-default) !important;
  background-color: var(--md-dark-surface-3) !important;
  color: var(--md-dark-text-primary) !important;
}
html.dark .ql-snow .ql-stroke { stroke: var(--md-dark-text-secondary) !important; }
html.dark .ql-snow .ql-fill   { fill: var(--md-dark-text-secondary) !important; }
html.dark .ql-snow .ql-picker-label,
html.dark .ql-snow .ql-picker-options {
  color: var(--md-dark-text-primary) !important;
  background-color: var(--md-dark-surface-3) !important;
  border-color: var(--md-dark-border-default) !important;
}
html.dark .ql-snow .ql-picker-item.ql-selected,
html.dark .ql-snow .ql-picker-label.ql-active,
html.dark .ql-snow .ql-toolbar button:hover .ql-stroke,
html.dark .ql-snow .ql-toolbar button.ql-active .ql-stroke {
  color: var(--default-orange-solid) !important;
  stroke: var(--default-orange-solid) !important;
}

/* --- Filepond File Upload --------------------------- */
html.dark .filepond--panel-root,
html.dark .filepond--drop-label,
html.dark .filepond--root,
html.dark .filepond--credits {
  background-color: var(--md-dark-surface-3) !important;
  border-color: var(--md-dark-border-default) !important;
  color: var(--md-dark-text-primary) !important;
}
html.dark .filepond--drop-label.filepond--drop-label label {
  color: var(--md-dark-text-secondary) !important;
}

/* --- ApexCharts ------------------------------------- */
html.dark .apexcharts-tooltip,
html.dark .apexcharts-tooltip.apexcharts-theme-light {
  background-color: var(--md-dark-surface-3) !important;
  border-color: var(--md-dark-border-default) !important;
  color: var(--md-dark-text-primary) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.40) !important;
}
html.dark .apexcharts-tooltip-title {
  background-color: var(--md-dark-surface-4) !important;
  border-color: var(--md-dark-border-default) !important;
  color: var(--md-dark-text-primary) !important;
}
html.dark .apexcharts-xaxistooltip,
html.dark .apexcharts-yaxistooltip {
  background-color: var(--md-dark-surface-4) !important;
  border-color: var(--md-dark-border-default) !important;
  color: var(--md-dark-text-primary) !important;
}
html.dark .apexcharts-xaxistooltip-bottom:before { border-bottom-color: var(--md-dark-border-default) !important; }
html.dark .apexcharts-xaxistooltip-bottom:after  { border-bottom-color: var(--md-dark-surface-4)     !important; }
html.dark .apexcharts-xaxistooltip-top:before    { border-top-color:    var(--md-dark-border-default) !important; }
html.dark .apexcharts-xaxistooltip-top:after     { border-top-color:    var(--md-dark-surface-4)     !important; }
html.dark .apexcharts-menu {
  background-color: var(--md-dark-surface-3) !important;
  border-color: var(--md-dark-border-default) !important;
  color: var(--md-dark-text-primary) !important;
}
html.dark .apexcharts-menu-item:hover {
  background-color: rgba(241, 116, 99, 0.12) !important;
}
html.dark .apexcharts-text,
html.dark .apexcharts-yaxis text,
html.dark .apexcharts-xaxis text,
html.dark .apexcharts-legend-text {
  fill: var(--md-dark-text-secondary) !important;
  color: var(--md-dark-text-secondary) !important;
}
html.dark .apexcharts-gridline {
  stroke: var(--md-dark-border-subtle) !important;
}

/* --- GridJS Tables ---------------------------------- */
html.dark .gridjs-wrapper,
html.dark .gridjs-container {
  background-color: var(--md-dark-surface-2) !important;
  color: var(--md-dark-text-primary) !important;
  border-color: var(--md-dark-border-default) !important;
}
html.dark .gridjs-table {
  background-color: transparent !important;
}
html.dark .gridjs-th {
  background-color: var(--md-dark-surface-1) !important;
  border-color: var(--md-dark-border-default) !important;
  color: var(--md-dark-text-primary) !important;
}
html.dark .gridjs-td {
  background-color: transparent !important;
  border-color: var(--md-dark-border-subtle) !important;
  color: var(--md-dark-text-primary) !important;
}
html.dark .gridjs-search-input,
html.dark .gridjs-input {
  background-color: var(--md-dark-surface-3) !important;
  border-color: var(--md-dark-border-default) !important;
  color: var(--md-dark-text-primary) !important;
}
html.dark .gridjs-search-input:focus,
html.dark .gridjs-input:focus {
  border-color: var(--default-orange-solid) !important;
}
html.dark .gridjs-pagination {
  color: var(--md-dark-text-secondary) !important;
}
html.dark .gridjs-pagination .gridjs-pages button {
  background-color: var(--md-dark-surface-3) !important;
  border-color: var(--md-dark-border-default) !important;
  color: var(--md-dark-text-primary) !important;
}
html.dark .gridjs-pagination .gridjs-pages button:hover:not(:disabled) {
  background-color: var(--md-dark-surface-4) !important;
}
html.dark .gridjs-pagination .gridjs-pages button.gridjs-currentPage {
  background-color: var(--default-orange-solid) !important;
  border-color: var(--default-orange-solid) !important;
  color: #fff !important;
}

/* --- Summernote -------------------------------------- */
html.dark .note-editor.note-frame,
html.dark .note-editor.note-airframe,
html.dark .note-toolbar,
html.dark .note-statusbar,
html.dark .note-editing-area,
html.dark .note-editable {
  background-color: var(--md-dark-surface-3) !important;
  border-color: var(--md-dark-border-default) !important;
  color: var(--md-dark-text-primary) !important;
}
html.dark .note-btn,
html.dark .note-btn-group .note-btn {
  background-color: transparent !important;
  border-color: var(--md-dark-border-default) !important;
  color: var(--md-dark-text-primary) !important;
}
html.dark .note-btn:hover,
html.dark .note-btn-group .note-btn:hover {
  background-color: rgba(241, 116, 99, 0.12) !important;
}

/* --- SweetAlert2 Modals ------------------------------ */
html.dark .swal2-popup,
html.dark div:where(.swal2-container) div:where(.swal2-popup) {
  background-color: var(--md-dark-surface-2) !important;
  color: var(--md-dark-text-primary) !important;
  border: 1px solid var(--md-dark-border-default);
}
html.dark .swal2-title,
html.dark div:where(.swal2-container) h2:where(.swal2-title) {
  color: var(--md-dark-text-primary) !important;
}
html.dark .swal2-html-container,
html.dark div:where(.swal2-container) .swal2-html-container {
  color: var(--md-dark-text-secondary) !important;
}
html.dark .swal2-input,
html.dark .swal2-textarea,
html.dark .swal2-select {
  background-color: var(--md-dark-surface-3) !important;
  border-color: var(--md-dark-border-default) !important;
  color: var(--md-dark-text-primary) !important;
}

/* --- Toastify --------------------------------------- */
html.dark .toastify {
  background: var(--md-dark-surface-3) !important;
  color: var(--md-dark-text-primary) !important;
  border: 1px solid var(--md-dark-border-default);
}

/* --- Form Range Sliders (input[type=range]) -------- */
html.dark input[type="range"]::-webkit-slider-runnable-track,
html.dark .form-range::-webkit-slider-runnable-track {
  background-color: var(--md-dark-surface-4) !important;
}
html.dark input[type="range"]::-moz-range-track,
html.dark .form-range::-moz-range-track {
  background-color: var(--md-dark-surface-4) !important;
}
html.dark input[type="range"]::-webkit-slider-thumb,
html.dark .form-range::-webkit-slider-thumb {
  background-color: var(--default-orange-solid) !important;
}
html.dark input[type="range"]::-moz-range-thumb,
html.dark .form-range::-moz-range-thumb {
  background-color: var(--default-orange-solid) !important;
}

/* --- Generic dropdown/popover/popper ---------------- */
html.dark .popper-box,
html.dark .popper-root .popper-box {
  background-color: var(--md-dark-surface-3) !important;
  border-color: var(--md-dark-border-default) !important;
  color: var(--md-dark-text-primary) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45) !important;
}

/* --- Modal (twt-modal) ------------------------------ */
html.dark .twt-modal,
html.dark .twt-modal-content,
html.dark .twt-modal-header,
html.dark .twt-modal-body,
html.dark .twt-modal-footer {
  background-color: var(--md-dark-surface-2) !important;
  border-color: var(--md-dark-border-default) !important;
  color: var(--md-dark-text-primary) !important;
}

/* --- Generic catch-all for hardcoded navy hex
   ANY remaining dark-mode rule in app.css that uses these
   exact hex codes will be visually neutralized at the var
   level by the surface ladder. As a final safety net,
   target known offenders directly: */
html.dark [style*="background-color:#26334d"],
html.dark [style*="background-color: #26334d"],
html.dark [style*="background-color:#202b40"],
html.dark [style*="background-color: #202b40"],
html.dark [style*="background-color:#222e45"],
html.dark [style*="background-color: #222e45"] {
  background-color: var(--md-dark-surface-2) !important;
}
html.dark [style*="background-color:#313e59"],
html.dark [style*="background-color: #313e59"],
html.dark [style*="background-color:#384766"],
html.dark [style*="background-color: #384766"] {
  background-color: var(--md-dark-surface-3) !important;
}
html.dark [style*="border-color:#465675"],
html.dark [style*="border-color: #465675"] {
  border-color: var(--md-dark-border-default) !important;
}

/* =====================================================
   DARK MODE — `bg-primary` / `text-primary` / `border-primary`
   These were previously scoped to `html:not(.dark)` only,
   leaving dark mode to fall back to Tabler navy `#114E80`.
   Map them to brand orange in dark too — sidebar active item,
   custom pagination current page, primary CTAs, etc.
   ===================================================== */
html.dark .bg-primary,
html.dark .dark\:bg-primary {
  background-color: var(--default-orange-solid) !important;
}
html.dark .bg-primary\/10  { background-color: hsl(var(--default-orange) / 0.10) !important; }
html.dark .bg-primary\/15  { background-color: hsl(var(--default-orange) / 0.15) !important; }
html.dark .bg-primary\/20  { background-color: hsl(var(--default-orange) / 0.20) !important; }
html.dark .bg-primary\/90  { background-color: hsl(var(--default-orange) / 0.90) !important; }

html.dark .text-primary,
html.dark .dark\:text-primary {
  color: var(--default-orange-solid) !important;
}
html.dark .border-primary,
html.dark .dark\:border-primary {
  border-color: var(--default-orange-solid) !important;
}
html.dark .ring-primary,
html.dark .dark\:ring-primary,
html.dark .ring-primary\/50 {
  --tw-ring-color: var(--default-orange-solid) !important;
}

/* hover/focus/active variants */
html.dark .hover\:bg-primary:hover,
html.dark .dark\:hover\:bg-primary:hover,
html.dark .focus\:bg-primary:focus,
html.dark .dark\:focus\:bg-primary:focus {
  background-color: var(--default-orange-solid) !important;
}
html.dark .hover\:bg-primary-focus:hover,
html.dark .focus\:bg-primary-focus:focus,
html.dark .dark\:hover\:bg-primary-focus:hover,
html.dark .dark\:focus\:bg-primary-focus:focus {
  background-color: var(--default-orange-dark) !important;
}
html.dark .active\:bg-primary\/90:active,
html.dark .dark\:active\:bg-primary\/90:active,
html.dark .active\:bg-primary-focus\/90:active {
  background-color: hsl(var(--default-orange) / 0.85) !important;
}
html.dark .hover\:text-primary:hover,
html.dark .dark\:hover\:text-primary:hover,
html.dark .focus\:text-primary:focus,
html.dark .dark\:focus\:text-primary:focus {
  color: var(--default-orange-solid) !important;
}
html.dark .checked\:border-primary:checked {
  border-color: var(--default-orange-solid) !important;
}
html.dark .before\:bg-primary::before {
  background-color: var(--default-orange-solid) !important;
}

/* =====================================================
   HOVER/FOCUS TEXT-WHITE WIN OVER text-accent !important
   When a button has `dark:text-accent-light` default and
   `dark:hover:bg-accent dark:hover:text-white` hover state,
   our `!important` on the default text color was blocking
   the hover white. Explicitly let hover/focus white win.
   ===================================================== */
html.dark .dark\:hover\:text-white:hover,
html.dark .hover\:text-white:hover,
html.dark .dark\:focus\:text-white:focus,
html.dark .focus\:text-white:focus,
html.dark .dark\:active\:text-white:active,
html.dark .active\:text-white:active {
  color: #ffffff !important;
}

/* =====================================================
   DataTables pagination — dark mode rebrand
   Plugin CSS forces #333 text + white→gray gradient bg
   with !important. Override with neutral surface-3 base,
   surface-4 hover, brand orange for the .current page.
   ===================================================== */
html.dark .dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--md-dark-text-secondary) !important;
  background: var(--md-dark-surface-3) !important;
  border: 1px solid var(--md-dark-border-default) !important;
  border-radius: 9999px !important;
  min-width: 2em !important;
}
html.dark .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  color: #ffffff !important;
  background: var(--md-dark-surface-4) !important;
  border-color: var(--md-dark-border-strong) !important;
  box-shadow: none !important;
}
html.dark .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html.dark .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  color: #ffffff !important;
  background: var(--default-orange-solid) !important;
  border-color: var(--default-orange-solid) !important;
}
html.dark .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
html.dark .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
html.dark .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
  color: var(--md-dark-text-muted) !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
html.dark .dataTables_wrapper .dataTables_info,
html.dark .dataTables_wrapper .dataTables_length,
html.dark .dataTables_wrapper .dataTables_filter,
html.dark .dataTables_wrapper .dataTables_paginate {
  color: var(--md-dark-text-secondary) !important;
}
/* Light-mode .current pill — keep brand orange (in case page
   doesn't already use markup that paints it orange). */
html:not(.dark) .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html:not(.dark) .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  color: #ffffff !important;
  background: var(--default-orange-solid) !important;
  border-color: var(--default-orange-solid) !important;
}

/* --- Active Lead / Lead Value: refined for new ladder --- */
html.dark .active-lead .card {
  background-color: var(--md-dark-surface-2) !important;
  background-image:
    linear-gradient(135deg, rgba(241, 116, 99, 0.10), rgba(230, 54, 115, 0.04)) !important;
  color: var(--md-dark-text-primary) !important;
  border: 1px solid rgba(241, 116, 99, 0.20) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 8px 24px rgba(0, 0, 0, 0.35),
    inset 3px 0 0 var(--default-orange-solid) !important;
}
html.dark .active-lead .card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 14px 36px rgba(0, 0, 0, 0.45),
    0 0 28px rgba(241, 116, 99, 0.20),
    inset 3px 0 0 var(--default-orange-solid) !important;
}

/* --- Form inputs / select / textarea ------------------- */
html.dark input.form-input,
html.dark textarea.form-textarea,
html.dark select.form-select {
  background-color: var(--md-dark-surface-3) !important;
  border-color: var(--md-dark-border-default) !important;
  color: var(--md-dark-text-primary);
}
html.dark input.form-input::placeholder,
html.dark textarea.form-textarea::placeholder {
  color: var(--md-dark-text-muted);
}
html.dark input.form-input:focus,
html.dark textarea.form-textarea:focus,
html.dark select.form-select:focus {
  border-color: var(--default-orange-solid) !important;
  box-shadow: 0 0 0 3px rgba(241, 116, 99, 0.15);
}

/* --- Modal backdrop ------------------------------------- */
html.dark .bg-slate-900\/60 {
  background-color: rgba(0, 0, 0, 0.60) !important;
}

/* --- Scrollbar --- (subtle, modern) -------------------- */
html.dark ::-webkit-scrollbar { width: 10px; height: 10px; }
html.dark ::-webkit-scrollbar-track { background: transparent; }
html.dark ::-webkit-scrollbar-thumb {
  background: var(--md-dark-surface-5);
  border-radius: 9999px;
  border: 2px solid var(--md-dark-body);
}
html.dark ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.18);
}

/* --- Selection highlight -------------------------------- */
html.dark ::selection {
  background-color: rgba(241, 116, 99, 0.35);
  color: #ffffff;
}

/* --- Table row hover — layered SaaS-grade brand treatment
   Replaces slate-blue (#313e59) hover with:
   • Smooth bg fade — soft warm tint, not a flat orange
   • Sliding left accent stripe (3px brand orange) — focus indicator
   • Faded horizontal gradient — light "spotlight from left edge"
   • Right-edge hairline — visual symmetry
   • 180ms ease transitions — feels alive, not jumpy
   ===================================================== */
html.dark table.is-hoverable > tbody > tr > td,
html.dark .gridjs-table > tbody > tr > td,
html:not(.dark) table.is-hoverable > tbody > tr > td,
html:not(.dark) .gridjs-table > tbody > tr > td {
  transition:
    background-color 0.18s ease,
    background-image 0.18s ease,
    box-shadow 0.18s ease;
}

/* DARK MODE — row hover: VS Code chat style — just a faint
   neutral white-alpha lift. No accent, no glow, no stripe. */
html.dark table.is-hoverable > tbody > tr:hover > td,
html.dark .gridjs-table > tbody > tr:hover > td {
  background-color: rgba(255, 255, 255, 0.045) !important;
  background-image: none !important;
  box-shadow: none !important;
}
/* Zebra striping (.is-zebra) — keep with same warm wash, stronger on hover */
html.dark table.is-zebra > tbody > tr:nth-child(2n) > td {
  background-color: rgba(255, 255, 255, 0.025) !important;
}

/* LIGHT MODE — softer halo, same shadow recipe */
html:not(.dark) table.is-hoverable > tbody > tr:hover > td,
html:not(.dark) .gridjs-table > tbody > tr:hover > td {
  background-color: rgba(241, 116, 99, 0.04) !important;
  background-image: none !important;
}
html:not(.dark) table.is-hoverable > tbody > tr:hover > td:first-child,
html:not(.dark) .gridjs-table > tbody > tr:hover > td:first-child {
  box-shadow:
    inset 3px 0 0 var(--default-orange-solid),
    -8px 0 20px -6px rgba(241, 116, 99, 0.30);
}
html:not(.dark) table.is-hoverable > tbody > tr:hover > td:not(:first-child):not(:last-child),
html:not(.dark) .gridjs-table > tbody > tr:hover > td:not(:first-child):not(:last-child) {
  box-shadow:
    0 -3px 14px -10px rgba(241, 116, 99, 0.22),
    0  3px 14px -10px rgba(241, 116, 99, 0.22);
}
html:not(.dark) table.is-hoverable > tbody > tr:hover > td:last-child,
html:not(.dark) .gridjs-table > tbody > tr:hover > td:last-child {
  box-shadow:
    inset -1px 0 0 rgba(241, 116, 99, 0.20),
    8px 0 20px -6px rgba(241, 116, 99, 0.25);
}
html:not(.dark) table.is-zebra > tbody > tr:nth-child(2n) > td {
  background-color: rgba(15, 23, 42, 0.025) !important;
}

/* SELECTED row (DataTables select extension) — fully bracketed
   in orange: stronger bg + left + right stripes for clarity. */
html.dark table.dataTable tbody tr.selected > td,
html.dark table.dataTable > tbody > tr.selected > td {
  background-color: rgba(241, 116, 99, 0.10) !important;
  background-image: linear-gradient(
    90deg,
    rgba(241, 116, 99, 0.18) 0%,
    rgba(241, 116, 99, 0.08) 50%,
    rgba(241, 116, 99, 0.04) 100%
  ) !important;
}
html.dark table.dataTable tbody tr.selected > td:first-child {
  box-shadow: inset 4px 0 0 var(--default-orange-solid);
}
html.dark table.dataTable tbody tr.selected > td:last-child {
  box-shadow: inset -3px 0 0 var(--default-orange-solid);
}
html:not(.dark) table.dataTable tbody tr.selected > td,
html:not(.dark) table.dataTable > tbody > tr.selected > td {
  background-color: rgba(241, 116, 99, 0.08) !important;
  background-image: linear-gradient(
    90deg,
    rgba(241, 116, 99, 0.14) 0%,
    rgba(241, 116, 99, 0.06) 50%,
    rgba(241, 116, 99, 0.03) 100%
  ) !important;
}
html:not(.dark) table.dataTable tbody tr.selected > td:first-child {
  box-shadow: inset 4px 0 0 var(--default-orange-solid);
}
html:not(.dark) table.dataTable tbody tr.selected > td:last-child {
  box-shadow: inset -3px 0 0 var(--default-orange-solid);
}

/* LOGIN / HERO only — subtle ambient glow, matches web.motadata.com hero */
body.motadata-login {
  position: relative;
  background-color: #ffffff;
}
html.dark body.motadata-login {
  background-color: #0b1220;
}
body.motadata-login::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(45% 55% at 15% 25%,  hsl(var(--default-orange) / 0.14), transparent 70%),
    radial-gradient(40% 50% at 90% 80%,  hsl(var(--md-gradient-to) / 0.10), transparent 70%);
}
html.dark body.motadata-login::before {
  background:
    radial-gradient(45% 55% at 15% 25%, hsl(var(--default-orange) / 0.25), transparent 70%),
    radial-gradient(40% 50% at 90% 80%, hsl(var(--md-gradient-to) / 0.20), transparent 70%),
    linear-gradient(135deg, #0b1220 0%, #111a2e 100%);
}

/* Login card on light background */
body.motadata-login .md-glass-card {
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow:
    0 10px 40px rgba(15, 23, 42, 0.08),
    0 4px 12px rgba(241, 116, 99, 0.08);
}
html.dark body.motadata-login .md-glass-card {
  background-color: rgba(20, 28, 48, 0.85);
  border-color: rgba(255, 255, 255, 0.1);
}

/* =====================================================
   DASHBOARD — stat card top accent bar
   ===================================================== */
.md-stat-card {
  position: relative;
  overflow: hidden;
}
.md-stat-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    hsl(var(--md-gradient-from)),
    hsl(var(--md-gradient-to))
  );
}

/* =====================================================
   PAGE-SCOPED LEGACY-COLOR OVERRIDES
   Catch hard-coded blue/navy (#114e80, #1f81bc, #3b82f6,
   #1180C4) that survives in inline styles or page-local
   <style> blocks across the LMS / course / lead views.
   ===================================================== */

/* Inline style="color:#114e80" — course-list "open in new" icon, etc. */
html:not(.dark) [style*="color:#114e80"],
html:not(.dark) [style*="color: #114e80"],
html:not(.dark) [style*="color:#114E80"],
html:not(.dark) [style*="color: #114E80"] {
  color: var(--default-orange-solid) !important;
}

/* Inline style="background-color:#1f81bc" — course creator avatar */
html:not(.dark) [style*="background-color:#1f81bc"],
html:not(.dark) [style*="background-color: #1f81bc"],
html:not(.dark) [style*="background-color:#1F81BC"],
html:not(.dark) [style*="background-color: #1F81BC"] {
  background-color: var(--default-orange-solid) !important;
}

/* LMS dashboard datepicker underline (page-local style block) */
html:not(.dark) #datepicker p {
  border-bottom-color: var(--default-orange-solid) !important;
}
html:not(.dark) #datepicker:hover p {
  border-bottom-color: var(--default-orange-dark) !important;
}
html.dark #datepicker p {
  border-bottom-color: hsl(var(--default-orange) / 0.7) !important;
}
html.dark #datepicker:hover p {
  border-bottom-color: var(--default-orange-solid) !important;
}

/* Course-create page action button + file selector button.
   Scoped via :not(...) to spare action-btns that already carry a
   Bootstrap semantic class (btn-success/info/danger/warning/primary)
   — those live in dropdown menus (partner table actions etc.) and
   should keep their semantic color, not turn into solid orange. */
html:not(.dark) .action-btn:not(.btn-success):not(.btn-info):not(.btn-danger):not(.btn-warning):not(.btn-primary) {
  background-color: var(--default-orange-solid) !important;
}
html:not(.dark) .action-btn:not(.btn-success):not(.btn-info):not(.btn-danger):not(.btn-warning):not(.btn-primary):hover {
  background-color: var(--default-orange-dark) !important;
}
/* Dropdown menu items (`.popper-box li a.action-btn`) — transparent
   default, hover lifts to subtle slate-100. */
html:not(.dark) .popper-box .action-btn,
html:not(.dark) .popper-box li .action-btn {
  background-color: transparent !important;
  color: rgb(51 65 85) !important; /* slate-700 */
}
html:not(.dark) .popper-box .action-btn:hover,
html:not(.dark) .popper-box li .action-btn:hover {
  background-color: rgb(241 245 249) !important; /* slate-100 */
  color: rgb(15 23 42) !important; /* slate-900 */
}
html.dark .popper-box .action-btn,
html.dark .popper-box li .action-btn {
  background-color: transparent !important;
  color: var(--md-dark-text-primary) !important;
}
html.dark .popper-box .action-btn:hover,
html.dark .popper-box li .action-btn:hover {
  background-color: var(--md-dark-surface-4) !important;
  color: #ffffff !important;
}
html:not(.dark) input[type="file"]::file-selector-button {
  background-color: var(--default-orange-solid) !important;
  color: #fff !important;
  border: 0;
}
html:not(.dark) input[type="file"]::file-selector-button:hover {
  background-color: var(--default-orange-dark) !important;
}

/* LMS dashboard inline .icon-wrapper override */
html:not(.dark) .icon-wrapper {
  color: var(--default-orange-solid) !important;
}

/* =====================================================
   LOADING SPINNER — brand "o" mark (app-logo.svg) gets
   a softer ease, larger size and an orange glow. The SVG
   itself was rebranded to the orange→pink gradient mark,
   so spin animation is inherited from app.css.
   ===================================================== */
.processing-logo {
  width: 72px;
  height: 72px;
  filter: drop-shadow(0 6px 16px rgba(241, 116, 99, 0.35));
  transform-origin: 50% 50%;
}
@media (prefers-reduced-motion: reduce) {
  .processing-logo {
    animation: md-spinner-pulse 2s ease-in-out infinite !important;
  }
  @keyframes md-spinner-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
  }
}

/* =====================================================
   DARK MODE — COMPREHENSIVE BRAND ALIGNMENT
   -------------------------------------------------------------
   Tabler-style template uses `accent` as the dark-mode primary
   (where `primary` is the light-mode primary). This block remaps
   the accent palette to a dusk-orange brand variant so dark UI
   feels at home with the orange brand without burning eyes.

   Base dark surfaces (navy-800 / navy-700) stay; orange used
   only as accent — borders, icon tiles, focus rings, badges,
   highlighted CTA — mirroring web.motadata.com dark mode.
   ===================================================== */

/* --- Accent palette → dusk orange ---------------------- */
html.dark .bg-accent,
html.dark .dark\:bg-accent {
  background-color: var(--default-orange-dark) !important;
}
html.dark .bg-accent\/90,
html.dark .dark\:bg-accent\/90 {
  background-color: hsl(var(--default-orange) / 0.85) !important;
}
html.dark .bg-accent\/80,
html.dark .dark\:bg-accent\/80 {
  background-color: hsl(var(--default-orange) / 0.75) !important;
}
html.dark .text-accent,
html.dark .dark\:text-accent,
html.dark .text-accent-light,
html.dark .dark\:text-accent-light {
  color: var(--default-orange-solid) !important;
}
html.dark .border-accent,
html.dark .dark\:border-accent {
  border-color: var(--default-orange-solid) !important;
}
html.dark .ring-accent,
html.dark .dark\:ring-accent {
  --tw-ring-color: var(--default-orange-solid) !important;
}

/* hover/focus/active accent variants */
html.dark .hover\:bg-accent:hover,
html.dark .dark\:hover\:bg-accent:hover,
html.dark .focus\:bg-accent:focus,
html.dark .dark\:focus\:bg-accent:focus {
  background-color: var(--default-orange-dark) !important;
}
html.dark .hover\:bg-accent-focus:hover,
html.dark .dark\:hover\:bg-accent-focus:hover,
html.dark .focus\:bg-accent-focus:focus,
html.dark .dark\:focus\:bg-accent-focus:focus {
  background-color: var(--default-orange-solid) !important;
}
html.dark .active\:bg-accent\/90:active,
html.dark .dark\:active\:bg-accent\/90:active {
  background-color: hsl(var(--default-orange) / 0.85) !important;
}
html.dark .hover\:text-accent:hover,
html.dark .dark\:hover\:text-accent:hover,
html.dark .focus\:text-accent:focus,
html.dark .dark\:focus\:text-accent:focus {
  color: var(--default-orange-solid) !important;
}
html.dark .hover\:shadow-accent\/50:hover,
html.dark .dark\:hover\:shadow-accent\/50:hover,
html.dark .focus\:shadow-accent\/50:focus,
html.dark .dark\:focus\:shadow-accent\/50:focus {
  box-shadow: 0 8px 22px hsl(var(--default-orange) / 0.40) !important;
}

/* --- Active Lead / Lead Value cards: dark variant ------ */
/* Light mode keeps the brand orange→pink gradient (defined
   earlier). Dark mode uses a flat slate surface with subtle
   orange-tinted shadow + left accent — so it reads as a
   premium tile without overpowering the dark UI. */
html.dark .active-lead .card {
  background: #1e293b !important; /* slate-800 */
  background-image:
    linear-gradient(135deg, rgba(241, 116, 99, 0.12), rgba(230, 54, 115, 0.06)),
    linear-gradient(#1e293b, #1e293b) !important;
  color: #f8fafc !important;
  border: 1px solid rgba(241, 116, 99, 0.20) !important;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.30),
    inset 4px 0 0 var(--default-orange-solid);
}
html.dark .active-lead .card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 10px 32px rgba(0, 0, 0, 0.40),
    0 0 24px rgba(241, 116, 99, 0.18),
    inset 4px 0 0 var(--default-orange-solid);
}

/* --- Inline-style legacy hex colors (dark mode equivalents)
   Earlier we mapped these for light mode. In dark, swap to
   orange-solid so SVG icons / borders / fills stay branded. */
html.dark [style*="color:#114e80"],
html.dark [style*="color: #114e80"],
html.dark [style*="color:#114E80"],
html.dark [style*="color: #114E80"],
html.dark [style*="color:#1180c4"],
html.dark [style*="color: #1180c4"],
html.dark [style*="color:#1180C4"],
html.dark [style*="color: #1180C4"],
html.dark [style*="color:#1f81bc"],
html.dark [style*="color: #1f81bc"],
html.dark [style*="color:#1F81BC"],
html.dark [style*="color: #1F81BC"] {
  color: var(--default-orange-solid) !important;
}
html.dark [style*="background-color:#114e80"],
html.dark [style*="background-color: #114e80"],
html.dark [style*="background-color:#114E80"],
html.dark [style*="background-color: #114E80"],
html.dark [style*="background-color:#1180c4"],
html.dark [style*="background-color: #1180c4"],
html.dark [style*="background-color:#1180C4"],
html.dark [style*="background-color: #1180C4"],
html.dark [style*="background-color:#1f81bc"],
html.dark [style*="background-color: #1f81bc"],
html.dark [style*="background-color:#1F81BC"],
html.dark [style*="background-color: #1F81BC"] {
  background-color: var(--default-orange-dark) !important;
}
html.dark [style*="border-left-color:#114e80"],
html.dark [style*="border-left-color: #114e80"],
html.dark [style*="border-left-color:#114E80"],
html.dark [style*="border-left-color: #114E80"],
html.dark [style*="border-left-color:#1180c4"],
html.dark [style*="border-left-color: #1180c4"],
html.dark [style*="border-left-color:#1180C4"],
html.dark [style*="border-left-color: #1180C4"] {
  border-left-color: var(--default-orange-solid) !important;
}
html.dark [style*="fill:#114e80"],
html.dark [style*="fill: #114e80"],
html.dark [style*="fill:#1180c4"],
html.dark [style*="fill: #1180c4"],
html.dark [style*="fill:#1180C4"],
html.dark [style*="fill: #1180C4"],
html.dark [style*="fill:#1f81bc"],
html.dark [style*="fill: #1f81bc"] {
  fill: var(--default-orange-solid) !important;
}

/* Light-mode counterparts for the additional hex variants
   (already had #114e80 + #1f81bc above — extending now to
   #1180c4 / #1180C4 used across LMS lesson/quiz pages). */
html:not(.dark) [style*="color:#1180c4"],
html:not(.dark) [style*="color: #1180c4"],
html:not(.dark) [style*="color:#1180C4"],
html:not(.dark) [style*="color: #1180C4"] {
  color: var(--default-orange-solid) !important;
}
html:not(.dark) [style*="background-color:#1180c4"],
html:not(.dark) [style*="background-color: #1180c4"],
html:not(.dark) [style*="background-color:#1180C4"],
html:not(.dark) [style*="background-color: #1180C4"] {
  background-color: var(--default-orange-solid) !important;
}
html:not(.dark) [style*="border-left-color:#1180c4"],
html:not(.dark) [style*="border-left-color: #1180c4"],
html:not(.dark) [style*="border-left-color:#1180C4"],
html:not(.dark) [style*="border-left-color: #1180C4"] {
  border-left-color: var(--default-orange-solid) !important;
}
html:not(.dark) [style*="fill:#1180c4"],
html:not(.dark) [style*="fill: #1180c4"],
html:not(.dark) [style*="fill:#1180C4"],
html:not(.dark) [style*="fill: #1180C4"] {
  fill: var(--default-orange-solid) !important;
}
html:not(.dark) [style*="border:1px solid #1180C4"],
html:not(.dark) [style*="border: 1px solid #1180C4"],
html:not(.dark) [style*="border:1px solid #1180c4"],
html:not(.dark) [style*="border: 1px solid #1180c4"] {
  border-color: var(--default-orange-solid) !important;
}
html.dark [style*="border:1px solid #1180C4"],
html.dark [style*="border: 1px solid #1180C4"],
html.dark [style*="border:1px solid #1180c4"],
html.dark [style*="border: 1px solid #1180c4"] {
  border-color: var(--default-orange-solid) !important;
}

/* --- Dashboard table heading dark accent --------------- */
/* `.bg-theme` was navy in the original template. Light mode
   already remapped to orange. Dark mode: dusk orange. */
html.dark .bg-theme {
  background-color: var(--default-orange-dark) !important;
}

/* --- Form focus rings + selection indicators ------------ */
/* Catch any remaining `focus:border-accent`, `peer-focus:text-accent`
   patterns Tabler emits across forms. */
html.dark .focus\:border-accent:focus,
html.dark .dark\:focus\:border-accent:focus,
html.dark .peer-focus\:text-accent,
html.dark .dark\:peer-focus\:text-accent,
html.dark .peer:focus ~ .dark\:peer-focus\:text-accent {
  border-color: var(--default-orange-solid) !important;
  color: var(--default-orange-solid) !important;
}

/* --- "from-accent" / "to-accent" gradient utilities ---- */
html.dark .from-accent,
html.dark .dark\:from-accent {
  --tw-gradient-from: var(--default-orange-solid) var(--tw-gradient-from-position);
  --tw-gradient-to: hsl(var(--default-orange) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html.dark .to-accent,
html.dark .dark\:to-accent {
  --tw-gradient-to: var(--default-orange-solid) var(--tw-gradient-to-position);
}