/**
 * ═══════════════════════════════════════════════════════════════
 * FutureCloud Design System v2.1
 * Perfex CRM — Professional SaaS Theme
 * Mode: Override & Enhance (Preserves Bootstrap 3 Base)
 * Philosophy: Linear Navigation × Stripe Tables × Vercel Cards × Notion Typography
 * ═══════════════════════════════════════════════════════════════
 */

/* ═══════════════════════════════════════════════════════════════
   SECTION 1: DESIGN TOKENS — CSS Custom Properties
   ═══════════════════════════════════════════════════════════════ */

:root,
[data-theme="light"] {
  /* Primary — Royal Blue (#2563eb) */
  --fc-primary-50: #eff6ff;
  --fc-primary-100: #dbeafe;
  --fc-primary-200: #bfdbfe;
  --fc-primary-300: #93c5fd;
  --fc-primary-400: #60a5fa;
  --fc-primary-500: #2563eb;
  --fc-primary-600: #1d4ed8;
  --fc-primary-700: #1e40af;
  --fc-primary-800: #1e3a8a;
  --fc-primary-900: #172554;

  /* Secondary — Violet (#7c3aed) */
  --fc-secondary-500: #7c3aed;
  --fc-secondary-600: #6d28d9;
  --fc-secondary-700: #5b21b6;

  /* Semantic */
  --fc-success-50: #ecfdf5;
  --fc-success-100: #d1fae5;
  --fc-success-500: #10b981;
  --fc-success-600: #059669;
  --fc-success-700: #047857;

  --fc-warning-50: #fffbeb;
  --fc-warning-100: #fef3c7;
  --fc-warning-500: #f59e0b;
  --fc-warning-600: #d97706;
  --fc-warning-700: #b45309;

  --fc-danger-50: #fef2f2;
  --fc-danger-100: #fee2e2;
  --fc-danger-400: #f87171;
  --fc-danger-500: #ef4444;
  --fc-danger-600: #dc2626;
  --fc-danger-700: #b91c1c;

  /* Neutral — Slate */
  --fc-neutral-50: #f8fafc;
  --fc-neutral-100: #f1f5f9;
  --fc-neutral-200: #e2e8f0;
  --fc-neutral-300: #cbd5e1;
  --fc-neutral-400: #94a3b8;
  --fc-neutral-500: #64748b;
  --fc-neutral-600: #475569;
  --fc-neutral-700: #334155;
  --fc-neutral-800: #1e293b;
  --fc-neutral-900: #0f172a;

  /* Surfaces */
  --fc-surface: #ffffff;
  --fc-surface-raised: #f8fafc;
  --fc-background: #f8fafc;
  --fc-overlay: rgba(15, 23, 42, 0.45);

  /* Text */
  --fc-text-primary: #0f172a;
  --fc-text-secondary: #334155;
  --fc-text-tertiary: #64748b;
  --fc-text-disabled: #94a3b8;
  --fc-text-inverse: #ffffff;

  /* Borders */
  --fc-border-default: #e2e8f0;
  --fc-border-hover: #cbd5e1;
  --fc-border-focus: #2563eb;
  --fc-border-error: #ef4444;
  --fc-border-divider: #f1f5f9;

  /* Shadows — Vercel Style (Very Subtle) */
  --fc-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --fc-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
  --fc-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.05);
  --fc-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.06);
  --fc-shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.08);
  --fc-shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.12);
  --fc-shadow-focus-danger: 0 0 0 3px rgba(239, 68, 68, 0.12);
  --fc-shadow-glow-primary: 0 4px 14px rgba(37, 99, 235, 0.22);
  --fc-shadow-glow-danger: 0 4px 14px rgba(239, 68, 68, 0.18);

  /* Radius — Professional CRM */
  --fc-radius-sm: 6px;
  --fc-radius-md: 8px;
  --fc-radius-lg: 10px;
  --fc-radius-xl: 12px;
  --fc-radius-2xl: 14px;
  --fc-radius-3xl: 18px;
  --fc-radius-full: 9999px;

  /* Spacing — 8-Point Grid */
  --fc-space-0: 0px;
  --fc-space-1: 4px;
  --fc-space-2: 8px;
  --fc-space-3: 12px;
  --fc-space-4: 16px;
  --fc-space-5: 20px;
  --fc-space-6: 24px;
  --fc-space-8: 32px;
  --fc-space-10: 40px;
  --fc-space-12: 48px;
  --fc-space-16: 64px;

  /* Typography */
  --fc-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fc-font-mono: "SF Mono", Monaco, "Cascadia Code", "Fira Code", Consolas, monospace;

  /* Layout */
  --fc-header-height: 64px;
  --fc-sidebar-width: 250px;
  --fc-content-max-width: 1440px;
  --fc-content-padding: 28px;

  /* Animation */
  --fc-duration-fast: 100ms;
  --fc-duration-normal: 150ms;
  --fc-duration-slow: 200ms;
  --fc-duration-slower: 300ms;
  --fc-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --fc-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE
   ═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --fc-surface: #1e293b;
  --fc-surface-raised: #334155;
  --fc-background: #0f172a;
  --fc-overlay: rgba(0, 0, 0, 0.6);

  --fc-text-primary: #f1f5f9;
  --fc-text-secondary: #cbd5e1;
  --fc-text-tertiary: #94a3b8;
  --fc-text-disabled: #64748b;
  --fc-text-inverse: #0f172a;

  --fc-border-default: #334155;
  --fc-border-hover: #475569;
  --fc-border-focus: #3b82f6;
  --fc-border-error: #ef4444;
  --fc-border-divider: #1e293b;

  --fc-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
  --fc-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25);
  --fc-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
  --fc-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.35);
  --fc-shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.4);
  --fc-shadow-focus: 0 0 0 3px rgba(59, 130, 246, 0.2);
  --fc-shadow-focus-danger: 0 0 0 3px rgba(239, 68, 68, 0.2);
  --fc-shadow-glow-primary: 0 4px 14px rgba(37, 99, 235, 0.35);
  --fc-shadow-glow-danger: 0 4px 14px rgba(239, 68, 68, 0.3);

  --fc-primary-50: #172554;
  --fc-primary-100: #1e3a8a;
  --fc-primary-200: #1e40af;
  --fc-primary-300: #1d4ed8;
  --fc-primary-400: #3b82f6;
  --fc-primary-500: #60a5fa;
  --fc-primary-600: #93c5fd;
  --fc-primary-700: #bfdbfe;

  --fc-success-50: #064e3b;
  --fc-success-500: #34d399;
  --fc-success-600: #6ee7b7;

  --fc-warning-50: #78350f;
  --fc-warning-500: #fbbf24;
  --fc-warning-600: #fcd34d;

  --fc-danger-50: #7f1d1d;
  --fc-danger-400: #fca5a5;
  --fc-danger-500: #f87171;
  --fc-danger-600: #fca5a5;

  /* Neutral palette — re-mapped for dark mode so every var(--fc-neutral-*)
     reference automatically renders a dark-appropriate color instead of the
     hard-coded light values defined in :root.
     50  → subtle hover lift  (slightly above surface)
     100 → primary surface    (same as --fc-surface)
     200 → raised surface     (same as --fc-surface-raised)
     300 → medium dark border
     400 stays the same — it's already mid-tone                          */
  --fc-neutral-50:  #263448;
  --fc-neutral-100: #1e293b;
  --fc-neutral-200: #334155;
  --fc-neutral-300: #475569;
  --fc-neutral-400: #64748b;
}

/* RTL Sidebar Accent */
[dir="rtl"] { --fc-sidebar-accent-pos: inset -3px 0 0 0 var(--fc-primary-500); }
[dir="ltr"] { --fc-sidebar-accent-pos: inset 3px 0 0 0 var(--fc-primary-500); }

/* ═══════════════════════════════════════════════════════════════
   SECTION 2: BASE RESETS
   ═══════════════════════════════════════════════════════════════ */
body,
html {
  font-family: var(--fc-font-sans) !important;
  color: var(--fc-text-primary);
  background: var(--fc-background) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body > * { font-size: 13.5px; }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--fc-font-sans);
  color: var(--fc-text-primary);
  letter-spacing: -0.01em;
}

h1, h2 { font-size: 24px; font-weight: 600 !important; }
h3 { font-size: 20px; font-weight: 600 !important; }
h4 { font-size: 18px; font-weight: 600 !important; }
h5 { font-size: 15px; font-weight: 600 !important; }

b, strong { font-weight: 600; }

label { font-weight: 500 !important; color: var(--fc-text-secondary); }
label.control-label { font-weight: 600 !important; }

a { color: var(--fc-primary-500); transition: color var(--fc-duration-normal) var(--fc-ease-default); }
a:hover, a:focus { color: var(--fc-primary-600); text-decoration: none; }

/* ═══════════════════════════════════════════════════════════════
   SECTION 3: HEADER (Clean, No Blur)
   ═══════════════════════════════════════════════════════════════ */
#header {
  background: rgba(255, 255, 255, 0.95) !important;
  border-bottom: 1px solid var(--fc-border-default) !important;
  box-shadow: none !important;
  height: var(--fc-header-height) !important;
  padding: 0 var(--fc-space-5);
  z-index: 1030;
}

[data-theme="dark"] #header {
  background: rgba(30, 41, 59, 0.95) !important;
  border-bottom-color: var(--fc-border-default) !important;
}

body.hide-sidebar #header,
body.page-small #header {
  margin-left: 0 !important;
}

@media (min-width: 769px) {
  #header { margin-left: var(--fc-sidebar-width) !important; }
  [dir="rtl"] #header { margin-left: 0 !important; margin-right: var(--fc-sidebar-width) !important; }
}

/* Navbar items */
.navbar-nav > li > a {
  color: var(--fc-neutral-500) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  height: var(--fc-header-height) !important;
  line-height: var(--fc-header-height) !important;
  font-weight: 500;
  font-size: 13.5px;
  border-radius: 0 !important;
  transition: color var(--fc-duration-normal) var(--fc-ease-default),
              background var(--fc-duration-normal) var(--fc-ease-default);
}

.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus,
.navbar-nav > .open > a,
.navbar-nav > .open > a:hover,
.navbar-nav > .open > a:focus {
  background: transparent !important;
  color: var(--fc-text-primary) !important;
}

#header li > a.active {
  color: var(--fc-primary-500) !important;
  background: var(--fc-primary-50) !important;
  border-radius: var(--fc-radius-full) !important;
  font-weight: 600;
}

[data-theme="dark"] #header li > a.active {
  background: var(--fc-primary-50) !important;
  color: var(--fc-primary-500) !important;
}

/* ───────────────────────────────────────────────────────────────
   NAVBAR ALIGNMENT FIX — All items on one straight horizontal line
   Every cluster (hamburger, logo, search, quick-create, right icons)
   is vertically centred so nothing sits high or low.
   ─────────────────────────────────────────────────────────────── */

/* 1. Header becomes a single flex row */
#header {
  display: flex !important;
  align-items: center !important;
}

/* 2. Hamburger button loses its float & stray top margin */
#header > button.hide-menu {
  float: none !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* 3. Nav fills the width and stays centred */
#header > nav {
  display: flex !important;
  align-items: center !important;
  flex: 1 1 auto !important;
  height: 100% !important;
  width: auto !important;
}

/* 4. Inner flex row (logo | search | icons) forced to one line */
#header nav > .tw-flex,
#header nav > .tw-flex.tw-justify-between {
  width: 100% !important;
  align-items: center !important;
}

/* 5. Every direct child cluster */
#header nav > .tw-flex > div,
#header nav > .tw-flex > ul {
  display: flex !important;
  align-items: center !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* 6. Top navbar lists (right icons + quick-create) — drop Bootstrap floats
      NOTE: some ul.navbar-nav are nested inside an inner .tw-flex div,
      so we use descendant selector instead of direct-child only. */
#header nav .tw-flex ul.navbar-nav,
#header nav > .tw-flex > ul.mobile-icon-menu {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#header nav .tw-flex ul.navbar-nav > li,
#header nav > .tw-flex > ul.mobile-icon-menu > li {
  float: none !important;
  display: flex !important;
  align-items: center !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* 7. Links inside the top row — strip old padding-based centre hack,
      keep full 57px hit-area, let flexbox do the centring */
#header nav .tw-flex ul.navbar-nav > li > a,
#header nav > .tw-flex > ul.mobile-icon-menu > li > a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 57px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 1 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* 8. Kill negative top margins on inner spans / icons / SVGs */
#header nav .tw-flex ul.navbar-nav > li > a > span:not([class*="tw-absolute"]),
#header nav .tw-flex ul.navbar-nav > li > a > i,
#header nav .tw-flex ul.navbar-nav > li > a > svg,
#header nav > .tw-flex > ul.mobile-icon-menu > li > a > span:not([class*="tw-absolute"]),
#header nav > .tw-flex > ul.mobile-icon-menu > li > a > i,
#header nav > .tw-flex > ul.mobile-icon-menu > li > a > svg {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  vertical-align: middle !important;
}

/* 9. Search cluster */
#header #top_search > #search_input {
  margin-top: 0 !important;
}
#header #top_search_button {
  top: 50% !important;
  transform: translateY(-50%) !important;
}
#header #top_search_button button {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* 10. Logo */
#header #logo {
  height: auto !important;
}

/* 11. Module-injected status icons (prchat green dot, etc.) */
#header #prchat-header-wrapper #chat_status_top_icon {
  height: 20px !important;
  width: 20px !important;
  vertical-align: middle !important;
}

/* 12. Override ultimate_green_theme absolute positioning on prchat icon */
#header #prchat-header-wrapper {
  position: relative !important;
  top: auto !important;
  margin-left: 0 !important;
  font-size: inherit !important;
  display: flex !important;
  align-items: center !important;
}

/* 13. Ensure Bootstrap tooltips are not clipped by the header or any flex container */
#header .tooltip,
#header + .tooltip,
body > .tooltip {
  z-index: 9999 !important;
}

/* Notification badge */
.navbar-nav > li a > .icon-total-indicator {
  background: var(--fc-danger-500) !important;
  color: #fff !important;
  border-radius: var(--fc-radius-full) !important;
  font-family: var(--fc-font-sans) !important;
  font-size: 10px !important;
  font-weight: 600;
  padding: 2px 6px !important;
  min-width: 18px;
  text-align: center;
  line-height: 14px;
  top: 12px !important;
}

/* Search dropdown */
ul.search-results {
  border-radius: 0 0 var(--fc-radius-xl) var(--fc-radius-xl) !important;
  box-shadow: var(--fc-shadow-lg) !important;
  border: 1px solid var(--fc-border-default) !important;
  border-top: 0 !important;
  background: var(--fc-surface) !important;
}

/* Mobile navbar */
.mobile-navbar {
  top: var(--fc-header-height) !important;
  background: var(--fc-surface) !important;
  border-bottom: 1px solid var(--fc-border-default) !important;
  box-shadow: var(--fc-shadow-sm) !important;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 4: SIDEBAR (#f8fafc — matches page background)
   ═══════════════════════════════════════════════════════════════ */
#menu,
.sidebar {
  width: var(--fc-sidebar-width) !important;
  background: var(--fc-background) !important;
  border-right: 1px solid var(--fc-border-default) !important;
  padding: var(--fc-space-3) var(--fc-space-2) !important;
  top: 0 !important;
  z-index: 1020;
}

/* Setup menu must appear above main sidebar */
#setup-menu-wrapper {
  z-index: 1025 !important;
}

[dir="rtl"] #menu,
[dir="rtl"] .sidebar {
  border-right: 0 !important;
  border-left: 1px solid var(--fc-border-default) !important;
}

/* Remove left border from menu items */
.sidebar > ul.nav > li { border-left: none !important; }
[dir="rtl"] .sidebar > ul.nav > li { border-right: none !important; }

/* Nav items */
.sidebar ul.nav li a {
  color: var(--fc-neutral-500) !important;
  padding: 9px 14px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  margin-top: 2px !important;
  border-radius: var(--fc-radius-lg) !important;
  border: none !important;
  transition: all var(--fc-duration-normal) var(--fc-ease-default);
  display: flex;
  align-items: center;
  gap: var(--fc-space-3);
}

.sidebar ul.nav li a i.menu-icon {
  color: var(--fc-neutral-400) !important;
  font-size: 17px !important;
  width: 20px !important;
  text-align: center;
  margin-right: 0 !important;
  float: none !important;
  display: inline-block !important;
  transition: color var(--fc-duration-normal) var(--fc-ease-default);
}

.sidebar ul.nav li a:hover,
.sidebar ul.nav li a:focus {
  background: rgba(37, 99, 235, 0.06) !important;
  color: var(--fc-text-primary) !important;
}

.sidebar ul.nav li a:hover i.menu-icon,
.sidebar ul.nav li a:focus i.menu-icon {
  color: var(--fc-neutral-600) !important;
}

/* Active sidebar item */
.sidebar > ul.nav > li:hover a:first-child,
.sidebar > ul.nav > li.active a:first-child {
  background: rgba(37, 99, 235, 0.1) !important;
  color: var(--fc-primary-500) !important;
  box-shadow: none !important;
  border: none !important;
  font-weight: 600 !important;
}

.sidebar > ul.nav > li.active a:first-child {
  box-shadow: var(--fc-sidebar-accent-pos) !important;
}

.sidebar > ul.nav > li.active a:first-child i.menu-icon,
.sidebar > ul.nav > li:hover a:first-child i.menu-icon {
  color: var(--fc-primary-500) !important;
}

/* Second level nav */
.sidebar ul.nav li .nav-second-level li a {
  padding: 7px 14px 7px 44px !important;
  color: var(--fc-neutral-500) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: var(--fc-radius-md) !important;
}

.sidebar ul.nav li .nav-second-level li a:hover {
  background: rgba(37, 99, 235, 0.05) !important;
  color: var(--fc-text-primary) !important;
}

.sidebar ul.nav li .nav-second-level li.active a {
  color: var(--fc-primary-500) !important;
  font-weight: 600 !important;
  background: rgba(37, 99, 235, 0.08) !important;
}

/* Setup menu */
#setup-menu-wrapper {
  background: var(--fc-background) !important;
  border-right: 1px solid var(--fc-border-default) !important;
}

#setup-menu > li:first-child {
  color: var(--fc-text-primary);
  border-bottom: 1px solid var(--fc-border-default);
  font-weight: 600;
  padding: var(--fc-space-3);
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 5: MAIN CONTENT & WRAPPER
   ═══════════════════════════════════════════════════════════════ */
#wrapper {
  margin-left: var(--fc-sidebar-width) !important;
  background: var(--fc-background) !important;
  min-height: 100vh;
}

[dir="rtl"] #wrapper {
  margin-left: 0 !important;
  margin-right: var(--fc-sidebar-width) !important;
}

body.hide-sidebar #wrapper,
body.page-small #wrapper {
  margin-left: 0 !important;
}

[dir="rtl"] body.hide-sidebar #wrapper,
[dir="rtl"] body.page-small #wrapper {
  margin-right: 0 !important;
}

.content {
  padding: var(--fc-content-padding) !important;
  min-width: 320px;
}

@media (max-width: 768px) {
  .content { padding: var(--fc-space-4) !important; }
  #wrapper { margin-left: 0 !important; }
  [dir="rtl"] #wrapper { margin-right: 0 !important; }
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 6: CARDS / PANELS (18px radius)
   ═══════════════════════════════════════════════════════════════ */
.panel_s,
.panel {
  background: var(--fc-surface) !important;
  border-radius: var(--fc-radius-3xl) !important;
  border: 1px solid var(--fc-border-default) !important;
  box-shadow: var(--fc-shadow-sm) !important;
  margin-bottom: var(--fc-space-5) !important;
  overflow: hidden;
  transition: box-shadow var(--fc-duration-slow) var(--fc-ease-default);
}

.panel_s:hover,
.panel:hover {
  box-shadow: var(--fc-shadow-md) !important;
}

.panel_s .panel-body,
.panel .panel-body {
  padding: var(--fc-space-5) !important;
}

.panel_s .panel-heading,
.panel .panel-heading {
  background: var(--fc-surface) !important;
  border-bottom: 1px solid var(--fc-border-divider) !important;
  padding: var(--fc-space-4) var(--fc-space-5) !important;
  font-weight: 600;
  color: var(--fc-text-primary);
  font-size: 15px;
  border-radius: var(--fc-radius-3xl) var(--fc-radius-3xl) 0 0 !important;
}

.panel_s .panel-heading .panel-title {
  font-weight: 600;
  font-size: 15px;
}

.panel_s .panel-footer,
.panel .panel-footer {
  background: var(--fc-surface) !important;
  border-top: 1px solid var(--fc-border-divider) !important;
  padding: var(--fc-space-4) var(--fc-space-5) !important;
  border-radius: 0 0 var(--fc-radius-3xl) var(--fc-radius-3xl) !important;
}

/* Dashboard top stats */
.top_stats_wrapper {
  background: var(--fc-surface) !important;
  border-radius: var(--fc-radius-3xl) !important;
  box-shadow: var(--fc-shadow-sm) !important;
  border: 1px solid var(--fc-border-default) !important;
  padding: var(--fc-space-5) !important;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 7: BUTTONS (10px radius)
   ═══════════════════════════════════════════════════════════════ */
.btn,
button.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--fc-space-2);
  padding: 9px 16px !important;
  font-family: var(--fc-font-sans) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  border-radius: var(--fc-radius-lg) !important;
  border: none !important;
  cursor: pointer;
  transition: all var(--fc-duration-normal) var(--fc-ease-default) !important;
  outline: none !important;
  position: relative;
  white-space: nowrap;
  text-shadow: none !important;
  box-shadow: none !important;
}

.btn:active,
.btn:focus,
.btn:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Primary — #2563eb */
.btn-primary,
.btn-info {
  background: var(--fc-primary-500) !important;
  color: #fff !important;
  border-color: var(--fc-primary-500) !important;
}

.btn-primary:hover,
.btn-info:hover {
  background: var(--fc-primary-600) !important;
  border-color: var(--fc-primary-600) !important;
  box-shadow: var(--fc-shadow-glow-primary) !important;
  transform: translateY(-1px);
}

.btn-primary:active,
.btn-info:active {
  background: var(--fc-primary-700) !important;
  border-color: var(--fc-primary-700) !important;
  transform: translateY(0);
  box-shadow: none !important;
}

.btn-primary:focus-visible {
  box-shadow: var(--fc-shadow-focus) !important;
}

/* Success */
.btn-success {
  background: var(--fc-success-500) !important;
  color: #fff !important;
  border-color: var(--fc-success-500) !important;
}

.btn-success:hover {
  background: var(--fc-success-600) !important;
  border-color: var(--fc-success-600) !important;
  transform: translateY(-1px);
}

.btn-success:active {
  background: var(--fc-success-700) !important;
  border-color: var(--fc-success-700) !important;
  transform: translateY(0);
}

/* Danger */
.btn-danger {
  background: var(--fc-danger-500) !important;
  color: #fff !important;
  border-color: var(--fc-danger-500) !important;
}

.btn-danger:hover {
  background: var(--fc-danger-600) !important;
  border-color: var(--fc-danger-600) !important;
  box-shadow: var(--fc-shadow-glow-danger) !important;
  transform: translateY(-1px);
}

.btn-danger:active {
  background: var(--fc-danger-700) !important;
  border-color: var(--fc-danger-700) !important;
  transform: translateY(0);
  box-shadow: none !important;
}

.btn-danger:focus-visible {
  box-shadow: var(--fc-shadow-focus-danger) !important;
}

/* Default / Secondary */
.btn-default {
  background: var(--fc-neutral-100) !important;
  color: var(--fc-text-secondary) !important;
  border: 1px solid var(--fc-border-default) !important;
}

.btn-default:hover {
  background: var(--fc-neutral-200) !important;
  color: var(--fc-text-primary) !important;
  border-color: var(--fc-border-hover) !important;
}

/* Warning */
.btn-warning {
  background: var(--fc-warning-500) !important;
  color: #fff !important;
  border-color: var(--fc-warning-500) !important;
}

.btn-warning:hover {
  background: var(--fc-warning-600) !important;
  border-color: var(--fc-warning-600) !important;
  transform: translateY(-1px);
}

/* Disabled */
.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
  background: var(--fc-neutral-100) !important;
  color: var(--fc-text-disabled) !important;
  border-color: var(--fc-border-default) !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Button sizes */
.btn-sm { padding: 7px 12px !important; font-size: 12.5px !important; border-radius: var(--fc-radius-md) !important; }
.btn-lg { padding: 12px 22px !important; font-size: 14.5px !important; border-radius: var(--fc-radius-xl) !important; }
.btn-xs { padding: 5px 9px !important; font-size: 12px !important; border-radius: var(--fc-radius-md) !important; }

/* Button groups */
.btn-group > .btn:first-child { border-radius: var(--fc-radius-lg) 0 0 var(--fc-radius-lg) !important; }
.btn-group > .btn:last-child { border-radius: 0 var(--fc-radius-lg) var(--fc-radius-lg) 0 !important; }
.btn-group > .btn:not(:first-child):not(:last-child) { border-radius: 0 !important; }

[dir="rtl"] .btn-group > .btn:first-child { border-radius: 0 var(--fc-radius-lg) var(--fc-radius-lg) 0 !important; }
[dir="rtl"] .btn-group > .btn:last-child { border-radius: var(--fc-radius-lg) 0 0 var(--fc-radius-lg) !important; }

/* ═══════════════════════════════════════════════════════════════
   SECTION 8: FORMS & INPUTS (12px radius)
   ═══════════════════════════════════════════════════════════════ */
.form-control,
input.form-control,
select.form-control,
textarea.form-control {
  width: 100%;
  padding: 10px 14px !important;
  font-family: var(--fc-font-sans) !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  color: var(--fc-text-primary) !important;
  background: var(--fc-surface) !important;
  border: 1px solid var(--fc-neutral-300) !important;
  border-radius: var(--fc-radius-xl) !important;
  transition: all var(--fc-duration-normal) var(--fc-ease-default);
  outline: none !important;
  box-shadow: none !important;
  height: auto !important;
}

.form-control:hover {
  border-color: var(--fc-neutral-400) !important;
}

.form-control:focus,
.form-control:active {
  border-color: var(--fc-primary-500) !important;
  box-shadow: var(--fc-shadow-focus) !important;
  background: var(--fc-surface) !important;
}

.form-control::placeholder {
  color: var(--fc-text-tertiary) !important;
  opacity: 1;
}

.form-control:disabled,
.form-control[disabled] {
  background: var(--fc-neutral-100) !important;
  color: var(--fc-text-disabled) !important;
  border-color: var(--fc-border-default) !important;
  cursor: not-allowed !important;
}

/* Input groups */
.input-group-addon {
  background: var(--fc-neutral-100) !important;
  border: 1px solid var(--fc-neutral-300) !important;
  color: var(--fc-text-tertiary) !important;
  border-radius: var(--fc-radius-xl) !important;
  padding: 10px 12px !important;
  font-size: 13.5px !important;
}

/* LTR: first-child = LEFT element → round LEFT corners, remove RIGHT border */
.input-group .form-control:first-child,
.input-group-addon:first-child {
  border-radius: var(--fc-radius-xl) 0 0 var(--fc-radius-xl) !important;
  border-right: 0 !important;
}

/* LTR: last-child = RIGHT element → round RIGHT corners, remove LEFT border */
.input-group .form-control:last-child,
.input-group-addon:last-child {
  border-radius: 0 var(--fc-radius-xl) var(--fc-radius-xl) 0 !important;
  border-left: 0 !important;
}

/* RTL: first-child is visually on the RIGHT → round RIGHT corners */
[dir="rtl"] .input-group .form-control:first-child,
[dir="rtl"] .input-group-addon:first-child {
  border-radius: 0 var(--fc-radius-xl) var(--fc-radius-xl) 0 !important;
  border-right: 1px solid var(--fc-neutral-300) !important;
  border-left: 0 !important;
}

/* RTL: last-child is visually on the LEFT → round LEFT corners */
[dir="rtl"] .input-group .form-control:last-child,
[dir="rtl"] .input-group-addon:last-child {
  border-radius: var(--fc-radius-xl) 0 0 var(--fc-radius-xl) !important;
  border-left: 1px solid var(--fc-neutral-300) !important;
  border-right: 0 !important;
}

/* ───────────────────────────────────────────────────────────────
   Input-group BUTTONS (search button + addon buttons)
   The button wrapper (.input-group-btn) must match the field corners,
   otherwise the button looks detached / reversed next to the input.
   ─────────────────────────────────────────────────────────────── */

/* Reset btn corners inside input-groups so the radius is driven by side */
.input-group-btn > .btn {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* LTR: button on the RIGHT (last-child) → round RIGHT corners */
.input-group-btn:last-child > .btn {
  border-radius: 0 var(--fc-radius-xl) var(--fc-radius-xl) 0 !important;
  border-left: 0 !important;
}
/* LTR: button on the LEFT (first-child) → round LEFT corners */
.input-group-btn:first-child > .btn {
  border-radius: var(--fc-radius-xl) 0 0 var(--fc-radius-xl) !important;
  border-right: 0 !important;
}

/* RTL: first-child is visually on the RIGHT → round RIGHT corners */
[dir="rtl"] .input-group-btn:first-child > .btn {
  border-radius: 0 var(--fc-radius-xl) var(--fc-radius-xl) 0 !important;
  border-right: 0 !important;
  border-left: 0 !important;
}
/* RTL: last-child is visually on the LEFT → round LEFT corners */
[dir="rtl"] .input-group-btn:last-child > .btn {
  border-radius: var(--fc-radius-xl) 0 0 var(--fc-radius-xl) !important;
  border-left: 0 !important;
  border-right: 0 !important;
}

/* When a field sits between two buttons, keep its inner edges square */
.input-group-btn:first-child + .form-control,
.input-group .form-control:not(:first-child):not(:last-child),
.input-group-addon:not(:first-child):not(:last-child) {
  border-radius: 0 !important;
}

/* Bootstrap Select */
.bootstrap-select > .dropdown-toggle {
  border-radius: var(--fc-radius-xl) !important;
  border: 1px solid var(--fc-neutral-300) !important;
  padding: 10px 14px !important;
  font-size: 13.5px !important;
  background: var(--fc-surface) !important;
  color: var(--fc-text-primary) !important;
  box-shadow: none !important;
}

.bootstrap-select > .dropdown-toggle:hover,
.bootstrap-select > .dropdown-toggle:focus {
  border-color: var(--fc-primary-500) !important;
  box-shadow: var(--fc-shadow-focus) !important;
  background: var(--fc-surface) !important;
  color: var(--fc-text-primary) !important;
  outline: none !important;
}

.bootstrap-select .dropdown-menu {
  border-radius: var(--fc-radius-xl) !important;
  border: 1px solid var(--fc-border-default) !important;
  box-shadow: var(--fc-shadow-lg) !important;
  padding: var(--fc-space-2) !important;
  background: var(--fc-surface) !important;
}

.bootstrap-select .dropdown-menu li a {
  border-radius: var(--fc-radius-md) !important;
  padding: 8px 12px !important;
  font-size: 13.5px !important;
  color: var(--fc-text-secondary) !important;
  transition: all var(--fc-duration-fast) var(--fc-ease-default);
}

.bootstrap-select .dropdown-menu li a:hover {
  background: var(--fc-neutral-100) !important;
  color: var(--fc-text-primary) !important;
}

.bootstrap-select .dropdown-menu li.selected a {
  background: var(--fc-primary-50) !important;
  color: var(--fc-primary-500) !important;
  font-weight: 500;
}

/* Datepicker & Colorpicker */
.datepicker.dropdown-menu,
.colorpicker.dropdown-menu {
  border-radius: var(--fc-radius-xl) !important;
  border: 1px solid var(--fc-border-default) !important;
  box-shadow: var(--fc-shadow-lg) !important;
  padding: var(--fc-space-3) !important;
  background: var(--fc-surface) !important;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 9: TABLES (18px container radius)
   ═══════════════════════════════════════════════════════════════ */
table.table,
.table {
  margin-top: 0 !important;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13.5px;
}

/* Table in a card-like container */
table.table.items,
.dataTable,
table.dt-table {
  border-radius: var(--fc-radius-3xl) !important;
  overflow: hidden;
  border: 1px solid var(--fc-border-default) !important;
  background: var(--fc-surface) !important;
  box-shadow: var(--fc-shadow-sm) !important;
}

.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th {
  padding: 14px 18px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fc-text-tertiary) !important;
  background: var(--fc-neutral-50) !important;
  border-bottom: 1px solid var(--fc-border-default) !important;
  border-top: none !important;
  white-space: nowrap;
  vertical-align: middle;
}

.table > tbody > tr > td {
  padding: 14px 18px !important;
  color: var(--fc-text-secondary) !important;
  border-bottom: 1px solid var(--fc-border-divider) !important;
  border-top: none !important;
  vertical-align: middle;
  transition: background var(--fc-duration-fast) var(--fc-ease-default);
}

.table > tbody > tr:hover > td {
  background: var(--fc-neutral-50) !important;
}

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

/* Remove side borders */
.table > thead > tr > th:first-child,
.table > tbody > tr > td:first-child,
.table > thead > tr > th:last-child,
.table > tbody > tr > td:last-child {
  border-left: none !important;
  border-right: none !important;
}

/* Items table */
.table.items thead {
  background: var(--fc-neutral-50) !important;
  color: var(--fc-text-tertiary) !important;
}

.table.items thead th {
  border-right: none !important;
  border-left: none !important;
  border-top: none !important;
}

.table.items tbody > tr > td,
.table.items thead > tr > th {
  padding: 12px 14px !important;
}

.table.items .main {
  background-color: var(--fc-neutral-50) !important;
  border-right: none !important;
  border-left: none !important;
  border-bottom: 1px solid var(--fc-border-divider) !important;
}

/* DataTables */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  border-radius: var(--fc-radius-xl) !important;
  border: 1px solid var(--fc-neutral-300) !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  background: var(--fc-surface) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--fc-radius-md) !important;
  padding: 6px 12px !important;
  margin: 0 2px !important;
  border: none !important;
  background: transparent !important;
  color: var(--fc-text-secondary) !important;
  transition: all var(--fc-duration-fast) var(--fc-ease-default);
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--fc-neutral-100) !important;
  color: var(--fc-text-primary) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--fc-primary-500) !important;
  color: #fff !important;
  font-weight: 500;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  color: var(--fc-text-disabled) !important;
  background: transparent !important;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 10: BADGES & LABELS (Pill)
   ═══════════════════════════════════════════════════════════════ */
.label,
.badge {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  padding: 4px 10px !important;
  border-radius: var(--fc-radius-full) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  font-family: var(--fc-font-sans) !important;
  line-height: 1.3 !important;
  border: none !important;
  text-shadow: none !important;
}

.label-tag {
  border-radius: var(--fc-radius-sm) !important;
  padding: 3px 8px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}

.label-primary,
.label-info,
.badge-primary,
.badge-info {
  background: var(--fc-primary-50) !important;
  color: var(--fc-primary-500) !important;
}

.label-success,
.badge-success {
  background: var(--fc-success-50) !important;
  color: var(--fc-success-500) !important;
}

.label-warning,
.badge-warning {
  background: var(--fc-warning-50) !important;
  color: var(--fc-warning-500) !important;
}

.label-danger,
.badge-danger {
  background: var(--fc-danger-50) !important;
  color: var(--fc-danger-500) !important;
}

.label-default {
  background: var(--fc-neutral-100) !important;
  color: var(--fc-neutral-600) !important;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 11: ALERTS
   ═══════════════════════════════════════════════════════════════ */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--fc-space-3);
  padding: var(--fc-space-4) !important;
  border-radius: var(--fc-radius-2xl) !important;
  font-size: 13.5px;
  line-height: 1.5;
  border: 1px solid transparent !important;
}

.alert-success {
  background: var(--fc-success-50) !important;
  color: var(--fc-success-700) !important;
  border-color: rgba(16, 185, 129, 0.2) !important;
}

.alert-info {
  background: var(--fc-primary-50) !important;
  color: var(--fc-primary-700) !important;
  border-color: rgba(37, 99, 235, 0.2) !important;
}

.alert-warning {
  background: var(--fc-warning-50) !important;
  color: var(--fc-warning-700) !important;
  border-color: rgba(245, 158, 11, 0.2) !important;
}

.alert-danger {
  background: var(--fc-danger-50) !important;
  color: var(--fc-danger-700) !important;
  border-color: rgba(239, 68, 68, 0.2) !important;
}

.alert .close {
  opacity: 0.5;
  transition: opacity var(--fc-duration-fast) var(--fc-ease-default);
  padding: 0 !important;
  top: auto !important;
  right: auto !important;
  position: relative !important;
  color: inherit !important;
}

.alert .close:hover {
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 12: MODALS (18px radius)
   ═══════════════════════════════════════════════════════════════ */
.modal-content {
  border-radius: var(--fc-radius-3xl) !important;
  border: 1px solid var(--fc-border-default) !important;
  box-shadow: var(--fc-shadow-xl) !important;
  overflow: hidden;
  background: var(--fc-surface) !important;
}

.modal-header {
  padding: var(--fc-space-5) var(--fc-space-6) !important;
  border-bottom: 1px solid var(--fc-border-divider) !important;
  background: var(--fc-surface) !important;
}

.modal-header .modal-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--fc-text-primary) !important;
}

.modal-header .close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--fc-radius-md);
  border: none;
  background: transparent;
  color: var(--fc-text-tertiary);
  font-size: 18px;
  opacity: 1;
  transition: all var(--fc-duration-normal) var(--fc-ease-default);
  margin-top: 0 !important;
  padding: 0 !important;
}

.modal-header .close:hover {
  background: var(--fc-neutral-100);
  color: var(--fc-text-primary);
}

.modal-body {
  padding: var(--fc-space-6) !important;
}

.modal-footer {
  padding: var(--fc-space-4) var(--fc-space-6) !important;
  border-top: 1px solid var(--fc-border-divider) !important;
  background: var(--fc-surface) !important;
  display: flex;
  justify-content: flex-end;
  gap: var(--fc-space-3);
}

.modal-footer .btn + .btn {
  margin-left: 0 !important;
}

.modal-backdrop.in {
  background: var(--fc-overlay) !important;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 13: DROPDOWNS (14px radius)
   ═══════════════════════════════════════════════════════════════ */
.dropdown-menu {
  border-radius: var(--fc-radius-2xl) !important;
  border: 1px solid var(--fc-border-default) !important;
  box-shadow: var(--fc-shadow-lg) !important;
  padding: var(--fc-space-2) !important;
  margin-top: 6px !important;
  min-width: 200px;
  background: var(--fc-surface) !important;
}

.dropdown-menu > li > a {
  padding: 8px 14px !important;
  border-radius: var(--fc-radius-md) !important;
  color: var(--fc-text-secondary) !important;
  font-size: 13.5px;
  transition: all var(--fc-duration-fast) var(--fc-ease-default);
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background: var(--fc-neutral-100) !important;
  color: var(--fc-text-primary) !important;
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  background: var(--fc-primary-50) !important;
  color: var(--fc-primary-500) !important;
  font-weight: 500;
}

.dropdown-menu .divider {
  height: 1px;
  background: var(--fc-border-divider) !important;
  margin: var(--fc-space-2) var(--fc-space-1) !important;
}

.navbar-nav > li > .dropdown-menu {
  border-top-left-radius: var(--fc-radius-2xl) !important;
  border-top-right-radius: var(--fc-radius-2xl) !important;
  border-top: 1px solid var(--fc-border-default) !important;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 14: TABS & NAV PILLS
   ═══════════════════════════════════════════════════════════════ */
.nav-tabs {
  border-bottom: 1px solid var(--fc-border-default) !important;
  margin-bottom: var(--fc-space-4);
}

.nav-tabs > li > a {
  border: none !important;
  border-bottom: 2px solid transparent !important;
  color: var(--fc-text-tertiary) !important;
  font-weight: 500;
  font-size: 13.5px;
  padding: 12px 18px !important;
  margin-right: 4px;
  border-radius: var(--fc-radius-md) var(--fc-radius-md) 0 0 !important;
  transition: all var(--fc-duration-normal) var(--fc-ease-default);
}

.nav-tabs > li > a:hover {
  background: var(--fc-neutral-50) !important;
  color: var(--fc-text-secondary) !important;
  border-bottom-color: var(--fc-border-hover) !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: var(--fc-primary-500) !important;
  background: transparent !important;
  border-bottom-color: var(--fc-primary-500) !important;
  font-weight: 600;
}

.nav-pills > li > a {
  border-radius: var(--fc-radius-md) !important;
  padding: 8px 16px !important;
  color: var(--fc-text-secondary) !important;
  font-weight: 500;
  transition: all var(--fc-duration-normal) var(--fc-ease-default);
}

.nav-pills > li > a:hover {
  background: var(--fc-neutral-100) !important;
  color: var(--fc-text-primary) !important;
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  background: var(--fc-primary-500) !important;
  color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 15: PAGINATION
   ═══════════════════════════════════════════════════════════════ */
.pagination > li > a,
.pagination > li > span {
  border: none !important;
  border-radius: var(--fc-radius-md) !important;
  color: var(--fc-text-secondary) !important;
  font-weight: 500;
  font-size: 13.5px;
  padding: 8px 14px !important;
  margin: 0 2px;
  background: transparent !important;
  transition: all var(--fc-duration-fast) var(--fc-ease-default);
}

.pagination > li > a:hover,
.pagination > li > span:hover {
  background: var(--fc-neutral-100) !important;
  color: var(--fc-text-primary) !important;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover {
  background: var(--fc-primary-500) !important;
  color: #fff !important;
  font-weight: 500;
}

.pagination > .disabled > a,
.pagination > .disabled > span {
  color: var(--fc-text-disabled) !important;
  background: transparent !important;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 16: PROGRESS BARS
   ═══════════════════════════════════════════════════════════════ */
.progress {
  height: 8px !important;
  background: var(--fc-neutral-200) !important;
  border-radius: var(--fc-radius-full) !important;
  box-shadow: none !important;
  overflow: hidden;
}

.progress-bar {
  border-radius: var(--fc-radius-full) !important;
  background: var(--fc-primary-500) !important;
  box-shadow: none !important;
  transition: width var(--fc-duration-slower) var(--fc-ease-default);
}

.progress-bar-success { background: var(--fc-success-500) !important; }
.progress-bar-warning { background: var(--fc-warning-500) !important; }
.progress-bar-danger { background: var(--fc-danger-500) !important; }

/* ═══════════════════════════════════════════════════════════════
   SECTION 17: TOOLTIPS & POPOVERS
   ═══════════════════════════════════════════════════════════════ */
.tooltip > .tooltip-inner {
  background: var(--fc-neutral-800) !important;
  color: #fff !important;
  border-radius: var(--fc-radius-md) !important;
  padding: 7px 12px !important;
  font-size: 12px !important;
  font-weight: 500;
  box-shadow: var(--fc-shadow-md) !important;
}

.tooltip-arrow { border-top-color: var(--fc-neutral-800) !important; }

.popover {
  border-radius: var(--fc-radius-2xl) !important;
  border: 1px solid var(--fc-border-default) !important;
  box-shadow: var(--fc-shadow-lg) !important;
  padding: 0 !important;
  background: var(--fc-surface) !important;
}

.popover-title {
  background: var(--fc-neutral-50) !important;
  border-bottom: 1px solid var(--fc-border-divider) !important;
  border-radius: var(--fc-radius-2xl) var(--fc-radius-2xl) 0 0 !important;
  padding: var(--fc-space-4) var(--fc-space-5) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--fc-text-primary) !important;
}

.popover-content {
  padding: var(--fc-space-4) var(--fc-space-5) !important;
  font-size: 13.5px;
  color: var(--fc-text-secondary);
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 18: KANBAN BOARD
   ═══════════════════════════════════════════════════════════════ */
.kan-ban-content {
  background: var(--fc-neutral-100) !important;
  padding: var(--fc-space-3) !important;
  border-radius: var(--fc-radius-2xl) !important;
}

.kan-ban-col {
  width: 320px !important;
  margin-right: var(--fc-space-3) !important;
}

.kan-ban-col:last-child { margin-right: 0 !important; }

.kan-ban-col-wrapper .panel_s:first-child {
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
}

#kan-ban .panel-body {
  background: var(--fc-surface) !important;
  border-radius: var(--fc-radius-xl) !important;
  box-shadow: var(--fc-shadow-sm) !important;
  border: 1px solid var(--fc-border-default) !important;
  padding: var(--fc-space-4) !important;
  margin: var(--fc-space-2) var(--fc-space-1) !important;
  transition: box-shadow var(--fc-duration-normal) var(--fc-ease-default),
              transform var(--fc-duration-normal) var(--fc-ease-default);
}

#kan-ban .panel-body:hover {
  box-shadow: var(--fc-shadow-md) !important;
  transform: translateY(-2px);
}

li.task.current-user-task .panel-body,
li.lead-kan-ban.current-user-lead .panel-body {
  background: var(--fc-primary-50) !important;
  border: 1px solid rgba(37, 99, 235, 0.15) !important;
}

li.task.overdue-task .panel-body {
  background: var(--fc-danger-50) !important;
  border: 1px solid rgba(239, 68, 68, 0.15) !important;
}

.kan-ban-expand-top {
  background: var(--fc-neutral-50) !important;
  border-radius: 0 var(--fc-radius-xl) 0 0 !important;
  font-size: 11px;
  padding: 4px 8px !important;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 19: FOOTER
   ═══════════════════════════════════════════════════════════════ */
footer {
  background: var(--fc-surface) !important;
  border-top: 1px solid var(--fc-border-default) !important;
  padding: var(--fc-space-4) var(--fc-space-6) !important;
  height: auto !important;
  margin-top: auto !important;
  color: var(--fc-text-tertiary) !important;
  font-size: 12.5px;
}

footer a {
  color: var(--fc-text-tertiary) !important;
  transition: color var(--fc-duration-normal) var(--fc-ease-default);
}

footer a:hover { color: var(--fc-primary-500) !important; }

/* ═══════════════════════════════════════════════════════════════
   SECTION 20: MISC COMPONENTS
   ═══════════════════════════════════════════════════════════════ */

/* Activity feed */
.activity-feed .feed-item {
  border-left-color: var(--fc-border-default) !important;
  padding-bottom: var(--fc-space-6) !important;
}

.activity-feed .feed-item:after {
  background: var(--fc-surface) !important;
  border-color: var(--fc-neutral-400) !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: var(--fc-radius-full) !important;
  left: -5.5px !important;
}

.activity-feed .feed-item .date {
  color: var(--fc-text-tertiary) !important;
  font-size: 11px !important;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.activity-feed .feed-item .text {
  color: var(--fc-text-secondary) !important;
}

/* Email template heading */
.email-template-heading {
  background: var(--fc-neutral-50) !important;
  border: 1px solid var(--fc-border-default) !important;
  border-radius: var(--fc-radius-xl) !important;
  font-size: 14px !important;
  font-weight: 600;
  padding: 12px 16px !important;
  margin-bottom: var(--fc-space-4);
}

/* Checklist */
.checklist {
  border-radius: var(--fc-radius-lg) !important;
  padding: var(--fc-space-3) var(--fc-space-4) !important;
  transition: background var(--fc-duration-normal) var(--fc-ease-default);
}

.checklist:hover { background: var(--fc-neutral-100) !important; }

/* Task modal */
.task-modal-single .modal-body {
  background: var(--fc-background) !important;
  border-radius: 0 0 var(--fc-radius-3xl) var(--fc-radius-3xl) !important;
}

.task-single-col-right {
  background: var(--fc-neutral-50) !important;
  border-left: 1px solid var(--fc-border-default) !important;
  border-radius: 0 0 var(--fc-radius-3xl) 0 !important;
}

.task-single-col-left {
  background: var(--fc-surface) !important;
  border-radius: 0 0 0 var(--fc-radius-3xl) !important;
}

/* Highlight */
.highlight-bg {
  background: var(--fc-primary-50) !important;
  border: 1px solid rgba(37, 99, 235, 0.1) !important;
  border-radius: var(--fc-radius-lg) !important;
}

/* jQuery comments */
.jquery-comments .textarea-wrapper .textarea {
  border-radius: var(--fc-radius-lg) !important;
  border: 1px solid var(--fc-neutral-300) !important;
  background: var(--fc-surface) !important;
}

.jquery-comments .textarea-wrapper .textarea:focus,
.jquery-comments .textarea-wrapper .textarea:active {
  border-color: var(--fc-primary-500) !important;
  box-shadow: var(--fc-shadow-focus) !important;
}

.jquery-comments .textarea-wrapper .control-row > span {
  border-radius: var(--fc-radius-md) !important;
  background: var(--fc-primary-500) !important;
  color: #fff !important;
  font-weight: 500;
  transition: all var(--fc-duration-normal) var(--fc-ease-default);
}

.jquery-comments .textarea-wrapper .control-row > span:hover {
  background: var(--fc-primary-600) !important;
}

/* TinyMCE */
.mce-container.mce-panel {
  border-radius: var(--fc-radius-lg) !important;
  border: 1px solid var(--fc-border-default) !important;
  overflow: hidden;
}

/* File attachments */
.task-attachment,
.project-file-image {
  border-radius: var(--fc-radius-lg) !important;
  border: 1px solid var(--fc-border-default) !important;
}

/* Newsfeed */
#newsfeed { background: var(--fc-background) !important; }

#newsfeed .newsfeed_post .post-content {
  font-size: 14px;
  line-height: 1.6;
}

#newsfeed .newsfeed_post .post-comment.panel-footer,
#newsfeed .newsfeed_post .post-likes.panel-footer {
  background: var(--fc-neutral-50) !important;
  border: 1px solid var(--fc-border-default) !important;
  border-radius: var(--fc-radius-md) var(--fc-radius-md) 0 0 !important;
  color: var(--fc-text-secondary) !important;
}

#newsfeed .newsfeed_post.pinned > .panel-body {
  background: var(--fc-primary-50) !important;
  border: 1px dashed rgba(37, 99, 235, 0.3) !important;
}

/* Calendar */
.fc-event {
  border-radius: var(--fc-radius-sm) !important;
  padding: 6px 10px !important;
  font-size: 11.5px !important;
  font-weight: 500;
  border: none !important;
}

/* Note */
.note {
  background: var(--fc-warning-50) !important;
  color: var(--fc-warning-700) !important;
  border: 1px solid rgba(245, 158, 11, 0.2) !important;
  border-radius: var(--fc-radius-md) !important;
  padding: 10px 14px !important;
}

/* Toplink / Botlink */
#toplink, #botlink {
  background: var(--fc-surface) !important;
  border: 1px solid var(--fc-border-default) !important;
  border-radius: var(--fc-radius-lg) var(--fc-radius-lg) 0 0 !important;
  color: var(--fc-text-tertiary) !important;
  transition: all var(--fc-duration-normal) var(--fc-ease-default);
}

#toplink:hover, #botlink:hover {
  background: var(--fc-neutral-100) !important;
  color: var(--fc-text-primary) !important;
}

/* Mobile menu */
.mobile-navbar {
  background: var(--fc-surface) !important;
  border-bottom: 1px solid var(--fc-border-default) !important;
}

.mobile-navbar .navbar-nav > li > a {
  color: var(--fc-text-secondary) !important;
  border-bottom: 1px solid var(--fc-border-divider) !important;
  padding: 12px 16px !important;
  font-size: 14px;
  font-weight: 500;
}

/* System popup */
.system-popup { background: var(--fc-background) !important; }
.system-popup .popup-message {
  font-family: var(--fc-font-sans) !important;
  font-weight: 700 !important;
  color: var(--fc-text-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 21: ANIMATIONS & UTILITIES
   ═══════════════════════════════════════════════════════════════ */
@keyframes fc-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fc-slide-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.fc-animate-fade {
  animation: fc-fade-in var(--fc-duration-slower) var(--fc-ease-default);
}

.fc-animate-slide-up {
  animation: fc-slide-up var(--fc-duration-slower) var(--fc-ease-bounce);
}

html { scroll-behavior: smooth; }

::selection {
  background: var(--fc-primary-200);
  color: var(--fc-primary-900);
}

*:focus-visible {
  outline: none;
  box-shadow: var(--fc-shadow-focus);
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--fc-neutral-300);
  border-radius: var(--fc-radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--fc-neutral-400);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 22: RESPONSIVE OVERRIDES
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  #header {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .content { padding: var(--fc-space-4) !important; }
  .panel_s .panel-body { padding: var(--fc-space-4) !important; }
  .table > thead > tr > th,
  .table > tbody > tr > td { padding: 12px 14px !important; }
  .btn { padding: 10px 16px !important; }
  .btn-bottom-toolbar {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    padding: var(--fc-space-3) var(--fc-space-4) !important;
  }
  .panel_s { border-radius: var(--fc-radius-xl) !important; }
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 23: DARK MODE FIXES
   Overrides for elements that don't naturally follow data-theme
   ═══════════════════════════════════════════════════════════════ */

[data-theme="dark"] body,
[data-theme="dark"] #wrapper,
[data-theme="dark"] .content {
  background: var(--fc-background) !important;
  color: var(--fc-text-primary) !important;
}

/* Force all widgets to use dark surface */
[data-theme="dark"] .widget,
[data-theme="dark"] .panel_s,
[data-theme="dark"] .panel,
[data-theme="dark"] .top_stats_wrapper,
[data-theme="dark"] .fc-card,
[data-theme="dark"] .card {
  background: var(--fc-surface) !important;
  border-color: var(--fc-border-default) !important;
  color: var(--fc-text-primary) !important;
}

[data-theme="dark"] .panel-body,
[data-theme="dark"] .panel-heading,
[data-theme="dark"] .panel-footer,
[data-theme="dark"] .panel_s .panel-body,
[data-theme="dark"] .panel_s .panel-heading,
[data-theme="dark"] .panel_s .panel-footer {
  background: var(--fc-surface) !important;
  color: var(--fc-text-primary) !important;
  border-color: var(--fc-border-divider) !important;
}

/* Fix all neutral text colors in dark mode */
[data-theme="dark"] .tw-text-neutral-800,
[data-theme="dark"] .text-neutral-800,
[data-theme="dark"] .tw-text-neutral-700,
[data-theme="dark"] .text-neutral-700,
[data-theme="dark"] .tw-text-neutral-600,
[data-theme="dark"] .text-neutral-600 {
  color: var(--fc-text-primary) !important;
}

[data-theme="dark"] .tw-text-neutral-500,
[data-theme="dark"] .text-neutral-500,
[data-theme="dark"] .tw-text-neutral-400,
[data-theme="dark"] .text-neutral-400 {
  color: var(--fc-text-tertiary) !important;
}

/* Fix inline white backgrounds */
[data-theme="dark"] [class*="bg-white"],
[data-theme="dark"] .tw-bg-white,
[data-theme="dark"] .tw-bg-neutral-50,
[data-theme="dark"] .tw-bg-neutral-100 {
  background: var(--fc-surface) !important;
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE — Un-prefixed Tailwind utilities (bundled by modules)
   Several modules (whatsapp, pos, deals, zillapage…) ship their own
   Tailwind build using plain `bg-gray-*`, `text-gray-*`, `border-gray-*`
   classes that the core `tw-` prefixed dark rules never touch — so they
   leak LIGHT surfaces / DARK text into dark mode. Neutralize them here,
   once, for the whole system. Attribute-substring selectors also catch
   the responsive/hover variants (e.g. `hover:bg-gray-100`, `md:bg-gray-200`).
   ═══════════════════════════════════════════════════════════════ */

/* Light gray backgrounds → dark surfaces */
[data-theme="dark"] [class*="bg-gray-50"],
[data-theme="dark"] [class*="bg-gray-100"],
[data-theme="dark"] [class*="bg-gray-200"],
[data-theme="dark"] [class*="bg-slate-50"],
[data-theme="dark"] [class*="bg-slate-100"],
[data-theme="dark"] [class*="bg-neutral-50"],
[data-theme="dark"] [class*="bg-neutral-100"],
[data-theme="dark"] [class*="bg-light"] {
  background-color: var(--fc-surface) !important;
}

[data-theme="dark"] [class*="bg-gray-300"],
[data-theme="dark"] [class*="bg-slate-200"],
[data-theme="dark"] [class*="bg-neutral-200"] {
  background-color: var(--fc-surface-raised) !important;
}

/* Light colored tints (blue-50/100, green-100, yellow-100, red-100…) used as
   badge / highlight backgrounds → muted dark raised surface so they don't
   glow light in dark mode (their colored text stays readable). */
[data-theme="dark"] [class*="bg-blue-50"],
[data-theme="dark"] [class*="bg-blue-100"],
[data-theme="dark"] [class*="bg-green-50"],
[data-theme="dark"] [class*="bg-green-100"],
[data-theme="dark"] [class*="bg-yellow-50"],
[data-theme="dark"] [class*="bg-yellow-100"],
[data-theme="dark"] [class*="bg-red-50"],
[data-theme="dark"] [class*="bg-red-100"],
[data-theme="dark"] [class*="bg-indigo-100"],
[data-theme="dark"] [class*="bg-purple-100"] {
  background-color: var(--fc-surface-raised) !important;
}

/* Dark gray text → light, so it stays readable on the now-dark surfaces */
[data-theme="dark"] [class*="text-gray-900"],
[data-theme="dark"] [class*="text-gray-800"],
[data-theme="dark"] [class*="text-gray-700"],
[data-theme="dark"] [class*="text-slate-900"],
[data-theme="dark"] [class*="text-slate-800"],
[data-theme="dark"] [class*="text-slate-700"],
[data-theme="dark"] [class*="text-neutral-900"],
[data-theme="dark"] [class*="text-neutral-800"],
[data-theme="dark"] [class*="text-neutral-700"],
[data-theme="dark"] [class*="text-black"] {
  color: var(--fc-text-primary) !important;
}

[data-theme="dark"] [class*="text-gray-600"],
[data-theme="dark"] [class*="text-gray-500"],
[data-theme="dark"] [class*="text-slate-600"],
[data-theme="dark"] [class*="text-slate-500"],
[data-theme="dark"] [class*="text-neutral-600"],
[data-theme="dark"] [class*="text-neutral-500"] {
  color: var(--fc-text-tertiary) !important;
}

/* Light borders → theme border */
[data-theme="dark"] [class*="border-gray-100"],
[data-theme="dark"] [class*="border-gray-200"],
[data-theme="dark"] [class*="border-gray-300"],
[data-theme="dark"] [class*="border-slate-200"],
[data-theme="dark"] [class*="border-slate-300"],
[data-theme="dark"] [class*="border-neutral-200"],
[data-theme="dark"] [class*="border-neutral-300"] {
  border-color: var(--fc-border-default) !important;
}

/* Un-prefixed form controls inside bundled-Tailwind modules */
[data-theme="dark"] [class*="bg-gray-50"] input,
[data-theme="dark"] [class*="bg-gray-100"] input,
[data-theme="dark"] [class*="bg-white"] input,
[data-theme="dark"] [class*="bg-white"] select,
[data-theme="dark"] [class*="bg-white"] textarea {
  background-color: var(--fc-surface-raised) !important;
  color: var(--fc-text-primary) !important;
  border-color: var(--fc-border-default) !important;
}

/* Fix top stats wrapper text */
[data-theme="dark"] .top_stats_wrapper,
[data-theme="dark"] .top_stats_wrapper * {
  color: var(--fc-text-primary) !important;
}

[data-theme="dark"] .top_stats_wrapper svg {
  color: var(--fc-text-tertiary) !important;
}

/* Progress bars in dark mode */
[data-theme="dark"] .progress {
  background: var(--fc-neutral-700) !important;
}

[data-theme="dark"] .progress-bar {
  background: var(--fc-primary-500) !important;
}

[data-theme="dark"] .progress-bar-success { background: var(--fc-success-500) !important; }
[data-theme="dark"] .progress-bar-warning { background: var(--fc-warning-500) !important; }
[data-theme="dark"] .progress-bar-danger { background: var(--fc-danger-500) !important; }

/* Alerts in dark mode */
[data-theme="dark"] .alert-success {
  background: rgba(16, 185, 129, 0.12) !important;
  color: var(--fc-success-600) !important;
  border-color: rgba(16, 185, 129, 0.2) !important;
}

[data-theme="dark"] .alert-info {
  background: rgba(37, 99, 235, 0.12) !important;
  color: var(--fc-primary-400) !important;
  border-color: rgba(37, 99, 235, 0.2) !important;
}

[data-theme="dark"] .alert-warning {
  background: rgba(245, 158, 11, 0.12) !important;
  color: var(--fc-warning-500) !important;
  border-color: rgba(245, 158, 11, 0.2) !important;
}

[data-theme="dark"] .alert-danger {
  background: rgba(239, 68, 68, 0.12) !important;
  color: var(--fc-danger-500) !important;
  border-color: rgba(239, 68, 68, 0.2) !important;
}

/* Fix form inputs in dark mode */
[data-theme="dark"] .form-control,
[data-theme="dark"] input.form-control,
[data-theme="dark"] select.form-control,
[data-theme="dark"] textarea.form-control {
  background: var(--fc-surface) !important;
  color: var(--fc-text-primary) !important;
  border-color: var(--fc-border-default) !important;
}

[data-theme="dark"] .form-control::placeholder {
  color: var(--fc-text-disabled) !important;
}

[data-theme="dark"] .bootstrap-select > .dropdown-toggle {
  background: var(--fc-surface) !important;
  color: var(--fc-text-primary) !important;
  border-color: var(--fc-border-default) !important;
}

/* Fix dropdowns in dark mode */
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .bootstrap-select .dropdown-menu,
[data-theme="dark"] ul.search-results {
  background: var(--fc-surface) !important;
  border-color: var(--fc-border-default) !important;
}

[data-theme="dark"] .dropdown-menu > li > a {
  color: var(--fc-text-secondary) !important;
}

[data-theme="dark"] .dropdown-menu > li > a:hover {
  background: var(--fc-neutral-800) !important;
  color: var(--fc-text-primary) !important;
}

/* Fix tables in dark mode */
[data-theme="dark"] .table > thead > tr > th {
  background: var(--fc-neutral-800) !important;
  color: var(--fc-text-tertiary) !important;
  border-bottom-color: var(--fc-border-default) !important;
}

[data-theme="dark"] .table > tbody > tr > td {
  color: var(--fc-text-secondary) !important;
  border-bottom-color: var(--fc-border-default) !important;
}

[data-theme="dark"] .table > tbody > tr:hover > td,
[data-theme="dark"] .table > tbody > tr:hover > th {
  background-color: var(--fc-neutral-50) !important;
}

/* Override theme modules that set tr:hover background in dark mode */
[data-theme="dark"] tr:hover {
  background-color: var(--fc-neutral-800) !important;
}

/* Contextual rows hover — higher specificity (0,4,3) always beats
   the general hover rule above regardless of cascade order          */
[data-theme="dark"] .table > tbody > tr.info:hover > td,
[data-theme="dark"] .table > tbody > tr.info:hover > th {
  background-color: rgba(37, 99, 235, 0.28) !important;
}
[data-theme="dark"] .table > tbody > tr.warning:hover > td,
[data-theme="dark"] .table > tbody > tr.warning:hover > th {
  background-color: rgba(245, 158, 11, 0.28) !important;
}
[data-theme="dark"] .table > tbody > tr.success:hover > td,
[data-theme="dark"] .table > tbody > tr.success:hover > th {
  background-color: rgba(16, 185, 129, 0.28) !important;
}
[data-theme="dark"] .table > tbody > tr.danger:hover > td,
[data-theme="dark"] .table > tbody > tr.danger:hover > th {
  background-color: rgba(239, 68, 68, 0.28) !important;
}

[data-theme="dark"] table.table.items,
[data-theme="dark"] .dataTable,
[data-theme="dark"] table.dt-table {
  background: var(--fc-surface) !important;
  border-color: var(--fc-border-default) !important;
}

/* Fix badges/labels in dark mode */
[data-theme="dark"] .label-primary,
[data-theme="dark"] .badge-primary,
[data-theme="dark"] .label-info,
[data-theme="dark"] .badge-info {
  background: rgba(37, 99, 235, 0.2) !important;
  color: var(--fc-primary-400) !important;
}

[data-theme="dark"] .label-success,
[data-theme="dark"] .badge-success {
  background: rgba(16, 185, 129, 0.2) !important;
  color: var(--fc-success-500) !important;
}

[data-theme="dark"] .label-warning,
[data-theme="dark"] .badge-warning {
  background: rgba(245, 158, 11, 0.2) !important;
  color: var(--fc-warning-500) !important;
}

[data-theme="dark"] .label-danger,
[data-theme="dark"] .badge-danger {
  background: rgba(239, 68, 68, 0.2) !important;
  color: var(--fc-danger-500) !important;
}

/* Fix nav tabs/pills in dark mode */
[data-theme="dark"] .nav-tabs > li > a {
  color: var(--fc-text-tertiary) !important;
}

[data-theme="dark"] .nav-tabs > li > a:hover {
  background: rgba(255, 255, 255, 0.03) !important;
  color: var(--fc-text-secondary) !important;
}

[data-theme="dark"] .nav-tabs > li.active > a {
  color: var(--fc-primary-400) !important;
  border-bottom-color: var(--fc-primary-500) !important;
}

[data-theme="dark"] .nav-pills > li > a {
  color: var(--fc-text-secondary) !important;
}

[data-theme="dark"] .nav-pills > li > a:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

/* Fix kanban in dark mode */
[data-theme="dark"] .kan-ban-content {
  background: var(--fc-neutral-900) !important;
}

[data-theme="dark"] #kan-ban .panel-body {
  background: var(--fc-surface) !important;
  border-color: var(--fc-border-default) !important;
}

[data-theme="dark"] .kan-ban-expand-top {
  background: var(--fc-neutral-800) !important;
  color: var(--fc-text-tertiary) !important;
}

/* Fix activity feed in dark mode */
[data-theme="dark"] .activity-feed .feed-item {
  border-left-color: var(--fc-border-default) !important;
}

[data-theme="dark"] .activity-feed .feed-item:after {
  background: var(--fc-surface) !important;
  border-color: var(--fc-neutral-500) !important;
}

/* Fix header in dark mode */
[data-theme="dark"] #header {
  background: rgba(30, 41, 59, 0.95) !important;
  border-bottom-color: var(--fc-border-default) !important;
}

[data-theme="dark"] .mobile-navbar {
  background: var(--fc-surface) !important;
}

/* Fix modals in dark mode */
[data-theme="dark"] .modal-content {
  background: var(--fc-surface) !important;
  border-color: var(--fc-border-default) !important;
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
  background: var(--fc-surface) !important;
  border-color: var(--fc-border-divider) !important;
}

[data-theme="dark"] .modal-header .modal-title {
  color: var(--fc-text-primary) !important;
}

[data-theme="dark"] .modal-header .close {
  color: var(--fc-text-tertiary) !important;
}

[data-theme="dark"] .modal-header .close:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--fc-text-primary) !important;
}

/* Fix email template heading */
[data-theme="dark"] .email-template-heading {
  background: var(--fc-neutral-800) !important;
  border-color: var(--fc-border-default) !important;
  color: var(--fc-text-primary) !important;
}

/* Fix pagination in dark mode */
[data-theme="dark"] .pagination > li > a,
[data-theme="dark"] .pagination > li > span {
  color: var(--fc-text-secondary) !important;
  background: transparent !important;
}

[data-theme="dark"] .pagination > li > a:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--fc-text-primary) !important;
}

[data-theme="dark"] .pagination > .active > a {
  background: var(--fc-primary-500) !important;
  color: #fff !important;
}

/* Fix TinyMCE and editors */
[data-theme="dark"] .mce-container.mce-panel {
  background: var(--fc-surface) !important;
  border-color: var(--fc-border-default) !important;
}

[data-theme="dark"] .mce-btn {
  background: var(--fc-surface) !important;
  border-color: var(--fc-border-default) !important;
}

/* Fix DataTables controls */
[data-theme="dark"] .dataTables_wrapper .dataTables_length select,
[data-theme="dark"] .dataTables_wrapper .dataTables_filter input {
  background: var(--fc-surface) !important;
  color: var(--fc-text-primary) !important;
  border-color: var(--fc-border-default) !important;
}

/* Fix popovers */
[data-theme="dark"] .popover {
  background: var(--fc-surface) !important;
  border-color: var(--fc-border-default) !important;
}

[data-theme="dark"] .popover-title {
  background: var(--fc-neutral-800) !important;
  color: var(--fc-text-primary) !important;
  border-color: var(--fc-border-divider) !important;
}

[data-theme="dark"] .popover-content {
  color: var(--fc-text-secondary) !important;
}

/* Fix sidebar active in dark mode */
[data-theme="dark"] .sidebar > ul.nav > li:hover a:first-child,
[data-theme="dark"] .sidebar > ul.nav > li.active a:first-child {
  background: rgba(37, 99, 235, 0.15) !important;
  color: var(--fc-primary-400) !important;
}

/* Fix jQuery comments */
[data-theme="dark"] .jquery-comments .textarea-wrapper .textarea {
  background: var(--fc-surface) !important;
  color: var(--fc-text-primary) !important;
  border-color: var(--fc-border-default) !important;
}

/* Fix task modal */
[data-theme="dark"] .task-modal-single .modal-body {
  background: var(--fc-background) !important;
}

[data-theme="dark"] .task-single-col-right {
  background: var(--fc-neutral-800) !important;
  border-color: var(--fc-border-default) !important;
}

[data-theme="dark"] .task-single-col-left {
  background: var(--fc-surface) !important;
}

/* Fix newsfeed */
[data-theme="dark"] #newsfeed .newsfeed_post .post-comment.panel-footer,
[data-theme="dark"] #newsfeed .newsfeed_post .post-likes.panel-footer {
  background: var(--fc-neutral-800) !important;
  color: var(--fc-text-secondary) !important;
  border-color: var(--fc-border-default) !important;
}

/* Fix system popup */
[data-theme="dark"] .system-popup {
  background: var(--fc-background) !important;
}

/* Fix checklist */
[data-theme="dark"] .checklist:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

/* Fix note */
[data-theme="dark"] .note {
  background: rgba(245, 158, 11, 0.12) !important;
  color: var(--fc-warning-500) !important;
  border-color: rgba(245, 158, 11, 0.2) !important;
}

/* Fix calendar events */
[data-theme="dark"] .fc-event {
  opacity: 0.95;
}

/* Fix tooltip inner */
[data-theme="dark"] .tooltip > .tooltip-inner {
  background: var(--fc-neutral-100) !important;
  color: var(--fc-neutral-900) !important;
}

[data-theme="dark"] .tooltip-arrow { border-top-color: var(--fc-neutral-100) !important; }

/* Fix input group addon */
[data-theme="dark"] .input-group-addon {
  background: var(--fc-neutral-800) !important;
  color: var(--fc-text-tertiary) !important;
  border-color: var(--fc-border-default) !important;
}

/* Fix selectpicker dropdown */
[data-theme="dark"] .bs-searchbox {
  border-bottom-color: var(--fc-border-default) !important;
}

/* Fix colorpicker visible */
[data-theme="dark"] .colorpicker.colorpicker-visible.dropdown-menu {
  background: var(--fc-surface) !important;
}

/* Fix datepicker */
[data-theme="dark"] .datepicker table tr td.day {
  color: var(--fc-text-primary) !important;
}

[data-theme="dark"] .datepicker table tr td.old,
[data-theme="dark"] .datepicker table tr td.new {
  color: var(--fc-text-disabled) !important;
}

/* Fix dragger icon */
[data-theme="dark"] .widget-dragger {
  color: var(--fc-neutral-600) !important;
}

/* Fix highlight background */
[data-theme="dark"] .highlight-bg {
  background: rgba(37, 99, 235, 0.1) !important;
  border-color: rgba(37, 99, 235, 0.15) !important;
}

/* Fix toplink/botlink */
[data-theme="dark"] #toplink,
[data-theme="dark"] #botlink {
  background: var(--fc-surface) !important;
  border-color: var(--fc-border-default) !important;
  color: var(--fc-text-tertiary) !important;
}

[data-theme="dark"] #toplink:hover,
[data-theme="dark"] #botlink:hover {
  background: var(--fc-neutral-800) !important;
  color: var(--fc-text-primary) !important;
}

/* Fix attachment previews */
[data-theme="dark"] .task-attachment,
[data-theme="dark"] .project-file-image {
  background: var(--fc-surface) !important;
  border-color: var(--fc-border-default) !important;
}

/* Fix proposal comments */
[data-theme="dark"] .proposal-comments .proposal-comment {
  background: var(--fc-surface) !important;
  border-color: var(--fc-border-default) !important;
}

/* Fix file mime icons */
[data-theme="dark"] .mime > a {
  color: var(--fc-text-secondary) !important;
}

/* Fix customer profile heading */
[data-theme="dark"] .customer-profile-group-heading {
  color: var(--fc-text-primary) !important;
}

/* Fix nav second level hover */
[data-theme="dark"] .sidebar ul.nav li .nav-second-level li a:hover {
  background: rgba(255, 255, 255, 0.03) !important;
  color: var(--fc-text-primary) !important;
}

/* Fix scrollbar in dark mode */
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--fc-neutral-700);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--fc-neutral-600);
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 24: ADDITIONAL FIXES — Nested Cards & Inline Styles
   ═══════════════════════════════════════════════════════════════ */

/* Fix nested widgets inside panels (Light Mode) */
.panel_s .widget,
.panel .widget,
.panel_s .panel_s,
.panel .panel,
.top_stats_wrapper .top_stats_wrapper {
  background: var(--fc-surface) !important;
  border: 1px solid var(--fc-border-default) !important;
  border-radius: var(--fc-radius-xl) !important;
  box-shadow: var(--fc-shadow-xs) !important;
}

/* Widget inside panel should blend or have subtle border */
.widget .top_stats_wrapper {
  background: var(--fc-surface) !important;
  border: 1px solid var(--fc-border-default) !important;
  border-radius: var(--fc-radius-xl) !important;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 25: DARK MODE — FORCE INLINE WHITE BACKGROUNDS
   ═══════════════════════════════════════════════════════════════ */

/* Force any inline white background to dark surface.
   NOTE: this cannot beat inline `!important` whites — those must have the
   `!important` removed in the markup (CSS can never override inline !important). */
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background-color: #fff"],
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background-color:#fff"],
[data-theme="dark"] [style*="background: #ffffff"],
[data-theme="dark"] [style*="background-color: #ffffff"],
[data-theme="dark"] [style*="background:#ffffff"],
[data-theme="dark"] [style*="background-color:#ffffff"],
[data-theme="dark"] [style*="background: #FFF"],
[data-theme="dark"] [style*="background-color: #FFF"],
[data-theme="dark"] [style*="background: #FFFFFF"],
[data-theme="dark"] [style*="background-color: #FFFFFF"],
[data-theme="dark"] [style*="background: rgb(255, 255, 255)"],
[data-theme="dark"] [style*="background-color: rgb(255, 255, 255)"],
[data-theme="dark"] [style*="background: rgb(255,255,255)"],
[data-theme="dark"] [style*="background-color: rgb(255,255,255)"],
[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background-color: white"],
[data-theme="dark"] [style*="background:white"],
[data-theme="dark"] [style*="background-color:white"] {
  background-color: var(--fc-surface) !important;
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE — Bootstrap 4/5 components & common container classes
   (bundled by modules that ship their own Bootstrap/Tailwind build)
   ═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .card,
[data-theme="dark"] .card-header,
[data-theme="dark"] .card-body,
[data-theme="dark"] .card-footer,
[data-theme="dark"] .accordion,
[data-theme="dark"] .accordion-item,
[data-theme="dark"] .accordion-button,
[data-theme="dark"] .list-group,
[data-theme="dark"] .box,
[data-theme="dark"] .content-box,
[data-theme="dark"] .white-box,
[data-theme="dark"] .white-bg,
[data-theme="dark"] .bg-light,
[data-theme="dark"] .offcanvas,
[data-theme="dark"] .toast {
  background-color: var(--fc-surface) !important;
  color: var(--fc-text-secondary) !important;
  border-color: var(--fc-border-default) !important;
}

[data-theme="dark"] .accordion-button:not(.collapsed) {
  background-color: var(--fc-surface-raised) !important;
  color: var(--fc-text-primary) !important;
}

/* BS4/5 form controls */
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-control,
[data-theme="dark"] .input-group-text {
  background-color: var(--fc-surface-raised) !important;
  color: var(--fc-text-primary) !important;
  border-color: var(--fc-border-default) !important;
}

/* BS4/5 pagination */
[data-theme="dark"] .page-link {
  background-color: var(--fc-surface) !important;
  color: var(--fc-text-secondary) !important;
  border-color: var(--fc-border-default) !important;
}
[data-theme="dark"] .page-item.active .page-link {
  background-color: var(--fc-primary-600) !important;
  border-color: var(--fc-primary-600) !important;
  color: #fff !important;
}
[data-theme="dark"] .page-item.disabled .page-link {
  background-color: var(--fc-surface) !important;
  color: var(--fc-text-disabled) !important;
}

/* Force inline white color text to light */
[data-theme="dark"] [style*="color: #333"],
[data-theme="dark"] [style*="color: #000"],
[data-theme="dark"] [style*="color: rgb(0, 0, 0)"],
[data-theme="dark"] [style*="color: black"] {
  color: var(--fc-text-primary) !important;
}

/* Force ALL widgets to dark surface in dark mode */
[data-theme="dark"] .widget,
[data-theme="dark"] .widget * {
  background-color: transparent !important;
}

[data-theme="dark"] .widget {
  background: var(--fc-surface) !important;
  border-color: var(--fc-border-default) !important;
}

/* Widgets inside panels must be dark too */
[data-theme="dark"] .panel_s .widget,
[data-theme="dark"] .panel .widget,
[data-theme="dark"] .panel_s .panel_s,
[data-theme="dark"] .panel .panel,
[data-theme="dark"] .top_stats_wrapper .top_stats_wrapper,
[data-theme="dark"] .widget .top_stats_wrapper {
  background: var(--fc-neutral-800) !important;
  border-color: var(--fc-border-default) !important;
  box-shadow: none !important;
}

/* Ensure text inside nested dark widgets is readable */
[data-theme="dark"] .widget .top_stats_wrapper *,
[data-theme="dark"] .panel_s .widget *,
[data-theme="dark"] .top_stats_wrapper .top_stats_wrapper * {
  color: var(--fc-text-primary) !important;
}

[data-theme="dark"] .widget .top_stats_wrapper svg,
[data-theme="dark"] .panel_s .widget svg {
  color: var(--fc-text-tertiary) !important;
}

/* Fix alert text in dark mode */
[data-theme="dark"] .alert-danger,
[data-theme="dark"] .alert-danger * {
  color: var(--fc-danger-500) !important;
}

[data-theme="dark"] .alert-success,
[data-theme="dark"] .alert-success * {
  color: var(--fc-success-500) !important;
}

[data-theme="dark"] .alert-info,
[data-theme="dark"] .alert-info * {
  color: var(--fc-primary-400) !important;
}

[data-theme="dark"] .alert-warning,
[data-theme="dark"] .alert-warning * {
  color: var(--fc-warning-500) !important;
}

/* Fix close button in alerts */
[data-theme="dark"] .alert .close {
  color: inherit !important;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 26: SPECIFIC COMPONENT FIXES
   ═══════════════════════════════════════════════════════════════ */

/* Fix the admin profile card in sidebar */
.sidebar ul.nav li.nav-header {
  background: transparent !important;
  border: none !important;
}

/* Fix any remaining bg-white in widgets */
[data-theme="dark"] .widget-dragger + div,
[data-theme="dark"] .widget > div:first-child,
[data-theme="dark"] [class*="quick-stats"] > div {
  background: var(--fc-surface) !important;
}

/* Fix dashboard options button */
[data-theme="dark"] #dashboard-options,
[data-theme="dark"] #dashboard-options * {
  background: var(--fc-surface) !important;
  color: var(--fc-text-primary) !important;
}

[data-theme="dark"] #dashboard-options a {
  color: var(--fc-primary-400) !important;
}

/* Fix preview widgets placeholder */
[data-theme="dark"] .placeholder-dashboard-widgets {
  border-color: var(--fc-border-default) !important;
  background: transparent !important;
}

/* Fix any table inside widget */
[data-theme="dark"] .widget .table,
[data-theme="dark"] .widget table {
  background: transparent !important;
}

/* Fix invoice/estimate overview cards at bottom */
[data-theme="dark"] .panel_s .row .panel_s,
[data-theme="dark"] .panel .row .panel {
  background: var(--fc-neutral-800) !important;
  border-color: var(--fc-border-default) !important;
}

/* Fix text-muted in dark mode */
[data-theme="dark"] .text-muted,
[data-theme="dark"] .tw-text-neutral-300 {
  color: var(--fc-text-tertiary) !important;
}

/* Fix any remaining white text on white bg */
[data-theme="dark"] .text-danger {
  color: var(--fc-danger-500) !important;
}

[data-theme="dark"] .text-success {
  color: var(--fc-success-500) !important;
}

[data-theme="dark"] .text-warning {
  color: var(--fc-warning-500) !important;
}

[data-theme="dark"] .text-info {
  color: var(--fc-primary-400) !important;
}

/* Fix links in dark mode */
[data-theme="dark"] a {
  color: var(--fc-primary-400);
}

[data-theme="dark"] a:hover {
  color: var(--fc-primary-300);
}

/* Fix active pagination */
[data-theme="dark"] .pagination > .active > a {
  background: var(--fc-primary-500) !important;
  color: #fff !important;
}

/* Fix disabled inputs */
[data-theme="dark"] .form-control:disabled {
  background: var(--fc-neutral-800) !important;
  color: var(--fc-text-disabled) !important;
}

/* Fix mce editor body */
[data-theme="dark"] .mce-content-body {
  background: var(--fc-surface) !important;
  color: var(--fc-text-primary) !important;
}

/* Fix select dropdown items hover */
[data-theme="dark"] .bootstrap-select .dropdown-menu li a:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

/* Ensure the search input in dark mode */
[data-theme="dark"] #search_input {
  background: var(--fc-neutral-800) !important;
  color: var(--fc-text-primary) !important;
  border-color: var(--fc-border-default) !important;
}

[data-theme="dark"] #search_input::placeholder {
  color: var(--fc-text-disabled) !important;
}

/* Fix dropdown toggle in header */
[data-theme="dark"] .navbar-nav > li > .dropdown-toggle {
  color: var(--fc-text-secondary) !important;
}

[data-theme="dark"] .navbar-nav > li > .dropdown-toggle:hover {
  color: var(--fc-text-primary) !important;
}

/* Fix the invoice overview / estimate overview bottom cards */
[data-theme="dark"] .panel_s [class*="overview"] {
  color: var(--fc-text-secondary) !important;
}

[data-theme="dark"] .panel_s [class*="overview"] [class*="Draft"],
[data-theme="dark"] .panel_s [class*="overview"] [class*="Waiting"] {
  color: var(--fc-text-tertiary) !important;
}

/* Fix the to-do widget */
[data-theme="dark"] .widget .todo-title,
[data-theme="dark"] .widget ul.todo li {
  color: var(--fc-text-primary) !important;
  border-color: var(--fc-border-default) !important;
}

/* Fix calendar widget */
[data-theme="dark"] .widget .fc-toolbar-title,
[data-theme="dark"] .widget .fc-col-header-cell-cushion {
  color: var(--fc-text-primary) !important;
}

[data-theme="dark"] .widget .fc-daygrid-day-number {
  color: var(--fc-text-secondary) !important;
}

/* Fix any remaining bg-success / bg-warning / bg-danger badges */
[data-theme="dark"] .bg-success { background: var(--fc-success-500) !important; color: #000 !important; }
[data-theme="dark"] .bg-warning { background: var(--fc-warning-500) !important; color: #000 !important; }
[data-theme="dark"] .bg-danger { background: var(--fc-danger-500) !important; color: #000 !important; }
[data-theme="dark"] .bg-info { background: var(--fc-primary-500) !important; color: #fff !important; }
[data-theme="dark"] .bg-primary { background: var(--fc-primary-500) !important; color: #fff !important; }

/* ═══════════════════════════════════════════════════════════════
   SECTION 27: LIGHT MODE FIXES — Better Contrast for Nested Cards
   ═══════════════════════════════════════════════════════════════ */

/* Nested cards / widgets inside panels need visible borders in light mode */
.panel_s .widget,
.panel .widget,
.panel_s .panel_s,
.panel .panel,
.top_stats_wrapper .top_stats_wrapper,
.widget .top_stats_wrapper {
  background: var(--fc-surface) !important;
  border: 1px solid var(--fc-border-default) !important;
  border-radius: var(--fc-radius-xl) !important;
  box-shadow: var(--fc-shadow-xs) !important;
}

/* When widget is directly inside panel body, add padding if needed */
.panel_s .widget {
  padding: 0 !important;
  margin-bottom: 0 !important;
}

/* Ensure widget text is readable */
.widget .top_stats_wrapper * {
  color: var(--fc-text-primary) !important;
}

.widget .top_stats_wrapper svg {
  color: var(--fc-text-tertiary) !important;
}

/* Alert close button */
.alert .close {
  color: inherit !important;
}

/* Fix any widget with inline background */
.widget[class*="bg-"] {
  background: var(--fc-surface) !important;
}

/* Ensure progress bars in light mode are visible */
.progress-bar-mini .progress {
  background: var(--fc-neutral-200) !important;
}

/* Fix the invoice overview bottom section text colors */
.panel_s [class*="overview"] {
  color: var(--fc-text-secondary) !important;
}

/* Fix todo widget in light mode */
.widget .todo-title,
.widget ul.todo li {
  color: var(--fc-text-primary) !important;
}

/* Fix calendar widget text */
.widget .fc-toolbar-title,
.widget .fc-col-header-cell-cushion {
  color: var(--fc-text-primary) !important;
}

.widget .fc-daygrid-day-number {
  color: var(--fc-text-secondary) !important;
}

/* Fix search input placeholder */
#search_input::placeholder {
  color: var(--fc-text-tertiary) !important;
}

/* Fix dropdown active items */
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  background: var(--fc-primary-50) !important;
  color: var(--fc-primary-600) !important;
}

/* Ensure the logo area has correct colors */
.logo-text {
  color: var(--fc-text-primary) !important;
}

/* Fix any inline success/warning/danger text colors */
.text-success { color: var(--fc-success-600) !important; }
.text-warning { color: var(--fc-warning-600) !important; }
.text-danger { color: var(--fc-danger-600) !important; }
.text-info { color: var(--fc-primary-600) !important; }
.text-primary { color: var(--fc-primary-600) !important; }

/* Fix muted text */
.text-muted {
  color: var(--fc-text-tertiary) !important;
}

/* Fix bg-* utility classes */
.bg-success { background: var(--fc-success-500) !important; color: #fff !important; }
.bg-warning { background: var(--fc-warning-500) !important; color: #fff !important; }
.bg-danger { background: var(--fc-danger-500) !important; color: #fff !important; }
.bg-info { background: var(--fc-primary-500) !important; color: #fff !important; }
.bg-primary { background: var(--fc-primary-500) !important; color: #fff !important; }

/* Fix the dashboard widgets container */
[data-container] {
  min-height: 20px;
}

/* Fix widget dragger color */
.widget-dragger {
  color: var(--fc-neutral-300) !important;
}

.widget-dragger:hover {
  color: var(--fc-neutral-500) !important;
}

/* Fix placeholder for dashboard widgets */
.placeholder-dashboard-widgets {
  border-color: var(--fc-border-default) !important;
  background: transparent !important;
}

/* Fix jQuery comments username color */
.jquery-comments ul.main li.comment .name {
  color: var(--fc-primary-600) !important;
}

/* Fix comments actions color */
.jquery-comments ul.main li.comment .actions > * {
  color: var(--fc-text-tertiary) !important;
}

/* Fix highlight-background in comments */
.jquery-comments .highlight-background {
  background: var(--fc-primary-500) !important;
}

/* Fix any inline editor */
.mce-content-body {
  background: var(--fc-surface) !important;
  color: var(--fc-text-primary) !important;
}

/* Fix drag and drop handles */
.dd-handle {
  background: var(--fc-surface) !important;
  border-color: var(--fc-border-default) !important;
  color: var(--fc-text-secondary) !important;
}

.dd-handle:hover {
  background: var(--fc-neutral-100) !important;
  color: var(--fc-primary-600) !important;
}

/* Fix nestable lists */
.nestable-lists {
  border-color: var(--fc-border-default) !important;
}

/* Fix dd3 content */
.dd3-content {
  background: var(--fc-surface) !important;
  border-color: var(--fc-border-default) !important;
  color: var(--fc-text-primary) !important;
}

.sub-items .dd3-content {
  background: var(--fc-surface) !important;
}

/* Fix color picker */
.cpicker {
  border-radius: var(--fc-radius-sm) !important;
}

/* Fix fc events */
.fc-event {
  background: var(--fc-primary-500) !important;
  color: #fff !important;
}

/* Fix fc toolbar buttons */
.fc .fc-button {
  background: var(--fc-neutral-100) !important;
  color: var(--fc-text-secondary) !important;
  border-color: var(--fc-border-default) !important;
  border-radius: var(--fc-radius-md) !important;
}

.fc .fc-button:hover {
  background: var(--fc-neutral-200) !important;
  color: var(--fc-text-primary) !important;
}

.fc .fc-button-primary {
  background: var(--fc-primary-500) !important;
  color: #fff !important;
  border-color: var(--fc-primary-500) !important;
}

.fc .fc-button-primary:hover {
  background: var(--fc-primary-600) !important;
}

/* Fix newsfeed post pinned */
#newsfeed .newsfeed_post.pinned > .panel-body {
  background: var(--fc-primary-50) !important;
}

/* Fix user post like area */
#newsfeed .newsfeed_post .user-post-like {
  background: var(--fc-surface) !important;
  border-color: var(--fc-border-default) !important;
}

/* Fix modal like area */
.modal_like_area {
  border-color: var(--fc-border-default) !important;
}

/* Fix contract statement summary */
.statement-account-summary tbody > tr > td {
  color: var(--fc-text-secondary) !important;
}

/* Fix project info heading */
.customer-profile-group-heading {
  color: var(--fc-text-primary) !important;
}

/* Fix lead info heading */
.lead-info-heading {
  background: var(--fc-neutral-50) !important;
  color: var(--fc-text-primary) !important;
}

.lead-info-heading h4 {
  color: var(--fc-text-primary) !important;
}

/* Fix finance overview widget */
.finance-overview .text-stats-wrapper {
  color: var(--fc-text-primary) !important;
}

/* Fix any remaining border-right utilities */
.border-right {
  border-color: var(--fc-border-default) !important;
}

/* Fix table invoices row options */
table tbody .row-options a {
  color: var(--fc-text-tertiary) !important;
}

table tbody .row-options a:hover {
  color: var(--fc-primary-600) !important;
}

/* Fix attachments wrapper */
.attachments .attachment {
  background: var(--fc-surface) !important;
  border-color: var(--fc-border-default) !important;
}

/* Fix mime icons text */
.mime > a {
  color: var(--fc-text-secondary) !important;
}

/* Fix customer map border */
.customer_map {
  border-radius: var(--fc-radius-lg) !important;
  border: 1px solid var(--fc-border-default) !important;
}

/* Fix statement table */
.statement_tfoot td {
  color: var(--fc-text-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 28: SCREEN OPTIONS (Dashboard Options Button)
   ═══════════════════════════════════════════════════════════════ */

.screen-options-btn {
  background: var(--fc-neutral-100) !important;
  color: var(--fc-text-secondary) !important;
  border-color: var(--fc-border-default) !important;
  border-radius: 0 0 var(--fc-radius-lg) var(--fc-radius-lg) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  padding: 6px 16px !important;
  transition: all var(--fc-duration-normal) var(--fc-ease-default);
}

.screen-options-btn:hover {
  background: var(--fc-neutral-200) !important;
  color: var(--fc-text-primary) !important;
}

.screen-options-btn svg {
  color: var(--fc-text-tertiary) !important;
}

.screen-options-area {
  background: var(--fc-neutral-50) !important;
  border-bottom: 1px solid var(--fc-border-default) !important;
  color: var(--fc-text-secondary) !important;
}

[data-theme="dark"] .screen-options-btn {
  background: var(--fc-neutral-800) !important;
  color: var(--fc-text-secondary) !important;
  border-color: var(--fc-border-default) !important;
}

[data-theme="dark"] .screen-options-btn:hover {
  background: var(--fc-neutral-700) !important;
  color: var(--fc-text-primary) !important;
}

[data-theme="dark"] .screen-options-area {
  background: var(--fc-surface) !important;
  border-bottom-color: var(--fc-border-default) !important;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 29: ALERTS FIXES — Better spacing & borders
   ═══════════════════════════════════════════════════════════════ */

.alert {
  margin-bottom: var(--fc-space-4) !important;
}

.alert-danger {
  background: var(--fc-danger-50) !important;
  color: var(--fc-danger-700) !important;
  border: 1px solid rgba(239, 68, 68, 0.15) !important;
}

.alert-success {
  background: var(--fc-success-50) !important;
  color: var(--fc-success-700) !important;
  border: 1px solid rgba(16, 185, 129, 0.15) !important;
}

.alert-info {
  background: var(--fc-primary-50) !important;
  color: var(--fc-primary-700) !important;
  border: 1px solid rgba(37, 99, 235, 0.15) !important;
}

.alert-warning {
  background: var(--fc-warning-50) !important;
  color: var(--fc-warning-700) !important;
  border: 1px solid rgba(245, 158, 11, 0.15) !important;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 30: PROFILE CARD IN SIDEBAR
   ═══════════════════════════════════════════════════════════════ */

.sidebar ul.nav li.nav-header {
  background: transparent !important;
  border: none !important;
  padding: var(--fc-space-3) var(--fc-space-2) !important;
}

.sidebar ul.nav li.nav-header .profile {
  border: 1px solid var(--fc-border-default) !important;
  border-radius: var(--fc-radius-xl) !important;
  background: var(--fc-surface) !important;
  padding: var(--fc-space-3) !important;
  box-shadow: var(--fc-shadow-xs) !important;
}

[data-theme="dark"] .sidebar ul.nav li.nav-header .profile {
  background: var(--fc-surface) !important;
  border-color: var(--fc-border-default) !important;
}

.sidebar ul.nav li.nav-header .profile .profile-name {
  color: var(--fc-text-primary) !important;
  font-weight: 600;
}

.sidebar ul.nav li.nav-header .profile .profile-email {
  color: var(--fc-text-tertiary) !important;
  font-size: 12px;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 31: CONTENT PADDING FIX
   ═══════════════════════════════════════════════════════════════ */

.content > .alert:first-child {
  margin-top: var(--fc-space-2) !important;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 32: SEARCH INPUT FIXES
   ═══════════════════════════════════════════════════════════════ */

#search_input {
  background: var(--fc-neutral-100) !important;
  color: var(--fc-text-primary) !important;
  border: 1px solid transparent !important;
  border-radius: var(--fc-radius-lg) !important;
  transition: all var(--fc-duration-normal) var(--fc-ease-default);
}

#search_input:focus {
  background: var(--fc-surface) !important;
  border-color: var(--fc-primary-500) !important;
  box-shadow: var(--fc-shadow-focus) !important;
}

#search_input::placeholder {
  color: var(--fc-text-tertiary) !important;
}

[data-theme="dark"] #search_input {
  background: var(--fc-neutral-800) !important;
  color: var(--fc-text-primary) !important;
  border-color: var(--fc-border-default) !important;
}

[data-theme="dark"] #search_input:focus {
  background: var(--fc-surface) !important;
  border-color: var(--fc-primary-500) !important;
}


/* ═══════════════════════════════════════════════════════════════
   SECTION 33: FIX SIDEBAR SUB-MENU BLUE BACKGROUND ISSUE
   ═══════════════════════════════════════════════════════════════ */

/* Force all sub-menu items to have transparent/no background */
.sidebar ul.nav li .nav-second-level li,
#side-menu li .nav-second-level li,
#setup-menu li .nav-second-level li {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 1px 0 !important;
}

/* Sub-menu anchor links - clean look */
.sidebar ul.nav li .nav-second-level li a,
#side-menu li .nav-second-level li a,
#setup-menu li .nav-second-level li a {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: var(--fc-radius-md) !important;
  color: var(--fc-text-secondary) !important;
  padding: 6px 12px 6px 40px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  margin: 0 6px !important;
}

/* Hover state - very subtle blue tint */
.sidebar ul.nav li .nav-second-level li a:hover,
#side-menu li .nav-second-level li a:hover,
#setup-menu li .nav-second-level li a:hover {
  background: rgba(37, 99, 235, 0.04) !important;
  color: var(--fc-text-primary) !important;
}

/* Active state - only active item gets blue */
.sidebar ul.nav li .nav-second-level li.active a,
#side-menu li .nav-second-level li.active a,
#setup-menu li .nav-second-level li.active a {
  background: rgba(37, 99, 235, 0.08) !important;
  color: var(--fc-primary-500) !important;
  font-weight: 600 !important;
}

/* Override any aggressive blue backgrounds from other CSS */
.sidebar ul.nav li .nav-second-level li a[style*="background"],
#side-menu li .nav-second-level li a[style*="background"] {
  background: transparent !important;
}

/* Dark mode fixes */
[data-theme="dark"] .sidebar ul.nav li .nav-second-level li,
[data-theme="dark"] #side-menu li .nav-second-level li,
[data-theme="dark"] #setup-menu li .nav-second-level li {
  background: transparent !important;
  border: none !important;
}

[data-theme="dark"] .sidebar ul.nav li .nav-second-level li a,
[data-theme="dark"] #side-menu li .nav-second-level li a,
[data-theme="dark"] #setup-menu li .nav-second-level li a {
  background: transparent !important;
  color: var(--fc-text-secondary) !important;
}

[data-theme="dark"] .sidebar ul.nav li .nav-second-level li a:hover,
[data-theme="dark"] #side-menu li .nav-second-level li a:hover,
[data-theme="dark"] #setup-menu li .nav-second-level li a:hover {
  background: rgba(255, 255, 255, 0.03) !important;
  color: var(--fc-text-primary) !important;
}

[data-theme="dark"] .sidebar ul.nav li .nav-second-level li.active a,
[data-theme="dark"] #side-menu li .nav-second-level li.active a,
[data-theme="dark"] #setup-menu li .nav-second-level li.active a {
  background: rgba(37, 99, 235, 0.12) !important;
  color: var(--fc-primary-400) !important;
}


/* ═══════════════════════════════════════════════════════════════
   SECTION 34: FIX DARK MODE DATATABLES & EXPORT BUTTONS
   ═══════════════════════════════════════════════════════════════ */

/* Fix Export buttons in dark mode */
[data-theme="dark"] .dt-buttons .dt-button,
[data-theme="dark"] .dt-buttons .btn,
[data-theme="dark"] .buttons-html5,
[data-theme="dark"] .buttons-excel,
[data-theme="dark"] .buttons-csv,
[data-theme="dark"] .buttons-pdf,
[data-theme="dark"] .buttons-print,
[data-theme="dark"] .buttons-collection {
  background: var(--fc-neutral-800) !important;
  color: var(--fc-text-primary) !important;
  border: 1px solid var(--fc-border-default) !important;
  border-radius: var(--fc-radius-lg) !important;
  box-shadow: none !important;
}

[data-theme="dark"] .dt-buttons .dt-button:hover,
[data-theme="dark"] .dt-buttons .btn:hover,
[data-theme="dark"] .buttons-html5:hover {
  background: var(--fc-neutral-700) !important;
  color: var(--fc-text-primary) !important;
  border-color: var(--fc-border-hover) !important;
}

/* Fix btn-default in dark mode (bootstrap-select actions, etc.) */
[data-theme="dark"] .btn-default {
  background: var(--fc-neutral-800) !important;
  color: var(--fc-text-secondary) !important;
  border-color: var(--fc-border-default) !important;
}

[data-theme="dark"] .btn-default:hover {
  background: var(--fc-neutral-700) !important;
  color: var(--fc-text-primary) !important;
  border-color: var(--fc-border-hover) !important;
}

[data-theme="dark"] .btn-default.active,
[data-theme="dark"] .btn-default:active,
[data-theme="dark"] .open > .dropdown-toggle.btn-default {
  background: var(--fc-neutral-600) !important;
  color: var(--fc-text-primary) !important;
  border-color: var(--fc-border-hover) !important;
}

/* Fix dropdown menu from export buttons */
[data-theme="dark"] .dt-button-collection.dropdown-menu {
  background: var(--fc-surface) !important;
  border: 1px solid var(--fc-border-default) !important;
  box-shadow: var(--fc-shadow-lg) !important;
}

[data-theme="dark"] .dt-button-collection.dropdown-menu a {
  color: var(--fc-text-primary) !important;
}

[data-theme="dark"] .dt-button-collection.dropdown-menu a:hover {
  background: var(--fc-neutral-800) !important;
  color: var(--fc-text-primary) !important;
}

/* Fix DataTables pagination current page in dark mode */
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--fc-primary-400) !important;
  color: #fff !important;
  border: none !important;
}

[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--fc-text-primary) !important;
  border: none !important;
}

/* Fix DataTables length dropdown and filter in dark mode */
[data-theme="dark"] .dataTables_wrapper .dataTables_length,
[data-theme="dark"] .dataTables_wrapper .dataTables_filter,
[data-theme="dark"] .dataTables_wrapper .dataTables_info,
[data-theme="dark"] .dataTables_wrapper .dataTables_processing {
  color: var(--fc-text-secondary) !important;
}

/* Fix table cell text color in dark mode - stronger override */
[data-theme="dark"] .dataTable tbody tr td,
[data-theme="dark"] .dt-table tbody tr td,
[data-theme="dark"] table.dataTable tbody tr td {
  color: var(--fc-text-secondary) !important;
  border-bottom-color: var(--fc-border-divider) !important;
}

[data-theme="dark"] .dataTable tbody tr:hover td,
[data-theme="dark"] .dataTable tbody tr:hover th,
[data-theme="dark"] .dt-table tbody tr:hover td,
[data-theme="dark"] .dt-table tbody tr:hover th {
  background-color: var(--fc-neutral-50) !important;
  color: var(--fc-text-primary) !important;
}
[data-theme="dark"] .dataTable tbody tr.info:hover td,
[data-theme="dark"] .dt-table tbody tr.info:hover td {
  background-color: rgba(37, 99, 235, 0.28) !important;
}
[data-theme="dark"] .dataTable tbody tr.warning:hover td,
[data-theme="dark"] .dt-table tbody tr.warning:hover td {
  background-color: rgba(245, 158, 11, 0.28) !important;
}
[data-theme="dark"] .dataTable tbody tr.success:hover td,
[data-theme="dark"] .dt-table tbody tr.success:hover td {
  background-color: rgba(16, 185, 129, 0.28) !important;
}
[data-theme="dark"] .dataTable tbody tr.danger:hover td,
[data-theme="dark"] .dt-table tbody tr.danger:hover td {
  background-color: rgba(239, 68, 68, 0.28) !important;
}

/* Fix any inline colored text in tables */
[data-theme="dark"] .dataTable td [style*="color: #"],
[data-theme="dark"] .dataTable td [style*="color:#"] {
  color: var(--fc-text-secondary) !important;
}

/* Fix table header in dark mode */
[data-theme="dark"] .dataTable thead th,
[data-theme="dark"] .dt-table thead th {
  background: var(--fc-neutral-800) !important;
  color: var(--fc-text-tertiary) !important;
  border-bottom-color: var(--fc-border-default) !important;
}

/* Fix "Showing X of Y entries" text */
[data-theme="dark"] .dataTables_info {
  color: var(--fc-text-tertiary) !important;
}

/* Fix sorting icons in dark mode */
[data-theme="dark"] table.dataTable thead .sorting,
[data-theme="dark"] table.dataTable thead .sorting_asc,
[data-theme="dark"] table.dataTable thead .sorting_desc {
  background-color: var(--fc-neutral-800) !important;
}

/* Fix table wrapper border in dark mode */
[data-theme="dark"] .dataTables_wrapper {
  background: transparent !important;
}

/* Fix any hardcoded light backgrounds in table area */
[data-theme="dark"] .dataTables_wrapper [style*="background: #fff"],
[data-theme="dark"] .dataTables_wrapper [style*="background-color: #fff"] {
  background: var(--fc-surface) !important;
}

/* Fix text-muted inside tables in dark mode */
[data-theme="dark"] .dataTable .text-muted,
[data-theme="dark"] .dt-table .text-muted {
  color: var(--fc-text-disabled) !important;
}

/* Fix links inside tables in dark mode — brighter for readability */
[data-theme="dark"] .dataTable td a:not(.btn),
[data-theme="dark"] .dt-table td a:not(.btn),
[data-theme="dark"] table td a:not(.btn) {
  color: var(--fc-primary-600) !important;
  text-decoration: underline;
  text-decoration-color: rgba(147, 197, 253, 0.3);
  text-underline-offset: 2px;
}

[data-theme="dark"] .dataTable td a:not(.btn):hover,
[data-theme="dark"] .dt-table td a:not(.btn):hover,
[data-theme="dark"] table td a:not(.btn):hover {
  color: var(--fc-primary-700) !important;
  text-decoration-color: rgba(191, 219, 254, 0.6);
}

/* Force override any module-specific link colors in tables */
[data-theme="dark"] .dataTable td a[style*="color"],
[data-theme="dark"] .dt-table td a[style*="color"],
[data-theme="dark"] table td a[style*="color"] {
  color: var(--fc-primary-600) !important;
}

/* Fix any hardcoded blue/purple text in table cells */
[data-theme="dark"] .dataTable td [style*="color: #2"],
[data-theme="dark"] .dataTable td [style*="color: #3"],
[data-theme="dark"] .dataTable td [style*="color: #1"],
[data-theme="dark"] .dt-table td [style*="color: #2"],
[data-theme="dark"] .dt-table td [style*="color: #3"],
[data-theme="dark"] .dt-table td [style*="color: #1"] {
  color: var(--fc-text-secondary) !important;
}

/* Specific fix for warehouse module link color */
[data-theme="dark"] .dataTable td a[href*="warehouse/view_warehouse_detail"],
[data-theme="dark"] .dataTable td a[href*="view_warehouse_detail"] {
  color: var(--fc-primary-600) !important;
}


/* ═══════════════════════════════════════════════════════════════
   SECTION 35: FIX LABELS & TAGS IN DARK MODE (System-wide)
   ═══════════════════════════════════════════════════════════════ */

/* Fix default label/tag background in dark mode */
[data-theme="dark"] .label,
[data-theme="dark"] .badge,
[data-theme="dark"] .label-tag {
  background: var(--fc-neutral-700) !important;
  color: var(--fc-text-secondary) !important;
}

/* Fix label-default in dark mode */
[data-theme="dark"] .label-default,
[data-theme="dark"] .badge-default {
  background: var(--fc-neutral-700) !important;
  color: var(--fc-text-secondary) !important;
}

/* Fix label-tag specifically in dark mode */
[data-theme="dark"] .label-tag {
  background: var(--fc-neutral-700) !important;
  color: var(--fc-text-secondary) !important;
  border: 1px solid var(--fc-border-default) !important;
}

/* Fix any tag-id-* classes in dark mode */
[data-theme="dark"] [class*="tag-id-"] {
  background: var(--fc-neutral-700) !important;
  color: var(--fc-text-secondary) !important;
  border: 1px solid var(--fc-border-default) !important;
}

/* Fix labels inside tables in dark mode */
[data-theme="dark"] table td .label,
[data-theme="dark"] table td .badge,
[data-theme="dark"] table td .label-tag {
  background: var(--fc-neutral-700) !important;
  color: var(--fc-text-secondary) !important;
}

/* Fix inline label colors from modules */
[data-theme="dark"] .label[style*="background"],
[data-theme="dark"] .badge[style*="background"] {
  background: var(--fc-neutral-700) !important;
  color: var(--fc-text-secondary) !important;
}

/* Fix label-primary/info/success/warning/danger hover in dark mode */
[data-theme="dark"] .label-primary:hover,
[data-theme="dark"] .label-info:hover,
[data-theme="dark"] .badge-primary:hover,
[data-theme="dark"] .badge-info:hover {
  background: rgba(59, 130, 246, 0.3) !important;
}

[data-theme="dark"] .label-success:hover,
[data-theme="dark"] .badge-success:hover {
  background: rgba(52, 211, 153, 0.3) !important;
}

[data-theme="dark"] .label-warning:hover,
[data-theme="dark"] .badge-warning:hover {
  background: rgba(251, 191, 36, 0.3) !important;
}

[data-theme="dark"] .label-danger:hover,
[data-theme="dark"] .badge-danger:hover {
  background: rgba(248, 113, 113, 0.3) !important;
}


/* ═══════════════════════════════════════════════════════════════
   SECTION 36: FIX WAREHOUSE MODULE & TABLE STRIPED IN DARK MODE
   ═══════════════════════════════════════════════════════════════ */

/* Fix warehouse module h4-color in dark mode */
[data-theme="dark"] .h4-color {
  color: var(--fc-danger-500) !important;
}

[data-theme="dark"] .hr-color {
  color: var(--fc-danger-500) !important;
  border-color: var(--fc-danger-500) !important;
}

/* Fix table-striped in dark mode */
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) {
  background: rgba(255, 255, 255, 0.02) !important;
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(even) {
  background: transparent !important;
}

[data-theme="dark"] .table-striped > tbody > tr:hover {
  background: rgba(255, 255, 255, 0.04) !important;
}

/* Fix project-overview table rows in dark mode */
[data-theme="dark"] tr.project-overview,
[data-theme="dark"] tr.project-overview > td {
  background: transparent !important;
  color: var(--fc-text-secondary) !important;
  border-color: var(--fc-border-divider) !important;
}

[data-theme="dark"] tr.project-overview > td.bold {
  color: var(--fc-text-primary) !important;
}

/* Fix warehouse module label tabs in dark mode */
[data-theme="dark"] .label-tab1 {
  border-color: var(--fc-success-500) !important;
  color: var(--fc-success-500) !important;
  background: rgba(16, 185, 129, 0.1) !important;
}

[data-theme="dark"] .label-tab2 {
  border-color: var(--fc-primary-400) !important;
  color: var(--fc-primary-400) !important;
  background: rgba(59, 130, 246, 0.1) !important;
}

[data-theme="dark"] .label-tab3 {
  border-color: var(--fc-danger-500) !important;
  color: var(--fc-danger-500) !important;
  background: rgba(239, 68, 68, 0.1) !important;
}

[data-theme="dark"] .label-tab4 {
  border-color: var(--fc-warning-500) !important;
  color: var(--fc-warning-500) !important;
  background: rgba(245, 158, 11, 0.1) !important;
}

[data-theme="dark"] .label-tabus {
  border-color: var(--fc-danger-500) !important;
  color: var(--fc-danger-500) !important;
  background: rgba(239, 68, 68, 0.1) !important;
}

/* Fix any table with .border class in dark mode */
[data-theme="dark"] table.border,
[data-theme="dark"] table.border > tbody,
[data-theme="dark"] table.border > thead {
  border-color: var(--fc-border-default) !important;
}

[data-theme="dark"] table.border td,
[data-theme="dark"] table.border th {
  border-color: var(--fc-border-divider) !important;
}

/* Fix panel-padding areas in dark mode */
[data-theme="dark"] .panel-padding {
  background: transparent !important;
}

/* Fix table inside tab content in dark mode */
[data-theme="dark"] .tab-content table,
[data-theme="dark"] .tab-content .table {
  background: var(--fc-surface) !important;
}

[data-theme="dark"] .tab-content table td,
[data-theme="dark"] .tab-content .table td {
  color: var(--fc-text-secondary) !important;
}

/* Fix horizontal tabs in dark mode */
[data-theme="dark"] .nav-tabs-horizontal {
  border-color: var(--fc-border-default) !important;
}

/* Fix horizontal-scrollable-tabs and panel-full-width-tabs backgrounds in dark mode */
[data-theme="dark"] .horizontal-scrollable-tabs .horizontal-tabs .nav-tabs-horizontal {
  background: var(--fc-surface) !important;
}

[data-theme="dark"] .panel-full-width-tabs .nav li a,
[data-theme="dark"] .panel-full-width-tabs.horizontal-scrollable-tabs .scroller,
[data-theme="dark"] .horizontal-scrollable-tabs .scroller {
  background: var(--fc-surface) !important;
  color: var(--fc-text-secondary) !important;
}

[data-theme="dark"] [dir="rtl"] .panel-full-width-tabs .nav {
  background: var(--fc-surface) !important;
}

[data-theme="dark"] .panel-full-width-tabs .nav li.active a {
  color: var(--fc-primary-400) !important;
  background: var(--fc-background) !important;
  border-bottom-color: var(--fc-primary-500) !important;
}

[data-theme="dark"] .panel-full-width-tabs .nav li a:hover {
  background: var(--fc-neutral-700) !important;
  color: var(--fc-text-primary) !important;
}

/* Fix nav-tabs-segmented in dark mode */
[data-theme="dark"] .nav-tabs-segmented,
[data-theme="dark"] .horizontal-scrollable-tabs .horizontal-tabs .nav-tabs-horizontal.nav-tabs-segmented {
  background: rgba(255, 255, 255, 0.05) !important;
}

[data-theme="dark"] .nav-tabs-segmented > li > a {
  color: var(--fc-text-secondary) !important;
}

[data-theme="dark"] .nav-tabs-segmented > li.active > a,
[data-theme="dark"] .nav-tabs-segmented > li.active > a:hover,
[data-theme="dark"] .nav-tabs-segmented > li.active > a:focus {
  background: var(--fc-surface) !important;
  color: var(--fc-text-primary) !important;
  box-shadow: var(--fc-shadow-sm) !important;
}

[data-theme="dark"] .horizontal-scrollable-tabs:has(.nav-tabs-segmented) .scroller {
  background: rgba(255, 255, 255, 0.05) !important;
}

/* Fix "No entries found" text in dark mode */
[data-theme="dark"] .dataTables_empty,
[data-theme="dark"] .dt-table tbody tr td.dataTables_empty {
  color: var(--fc-text-tertiary) !important;
}


/* ═══════════════════════════════════════════════════════════════
   SECTION 37: FIX HIGHCHARTS / CHARTS IN DARK MODE
   ═══════════════════════════════════════════════════════════════ */

/* Chart container background */
[data-theme="dark"] .highcharts-container {
  background: var(--fc-surface) !important;
}

[data-theme="dark"] .highcharts-root {
  background: var(--fc-surface) !important;
}

[data-theme="dark"] .highcharts-background {
  fill: var(--fc-surface) !important;
}

/* Chart title & subtitle */
[data-theme="dark"] .highcharts-title {
  fill: var(--fc-text-primary) !important;
  color: var(--fc-text-primary) !important;
}

[data-theme="dark"] .highcharts-subtitle {
  fill: var(--fc-text-tertiary) !important;
  color: var(--fc-text-tertiary) !important;
}

/* Axis labels */
[data-theme="dark"] .highcharts-axis-labels text {
  fill: var(--fc-text-secondary) !important;
}

[data-theme="dark"] .highcharts-yaxis-grid .highcharts-grid-line,
[data-theme="dark"] .highcharts-xaxis-grid .highcharts-grid-line {
  stroke: var(--fc-border-divider) !important;
}

[data-theme="dark"] .highcharts-axis-line,
[data-theme="dark"] .highcharts-tick {
  stroke: var(--fc-border-default) !important;
}

/* Legend */
[data-theme="dark"] .highcharts-legend-item text {
  fill: var(--fc-text-secondary) !important;
}

[data-theme="dark"] .highcharts-legend-box {
  fill: var(--fc-surface) !important;
  stroke: var(--fc-border-default) !important;
}

/* Tooltip */
[data-theme="dark"] .highcharts-tooltip-box {
  fill: var(--fc-neutral-800) !important;
  stroke: var(--fc-border-default) !important;
}

[data-theme="dark"] .highcharts-tooltip text {
  fill: var(--fc-text-primary) !important;
}

/* Data labels */
[data-theme="dark"] .highcharts-data-label text {
  fill: var(--fc-text-secondary) !important;
}

/* Credits */
[data-theme="dark"] .highcharts-credits {
  fill: var(--fc-text-disabled) !important;
}

/* Exporting menu */
[data-theme="dark"] .highcharts-contextmenu {
  background: var(--fc-surface) !important;
  border-color: var(--fc-border-default) !important;
}

[data-theme="dark"] .highcharts-menu {
  background: var(--fc-surface) !important;
  border-color: var(--fc-border-default) !important;
  box-shadow: var(--fc-shadow-lg) !important;
}

[data-theme="dark"] .highcharts-menu-item {
  color: var(--fc-text-primary) !important;
  background: var(--fc-surface) !important;
}

[data-theme="dark"] .highcharts-menu-item:hover {
  background: var(--fc-neutral-800) !important;
  color: var(--fc-text-primary) !important;
}

/* Plot bands & lines */
[data-theme="dark"] .highcharts-plot-band {
  fill: rgba(255, 255, 255, 0.03) !important;
}

[data-theme="dark"] .highcharts-plot-line {
  stroke: var(--fc-border-default) !important;
}

/* Fix any chart wrapper backgrounds */
[data-theme="dark"] [id*="chart"] > div,
[data-theme="dark"] [class*="chart"] > div {
  background: var(--fc-surface) !important;
}

/* General SVG charts dark mode support */
[data-theme="dark"] svg[class*="chart"] rect:first-child,
[data-theme="dark"] svg[class*="Chart"] rect:first-child {
  fill: var(--fc-surface) !important;
}


/* ═══════════════════════════════════════════════════════════════
   SECTION 38: FIX VERTICAL NAV TABS / NAV PILLS IN DARK MODE
   ═══════════════════════════════════════════════════════════════ */

/* Fix vertical nav-tabs / nav-stacked background in dark mode */
[data-theme="dark"] .nav-tabs.nav-stacked,
[data-theme="dark"] .nav-pills.nav-stacked,
[data-theme="dark"] .navbar-pills.nav-tabs,
[data-theme="dark"] .navbar-pills-flat.nav-tabs {
  background: transparent !important;
  border: none !important;
}

[data-theme="dark"] .nav-tabs.nav-stacked > li,
[data-theme="dark"] .nav-pills.nav-stacked > li,
[data-theme="dark"] .navbar-pills.nav-tabs > li,
[data-theme="dark"] .navbar-pills-flat.nav-tabs > li {
  background: transparent !important;
  border: none !important;
}

[data-theme="dark"] .nav-tabs.nav-stacked > li > a,
[data-theme="dark"] .nav-pills.nav-stacked > li > a,
[data-theme="dark"] .navbar-pills.nav-tabs > li > a,
[data-theme="dark"] .navbar-pills-flat.nav-tabs > li > a {
  background: transparent !important;
  color: var(--fc-text-secondary) !important;
  border: none !important;
  border-radius: var(--fc-radius-lg) !important;
}

[data-theme="dark"] .nav-tabs.nav-stacked > li > a:hover,
[data-theme="dark"] .nav-pills.nav-stacked > li > a:hover,
[data-theme="dark"] .navbar-pills.nav-tabs > li > a:hover,
[data-theme="dark"] .navbar-pills-flat.nav-tabs > li > a:hover {
  background: rgba(37, 99, 235, 0.08) !important;
  color: var(--fc-text-primary) !important;
}

[data-theme="dark"] .nav-tabs.nav-stacked > li.active > a,
[data-theme="dark"] .nav-tabs.nav-stacked > li.active > a:hover,
[data-theme="dark"] .nav-pills.nav-stacked > li.active > a,
[data-theme="dark"] .nav-pills.nav-stacked > li.active > a:hover,
[data-theme="dark"] .navbar-pills.nav-tabs > li.active > a,
[data-theme="dark"] .navbar-pills.nav-tabs > li.active > a:hover,
[data-theme="dark"] .navbar-pills-flat.nav-tabs > li.active > a,
[data-theme="dark"] .navbar-pills-flat.nav-tabs > li.active > a:hover {
  background: rgba(37, 99, 235, 0.12) !important;
  color: var(--fc-primary-400) !important;
  font-weight: 600 !important;
  border: none !important;
}

/* Fix any white backgrounds on nav container in dark mode */
[data-theme="dark"] .col-md-3 > .nav,
[data-theme="dark"] .col-md-3 > ul.nav,
[data-theme="dark"] .col-lg-3 > .nav,
[data-theme="dark"] .col-lg-3 > ul.nav {
  background: transparent !important;
}

/* Fix group-tabs / settings tabs in dark mode */
[data-theme="dark"] .group-tabs,
[data-theme="dark"] .settings-tabs,
[data-theme="dark"] .vertical-tabs {
  background: transparent !important;
}

[data-theme="dark"] .group-tabs > li > a,
[data-theme="dark"] .settings-tabs > li > a,
[data-theme="dark"] .vertical-tabs > li > a {
  background: transparent !important;
  color: var(--fc-text-secondary) !important;
  border: none !important;
}

[data-theme="dark"] .group-tabs > li.active > a,
[data-theme="dark"] .settings-tabs > li.active > a,
[data-theme="dark"] .vertical-tabs > li.active > a {
  background: rgba(37, 99, 235, 0.12) !important;
  color: var(--fc-primary-400) !important;
}


/* ═══════════════════════════════════════════════════════════════
   SECTION 39: FIX ANY REMAINING WHITE BACKGROUNDS IN DARK MODE
   ═══════════════════════════════════════════════════════════════ */

/* Aggressive fix for any nav list with white bg in dark mode */
[data-theme="dark"] ul.nav:not(.navbar-nav):not(.nav-second-level) {
  background: transparent !important;
}

[data-theme="dark"] ul.nav:not(.navbar-nav):not(.nav-second-level) > li {
  background: transparent !important;
}

[data-theme="dark"] ul.nav:not(.navbar-nav):not(.nav-second-level) > li > a {
  background: transparent !important;
  color: var(--fc-text-secondary) !important;
}

[data-theme="dark"] ul.nav:not(.navbar-nav):not(.nav-second-level) > li.active > a {
  background: rgba(37, 99, 235, 0.12) !important;
  color: var(--fc-primary-400) !important;
}

/* Fix col-md-3 / col-lg-3 side menus in dark mode */
[data-theme="dark"] .col-md-3 .nav-tabs,
[data-theme="dark"] .col-lg-3 .nav-tabs,
[data-theme="dark"] .col-md-3 .nav-pills,
[data-theme="dark"] .col-lg-3 .nav-pills {
  background: transparent !important;
  border: none !important;
}

/* Fix well / panel inside col-md-3 in dark mode */
[data-theme="dark"] .col-md-3 .well,
[data-theme="dark"] .col-lg-3 .well,
[data-theme="dark"] .col-md-3 .panel,
[data-theme="dark"] .col-lg-3 .panel {
  background: var(--fc-surface) !important;
  border-color: var(--fc-border-default) !important;
}


/* ═══════════════════════════════════════════════════════════════
   SECTION 40: POS SALES DARK MODE OVERRIDES
   ═══════════════════════════════════════════════════════════════ */

/* POS body background */
[data-theme="dark"] body.bodyfixed {
  background-color: var(--fc-background) !important;
  color: var(--fc-text-primary) !important;
}

/* POS header */
[data-theme="dark"] .row.header_pos {
  background-color: var(--fc-surface) !important;
  border-bottom: 1px solid var(--fc-border-default) !important;
}

/* POS product cells */
[data-theme="dark"] .product-cell {
  background-color: var(--fc-surface-raised) !important;
  border-color: var(--fc-border-default) !important;
}

[data-theme="dark"] .product-cell:hover {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5) !important;
}

/* POS product image */
[data-theme="dark"] .product-cell .product-image {
  background: var(--fc-surface-raised) !important;
}

/* POS product content */
[data-theme="dark"] .product-cell .product-content {
  background: var(--fc-surface-raised) !important;
}

[data-theme="dark"] .product-content .line.dot {
  border-bottom-color: var(--fc-border-divider) !important;
}

/* POS product title & price */
[data-theme="dark"] .product-cell .title {
  color: var(--fc-text-primary) !important;
}

[data-theme="dark"] .product-cell .title a {
  color: var(--fc-primary-400) !important;
}

[data-theme="dark"] .product-cell .price {
  color: var(--fc-danger-400) !important;
}

[data-theme="dark"] .product-cell .decriptions {
  color: var(--fc-text-tertiary) !important;
}

/* POS nav tabs */
[data-theme="dark"] .nav-tabs > li > a {
  background-color: var(--fc-neutral-800) !important;
  color: var(--fc-text-secondary) !important;
  border: none !important;
}

[data-theme="dark"] .nav-tabs > li.active > a,
[data-theme="dark"] .nav-tabs > li.active > a:hover {
  background-color: var(--fc-primary-500) !important;
  color: #fff !important;
}

/* POS tab content title panel */
[data-theme="dark"] .tab-content .title_pn {
  background: var(--fc-surface) !important;
  border-bottom: 1px solid var(--fc-border-default) !important;
}

/* POS right panel & cart */
[data-theme="dark"] .right_pos .tab-content.cart-tab,
[data-theme="dark"] .right_pos .tab-content .panel-body,
[data-theme="dark"] .right_pos .tab-content .panel-info,
[data-theme="dark"] .right_pos .tab-content .contents,
[data-theme="dark"] .right_pos .tab-content .client_tab_content {
  background: var(--fc-surface) !important;
  color: var(--fc-text-primary) !important;
}

/* POS cart items */
[data-theme="dark"] .row_item_cart {
  border-bottom-color: var(--fc-border-divider) !important;
}

[data-theme="dark"] .row_item_cart .title {
  color: var(--fc-text-primary) !important;
  border-bottom-color: var(--fc-primary-500) !important;
}

[data-theme="dark"] .row_item_cart .tax-title {
  color: var(--fc-text-tertiary) !important;
}

[data-theme="dark"] .row_item_cart .delete_item span {
  color: var(--fc-danger-500) !important;
}

/* POS search frame */
[data-theme="dark"] .search_frame {
  background: var(--fc-surface-raised) !important;
  border-color: var(--fc-border-default) !important;
}

[data-theme="dark"] .search_frame span,
[data-theme="dark"] .search_frame i {
  color: var(--fc-text-tertiary) !important;
}

[data-theme="dark"] .input_groups {
  background: var(--fc-surface-raised) !important;
  color: var(--fc-text-primary) !important;
  border-color: var(--fc-border-default) !important;
}

/* POS buttons */
[data-theme="dark"] .btn-success {
  background-color: var(--fc-success-500) !important;
  color: #fff !important;
}

[data-theme="dark"] .btn-primary {
  background-color: var(--fc-primary-500) !important;
  color: #fff !important;
}

/* POS info & prices */
[data-theme="dark"] .row.info {
  color: var(--fc-text-secondary) !important;
}

[data-theme="dark"] .prices .new_prices {
  color: var(--fc-danger-400) !important;
}

[data-theme="dark"] .prices .old_prices {
  color: var(--fc-text-tertiary) !important;
}

/* POS modal / dialog backgrounds */
[data-theme="dark"] .modal-content {
  background: var(--fc-surface) !important;
  color: var(--fc-text-primary) !important;
  border-color: var(--fc-border-default) !important;
}

[data-theme="dark"] .modal-header {
  background: var(--fc-neutral-800) !important;
  border-bottom-color: var(--fc-border-default) !important;
}

[data-theme="dark"] .modal-footer {
  background: var(--fc-neutral-800) !important;
  border-top-color: var(--fc-border-default) !important;
}

/* POS table menus */
[data-theme="dark"] .table-menu {
  background: transparent !important;
}

[data-theme="dark"] .table-menu td {
  color: var(--fc-text-secondary) !important;
}

[data-theme="dark"] .table-menu .menu-item {
  background: transparent !important;
}

/* POS current info text */
[data-theme="dark"] .current-info .info {
  color: var(--fc-text-secondary) !important;
}

[data-theme="dark"] .current-info .info span {
  color: var(--fc-text-secondary) !important;
}

/* POS staff login */
[data-theme="dark"] #staff_login {
  color: var(--fc-primary-400) !important;
}

/* POS quantity inputs */
[data-theme="dark"] .quantity input {
  background: var(--fc-surface-raised) !important;
  color: var(--fc-text-primary) !important;
  border-color: var(--fc-border-default) !important;
}

/* POS add-to-cart button */
[data-theme="dark"] .product-cell .add-to-cart {
  background-color: var(--fc-primary-500) !important;
  color: #fff !important;
}

[data-theme="dark"] .product-cell .add-to-cart:hover {
  background-color: var(--fc-primary-600) !important;
}

/* POS social buttons */
[data-theme="dark"] .product-cell .social li a {
  background-color: var(--fc-neutral-700) !important;
  color: var(--fc-text-primary) !important;
}

/* POS product new label */
[data-theme="dark"] .product-cell .product-new-label {
  background-color: var(--fc-primary-500) !important;
  color: #fff !important;
}

/* POS sku */
[data-theme="dark"] .sku {
  color: var(--fc-text-tertiary) !important;
}

/* Fix any white backgrounds in POS */
[data-theme="dark"] .wrap-content [style*="background: #fff"],
[data-theme="dark"] .wrap-content [style*="background-color: #fff"] {
  background: var(--fc-surface-raised) !important;
}

[data-theme="dark"] .wrap-content [style*="background: #ffffff"],
[data-theme="dark"] .wrap-content [style*="background-color: #ffffff"] {
  background: var(--fc-surface-raised) !important;
}

/* ═══════════════════════════════════════════════════════════════
   Inline Style Overrides — Dark Mode
   ═══════════════════════════════════════════════════════════════ */

/* Task comment form inline background */
[data-theme="dark"] [style*="background-color:#fff"],
[data-theme="dark"] [style*="background-color: #fff"] {
  background-color: var(--fc-surface-raised) !important;
}

/* Account planning radio buttons */
[data-theme="dark"] #radioBtn .notActive {
  background-color: var(--fc-surface-raised) !important;
  color: var(--fc-text-primary) !important;
  border-color: var(--fc-border-default) !important;
}

/* Error pages hardcoded styles override */
[data-theme="dark"] body[style*="background-color: #fff"],
[data-theme="dark"] body[style*="background: #fff"] {
  background-color: var(--fc-background) !important;
}

/* MFA head.php body background fix */
[data-theme="dark"] body {
  background-color: var(--fc-background) !important;
}

/* ═══════════════════════════════════════════════════════════════
   Gantt Chart — Dark Mode
   ═══════════════════════════════════════════════════════════════ */

[data-theme="dark"] .gantt .grid-header {
  fill: var(--fc-surface) !important;
  stroke: var(--fc-border-default) !important;
}

[data-theme="dark"] .gantt .grid-row {
  fill: var(--fc-surface) !important;
}

[data-theme="dark"] .gantt .grid-row:nth-child(even) {
  fill: var(--fc-surface-raised) !important;
}

[data-theme="dark"] .gantt .row-line {
  stroke: var(--fc-border-divider) !important;
}

[data-theme="dark"] .gantt .tick {
  stroke: var(--fc-border-default) !important;
}

[data-theme="dark"] .gantt .today-highlight {
  fill: var(--fc-warning-500) !important;
  opacity: 0.15 !important;
}

[data-theme="dark"] .gantt .arrow {
  stroke: var(--fc-text-secondary) !important;
}

[data-theme="dark"] .gantt .bar-label {
  fill: var(--fc-text-primary) !important;
}

[data-theme="dark"] .gantt .bar-label.big {
  fill: var(--fc-text-primary) !important;
}

[data-theme="dark"] .gantt .upper-text {
  fill: var(--fc-text-secondary) !important;
}

[data-theme="dark"] .gantt .lower-text {
  fill: var(--fc-text-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════
   Dropzone — Dark Mode
   ═══════════════════════════════════════════════════════════════ */

[data-theme="dark"] .dropzone {
  background: var(--fc-surface) !important;
  border-color: var(--fc-border-default) !important;
  color: var(--fc-text-primary) !important;
}

[data-theme="dark"] .dropzone .dz-preview {
  background: var(--fc-surface-raised) !important;
  border-color: var(--fc-border-default) !important;
}

[data-theme="dark"] .dropzone .dz-preview .dz-progress {
  border-color: var(--fc-border-default) !important;
  background: var(--fc-neutral-700) !important;
}

[data-theme="dark"] .dropzone .dz-preview .dz-progress .dz-upload {
  background: var(--fc-primary-500) !important;
}

[data-theme="dark"] .dropzone .dz-preview .dz-error-message {
  color: var(--fc-danger-500) !important;
}

[data-theme="dark"] .dropzone-previews {
  background: var(--fc-surface) !important;
}

/* ═══════════════════════════════════════════════════════════════
   Setup Menu Main Links — Dark Mode
   ═══════════════════════════════════════════════════════════════ */

[data-theme="dark"] #setup-menu > li > a {
  color: var(--fc-text-primary) !important;
}

[data-theme="dark"] #setup-menu > li > a:hover,
[data-theme="dark"] #setup-menu > li > a:focus {
  color: var(--fc-primary-500) !important;
  background: rgba(37, 99, 235, 0.08) !important;
}

[data-theme="dark"] #setup-menu > li.active > a {
  color: var(--fc-primary-500) !important;
  background: rgba(37, 99, 235, 0.08) !important;
  font-weight: 600 !important;
}

[data-theme="dark"] #setup-menu > li:first-child {
  color: var(--fc-text-primary) !important;
  border-bottom-color: var(--fc-border-default) !important;
}

/* ═══════════════════════════════════════════════════════════════
   Side Menu Main Links — Dark Mode
   ═══════════════════════════════════════════════════════════════ */

[data-theme="dark"] #side-menu > li > a {
  color: var(--fc-text-primary) !important;
}

[data-theme="dark"] #side-menu > li > a:hover,
[data-theme="dark"] #side-menu > li > a:focus {
  color: var(--fc-primary-500) !important;
  background: rgba(37, 99, 235, 0.08) !important;
}

[data-theme="dark"] #side-menu > li.active > a {
  color: var(--fc-primary-500) !important;
  background: rgba(37, 99, 235, 0.08) !important;
  font-weight: 600 !important;
}

/* ═══════════════════════════════════════════════════════════════
   xdSoft DateTimePicker — Dark Mode
   ═══════════════════════════════════════════════════════════════ */

[data-theme="dark"] .xdsoft_datetimepicker {
  background: var(--fc-surface) !important;
  border-color: var(--fc-border-default) !important;
  color: var(--fc-text-primary) !important;
}

[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_label {
  background: var(--fc-surface) !important;
  color: var(--fc-text-primary) !important;
}

[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_monthpicker {
  background: var(--fc-surface) !important;
}

[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_calendar td,
[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_calendar th {
  background: var(--fc-surface) !important;
  color: var(--fc-text-primary) !important;
  border-color: var(--fc-border-default) !important;
}

[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default,
[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current {
  background: var(--fc-primary-500) !important;
  color: #fff !important;
}

[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_calendar td:hover {
  background: var(--fc-primary-500) !important;
  color: #fff !important;
}

[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box {
  background: var(--fc-surface) !important;
  border-color: var(--fc-border-default) !important;
}

[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div {
  background: var(--fc-surface) !important;
  color: var(--fc-text-primary) !important;
  border-color: var(--fc-border-default) !important;
}

[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current {
  background: var(--fc-primary-500) !important;
  color: #fff !important;
}

[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div:hover {
  background: var(--fc-primary-500) !important;
  color: #fff !important;
}

[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_prev,
[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_next,
[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_today_button {
  background: var(--fc-surface-raised) !important;
  color: var(--fc-text-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════
   POS Module — Dark Mode Overrides
   ═══════════════════════════════════════════════════════════════ */

/* Override POS module :root variables in dark mode */
[data-theme="dark"] {
  --black-light: #e2e8f0;
  --black: #f1f5f9;
  --black-dim: #94a3b8;
  --gray: #1e293b;
  --light-gray: rgba(51, 65, 85, 0.7);
  --white: #1e293b;
  --gray-dim: #334155;
  --navy: #93c5fd;
  --blue: #60a5fa;
  --primary: #2563eb;
  --secondary: #7c3aed;
}

/* POS body background */
[data-theme="dark"] body.pos-body,
[data-theme="dark"] body:has(.main-wrapper) {
  background-color: var(--fc-background) !important;
  color: var(--fc-text-primary) !important;
}

/* POS main wrapper */
[data-theme="dark"] .main-wrapper,
[data-theme="dark"] .content,
[data-theme="dark"] .content-right-wrp {
  background-color: var(--fc-background) !important;
}

/* POS product listing area */
[data-theme="dark"] .my-content,
[data-theme="dark"] .bg-gray {
  background-color: var(--fc-surface) !important;
}

/* POS product cards */
[data-theme="dark"] .product-listing .col,
[data-theme="dark"] .product-listing .col-lg-3 {
  background-color: var(--fc-surface-raised) !important;
  border-color: var(--fc-border-default) !important;
}

[data-theme="dark"] .product-listing .col h5,
[data-theme="dark"] .product-listing .col p {
  color: var(--fc-text-primary) !important;
}

/* POS cart / invoice details */
[data-theme="dark"] .cart-details,
[data-theme="dark"] #invoice-parent {
  background-color: var(--fc-surface) !important;
}

/* POS table */
[data-theme="dark"] .items_table {
  background-color: var(--fc-surface) !important;
}

[data-theme="dark"] .items_table thead th {
  background-color: var(--fc-surface-raised) !important;
  color: var(--fc-text-primary) !important;
  border-color: var(--fc-border-default) !important;
}

[data-theme="dark"] .items_table tbody tr {
  background-color: var(--fc-surface) !important;
  border-color: var(--fc-border-default) !important;
}

[data-theme="dark"] .items_table tbody tr td {
  color: var(--fc-text-primary) !important;
  border-color: var(--fc-border-default) !important;
}

/* POS cart footer */
[data-theme="dark"] .cart-footer {
  background-color: var(--fc-surface) !important;
  border-color: var(--fc-border-default) !important;
}

[data-theme="dark"] .cart-footer h3,
[data-theme="dark"] .cart-footer h4 {
  color: var(--fc-text-primary) !important;
}

/* POS buttons that use .bg-white */
[data-theme="dark"] .btn.bg-white {
  background-color: var(--fc-surface-raised) !important;
  color: var(--fc-text-primary) !important;
  border-color: var(--fc-border-default) !important;
}

[data-theme="dark"] .btn.bg-white:hover {
  background-color: var(--fc-neutral-700) !important;
}

/* POS inputs */
[data-theme="dark"] .custom-input-text,
[data-theme="dark"] #item_search,
[data-theme="dark"] .theme-select {
  background-color: var(--fc-surface-raised) !important;
  color: var(--fc-text-primary) !important;
  border-color: var(--fc-border-default) !important;
}

[data-theme="dark"] .custom-input-text::placeholder,
[data-theme="dark"] #item_search::placeholder {
  color: var(--fc-text-tertiary) !important;
}

/* POS select dropdowns */
[data-theme="dark"] .theme-select option {
  background-color: var(--fc-surface-raised) !important;
  color: var(--fc-text-primary) !important;
}

/* POS text-black utility */
[data-theme="dark"] .text-black {
  color: var(--fc-text-primary) !important;
}

/* POS tag-invoice */
[data-theme="dark"] .tag-invoice {
  background-color: var(--fc-primary-500) !important;
  color: #fff !important;
}

/* POS nav-mob (mobile header) */
[data-theme="dark"] .nav-mob {
  background-color: var(--fc-surface) !important;
  border-color: var(--fc-border-default) !important;
}

/* POS sidebar */
[data-theme="dark"] .pos-sidebar,
[data-theme="dark"] .sidebar {
  background-color: var(--fc-surface) !important;
  border-color: var(--fc-border-default) !important;
}

/* POS modal */
[data-theme="dark"] .modal-content:has(.pos-modal) {
  background-color: var(--fc-surface) !important;
  color: var(--fc-text-primary) !important;
}

/* POS autocomplete results */
[data-theme="dark"] .ui-widget-content {
  background: var(--fc-surface) !important;
  color: var(--fc-text-primary) !important;
  border-color: var(--fc-border-default) !important;
}

[data-theme="dark"] .ui-menu-item-wrapper {
  color: var(--fc-text-primary) !important;
}

[data-theme="dark"] .ui-menu-item-wrapper:hover,
[data-theme="dark"] .ui-state-active {
  background: var(--fc-primary-500) !important;
  color: #fff !important;
}

/* POS radio buttons */
[data-theme="dark"] .radio-circle {
  background-color: var(--fc-surface-raised) !important;
  border-color: var(--fc-primary-500) !important;
}

/* POS product image placeholders */
[data-theme="dark"] .product-listing img,
[data-theme="dark"] .product-listing .col img {
  background-color: var(--fc-surface-raised) !important;
}

/* POS cart table specific fixes */
[data-theme="dark"] .cart-table tr td {
  background: var(--fc-surface) !important;
  border-bottom: 20px solid var(--fc-background) !important;
}

[data-theme="dark"] .cart-table th {
  background-color: var(--fc-surface-raised) !important;
  color: var(--fc-text-primary) !important;
}

[data-theme="dark"] .cart-table tr:first-child {
  border-bottom-color: var(--fc-border-default) !important;
}

/* POS tag invoice */
[data-theme="dark"] .tag-invoice {
  background-color: var(--fc-primary-500) !important;
}

[data-theme="dark"] .tag-invoice p {
  color: #fff !important;
}

/* POS total area */
[data-theme="dark"] .total-here h3,
[data-theme="dark"] .total-here h4 {
  color: var(--fc-text-primary) !important;
}

/* POS bill-details */
[data-theme="dark"] .bill-details {
  background-color: var(--fc-surface) !important;
}

/* POS checkout button */
[data-theme="dark"] .btn.checkout {
  background-color: var(--fc-primary-500) !important;
  color: #fff !important;
}

/* POS clear button */
[data-theme="dark"] .btn.b-red-btn {
  background-color: var(--fc-surface-raised) !important;
  color: var(--fc-danger-500) !important;
  border-color: var(--fc-danger-500) !important;
}

/* POS hold invoice / edit invoice buttons */
[data-theme="dark"] .btn svg path {
  stroke: currentColor !important;
}

/* POS no items message */
[data-theme="dark"] #noItemsMessage h3 {
  color: var(--fc-text-tertiary) !important;
}

/* POS mobile elements */
[data-theme="dark"] .cart-mobile .tag {
  background-color: var(--fc-danger-500) !important;
  color: #fff !important;
}

/* POS body fallback (for browsers without :has support) */
[data-theme="dark"] body {
  background-color: var(--fc-background) !important;
}

/* =========================================================
   AUTHENTICATION PAGES - FutureCloud Design System
   ========================================================= */

/* Auth page background */
.fc-auth-bg {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 50%, #f8fafc 100%);
  position: relative;
}

.fc-auth-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 20% 40%, rgba(37, 99, 235, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 80% 60%, rgba(124, 58, 237, 0.05) 0%, transparent 50%);
  pointer-events: none;
}

html[data-theme="dark"] .fc-auth-bg {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
}

html[data-theme="dark"] .fc-auth-bg::before {
  background:
    radial-gradient(ellipse 80% 50% at 20% 40%, rgba(37, 99, 235, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 80% 60%, rgba(124, 58, 237, 0.08) 0%, transparent 50%);
}

/* Auth container */
.fc-auth-container {
  width: 100%;
  max-width: 420px;
  position: relative;
  z-index: 1;
}

/* Auth card */
.fc-auth-card {
  background: #ffffff;
  border-radius: 16px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 4px 8px rgba(0, 0, 0, 0.04),
    0 12px 24px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(226, 232, 240, 0.8);
  overflow: hidden;
  position: relative;
}

.fc-auth-card::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg, #2563eb, #7c3aed);
}

html[data-theme="dark"] .fc-auth-card {
  background: #1e293b;
  border-color: rgba(51, 65, 85, 0.8);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.2),
    0 4px 8px rgba(0, 0, 0, 0.2),
    0 12px 24px rgba(0, 0, 0, 0.3);
}

/* Auth card body */
.fc-auth-card__body {
  padding: 2rem 1.75rem;
}

@media (min-width: 640px) {
  .fc-auth-card__body {
    padding: 2.5rem 2.25rem;
  }
}

/* Auth header */
.fc-auth-header {
  text-align: center;
  margin-bottom: 1.75rem;
}

.fc-auth-header__logo {
  margin-bottom: 1.25rem;
}

.fc-auth-header__logo img {
  max-height: 48px;
  width: auto;
  margin: 0 auto;
  display: block;
}

.fc-auth-header__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 0.375rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.fc-auth-header__subtitle {
  font-size: 0.9375rem;
  color: #64748b;
  margin: 0;
  font-weight: 400;
}

html[data-theme="dark"] .fc-auth-header__title {
  color: #f1f5f9;
}

html[data-theme="dark"] .fc-auth-header__subtitle {
  color: #94a3b8;
}

/* Auth form */
.fc-auth-form .form-group {
  margin-bottom: 1.25rem;
}

.fc-auth-form .form-group:last-child {
  margin-bottom: 0;
}

.fc-auth-form label.control-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #334155;
  margin-bottom: 0.5rem;
  letter-spacing: 0.01em;
}

html[data-theme="dark"] .fc-auth-form label.control-label {
  color: #cbd5e1;
}

/* Auth input wrapper with icon */
.fc-auth-input-wrap {
  position: relative;
}

.fc-auth-input-wrap .form-control {
  padding-left: 2.75rem !important;
  padding-right: 1rem !important;
  height: 44px !important;
  border-radius: 10px !important;
  border: 1.5px solid #e2e8f0 !important;
  background: #f8fafc !important;
  color: #0f172a !important;
  font-size: 0.9375rem !important;
  font-weight: 400 !important;
  transition: all 0.15s ease !important;
  box-shadow: none !important;
  line-height: 1.5 !important;
}

.fc-auth-input-wrap .form-control:focus {
  border-color: #2563eb !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
  outline: none !important;
}

.fc-auth-input-wrap .form-control::placeholder {
  color: #94a3b8 !important;
  opacity: 1;
}

html[data-theme="dark"] .fc-auth-input-wrap .form-control {
  border-color: #475569 !important;
  background: #0f172a !important;
  color: #f1f5f9 !important;
}

html[data-theme="dark"] .fc-auth-input-wrap .form-control:focus {
  border-color: #3b82f6 !important;
  background: #1e293b !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}

/* Fix Chrome autofill background in auth inputs */
.fc-auth-input-wrap .form-control:-webkit-autofill,
.fc-auth-input-wrap .form-control:-webkit-autofill:hover,
.fc-auth-input-wrap .form-control:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 30px #f8fafc inset !important;
  -webkit-text-fill-color: #0f172a !important;
  caret-color: #0f172a !important;
  transition: background-color 5000s ease-in-out 0s;
}

html[data-theme="dark"] .fc-auth-input-wrap .form-control:-webkit-autofill,
html[data-theme="dark"] .fc-auth-input-wrap .form-control:-webkit-autofill:hover,
html[data-theme="dark"] .fc-auth-input-wrap .form-control:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 30px #0f172a inset !important;
  -webkit-text-fill-color: #f1f5f9 !important;
  caret-color: #f1f5f9 !important;
}

/* RTL: swap icon padding */
[dir="rtl"] .fc-auth-input-wrap .form-control {
  padding-left: 1rem !important;
  padding-right: 2.75rem !important;
}

/* Auth input icon */
.fc-auth-input-icon {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

[dir="rtl"] .fc-auth-input-icon {
  left: auto;
  right: 0.875rem;
}

.fc-auth-input-wrap .form-control:focus + .fc-auth-input-icon,
.fc-auth-input-wrap:focus-within .fc-auth-input-icon {
  color: #2563eb;
}

html[data-theme="dark"] .fc-auth-input-wrap:focus-within .fc-auth-input-icon {
  color: #60a5fa;
}

/* Auth password row */
.fc-auth-password-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.fc-auth-password-row label.control-label {
  margin-bottom: 0;
}

.fc-auth-link {
  font-size: 0.8125rem;
  color: #2563eb;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s ease;
}

.fc-auth-link:hover {
  color: #1d4ed8;
  text-decoration: underline;
}

html[data-theme="dark"] .fc-auth-link {
  color: #60a5fa;
}

html[data-theme="dark"] .fc-auth-link:hover {
  color: #93c5fd;
}

/* Auth checkbox */
.fc-auth-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: #475569;
  cursor: pointer;
}

.fc-auth-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid #cbd5e1;
  accent-color: #2563eb;
  cursor: pointer;
}

html[data-theme="dark"] .fc-auth-checkbox {
  color: #cbd5e1;
}

html[data-theme="dark"] .fc-auth-checkbox input[type="checkbox"] {
  border-color: #475569;
}

/* Auth button */
.fc-auth-btn {
  display: block;
  width: 100%;
  padding: 0.75rem 1.5rem;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: #ffffff;
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
  letter-spacing: 0.01em;
}

.fc-auth-btn:hover {
  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
  transform: translateY(-1px);
}

.fc-auth-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.25);
}

html[data-theme="dark"] .fc-auth-btn {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3);
}

html[data-theme="dark"] .fc-auth-btn:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

/* Auth alerts */
.fc-auth-alert {
  border-radius: 10px;
  padding: 0.875rem 1rem;
  font-size: 0.875rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
}

.fc-auth-alert--danger {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

.fc-auth-alert--success {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #166534;
}

.fc-auth-alert--info {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1e40af;
}

html[data-theme="dark"] .fc-auth-alert--danger {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
}

html[data-theme="dark"] .fc-auth-alert--success {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.2);
  color: #86efac;
}

html[data-theme="dark"] .fc-auth-alert--info {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
}

/* Back to login link */
.fc-auth-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  color: #64748b;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s ease;
  margin-top: 0.5rem;
}

.fc-auth-back-link:hover {
  color: #2563eb;
}

html[data-theme="dark"] .fc-auth-back-link {
  color: #94a3b8;
}

html[data-theme="dark"] .fc-auth-back-link:hover {
  color: #60a5fa;
}

/* Recaptcha styling */
.fc-auth-recaptcha {
  margin-bottom: 1.25rem;
}

/* Footer text */
.fc-auth-footer {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 0.8125rem;
  color: #94a3b8;
}

html[data-theme="dark"] .fc-auth-footer {
  color: #64748b;
}

/* Override old auth page classes to ensure smooth transition */
.login_admin,
.authentication.forgot-password,
.authentication.reset-password,
.authentication.set-password,
.authentication.two-factor-authentication-code {
  background: transparent !important;
}

/* Ensure old wrappers don't conflict */
.login_admin .authentication-form-wrapper,
.authentication .authentication-form-wrapper,
.authentication .authentication-form-wrappe {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Hide old bg-white card if it exists alongside fc-auth-card */
.fc-auth-card ~ .tw-bg-white,
.fc-auth-container ~ div > .tw-bg-white {
  display: none;
}

/* Auth secondary button (Register) */
.fc-auth-btn--secondary {
  display: block;
  width: 100%;
  padding: 0.75rem 1.5rem;
  border-radius: 10px;
  border: 1.5px solid #e2e8f0;
  background: transparent;
  color: #475569;
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.fc-auth-btn--secondary:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #334155;
  text-decoration: none;
}

html[data-theme="dark"] .fc-auth-btn--secondary {
  background: transparent !important;
  border-color: #475569;
  color: #cbd5e1;
}

html[data-theme="dark"] .fc-auth-btn--secondary:hover {
  background: #334155 !important;
  border-color: #64748b;
  color: #f1f5f9;
}

/* Auth selectpicker (language dropdown) */
.fc-auth-card .bootstrap-select > .dropdown-toggle {
  padding-left: 2.75rem !important;
  padding-right: 2.5rem !important;
  height: 44px !important;
  border-radius: 10px !important;
  border: 1.5px solid #e2e8f0 !important;
  background: #f8fafc !important;
  color: #0f172a !important;
  font-size: 0.9375rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  box-shadow: none !important;
}

.fc-auth-card .bootstrap-select > .dropdown-toggle:focus,
.fc-auth-card .bootstrap-select > .dropdown-toggle:hover {
  border-color: #2563eb !important;
  background: #ffffff !important;
  outline: none !important;
}

html[data-theme="dark"] .fc-auth-card .bootstrap-select > .dropdown-toggle {
  border-color: #475569 !important;
  background: #0f172a !important;
  color: #f1f5f9 !important;
}

html[data-theme="dark"] .fc-auth-card .bootstrap-select > .dropdown-toggle:focus,
html[data-theme="dark"] .fc-auth-card .bootstrap-select > .dropdown-toggle:hover {
  border-color: #3b82f6 !important;
  background: #1e293b !important;
}

/* Fix bootstrap-select inner text background in auth */
.fc-auth-card .bootstrap-select .filter-option,
.fc-auth-card .bootstrap-select .filter-option-inner,
.fc-auth-card .bootstrap-select .filter-option-inner-inner {
  background: transparent !important;
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL CUSTOMERS BODY — permanent dark background on all pages
   Applied unconditionally — same as login page fc-auth-bg
   ═══════════════════════════════════════════════════════════════ */

body.customers {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%) !important;
  min-height: 100vh;
  color: #e2e8f0;
}

/* Navbar always dark */
body.customers .navbar-default {
  background: #0f172a !important;
  border-bottom: 1px solid rgba(241, 245, 249, 0.08) !important;
}
body.customers .navbar-default .navbar-nav > li > a {
  color: #94a3b8 !important;
}
body.customers .navbar-default .navbar-nav > li > a:hover,
body.customers .navbar-default .navbar-nav > li > a:focus {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #f1f5f9 !important;
  border-radius: 6px !important;
}
body.customers .navbar-default .navbar-nav > .active > a,
body.customers .navbar-default .navbar-nav > .active > a:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #f1f5f9 !important;
  border-radius: 6px !important;
}
body.customers .navbar-default .navbar-brand,
body.customers .fc-navbar-brand-text {
  color: #f1f5f9 !important;
}

/* Light mode override — if user switches to light via toggle */
html:not([data-theme="dark"]) body.customers {
  background: linear-gradient(135deg, #f1f5f9 0%, #e8edf5 50%, #f1f5f9 100%) !important;
  color: #0f172a;
}
html:not([data-theme="dark"]) body.customers .navbar-default {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
html:not([data-theme="dark"]) body.customers .navbar-default .navbar-nav > li > a {
  color: #475569 !important;
}
html:not([data-theme="dark"]) body.customers .navbar-default .navbar-nav > li > a:hover {
  background: rgba(0, 0, 0, 0.05) !important;
  color: #0f172a !important;
}
html:not([data-theme="dark"]) body.customers .navbar-default .navbar-nav > .active > a {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}
html:not([data-theme="dark"]) body.customers .navbar-default .navbar-brand,
html:not([data-theme="dark"]) body.customers .fc-navbar-brand-text {
  color: #0f172a !important;
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL CUSTOMERS NAVBAR — applies to ALL customer portal pages
   Overrides style.css hardcoded colors
   ═══════════════════════════════════════════════════════════════ */

/* Remove the blue CTA badge from Login button on all pages */
.navbar-default .navbar-nav > li.customers-nav-item-login > a {
  background: transparent !important;
  color: #475569 !important;
  border: none !important;
  font-weight: 500;
  border-radius: 6px !important;
}
.navbar-default .navbar-nav > li.customers-nav-item-login > a:hover,
.navbar-default .navbar-nav > li.customers-nav-item-login > a:focus {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

/* Dark mode — all pages navbar background */
html[data-theme="dark"] .navbar-default {
  background: #0f172a !important;
  border-bottom: 1px solid rgba(241, 245, 249, 0.08) !important;
}
html[data-theme="dark"] .navbar-default .navbar-nav > li > a {
  color: #94a3b8 !important;
  background: transparent !important;
}
html[data-theme="dark"] .navbar-default .navbar-nav > li > a:hover,
html[data-theme="dark"] .navbar-default .navbar-nav > li > a:focus {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #f1f5f9 !important;
  border-radius: 6px !important;
}
html[data-theme="dark"] .navbar-default .navbar-nav > .active > a,
html[data-theme="dark"] .navbar-default .navbar-nav > .active > a:hover,
html[data-theme="dark"] .navbar-default .navbar-nav > .active > a:focus {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #f1f5f9 !important;
  border-radius: 6px !important;
}
html[data-theme="dark"] .navbar-default .navbar-nav > li.customers-nav-item-login > a {
  color: #94a3b8 !important;
  background: transparent !important;
}
html[data-theme="dark"] .navbar-default .navbar-nav > li.customers-nav-item-login > a:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #f1f5f9 !important;
}
html[data-theme="dark"] .navbar-default .navbar-brand,
html[data-theme="dark"] .fc-navbar-brand-text {
  color: #f1f5f9 !important;
}


/* Dark mode page background for all customer pages (data-theme) */
html[data-theme="dark"] body.customers {
  background: #0f172a !important;
  color: #e2e8f0;
}

/* =========================================================
   CUSTOMERS LOGIN PAGE — Full Fixes
   ========================================================= */

/* FIX 1: Centering — break fc-auth-bg out of Bootstrap grid */
body.customers_login .fc-auth-bg {
  position: fixed !important;
  top: 60px !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  min-height: unset !important;
  margin: 0 !important;
  z-index: 0;
}

body.customers_login {
  overflow: hidden;
}

/* FIX 2: Navbar — brand text fallback */
.fc-navbar-brand-text {
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  color: #0f172a !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center;
  height: 60px;
}

html[data-theme="dark"] .fc-navbar-brand-text,
.customers_login .fc-navbar-brand-text {
  color: #f1f5f9 !important;
}

/* FIX 2: Navbar — light mode */
body.customers_login .navbar-default {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

/* FIX 2: Navbar — dark mode (data-theme attribute) */
html[data-theme="dark"] body.customers_login .navbar-default {
  background: #0f172a !important;
  border-bottom: 1px solid rgba(241, 245, 249, 0.08) !important;
}

/* All nav links */
html[data-theme="dark"] body.customers_login .navbar-default .navbar-nav > li > a {
  color: #94a3b8 !important;
  background: transparent !important;
}
html[data-theme="dark"] body.customers_login .navbar-default .navbar-nav > li > a:hover,
html[data-theme="dark"] body.customers_login .navbar-default .navbar-nav > li > a:focus {
  color: #f1f5f9 !important;
  background: rgba(255,255,255,0.06) !important;
  border-radius: 6px !important;
}

/* Active item (current page link) */
html[data-theme="dark"] body.customers_login .navbar-default .navbar-nav > li.active > a,
html[data-theme="dark"] body.customers_login .navbar-default .navbar-nav > li.active > a:hover,
html[data-theme="dark"] body.customers_login .navbar-default .navbar-nav > li.active > a:focus {
  color: #f1f5f9 !important;
  background: rgba(255,255,255,0.1) !important;
  border-radius: 6px !important;
}

/* Login nav item — on the login page itself, remove the CTA button style
   (light mode: muted active link, dark mode: handled by rules below) */
body.customers_login .navbar-default .navbar-nav > li.customers-nav-item-login > a {
  background: transparent !important;
  color: #475569 !important;
  border: none !important;
  font-weight: 500;
}
body.customers_login .navbar-default .navbar-nav > li.customers-nav-item-login > a:hover,
body.customers_login .navbar-default .navbar-nav > li.customers-nav-item-login > a:focus {
  background: rgba(0,0,0,0.05) !important;
  color: #0f172a !important;
  border-radius: 6px !important;
}


/* FIX 3: Language selectpicker
   Target via parent .fc-auth-lang-group — avoids class-name guessing */

/* Wrapper: clear Bootstrap .form-control defaults and match input bg */
body.customers_login .fc-auth-lang-group .bootstrap-select {
  width: 100% !important;
  display: block !important;
  padding: 0 !important;
  border: none !important;
  background: #f8fafc !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body.customers_login .fc-auth-lang-group .bootstrap-select {
  background: #0f172a !important;
}

/* Toggle button — light mode */
body.customers_login .fc-auth-lang-group .bootstrap-select > .dropdown-toggle {
  width: 100% !important;
  height: 44px !important;
  padding: 0 2.5rem 0 1rem !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  background: #f8fafc !important;
  color: #0f172a !important;
  font-size: 0.9375rem !important;
  font-weight: 400 !important;
  line-height: 42px !important;
  text-align: left !important;
  box-shadow: none !important;
}
body.customers_login .fc-auth-lang-group .bootstrap-select > .dropdown-toggle:focus,
body.customers_login .fc-auth-lang-group .bootstrap-select > .dropdown-toggle:hover {
  border-color: #2563eb !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
  outline: none !important;
}

/* Toggle button — dark mode (data-theme) */
html[data-theme="dark"] body.customers_login .fc-auth-lang-group .bootstrap-select > .dropdown-toggle {
  border-color: #475569 !important;
  background: #0f172a !important;
  color: #f1f5f9 !important;
}
html[data-theme="dark"] body.customers_login .fc-auth-lang-group .bootstrap-select > .dropdown-toggle:focus,
html[data-theme="dark"] body.customers_login .fc-auth-lang-group .bootstrap-select > .dropdown-toggle:hover {
  border-color: #3b82f6 !important;
  background: #1e293b !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}

/* Dropdown menu — dark mode */
html[data-theme="dark"] body.customers_login .fc-auth-lang-group .dropdown-menu {
  background: #1e293b !important;
  border: 1px solid #334155 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}
html[data-theme="dark"] body.customers_login .fc-auth-lang-group .dropdown-menu li a {
  color: #cbd5e1 !important;
}
html[data-theme="dark"] body.customers_login .fc-auth-lang-group .dropdown-menu li a:hover {
  background: #334155 !important;
  color: #f1f5f9 !important;
}
html[data-theme="dark"] body.customers_login .fc-auth-lang-group .dropdown-menu li.selected a {
  background: #172554 !important;
  color: #60a5fa !important;
}
html[data-theme="dark"] body.customers_login .fc-auth-lang-group .bs-searchbox input {
  background: #0f172a !important;
  border-color: #475569 !important;
  color: #f1f5f9 !important;
}


.customers_login .fc-auth-header__title {
  margin-bottom: 0;
}


/* ═══════════════════════════════════════════════════════════════
   FORGOT PASSWORD PAGE — Full-page centered layout
   Same treatment as customers_login
   ═══════════════════════════════════════════════════════════════ */

body.customers_forgot_password .fc-auth-bg {
  position: fixed !important;
  top: 60px !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  min-height: unset !important;
  margin: 0 !important;
  z-index: 0;
}
body.customers_forgot_password { overflow: hidden; }

/* Navbar — light */
body.customers_forgot_password .navbar-default {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

/* Navbar — dark */
html[data-theme="dark"] body.customers_forgot_password .navbar-default {
  background: #0f172a !important;
  border-bottom: 1px solid rgba(241, 245, 249, 0.08) !important;
}
html[data-theme="dark"] body.customers_forgot_password .navbar-default .navbar-nav > li > a {
  color: #94a3b8 !important;
  background: transparent !important;
}
html[data-theme="dark"] body.customers_forgot_password .navbar-default .navbar-nav > li.active > a {
  color: #f1f5f9 !important;
  background: rgba(255,255,255,0.1) !important;
  border-radius: 6px !important;
}


/* ═══════════════════════════════════════════════════════════════
   RESET PASSWORD PAGE — Full-page centered layout
   ═══════════════════════════════════════════════════════════════ */

body.customers_reset_password .fc-auth-bg {
  position: fixed !important;
  top: 60px !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  min-height: unset !important;
  margin: 0 !important;
  z-index: 0;
}
body.customers_reset_password { overflow: hidden; }

body.customers_reset_password .navbar-default {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
html[data-theme="dark"] body.customers_reset_password .navbar-default {
  background: #0f172a !important;
  border-bottom: 1px solid rgba(241, 245, 249, 0.08) !important;
}
html[data-theme="dark"] body.customers_reset_password .navbar-default .navbar-nav > li > a {
  color: #94a3b8 !important;
  background: transparent !important;
}


/* ═══════════════════════════════════════════════════════════════
   REGISTER PAGE — Dark Mode Support
   body.customers.register
   ═══════════════════════════════════════════════════════════════ */

/* Navbar */
html[data-theme="dark"] body.customers.register .navbar-default {
  background: #0f172a !important;
  border-bottom: 1px solid rgba(241, 245, 249, 0.08) !important;
}
html[data-theme="dark"] body.customers.register .navbar-default .navbar-nav > li > a {
  color: #94a3b8 !important;
}

/* Page background */
html[data-theme="dark"] body.customers.register {
  background: #0f172a !important;
  color: #e2e8f0 !important;
}

/* Panel card */
html[data-theme="dark"] body.customers.register .panel_s {
  background: #1e293b !important;
  border-color: #334155 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
}
html[data-theme="dark"] body.customers.register .panel-body {
  background: #1e293b !important;
}
html[data-theme="dark"] body.customers.register .panel-footer {
  background: #0f172a !important;
  border-top: 1px solid #334155 !important;
}

/* Labels & text */
html[data-theme="dark"] body.customers.register .control-label,
html[data-theme="dark"] body.customers.register label,
html[data-theme="dark"] body.customers.register h1,
html[data-theme="dark"] body.customers.register h4 {
  color: #e2e8f0 !important;
}
html[data-theme="dark"] body.customers.register .register-heading {
  color: #f1f5f9 !important;
}

/* Form inputs */
html[data-theme="dark"] body.customers.register .form-control {
  background: #0f172a !important;
  border-color: #475569 !important;
  color: #f1f5f9 !important;
}
html[data-theme="dark"] body.customers.register .form-control:focus {
  background: #1e293b !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15) !important;
}
html[data-theme="dark"] body.customers.register .form-control::placeholder {
  color: #64748b !important;
}

/* Bootstrap-select on register */
html[data-theme="dark"] body.customers.register .bootstrap-select > .dropdown-toggle {
  background: #0f172a !important;
  border-color: #475569 !important;
  color: #f1f5f9 !important;
}
html[data-theme="dark"] body.customers.register .bootstrap-select .dropdown-menu {
  background: #1e293b !important;
  border-color: #334155 !important;
}
html[data-theme="dark"] body.customers.register .bootstrap-select .dropdown-menu li a {
  color: #cbd5e1 !important;
}
html[data-theme="dark"] body.customers.register .bootstrap-select .dropdown-menu li a:hover {
  background: #334155 !important;
  color: #f1f5f9 !important;
}
html[data-theme="dark"] body.customers.register .bootstrap-select .bs-searchbox input {
  background: #0f172a !important;
  border-color: #475569 !important;
  color: #f1f5f9 !important;
}

/* Dividers */
html[data-theme="dark"] body.customers.register hr {
  border-color: #334155 !important;
}

/* Error text */
html[data-theme="dark"] body.customers.register .text-danger {
  color: #f87171 !important;
}

/* Checkbox */
html[data-theme="dark"] body.customers.register .checkbox label,
html[data-theme="dark"] body.customers.register .checkbox a {
  color: #cbd5e1 !important;
}


/* ═══════════════════════════════════════════════════════════════
   FIXED EQUIPMENT STORE — Dark Mode Support
   body.customers.fe-store
   ═══════════════════════════════════════════════════════════════ */

/* Page background */
html[data-theme="dark"] body.customers.fe-store,
html[data-theme="dark"] body.customers.fe-cart {
  background: #0f172a !important;
  color: #e2e8f0 !important;
}

/* Navbar */
html[data-theme="dark"] body.customers.fe-store .navbar-default,
html[data-theme="dark"] body.customers.fe-cart .navbar-default {
  background: #0f172a !important;
  border-bottom: 1px solid rgba(241,245,249,0.08) !important;
}
html[data-theme="dark"] body.customers.fe-store .navbar-default .navbar-nav > li > a,
html[data-theme="dark"] body.customers.fe-cart .navbar-default .navbar-nav > li > a {
  color: #94a3b8 !important;
}
html[data-theme="dark"] body.customers.fe-store .navbar-default .navbar-nav > li.active > a,
html[data-theme="dark"] body.customers.fe-cart .navbar-default .navbar-nav > li.active > a {
  color: #f1f5f9 !important;
  background: rgba(255,255,255,0.08) !important;
  border-radius: 6px !important;
}

/* Product cards */
html[data-theme="dark"] body.customers.fe-store .product-cell {
  background: #1e293b !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
  border: 1px solid #334155;
}
html[data-theme="dark"] body.customers.fe-store .product-cell:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.5) !important;
}
html[data-theme="dark"] body.customers.fe-store .product-cell .title a {
  color: #e2e8f0 !important;
}
html[data-theme="dark"] body.customers.fe-store .product-cell .title a:hover {
  color: #60a5fa !important;
}
html[data-theme="dark"] body.customers.fe-store .product-cell .price {
  color: #f87171 !important;
}

/* Sidebar navigation */
html[data-theme="dark"] body.customers.fe-store .left_bar .nav-tabs--vertical {
  background: #1e293b !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
  border: 1px solid #334155;
}
html[data-theme="dark"] body.customers.fe-store .left_bar .nav-tabs--vertical .head {
  background: #0f172a !important;
}
html[data-theme="dark"] body.customers.fe-store .left_bar .nav-tabs--vertical .nav-item a {
  color: #94a3b8 !important;
}
html[data-theme="dark"] body.customers.fe-store .left_bar .nav-tabs--vertical .nav-item.active {
  background: rgba(37,99,235,0.15) !important;
  border-left-color: #3b82f6 !important;
}
html[data-theme="dark"] body.customers.fe-store .left_bar .nav-tabs--vertical .nav-item.active a {
  color: #60a5fa !important;
}

/* Search bar */
html[data-theme="dark"] body.customers.fe-store .right_bar .form-control {
  background: #1e293b !important;
  border-color: #475569 !important;
  color: #f1f5f9 !important;
}
html[data-theme="dark"] body.customers.fe-store .right_bar .form-control:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15) !important;
}

/* Page heading/title */
html[data-theme="dark"] body.customers.fe-store .head_title div {
  color: #64748b !important;
  border-bottom-color: #334155 !important;
}

/* Pagination buttons */
html[data-theme="dark"] body.customers.fe-store .btn_page {
  background: #1e40af !important;
  color: #f1f5f9 !important;
  border-color: #2563eb !important;
}
html[data-theme="dark"] body.customers.fe-store .btn_page.active {
  background: #1e293b !important;
  color: #60a5fa !important;
  border-color: #3b82f6 !important;
}

/* Add to cart / buy buttons */
html[data-theme="dark"] body.customers.fe-store .btn-success { background-color: #059669 !important; }
html[data-theme="dark"] body.customers.fe-store .btn-primary { background-color: #2563eb !important; }
html[data-theme="dark"] body.customers.fe-store .btn-default {
  background: #334155 !important;
  color: #94a3b8 !important;
  border-color: #475569 !important;
}

/* Product modal */
html[data-theme="dark"] body.customers.fe-store .modal-content {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #e2e8f0 !important;
}
html[data-theme="dark"] body.customers.fe-store .modal-content hr {
  border-color: #334155 !important;
}
html[data-theme="dark"] body.customers.fe-store .form-control {
  background: #0f172a !important;
  border-color: #475569 !important;
  color: #f1f5f9 !important;
}
html[data-theme="dark"] body.customers.fe-store .border-light {
  border-color: #334155 !important;
}

/* Cart page */
html[data-theme="dark"] body.customers.fe-cart .panel_s,
html[data-theme="dark"] body.customers.fe-cart .panel-body {
  background: #1e293b !important;
  border-color: #334155 !important;
}
html[data-theme="dark"] body.customers.fe-cart .panel-footer {
  background: #0f172a !important;
  border-top: 1px solid #334155 !important;
}
html[data-theme="dark"] body.customers.fe-cart table,
html[data-theme="dark"] body.customers.fe-cart .table {
  color: #e2e8f0 !important;
}
html[data-theme="dark"] body.customers.fe-cart .table > thead > tr > th {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #94a3b8 !important;
}
html[data-theme="dark"] body.customers.fe-cart .table > tbody > tr > td {
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}
html[data-theme="dark"] body.customers.fe-cart .table > tbody > tr:hover > td {
  background: rgba(255,255,255,0.03) !important;
}
html[data-theme="dark"] body.customers.fe-cart .form-control {
  background: #0f172a !important;
  border-color: #475569 !important;
  color: #f1f5f9 !important;
}
html[data-theme="dark"] body.customers.fe-cart hr {
  border-color: #334155 !important;
}
html[data-theme="dark"] body.customers.fe-cart .content {
  background: transparent !important;
}


/* ═══════════════════════════════════════════════════════════════
   KNOWLEDGE BASE PAGE — Dark Mode Support
   body.customers.customers-kb
   ═══════════════════════════════════════════════════════════════ */

/* Hero / search jumbotron */
html[data-theme="dark"] body.customers.customers-kb .kb-search-jumbotron {
  background: #0f172a !important;
  border-bottom: 1px solid rgba(241, 245, 249, 0.08) !important;
}

/* Search heading text */
html[data-theme="dark"] body.customers.customers-kb .kb-search-heading {
  color: #f1f5f9 !important;
}

/* Search input */
html[data-theme="dark"] body.customers.customers-kb .kb-search input[type="search"] {
  background: #1e293b !important;
  border-color: #475569 !important;
  color: #f1f5f9 !important;
}
html[data-theme="dark"] body.customers.customers-kb .kb-search input[type="search"]:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}
html[data-theme="dark"] body.customers.customers-kb .kb-search input[type="search"]::placeholder {
  color: #64748b !important;
}
html[data-theme="dark"] body.customers.customers-kb .kb-search-icon {
  color: #64748b !important;
}

/* Panel card (articles list) */
html[data-theme="dark"] body.customers.customers-kb .panel_s {
  background: #1e293b !important;
  border-color: #334155 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
}
html[data-theme="dark"] body.customers.customers-kb .panel-body {
  background: #1e293b !important;
}

/* Article category titles and links */
html[data-theme="dark"] body.customers.customers-kb .tw-text-neutral-800,
html[data-theme="dark"] body.customers.customers-kb h3 {
  color: #e2e8f0 !important;
}
html[data-theme="dark"] body.customers.customers-kb .tw-text-neutral-600,
html[data-theme="dark"] body.customers.customers-kb a.tw-text-neutral-600 {
  color: #94a3b8 !important;
}
html[data-theme="dark"] body.customers.customers-kb a.tw-text-neutral-600:hover,
html[data-theme="dark"] body.customers.customers-kb a:hover.tw-text-neutral-800 {
  color: #60a5fa !important;
}
html[data-theme="dark"] body.customers.customers-kb .tw-text-neutral-500 {
  color: #64748b !important;
}

/* Dividers between categories */
html[data-theme="dark"] body.customers.customers-kb .tw-divide-y > * + *,
html[data-theme="dark"] body.customers.customers-kb .tw-divide-neutral-200 > * + * {
  border-color: #334155 !important;
}

/* Badges (article count) */
html[data-theme="dark"] body.customers.customers-kb .badge.tw-bg-neutral-50 {
  background: #334155 !important;
  color: #94a3b8 !important;
}

/* "No articles found" text */
html[data-theme="dark"] body.customers.customers-kb p.no-margin {
  color: #94a3b8 !important;
}


/* ═══════════════════════════════════════════════════════════════
   FULL-VIEWPORT CENTERED LAYOUT
   fe-store, fe-cart, customers-kb — same as login page approach
   ═══════════════════════════════════════════════════════════════ */

/* Lock body scroll */
body.customers.fe-store,
body.customers.fe-cart,
body.customers.customers-kb {
  overflow: hidden;
}

/* #content fills viewport below navbar */
body.customers.fe-store #content,
body.customers.fe-cart #content,
body.customers.customers-kb #content {
  position: fixed !important;
  top: 60px !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  overflow-y: auto !important;
  width: auto !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Bootstrap containers: force explicit centering */
body.customers.fe-store #content > .container,
body.customers.fe-cart #content > .container,
body.customers.customers-kb #content > .container {
  flex-shrink: 0;
  width: 100% !important;
  max-width: 1170px !important;
  padding-top: 20px;
  padding-bottom: 20px;
  box-sizing: border-box;
}

/* Store: the row inside container must stay as floats (Bootstrap 3) */
body.customers.fe-store #content > .container > .row,
body.customers.fe-cart #content > .container > .row {
  display: block !important;
}

/* KB: hide empty alerts container to avoid extra space */
body.customers.customers-kb #content > .container:first-of-type {
  padding: 0 !important;
  min-height: 0;
}

/* KB: jumbotron (sits between the two containers) */
body.customers.customers-kb #content .kb-search-jumbotron {
  flex-shrink: 0;
  margin: 0 !important;
  padding: 40px 15px !important;
  text-align: center;
}

/* Cart: reset inner #wrapper — block layout, Bootstrap handles centering */
body.customers.fe-cart #content #wrapper {
  display: block !important;
  position: static !important;
  float: none !important;
}

/* Store/Cart: ensure Bootstrap's .row keeps normal float layout */
body.customers.fe-store #content .row,
body.customers.fe-cart #content .row {
  display: block;
}
body.customers.fe-store #content .row::after,
body.customers.fe-cart #content .row::after {
  content: '';
  display: table;
  clear: both;
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE — Fixed bottom toolbar
   .btn-bottom-toolbar has background:#fff hard-coded in style.css
   ═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .btn-bottom-toolbar {
  background: var(--fc-surface) !important;
  border-top: 1px solid var(--fc-border-default) !important;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .btn-bottom-toolbar,
[data-theme="dark"] .btn-bottom-toolbar .btn-toolbar-notice {
  color: var(--fc-text-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE — Bootstrap table contextual row overrides
   Bootstrap's tr.info / tr.warning use hard-coded light backgrounds
   (#d9edf7, #fcf8e3) that break dark mode — override them here.
   ═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .table > thead > tr > td.info,
[data-theme="dark"] .table > tbody > tr > td.info,
[data-theme="dark"] .table > tfoot > tr > td.info,
[data-theme="dark"] .table > thead > tr > th.info,
[data-theme="dark"] .table > tbody > tr > th.info,
[data-theme="dark"] .table > tfoot > tr > th.info,
[data-theme="dark"] .table > thead > tr.info > td,
[data-theme="dark"] .table > tbody > tr.info > td,
[data-theme="dark"] .table > tfoot > tr.info > td,
[data-theme="dark"] .table > thead > tr.info > th,
[data-theme="dark"] .table > tbody > tr.info > th,
[data-theme="dark"] .table > tfoot > tr.info > th {
  background-color: rgba(37, 99, 235, 0.15) !important;
  color: var(--fc-text-primary) !important;
}

[data-theme="dark"] .table-hover > tbody > tr > td.info:hover,
[data-theme="dark"] .table-hover > tbody > tr > th.info:hover,
[data-theme="dark"] .table-hover > tbody > tr.info:hover > td,
[data-theme="dark"] .table-hover > tbody > tr:hover > .info,
[data-theme="dark"] .table-hover > tbody > tr.info:hover > th {
  background-color: rgba(37, 99, 235, 0.25) !important;
}

[data-theme="dark"] .table > thead > tr > td.warning,
[data-theme="dark"] .table > tbody > tr > td.warning,
[data-theme="dark"] .table > tfoot > tr > td.warning,
[data-theme="dark"] .table > thead > tr > th.warning,
[data-theme="dark"] .table > tbody > tr > th.warning,
[data-theme="dark"] .table > tfoot > tr > th.warning,
[data-theme="dark"] .table > thead > tr.warning > td,
[data-theme="dark"] .table > tbody > tr.warning > td,
[data-theme="dark"] .table > tfoot > tr.warning > td,
[data-theme="dark"] .table > thead > tr.warning > th,
[data-theme="dark"] .table > tbody > tr.warning > th,
[data-theme="dark"] .table > tfoot > tr.warning > th {
  background-color: rgba(245, 158, 11, 0.15) !important;
  color: var(--fc-text-primary) !important;
}

[data-theme="dark"] .table-hover > tbody > tr > td.warning:hover,
[data-theme="dark"] .table-hover > tbody > tr > th.warning:hover,
[data-theme="dark"] .table-hover > tbody > tr.warning:hover > td,
[data-theme="dark"] .table-hover > tbody > tr:hover > .warning,
[data-theme="dark"] .table-hover > tbody > tr.warning:hover > th {
  background-color: rgba(245, 158, 11, 0.25) !important;
}

[data-theme="dark"] .table > thead > tr > td.success,
[data-theme="dark"] .table > tbody > tr > td.success,
[data-theme="dark"] .table > tfoot > tr > td.success,
[data-theme="dark"] .table > thead > tr > th.success,
[data-theme="dark"] .table > tbody > tr > th.success,
[data-theme="dark"] .table > tfoot > tr > th.success,
[data-theme="dark"] .table > thead > tr.success > td,
[data-theme="dark"] .table > tbody > tr.success > td,
[data-theme="dark"] .table > tfoot > tr.success > td,
[data-theme="dark"] .table > thead > tr.success > th,
[data-theme="dark"] .table > tbody > tr.success > th,
[data-theme="dark"] .table > tfoot > tr.success > th {
  background-color: rgba(16, 185, 129, 0.15) !important;
  color: var(--fc-text-primary) !important;
}

[data-theme="dark"] .table > thead > tr > td.danger,
[data-theme="dark"] .table > tbody > tr > td.danger,
[data-theme="dark"] .table > tfoot > tr > td.danger,
[data-theme="dark"] .table > thead > tr > th.danger,
[data-theme="dark"] .table > tbody > tr > th.danger,
[data-theme="dark"] .table > tfoot > tr > th.danger,
[data-theme="dark"] .table > thead > tr.danger > td,
[data-theme="dark"] .table > tbody > tr.danger > td,
[data-theme="dark"] .table > tfoot > tr.danger > td,
[data-theme="dark"] .table > thead > tr.danger > th,
[data-theme="dark"] .table > tbody > tr.danger > th,
[data-theme="dark"] .table > tfoot > tr.danger > th {
  background-color: rgba(239, 68, 68, 0.15) !important;
  color: var(--fc-text-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE — SYSTEM-WIDE COMPREHENSIVE FIXES
   All hard-coded light colors across style.css & perfex/style.css
   ═══════════════════════════════════════════════════════════════ */

/* --- Newsfeed like section --- */
[data-theme="dark"] #newsfeed .newsfeed_post .user-post-like {
  background: var(--fc-surface) !important;
  border-color: var(--fc-border-default) !important;
}

[data-theme="dark"] #newsfeed .newsfeed_post .user-comment.panel-footer {
  border-color: var(--fc-border-default) !important;
}

/* --- Disabled checklist textarea --- */
[data-theme="dark"] textarea[name="checklist-description"]:disabled {
  background: var(--fc-neutral-800) !important;
  color: var(--fc-text-tertiary) !important;
  border-color: var(--fc-border-default) !important;
}

/* --- Drag & drop nested lists (dd / dd3) --- */
[data-theme="dark"] .dd-handle:hover {
  background: var(--fc-neutral-700) !important;
  color: var(--fc-text-primary) !important;
}

[data-theme="dark"] #nestable2 .dd-handle {
  background: var(--fc-neutral-700) !important;
  border-color: var(--fc-border-default) !important;
  color: var(--fc-text-primary) !important;
}

[data-theme="dark"] #nestable2 .dd-handle:hover {
  background: var(--fc-neutral-600) !important;
}

[data-theme="dark"] .dd3-content {
  background: var(--fc-surface-raised) !important;
  border-color: var(--fc-border-default) !important;
  color: var(--fc-text-primary) !important;
}

[data-theme="dark"] .sub-items .dd3-content {
  background: var(--fc-surface) !important;
}

[data-theme="dark"] .dd3-handle {
  background: var(--fc-neutral-700) !important;
  border-color: var(--fc-border-default) !important;
}

[data-theme="dark"] .dd3-handle:hover {
  background: var(--fc-neutral-600) !important;
}

[data-theme="dark"] .dd3-handle:before {
  color: var(--fc-text-secondary) !important;
}

[data-theme="dark"] .dd-handle {
  background: var(--fc-surface-raised) !important;
  border-color: var(--fc-border-default) !important;
  color: var(--fc-text-primary) !important;
}

/* --- Announcement text --- */
[data-theme="dark"] .announcement small {
  color: var(--fc-text-tertiary) !important;
}

/* --- TinyMCE v4 dialog windows --- */
[data-theme="dark"] .mce-window-head {
  background: var(--fc-neutral-800) !important;
  border-bottom-color: var(--fc-border-default) !important;
  color: var(--fc-text-primary) !important;
}

[data-theme="dark"] .mce-window-body {
  background: var(--fc-surface) !important;
  color: var(--fc-text-primary) !important;
}

[data-theme="dark"] .mce-window .mce-textbox,
[data-theme="dark"] .mce-window input[type="text"] {
  background: var(--fc-neutral-800) !important;
  color: var(--fc-text-primary) !important;
  border-color: var(--fc-border-default) !important;
}

/* --- Dashboard s_table responsive wrapper --- */
[data-theme="dark"] .s_table.table-responsive {
  background: var(--fc-surface) !important;
}

/* --- Button gradient hover states (light gradient override) --- */
[data-theme="dark"] .s_table .table.items tbody > tr > td:not(:first-child) {
  background: var(--fc-neutral-800) !important;
  color: var(--fc-text-primary) !important;
}

/* --- Mention tags in comments --- */
[data-theme="dark"] span.mention {
  background-color: var(--fc-neutral-700) !important;
  color: var(--fc-primary-300) !important;
}

/* --- Perfex theme: utility white bg --- */
[data-theme="dark"] .bgwhite {
  background: var(--fc-surface) !important;
  border-color: var(--fc-border-default) !important;
}

/* --- Perfex theme: client portal navbar --- */
[data-theme="dark"] .navbar-default {
  background: var(--fc-surface) !important;
  border-bottom-color: var(--fc-border-default) !important;
}

[data-theme="dark"] .navbar-default .navbar-nav > li > a {
  color: var(--fc-text-secondary) !important;
}

[data-theme="dark"] .navbar-default .navbar-nav > li > a:hover,
[data-theme="dark"] .navbar-default .navbar-nav > li.active > a {
  color: var(--fc-primary-400) !important;
}

/* --- Perfex theme: Kanban task phase cards --- */
[data-theme="dark"] .tasks-phases ._task_wrapper {
  background: var(--fc-surface) !important;
  border-color: var(--fc-border-default) !important;
  color: var(--fc-text-primary) !important;
}

[data-theme="dark"] .tasks-phases ._task_wrapper:hover {
  background: var(--fc-surface-raised) !important;
}

/* --- Perfex theme: GDPR consent section --- */
[data-theme="dark"] .gdpr-right {
  background: var(--fc-surface) !important;
  border-color: var(--fc-border-default) !important;
  color: var(--fc-text-primary) !important;
}

/* --- Perfex theme: sticky preview header (invoices/proposals) --- */
[data-theme="dark"] .preview-sticky-header {
  background: var(--fc-surface) !important;
  border-bottom: 1px solid var(--fc-border-default) !important;
  box-shadow: 0 1px 15px 1px rgba(0, 0, 0, 0.4) !important;
}

/* --- Generic light-gradient button overrides --- */
[data-theme="dark"] a.btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning):not(.btn-info)[style*="background"],
[data-theme="dark"] button[style*="background: linear-gradient"] {
  background: var(--fc-surface-raised) !important;
  color: var(--fc-text-primary) !important;
  border-color: var(--fc-border-default) !important;
}

/* --- Panel footer backgrounds --- */
[data-theme="dark"] .panel-footer {
  background: var(--fc-neutral-800) !important;
  border-top-color: var(--fc-border-default) !important;
  color: var(--fc-text-secondary) !important;
}

/* --- Select2 dropdown in dark mode --- */
[data-theme="dark"] .select2-container--default .select2-selection--single,
[data-theme="dark"] .select2-container--default .select2-selection--multiple {
  background-color: var(--fc-neutral-800) !important;
  border-color: var(--fc-border-default) !important;
  color: var(--fc-text-primary) !important;
}

[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--fc-text-primary) !important;
}

[data-theme="dark"] .select2-dropdown {
  background-color: var(--fc-neutral-800) !important;
  border-color: var(--fc-border-default) !important;
}

[data-theme="dark"] .select2-container--default .select2-results__option {
  color: var(--fc-text-primary) !important;
}

[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--fc-primary-700) !important;
  color: #fff !important;
}

[data-theme="dark"] .select2-search--dropdown .select2-search__field {
  background: var(--fc-neutral-700) !important;
  border-color: var(--fc-border-default) !important;
  color: var(--fc-text-primary) !important;
}

/* --- Dropdown menus --- */
[data-theme="dark"] .dropdown-menu {
  background-color: var(--fc-neutral-800) !important;
  border-color: var(--fc-border-default) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .dropdown-menu > li > a {
  color: var(--fc-text-primary) !important;
}

[data-theme="dark"] .dropdown-menu > li > a:hover,
[data-theme="dark"] .dropdown-menu > li > a:focus {
  background-color: var(--fc-neutral-700) !important;
  color: var(--fc-text-primary) !important;
}

[data-theme="dark"] .dropdown-menu .divider {
  background-color: var(--fc-border-default) !important;
}

/* --- Typeahead / autocomplete dropdown --- */
[data-theme="dark"] .typeahead,
[data-theme="dark"] .tt-menu {
  background: var(--fc-neutral-800) !important;
  border-color: var(--fc-border-default) !important;
}

[data-theme="dark"] .tt-suggestion {
  color: var(--fc-text-primary) !important;
}

[data-theme="dark"] .tt-suggestion:hover,
[data-theme="dark"] .tt-suggestion.tt-cursor {
  background: var(--fc-neutral-700) !important;
}

/* --- Bootstrap popover --- */
[data-theme="dark"] .popover {
  background-color: var(--fc-neutral-800) !important;
  border-color: var(--fc-border-default) !important;
}

[data-theme="dark"] .popover-title {
  background-color: var(--fc-neutral-700) !important;
  border-bottom-color: var(--fc-border-default) !important;
  color: var(--fc-text-primary) !important;
}

[data-theme="dark"] .popover-content {
  color: var(--fc-text-secondary) !important;
}

/* --- Bootstrap tooltip --- */
[data-theme="dark"] .tooltip-inner {
  background-color: var(--fc-neutral-700) !important;
  color: var(--fc-text-primary) !important;
}

/* --- Code blocks & pre tags --- */
[data-theme="dark"] pre,
[data-theme="dark"] code {
  background: var(--fc-neutral-800) !important;
  border-color: var(--fc-border-default) !important;
  color: var(--fc-primary-300) !important;
}

/* --- Alert boxes --- */
[data-theme="dark"] .alert-success {
  background-color: rgba(16, 185, 129, 0.15) !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
  color: #6ee7b7 !important;
}

[data-theme="dark"] .alert-info {
  background-color: rgba(37, 99, 235, 0.15) !important;
  border-color: rgba(37, 99, 235, 0.3) !important;
  color: #93c5fd !important;
}

[data-theme="dark"] .alert-warning {
  background-color: rgba(245, 158, 11, 0.15) !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
  color: #fcd34d !important;
}

[data-theme="dark"] .alert-danger {
  background-color: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  color: #fca5a5 !important;
}

/* --- Progress bars --- */
[data-theme="dark"] .progress {
  background-color: var(--fc-neutral-700) !important;
}

/* --- Well / callout boxes --- */
[data-theme="dark"] .well {
  background-color: var(--fc-neutral-800) !important;
  border-color: var(--fc-border-default) !important;
  color: var(--fc-text-primary) !important;
}

/* --- List group (LIGHT mode — base Bootstrap left it un-themed) --- */
.list-group-item {
  border-color: var(--fc-border-default) !important;
  color: var(--fc-text-secondary) !important;
  transition: background-color var(--fc-duration-fast) var(--fc-ease-default),
              color var(--fc-duration-fast) var(--fc-ease-default);
}

.list-group-item:hover,
.list-group-item:focus {
  background-color: var(--fc-neutral-100) !important;
  color: var(--fc-text-primary) !important;
}

/* Active item → primary background; force readable text on it and its children */
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
  background-color: var(--fc-primary-500) !important;
  border-color: var(--fc-primary-500) !important;
  color: #fff !important;
}
.list-group-item.active .list-group-item-text,
.list-group-item.active small,
.list-group-item.active .text-muted {
  color: rgba(255, 255, 255, 0.85) !important;
}

a.list-group-item:hover {
  text-decoration: none;
}

/* --- List group --- */
[data-theme="dark"] .list-group-item {
  background-color: var(--fc-surface) !important;
  border-color: var(--fc-border-default) !important;
  color: var(--fc-text-primary) !important;
}

[data-theme="dark"] .list-group-item:hover,
[data-theme="dark"] .list-group-item:focus {
  background-color: var(--fc-surface-raised) !important;
}

[data-theme="dark"] .list-group-item.active {
  background-color: var(--fc-primary-700) !important;
  border-color: var(--fc-primary-700) !important;
}

/* --- Nav tabs --- */
[data-theme="dark"] .nav-tabs > li > a {
  color: var(--fc-text-secondary) !important;
  border-color: transparent !important;
}

[data-theme="dark"] .nav-tabs > li.active > a,
[data-theme="dark"] .nav-tabs > li.active > a:hover,
[data-theme="dark"] .nav-tabs > li.active > a:focus {
  background-color: var(--fc-surface) !important;
  border-color: var(--fc-border-default) var(--fc-border-default) transparent !important;
  color: var(--fc-text-primary) !important;
}

[data-theme="dark"] .nav-tabs {
  border-bottom-color: var(--fc-border-default) !important;
}

/* --- Pagination --- */
[data-theme="dark"] .pagination > li > a,
[data-theme="dark"] .pagination > li > span {
  background-color: var(--fc-surface) !important;
  border-color: var(--fc-border-default) !important;
  color: var(--fc-text-primary) !important;
}

[data-theme="dark"] .pagination > li > a:hover,
[data-theme="dark"] .pagination > li > span:hover {
  background-color: var(--fc-surface-raised) !important;
}

[data-theme="dark"] .pagination > .active > a,
[data-theme="dark"] .pagination > .active > span {
  background-color: var(--fc-primary-600) !important;
  border-color: var(--fc-primary-600) !important;
  color: #fff !important;
}

[data-theme="dark"] .pagination > .disabled > a,
[data-theme="dark"] .pagination > .disabled > span {
  background-color: var(--fc-neutral-800) !important;
  border-color: var(--fc-border-default) !important;
  color: var(--fc-text-disabled) !important;
}

/* --- Breadcrumb --- */
[data-theme="dark"] .breadcrumb {
  background-color: var(--fc-surface) !important;
  color: var(--fc-text-tertiary) !important;
}

[data-theme="dark"] .breadcrumb > li + li:before {
  color: var(--fc-text-disabled) !important;
}

/* --- Badge & label --- */
[data-theme="dark"] .badge {
  background-color: var(--fc-neutral-600) !important;
  color: var(--fc-text-primary) !important;
}

/* --- Input group addons --- */
[data-theme="dark"] .input-group-addon {
  background-color: var(--fc-neutral-700) !important;
  border-color: var(--fc-border-default) !important;
  color: var(--fc-text-secondary) !important;
}

/* --- Inline date pickers (bootstrap-datepicker) --- */
[data-theme="dark"] .datepicker table tr td,
[data-theme="dark"] .datepicker table tr th {
  color: var(--fc-text-primary) !important;
}

[data-theme="dark"] .datepicker table tr td.active,
[data-theme="dark"] .datepicker table tr td.active:hover {
  background: var(--fc-primary-600) !important;
  color: #fff !important;
}

[data-theme="dark"] .datepicker table tr td:hover,
[data-theme="dark"] .datepicker table tr th:hover {
  background: var(--fc-neutral-700) !important;
}

[data-theme="dark"] .datepicker-dropdown {
  background: var(--fc-neutral-800) !important;
  border-color: var(--fc-border-default) !important;
}

/* --- jQuery UI autocomplete --- */
[data-theme="dark"] .ui-autocomplete {
  background: var(--fc-neutral-800) !important;
  border-color: var(--fc-border-default) !important;
  color: var(--fc-text-primary) !important;
}

[data-theme="dark"] .ui-menu-item:hover,
[data-theme="dark"] .ui-state-focus {
  background: var(--fc-neutral-700) !important;
  color: var(--fc-text-primary) !important;
}

/* --- Colorpicker --- */
[data-theme="dark"] .colorpicker {
  background-color: var(--fc-neutral-800) !important;
  border-color: var(--fc-border-default) !important;
}

/* --- Bootstrap switch (toggle) --- */
[data-theme="dark"] .bootstrap-switch .bootstrap-switch-label {
  background-color: var(--fc-neutral-600) !important;
}

/* --- Tag input (tagsinput) --- */
[data-theme="dark"] .bootstrap-tagsinput {
  background-color: var(--fc-neutral-800) !important;
  border-color: var(--fc-border-default) !important;
  color: var(--fc-text-primary) !important;
}

/* --- Ticket / form panels on client portal --- */
[data-theme="dark"] .ticket-submitter-info {
  background: none !important;
}

/* --- Time picker --- */
[data-theme="dark"] .timepicker-picker table td a,
[data-theme="dark"] .timepicker-picker table td span {
  color: var(--fc-text-primary) !important;
}

[data-theme="dark"] .bootstrap-timepicker-widget {
  background: var(--fc-neutral-800) !important;
  border-color: var(--fc-border-default) !important;
}

[data-theme="dark"] .bootstrap-timepicker-widget table td input {
  background: var(--fc-neutral-700) !important;
  border-color: var(--fc-border-default) !important;
  color: var(--fc-text-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE — Tailwind important-modifier classes
   Tailwind's !class generates .\!class (escaped), not .class.
   We need separate overrides for !\!tw-bg-neutral-* variants.
   ═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .\!tw-bg-neutral-50,
[data-theme="dark"] .\!tw-bg-neutral-100,
[data-theme="dark"] .\!tw-bg-neutral-200 {
  background-color: var(--fc-surface) !important;
}

[data-theme="dark"] .\!tw-text-neutral-800,
[data-theme="dark"] .\!tw-text-neutral-700,
[data-theme="dark"] .\!tw-text-neutral-600 {
  color: var(--fc-text-primary) !important;
}

[data-theme="dark"] .\!tw-text-neutral-500,
[data-theme="dark"] .\!tw-text-neutral-400 {
  color: var(--fc-text-tertiary) !important;
}

[data-theme="dark"] .\!tw-border-white,
[data-theme="dark"] .\!tw-border-neutral-100,
[data-theme="dark"] .\!tw-border-neutral-200 {
  border-color: var(--fc-border-default) !important;
}

/* Header search input specific dark mode fix */
[data-theme="dark"] #search_input {
  background-color: var(--fc-neutral-800) !important;
  color: var(--fc-text-primary) !important;
  border-color: var(--fc-border-default) !important;
}

[data-theme="dark"] #search_input::placeholder {
  color: var(--fc-text-disabled) !important;
}

[data-theme="dark"] #top_search_button button {
  color: var(--fc-text-tertiary) !important;
}

[data-theme="dark"] #top_search_button button:hover {
  color: var(--fc-text-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE — input-group-btn styling
   ═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .input-group-btn > .btn,
[data-theme="dark"] .input-group-btn > .btn-default {
  background: var(--fc-neutral-700) !important;
  border-color: var(--fc-border-default) !important;
  color: var(--fc-text-primary) !important;
}

[data-theme="dark"] .input-group-btn > .btn:hover {
  background: var(--fc-neutral-600) !important;
}

/* ═══════════════════════════════════════════════════════════════
   SPACING FIXES — DataTables wrapper layout
   Ensure consistent spacing between controls and the table
   ═══════════════════════════════════════════════════════════════ */
.dataTables_wrapper > .row:first-child {
  margin-bottom: 0 !important;
}

.dataTables_wrapper .dataTables_filter {
  text-align: right;
  padding: 0 !important;
}

[dir="rtl"] .dataTables_wrapper .dataTables_filter {
  text-align: left;
}

.dataTables_wrapper .dataTables_length {
  padding: 0 !important;
}

.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label {
  margin-bottom: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap;
}

.dataTables_wrapper .row > div[class*="col-"] {
  padding-top: var(--fc-space-3) !important;
  padding-bottom: var(--fc-space-3) !important;
}

/* Bottom info row */
.dataTables_wrapper .dataTables_info {
  padding-top: var(--fc-space-3) !important;
  font-size: 12.5px;
}

/* ═══════════════════════════════════════════════════════════════
   SPACING FIXES — Form group consistent spacing
   ═══════════════════════════════════════════════════════════════ */
.form-group {
  margin-bottom: var(--fc-space-5) !important;
}

.form-group:last-child {
  margin-bottom: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   SPACING FIXES — RTL-aware utility classes
   Missing RTL overrides for mleft30, mleft40, pleft5, ptop*
   ═══════════════════════════════════════════════════════════════ */
[dir="rtl"] .mleft4 {
  margin-right: 4px !important;
  margin-left: 0 !important;
}

[dir="rtl"] .mleft40 {
  margin-right: 40px !important;
  margin-left: 0 !important;
}

[dir="rtl"] .pleft5 {
  padding-right: 5px !important;
  padding-left: 0 !important;
}

[dir="rtl"] .mright30 {
  margin-left: 30px !important;
  margin-right: 0 !important;
}

/* Remaining directional spacing classes used in views but NOT mirrored
   by Perfex base RTL (mleft2, mright2, pleft10, pright5, pleft0, pright0).
   The high-usage ones (mright5/mleft5/mright10…) are already flipped in
   assets/css/style.css — do NOT re-flip them here. */
[dir="rtl"] .mleft2 {
  margin-right: 2px !important;
  margin-left: 0 !important;
}

[dir="rtl"] .mright2 {
  margin-left: 2px !important;
  margin-right: 0 !important;
}

[dir="rtl"] .pleft10 {
  padding-right: 10px !important;
  padding-left: 0 !important;
}

[dir="rtl"] .pright5 {
  padding-left: 5px !important;
  padding-right: 0 !important;
}

/* Zero-padding utilities: mirror the physical side, revert the other so we
   don't assume a base gutter value (works for both columns and plain blocks) */
[dir="rtl"] .pleft0 {
  padding-right: 0 !important;
  padding-left: revert !important;
}

[dir="rtl"] .pright0 {
  padding-left: 0 !important;
  padding-right: revert !important;
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE — DataTables wrapper full fix
   ═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .dataTables_wrapper .dataTables_filter label,
[data-theme="dark"] .dataTables_wrapper .dataTables_length label {
  color: var(--fc-text-secondary) !important;
}

[data-theme="dark"] .dataTables_wrapper .dataTables_filter input {
  background: var(--fc-neutral-800) !important;
  color: var(--fc-text-primary) !important;
  border-color: var(--fc-border-default) !important;
}

[data-theme="dark"] .dataTables_wrapper .dataTables_filter input::placeholder {
  color: var(--fc-text-disabled) !important;
}

[data-theme="dark"] .dataTables_wrapper .dataTables_length select {
  background: var(--fc-neutral-800) !important;
  color: var(--fc-text-primary) !important;
  border-color: var(--fc-border-default) !important;
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE — Tailwind placeholder colors
   ═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .\!tw-placeholder-neutral-500::placeholder,
[data-theme="dark"] .tw-placeholder-neutral-500::placeholder {
  color: var(--fc-text-disabled) !important;
}

[data-theme="dark"] .focus\:\!tw-placeholder-neutral-600:focus::placeholder,
[data-theme="dark"] .hover\:\!tw-placeholder-neutral-600:hover::placeholder {
  color: var(--fc-text-tertiary) !important;
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE — FullCalendar fixes (si_timesheet, etc.)
   ═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .fc .fc-col-header-cell {
  background: var(--fc-neutral-800) !important;
  color: var(--fc-text-primary) !important;
}

[data-theme="dark"] .fc .fc-col-header-cell-cushion {
  color: var(--fc-text-primary) !important;
}

[data-theme="dark"] .fc .fc-daygrid-day {
  background: var(--fc-surface) !important;
  border-color: var(--fc-border-default) !important;
}

[data-theme="dark"] .fc .fc-daygrid-day.fc-day-other {
  background: var(--fc-surface-raised) !important;
}

[data-theme="dark"] .fc .fc-daygrid-day-number {
  color: var(--fc-text-secondary) !important;
}

[data-theme="dark"] .fc .fc-day-today {
  background: rgba(37, 99, 235, 0.15) !important;
}

[data-theme="dark"] .fc .fc-day-today .fc-daygrid-day-number {
  color: var(--fc-primary-400) !important;
  font-weight: 600;
}

[data-theme="dark"] .fc .fc-toolbar-title {
  color: var(--fc-text-primary) !important;
}

[data-theme="dark"] .fc .fc-button {
  background: var(--fc-neutral-700) !important;
  border-color: var(--fc-border-default) !important;
  color: var(--fc-text-primary) !important;
}

[data-theme="dark"] .fc .fc-button:hover {
  background: var(--fc-neutral-600) !important;
}

[data-theme="dark"] .fc .fc-button-primary:not(:disabled).fc-button-active,
[data-theme="dark"] .fc .fc-button-primary:not(:disabled):active {
  background: var(--fc-primary-500) !important;
  border-color: var(--fc-primary-500) !important;
  color: #fff !important;
}

[data-theme="dark"] .fc-theme-standard td,
[data-theme="dark"] .fc-theme-standard th {
  border-color: var(--fc-border-default) !important;
}

[data-theme="dark"] .fc .fc-scrollgrid {
  border-color: var(--fc-border-default) !important;
}

[data-theme="dark"] .fc .fc-scrollgrid-section-header th,
[data-theme="dark"] .fc .fc-scrollgrid-section-body td {
  border-color: var(--fc-border-default) !important;
}

[data-theme="dark"] .fc .fc-list-event:hover td {
  background: rgba(255, 255, 255, 0.03) !important;
}

[data-theme="dark"] .fc .fc-list-empty {
  background: var(--fc-surface) !important;
  color: var(--fc-text-tertiary) !important;
}

/* Fix hover on calendar days from ultimate_green_theme */
[data-theme="dark"] .fc-day:hover {
  background: var(--fc-surface-raised) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .feed-item:hover {
  background: var(--fc-surface-raised) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE — Sidebar user profile card fix
   The profile card uses tw-bg-white but is NOT inside ul.nav li.nav-header
   ═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .sidebar-user-profile .profile,
[data-theme="dark"] .sidebar .dropdown-toggle.profile {
  background: var(--fc-surface) !important;
  border-color: var(--fc-border-default) !important;
  color: var(--fc-text-primary) !important;
}

[data-theme="dark"] .sidebar-user-profile .profile span,
[data-theme="dark"] .sidebar .dropdown-toggle.profile span {
  color: var(--fc-text-primary) !important;
}

[data-theme="dark"] .sidebar-user-profile .profile .tw-text-neutral-500,
[data-theme="dark"] .sidebar-user-profile .profile .tw-text-neutral-300 {
  color: var(--fc-text-tertiary) !important;
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE — Handsontable fixes (hr_payroll, spreadsheets, etc.)
   ═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .handsontable .ht_master tr td,
[data-theme="dark"] .handsontable .ht_clone_top td,
[data-theme="dark"] .handsontable .ht_clone_left td,
[data-theme="dark"] .handsontable .ht_clone_top_left_corner td,
[data-theme="dark"] .handsontable .ht_clone_bottom td,
[data-theme="dark"] .handsontable .ht_clone_top th,
[data-theme="dark"] .handsontable .ht_clone_left th,
[data-theme="dark"] .handsontable .ht_clone_top_left_corner th,
[data-theme="dark"] .handsontable .ht_clone_bottom th,
[data-theme="dark"] .handsontable .ht_master th,
[data-theme="dark"] .handsontable thead th,
[data-theme="dark"] .handsontable th,
[data-theme="dark"] .handsontable td {
  background: var(--fc-surface) !important;
  color: var(--fc-text-secondary) !important;
  border-color: var(--fc-border-default) !important;
}

[data-theme="dark"] .handsontable .ht_master tr:nth-of-type(even) > td,
[data-theme="dark"] .handsontable .ht_master tr:nth-child(even) > td {
  background: var(--fc-surface-raised) !important;
}

[data-theme="dark"] .handsontable .ht_clone_top th,
[data-theme="dark"] .handsontable thead th.ht__highlight,
[data-theme="dark"] .handsontable .ht_clone_top_left_corner th {
  background: var(--fc-neutral-800) !important;
  color: var(--fc-text-primary) !important;
}

[data-theme="dark"] .handsontable .ht_master tr:hover td {
  background: rgba(37, 99, 235, 0.08) !important;
}

[data-theme="dark"] .handsontable .wtHolder,
[data-theme="dark"] .handsontable .htCore {
  background: var(--fc-surface) !important;
}

[data-theme="dark"] .handsontable .htCore td,
[data-theme="dark"] .handsontable .htCore th {
  border-color: var(--fc-border-default) !important;
}

[data-theme="dark"] .handsontable .changeType,
[data-theme="dark"] .handsontable .handsontableEditor {
  background: var(--fc-surface) !important;
  color: var(--fc-text-primary) !important;
}

/* Override module-specific hardcoded colors for spreadsheets */
[data-theme="dark"] #spreadsheet-advanced,
[data-theme="dark"] #spreadsheet-advanced td,
[data-theme="dark"] #spreadsheet-advanced th {
  background: var(--fc-surface) !important;
  color: var(--fc-text-secondary) !important;
  border-color: var(--fc-border-default) !important;
}

[data-theme="dark"] #spreadsheet-advanced thead th {
  background: var(--fc-neutral-800) !important;
  color: var(--fc-text-primary) !important;
}

[data-theme="dark"] #spreadsheet-advanced .odd td,
[data-theme="dark"] #spreadsheet-advanced .odd th {
  background: var(--fc-surface-raised) !important;
}

[data-theme="dark"] #spreadsheet-advanced tfoot th,
[data-theme="dark"] #spreadsheet-advanced tfoot td {
  background: var(--fc-neutral-800) !important;
  color: var(--fc-text-primary) !important;
}

[data-theme="dark"] #spreadsheet-advanced td a,
[data-theme="dark"] #spreadsheet-advanced td a:link,
[data-theme="dark"] #spreadsheet-advanced td a:visited {
  color: var(--fc-primary-400) !important;
}

[data-theme="dark"] #spreadsheet-advanced td a:hover,
[data-theme="dark"] #spreadsheet-advanced td a:focus {
  color: var(--fc-primary-300) !important;
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE — General module fixes (bg-white / hardcoded colors)
   ═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .hot.handsontable {
  background: var(--fc-surface) !important;
}

[data-theme="dark"] .htMenu.handsontable {
  background: var(--fc-surface) !important;
  border-color: var(--fc-border-default) !important;
}

[data-theme="dark"] .htMenu.handsontable td {
  background: var(--fc-surface) !important;
  color: var(--fc-text-secondary) !important;
}

[data-theme="dark"] .htMenu.handsontable td:hover {
  background: var(--fc-neutral-800) !important;
  color: var(--fc-text-primary) !important;
}

[data-theme="dark"] .htDropdownMenu.handsontable {
  background: var(--fc-surface) !important;
  border-color: var(--fc-border-default) !important;
}

[data-theme="dark"] .htDropdownMenu.handsontable td {
  background: var(--fc-surface) !important;
  color: var(--fc-text-secondary) !important;
}

[data-theme="dark"] .htDropdownMenu.handsontable td:hover {
  background: var(--fc-neutral-800) !important;
  color: var(--fc-text-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION: POLY UTILITIES WIDGETS DARK MODE FIXES
   ═══════════════════════════════════════════════════════════════ */

[data-theme="dark"] .poly-widgets-area {
  background: var(--fc-surface) !important;
  border-color: var(--fc-border-default) !important;
}

[data-theme="dark"] .poly-widgets-area .widget {
  background: transparent !important;
}

[data-theme="dark"] .poly-widgets-area .widget .header,
[data-theme="dark"] .poly-avaible-widgets .header {
  color: var(--fc-text-primary) !important;
}

[data-theme="dark"] .poly-widget-description {
  color: var(--fc-text-secondary) !important;
}

[data-theme="dark"] .poly-widget-list {
  border-color: var(--fc-border-default) !important;
}

[data-theme="dark"] .poly-widget-list li {
  background: var(--fc-neutral-800) !important;
  border-color: var(--fc-border-default) !important;
  color: var(--fc-text-primary) !important;
}

[data-theme="dark"] .ui-widget-default {
  background: var(--fc-neutral-800) !important;
  border-color: var(--fc-border-default) !important;
  color: var(--fc-text-primary) !important;
}

[data-theme="dark"] .ui-widget-default .widget span {
  color: var(--fc-text-primary) !important;
}

[data-theme="dark"] .ui-widget-default input[type="text"],
[data-theme="dark"] .ui-widget-default textarea {
  background: var(--fc-background) !important;
  color: var(--fc-text-primary) !important;
  border-color: var(--fc-border-default) !important;
}

[data-theme="dark"] .ui-widget-default label {
  color: var(--fc-text-secondary) !important;
}

[data-theme="dark"] .poly-widget-image-add {
  border-color: var(--fc-border-default) !important;
  color: var(--fc-text-tertiary) !important;
}

[data-theme="dark"] .widget-delete,
[data-theme="dark"] .widget-clone,
[data-theme="dark"] .widget-close {
  color: var(--fc-primary-400) !important;
}